npm - globuswebcomponents - Versions diffs - 0.3.4 → 0.3.6 - Mend

globuswebcomponents 0.3.4 → 0.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (501) hide show

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

@@ -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": {
@@ -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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-badges.js","sourceRoot":"","sources":["../../../src/components/gb-badges/gb-badges.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;~~AAQjE~~,MAAM,OAAO,QAAQ~~;;;;;;;;2BAOa~~,KAAK~~;;IAE7B~~,WAAW,CAAC,KAAoB;QACtC,MAAM,QAAQ,GAAG;YACf,MAAM,EAAE,SAAS;YACjB,SAAS,EAAE,SAAS;YACpB,OAAO,EAAE,SAAS;YAClB,SAAS,EAAE,SAAS;YACpB,SAAS,EAAE,SAAS;YACpB,WAAW,EAAE,SAAS;YACtB,aAAa,EAAE,SAAS;YACxB,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,SAAS;SACpB,CAAC;~~QACF~~,OAAO,QAAQ,CAAC,KAAK,CAAC,IAAI,cAAc,CAAC;~~IAC3C~~,CAAC;~~IAED~~,~~MAAM~~;~~QACJ~~,MAAM,~~OAAO~~,GAAG~~;YACd~~,~~OAAO~~,~~EAAE~~,IAAI;~~YACb~~,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;~~YACjB~~,CAAC,IAAI,CAAC,KAAK,CAAC,~~EAAE~~,IAAI;~~YAClB~~,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;~~SAClB~~,CAAC;~~QAEF~~,MAAM,cAAc,GAAG,~~YAAY~~,CAAC,~~yBAAyB~~,CAAC,CAAC;~~QAC/D~~,~~MAAM~~,cAAc,GAAG,YAAY,CAAC,~~UAAU~~,~~IAAI~~,CAAC,~~cAAc~~,MAAM,CAAC,CAAC;~~QACzE~~,MAAM,~~eAAe~~,GAAG,YAAY,CAAC,UAAU,IAAI,CAAC,~~eAAe~~,MAAM,CAAC,CAAC;~~QAE3E~~,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC;QAE9F,OAAO,CACL,4DAAK,KAAK,EAAE,OAAO;YAChB,IAAI,CAAC,IAAI,KAAK,KAAK,~~IAAI~~,~~CACtB~~,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAE,QAAQ;gBAC3F,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,GAAG,CAC1B,CACP;YACA,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,IAAI,CAAC,~~cAAc~~,IAAI,~~CACtD~~,4DAAK,KAAK,EAAC,gBAAgB~~;gBACzB~~,~~4DAAK~~,~~GAAG~~,EAAE,~~cAAc~~,EAAE,~~GAAG~~,~~EAAC~~,~~cAAc~~,~~GAAG~~,~~CAC3C~~,~~CACP~~;YACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,4DAAK,GAAG,EAAE,~~cAAc~~,EAAE,GAAG,EAAC,cAAc,GAAG,~~CAC3C~~,CACP;YACA,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CACzB,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,~~IAAI~~,iBAAa,OAAO;~~gBAC1D~~,~~4DAAK~~,~~GAAG~~,EAAC~~,+BAA+B~~,EAAC,~~GAAG~~,EAAC,~~aAAa~~,~~GAAG~~,~~CACnD~~,CACb;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,~~CACvB~~,~~6DAAM,KAAK,EAAC,OAAO;gBACjB,~~8DAAa,~~CACR,CACR~~;YACA,IAAI,CAAC,IAAI,KAAK,eAAe,IAAI,IAAI,CAAC,~~eAAe~~,IAAI,~~CACxD~~,4DAAK,KAAK,EAAC,iBAAiB~~;gBAC1B~~,~~4DAAK~~,~~GAAG~~,EAAE,~~eAAe~~,EAAE,~~GAAG~~,~~EAAC~~,~~eAAe~~,~~GAAG~~,~~CAC7C~~,~~CACP~~;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAG,CACtB,4DAAK,EAAE,EAAC,WAAW;gBACjB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,~~EAAC~~,~~SAAS~~;oBACjG,6DAAM,CAAC,EAAC,oBAAoB,kBAAc,KAAK,oBAAgB,OAAO,qBAAiB,OAAO,GAAE,CAC5F,CACF,CACP;YACA,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,uEAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,SAAS,GAAkB,CAC5G,CACP,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","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"]}
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, 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"]}

package/dist/collection/components/gb-btn/gb-btn.css CHANGED Viewed

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
     /* --------------Link color--------------- */
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
     /* ----------------Skeleton Color --------------- */
