globuswebcomponents 2.5.3 → 2.5.4

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

@@ -1,12 +1,68 @@
-import { h } from "@stencil/core";
+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() {
-        // const illustrationCloudLight = getAssetPath(`assets/illustration_cloud_light.svg`);
-        return (h("svg", { key: 'af6e076f3d11e61e48a68426fc79a5984345a475', xmlns: "http://www.w3.org/2000/svg", width: "144", height: "152", viewBox: "0 0 144 152", fill: "none" }, h("g", { key: 'c7bb6c23fa60247b8d1f4632d0adaaa2f0c766c1', filter: "url(#filter0_dd_7587_532)" }, h("path", { key: 'c58b534697552c60c2cb7d38c6af406468072086', d: "M72 44.6493L77.6161 42.297L72.0007 44.6891V111.664L123.748 89.9791V22.9748L124 22.8691L123.748 22.7573V22.6448L123.618 22.6999L72.4084 0L20 22.3246L20.2481 22.4312L20 89.1634L72 111.624L72 44.6493Z", fill: "#F9FAFB" }), h("path", { key: '71aa16d16c35cc7ae453f7d93d82d748fe574a6f', d: "M72 44.6492V111.624L20 89.1632L20.2481 22.431L72 44.6492Z", fill: "url(#paint0_linear_7587_532)" }), h("path", { key: '5bcf42027defe20b6db81e42b27c02813975827f', d: "M72.0007 44.6891V111.664L123.748 89.9791V22.6448L72.0007 44.6891Z", fill: "url(#paint1_linear_7587_532)" }), h("path", { key: '03c52c74f79d2b63bce89512784754abe8654ac0', d: "M72 44.6493L124 22.8691L72.4084 0L20 22.3246L72 44.6493Z", fill: "#C8E0F9" }), h("path", { key: 'c610d749f4793f5156215a0c8d37c59053cd3aab', d: "M39.6021 13.9748L91.4037 36.5221L91.8743 52.953L106.368 46.9727L105.93 30.438L52.5953 8.43994L39.6021 13.9748Z", fill: "#E4F0FC" })), h("defs", { key: 'cef8001227e7922f7d223ae99e13f8f273d2b33d' }, h("filter", { key: '44d3428797c01285cac66597db6ed9b7f7781ffc', id: "filter0_dd_7587_532", x: "0", y: "0", width: "144", height: "151.664", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '6d35fd62c1c8d8e028e43ce5e8a77b5331e25d24', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '868ceee3f69c10519a81e34132727f62abf17740', 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: '70b7897c7bb514d4a94198075e5f0afcfe3ae173', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7587_532" }), h("feOffset", { key: '54ea7bf395139f6162cc8974b80006da4174fdd8', dy: "8" }), h("feGaussianBlur", { key: 'fb6be0f0f9694d7865f3858fdaf77e7ec7a50557', stdDeviation: "4" }), h("feColorMatrix", { key: '842467a6c55990fdd96f7d6f4be026eb05122e1a', 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: '1113640eff214a50acbacdc6ca9bd51cfa9e2021', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7587_532" }), h("feColorMatrix", { key: 'c4e3c1bd8ea6c5fc95a71443af88d44b19be2ca7', 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: 'c87b5abd1bbcf8a538be05c9d14b353a8e0387e9', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7587_532" }), h("feOffset", { key: 'a93c70a5157e93ab55976a59602707502b067f50', dy: "20" }), h("feGaussianBlur", { key: '58db525941fd09b2a578f9747d038879c7e05d5a', stdDeviation: "12" }), h("feColorMatrix", { key: '1c95baae5ca5d3b863c0342b65fb34321a0e3ea9', 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: '15fc2d0e92114f6c9bea5ed326003429ed87296c', mode: "normal", in2: "effect1_dropShadow_7587_532", result: "effect2_dropShadow_7587_532" }), h("feBlend", { key: '705b2b5db5db611652327fa451d661b4817ee7bd', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7587_532", result: "shape" })), h("linearGradient", { key: '8b7fe0bd41747a461d0956ef8122663d78b75395', id: "paint0_linear_7587_532", x1: "20", y1: "89.4999", x2: "40.5363", y2: "33.8822", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'b4295422bc2f25fb6588211a735eac053dcebde5', "stop-color": "#9AC7F4" }), h("stop", { key: '0920b6eb13b0c16d23b72fa66ec802453875442d', offset: "1", "stop-color": "#C8E0F9" })), h("linearGradient", { key: 'f8b42bac18381418ec81f20f44bdde308a2a7d16', id: "paint1_linear_7587_532", x1: "72", y1: "46", x2: "130.635", y2: "57.6737", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'ad895273ffcbf8475bfa5616ca14bed08af3ca64', "stop-color": "#9AC7F4" }), h("stop", { key: 'a91696120433d06d67f8ee9a03df60d789514ae6', offset: "1", "stop-color": "#C8E0F9" })))));
+        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"; }
@@ -48,6 +104,32 @@ export class GbIllustration {
                 "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,
@@ -73,6 +155,26 @@ export class GbIllustration {
                 "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,
@@ -101,5 +203,10 @@ export class GbIllustration {
             }
         };
     }
