@dropi/ui 0.1.19 → 0.1.21

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

@@ -9,20 +9,22 @@ export class DropiCheckboxSelectionList {
     /** Show search filter */
     showFilter = true;
     /** Search placeholder */
-    filterPlaceholder = 'Buscar...';
+    filterPlaceholder = 'Search';
     /** Show "no results" message */
     showNotFound = true;
     /** Empty state message */
-    notFoundMessage = 'Sin resultados';
+    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. e.detail = selected option ids */
-    dropiCheckedValues;
-    /** Emitted on search input. e.detail = search text */
-    dropiSearch;
+    /** 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 || []);
     }
@@ -31,7 +33,7 @@ export class DropiCheckboxSelectionList {
         if (!this.filterText)
             return this.parsedOptions;
         const q = this.filterText.toLowerCase();
-        return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
+        return this.parsedOptions.filter(o => o.label?.toLowerCase().includes(q));
     }
     toggle(id) {
         if (this.multiSelect) {
@@ -42,16 +44,16 @@ export class DropiCheckboxSelectionList {
         else {
             this.selected = this.selected.includes(id) ? [] : [id];
         }
-        this.dropiCheckedValues.emit(this.selected);
+        this.checkedValues.emit(this.selected);
     }
     render() {
         const items = this.filtered;
-        return (h("div", { key: '4606e983827d32c18990c44589c2cfcac678b0ae', class: "csl" }, this.showFilter && (h("div", { key: '532d95a9e0530023094611ce55b37f56eb6f9d78', class: "csl__search" }, h("dropi-icon", { key: '79598d6cb8b36f90e15d2983f8c3e54cb713d193', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: 'fa95ab8c1112e335560b8c49f7f4b502b3f7b3a0', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
+        return (h("div", { key: 'd2375e280c0cf0f6d46430bd027a8d03b32cd433', class: "csl" }, this.showFilter && (h("div", { key: 'efbc85d0c1b331c25ffa95c26336fef280633eef', class: "csl__search" }, h("dropi-icon", { key: '2b428c87384af4d54cc081d63a1c78d480c006ee', name: "Search", width: "16px", height: "16px", color: "Gray-Gray-400" }), h("input", { key: '3f8808e55a6dd9873e385b7046a56cc1121b77f7', class: "csl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
                 this.filterText = e.target.value;
-                this.dropiSearch.emit(this.filterText);
-            } }), this.filterText && (h("button", { key: '94574b93a5e1d938ebedd7f462e3aed6917390ef', class: "csl__clear", onClick: () => { this.filterText = ''; this.dropiSearch.emit(''); } }, h("dropi-icon", { key: 'c9765efda527f9321757a69028f9ceb7e12a7514', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: '2f40c32f10c84277924c240a12e89876ff60a4d2', class: "csl__list" }, items.length === 0 && this.showNotFound ? (h("div", { class: "csl__empty" }, this.notFoundMessage)) : (items.map(opt => {
+                this.onSearch.emit(this.filterText);
+            } }), this.filterText && (h("button", { key: '8460836fc527444f3f5a302f4b1856a1192882e2', class: "csl__clear", onClick: () => { this.filterText = ''; this.onSearch.emit(''); } }, h("dropi-icon", { key: '442b9249d97adca6b8fbaf066bee3b0f2a0217e7', name: "Close-small", width: "14px", height: "14px", color: "Gray-Gray-400" }))))), h("div", { key: 'e1599fca9f98199f7bb0671bcb7f71bddcd0c9df', 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.name }), h("span", { class: "csl__label" }, opt.name)));
+            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"; }
@@ -132,7 +134,7 @@ export class DropiCheckboxSelectionList {
                 "setter": false,
                 "reflect": false,
                 "attribute": "filter-placeholder",
-                "defaultValue": "'Buscar...'"
+                "defaultValue": "'Search'"
             },
             "showNotFound": {
                 "type": "boolean",
@@ -172,7 +174,7 @@ export class DropiCheckboxSelectionList {
                 "setter": false,
                 "reflect": false,
                 "attribute": "not-found-message",
-                "defaultValue": "'Sin resultados'"
+                "defaultValue": "'No related results found'"
             },
             "multiSelect": {
                 "type": "boolean",
@@ -193,6 +195,26 @@ export class DropiCheckboxSelectionList {
                 "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"
             }
         };
     }
@@ -205,14 +227,14 @@ export class DropiCheckboxSelectionList {
     }
     static get events() {
         return [{
-                "method": "dropiCheckedValues",
-                "name": "dropiCheckedValues",
+                "method": "checkedValues",
+                "name": "checkedValues",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when selection changes. e.detail = selected option ids"
+                    "text": "Emitted when selection changes \u2014 matches Angular 'checkedValues'"
                 },
                 "complexType": {
                     "original": "(string | number)[]",
@@ -220,14 +242,14 @@ export class DropiCheckboxSelectionList {
                     "references": {}
                 }
             }, {
-                "method": "dropiSearch",
-                "name": "dropiSearch",
+                "method": "onSearch",
+                "name": "onSearch",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted on search input. e.detail = search text"
+                    "text": "Emitted on search \u2014 matches Angular 'onSearch'"
                 },
                 "complexType": {
                     "original": "string",

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

@@ -7,12 +7,14 @@
 .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;
 }
 

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

@@ -5,20 +5,20 @@ import { h } from "@stencil/core";
  * Use <slot> for the chip label text.
  */
 export class DropiChips {
-    /** Visual style */
-    chipStyle = 'filters';
+    /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
+    customStyle = 'fill';
     /** Content type */
-    type = 'text';
+    type = 'icon';
     /** Avatar image URL (when type = 'avatar') */
     urlImg = '';
     /** Show the close/remove icon */
-    showIcon = true;
+    showIcon = false;
     /** Icon name (when type = 'icon') */
     icon = '';
     /** Emitted when the close icon is clicked */
-    dropiClose;
+    onClose;
     render() {
-        return (h("div", { key: '06d0ac1f96349389f1513b59a1f84dbff9864169', class: { 'chip': true, [`chip--${this.chipStyle}`]: true } }, this.type === 'avatar' && this.urlImg && (h("img", { key: '38bc54471c0cf6dc7a25cccaba0764573d5d43e1', class: "chip__avatar", src: this.urlImg, alt: "" })), this.type === 'icon' && this.icon && (h("dropi-icon", { key: '908f3b217b425f6a3c9bf242a94110b742ca34b3', class: "chip__pre-icon", name: this.icon, width: "14px", height: "14px", color: "currentColor" })), h("span", { key: 'cb76f76056e6a28cfc497f2fabece2c95d6b9a60', class: "chip__text" }, h("slot", { key: '4d3aade9d8408d2b5b627c43754a9cfafd44b941' })), this.showIcon && (h("button", { key: 'fbb30fa90841e499d21c928c4a319724def58bb2', class: "chip__close", onClick: () => this.dropiClose.emit(), "aria-label": "Eliminar" }, h("dropi-icon", { key: 'f11c820069c550fa7ee3a143c3c6f29d338041c8', name: "Close-small", width: "14px", height: "14px", color: "currentColor" })))));
+        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"; }
@@ -34,12 +34,12 @@ export class DropiChips {
     }
     static get properties() {
         return {
-            "chipStyle": {
+            "customStyle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "ChipStyle",
-                    "resolved": "\"fill\" | \"filters\"",
+                    "resolved": "\"fill\" | \"filtrers\"",
                     "references": {
                         "ChipStyle": {
                             "location": "local",
@@ -52,13 +52,13 @@ export class DropiChips {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual style"
+                    "text": "Visual style (named customStyle to avoid conflict with HTMLElement.style)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "chip-style",
-                "defaultValue": "'filters'"
+                "attribute": "custom-style",
+                "defaultValue": "'fill'"
             },
             "type": {
                 "type": "string",
@@ -84,7 +84,7 @@ export class DropiChips {
                 "setter": false,
                 "reflect": false,
                 "attribute": "type",
-                "defaultValue": "'text'"
+                "defaultValue": "'icon'"
             },
             "urlImg": {
                 "type": "string",
@@ -124,7 +124,7 @@ export class DropiChips {
                 "setter": false,
                 "reflect": false,
                 "attribute": "show-icon",
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
@@ -150,8 +150,8 @@ export class DropiChips {
     }
     static get events() {
         return [{
-                "method": "dropiClose",
-                "name": "dropiClose",
+                "method": "onClose",
+                "name": "onClose",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -0,0 +1,218 @@
+: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);
+}