@usecapsule/core-components 2.0.6 → 2.0.8

package/dist/esm/cpsl-alert_18.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-f00e090c.js';
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-fd970ca2.js';
 import { M as MOBILE_SIZE } from './constants-7b49abd5.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-1789f0cf.js';
 
@@ -4785,7 +4785,7 @@ const CpslDivider = class {
 };
 CpslDivider.style = CpslDividerStyle0;
 
-const cpslDropdownCss = ":host{display:block;position:relative;font-family:Arial, sans-serif;--input-color:var(--cpsl-color-text-primary);--container-background-color:var(--cpsl-color-input-surface-default);--container-border-color:var(--cpsl-color-input-border-active);--scrollbar-color:var(--cpsl-color-text-subtle);--divider-color:var(--cpsl-color-divider);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--button-hover-color:var(--cpsl-color-tile-button-surface-hover);font-family:var(--cpsl-font-family, inherit)}.input-container{position:relative;width:100%}::slotted(cpsl-dropdown){position:absolute;width:100%;top:100%;left:0;z-index:2}.dropdown-button{display:flex;width:100%;padding:0 4px;background:none;border:none;align-items:center;justify-content:space-between;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--input-color)}.dropdown-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.dropdown-button div{margin-left:8px;display:flex;align-items:center}.dropdown-options{display:none;position:fixed;list-style:none;padding:0;margin-top:4px;border:1px solid var(--container-border-color);border-radius:8px;z-index:999999999999;overflow-y:auto;max-height:300px;box-sizing:border-box;}.dropdown-options.open{display:block}.dropdown-options li{padding:8px;cursor:pointer;display:flex;align-items:center;border-bottom:1px solid var(--cpsl-color-divider);color:var(--input-color);background:var(--container-background-color);font-size:var(--input-font-size)}.dropdown-options li:hover{background-color:var(--button-hover-color)}.dropdown-options li svg{width:24px;height:24px;margin-right:8px;padding:0 8px;vertical-align:middle;}.dropdown-options::-webkit-scrollbar{width:8px;height:8px;background-color:var(--container-background-color)}.dropdown-options::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color);border-radius:10px;border:2px solid transparent;background-clip:content-box;height:8px}.dropdown-options::-webkit-scrollbar-track{background:var(--container-background-color)}.dropdown-value{margin-left:8px;color:var(--cpsl-color-text-secondary)}.dropdown-button .chevron{transition:transform 0.3s ease}.dropdown-button .chevron.closed{transform:rotate(180deg)}";
+const cpslDropdownCss = ":host{display:block;position:relative;font-family:Arial, sans-serif;--input-color:var(--cpsl-color-text-primary);--container-background-color:var(--cpsl-color-input-surface-default);--container-border-color:var(--cpsl-color-input-border-active);--scrollbar-color:var(--cpsl-color-text-subtle);--divider-color:var(--cpsl-color-divider);--input-placeholder-color:var(--cpsl-color-text-secondary);--input-font-size:var(--cpsl-font-size-body-m);--button-hover-color:var(--cpsl-color-tile-button-surface-hover);font-family:var(--cpsl-font-family, inherit)}.input-container{position:relative;width:100%}::slotted(cpsl-dropdown){position:absolute;width:100%;top:100%;left:0;z-index:2}.dropdown-button{display:flex;width:100%;padding:0 4px;background:none;border:none;align-items:center;justify-content:space-between;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--input-color)}.dropdown-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.dropdown-button div{margin-left:8px;display:flex;align-items:center}.dropdown-options{display:none;position:fixed;list-style:none;padding:0;margin-top:4px;border:1px solid var(--container-border-color);border-radius:8px;z-index:999999999999;overflow-y:auto;max-height:300px;box-sizing:border-box;background-color:var(--container-background-color);}.dropdown-options.open{display:block}.dropdown-options li{padding:8px;cursor:pointer;display:flex;align-items:center;border-bottom:1px solid var(--cpsl-color-divider);color:var(--input-color);background:var(--container-background-color);font-size:var(--input-font-size)}.dropdown-options li:hover{background-color:var(--button-hover-color)}.dropdown-options li svg{width:24px;height:24px;margin-right:8px;padding:0 8px;vertical-align:middle;}.dropdown-options::-webkit-scrollbar{width:8px;height:8px;background-color:transparent;}.dropdown-options::-webkit-scrollbar-thumb{background-color:var(--scrollbar-color);border-radius:10px;border:2px solid transparent;background-clip:content-box;height:8px}.dropdown-options::-webkit-scrollbar-track{background:transparent;}.dropdown-value{margin-left:8px;color:var(--cpsl-color-text-secondary)}.dropdown-button .chevron{transition:transform 0.3s ease}.dropdown-button .chevron.closed{transform:rotate(180deg)}.search-bar{padding:0;border-bottom:1px solid var(--cpsl-color-divider);position:sticky;top:0;background:var(--container-background-color);z-index:1;}.search-bar input{width:100%;padding:8px;border:none;box-sizing:border-box;font-size:var(--input-font-size);color:var(--input-color);background-color:var(--container-background-color);border-radius:0;}.search-bar input::placeholder{color:var(--input-placeholder-color)}.search-bar input:focus{outline:none;border-color:transparent;}";
 const CpslDropdownStyle0 = cpslDropdownCss;
 
 const CpslDropdown = class {
@@ -4795,22 +4795,46 @@ const CpslDropdown = class {
         this.toggleDropdown = () => {
             this.isOpen = !this.isOpen;
         };
-        this.selectItem = (item) => {
+        this.selectItem = (item, emitEvent = true) => {
             this.selectedItem = item;
-            this.toggleDropdown();
-            this.selectedItemChange.emit(this.selectedItem);
+            this.isOpen = false;
+            if (emitEvent) {
+                this.selectedItemChange.emit(this.selectedItem);
+            }
         };
         this.handleItemSelect = (item) => () => {
             this.selectItem(item);
         };
+        this.handleSearchQueryChange = (event) => {
+            const target = event.target;
+            this.searchQuery = target.value;
+            this.filteredItems = this.items.filter(item => item.label.toLowerCase().includes(this.searchQuery.toLowerCase()));
+        };
+        this.handleClickOutside = (event) => {
+            if (this.isOpen && !this.el.contains(event.target)) {
+                this.isOpen = false;
+            }
+        };
         this.width = '100%';
+        this.hasCpslSearch = false;
         this.isOpen = false;
-        this.selectedItem = undefined;
+        this.searchQuery = '';
+        this.filteredItems = [];
         this.items = [];
+        this.selectedItem = null;
+    }
+    handleSelectedItemChange(newValue) {
+        if (newValue !== null) {
+            this.selectItem(newValue, false);
+        }
     }
     handleOpenChange() {
         if (this.isOpen) {
             this.adjustPosition();
+            this.addClickOutsideListener();
+        }
+        else {
+            this.removeClickOutsideListener();
         }
     }
     handleResize() {
@@ -4828,20 +4852,36 @@ const CpslDropdown = class {
             dropdownOptions.style.left = `${parentRect.x}px`;
             dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
             const availableHeight = viewportHeight - parentRect.bottom;
-            dropdownOptions.style.maxHeight = `${availableHeight - 12}px`;
+            dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
         }
     }
+    addClickOutsideListener() {
+        window.addEventListener('click', this.handleClickOutside);
+    }
+    removeClickOutsideListener() {
+        window.removeEventListener('click', this.handleClickOutside);
+    }
     componentWillLoad() {
         if (this.items.length > 0) {
-            this.selectedItem = this.items[0];
+            this.filteredItems = [...this.items];
+            if (this.selectedItem !== null) {
+                this.selectItem(this.selectedItem, false);
+            }
+            else {
+                this.selectedItem = this.items[0];
+            }
         }
     }
+    disconnectedCallback() {
+        this.removeClickOutsideListener();
+    }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'a3f5b117b3796584dccb638df44e75379ac5a7bb', style: { width: this.width } }, h("button", { key: 'acd2f7f30b6db4e2e215b298f75672698e981edd', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'a2110fb3515d7de468bc03963c95b8e12734abae', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: '466cf5144c00b955c70880192987c94d03781a3c', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.items.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
+        return (h(Host, { key: '93306d21ee902e6d21089a161bef7955e01ab2a1', style: { width: this.width } }, h("button", { key: 'de614383df91a5684e165f0c3a455c35686fe6de', class: "dropdown-button", onClick: this.toggleDropdown }, `${((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.selectedLabel) || ((_b = this.selectedItem) === null || _b === void 0 ? void 0 : _b.label)} ${(_c = this.selectedItem) === null || _c === void 0 ? void 0 : _c.value}`, h("div", { key: 'd972fade95a22889977066c652ac3b092d8add58', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), h("ul", { key: 'd98ac4916d595f13f1126cc912eeaf337cdc7582', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (h("li", { class: "search-bar" }, h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => h("li", { onClick: this.handleItemSelect(item) }, h("span", { innerHTML: Icons[item.icon] }), item.label, " ", h("span", { class: "dropdown-value" }, item.value))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "selectedItem": ["handleSelectedItemChange"],
         "isOpen": ["handleOpenChange"]
     }; }
 };
@@ -4872,6 +4912,7 @@ const CpslInput = class {
         this.cpslChange = createEvent(this, "cpslChange", 7);
         this.cpslBlur = createEvent(this, "cpslBlur", 7);
         this.cpslFocus = createEvent(this, "cpslFocus", 7);
+        this.cpslPaste = createEvent(this, "cpslPaste", 7);
         this.inputId = `cpsl-input-${inputIds++}`;
         this.onInput = (ev) => {
             const input = ev.target;
@@ -4896,6 +4937,18 @@ const CpslInput = class {
             this.focusedValue = this.value;
             this.cpslFocus.emit(ev);
         };
+        this.onPaste = (ev) => {
+            var _a;
+            ev.stopPropagation();
+            ev.preventDefault();
+            const input = ev.target;
+            const pasteData = ((_a = ev.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text')) || '';
+            input.value = pasteData;
+            this.value = pasteData;
+            pasteData === '' ? this.disableSlots() : this.enableSlots();
+            this.cpslPaste.emit(ev);
+            this.emitValueChange(ev);
+        };
         this.focusInput = () => {
             this.nativeInput.focus();
         };
@@ -4972,7 +5025,7 @@ const CpslInput = class {
     }
     render() {
         var _a;
-        return (h(Host, { key: '3e1a55cf2869a31c54ab03c3ecf2bae84ef5031b', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label)), h("div", { key: '00a7a2d2dde66c610a9626044aae8ed75b9e9bf3', onClick: this.focusInput, class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: 'aefa6ccf3ca17216da5a657e104f471109836c78', name: "start" }), h("input", { key: '86e8426bff08ead8595bd40086fc7e5fc3c67295', class: "native-input", id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("slot", { key: '246e05dbbc4740ce09bd9b4bba779eb0d1010882', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (h(Host, { key: 'd056945f2cfe5bff44af5987d2a9591fb1a3cd4c', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (h("label", { class: "label", htmlFor: this.inputId }, this.label)), h("div", { key: '4599fe40c9ebbaf3c0e21c1cc365325163a1054d', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, h("slot", { key: '5404baae8ccc419431f88379e1266fd69ca41670', name: "start" }), h("input", { key: '9cab32fee2375ac5e65f41140674275b1c18c039', class: "native-input", id: this.inputId, disabled: this.disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, type: this.type, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.focusInput, onPaste: this.onPaste }), h("slot", { key: '75ab014ee4e8b87375b67dfda539b59833168b46', name: "end" })), (this.errorText || this.helperText) && (h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {