globuswebcomponents 0.3.5 → 0.3.7

package/dist/collection/components/gb-badges/gb-badges.js

@@ -3,11 +3,14 @@ export class GbBadges {
     constructor() {
         this.size = undefined;
         this.icon = undefined;
-        this.iconLeadingSrc = undefined;
-        this.iconTrailingSrc = undefined;
+        this.iconLeadingSwap = undefined;
+        this.iconTrailingSwap = undefined;
+        this.flagSwap = undefined;
         this.color = undefined;
         this.type = undefined;
         this.closeButton = false;
+        this.leadingIconContent = undefined;
+        this.trailingIconContent = undefined;
     }
     getDotColor(color) {
         const colorMap = {
@@ -21,7 +24,46 @@ export class GbBadges {
             'pink': '#DD2590',
             'purple': '#6938EF',
         };
-        return colorMap[color] || 'currentColor';
+        if (this.type === 'badge_modern') {
+            return colorMap[color] || color;
+        }
+        return 'currentColor';
+    }
+    async componentWillLoad() {
+        if (this.iconLeadingSwap) {
+            const iconLeadingSrc = getAssetPath(`assets/${this.iconLeadingSwap}.svg`);
+            this.leadingIconContent = await this.fetchSvgContent(iconLeadingSrc);
+        }
+        if (this.iconTrailingSwap) {
+            const iconTrailingSrc = getAssetPath(`assets/${this.iconTrailingSwap}.svg`);
+            this.trailingIconContent = await this.fetchSvgContent(iconTrailingSrc);
+        }
+    }
+    async fetchSvgContent(src) {
+        try {
+            const response = await fetch(src);
+            if (response.ok) {
+                return await response.text();
+            }
+            return '';
+        }
+        catch (error) {
+            console.error('Error fetching SVG:', error);
+            return '';
+        }
+    }
+    getTextClass() {
+        switch (this.size) {
+            case 'sm': return 'text-xs-medium';
+            case 'md': return 'text-sm-medium';
+            case 'lg': return 'text-sm-medium';
+        }
+    }
+    componentDidLoad() {
+        const slottedContent = this.el.querySelector('p');
+        if (slottedContent) {
+            slottedContent.classList.add(this.getTextClass());
+        }
     }
     render() {
         const classes = {
@@ -30,11 +72,9 @@ export class GbBadges {
             [this.color]: true,
             [this.size]: true
         };
-        const countryIconSrc = getAssetPath(`assets/country-icon.svg`);
-        const iconLeadingSrc = getAssetPath(`assets/${this.iconLeadingSrc}.svg`);
-        const iconTrailingSrc = getAssetPath(`assets/${this.iconTrailingSrc}.svg`);
+        const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);
         const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';
-        return (h("div", { key: '2221c3f1cc0daa4ecde9c41b26b328b0cede9602', class: classes }, this.icon === 'dot' && (h("svg", { key: 'f0153b88d42d351030544fb045d0cd60c13a0ad2', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: dotColor }, h("circle", { key: 'cae185451ccbbf686714439230fe1c070f610cf5', cx: "4", cy: "4", r: "3" }))), this.icon === 'icon_leading' && this.iconLeadingSrc && (h("div", { key: '9a57bc6e5aedc78e04f8c444d7c7c1d1404fbde9', class: "icon left-icon" }, h("img", { key: '4c80bec6c4d25a89253b5e0fa6525f9073e1c29f', src: iconLeadingSrc, alt: "Leading Icon" }))), this.icon === 'country' && (h("div", { key: '4a0948bda9eb24c8235008f7c3f650fdd726e61e', class: "icon left-icon" }, h("img", { key: 'b43840a05af9c32f1e47a833ed92b98634e499d9', src: countryIconSrc, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: 'ca6e6e742436221e45a0f3d6c0f1d585a78480a1', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("img", { key: 'e9ea1d12a35a8b83ffedc23db76f6d2cbbed74d9', src: "./build/assets/avatar_pic.jpg", alt: "Avatar Icon" }))), this.icon !== 'only' && (h("span", { key: 'de20ca55d7210854d1efe24501e575e1f0572271', class: "label" }, h("slot", { key: 'e840a906bdd3e85e633a3b299d9a512950f9b190' }))), this.icon === 'icon_trailing' && this.iconTrailingSrc && (h("div", { key: 'f906eca057eebe330c4e03c43d3110915c2bb069', class: "icon right-icon" }, h("img", { key: '136c6bde6175b8032500e18428a4bceda2d11bc6', src: iconTrailingSrc, alt: "Trailing Icon" }))), this.icon === 'only' && (h("div", { key: 'c5dadc586165af7d774f27b93ded71497a11a707', id: "icon-only" }, h("svg", { key: '407df597ea5a1e827c86d37b2642c8862dec3cf7', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", stroke: "#DC6803" }, h("path", { key: 'e4461f38f7fd936a5653e5150c26889a64465997', d: "M6 2L6 10M10 6L2 6", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.closeButton && this.icon !== 'only' && h("gb-badge-close", { key: 'a2630490c534950585dbc73c66f47ca3e6e0bedc', color: this.color, type: 'rounded' })));
+        return (h("div", { key: '4f4a534913307a8cc7d92dbb20270fa5e5bb4fac', class: classes }, this.icon === 'dot' && (h("svg", { key: 'a0f248383ccfceb6062737ca21b4cde185894cab', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: dotColor }, h("circle", { key: 'cedcfc90cb32d893bdcfa3866f9710e7139f5ca0', cx: "4", cy: "4", r: "3" }))), this.icon === 'icon_leading' && this.iconLeadingSwap && (h("div", { key: 'ceab882b4c861fd71b12973daa76c76a534d1611', class: "icon left-icon", innerHTML: this.leadingIconContent, style: { color: this.color } })), this.icon === 'country' && (h("div", { key: '5dca91374f2b36cf1213bafc415c0e9bec0cb734', class: "icon left-icon" }, h("img", { key: 'a71115803504085a71080e71401292754dd95189', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '0f879c1850cde54b19117d2c32c9e9011b711674', class: "avatar-icon", size: "xxs", "status-icon": "false" }, h("slot", { key: '7b261a325cbfb16fe6d364908dc04231bd09369c', name: 'image', slot: 'image' }))), this.icon !== 'only' && (h("slot", { key: '3b554ed2e11542a2c2d46f36a6f72d7bf1408f25' })), this.icon === 'icon_trailing' && this.iconTrailingSwap && (h("div", { key: '8eca1e50f0bb8f146f5c2012475bcdf7c0820be8', class: "icon right-icon", innerHTML: this.trailingIconContent, style: { color: this.color } })), this.icon === 'only' && (h("div", { key: 'ca34697b3a978a902edbc90438aefb0a940fcc6f', id: "icon-only" }, h("svg", { key: 'fd3f4242f5821976ffcc15161e42d913272ebaf9', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", stroke: dotColor }, h("path", { key: 'cc6adec07488a9a89c3180d77bf58680c4c17a91', d: "M6 2L6 10M10 6L2 6", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.closeButton && this.icon !== 'only' && h("gb-badge-close", { key: 'c95a3329c1723e12a5b37f78bcab61e6650cca29', color: this.color, type: 'rounded' })));
     }
     static get is() { return "gb-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -48,6 +88,7 @@ export class GbBadges {
             "$": ["gb-badges.css"]
         };
     }
+    static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
             "size": {
@@ -55,7 +96,7 @@ export class GbBadges {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralSizes",
-                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
                     "references": {
                         "GeneralSizes": {
                             "location": "import",
@@ -90,7 +131,7 @@ export class GbBadges {
                 "attribute": "icon",
                 "reflect": false
             },
-            "iconLeadingSrc": {
+            "iconLeadingSwap": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -104,10 +145,10 @@ export class GbBadges {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon-leading-src",
+                "attribute": "icon-leading-swap",
                 "reflect": false
             },
-            "iconTrailingSrc": {
+            "iconTrailingSwap": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -121,7 +162,24 @@ export class GbBadges {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "icon-trailing-src",
+                "attribute": "icon-trailing-swap",
+                "reflect": false
+            },
+            "flagSwap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "flag-swap",
                 "reflect": false
             },
             "color": {
@@ -129,7 +187,7 @@ export class GbBadges {
                 "mutable": false,
                 "complexType": {
                     "original": "GeneralColors",
-                    "resolved": "\"discovery\" | \"error\" | \"gray\" | \"information\" | \"pink\" | \"primary\" | \"purple\" | \"success\" | \"warning\"",
+                    "resolved": "\"default\" | \"discovery\" | \"error\" | \"gray\" | \"information\" | \"pink\" | \"primary\" | \"purple\" | \"success\" | \"warning\"",
                     "references": {
                         "GeneralColors": {
                             "location": "import",
@@ -184,5 +242,12 @@ export class GbBadges {
             }
         };
     }
+    static get states() {
+        return {
+            "leadingIconContent": {},
+            "trailingIconContent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-badges.js.map

package/dist/collection/components/gb-badges/gb-badges.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-badges.js","sourceRoot":"","sources":["../../../src/components/gb-badges/gb-badges.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-badge',\r\n  styleUrl: 'gb-badges.css',\r\n  shadow: true\r\n})\r\nexport class GbBadges {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() icon: 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only';\r\n  @Prop() iconLeadingSrc?: string; \r\n  @Prop() iconTrailingSrc?: string;\r\n  @Prop() color: GeneralColors;\r\n  @Prop() type: 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n  @Prop() closeButton?: boolean = false;\r\n\r\n  private getDotColor(color: GeneralColors): string {\r\n    const colorMap = {\r\n      'gray': '#4B5565',\r\n      'primary': '#212C65',\r\n      'error': '#B51726',\r\n      'warning': '#DC6803',\r\n      'success': '#079455',\r\n      'discovery': '#0BA5EC',\r\n      'information': '#064E94',\r\n      'pink': '#DD2590',\r\n      'purple': '#6938EF',\r\n    };\r\n    return colorMap[color] || 'currentColor';\r\n  }\r\n\r\n  render() {\r\n    const classes = {\r\n      'badge': true,\r\n      [this.type]: true,\r\n      [this.color]: true,\r\n      [this.size]: true\r\n    };\r\n\r\n    const countryIconSrc = getAssetPath(`assets/country-icon.svg`);\r\n    const iconLeadingSrc = getAssetPath(`assets/${this.iconLeadingSrc}.svg`);\r\n    const iconTrailingSrc = getAssetPath(`assets/${this.iconTrailingSrc}.svg`);\r\n\r\n    const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';\r\n\r\n    return (\r\n      <div class={classes}>\r\n        {this.icon === 'dot' && (           \r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill={dotColor}>\r\n            <circle cx=\"4\" cy=\"4\" r=\"3\" />\r\n          </svg>\r\n        )}\r\n        {this.icon === 'icon_leading' && this.iconLeadingSrc && (\r\n          <div class=\"icon left-icon\">\r\n            <img src={iconLeadingSrc} alt=\"Leading Icon\" />\r\n          </div>\r\n        )}\r\n        {this.icon === 'country' && (\r\n          <div class=\"icon left-icon\">\r\n            <img src={countryIconSrc} alt=\"Country Icon\" />\r\n          </div>\r\n        )}\r\n        {this.icon === 'avatar' && (\r\n          <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n            <img src=\"./build/assets/avatar_pic.jpg\" alt=\"Avatar Icon\" />\r\n          </gb-avatar>\r\n        )}\r\n        {this.icon !== 'only' && (\r\n          <span class=\"label\">\r\n            <slot></slot>\r\n          </span>\r\n        )}\r\n        {this.icon === 'icon_trailing' && this.iconTrailingSrc && (\r\n          <div class=\"icon right-icon\">\r\n            <img src={iconTrailingSrc} alt=\"Trailing Icon\" />\r\n          </div>\r\n        )}\r\n        {this.icon === 'only' &&(\r\n          <div id=\"icon-only\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" stroke=\"#DC6803\">\r\n              <path d=\"M6 2L6 10M10 6L2 6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          </div>\r\n        )}\r\n        {this.closeButton && this.icon !== 'only' && <gb-badge-close color={this.color} type='rounded'></gb-badge-close>}\r\n      </div>\r\n    );    \r\n  }    \r\n}\r\n"]}
+{"version":3,"file":"gb-badges.js","sourceRoot":"","sources":["../../../src/components/gb-badges/gb-badges.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, getAssetPath, h, State, Element } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-badge',\r\n  styleUrl: 'gb-badges.css',\r\n  shadow: true,\r\n  assetsDirs: ['assets']\r\n})\r\nexport class GbBadges {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() icon: 'dot' | 'avatar' | 'icon_leading' | 'icon_trailing' | 'country' | 'only';\r\n  @Prop() iconLeadingSwap?: string; \r\n  @Prop() iconTrailingSwap?: string;\r\n  @Prop() flagSwap: string;\r\n  @Prop() color: GeneralColors;\r\n  @Prop() type: 'pill_color' | 'pill_outline' | 'badge_color' | 'badge_modern';\r\n  @Prop() closeButton?: boolean = false;\r\n\r\n  @State() leadingIconContent: string;\r\n  @State() trailingIconContent: string;\r\n  @Element() el: HTMLElement;\r\n\r\n  private getDotColor(color: GeneralColors): string {\r\n    const colorMap = {\r\n      'gray': '#4B5565',\r\n      'primary': '#212C65',\r\n      'error': '#B51726',\r\n      'warning': '#DC6803',\r\n      'success': '#079455',\r\n      'discovery': '#0BA5EC',\r\n      'information': '#064E94',\r\n      'pink': '#DD2590',\r\n      'purple': '#6938EF',\r\n    };\r\n    \r\n    if (this.type === 'badge_modern') {\r\n      return colorMap[color] || color;\r\n    }\r\n    \r\n    return 'currentColor';\r\n  }\r\n  \r\n\r\n  async componentWillLoad() {\r\n    if (this.iconLeadingSwap) {\r\n      const iconLeadingSrc = getAssetPath(`assets/${this.iconLeadingSwap}.svg`);\r\n      this.leadingIconContent = await this.fetchSvgContent(iconLeadingSrc);\r\n    }\r\n    \r\n    if (this.iconTrailingSwap) {\r\n      const iconTrailingSrc = getAssetPath(`assets/${this.iconTrailingSwap}.svg`);\r\n      this.trailingIconContent = await this.fetchSvgContent(iconTrailingSrc);\r\n    }\r\n  }\r\n\r\n  private async fetchSvgContent(src: string): Promise<string> {\r\n    try {\r\n      const response = await fetch(src);\r\n      if (response.ok) {\r\n        return await response.text();\r\n      }\r\n      return '';\r\n    } catch (error) {\r\n      console.error('Error fetching SVG:', error);\r\n      return '';\r\n    }\r\n  }\r\n\r\n  getTextClass() {\r\n    switch (this.size) {\r\n      case 'sm' : return 'text-xs-medium';\r\n      case 'md' : return 'text-sm-medium';\r\n      case 'lg' : return 'text-sm-medium';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedContent = this.el.querySelector('p');\r\n\r\n    if(slottedContent) {\r\n      slottedContent.classList.add(this.getTextClass());\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const classes = {\r\n      'badge': true,\r\n      [this.type]: true,\r\n      [this.color]: true,\r\n      [this.size]: true\r\n    };\r\n\r\n    const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);\r\n    const dotColor = this.type === 'badge_modern' ? this.getDotColor(this.color) : 'currentColor';\r\n\r\n    return (\r\n      <div class={classes}>\r\n        {this.icon === 'dot' &&  (           \r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill={dotColor}>\r\n            <circle cx=\"4\" cy=\"4\" r=\"3\" />\r\n          </svg>\r\n        )}\r\n        {this.icon === 'icon_leading' && this.iconLeadingSwap && (\r\n          <div class=\"icon left-icon\" innerHTML={this.leadingIconContent} style={{ color: this.color }}></div>\r\n        )}\r\n        {this.icon === 'country' && (\r\n          <div class=\"icon left-icon\">\r\n            <img src={flagSwap} alt=\"Country Icon\" />\r\n          </div>\r\n        )}\r\n        {this.icon === 'avatar' && (\r\n          <gb-avatar class=\"avatar-icon\" size=\"xxs\" status-icon=\"false\">\r\n            <slot name='image' slot='image'></slot>\r\n          </gb-avatar>\r\n        )}\r\n        {this.icon !== 'only' && (\r\n            <slot></slot>\r\n        )}\r\n        {this.icon === 'icon_trailing' && this.iconTrailingSwap && (\r\n          <div class=\"icon right-icon\" innerHTML={this.trailingIconContent} style={{ color: this.color }}></div>\r\n        )}\r\n        {this.icon === 'only' &&(\r\n          <div id=\"icon-only\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" stroke={dotColor}>\r\n              <path d=\"M6 2L6 10M10 6L2 6\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          </div>\r\n        )}\r\n        {this.closeButton && this.icon !== 'only' && <gb-badge-close color={this.color} type='rounded'></gb-badge-close>}\r\n      </div>\r\n    );    \r\n  }    \r\n}\r\n"]}