@usecapsule/core-components 2.0.8 → 2.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/capsule/capsule.esm.js +1 -1
- package/dist/capsule/{p-f2af4351.entry.js → p-2ce99420.entry.js} +2 -2
- package/dist/capsule/p-2ce99420.entry.js.map +1 -0
- package/dist/cjs/cpsl-alert_18.cjs.entry.js +8 -1
- package/dist/cjs/cpsl-alert_18.cjs.entry.js.map +1 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js +8 -1
- package/dist/collection/components/cpsl-dropdown/cpsl-dropdown.js.map +1 -1
- package/dist/esm/cpsl-alert_18.entry.js +8 -1
- package/dist/esm/cpsl-alert_18.entry.js.map +1 -1
- package/package.json +2 -2
- package/dist/capsule/p-f2af4351.entry.js.map +0 -1
|
@@ -4850,10 +4850,17 @@ const CpslDropdown = class {
|
|
|
4850
4850
|
var _a;
|
|
4851
4851
|
const dropdownOptions = this.el.shadowRoot.querySelector('.dropdown-options');
|
|
4852
4852
|
const parentRect = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
|
|
4853
|
+
const searchBar = this.el.shadowRoot.querySelector('.search-bar');
|
|
4853
4854
|
const viewportHeight = window.innerHeight;
|
|
4854
4855
|
if (parentRect) {
|
|
4855
4856
|
this.width = `${parentRect.width}px`;
|
|
4856
4857
|
dropdownOptions.style.left = `${parentRect.x}px`;
|
|
4858
|
+
if (window.innerWidth <= 480) {
|
|
4859
|
+
searchBar.style.maxHeight = `30px`;
|
|
4860
|
+
dropdownOptions.style.top = `425px`;
|
|
4861
|
+
dropdownOptions.style.maxHeight = '110px';
|
|
4862
|
+
return;
|
|
4863
|
+
}
|
|
4857
4864
|
dropdownOptions.style.top = `${parentRect.y + parentRect.height}px`;
|
|
4858
4865
|
const availableHeight = viewportHeight - parentRect.bottom;
|
|
4859
4866
|
dropdownOptions.style.maxHeight = `${availableHeight - 8}px`;
|
|
@@ -4881,7 +4888,7 @@ const CpslDropdown = class {
|
|
|
4881
4888
|
}
|
|
4882
4889
|
render() {
|
|
4883
4890
|
var _a, _b, _c;
|
|
4884
|
-
return (index.h(index.Host, { key: '
|
|
4891
|
+
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))))));
|
|
4885
4892
|
}
|
|
4886
4893
|
get el() { return index.getElement(this); }
|
|
4887
4894
|
static get watchers() { return {
|