@dropi/ui 0.1.18 → 0.1.20

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; }

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

@@ -0,0 +1,198 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-drawer
+ * Slide-in panel from any side of the screen with backdrop.
+ * Supports header title, close button, and slotted content/footer.
+ */
+export class DropiDrawer {
+    /** Controls visibility */
+    open = false;
+    /** Side from which the drawer slides in */
+    position = 'right';
+    /** Drawer title */
+    drawerTitle = '';
+    /** Width (for left/right drawers) */
+    width = '400px';
+    /** Height (for top/bottom drawers) */
+    height = '50vh';
+    /** Close on backdrop click */
+    closeOnBackdrop = true;
+    /** Emitted when drawer closes */
+    dropiClose;
+    openChanged(val) {
+        if (typeof document !== 'undefined') {
+            document.body.style.overflow = val ? 'hidden' : '';
+        }
+    }
+    close() {
+        this.open = false;
+        this.dropiClose.emit();
+    }
+    render() {
+        const isHorizontal = this.position === 'left' || this.position === 'right';
+        return (h("div", { key: '49b9f893c2c05018301b67234142d4ad2e38a511', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: '4a2263c0ffe74bdb53e1ff4992d3b04f39a55856', class: "drawer-backdrop", onClick: () => {
+                if (this.closeOnBackdrop)
+                    this.close();
+            } }), h("div", { key: 'd2cf49005f3b8a970361fdd725d9903b212abd37', class: `drawer-panel drawer-panel--${this.position}`, style: isHorizontal ? { width: this.width } : { height: this.height }, role: "dialog", "aria-modal": "true" }, h("div", { key: '4f04806b747df0e079e01a27ba307f1625679a08', class: "drawer-header" }, h("span", { key: '211b77262547ac3b45e97966e6cc6b18dbf92b39', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '1a18631b15de75687cab1e21869c8948461716d7', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: '94c49ce2bc26e65be60d0bb7fb0d05c3e4d260e6', name: "Close-small", width: "20px", height: "20px", color: "Gray-Gray-600" }))), h("div", { key: '900cafee62e4dd5b4e6dd89aec680bd19bb44bd8', class: "drawer-body" }, h("slot", { key: 'ef7d81f315b0aaea94bd68048d133a8026685a66' })), h("div", { key: 'd4e6058b84c1fe015b66c540bb1951666bafb35e', class: "drawer-footer" }, h("slot", { key: 'e66380715a41bc41310ff4b3241e868c5e2609b1', name: "footer" })))));
+    }
+    static get is() { return "dropi-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right' | 'top' | 'bottom'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Side from which the drawer slides in"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "position",
+                "defaultValue": "'right'"
+            },
+            "drawerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Drawer title"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drawer-title",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width (for left/right drawers)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'400px'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height (for top/bottom drawers)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'50vh'"
+            },
+            "closeOnBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close on backdrop click"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-backdrop",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiClose",
+                "name": "dropiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when drawer closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "openChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.dropdown {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: var(--dropdown-height, 300px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+}
+
+.dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  cursor: pointer;
+  transition: background 0.15s;
+  user-select: none;
+}
+
+.dropdown__item:hover {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+.dropdown__item--active {
+  background: var(--Primary-Primary-50, #fff5eb);
+}
+
+.dropdown__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.dropdown__label {
+  flex: 1;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}