@dropi/ui 0.1.21 → 0.1.23

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

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

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

@@ -1,209 +0,0 @@
-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: 'c8f5eab8347e089f92ff494ebacf9c3d92e86493', 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

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