@dropi/ui 0.1.23 → 0.1.24

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

@@ -0,0 +1,222 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-empty-state
+ * Empty state illustration with title, description and optional action button.
+ */
+export class DropiEmptyState {
+    /** Title text (matches Angular 'title') */
+    title = '';
+    /** Description text */
+    description = '';
+    /** URL of the illustration image */
+    imageUrl = '';
+    /** Alt text for the image */
+    imageAlt = 'Sin resultados';
+    /** Primary action button label (empty = hidden) — matches Angular 'buttonText' */
+    buttonText = '';
+    /** Icon name for button — matches Angular 'buttonIcon' */
+    buttonIcon = '';
+    /** State of the illustration (default, loading, sorry, love, success, error) — matches Angular 'dropiIcon' */
+    dropiIcon = 'default';
+    /** Severity for the action button — matches Angular 'buttonSeverity' */
+    buttonSeverity = 'tertiary';
+    /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
+    buttonClickEvent;
+    render() {
+        return (h("div", { key: '1b7c0fd20a119ae17ee09f7c68b7ae2b4e77ee98', class: "empty-state" }, h("div", { key: 'cb4fd9dc6a8b491359fd9cd8b6983e68f64af994', class: "empty-state-visual" }, this.imageUrl ? (h("img", { class: "empty-state-img", src: this.imageUrl, alt: this.imageAlt })) : (h("img", { class: "empty-state-img", src: `assets/icons/ilustration/${(!this.dropiIcon || String(this.dropiIcon) === 'undefined' || String(this.dropiIcon) === 'null') ? 'default' : this.dropiIcon}.svg`, alt: this.imageAlt, onError: (e) => e.target.src = 'assets/icons/ilustration/default.svg' }))), this.title && h("h3", { key: '14c09482953e39975c74ca454df3131e3233a712', class: "empty-state-title" }, this.title), this.description && h("p", { key: '5fccb02b2b21d8895c5b122aa0fb6684fc9d7611', class: "empty-state-description" }, this.description), h("slot", { key: '6e53d450b4dbb8cff81addd3e7fc528c599bf730' }), this.buttonText && (h("div", { key: '4325f23a357c43b970dce907a63f24b63b10070e', class: "empty-state-actions" }, h("dropi-button", { key: 'a475b2fec4e00343fa4b4fa29ac08d5564e4e21a', text: this.buttonText, preIcon: this.buttonIcon, severity: this.buttonSeverity, onClick: () => this.buttonClickEvent.emit() })))));
+    }
+    static get is() { return "dropi-empty-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-empty-state.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-empty-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title text (matches Angular 'title')"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "title",
+                "defaultValue": "''"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Description text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description",
+                "defaultValue": "''"
+            },
+            "imageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the illustration image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-url",
+                "defaultValue": "''"
+            },
+            "imageAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image-alt",
+                "defaultValue": "'Sin resultados'"
+            },
+            "buttonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary action button label (empty = hidden) \u2014 matches Angular 'buttonText'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-text",
+                "defaultValue": "''"
+            },
+            "buttonIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon name for button \u2014 matches Angular 'buttonIcon'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-icon",
+                "defaultValue": "''"
+            },
+            "dropiIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"loading\" | \"love\" | \"sorry\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State of the illustration (default, loading, sorry, love, success, error) \u2014 matches Angular 'dropiIcon'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropi-icon",
+                "defaultValue": "'default'"
+            },
+            "buttonSeverity": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary'",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Severity for the action button \u2014 matches Angular 'buttonSeverity'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "button-severity",
+                "defaultValue": "'tertiary'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClickEvent",
+                "name": "buttonClickEvent",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when button is clicked \u2014 matches Angular 'buttonClickEvent'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

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 */
+    toggleFavorite;
+    hovered = false;
+    toggle() {
+        this.isFavorite = !this.isFavorite;
+        this.toggleFavorite.emit(this.isFavorite);
+    }
+    render() {
+        return (h("button", { key: '07acf3b1f81e69ddea79672fd4853ad575b4d2af', 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: 'fcf3cc2b3b107eb43c6a83a9d6dc6cbff7ee202f', 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": "toggleFavorite",
+                "name": "toggleFavorite",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when toggled. e.detail = new favorite state"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}