@@ -2479,7 +2552,6 @@ button {
   cursor: pointer;
   border-radius: var(--rounded-sm);
   width: 100%;
-  text-align: center;
 }
 button.only{

package/dist/collection/components/gb-btn/gb-btn.js CHANGED Viewed

@@ -73,7 +73,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: '5ce8f15ccadb40bd2979bbd9610536aeb91bd326', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: 'e29c4cb74b53e28be68972244c38b262e1d2548c' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: 'f673710120a9e8c03c199363cffb87d108a01527', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: 'a4ce29a2407123f159bfc8ac523dc755e83657f2' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
     }
     static get is() { return "gb-btn"; }
     static get originalStyleUrls() {
@@ -93,7 +93,7 @@ export class GbButton {
                 "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",

package/dist/collection/components/gb-button/gb-button.css CHANGED Viewed

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
     /* --------------Link color--------------- */
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-button/gb-button.js CHANGED Viewed

@@ -68,7 +68,7 @@ export class MyButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: '42615165ac569c01eee99ea5460f77574fab35e7', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '395113b88e0f48f39928749fe0cdfea25a76a3b3' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: '7d7219be0cedb93cd668ff3cd857ad85833df86c', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '549b0c31e2c6939accfe772ffec433b28840ffd2' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
     }
     static get is() { return "gb-button"; }
     static get encapsulation() { return "shadow"; }
@@ -90,7 +90,7 @@ export class MyButton {
                 "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",

package/dist/collection/components/gb-button/readme.md CHANGED Viewed

@@ -26,12 +26,14 @@
  - [gb-file-upload-item-base](../gb-file-upload-item-base)
  - [gb-notification-panel](../gb-notification-panel)
+ - [gb-pagination](../gb-pagination)
 ### Graph
 ```mermaid
 graph TD;
   gb-file-upload-item-base --> gb-button
   gb-notification-panel --> gb-button
+  gb-pagination --> gb-button
   style gb-button fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/collection/components/gb-button-close/gb-button-close.css CHANGED Viewed

@@ -75,10 +75,19 @@
     --success-900: #074d31;
     --success-950: #053321;
-    /* opacity color palette  */
+    /* ------------------------------------------opacity color palette--------------------------------------  */
+    /* 20% opacity */
     --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);
     --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);
+    /* 30% opacity */
+    --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);
+    --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);
+    /* 40% opacity */
+    --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);
+    --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);
     /* ------------------------------------------Secondary Color------------------------------------------- */
     /* blueLight color palete */
@@ -250,6 +259,14 @@
         --color-text-warning-bold: var(--warning-100);
     }
+    [data-theme="light"] {
+        --color-text-warning-subtle: var(--warning-500);
+    }
+    [data-theme="dark"] {
+        --color-text-warning-subtle: var(--warning-400);
+    }
     [data-theme="light"] {
         --color-text-sucess: var(--success-600);
     }
@@ -282,6 +299,14 @@
         --color-text-discovery-bold: var(--blueLight-100);
     }
+    [data-theme="light"] {
+        --color-text-discovery-subtle: var(--blueLight-400);
+    }
+    [data-theme="dark"] {
+        --color-text-discovery-subtle: var(--blueLight-100);
+    }
     [data-theme="light"] {
         --color-text-information: var(--blue-600);
     }
@@ -298,6 +323,14 @@
         --color-text-information-bold: var(--blue-100);
     }
+    [data-theme="light"] {
+        --color-text-information-subtle: var(--blue-500);
+    }
+    [data-theme="dark"] {
+        --color-text-information-subtle: var(--blue-400);
+    }
     [data-theme="light"] {
         --color-text-purple: var(--purple-600);
     }
@@ -314,6 +347,30 @@
         --color-text-purple-bold: var(--purple-100);
     }
+    [data-theme="light"] {
+        --color-text-purple-subtle: var(--purple-500);
+    }
+    [data-theme="dark"] {
+        --color-text-purple-subtle: var(--purple-400);
+    }
+    [data-theme="light"] {
+        --color-text-pink: var(--purple-600);
+    }
+    [data-theme="dark"] {
+        --color-text-pink: var(--purple-300);
+    }
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--purple-500);
+    }
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--purple-400);
+    }
     /* --------------Link color--------------- */
@@ -1244,6 +1301,22 @@
         --color-blanket: var(--darkBlue200-opacity20);
     }
+    [data-theme="light"] {
+        --color-blanket-subtle: var(--darkBlue500-opacity30);
+    }
+    [data-theme="dark"] {
+        --color-blanket-subtle: var(--darkBlue200-opacity30);
+    }
+    [data-theme="light"] {
+        --color-blanket-subtler: var(--darkBlue500-opacity40);
+    }
+    [data-theme="dark"] {
+        --color-blanket-subtler: var(--darkBlue200-opacity40);
+    }
     /* ----------------Skeleton Color --------------- */

package/dist/collection/components/gb-button-close/gb-button-close.js CHANGED Viewed

@@ -5,7 +5,7 @@ export class GbButtonClose {
         this.color = undefined;
     }
     render() {
-        return (h("div", { key: '0cd746f56e56b1c3e8e317c413613625599efe03', class: `${this.size} ${this.color}` }, h("svg", { key: 'c3c6a64c1989606c392fb4bf9f649b046ae6f2e5', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: '5010afdccfc464810ccc5fb20eb8db5158d53e36', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
+        return (h("div", { key: '238b069ad34b95c7aa81ae886d15f33351ea3cde', class: `${this.size} ${this.color}` }, h("svg", { key: 'e39a173b05879cbcf9719a2630f842f129327792', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", class: `${this.size}` }, h("path", { key: 'd1484d126d50e2940d125b7a5b022770f14708cf', d: "M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))));
     }
     static get is() { return "gb-button-close"; }
     static get encapsulation() { return "shadow"; }
@@ -26,7 +26,7 @@ export class GbButtonClose {
                 "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",