@usecapsule/core-components 2.0.8 → 2.0.9

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

@@ -4850,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`;
@@ -4881,7 +4888,7 @@ const CpslDropdown = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h(index.Host, { key: '93306d21ee902e6d21089a161bef7955e01ab2a1', style: { width: this.width } }, index.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}`, index.h("div", { key: 'd972fade95a22889977066c652ac3b092d8add58', class: `chevron ${this.isOpen ? '' : 'closed'}`, innerHTML: Icons['chevronUp'] })), index.h("ul", { key: 'd98ac4916d595f13f1126cc912eeaf337cdc7582', 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 {