@dropi/ui 0.1.24 → 0.1.25

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

@@ -1,327 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-date-picker-range
- * Date range picker with shortcut buttons (Today, Last 7/15/30/90 days).
- *
- * @example
- * <dropi-date-picker-range show-label></dropi-date-picker-range>
- */
-export class DropiDatePickerRange {
-    /** 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 is() { return "dropi-date-picker-range"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-date-picker-range.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-date-picker-range.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "startDate": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Start date (YYYY-MM-DD)"
-                },
-                "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": "End date (YYYY-MM-DD)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "end-date",
-                "defaultValue": "''"
-            },
-            "showLabel": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show \"Rango de fechas\" label"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-label",
-                "defaultValue": "true"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Input placeholder"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "''"
-            },
-            "loading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Show loading skeleton"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "loading",
-                "defaultValue": "false"
-            },
-            "maxDaysRange": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Max allowed range in days (0 = unlimited)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-days-range",
-                "defaultValue": "0"
-            },
-            "hideTodayRangeShortcut": {
-                "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-range-shortcut",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "start": {},
-            "end": {},
-            "activeRange": {},
-            "showWarning": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "startDateChange",
-                "name": "startDateChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when start date changes"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "endDateChange",
-                "name": "endDateChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when end date changes"
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }, {
-                "method": "dropiRangeChange",
-                "name": "dropiRangeChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted with full range when both dates are set"
-                },
-                "complexType": {
-                    "original": "DateRange",
-                    "resolved": "DateRange",
-                    "references": {
-                        "DateRange": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-date-picker-range/dropi-date-picker-range.tsx",
-                            "id": "src/components/dropi-date-picker-range/dropi-date-picker-range.tsx::DateRange"
-                        }
-                    }
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "startDate",
-                "methodName": "onStartPropChange"
-            }, {
-                "propName": "endDate",
-                "methodName": "onEndPropChange"
-            }];
-    }
-}

package/dist/collection/components/dropi-drawer/dropi-drawer.css

@@ -1,129 +0,0 @@
-:host { display: contents; font-family: 'Inter', sans-serif; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.drawer-host {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  pointer-events: none;
-  visibility: hidden;
-}
-.drawer-host--open {
-  pointer-events: all;
-  visibility: visible;
-}
-
-/* Backdrop */
-.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; }
-
-/* Panel base */
-.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;
-}
-
-/* Positions */
-.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); }
-
-/* Sizes — coinciden con size-m/l/xl/xxl del host */
-.drawer-panel--size-m { width: 550px; }
-.drawer-panel--size-l { width: 1137px; }
-.drawer-panel--size-xl { width: 1280px; }
-.drawer-panel--size-xxl { width: 1330px; }
-
-/* Header */
-.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); }
-
-/* Body */
-.drawer-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--Size-4, 16px);
-  display: flex;
-  flex-direction: column;
-}
-
-/* Footer — oculto por defecto como en el host */
-.drawer-footer {
-  display: none;
-}