@dropi/ui 0.1.27 → 0.1.28

package/dist/collection/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.js

@@ -0,0 +1,267 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-checkbox-selection-list
+ * Searchable list of checkbox options with multi-select support.
+ */
+export class DropiCheckboxSelectionList {
+    /** Options array or JSON string */
+    options = [];
+    /** Show search filter */
+    showFilter = true;
+    /** Search placeholder */
+    filterPlaceholder = 'Search';
+    /** Show "no results" message */
+    showNotFound = true;
+    /** Empty state message */
+    notFoundMessage = 'No related results found';
+    /** Allow multiple selection */
+    multiSelect = true;
+    /** Debounce delay in ms for search input (matches Angular `searchDelay`) */
+    searchDelay = 100;
+    filterText = '';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes — matches Angular 'checkedValues' */
+    checkedValues;
+    /** Emitted on search — matches Angular 'onSearch' */
+    onSearch;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() { this.optionsChanged(this.options); }
+    get filtered() {
+        if (!this.filterText)
+            return this.parsedOptions;
+        const q = this.filterText.toLowerCase();
+        return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));
+    }
+    toggle(id) {
+        if (this.multiSelect) {
+            this.selected = this.selected.includes(id)
+                ? this.selected.filter(s => s !== id)
+                : [...this.selected, id];
+        }
+        else {
+            this.selected = this.selected.includes(id) ? [] : [id];
+        }
+        this.checkedValues.emit(this.selected);
+    }
+    render() {
+        const items = this.filtered;
+        return (h("div", { key: 'a86957a361ddab935966496e85da0474d6c7618a', class: "csl" }, this.showFilter && (h("div", { key: 'c6e6d3c7386a788c0e3141ac77b78b597020e43d', class: "csl__search" }, h("dropi-icon", { key: '02b8bbc778c1811f65f4cd07bfd0618a0c647573', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '935768e39f732099837e2d3dc4791ab2f7f31273', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+                this.filterText = e.target.value;
+                this.onSearch.emit(this.filterText);
+            } }), this.filterText && (h("button", { key: 'b93947ffd70113fc80e425dd0da04cce04ad3f27', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, h("dropi-icon", { key: 'b2e152f7276a914fc03664dabdb3574a2cbeb2c6', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '6010ffc9d6ff60dc444da1274609f2b15f69d4a8', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+            const checked = this.selected.includes(opt.id);
+            return (h("div", { class: "csl__item", key: opt.id, onClick: () => this.toggle(opt.id) }, h("dropi-checkbox", { checked: checked }), opt.icon && h("img", { class: "csl__icon", src: opt.icon, alt: opt.label }), h("span", { class: "csl__label" }, opt.label)));
+        })))));
+    }
+    static get is() { return "dropi-checkbox-selection-list"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-checkbox-selection-list.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-checkbox-selection-list.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CheckboxOption[] | string",
+                    "resolved": "CheckboxOption[] | string",
+                    "references": {
+                        "CheckboxOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx",
+                            "id": "src/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.tsx::CheckboxOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options array or JSON string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "showFilter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show search filter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-filter",
+                "defaultValue": "true"
+            },
+            "filterPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Search placeholder"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "filter-placeholder",
+                "defaultValue": "'Search'"
+            },
+            "showNotFound": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show \"no results\" message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-not-found",
+                "defaultValue": "true"
+            },
+            "notFoundMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Empty state message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "not-found-message",
+                "defaultValue": "'No related results found'"
+            },
+            "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": "true"
+            },
+            "searchDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce delay in ms for search input (matches Angular `searchDelay`)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "search-delay",
+                "defaultValue": "100"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filterText": {},
+            "selected": {},
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "checkedValues",
+                "name": "checkedValues",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes \u2014 matches Angular 'checkedValues'"
+                },
+                "complexType": {
+                    "original": "(string | number)[]",
+                    "resolved": "(string | number)[]",
+                    "references": {}
+                }
+            }, {
+                "method": "onSearch",
+                "name": "onSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on search \u2014 matches Angular 'onSearch'"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }];
+    }
+}

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

@@ -0,0 +1,68 @@
+:host {
+  display: inline-flex;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--Size-1, 4px);
+  height: 24px;
+  padding: 0 var(--Size-2, 8px);
+  border-radius: var(--Border-2, 8px);
+  font-size: var(--font-size-xs, 10px);
+  font-family: inherit;
+  width: fit-content;
+  max-width: 200px;
+}
+
+/* ── Style variants ─────────────────────────────────────── */
+.chip--filters {
+  background: var(--Primary-Primary-50, #fff5eb);
+  border: 1px solid var(--Primary-Primary-200, #fbd4a3);
+  color: var(--Primary-Primary-600, #d4872e);
+}
+
+.chip--fill {
+  background: var(--Gray-Gray-100, #e6eaf2);
+  border: 1px solid transparent;
+  color: var(--Gray-Gray-700, #32394d);
+}
+
+/* ── Avatar ─────────────────────────────────────────────── */
+.chip__avatar {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+/* ── Label ──────────────────────────────────────────────── */
+.chip__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+/* ── Close button ───────────────────────────────────────── */
+.chip__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.15s;
+}
+
+.chip__close:hover {
+  opacity: 1;
+}

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

@@ -0,0 +1,169 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-chips
+ * Chip/tag-like element with optional icon, avatar, and close button.
+ * Use <slot> for the chip label text.
+ */
+export class DropiChips {
+    /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
+    customStyle = 'fill';
+    /** Content type */
+    type = 'icon';
+    /** Avatar image URL (when type = 'avatar') */
+    urlImg = '';
+    /** Show the close/remove icon */
+    showIcon = false;
+    /** Icon name (when type = 'icon') */
+    icon = '';
+    /** Emitted when the close icon is clicked */
+    onClose;
+    render() {
+        return (h("div", { key: '1d2faf302cc3eb832d55f46f98a7817fb616e4e1', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '3014d189c71a8d3bc23f11caf1181285c6b1b0ed', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '42c60e26f35e08582045833049d140c3aceaa11d', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: '474a4adfc086e20b2007f1b423f53b29454546be', class: "chip__text" }, h("slot", { key: '3c3460ffc17a54b8446b63f7b7c7a76162bb5838' })), this.showIcon && (h("button", { key: '6da5b10c81f203dcd204c0fa93babbcab8aaba16', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '14ef2e91ede7847830b0e491fd844f9efa637f9a', name: "Cross-circle", width: "14px", height: "14px", color: "currentColor" })))));
+    }
+    static get is() { return "dropi-chips"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-chips.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-chips.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "customStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipStyle",
+                    "resolved": "\"fill\" | \"filtrers\"",
+                    "references": {
+                        "ChipStyle": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-chips/dropi-chips.tsx",
+                            "id": "src/components/dropi-chips/dropi-chips.tsx::ChipStyle"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual style (named customStyle to avoid conflict with HTMLElement.style)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-style",
+                "defaultValue": "'fill'"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipType",
+                    "resolved": "\"avatar\" | \"icon\" | \"text\"",
+                    "references": {
+                        "ChipType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-chips/dropi-chips.tsx",
+                            "id": "src/components/dropi-chips/dropi-chips.tsx::ChipType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Content type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'icon'"
+            },
+            "urlImg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar image URL (when type = 'avatar')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "url-img",
+                "defaultValue": "''"
+            },
+            "showIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the close/remove icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-icon",
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name (when type = 'icon')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "onClose",
+                "name": "onClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the close icon is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}