@dropi/ui 0.1.27 → 0.1.28

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

@@ -0,0 +1,327 @@
+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

@@ -0,0 +1,129 @@
+: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;
+}