@usecapsule/core-components 3.6.0-dev.0 → 3.7.0

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

@@ -16581,7 +16581,7 @@ const CpslPill = class {
 };
 CpslPill.style = CpslPillStyle0;
 
-const cpslPopoverCss = ":host{position:fixed;display:block;z-index:-1;overflow:auto}:host(.open){z-index:10006}.container{visibility:hidden;height:0px}.open{visibility:visible;height:auto;z-index:10006}:host(.transform-h-left){transform:translateX(0)}:host(.transform-h-center){transform:translateX(-50%)}:host(.transform-h-right){transform:translateX(-100%)}:host(.transform-v-top){transform:translateY(0)}:host(.transform-v-center){transform:translateY(-50%)}:host(.transform-v-bottom){transform:translateY(-100%)}";
+const cpslPopoverCss = ":host{position:fixed;display:block;z-index:-1;overflow:auto;transform:var(--th, ) var(--tv, )}:host(.open){z-index:10006}.container{visibility:hidden;height:0px}.open{visibility:visible;height:auto;z-index:10006}:host(.transform-h-left){--th:translateX(0)}:host(.transform-h-center){--th:translateX(-50%)}:host(.transform-h-right){--th:translateX(-100%)}:host(.transform-v-top){--tv:translateY(0)}:host(.transform-v-center){--tv:translateY(-50%)}:host(.transform-v-bottom){--tv:translateY(-100%)}";
 const CpslPopoverStyle0 = cpslPopoverCss;
 
 var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
@@ -16608,7 +16608,8 @@ const CpslPopover = class {
         index.registerInstance(this, hostRef);
         this.cpslOpen = index.createEvent(this, "cpslOpen", 7);
         this.cpslClose = index.createEvent(this, "cpslClose", 7);
-        this.triggerClicked = false;
+        this.startedInside = false;
+        this.startedWhenMounted = false;
         this.configureTriggerInteraction = () => {
             const { trigger, triggerAction, destroyTriggerInteraction } = this;
             if (destroyTriggerInteraction) {
@@ -16668,6 +16669,15 @@ const CpslPopover = class {
                                 this.present();
                             },
                         },
+                        {
+                            eventName: 'touchstart',
+                            callback: e => {
+                                if (this.preventBlur) {
+                                    e.preventDefault();
+                                }
+                                this.present();
+                            },
+                        },
                     ];
                     break;
             }
@@ -16727,12 +16737,19 @@ const CpslPopover = class {
                 }
             }
         };
