globuswebcomponents 2.5.2 → 2.5.4

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

@@ -0,0 +1,212 @@
+import { getAssetPath, h } from "@stencil/core";
+export class GbIllustration {
+    constructor() {
+        this.size = 'sm';
+        this.color = 'gray';
+        this.illustrationIcon = '';
+        this.theme = 'system';
+        this.leadingIconSvg = '';
+    }
+    async loadIcon(iconName) {
+        const iconPath = getAssetPath(`${iconName}`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        // Parse SVG into DOM
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
+        const svgElement = svgDoc.documentElement;
+        // Select all path tags with an opacity attribute
+        const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');
+        const gWithOpacity = svgElement.querySelectorAll('g[opacity]');
+        // Add a class to each
+        pathsWithOpacity.forEach(path => {
+            path.classList.add('has_opacity');
+        });
+        gWithOpacity.forEach(g => {
+            g.classList.add('has_opacity');
+        });
+        // Convert the modified SVG back to a string
+        const modifiedSvg = svgElement.outerHTML;
+        // Save or inject it into your component
+        this.leadingIconSvg = modifiedSvg;
+    }
+    componentWillLoad() {
+        this.loadIcon(this.illustrationIcon);
+    }
+    render() {
+        return (h("div", { key: 'f38bba33a8affaafb8573713c2489dbef64675a4', class: `illustration_wrapper` }, h("svg", { key: '50a51e3fedda6d869a990157663f776da9374379', xmlns: "http://www.w3.org/2000/svg", width: "220", height: "168", viewBox: "0 0 220 168", fill: "none", class: `illustration_background ${this.size}` }, h("circle", { key: '1742cb5746009129311d08a83ebd94f49139d935', cx: "110", cy: "88", r: "80", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : this.color === 'gray' ? 'var(--color-background-gray-subtlest, #F6F8FA)' : ''}` }), h("circle", { key: 'c723bcb06fab1937609bf36edc7e94345cc40a2d', cx: "26", cy: "28", r: "8", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '0f5dd9e108d92ca1869f8360c4467fa023dfccb8', cx: "198", cy: "134", r: "6", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'ddf5225ac7fb67ddb1a21607ee957e3e43405552', cx: "25", cy: "146", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '4a6f111b3bde250f28ee4aaa51ae0df9e3e9c41a', cx: "210", cy: "54", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'c4f5ca883bb96541cd42072aac43d9461df9c4a6', cx: "191", cy: "19", r: "7", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` })), h("div", { key: '6005bca113d4e90a4444fad7526f5b1903ac8594', class: "illustration_div" }, h("div", { key: '76b9d295244e3fa0251d24dde39692906a06b3a8', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: 'fa817780b6c8464c718e3b4a414b0335d34e6371', xmlns: "http://www.w3.org/2000/svg", width: "214", height: "140", viewBox: "0 0 214 140", fill: "none", class: `cloud ${this.size}` }, h("g", { key: '9c99509ff4619e8a5b0e0c788e5b4384f9d8c247', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: '2d91e3e1f672242eaf6b9399b6700b93f8f6c2ab', d: "M109.485 0C129.961 0 147.543 12.3802 155.161 30.0625C156.486 29.9093 157.834 29.8281 159.2 29.8281C178.42 29.8282 194 45.4095 194 64.6289C194 83.5478 178.903 98.9404 160.099 99.417L159.2 99.4287H59.7715L58.7451 99.416C37.2543 98.8717 20 81.2792 20 59.6572C20 37.6921 37.8063 19.8857 59.7715 19.8857C62.9248 19.8857 65.992 20.2546 68.9336 20.9482C77.9428 8.27072 92.7484 0.000119405 109.485 0Z", fill: "var(--color-background-information-subtlest, #E4F0FC)" }), h("circle", { key: '5e5cd85b8cbb7f02a63b43b3051956166d654079', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: '71400fcde2db0cc8e08586bb2ee21edbebf00065', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '6f16a3c91b6cd822094c22dfd81e1fd020c5f27b', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: '52d8b152dcb22340b61be902528322d29191d832' }, h("filter", { key: '107ae9fb75c744a074407a1d77b8dd2f8097feac', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '5cf1987460359d1405932ab8f57015478e8eeac7', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'e059ccadd79c7124e26dbb107138559144742121', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '2dc7957667c8090bfa185d80b5fda19380319350', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: '74e23ffbd435ed6b9d430ebfa12835bd897d4684', dy: "8" }), h("feGaussianBlur", { key: 'fa1e8058d86376a6585956dd88c25a883a71ffea', stdDeviation: "4" }), h("feColorMatrix", { key: 'ba6be93efaf07d4050cadcc8ee490263ecb9cef1', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '1bff93866fba84980435e171e23188d0f6c4f243', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: '14d87fe21007d5bfd0e49d8d4147199fba76a962', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '85dd7af2e4194b4a3987c99c31ffe9ea66ad58d6', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: 'ccdcae8b881cd9e3f91006325a742277feccffd4', dy: "20" }), h("feGaussianBlur", { key: '48852ca5bb657be73d318d46c98ed716bdba52c7', stdDeviation: "12" }), h("feColorMatrix", { key: 'b91b790d9b345a54e7027073d7659f5c30529532', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '08a6dda939a2a3412f308743648e000d0400eb07', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: '7261130fca2a2cb239b9128c59283e76a42371ae', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: '1a642b2cd7defc420e9bb52670161fe1e18d31e5', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd298195350cf4f87f46f7f5e46db0944cef0a08c', "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                : this.color === 'gray'
+                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
+                    : ''}` }), h("stop", { key: 'cbc82b6c61a3330a2a7d680886cd218680441527', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'ddf93fdd0ec4d1d8776c5efa749cbdef733c9559', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '976a35c5d99692c2fb52b9e16719ccc449931077', "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                : this.color === 'gray'
+                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
+                    : ''}` }), h("stop", { key: 'a2f33ca6c06c63760c2100f80e9696082f667f1a', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: 'feebf297cd1a73b1ae30f0b67c2a55f2ccaee81d', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '87379e6e117985078688c8a72761ab32e88e3774', "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                : this.color === 'gray'
+                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
+                    : ''}` }), h("stop", { key: '29ed0e49609c354918990870a589561140fe1df2', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: 'a577641f58324c9e4c5393a5b6d759e1f8c19b29', xmlns: "http://www.w3.org/2000/svg", width: "168", height: "178", viewBox: "0 0 168 178", fill: "none", class: `box ${this.size}` }, h("g", { key: 'a36ea4956e1e294eda8bcca38d76a68858ebabc5', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: '7604464f347070fd72d1834f0b0bb91830b2b64b', d: "M84 54.9529L90.9121 52.0578L84.0009 55.002V137.432L147.69 110.743V28.2767L148 28.1466L147.69 28.009V27.8705L147.53 27.9384L84.5026 0L20 27.4765L20.3053 27.6076L20 109.74L84 137.383L84 54.9529Z", fill: "#F9FAFB" }), h("path", { key: 'eb2f3be6fef17b49801a83ef3b492d605449f4e3', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: '98320c2f03ab418966f7b2e72a70f92428bbbd2f', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: '6a7b25a7a786b4dd1d7d031fd310841b4fd6869a', d: "M84 54.9529L148 28.1466L84.5026 0L20 27.4765L84 54.9529Z", fill: "var(--color-background-information-subtler, #C8E0F9)" }), h("path", { key: 'ab76c539db3b27a447d46be430060833a78c5844', d: "M44.1255 17.1998L107.881 44.9503L108.461 65.173L126.299 57.8126L125.759 37.4622L60.1172 10.3877L44.1255 17.1998Z", fill: "var(--color-background-information-subtlest, #E4F0FC)" })), h("defs", { key: 'e164b3bf990f505d49a3e0103b9d48ce2855f3c5' }, h("filter", { key: '9e5ea90bcd07a665ab0420ec7cb02d9e8524fc25', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '30774637d56b746fca58dc09c6dd82035c2095db', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '7facb514be14b23080b1c2bc92a81e0b5815b8d5', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'c1955351a98d1cdd063e43c6d3b50e672bd6581a', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: '1fe9266a523f61b3c83d0fe6a47ca5da201996fb', dy: "8" }), h("feGaussianBlur", { key: 'bc9f67770caf8badd3e389d081633fe16ad5885e', stdDeviation: "4" }), h("feColorMatrix", { key: 'e907f4ae50f272d0a58f3834f12f95912763f7fb', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '89f7168fa9827014ef77c0769ed52bcb1a7bf2de', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: '10ba693ce1291488e6364b66c58ccb0ca28f5ff7', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'b26e58aef747502cccc00ae95ebe6576925ecfef', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: 'ed350bc69b6f3e0f07af322e96f947700fe706bd', dy: "20" }), h("feGaussianBlur", { key: '1a28f2976b40387741df80dc324aa402e43c940f', stdDeviation: "12" }), h("feColorMatrix", { key: 'ebd64d5edc1ab69b4766eff706222d6ab24a1bf8', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '3cb6cfdc83317c6711509b58fae038d1a965bab0', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: '386b0642859907b10674ede45fab43c394a3fb8b', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '3a0f45e2f70193bc6059a1862b2b7ad79faa6b90', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '10d15712854b149abc2615c4c0481c2976b5a021', "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                : this.color === 'gray'
+                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
+                    : ''}` }), h("stop", { key: 'b10c6bd09e3e4846b0f4e559d24ca804b4d346a6', offset: "1", "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtler, #C8E0F9)'
+                : this.color === 'gray'
+                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
+                    : ''}` })), h("linearGradient", { key: '55f65d9cd2f58bafb5756f98abfda5792c38d959', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '48b98e5d859a591d1c4a76cb9439c860e2e759ff', "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtle, #9AC7F4)'
+                : this.color === 'gray'
+                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
+                    : ''}` }), h("stop", { key: '083fcc3f4fbfc0f065c7c795b39362f0372492f7', offset: "1", "stop-color": `${this.color === 'primary'
+                ? 'var(--color-background-information-subtler, #C8E0F9)'
+                : this.color === 'gray'
+                    ? 'var(--color-background-gray-subtler, #EEF2F6)'
+                    : ''}` })))))), h("div", { key: '7c751048e53318359fcb3ffd90caf462819f8e2a', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '35fc9066f6dfe8a329f74429d8610172cd557d3d', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
+    }
+    static get is() { return "gb-illustration"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-illustration.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-illustration.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'sm'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralColors",
+                    "resolved": "\"default\" | \"discovery\" | \"error\" | \"gray\" | \"information\" | \"pink\" | \"primary\" | \"purple\" | \"success\" | \"warning\" | \"white\"",
+                    "references": {
+                        "GeneralColors": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralColors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'gray'"
+            },
+            "illustrationStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IllustrationTypes",
+                    "resolved": "\"box\" | \"cloud\" | \"credit_card\" | \"documents\"",
+                    "references": {
+                        "IllustrationTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::IllustrationTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "illustration-style",
+                "reflect": false
+            },
+            "illustrationIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "illustration-icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ThemeTypes",
+                    "resolved": "\"dark\" | \"light\" | \"system\"",
+                    "references": {
+                        "ThemeTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ThemeTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'system'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "leadingIconSvg": {}
+        };
+    }
+}
+//# sourceMappingURL=gb-illustration.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-illustration.js","sourceRoot":"","sources":["../../../src/components/gb-illustration/gb-illustration.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { GeneralColors, GeneralSizes, IllustrationTypes, ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-illustration',\r\n  styleUrl: 'gb-illustration.css',\r\n  shadow: true,\r\n})\r\nexport class GbIllustration {\r\n  @Prop() size: GeneralSizes = 'sm';\r\n  @Prop() color: GeneralColors = 'gray';\r\n  @Prop() illustrationStyle: IllustrationTypes;\r\n  @Prop() illustrationIcon: string = '';\r\n  @Prop() theme: ThemeTypes = 'system';\r\n  @State() leadingIconSvg: string = '';\r\n\r\n  async loadIcon(iconName: string) {\r\n      const iconPath = getAssetPath(`${iconName}`);\r\n      const response = await fetch(iconPath);\r\n      const svg = await response.text();\r\n  \r\n      // Parse SVG into DOM\r\n      const parser = new DOMParser();\r\n      const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n      const svgElement = svgDoc.documentElement;\r\n  \r\n      // Select all path tags with an opacity attribute\r\n      const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');\r\n      const gWithOpacity = svgElement.querySelectorAll('g[opacity]');\r\n  \r\n      // Add a class to each\r\n      pathsWithOpacity.forEach(path => {\r\n        path.classList.add('has_opacity');\r\n      });\r\n  \r\n      gWithOpacity.forEach(g => {\r\n        g.classList.add('has_opacity');\r\n      });\r\n  \r\n      // Convert the modified SVG back to a string\r\n      const modifiedSvg = svgElement.outerHTML;\r\n  \r\n      // Save or inject it into your component\r\n      this.leadingIconSvg = modifiedSvg;\r\n    }\r\n  \r\n    componentWillLoad() {\r\n      this.loadIcon(this.illustrationIcon);\r\n    }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`illustration_wrapper`}>\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"220\" height=\"168\" viewBox=\"0 0 220 168\" fill=\"none\" class={`illustration_background ${this.size}`}>\r\n          <circle\r\n            cx=\"110\"\r\n            cy=\"88\"\r\n            r=\"80\"\r\n            fill={`${\r\n              this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : this.color === 'gray' ? 'var(--color-background-gray-subtlest, #F6F8FA)' : ''\r\n            }`}\r\n          />\r\n          <circle\r\n            cx=\"26\"\r\n            cy=\"28\"\r\n            r=\"8\"\r\n            fill={`${\r\n              this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''\r\n            }`}\r\n          />\r\n          <circle\r\n            cx=\"198\"\r\n            cy=\"134\"\r\n            r=\"6\"\r\n            fill={`${\r\n              this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''\r\n            }`}\r\n          />\r\n          <circle\r\n            cx=\"25\"\r\n            cy=\"146\"\r\n            r=\"10\"\r\n            fill={`${\r\n              this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''\r\n            }`}\r\n          />\r\n          <circle\r\n            cx=\"210\"\r\n            cy=\"54\"\r\n            r=\"10\"\r\n            fill={`${\r\n              this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''\r\n            }`}\r\n          />\r\n          <circle\r\n            cx=\"191\"\r\n            cy=\"19\"\r\n            r=\"7\"\r\n            fill={`${\r\n              this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''\r\n            }`}\r\n          />\r\n        </svg>\r\n        <div class=\"illustration_div\">\r\n          <div class=\"illustration\">\r\n            {this.illustrationStyle === 'cloud' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"214\" height=\"140\" viewBox=\"0 0 214 140\" fill=\"none\" class={`cloud ${this.size}`}>\r\n                <g filter=\"url(#filter0_dd_7590_639)\">\r\n                  <path\r\n                    d=\"M109.485 0C129.961 0 147.543 12.3802 155.161 30.0625C156.486 29.9093 157.834 29.8281 159.2 29.8281C178.42 29.8282 194 45.4095 194 64.6289C194 83.5478 178.903 98.9404 160.099 99.417L159.2 99.4287H59.7715L58.7451 99.416C37.2543 98.8717 20 81.2792 20 59.6572C20 37.6921 37.8063 19.8857 59.7715 19.8857C62.9248 19.8857 65.992 20.2546 68.9336 20.9482C77.9428 8.27072 92.7484 0.000119405 109.485 0Z\"\r\n                    fill=\"var(--color-background-information-subtlest, #E4F0FC)\"\r\n                  />\r\n                  <circle cx=\"59.7714\" cy=\"59.6572\" r=\"39.7714\" fill=\"url(#paint0_linear_7590_639)\" />\r\n                  <circle cx=\"109.486\" cy=\"49.7143\" r=\"49.7143\" fill=\"url(#paint1_linear_7590_639)\" />\r\n                  <circle cx=\"159.2\" cy=\"64.6286\" r=\"34.8\" fill=\"url(#paint2_linear_7590_639)\" />\r\n                </g>\r\n                <defs>\r\n                  <filter id=\"filter0_dd_7590_639\" x=\"0\" y=\"0\" width=\"214\" height=\"139.429\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_7590_639\" />\r\n                    <feOffset dy=\"8\" />\r\n                    <feGaussianBlur stdDeviation=\"4\" />\r\n                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_7590_639\" />\r\n                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_7590_639\" />\r\n                    <feOffset dy=\"20\" />\r\n                    <feGaussianBlur stdDeviation=\"12\" />\r\n                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_7590_639\" result=\"effect2_dropShadow_7590_639\" />\r\n                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_7590_639\" result=\"shape\" />\r\n                  </filter>\r\n                  <linearGradient id=\"paint0_linear_7590_639\" x1=\"29.2326\" y1=\"33.3796\" x2=\"99.5429\" y2=\"99.4285\" gradientUnits=\"userSpaceOnUse\">\r\n                    <stop\r\n                      stop-color={`${\r\n                        this.color === 'primary'\r\n                          ? 'var(--color-background-information-subtle, #9AC7F4)'\r\n                          : this.color === 'gray'\r\n                          ? 'var(--color-background-gray-subtler, #EEF2F6)'\r\n                          : ''\r\n                      }`}\r\n                    />\r\n                    <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                  </linearGradient>\r\n                  <linearGradient id=\"paint1_linear_7590_639\" x1=\"71.3123\" y1=\"16.8673\" x2=\"159.2\" y2=\"99.4285\" gradientUnits=\"userSpaceOnUse\">\r\n                    <stop\r\n                      stop-color={`${\r\n                        this.color === 'primary'\r\n                          ? 'var(--color-background-information-subtle, #9AC7F4)'\r\n                          : this.color === 'gray'\r\n                          ? 'var(--color-background-gray-subtler, #EEF2F6)'\r\n                          : ''\r\n                      }`}\r\n                    />\r\n                    <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                  </linearGradient>\r\n                  <linearGradient id=\"paint2_linear_7590_639\" x1=\"132.478\" y1=\"41.6358\" x2=\"194\" y2=\"99.4286\" gradientUnits=\"userSpaceOnUse\">\r\n                    <stop\r\n                      stop-color={`${\r\n                        this.color === 'primary'\r\n                          ? 'var(--color-background-information-subtle, #9AC7F4)'\r\n                          : this.color === 'gray'\r\n                          ? 'var(--color-background-gray-subtler, #EEF2F6)'\r\n                          : ''\r\n                      }`}\r\n                    />\r\n                    <stop offset=\"0.350715\" stop-color=\"white\" stop-opacity=\"0\" />\r\n                  </linearGradient>\r\n                </defs>\r\n              </svg>\r\n            )}\r\n            {this.illustrationStyle === 'box' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"168\" height=\"178\" viewBox=\"0 0 168 178\" fill=\"none\" class={`box ${this.size}`}>\r\n                <g filter=\"url(#filter0_dd_7590_623)\">\r\n                  <path\r\n                    d=\"M84 54.9529L90.9121 52.0578L84.0009 55.002V137.432L147.69 110.743V28.2767L148 28.1466L147.69 28.009V27.8705L147.53 27.9384L84.5026 0L20 27.4765L20.3053 27.6076L20 109.74L84 137.383L84 54.9529Z\"\r\n                    fill=\"#F9FAFB\"\r\n                  />\r\n                  <path d=\"M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z\" fill=\"url(#paint0_linear_7590_623)\" />\r\n                  <path d=\"M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z\" fill=\"url(#paint1_linear_7590_623)\" />\r\n                  <path d=\"M84 54.9529L148 28.1466L84.5026 0L20 27.4765L84 54.9529Z\" fill=\"var(--color-background-information-subtler, #C8E0F9)\" />\r\n                  <path\r\n                    d=\"M44.1255 17.1998L107.881 44.9503L108.461 65.173L126.299 57.8126L125.759 37.4622L60.1172 10.3877L44.1255 17.1998Z\"\r\n                    fill=\"var(--color-background-information-subtlest, #E4F0FC)\"\r\n                  />\r\n                </g>\r\n                <defs>\r\n                  <filter id=\"filter0_dd_7590_623\" x=\"0\" y=\"0\" width=\"168\" height=\"177.432\" filterUnits=\"userSpaceOnUse\" color-interpolation-filters=\"sRGB\">\r\n                    <feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\" />\r\n                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect1_dropShadow_7590_623\" />\r\n                    <feOffset dy=\"8\" />\r\n                    <feGaussianBlur stdDeviation=\"4\" />\r\n                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0\" />\r\n                    <feBlend mode=\"normal\" in2=\"BackgroundImageFix\" result=\"effect1_dropShadow_7590_623\" />\r\n                    <feColorMatrix in=\"SourceAlpha\" type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\" result=\"hardAlpha\" />\r\n                    <feMorphology radius=\"4\" operator=\"erode\" in=\"SourceAlpha\" result=\"effect2_dropShadow_7590_623\" />\r\n                    <feOffset dy=\"20\" />\r\n                    <feGaussianBlur stdDeviation=\"12\" />\r\n                    <feColorMatrix type=\"matrix\" values=\"0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0\" />\r\n                    <feBlend mode=\"normal\" in2=\"effect1_dropShadow_7590_623\" result=\"effect2_dropShadow_7590_623\" />\r\n                    <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_7590_623\" result=\"shape\" />\r\n                  </filter>\r\n                  <linearGradient id=\"paint0_linear_7590_623\" x1=\"20\" y1=\"110.154\" x2=\"45.2754\" y2=\"41.7013\" gradientUnits=\"userSpaceOnUse\">\r\n                    <stop\r\n                      stop-color={`${\r\n                        this.color === 'primary'\r\n                          ? 'var(--color-background-information-subtle, #9AC7F4)'\r\n                          : this.color === 'gray'\r\n                          ? 'var(--color-background-gray-subtler, #EEF2F6)'\r\n                          : ''\r\n                      }`}\r\n                    />\r\n                    <stop\r\n                      offset=\"1\"\r\n                      stop-color={`${\r\n                        this.color === 'primary'\r\n                          ? 'var(--color-background-information-subtler, #C8E0F9)'\r\n                          : this.color === 'gray'\r\n                          ? 'var(--color-background-gray-subtler, #EEF2F6)'\r\n                          : ''\r\n                      }`}\r\n                    />\r\n                  </linearGradient>\r\n                  <linearGradient id=\"paint1_linear_7590_623\" x1=\"84.0003\" y1=\"56.6154\" x2=\"156.166\" y2=\"70.983\" gradientUnits=\"userSpaceOnUse\">\r\n                    <stop\r\n                      stop-color={`${\r\n                        this.color === 'primary'\r\n                          ? 'var(--color-background-information-subtle, #9AC7F4)'\r\n                          : this.color === 'gray'\r\n                          ? 'var(--color-background-gray-subtler, #EEF2F6)'\r\n                          : ''\r\n                      }`}\r\n                    />\r\n                    <stop\r\n                      offset=\"1\"\r\n                      stop-color={`${\r\n                        this.color === 'primary'\r\n                          ? 'var(--color-background-information-subtler, #C8E0F9)'\r\n                          : this.color === 'gray'\r\n                          ? 'var(--color-background-gray-subtler, #EEF2F6)'\r\n                          : ''\r\n                      }`}\r\n                    />\r\n                  </linearGradient>\r\n                </defs>\r\n              </svg>\r\n            )}\r\n          </div>\r\n          <div class={`icon_div ${this.color} ${this.size}`}>\r\n            <div class={`icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.js

