@dropi/ui 0.1.22 → 0.1.23

package/dist/cjs/dropi-image-miniature.cjs.entry.js

@@ -1,44 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.js');
-
-const dropiImageMiniatureCss = () => `: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}`;
-
-const DropiImageMiniature = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiImageClick = index.createEvent(this, "dropiImageClick", 7);
-    }
-    /** 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 (index.h("div", { key: '111d908339df1d3fba74cb8737f3c72e2254e2f0', class: "miniature" }, this.label && index.h("span", { key: '007ecc8149b6778eac7dd80a978a088f686001eb', class: "miniature__label" }, this.label), index.h("div", { key: '95c18d71f5c753bd2610915b62632aca7fbd4d16', class: "miniature__grid" }, imgs.map((src, i) => (index.h("div", { class: "miniature__item", style: { width: this.width, height: this.height }, key: i, onClick: () => this.dropiImageClick.emit({ images: imgs, index: i }) }, index.h("img", { src: src, alt: `imagen ${i + 1}`, loading: "lazy", onError: (e) => this.handleError(e) }), index.h("div", { class: "miniature__zoom" }, index.h("dropi-icon", { name: "Search", width: "16px", height: "16px", color: "Neutral-White" }))))))));
-    }
-};
-DropiImageMiniature.style = dropiImageMiniatureCss();
-
-exports.dropi_image_miniature = DropiImageMiniature;

package/dist/cjs/dropi-image-overlay.cjs.entry.js

@@ -1,63 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.js');
-
-const dropiImageOverlayCss = () => `: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}.overlay__thumbs{display:flex;flex-direction:column;gap:12px;height:100%;overflow-y:auto;padding-right:8px;width:100px;flex-shrink:0}.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}.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}}`;
-
-const DropiImageOverlay = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiClose = index.createEvent(this, "dropiClose", 7);
-    }
-    /** 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 (index.h("div", { class: "overlay", onClick: () => this.close() }, index.h("button", { class: "overlay__close", onClick: (e) => { e.stopPropagation(); this.close(); }, "aria-label": "Cerrar" }, index.h("dropi-icon", { name: "Close-large", width: "24px", height: "24px", color: "Neutral-White" })), index.h("div", { class: { 'overlay__body': true, 'overlay__body--single': !multi }, onClick: (e) => e.stopPropagation() }, multi && (index.h("div", { class: "overlay__thumbs" }, imgs.map((src, i) => (index.h("div", { key: i, class: { 'overlay__thumb-box': true, 'overlay__thumb-box--active': i === this.current }, onClick: () => this.current = i }, index.h("img", { src: src, alt: `miniatura ${i + 1}`, class: "overlay__thumb-img", onError: (e) => this.handleError(e) })))))), index.h("div", { class: "overlay__content" }, multi && (index.h("button", { class: "overlay__nav overlay__nav--prev", onClick: () => this.prev(), "aria-label": "Anterior" }, index.h("dropi-icon", { name: "Dropdown-left", width: "18px", height: "18px", color: "Gray-Gray-500" }))), index.h("img", { class: "overlay__main-image", src: imgs[this.current], alt: `imagen ${this.current + 1}`, onError: (e) => this.handleError(e) }), multi && (index.h("button", { class: "overlay__nav overlay__nav--next", onClick: () => this.next(), "aria-label": "Siguiente" }, index.h("dropi-icon", { name: "Dropdown-Right", width: "18px", height: "18px", color: "Gray-Gray-500" })))))));
-    }
-    static get watchers() { return {
-        "images": [{
-                "imagesChanged": 0
-            }],
-        "activeIndex": [{
-                "indexChanged": 0
-            }],
-        "visible": [{
-                "visibleChanged": 0
-            }]
-    }; }
-};
-DropiImageOverlay.style = dropiImageOverlayCss();
-
-exports.dropi_image_overlay = DropiImageOverlay;

package/dist/cjs/dropi-input_3.cjs.entry.js

@@ -1,392 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.js');
-
-const dropiInputCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.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{position:relative;width:100%}.input-container{position:relative}.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}.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}.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}.input-container--has-icon label.label-bottom{left:28px}.input-container--has-icon .form-control:focus+label.label-bottom,.input-container--has-icon .form-control:not(:placeholder-shown)+label.label-bottom{left:0}.text-password{-webkit-text-security:disc;text-security:disc}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}.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)}.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}`;
-
-const DropiInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.onInput = index.createEvent(this, "onInput", 7);
-        this.onChange = index.createEvent(this, "onChange", 7);
-        this.onFocus = index.createEvent(this, "onFocus", 7);
-        this.onBlur = index.createEvent(this, "onBlur", 7);
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    // ── Identification ──────────────────────────────────────────
-    /** Input id. Defaults to label label. */
-    id = '';
-    /** Name attribute for native form submission */
-    name = '';
-    // ── Content ─────────────────────────────────────────────────
-    /** Floating or fixed label text */
-    label = '';
-    /** Placeholder text (visible in fixedLabel mode or on focus) */
-    placeholder = ' ';
-    /** Current value (controlled) */
-    value = '';
-    /** Max character length */
-    maxLength;
-    // ── Behavior ────────────────────────────────────────────────
-    /** Disable the input */
-    disabled = false;
-    /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */
-    required = false;
-    /** Show the required asterisk on the label */
-    showObligatoryAsterisk = true;
-    /** Show label above the input (fixed), instead of floating inside */
-    fixedLabel = false;
-    /** Keyboard input mode hint */
-    inputMode = 'text';
-    // ── Input type modifiers ────────────────────────────────────
-    /** Show password visibility toggle (renders as password field) */
-    passwordInput = false;
-    /** Apply thousand separator formatting (e.g. 1,000,000) */
-    isMoneyInput = false;
-    /** Apply thousand separator without currency symbol */
-    isThousandSeparator = false;
-    /** Only allow numeric characters */
-    isNumericInput = false;
-    /** Allow decimal point when isNumericInput is true */
-    allowDecimals = false;
-    /** Only allow letter characters */
-    isLettersOnly = false;
-    // ── Icon ────────────────────────────────────────────────────
-    /** Icon name shown inside the input (only visible when value is not empty) */
-    icon = '';
-    /** Color token for the icon */
-    iconColor = 'Gray-Gray-400';
-    // ── Validation ──────────────────────────────────────────────
-    /** Mark the field as invalid (consumer-controlled) */
-    hasError = false;
-    /** Helper / error text shown below the field */
-    textHelper = '';
-    /** Only show textHelper when the field is invalid */
-    showHelperOnlyOnError = false;
-    // ── Angular-parity ──────────────────────────────────────────
-    /**
-     * Convenience object prop — matches Angular `inputProperties: InputProperties`.
-     * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,
-     * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
-     * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
-     * isLettersOnly, inputMode.
-     * Note: `formControl` is not supported; use `value` + onInput event instead.
-     */
-    inputProperties = null;
-    // ── Internal state ──────────────────────────────────────────
-    showPassword = false;
-    touched = false;
-    // ── Events ──────────────────────────────────────────────────
-    /** Emitted on every keystroke with the current value */
-    onInput;
-    /** Emitted on blur with the final value */
-    onChange;
-    /** Emitted on focus */
-    onFocus;
-    /** Emitted on blur */
-    onBlur;
-    inputPropertiesChanged(val) {
-        if (!val)
-            return;
-        if (val.id !== undefined)
-            this.id = val.id;
-        if (val.label !== undefined)
-            this.label = val.label;
-        if (val.placeholder !== undefined)
-            this.placeholder = val.placeholder;
-        if (val.maxLength !== undefined)
-            this.maxLength = val.maxLength;
-        if (val.textHelper !== undefined)
-            this.textHelper = val.textHelper;
-        if (val.passwordInput !== undefined)
-            this.passwordInput = val.passwordInput;
-        if (val.isPasswordInput !== undefined)
-            this.passwordInput = val.isPasswordInput; // Fallback
-        if (val.icon !== undefined)
-            this.icon = val.icon;
-        if (val.iconColor !== undefined)
-            this.iconColor = val.iconColor;
-        if (val.isMoneyInput !== undefined)
-            this.isMoneyInput = val.isMoneyInput;
-        if (val.showObligatoryAsterisk !== undefined)
-            this.showObligatoryAsterisk = val.showObligatoryAsterisk;
-        if (val.isNumericInput !== undefined)
-            this.isNumericInput = val.isNumericInput;
-        if (val.allowDecimals !== undefined)
-            this.allowDecimals = val.allowDecimals;
-        if (val.isThousandSeparator !== undefined)
-            this.isThousandSeparator = val.isThousandSeparator;
-        if (val.showHelperOnlyOnError !== undefined)
-            this.showHelperOnlyOnError = val.showHelperOnlyOnError;
-        if (val.isLettersOnly !== undefined)
-            this.isLettersOnly = val.isLettersOnly;
-        if (val.inputMode !== undefined)
-            this.inputMode = val.inputMode;
-    }
-    valueChanged(val) {
-        this.internals.setFormValue(val);
-    }
-    disabledChanged(val) {
-        this.internals.setValidity(val ? { customError: true } : {}, val ? 'Field is disabled' : '');
-    }
-    componentWillLoad() {
-        this.internals.setFormValue(this.value ?? '');
-        if (this.inputProperties)
-            this.inputPropertiesChanged(this.inputProperties);
-    }
-    // ── Handlers ────────────────────────────────────────────────
-    handleInput(e) {
-        let val = e.target.value;
-        if (this.isNumericInput)
-            val = this.filterNumbers(val);
-        if (this.isLettersOnly)
-            val = this.filterLetters(val);
-        if (this.isMoneyInput || this.isThousandSeparator)
-            val = this.formatThousands(val, this.isMoneyInput);
-        this.value = val;
-        this.internals.setFormValue(val);
-        this.onInput.emit(val);
-    }
-    handleKeyDown(e) {
-        if ((this.isNumericInput || this.isMoneyInput || this.isThousandSeparator) && !this.isAllowedNumberKey(e)) {
-            e.preventDefault();
-        }
-        if (this.isLettersOnly && !this.isAllowedLetterKey(e)) {
-            e.preventDefault();
-        }
-    }
-    handleFocus() {
-        this.onFocus.emit();
-    }
-    handleBlur() {
-        this.touched = true;
-        this.onChange.emit(this.value);
-        this.onBlur.emit();
-    }
-    togglePassword() {
-        if (this.disabled)
-            return;
-        this.showPassword = !this.showPassword;
-    }
-    // ── Helpers ─────────────────────────────────────────────────
-    filterNumbers(val) {
-        const pattern = this.allowDecimals ? /[^0-9.]/g : /[^0-9]/g;
-        return val.replace(pattern, '');
-    }
-    filterLetters(val) {
-        return val.replace(/[^a-zA-ZáéíóúÁÉÍÓÚñÑüÜ\s]/g, '');
-    }
-    isAllowedNumberKey(e) {
-        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End'];
-        if (allowed.includes(e.key))
-            return true;
-        if (e.ctrlKey || e.metaKey)
-            return true; // copy/paste/select-all
-        if (/^[0-9]$/.test(e.key))
-            return true;
-        if (this.allowDecimals && e.key === '.')
-            return true;
-        return false;
-    }
-    isAllowedLetterKey(e) {
-        const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Home', 'End', ' '];
-        if (allowed.includes(e.key))
-            return true;
-        if (e.ctrlKey || e.metaKey)
-            return true;
-        return /^[a-zA-ZáéíóúÁÉÍÓÚñÑüÜ]$/.test(e.key);
-    }
-    formatThousands(val, withCurrency) {
-        const raw = val.replace(/[^0-9.]/g, '');
-        const [integer, decimal] = raw.split('.');
-        const formatted = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        const result = decimal !== undefined ? `${formatted}.${decimal}` : formatted;
-        return withCurrency ? `$${result}` : result;
-    }
-    // ── Computed ─────────────────────────────────────────────────
-    get resolvedId() {
-        return this.id || this.label;
-    }
-    get inputType() {
-        if (this.passwordInput)
-            return this.showPassword ? 'text' : 'password';
-        return 'text';
-    }
-    get showHelper() {
-        if (!this.textHelper)
-            return false;
-        if (this.showHelperOnlyOnError)
-            return this.hasError && this.touched;
-        return true;
-    }
-    get isInvalid() {
-        return this.hasError && this.touched;
-    }
-    // ── Render ───────────────────────────────────────────────────
-    render() {
-        const showObligatoryAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
-        const showIconInline = !!this.icon;
-        return (index.h("div", { key: 'cc38b113d77982ba53665a6c8ccbf39a393da696', class: { 'fixed-label-container': this.fixedLabel } }, this.fixedLabel && (index.h("div", { key: '06bb6b6df585f859dc7a903fac4ed3f9f6c31077', class: "input-label Body-S-Regular" }, this.label, showObligatoryAsterisk && index.h("span", { key: '6e87d6717a312d7497c2cf438aec7a692b974dda', class: "asterisk" }, " *"))), index.h("div", { key: '2eb67324cb06e04ee9fc5507a319a2eda8b5e410', class: "form-group" }, index.h("div", { key: '9d8d6f8df83c33782fd61810267e433fdab452d9', class: { 'input-container': true, 'input-container--has-icon': showIconInline } }, showIconInline && index.h("dropi-icon", { key: '370070a0e75a929438cb564698ee10c866e944a9', class: "icon-input", name: this.icon, color: this.iconColor, width: "20px", height: "20px" }), this.passwordInput && (index.h("dropi-icon", { key: '675958939e32a94060993515f9b9a58513ec2adc', class: "icon-input-password", name: this.showPassword ? 'Eye' : 'Eye-crossed', width: "20px", height: "20px", color: "Gray-Gray-500", onClick: () => this.togglePassword() })), index.h("input", { key: 'd2ac98c43f9863ea8153dc66dd3fe347a7c28473', id: this.resolvedId, class: {
-                'form-control': true,
-                'form-control-valid': !this.isInvalid && this.touched && !!this.value,
-                'form-control-invalid': this.isInvalid,
-                'padding-icon': showIconInline,
-                'text-password': this.passwordInput && !this.showPassword,
-                'fixed-label-input': this.fixedLabel,
-            }, type: this.inputType, value: this.value, placeholder: this.fixedLabel ? this.placeholder : ' ', disabled: this.disabled, required: this.required, maxLength: this.maxLength, inputMode: this.inputMode, "data-cy": undefined, onInput: e => this.handleInput(e), onKeyDown: e => this.handleKeyDown(e), onFocus: () => this.handleFocus(), onBlur: () => this.handleBlur() }), !this.fixedLabel && (index.h("label", { key: '45eb57801e7d199532215ba069af8ba01714a46f', class: "Body-S-Regular label-bottom", htmlFor: this.resolvedId }, this.label, showObligatoryAsterisk && index.h("span", { key: '5d4d83ce2575d60567a4a947d643a89f760cb3bd', class: "asterisk" }, " *"))), this.showHelper && (index.h("div", { key: 'b78fdac5f0c46b827c9dd2895d43a5e1724058d8', class: "form-control-helper" }, this.isInvalid && index.h("dropi-icon", { key: 'f037c95230fe0fa57540a1b74a26c14e56e555e4', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" }), index.h("span", { key: 'fc48f7418c36f7ded7a999e446323ca8adb2b590', class: {
-                'disabled-helper': this.disabled,
-                'invalid-color': this.isInvalid,
-            } }, this.textHelper)))))));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "inputProperties": [{
-                "inputPropertiesChanged": 0
-            }],
-        "value": [{
-                "valueChanged": 0
-            }],
-        "disabled": [{
-                "disabledChanged": 0
-            }]
-    }; }
-};
-DropiInput.style = dropiInputCss();
-
-const dropiPaginatorCss = () => `:host{display:block}*,*::before,*::after{box-sizing:border-box}.paginator{display:flex;align-items:center;justify-content:flex-end;gap:var(--Size-4, 16px);flex-wrap:wrap}.paginator-pages{display:flex;align-items:center;gap:var(--Size-1, 4px)}.paginator-btn{width:32px;height:32px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.15s ease}.paginator-btn:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-btn:disabled{opacity:0.4;cursor:not-allowed}.paginator-btn--active{background:var(--Primary-Primary-500, #f49a3d);color:var(--Neutral-White, #ffffff);font-weight:var(--font-weight-bold, 700)}.paginator-btn--active:hover{background:var(--Primary-Primary-500, #f49a3d)}.paginator-btn--arrow{width:auto;padding:0 var(--Size-2, 8px);border-radius:var(--Border-1, 4px);gap:4px}.paginator-btn--arrow:hover:not(:disabled){background:var(--Gray-Gray-50, #f7f8fa)}.paginator-label{font-size:var(--font-size-s, 12px);color:inherit}.paginator-ellipsis{color:var(--Gray-Gray-400, #858ea6);padding:0 4px;font-size:var(--font-size-s, 12px);display:flex;align-items:center}.paginator-size{display:flex;align-items:center;gap:var(--Size-2, 8px)}.paginator-size-label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-500, #69738c)}.paginator-size-select{height:32px;padding:0 var(--Size-2, 8px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-1, 4px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:inherit;cursor:pointer;outline:none}`;
-
-const DropiPaginator = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.pageChange = index.createEvent(this, "pageChange", 7);
-    }
-    /** Total number of pages */
-    totalPages = 1;
-    /** Current page (1-based) */
-    currentPage = 1;
-    /** Disabled state */
-    disabled = false;
-    /** Max page buttons to show at once */
-    maxVisiblePages = 8;
-    /** Hide total page count (show only arrows) */
-    isNotTotalPages = false;
-    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
-    noLabels = false;
-    /** Emitted when page changes. e.detail = new page number */
-    pageChange;
-    get pageNumbers() {
-        const total = this.totalPages;
-        const cur = this.currentPage;
-        const max = this.maxVisiblePages;
-        if (total <= max)
-            return Array.from({ length: total }, (_, i) => i + 1);
-        const half = Math.floor(max / 2);
-        let start = Math.max(1, cur - half);
-        let end = Math.min(total, start + max - 1);
-        if (end - start < max - 1)
-            start = Math.max(1, end - max + 1);
-        const pages = [];
-        if (start > 1) {
-            pages.push(1);
-            if (start > 2)
-                pages.push('...');
-        }
-        for (let i = start; i <= end; i++)
-            pages.push(i);
-        if (end < total) {
-            if (end < total - 1)
-                pages.push('...');
-            pages.push(total);
-        }
-        return pages;
-    }
-    goTo(p) {
-        if (this.disabled || p < 1 || p > this.totalPages || p === this.currentPage)
-            return;
-        this.currentPage = p;
-        this.pageChange.emit(this.currentPage);
-    }
-    render() {
-        const pages = this.pageNumbers;
-        const isFirst = this.currentPage <= 1;
-        const isLast = this.currentPage >= this.totalPages;
-        return (index.h("div", { key: 'b601f88e4f971f885835d81fe876303fe97027c7', class: "paginator" }, index.h("div", { key: '988ffb7ed122d4a666af4525bc85159d8d36538a', class: "paginator-pages" }, !isFirst && !this.noLabels && (index.h("button", { key: '920a1a407782bde436fb6560caeb39848e9c7e28', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(1), "aria-label": "Primera p\u00E1gina", disabled: this.disabled }, index.h("dropi-icon", { key: '67bc6ba66852a8883a19b2a3182be3cb298f2c8d', name: "Arrow-double-small-left", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isFirst && (index.h("button", { key: 'b1d0c5a8f66056cb53c31b01959177754632a906', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage - 1), "aria-label": "Anterior", disabled: this.disabled }, index.h("dropi-icon", { key: '951435cbf9b7a8b9bd0e0f33d2c9eacaea6e7af1', name: "Dropdown-left", width: "16px", height: "16px", color: "Gray-Gray-600" }), !this.noLabels && index.h("span", { key: 'fed8a203b3e62f5da3e6fa055b1ee6e35453147c', class: "paginator-label" }, "Anterior"))), pages.map((p, i) => p === '...'
-            ? index.h("span", { class: "paginator-ellipsis", key: `e${i}` }, "\u2026")
-            : index.h("button", { key: p, class: { 'paginator-btn': true, 'paginator-btn--active': p === this.currentPage }, onClick: () => this.goTo(p), "aria-current": p === this.currentPage ? 'page' : undefined, disabled: this.disabled }, p)), !isLast && (index.h("button", { key: '35a728e031880403ee0ff984484237ab701bd406', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.currentPage + 1), "aria-label": "Siguiente", disabled: this.disabled }, !this.noLabels && index.h("span", { key: '4a73ba225105e449f8dfe8a504c5b1ad3e9c31cd', class: "paginator-label" }, "Siguiente"), index.h("dropi-icon", { key: '7b140df9437922acc8c24d6ee1ff15d69ce7b7f1', name: "Dropdown-Right", width: "16px", height: "16px", color: "Gray-Gray-600" }))), !isLast && !this.noLabels && (index.h("button", { key: '6157fa189ca011be4c13da803d2cd110d882bb8e', class: { 'paginator-btn': true, 'paginator-btn--arrow': true }, onClick: () => this.goTo(this.totalPages), "aria-label": "\u00DAltima p\u00E1gina", disabled: this.disabled }, index.h("dropi-icon", { key: '7b6c1b31d4caed8203b739cc10f3084568e40f10', name: "Arrow-double-small-right", width: "16px", height: "16px", color: "Gray-Gray-600" }))))));
-    }
-};
-DropiPaginator.style = dropiPaginatorCss();
-
-const dropiTagCss = () => `:host{display:inline-flex}*,*::before,*::after{box-sizing:border-box}.container-chips{display:inline-block}.tags{display:inline-flex;padding:4px 8px;justify-content:center;align-items:center;gap:4px;border-radius:var(--Border-5, 9999px);overflow:hidden;text-align:center;text-overflow:ellipsis;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-medium, 500);line-height:var(--Size-5, 24px);animation:fade-in 200ms ease-out}.tags.icon-only{gap:0}.file-icon{display:flex}@keyframes fade-in{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}`;
-
-const DropiTag = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** primary (filled) | secondary (soft) */
-    type = 'primary';
-    /** Color state of the tag */
-    state = 'default';
-    /** Whether to show the icon */
-    showIcon = false;
-    /** Icon name from the sprite */
-    icon = '';
-    /** Label text */
-    text = '';
-    colorMap = {
-        default: 'Primary-Primary',
-        success: 'Success-Success',
-        info: 'Info-Info',
-        warning: 'Warning-Warning',
-        error: 'Error-Error',
-        legacy: 'Gray-Gray',
-    };
-    propsChanged() { }
-    get bgColor() {
-        const base = this.colorMap[this.state];
-        if (this.type === 'primary')
-            return `var(--${base}-500)`;
-        const shade = this.state === 'default' || this.state === 'legacy' ? '-100' : '-50';
-        return `var(--${base}${shade})`;
-    }
-    get textColor() {
-        const base = this.colorMap[this.state];
-        if (this.type === 'primary')
-            return `var(--Neutral-White)`;
-        const shade = this.state === 'default' ? '-500' : '-700';
-        return `var(--${base}${shade})`;
-    }
-    get iconColor() {
-        if (this.type === 'primary')
-            return 'Neutral-White';
-        const base = this.colorMap[this.state];
-        const shade = this.state === 'default' ? '-500' : '-700';
-        return `${base}${shade}`;
-    }
-    get hasContent() {
-        return typeof this.text === 'string' && this.text.trim().length > 0;
-    }
-    render() {
-        return (index.h("div", { key: '1736efc48b3ccaf5f3ca85ad29622f42b4fb3c8d', class: "container-chips" }, index.h("div", { key: '96c2b0e9d22881ca71c58488dcd622a1eef1a120', class: { tags: true, 'icon-only': this.showIcon && !this.hasContent }, style: { backgroundColor: this.bgColor, color: this.textColor } }, this.showIcon && this.icon && (index.h("dropi-icon", { key: 'aab0330382fe0690177edcb364ab043459b9a316', class: "file-icon", name: this.icon, width: "16px", height: "16px", color: this.iconColor })), this.hasContent && index.h("span", { key: 'be38207ca7668b6b4976d5f3f2f506c380ee0491' }, this.text))));
-    }
-    static get watchers() { return {
-        "type": [{
-                "propsChanged": 0
-            }],
-        "state": [{
-                "propsChanged": 0
-            }]
-    }; }
-};
-DropiTag.style = dropiTagCss();
-
-exports.dropi_input = DropiInput;
-exports.dropi_paginator = DropiPaginator;
-exports.dropi_tag = DropiTag;

