globuswebcomponents 0.3.6 → 0.3.8

package/dist/collection/components/gb-tags/gb-tags.css

@@ -218,6 +218,14 @@
         --color-text-selected: var(--blue-300);
     }
 
+    [data-theme="light"] {
+        --color-text-danger-bold: var(--brandRed-800);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-bold: var(--brandRed-100);
+    }
+
     [data-theme="light"] {
         --color-text-danger: var(--brandRed-700);
     }
@@ -226,6 +234,14 @@
         --color-text-danger: var(--brandRed-700);
     }
 
+     [data-theme="light"] {
+        --color-text-danger-subtle: var(--brandRed-600);
+    }
+
+    [data-theme="dark"] {
+        --color-text-danger-subtle: var(--brandRed-300);
+    }
+
     [data-theme="light"] {
         --color-text-danger-inverse: var(--base-white);
     }
@@ -235,11 +251,11 @@
     }
 
     [data-theme="light"] {
-        --color-text-danger-bold: var(--brandRed-800);
+        --color-text-warning-bold: var(--warning-800);
     }
 
     [data-theme="dark"] {
-        --color-text-danger-bold: var(--brandRed-100);
+        --color-text-warning-bold: var(--warning-100);
     }
 
     [data-theme="light"] {
@@ -251,52 +267,53 @@
         --color-text-warning: var(--warning-300);
     }
 
+
     [data-theme="light"] {
-        --color-text-warning-bold: var(--warning-800);
+        --color-text-warning-subtle: var(--warning-500);
     }
 
     [data-theme="dark"] {
-        --color-text-warning-bold: var(--warning-100);
+        --color-text-warning-subtle: var(--warning-400);
     }
 
     [data-theme="light"] {
-        --color-text-warning-subtle: var(--warning-500);
+        --color-text-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-text-warning-subtle: var(--warning-400);
+        --color-text-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-text-sucess: var(--success-600);
+        --color-text-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess: var(--success-300);
+        --color-text-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-text-sucess-bold: var(--success-800);
+        --color-text-success-subtle: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-text-sucess-bold: var(--success-100);
+        --color-text-success-subtle: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-text-discovery: var(--blueLight-800);
+        --color-text-discovery-bold: var(--blueLight-800);
     }
 
     [data-theme="dark"] {
-        --color-text-discovery: var(--blueLight-100);
+        --color-text-discovery-bold: var(--blueLight-100);
     }
 
     [data-theme="light"] {
-        --color-text-discovery-bold: var(--blueLight-800);
+        --color-text-discovery: var(--blueLight-800);
     }
 
     [data-theme="dark"] {
-        --color-text-discovery-bold: var(--blueLight-100);
+        --color-text-discovery: var(--blueLight-100);
     }
 
     [data-theme="light"] {
@@ -308,19 +325,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-information: var(--blue-600);
+        --color-text-information-bold: var(--blue-800);
     }
 
     [data-theme="dark"] {
-        --color-text-information: var(--blue-300);
+        --color-text-information-bold: var(--blue-100);
     }
 
     [data-theme="light"] {
-        --color-text-information-bold: var(--blue-800);
+        --color-text-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-text-information-bold: var(--blue-100);
+        --color-text-information: var(--blue-300);
     }
 
     [data-theme="light"] {
@@ -332,19 +349,19 @@
     }
 
     [data-theme="light"] {
-        --color-text-purple: var(--purple-600);
+        --color-text-purple-bold: var(--purple-800);
     }
 
     [data-theme="dark"] {
-        --color-text-purple: var(--purple-300);
+        --color-text-purple-bold: var(--purple-100);
     }
 
     [data-theme="light"] {
-        --color-text-purple-bold: var(--purple-800);
+        --color-text-purple: var(--purple-600);
     }
 
     [data-theme="dark"] {
-        --color-text-purple-bold: var(--purple-100);
+        --color-text-purple: var(--purple-300);
     }
 
     [data-theme="light"] {
@@ -356,19 +373,27 @@
     }
 
     [data-theme="light"] {
-        --color-text-pink: var(--purple-600);
+        --color-text-pink-bold: var(--pink-800);
     }
 
     [data-theme="dark"] {
-        --color-text-pink: var(--purple-300);
+        --color-text-pink-bold: var(--pink-100);
     }
 
     [data-theme="light"] {
-        --color-text-pink-subtle: var(--purple-500);
+        --color-text-pink: var(--pink-600);
     }
 
     [data-theme="dark"] {
-        --color-text-pink-subtle: var(--purple-400);
+        --color-text-pink: var(--pink-300);
+    }
+
+    [data-theme="light"] {
+        --color-text-pink-subtle: var(--pink-500);
+    }
+
+    [data-theme="dark"] {
+        --color-text-pink-subtle: var(--pink-400);
     }
 
 
