@dropi/ui 0.1.21 → 0.1.23

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: '1efcba7f06d54e0f8953330a83d946362e8283a2', class: { 'chip': true, [`chip--${this.customStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '8b5b984cbd85afc86a23907b6cfb0a26b59c029c', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '8e5c4ca10f94e012421d88b715aa2f49c6261c52', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: 'caf36314e2bd2704d7ef11e9b75ce5e5def1c2d4', class: "chip__text" }, h("slot", { key: 'de0b015d547872891baefcca9c9cd5c07893e844' })), this.showIcon && (h("button", { key: 'd9998ff121304a99b772e5af04006f90db1c2958', class: "chip__close", onClick: () => this.onClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: '08491f358bec0380a8ff4ee95bd2d823922a0c68', 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": {}
-                }
-            }];
-    }
-}

package/dist/collection/components/dropi-city-selector/dropi-city-selector.css

@@ -1,218 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-  position: relative;
-}
-
-*, *::before, *::after { box-sizing: border-box; }
-
-/* ── Wrapper ──────────────────────────────────────────────────────── */
-.city-selector {
-  position: relative;
-  width: 100%;
-}
-
-/* ── Trigger ──────────────────────────────────────────────────────── */
-.selector-trigger {
-  width: 100%;
-  min-height: 44px;
-  padding: 6px 12px;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #ffffff);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  cursor: pointer;
-  text-align: left;
-  font-family: inherit;
-  transition: border-color 0.15s;
-}
-
-.selector-trigger:hover:not(:disabled) {
-  border-color: var(--Gray-Gray-300, #a3abbf);
-}
-
-.selector-trigger:focus {
-  outline: none;
-  border-color: var(--Info-Info-500, #50a5f1);
-}
-
-.city-selector--disabled .selector-trigger {
-  background: var(--Gray-Gray-50, #f7f8fa);
-  border-color: var(--Gray-Gray-100, #e6eaf2);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-/* ── Chips area ───────────────────────────────────────────────────── */
-.chips-area {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  flex: 1;
-  min-height: 26px;
-  align-items: center;
-}
-
-.placeholder {
-  color: var(--Gray-Gray-400, #858ea6);
-  font-size: var(--font-size-s, 14px);
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  background: var(--Primary-Primary-50, #fff8f0);
-  border: 1px solid var(--Primary-Primary-200, #fcd5a8);
-  border-radius: var(--Border-1, 4px);
-  padding: 2px 6px;
-  font-size: var(--font-size-xs, 12px);
-  color: var(--Primary-Primary-700, #b85c00);
-}
-
-.chip-remove {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-}
-
-/* ── Dropdown ─────────────────────────────────────────────────────── */
-.dropdown {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  background: var(--Neutral-White, #ffffff);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
-  z-index: 200;
-  overflow: hidden;
-}
-
-/* ── Search ───────────────────────────────────────────────────────── */
-.search-wrap {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
-}
-
-.search-field {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.search-input {
-  width: 100%;
-  height: 36px;
-  padding: 0 36px 0 12px;
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  font-size: var(--font-size-s, 14px);
-  font-family: inherit;
-  color: var(--Gray-Gray-700, #32394d);
-  background: var(--Gray-Gray-50, #f7f8fa);
-  outline: none;
-  transition: border-color 0.15s;
-}
-
-.search-input:focus {
-  border-color: var(--Info-Info-500, #50a5f1);
-  background: var(--Neutral-White, #ffffff);
-}
-
-.search-input::placeholder {
-  color: var(--Gray-Gray-400, #858ea6);
-}
-
-.search-icon {
-  position: absolute;
-  right: 10px;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-}
-
-/* ── Options list ─────────────────────────────────────────────────── */
-.options-list {
-  max-height: 280px;
-  overflow-y: auto;
-  background: var(--Neutral-White, #ffffff);
-}
-
-/* Scrollbar refinado */
-.options-list::-webkit-scrollbar { width: 6px; }
-.options-list::-webkit-scrollbar-track { background: transparent; }
-.options-list::-webkit-scrollbar-thumb {
-  background: var(--Gray-Gray-200, #c3c9d9);
-  border-radius: 4px;
-}
-
-/* ── Group label ──────────────────────────────────────────────────── */
-.group-label {
-  padding: 14px 16px 8px;
-  font-size: var(--font-size-m, 16px);
-  font-weight: var(--font-weight-bold, 700);
-  color: var(--Gray-Gray-800, #1f2433);
-  background: var(--Neutral-White, #ffffff);
-}
-
-/* ── City option ──────────────────────────────────────────────────── */
-.city-option {
-  padding: 10px 16px;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  cursor: pointer;
-  font-size: var(--font-size-s, 14px);
-  color: var(--Gray-Gray-700, #32394d);
-  background: var(--Neutral-White, #ffffff);
-  transition: background 0.1s;
-  user-select: none;
-}
-
-.city-option:hover {
-  background: var(--Gray-Gray-50, #f7f8fa);
-}
-
-.city-option--selected .city-label {
-  color: var(--Gray-Gray-800, #1f2433);
-  font-weight: var(--font-weight-medium, 500);
-}
-
-/* ── Checkbox visual ──────────────────────────────────────────────── */
-.checkbox {
-  width: 22px;
-  height: 22px;
-  border: 1.5px solid var(--Gray-Gray-300, #c3c9d9);
-  border-radius: var(--Border-1, 6px);
-  background: var(--Neutral-White, #ffffff);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  transition: border-color 0.15s, background 0.15s;
-}
-
-.checkbox--checked {
-  border-color: var(--Primary-Primary-500, #f49a3d);
-  background: var(--Primary-Primary-500, #f49a3d);
-}
-
-.city-label {
-  flex: 1;
-}
-
-/* ── Empty ────────────────────────────────────────────────────────── */
-.no-results {
-  padding: 20px 16px;
-  text-align: center;
-  color: var(--Gray-Gray-400, #858ea6);
-  font-size: var(--font-size-s, 14px);
-}

package/dist/collection/components/dropi-city-selector/dropi-city-selector.js

@@ -1,234 +0,0 @@
-import { h } from "@stencil/core";
-/**
- * @component dropi-city-selector
- * Multi-select city picker with grouped options and chip display.
- * Pass options as a JSON string or CityGroup[] array.
- *
- * @example
- * <dropi-city-selector
- *   options='[{"label":"Cundinamarca","value":"CUN","items":[{"label":"Bogotá","value":"BOG"}]}]'
- *   placeholder="Selecciona ciudades"
- * ></dropi-city-selector>
- */
-export class DropiCitySelector {
-    /** Grouped city options (array or JSON string) */
-    options = [];
-    /** Currently selected city values */
-    selectedCities = [];
-    /** Placeholder text */
-    placeholder = 'Seleccione una ciudad';
-    /** Disable the selector */
-    disabled = false;
-    /** Emitted when selection changes. Detail = selected values array. */
-    selectedCitiesChange;
-    isOpen = false;
-    selected = [];
-    parsedOptions = [];
-    searchTerm = '';
-    el;
-    handleDocClick(e) {
-        if (this.isOpen && !e.composedPath().includes(this.el)) {
-            this.isOpen = false;
-        }
-    }
-    optionsChanged(val) {
-        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : val;
-    }
-    selectedChanged(val) {
-        this.selected = typeof val === 'string' ? JSON.parse(val) : [...val];
-    }
-    componentWillLoad() {
-        this.optionsChanged(this.options);
-        this.selectedChanged(this.selectedCities);
-    }
-    get filtered() {
-        if (!this.searchTerm)
-            return this.parsedOptions;
-        const t = this.searchTerm.toLowerCase();
-        return this.parsedOptions
-            .map(g => ({ ...g, items: g.items.filter(c => c.label.toLowerCase().includes(t)) }))
-            .filter(g => g.items.length > 0);
-    }
-    toggle() {
-        if (this.disabled)
-            return;
-        this.isOpen = !this.isOpen;
-    }
-    toggleCity(value, e) {
-        e.stopPropagation();
-        if (this.selected.includes(value)) {
-            this.selected = this.selected.filter(v => v !== value);
-        }
-        else {
-            this.selected = [...this.selected, value];
-        }
-        this.selectedCitiesChange.emit([...this.selected]);
-    }
-    removeCity(value, e) {
-        e.stopPropagation();
-        this.selected = this.selected.filter(v => v !== value);
-        this.selectedCitiesChange.emit([...this.selected]);
-    }
-    getLabel(value) {
-        for (const g of this.parsedOptions) {
-            const found = g.items.find(c => c.value == value);
-            if (found)
-                return found.label;
-        }
-        return String(value);
-    }
-    render() {
-        const groups = this.filtered;
-        return (h("div", { key: 'af6acd88ea001105c036726bed11e0caa6012f10', class: { 'city-selector': true, 'city-selector--disabled': this.disabled } }, h("button", { key: '4a5c368ddea3f43ef9ef42dc68f28b47b642aadb', type: "button", class: "selector-trigger", disabled: this.disabled, onClick: () => this.toggle(), "aria-haspopup": "listbox", "aria-expanded": this.isOpen }, h("div", { key: '769288d6567d2f6d453b81198e3ab456c5042443', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: '152b570fd02028d8e1788ced03d56f3853dd98d4', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { type: "button", class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, h("dropi-icon", { name: "Close-small", width: "10px", height: "10px", color: "Primary-Primary-500" })))))), h("dropi-icon", { key: '806ec368945b587fcb9125ca3a262ff2c6f9247c', name: this.isOpen ? 'Arrow-Up-2' : 'Arrow-Down-2', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: '1249ca520defb5fd21d5c5da098c93c3e66bebd3', class: "dropdown", role: "listbox" }, h("div", { key: '244a7a22db381014da6672e310f2d21a9cf39a63', class: "search-wrap" }, h("div", { key: '871a48407ec66d7e9e95a9ab32ff8d74842a4e6e', class: "search-field" }, h("input", { key: '20d5543bae44e70fc4fd61470cae413f29c17687', class: "search-input", type: "text", placeholder: "Buscar...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; }, autoComplete: "off" }), h("span", { key: '44bde8e0ddb6cbade01e4743c9d111fa7c65aa94', class: "search-icon" }, h("dropi-icon", { key: 'c577e87fd8ffd3d4d444541840a139430c96e503', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" })))), h("div", { key: 'c7abe328e26838d49465d3b2767a2b90806e0e05', class: "options-list" }, groups.length === 0 && (h("div", { key: '1f583667dda2e6540254b3155029c97647cb58fb', class: "no-results" }, "Sin resultados")), groups.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => {
-            const isSelected = this.selected.includes(city.value);
-            return (h("div", { key: String(city.value), class: { 'city-option': true, 'city-option--selected': isSelected }, onClick: (e) => this.toggleCity(city.value, e), role: "option", "aria-selected": isSelected }, h("span", { class: { 'checkbox': true, 'checkbox--checked': isSelected } }, isSelected && (h("dropi-icon", { name: "Check", width: "10px", height: "10px", color: "Neutral-White" }))), h("span", { class: "city-label" }, city.label)));
-        })))))))));
-    }
-    static get is() { return "dropi-city-selector"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["dropi-city-selector.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["dropi-city-selector.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "options": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "CityGroup[] | string",
-                    "resolved": "CityGroup[] | string",
-                    "references": {
-                        "CityGroup": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-city-selector/dropi-city-selector.tsx",
-                            "id": "src/components/dropi-city-selector/dropi-city-selector.tsx::CityGroup"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Grouped city options (array or JSON string)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "options",
-                "defaultValue": "[]"
-            },
-            "selectedCities": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "(string | number)[] | string",
-                    "resolved": "(string | number)[] | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Currently selected city values"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected-cities",
-                "defaultValue": "[]"
-            },
-            "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": "'Seleccione una ciudad'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Disable the selector"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "isOpen": {},
-            "selected": {},
-            "parsedOptions": {},
-            "searchTerm": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "selectedCitiesChange",
-                "name": "selectedCitiesChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when selection changes. Detail = selected values array."
-                },
-                "complexType": {
-                    "original": "(string | number)[]",
-                    "resolved": "(string | number)[]",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "options",
-                "methodName": "optionsChanged"
-            }, {
-                "propName": "selectedCities",
-                "methodName": "selectedChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "handleDocClick",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-}