package/dist/cjs/dropi-languages-selector.cjs.entry.js

@@ -1,61 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.js');
-
-const dropiLanguagesSelectorCss = () => `:host{display:inline-block;position:relative}*,*::before,*::after{box-sizing:border-box}.custom-dropdown{position:relative;cursor:pointer;user-select:none}.custom-dropdown.open dropi-icon{transform:rotate(180deg)}.selected-option{display:flex;height:38px;padding:var(--Size-2, 8px) var(--Size-3, 12px);align-items:center;gap:var(--Size-2, 8px);border-radius:4px;border:1px solid var(--Gray-Gray-200, #c3c9d9);background:var(--Neutral-White, #ffffff);font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:6px;margin-top:4px;z-index:1000;overflow-y:auto;box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);padding:0;list-style:none;height:0;opacity:0;visibility:hidden;transition:height 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;max-height:0}.dropdown-options.dropdown-open{max-height:300px;height:auto;opacity:1;visibility:visible}.dropdown-options li{padding:8px 12px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066)}.dropdown-options li:hover,.dropdown-options li.active{background:var(--Gray-Gray-50, #f7f8fa)}@media screen and (max-width: 720px){.selected-option span,.dropdown-options li span{display:none}}`;
-
-const DropiLanguagesSelector = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.languageChange = index.createEvent(this, "languageChange", 7);
-    }
-    /** Language options (array or JSON string) */
-    languages = [];
-    /** Currently selected language (LanguageOption or JSON string) */
-    selectedLang = null;
-    languageChange;
-    isOpen = false;
-    parsedLanguages = [];
-    currentLang = null;
-    languagesChanged(val) {
-        if (val == null) {
-            this.parsedLanguages = [];
-            return;
-        }
-        this.parsedLanguages = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
-        if (!this.currentLang && this.parsedLanguages.length > 0) {
-            this.currentLang = this.parsedLanguages[0];
-        }
-    }
-    selectedLangChanged(val) {
-        if (!val)
-            return;
-        this.currentLang = typeof val === 'string' ? JSON.parse(val) : val;
-    }
-    componentWillLoad() {
-        this.languagesChanged(this.languages);
-        if (this.selectedLang)
-            this.selectedLangChanged(this.selectedLang);
-    }
-    select(lang) {
-        this.currentLang = lang;
-        this.isOpen = false;
-        this.languageChange.emit(lang);
-    }
-    render() {
-        if (!this.currentLang)
-            return null;
-        return (index.h("div", { class: `custom-dropdown${this.isOpen ? ' open' : ''}` }, index.h("div", { class: "selected-option", onClick: () => { this.isOpen = !this.isOpen; } }, index.h("dropi-country-flags", { country: this.currentLang.flag, "flag-style": "rectangle", width: "20", height: "15" }), index.h("span", { class: "Body-S-Regular" }, this.currentLang.label), index.h("dropi-icon", { name: "Caret-down", width: "16px", height: "16px", color: "Gray-Gray-500" })), index.h("ul", { class: `dropdown-options${this.isOpen ? ' dropdown-open' : ''}` }, this.parsedLanguages.map(lang => (index.h("li", { key: lang.code, class: lang.code === this.currentLang?.code ? 'active' : '', onClick: () => this.select(lang) }, index.h("dropi-country-flags", { country: lang.flag, "flag-style": "rectangle", width: "20", height: "15" }), index.h("span", { class: "Body-S-Regular" }, lang.label)))))));
-    }
-    static get watchers() { return {
-        "languages": [{
-                "languagesChanged": 0
-            }],
-        "selectedLang": [{
-                "selectedLangChanged": 0
-            }]
-    }; }
-};
-DropiLanguagesSelector.style = dropiLanguagesSelectorCss();
-
-exports.dropi_languages_selector = DropiLanguagesSelector;

