@rededor/cura 1.3.0 → 1.4.0-alpha.1

package/dist/collection/components/cura-toast/cura-toast.js

@@ -21,7 +21,7 @@ export class CuraToast {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: 'eb867953a8c56ae385b1226686cbe1b1e9df4318' }, h("div", { key: 'c901632a6fb414c981b5c149fdd7081306ae1130', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '98c9a49501c71ee60c6ae1d783bba11d5bdce999', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: '19b2e0bd0d816e94f3b9d1f113f4b833e770cee3', class: "content" }, h("cura-heading", { key: '17ed67e5b531b45b94f8dbc7d65675f7a57308f9', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'dd90e612d924dff9b3e9896dc29cef2541ae51af', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '33cd9c1dd10ae6d3ebd857fab5c70ca7151f8a1b' })), h("slot", { key: '12d18bd482b957cdc5ee7a4fab20bdffe6bc647d', name: "actions" })), this.closeButton && h("cura-icon", { key: '3a83cdd43c6c11587013111c29673f916509b165', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '13ec00fd7146119e9eab81ed6d52b1020d1eb1e8', color: `${this.type}-base`, progress: this.progress }))));
+        return (h(Host, { key: '467952f8386d659d44090163f3e14c0231dfcafd' }, h("div", { key: 'f510e12d309c79842d30cc24409b61433a6fe58e', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'acd2a9d52ad91565c7bd36bc205753bdfe6e3e59', class: "default-icon", name: this.getNameIcon(), size: 16, color: `${this.type}-dark` }), h("div", { key: 'dced39ca17901673360dacbf27764b1387eff20d', class: "content" }, h("cura-heading", { key: '6ac55c8ae757f654c808b72b4f44b54dc822107c', level: 4, size: "xsmall", color: `${this.type}-dark`, weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'e8e83b891e0b7e02901999f1622a183afc94c28e', color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '080891767b1b552520d7d3ed59002a9478eb0288' })), h("slot", { key: '0a43f99bbaf2e4cdd2fd7dc1d5a0431602b76361', name: "actions" })), this.closeButton && h("cura-icon", { key: '1ec27e6d6d44b82ed26a59cb6ba967858b4c8809', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.loader && !!this.autoCloseDelay && h("cura-loader-bar", { key: '6457bb003e4706d3f60b85aa3faa3e0b6b276869', color: `${this.type}-base`, progress: this.progress }))));
     }
     componentDidLoad() {
         this.openContainer();

package/dist/collection/components/cura-tooltip/cura-tooltip.js

@@ -25,7 +25,7 @@ export class CuraTooltip {
         this.setStyle();
     }
     render() {
-        return (h(Host, { key: '228558663e00355ca59429d70a129e4b0e426dc1', role: "tooltip", id: this.elementId }, h("div", { key: 'd8fa27a56dd894a4cfb335fc9de348402590aa93', class: "container", style: this.styles }, h("div", { key: '974114d04252a106deb2174bfe8ecf204e689d26', class: "content" }, h("cura-heading", { key: '14be9154283064e48d2435bc4bb6af6469b18e04', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'db64a96112781640be945502b995dc07392977bd', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'b3a9a3f7a5f227ddc92ac9498c3aee93f9196f77' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: '66c113fe2c3b4c67b1b9e98408b8ca1736d4eb86', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '059b4e579bebc92b5082d98ce8ae3cce9f4da95d', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
+        return (h(Host, { key: '732345360f527ffc69743818657643616b2ee611', role: "tooltip", id: this.elementId }, h("div", { key: '166aa0dd54c933f8b3b8ecc5c5c76824ef180d71', class: "container", style: this.styles }, h("div", { key: '7b54ec53f3b454979c45415ddcd164a71a9ab2b0', class: "content" }, h("cura-heading", { key: '71bf328ed2f9e5d704e6d06989a4bef6d7c4993d', level: 4, size: "xsmall", color: "neutral-black", weight: "bold", "margin-block": "0" }, this.label), h("cura-paragraph", { key: 'a427a4b9df7bfae50300c9947db9df825a2f7da0', color: "neutral-dark", "spot-color": "secondary-darker", size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '65875debf5bd3eec9f3070ab96cf644460897c3b' }))), this.closeButton && !this.isMobile && h("cura-icon", { key: 'dac8229dc0f348b45ea3af9392c2001f638a0efb', class: "close-icon", name: "close", size: 16, color: "error-dark", onClick: this.handleClose }), this.isMobile && h("cura-button-transparent", { key: '6c90921145206d47ab84eaee972a08b9dcad7cf0', class: "close-button", size: "small", type: "button", color: "error", "icon-name": "close", "icon-position": "right", onClick: this.handleClose }, "OK, entendi."))));
     }
     componentDidLoad() {
         this.targetElement = document.querySelector(`[aria-labelledby="${this.elementId}"]`);

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.js

@@ -147,7 +147,7 @@ export class CuraCheckbox {
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: '00334ec058edf0849cf30c65d2f9e2e2e051de96' }, h("div", { key: 'd7c7857afa27a033f0642369717eb3be406f9f27', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'aed0ec8155b2a5c0e3000b416afd6c5455c55f0e', class: "info" }, h("div", { key: 'd90166401c6946c508d2cace62976c2e7374689f', class: "label-wrapper" }, h("cura-label", { key: '7c0c5cc650db37f09127050333f49c5f4b4c7dc6', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '3c1cd2dcad221f4d93bde959ca33273270f0fe45', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '3fd01d993596f36da00b3acfeef02f2a28340eae', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '2c106bd163a1b330a18061c0e99eb21c911d7da9' }))), h("div", { key: '2286927b31856a224049693295caa9e037695749', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '9bb8a436f1500d046a9b57972307cf5feff183d3', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '876fa0a7aa0fc7110cbf0ffeb2d95d529fa78e64' }, h("div", { key: '3e6d730765590ee75d7e045cadc7d03e5fc035e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '0f7f6f3bc61a80e899d940d76fee266af1914f5a', class: "info" }, h("div", { key: 'a836cb0d7751a1a812364fe93a30403b02ec5c95', class: "label-wrapper" }, h("cura-label", { key: '5d180552ec71e22ddd8822727bd32d4167215f33', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '047413aa21a28bc33984d19ad4dc10a38289c205', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '68c9dd6f228ec3204647795f1cae32a8f8797bc2', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '3a35a1219f135002f1b9ae64c0eb4227529bc904' }))), h("div", { key: 'fe969ee332b3c64a259ec552f411b5d2d4bc81e4', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '2cbcbe56130bddb5853cfcc3a8ef1b421f39bc7b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get is() { return "cura-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js

@@ -36,12 +36,12 @@ export class CuraDropdownSearchOption {
         }
     }
     render() {
-        return (h(Host, { key: 'a084adaf6f89be71c8d5dc141705e7a71af353bb', slot: "dropdown-search-option" }, h("div", { key: '58ac361d8f16fdab8ef07d3be3f9c12a8c4b85ef', style: this.styles, class: {
+        return (h(Host, { key: '0dfb8d67f1aee692af5abdad170f2fc3e6c5ffc6', slot: "dropdown-search-option" }, h("div", { key: '6596c224bbfc0e9b5c3d2a39d064852019af5b74', style: this.styles, class: {
                 "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, h("div", { key: '0a7f959582b45df5c30fbbd225fccfc93aa937f4', class: "content-container" }, h("div", { key: '74b8a9626430847bf9dfb32d5188303427d2fd28', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '1dba6e28939841569f290c9fb18d3b7595bac06a', name: "image" }), h("cura-heading", { key: 'f7722edfd7ab87f7d9bacf475d988a1e80af41ef', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'db0385e5e3d2c450ba9a96d75e7913d2fe913d98' }))), h("slot", { key: '734b467cfce5ce114b06a10e3a153723da7ad41d', name: "action" })))));
+            } }, h("div", { key: 'b73badabbcde37615c58707d8a62832363deb694', class: "content-container" }, h("div", { key: '6ea1e5cfa3aa5f7bb7d0a4a2c9c8aff6e076304c', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '9e6272b220a723fbc1b52a23f59873cb4eea0986', name: "image" }), h("cura-heading", { key: '4bec4f91fd5ef5759373d846c0876678e67b1b48', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'c485bfd68ddf4b5bcfa0c590c11344352939fe87' }))), h("slot", { key: '0ce8978f72401af3580c72919b6079ef222dcc0d', name: "action" })))));
     }
     static get is() { return "cura-dropdown-search-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class CuraDropdownSearchOptionTitle {
     render() {
-        return (h(Host, { key: 'e4929a8c5c1c1f11b3e51dc088b2dd506e1bdfa0', slot: "dropdown-search-option" }, h("cura-label", { key: '5bb5406c11a39a6a587737cf99eb1d2deb2ea0da', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'c781e560b512d5362370e9855551b3e088ffbec1' }))));
+        return (h(Host, { key: 'ed1d2aeeba08c3c53f04f434fa46cb178271f405', slot: "dropdown-search-option" }, h("cura-label", { key: '910b1ada8d333ace0171a3180ba6320e813e4fce', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '20816c3a0c9805a88074f36e060ad850157427e2' }))));
     }
     static get is() { return "cura-dropdown-search-option-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js

@@ -8,20 +8,10 @@ export class CuraDropdownSearch {
                 const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;
                 const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
                 if (dropdown) {
-                    if (isKeyboardOpen) {
-                        dropdown.style.position = 'absolute';
-                        dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;
-                    }
-                    else {
-                        dropdown.style.position = 'fixed';
-                        dropdown.style.bottom = '0';
-                    }
+                    dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';
+                    dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';
+                    window.scroll({ top: 0, left: 0, behavior: 'smooth' });
                 }
-                window.scroll({
-                    top: 0,
-                    left: 0,
-                    behavior: 'smooth',
-                });
             });
         };
         this.handleSlotChange = () => {
@@ -59,6 +49,7 @@ export class CuraDropdownSearch {
                     this.showOverlay();
                 }
                 else {
+                    this.resetDropdownStyles();
                     this.removeOverlay();
                 }
             }
@@ -83,6 +74,7 @@ export class CuraDropdownSearch {
         this.isOnBlurInput = true;
         this.hoveredIndex = -1;
         this.options = [];
+        this.originalOverflow = '';
     }
     connectedCallback() {
         this.weights = window.CuraAPI.theme.fonts.getWeights();
@@ -134,12 +126,15 @@ export class CuraDropdownSearch {
             this.overlayElement.style.zIndex = '9999';
             this.overlayElement.style.backgroundColor = 'white';
             document.body.appendChild(this.overlayElement);
+            this.originalOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
         }
     }
     removeOverlay() {
         if (this.overlayElement && this.overlayElement.parentNode === document.body) {
             document.body.removeChild(this.overlayElement);
             this.overlayElement = null;
+            document.body.style.overflow = this.originalOverflow;
         }
     }
     addClickListenersToOptions() {
@@ -163,6 +158,7 @@ export class CuraDropdownSearch {
             this.updateSelectedOption(this.value);
             this.isDropdownOpen = false;
             this.isOnBlurInput = true;
+            this.resetDropdownStyles();
             this.removeOverlay();
         }
     }
@@ -202,6 +198,7 @@ export class CuraDropdownSearch {
         if (this.isOnBlurInput === true) {
             setTimeout(() => {
                 this.isDropdownOpen = false;
+                this.resetDropdownStyles();
                 this.removeOverlay();
             }, 200);
         }
@@ -235,11 +232,23 @@ export class CuraDropdownSearch {
             this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);
         }
     }
+    handleGoBack() {
+        this.resetDropdownStyles();
+        this.isMobile = false;
+    }
+    resetDropdownStyles() {
+        var _a;
+        const dropdown = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.dropdown-mobile');
+        if (dropdown && dropdown.style.position === 'fixed') {
+            dropdown.style.position = 'relative';
+            dropdown.style.removeProperty('bottom');
+        }
+    }
     render() {
         const isMobileDropdown = this.isMobile && this.isDropdownOpen;
-        return (h(Host, { key: '36a0df3dfbe9f164ccb41541fb5373b0e94c86bd', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'e17cf1eec89b0346f49f497ffc6e5ea272fcd3eb', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: 'eb33cc0c6abd4792cb18a4e55eaed913e4f75761', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'd837a3a15a89a9bd14260a32e3e218a3f53a18b1', fontColor: "dark", onClick: () => (this.isMobile = false), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: 'c8a02959ee1d637fde64fbcd8be238b7562f0790', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
+        return (h(Host, { key: '21f8601dd62ce272ac6856e6f951268b2fbbf32d', style: this.hostCSSProperties(), class: "dropdown-overlay" }, h("div", { key: 'a6841c5564454fcc33a4d053cd506c17f53026d3', class: `dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`, style: this.styles }, h("div", { key: '3653377bc88d97c60a049731f6286aa5d7fc516c', class: this.getClasses() }, this.isMobile && this.isDropdownOpen && (h("cura-button-transparent", { key: 'bd4614e2859df22d74d27532171e73de1cf60979', fontColor: "dark", onClick: () => this.handleGoBack(), iconName: "arrowLeft", size: "medium", iconOnly: true, color: "primary" })), h("cura-input-text", { key: '811d3745b6963d3aff02d58a39f7f1be472646fa', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: isMobileDropdown ? 'transparent' : 'default', required: this.required, hideErrorIcon: this.status === 'error', iconName: this.iconName || 'search', value: this.value, status: this.status, onValueChange: e => this.onValueChange(e.target.value), onInput: e => this.handleInputChange(e), onFocus: () => this.handleOnFocus(), onClick: () => (window.innerWidth < 768 ? (this.isMobile = true) : null), onBlur: () => {
                 this.handleOnBlur();
-            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: '9cc22d4cf269fee171456169b787be54a814189e', name: "helperText" }))), h("div", { key: '4a9ce1710312984d2af67ac3a04df504183caaf6', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: 'afdeb4b938c3d6767e440f4b32316c45b2a5e86f', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
+            }, placeholder: this.placeholder, size: this.size, onKeyDown: this.handleKeyDown }, h("slot", { key: 'a928b64d301c0cd674612698839a213344dc6798', name: "helperText" }))), h("div", { key: '06ba9b411e46969ccf7378869bc37d202084ead0', id: "dropdown-search-list", class: this.getDropdownClasses() }, h("slot", { key: '8915959d70f28a28c7b8035e77c34ed1f7035727', name: "dropdown-search-option", onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "cura-dropdown-search"; }
     static get encapsulation() { return "shadow"; }
@@ -464,7 +473,8 @@ export class CuraDropdownSearch {
             "inputTextRef": {},
             "isOnBlurInput": {},
             "hoveredIndex": {},
-            "options": {}
+            "options": {},
+            "originalOverflow": {}
         };
     }
     static get events() {

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOrG,MAAM,OAAO,kBAAkB;;QAmHrB,mBAAc,GAA0B,IAAI,CAAC;QAI7C,wBAAmB,GAAG,GAAG,EAAE;YACjC,MAAM,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;;gBACpD,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC;gBACvE,MAAM,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,kBAAkB,CAAqB,CAAC;gBAE7F,IAAI,QAAQ,EAAE,CAAC;oBACb,IAAI,cAAc,EAAE,CAAC;wBACnB,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;wBACrC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,IAAI,CAAC;oBAC3E,CAAC;yBAAM,CAAC;wBACN,QAAQ,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;wBAClC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;oBAC9B,CAAC;gBACH,CAAC;gBAED,MAAM,CAAC,MAAM,CAAC;oBACZ,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,CAAC;oBACP,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAC;YACL,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QAmEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,CAAC,CAAC,CAAC;YACrF,IAAI,CAAC,0BAA0B,EAAE,CAAC;YAClC,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC,CAAC;QAkBM,sBAAiB,GAAG,CAAC,KAAY,EAAE,EAAE;YAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;YAC/C,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YACzB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC/B,sCAAsC;QACxC,CAAC,CAAC;QAgBM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;YACxB,CAAC;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBACnC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;YACzB,CAAC;iBAAM,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACjC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC,EAAE,CAAC;oBAC3B,IAAI,CAAC,YAAY,EAAE,CAAC;oBACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBAC3C,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QAwCM,iBAAY,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC;YACxC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,CAAC;YACH,CAAC;QACH,CAAC,CAAC;oBArT2E,OAAO;sBAK7B,SAAS;wBAMnB,KAAK;;wBAUU,KAAK;wBAKL,KAAK;qBAKT,EAAE;2BAKI,EAAE;qBAKR,EAAE;wBAKtB,QAAQ;iCAMC,OAAO;8BAUjB,KAAK;8BAUL,KAAK;sBAMtB,EAAE;wBAKS,MAAM,CAAC,UAAU,GAAG,GAAG;oBAKT,SAAS;;6BASlB,IAAI;4BAKN,CAAC,CAAC;uBAWwB,EAAE;;IAyB5D,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;QAC/E,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,CAAC;QACrF,IAAI,CAAC,MAAM,CAAC,wBAAwB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,EAAE,IAAI,CAAC,CAAC;QACpG,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QACjF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC;QACtE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAClE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC;QACtE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;IAC5D,CAAC;IAGD,aAAa,CAAC,QAAgB;QAC5B,IAAI,CAAC,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACzC,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,2BAA2B,EAAE,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IACD,gBAAgB;QACd,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACrD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAC9D,CAAC;IAED,oBAAoB;QAClB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACxD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;IACjE,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACzB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACpD,IAAI,CAAC,cAAc,CAAC,SAAS,GAAG,kBAAkB,CAAC;YACnD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;YAC7C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;YACpC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YACrC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YACzC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC1C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC1C,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,eAAe,GAAG,OAAO,CAAC;YACpD,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACjD,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,KAAK,QAAQ,CAAC,IAAI,EAAE,CAAC;YAC5E,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YAC/C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAC7B,CAAC;IACH,CAAC;IAQO,0BAA0B;QAChC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACrC,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC;QAChF,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,oBAAoB,CAAC,KAAa;QACxC,MAAM,mBAAmB,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,KAAK,CAAC,CAAC;QACrG,IAAI,CAAC,YAAY,GAAG,mBAAmB,CAAC;QACxC,IAAI,CAAC,qBAAqB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,CAAC,qBAAqB,CAAC,UAAU,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAE1D,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IASO,gBAAgB,CAAC,KAAa;QACpC,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC3C,IAAI,cAAc,CAAC,UAAU,EAAE,CAAC;YAC9B,MAAM,aAAa,GAAG,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,cAAc,CAAC,WAAW,CAAC;YAEzF,IAAI,CAAC,KAAK,GAAG,aAAa,IAAI,EAAE,CAAC;YACjC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAEtC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;IACH,CAAC;IAkBO,aAAa,CAAC,SAAiB;QACrC,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC;QACjG,IAAI,CAAC,YAAY,GAAG,QAAQ,CAAC;QAC7B,IAAI,CAAC,qBAAqB,CAAC,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAEO,qBAAqB,CAAC,SAAiB,EAAE,aAAqB;QACpE,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;YACpC,MAAc,CAAC,SAAS,CAAC,GAAG,KAAK,KAAK,aAAa,CAAC;QACvD,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,kBAAkB;QACxB,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;QACpC,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,KAAK,YAAY,CAAC,CAAC;IACxG,CAAC;IAEO,cAAc;;QACpB,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,uBAAuB,CAAC,CAAC;QAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAEtD,IAAI,SAAS,IAAI,aAAa,EAAE,CAAC;YAC/B,MAAM,UAAU,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC;YACzD,MAAM,aAAa,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAExD,IAAI,UAAU,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC;gBAC7C,SAAS,CAAC,SAAS,IAAI,UAAU,CAAC,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC;YAClE,CAAC;YAED,IAAI,UAAU,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,EAAE,CAAC;gBACvC,SAAS,CAAC,SAAS,IAAI,aAAa,CAAC,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC;YAC5D,CAAC;QACH,CAAC;IACH,CAAC;IAaD,YAAY;QACV,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,EAAE,CAAC;YAChC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;gBAC5B,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;IACH,CAAC;IACD,UAAU;QACR,OAAO;YACL,uBAAuB,EAAE,IAAI;YAC7B,eAAe,EAAE,IAAI,CAAC,cAAc;YACpC,UAAU,EAAE,IAAI,CAAC,QAAQ;YACzB,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI;SACpB,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,OAAO;YACL,sBAAsB,EAAE,IAAI;YAC5B,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;SACrE,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,OAAO;YACL,uBAAuB,EAAE,IAAI,CAAC,iBAAiB;SAChD,CAAC;IACJ,CAAC;IAED,aAAa;QACX,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,2BAA2B;;QACzB,MAAM,0BAA0B,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAqB,CAAC;QACrH,IAAI,0BAA0B,EAAE,CAAC;YAC/B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,+BAA+B,EAAE,GAAG,0BAA0B,CAAC,YAAY,IAAI,CAAC,CAAC;QAC/G,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC;QAC9D,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAC,kBAAkB;YAC7D,4DAAK,KAAK,EAAE,YAAY,gBAAgB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM;gBACrF,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;oBAC1B,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,cAAc,IAAI,CACvC,gFACE,SAAS,EAAC,MAAM,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,EACtC,QAAQ,EAAC,WAAW,EACpB,IAAI,EAAC,QAAQ,EACb,QAAQ,QACR,KAAK,EAAC,SAAS,GACU,CAC5B;oBACD,wEACE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAC,kBAAkB,EACvB,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAClD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,OAAO,EACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,QAAQ,EACnC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAe,CAAC,EAChE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,EACvC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EACxE,MAAM,EAAE,GAAG,EAAE;4BACX,IAAI,CAAC,YAAY,EAAE,CAAC;wBACtB,CAAC,EACD,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAE,IAAI,CAAC,aAAa;wBAE7B,6DAAM,IAAI,EAAC,YAAY,GAAQ,CACf,CACd;gBACN,4DAAK,EAAE,EAAC,sBAAsB,EAAC,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE;oBAC7D,6DAAM,IAAI,EAAC,wBAAwB,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAC5E,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  /**\n   * Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n   */\n  @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the dropdown search component.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Indicates if the dropdown search is required.\n   */\n  @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n  /**\n   * Indicates if the dropdown search is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * The value of the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * The placeholder text for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n  /**\n   * The label for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) label: string = '';\n\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) iconName = 'search';\n\n  /**\n   * CSS max-height property for dropdown item.\n   * Default to 630px\n   */\n  @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Indicates if the overlay is visible.\n   */\n  @State() overlayVisible: boolean = false;\n\n  /**\n   * Event emitted when the value changes.\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  /**\n   * Indicates if the dropdown is open.\n   */\n  @State() isDropdownOpen: boolean = false;\n\n  /**\n * Styles for the component.\n\n */\n  @State() styles = {};\n\n  /**\n   * Indicates if the component is being viewed on a mobile device.\n   */\n  @State() isMobile: boolean = window.innerWidth < 768;\n\n  /**\n   * The mode of the dropdown search.\n   */\n  @State() mode: 'default' | 'transparent' = 'default';\n\n  @Event() onselect: EventEmitter;\n\n  @State() inputTextRef!: HTMLCuraInputTextElement;\n\n  /**\n   * Indicates if the input is on blur.\n   */\n  @State() isOnBlurInput: boolean = true;\n\n  /**\n   * The index of the currently hovered option.\n   */\n  @State() hoveredIndex: number = -1;\n\n  /**\n   * The options for the dropdown search.\n   * @type {HTMLCuraDropdownSearchOptionElement[]}\n   */\n\n  weights;\n\n  private overlayElement: HTMLDivElement | null = null;\n\n  @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n  private adjustInputPosition = () => {\n    window.visualViewport.addEventListener('resize', () => {\n      const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;\n      const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n      if (dropdown) {\n        if (isKeyboardOpen) {\n          dropdown.style.position = 'absolute';\n          dropdown.style.bottom = `${window.screen.height - window.innerHeight}px`;\n        } else {\n          dropdown.style.position = 'fixed';\n          dropdown.style.bottom = '0';\n        }\n      }\n\n      window.scroll({\n        top: 0,\n        left: 0,\n        behavior: 'smooth',\n      });\n    });\n  };\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n    this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string) {\n    this.updateSelectedOption(newValue);\n    this.valueChanged.emit(newValue);\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    if (this.isDropdownOpen && this.isMobile) {\n      this.showOverlay();\n      this.getDropdownSearchListHeight();\n    } else {\n      this.removeOverlay();\n    }\n  }\n  componentDidLoad() {\n    window.addEventListener('resize', this.handleResize);\n    window.addEventListener('resize', this.adjustInputPosition);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\n    window.removeEventListener('resize', this.adjustInputPosition);\n  }\n\n  private showOverlay() {\n    if (!this.overlayElement) {\n      this.overlayElement = document.createElement('div');\n      this.overlayElement.className = 'dropdown-overlay';\n      this.overlayElement.style.position = 'fixed';\n      this.overlayElement.style.top = '0';\n      this.overlayElement.style.left = '0';\n      this.overlayElement.style.width = '100%';\n      this.overlayElement.style.height = '100%';\n      this.overlayElement.style.zIndex = '9999';\n      this.overlayElement.style.backgroundColor = 'white';\n      document.body.appendChild(this.overlayElement);\n    }\n  }\n\n  private removeOverlay() {\n    if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n      document.body.removeChild(this.overlayElement);\n      this.overlayElement = null;\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n    this.addClickListenersToOptions();\n    this.updateHoveredIndex();\n  };\n\n  private addClickListenersToOptions() {\n    this.options.forEach((option, index) => {\n      option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n    });\n  }\n\n  private updateSelectedOption(value: string) {\n    const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n    this.hoveredIndex = selectedOptionIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.updateOptionAttribute('selected', this.hoveredIndex);\n\n    this.scrollIntoView();\n    this.adjustInputPosition();\n  }\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.onValueChange(this.value);\n    // this.valueChanged.emit(this.value);\n  };\n\n  private onSelectedOption(index: number) {\n    const selectedOption = this.options[index];\n    if (selectedOption.selectable) {\n      const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n      this.value = selectedValue || '';\n      this.updateSelectedOption(this.value);\n\n      this.isDropdownOpen = false;\n      this.isOnBlurInput = true;\n      this.removeOverlay();\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.moveHighlight(1);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.moveHighlight(-1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      if (this.hoveredIndex > -1) {\n        this.handleOnBlur();\n        this.onSelectedOption(this.hoveredIndex);\n      }\n    }\n  };\n\n  private moveHighlight(direction: number) {\n    const visibleOptions = this.options;\n    const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n    this.hoveredIndex = newIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.scrollIntoView();\n  }\n\n  private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n    this.options.forEach((option, index) => {\n      (option as any)[attribute] = index === indexToUpdate;\n    });\n  }\n\n  private updateHoveredIndex() {\n    const visibleOptions = this.options;\n    const currentValue = this.value;\n    this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n  }\n\n  private scrollIntoView() {\n    const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n    const hoveredOption = this.options[this.hoveredIndex];\n\n    if (container && hoveredOption) {\n      const optionRect = hoveredOption.getBoundingClientRect();\n      const containerRect = container.getBoundingClientRect();\n\n      if (optionRect.bottom > containerRect.bottom) {\n        container.scrollTop += optionRect.bottom - containerRect.bottom;\n      }\n\n      if (optionRect.top < containerRect.top) {\n        container.scrollTop -= containerRect.top - optionRect.top;\n      }\n    }\n  }\n\n  private handleResize = () => {\n    this.isMobile = window.innerWidth < 768;\n    if (this.isDropdownOpen) {\n      if (this.isMobile) {\n        this.showOverlay();\n      } else {\n        this.removeOverlay();\n      }\n    }\n  };\n\n  handleOnBlur() {\n    if (this.isOnBlurInput === true) {\n      setTimeout(() => {\n        this.isDropdownOpen = false;\n        this.removeOverlay();\n      }, 200);\n    }\n  }\n  getClasses() {\n    return {\n      'dropdown-input-search': true,\n      'dropdown-open': this.isDropdownOpen,\n      'disabled': this.disabled,\n      [this.status]: true,\n    };\n  }\n\n  getDropdownClasses() {\n    return {\n      'dropdown-search-list': true,\n      'visible': this.options.length && this.isDropdownOpen ? true : false,\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--dropdown-max-height': this.dropdownMaxHeight,\n    };\n  }\n\n  handleOnFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  getDropdownSearchListHeight() {\n    const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n    if (dropdownInputSearchElement) {\n      this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n    }\n  }\n\n  render() {\n    const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n    return (\n      <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n        <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n          <div class={this.getClasses()}>\n            {this.isMobile && this.isDropdownOpen && (\n              <cura-button-transparent\n                fontColor=\"dark\"\n                onClick={() => (this.isMobile = false)}\n                iconName=\"arrowLeft\"\n                size=\"medium\"\n                iconOnly\n                color=\"primary\"\n              ></cura-button-transparent>\n            )}\n            <cura-input-text\n              disabled={this.disabled}\n              label={this.label}\n              part=\"cura-input-field\"\n              mode={isMobileDropdown ? 'transparent' : 'default'}\n              required={this.required}\n              hideErrorIcon={this.status === 'error'}\n              iconName={this.iconName || 'search'}\n              value={this.value}\n              status={this.status}\n              onValueChange={e => this.onValueChange(e.target.value as string)}\n              onInput={e => this.handleInputChange(e)}\n              onFocus={() => this.handleOnFocus()}\n              onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n              onBlur={() => {\n                this.handleOnBlur();\n              }}\n              placeholder={this.placeholder}\n              size={this.size}\n              onKeyDown={this.handleKeyDown}\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n            <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"cura-dropdown-search.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, State, Event, EventEmitter, Element, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search',\n  styleUrl: 'cura-dropdown-search.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearch {\n  /**\n   * Size of the dropdown search mode default: 'small', 'medium', or 'large' (default: 'large')\n   */\n  @Prop({ reflect: true, mutable: true }) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n   * Define the status of the dropdown search.\n   */\n  @Prop({ reflect: true }) status: 'error' | 'default' = 'default';\n\n  /**\n   * Whether the select component is disabled.\n   * Reflects as an attribute in the DOM.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The name of the dropdown search component.\n   */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * Indicates if the dropdown search is required.\n   */\n  @Prop({ reflect: true, mutable: true }) required: boolean = false;\n\n  /**\n   * Indicates if the dropdown search is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * The value of the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * The placeholder text for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) placeholder: string = '';\n\n  /**\n   * The label for the dropdown search.\n   */\n  @Prop({ reflect: true, mutable: true }) label: string = '';\n\n  /**\n   * Custom icon name. Default: search.\n   */\n  @Prop({ reflect: true }) iconName = 'search';\n\n  /**\n   * CSS max-height property for dropdown item.\n   * Default to 630px\n   */\n  @Prop({ reflect: true }) dropdownMaxHeight = '630px';\n\n  /**\n   * Reference to the host element.\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Indicates if the overlay is visible.\n   */\n  @State() overlayVisible: boolean = false;\n\n  /**\n   * Event emitted when the value changes.\n   */\n  @Event() valueChanged: EventEmitter<string>;\n\n  /**\n   * Indicates if the dropdown is open.\n   */\n  @State() isDropdownOpen: boolean = false;\n\n  /**\n * Styles for the component.\n\n */\n  @State() styles = {};\n\n  /**\n   * Indicates if the component is being viewed on a mobile device.\n   */\n  @State() isMobile: boolean = window.innerWidth < 768;\n\n  /**\n   * The mode of the dropdown search.\n   */\n  @State() mode: 'default' | 'transparent' = 'default';\n\n  @Event() onselect: EventEmitter;\n\n  @State() inputTextRef!: HTMLCuraInputTextElement;\n\n  /**\n   * Indicates if the input is on blur.\n   */\n  @State() isOnBlurInput: boolean = true;\n\n  /**\n   * The index of the currently hovered option.\n   */\n  @State() hoveredIndex: number = -1;\n\n  /**\n   * The options for the dropdown search.\n   * @type {HTMLCuraDropdownSearchOptionElement[]}\n   */\n\n  weights;\n\n  private overlayElement: HTMLDivElement | null = null;\n\n  @State() options: HTMLCuraDropdownSearchOptionElement[] = [];\n\n  /**\n   *\n   * Stores the original value of the 'overflow' style of the body\n   * before blocking the scroll.\n   */\n  @State() originalOverflow: string = '';\n\n  private adjustInputPosition = () => {\n    window.visualViewport.addEventListener('resize', () => {\n      const isKeyboardOpen = window.innerHeight < window.screen.height * 0.8;\n      const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n\n      if (dropdown) {\n        dropdown.style.position = isKeyboardOpen ? 'absolute' : 'fixed';\n        dropdown.style.bottom = isKeyboardOpen ? `${window.screen.height - window.innerHeight}px` : '0';\n        window.scroll({ top: 0, left: 0, behavior: 'smooth' });\n      }\n    });\n  };\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--info-base'] = window.CuraAPI.theme.colors.getColor('info-base');\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor('neutral-purewhite');\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor('neutral-light');\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor('neutral-dark');\n    this.styles['--neutral-black-shadow'] = window.CuraAPI.theme.colors.getColor(`neutral-black`, 0.16);\n    this.styles['--error-dark'] = window.CuraAPI.theme.colors.getColor('error-dark');\n    this.styles['--error-lighter'] = window.CuraAPI.theme.colors.getColor('error-lighter');\n    this.styles['--breakpoints'] = window.CuraAPI.theme.breakpoints.get();\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string) {\n    this.updateSelectedOption(newValue);\n    this.valueChanged.emit(newValue);\n  }\n\n  componentWillLoad() {\n    this.updateSelectedOption(this.value);\n  }\n\n  componentDidRender() {\n    if (this.isDropdownOpen && this.isMobile) {\n      this.showOverlay();\n      this.getDropdownSearchListHeight();\n    } else {\n      this.removeOverlay();\n    }\n  }\n  componentDidLoad() {\n    window.addEventListener('resize', this.handleResize);\n    window.addEventListener('resize', this.adjustInputPosition);\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('resize', this.handleResize);\n    window.removeEventListener('resize', this.adjustInputPosition);\n  }\n\n  private showOverlay() {\n    if (!this.overlayElement) {\n      this.overlayElement = document.createElement('div');\n      this.overlayElement.className = 'dropdown-overlay';\n      this.overlayElement.style.position = 'fixed';\n      this.overlayElement.style.top = '0';\n      this.overlayElement.style.left = '0';\n      this.overlayElement.style.width = '100%';\n      this.overlayElement.style.height = '100%';\n      this.overlayElement.style.zIndex = '9999';\n      this.overlayElement.style.backgroundColor = 'white';\n      document.body.appendChild(this.overlayElement);\n\n      this.originalOverflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n  }\n\n  private removeOverlay() {\n    if (this.overlayElement && this.overlayElement.parentNode === document.body) {\n      document.body.removeChild(this.overlayElement);\n      this.overlayElement = null;\n      document.body.style.overflow = this.originalOverflow;\n    }\n  }\n\n  private handleSlotChange = () => {\n    this.options = Array.from(this.host.querySelectorAll('cura-dropdown-search-option'));\n    this.addClickListenersToOptions();\n    this.updateHoveredIndex();\n  };\n\n  private addClickListenersToOptions() {\n    this.options.forEach((option, index) => {\n      option.addEventListener('optionSelected', () => this.onSelectedOption(index));\n    });\n  }\n\n  private updateSelectedOption(value: string) {\n    const selectedOptionIndex = this.options.findIndex(option => option.getAttribute('value') === value);\n    this.hoveredIndex = selectedOptionIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.updateOptionAttribute('selected', this.hoveredIndex);\n\n    this.scrollIntoView();\n    this.adjustInputPosition();\n  }\n\n  private handleInputChange = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.onValueChange(this.value);\n    // this.valueChanged.emit(this.value);\n  };\n\n  private onSelectedOption(index: number) {\n    const selectedOption = this.options[index];\n    if (selectedOption.selectable) {\n      const selectedValue = selectedOption.getAttribute('value') || selectedOption.textContent;\n\n      this.value = selectedValue || '';\n      this.updateSelectedOption(this.value);\n\n      this.isDropdownOpen = false;\n      this.isOnBlurInput = true;\n      this.resetDropdownStyles();\n      this.removeOverlay();\n    }\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'ArrowDown') {\n      event.preventDefault();\n      this.moveHighlight(1);\n    } else if (event.key === 'ArrowUp') {\n      event.preventDefault();\n      this.moveHighlight(-1);\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n      if (this.hoveredIndex > -1) {\n        this.handleOnBlur();\n        this.onSelectedOption(this.hoveredIndex);\n      }\n    }\n  };\n\n  private moveHighlight(direction: number) {\n    const visibleOptions = this.options;\n    const newIndex = (this.hoveredIndex + direction + visibleOptions.length) % visibleOptions.length;\n    this.hoveredIndex = newIndex;\n    this.updateOptionAttribute('hovered', this.hoveredIndex);\n    this.scrollIntoView();\n  }\n\n  private updateOptionAttribute(attribute: string, indexToUpdate: number) {\n    this.options.forEach((option, index) => {\n      (option as any)[attribute] = index === indexToUpdate;\n    });\n  }\n\n  private updateHoveredIndex() {\n    const visibleOptions = this.options;\n    const currentValue = this.value;\n    this.hoveredIndex = visibleOptions.findIndex(option => option.getAttribute('value') === currentValue);\n  }\n\n  private scrollIntoView() {\n    const container = this.host.shadowRoot?.querySelector('.dropdown-search-list');\n    const hoveredOption = this.options[this.hoveredIndex];\n\n    if (container && hoveredOption) {\n      const optionRect = hoveredOption.getBoundingClientRect();\n      const containerRect = container.getBoundingClientRect();\n\n      if (optionRect.bottom > containerRect.bottom) {\n        container.scrollTop += optionRect.bottom - containerRect.bottom;\n      }\n\n      if (optionRect.top < containerRect.top) {\n        container.scrollTop -= containerRect.top - optionRect.top;\n      }\n    }\n  }\n\n  private handleResize = () => {\n    this.isMobile = window.innerWidth < 768;\n    if (this.isDropdownOpen) {\n      if (this.isMobile) {\n        this.showOverlay();\n      } else {\n        this.resetDropdownStyles();\n        this.removeOverlay();\n      }\n    }\n  };\n\n  handleOnBlur() {\n    if (this.isOnBlurInput === true) {\n      setTimeout(() => {\n        this.isDropdownOpen = false;\n        this.resetDropdownStyles();\n        this.removeOverlay();\n      }, 200);\n    }\n  }\n  getClasses() {\n    return {\n      'dropdown-input-search': true,\n      'dropdown-open': this.isDropdownOpen,\n      'disabled': this.disabled,\n      [this.status]: true,\n    };\n  }\n\n  getDropdownClasses() {\n    return {\n      'dropdown-search-list': true,\n      'visible': this.options.length && this.isDropdownOpen ? true : false,\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--dropdown-max-height': this.dropdownMaxHeight,\n    };\n  }\n\n  handleOnFocus() {\n    this.isDropdownOpen = true;\n  }\n\n  getDropdownSearchListHeight() {\n    const dropdownInputSearchElement = this.host.shadowRoot?.querySelector('.dropdown-input-search') as HTMLInputElement;\n    if (dropdownInputSearchElement) {\n      this.host.style.setProperty('--dynamic-input-search-height', `${dropdownInputSearchElement.offsetHeight}px`);\n    }\n  }\n\n  handleGoBack() {\n    this.resetDropdownStyles();\n    this.isMobile = false;\n  }\n\n  resetDropdownStyles() {\n    const dropdown = this.host.shadowRoot?.querySelector('.dropdown-mobile') as HTMLInputElement;\n    if (dropdown && dropdown.style.position === 'fixed') {\n      dropdown.style.position = 'relative';\n      dropdown.style.removeProperty('bottom');\n    }\n  }\n\n  render() {\n    const isMobileDropdown = this.isMobile && this.isDropdownOpen;\n    return (\n      <Host style={this.hostCSSProperties()} class=\"dropdown-overlay\">\n        <div class={`dropdown ${isMobileDropdown ? 'dropdown-mobile' : ''}`} style={this.styles}>\n          <div class={this.getClasses()}>\n            {this.isMobile && this.isDropdownOpen && (\n              <cura-button-transparent fontColor=\"dark\" onClick={() => this.handleGoBack()} iconName=\"arrowLeft\" size=\"medium\" iconOnly color=\"primary\"></cura-button-transparent>\n            )}\n            <cura-input-text\n              disabled={this.disabled}\n              label={this.label}\n              part=\"cura-input-field\"\n              mode={isMobileDropdown ? 'transparent' : 'default'}\n              required={this.required}\n              hideErrorIcon={this.status === 'error'}\n              iconName={this.iconName || 'search'}\n              value={this.value}\n              status={this.status}\n              onValueChange={e => this.onValueChange(e.target.value as string)}\n              onInput={e => this.handleInputChange(e)}\n              onFocus={() => this.handleOnFocus()}\n              onClick={() => (window.innerWidth < 768 ? (this.isMobile = true) : null)}\n              onBlur={() => {\n                this.handleOnBlur();\n              }}\n              placeholder={this.placeholder}\n              size={this.size}\n              onKeyDown={this.handleKeyDown}\n            >\n              <slot name=\"helperText\"></slot>\n            </cura-input-text>\n          </div>\n          <div id=\"dropdown-search-list\" class={this.getDropdownClasses()}>\n            <slot name=\"dropdown-search-option\" onSlotchange={this.handleSlotChange}></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/forms/cura-input-date/cura-input-date.js

@@ -162,7 +162,7 @@ export class CuraInputDate {
         }
     }
     render() {
-        return (h(Host, { key: 'a85d8edd29146ca4068bb0fb5f718a5b6426638e' }, h("div", { key: '99a69b37f9370bdf242d0dc698f707f28cf0325a', class: "container", style: this.styles }, h("cura-input-text", { key: '5f5450f7390792c1188e17f48a9d04f4339fc156', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
+        return (h(Host, { key: 'bcda0a8a2601f24d445775e40535d1c8a80be5c0' }, h("div", { key: '3a3e11f1bd7082d563537a8679f69f976f242a4a', class: "container", style: this.styles }, h("cura-input-text", { key: '86ce4be158090c4ad4bfaa1e5196548fa5e1c105', label: this.label, name: this.name, status: this.status, value: this.value, onFocus: () => this.showCalendar(), size: this.size, "icon-name": this.iconName, placeholder: this.dateSettings.placeholder, "mask-preset": this.dateSettings.mask, "enable-selection-mode": true, onKeyUp: event => this.handleInputDates(event), autocomplete: "off", onValueChange: event => this.handleChangeDates(event) }, this.renderCalendarOrHelperText()))));
     }
     static get is() { return "cura-input-date"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-label/cura-label.js

@@ -46,7 +46,7 @@ export class CuraLabel {
         };
     }
     render() {
-        return (h(Host, { key: 'ae255523f9f465d4e9f76dccf24e127a73d35b46', style: this.hostCSSProperties() }, h("p", { key: 'b517371dcedfcd256dff4fcaddfe40c946541513', style: this.styles, class: this.getClasses() }, h("slot", { key: '38ed6316d7882ba14a1e1710091be8d12158cd74' }))));
+        return (h(Host, { key: '8d691e1d4c38c30d1e50bc981b9e6de89b3506e0', style: this.hostCSSProperties() }, h("p", { key: 'b68944f4fe1e65aecf6a627f3bba547418bc125b', style: this.styles, class: this.getClasses() }, h("slot", { key: 'f8ac467674d94fe94adc075743b12111d1e32469' }))));
     }
     static get is() { return "cura-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-radio/cura-radio.js

@@ -120,7 +120,7 @@ export class CuraRadio {
         return statusColors[this.status][type];
     }
     render() {
-        return (h(Host, { key: 'a0d89eeaf13690af56498ab584c22082b071b851' }, h("div", { key: '17a7ffae366d1942cdf8daccb0693434468040f8', class: this.getClasses(), style: this.styles }, h("div", { key: '2a03b1cc6eb6c26227bff90ec40f1f739e543613', class: "info" }, h("div", { key: '63a3f9a9f99504fc5f0e824a6398d502c2d7bec7', class: "label-wrapper" }, h("cura-label", { key: 'cddaf7347318cba1cd480352cde13321b44cc244', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'b2f5f549427841feb97ba43e26930e62e7d8f432', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '7d32540fd194b86224189d2ba3da8da4cae9d2a9', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c4e8fa9a1fb18040da0038aa5ea7e6bcb0ee17bc' }))), h("input", { key: 'eaebe407c25af0bc72df251451a652fc6376ef9a', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+        return (h(Host, { key: '07ed893348b28a188a67ee6b5e8eedb0598d2309' }, h("div", { key: 'b80a2b0e3db1f5dcac77617ecb9629b219460dbe', class: this.getClasses(), style: this.styles }, h("div", { key: '945ceedc874bf7b8ecb48683d26fa626449fb377', class: "info" }, h("div", { key: '3257b5a46d040d0177e8a791a2d810bf278f7517', class: "label-wrapper" }, h("cura-label", { key: '8c68882b6e2f852a2d1929449b3c82469474fab3', class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: 'e9adfe5998b2c5f705589461bff38705f0ddbbc7', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '50063f682a67c74a0ce2292cc823c21e6db90bcd', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: 'c746a61b3e7ea6d4a63143b794fd8c482829e834' }))), h("input", { key: '078275db7eb3a4878d93d77b120c3caaa0b5e0b7', type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
     }
     static get is() { return "cura-radio"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-select/cura-select.js

@@ -265,13 +265,13 @@ export class CuraSelect {
         return (h("cura-icon", { class: 'feedback-icon', name: icon, iconset: 'default', size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles }));
     }
     render() {
-        return (h(Host, { key: '1f9549c90dbc1c5a958488fdaa7e6b320730691a', style: this.styles }, h("div", { key: '52f93a983269e95bf4e19b590c47a8de472f9cb1', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '1fbbdb175324020e975e515c07a7eb85e593eb19', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: 'b76d8b6fc6399af17f8345d097f70e29ef9a549e', class: 'required' }, "* "))), h("div", { key: '0f1484f9debd047eb99760adb2c2da6d124c39f0', class: {
+        return (h(Host, { key: 'f01b52d0da1c417723c9da0ce7002155b3cbb07d', style: this.styles }, h("div", { key: '2798e5cd7f16e8679520900374e569cca1e5bee8', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (h("cura-label", { key: '5f9f645c3199e6299f000f5ab167139f536442b8', class: 'label', weight: 'bold', size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && h("span", { key: '2bca7ed64c1d44152161c2d71173f70b8b2fbacc', class: 'required' }, "* "))), h("div", { key: 'c1e77ccc2d1853b8749fea57e5ca3554363ef168', class: {
                 'cura-input-field': true,
                 'open': this.isOpen
-            } }, this.renderIcon(), h("input", { key: '2b10751ad085669523eeaba20a9d8736b4332dc0', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: '965687e4884ab2da4de009ccee8a2607a80ca0d3', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'ec844637fe1b96ac3719a53fc4753a66dde5710f', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'fdc615752aad7bc80ba97a380c4086a3e81fad48' })), this.isOpen && (h("div", { key: 'cac6207d71dabbf2ad7d6dd0f5a152d23f64e554', class: {
+            } }, this.renderIcon(), h("input", { key: '66e99e0a7c3b00516cc2f1240d08511c9434201b', type: "text", autocomplete: 'off', onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyNavigation, "aria-required": String(this.required), "aria-disabled": String(this.disabled), "aria-invalid": String(this.status === 'error'), onInput: this.handleInputChange, style: this.styles, placeholder: this.placeholder, disabled: this.disabled, required: this.required, value: this.textInput, readonly: this.searchBehavior ? null : true }), h("cura-icon", { key: '4efde985b30016b633818f9fafe6c1f538b4776e', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: 'default' })), h("cura-label", { key: 'ead6b6a9f95acc7f2cf2e7474f72c1627e0bd8cd', class: "helper-text", size: 'xsmall', color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, h("slot", { key: 'e01c6c99fecb78822d092a41db0b969ca160cea1' })), this.isOpen && (h("div", { key: '0fedad3cac056457810c984eb471bd9a703f2ff4', class: {
                 'menu': true,
                 'open': this.isOpen
-            } }, h("slot", { key: '3414977f685fd5f7692e1b5fbcf8b8af11992fba', name: 'option' }))))));
+            } }, h("slot", { key: '1330a45037f002b5fd20a356f1fe5b982999e512', name: 'option' }))))));
     }
     static get is() { return "cura-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-select-options/cura-select-option.js

@@ -33,7 +33,7 @@ export class CuraSelectOption {
         };
     }
     render() {
-        return (h(Host, { key: 'd65a51c56c05c15db545fa9dec1da8849e45235d', slot: "option" }, h("div", { key: '892175c91b317d015f13f9d5d9bc0a956272a49f', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'aaabd66fc3e8e6beb0d840e4b12dbcfb3282e392', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: 'a1570b98b56147b8cf8d0b01f504a19efbdf4749' })), this.selected && h("cura-icon", { key: 'fcd06691f5d18e460b14e5cd7ae99c06fec26e3f', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
+        return (h(Host, { key: '42fe72a8cadcb2745fa41cced2bf8f571ca0fb81', slot: "option" }, h("div", { key: '275c6ba6baaf1c28af3c6cce6abc36dc8c496e13', class: this.getClasses(), style: this.styles }, h("cura-label", { key: 'a5f2e672f55fe16b749f6f5d33c1ba64eb415ca8', color: `${this.selected ? 'primary-base' : 'neutral-black'}`, size: this.getSize('label'), "margin-block": "0" }, h("slot", { key: '37b09097f6f51515fe63f07a5b6bb2449ba51e60' })), this.selected && h("cura-icon", { key: '88b01b9505ea9c46ddd19be78db4bd084601687d', name: 'check', size: this.getSize('icon'), color: "primary-base" }))));
     }
     static get is() { return "cura-select-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/forms/cura-switch/cura-switch.js

@@ -92,7 +92,7 @@ export class CuraSwitch {
         return classes;
     }
     render() {
-        return (h(Host, { key: '019642743001393249cba0ac937b861a0b309af3' }, h("div", { key: '32d6358af066b24b60fb2967891b0eda03027a25', class: this.getClasses(), style: this.styles }, h("div", { key: 'c29681689cbf04ee89afa793dd84f1a3c1198fb7', class: "info" }, h("cura-label", { key: '0865c7e0c45843769046039981382e4f7a9cf8cf', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'b1fff87c188c2a1f306630a692c254dcacc5b03b', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '553757a5022374bd10af67f4a0c449511203e2e6' }))), h("div", { key: 'a8babf17cdd9c8bb95225fce8501015859122ec6', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '4828791117512af2526ed94b5981a0dab04b3e5c', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '30a712271bcee777e9a3c79d04a2038db5b84869', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: '7d90b4378da63462ce63f48a54b73c1ae73e75cd' }, h("div", { key: '880d8117e073b11e33acfe2915b4aa2695f6eda4', class: this.getClasses(), style: this.styles }, h("div", { key: '475056ce32564bd91dc48cd0d9d08059db77c030', class: "info" }, h("cura-label", { key: 'f391c5eb73fbae218a7037d0381fd49b9c739298', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'd587a5d17813f65a77563ce70f0c5e924bbf737d', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '9cb6d99b2c6e7f0f398fb2899823717c9b1b565e' }))), h("div", { key: 'c7fd172953c607baa30186dd1429b39af28093ca', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '0392a5ea1bd31068aa8af7f95fe21f3c7bf7797e', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '98d36e0853ec222beaefd6da984483cbc872a5fa', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get is() { return "cura-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js

@@ -16,7 +16,7 @@ export class CuraLoaderBar {
         this.setProgress();
     }
     render() {
-        return (h(Host, { key: 'af0397ee6a031081a84200da4863752ccbf937ce' }, h("div", { key: '5e054c2b571053bdb58b415a6ca642a8bc0385f3', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '2463789bf8737e13b6b5a49a1af4e51ce1637176', class: "progress-bar-fill" }))));
+        return (h(Host, { key: 'b24471535bdf9ada29ae81baa05f5c9abe7b79f9' }, h("div", { key: '15eb6b0b6abb45246c98d9e5957c492f44544062', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '032eee4ae4da0d5ad88f0df735d93ed37b8be26b', class: "progress-bar-fill" }))));
     }
     setColor() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js

@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
         };
     }
     render() {
-        return (h(Host, { key: 'c7fb273559e35a8ac66c4a06e09150990dd62629', style: this.getStyles() }, h("svg", { key: '1ef6af84e79a0bf20c78d8f28129c890f990902f', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '37718a9e3271cce4d939b9ee4ab7123f39d7de39' }, h("circle", { key: '50284396589d4165a5e222b6e7aa7d7eba7d1f72', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '1bd1557ecd739e50cacd67675d91aa56f63ec335', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '6c68b50e1cce6210827f55ade5f822c0398ebfae' }, h("linearGradient", { key: '9d8f1a4955b753070618e0998205a8b48a83976a', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'd81f6995a1de8007ede765a2f49d236f7fcff187' }), h("stop", { key: 'b88855e6b35f247fa1395c220e3c0ee76093a7d2', offset: "1" }))))));
+        return (h(Host, { key: '9ef3dd91b5958a5aeb90fe51120f5d9cc768ca62', style: this.getStyles() }, h("svg", { key: '96b6a2ac1ee77c14b68ea7ee462bae4a122f0c1f', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '01e9425e96b2f8b63a0115dfba358a46d86574c5' }, h("circle", { key: '5ba2e9d288de3b48d33c57ef9c8c282511683739', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'b2069b38fc2a810c6b838eb4c924619a14ef5648', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '4e04a92c3cb8ba0084112f1a14a7815317ca92c5' }, h("linearGradient", { key: '4369f1a5c6d66b37cc00ca88c3e5c77867867fbf', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '224eac239fcd4f22e3ca7b044d89942757381b9e' }), h("stop", { key: '35236a39f2156fefea7878a60dd1e559d3d1f850', offset: "1" }))))));
     }
     static get is() { return "cura-loader-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-display/cura-display.js

@@ -60,7 +60,7 @@ export class CuraDisplay {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'bf5c1121ffd1debb9b5763acdde1c7244b4afcc3', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '9d75215eaa43baaf9ca9aada36dfdbff4596afb2', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-display"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -62,7 +62,7 @@ export class CuraHeading {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '4a130c7453ba61027050fc8f4a5739cad34d1c0a', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '83a6a2a08051c3654f609f0e1824f41f48a6ff83', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-paragraph/cura-paragraph.js

@@ -45,7 +45,7 @@ export class CuraParagraph {
         };
     }
     render() {
-        return (h(Host, { key: '0ee9f41b45e758b509a18ab8ff216482d9c83af4', style: this.hostCSSProperties() }, h("p", { key: '02edfbf600b0cb372e49ee8b6fc7192f19108997', style: this.styles, class: this.setsizeClass() }, h("slot", { key: '0b2bd3c94a190999cc8a8dec94b14aae2af2fa09' }))));
+        return (h(Host, { key: 'fc146c5173887dd80bb1798d58b7fbe29775e2de', style: this.hostCSSProperties() }, h("p", { key: '0defc510c08182261e22a4ab47a24d939199db24', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'e70c68a1da0596dc8d2273f5679c9193a354e313' }))));
     }
     static get is() { return "cura-paragraph"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/cura-checkbox.js

@@ -159,7 +159,7 @@ const CuraCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class CuraCheckbox exten
         return h("cura-icon", { class: "icon", name: iconName, size: iconSize, color: iconColor });
     }
     render() {
-        return (h(Host, { key: '00334ec058edf0849cf30c65d2f9e2e2e051de96' }, h("div", { key: 'd7c7857afa27a033f0642369717eb3be406f9f27', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: 'aed0ec8155b2a5c0e3000b416afd6c5455c55f0e', class: "info" }, h("div", { key: 'd90166401c6946c508d2cace62976c2e7374689f', class: "label-wrapper" }, h("cura-label", { key: '7c0c5cc650db37f09127050333f49c5f4b4c7dc6', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '3c1cd2dcad221f4d93bde959ca33273270f0fe45', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '3fd01d993596f36da00b3acfeef02f2a28340eae', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '2c106bd163a1b330a18061c0e99eb21c911d7da9' }))), h("div", { key: '2286927b31856a224049693295caa9e037695749', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '9bb8a436f1500d046a9b57972307cf5feff183d3', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
+        return (h(Host, { key: '876fa0a7aa0fc7110cbf0ffeb2d95d529fa78e64' }, h("div", { key: '3e6d730765590ee75d7e045cadc7d03e5fc035e2', class: this.getClasses(), style: this.styles, onClick: this.handleClick }, h("div", { key: '0f7f6f3bc61a80e899d940d76fee266af1914f5a', class: "info" }, h("div", { key: 'a836cb0d7751a1a812364fe93a30403b02ec5c95', class: "label-wrapper" }, h("cura-label", { key: '5d180552ec71e22ddd8822727bd32d4167215f33', class: "label", weight: 'bold', size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { key: '047413aa21a28bc33984d19ad4dc10a38289c205', lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { key: '68c9dd6f228ec3204647795f1cae32a8f8797bc2', color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", { key: '3a35a1219f135002f1b9ae64c0eb4227529bc904' }))), h("div", { key: 'fe969ee332b3c64a259ec552f411b5d2d4bc81e4', class: 'checkbox', tabIndex: this.ontabindex }, h("input", { key: '2cbcbe56130bddb5853cfcc3a8ef1b421f39bc7b', type: "checkbox", name: this.name, value: this.value, disabled: this.disabled, required: this.required, checked: this.checked, indeterminate: this.indeterminate }), this.getIcon()))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }

package/dist/components/cura-display.js

@@ -67,7 +67,7 @@ const CuraDisplay$1 = /*@__PURE__*/ proxyCustomElement(class CuraDisplay extends
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: 'bf5c1121ffd1debb9b5763acdde1c7244b4afcc3', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '9d75215eaa43baaf9ca9aada36dfdbff4596afb2', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-dropdown-search-option-title.js

@@ -11,7 +11,7 @@ const CuraDropdownSearchOptionTitle$1 = /*@__PURE__*/ proxyCustomElement(class C
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: 'e4929a8c5c1c1f11b3e51dc088b2dd506e1bdfa0', slot: "dropdown-search-option" }, h("cura-label", { key: '5bb5406c11a39a6a587737cf99eb1d2deb2ea0da', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: 'c781e560b512d5362370e9855551b3e088ffbec1' }))));
+        return (h(Host, { key: 'ed1d2aeeba08c3c53f04f434fa46cb178271f405', slot: "dropdown-search-option" }, h("cura-label", { key: '910b1ada8d333ace0171a3180ba6320e813e4fce', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '20816c3a0c9805a88074f36e060ad850157427e2' }))));
     }
     static get style() { return CuraDropdownSearchOptionTitleStyle0; }
 }, [1, "cura-dropdown-search-option-title"]);

package/dist/components/cura-dropdown-search-option.js

@@ -45,12 +45,12 @@ const CuraDropdownSearchOption$1 = /*@__PURE__*/ proxyCustomElement(class CuraDr
         }
     }
     render() {
-        return (h(Host, { key: 'a084adaf6f89be71c8d5dc141705e7a71af353bb', slot: "dropdown-search-option" }, h("div", { key: '58ac361d8f16fdab8ef07d3be3f9c12a8c4b85ef', style: this.styles, class: {
+        return (h(Host, { key: '0dfb8d67f1aee692af5abdad170f2fc3e6c5ffc6', slot: "dropdown-search-option" }, h("div", { key: '6596c224bbfc0e9b5c3d2a39d064852019af5b74', style: this.styles, class: {
                 "option-container": true,
                 hovered: this.selectable ? this.hovered : false,
                 selected: this.selected,
                 disabled: !this.selectable
-            } }, h("div", { key: '0a7f959582b45df5c30fbbd225fccfc93aa937f4', class: "content-container" }, h("div", { key: '74b8a9626430847bf9dfb32d5188303427d2fd28', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '1dba6e28939841569f290c9fb18d3b7595bac06a', name: "image" }), h("cura-heading", { key: 'f7722edfd7ab87f7d9bacf475d988a1e80af41ef', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'db0385e5e3d2c450ba9a96d75e7913d2fe913d98' }))), h("slot", { key: '734b467cfce5ce114b06a10e3a153723da7ad41d', name: "action" })))));
+            } }, h("div", { key: 'b73badabbcde37615c58707d8a62832363deb694', class: "content-container" }, h("div", { key: '6ea1e5cfa3aa5f7bb7d0a4a2c9c8aff6e076304c', class: "option-info", onClick: (e) => this.handleOptionClick(e) }, h("slot", { key: '9e6272b220a723fbc1b52a23f59873cb4eea0986', name: "image" }), h("cura-heading", { key: '4bec4f91fd5ef5759373d846c0876678e67b1b48', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'c485bfd68ddf4b5bcfa0c590c11344352939fe87' }))), h("slot", { key: '0ce8978f72401af3580c72919b6079ef222dcc0d', name: "action" })))));
     }
     get hostElement() { return this; }
     static get watchers() { return {