add width to badge

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schwarzit/runs-on-stackit",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "With the STACKIT-Badge you can mark internal and external websites and applications that run on, are sponsored or supported by STACKIT.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -11,8 +11,7 @@
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/runs-on-stackit/runs-on-stackit.js",
   "files": [
-    "dist/",
-    "loader/"
+    "dist/"
   ],
   "scripts": {
     "build": "stencil build --docs",

src/components.d.ts

@@ -15,6 +15,7 @@ export namespace Components {
           * To use runs-on-stackit-badge or runson = Runs On badge poweredby = Powered By color badge
          */
         "badgeType": "badge" | "ribbon" | "flag";
+        "badgeWidth": any;
         /**
           * To use cd instead local assets
          */
@@ -46,6 +47,7 @@ declare namespace LocalJSX {
           * To use runs-on-stackit-badge or runson = Runs On badge poweredby = Powered By color badge
          */
         "badgeType"?: "badge" | "ribbon" | "flag";
+        "badgeWidth"?: any;
         /**
           * To use cd instead local assets
          */

src/components/stackit-badge/readme.md

@@ -0,0 +1,21 @@
+# stackit-badge
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property      | Attribute      | Description                                                                                  | Type                              | Default     |
+| ------------- | -------------- | -------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
+| `badgeColor`  | `badge-color`  | Define which badge color to use. yellow = yellow color badge petrol = petrol color badge     | `"petrol" \| "white" \| "yellow"` | `'petrol'`  |
+| `badgeType`   | `badge-type`   | To use runs-on-stackit-badge or runson = Runs On badge poweredby = Powered By color badge    | `"badge" \| "flag" \| "ribbon"`   | `'badge'`   |
+| `badgeWidth`  | `badge-width`  |                                                                                              | `any`                             | `undefined` |
+| `cdn`         | `cdn`          | To use cd instead local assets                                                               | `boolean`                         | `true`      |
+| `hostingType` | `hosting-type` | To use runs-on or powered-by badge runson = Runs On badge poweredby = Powered By color badge | `"poweredby" \| "runson"`         | `'runson'`  |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

src/components/stackit-badge/stackit-badge.tsx

@@ -1,4 +1,4 @@
-import {Component, Prop, h, getAssetPath} from '@stencil/core';
+import {Component, Prop, h, getAssetPath, Host} from '@stencil/core';
 
 @Component({
   tag: 'stackit-badge',
@@ -33,6 +33,8 @@ export class STACKITBadgeComponent {
    */
   @Prop() readonly badgeColor: 'petrol' | 'white' | 'yellow' = 'petrol';
 
+  @Prop() readonly badgeWidth;
+
   private getBadgeType() {
     switch (this.badgeType) {
       case 'badge':
@@ -78,9 +80,13 @@ export class STACKITBadgeComponent {
 
   render() {
     return (
-      <a href="https://stackit.de" title="STACKIT">
-        <img width={this.badgeType === 'badge' ? "200" : "96"} src={this.getSrc()}/>
-      </a>
+      <Host>
+        <a href="https://stackit.de" title="STACKIT">
+          <img
+            width={this.badgeType === 'badge' ? (this.badgeWidth ? this.badgeWidth : "200") : (this.badgeWidth ? this.badgeWidth : "96")}
+            src={this.getSrc()}/>
+        </a>
+      </Host>
     );
   }
 }

src/index.html

@@ -37,6 +37,11 @@ <h2>Badge</h2>
       <br>
       <br>
       <stackit-badge hosting-type="runson" badge-color="yellow"></stackit-badge>
+      <br>
+      <br>
+      <stackit-badge badge-width="50"></stackit-badge>
+      <stackit-badge badge-width="100"></stackit-badge>
+      <stackit-badge badge-width="250"></stackit-badge>
     </div>
   </div>
   <br>

stencil.config.ts

@@ -5,8 +5,7 @@ export const config: Config = {
   taskQueue: 'async',
   outputTargets: [
     {
-      type: 'dist',
-      esmLoaderPath: '../loader'
+      type: 'dist'
     },
     {
       type: 'docs-readme'