@dropi/ui 0.1.18 → 0.1.19

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: '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" })))));
+    }
+    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-dropdown/dropi-dropdown.css

@@ -0,0 +1,51 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+.dropdown {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: var(--dropdown-height, 300px);
+  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
+  border-radius: var(--Border-2, 8px);
+  background: var(--Neutral-White, #fff);
+}
+
+.dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: var(--Size-2, 8px);
+  padding: var(--Size-2, 8px) var(--Size-3, 12px);
+  cursor: pointer;
+  transition: background 0.15s;
+  user-select: none;
+}
+
+.dropdown__item:hover {
+  background: var(--Gray-Gray-50, #f7f8fa);
+}
+
+.dropdown__item--active {
+  background: var(--Primary-Primary-50, #fff5eb);
+}
+
+.dropdown__avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.dropdown__label {
+  flex: 1;
+  font-size: var(--font-size-s, 12px);
+  color: var(--Gray-Gray-700, #32394d);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

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

@@ -0,0 +1,184 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-dropdown
+ * Scrollable list with checkboxes for multi-selection.
+ * Pass options as an array (JS) or JSON string.
+ */
+export class DropiDropdown {
+    /** Options array or JSON string */
+    options = [];
+    /** Property name to display as the option label */
+    valueModel = 'name';
+    /** Property name to use as the option image/avatar URL */
+    imageModel = '';
+    /** Max height of the list container (CSS value) */
+    height = '300px';
+    selected = [];
+    parsedOptions = [];
+    /** Emitted when selection changes. e.detail = selected items array */
+    dropiChange;
+    optionsChanged(val) {
+        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    componentWillLoad() {
+        this.optionsChanged(this.options);
+    }
+    isSelected(opt) {
+        return this.selected.some(s => JSON.stringify(s) === JSON.stringify(opt));
+    }
+    toggleOption(opt) {
+        if (this.isSelected(opt)) {
+            this.selected = this.selected.filter(s => JSON.stringify(s) !== JSON.stringify(opt));
+        }
+        else {
+            this.selected = [...this.selected, opt];
+        }
+        this.dropiChange.emit(this.selected);
+    }
+    render() {
+        return (h("div", { key: 'e9b2fe1b667a4d83c0d142ff9ba8187d848f606d', class: "dropdown", style: { '--dropdown-height': this.height } }, this.parsedOptions.map((opt, i) => {
+            const label = opt[this.valueModel] ?? String(opt);
+            const imgUrl = this.imageModel ? opt[this.imageModel] : '';
+            const active = this.isSelected(opt);
+            return (h("div", { class: { 'dropdown__item': true, 'dropdown__item--active': active }, key: i, onClick: () => this.toggleOption(opt) }, h("dropi-checkbox", { checked: active }), imgUrl && (h("img", { class: "dropdown__avatar", src: imgUrl, alt: label })), h("span", { class: "dropdown__label" }, label)));
+        })));
+    }
+    static get is() { return "dropi-dropdown"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-dropdown.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-dropdown.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DropdownOption[] | string",
+                    "resolved": "DropdownOption[] | string",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-dropdown/dropi-dropdown.tsx",
+                            "id": "src/components/dropi-dropdown/dropi-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Options array or JSON string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "valueModel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property name to display as the option label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value-model",
+                "defaultValue": "'name'"
+            },
+            "imageModel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Property name to use as the option image/avatar URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-model",
+                "defaultValue": "''"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Max height of the list container (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'300px'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selected": {},
+            "parsedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiChange",
+                "name": "dropiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when selection changes. e.detail = selected items array"
+                },
+                "complexType": {
+                    "original": "DropdownOption[]",
+                    "resolved": "DropdownOption[]",
+                    "references": {
+                        "DropdownOption": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-dropdown/dropi-dropdown.tsx",
+                            "id": "src/components/dropi-dropdown/dropi-dropdown.tsx::DropdownOption"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }];
+    }
+}

package/dist/collection/components/dropi-empty-state/dropi-empty-state.js

@@ -21,7 +21,7 @@ export class DropiEmptyState {
     /** Emitted when secondary action button is clicked */
     dropiSecondaryAction;
     render() {
-        return (h("div", { key: '1aea01715d0e50b308904d496be7bc2f607bf5aa', class: "empty-state" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-placeholder" }, h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && h("h3", { key: '41e5da8d482456f4b9006449a27a9f9d172d87b4', class: "empty-state-title" }, this.header), this.description && h("p", { key: 'ffa6399489ec56cd2cf84bb39d12c112bee64302', class: "empty-state-description" }, this.description), h("slot", { key: '6ccdfed94a22ad7ece2388fba3d4734aa6a2b509' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: '0da97fd516eccd1cabe846b2d002fdf75306674d', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: 'de1b1ad4d6a50cfd251de243a3b5ea3beb10019b', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '59f3b47ee14f3ac89aa4acc5b42d856f26d02d19', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
+        return (h("div", { key: '7c393f2a56387d573162068576809a6f6a975a34', class: "empty-state" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("div", { class: "empty-state-placeholder" }, h("svg", { viewBox: "0 0 80 80", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "empty-state-svg" }, h("rect", { width: "80", height: "80", rx: "40", fill: "var(--Gray-Gray-100, #e6eaf2)" }), h("path", { d: "M40 20C29 20 20 29 20 40s9 20 20 20 20-9 20-20S51 20 40 20zm0 36c-8.8 0-16-7.2-16-16S31.2 24 40 24s16 7.2 16 16-7.2 16-16 16zm-1-28h2v12h-2zm0 14h2v2h-2z", fill: "var(--Gray-Gray-400, #858ea6)" })))), this.header && h("h3", { key: 'd1fbe8d995e295cb4a72064745e7b521b35bbad6', class: "empty-state-title" }, this.header), this.description && h("p", { key: '948e6bcb6e07fab09261e6f68d658bf1faf17c8e', class: "empty-state-description" }, this.description), h("slot", { key: '8663d0a1e2df4ee914a25a0bda27e5f2ee41a941' }), (this.actionLabel || this.secondaryLabel) && (h("div", { key: 'af582b6316e8ebf2700589b55deef1fe8fbf08f2', class: "empty-state-actions" }, this.secondaryLabel && (h("dropi-button", { key: '1e69d9a9143708157a20dba1179498bd01203af2', text: this.secondaryLabel, severity: "secondary", onDropiClick: () => this.dropiSecondaryAction.emit() })), this.actionLabel && (h("dropi-button", { key: '3850ddf4716b2732bb21ee9fa731e90022b2ecd2', text: this.actionLabel, severity: "primary", onDropiClick: () => this.dropiAction.emit() }))))));
     }
     static get is() { return "dropi-empty-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-favorite-button/dropi-favorite-button.css

@@ -0,0 +1,24 @@
+:host { display: inline-flex; }
+
+.fav-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 37px;
+  height: 37px;
+  border-radius: 8px;
+  border: 1px solid var(--Gray-Gray-200);
+  background: var(--Neutral-White);
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+
+.fav-btn:hover,
+.fav-btn--active {
+  background: var(--Gray-Gray-50);
+}
+
+/* Optional: Subtle scale on click */
+.fav-btn:active {
+  transform: scale(0.95);
+}

package/dist/collection/components/dropi-favorite-button/dropi-favorite-button.js

@@ -0,0 +1,78 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-favorite-button
+ * Heart toggle button for marking items as favorite.
+ */
+export class DropiFavoriteButton {
+    /** Whether the item is currently marked as favorite */
+    isFavorite = false;
+    /** Emitted when toggled. e.detail = new favorite state */
+    dropiToggleFavorite;
+    hovered = false;
+    toggle() {
+        this.isFavorite = !this.isFavorite;
+        this.dropiToggleFavorite.emit(this.isFavorite);
+    }
+    render() {
+        return (h("button", { key: '3920b723683dc337ebe5aedc473414c9ed27a593', class: { 'fav-btn': true, 'fav-btn--active': this.isFavorite }, onClick: () => this.toggle(), onMouseEnter: () => this.hovered = true, onMouseLeave: () => this.hovered = false, "aria-label": this.isFavorite ? 'Quitar de favoritos' : 'Agregar a favoritos', "aria-pressed": String(this.isFavorite) }, h("dropi-icon", { key: '60748aaafd0a183e175fd84c5d44313a0254ed5e', name: this.isFavorite || this.hovered ? 'Heart-solid' : 'Heart', width: "19px", height: "19px", color: this.isFavorite || this.hovered ? 'Primary-Primary-500' : 'Gray-Gray-800' })));
+    }
+    static get is() { return "dropi-favorite-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-favorite-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-favorite-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isFavorite": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the item is currently marked as favorite"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiToggleFavorite",
+                "name": "dropiToggleFavorite",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when toggled. e.detail = new favorite state"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -34,7 +34,7 @@ export class DropiIcon {
         this.el.style.setProperty('--icon-fill', fill);
     }
     render() {
-        return (h("svg", { key: '2bcb456155fc78c9602c5e34bc8f70d0d44bd050', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '92aa54406161cfdf5deda5f42a83e06480eb6208', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
+        return (h("svg", { key: 'd92e0c9deb01962dfb172ae25af4f1236647e24c', width: this.width, height: this.height, class: { spin: this.name === 'Spinner' }, "aria-hidden": "true" }, h("use", { key: '76be21d4bcbb2a5409e0c784cd17c6ca3cd243f6', href: `/assets/icons/symbol/svg/sprite.css.svg#${this.name}` })));
     }
     static get is() { return "dropi-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropi-image-miniature/dropi-image-miniature.css

@@ -0,0 +1,45 @@
+:host { display: block; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.miniature__label {
+  display: block;
+  font-size: var(--font-size-xs, 10px);
+  color: var(--Gray-Gray-600, #475066);
+  margin-bottom: var(--Size-2, 8px);
+}
+
+.miniature__grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Size-2, 8px);
+}
+
+.miniature__item {
+  position: relative;
+  border-radius: var(--Border-2, 8px);
+  overflow: hidden;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.miniature__item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.2s;
+}
+
+.miniature__zoom {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0,0,0,0.35);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.miniature__item:hover img { transform: scale(1.05); }
+.miniature__item:hover .miniature__zoom { opacity: 1; }