@dropi/ui 0.1.50 → 0.1.52

package/dist/collection/components/dropi-paginator/dropi-paginator.js

@@ -54,9 +54,9 @@ export class DropiPaginator {
         const pages = this.pageNumbers;
         const isFirst = this.currentPage <= 1;
         const isLast = this.currentPage >= this.totalPages;
-        return (h("div", { key: '6b39ba2ff5168182a36c59e521e46e12a32ebe85', class: "paginator" }, h("div", { key: '9bc76ef25f10290b575ce047bb5f093e6698a670', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '25def90ed595b4c56cd1481ecf1cc2ed2cc1aeb9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '505c131c240d7af5b5860802a69be6b8971b0ab3', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '090d9b536a0b80d12ac1a48bf9519b34d4b6bc9a', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: 'aec79c1b98329c1302478d8fe738586a8587dca0', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: 'bc9416a0cfee88e4739c11a3ddbc0c4a244cc21d', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
+        return (h("div", { key: 'e72ebe722f06549a3000d89597b8835d93ed7be1', class: "paginator" }, h("div", { key: '5e6fc47b3bc6fc4a94bf0770f405e1ea73eb411d', class: "paginator-pages" }, !isFirst && !this.noLabels && (h("button", { key: '7ee39bcd8506638c6b392b48e63cd0f0a3f671f7', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '857739a713620c191f8106565a2d9e8ac51df3fe', name: "Arrow-double-small-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isFirst && (h("button", { key: '8052d9499ed78c264390c875e73e7f18d5e2e888', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, h("dropi-icon", { key: '243eeba594d2029bc47bc651244d9b1664f7041c', name: "Dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }), !this.noLabels && h("span", { key: '0beca41b97528db889db9265c0779cb842132e38', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
             ? h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: 'fb1f077bd49fdceb052c3d1613d58078f2202ba9', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: 'fe05545abd3c8d72a897c5a68e76347bbe39625b', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '17063d4d03213cbf38b1ff2c79187ec07ba0c8b3', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'b4d0df3505ad5a1c5c0899a7a13aa9f8b79db511', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: 'd0db6c56e6a8dcbf441038b4391b004083a6f708', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
+            : h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (h("button", { key: '5a318c012b3da12ed6cf7e3b9548b5e5c93a4abd', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && h("span", { key: '1eb25a3ddf80cbf32e4beae87d66a516b7f1304d', class: "paginator-label" }, "Siguiente"), h("dropi-icon", { key: '98f4c308b02777a28349e3d873c486ea24a66ea5', name: "Dropdown-Right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (h("button", { key: 'dabccdd09218037c302a051bdca26aefebb4e015', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, h("dropi-icon", { key: '7a6872706fba9456b57c6d55778c456de1cf179d', name: "Arrow-double-small-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))))));
     }
     static get is() { return "dropi-paginator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-phone-input/dropi-phone-input.js

@@ -183,10 +183,10 @@ export class DropiPhoneInput {
     render() {
         const country = this.selectedCountry;
         const isInvalid = this.isValidPhone === false;
-        return (h("div", { key: 'c15336990cd554166dcfec74bbf577074a7fe870', class: "phone-wrap" }, h("div", { key: '7136d327befe46db5b9fd79075526d4a327532ff', class: "phone-input-container" }, h("div", { key: '2348818f20cc26941dd06730d75c95497eb73468', class: "custom-select" }, h("button", { key: '37a0289468cc49b914d31a056d94c1caafc4431d', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+        return (h("div", { key: '8baf494cc8b0c7925414a5c6b518bed906c6c9af', class: "phone-wrap" }, h("div", { key: '8676178ee71fc85eaab623dea92760f0ae661c77', class: "phone-input-container" }, h("div", { key: 'b4037828a850187c7c01df69c46704ca38ab9399', class: "custom-select" }, h("button", { key: '796f0d20cffc0c821012245fe49a9c04b2d07f85', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
                 if (!this.disabledInput)
                     this.open = !this.open;
-            } }, h("span", { key: '59368b25a2afa0a3e7fbb930483239680a867651', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: 'd472729d11380a54182927000703c224104f9213', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '9c73aea42e3f30793505277032c892b3947a90be', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'b3238ad80a85356fbd95a482c3ffa0cf3ecb810f', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '3f0c3ef4f01b13f9f033b5205fe5ab019a923781', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
+            } }, h("span", { key: '67d2755de630b936763fa2610a0e7ba4650476c4', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '576ea15412ad8106e9674bb53dd9b71f86654b48', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '1db0802eb57a6359b2482bc8f24b39957c6cca09', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'cf7a36e39eda8d049c0f9576f52e24e0c88173f3', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '813f274452998d7d329adac1b21c796b61a26a9b', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
     }
     static get is() { return "dropi-phone-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-progress-bar/dropi-progress-bar.js

@@ -17,7 +17,7 @@ export class DropiProgressBar {
             width: `${Math.min(100, Math.max(0, this.value))}%`,
             backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
         };
-        return (h("div", { key: '7093e06299ccb8365d07fa1bc20838254b08957e', class: "progress-container" }, this.showValue && (h("div", { key: 'f32dcb2d2c4dcfcdba5661dc7b66c1f36d4bb66c', class: "progress-header" }, h("span", { key: '5d556cff4beb0af77c28fd934757512a3470b83d', class: "progress-value" }, this.value, "%"))), h("div", { key: '35666669d0206354d2d3e797bf553b767bfb63d5', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: '037d4d7cacc0834b8d79d1fee8c6e9ba3edfc3f5', class: "progress-fill", style: fillStyle }))));
+        return (h("div", { key: 'ff6b55a3f0aaf2eb6f5310d06acf9cfa0f3a2b12', class: "progress-container" }, this.showValue && (h("div", { key: 'f34f6818580f08c0308a4d75ac4c6cfef6d992a6', class: "progress-header" }, h("span", { key: 'daa2e09a6698da3dc3ad207ff6a6cd1882de66cc', class: "progress-value" }, this.value, "%"))), h("div", { key: 'dbe1cf7f8330446dd2a2e7b8c3b049b7c0f816eb', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: 'ce7a0598e201918aa4e925a97c7426c048fd00b9', class: "progress-fill", style: fillStyle }))));
     }
     getSeverityVariable() {
         switch (this.severity) {

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -35,7 +35,7 @@ export class DropiRadioButton {
         this.dropiChange.emit(e);
     }
     render() {
-        return (h("div", { key: 'e42d178a92a815c22b197aec5d962a19f60a4f6f', class: "dropi-radio-button" }, h("label", { key: '0beae39fb6860265332c1ed12d38bc97c78b22c1', htmlFor: this.inputId }, h("input", { key: '4ddb55ecb50c030ed7d4a8795246a9d57f95f0da', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: 'f5a4cfda3991106a02821a499452294509fea514', class: "dropi-radio-button" }, h("label", { key: '8f28e2d4a0da03bd1b0ef2d8a92b1ed9b2b66c26', htmlFor: this.inputId }, h("input", { key: 'ddd006fafd64e071a1431dd3fb827f06a9c8d92d', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-read-more/dropi-read-more.js

@@ -28,7 +28,7 @@ export class DropiReadMore {
     }
     render() {
         const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (h("div", { key: '27f1da08ef634213771942cf956edb42f543cbbd', class: "read-more" }, h("p", { key: '0f8090c4776296e1d7c9073fe5445b5f1d195464', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'b2cc2616cd93dbc4b6025854ab9e4250d699f8fe', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
+        return (h("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, h("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
     }
     static get is() { return "dropi-read-more"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-select/dropi-select.js

@@ -387,7 +387,7 @@ export class DropiSelect {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: 'cd22a44efb11820180aec0cc36aa0e7949712e78', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'f2b2c09818cf292828d6d6ce6d3e5c9e86508495', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'e84b30735dff4ccb40f8931835bf51e3bab6ff11', class: "asterisk" }, " *"))), h("div", { key: '048a25a502b2f7550d298d22439c46589ada08fe', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '849b92a26294622e602fe2ff6bf2db89e22be4f4', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '8b9ac9ea4b494fb830237362f5b9db6b606df765', class: "select-helper" }, h("span", { key: '74fa19eee858b116f81d41ae1a3deb00beaf103e' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '34a015639d80fb8df598f67129f84c34b737ecf4', class: "select-helper-error" }, h("dropi-icon", { key: 'ebcbcadc5c72d35f0a35bc975dda0995b2a493a1', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'f473e766279e0c784251251d6c59fbd92107a7e8' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: 'b11bfc98a7d37846afaad6b171f564b5cb72620a', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'bda1ed87b6ed257c1f8148464199f241d3f5d5f9', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '81e9fd26856228c8ec59271bae8f3788f22fc2ee', class: "asterisk" }, " *"))), h("div", { key: 'a8feb6ffde967418ad5655e24b3b2ac260541508', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '43c9e38a90c6f072f540f6e6af3315e26ce2b2e0', class: "left-label" }, this.label)), this.renderTrigger()), this.textHelper && !this.hasError && (h("div", { key: '73c290608f1feeca8a78d391c63ff76cbdfc41a7', class: "select-helper" }, h("span", { key: 'b64e35c437f9791e790e4d2155deae02cdeb684f' }, this.textHelper))), this.hasError && this.errorText && (h("div", { key: '4e7126e5f6f64a6134928e9aa1901e2d795a9246', class: "select-helper-error" }, h("dropi-icon", { key: '36019fb1921f710113fb10e99eb16fa46a6306dc', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: '99783b102c6d345404ef8d9dfb0325c682c8f87b' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-switch/dropi-switch.js

@@ -25,7 +25,7 @@ export class DropiSwitch {
         this.dropiChange.emit(this.isChecked);
     }
     render() {
-        return (h("label", { key: 'bfe479e64d61f2ffcd76db084c4504842bbb6421', class: "toggle-switch" }, h("input", { key: 'add18063655620fd12d43e0c02b48775b81e9ffa', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '8b6c30839589d9354cf309905e9d0863e8354578', class: "slider" })));
+        return (h("label", { key: 'fe429645c1b3032a273c3dd45e450cc3cdfaa4ae', class: "toggle-switch" }, h("input", { key: '8e73bdbe0b14b8e889804f5d35616c0cfa52b025', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), h("span", { key: '245aae98ce063331246fda2c729134112a199114', class: "slider" })));
     }
     static get is() { return "dropi-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-tag-type-product/dropi-tag-type-product.js

@@ -7,7 +7,7 @@ export class DropiTagTypeProduct {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return h("div", { key: '89083374c365448b4862687559ce311e258ee031', class: "type-variation" }, this.label);
+        return h("div", { key: 'ae1cd50cd3e82180704ae4f5406b4dc13ffbd12c', class: "type-variation" }, this.label);
     }
     static get is() { return "dropi-tag-type-product"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-tooltip/dropi-tooltip.js

@@ -9,7 +9,7 @@ export class DropiTooltip {
     /** Whether the tooltip has an outline style (matches Angular `outlined`) */
     outlined = false;
     render() {
-        return (h("div", { key: '42891ce799b8a62c9b389ee1f76104f69124f5be', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: '2ef06f971f67c995bdf1ce3be6209f2173cca63d' }), this.text && (h("div", { key: '9417b2ca92cd320abe686d1cb71a18ff5cfc09e7', class: "tooltip-simple-bubble" }, this.text))));
+        return (h("div", { key: '0b14943b628c231fbb530620e7829f70e6099c7a', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: 'bf0245c6fab0ba938834d2d3e84ccaa9cb14f5c8' }), this.text && (h("div", { key: 'e1e33acf8628f79b36c5cc66c7076a03ce8167f7', class: "tooltip-simple-bubble" }, this.text))));
     }
     static get is() { return "dropi-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.js

@@ -24,7 +24,7 @@ export class DropiYoutubeLazyVideo {
         return `https://www.youtube.com/embed/${this.videoId}?autoplay=1&rel=0&modestbranding=1`;
     }
     render() {
-        return (h("div", { key: '04b1c8c4c089306ddd94072510066e6687dea8da', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (h("div", { key: '2c5c6a08d986b03bbb3d3f81bc167736518ac201', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, h("img", { key: '7fcf622e553c278b5121ad6361d6a35eb1e7aa5d', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), h("button", { key: 'f99709c40c48f5b94d201ae0b8933152307253ba', class: "play-button", "aria-label": "Reproducir video" }, h("dropi-icon", { key: 'ad31b427514ca7f2fe29deee2bb01e72fee49d35', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (h("iframe", { key: '98b418bc525fedb92852d6bb67434affad36eb87', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
+        return (h("div", { key: '0732bc87e7be10e422e80751a17527132301eb99', class: `video-wrapper${this.isPlaying ? ' playing' : ''}` }, !this.isPlaying && (h("div", { key: '540c46b66da3f67ec45614e0891827b7cc0be4e5', class: "thumbnail", onClick: () => { this.isPlaying = true; } }, h("img", { key: '843241c72688ca88ccd5d9391b542501575ea476', src: this.thumbnail, alt: `Video thumbnail ${this.videoId}` }), h("button", { key: 'b068f79fb6b2140e1419e9d72a24f6e66eaab69d', class: "play-button", "aria-label": "Reproducir video" }, h("dropi-icon", { key: 'b3b6d8b99583fd0a3c2c0d766beeda2459b8b13a', name: "Play", iconWidth: "17px", iconHeight: "21px", color: "Neutral-White" })))), this.isPlaying && (h("iframe", { key: '42172a0c7bb386da9123b411af4ab5ebeb9e205c', src: this.videoUrl, title: this.videoTitle, frameborder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, loading: "lazy" }))));
     }
     static get is() { return "dropi-youtube-lazy-video"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/dropi-card-section.js

@@ -1 +1 @@
-import{t as e,p as t,H as i,c as s,h as r}from"./index.js";import{d as o}from"./p-DqAyyLAT.js";import{d as c}from"./p-l48cENKO.js";const n=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=s(this,"dropiChange"),this.dropiClick=s(this,"dropiClick")}title="title";description="Description";typeElement="dropdown";type="important";isChecked=!1;dropiChange;dropiClick;render(){return r("div",{key:"06fe2a580fb23484419ea4b1c41a265facb722de",class:"card-section"},r("div",{key:"1020ea256b0311a200a721387b3ecb8d0f3809ab",class:"card-section__text"},"important"===this.type?r("h5",{class:"card-section__title card-section__title--important"},this.title):r("h6",{class:"card-section__title"},this.title),this.description&&r("p",{key:"52ea93b6b2736c4c6e3ebb953c2878db90d34b4c",class:"card-section__desc"},this.description)),r("div",{key:"7ec0ed96e43b45256fd5dec5ee24b0dfd6488403",class:"card-section__control"},"switch"===this.typeElement?r("dropi-switch",{name:"_card-section-switch",isChecked:this.isChecked,onDropiChange:e=>{this.isChecked=e.detail,this.dropiChange.emit(e.detail)}}):r("button",{class:"card-section__dropdown-btn",onClick:()=>this.dropiClick.emit(),"aria-label":"Expandir"},r("dropi-icon",{name:"Dropdown-down",iconWidth:"20px",iconHeight:"20px",color:"Gray-Gray-500"}))))}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}"}},[513,"dropi-card-section",{title:[1],description:[1],typeElement:[1,"type-element"],type:[1],isChecked:[1028,"is-checked"]}]);function a(){"undefined"!=typeof customElements&&["dropi-card-section","dropi-icon","dropi-switch"].forEach((t=>{switch(t){case"dropi-card-section":customElements.get(e(t))||customElements.define(e(t),n);break;case"dropi-icon":customElements.get(e(t))||o();break;case"dropi-switch":customElements.get(e(t))||c()}}))}a();const d=n,p=a;export{d as DropiCardSection,p as defineCustomElement}
+import{t as e,p as t,H as i,c as s,h as r}from"./index.js";import{d as o}from"./p-DqAyyLAT.js";import{d as c}from"./p-BieZ2Zwa.js";const a=t(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChange=s(this,"dropiChange"),this.dropiClick=s(this,"dropiClick")}title="title";description="Description";typeElement="dropdown";type="important";isChecked=!1;dropiChange;dropiClick;render(){return r("div",{key:"06fe2a580fb23484419ea4b1c41a265facb722de",class:"card-section"},r("div",{key:"1020ea256b0311a200a721387b3ecb8d0f3809ab",class:"card-section__text"},"important"===this.type?r("h5",{class:"card-section__title card-section__title--important"},this.title):r("h6",{class:"card-section__title"},this.title),this.description&&r("p",{key:"52ea93b6b2736c4c6e3ebb953c2878db90d34b4c",class:"card-section__desc"},this.description)),r("div",{key:"7ec0ed96e43b45256fd5dec5ee24b0dfd6488403",class:"card-section__control"},"switch"===this.typeElement?r("dropi-switch",{name:"_card-section-switch",isChecked:this.isChecked,onDropiChange:e=>{this.isChecked=e.detail,this.dropiChange.emit(e.detail)}}):r("button",{class:"card-section__dropdown-btn",onClick:()=>this.dropiClick.emit(),"aria-label":"Expandir"},r("dropi-icon",{name:"Dropdown-down",iconWidth:"20px",iconHeight:"20px",color:"Gray-Gray-500"}))))}static get style(){return":host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.card-section{display:flex;align-items:center;justify-content:space-between;gap:var(--Size-4, 16px);padding:var(--Size-3, 12px) var(--Size-4, 16px);background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-100, #e6eaf2);border-radius:var(--Border-2, 8px)}.card-section__text{flex:1}.card-section__title{margin:0 0 4px;font-family:inherit;font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-800, #1f2433)}h5.card-section__title{font-size:var(--font-size-m, 14px)}h6.card-section__title{font-size:var(--font-size-s, 12px)}.card-section__desc{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c)}.card-section__control{flex-shrink:0}.card-section__dropdown-btn{display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer}"}},[513,"dropi-card-section",{title:[1],description:[1],typeElement:[1,"type-element"],type:[1],isChecked:[1028,"is-checked"]}]);function n(){"undefined"!=typeof customElements&&["dropi-card-section","dropi-icon","dropi-switch"].forEach((t=>{switch(t){case"dropi-card-section":customElements.get(e(t))||customElements.define(e(t),a);break;case"dropi-icon":customElements.get(e(t))||o();break;case"dropi-switch":customElements.get(e(t))||c()}}))}n();const d=a,p=n;export{d as DropiCardSection,p as defineCustomElement}

package/dist/components/dropi-date-picker-range.js

@@ -1 +1 @@
-import{t,p as a,H as e,c as i,h as s}from"./index.js";const r=a(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.startDateChange=i(this,"startDateChange"),this.endDateChange=i(this,"endDateChange"),this.dropiRangeChange=i(this,"dropiRangeChange")}startDate="";endDate="";showLabel=!0;placeholder="";loading=!1;maxDaysRange=0;hideTodayRangeShortcut=!1;startDateChange;endDateChange;dropiRangeChange;start="";end="";activeRange=-1;showWarning=!1;onStartPropChange(t){this.start=t}onEndPropChange(t){this.end=t}componentWillLoad(){this.start=this.startDate,this.end=this.endDate}get today(){return(new Date).toISOString().split("T")[0]}daysAgo(t){const a=new Date;return a.setDate(a.getDate()-t),a.toISOString().split("T")[0]}get shortcuts(){const t=[{label:"Hoy",start:this.today,end:this.today},{label:"Últimos 7 días",start:this.daysAgo(6),end:this.today},{label:"Últimos 15 días",start:this.daysAgo(14),end:this.today},{label:"Últimos 30 días",start:this.daysAgo(29),end:this.today},{label:"Últimos 90 días",start:this.daysAgo(89),end:this.today}];return this.hideTodayRangeShortcut?t.slice(1):t}selectShortcut(t){const a=this.shortcuts[t];this.start=a.start,this.end=a.end,this.activeRange=t,this.showWarning=!1,this.emit()}onStartChange(t){this.start=t.target.value,this.activeRange=-1,this.checkRange(),this.start&&this.end&&this.emit()}onEndChange(t){this.end=t.target.value,this.activeRange=-1,this.checkRange(),this.start&&this.end&&this.emit()}checkRange(){if(this.start&&this.end&&this.maxDaysRange>0){const t=(new Date(this.end).getTime()-new Date(this.start).getTime())/864e5;this.showWarning=t>this.maxDaysRange}else this.showWarning=!1}emit(){this.startDateChange.emit(this.start),this.endDateChange.emit(this.end),this.dropiRangeChange.emit({start:this.start,end:this.end})}render(){return this.loading?s("div",{class:"skeleton"}):s("div",{class:"date-picker-range"},this.showLabel&&s("div",{class:"label"},"Rango de fechas"),s("div",{class:"inputs-row"},s("div",{class:"input-group"},s("label",{class:"input-label"},"Desde"),s("input",{type:"date",class:"date-input",value:this.start,max:this.end||this.today,onChange:t=>this.onStartChange(t)})),s("span",{class:"separator"},"—"),s("div",{class:"input-group"},s("label",{class:"input-label"},"Hasta"),s("input",{type:"date",class:"date-input",value:this.end,min:this.start,max:this.today,onChange:t=>this.onEndChange(t)}))),s("div",{class:"shortcuts"},this.shortcuts.map(((t,a)=>s("button",{key:a,class:"shortcut-btn"+(this.activeRange===a?" active":""),onClick:()=>this.selectShortcut(a)},t.label)))),this.showWarning&&s("div",{class:"warning-box"},s("span",{class:"warning-message"},"Solo puedes filtrar en un rango máximo de ",this.maxDaysRange," días.")))}static get watchers(){return{startDate:[{onStartPropChange:0}],endDate:[{onEndPropChange:0}]}}static get style(){return":host{display:block;width:100%;max-width:380px}*,*::before,*::after{box-sizing:border-box}.date-picker-range{width:100%;font-family:inherit}.label{font-size:11px;font-weight:var(--font-weight-medium);color:#7b8190;margin-bottom:8px}.inputs-row{display:flex;align-items:flex-end;gap:8px}.input-group{flex:1;display:flex;flex-direction:column;gap:4px}.input-label{font-size:var(--font-size-xs, 11px);color:var(--Gray-Gray-500, #69738c);font-weight:var(--font-weight-medium, 500)}.date-input{width:100%;height:40px;padding:0 10px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.15s ease}.date-input:focus{border-color:var(--Primary-Primary-500, #f49a3d)}.separator{padding-bottom:8px;color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-m)}.shortcuts{display:flex;flex-direction:column;gap:2px;margin-top:10px;border-left:1px solid var(--Gray-Gray-100, #e6eaf2);padding-left:10px}.shortcut-btn{background:transparent;border:none;padding:4px 6px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:5px;transition:background 0.1s ease;font-weight:var(--font-weight-regular)}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn.active{background:var(--Gray-Gray-50, #f5f6f8);font-weight:var(--font-weight-semibold)}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid var(--Warning-Warning-400);border-radius:4px;background:var(--Warning-Warning-50)}.warning-message{color:#495057;font-size:var(--font-size-xxs);line-height:16px}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;min-width:180px;border-radius:6px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}@media screen and (max-width: 480px){.inputs-row{flex-direction:column}.separator{display:none}.shortcuts{flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:8px}}"}},[513,"dropi-date-picker-range",{startDate:[1025,"start-date"],endDate:[1025,"end-date"],showLabel:[4,"show-label"],placeholder:[1],loading:[4],maxDaysRange:[2,"max-days-range"],hideTodayRangeShortcut:[4,"hide-today-range-shortcut"],start:[32],end:[32],activeRange:[32],showWarning:[32]},void 0,{startDate:[{onStartPropChange:0}],endDate:[{onEndPropChange:0}]}]);function n(){"undefined"!=typeof customElements&&["dropi-date-picker-range"].forEach((a=>{"dropi-date-picker-range"===a&&(customElements.get(t(a))||customElements.define(t(a),r))}))}n();const o=r,d=n;export{o as DropiDatePickerRange,d as defineCustomElement}
+import{t,p as e,H as r,c as a,h as i}from"./index.js";import{d as n}from"./p-DqAyyLAT.js";const o=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],s=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],d=["Do","Lu","Ma","Mi","Ju","Vi","Sa"],l=e(class extends r{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.startDateChange=a(this,"startDateChange"),this.endDateChange=a(this,"endDateChange"),this.dropiRangeChange=a(this,"dropiRangeChange")}startDate="";endDate="";showLabel=!0;placeholder="DD/MM/YYYY – DD/MM/YYYY";loading=!1;maxDaysRange=0;hideTodayRangeShortcut=!1;disabled=!1;startDateChange;endDateChange;dropiRangeChange;start="";end="";activeRange=-1;showWarning=!1;open=!1;viewYear=(new Date).getFullYear();viewMonth=(new Date).getMonth();hoverDate="";viewMode="day";get el(){return this}onStartPropChange(t){this.start=t}onEndPropChange(t){this.end=t}handleDocClick(t){this.open&&!t.composedPath().includes(this.el)&&(this.open=!1)}componentWillLoad(){this.start=this.startDate,this.end=this.endDate}get today(){return(new Date).toISOString().split("T")[0]}daysAgo(t){const e=new Date;return e.setDate(e.getDate()-t),e.toISOString().split("T")[0]}get shortcuts(){const t=[{label:"Hoy",start:this.today,end:this.today},{label:"Últimos 7 días",start:this.daysAgo(6),end:this.today},{label:"Últimos 15 días",start:this.daysAgo(14),end:this.today},{label:"Últimos 30 días",start:this.daysAgo(29),end:this.today},{label:"Últimos 90 días",start:this.daysAgo(89),end:this.today}];return this.hideTodayRangeShortcut?t.slice(1):t}get displayValue(){const t=t=>t.split("-").reverse().join("/");return this.start&&this.end?`${t(this.start)} – ${t(this.end)}`:this.start?t(this.start):""}toggleOpen(){if(!this.disabled){if(!this.open&&this.start){const t=new Date(this.start);this.viewYear=t.getFullYear(),this.viewMonth=t.getMonth()}this.viewMode="day",this.open=!this.open}}get decadeStart(){return 10*Math.floor(this.viewYear/10)}get navTitle(){return"day"===this.viewMode?`${o[this.viewMonth]}  ${this.viewYear}`:"month"===this.viewMode?""+this.viewYear:`${this.decadeStart}-${this.decadeStart+9}`}cycleView(){"day"===this.viewMode?this.viewMode="month":"month"===this.viewMode&&(this.viewMode="year")}prevNav(){"day"===this.viewMode?0===this.viewMonth?(this.viewMonth=11,this.viewYear--):this.viewMonth--:"month"===this.viewMode?this.viewYear--:this.viewYear=this.decadeStart-10}nextNav(){"day"===this.viewMode?11===this.viewMonth?(this.viewMonth=0,this.viewYear++):this.viewMonth++:"month"===this.viewMode?this.viewYear++:this.viewYear=this.decadeStart+10}selectMonth(t){this.viewMonth=t,this.viewMode="day"}selectYear(t){this.viewYear=t,this.viewMode="month"}toISO(t,e,r){return`${t}-${(e+1+"").padStart(2,"0")}-${(r+"").padStart(2,"0")}`}isInRange(t){const e=this.end||this.hoverDate;if(!this.start||!e)return!1;const[r,a]=this.start<=e?[this.start,e]:[e,this.start];return t>r&&t<a}selectDate(t){if(!this.start||this.start&&this.end)this.start=t,this.end="",this.activeRange=-1,this.showWarning=!1;else{if(t<this.start?(this.end=this.start,this.start=t):this.end=t,this.activeRange=-1,this.maxDaysRange>0){const t=(new Date(this.end).getTime()-new Date(this.start).getTime())/864e5;if(this.showWarning=t>this.maxDaysRange,this.showWarning)return}this.open=!1,this.emit()}}selectShortcut(t){const e=this.shortcuts[t];this.start=e.start,this.end=e.end,this.activeRange=t,this.showWarning=!1,this.open=!1,this.emit()}emit(){this.startDateChange.emit(this.start),this.endDateChange.emit(this.end),this.dropiRangeChange.emit({start:this.start,end:this.end})}buildDays(){const t=this.viewYear,e=this.viewMonth,r=new Date(t,e,1).getDay(),a=new Date(t,e+1,0).getDate(),i=new Date(t,e,0).getDate(),n=[];for(let a=r-1;a>=0;a--){const r=i-a;n.push({iso:this.toISO(0===e?t-1:t,0===e?11:e-1,r),day:r,currentMonth:!1})}for(let r=1;r<=a;r++)n.push({iso:this.toISO(t,e,r),day:r,currentMonth:!0});const o=42-n.length;for(let r=1;r<=o;r++)n.push({iso:this.toISO(11===e?t+1:t,11===e?0:e+1,r),day:r,currentMonth:!1});return n}renderDayView(t){const e=this.buildDays();return i("div",{class:"dp-grid"},d.map((t=>i("div",{class:"dp-day-header"},t))),e.map((({iso:e,day:r,currentMonth:a})=>{const n=e===this.start,o=e===this.end,s=this.isInRange(e);return i("button",{class:{"dp-cell":!0,"dp-cell--other-month":!a,"dp-cell--today":e===t&&!n&&!o,"dp-cell--selected":n||o,"dp-cell--range-start":n,"dp-cell--range-end":o,"dp-cell--in-range":s},type:"button",onClick:()=>this.selectDate(e),onMouseEnter:()=>{this.start&&!this.end&&(this.hoverDate=e)},onMouseLeave:()=>this.hoverDate=""},r)})))}renderMonthView(){const t=(new Date).getMonth(),e=(new Date).getFullYear();return i("div",{class:"dp-month-grid"},s.map(((r,a)=>{const n=a===this.viewMonth;return i("button",{class:{"dp-month-cell":!0,"dp-month-cell--selected":n,"dp-month-cell--current":a===t&&this.viewYear===e&&!n},type:"button",onClick:()=>this.selectMonth(a)},r)})))}renderYearView(){const t=(new Date).getFullYear(),e=this.decadeStart,r=Array.from({length:10},((t,r)=>e+r));return i("div",{class:"dp-year-grid"},r.map((e=>{const r=e===this.viewYear;return i("button",{class:{"dp-year-cell":!0,"dp-year-cell--selected":r,"dp-year-cell--current":e===t&&!r},type:"button",onClick:()=>this.selectYear(e)},e)})))}render(){if(this.loading)return i("div",{class:"skeleton"});const t=this.today;return i("div",{class:"dpr-wrap"},this.showLabel&&i("label",{class:"dpr-label"},"Rango de fechas"),i("button",{class:{"dpr-trigger":!0,"dpr-trigger--disabled":this.disabled},onClick:()=>this.toggleOpen(),disabled:this.disabled,type:"button"},i("dropi-icon",{name:"Calendar",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-400"}),i("span",{class:{"dpr-trigger__value":!0,"dpr-trigger__placeholder":!this.displayValue}},this.displayValue||this.placeholder)),this.open&&i("div",{class:"dpr-popup"},i("div",{class:"dpr-calendar"},i("div",{class:"dp-nav"},i("button",{class:"dp-nav__btn",onClick:()=>this.prevNav(),type:"button"},i("dropi-icon",{name:"dropdown-left",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"})),i("button",{class:"dp-nav__title",onClick:()=>this.cycleView(),type:"button"},"day"===this.viewMode?[i("span",null,o[this.viewMonth]),i("span",null,this.viewYear)]:i("span",null,this.navTitle)),i("button",{class:"dp-nav__btn",onClick:()=>this.nextNav(),type:"button"},i("dropi-icon",{name:"dropdown-right",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"}))),"day"===this.viewMode&&this.renderDayView(t),"month"===this.viewMode&&this.renderMonthView(),"year"===this.viewMode&&this.renderYearView(),this.showWarning&&i("div",{class:"warning-box"},i("span",{class:"warning-message"},"Solo puedes filtrar en un rango máximo de ",this.maxDaysRange," días."))),i("div",{class:"dpr-divider"}),i("div",{class:"dpr-shortcuts"},this.shortcuts.map(((t,e)=>i("button",{key:e,class:{"shortcut-btn":!0,"shortcut-btn--active":this.activeRange===e},onClick:()=>this.selectShortcut(e),type:"button"},t.label))))))}static get watchers(){return{startDate:[{onStartPropChange:0}],endDate:[{onEndPropChange:0}]}}static get style(){return':host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dpr-label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:8px}.dpr-trigger{width:100%;height:40px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dpr-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dpr-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dpr-trigger__value{flex:1;text-align:left;font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dpr-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dpr-popup{position:absolute;top:calc(100% + 8px);left:0;display:flex;flex-direction:row;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-3, 12px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:300;overflow:hidden}.dpr-calendar{padding:var(--Size-4, 16px);width:300px;flex-shrink:0}.dpr-divider{width:1px;background:var(--Gray-Gray-100, #e6eaf2);flex-shrink:0}.dpr-shortcuts{padding:var(--Size-4, 16px) var(--Size-3, 12px);display:flex;flex-direction:column;gap:2px;min-width:140px}.shortcut-btn{background:transparent;border:1px solid transparent;padding:6px 10px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:6px;transition:background 0.1s ease;font-weight:var(--font-weight-regular);white-space:nowrap}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn--active{border-color:var(--Gray-Gray-200, #c3c9d9);font-weight:var(--font-weight-semibold);background:var(--Gray-Gray-50, #f5f6f8)}.warning-box{margin-top:8px;padding:4px 8px;border:1px solid var(--Warning-Warning-400);border-radius:4px;background:var(--Warning-Warning-50)}.warning-message{color:#495057;font-size:var(--font-size-xxs);line-height:16px}.dp-month-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}.dp-month-cell{padding:10px 4px;font-size:var(--font-size-s, 14px);font-family:inherit;font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-700, #32394d);background:transparent;border:1px solid transparent;border-radius:var(--Border-2, 8px);cursor:pointer;text-align:center;transition:background 0.15s, border-color 0.15s}.dp-month-cell:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-month-cell--selected{border-color:var(--Info-Info-500, #50a5f1);font-weight:var(--font-weight-semibold, 600)}.dp-month-cell--current{background:var(--Gray-Gray-100, #e6eaf2)}.dp-year-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px}.dp-year-cell{padding:10px 4px;font-size:var(--font-size-s, 14px);font-family:inherit;font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-700, #32394d);background:transparent;border:1px solid transparent;border-radius:var(--Border-2, 8px);cursor:pointer;text-align:center;transition:background 0.15s, border-color 0.15s}.dp-year-cell:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-year-cell--selected{border-color:var(--Info-Info-500, #50a5f1);font-weight:var(--font-weight-semibold, 600)}.dp-year-cell--current{background:var(--Gray-Gray-100, #e6eaf2)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px);padding-bottom:var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.dp-nav__btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{background:none;border:none;font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px;cursor:pointer;padding:4px 8px;border-radius:var(--Border-1, 4px);font-family:inherit;transition:background 0.15s}.dp-nav__title:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);row-gap:6px;column-gap:2px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:6px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 12px);font-family:inherit;border:none;cursor:pointer;background:transparent;color:var(--Gray-Gray-600, #475066);width:100%;position:relative;z-index:1;padding:0}.dp-cell::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transition:background 0.15s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;background:transparent}.dp-cell:hover:not(:disabled)::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700)}.dp-cell--today::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--selected{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--selected::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--range-start,.dp-cell--range-end{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--range-start::after,.dp-cell--range-end::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--in-range{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-cell--in-range::before{left:-1px;right:-1px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-1px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-1px;right:50%;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start.dp-cell--range-end::before{background:transparent}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}@keyframes shimmer{0%{background-position:-468px 0}100%{background-position:468px 0}}.skeleton{height:40px;width:100%;border-radius:8px;animation:shimmer 1s linear infinite;background:linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);background-size:800px 104px}'}},[513,"dropi-date-picker-range",{startDate:[1025,"start-date"],endDate:[1025,"end-date"],showLabel:[4,"show-label"],placeholder:[1],loading:[4],maxDaysRange:[2,"max-days-range"],hideTodayRangeShortcut:[4,"hide-today-range-shortcut"],disabled:[4],start:[32],end:[32],activeRange:[32],showWarning:[32],open:[32],viewYear:[32],viewMonth:[32],hoverDate:[32],viewMode:[32]},[[4,"click","handleDocClick"]],{startDate:[{onStartPropChange:0}],endDate:[{onEndPropChange:0}]}]);function h(){"undefined"!=typeof customElements&&["dropi-date-picker-range","dropi-icon"].forEach((e=>{switch(e){case"dropi-date-picker-range":customElements.get(t(e))||customElements.define(t(e),l);break;case"dropi-icon":customElements.get(t(e))||n()}}))}h();const c=l,p=h;export{c as DropiDatePickerRange,p as defineCustomElement}

package/dist/components/dropi-date-picker.js

@@ -1 +1 @@
-import{t as e,p as t,H as a,c as r,h as i}from"./index.js";import{d as o}from"./p-DqAyyLAT.js";const n=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],d=["Do","Lu","Ma","Mi","Ju","Vi","Sa"],s=t(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChangeDate=r(this,"dropiChangeDate"),this.dropiClosePanel=r(this,"dropiClosePanel"),this.dropiRangeChange=r(this,"dropiRangeChange"),this.internals=this.attachInternals()}internals;name;selectedDate="";startDate="";endDate="";valueChanged(){this.updateFormValue()}selectionMode="single";minDate="";maxDate="";label=null;placeholder="DD/MM/YYYY";disabled=!1;isInvalid=!1;loading=!1;open=!1;viewYear=(new Date).getFullYear();viewMonth=(new Date).getMonth();hoverDate="";get el(){return this}handleDocClick(e){this.open&&!e.composedPath().includes(this.el)&&(this.open=!1)}dropiChangeDate;dropiClosePanel;dropiRangeChange;componentWillLoad(){this.updateFormValue()}updateFormValue(){this.internals.setFormValue("range"===this.selectionMode?this.startDate&&this.endDate?`${this.startDate},${this.endDate}`:"":this.selectedDate||"")}get displayValue(){return"range"===this.selectionMode?this.startDate&&this.endDate?`${this.startDate} – ${this.endDate}`:this.startDate?this.startDate:"":this.selectedDate}open_(){if(!this.disabled){if(this.selectedDate){const e=new Date(this.selectedDate);this.viewYear=e.getFullYear(),this.viewMonth=e.getMonth()}else if(this.startDate){const e=new Date(this.startDate);this.viewYear=e.getFullYear(),this.viewMonth=e.getMonth()}this.open=!0}}prevMonth(){0===this.viewMonth?(this.viewMonth=11,this.viewYear--):this.viewMonth--}nextMonth(){11===this.viewMonth?(this.viewMonth=0,this.viewYear++):this.viewMonth++}toISO(e,t,a){return`${e}-${(t+1+"").padStart(2,"0")}-${(a+"").padStart(2,"0")}`}isDisabled(e){return!!(this.minDate&&e<this.minDate)||!!(this.maxDate&&e>this.maxDate)}isInRange(e){if("range"!==this.selectionMode)return!1;const t=this.startDate,a=this.endDate||this.hoverDate;if(!t||!a)return!1;const[r,i]=t<=a?[t,a]:[a,t];return e>r&&e<i}selectDate(e){if(!this.isDisabled(e))return"range"!==this.selectionMode?(this.selectedDate=e,this.open=!1,void this.dropiChangeDate.emit(e)):void(!this.startDate||this.startDate&&this.endDate?(this.startDate=e,this.endDate=""):(e<this.startDate?(this.endDate=this.startDate,this.startDate=e):this.endDate=e,this.open=!1,this.dropiRangeChange.emit({start:this.startDate,end:this.endDate})))}buildDays(){const e=this.viewYear,t=this.viewMonth,a=new Date(e,t,1).getDay(),r=new Date(e,t+1,0).getDate(),i=new Date(e,t,0).getDate(),o=[];for(let r=a-1;r>=0;r--){const a=i-r;o.push({iso:this.toISO(0===t?e-1:e,0===t?11:t-1,a),day:a,currentMonth:!1})}for(let a=1;a<=r;a++)o.push({iso:this.toISO(e,t,a),day:a,currentMonth:!0});const n=42-o.length;for(let a=1;a<=n;a++)o.push({iso:this.toISO(11===t?e+1:e,11===t?0:t+1,a),day:a,currentMonth:!1});return o}render(){const e=this.buildDays(),t=(new Date).toISOString().slice(0,10);return i("div",{key:"d2f6248ff409e53e916e266ab5d23136e9da76d0",class:"dp-wrap"},this.label&&i("label",{key:"ba51f4091f18437e4449c05378def5b099883acd",class:"dp-label"},this.label),i("button",{key:"88eb474ca75c9b62996765bdb4816a8cfc14bb8e",class:{"dp-trigger":!0,"dp-trigger--disabled":this.disabled,"dp-trigger--invalid":this.isInvalid,"dp-trigger--loading":this.loading},onClick:()=>this.open?this.open=!1:this.open_(),disabled:this.disabled||this.loading,type:"button"},i("dropi-icon",{key:"1044cef59317f88cc472d2a466a6937a0c4d58f7",name:"Calendar",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-400"}),i("span",{key:"6a7c5687cd06b9b2f42c256bc03ff0f412ca5573",class:{"dp-trigger__value":!0,"dp-trigger__placeholder":!this.displayValue}},this.displayValue||this.placeholder),i("dropi-icon",{key:"4be1fc67ed6f9ffb5a5d936e3e8d8330bb91fb0b",name:"Arrow-Down-2",iconWidth:"12px",iconHeight:"12px",color:"Gray-Gray-400"})),this.open&&i("div",{key:"5ad107e256d62a46b57e4bd1bebead70ecc8e46c",class:"dp-popup"},i("div",{key:"e3d51afbd24df88867777e43c9bd63dd41c3f542",class:"dp-nav"},i("button",{key:"8819f79389c1d50ec639f719228aab88be4d0335",class:"dp-nav__btn",onClick:()=>this.prevMonth(),type:"button"},i("dropi-icon",{key:"a17004ad24ce40590474d91227a826f46edf50ba",name:"Arrow-Left-2",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"})),i("span",{key:"e91c8a46b963a1e7f0d01c56610c2e4bb6fa3d39",class:"dp-nav__title"},i("span",{key:"214a575cbd83e8c3bafe64ffbd93e914119b09aa"},n[this.viewMonth]),i("span",{key:"1f71a83e7110bf8a91f7b5e14e0400b09ba28e1a"},this.viewYear)),i("button",{key:"21dbc0fdaabc423bd864bfb33ba314b72ca62d48",class:"dp-nav__btn",onClick:()=>this.nextMonth(),type:"button"},i("dropi-icon",{key:"f248e65855555878afdbda7d1ba9a802d9eae4d5",name:"Arrow-Right-2",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"}))),i("div",{key:"4fb29792028bf2132ea78a105c7694cf3806ff05",class:"dp-grid"},d.map((e=>i("div",{class:"dp-day-header"},e))),e.map((({iso:e,day:a,currentMonth:r})=>{const o="range"!==this.selectionMode?e===this.selectedDate:e===this.startDate||e===this.endDate,n="range"===this.selectionMode&&e===this.startDate,d="range"===this.selectionMode&&e===this.endDate,s=this.isInRange(e),l=this.isDisabled(e);return i("button",{class:{"dp-cell":!0,"dp-cell--other-month":!r,"dp-cell--today":e===t,"dp-cell--selected":o,"dp-cell--range-start":n,"dp-cell--range-end":d,"dp-cell--in-range":s,"dp-cell--disabled":l},type:"button",disabled:l,onClick:()=>this.selectDate(e),onMouseEnter:()=>{"range"===this.selectionMode&&this.startDate&&!this.endDate&&(this.hoverDate=e)},onMouseLeave:()=>this.hoverDate=""},a)}))),i("div",{key:"9c670c5ad5a6115b628d5a7bd3a2422c7631e237",class:"dp-footer"},i("button",{key:"f939595cde989ea0bd462a3d94c6333b5220d1ee",class:"dp-footer__clear",type:"button",onClick:()=>{this.selectedDate="",this.startDate="",this.endDate="",this.open=!1}},"Limpiar"),i("button",{key:"87b88413962d73229f0cac5a15918b9cd7aebea3",class:"dp-footer__today",type:"button",onClick:()=>{"range"!==this.selectionMode?(this.selectedDate=t,this.open=!1,this.dropiChangeDate.emit(t)):(this.startDate=t,this.endDate="")}},"Hoy"))))}static get formAssociated(){return!0}static get watchers(){return{selectedDate:[{valueChanged:0}],startDate:[{valueChanged:0}],endDate:[{valueChanged:0}]}}static get style(){return':host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xxs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.dp-trigger{width:100%;height:44px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 8px);left:0;width:320px;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-3, 12px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:300;padding:var(--Size-4, 16px)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px)}.dp-nav__btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);row-gap:8px;column-gap:4px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:8px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 12px);font-family:inherit;border:none;cursor:pointer;background:transparent;color:var(--Gray-Gray-600, #475066);width:100%;position:relative;z-index:1;padding:0}.dp-cell::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transition:all 0.2s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;border-radius:0;background:transparent}.dp-cell:hover:not(:disabled)::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700)}.dp-cell--today::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--selected{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--selected::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--range-start,.dp-cell--range-end{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--range-start::after,.dp-cell--range-end::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--in-range{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-cell--in-range::before{left:-2px;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-2px;right:50%;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start.dp-cell--range-end::before{background:transparent}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}.dp-footer{display:flex;justify-content:space-between;margin-top:var(--Size-3, 12px);border-top:1px solid var(--Gray-Gray-100, #e6eaf2);padding-top:var(--Size-2, 8px)}.dp-footer__clear,.dp-footer__today{background:none;border:none;padding:4px 8px;font-size:var(--font-size-xxs, 10px);font-family:inherit;cursor:pointer;border-radius:var(--Border-1, 4px);transition:background 0.15s}.dp-footer__clear{color:var(--Gray-Gray-500, #69738c)}.dp-footer__today{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-footer__clear:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-footer__today:hover{background:var(--Orange-orange-50, #fef5ec)}'}},[577,"dropi-date-picker",{name:[513],selectedDate:[1025,"selected-date"],startDate:[1025,"start-date"],endDate:[1025,"end-date"],selectionMode:[1,"selection-mode"],minDate:[1,"min-date"],maxDate:[1,"max-date"],label:[1],placeholder:[1],disabled:[4],isInvalid:[4,"is-invalid"],loading:[4],open:[32],viewYear:[32],viewMonth:[32],hoverDate:[32]},[[4,"click","handleDocClick"]],{selectedDate:[{valueChanged:0}],startDate:[{valueChanged:0}],endDate:[{valueChanged:0}]}]);function l(){"undefined"!=typeof customElements&&["dropi-date-picker","dropi-icon"].forEach((t=>{switch(t){case"dropi-date-picker":customElements.get(e(t))||customElements.define(e(t),s);break;case"dropi-icon":customElements.get(e(t))||o()}}))}l();const c=s,p=l;export{c as DropiDatePicker,p as defineCustomElement}
+import{t as e,p as t,H as r,c as a,h as i}from"./index.js";import{d as n}from"./p-DqAyyLAT.js";const o=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"],s=["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"],d=["Do","Lu","Ma","Mi","Ju","Vi","Sa"],l=t(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiChangeDate=a(this,"dropiChangeDate"),this.dropiClosePanel=a(this,"dropiClosePanel"),this.dropiRangeChange=a(this,"dropiRangeChange"),this.internals=this.attachInternals()}internals;name;selectedDate="";startDate="";endDate="";valueChanged(){this.updateFormValue()}selectionMode="single";minDate="";maxDate="";label=null;placeholder="DD/MM/YYYY";disabled=!1;isInvalid=!1;loading=!1;hideTodayShortcut=!1;open=!1;viewYear=(new Date).getFullYear();viewMonth=(new Date).getMonth();hoverDate="";viewMode="day";activeShortcut=-1;get el(){return this}handleDocClick(e){this.open&&!e.composedPath().includes(this.el)&&(this.open=!1)}dropiChangeDate;dropiClosePanel;dropiRangeChange;componentWillLoad(){this.updateFormValue()}updateFormValue(){this.internals.setFormValue("range"===this.selectionMode?this.startDate&&this.endDate?`${this.startDate},${this.endDate}`:"":this.selectedDate||"")}get displayValue(){return"range"===this.selectionMode?this.startDate&&this.endDate?`${this.startDate} – ${this.endDate}`:this.startDate?this.startDate:"":this.selectedDate}open_(){if(!this.disabled){if(this.selectedDate){const e=new Date(this.selectedDate);this.viewYear=e.getFullYear(),this.viewMonth=e.getMonth()}else if(this.startDate){const e=new Date(this.startDate);this.viewYear=e.getFullYear(),this.viewMonth=e.getMonth()}this.viewMode="day",this.open=!0}}get decadeStart(){return 10*Math.floor(this.viewYear/10)}get navTitle(){return"day"===this.viewMode?`${o[this.viewMonth]}  ${this.viewYear}`:"month"===this.viewMode?""+this.viewYear:`${this.decadeStart}-${this.decadeStart+9}`}cycleView(){"day"===this.viewMode?this.viewMode="month":"month"===this.viewMode&&(this.viewMode="year")}prevNav(){"day"===this.viewMode?0===this.viewMonth?(this.viewMonth=11,this.viewYear--):this.viewMonth--:"month"===this.viewMode?this.viewYear--:this.viewYear=this.decadeStart-10}nextNav(){"day"===this.viewMode?11===this.viewMonth?(this.viewMonth=0,this.viewYear++):this.viewMonth++:"month"===this.viewMode?this.viewYear++:this.viewYear=this.decadeStart+10}selectMonth(e){this.viewMonth=e,this.viewMode="day"}selectYear(e){this.viewYear=e,this.viewMode="month"}get today(){return(new Date).toISOString().slice(0,10)}daysAgo(e){const t=new Date;return t.setDate(t.getDate()-e),t.toISOString().slice(0,10)}get shortcuts(){const e=[{label:"Hoy",start:this.today,end:this.today},{label:"Últimos 7 días",start:this.daysAgo(6),end:this.today},{label:"Últimos 15 días",start:this.daysAgo(14),end:this.today},{label:"Últimos 30 días",start:this.daysAgo(29),end:this.today},{label:"Últimos 90 días",start:this.daysAgo(89),end:this.today}];return this.hideTodayShortcut?e.slice(1):e}selectShortcut(e){const t=this.shortcuts[e];this.activeShortcut=e,"range"===this.selectionMode?(this.startDate=t.start,this.endDate=t.end,this.dropiRangeChange.emit({start:t.start,end:t.end})):(this.selectedDate=t.end,this.dropiChangeDate.emit(t.end)),this.open=!1}toISO(e,t,r){return`${e}-${(t+1+"").padStart(2,"0")}-${(r+"").padStart(2,"0")}`}isDisabled(e){return!!(this.minDate&&e<this.minDate)||!!(this.maxDate&&e>this.maxDate)}isInRange(e){if("range"!==this.selectionMode)return!1;const t=this.startDate,r=this.endDate||this.hoverDate;if(!t||!r)return!1;const[a,i]=t<=r?[t,r]:[r,t];return e>a&&e<i}selectDate(e){if(!this.isDisabled(e))return"range"!==this.selectionMode?(this.selectedDate=e,this.open=!1,void this.dropiChangeDate.emit(e)):void(!this.startDate||this.startDate&&this.endDate?(this.startDate=e,this.endDate=""):(e<this.startDate?(this.endDate=this.startDate,this.startDate=e):this.endDate=e,this.open=!1,this.dropiRangeChange.emit({start:this.startDate,end:this.endDate})))}buildDays(){const e=this.viewYear,t=this.viewMonth,r=new Date(e,t,1).getDay(),a=new Date(e,t+1,0).getDate(),i=new Date(e,t,0).getDate(),n=[];for(let a=r-1;a>=0;a--){const r=i-a;n.push({iso:this.toISO(0===t?e-1:e,0===t?11:t-1,r),day:r,currentMonth:!1})}for(let r=1;r<=a;r++)n.push({iso:this.toISO(e,t,r),day:r,currentMonth:!0});const o=42-n.length;for(let r=1;r<=o;r++)n.push({iso:this.toISO(11===t?e+1:e,11===t?0:t+1,r),day:r,currentMonth:!1});return n}renderDayView(e){const t=this.buildDays();return i("div",{class:"dp-grid"},d.map((e=>i("div",{class:"dp-day-header"},e))),t.map((({iso:t,day:r,currentMonth:a})=>{const n="range"!==this.selectionMode?t===this.selectedDate:t===this.startDate||t===this.endDate,o="range"===this.selectionMode&&t===this.startDate,s="range"===this.selectionMode&&t===this.endDate,d=this.isInRange(t),l=this.isDisabled(t);return i("button",{class:{"dp-cell":!0,"dp-cell--other-month":!a,"dp-cell--today":t===e,"dp-cell--selected":n,"dp-cell--range-start":o,"dp-cell--range-end":s,"dp-cell--in-range":d,"dp-cell--disabled":l},type:"button",disabled:l,onClick:()=>this.selectDate(t),onMouseEnter:()=>{"range"===this.selectionMode&&this.startDate&&!this.endDate&&(this.hoverDate=t)},onMouseLeave:()=>this.hoverDate=""},r)})))}renderMonthView(){const e=(new Date).getMonth(),t=(new Date).getFullYear();return i("div",{class:"dp-month-grid"},s.map(((r,a)=>{const n=a===this.viewMonth;return i("button",{class:{"dp-month-cell":!0,"dp-month-cell--selected":n,"dp-month-cell--current":a===e&&this.viewYear===t&&!n},type:"button",onClick:()=>this.selectMonth(a)},r)})))}renderYearView(){const e=(new Date).getFullYear(),t=this.decadeStart,r=Array.from({length:10},((e,r)=>t+r));return i("div",{class:"dp-year-grid"},r.map((t=>{const r=t===this.viewYear;return i("button",{class:{"dp-year-cell":!0,"dp-year-cell--selected":r,"dp-year-cell--current":t===e&&!r},type:"button",onClick:()=>this.selectYear(t)},t)})))}render(){const e=(new Date).toISOString().slice(0,10);return i("div",{key:"6ae00de99b93a13faba81ac027c292b9624d0336",class:"dp-wrap"},this.label&&i("label",{key:"9282bb57332ebaef9861702d80759d641ea21757",class:"dp-label"},this.label),i("button",{key:"1fe5d5fcd8ce1c0b151381d9c249c401d322f78a",class:{"dp-trigger":!0,"dp-trigger--disabled":this.disabled,"dp-trigger--invalid":this.isInvalid,"dp-trigger--loading":this.loading},onClick:()=>this.open?this.open=!1:this.open_(),disabled:this.disabled||this.loading,type:"button"},i("dropi-icon",{key:"560cf80eb7652543b9000e375b213a3dba91060b",name:"Calendar",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-400"}),i("span",{key:"3bdc45bd4706502af4050475e709c15beebce028",class:{"dp-trigger__value":!0,"dp-trigger__placeholder":!this.displayValue}},this.displayValue||this.placeholder)),this.open&&i("div",{key:"e21053dd38d62ab43c01f337fbbeb8b36e70680c",class:"dp-popup"},i("div",{key:"d6c8fc40ec4bd11bcd5bf3d8b3706c4c62099bbf",class:"dp-calendar"},i("div",{key:"cf8f21d301592077851a44eb588418302240598f",class:"dp-nav"},i("button",{key:"28702d76d499cec07cd69d7bd23f5eb0369d288f",class:"dp-nav__btn",onClick:()=>this.prevNav(),type:"button"},i("dropi-icon",{key:"18b1c6fb2ea5f51b4a4b59592c7d89c5406c6c39",name:"dropdown-left",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"})),i("button",{key:"755274772a90deae38d613da369863aefe95e297",class:"dp-nav__title",onClick:()=>this.cycleView(),type:"button"},"day"===this.viewMode?[i("span",null,o[this.viewMonth]),i("span",null,this.viewYear)]:i("span",null,this.navTitle)),i("button",{key:"6442690df1e434f9fb0128327f8f07c3cecbed4c",class:"dp-nav__btn",onClick:()=>this.nextNav(),type:"button"},i("dropi-icon",{key:"00525ae2cbe5cc8a881d165141de10ce3d72e439",name:"dropdown-right",iconWidth:"16px",iconHeight:"16px",color:"Gray-Gray-600"}))),"day"===this.viewMode&&this.renderDayView(e),"month"===this.viewMode&&this.renderMonthView(),"year"===this.viewMode&&this.renderYearView()),"range"===this.selectionMode&&[i("div",{key:"688df97b843c3c3342fc301d6c6c74ec88921d68",class:"dp-divider"}),i("div",{key:"2c75f7b004812ee1eb18bbc349f03ab55623cd9f",class:"dp-shortcuts"},this.shortcuts.map(((e,t)=>i("button",{key:t,class:{"shortcut-btn":!0,"shortcut-btn--active":this.activeShortcut===t},onClick:()=>this.selectShortcut(t),type:"button"},e.label))))]))}static get formAssociated(){return!0}static get watchers(){return{selectedDate:[{valueChanged:0}],startDate:[{valueChanged:0}],endDate:[{valueChanged:0}]}}static get style(){return':host{display:block;width:100%;position:relative}*,*::before,*::after{box-sizing:border-box}.dp-label{display:block;font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:8px}.dp-trigger{width:100%;height:40px;display:flex;align-items:center;gap:var(--Size-2, 8px);padding:0 var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);cursor:pointer;font-family:inherit;transition:border-color 0.2s}.dp-trigger:hover:not(:disabled){border-color:var(--Info-Info-500, #50a5f1)}.dp-trigger--disabled{background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed;opacity:0.6}.dp-trigger__value{flex:1;text-align:left;font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-700, #32394d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dp-trigger__placeholder{color:var(--Gray-Gray-400, #858ea6)}.dp-popup{position:absolute;top:calc(100% + 8px);left:0;display:flex;flex-direction:row;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-3, 12px);box-shadow:0 4px 16px rgba(0,0,0,0.08);z-index:300;overflow:hidden}.dp-calendar{padding:var(--Size-4, 16px);width:300px;flex-shrink:0}.dp-divider{width:1px;background:var(--Gray-Gray-100, #e6eaf2);flex-shrink:0}.dp-shortcuts{padding:var(--Size-4, 16px) var(--Size-3, 12px);display:flex;flex-direction:column;gap:2px;min-width:140px}.shortcut-btn{background:transparent;border:1px solid transparent;padding:6px 10px;font-size:13px;font-family:inherit;color:var(--Gray-Gray-700, #32394d);cursor:pointer;text-align:left;border-radius:6px;transition:background 0.1s ease;font-weight:var(--font-weight-regular);white-space:nowrap}.shortcut-btn:hover{background:var(--Gray-Gray-50, #f5f6f8)}.shortcut-btn--active{border-color:var(--Gray-Gray-200, #c3c9d9);font-weight:var(--font-weight-semibold);background:var(--Gray-Gray-50, #f5f6f8)}.dp-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--Size-4, 16px);padding-bottom:var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.dp-nav__btn{background:none;border:none;padding:0;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;width:32px;height:32px;transition:background 0.15s}.dp-nav__btn:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-nav__title{background:none;border:none;font-size:var(--font-size-s, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d);display:flex;gap:8px;cursor:pointer;padding:4px 8px;border-radius:var(--Border-1, 4px);transition:background 0.15s;font-family:inherit}.dp-nav__title:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-grid{display:grid;grid-template-columns:repeat(7, 1fr);row-gap:8px;column-gap:4px}.dp-day-header{font-size:var(--font-size-s, 14px);color:var(--Gray-Gray-700, #32394d);text-align:center;padding:8px 0;font-weight:var(--font-weight-bold, 700)}.dp-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xs, 12px);font-family:inherit;border:none;cursor:pointer;background:transparent;color:var(--Gray-Gray-600, #475066);width:100%;position:relative;z-index:1;padding:0}.dp-cell::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;transition:all 0.2s;z-index:-1;background:transparent}.dp-cell::before{content:"";position:absolute;top:0;bottom:0;z-index:-2;border-radius:0;background:transparent}.dp-cell:hover:not(:disabled)::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--other-month{color:var(--Gray-Gray-300, #a0a9c0)}.dp-cell--today{font-weight:var(--font-weight-bold, 700)}.dp-cell--today::after{background:var(--Gray-Gray-100, #e6eaf2)}.dp-cell--selected{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--selected::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--range-start,.dp-cell--range-end{color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.dp-cell--range-start::after,.dp-cell--range-end::after{background:var(--Orange-orange-500, #f49a3d) !important}.dp-cell--in-range{color:var(--Orange-orange-500, #f49a3d);font-weight:var(--font-weight-bold, 700)}.dp-cell--in-range::before{left:-2px;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start::before{left:50%;right:-2px;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-end::before{left:-2px;right:50%;background:var(--Orange-orange-50, #fef5ec)}.dp-cell--range-start.dp-cell--range-end::before{background:transparent}.dp-cell--disabled{opacity:0.35;cursor:not-allowed}.dp-month-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}.dp-month-cell{padding:10px 4px;font-size:var(--font-size-s, 14px);font-family:inherit;font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-700, #32394d);background:transparent;border:1px solid transparent;border-radius:var(--Border-2, 8px);cursor:pointer;text-align:center;transition:background 0.15s, border-color 0.15s}.dp-month-cell:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-month-cell--selected{border-color:var(--Info-Info-500, #50a5f1);font-weight:var(--font-weight-semibold, 600)}.dp-month-cell--current{background:var(--Gray-Gray-100, #e6eaf2)}.dp-year-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:8px}.dp-year-cell{padding:10px 4px;font-size:var(--font-size-s, 14px);font-family:inherit;font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-700, #32394d);background:transparent;border:1px solid transparent;border-radius:var(--Border-2, 8px);cursor:pointer;text-align:center;transition:background 0.15s, border-color 0.15s}.dp-year-cell:hover{background:var(--Gray-Gray-50, #f7f8fa)}.dp-year-cell--selected{border-color:var(--Info-Info-500, #50a5f1);font-weight:var(--font-weight-semibold, 600)}.dp-year-cell--current{background:var(--Gray-Gray-100, #e6eaf2)}'}},[577,"dropi-date-picker",{name:[513],selectedDate:[1025,"selected-date"],startDate:[1025,"start-date"],endDate:[1025,"end-date"],selectionMode:[1,"selection-mode"],minDate:[1,"min-date"],maxDate:[1,"max-date"],label:[1],placeholder:[1],disabled:[4],isInvalid:[4,"is-invalid"],loading:[4],hideTodayShortcut:[4,"hide-today-shortcut"],open:[32],viewYear:[32],viewMonth:[32],hoverDate:[32],viewMode:[32],activeShortcut:[32]},[[4,"click","handleDocClick"]],{selectedDate:[{valueChanged:0}],startDate:[{valueChanged:0}],endDate:[{valueChanged:0}]}]);function c(){"undefined"!=typeof customElements&&["dropi-date-picker","dropi-icon"].forEach((t=>{switch(t){case"dropi-date-picker":customElements.get(e(t))||customElements.define(e(t),l);break;case"dropi-icon":customElements.get(e(t))||n()}}))}c();const h=l,p=c;export{h as DropiDatePicker,p as defineCustomElement}

package/dist/components/dropi-drawer.js

@@ -1 +1 @@
-import{t as e,p as r,H as a,c as t,h as o}from"./index.js";import{d}from"./p-DqAyyLAT.js";const s=r(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiClose=t(this,"dropiClose")}drawerTitle="";drawerIsOpen=!1;open=!1;position="right";size="";width="400px";height="50vh";headless=!1;closeOnBackdrop=!0;dropiClose;openChanged(e){this.open=e,this.drawerIsOpen=e,"undefined"!=typeof document&&(e?document.body.classList.add("dropi-modal-open"):document.body.classList.remove("dropi-modal-open"))}componentWillLoad(){this.drawerIsOpen&&(this.open=!0),this.open&&(this.drawerIsOpen=!0)}close(){this.open=!1,this.dropiClose.emit()}render(){const e=this.size?"drawer-panel--size-"+this.size:"",r={};return this.size||("left"===this.position||"right"===this.position?r.width=this.width:r.height=this.height),o("div",{key:"e5138752d1821a27ec3b0396cdc3d09bc15f7c73",class:{"drawer-host":!0,"drawer-host--open":this.open}},o("div",{key:"ca7f2dff57eee0cc1d5a71486c8ce765b27c7307",class:"drawer-backdrop",onClick:()=>{this.closeOnBackdrop&&this.close()}}),o("div",{key:"985b7c295391fa2326ee5880bed829910c56d082",class:`drawer-panel drawer-panel--${this.position}${e?" "+e:""}`,style:r,role:"dialog","aria-modal":"true"},o("div",{key:"be62a0009ab8c829cd20643552a66d17b8e877cf",class:{"drawer-header":!0,"drawer-header--headless":this.headless}},o("h3",{key:"e6f6a03c224c83fe8de9a2895a07bf93b9dbdea4",class:"drawer-header__title"},this.drawerTitle),o("button",{key:"66c251c8d8da1e0a0036f9bdeaeb6f09514dbfd4",class:"drawer-header__close",onClick:()=>this.close(),"aria-label":"Cerrar"},o("dropi-icon",{key:"150a59e552636ec623d31926fc419ec36443cc22",name:"Close-small",iconWidth:"32px",iconHeight:"32px",color:"Gray-Gray-400"}))),o("div",{key:"6982100fcf4e5ce4193bbff79baea9c557ad0722",class:"drawer-body"},o("slot",{key:"6ae61a0451322969ddb4684b77eb5851b942dd9a"})),o("div",{key:"5d4df79ea4044d86edd51331a6c1cdd3a43bfc5d",class:"drawer-footer"},o("slot",{key:"49de1183444123c36076e20e882952b9d802a567",name:"footer"}))))}static get watchers(){return{open:[{openChanged:0}],drawerIsOpen:[{openChanged:0}]}}static get style(){return":host{display:contents;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.drawer-host{position:fixed;inset:0;z-index:var(--dropi-z-index-drawer, 9999);pointer-events:none;visibility:hidden}.drawer-host--open{pointer-events:all;visibility:visible}.drawer-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:opacity 0.25s}.drawer-host--open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;background:var(--Neutral-White, #ffffff);display:flex;flex-direction:column;transition:transform 0.25s ease;overflow:hidden;max-width:100%;min-width:auto}.drawer-panel--right{top:0;right:0;bottom:0;transform:translateX(100%);box-shadow:-4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--right{transform:translateX(0)}.drawer-panel--left{top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--left{transform:translateX(0)}.drawer-panel--bottom{bottom:0;left:0;right:0;transform:translateY(100%);border-radius:var(--Border-2, 8px) var(--Border-2, 8px) 0 0;box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--bottom{transform:translateY(0)}.drawer-panel--top{top:0;left:0;right:0;transform:translateY(-100%);border-radius:0 0 var(--Border-2, 8px) var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--top{transform:translateY(0)}.drawer-panel--size-m{width:550px}.drawer-panel--size-l{width:1137px}.drawer-panel--size-xl{width:1280px}.drawer-panel--size-xxl{width:1330px}.drawer-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.drawer-header--headless{display:none}.drawer-header__title{color:var(--Gray-700, #32394d);font-family:Inter, sans-serif;font-size:24px;font-style:normal;font-weight:700;line-height:110%;margin:0}.drawer-header__close{width:var(--Size-6, 32px);height:var(--Size-6, 32px);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Gray-400, #858ea6);border-radius:var(--Border-1, 4px);transition:background 0.15s;flex-shrink:0}.drawer-header__close:hover{background:var(--Gray-Gray-50, #f7f8fa)}.drawer-body{flex:1;overflow-y:auto;padding:var(--Size-4, 16px);display:flex;flex-direction:column}.drawer-footer{display:none}"}},[769,"dropi-drawer",{drawerTitle:[1,"drawer-title"],drawerIsOpen:[1032,"drawer-is-open"],open:[1032],position:[1],size:[1],width:[1],height:[1],headless:[4],closeOnBackdrop:[4,"close-on-backdrop"]},void 0,{open:[{openChanged:0}],drawerIsOpen:[{openChanged:0}]}]);function i(){"undefined"!=typeof customElements&&["dropi-drawer","dropi-icon"].forEach((r=>{switch(r){case"dropi-drawer":customElements.get(e(r))||customElements.define(e(r),s);break;case"dropi-icon":customElements.get(e(r))||d()}}))}i();const n=s,l=i;export{n as DropiDrawer,l as defineCustomElement}
+import{t as e,p as r,H as a,c as t,h as o}from"./index.js";import{d}from"./p-DqAyyLAT.js";const s=r(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.dropiClose=t(this,"dropiClose")}drawerTitle="";drawerIsOpen=!1;open=!1;position="right";size="";width="400px";height="50vh";headless=!1;closeOnBackdrop=!0;dropiClose;openChanged(e){this.open=e,this.drawerIsOpen=e,"undefined"!=typeof document&&(e?document.body.classList.add("dropi-modal-open"):document.body.classList.remove("dropi-modal-open"))}componentWillLoad(){this.drawerIsOpen&&(this.open=!0),this.open&&(this.drawerIsOpen=!0)}close(){this.open=!1,this.dropiClose.emit()}render(){const e=this.size?"drawer-panel--size-"+this.size:"",r={};return this.size||("left"===this.position||"right"===this.position?r.width=this.width:r.height=this.height),o("div",{key:"e173a207447ff88cba0f838844ae629a367a6c98",class:{"drawer-host":!0,"drawer-host--open":this.open}},o("div",{key:"1a4b3990d1a4641abcdd53b535b84f99991d1a90",class:"drawer-backdrop",onClick:()=>{this.closeOnBackdrop&&this.close()}}),o("div",{key:"eb3042e7506a6d64f6461b5bb7f0a93048299d50",class:`drawer-panel drawer-panel--${this.position}${e?" "+e:""}`,style:r,role:"dialog","aria-modal":"true"},o("div",{key:"ce4468ae512bd70596313dbaa8a738666ff7ef5d",class:{"drawer-header":!0,"drawer-header--headless":this.headless}},o("h3",{key:"30e6af93a4e697590a8dc79748ec4e52f31f42c7",class:"drawer-header__title"},this.drawerTitle),o("button",{key:"0a817e6236e51112812302ff320c15565071f3bc",class:"drawer-header__close",onClick:()=>this.close(),"aria-label":"Cerrar"},o("dropi-icon",{key:"c540300a8c5486f6957f0cb4c5e55a70daf17b39",name:"Close-small",iconWidth:"32px",iconHeight:"32px",color:"Gray-Gray-400"}))),o("div",{key:"0b63274c3a8a810c06b1aec621209178499dae86",class:"drawer-body"},o("slot",{key:"26c6a31c6c8bd9ae409880d85748ed44f01941d0"})),o("div",{key:"be3dba11d475e95391e039e791f98d11c1625b5e",class:"drawer-footer"},o("slot",{key:"e2e42a0543dd9a8fb6278711d948816dda1969a3",name:"footer"}))))}static get watchers(){return{open:[{openChanged:0}],drawerIsOpen:[{openChanged:0}]}}static get style(){return":host{display:contents;font-family:'Inter', sans-serif}*,*::before,*::after{box-sizing:border-box}.drawer-host{position:fixed;inset:0;z-index:var(--dropi-z-index-drawer, 9999);pointer-events:none;visibility:hidden}.drawer-host--open{pointer-events:all;visibility:visible}.drawer-backdrop{position:absolute;inset:0;background:rgba(0, 0, 0, 0.5);opacity:0;transition:opacity 0.25s}.drawer-host--open .drawer-backdrop{opacity:1}.drawer-panel{position:absolute;background:var(--Neutral-White, #ffffff);display:flex;flex-direction:column;transition:transform 0.25s ease;overflow:hidden;max-width:100%;min-width:auto}.drawer-panel--right{top:0;right:0;bottom:0;transform:translateX(100%);box-shadow:-4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--right{transform:translateX(0)}.drawer-panel--left{top:0;left:0;bottom:0;transform:translateX(-100%);box-shadow:4px 0 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--left{transform:translateX(0)}.drawer-panel--bottom{bottom:0;left:0;right:0;transform:translateY(100%);border-radius:var(--Border-2, 8px) var(--Border-2, 8px) 0 0;box-shadow:0 -4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--bottom{transform:translateY(0)}.drawer-panel--top{top:0;left:0;right:0;transform:translateY(-100%);border-radius:0 0 var(--Border-2, 8px) var(--Border-2, 8px);box-shadow:0 4px 24px rgba(0, 0, 0, 0.12)}.drawer-host--open .drawer-panel--top{transform:translateY(0)}.drawer-panel--size-m{width:550px}.drawer-panel--size-l{width:1137px}.drawer-panel--size-xl{width:1280px}.drawer-panel--size-xxl{width:1330px}.drawer-header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:var(--Size-4, 16px) var(--Size-4, 16px) var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);flex-shrink:0}.drawer-header--headless{display:none}.drawer-header__title{color:var(--Gray-700, #32394d);font-family:Inter, sans-serif;font-size:24px;font-style:normal;font-weight:700;line-height:110%;margin:0}.drawer-header__close{width:var(--Size-6, 32px);height:var(--Size-6, 32px);background:none;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--Gray-400, #858ea6);border-radius:var(--Border-1, 4px);transition:background 0.15s;flex-shrink:0}.drawer-header__close:hover{background:var(--Gray-Gray-50, #f7f8fa)}.drawer-body{flex:1;overflow-y:auto;padding:var(--Size-4, 16px);display:flex;flex-direction:column}.drawer-footer{display:none}"}},[769,"dropi-drawer",{drawerTitle:[1,"drawer-title"],drawerIsOpen:[1032,"drawer-is-open"],open:[1032],position:[1],size:[1],width:[1],height:[1],headless:[4],closeOnBackdrop:[4,"close-on-backdrop"]},void 0,{open:[{openChanged:0}],drawerIsOpen:[{openChanged:0}]}]);function i(){"undefined"!=typeof customElements&&["dropi-drawer","dropi-icon"].forEach((r=>{switch(r){case"dropi-drawer":customElements.get(e(r))||customElements.define(e(r),s);break;case"dropi-icon":customElements.get(e(r))||d()}}))}i();const n=s,l=i;export{n as DropiDrawer,l as defineCustomElement}