@@ -362,16 +362,16 @@ export class GbInputDropdown {
         const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');
         const illustration = getAssetPath('assets/empty-state-no-data.svg');
         return [
-            h("div", { key: '4a114ae3e207872ed4f5684fa2f7a4578605a3d0', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '81f53914d5c88389e6e6342a292998149f3a8eec', class: `input_with_label` }, this.showLabel && (h(Fragment, null, this.formatLabel ? (h("p", { class: "label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())) : (h("p", { class: "label text-sm-medium" }, this.label)))), h("div", { key: '106fd6a8295c0bf3dbc59eaabe85369d2f0d0e6a', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (h("svg", { key: 'd1e6fca375669305b0d57ead9f277344c893774d', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '08652626dd279ace268b72a05ec80db5967ee2f9', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), h("path", { key: '59323104d36200a481fb4e64993981d9d26a5e91', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: '5db349c4ebca4bc2ba6948461f643fd45661cd6a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'c09bcf740a141b6f6d988563df5935fd7d99084f', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: '1d0d62399c765b36ad0fa055a68a618a32343cc0', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: 'cf220e6813c79206752f58e3463f3930507ae506', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (h(Fragment, null, typeof item === 'object' ? (h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : (h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase())))))))))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: '8ea03f3af00f7e5e142bb6675af904f14439b4e3', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: '7590f270bd9c1607de48d3af703c583fb7e38fe4', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && this.type !== 'search' && (h(Fragment, null, this.placeholder && (h("div", { key: '7792b4e7906e109d6e9f8ad6ae33c3b3e37cb655', class: "placeholder" }, h("p", { key: 'b767f884d951725114ecd9f622a12d8f2bbedb53', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '21bdb8365c66f0a16d3f9b1d8bdd5fc2a4fd388d', class: "search_input" }, h("input", { key: '75187bd9af3b5aff057bbd1286acbec059c769f5', type: "text", placeholder: this.placeholder, class: `text-${this.size}-regular`, ref: el => (this.inputRef = el), onInput: this.emitInputValueToUseForSearch.bind(this) }), this.showCloseButton && (h("gb-button", { key: '1de4a59a34b9eb09b5e5b39f4b93e46503605ce3', class: `close_button ${this.size}`, size: this.size, hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '7a2e9c687d19498387dd645f66ac6a4460a439bf', class: `content` }, h("div", { key: 'a6592832c7c5ae143a5f1623bdb969079160401c', class: `text text-${this.size}-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+            h("div", { key: 'a08c8ff0005138c4aee4289a98c815a5204f2f84', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '6c942ae9c9c56cfec3721e479b3850b47d375565', class: `input_with_label` }, this.showLabel && (h(Fragment, null, this.formatLabel ? (h("p", { class: "label text-sm-medium" }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())) : (h("p", { class: "label text-sm-medium" }, this.label)))), h("div", { key: 'd40bc9346dc449f5b8b2493246f0fc6421016620', class: `input_dropdown_div ${this.size} ${this.state} ${this.destructive ? 'destructive' : ''} ${this.type === 'tags' ? 'tag' : ''} ${this.dropdownOpen ? 'focused' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (h("svg", { key: '0c139449994eef595711d744ded7f5e98256890a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '7ff723fa4286617994293a6d323974ed7e63539a', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), h("path", { key: '14bb4a35c1ae2b572f19c25982ca17a9e0e7ede1', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: '87a7536899e10bdd8d0b66e00028c26404348864', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'f1ba61c07548ea99d7f696cfd3a063ad4f6524e4', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: '25e57cbc84001246e2baa98f798da5ec17447e47', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: '5c8a907e351aff63c5ac16ced0d3bd33ecfc02ca', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, this.selectedItems.map(item => (h(Fragment, null, typeof item === 'object' ? (h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase()))) : (h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase())))))))))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: '16f724df65f72b491d0353295aca54ce4f6bd4a8', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: '1bab5ab5752293e9aa857fff56e12650fa20f23b', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && this.type !== 'search' && (h(Fragment, null, this.placeholder && (h("div", { key: 'd28e92b19adc6de419f52638c8f5b40dd3e5e24a', class: "placeholder" }, h("p", { key: '08b877e446ab79ce0e548d5bfac7a70bf94d1dd4', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: '1c76a6ed13d7840ae705f05c299aa93726e0d1b1', class: "search_input" }, h("input", { key: '0ebf9381e2beaff2bf7b20b7d61079c5c96e4689', type: "text", placeholder: this.placeholder, class: `text-${this.size}-regular`, ref: el => (this.inputRef = el), onInput: this.emitInputValueToUseForSearch.bind(this) }), this.showCloseButton && (h("gb-button", { key: '399bb12c343c6c1e371c3dcd1dc78f81e05fe46c', class: `close_button ${this.size}`, size: this.size, hierarchy: "tertiary_gray", icon: "only", state: "default", "icon-leading": true, "icon-leading-swap": "assets/cancel-01.svg", onClick: () => this.clearInput() })))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '274fb8f21ddf92db1408fa5c73575da035ea52ff', class: `content` }, h("div", { key: '494d658a4ca4a3ea135e877e9c61cb191958bb5e', class: `text text-${this.size}-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .split(' ')
                 .map(part => part.charAt(0).toUpperCase())
                 .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .split(' ')
                 .map(part => part.charAt(0).toUpperCase())
-                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h("p", { class: `selected_text text-${this.size}-regular` }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '68defc0e659e56838fade606bba865e81d331653', class: `supporting_text text-${this.size}-regular`, style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && item.username))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: 'd3a55d54104b3c4f17d6c370d0d921b19950d144', class: `content` }, h("div", { key: '72804ed2d61d2410d1c960d99cf5a06a37fd9c96', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h("p", { class: `selected_text text-${this.size}-regular` }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: 'b08834b64f0839d0a96e1f11a8a2d6ad3168154c', class: `supporting_text text-${this.size}-regular`, style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && item.username))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: '2611c07d4a571721502ad4f5e25fb37888b6facf', class: `content` }, h("div", { key: '11a88276f5e7d842591c241389f2ed1b36c10fc1', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .split(' ')
                 .map(part => part.charAt(0).toUpperCase())
-                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: 'e09a0d414eafe197ce3b5bcedab187ad00a94044', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && h(Fragment, null, item.username))))))))))), this.showHelpIcon && (h("div", { key: '01ebd3353d13d96424deb129b767b988dafaa9cd', class: `help_icon` }, h("gb-help-tooltip", { key: '2b8482a7aa6306426c480f93a0aa065ac5611fda', "show-supporting-text": true }, h("slot", { key: '723b33723caf7b2550943b8c5b591ae5590735f3', name: "tooltip_label", slot: "label" }), h("slot", { key: '1d3037ceb3b63d08b1aa69ea4ffeb48d9f69b756', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: 'da20da8f7e9bead3d793d64db2f8893bd1f65471', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '00223768023180c6d401751a500dbee797125702', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '65095a22ab4677d92420114136c8ac4ca056dfd5', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: '89048a5451d8ce9e6ff69336681d892666958904', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: '44d3428125b5337c815de4f3273b5d7315411654', class: "dropdown_search_field" }, h("gb-input-field", { key: 'c757a8165cdf2790b91997ca31a56d57b4f81492', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.bind(this) }))), this.loading && (h("div", { key: '2933fe1822596da969e3f02dbf5d8ab1721ae6d0', class: "loader_div" }, h("div", { key: '9635536230a79d0c95c7d152173fac09163f9b22', class: "loader" }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: 'a8dfbe8957ca43be45f88e2018e260e6b6920f13', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? h(Fragment, null, this.selectedItem.username) : h(Fragment, null, this.value.map(item => typeof item === 'object' && h(Fragment, null, item.username))))))))))), this.showHelpIcon && (h("div", { key: '58cfd9fc01ea4dc6761525f5b6d9c469c5e49009', class: `help_icon` }, h("gb-help-tooltip", { key: 'f7072c770264723851021851ea26fa9c8f7c0f47', "show-supporting-text": true }, h("slot", { key: '4d469fb73c60ad7e0e5fe39685eba2edcc69d94e', name: "tooltip_label", slot: "label" }), h("slot", { key: '2970bfc0ca2e7bf8d65a9654c0d14f22b5cc07b7', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '1644280a7d2bdebe577cd05b3b04b472ec52a286', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '53ca8ad9e42c5aa45e4132798fd2e4c25273e553', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '786ebe274178a6c9c032b889b1cbd01b92e975fa', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: '449da8643249f0b002dfd71a9f80945c0bd3a860', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'ed89f83d37ad5fc6c6a46eec220cfde6b04d50cc', class: "dropdown_search_field" }, h("gb-input-field", { key: '4d1160ade34ee39796a2ed9f26ffe4756e096ced', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: this.placeholder, type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItemsInDropdownMenu.bind(this) }))), this.loading && (h("div", { key: '44871e5cb6b796c540159639fc6fd1e1df06f5c0', class: "loader_div" }, h("div", { key: '74d78255ad677ebee301d802d7bac67cb52ca14c', class: "loader" }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
             //Empty state for when there are no search results
             h("div", { class: "empty_state" }, h("img", { src: emptyStateBackground, class: "background", alt: "" }), h("div", { class: "message_background" }, h("img", { src: illustration, alt: "", class: "illustration" }), h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (h(Fragment, null, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username), h("h1", { slot: "initials" }, item.name.split(' ').map(part => part.charAt(0).toUpperCase())))) : (h(Fragment, null, h("p", { slot: "name" }, item), h("h1", { slot: "initials" }, item.split(' ').map(part => part.charAt(0).toUpperCase()))))))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, item.username))) : (h("p", { slot: "name" }, item))))))) : (h(Fragment, null, h("gb-input-dropdown-menu-item", { state: StateEnum.Default, "supporting-text": this.supportingText, color: this.color, onClick: () => this.handleItemSelect() }, h("p", { slot: "name" }, "--", this.placeholder, "--")), this.items.map(item => [
                 h("gb-input-dropdown-menu-item", { type: this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("h1", { slot: "initials" }, item.name

package/dist/collection/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.js

@@ -48,13 +48,13 @@ export class GbInputDropdownMenuItem {
     render() {
         return (
         // <div class="dropdown-container" onClick={() => (this.selected = !this.selected)}>
-        h("div", { key: 'df5a5cac80a9e99093684183ce25f541a95ee9b9', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: '562565d4ffdc35fb82828e53353aaa66f94e83bc', class: {
+        h("div", { key: 'fa77ed652d39f6c3b2559a8cd4617407c3a42cdd', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: '355198ae3f11dc003950e9b5d4d9c9c0cd5045f7', class: {
                 'dropdown-item': true,
                 'selected': this.selected,
                 'disabled': this.state === 'disabled',
                 'checkbox': this.type === 'checkbox',
                 [this.type]: true,
-            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '8530ddaf0e6bcdc0aa003cb7b251995d75cfa333', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: 'e5da51aa0b423d2fa49cd659e1cf7838822fd02c', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: '598392c52043f27f571dac7ec3956bf18bb2e287', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: 'ed4433e02f393a51970923ce800cd0128d54c6fe', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h(Fragment, null, this.state === 'default' ? (h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && h("gb-checkbox", { key: '438f9cd2481a8a65cff006e4cf856ad7cabafae2', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: 'ea671c5f54c30c617f3f44367e2d20a226c86ae1', name: "name" }), this.supportingText && (h("span", { key: '8919e83d2f0b9e67d71691660d74ade85adb5dce' }, h("slot", { key: '79b23f45a1115c5957e6c72fc0ac7e1aa43ffa1c', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: '3a550dcf3482e8fe97546f993eb58f2624cba1a0', class: `tick` }, this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+            }, role: "option", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.state === 'disabled' ? 'true' : 'false' }, h("div", { key: '77046768080f83ef7127989e4760ceb20601eeb5', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: '5daa9ecddfe8e988783bfd9abcb10ea0e15e36be', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: '03533c6627a5743a1873405fea0508bd811f21cb', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: 'b98453051eca4c260881c52cb17513d058df4ff7', name: "initials", slot: "initials" }))), this.type === 'dot_leading' && (h(Fragment, null, this.state === 'default' ? (h("svg", { id: "icon", xmlns: "http://www.w3.org/2000/svg", width: "10px", height: "10px", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#17B26A" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" }, h("circle", { cx: "5", cy: "5", r: "4", fill: "#EEF2F6" }))))), this.type === 'checkbox' && h("gb-checkbox", { key: '864e6c2cea11d1714b8f4d159436ae5e01a0da20', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '698f5fc0115b5c8b63c1d6519173cd84417ada3d', name: "name" }), this.supportingText && (h("span", { key: 'e51c7ab5e021abe78eae67cf156ef0b07e0ffe79' }, h("slot", { key: 'd21408bad24fd8b9a8149a8053019b1f67310602', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: 'c05d80b5cb35cb08c4527da99571b40dfa7f86a6', class: `tick` }, this.state !== 'disabled' ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#075DB2", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))) : (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { d: "M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337", stroke: "#CDD5DF", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "gb-input-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-input-field/gb-input-field.css

@@ -2746,7 +2746,7 @@ input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
-  /* Make the text use your normal color */ 
+  /* Make the text use your normal color */
   -webkit-text-fill-color: var(--color-text, #4b5565);
 
   /* Remove the yellow background Chrome applies by covering it */
@@ -2762,7 +2762,6 @@ input:autofill {
   color: var(--color-text, #4b5565);
 }
 
-
 .input_container,
 .input_with_label {
   display: flex;
@@ -2817,7 +2816,7 @@ input:autofill {
 .input,
 .input.icon_leading,
 .password_input {
-  border: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #cdd5df);
   background: var(--color-background-card, #ffffff);
 }
 
@@ -2836,7 +2835,7 @@ input:autofill {
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #cdd5df);
   border-right: none;
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
@@ -2872,6 +2871,10 @@ input:autofill {
   cursor: pointer;
 }
 
+.leading_dropdown_dropdown.disabled {
+  padding-left: var(--spacing-2);
+}
+
 .dropdown_arrow {
   display: flex;
   align-items: center;
@@ -3043,12 +3046,12 @@ input:autofill {
   gap: var(--spacing-2);
   flex: 1 0 0;
   align-self: stretch;
-  border: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #cdd5df);
   border-radius: 0.5rem var(--rounded-none) var(--rounded-none) 0.5rem;
 }
 
 .action {
-  border: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #cdd5df);
   border-left: none;
   display: flex;
   /* padding-right: var(--spacing-1); */
@@ -3066,7 +3069,7 @@ input:autofill {
 .vertical_line {
   width: 1px;
   height: 100%;
-  background-color: var(--color-border-input, #CDD5DF);
+  background-color: var(--color-border-input, #cdd5df);
   /* border-right: 1px solid var(--color-border-input, #CDD5DF); */
 }
 
@@ -3085,6 +3088,7 @@ input:autofill {
 .dropdown_menu {
   display: flex;
   width: fit-content;
+  min-height: fit-content;
   padding: var(--spacing-none);
   flex-direction: column;
   align-items: flex-start;
@@ -3099,8 +3103,8 @@ input:autofill {
 }
 
 .dropdown_menu.leading_dropdown,
-.dropdown_menu.trailing_dropdown{
-  height: 10rem;
+.dropdown_menu.trailing_dropdown {
+  height: fit-content;
   overflow-y: auto;
 }
 
@@ -3156,7 +3160,7 @@ input:autofill {
 }
 
 .input_like_parent {
-  border: 1px solid var(--color-border-input, #CDD5DF);
+  border: 1px solid var(--color-border-input, #cdd5df);
   border-radius: var(--rounded-sm);
   display: flex;
   cursor: pointer;