package/dist/cjs/dropi-logo.cjs.entry.js

@@ -1,37 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.js');
-
-const dropiLogoCss = () => `:host{display:inline-block}.dropi-logo{margin:0;padding:0;display:flex;align-items:center;justify-content:center}.dropi-logo img{display:block;object-fit:contain}.dropi-logo--large img{width:256px;height:84px}.dropi-logo--small img{width:86px;height:81px}`;
-
-const FALLBACK_SVG = `data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgNDAiPjx0ZXh0IHk9IjMwIiBmb250LXNpemU9IjI0IiBmb250LWZhbWlseT0ic2Fucy1zZXJpZiIgZmlsbD0iIzg1OGVhNiI+ZHJvcGk8L3RleHQ+PC9zdmc+`;
-const DropiLogo = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    get el() { return index.getElement(this); }
-    /** Logo image URL */
-    urlLogo = '';
-    /** Size variant */
-    size = 'large';
-    /** Theme (reserved for future use) */
-    theme = 'light';
-    componentWillLoad() {
-        if (!this.urlLogo) {
-            this.urlLogo =
-                this.el.getAttribute('urlLogo') ||
-                    this.el.getAttribute('url-logo') ||
-                    this.el.getAttribute('urllogo') ||
-                    '';
-        }
-    }
-    handleError(e) {
-        e.target.src = FALLBACK_SVG;
-    }
-    render() {
-        return (index.h("figure", { key: '479af3da2dc04c7d6e79b99494fce0fb5419af4d', class: { 'dropi-logo': true, [`dropi-logo--${this.size}`]: true } }, index.h("img", { key: '6b78e7004f4b1dd782e4c17dae7b264fff483875', src: this.urlLogo || FALLBACK_SVG, alt: "Dropi logo", onError: (e) => this.handleError(e) })));
-    }
-};
-DropiLogo.style = dropiLogoCss();
-
-exports.dropi_logo = DropiLogo;