+    static get states() {
+        return {
+            "leadingIconSvg": {}
+        };
+    }
 }
 //# sourceMappingURL=gb-illustration.js.map

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

@@ -1 +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, h } from '@stencil/core';\r\nimport { 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() illustrationStyle: IllustrationTypes;\r\n  @Prop() theme: ThemeTypes = 'system';\r\n\r\n  render() {\r\n    // const illustrationCloudLight = getAssetPath(`assets/illustration_cloud_light.svg`);\r\n\r\n    return (\r\n      <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"144\" height=\"152\" viewBox=\"0 0 144 152\" fill=\"none\">\r\n        <g filter=\"url(#filter0_dd_7587_532)\">\r\n          <path\r\n            d=\"M72 44.6493L77.6161 42.297L72.0007 44.6891V111.664L123.748 89.9791V22.9748L124 22.8691L123.748 22.7573V22.6448L123.618 22.6999L72.4084 0L20 22.3246L20.2481 22.4312L20 89.1634L72 111.624L72 44.6493Z\"\r\n            fill=\"#F9FAFB\"\r\n          />\r\n          <path d=\"M72 44.6492V111.624L20 89.1632L20.2481 22.431L72 44.6492Z\" fill=\"url(#paint0_linear_7587_532)\" />\r\n          <path d=\"M72.0007 44.6891V111.664L123.748 89.9791V22.6448L72.0007 44.6891Z\" fill=\"url(#paint1_linear_7587_532)\" />\r\n          <path d=\"M72 44.6493L124 22.8691L72.4084 0L20 22.3246L72 44.6493Z\" fill=\"#C8E0F9\" />\r\n          <path d=\"M39.6021 13.9748L91.4037 36.5221L91.8743 52.953L106.368 46.9727L105.93 30.438L52.5953 8.43994L39.6021 13.9748Z\" fill=\"#E4F0FC\" />\r\n        </g>\r\n        <defs>\r\n          <filter id=\"filter0_dd_7587_532\" x=\"0\" y=\"0\" width=\"144\" height=\"151.664\" 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_7587_532\" />\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_7587_532\" />\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_7587_532\" />\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_7587_532\" result=\"effect2_dropShadow_7587_532\" />\r\n            <feBlend mode=\"normal\" in=\"SourceGraphic\" in2=\"effect2_dropShadow_7587_532\" result=\"shape\" />\r\n          </filter>\r\n          <linearGradient id=\"paint0_linear_7587_532\" x1=\"20\" y1=\"89.4999\" x2=\"40.5363\" y2=\"33.8822\" gradientUnits=\"userSpaceOnUse\">\r\n            <stop stop-color=\"#9AC7F4\" />\r\n            <stop offset=\"1\" stop-color=\"#C8E0F9\" />\r\n          </linearGradient>\r\n          <linearGradient id=\"paint1_linear_7587_532\" x1=\"72\" y1=\"46\" x2=\"130.635\" y2=\"57.6737\" gradientUnits=\"userSpaceOnUse\">\r\n            <stop stop-color=\"#9AC7F4\" />\r\n            <stop offset=\"1\" stop-color=\"#C8E0F9\" />\r\n          </linearGradient>\r\n        </defs>\r\n      </svg>\r\n    );\r\n  }\r\n}\r\n"]}
+{"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: 'd18a312ab4a4d275b9f1b2887806073e5ffd039c', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '150e9e33131d9e1383ea96845c92e9239fc62b4a', 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: '6987f5cfd84f0228a711e18bacf416d18ce77663', 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: '83ccd0cdcfbaa5cbb149e3ed67ec693aa2b68221', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'e18de06fb56435b5d3d0adffa3699df8a9321d11', 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: 'ae64324260f4e25c04d7a9ff1c56d7580e9b92e8', 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: 'f3981ea88fcf9c923245b8015b9f8b322e1a6cec', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '77f97265e8d0a9dbac2ada7aa0bb2812da7bf0fc', 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: 'cd9687d359ee68eaa0b1f7776567611d4dfb0f59', 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: 'ef2d14cd0f072b7e13ff7ec887128fe863decf89', 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: '923cc41f164d2a833c7f17ffc99c37691838422f', 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: '3b7bdb64544d686b3c4c3b8f740b831ab6414d79', 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: '4212578a429b07dd785fa08a90ee9b7891680393', class: "placeholder" }, h("p", { key: '793eff242e917b281718510133120db88053b680', class: `text-${this.size}-regular`, style: { color: '#CDD5DF' } }, this.placeholder))))), this.state === 'default' && this.type === 'search' && (h("div", { key: 'fd81cb2513a2ef70b78c005154f13ac3aba504d2', class: "search_input" }, h("input", { key: '2c6ea592b2b1d9a473e4f81ebebb18d07534b0bc', 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: '9d4261052ac6ecd917622bd9b053ce34d0acffab', 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: '4c7465ca44d8c469bba9b4f9689135e3f6559a3f', class: `content` }, h("div", { key: '2360a7e5445c5d416e62671951167c183bb92fbc', 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: '8b4b25b408ddc99e1cda317ae85a8e9a3bc00137', 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: '272afa6eca4d2669db16b98377ff1274adc6f307', class: `content` }, h("div", { key: 'fb7258e918bae9c60e3a391db65eed27400280e8', 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: 'cac851da9676f6d666d81d43584ce02d4c16ec55', 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: 'edb7b054de54347ed492c1efc297c02f8c861e87', class: `help_icon` }, h("gb-help-tooltip", { key: '956429b1d9da0c0f071984c773384b76256e51fa', "show-supporting-text": true }, h("slot", { key: 'ca9491c230d05679c0225b79ed6bb4decf9f9c64', name: "tooltip_label", slot: "label" }), h("slot", { key: 'dfb892d9292fd9e771f9b5913dba745cc7b58649', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: 'a64e083a0b218ed04fb85398a3a9a5ebd246b08e', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '012a269f16dbba5c3e039cc7f01630c287eb6b16', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '042af860d19285a3237d50567a6e5149d941fe0a', 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: '66eda75da229629446136cf398407a3ba74d4d3d', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: 'fd9db2d8b68c755a45a5d6a9bc5ed563612e42ff', class: "dropdown_search_field" }, h("gb-input-field", { key: '66e00030d5e66e9967d7111e0d71cd5d59290ce2', 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: 'defa483fff00f5e84e86696d871317b46c7d5eaa', class: "loader_div" }, h("div", { key: 'ec33f6490b0c6e5b52e78bc3eb29fa23f2b4c24c', 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: '8c3b591cdf7d2d63935332cc2a1de99cb648f25d', class: "dropdown-container", onClick: () => this.handleClick() }, h("div", { key: 'a7af27ebce6b30a44a1e1331e68bf646fcb3b165', 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: '74d735d9ca6c5ed4290e08b885be623d649615f1', class: "content" }, this.type === 'icon_leading' && this.iconLeading && h("div", { key: 'c927f10a3c364482732566fabf88ad17bda6bc0c', class: `icon_leading ${this.state}`, innerHTML: this.leadingIconSvg }), this.type === 'avatar_leading' && (h("gb-avatar", { key: '8c33878b7c9f6fe5b5928a9975bd0aa2aa270abf', class: "avatar-icon", size: "xs", color: this.color, text: true }, h("slot", { key: 'fab3a1ce7d8f913528593c8cd45d0d2fef2163b1', 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: '8c598012d31ccf0a402bbf092bbba2e2312c1692', class: "checkbox", size: "md", type: "checkbox", state: this.state, checked: this.selected }), h("slot", { key: '3af73300fe2f16bbab0128235531ee2e9eb614f6', name: "name" }), this.supportingText && (h("span", { key: '4cbdede2e37c4d416f882874062b85de36d38843' }, h("slot", { key: 'ce90b9edf51811d996d5acd730a17bb06ed91b00', name: "supporting_text" })))), this.selected && this.type !== 'checkbox' && (h("div", { key: 'd12f98b56ed38e854d8f898f81a8d802f4d0361f', 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"; }