@dropi/ui 0.1.37 → 0.1.41

package/dist/dropi-ui/dropi-country-selector.entry.js

@@ -0,0 +1,198 @@
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
+
+const dropiCountrySelectorCss = () => `:host{display:block;width:100%;text-align:left}*,*::before,*::after{box-sizing:border-box}.custom-select{position:relative;width:100%}label{display:block;font-size:var(--font-size-xs, 11px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066);margin-bottom:6px}.required{color:var(--Error-Error-500, #ef4444);margin-left:2px}.select-button{width:100%;height:44px;padding:0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 14px);font-family:inherit;display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer;transition:border-color 0.15s ease}.select-button:focus{outline:none;border-color:var(--Info-Info-500, #3b82f6)}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.select-button.select-completed{color:var(--Gray-Gray-700, #32394d)}.select-button.select-invalid{border-color:var(--Error-Error-500, #ef4444)}.selected-content{display:flex;align-items:center;gap:8px;overflow:hidden;flex:1}.selected-option{display:flex;align-items:center;gap:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px)}.placeholder-text{color:var(--Gray-Gray-400, #858ea6);font-size:var(--font-size-s, 14px)}.flag-img{border-radius:var(--Border-1, 4px);width:24px;height:24px;object-fit:cover;flex-shrink:0}.select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--Neutral-White, #ffffff);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);z-index:200;list-style:none;padding:0;margin:0;box-shadow:0 8px 24px rgba(0, 0, 0, 0.10);overflow:hidden;transition:max-height 0.2s ease, opacity 0.2s ease}.select-dropdown.expanded{max-height:300px;opacity:1;overflow-y:auto}.select-dropdown.collapsed{max-height:0;opacity:0;pointer-events:none;border-color:transparent;box-shadow:none}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-track{background:transparent}.select-dropdown::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:4px}.select-dropdown::-webkit-scrollbar-thumb:hover{background:var(--Gray-Gray-300, #a3abbf)}.search-li{padding:10px 12px;position:sticky;top:0;background:var(--Neutral-White, #ffffff);z-index:1;border-bottom:1px solid var(--Gray-Gray-100, #e6eaf2)}.search-field{position:relative;display:flex;align-items:center}.country-search{width:100%;height:36px;padding:0 36px 0 12px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);outline:none;font-size:var(--font-size-s, 14px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Gray-Gray-50, #f7f8fa);transition:border-color 0.15s, background 0.15s}.country-search:focus{border-color:var(--Info-Info-500, #50a5f1);background:var(--Neutral-White, #ffffff)}.country-search::placeholder{color:var(--Gray-Gray-400, #858ea6)}.search-icon{position:absolute;right:10px;display:flex;align-items:center;pointer-events:none}.option{width:100%;min-height:44px;padding:10px 16px;border:none;background:transparent;text-align:left;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 14px);font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.1s ease;white-space:nowrap}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}`;
+
+const COUNTRIES = [
+    { name: 'Afghanistan', code: 'AF', codePhone: '93' },
+    { name: 'Albania', code: 'AL', codePhone: '355' },
+    { name: 'Algeria', code: 'DZ', codePhone: '213' },
+    { name: 'Argentina', code: 'AR', codePhone: '54' },
+    { name: 'Australia', code: 'AU', codePhone: '61' },
+    { name: 'Austria', code: 'AT', codePhone: '43' },
+    { name: 'Azerbaijan', code: 'AZ', codePhone: '994' },
+    { name: 'Bahamas', code: 'BS', codePhone: '1242' },
+    { name: 'Bahrain', code: 'BH', codePhone: '973' },
+    { name: 'Bangladesh', code: 'BD', codePhone: '880' },
+    { name: 'Belgium', code: 'BE', codePhone: '32' },
+    { name: 'Bolivia', code: 'BO', codePhone: '591' },
+    { name: 'Brazil', code: 'BR', codePhone: '55' },
+    { name: 'Cambodia', code: 'KH', codePhone: '855' },
+    { name: 'Canada', code: 'CA', codePhone: '1' },
+    { name: 'Chile', code: 'CL', codePhone: '56' },
+    { name: 'China', code: 'CN', codePhone: '86' },
+    { name: 'Colombia', code: 'CO', codePhone: '57' },
+    { name: 'Costa Rica', code: 'CR', codePhone: '506' },
+    { name: 'Cuba', code: 'CU', codePhone: '53' },
+    { name: 'Czech Republic', code: 'CZ', codePhone: '420' },
+    { name: 'Denmark', code: 'DK', codePhone: '45' },
+    { name: 'Dominican Republic', code: 'DO', codePhone: '1' },
+    { name: 'Ecuador', code: 'EC', codePhone: '593' },
+    { name: 'Egypt', code: 'EG', codePhone: '20' },
+    { name: 'El Salvador', code: 'SV', codePhone: '503' },
+    { name: 'Estonia', code: 'EE', codePhone: '372' },
+    { name: 'Ethiopia', code: 'ET', codePhone: '251' },
+    { name: 'Finland', code: 'FI', codePhone: '358' },
+    { name: 'France', code: 'FR', codePhone: '33' },
+    { name: 'Germany', code: 'DE', codePhone: '49' },
+    { name: 'Ghana', code: 'GH', codePhone: '233' },
+    { name: 'Greece', code: 'GR', codePhone: '30' },
+    { name: 'Guatemala', code: 'GT', codePhone: '502' },
+    { name: 'Honduras', code: 'HN', codePhone: '504' },
+    { name: 'Hong Kong', code: 'HK', codePhone: '852' },
+    { name: 'Hungary', code: 'HU', codePhone: '36' },
+    { name: 'India', code: 'IN', codePhone: '91' },
+    { name: 'Indonesia', code: 'ID', codePhone: '62' },
+    { name: 'Iran, Islamic Republic Of', code: 'IR', codePhone: '98' },
+    { name: 'Iraq', code: 'IQ', codePhone: '964' },
+    { name: 'Ireland', code: 'IE', codePhone: '353' },
+    { name: 'Israel', code: 'IL', codePhone: '972' },
+    { name: 'Italy', code: 'IT', codePhone: '39' },
+    { name: 'Jamaica', code: 'JM', codePhone: '1876' },
+    { name: 'Japan', code: 'JP', codePhone: '81' },
+    { name: 'Jordan', code: 'JO', codePhone: '962' },
+    { name: 'Kazakhstan', code: 'KZ', codePhone: '7' },
+    { name: 'Kenya', code: 'KE', codePhone: '254' },
+    { name: 'Kuwait', code: 'KW', codePhone: '965' },
+    { name: 'Lebanon', code: 'LB', codePhone: '961' },
+    { name: 'Malaysia', code: 'MY', codePhone: '60' },
+    { name: 'Mexico', code: 'MX', codePhone: '52' },
+    { name: 'Morocco', code: 'MA', codePhone: '212' },
+    { name: 'Netherlands', code: 'NL', codePhone: '31' },
+    { name: 'New Zealand', code: 'NZ', codePhone: '64' },
+    { name: 'Nicaragua', code: 'NI', codePhone: '505' },
+    { name: 'Nigeria', code: 'NG', codePhone: '234' },
+    { name: 'Norway', code: 'NO', codePhone: '47' },
+    { name: 'Pakistan', code: 'PK', codePhone: '92' },
+    { name: 'Panama', code: 'PA', codePhone: '507' },
+    { name: 'Paraguay', code: 'PY', codePhone: '595' },
+    { name: 'Peru', code: 'PE', codePhone: '51' },
+    { name: 'Philippines', code: 'PH', codePhone: '63' },
+    { name: 'Poland', code: 'PL', codePhone: '48' },
+    { name: 'Portugal', code: 'PT', codePhone: '351' },
+    { name: 'Qatar', code: 'QA', codePhone: '974' },
+    { name: 'Romania', code: 'RO', codePhone: '40' },
+    { name: 'Russian Federation', code: 'RU', codePhone: '7' },
+    { name: 'Saudi Arabia', code: 'SA', codePhone: '966' },
+    { name: 'Singapore', code: 'SG', codePhone: '65' },
+    { name: 'South Africa', code: 'ZA', codePhone: '27' },
+    { name: 'Spain', code: 'ES', codePhone: '34' },
+    { name: 'Sri Lanka', code: 'LK', codePhone: '94' },
+    { name: 'Sweden', code: 'SE', codePhone: '46' },
+    { name: 'Switzerland', code: 'CH', codePhone: '41' },
+    { name: 'Taiwan, Province of China', code: 'TW', codePhone: '886' },
+    { name: 'Thailand', code: 'TH', codePhone: '66' },
+    { name: 'Tunisia', code: 'TN', codePhone: '216' },
+    { name: 'Turkey', code: 'TR', codePhone: '90' },
+    { name: 'Uganda', code: 'UG', codePhone: '256' },
+    { name: 'Ukraine', code: 'UA', codePhone: '380' },
+    { name: 'United Arab Emirates', code: 'AE', codePhone: '971' },
+    { name: 'United Kingdom', code: 'GB', codePhone: '44' },
+    { name: 'United States', code: 'US', codePhone: '1' },
+    { name: 'Uruguay', code: 'UY', codePhone: '598' },
+    { name: 'Venezuela', code: 'VE', codePhone: '58' },
+    { name: 'Viet Nam', code: 'VN', codePhone: '84' },
+    { name: 'Zimbabwe', code: 'ZW', codePhone: '263' },
+];
+const DropiCountrySelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onChangeSelect = createEvent(this, "onChangeSelect", 7);
+    }
+    /** Label above the select */
+    label = '';
+    /** Placeholder when nothing is selected */
+    placeholder = 'Selecciona un país';
+    /** Pre-selected country code (ISO 3166-1 alpha-2) */
+    currentSelection = '';
+    /** Whether the selector is disabled */
+    disabled = false;
+    /** Show asterisk for required field */
+    showObligatory = false;
+    /** Show error border */
+    hasError = false;
+    /** Helper text below the select */
+    textHelper = '';
+    /** Search term for filtering (matches Angular `searchTerm`) */
+    searchTerm = '';
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties = null;
+    /** Emitted when a country is selected. Detail is the CountryItem. */
+    onChangeSelect;
+    isOpen = false;
+    selected = null;
+    get el() { return getElement(this); }
+    handleDocClick(e) {
+        if (this.isOpen && !e.composedPath().includes(this.el)) {
+            this.isOpen = false;
+        }
+    }
+    searchInputRef;
+    currentSelectionChanged(val) {
+        this.selected = COUNTRIES.find(c => c.code === val) || null;
+    }
+    selectPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.showObligatory !== undefined)
+            this.showObligatory = val.showObligatory;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.hasError !== undefined)
+            this.hasError = val.hasError;
+    }
+    componentWillLoad() {
+        if (this.selectProperties)
+            this.selectPropertiesChanged(this.selectProperties);
+        if (this.currentSelection)
+            this.currentSelectionChanged(this.currentSelection);
+    }
+    get filtered() {
+        if (!this.searchTerm)
+            return COUNTRIES;
+        const t = this.searchTerm.toLowerCase();
+        return COUNTRIES.filter(c => c.name.toLowerCase().includes(t));
+    }
+    open() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            setTimeout(() => this.searchInputRef?.focus(), 50);
+        }
+    }
+    select(country) {
+        this.selected = country;
+        this.isOpen = false;
+        this.searchTerm = '';
+        this.currentSelection = country.code;
+        this.onChangeSelect.emit(country);
+    }
+    render() {
+        return (h("div", { key: '78179f7b5e30c4eb7d5345431f476f625a60534a', class: "custom-select" }, this.label && (h("label", { key: '13566e714a55c3820facffab298a97fc37c97133' }, this.label, this.showObligatory && h("span", { key: '7772ddd762bd50da043ed030b5a3442e10de47b0', class: "required" }, "*"))), h("button", { key: '649759c1d921318a48fd1abf8e71977d52b6ae2d', type: "button", class: {
+                'select-button': true,
+                'select-completed': !!this.selected,
+                'select-invalid': this.hasError,
+            }, disabled: this.disabled, onClick: () => this.open() }, h("div", { key: '79df14d64f598d312a1cd82f294edf8aa14ed32e', class: "selected-content" }, this.selected ? (h("span", { class: "selected-option" }, h("img", { class: "flag-img", src: `https://flagsapi.com/${this.selected.code}/shiny/24.png`, alt: this.selected.name }), this.selected.name)) : (h("span", { class: "placeholder-text" }, this.placeholder))), h("dropi-icon", { key: 'dc74219468e838cb5cf06a5ab5036809f84c8f44', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', iconWidth: "20px", iconHeight: "20px", color: "Gray-Gray-500" })), h("ul", { key: 'ef8ce166ba747d7973b09a3c0183629d42e344d9', class: `select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}` }, h("li", { key: '04d0b6b0dc3fb431ad606c0df115d4966f3b5a24', class: "search-li" }, h("div", { key: '735a83924982308b4ec92eb19f09c449717fa05d', class: "search-field" }, h("input", { key: '3d6a0db7489e59e310bf50731b5f48ae3a244fe3', ref: (el) => { this.searchInputRef = el; }, type: "text", class: "country-search", placeholder: "Buscar pa\u00EDs...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } }), h("span", { key: '00bdb2ddd3f67929246f89faed2a2ef2ab169860', class: "search-icon" }, h("dropi-icon", { key: 'bffe43141d5de99b143751c4a80fd972ba8b274c', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" })))), this.filtered.map(country => (h("li", { key: country.code }, h("button", { class: "option", type: "button", onClick: () => this.select(country) }, h("img", { class: "flag-img", src: `https://flagsapi.com/${country.code}/shiny/24.png`, alt: country.name }), country.name))))), this.textHelper && (h("div", { key: '32baa238875d15f41d1b308fc7adb418c6acc2b1', class: { 'select-helper': true, 'select-helper-error': this.hasError } }, this.hasError && h("dropi-icon", { key: 'bfcfecc740f2cd9044ba2e1d2188ea2a9a208836', name: "Warning-circle", iconWidth: "12px", iconHeight: "12px", color: "Error-Error-500" }), h("span", { key: 'd1ced64bb98903ce46e692ddf008f885edf3162b' }, this.textHelper)))));
+    }
+    static get watchers() { return {
+        "currentSelection": [{
+                "currentSelectionChanged": 0
+            }],
+        "selectProperties": [{
+                "selectPropertiesChanged": 0
+            }]
+    }; }
+};
+DropiCountrySelector.style = dropiCountrySelectorCss();
+
+export { DropiCountrySelector as dropi_country_selector };
+//# sourceMappingURL=dropi-country-selector.entry.esm.js.map
+
+//# sourceMappingURL=dropi-country-selector.entry.js.map

package/dist/dropi-ui/dropi-country-selector.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-country-selector.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-country-selector/dropi-country-selector.css?tag=dropi-country-selector&encapsulation=shadow","src/components/dropi-country-selector/dropi-country-selector.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  text-align: left;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.custom-select {\n  position: relative;\n  width: 100%;\n}\n\n/* ── Label ───────────────────────────────────────────────────────── */\nlabel {\n  display: block;\n  font-size: var(--font-size-xs, 11px);\n  font-weight: var(--font-weight-regular, 400);\n  color: var(--Gray-Gray-600, #475066);\n  margin-bottom: 6px;\n}\n\n.required {\n  color: var(--Error-Error-500, #ef4444);\n  margin-left: 2px;\n}\n\n/* ── Trigger button ──────────────────────────────────────────────── */\n.select-button {\n  width: 100%;\n  height: 44px;\n  padding: 0 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-500, #69738c);\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  text-align: left;\n  cursor: pointer;\n  transition: border-color 0.15s ease;\n}\n\n.select-button:focus {\n  outline: none;\n  border-color: var(--Info-Info-500, #3b82f6);\n}\n\n.select-button:disabled {\n  border-color: var(--Gray-Gray-200, #c3c9d9);\n  color: var(--Gray-Gray-400, #858ea6);\n  background: var(--Gray-Gray-50, #f7f8fa);\n  cursor: not-allowed;\n}\n\n.select-button.select-completed {\n  color: var(--Gray-Gray-700, #32394d);\n}\n\n.select-button.select-invalid {\n  border-color: var(--Error-Error-500, #ef4444);\n}\n\n.selected-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n  flex: 1;\n}\n\n.selected-option {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 14px);\n}\n\n.placeholder-text {\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-s, 14px);\n}\n\n/* ── Flag ────────────────────────────────────────────────────────── */\n.flag-img {\n  border-radius: var(--Border-1, 4px);\n  width: 24px;\n  height: 24px;\n  object-fit: cover;\n  flex-shrink: 0;\n}\n\n/* ── Dropdown ────────────────────────────────────────────────────── */\n.select-dropdown {\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  background: var(--Neutral-White, #ffffff);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  z-index: 200;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);\n  overflow: hidden;\n  transition: max-height 0.2s ease, opacity 0.2s ease;\n}\n\n.select-dropdown.expanded {\n  max-height: 300px;\n  opacity: 1;\n  overflow-y: auto;\n}\n\n.select-dropdown.collapsed {\n  max-height: 0;\n  opacity: 0;\n  pointer-events: none;\n  border-color: transparent;\n  box-shadow: none;\n}\n\n/* Scrollbar — siempre claro, nunca negro */\n.select-dropdown::-webkit-scrollbar { width: 6px; }\n.select-dropdown::-webkit-scrollbar-track { background: transparent; }\n.select-dropdown::-webkit-scrollbar-thumb {\n  background: var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 4px;\n}\n.select-dropdown::-webkit-scrollbar-thumb:hover {\n  background: var(--Gray-Gray-300, #a3abbf);\n}\n\n/* ── Search ──────────────────────────────────────────────────────── */\n.search-li {\n  padding: 10px 12px;\n  position: sticky;\n  top: 0;\n  background: var(--Neutral-White, #ffffff);\n  z-index: 1;\n  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);\n}\n\n.search-field {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n\n.country-search {\n  width: 100%;\n  height: 36px;\n  padding: 0 36px 0 12px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  outline: none;\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  background: var(--Gray-Gray-50, #f7f8fa);\n  transition: border-color 0.15s, background 0.15s;\n}\n\n.country-search:focus {\n  border-color: var(--Info-Info-500, #50a5f1);\n  background: var(--Neutral-White, #ffffff);\n}\n\n.country-search::placeholder {\n  color: var(--Gray-Gray-400, #858ea6);\n}\n\n.search-icon {\n  position: absolute;\n  right: 10px;\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n\n/* ── Options ─────────────────────────────────────────────────────── */\n.option {\n  width: 100%;\n  min-height: 44px;\n  padding: 10px 16px;\n  border: none;\n  background: transparent;\n  text-align: left;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 14px);\n  font-family: inherit;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  transition: background 0.1s ease;\n  white-space: nowrap;\n}\n\n.option:hover {\n  background: var(--Gray-Gray-50, #f7f8fa);\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h, Element, Listen } from '@stencil/core';\n\nexport interface CountryItem {\n  name: string;\n  code: string;\n  codePhone: string;\n}\n\nconst COUNTRIES: CountryItem[] = [\n  { name: 'Afghanistan', code: 'AF', codePhone: '93' },\n  { name: 'Albania', code: 'AL', codePhone: '355' },\n  { name: 'Algeria', code: 'DZ', codePhone: '213' },\n  { name: 'Argentina', code: 'AR', codePhone: '54' },\n  { name: 'Australia', code: 'AU', codePhone: '61' },\n  { name: 'Austria', code: 'AT', codePhone: '43' },\n  { name: 'Azerbaijan', code: 'AZ', codePhone: '994' },\n  { name: 'Bahamas', code: 'BS', codePhone: '1242' },\n  { name: 'Bahrain', code: 'BH', codePhone: '973' },\n  { name: 'Bangladesh', code: 'BD', codePhone: '880' },\n  { name: 'Belgium', code: 'BE', codePhone: '32' },\n  { name: 'Bolivia', code: 'BO', codePhone: '591' },\n  { name: 'Brazil', code: 'BR', codePhone: '55' },\n  { name: 'Cambodia', code: 'KH', codePhone: '855' },\n  { name: 'Canada', code: 'CA', codePhone: '1' },\n  { name: 'Chile', code: 'CL', codePhone: '56' },\n  { name: 'China', code: 'CN', codePhone: '86' },\n  { name: 'Colombia', code: 'CO', codePhone: '57' },\n  { name: 'Costa Rica', code: 'CR', codePhone: '506' },\n  { name: 'Cuba', code: 'CU', codePhone: '53' },\n  { name: 'Czech Republic', code: 'CZ', codePhone: '420' },\n  { name: 'Denmark', code: 'DK', codePhone: '45' },\n  { name: 'Dominican Republic', code: 'DO', codePhone: '1' },\n  { name: 'Ecuador', code: 'EC', codePhone: '593' },\n  { name: 'Egypt', code: 'EG', codePhone: '20' },\n  { name: 'El Salvador', code: 'SV', codePhone: '503' },\n  { name: 'Estonia', code: 'EE', codePhone: '372' },\n  { name: 'Ethiopia', code: 'ET', codePhone: '251' },\n  { name: 'Finland', code: 'FI', codePhone: '358' },\n  { name: 'France', code: 'FR', codePhone: '33' },\n  { name: 'Germany', code: 'DE', codePhone: '49' },\n  { name: 'Ghana', code: 'GH', codePhone: '233' },\n  { name: 'Greece', code: 'GR', codePhone: '30' },\n  { name: 'Guatemala', code: 'GT', codePhone: '502' },\n  { name: 'Honduras', code: 'HN', codePhone: '504' },\n  { name: 'Hong Kong', code: 'HK', codePhone: '852' },\n  { name: 'Hungary', code: 'HU', codePhone: '36' },\n  { name: 'India', code: 'IN', codePhone: '91' },\n  { name: 'Indonesia', code: 'ID', codePhone: '62' },\n  { name: 'Iran, Islamic Republic Of', code: 'IR', codePhone: '98' },\n  { name: 'Iraq', code: 'IQ', codePhone: '964' },\n  { name: 'Ireland', code: 'IE', codePhone: '353' },\n  { name: 'Israel', code: 'IL', codePhone: '972' },\n  { name: 'Italy', code: 'IT', codePhone: '39' },\n  { name: 'Jamaica', code: 'JM', codePhone: '1876' },\n  { name: 'Japan', code: 'JP', codePhone: '81' },\n  { name: 'Jordan', code: 'JO', codePhone: '962' },\n  { name: 'Kazakhstan', code: 'KZ', codePhone: '7' },\n  { name: 'Kenya', code: 'KE', codePhone: '254' },\n  { name: 'Kuwait', code: 'KW', codePhone: '965' },\n  { name: 'Lebanon', code: 'LB', codePhone: '961' },\n  { name: 'Malaysia', code: 'MY', codePhone: '60' },\n  { name: 'Mexico', code: 'MX', codePhone: '52' },\n  { name: 'Morocco', code: 'MA', codePhone: '212' },\n  { name: 'Netherlands', code: 'NL', codePhone: '31' },\n  { name: 'New Zealand', code: 'NZ', codePhone: '64' },\n  { name: 'Nicaragua', code: 'NI', codePhone: '505' },\n  { name: 'Nigeria', code: 'NG', codePhone: '234' },\n  { name: 'Norway', code: 'NO', codePhone: '47' },\n  { name: 'Pakistan', code: 'PK', codePhone: '92' },\n  { name: 'Panama', code: 'PA', codePhone: '507' },\n  { name: 'Paraguay', code: 'PY', codePhone: '595' },\n  { name: 'Peru', code: 'PE', codePhone: '51' },\n  { name: 'Philippines', code: 'PH', codePhone: '63' },\n  { name: 'Poland', code: 'PL', codePhone: '48' },\n  { name: 'Portugal', code: 'PT', codePhone: '351' },\n  { name: 'Qatar', code: 'QA', codePhone: '974' },\n  { name: 'Romania', code: 'RO', codePhone: '40' },\n  { name: 'Russian Federation', code: 'RU', codePhone: '7' },\n  { name: 'Saudi Arabia', code: 'SA', codePhone: '966' },\n  { name: 'Singapore', code: 'SG', codePhone: '65' },\n  { name: 'South Africa', code: 'ZA', codePhone: '27' },\n  { name: 'Spain', code: 'ES', codePhone: '34' },\n  { name: 'Sri Lanka', code: 'LK', codePhone: '94' },\n  { name: 'Sweden', code: 'SE', codePhone: '46' },\n  { name: 'Switzerland', code: 'CH', codePhone: '41' },\n  { name: 'Taiwan, Province of China', code: 'TW', codePhone: '886' },\n  { name: 'Thailand', code: 'TH', codePhone: '66' },\n  { name: 'Tunisia', code: 'TN', codePhone: '216' },\n  { name: 'Turkey', code: 'TR', codePhone: '90' },\n  { name: 'Uganda', code: 'UG', codePhone: '256' },\n  { name: 'Ukraine', code: 'UA', codePhone: '380' },\n  { name: 'United Arab Emirates', code: 'AE', codePhone: '971' },\n  { name: 'United Kingdom', code: 'GB', codePhone: '44' },\n  { name: 'United States', code: 'US', codePhone: '1' },\n  { name: 'Uruguay', code: 'UY', codePhone: '598' },\n  { name: 'Venezuela', code: 'VE', codePhone: '58' },\n  { name: 'Viet Nam', code: 'VN', codePhone: '84' },\n  { name: 'Zimbabwe', code: 'ZW', codePhone: '263' },\n];\n\n/**\n * @component dropi-country-selector\n * Searchable country dropdown with flag images. Mirrors Angular dropi-country-selector.\n *\n * @example\n * <dropi-country-selector label=\"País\" placeholder=\"Selecciona un país\"></dropi-country-selector>\n */\n@Component({\n  tag: 'dropi-country-selector',\n  styleUrl: 'dropi-country-selector.css',\n  shadow: true,\n})\nexport class DropiCountrySelector {\n  /** Label above the select */\n  @Prop() label: string = '';\n  /** Placeholder when nothing is selected */\n  @Prop() placeholder: string = 'Selecciona un país';\n  /** Pre-selected country code (ISO 3166-1 alpha-2) */\n  @Prop({ mutable: true }) currentSelection: string = '';\n  /** Whether the selector is disabled */\n  @Prop() disabled: boolean = false;\n  /** Show asterisk for required field */\n  @Prop() showObligatory: boolean = false;\n  /** Show error border */\n  @Prop() hasError: boolean = false;\n  /** Helper text below the select */\n  @Prop() textHelper: string = '';\n  /** Search term for filtering (matches Angular `searchTerm`) */\n  @Prop({ mutable: true }) searchTerm: string = '';\n  /**\n   * Convenience object prop — matches Angular `selectProperties: SelectProperties`.\n   * When provided, its non-null fields override individual props.\n   */\n  @Prop() selectProperties: any = null;\n\n  /** Emitted when a country is selected. Detail is the CountryItem. */\n  @Event() onChangeSelect: EventEmitter<CountryItem>;\n\n  @State() private isOpen: boolean = false;\n  @State() private selected: CountryItem | null = null;\n\n  @Element() el!: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleDocClick(e: MouseEvent) {\n    if (this.isOpen && !e.composedPath().includes(this.el)) {\n      this.isOpen = false;\n    }\n  }\n\n  private searchInputRef?: HTMLInputElement;\n\n  @Watch('currentSelection')\n  currentSelectionChanged(val: string) {\n    this.selected = COUNTRIES.find(c => c.code === val) || null;\n  }\n\n  @Watch('selectProperties')\n  selectPropertiesChanged(val: any) {\n    if (!val) return;\n    if (val.label !== undefined) this.label = val.label;\n    if (val.placeholder !== undefined) this.placeholder = val.placeholder;\n    if (val.showObligatory !== undefined) this.showObligatory = val.showObligatory;\n    if (val.textHelper !== undefined) this.textHelper = val.textHelper;\n    if (val.hasError !== undefined) this.hasError = val.hasError;\n  }\n\n  componentWillLoad() {\n    if (this.selectProperties) this.selectPropertiesChanged(this.selectProperties);\n    if (this.currentSelection) this.currentSelectionChanged(this.currentSelection);\n  }\n\n  private get filtered(): CountryItem[] {\n    if (!this.searchTerm) return COUNTRIES;\n    const t = this.searchTerm.toLowerCase();\n    return COUNTRIES.filter(c => c.name.toLowerCase().includes(t));\n  }\n\n  private open() {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    if (this.isOpen) {\n      setTimeout(() => this.searchInputRef?.focus(), 50);\n    }\n  }\n\n  private select(country: CountryItem) {\n    this.selected = country;\n    this.isOpen = false;\n    this.searchTerm = '';\n    this.currentSelection = country.code;\n    this.onChangeSelect.emit(country);\n  }\n\n  render() {\n    return (\n      <div class=\"custom-select\">\n        {this.label && (\n          <label>\n            {this.label}\n            {this.showObligatory && <span class=\"required\">*</span>}\n          </label>\n        )}\n\n        <button\n          type=\"button\"\n          class={{\n            'select-button': true,\n            'select-completed': !!this.selected,\n            'select-invalid': this.hasError,\n          }}\n          disabled={this.disabled}\n          onClick={() => this.open()}\n        >\n          <div class=\"selected-content\">\n            {this.selected ? (\n              <span class=\"selected-option\">\n                <img\n                  class=\"flag-img\"\n                  src={`https://flagsapi.com/${this.selected.code}/shiny/24.png`}\n                  alt={this.selected.name}\n                />\n                {this.selected.name}\n              </span>\n            ) : (\n              <span class=\"placeholder-text\">{this.placeholder}</span>\n            )}\n          </div>\n          <dropi-icon\n            name={this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2'}\n            iconWidth=\"20px\"\n            iconHeight=\"20px\"\n            color=\"Gray-Gray-500\"\n          />\n        </button>\n\n        <ul class={`select-dropdown${this.isOpen ? ' expanded' : ' collapsed'}`}>\n          <li class=\"search-li\">\n            <div class=\"search-field\">\n              <input\n                ref={(el) => { this.searchInputRef = el; }}\n                type=\"text\"\n                class=\"country-search\"\n                placeholder=\"Buscar país...\"\n                value={this.searchTerm}\n                onInput={(e) => { this.searchTerm = (e.target as HTMLInputElement).value; }}\n              />\n              <span class=\"search-icon\">\n                <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n              </span>\n            </div>\n          </li>\n          {this.filtered.map(country => (\n            <li key={country.code}>\n              <button class=\"option\" type=\"button\" onClick={() => this.select(country)}>\n                <img\n                  class=\"flag-img\"\n                  src={`https://flagsapi.com/${country.code}/shiny/24.png`}\n                  alt={country.name}\n                />\n                {country.name}\n              </button>\n            </li>\n          ))}\n        </ul>\n        {this.textHelper && (\n          <div class={{ 'select-helper': true, 'select-helper-error': this.hasError }}>\n            {this.hasError && <dropi-icon name=\"Warning-circle\" iconWidth=\"12px\" iconHeight=\"12px\" color=\"Error-Error-500\" />}\n            <span>{this.textHelper}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/dropi-ui/dropi-date-picker-range.entry.js

@@ -0,0 +1,116 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiDatePickerRangeCss = () => `: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}}`;
+
+const DropiDatePickerRange = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.startDateChange = createEvent(this, "startDateChange", 7);
+        this.endDateChange = createEvent(this, "endDateChange", 7);
+        this.dropiRangeChange = createEvent(this, "dropiRangeChange", 7);
+    }
+    /** Start date (YYYY-MM-DD) */
+    startDate = '';
+    /** End date (YYYY-MM-DD) */
+    endDate = '';
+    /** Show "Rango de fechas" label */
+    showLabel = true;
+    /** Input placeholder */
+    placeholder = '';
+    /** Show loading skeleton */
+    loading = false;
+    /** Max allowed range in days (0 = unlimited) */
+    maxDaysRange = 0;
+    /** Hide "Hoy" shortcut */
+    hideTodayRangeShortcut = false;
+    /** Emitted when start date changes */
+    startDateChange;
+    /** Emitted when end date changes */
+    endDateChange;
+    /** Emitted with full range when both dates are set */
+    dropiRangeChange;
+    start = '';
+    end = '';
+    activeRange = -1;
+    showWarning = false;
+    onStartPropChange(val) { this.start = val; }
+    onEndPropChange(val) { this.end = val; }
+    componentWillLoad() {
+        this.start = this.startDate;
+        this.end = this.endDate;
+    }
+    get today() {
+        return new Date().toISOString().split('T')[0];
+    }
+    daysAgo(n) {
+        const d = new Date();
+        d.setDate(d.getDate() - n);
+        return d.toISOString().split('T')[0];
+    }
+    get shortcuts() {
+        const all = [
+            { 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 ? all.slice(1) : all;
+    }
+    selectShortcut(idx) {
+        const s = this.shortcuts[idx];
+        this.start = s.start;
+        this.end = s.end;
+        this.activeRange = idx;
+        this.showWarning = false;
+        this.emit();
+    }
+    onStartChange(e) {
+        this.start = e.target.value;
+        this.activeRange = -1;
+        this.checkRange();
+        if (this.start && this.end)
+            this.emit();
+    }
+    onEndChange(e) {
+        this.end = e.target.value;
+        this.activeRange = -1;
+        this.checkRange();
+        if (this.start && this.end)
+            this.emit();
+    }
+    checkRange() {
+        if (this.start && this.end && this.maxDaysRange > 0) {
+            const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;
+            this.showWarning = diff > this.maxDaysRange;
+        }
+        else {
+            this.showWarning = false;
+        }
+    }
+    emit() {
+        this.startDateChange.emit(this.start);
+        this.endDateChange.emit(this.end);
+        this.dropiRangeChange.emit({ start: this.start, end: this.end });
+    }
+    render() {
+        if (this.loading) {
+            return h("div", { class: "skeleton" });
+        }
+        return (h("div", { class: "date-picker-range" }, this.showLabel && h("div", { class: "label" }, "Rango de fechas"), h("div", { class: "inputs-row" }, h("div", { class: "input-group" }, h("label", { class: "input-label" }, "Desde"), h("input", { type: "date", class: "date-input", value: this.start, max: this.end || this.today, onChange: (e) => this.onStartChange(e) })), h("span", { class: "separator" }, "\u2014"), h("div", { class: "input-group" }, h("label", { class: "input-label" }, "Hasta"), h("input", { type: "date", class: "date-input", value: this.end, min: this.start, max: this.today, onChange: (e) => this.onEndChange(e) }))), h("div", { class: "shortcuts" }, this.shortcuts.map((s, i) => (h("button", { key: i, class: `shortcut-btn${this.activeRange === i ? ' active' : ''}`, onClick: () => this.selectShortcut(i) }, s.label)))), this.showWarning && (h("div", { class: "warning-box" }, h("span", { class: "warning-message" }, "Solo puedes filtrar en un rango m\u00E1ximo de ", this.maxDaysRange, " d\u00EDas.")))));
+    }
+    static get watchers() { return {
+        "startDate": [{
+                "onStartPropChange": 0
+            }],
+        "endDate": [{
+                "onEndPropChange": 0
+            }]
+    }; }
+};
+DropiDatePickerRange.style = dropiDatePickerRangeCss();
+
+export { DropiDatePickerRange as dropi_date_picker_range };
+//# sourceMappingURL=dropi-date-picker-range.entry.esm.js.map
+
+//# sourceMappingURL=dropi-date-picker-range.entry.js.map

package/dist/dropi-ui/dropi-date-picker-range.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-date-picker-range.entry.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,MAAM,CAAC,itEAAitE,CAAC;;MCmB5uE,oBAAoB,GAAA,MAAA;;;;;;;;IAEN,SAAS,GAAW,EAAE;;IAEtB,OAAO,GAAW,EAAE;;IAErC,SAAS,GAAY,IAAI;;IAEzB,WAAW,GAAW,EAAE;;IAExB,OAAO,GAAY,KAAK;;IAExB,YAAY,GAAW,CAAC;;IAExB,sBAAsB,GAAY,KAAK;;AAGtC,IAAA,eAAe;;AAEf,IAAA,aAAa;;AAEb,IAAA,gBAAgB;IAER,KAAK,GAAW,EAAE;IAClB,GAAG,GAAW,EAAE;IAChB,WAAW,GAAW,CAAC,CAAC;IACxB,WAAW,GAAY,KAAK;IAG7C,iBAAiB,CAAC,GAAW,EAAA,EAAI,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC;IAElD,eAAe,CAAC,GAAW,EAAA,EAAI,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;IAE9C,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS;AAC3B,QAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,OAAO;;AAGzB,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;AAGvC,IAAA,OAAO,CAAC,CAAS,EAAA;AACvB,QAAA,MAAM,CAAC,GAAG,IAAI,IAAI,EAAE;QACpB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AAC1B,QAAA,OAAO,CAAC,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;;AAGtC,IAAA,IAAY,SAAS,GAAA;AACnB,QAAA,MAAM,GAAG,GAAG;AACV,YAAA,EAAE,KAAK,EAAE,KAAK,EAAa,KAAK,EAAE,IAAI,CAAC,KAAK,EAAO,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE;AACpE,YAAA,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE;AACpE,YAAA,EAAE,KAAK,EAAE,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE;AACpE,YAAA,EAAE,KAAK,EAAE,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE;AACpE,YAAA,EAAE,KAAK,EAAE,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE;SACrE;AACD,QAAA,OAAO,IAAI,CAAC,sBAAsB,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG;;AAGjD,IAAA,cAAc,CAAC,GAAW,EAAA;QAChC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC;AAC7B,QAAA,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK;AACpB,QAAA,IAAI,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG;AAChB,QAAA,IAAI,CAAC,WAAW,GAAG,GAAG;AACtB,QAAA,IAAI,CAAC,WAAW,GAAG,KAAK;QACxB,IAAI,CAAC,IAAI,EAAE;;AAGL,IAAA,aAAa,CAAC,CAAQ,EAAA;QAC5B,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;AACjD,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,UAAU,EAAE;AACjB,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG;YAAE,IAAI,CAAC,IAAI,EAAE;;AAGjC,IAAA,WAAW,CAAC,CAAQ,EAAA;QAC1B,IAAI,CAAC,GAAG,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK;AAC/C,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,UAAU,EAAE;AACjB,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG;YAAE,IAAI,CAAC,IAAI,EAAE;;IAGjC,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE;YACnD,MAAM,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,IAAI,QAAQ;YACvF,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC,YAAY;;aACtC;AACL,YAAA,IAAI,CAAC,WAAW,GAAG,KAAK;;;IAIpB,IAAI,GAAA;QACV,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;QACrC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AACjC,QAAA,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;;IAGlE,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,UAAU,GAAG;;AAGjC,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mBAAmB,EAAA,EAC3B,IAAI,CAAC,SAAS,IAAI,WAAK,KAAK,EAAC,OAAO,EAAA,EAAA,iBAAA,CAAsB,EAE3D,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,OAAA,EAAA,EAAO,KAAK,EAAC,aAAa,EAAA,EAAA,OAAA,CAAc,EACxC,CAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,EAC3B,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,GACtC,CACE,EACN,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,WAAW,EAAA,EAAA,QAAA,CAAS,EAChC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,OAAA,EAAA,EAAO,KAAK,EAAC,aAAa,EAAA,EAAA,OAAA,CAAc,EACxC,CAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,YAAY,EAClB,KAAK,EAAE,IAAI,CAAC,GAAG,EACf,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAA,CACpC,CACE,CACF,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACnB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MACvB,CAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,WAAW,KAAK,CAAC,GAAG,SAAS,GAAG,EAAE,CAAA,CAAE,EAC/D,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAA,EAEpC,CAAC,CAAC,KAAK,CACD,CACV,CAAC,CACE,EAEL,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,iBAAiB,EAAA,qDACgB,IAAI,CAAC,YAAY,gBACvD,CACH,CACP,CACG;;;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-date-picker-range/dropi-date-picker-range.css?tag=dropi-date-picker-range&encapsulation=shadow","src/components/dropi-date-picker-range/dropi-date-picker-range.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  max-width: 380px;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.date-picker-range {\n  width: 100%;\n  font-family: inherit;\n}\n\n.label {\n  font-size: 11px;\n  font-weight: var(--font-weight-medium);\n  color: #7b8190;\n  margin-bottom: 8px;\n}\n\n.inputs-row {\n  display: flex;\n  align-items: flex-end;\n  gap: 8px;\n}\n\n.input-group {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.input-label {\n  font-size: var(--font-size-xs, 11px);\n  color: var(--Gray-Gray-500, #69738c);\n  font-weight: var(--font-weight-medium, 500);\n}\n\n.date-input {\n  width: 100%;\n  height: 40px;\n  padding: 0 10px;\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  background: var(--Neutral-White, #ffffff);\n  color: var(--Gray-Gray-600, #475066);\n  font-size: 13px;\n  font-family: inherit;\n  outline: none;\n  cursor: pointer;\n  transition: border-color 0.15s ease;\n}\n\n.date-input:focus {\n  border-color: var(--Primary-Primary-500, #f49a3d);\n}\n\n.separator {\n  padding-bottom: 8px;\n  color: var(--Gray-Gray-400, #858ea6);\n  font-size: var(--font-size-m);\n}\n\n.shortcuts {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  margin-top: 10px;\n  border-left: 1px solid var(--Gray-Gray-100, #e6eaf2);\n  padding-left: 10px;\n}\n\n.shortcut-btn {\n  background: transparent;\n  border: none;\n  padding: 4px 6px;\n  font-size: 13px;\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  cursor: pointer;\n  text-align: left;\n  border-radius: 5px;\n  transition: background 0.1s ease;\n  font-weight: var(--font-weight-regular);\n}\n\n.shortcut-btn:hover {\n  background: var(--Gray-Gray-50, #f5f6f8);\n}\n\n.shortcut-btn.active {\n  background: var(--Gray-Gray-50, #f5f6f8);\n  font-weight: var(--font-weight-semibold);\n}\n\n.warning-box {\n  margin-top: 8px;\n  padding: 4px 8px;\n  border: 1px solid var(--Warning-Warning-400);\n  border-radius: 4px;\n  background: var(--Warning-Warning-50);\n}\n\n.warning-message {\n  color: #495057;\n  font-size: var(--font-size-xxs);\n  line-height: 16px;\n}\n\n@keyframes shimmer {\n  0%   { background-position: -468px 0; }\n  100% { background-position: 468px 0; }\n}\n\n.skeleton {\n  height: 40px;\n  width: 100%;\n  min-width: 180px;\n  border-radius: 6px;\n  animation: shimmer 1s linear infinite;\n  background: linear-gradient(to right, #f5f6f8 8%, #e3e7ef 28%, #f5f6f8 77%);\n  background-size: 800px 104px;\n}\n\n@media screen and (max-width: 480px) {\n  .inputs-row {\n    flex-direction: column;\n  }\n\n  .separator {\n    display: none;\n  }\n\n  .shortcuts {\n    flex-direction: row;\n    flex-wrap: wrap;\n    border-left: none;\n    padding-left: 0;\n    border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);\n    padding-top: 8px;\n  }\n}\n","import { Component, Prop, Event, EventEmitter, State, Watch, h } from '@stencil/core';\n\nexport interface DateRange {\n  start: string;\n  end: string;\n}\n\n/**\n * @component dropi-date-picker-range\n * Date range picker with shortcut buttons (Today, Last 7/15/30/90 days).\n *\n * @example\n * <dropi-date-picker-range show-label></dropi-date-picker-range>\n */\n@Component({\n  tag: 'dropi-date-picker-range',\n  styleUrl: 'dropi-date-picker-range.css',\n  shadow: true,\n})\nexport class DropiDatePickerRange {\n  /** Start date (YYYY-MM-DD) */\n  @Prop({ mutable: true }) startDate: string = '';\n  /** End date (YYYY-MM-DD) */\n  @Prop({ mutable: true }) endDate: string = '';\n  /** Show \"Rango de fechas\" label */\n  @Prop() showLabel: boolean = true;\n  /** Input placeholder */\n  @Prop() placeholder: string = '';\n  /** Show loading skeleton */\n  @Prop() loading: boolean = false;\n  /** Max allowed range in days (0 = unlimited) */\n  @Prop() maxDaysRange: number = 0;\n  /** Hide \"Hoy\" shortcut */\n  @Prop() hideTodayRangeShortcut: boolean = false;\n\n  /** Emitted when start date changes */\n  @Event() startDateChange: EventEmitter<string>;\n  /** Emitted when end date changes */\n  @Event() endDateChange: EventEmitter<string>;\n  /** Emitted with full range when both dates are set */\n  @Event() dropiRangeChange: EventEmitter<DateRange>;\n\n  @State() private start: string = '';\n  @State() private end: string = '';\n  @State() private activeRange: number = -1;\n  @State() private showWarning: boolean = false;\n\n  @Watch('startDate')\n  onStartPropChange(val: string) { this.start = val; }\n  @Watch('endDate')\n  onEndPropChange(val: string) { this.end = val; }\n\n  componentWillLoad() {\n    this.start = this.startDate;\n    this.end = this.endDate;\n  }\n\n  private get today(): string {\n    return new Date().toISOString().split('T')[0];\n  }\n\n  private daysAgo(n: number): string {\n    const d = new Date();\n    d.setDate(d.getDate() - n);\n    return d.toISOString().split('T')[0];\n  }\n\n  private get shortcuts() {\n    const all = [\n      { label: 'Hoy',            start: this.today,      end: this.today },\n      { label: 'Últimos 7 días', start: this.daysAgo(6), end: this.today },\n      { label: 'Últimos 15 días',start: this.daysAgo(14),end: this.today },\n      { label: 'Últimos 30 días',start: this.daysAgo(29),end: this.today },\n      { label: 'Últimos 90 días',start: this.daysAgo(89),end: this.today },\n    ];\n    return this.hideTodayRangeShortcut ? all.slice(1) : all;\n  }\n\n  private selectShortcut(idx: number) {\n    const s = this.shortcuts[idx];\n    this.start = s.start;\n    this.end = s.end;\n    this.activeRange = idx;\n    this.showWarning = false;\n    this.emit();\n  }\n\n  private onStartChange(e: Event) {\n    this.start = (e.target as HTMLInputElement).value;\n    this.activeRange = -1;\n    this.checkRange();\n    if (this.start && this.end) this.emit();\n  }\n\n  private onEndChange(e: Event) {\n    this.end = (e.target as HTMLInputElement).value;\n    this.activeRange = -1;\n    this.checkRange();\n    if (this.start && this.end) this.emit();\n  }\n\n  private checkRange() {\n    if (this.start && this.end && this.maxDaysRange > 0) {\n      const diff = (new Date(this.end).getTime() - new Date(this.start).getTime()) / 86400000;\n      this.showWarning = diff > this.maxDaysRange;\n    } else {\n      this.showWarning = false;\n    }\n  }\n\n  private emit() {\n    this.startDateChange.emit(this.start);\n    this.endDateChange.emit(this.end);\n    this.dropiRangeChange.emit({ start: this.start, end: this.end });\n  }\n\n  render() {\n    if (this.loading) {\n      return <div class=\"skeleton\" />;\n    }\n\n    return (\n      <div class=\"date-picker-range\">\n        {this.showLabel && <div class=\"label\">Rango de fechas</div>}\n\n        <div class=\"inputs-row\">\n          <div class=\"input-group\">\n            <label class=\"input-label\">Desde</label>\n            <input\n              type=\"date\"\n              class=\"date-input\"\n              value={this.start}\n              max={this.end || this.today}\n              onChange={(e) => this.onStartChange(e)}\n            />\n          </div>\n          <span class=\"separator\">—</span>\n          <div class=\"input-group\">\n            <label class=\"input-label\">Hasta</label>\n            <input\n              type=\"date\"\n              class=\"date-input\"\n              value={this.end}\n              min={this.start}\n              max={this.today}\n              onChange={(e) => this.onEndChange(e)}\n            />\n          </div>\n        </div>\n\n        <div class=\"shortcuts\">\n          {this.shortcuts.map((s, i) => (\n            <button\n              key={i}\n              class={`shortcut-btn${this.activeRange === i ? ' active' : ''}`}\n              onClick={() => this.selectShortcut(i)}\n            >\n              {s.label}\n            </button>\n          ))}\n        </div>\n\n        {this.showWarning && (\n          <div class=\"warning-box\">\n            <span class=\"warning-message\">\n              Solo puedes filtrar en un rango máximo de {this.maxDaysRange} días.\n            </span>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}