@dropi/ui 0.1.18 → 0.1.20

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

@@ -0,0 +1,392 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-search
+ * Text search input with optional dropdown results list.
+ * Supports single and multi-select, keyboard navigation, and clear button.
+ */
+export class DropiSearch {
+    /** Placeholder text */
+    placeholder = 'Buscar...';
+    /** Controlled input value */
+    value = '';
+    /** Max character length */
+    maxlength;
+    /** Show clear (×) button when input has text */
+    showClear = true;
+    /** Data source to filter. Pass as array or JSON string */
+    options = [];
+    /** Property name to display and search */
+    labelKey = 'name';
+    /** Allow multiple selection */
+    multiSelect = false;
+    /** Max height of dropdown (CSS value) */
+    dropdownHeight = '240px';
+    /** Label shown above the input */
+    label = '';
+    open = false;
+    selected = [];
+    parsedOptions = [];
+    /** Emitted on input change. e.detail = current text */
+    dropiInput;
+    /** Emitted on blur */
+    dropiBlur;
+    /** Emitted when Enter is pressed. e.detail = current text */
+    dropiKeyEnter;
+    /** Emitted when clear button clicked */
+    dropiClear;
+    /** Emitted when selection changes. e.detail = selected items */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    get filtered() {
+        if (!this.value)
+            return this.parsedOptions;
+        const q = this.value.toLowerCase();
+        return this.parsedOptions.filter(o => String(o[this.labelKey] ?? '').toLowerCase().includes(q));
+    }
+    handleInput(e) {
+        this.value = e.target.value;
+        this.open = this.parsedOptions.length > 0;
+        this.dropiInput.emit(this.value);
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Enter')
+            this.dropiKeyEnter.emit(this.value);
+        if (e.key === 'Escape')
+            this.open = false;
+    }
+    handleClear() {
+        this.value = '';
+        this.open = false;
+        this.dropiClear.emit();
+        this.dropiInput.emit('');
+    }
+    isSelected(opt) {
+        return this.selected.some(s => s[this.labelKey] === opt[this.labelKey]);
+    }
+    selectOption(opt) {
+        if (this.multiSelect) {
+            if (this.isSelected(opt)) {
+                this.selected = this.selected.filter(s => s[this.labelKey] !== opt[this.labelKey]);
+            }
+            else {
+                this.selected = [...this.selected, opt];
+            }
+        }
+        else {
+            this.value = opt[this.labelKey] ?? '';
+            this.selected = [opt];
+            this.open = false;
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    render() {
+        const showDropdown = this.open && this.parsedOptions.length > 0;
+        return (h("div", { key: 'f7b5b5256a42dc534286dd02248b419fddd74d39', class: "search-wrap" }, this.label && h("label", { key: '721b09602381aad6f1f72acdc1029556222144c8', class: "search-label" }, this.label), h("div", { key: 'a6c9cff477367a5a6e3653ddd2ae56066acc9236', class: "search-input-row" }, h("dropi-icon", { key: '95a51114f701aa87c258e620ccd60e2282830554', class: "search-icon", name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'fc0f13786b69d08a1fa71accf5316ca98d6e3823', class: "search-input", type: "text", placeholder: this.placeholder, value: this.value, maxLength: this.maxlength, onInput: (e) => this.handleInput(e), onKeyDown: (e) => this.handleKeyDown(e), onFocus: () => {
+                if (this.parsedOptions.length)
+                    this.open = true;
+            }, onBlur: () => { setTimeout(() => this.open = false, 150); this.dropiBlur.emit(); } }), this.showClear && this.value && (h("button", { key: 'e16e8746a1800927966aec5268c73bf8c4c10275', class: "search-clear", onClick: () => this.handleClear(), "aria-label": "Limpiar" }, h("dropi-icon", { key: '691106cf972751b909d1a0a467268098e3ff02e8', name: "Close-small", width: "16px", height: "16px", color: "Gray-Gray-400" })))), showDropdown && (h("div", { key: '41f2d2f38dbe9d5fb1c48e1b960888fb8cc5738b', class: "search-dropdown", style: { '--dropdown-height': this.dropdownHeight } }, this.filtered.length === 0 ? (h("div", { class: "search-no-results" }, "Sin resultados")) : (this.filtered.map((opt, i) => (h("div", { class: { 'search-option': true, 'search-option--selected': this.isSelected(opt) }, key: i, onMouseDown: (e) => { e.preventDefault(); this.selectOption(opt); } }, this.multiSelect && h("dropi-checkbox", { checked: this.isSelected(opt) }), h("span", { class: "search-option__label" }, opt[this.labelKey])))))))));
+    }
+    static get is() { return "dropi-search"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-search.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-search.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Buscar...'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controlled input value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max character length"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "maxlength"
+            },
+            "showClear": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show clear (\u00D7) button when input has text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-clear",
+                "defaultValue": "true"
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SearchOption[] | string",
+                    "resolved": "SearchOption[] | string",
+                    "references": {
+                        "SearchOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-search/dropi-search.tsx",
+                            "id": "src/components/dropi-search/dropi-search.tsx::SearchOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Data source to filter. Pass as array or JSON string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "labelKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property name to display and search"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label-key",
+                "defaultValue": "'name'"
+            },
+            "multiSelect": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow multiple selection"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-select",
+                "defaultValue": "false"
+            },
+            "dropdownHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max height of dropdown (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-height",
+                "defaultValue": "'240px'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label shown above the input"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "selected": {},
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiInput",
+                "name": "dropiInput",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on input change. e.detail = current text"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiBlur",
+                "name": "dropiBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on blur"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiKeyEnter",
+                "name": "dropiKeyEnter",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when Enter is pressed. e.detail = current text"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiClear",
+                "name": "dropiClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when clear button clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes. e.detail = selected items"
+                },
+                "complexType": {
+                    "original": "SearchOption[]",
+                    "resolved": "SearchOption[]",
+                    "references": {
+                        "SearchOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-search/dropi-search.tsx",
+                            "id": "src/components/dropi-search/dropi-search.tsx::SearchOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }];
+    }
+}

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

@@ -315,7 +315,7 @@ export class DropiSelect {
         ]), !this.isGrouped && this.filteredOptions.map(opt => this.renderOption(opt)), this.filteredOptions.length === 0 && (h("li", { class: "no-results" }, "Sin resultados"))));
     }
     render() {
-        return (h("div", { key: '0062ad3d0ca25d9126dff2f8130c9159a6b356f6', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: 'ad5db5fa4fe19ee2200ab65fd1f3fcdf65bd851f', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: '27e474c585d345168d01e156acf8fdaa9c70dbfc', class: "asterisk" }, " *"))), h("div", { key: '2cc4da6a0109022a7bdb21b4b7410cf1ea2a6c01', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: 'c60838f5ce7a250bb36164a989b68c93973aa661', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a30c3cb4f8abf4b820c1e1d73005547398c8ff12', class: "select-helper" }, h("span", { key: '239dffdcdc8bceca6c21b0160a78078acf96eb09' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '76fced13295c9dff83389920caf128430c2fd35c', class: "select-helper-error" }, h("dropi-icon", { key: 'f1c5798ee5f504387ba80a4ddeca817a6416b770', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '84a93d1b293b2abe0027316c6fd9824410f20efd' }, this.errorText))), this.renderDropdown()));
+        return (h("div", { key: '65b15f83612bdb8b11eb321b2c92321b4c621862', class: "custom-select" }, !this.dropdownType && this.label && (h("label", { key: '10688d90de470bdc4cdd70c21fd62cc820475c9b', class: { 'disabled-label': this.disabled } }, this.label, this.showObligatory && !this.disabled && h("span", { key: 'c8c7e5d8fcc9e029bfd944b4a061289affe39c58', class: "asterisk" }, " *"))), h("div", { key: '6a5d1230282ec67dcaed51d9ecda4570f155a895', class: "dropdown-container" }, this.dropdownType && this.label && (h("div", { key: '83842d69f63c2738cc3bd7b0fbb1232cb4bc7adf', class: "left-label" }, this.label)), this.renderTrigger()), this.helperText && !this.invalid && (h("div", { key: 'a3c1b7552bac043d3d32bfe703f44961bf95df3d', class: "select-helper" }, h("span", { key: '060c5a578be91210aec96d8bdb08eddd9446ea41' }, this.helperText))), this.invalid && this.errorText && (h("div", { key: '97c6348abd628bb5def8b3a2a667e90f7f27d951', class: "select-helper-error" }, h("dropi-icon", { key: '08ab2f0397605bfe0c82ef5ba8ae4b623f98bdb3', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), h("span", { key: '97e1d844b586c2da1518bc9a7c0b69aa856515e7' }, this.errorText))), this.renderDropdown()));
     }
     static get is() { return "dropi-select"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,117 @@
+:host { display: block; height: 100%; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--Neutral-White, #fff);
+  border-right: 1px solid var(--Gray-Gray-100, #eceef4);
+  transition: width 0.25s ease;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+/* Logo */
+.sidebar__logo-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--Size-4, 16px) var(--Size-3, 12px);
+  border-bottom: 1px solid var(--Gray-Gray-100, #eceef4);
+}
+
+.sidebar__logo {
+  height: 28px;
+  object-fit: contain;
+  max-width: 100%;
+}
+
+/* Toggle */
+.sidebar__toggle {
+  align-self: flex-end;
+  margin: var(--Size-2, 8px);
+  background: none;
+  border: 1px solid var(--Gray-Gray-100, #eceef4);
+  border-radius: var(--Border-1, 4px);
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.15s;
+  flex-shrink: 0;
+}
+.sidebar__toggle:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+
+/* Nav */
+.sidebar__nav { flex: 1; overflow-y: auto; padding: var(--Size-2, 8px) 0; }
+.sidebar__list, .sidebar__sub {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Items */
+.sidebar__item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  background: none;
+  border: none;
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-600, #475066);
+  cursor: pointer;
+  text-align: left;
+  transition: background 0.15s, color 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.sidebar__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }
+.sidebar__item--active {
+  background: var(--Primary-Primary-50, #fff5eb);
+  color: var(--Primary-Primary-500, #f49a3d);
+  font-weight: var(--font-weight-bold, 700);
+}
+.sidebar__item--depth1 { font-size: var(--font-size-xs, 10px); }
+
+.sidebar__item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sidebar__badge {
+  background: var(--Error-Error-500, #f46a6b);
+  color: var(--Neutral-White, #fff);
+  font-size: 9px;
+  font-weight: 700;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  flex-shrink: 0;
+}
+
+.sidebar__sub { padding-left: 0; }
+
+/* Footer */
+.sidebar__footer {
+  padding: var(--Size-3, 12px);
+  border-top: 1px solid var(--Gray-Gray-100, #eceef4);
+  flex-shrink: 0;
+}
+.sidebar__footer:empty { display: none; }
+
+/* Collapsed state */
+.sidebar--collapsed .sidebar__item {
+  justify-content: center;
+  padding: var(--Size-2, 8px);
+}