@dropi/ui 0.1.22 → 0.1.23

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

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

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

@@ -1,169 +0,0 @@
-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": {}
-                }
-            }];
-    }
-}