@dropi/ui 0.1.18 → 0.1.20

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 */
+    chipStyle = 'filters';
+    /** Content type */
+    type = 'text';
+    /** Avatar image URL (when type = 'avatar') */
+    urlImg = '';
+    /** Show the close/remove icon */
+    showIcon = true;
+    /** Icon name (when type = 'icon') */
+    icon = '';
+    /** Emitted when the close icon is clicked */
+    dropiClose;
+    render() {
+        return (h("div", { key: '44be034581ddeffb27fb90fec61dd6275dc5998a', class: { 'chip': true, [`chip--${this.chipStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '3312f3d54aab3d6546ddde9820569251eb1faaa3', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: 'bf035db87cbe2b8ba9639d3c72b6b9dd706138e9', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: 'cf634d59c25b1ad5590bf2bc19f55cdc50b67a66', class: "chip__text" }, h("slot", { key: '5534b85253e0f2d91c2b901b97c1e90b5c5c4b32' })), this.showIcon && (h("button", { key: '70723641a9ef1c8b9e412fc7442156d604fcc6d0', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: 'beeefbb7aaec6af0762c1f4611d3fb88e6ef8bd1', name: "Close-small", 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 {
+            "chipStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipStyle",
+                    "resolved": "\"fill\" | \"filters\"",
+                    "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"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chip-style",
+                "defaultValue": "'filters'"
+            },
+            "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": "'text'"
+            },
+            "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": "true"
+            },
+            "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": "dropiClose",
+                "name": "dropiClose",
+                "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

@@ -0,0 +1,156 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.city-selector {
+  position: relative;
+  width: 100%;
+}
+
+.city-selector.disabled .selector-trigger {
+  background: var(--Gray-Gray-50, #f7f8fa);
+  border-color: var(--Gray-Gray-100, #e6eaf2);
+  cursor: not-allowed;
+}
+
+.selector-trigger {
+  min-height: 40px;
+  padding: 6px 10px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.selector-trigger:hover:not(.disabled *) {
+  border-color: var(--Gray-Gray-300, #a3abbf);
+}
+
+.chips-area {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  flex: 1;
+  min-height: 24px;
+  align-items: center;
+}
+
+.placeholder {
+  color: var(--Gray-Gray-400, #858ea6);
+  font-size: var(--font-size-s, 12px);
+}
+
+.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: 4px;
+  padding: 2px 6px;
+  font-size: var(--font-size-xs, 11px);
+  color: var(--Primary-Primary-700, #b85c00);
+}
+
+.chip-remove {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  padding: 0;
+  color: var(--Primary-Primary-500, #f49a3d);
+  display: flex;
+  align-items: center;
+}
+
+.dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--Neutral-White, #fff);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 200;
+  overflow: hidden;
+}
+
+.search-wrap {
+  padding: 8px;
+  border-bottom: 1px solid var(--Gray-Gray-100, #e6eaf2);
+}
+
+.search-input {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-1, 4px);
+  font-size: var(--font-size-s, 12px);
+  font-family: inherit;
+  color: var(--Gray-Gray-600, #475066);
+  outline: none;
+}
+
+.search-input:focus {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.options-list {
+  max-height: 240px;
+  overflow-y: auto;
+}
+
+.group-label {
+  padding: 6px 12px 2px;
+  font-size: var(--font-size-xs, 11px);
+  font-weight: var(--font-weight-semibold, 600);
+  color: var(--Gray-Gray-400, #858ea6);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: var(--Gray-Gray-50, #f7f8fa);
+  border-top: 1px solid var(--Gray-Gray-100, #e6eaf2);
+}
+
+.city-option {
+  padding: 8px 12px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-600, #475066);
+  transition: background 0.1s ease;
+}
+
+.city-option:hover {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+.city-option.selected {
+  color: var(--Primary-Primary-600, #d97c1a);
+  background: var(--Primary-Primary-50, #fff8f0);
+}
+
+.check-mark {
+  width: 16px;
+  font-size: 12px;
+  color: var(--Primary-Primary-500, #f49a3d);
+  font-weight: bold;
+}
+
+.no-results {
+  padding: 16px;
+  text-align: center;
+  color: var(--Gray-Gray-400, #858ea6);
+  font-size: var(--font-size-s, 12px);
+}

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

@@ -0,0 +1,213 @@
+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 = 'Selecciona ciudades';
+    /** Disable the selector */
+    disabled = false;
+    /** Emitted when selection changes. Detail = selected values array. */
+    dropiCityChange;
+    isOpen = false;
+    selected = [];
+    parsedOptions = [];
+    searchTerm = '';
+    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) {
+        if (this.selected.includes(value)) {
+            this.selected = this.selected.filter(v => v !== value);
+        }
+        else {
+            this.selected = [...this.selected, value];
+        }
+        this.dropiCityChange.emit([...this.selected]);
+    }
+    removeCity(value, e) {
+        e.stopPropagation();
+        this.selected = this.selected.filter(v => v !== value);
+        this.dropiCityChange.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() {
+        return (h("div", { key: '53650ed7717099d343115c539d6ee7de6fd7a415', class: `city-selector${this.disabled ? ' disabled' : ''}` }, h("div", { key: '03bdc026a711321c6719745521e5fabad900c1dc', class: "selector-trigger", onClick: () => this.toggle() }, h("div", { key: 'e59a7625b10181bf92c5680b86119b91d0d497ae', class: "chips-area" }, this.selected.length === 0 && (h("span", { key: 'a7521c4285660c2ef5ac9d4df19466a3322b0873', class: "placeholder" }, this.placeholder)), this.selected.map(val => (h("span", { class: "chip", key: String(val) }, this.getLabel(val), h("button", { class: "chip-remove", "aria-label": "Quitar", onClick: (e) => this.removeCity(val, e) }, "\u00D7"))))), h("dropi-icon", { key: '1ee96f23ca167c420d1ad24b6d6cbd27e331f378', name: this.isOpen ? 'Dropdown-up' : 'Dropdown-down', width: "16px", height: "16px", color: "Gray-Gray-500" })), this.isOpen && (h("div", { key: 'cb6ab864645c9dea1d9b2b5eedcafe22596c623d', class: "dropdown" }, h("div", { key: '8cdfc3b52a59f5e6501cf577444cad6272056bf6', class: "search-wrap" }, h("input", { key: '33e96a874c4ef2b257ae934e5eeb66f128e6a21d', class: "search-input", type: "text", placeholder: "Buscar ciudad...", value: this.searchTerm, onInput: (e) => { this.searchTerm = e.target.value; } })), h("div", { key: 'e163afcf9a1d5ad61527828ed935b840cf4b04ef', class: "options-list" }, this.filtered.length === 0 && (h("div", { key: 'c4b35559a86cc0f36563c74824afe9f2ad8df781', class: "no-results" }, "Sin resultados")), this.filtered.map(group => (h("div", { key: group.value, class: "group" }, h("div", { class: "group-label" }, group.label), group.items.map(city => (h("div", { key: String(city.value), class: `city-option${this.selected.includes(city.value) ? ' selected' : ''}`, onClick: () => this.toggleCity(city.value) }, h("span", { class: "check-mark" }, this.selected.includes(city.value) ? '✓' : ''), 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": "'Selecciona ciudades'"
+            },
+            "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": "dropiCityChange",
+                "name": "dropiCityChange",
+                "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 watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }, {
+                "propName": "selectedCities",
+                "methodName": "selectedChanged"
+            }];
+    }
+}