+        this.validateEventStart = event => {
+            this.startedWhenMounted = !!this.triggerEl;
+            this.startedInside = this.triggerEl.contains(event.target);
+            this.present();
+        };
         this.handleClickOutside = (event) => {
-            if (!this.triggerClicked && this.triggerEl.contains(event.target)) {
-                this.triggerClicked = true;
+            // Do nothing if `mousedown` or `touchstart` started inside ref element
+            if (this.startedInside || !this.startedWhenMounted)
                 return;
-            }
-            if (this.open && !this.el.contains(event.target)) {
+            // Do nothing if clicking ref's element or descendent elements
+            if (!this.triggerEl || this.triggerEl.contains(event.target))
+                return;
+            if (this.open) {
                 event.preventDefault();
                 this.close();
             }
@@ -16749,7 +16766,7 @@ const CpslPopover = class {
         };
         this.close = () => {
             this.open = false;
-            this.triggerClicked = false;
+            this.startedInside = false;
             this.cpslClose.emit();
         };
         this.open = false;
@@ -16783,11 +16800,15 @@ const CpslPopover = class {
     }
     onOpenChange() {
         if (this.open) {
+            window.addEventListener('mousedown', this.validateEventStart);
+            window.addEventListener('touchstart', this.validateEventStart);
             window.addEventListener('click', this.handleClickOutside);
             window.addEventListener('scroll', () => this.setPosition(), true);
             window.addEventListener('resize', () => this.setPosition(), true);
         }
         else {
+            window.removeEventListener('mousedown', this.validateEventStart);
+            window.removeEventListener('touchstart', this.validateEventStart);
             window.removeEventListener('click', this.handleClickOutside);
             window.removeEventListener('scroll', () => this.setPosition(), true);
             window.removeEventListener('resize', () => this.setPosition(), true);
@@ -16802,7 +16823,7 @@ const CpslPopover = class {
     }
     render() {
         var _a;
-        return (index.h(index.Host, { key: '6128da20f003b95925bf27a6d30dfd402bcc9e82', class: {
+        return (index.h(index.Host, { key: '18d133c7b3b9130f4119aa1502fc22a0edba0adf', class: {
                 'open': this.open,
                 'transform-h-left': this.transformOriginHorizontal === 'left',
                 'transform-h-center': this.transformOriginHorizontal === 'center',
@@ -16810,7 +16831,7 @@ const CpslPopover = class {
                 'transform-v-top': this.transformOriginVertical === 'top',
                 'transform-v-center': this.transformOriginVertical === 'center',
                 'transform-v-bottom': this.transformOriginVertical === 'bottom',
-            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, index.h("div", { key: '8245c2e3184150d41de74d203f548c71578e7c5e', id: "container", class: { container: true, open: this.open } }, index.h("slot", { key: 'b5900e3d8b1f80e604e7c7eb63ec9a345ffe2f31' }))));
+            }, style: { top: `${this.positionY}px`, left: `${this.positionX}px`, width: !this.open ? '0px' : this.autoWidth ? 'auto' : `${(_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.clientWidth}px` } }, index.h("div", { key: '0c86d612a066ac39a37c0291ab96e518f6e2cd32', id: "container", class: { container: true, open: this.open } }, index.h("slot", { key: '616112bb261563452b94256d3f7a8ed563e1cf65' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -21077,10 +21098,10 @@ const CpslSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h(index.Host, { key: '07196d4cfb2df16bc25e70eca2e70c075ec192d9', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (index.h("label", { key: '0d5f157c22dcbe6cb804f95c86fccf09be5f2db1', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: 'f1717a5a7acf3834b1fabbe960c0951a8bef0156', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { key: 'c4031550e20504d14d091a36af499e09f948399c', name: "selected-item" }), index.h("div", { key: 'f46cdd6d89995c29730c5143b8b094a551db095e', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.h("cpsl-text", { key: 'cfa104452575ee2075436fbd2d03e4ec8b7744ea', class: { 'selected-text': true, 'placeholder': !this.selectedValue } }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue)))), index.h("cpsl-icon", { key: '3f573b3bd0d083e36a32661bfbefdeebf0c1c1e3', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: this.icon }), index.h("input", { key: 'c8160d5dd425d1d34420699040226d7a5fa96788', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" })), (this.errorText || this.helperText) && (index.h("div", { key: '02089e440f2547e82ec5348480def12b92a24e04', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '7190858324cf9b375c909c7271e23578e0d5b939' }, (_d = this.errorText) !== null && _d !== void 0 ? _d : this.helperText))), index.h("cpsl-popover", { key: 'b82c8894e19f651952815626647808989ad5d18e', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, index.h("div", { key: '0db22395753a0b9fe95b56138ca2d56bcbfd0b66', part: "dropdown", class: "dropdown" }, this.showSearch && (index.h("div", { key: '18a6ea58a3043f3e836aa5a567148c5a3a62806d', class: "search-container" }, index.h("cpsl-input", { key: 'f6ad7bef0382ce98cd09deb6cbca183dba26490d', onClick: e => e.stopPropagation(), placeholder: (_e = this.searchPlaceholder) !== null && _e !== void 0 ? _e : 'Search', value: "", onCpslInput: e => {
+        return (index.h(index.Host, { key: '07196d4cfb2df16bc25e70eca2e70c075ec192d9', id: this.id, class: { 'disabled': this.disabled, 'focused': this.hasFocus, 'has-value': Boolean(this.selectedValue) } }, this.label && (index.h("label", { key: '0d5f157c22dcbe6cb804f95c86fccf09be5f2db1', class: "label", htmlFor: this.inputId }, this.label, this.required ? '*' : ' ', !this.required && this.showOptionalLabel ? index.h("span", { class: "optional-label" }, "(optional)") : '')), index.h("div", { key: 'f1717a5a7acf3834b1fabbe960c0951a8bef0156', part: "select-container", id: "select-container", class: { 'select-container': true, 'error-container': Boolean(this.errorText) }, onMouseDown: this.handleClick }, this.hasSelectedItem && this.showFormattedSelectedItem && index.h("slot", { key: 'c4031550e20504d14d091a36af499e09f948399c', name: "selected-item" }), index.h("div", { key: 'f46cdd6d89995c29730c5143b8b094a551db095e', class: { 'selected-container-content': true, 'hidden': this.hasSelectedItem && this.showFormattedSelectedItem }, id: "selected-container-content", style: {} }, (!this.hasSelectedItem || !this.showFormattedSelectedItem) && (index.h("cpsl-text", { key: 'cfa104452575ee2075436fbd2d03e4ec8b7744ea', class: { 'selected-text': true, 'placeholder': !this.selectedValue } }, !this.selectedValue ? ((_a = this.placeholder) !== null && _a !== void 0 ? _a : 'Select') : ((_c = (_b = this.formatValue) === null || _b === void 0 ? void 0 : _b.call(this, this.selectedValue)) !== null && _c !== void 0 ? _c : this.selectedValue)))), index.h("cpsl-icon", { key: '3f573b3bd0d083e36a32661bfbefdeebf0c1c1e3', part: "icon", class: { 'chevron': true, 'open': !this.noIconAnimation && this.popoverOpen, 'has-value': Boolean(this.selectedValue) }, icon: this.icon }), index.h("input", { key: 'c8160d5dd425d1d34420699040226d7a5fa96788', id: this.inputId, disabled: this.disabled, class: { disabled: this.disabled }, value: this.selectedValue, onFocus: this.onFocus, onBlur: this.onBlur, onKeyPress: this.handleEnterPress, inputmode: "none" }), index.h("cpsl-popover", { key: '67c237d3559c8b1c87668017adb494394f8892f7', part: "popover", autoWidth: this.autoWidth, trigger: this.id, preventBlur: this.hasFocus, disabled: this.disabled, anchorEl: this.anchorEl }, index.h("div", { key: 'e7d06e0286caba81b827880f93b9f3fd0562c920', part: "dropdown", class: "dropdown" }, this.showSearch && (index.h("div", { key: '6b90fb7f145061e255b7a5fefe9135939da451cd', class: "search-container" }, index.h("cpsl-input", { key: 'de22c0f8e4e54b53ba2d01735d9f3b5b701de49e', onClick: e => e.stopPropagation(), placeholder: (_d = this.searchPlaceholder) !== null && _d !== void 0 ? _d : 'Search', value: "", onCpslInput: e => {
                 e.stopPropagation();
                 this.cpslSearchChange.emit(e.detail.value);
-            } }))), index.h("div", { key: '124c5c09b116c513053dff8e6159272d7063fee5', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: '1944f3fd800325225bb7f48a609f8c85dba4db6a', name: "items" }))))));
+            } }))), index.h("div", { key: '53640295e97e86c68978cb5269c13a2f87a89bd0', class: "dropdown-inner", style: { maxHeight: `${this.dropdownMaxHeight}px` } }, index.h("slot", { key: 'e338a82fe28a6e9cfc035f238964252652aae6e0', name: "items" }))))), (this.errorText || this.helperText) && (index.h("div", { key: '9dc72e327dda99f54959ea6656c5eb23d3f38b51', class: { 'helper-text-container': true, 'error-text': Boolean(this.errorText) } }, index.h("span", { key: '19e164fa3fa038f6423d98b79d161c6161bc7160' }, (_e = this.errorText) !== null && _e !== void 0 ? _e : this.helperText)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {