@usecapsule/core-components 2.0.7 → 2.0.9

package/dist/cjs/capsule.cjs.js

@@ -19,7 +19,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["cpsl-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_18.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"isOpen":[32],"selectedItem":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"isOpen":["handleOpenChange"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
+  return index.bootstrapLazy([["cpsl-animation.cjs",[[1,"cpsl-animation",{"src":[1],"replayAnimation":[64]}]]],["cpsl-col.cjs",[[1,"cpsl-col",{"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"pull":[1],"pullXs":[1,"pull-xs"],"pullSm":[1,"pull-sm"],"pullMd":[1,"pull-md"],"pullLg":[1,"pull-lg"],"pullXl":[1,"pull-xl"],"push":[1],"pushXs":[1,"push-xs"],"pushSm":[1,"push-sm"],"pushMd":[1,"push-md"],"pushLg":[1,"push-lg"],"pushXl":[1,"push-xl"],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]},[[9,"resize","onResize"]]]]],["cpsl-grid.cjs",[[1,"cpsl-grid",{"fixed":[4]}]]],["cpsl-info-box.cjs",[[1,"cpsl-info-box"]]],["cpsl-row.cjs",[[1,"cpsl-row"]]],["cpsl-alert_18.cjs",[[1,"cpsl-code-input",{"code":[1025],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"length":[2],"type":[1]}],[1,"cpsl-input",{"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"noAutoDisable":[4,"no-auto-disable"],"autofocus":[4],"disabled":[4],"enterkeyhint":[1],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"inputmode":[1],"label":[1],"max":[8],"maxlength":[2],"min":[8],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"startIconSrc":[1,"start-icon-src"],"startIcon":[1,"start-icon"],"step":[1],"type":[1],"value":[1025],"hasFocus":[32]},null,{"disabled":["handleDisable"]}],[1,"cpsl-modal",{"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"],"footerExpanded":[4,"footer-expanded"],"footerTransitionDuration":[2,"footer-transition-duration"],"noOverlay":[4,"no-overlay"],"open":[4],"hasFooter":[32]},null,{"footerExpanded":["toggleHeight"],"open":["toggleModal"]}],[1,"cpsl-slide-button",{"disabled":[4],"endIcon":[1,"end-icon"],"endText":[1,"end-text"],"startIcon":[1,"start-icon"],"startText":[1,"start-text"]}],[1,"cpsl-tile-button",{"src":[1],"icon":[1]}],[1,"cpsl-alert",{"type":[1],"icon":[1]}],[1,"cpsl-button",{"disabled":[516],"variant":[513]}],[1,"cpsl-divider"],[1,"cpsl-dropdown",{"width":[1],"hasCpslSearch":[4,"has-cpsl-search"],"items":[16],"selectedItem":[1040],"isOpen":[32],"searchQuery":[32],"filteredItems":[32]},[[9,"resize","handleResize"]],{"selectedItem":["handleSelectedItemChange"],"isOpen":["handleOpenChange"]}],[1,"cpsl-pill",{"text":[1]}],[1,"cpsl-progress-indicator",{"totalSteps":[2,"total-steps"],"step":[2]}],[1,"cpsl-qr-code",{"url":[1],"imageSrc":[1,"image-src"],"size":[2]}],[1,"cpsl-spinner",{"size":[2],"speed":[2]}],[1,"cpsl-tab",{"selected":[4],"tab":[1]},[[8,"cpslTabsChanged","onTabsChanged"],[8,"cpslTabsInit","onTabsInit"]]],[1,"cpsl-tabs",{"fullWidth":[4,"full-width"],"selectedTab":[1,"selected-tab"],"selectedTabRect":[32],"loaded":[32]},null,{"fullWidth":["updateSlider"],"selectedTab":["updateTab"]}],[1,"cpsl-text",{"color":[1],"variant":[1],"weight":[1]}],[1,"cpsl-overlay",{"open":[4],"enterTransitionDuration":[2,"enter-transition-duration"],"exitTransitionDuration":[2,"exit-transition-duration"]},null,{"open":["toggleHeight"]}],[1,"cpsl-icon",{"src":[1],"icon":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -4799,10 +4799,12 @@ 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);
@@ -4820,10 +4822,15 @@ const CpslDropdown = class {
         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) {
@@ -4843,10 +4850,17 @@ const CpslDropdown = class {
         var _a;
         const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
         const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        const searchBar = this.el.shadowRoot.querySelector('.search-bar');
         const viewportHeight = window.innerHeight;
         if (parentRect) {
             this.width = `${parentRect.width}px`;
             dropdownOptions.style.left = `${parentRect.x}px`;
+            if (window.innerWidth <= 480) {
+                searchBar.style.maxHeight = `30px`;
+                dropdownOptions.style.top = `425px`;
+                dropdownOptions.style.maxHeight = '110px';
+                return;
+            }
             dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
             const availableHeight = viewportHeight - parentRect.bottom;
             dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
@@ -4860,8 +4874,13 @@ const CpslDropdown = class {
     }
     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() {
@@ -4869,10 +4888,11 @@ const CpslDropdown = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: 'cd96e1ee80604602f8b0461ee605c9fa71755f57', style: { width: this.width } }, index.h("button", { key: 'df64a9317c865d40faa3b1522b0ab904595f7d49', 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}`, index.h("div", { key: '3c3c1e8970309b34204b6fa1fd8281333a5675b3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: '8d383387d854f0cb1d77a59fa45a84d6ca7c6373', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { class: "search-bar" }, index.h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value))))));
+        return (index.h(index.Host, { key: 'b09375bb984f79e458832b5a95a0936ae59d9397', style: { width: this.width } }, index.h("button", { key: 'b8d01f1afa93e2981cb28a6de227581a2513b1d1', 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}`, index.h("div", { key: '51b57ee33ac92e945f4ce8111dc70063a60b15f3', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: '7335ad8d095f9af981d62a4c89463a3e2dd48ebd', class: { 'dropdown-options': true, 'open': this.isOpen }, style: { width: this.width } }, this.hasCpslSearch && (index.h("li", { class: "search-bar" }, index.h("input", { type: "text", placeholder: "Search...", value: this.searchQuery, onInput: this.handleSearchQueryChange }))), this.filteredItems.map(item => index.h("li", { onClick: this.handleItemSelect(item) }, index.h("span", { innerHTML: Icons[item.icon] }), item.label, " ", index.h("span", { class: "dropdown-value" }, item.value))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
+        "selectedItem": ["handleSelectedItemChange"],
         "isOpen": ["handleOpenChange"]
     }; }
 };
@@ -4903,6 +4923,7 @@ const CpslInput = class {
         this.cpslChange = index.createEvent(this, "cpslChange", 7);
         this.cpslBlur = index.createEvent(this, "cpslBlur", 7);
         this.cpslFocus = index.createEvent(this, "cpslFocus", 7);
+        this.cpslPaste = index.createEvent(this, "cpslPaste", 7);
         this.inputId = `cpsl-input-${inputIds++}`;
         this.onInput = (ev) => {
             const input = ev.target;
@@ -4927,6 +4948,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();
         };
@@ -5003,7 +5036,7 @@ const CpslInput = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '3e1a55cf2869a31c54ab03c3ecf2bae84ef5031b', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label)), index.h("div", { key: '68dc29842d552fc6dab952aecadfcef694c72903', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: '78239400c4500a0331826426fe394b2c8d795192', name: "start" }), index.h("input", { key: '553e767862a7a5158ff11c1d449f975a6295bc6f', 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 }), index.h("slot", { key: '70e7ec6f78f2afa11ec0df9ead8fa8b8708d4f0e', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
+        return (index.h(index.Host, { key: 'd056945f2cfe5bff44af5987d2a9591fb1a3cd4c', class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.focusedValue) || Boolean(this.value) } }, this.label && (index.h("label", { class: "label", htmlFor: this.inputId }, this.label)), index.h("div", { key: '4599fe40c9ebbaf3c0e21c1cc365325163a1054d', class: { 'input-container': true, 'error-container': Boolean(this.errorText) } }, index.h("slot", { key: '5404baae8ccc419431f88379e1266fd69ca41670', name: "start" }), index.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 }), index.h("slot", { key: '75ab014ee4e8b87375b67dfda539b59833168b46', name: "end" })), (this.errorText || this.helperText) && (index.h("div", { class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("cpsl-icon", { icon: Boolean(this.errorText) ? 'alertCircle' : 'infoCircle' }), index.h("span", null, (_a = this.errorText) !== null && _a !== void 0 ? _a : this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {