@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,673 +0,0 @@
-import { h } from "@stencil/core";
-const MONTHS_ES = [
-    'Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio',
-    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'
-];
-const MONTHS_SHORT = ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
-const DAYS_ES = ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa'];
-/**
- * @component dropi-date-picker
- * Calendar date picker with optional date range mode.
- * Emits ISO date strings (YYYY-MM-DD).
- */
-export class DropiDatePicker {
-    internals;
-    /** Name for native form submission */
-    name;
-    /** Selected date (ISO string, single mode) */
-    selectedDate = '';
-    /** Range start date (ISO string, range mode) */
-    startDate = '';
-    /** Range end date (ISO string, range mode) */
-    endDate = '';
-    valueChanged() { this.updateFormValue(); }
-    /** Enable range selection */
-    selectionMode = 'single';
-    /** Min selectable date (ISO string) */
-    minDate = '';
-    /** Max selectable date (ISO string) */
-    maxDate = '';
-    /** Label */
-    label = null;
-    /** Placeholder */
-    placeholder = 'DD/MM/YYYY';
-    /** Disabled */
-    disabled = false;
-    /** Is invalid state */
-    isInvalid = false;
-    /** Loading state */
-    loading = false;
-    /** Hide "Hoy" shortcut */
-    hideTodayShortcut = false;
-    open = false;
-    viewYear = new Date().getFullYear();
-    viewMonth = new Date().getMonth();
-    hoverDate = '';
-    viewMode = 'day';
-    activeShortcut = -1;
-    el;
-    handleDocClick(e) {
-        if (this.open && !e.composedPath().includes(this.el)) {
-            this.open = false;
-        }
-    }
-    dropiChangeDate;
-    dropiClosePanel;
-    dropiRangeChange;
-    componentWillLoad() { this.updateFormValue(); }
-    updateFormValue() {
-        if (this.selectionMode === 'range') {
-            this.internals.setFormValue(this.startDate && this.endDate ? `${this.startDate},${this.endDate}` : '');
-        }
-        else {
-            this.internals.setFormValue(this.selectedDate || '');
-        }
-    }
-    get displayValue() {
-        if (this.selectionMode === 'range') {
-            if (this.startDate && this.endDate)
-                return `${this.startDate} – ${this.endDate}`;
-            if (this.startDate)
-                return this.startDate;
-            return '';
-        }
-        return this.selectedDate;
-    }
-    open_() {
-        if (this.disabled)
-            return;
-        if (this.selectedDate) {
-            const d = new Date(this.selectedDate);
-            this.viewYear = d.getFullYear();
-            this.viewMonth = d.getMonth();
-        }
-        else if (this.startDate) {
-            const d = new Date(this.startDate);
-            this.viewYear = d.getFullYear();
-            this.viewMonth = d.getMonth();
-        }
-        this.viewMode = 'day';
-        this.open = true;
-    }
-    get decadeStart() {
-        return Math.floor(this.viewYear / 10) * 10;
-    }
-    get navTitle() {
-        if (this.viewMode === 'day')
-            return `${MONTHS_ES[this.viewMonth]}  ${this.viewYear}`;
-        if (this.viewMode === 'month')
-            return `${this.viewYear}`;
-        return `${this.decadeStart}-${this.decadeStart + 9}`;
-    }
-    cycleView() {
-        if (this.viewMode === 'day')
-            this.viewMode = 'month';
-        else if (this.viewMode === 'month')
-            this.viewMode = 'year';
-    }
-    prevNav() {
-        if (this.viewMode === 'day') {
-            if (this.viewMonth === 0) {
-                this.viewMonth = 11;
-                this.viewYear--;
-            }
-            else
-                this.viewMonth--;
-        }
-        else if (this.viewMode === 'month') {
-            this.viewYear--;
-        }
-        else {
-            this.viewYear = this.decadeStart - 10;
-        }
-    }
-    nextNav() {
-        if (this.viewMode === 'day') {
-            if (this.viewMonth === 11) {
-                this.viewMonth = 0;
-                this.viewYear++;
-            }
-            else
-                this.viewMonth++;
-        }
-        else if (this.viewMode === 'month') {
-            this.viewYear++;
-        }
-        else {
-            this.viewYear = this.decadeStart + 10;
-        }
-    }
-    selectMonth(month) {
-        this.viewMonth = month;
-        this.viewMode = 'day';
-    }
-    selectYear(year) {
-        this.viewYear = year;
-        this.viewMode = 'month';
-    }
-    get today() {
-        return new Date().toISOString().slice(0, 10);
-    }
-    daysAgo(n) {
-        const d = new Date();
-        d.setDate(d.getDate() - n);
-        return d.toISOString().slice(0, 10);
-    }
-    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.hideTodayShortcut ? all.slice(1) : all;
-    }
-    selectShortcut(idx) {
-        const s = this.shortcuts[idx];
-        this.activeShortcut = idx;
-        if (this.selectionMode === 'range') {
-            this.startDate = s.start;
-            this.endDate = s.end;
-            this.dropiRangeChange.emit({ start: s.start, end: s.end });
-        }
-        else {
-            this.selectedDate = s.end;
-            this.dropiChangeDate.emit(s.end);
-        }
-        this.open = false;
-    }
-    toISO(year, month, day) {
-        return `${year}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
-    }
-    isDisabled(iso) {
-        if (this.minDate && iso < this.minDate)
-            return true;
-        if (this.maxDate && iso > this.maxDate)
-            return true;
-        return false;
-    }
-    isInRange(iso) {
-        if (this.selectionMode !== 'range')
-            return false;
-        const start = this.startDate;
-        const end = this.endDate || this.hoverDate;
-        if (!start || !end)
-            return false;
-        const [s, e] = start <= end ? [start, end] : [end, start];
-        return iso > s && iso < e;
-    }
-    selectDate(iso) {
-        if (this.isDisabled(iso))
-            return;
-        if (this.selectionMode !== 'range') {
-            this.selectedDate = iso;
-            this.open = false;
-            this.dropiChangeDate.emit(iso);
-            return;
-        }
-        if (!this.startDate || (this.startDate && this.endDate)) {
-            this.startDate = iso;
-            this.endDate = '';
-        }
-        else {
-            if (iso < this.startDate) {
-                this.endDate = this.startDate;
-                this.startDate = iso;
-            }
-            else {
-                this.endDate = iso;
-            }
-            this.open = false;
-            this.dropiRangeChange.emit({ start: this.startDate, end: this.endDate });
-        }
-    }
-    buildDays() {
-        const year = this.viewYear;
-        const month = this.viewMonth;
-        const firstDay = new Date(year, month, 1).getDay();
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
-        const daysInPrevMonth = new Date(year, month, 0).getDate();
-        const cells = [];
-        for (let i = firstDay - 1; i >= 0; i--) {
-            const d = daysInPrevMonth - i;
-            const m = month === 0 ? 11 : month - 1;
-            const y = month === 0 ? year - 1 : year;
-            cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
-        }
-        for (let d = 1; d <= daysInMonth; d++) {
-            cells.push({ iso: this.toISO(year, month, d), day: d, currentMonth: true });
-        }
-        const remaining = 42 - cells.length;
-        for (let d = 1; d <= remaining; d++) {
-            const m = month === 11 ? 0 : month + 1;
-            const y = month === 11 ? year + 1 : year;
-            cells.push({ iso: this.toISO(y, m, d), day: d, currentMonth: false });
-        }
-        return cells;
-    }
-    renderDayView(today) {
-        const days = this.buildDays();
-        return (h("div", { class: "dp-grid" }, DAYS_ES.map(d => h("div", { class: "dp-day-header" }, d)), days.map(({ iso, day, currentMonth }) => {
-            const isSelected = this.selectionMode !== 'range'
-                ? iso === this.selectedDate
-                : iso === this.startDate || iso === this.endDate;
-            const isRangeStart = this.selectionMode === 'range' && iso === this.startDate;
-            const isRangeEnd = this.selectionMode === 'range' && iso === this.endDate;
-            const inRange = this.isInRange(iso);
-            const disabled = this.isDisabled(iso);
-            const isToday = iso === today;
-            return (h("button", { class: {
-                    'dp-cell': true,
-                    'dp-cell--other-month': !currentMonth,
-                    'dp-cell--today': isToday,
-                    'dp-cell--selected': isSelected,
-                    'dp-cell--range-start': isRangeStart,
-                    'dp-cell--range-end': isRangeEnd,
-                    'dp-cell--in-range': inRange,
-                    'dp-cell--disabled': disabled,
-                }, type: "button", disabled: disabled, onClick: () => this.selectDate(iso), onMouseEnter: () => {
-                    if (this.selectionMode === 'range' && this.startDate && !this.endDate)
-                        this.hoverDate = iso;
-                }, onMouseLeave: () => this.hoverDate = '' }, day));
-        })));
-    }
-    renderMonthView() {
-        const todayMonth = new Date().getMonth();
-        const todayYear = new Date().getFullYear();
-        return (h("div", { class: "dp-month-grid" }, MONTHS_SHORT.map((name, idx) => {
-            const isSelected = idx === this.viewMonth;
-            const isCurrent = idx === todayMonth && this.viewYear === todayYear;
-            return (h("button", { class: {
-                    'dp-month-cell': true,
-                    'dp-month-cell--selected': isSelected,
-                    'dp-month-cell--current': isCurrent && !isSelected,
-                }, type: "button", onClick: () => this.selectMonth(idx) }, name));
-        })));
-    }
-    renderYearView() {
-        const currentYear = new Date().getFullYear();
-        const start = this.decadeStart;
-        const years = Array.from({ length: 10 }, (_, i) => start + i);
-        return (h("div", { class: "dp-year-grid" }, years.map(year => {
-            const isSelected = year === this.viewYear;
-            const isCurrent = year === currentYear;
-            return (h("button", { class: {
-                    'dp-year-cell': true,
-                    'dp-year-cell--selected': isSelected,
-                    'dp-year-cell--current': isCurrent && !isSelected,
-                }, type: "button", onClick: () => this.selectYear(year) }, year));
-        })));
-    }
-    render() {
-        const today = new Date().toISOString().slice(0, 10);
-        return (h("div", { key: '6ae00de99b93a13faba81ac027c292b9624d0336', class: "dp-wrap" }, this.label && h("label", { key: '9282bb57332ebaef9861702d80759d641ea21757', class: "dp-label" }, this.label), h("button", { key: '1fe5d5fcd8ce1c0b151381d9c249c401d322f78a', class: {
-                'dp-trigger': true,
-                'dp-trigger--disabled': this.disabled,
-                'dp-trigger--invalid': this.isInvalid,
-                'dp-trigger--loading': this.loading
-            }, onClick: () => this.open ? this.open = false : this.open_(), disabled: this.disabled || this.loading, type: "button" }, h("dropi-icon", { key: '560cf80eb7652543b9000e375b213a3dba91060b', name: "Calendar", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), h("span", { key: '3bdc45bd4706502af4050475e709c15beebce028', class: { 'dp-trigger__value': true, 'dp-trigger__placeholder': !this.displayValue } }, this.displayValue || this.placeholder)), this.open && (h("div", { key: 'e21053dd38d62ab43c01f337fbbeb8b36e70680c', class: "dp-popup" }, h("div", { key: 'd6c8fc40ec4bd11bcd5bf3d8b3706c4c62099bbf', class: "dp-calendar" }, h("div", { key: 'cf8f21d301592077851a44eb588418302240598f', class: "dp-nav" }, h("button", { key: '28702d76d499cec07cd69d7bd23f5eb0369d288f', class: "dp-nav__btn", onClick: () => this.prevNav(), type: "button" }, h("dropi-icon", { key: '18b1c6fb2ea5f51b4a4b59592c7d89c5406c6c39', name: "dropdown-left", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" })), h("button", { key: '755274772a90deae38d613da369863aefe95e297', class: "dp-nav__title", onClick: () => this.cycleView(), type: "button" }, this.viewMode === 'day'
-            ? [h("span", null, MONTHS_ES[this.viewMonth]), h("span", null, this.viewYear)]
-            : h("span", null, this.navTitle)), h("button", { key: '6442690df1e434f9fb0128327f8f07c3cecbed4c', class: "dp-nav__btn", onClick: () => this.nextNav(), type: "button" }, h("dropi-icon", { key: '00525ae2cbe5cc8a881d165141de10ce3d72e439', name: "dropdown-right", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-600" }))), this.viewMode === 'day' && this.renderDayView(today), this.viewMode === 'month' && this.renderMonthView(), this.viewMode === 'year' && this.renderYearView()), this.selectionMode === 'range' && [
-            h("div", { key: '688df97b843c3c3342fc301d6c6c74ec88921d68', class: "dp-divider" }),
-            h("div", { key: '2c75f7b004812ee1eb18bbc349f03ab55623cd9f', class: "dp-shortcuts" }, this.shortcuts.map((s, i) => (h("button", { key: i, class: { 'shortcut-btn': true, 'shortcut-btn--active': this.activeShortcut === i }, onClick: () => this.selectShortcut(i), type: "button" }, s.label))))
-        ]))));
-    }
-    static get is() { return "dropi-date-picker"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-date-picker.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-date-picker.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Name for native form submission"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name"
-            },
-            "selectedDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Selected date (ISO string, single mode)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected-date",
-                "defaultValue": "''"
-            },
-            "startDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Range start date (ISO string, range mode)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "start-date",
-                "defaultValue": "''"
-            },
-            "endDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Range end date (ISO string, range mode)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "end-date",
-                "defaultValue": "''"
-            },
-            "selectionMode": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'single' | 'range'",
-                    "resolved": "\"range\" | \"single\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Enable range selection"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selection-mode",
-                "defaultValue": "'single'"
-            },
-            "minDate": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Min selectable date (ISO string)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "min-date",
-                "defaultValue": "''"
-            },
-            "maxDate": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Max selectable date (ISO string)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-date",
-                "defaultValue": "''"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "null"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Placeholder"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "'DD/MM/YYYY'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Disabled"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "isInvalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Is invalid state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "is-invalid",
-                "defaultValue": "false"
-            },
-            "loading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Loading state"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "loading",
-                "defaultValue": "false"
-            },
-            "hideTodayShortcut": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Hide \"Hoy\" shortcut"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "hide-today-shortcut",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "open": {},
-            "viewYear": {},
-            "viewMonth": {},
-            "hoverDate": {},
-            "viewMode": {},
-            "activeShortcut": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiChangeDate",
-                "name": "dropiChangeDate",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiClosePanel",
-                "name": "dropiClosePanel",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiRangeChange",
-                "name": "dropiRangeChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "{ start: string; end: string }",
-                    "resolved": "{ start: string; end: string; }",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "selectedDate",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "startDate",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "endDate",
-                "methodName": "valueChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleDocClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-    static get attachInternalsMemberName() { return "internals"; }
-}