@dropi/ui 0.1.21 → 0.1.23

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

@@ -1,45 +0,0 @@
-: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

@@ -1,150 +0,0 @@
-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: 'dce259f33f9cd9314c2b43a01a58a150567cf6c7', class: "miniature" }, this.label && h("span", { key: 'b8eaf4c77c4d488a01870e5aa42822823af8d941', class: "miniature__label" }, this.label), h("div", { key: '80bbca393884ebf25ece231f766846b2d7547ce0', 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

@@ -1,127 +0,0 @@
-: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

@@ -1,155 +0,0 @@
-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() {
-        if (!this.visible)
-            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": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "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"
-            }];
-    }
-}

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

@@ -1,185 +0,0 @@
-:host {
-  display: block;
-  width: 100%;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/* ── Fixed label layout ────────────────────────────────────── */
-.fixed-label-container {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 8px;
-}
-
-.input-label {
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-xs, 10px);
-  font-weight: var(--font-weight-regular, 400);
-  text-align: left;
-}
-
-.asterisk {
-  color: var(--Error-Error-500, #f46a6b);
-}
-
-/* ── Form group / container ────────────────────────────────── */
-.form-group {
-  position: relative;
-  width: 100%;
-}
-
-.input-container {
-  position: relative;
-}
-
-/* ── Icons ─────────────────────────────────────────────────── */
-.icon-input {
-  position: absolute;
-  top: 10px;
-  left: 5px;
-  z-index: 1;
-}
-
-.icon-input-password {
-  position: absolute;
-  top: 10px;
-  right: 13px;
-  cursor: pointer;
-  z-index: 1;
-}
-
-/* ── Base input ─────────────────────────────────────────────── */
-.form-control {
-  box-sizing: border-box;
-  width: 100%;
-  padding: var(--Size-2, 8px);
-  border: 1px solid var(--Gray-Gray-200, #c3c9d9);
-  border-radius: var(--Border-2, 8px);
-  background: var(--Neutral-White, #ffffff);
-  font-size: var(--font-size-s, 12px);
-  font-family: inherit;
-  color: var(--Gray-Gray-700, #32394d);
-  transition: border-color 0.3s ease-in-out;
-  height: 40px;
-  outline: none;
-  appearance: none;
-  text-align: left;
-}
-
-.form-control::placeholder {
-  color: transparent;
-  transition: color 0.2s ease-in-out;
-}
-
-/* Show placeholder only on focus or in fixedLabel mode */
-.form-control:focus::placeholder,
-.fixed-label-input::placeholder {
-  color: var(--Gray-Gray-400, #858ea6);
-}
-
-.form-control:focus {
-  border-color: var(--Info-Info-500, #50a5f1);
-}
-
-.form-control-valid {
-  border-color: var(--Gray-Gray-400, #858ea6) !important;
-  color: var(--Gray-Gray-600, #475066);
-}
-
-.form-control-invalid {
-  border-color: var(--Error-Error-500, #f46a6b) !important;
-  color: var(--Gray-Gray-600, #475066);
-}
-
-.form-control:disabled {
-  border-color: var(--Gray-Gray-200, #c3c9d9) !important;
-  color: var(--Gray-Gray-400, #858ea6);
-  background-color: var(--Gray-Gray-50, #f7f8fa);
-  cursor: not-allowed;
-}
-
-.padding-icon {
-  padding-left: 28px;
-}
-
-/* When icon is always visible, shift the floating label right to avoid overlap */
-.input-container--has-icon label.label-bottom {
-  left: 28px;
-}
-
-/* When focused or has value, float up to left: 0 regardless */
-.input-container--has-icon .form-control:focus + label.label-bottom,
-.input-container--has-icon .form-control:not(:placeholder-shown) + label.label-bottom {
-  left: 0;
-}
-
-/* Password: hide characters via CSS (no type=password needed for font trick) */
-.text-password {
-  -webkit-text-security: disc;
-  text-security: disc;
-}
-
-/* ── Floating label ─────────────────────────────────────────── */
-label.label-bottom {
-  position: absolute;
-  font-weight: var(--font-weight-regular, 400);
-  top: 10px;
-  font-size: var(--font-size-s, 12px);
-  color: var(--Gray-Gray-500, #69738c);
-  left: 10px;
-  transition: all 0.2s ease-in-out;
-  pointer-events: none;
-  overflow: hidden;
-  width: 90%;
-  white-space: nowrap;
-}
-
-/* Float up when focused or has value */
-.form-control:focus+label.label-bottom,
-.form-control:not(:placeholder-shown)+label.label-bottom {
-  top: -22px;
-  left: 0;
-  font-size: var(--font-size-xs, 10px);
-  color: var(--Gray-Gray-600, #475066);
-  width: unset;
-}
-
-.form-control:disabled+label.label-bottom {
-  color: var(--Gray-Gray-400, #858ea6);
-}
-
-/* ── Helper text ────────────────────────────────────────────── */
-.form-control-helper {
-  display: flex;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  gap: 4px;
-  align-items: center;
-  margin-top: 4px;
-}
-
-.form-control-helper span {
-  display: block;
-  color: var(--Gray-Gray-600, #475066);
-  font-size: var(--font-size-xs, 10px);
-}
-
-.invalid-color {
-  color: var(--Error-Error-500, #f46a6b) !important;
-}
-
-.disabled-helper {
-  color: var(--Gray-Gray-400, #858ea6) !important;
-}
-
-.disabled-helper {
-  color: var(--Gray-Gray-400, #858ea6) !important;
-}