@rededor/cura 1.6.0 → 1.6.1-alpha.1

package/dist/cjs/cura-accordion_18.cjs.entry.js

@@ -672,8 +672,13 @@ const CuraDropdownSearch = class {
         setTimeout(() => this.getSlotElements(), 10);
     }
     disconnectedCallback() {
+        this.removeAllListeners();
+    }
+    removeAllListeners() {
         window === null || window === void 0 ? void 0 : window.removeEventListener('resize', this.handleWindowResize);
         window === null || window === void 0 ? void 0 : window.removeEventListener('orientationchange', this.handleWindowResize);
+        this.host.removeEventListener('actionclick', this.handleOptionActionClick);
+        this.host.removeEventListener('selectoption', this.handleSelectOption);
     }
     moveHighlight(direction) {
         if (!this.dropdownSelectableItems.length)
@@ -795,7 +800,7 @@ const CuraDropdownSearch = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '936c26e5c23d95d8e905f66d8bcf7c636781351e', style: this.getHostCSSProperties() }, index.h("div", { key: '6bd541e66e07d4db99af875886fbfaba5915fd48', class: this.getClasses(), style: this.styles }, index.h("div", { key: '4b5036b41878c317bc3b6716bf8590f1d672d21e', class: "component-controls" }, this.isMobile && this.zoomState ? (index.h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', index.h("cura-input-text", { key: '7d0d8f3090389570d51612ad89cedda9c452527f', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("slot", { key: 'e9cbf139d9b16a50bf0ca547246a66132e722add', name: "helperText" }))), index.h("div", { key: 'd8d83a726ef6e87740240b9fb637742bc52151e2', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, index.h("slot", { key: '7cf5efd8ca64c1f07a19bf0ae6dfcdaeb057c04b', onSlotchange: () => this.handleSlotChange() })))));
+        return (index.h(index.Host, { key: 'e56264957327983c9a06eefe7f723b17d241c477', style: this.getHostCSSProperties() }, index.h("div", { key: '311a1facd2b0e9366f00b47e35bbcaa3d2a754dd', class: this.getClasses(), style: this.styles }, index.h("div", { key: 'd6f5345eaea63036c6855ee778ec1edefa5d20f7', class: "component-controls" }, this.isMobile && this.zoomState ? (index.h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', index.h("cura-input-text", { key: '07887def77a37d0cd8ca9f3f044024cb07dbca9e', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("slot", { key: 'e55d3c7ad869262f7663e85c6c12ccaeef66f9d0', name: "helperText" }))), index.h("div", { key: 'bd2ee09236489e4b8652b7e87ffd248967c372e9', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, index.h("slot", { key: 'a15f32c8fc3d9646f84f3e9a25ab32a353e0b194', onSlotchange: () => this.handleSlotChange() })))));
     }
     get host() { return index.getElement(this); }
 };
@@ -5210,6 +5215,12 @@ const CuraSelect = class {
                 return this.onOptiselected(event);
             this.isOpen = !this.isOpen;
         };
+        this.handleClickOutside = (event) => {
+            const clickedOutside = !this.host.contains(event.target);
+            if (clickedOutside) {
+                this.isOpen = false;
+            }
+        };
         this.label = '';
         this.placeholder = '';
         this.value = '';
@@ -5296,6 +5307,7 @@ const CuraSelect = class {
      */
     componentDidLoad() {
         this.setupMutationObserver();
+        this.addOutsideClickListener();
     }
     /**
      * Lifecycle method called when the component is connected to the DOM.
@@ -5311,6 +5323,7 @@ const CuraSelect = class {
     disconnectedCallback() {
         var _a;
         (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.removeOutsideClickListener();
     }
     initializeOptions() {
         var _a;
@@ -5434,14 +5447,20 @@ const CuraSelect = class {
         const icon = { default: this.iconName, success: 'checkCircle', error: 'alertCircle' }[this.status];
         return index.h("cura-icon", { class: "feedback-icon", name: icon, iconset: "default", size: this.size === 'large' ? 20 : 16, color: this.getColor('icon'), style: this.styles });
     }
+    addOutsideClickListener() {
+        document.addEventListener('click', this.handleClickOutside);
+    }
+    removeOutsideClickListener() {
+        document.removeEventListener('click', this.handleClickOutside);
+    }
     render() {
-        return (index.h(index.Host, { key: 'd3f5e8b4c914f900a0b5472531fd0d74f6d8f7b3', style: this.styles }, index.h("div", { key: '20dfeb3b9a24eec62ff8c5eae761b43fdfe4d11f', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: '2018bf563e3a2bedc7d918f566805b70a75b9aec', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: '0e9495c89ac0897062d247f89d3c3b3f85541283', class: "required" }, "* "))), index.h("div", { key: 'e967796b98e74112d0f36e22d2b82591645416ab', class: {
+        return (index.h(index.Host, { key: '21289e8335a2dab29d78e1f6b689734a68c51f9a', style: this.styles }, index.h("div", { key: 'c9ff2b904c184f175fe8c354f38f79e9af613e55', class: this.getClasses(), onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onClick: this.handleClick }, this.label && (index.h("cura-label", { key: 'ddd53f876c004b0da13cd5d418f33fc36b1d3fb5', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getColor('label') }, this.label, " ", this.required && index.h("span", { key: 'c884cddfc967c5a9237f745fc14bef84a17403b7', class: "required" }, "* "))), index.h("div", { key: 'b97ff9564365911abe82914b120276755621e654', class: {
                 'cura-input-field': true,
                 'open': this.isOpen,
-            } }, this.renderIcon(), index.h("input", { key: 'dbf6bbb693f9d395bebd7ee376c4e38753e25fa3', 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 }), index.h("button", { key: 'f03d55a13bc8c51d63a31f57f6d661453ee8c93b', class: "up-down-button" }, index.h("cura-icon", { key: 'c6c583d2d54063e5cfe0576f69d83b9125407157', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), index.h("cura-label", { key: '8457e91bcb1c1152dd263346434f79d994a77817', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: 'c4850de138a69d39bfd74942c7ca814b6c525c07' })), this.isOpen && (index.h("div", { key: '8fdbde63603a7a33fac2836b5e9f0041395d6f9a', class: {
+            } }, this.renderIcon(), index.h("input", { key: 'dc25c38fea06923ddeee5eff05dbcc380b72a1ba', 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 }), index.h("button", { key: 'fef9e0aa81875cc558d7732c45da93043e4f6ef4', class: "up-down-button" }, index.h("cura-icon", { key: '79200899e32a5ac4b4759e0589c1faddced68103', name: this.isOpen ? 'up' : 'down', class: "up-down-icon", color: this.disabled ? 'neutral-dark' : 'primary-base', size: 16, iconset: "default" }))), index.h("cura-label", { key: '8d46fa4bc5f61d7fb8e84a0626d4f79e6687ff9f', class: "helper-text", size: "xsmall", color: this.getColor('text'), weight: this.mode === 'transparent' ? 'bold' : 'regular' }, index.h("slot", { key: '9a42d25acea3e8320e6639545c5a550192224824' })), this.isOpen && (index.h("div", { key: '657fc9d3fc88f946dfd33fc85b2c1b8f074231ad', class: {
                 menu: true,
                 open: this.isOpen,
-            } }, index.h("slot", { key: '2267652be709728cddf39d5b4df6c99e4a75e072', name: "option" }))))));
+            } }, index.h("slot", { key: '6e18ba370c1eaef8b2cae03405bc1dc716633ec5', name: "option" }))))));
     }
     static get formAssociated() { return true; }
     get host() { return index.getElement(this); }