@dropi/ui 0.1.19 → 0.1.20

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

@@ -0,0 +1,143 @@
+: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: 500;
+  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, #fff);
+  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: 16px;
+}
+
+.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: 400;
+}
+
+.shortcut-btn:hover {
+  background: var(--Gray-Gray-50, #f5f6f8);
+}
+
+.shortcut-btn.active {
+  background: var(--Gray-Gray-50, #f5f6f8);
+  font-weight: 600;
+}
+
+.warning-box {
+  margin-top: 8px;
+  padding: 4px 8px;
+  border: 1px solid #f4c370;
+  border-radius: 4px;
+  background: #fef8ed;
+}
+
+.warning-message {
+  color: #495057;
+  font-size: 10px;
+  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;
+  }
+}

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 */
+    dropiStartDateChange;
+    /** Emitted when end date changes */
+    dropiEndDateChange;
+    /** 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.dropiStartDateChange.emit(this.start);
+        this.dropiEndDateChange.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": "dropiStartDateChange",
+                "name": "dropiStartDateChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when start date changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiEndDateChange",
+                "name": "dropiEndDateChange",
+                "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,107 @@
+:host { display: contents; }
+*, *::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;
+}
+
+.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, #fff);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.25s ease;
+  overflow: hidden;
+}
+
+/* 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); }
+
+/* Header */
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  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__title {
+  font-size: var(--font-size-m, 14px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-800, #1a2033);
+}
+
+.drawer-header__close {
+  background: none;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border-radius: var(--Border-1, 4px);
+  transition: background 0.15s;
+}
+.drawer-header__close:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+/* Body */
+.drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--Size-4, 16px);
+}
+
+/* Footer */
+.drawer-footer {
+  flex-shrink: 0;
+  padding: var(--Size-3, 12px) var(--Size-4, 16px);
+  border-top: 1px solid var(--Gray-Gray-100, #eceef4);
+}
+.drawer-footer:empty { display: none; }