@dropi/ui 0.1.27 → 0.1.28

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

@@ -0,0 +1,150 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-ilustration-icon
+ * Illustration icon with three modes: dropi (SVG asset), mb (colored circle), insignia (badge).
+ *
+ * @example
+ * <dropi-ilustration-icon type="dropi" state="success"></dropi-ilustration-icon>
+ * <dropi-ilustration-icon type="insignia" state-insignia="premium" tag-product></dropi-ilustration-icon>
+ */
+export class DropiIlustrationIcon {
+    /** Display mode */
+    type = 'dropi';
+    /** State for dropi/mb types */
+    state = 'default';
+    /** Insignia variant */
+    stateInsignia = 'verified';
+    /** Show insignia as tag with label (for product cards) */
+    tagProduct = false;
+    insigniaIcons = {
+        verified: 'assets/icons/ilustration/verified-new.svg',
+        premium: 'assets/icons/ilustration/premium-new.svg',
+        exclusive: 'assets/icons/ilustration/exclusive.svg',
+    };
+    getIconName(state) {
+        const map = {
+            success: 'Check-circle',
+            error: 'Cross-circle',
+            info: 'Info',
+            warning: 'Info',
+        };
+        return map[state] || 'Info';
+    }
+    render() {
+        return (h("div", { key: '2f956eddb214de168aae134374512600867e77a8', class: "dropi-ilustration" }, this.type === 'dropi' && (h("figure", { key: '3d05624542d51f64cb6402fb958f039bc943afb7', class: "dropi-ilustration__image" }, h("img", { key: '6fb383b378d989f675433c46710e246dc193f26b', src: `assets/icons/ilustration/${(!this.state || String(this.state) === 'undefined' || String(this.state) === 'null') ? 'default' : this.state}.svg`, alt: this.state ?? 'default', onError: (e) => { e.target.src = 'assets/icons/ilustration/default.svg'; } }))), this.type === 'mb' && (h("figure", { key: 'f66957ddbba9506d041ab1b2e8877872b25bdbf3', class: `dropi-ilustration__image-mb ${this.state}` }, ['success', 'error', 'info', 'warning'].includes(this.state) && (h("dropi-icon", { key: '2844c2707906bcba57835c1e7652c52769b504fe', name: this.getIconName(this.state), width: "24px", height: "24px", color: "Neutral-White" })))), this.type === 'insignia' && (h("figure", { key: '4c091e2f415d252ae3cdaa7b62b1e4788192ae6c', class: this.tagProduct ? 'dropi-ilustration-insignia-tag' : 'dropi-ilustration-insignia' }, h("img", { key: 'dc9e11b8ecf525dbfd0c8c147a64e12350c2b6d5', src: this.insigniaIcons[this.stateInsignia], alt: this.stateInsignia }), this.tagProduct && (h("p", { key: '0fa7f6fdd1bb9075d1ef2a09a6701b0b464a746b', class: `tag tag--${this.stateInsignia}` }, h("span", { key: 'dae1336fefa32471ebbc78f1bcdd0c9b1c89dcba', class: "Caption-S" }, this.stateInsignia.charAt(0).toUpperCase() + this.stateInsignia.slice(1))))))));
+    }
+    static get is() { return "dropi-ilustration-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-ilustration-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-ilustration-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IlustrationType",
+                    "resolved": "\"dropi\" | \"insignia\" | \"mb\"",
+                    "references": {
+                        "IlustrationType": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
+                            "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::IlustrationType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display mode"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'dropi'"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IlustrationState",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"loading\" | \"love\" | \"sorry\" | \"success\" | \"warning\"",
+                    "references": {
+                        "IlustrationState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
+                            "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::IlustrationState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "State for dropi/mb types"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state",
+                "defaultValue": "'default'"
+            },
+            "stateInsignia": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "InsigniaState",
+                    "resolved": "\"exclusive\" | \"premium\" | \"verified\"",
+                    "references": {
+                        "InsigniaState": {
+                            "location": "local",
+                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx",
+                            "id": "src/components/dropi-ilustration-icon/dropi-ilustration-icon.tsx::InsigniaState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Insignia variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "state-insignia",
+                "defaultValue": "'verified'"
+            },
+            "tagProduct": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show insignia as tag with label (for product cards)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tag-product",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

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; }

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

@@ -0,0 +1,150 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-image-miniature
+ * Grid of image thumbnails with zoom-on-hover overlay trigger.
+ */
+export class DropiImageMiniature {
+    /** Optional label above the grid */
+    label = '';
+    /** Array of image URLs. Pass as JSON string or array */
+    images = [];
+    /** Thumbnail width (CSS value) */
+    width = '88px';
+    /** Thumbnail height (CSS value) */
+    height = '88px';
+    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
+    dropiImageClick;
+    get parsedImages() {
+        if (typeof this.images === 'string') {
+            try {
+                return JSON.parse(this.images);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.images || [];
+    }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4OCA4OCI+PHJlY3Qgd2lkdGg9Ijg4IiBoZWlnaHQ9Ijg4IiBmaWxsPSIjZjdmOGZhIi8+PHRleHQgeD0iNDQiIHk9IjQ4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjYzNjOWQ5IiBmb250LXNpemU9IjEyIj5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        const imgs = this.parsedImages;
+        return (h("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && h("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), h("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), h("div", { class: "miniature__zoom" }, h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
+    }
+    static get is() { return "dropi-image-miniature"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-image-miniature.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-image-miniature.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional label above the grid"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "images": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of image URLs. Pass as JSON string or array"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "images",
+                "defaultValue": "[]"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thumbnail width (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'88px'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Thumbnail height (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'88px'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiImageClick",
+                "name": "dropiImageClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a thumbnail is clicked. e.detail = { images, index }"
+                },
+                "complexType": {
+                    "original": "{ images: string[]; index: number }",
+                    "resolved": "{ images: string[]; index: number; }",
+                    "references": {}
+                }
+            }];
+    }
+}

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

@@ -0,0 +1,127 @@
+:host { display: block; }
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.92);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  animation: fade-in 0.3s ease-out;
+}
+
+.overlay__close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10010;
+  transition: background 0.15s;
+}
+.overlay__close:hover { background: rgba(255, 255, 255, 0.2); }
+
+.overlay__body {
+  display: flex;
+  width: 90%;
+  height: 80%;
+  max-width: 1200px;
+  gap: 32px;
+  align-items: center;
+}
+
+.overlay__body--single {
+  justify-content: center;
+}
+
+/* ── Thumbnails (Left Column) ─────────────────────────── */
+.overlay__thumbs {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 8px;
+  width: 100px;
+  flex-shrink: 0;
+}
+
+/* Hide scrollbar but keep functionality */
+.overlay__thumbs::-webkit-scrollbar { width: 4px; }
+.overlay__thumbs::-webkit-scrollbar-thumb { background: var(--Gray-Gray-600); border-radius: 4px; }
+
+.overlay__thumb-box {
+  width: 80px;
+  height: 80px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  overflow: hidden;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: border-color 0.2s;
+}
+
+.overlay__thumb-box--active {
+  border-color: var(--Primary-Primary-500, #f49a3d);
+}
+
+.overlay__thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* ── Main Content (Right Area) ─────────────────────────── */
+.overlay__content {
+  flex: 1;
+  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.overlay__main-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+  animation: scale-up 0.3s ease-out;
+}
+
+.overlay__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
+  border: none;
+  border-radius: 50%;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s;
+  z-index: 5;
+}
+
+.overlay__nav:hover { background: rgba(255, 255, 255, 0.2); }
+.overlay__nav--prev { left: -24px; }
+.overlay__nav--next {
+  right: -24px;
+  background: var(--Neutral-White);
+}
+.overlay__nav--next:hover { background: var(--Neutral-White); }
+
+@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes scale-up { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

package/dist/collection/components/dropi-image-overlay/dropi-image-overlay.js

@@ -0,0 +1,156 @@
+import { h } from "@stencil/core";
+/**
+ * @component dropi-image-overlay
+ * Full-screen image lightbox with prev/next navigation and thumbnails.
+ */
+export class DropiImageOverlay {
+    /** Whether the overlay is visible */
+    visible = false;
+    /** Images array or JSON string */
+    images = [];
+    /** Initially active image index */
+    activeIndex = 0;
+    current = 0;
+    parsedImages = [];
+    /** Emitted when overlay closes */
+    dropiClose;
+    imagesChanged(val) {
+        this.parsedImages = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    indexChanged(val) { this.current = val; }
+    visibleChanged(val) {
+        if (val)
+            this.current = this.activeIndex;
+    }
+    componentWillLoad() {
+        this.imagesChanged(this.images);
+        this.current = this.activeIndex;
+    }
+    close() { this.visible = false; this.dropiClose.emit(); }
+    prev() { this.current = (this.current - 1 + this.parsedImages.length) % this.parsedImages.length; }
+    next() { this.current = (this.current + 1) % this.parsedImages.length; }
+    handleError(e) {
+        e.target.src =
+            `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMzAwIj48cmVjdCB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iIzFhMjAzMyIvPjx0ZXh0IHg9IjIwMCIgeT0iMTU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjNDc1MDY2IiBmb250LXNpemU9IjE0Ij5TaW4gaW1hZ2VuPC90ZXh0Pjwvc3ZnPg==`;
+    }
+    render() {
+        const isVisible = this.visible === true || String(this.visible) === 'true';
+        if (!isVisible)
+            return null;
+        const imgs = this.parsedImages;
+        const multi = imgs.length > 1;
+        return (h("div", { class: "overlay", onClick: () => this.close() }, h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, h("dropi-icon", { name: "Close-large", width: "24px", height: "24px", color: "Neutral-White" })), h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), h("div", { class: "overlay__content" }, multi && (h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, h("dropi-icon", { name: "Dropdown-left", width: "18px", height: "18px", color: "Gray-Gray-500" }))), h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, h("dropi-icon", { name: "Dropdown-Right", width: "18px", height: "18px", color: "Gray-Gray-500" })))))));
+    }
+    static get is() { return "dropi-image-overlay"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-image-overlay.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-image-overlay.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the overlay is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "images": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[] | string",
+                    "resolved": "string | string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Images array or JSON string"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "images",
+                "defaultValue": "[]"
+            },
+            "activeIndex": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initially active image index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-index",
+                "defaultValue": "0"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "current": {},
+            "parsedImages": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dropiClose",
+                "name": "dropiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when overlay closes"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "images",
+                "methodName": "imagesChanged"
+            }, {
+                "propName": "activeIndex",
+                "methodName": "indexChanged"
+            }, {
+                "propName": "visible",
+                "methodName": "visibleChanged"
+            }];
+    }
+}