@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,284 @@
+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') {
+            document.body.style.overflow = val ? 'hidden' : '';
+        }
+    }
+    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: '2236d22981ab82b57de3d442194403d5d79ce1c8', class: { 'drawer-host': true, 'drawer-host--open': this.open } }, h("div", { key: 'c0132eefbe379fab8c6dc2fb084acf0390fc8d7a', class: "drawer-backdrop", onClick: () => {
+                if (this.closeOnBackdrop)
+                    this.close();
+            } }), h("div", { key: '111dbff06af3627ef8e9c593b2fb8598da636009', class: `drawer-panel drawer-panel--${this.position}${sizeClass ? ' ' + sizeClass : ''}`, style: panelStyle, role: "dialog", "aria-modal": "true" }, h("div", { key: '41e891fe77ba69f3e5f3a450da6e4017f0764b59', class: { 'drawer-header': true, 'drawer-header--headless': this.headless } }, h("h3", { key: '10212f728327670142b23949eb2698e4937d7c27', class: "drawer-header__title" }, this.drawerTitle), h("button", { key: '0736447705965fb9222edeb993d85c5e1d567476', class: "drawer-header__close", onClick: () => this.close(), "aria-label": "Cerrar" }, h("dropi-icon", { key: '1d8d27869bd79c5095f56f85b56127673e89d509', name: "Close-small", width: "32px", height: "32px", color: "Gray-Gray-400" }))), h("div", { key: '398f9a7e3e5dd1bf861ca7b14961a0d1a217a229', class: "drawer-body" }, h("slot", { key: '2555a218f61c56c017ae1ed2ea1f34048d5e5b51' })), h("div", { key: '88e430bdcba47e50760051e0310788336f11a8c1', class: "drawer-footer" }, h("slot", { key: '2de19e6270c61ba5a43d39707db6ea669d9037d1', 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": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "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": "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'"
+            },
+            "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

@@ -12,7 +12,7 @@
   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);
+  background: var(--Neutral-White, #ffffff);
 }
 
 .dropdown__item {

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

@@ -7,16 +7,22 @@ import { h } from "@stencil/core";
 export class DropiDropdown {
     /** Options array or JSON string */
     options = [];
-    /** Property name to display as the option label */
+    /** Property name for the label */
     valueModel = 'name';
-    /** Property name to use as the option image/avatar URL */
-    imageModel = '';
-    /** Max height of the list container (CSS value) */
-    height = '300px';
+    /** 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. e.detail = selected items array */
-    dropiChange;
+    /** Emitted when selection changes — matches Angular 'modelChange' */
+    modelChange;
     optionsChanged(val) {
         this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -33,14 +39,15 @@ export class DropiDropdown {
         else {
             this.selected = [...this.selected, opt];
         }
-        this.dropiChange.emit(this.selected);
+        this.modelChange.emit(this.selected);
     }
     render() {
-        return (h("div", { key: 'e9b2fe1b667a4d83c0d142ff9ba8187d848f606d', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+        const containerClass = this.isInSelect ? 'container-dropi-dropdown-select' : 'container-dropi-dropdown';
+        const customHeight = this.height || '388px';
+        return (h("div", { key: 'c8f5eab8347e089f92ff494ebacf9c3d92e86493', class: containerClass, style: { '--custom-height': customHeight } }, this.parsedOptions.map((opt, i) => {
             const label = opt[this.valueModel] ?? String(opt);
-            const imgUrl = this.imageModel ? opt[this.imageModel] : '';
-            const active = this.isSelected(opt);
-            return (h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, h("dropi-checkbox", { checked: active }), imgUrl && (h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), h("span", { class: "dropdown__label" }, label)));
+            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"; }
@@ -95,7 +102,7 @@ export class DropiDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Property name to display as the option label"
+                    "text": "Property name for the label"
                 },
                 "getter": false,
                 "setter": false,
@@ -103,7 +110,7 @@ export class DropiDropdown {
                 "attribute": "value-model",
                 "defaultValue": "'name'"
             },
-            "imageModel": {
+            "height": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -115,33 +122,51 @@ export class DropiDropdown {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Property name to use as the option image/avatar URL"
+                    "text": "Height of the dropdown (CSS value)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "image-model",
+                "attribute": "height",
                 "defaultValue": "''"
             },
-            "height": {
-                "type": "string",
+            "isInSelect": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Max height of the list container (CSS value)"
+                    "text": "Whether the dropdown is inside a select component"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "height",
-                "defaultValue": "'300px'"
+                "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  }"
             }
         };
     }
@@ -153,14 +178,14 @@ export class DropiDropdown {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "modelChange",
+                "name": "modelChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when selection changes. e.detail = selected items array"
+                    "text": "Emitted when selection changes \u2014 matches Angular 'modelChange'"
                 },
                 "complexType": {
                     "original": "DropdownOption[]",

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

@@ -19,6 +19,7 @@
   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 {

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

@@ -4,24 +4,26 @@ import { h } from "@stencil/core";
  * Empty state illustration with title, description and optional action button.
  */
 export class DropiEmptyState {
-    /** Title text */
-    header = '';
+    /** Title text (matches Angular 'title') */
+    title = '';
     /** Description text */
     description = '';
     /** URL of the illustration image */
     imageUrl = '';
     /** Alt text for the image */
     imageAlt = 'Sin resultados';
-    /** Primary action button label (empty = hidden) */
-    actionLabel = '';
-    /** Secondary action button label (empty = hidden) */
-    secondaryLabel = '';
-    /** Emitted when primary action button is clicked */
-    dropiAction;
-    /** Emitted when secondary action button is clicked */
-    dropiSecondaryAction;
+    /** Primary action button label (empty = hidden) — matches Angular 'buttonText' */
+    buttonText = '';
+    /** Icon name for button — matches Angular 'buttonIcon' */
+    buttonIcon = '';
+    /** State of the illustration (default, loading, sorry, love, success, error) — matches Angular 'dropiIcon' */
+    dropiIcon = 'default';
+    /** Severity for the action button — matches Angular 'buttonSeverity' */
+    buttonSeverity = 'tertiary';
+    /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
+    buttonClickEvent;
     render() {
-        return (h("div", { key: '7c393f2a56387d573162068576809a6f6a975a34', class: "empty-state" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-placeholder" }, h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && h("h3", { key: 'd1fbe8d995e295cb4a72064745e7b521b35bbad6', class: "empty-state-title" }, this.header), this.description && h("p", { key: '948e6bcb6e07fab09261e6f68d658bf1faf17c8e', class: "empty-state-description" }, this.description), h("slot", { key: '8663d0a1e2df4ee914a25a0bda27e5f2ee41a941' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: 'af582b6316e8ebf2700589b55deef1fe8fbf08f2', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: '1e69d9a9143708157a20dba1179498bd01203af2', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '3850ddf4716b2732bb21ee9fa731e90022b2ecd2', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
+        return (h("div", { key: '504b4ac16374bc3d54ab02a0729d867508dee0ba', class: "empty-state" }, h("div", { key: '11cbef9d7a1d57bffa68ef4d055c29453c9d050b', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && h("h3", { key: '398a1e5958e1008875391053a82f77db586aaad8', class: "empty-state-title" }, this.title), this.description && h("p", { key: 'a51b76390add2ffbfcdf5288a1daf8a872c1bfc0', class: "empty-state-description" }, this.description), h("slot", { key: '1024f4efdc69ed513384b8b0082bb9915673e724' }), this.buttonText && (h("div", { key: '6706d58d3380e7c6668c8b465d19249cd24cd7f8', class: "empty-state-actions" }, h("dropi-button", { key: '4440e6ca851d27b84cab67ee24466be0a89e8e9e', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
     }
     static get is() { return "dropi-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -37,7 +39,7 @@ export class DropiEmptyState {
     }
     static get properties() {
         return {
-            "header": {
+            "title": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -49,12 +51,12 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Title text"
+                    "text": "Title text (matches Angular 'title')"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "header",
+                "attribute": "title",
                 "defaultValue": "''"
             },
             "description": {
@@ -117,7 +119,7 @@ export class DropiEmptyState {
                 "attribute": "image-alt",
                 "defaultValue": "'Sin resultados'"
             },
-            "actionLabel": {
+            "buttonText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -129,15 +131,15 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Primary action button label (empty = hidden)"
+                    "text": "Primary action button label (empty = hidden) \u2014 matches Angular 'buttonText'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "action-label",
+                "attribute": "button-text",
                 "defaultValue": "''"
             },
-            "secondaryLabel": {
+            "buttonIcon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -149,41 +151,66 @@ export class DropiEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Secondary action button label (empty = hidden)"
+                    "text": "Icon name for button \u2014 matches Angular 'buttonIcon'"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "secondary-label",
+                "attribute": "button-icon",
                 "defaultValue": "''"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dropiAction",
-                "name": "dropiAction",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
+            },
+            "dropiIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"loading\" | \"love\" | \"sorry\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when primary action button is clicked"
+                    "text": "State of the illustration (default, loading, sorry, love, success, error) \u2014 matches Angular 'dropiIcon'"
                 },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropi-icon",
+                "defaultValue": "'default'"
+            },
+            "buttonSeverity": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
+                    "original": "'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
                     "references": {}
-                }
-            }, {
-                "method": "dropiSecondaryAction",
-                "name": "dropiSecondaryAction",
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Severity for the action button \u2014 matches Angular 'buttonSeverity'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-severity",
+                "defaultValue": "'tertiary'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClickEvent",
+                "name": "buttonClickEvent",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when secondary action button is clicked"
+                    "text": "Emitted when button is clicked \u2014 matches Angular 'buttonClickEvent'"
                 },
                 "complexType": {
                     "original": "void",