@dropi/ui 0.1.26 → 0.1.28

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

@@ -0,0 +1,287 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-drawer
+ * Slide-in panel from any side of the screen with backdrop.
+ * Matches dropi-core_front implementation with size and headless support.
+ */
+export class DropiDrawer {
+    drawerTitle = '';
+    /** Controls visibility (alias of open for Angular parity) */
+    drawerIsOpen = false;
+    /** Controls visibility */
+    open = false;
+    /** Side from which the drawer slides in */
+    position = 'right';
+    /** Preset size (overrides width when set): 'm' | 'l' | 'xl' | 'xxl' */
+    size = '';
+    /** Custom width for left/right drawers (used when size is not set) */
+    width = '400px';
+    /** Custom height for top/bottom drawers */
+    height = '50vh';
+    /** Hide the header (headless mode) */
+    headless = false;
+    /** Close on backdrop click */
+    closeOnBackdrop = true;
+    /** Emitted when drawer closes */
+    dropiClose;
+    openChanged(val) {
+        this.open = val;
+        this.drawerIsOpen = val;
+        if (typeof document !== 'undefined') {
+            if (val)
+                document.body.classList.add('dropi-modal-open');
+            else
+                document.body.classList.remove('dropi-modal-open');
+        }
+    }
+    componentWillLoad() {
+        if (this.drawerIsOpen)
+            this.open = true;
+        if (this.open)
+            this.drawerIsOpen = true;
+    }
+    close() {
+        this.open = false;
+        this.dropiClose.emit();
+    }
+    render() {
+        const isHorizontal = this.position === 'left' || this.position === 'right';
+        // Clase de tamaño según prop size
+        const sizeClass = this.size ? `drawer-panel--size-${this.size}` : '';
+        // Estilo inline solo cuando no hay size preset
+        const panelStyle = {};
+        if (!this.size) {
+            if (isHorizontal)
+                panelStyle['width'] = this.width;
+            else
+                panelStyle['height'] = this.height;
+        }
+        return (h("div", { key: '7792ce8e001adf404aef387e35c5fb601f69b1e2', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: '186c33be6a7cd1e34e6d1f852219be91b24a15b9', class: "drawer-backdrop", onClick: () => {
+                if (this.closeOnBackdrop)
+                    this.close();
+            } }), h("div", { key: '3a48c465707125c2de1e369e70375689fe5ff9c1', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, h("div", { key: '840bb2933bc7e2264269bbadd5d9d61649fe58fe', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, h("h3", { key: 'bfd9c7db02e9db07ce32115ca6386a9840c61288', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '6dc350e26f74d4e3aead7697bd2f5552e49e833c', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: 'fcc5331391009f97254db5f729c61631edc33d8c', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), h("div", { key: 'e50ae31043bde759a79fbc9b4f734e06dc6c2a3f', class: "drawer-body" }, h("slot", { key: 'f1f0d7314b8bd7f6fd6fdec88a818963c1d5834f' })), h("div", { key: 'b14833f885757bbcfa687b7b2ee1cf847301134b', class: "drawer-footer" }, h("slot", { key: '5cba1759160a934c3b54166914a10b1335075151', 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 {
+            "drawerTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drawer-title",
+                "defaultValue": "''"
+            },
+            "drawerIsOpen": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility (alias of open for Angular parity)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drawer-is-open",
+                "defaultValue": "false"
+            },
+            "open": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "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'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'m' | 'l' | 'xl' | 'xxl' | ''",
+                    "resolved": "\"\" | \"l\" | \"m\" | \"xl\" | \"xxl\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preset size (overrides width when set): 'm' | 'l' | 'xl' | 'xxl'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "''"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom width for left/right drawers (used when size is not set)"
+                },
+                "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": "Custom height for top/bottom drawers"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'50vh'"
+            },
+            "headless": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the header (headless mode)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "headless",
+                "defaultValue": "false"
+            },
+            "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"
+            }, {
+                "propName": "drawerIsOpen",
+                "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, #ffffff);
+}
+
+.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;
+}

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

@@ -0,0 +1,209 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-dropdown
+ * Scrollable list with checkboxes for multi-selection.
+ * Pass options as an array (JS) or JSON string.
+ */
+export class DropiDropdown {
+    /** Options array or JSON string */
+    options = [];
+    /** Property name for the label */
+    valueModel = 'name';
+    /** Height of the dropdown (CSS value) */
+    height = '';
+    /** Whether the dropdown is inside a select component */
+    isInSelect = false;
+    /** Configuration parameters for the dropdown items */
+    parameters = {
+        type: 'checkbox',
+        icon: '',
+        iconCurrier: false,
+    };
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes — matches Angular 'modelChange' */
+    modelChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    isSelected(opt) {
+        return (this.selected ?? []).some(s => JSON.stringify(s) === JSON.stringify(opt));
+    }
+    toggleOption(opt) {
+        if (this.isSelected(opt)) {
+            this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));
+        }
+        else {
+            this.selected = [...this.selected, opt];
+        }
+        this.modelChange.emit(this.selected);
+    }
+    render() {
+        const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';
+        const customHeight = this.height || '388px';
+        return (h("div", { key: '274caba83e2f697257e3803b85517a31d4f0aea8', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
+            const label = opt[this.valueModel] ?? String(opt);
+            const active = !!opt.checked || this.isSelected(opt);
+            return (h("div", { class: "content-dropdown", key: i }, h("div", { class: { 'container-check-dropdown': true, 'active-option': active }, onClick: () => this.toggleOption(opt) }, this.parameters.type === 'checkbox' && (h("dropi-checkbox", { checked: active })), this.parameters.iconCurrier && (h("dropi-avatars", { image: opt[this.valueModel], type: "transport" })), this.parameters.icon && (h("dropi-avatars", { image: opt.image, type: "transport" })), h("span", { class: "Body-M-Regular" }, label))));
+        })));
+    }
+    static get is() { return "dropi-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOption[] | string",
+                    "resolved": "DropdownOption[] | string",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-dropdown/dropi-dropdown.tsx",
+                            "id": "src/components/dropi-dropdown/dropi-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options array or JSON string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "valueModel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property name for the label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-model",
+                "defaultValue": "'name'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the dropdown (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "''"
+            },
+            "isInSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dropdown is inside a select component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-in-select",
+                "defaultValue": "false"
+            },
+            "parameters": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    type: 'checkbox';\n    icon: string;\n    iconCurrier: boolean;\n  }",
+                    "resolved": "{ type: \"checkbox\"; icon: string; iconCurrier: boolean; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Configuration parameters for the dropdown items"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{\n    type: 'checkbox',\n    icon: '',\n    iconCurrier: false,\n  }"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selected": {},
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "modelChange",
+                "name": "modelChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes \u2014 matches Angular 'modelChange'"
+                },
+                "complexType": {
+                    "original": "DropdownOption[]",
+                    "resolved": "DropdownOption[]",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-dropdown/dropi-dropdown.tsx",
+                            "id": "src/components/dropi-dropdown/dropi-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-empty-state/dropi-empty-state.css

@@ -0,0 +1,59 @@
+:host {
+  display: block;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Size-3, 12px);
+  padding: var(--Size-6, 32px) var(--Size-5, 20px);
+  text-align: center;
+}
+
+.empty-state-img {
+  max-width: 200px;
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  filter: brightness(0) saturate(100%) invert(73%) sepia(9%) saturate(503%) hue-rotate(187deg) brightness(91%) contrast(88%);
+}
+
+.empty-state-svg {
+  width: 80px;
+  height: 80px;
+}
+
+.empty-state-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.empty-state-title {
+  margin: 0;
+  font-size: var(--font-size-l, 18px);
+  font-weight: var(--font-weight-bold, 700);
+  color: var(--Gray-Gray-700, #32394d);
+  line-height: 1.3;
+}
+
+.empty-state-description {
+  margin: 0;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-500, #69738c);
+  line-height: 1.6;
+  max-width: 400px;
+}
+
+.empty-state-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-3, 12px);
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: var(--Size-2, 8px);
+}