package/dist/cjs/dropi-lottie-loader.cjs.entry.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var index = require('./index-C8kwDvpf.js');
-
-const dropiLottieLoaderCss = () => `:host{display:block}.loader-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255, 255, 255, 0.85);z-index:9999}.loader-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.lottie-animation{display:flex;align-items:center;justify-content:center;width:300px;height:300px}.lottie-animation lottie-player{display:block;width:300px !important;height:300px !important}.loader-text{display:flex;flex-direction:column;align-items:center;gap:var(--Size-2, 8px);text-align:center}.loader-title{margin:0;font-size:var(--font-size-m, 14px);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-700, #32394d)}.loader-message{margin:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-500, #69738c)}`;
-
-const DropiLottieLoader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Show or hide the loader */
-    visible = true;
-    /** Path to the Lottie JSON animation file */
-    loadingAnimation = '/assets/lottie-files/loading.json';
-    /** Title shown below the animation */
-    title = 'Cargando...';
-    /** Descriptive message below the title */
-    message = 'Por favor, espere un momento';
-    render() {
-        if (!this.visible)
-            return null;
-        return (index.h("div", { class: "loader-overlay" }, index.h("div", { class: "loader-container" }, index.h("div", { class: "lottie-animation" }, index.h("lottie-player", { src: this.loadingAnimation, background: "transparent", speed: "1", style: { width: '300px', height: '300px' }, loop: true, autoplay: true })), (this.title || this.message) && (index.h("div", { class: "loader-text" }, this.title && index.h("h3", { class: "loader-title" }, this.title), this.message && index.h("p", { class: "loader-message" }, this.message))))));
-    }
-};
-DropiLottieLoader.style = dropiLottieLoaderCss();
-
-exports.dropi_lottie_loader = DropiLottieLoader;