@@ -443,11 +468,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-darkBlue: var(--brandDarkBlue-500);
+        --color-icon-brandDarkBlue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-icon-darkBlue: var(--brandDarkBlue-200);
+        --color-icon-brandDarkBlue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -459,35 +484,35 @@
     }
 
     [data-theme="light"] {
-        --color-icon-danger: var(--brandRed-700);
+        --color-icon-selected: var(--blue-500);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger: var(--brandRed-200);
+        --color-icon-selected: var(--blue-300);
     }
 
     [data-theme="light"] {
-        --color-icon-danger-inverse: var(--base-white);
+        --color-icon-danger-bold: var(--brandRed-800);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger-inverse: var(--brandRed-950);
+        --color-icon-danger-bold: var(--brandRed-100);
     }
 
     [data-theme="light"] {
-        --color-icon-danger-bold: var(--brandRed-800);
+        --color-icon-danger: var(--brandRed-700);
     }
 
     [data-theme="dark"] {
-        --color-icon-danger-bold: var(--brandRed-100);
+        --color-icon-danger: var(--brandRed-200);
     }
 
     [data-theme="light"] {
-        --color-icon-warning: var(--warning-600);
+        --color-icon-danger-inverse: var(--base-white);
     }
 
     [data-theme="dark"] {
-        --color-icon-warning: var(--warning-300);
+        --color-icon-danger-inverse: var(--brandRed-950);
     }
 
     [data-theme="light"] {
@@ -499,27 +524,27 @@
     }
 
     [data-theme="light"] {
-        --color-icon-sucess: var(--success-600);
+        --color-icon-warning: var(--warning-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-sucess: var(--success-300);
+        --color-icon-warning: var(--warning-300);
     }
 
     [data-theme="light"] {
-        --color-icon-sucess-bold: var(--success-800);
+        --color-icon-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-icon-sucess-bold: var(--success-100);
+        --color-icon-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-icon-discovery: var(--blueLight-600);
+        --color-icon-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-discovery: var(--blueLight-300);
+        --color-icon-success: var(--success-300);
     }
 
     [data-theme="light"] {
@@ -531,11 +556,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-information: var(--blue-600);
+        --color-icon-discovery: var(--blueLight-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-information: var(--blue-300);
+        --color-icon-discovery: var(--blueLight-300);
     }
 
     [data-theme="light"] {
@@ -547,11 +572,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-purple: var(--purple-600);
+        --color-icon-information: var(--blue-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-purple: var(--purple-300);
+        --color-icon-information: var(--blue-300);
     }
 
     [data-theme="light"] {
@@ -563,11 +588,11 @@
     }
 
     [data-theme="light"] {
-        --color-icon-pink: var(--pink-600);
+        --color-icon-purple: var(--purple-600);
     }
 
     [data-theme="dark"] {
-        --color-icon-pink: var(--pink-300);
+        --color-icon-purple: var(--purple-300);
     }
 
     [data-theme="light"] {
@@ -575,7 +600,15 @@
     }
 
     [data-theme="dark"] {
-        --color-icon-pink: var(--pink-100);
+        --color-icon-pink-bold: var(--pink-100);
+    }
+
+    [data-theme="light"] {
+        --color-icon-pink: var(--pink-600);
+    }
+
+    [data-theme="dark"] {
+        --color-icon-pink: var(--pink-300);
     }
 
     /* ----------------Border Color --------------- */
@@ -653,11 +686,11 @@
     }
 
     [data-theme="light"] {
-        --color-border-darkBlue: var(--brandDarkBlue-500);
+        --color-border-brandDarkBlue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-border-darkBlue: var(--brandDarkBlue-200);
+        --color-border-brandDarkBlue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -733,35 +766,35 @@
     }
 
     [data-theme="light"] {
-        --color-border-sucess-bold: var(--success-800);
+        --color-border-success-bold: var(--success-800);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-bold: var(--success-100);
+        --color-border-success-bold: var(--success-100);
     }
 
     [data-theme="light"] {
-        --color-border-sucess: var(--success-600);
+        --color-border-success: var(--success-600);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess: var(--success-300);
+        --color-border-success: var(--success-300);
     }
 
     [data-theme="light"] {
-        --color-border-sucess-subtle: var(--success-200);
+        --color-border-success-subtle: var(--success-200);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-subtle: var(--success-800);
+        --color-border-success-subtle: var(--success-800);
     }
 
     [data-theme="light"] {
-        --color-border-sucess-subtler: var(--success-100);
+        --color-border-success-subtler: var(--success-100);
     }
 
     [data-theme="dark"] {
-        --color-border-sucess-subtler: var(--success-900);
+        --color-border-success-subtler: var(--success-900);
     }
 
     [data-theme="light"] {
@@ -939,11 +972,11 @@
     }
 
     [data-theme="light"] {
-        --color-background-darkblue: var(--brandDarkBlue-500);
+        --color-background-brandDarkblue: var(--brandDarkBlue-500);
     }
 
     [data-theme="dark"] {
-        --color-background-darkblue: var(--brandDarkBlue-200);
+        --color-background-brandDarkblue: var(--brandDarkBlue-200);
     }
 
     [data-theme="light"] {
@@ -1332,11 +1365,11 @@
 
     /* ----------------Surface Color --------------- */
     [data-theme="light"] {
-        --color-surface-secondary: var(--gray-50);
+        --color-surface-bold: var(--gray-25);
     }
 
     [data-theme="dark"] {
-        --color-surface-secondary: var(--gray-950);
+        --color-surface-bold: var(--gray-950);
     }
 
     [data-theme="light"] {
@@ -1362,9 +1395,6 @@
     [data-theme="dark"] {
         --color-surface-pressed: var(--gray-700);
     }
-
- 
-
 }
 
 /* -----------------Shadow and Blur----------------- */
@@ -2132,6 +2162,7 @@
     --font-size-t-md: 1rem;
     --font-size-t-sm: 0.875rem;
     --font-size-t-xs: 0.75rem;
+    --font-size-t-xxs: 0.625rem;
 
     /* Font Weights */
     --font-weight-bold: 700;
@@ -2142,23 +2173,25 @@
     /* Line Heights */
     --font-line-height-d-2xl: 5rem;
     --font-line-height-d-xl: 4.25rem;
-    --font-line-height-d-lg: 4.25rem; /**/
+    --font-line-height-d-lg: 3.75rem;
     --font-line-height-d-md: 2.75rem;
     --font-line-height-d-sm: 2.375rem;   
     --font-line-height-d-xs: 2rem;   
     --font-line-height-t-xl: 1.875rem;
-    --font-line-height-t-lg: 1.75rem;
+    --font-line-height-t-lg: 1.688rem;
     --font-line-height-t-md: 1.5rem;
-    --font-line-height-t-sm: 1.25rem;
+    --font-line-height-t-sm: 1.313rem;
     --font-line-height-t-xs: 1.125rem;
+    --font-line-height-t-xxs: 0.938rem;
 
     /* Letter Spacings */
     --font-letter-spacing-d-2xl: -0.09rem;
     --font-letter-spacing-d-xl: -0.075rem;
     --font-letter-spacing-d-lg: -0.075rem;
     --font-letter-spacing-d-md: -0.045rem;
-    --font-letter-spacing-d-sm: 0rem;
-    --font-letter-spacing-d-xs: 0rem;
+    --font-letter-spacing-d-sm: 0;
+    --font-letter-spacing-d-xs: 0;
+    --font-letter-spacing-d-xxs: 0;
 
     /* Font Families */
     --font-family-title: 'Sora';
@@ -3035,6 +3068,106 @@
     margin-top: -0.396em;
 }
 
+.text-xxs-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-bold::before,
+.text-xxs-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-semi-bold{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-semi-bold);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-semi-bold::before,
+.text-xxs-semi-bold::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-semi-bold::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-semi-bold::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-medium{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-medium::before,
+.text-xxs-medium::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-medium::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-medium::after{
+    margin-top: -0.416em;
+}
+
+.text-xxs-regular{
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-t-xxs);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--font-line-height-t-xxs);
+    margin: var(--spacing-none);
+    padding: var(--spacing-none);
+    display: inline-block;
+    position: relative;
+}
+
+.text-xxs-regular::before,
+.text-xxs-regular::after{
+    content: "";
+    display: table;
+}
+
+.text-xxs-regular::before{
+    margin-bottom: -0.291em;
+}
+
+.text-xxs-regular::after{
+    margin-top: -0.416em;
+}
+
 .container {
     display: inline-flex;
     justify-content: center;

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

@@ -3,13 +3,13 @@ export class GbTag {
     constructor() {
         this.size = undefined;
         this.icon = undefined;
-        this.action = 'text_only';
+        this.action = undefined;
         this.flagSwap = undefined;
         this.checkbox = undefined;
     }
     render() {
         const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);
-        return (h("div", { key: 'eddc1c56bde4d8d1668ecaff71b68f9fd474b049', class: `container ${this.size}` }, h("div", { key: 'b50a610db6b071203e0c15e2216ec56ce749ffc9', class: `content ${this.size}` }, this.checkbox && (h("gb-tag-checkbox", { key: 'dd5df39dcefcfc0fc58dc2935a2a6f311d447fb4', size: this.size })), this.icon === 'country' && (h("div", { key: 'b22d75f23dce9d7abee595d4801cb193f7c2abda', class: "icon left-icon" }, h("img", { key: '9f70bb1314b2850166aa66c90647c6f1fbb83136', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '31deeb77a03a013b07385f5c12947e31b9e2b36d', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("slot", { key: '0a1a6477c29874869b8f471e6d7e4a2af6609193', name: 'image', slot: 'image' }))), this.icon === 'dot' && (h("svg", { key: 'ba641ea7232e553779ed3ce7a314c35797aec4dd', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'c3b6446c2d9de38bfa2d68b217cb6d4c12b5427a', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("span", { key: '61f02e7a46eecd336ac780084349ed50990fa6a7', class: "label" }, h("slot", { key: '1483f54f85e2acc08319bca1a3f197e0c996ca8c' })), this.action === 'count' && (h("gb-tag-count", { key: 'e940ea246cd9da2efccdbaa0904b16b340c80b4f', size: this.size }))), this.action === 'X_close' && (h("gb-tag-close", { key: '47ad6152c591c9470f14aaebe1da51d621e916cd', size: this.size }))));
+        return (h("div", { key: '533238e4b05a18563baf2aa7ec5e0ea1680af878', class: `container ${this.size}` }, h("div", { key: '1aad6d3024b07f8c9c0a12a44bf32ef4c9290dee', class: `content ${this.size}` }, this.checkbox && (h("gb-tag-checkbox", { key: '0429f11855077fb81f989285f6ea16221c32c9dc', size: this.size })), this.icon === 'country' && (h("div", { key: '0ec170fe585cacb8c7e5fd3c8f19244db05c7863', class: "icon left-icon" }, h("img", { key: '8b1ed69f348744a05fccb91ade1aee4e2d278824', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '7d8e11d7a570ba78f507c0847db88f13f320a3f1', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("slot", { key: '983297b761a933c23dce09c438709867e5bc7fa0', name: 'image', slot: 'image' }))), this.icon === 'dot' && (h("svg", { key: '2b0964711e9282add6d3b0a682b71dcbfd9b941c', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'f63cc49b1390f63da7a4bbe69459c65df104bd42', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("slot", { key: '7c70d7d61b9de3c8129968626234ff33848c8c06' }), this.action === 'count' && (h("gb-tag-count", { key: '94bc654284b23c580f0bf8f179f653e4ae865e0b', size: this.size }, h("slot", { key: 'ef1a24b28f0c8f6c44a03e762223ff0335badb55', slot: "count", name: "count" })))), this.action === 'X_close' && (h("gb-tag-close", { key: '72e5b7289148a5ea6e72c89ce782724593150b8e', size: this.size }))));
     }
     static get is() { return "gb-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -74,8 +74,7 @@ export class GbTag {
                     "text": ""
                 },
                 "attribute": "action",
-                "reflect": false,
-                "defaultValue": "'text_only'"
+                "reflect": false
             },
             "flagSwap": {
                 "type": "string",

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

@@ -1 +1 @@
-{"version":3,"file":"gb-tags.js","sourceRoot":"","sources":["../../../src/components/gb-tags/gb-tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,KAAK;;;;sBAGsC,WAAW;;;;IAI/D,MAAM;QAEF,MAAM,QAAQ,GAAG,YAAY,CAAC,UAAU,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC;QAE7D,OAAO,CACJ,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE;YAC/B,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE;gBAC7B,IAAI,CAAC,QAAQ,IAAI,CACd,wEAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAoB,CACvD;gBACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CACxB,4DAAK,KAAK,EAAC,gBAAgB;oBACvB,4DAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,cAAc,GAAG,CACvC,CACT;gBACA,IAAI,CAAC,IAAI,KAAI,QAAQ,IAAI,CACtB,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,iBAAa,OAAO;oBACxD,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC/B,CACf;gBACA,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CACpB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM;oBACtF,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAE,CAC1C,CACT;gBACD,6DAAM,KAAK,EAAC,OAAO;oBACf,8DAAa,CACV;gBACN,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,CACxB,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB,CACjD,CACC;YACL,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,CAC1B,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB,CACjD,CACA,CACR,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-tag',\r\n    styleUrl: 'gb-tags.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTag {\r\n    @Prop() size: 'sm' | 'md' | 'lg';\r\n    @Prop() icon?: 'country' | 'avatar' | 'dot';\r\n    @Prop() action: 'X_close' | 'text_only' | 'count' = 'text_only';\r\n    @Prop() flagSwap: string;\r\n    @Prop() checkbox?: boolean;\r\n\r\n    render() {\r\n\r\n        const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);\r\n\r\n        return (\r\n           <div class={`container ${this.size}`}>\r\n                <div class={`content ${this.size}`}>\r\n                    {this.checkbox && (\r\n                        <gb-tag-checkbox size={this.size}></gb-tag-checkbox>\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=\"xs\" status-icon=\"false\">\r\n                            <slot name='image' slot='image'></slot>\r\n                        </gb-avatar>\r\n                    )}\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=\"none\">\r\n                            <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\"/>\r\n                        </svg>\r\n                    )}\r\n                    <span class=\"label\">\r\n                        <slot></slot>\r\n                    </span>\r\n                    {this.action === 'count' && (\r\n                        <gb-tag-count size={this.size}></gb-tag-count>\r\n                    )}\r\n                </div>\r\n                {this.action === 'X_close' && (\r\n                    <gb-tag-close size={this.size}></gb-tag-close>\r\n                )}\r\n           </div>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-tags.js","sourceRoot":"","sources":["../../../src/components/gb-tags/gb-tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,KAAK;;;;;;;;IAOd,MAAM;QAEF,MAAM,QAAQ,GAAG,YAAY,CAAC,UAAU,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC;QAE7D,OAAO,CACJ,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE;YAC/B,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE;gBAC7B,IAAI,CAAC,QAAQ,IAAI,CACd,wEAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAoB,CACvD;gBACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CACxB,4DAAK,KAAK,EAAC,gBAAgB;oBACvB,4DAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,cAAc,GAAG,CACvC,CACT;gBACA,IAAI,CAAC,IAAI,KAAI,QAAQ,IAAI,CACtB,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,iBAAa,OAAO;oBACxD,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC/B,CACf;gBACA,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CACpB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM;oBACtF,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAE,CAC1C,CACT;gBACD,8DAAa;gBACZ,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,CACxB,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI;oBACzB,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC5B,CAClB,CACC;YACL,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,CAC1B,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB,CACjD,CACA,CACR,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-tag',\r\n    styleUrl: 'gb-tags.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTag {\r\n    @Prop() size: 'sm' | 'md' | 'lg';\r\n    @Prop() icon?: 'country' | 'avatar' | 'dot';\r\n    @Prop() action: 'X_close' | 'text_only' | 'count';\r\n    @Prop() flagSwap: string;\r\n    @Prop() checkbox?: boolean;\r\n\r\n    render() {\r\n\r\n        const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);\r\n\r\n        return (\r\n           <div class={`container ${this.size}`}>\r\n                <div class={`content ${this.size}`}>\r\n                    {this.checkbox && (\r\n                        <gb-tag-checkbox size={this.size}></gb-tag-checkbox>\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=\"xs\" status-icon=\"false\">\r\n                            <slot name='image' slot='image'></slot>\r\n                        </gb-avatar>\r\n                    )}\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=\"none\">\r\n                            <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\"/>\r\n                        </svg>\r\n                    )}\r\n                    <slot></slot>\r\n                    {this.action === 'count' && (\r\n                        <gb-tag-count size={this.size}>\r\n                            <slot slot=\"count\" name=\"count\"></slot>\r\n                        </gb-tag-count>\r\n                    )}\r\n                </div>\r\n                {this.action === 'X_close' && (\r\n                    <gb-tag-close size={this.size}></gb-tag-close>\r\n                )}\r\n           </div>\r\n        );\r\n    }\r\n}"]}