@dropi/ui 0.1.54 → 999.0.0

package/dist/cjs/dropi-otp-send-code.cjs.entry.js

@@ -1,135 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiOtpSendCodeCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.otp{display:flex;flex-direction:column;align-items:center;gap:var(--Size-4, 16px)}.otp__label{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-600, #475066);text-align:center;margin:0}.otp__inputs{display:flex;gap:var(--Size-4, 16px)}.otp__digit{width:56px;height:56px;border:1.5px solid var(--Gray-Gray-200, #d3d7de);border-radius:var(--Border-2, 8px);text-align:center;font-size:22px;font-weight:var(--font-weight-bold, 700);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-800, #1f2433);outline:none;transition:border-color 0.15s ease;background:var(--Neutral-White, #ffffff)}.otp__digit:focus{border:2px solid var(--Primary-Primary-500, #f49a3d)}.otp__digit--filled{border:1px solid var(--Success-Success-500, #0abb87);color:var(--Neutral-Neutral-900, #0e111a)}.otp__digit--error{border:1px solid var(--Error-Error-500, #f46a6b)}.otp__error{margin:0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b);text-align:center}.otp__resend{text-align:center}.otp__countdown{font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-400, #858ea6)}.otp__resend-btn{background:none;border:none;padding:0;font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-bold, 700);color:var(--Primary-Primary-500, #f49a3d);cursor:pointer;text-decoration:underline}`;
-
-const RESEND_SECONDS = 30;
-const DropiOtpSendCode = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.codeCompleted = index.createEvent(this, "codeCompleted");
-        this.codeAccepted = index.createEvent(this, "codeAccepted");
-        this.dropiResend = index.createEvent(this, "dropiResend");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    /** Name for native form submission */
-    name;
-    /** Delivery method label */
-    engine = 'email';
-    /** Contact info (email/phone to show in label) */
-    labelContact = '';
-    /** Show contact label */
-    showLabelContact = false;
-    /** Error message to display */
-    errorMessage = '';
-    /** Number of digits for the OTP */
-    digitsCount = 6;
-    digits = [];
-    digitStates = [];
-    countdown = RESEND_SECONDS;
-    canResend = false;
-    error = false;
-    inputs = [];
-    timer;
-    handleDigitsCountChange(newValue) {
-        this.digits = Array(newValue).fill('');
-        this.digitStates = Array(newValue).fill('idle');
-        this.inputs = [];
-    }
-    /** Emitted when all digits are entered. */
-    codeCompleted;
-    /** Emitted when all digits are entered (alternative event). */
-    codeAccepted;
-    /** Emitted when resend is requested */
-    dropiResend;
-    componentWillLoad() {
-        this.digits = Array(this.digitsCount).fill('');
-        this.digitStates = Array(this.digitsCount).fill('idle');
-        this.internals.setFormValue('');
-    }
-    componentDidLoad() { this.startCountdown(); }
-    disconnectedCallback() { clearInterval(this.timer); }
-    startCountdown() {
-        this.countdown = RESEND_SECONDS;
-        this.canResend = false;
-        clearInterval(this.timer);
-        this.timer = setInterval(() => {
-            this.countdown--;
-            if (this.countdown <= 0) {
-                clearInterval(this.timer);
-                this.canResend = true;
-            }
-        }, 1000);
-    }
-    handleInput(e, index) {
-        const val = e.target.value.replace(/\D/g, '').slice(-1);
-        const newDigits = [...this.digits];
-        newDigits[index] = val;
-        this.digits = newDigits;
-        const newStates = [...this.digitStates];
-        newStates[index] = val ? 'filled' : 'idle';
-        this.digitStates = newStates;
-        if (val && index < this.digitsCount - 1)
-            this.inputs[index + 1]?.focus();
-        if (newDigits.every(d => d !== '')) {
-            const finalCode = newDigits.join('');
-            this.internals.setFormValue(finalCode);
-            this.codeCompleted.emit(finalCode);
-            this.codeAccepted.emit(finalCode);
-        }
-        else {
-            this.internals.setFormValue(newDigits.join(''));
-        }
-    }
-    handleKeyDown(e, index) {
-        if (e.key === 'Backspace' && !this.digits[index] && index > 0) {
-            this.inputs[index - 1]?.focus();
-        }
-    }
-    handlePaste(e) {
-        e.preventDefault();
-        const text = e.clipboardData?.getData('text')?.replace(/\D/g, '').slice(0, this.digitsCount) || '';
-        const newDigits = Array(this.digitsCount).fill('');
-        text.split('').forEach((c, i) => { newDigits[i] = c; });
-        this.digits = newDigits;
-        this.digitStates = newDigits.map(d => d ? 'filled' : 'idle');
-        this.inputs[Math.min(text.length, this.digitsCount - 1)]?.focus();
-        if (newDigits.every(d => d !== '')) {
-            const finalCode = newDigits.join('');
-            this.internals.setFormValue(finalCode);
-            this.codeCompleted.emit(finalCode);
-            this.codeAccepted.emit(finalCode);
-        }
-        else {
-            this.internals.setFormValue(newDigits.join(''));
-        }
-    }
-    render() {
-        const engineLabel = this.engine === 'sms' ? 'SMS' : this.engine === '2fa' ? 'autenticador' : 'correo';
-        return (index.h("div", { key: '68d01986b43ee262c6df66d1160df32313c76edf', class: "otp" }, this.showLabelContact && (index.h("p", { key: '83138a2f4716552cce108c228b99c1e7fc532036', class: "otp__label" }, "Ingresa el c\u00F3digo enviado a tu ", engineLabel, this.labelContact && index.h("strong", { key: '8de893e9ea835b3459b8be78414d337436f908de' }, " ", this.labelContact))), index.h("div", { key: 'a50f5e2ae1733ec1df704578d6264b8e86a08f5b', class: "otp__inputs", onPaste: (e) => this.handlePaste(e) }, this.digits.map((_, i) => (index.h("input", { key: i, ref: (el) => {
-                if (el)
-                    this.inputs[i] = el;
-            }, class: {
-                'otp__digit': true,
-                'otp__digit--filled': this.digitStates[i] === 'filled',
-                'otp__digit--error': this.error,
-            }, type: "text", inputMode: "numeric", maxLength: 1, value: this.digits[i] ?? '', onInput: (e) => this.handleInput(e, i), onKeyDown: (e) => this.handleKeyDown(e, i) })))), this.error && this.errorMessage && (index.h("p", { key: '315b68b30120ab315f106eed441b9a61550d7833', class: "otp__error" }, this.errorMessage)), index.h("div", { key: 'b07d47236824b631193b9a90c083ea5d170d135b', class: "otp__resend" }, this.canResend ? (index.h("button", { class: "otp__resend-btn", onClick: () => { this.startCountdown(); this.dropiResend.emit(); } }, "Reenviar c\u00F3digo")) : (index.h("span", { class: "otp__countdown" }, "Reenviar en ", this.countdown, "s")))));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "digitsCount": [{
-                "handleDigitsCountChange": 0
-            }]
-    }; }
-};
-DropiOtpSendCode.style = dropiOtpSendCodeCss();
-
-exports.dropi_otp_send_code = DropiOtpSendCode;

package/dist/cjs/dropi-phone-input.cjs.entry.js

@@ -1,220 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative;font-family:var(--font-family-01, 'Inter', sans-serif)}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}input[type='number']{-moz-appearance:textfield;appearance:textfield}.phone-wrap{width:100%}.phone-label{display:block;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-600, #475066);margin-bottom:4px}.phone-input-container{display:flex;align-items:center;gap:8px}.custom-select{position:relative;width:50%}.form-control{flex:1;width:100%;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:5px;font-size:14px;font-family:var(--font-family-01, 'Inter', sans-serif);transition:border-color 0.3s ease-in-out;height:40px;padding:0 12px;outline:none;color:var(--Gray-Gray-700, #32394d);background-color:var(--Neutral-White, #ffffff)}.form-control::placeholder{color:var(--Gray-Gray-500, #69738c)}.form-control:focus::placeholder{color:var(--Gray-Gray-500, #69738c)}.form-control:focus{border-color:var(--Info-Info-500, #50a5f1);outline:none}.form-control:disabled{border:1px solid var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);outline:none}.form-control.is-invalid{background:#fffbfb;border-color:var(--Error-Error-500, #f46a6b) !important}.select-button{width:100%;height:40px;padding:0.47rem 0.75rem;padding-right:7px;border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);background:var(--Neutral-White, #ffffff);color:var(--Gray-Gray-500, #69738c);font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);display:flex;justify-content:space-between;align-items:center;text-align:left;cursor:pointer}.select-button img{width:20px;height:20px}.select-button:focus{border-color:var(--Info-Info-500, #50a5f1) !important;outline:none}.select-button:disabled{border-color:var(--Gray-Gray-200, #c3c9d9);color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:unset}.select-button.select-completed{border-color:var(--Gray-Gray-400, #858ea6);color:var(--Gray-Gray-600, #475066);background:var(--Neutral-White, #ffffff)}.select-button.select-invalid{border-color:var(--Error-Error-500, #f46a6b) !important}.select-dropdown{position:absolute;width:100%;overflow:hidden;list-style:none;padding:0;margin:4px 0 0 0;border:1px solid transparent;border-radius:var(--Border-2, 8px);overflow-y:scroll;z-index:var(--dropi-z-index-overlay, 11000)}.select-dropdown::-webkit-scrollbar{width:6px}.select-dropdown::-webkit-scrollbar-thumb{background-color:var(--Gray-Gray-300, #d1d6e1);border-radius:4px}.expanded-select{max-height:250px;background:var(--Neutral-White, #ffffff);box-shadow:var(--Shadow-medium, 0 4px 16px rgba(0, 0, 0, 0.08));border:1px solid var(--Gray-Gray-200, #c3c9d9);transition:max-height 0.2s ease-in}.collapsed-select{max-height:0;background:transparent;box-shadow:none;border:1px solid transparent;transition:max-height 0.2s ease-out, background 0.6s ease-out, box-shadow 0.6s ease-out}.select-dropdown li{margin:0;padding:0}.option{width:100%;height:45px;border-radius:var(--Border-2, 8px);padding-top:var(--Size-3, 12px);padding-right:var(--Size-4, 16px);padding-bottom:var(--Size-3, 12px);padding-left:var(--Size-4, 16px);border:none;background:transparent;text-align:left;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);cursor:pointer;display:flex;align-items:center;gap:8px}.option img{width:20px;height:20px}.option:hover{background:var(--Gray-Gray-50, #f7f8fa)}.option:disabled{color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:unset}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}.phone-error{margin:4px 0 0;font-size:var(--font-size-xs, 10px);color:var(--Error-Error-500, #f46a6b)}`;
-
-const COUNTRIES = [
-    { code: '57', name: 'Colombia', flag: 'CO', maxLength: 10 },
-    { code: '52', name: 'Mexico', flag: 'MX', maxLength: 10 },
-    { code: '507', name: 'Panama', flag: 'PA', maxLength: 8 },
-    { code: '56', name: 'Chile', flag: 'CL', maxLength: 9 },
-    { code: '593', name: 'Ecuador', flag: 'EC', maxLength: 10 },
-    { code: '51', name: 'Peru', flag: 'PE', maxLength: 9 },
-    { code: '34', name: 'España', flag: 'ES', maxLength: 9 },
-    { code: '595', name: 'Paraguay', flag: 'PY', maxLength: 9 },
-    { code: '58', name: 'Venezuela', flag: 'VE', maxLength: 11 },
-    { code: '54', name: 'Argentina', flag: 'AR', maxLength: 10 },
-    { code: '55', name: 'Brasil', flag: 'BR', maxLength: 11 },
-    { code: '1', name: 'United States', flag: 'US', maxLength: 10 },
-    { code: '502', name: 'Guatemala', flag: 'GT', maxLength: 8 },
-    { code: '598', name: 'Uruguay', flag: 'UY', maxLength: 9 },
-    { code: '501', name: 'Belize', flag: 'BZ', maxLength: 7 },
-    { code: '81', name: 'Japan', flag: 'JP', maxLength: 10 },
-    { code: '1', name: 'Canada', flag: 'CA', maxLength: 9 },
-    { code: '1473', name: 'Grenada', flag: 'GD', maxLength: 10 },
-    { code: '509', name: 'Haiti', flag: 'HT', maxLength: 10 },
-    { code: '1809', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },
-    { code: '1829', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },
-    { code: '1849', name: 'Dominican Republic', flag: 'DO', maxLength: 10 },
-    { code: '1869', name: 'Saint Kitts And Nevis', flag: 'KN', maxLength: 10 },
-    { code: '1784', name: 'Saint Vincent And The Grenadines', flag: 'VC', maxLength: 10 },
-    { code: '1758', name: 'Saint Lucia', flag: 'LC', maxLength: 10 },
-    { code: '597', name: 'Suriname', flag: 'SR', maxLength: 10 },
-    { code: '1868', name: 'Trinidad and Tobago', flag: 'TT', maxLength: 10 },
-    { code: '505', name: 'Nicaragua', flag: 'NI', maxLength: 8 },
-    { code: '506', name: 'Costa Rica', flag: 'CR', maxLength: 8 },
-    { code: '591', name: 'Bolivia', flag: 'BO', maxLength: 8 },
-    { code: '7', name: 'Russia', flag: 'RU', maxLength: 11 },
-    { code: '20', name: 'Egypt', flag: 'EG', maxLength: 9 },
-    { code: '27', name: 'South Africa', flag: 'ZA', maxLength: 10 },
-    { code: '30', name: 'Greece', flag: 'GR', maxLength: 10 },
-    { code: '31', name: 'Netherlands', flag: 'NL', maxLength: 9 },
-    { code: '32', name: 'Belgium', flag: 'BE', maxLength: 8 },
-    { code: '33', name: 'France', flag: 'FR', maxLength: 9 },
-    { code: '36', name: 'Hungary', flag: 'HU', maxLength: 9 },
-    { code: '40', name: 'Romania', flag: 'RO', maxLength: 9 },
-    { code: '39', name: 'Italy', flag: 'IT', maxLength: 10 },
-    { code: '41', name: 'Switzerland', flag: 'CH', maxLength: 9 },
-    { code: '44', name: 'United Kingdom', flag: 'GB', maxLength: 11 },
-    { code: '45', name: 'Denmark', flag: 'DK', maxLength: 8 },
-    { code: '46', name: 'Sweden', flag: 'SE', maxLength: 8 },
-    { code: '47', name: 'Norway', flag: 'NO', maxLength: 8 },
-    { code: '48', name: 'Poland', flag: 'PL', maxLength: 9 },
-    { code: '49', name: 'Germany', flag: 'DE', maxLength: 11 },
-    { code: '53', name: 'Malta', flag: 'MT', maxLength: 8 },
-    { code: '60', name: 'Malaysia', flag: 'MY', maxLength: 9 },
-    { code: '61', name: 'Australia', flag: 'AU', maxLength: 9 },
-    { code: '62', name: 'Indonesia', flag: 'ID', maxLength: 12 },
-    { code: '63', name: 'Philippines', flag: 'PH', maxLength: 10 },
-    { code: '64', name: 'New Zealand', flag: 'NZ', maxLength: 12 },
-    { code: '65', name: 'Singapore', flag: 'SG', maxLength: 8 },
-    { code: '66', name: 'Thailand', flag: 'TH', maxLength: 9 },
-    { code: '82', name: 'South Korea', flag: 'KR', maxLength: 9 },
-    { code: '84', name: 'Vietnam', flag: 'VN', maxLength: 11 },
-    { code: '86', name: 'China', flag: 'CN', maxLength: 11 },
-    { code: '90', name: 'Turkey', flag: 'TR', maxLength: 10 },
-    { code: '91', name: 'India', flag: 'IN', maxLength: 10 },
-    { code: '92', name: 'Pakistan', flag: 'PK', maxLength: 9 },
-    { code: '93', name: 'Afghanistan', flag: 'AF', maxLength: 10 },
-    { code: '94', name: 'Sri Lanka', flag: 'LK', maxLength: 9 },
-    { code: '95', name: 'Myanmar', flag: 'MM', maxLength: 9 },
-    { code: '98', name: 'Iran', flag: 'IR', maxLength: 10 },
-    { code: '211', name: 'South Sudan', flag: 'SS', maxLength: 10 },
-    { code: '212', name: 'Morocco', flag: 'MA', maxLength: 9 },
-    { code: '213', name: 'Algeria', flag: 'DZ', maxLength: 9 },
-    { code: '216', name: 'Tunisia', flag: 'TN', maxLength: 8 },
-    { code: '218', name: 'Libya', flag: 'LY', maxLength: 9 },
-    { code: '220', name: 'Gambia', flag: 'GM', maxLength: 8 },
-    { code: '221', name: 'Senegal', flag: 'SN', maxLength: 9 },
-    { code: '222', name: 'Mauritania', flag: 'MR', maxLength: 9 },
-    { code: '223', name: 'Mali', flag: 'ML', maxLength: 8 },
-    { code: '224', name: 'Guinea', flag: 'GN', maxLength: 9 },
-    { code: '225', name: 'Ivory Coast', flag: 'CI', maxLength: 10 },
-    { code: '226', name: 'Burkina Faso', flag: 'BF', maxLength: 10 },
-    { code: '227', name: 'Niger', flag: 'NE', maxLength: 8 },
-    { code: '228', name: 'Togo', flag: 'TG', maxLength: 8 },
-    { code: '229', name: 'Benin', flag: 'BJ', maxLength: 8 },
-    { code: '230', name: 'Mauritius', flag: 'MU', maxLength: 10 },
-    { code: '231', name: 'Liberia', flag: 'LR', maxLength: 8 },
-    { code: '232', name: 'Sierra Leone', flag: 'SL', maxLength: 11 },
-    { code: '233', name: 'Ghana', flag: 'GH', maxLength: 9 },
-    { code: '234', name: 'Nigeria', flag: 'NG', maxLength: 11 },
-    { code: '235', name: 'Chad', flag: 'TD', maxLength: 8 },
-    { code: '236', name: 'Central African Republic', flag: 'CF', maxLength: 21 },
-    { code: '237', name: 'Cameroon', flag: 'CM', maxLength: 10 },
-    { code: '238', name: 'Cape Verde', flag: 'CV', maxLength: 9 },
-    { code: '239', name: 'São Tomé and Príncipe', flag: 'ST', maxLength: 14 },
-    { code: '240', name: 'Equatorial Guinea', flag: 'GQ', maxLength: 17 },
-    { code: '241', name: 'Gabon', flag: 'GA', maxLength: 9 },
-];
-const DropiPhoneInput = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiCodChange = index.createEvent(this, "dropiCodChange");
-        this.dropiPhoneChange = index.createEvent(this, "dropiPhoneChange");
-        this.dropiVerify = index.createEvent(this, "dropiVerify");
-        this.dropiChangeSelect = index.createEvent(this, "dropiChangeSelect");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    get el() { return index.getElement(this); }
-    internals;
-    /** Name for native form submission */
-    name;
-    /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
-    codArea = '57';
-    /** Phone number value — matches Angular 'ngModelPhone' */
-    ngModelPhone = '';
-    /** Input placeholder — matches Angular 'phoneNumberPlaceholder' */
-    phoneNumberPlaceholder = null;
-    /** Disabled state — matches Angular 'disabledInput' */
-    disabledInput = false;
-    /** Validation state — matches Angular 'isValidPhone' */
-    isValidPhone = undefined;
-    /** Validate on init — matches Angular 'validateOnInit' */
-    validateOnInit = true;
-    /**
-     * Pre-selected country object (matches Angular `selectedOption: Country`).
-     * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.
-     */
-    selectedOption = null;
-    /**
-     * Country select configuration object (matches Angular `selectProperties: SelectProperties`).
-     * Fields: `label`, `placeholder`, `options` (array of Country objects).
-     * When provided, overrides the internal country list.
-     */
-    selectProperties = null;
-    open = false;
-    /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
-    dropiCodChange;
-    /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
-    dropiPhoneChange;
-    /** Emitted on field verification — matches Angular 'verifiedField' */
-    dropiVerify;
-    /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
-    dropiChangeSelect;
-    codAreaChanged() {
-        this.ngModelPhone = '';
-        this.updateFormValue();
-    }
-    ngModelPhoneChanged() {
-        this.updateFormValue();
-    }
-    selectedOptionChanged(val) {
-        if (!val)
-            return;
-        // Support Angular Country shape: { dialCode, iso2 } or { code }
-        const code = val.dialCode ?? val.code ?? this.codArea;
-        this.codArea = String(code).replace('+', '');
-    }
-    componentWillLoad() {
-        if (this.selectedOption)
-            this.selectedOptionChanged(this.selectedOption);
-        this.updateFormValue();
-    }
-    updateFormValue() {
-        const fullValue = this.ngModelPhone ? `+${this.codArea}${this.ngModelPhone}` : '';
-        this.internals.setFormValue(fullValue);
-    }
-    get selectedCountry() {
-        const cleanCodArea = (this.codArea ?? '57').replace('+', '');
-        return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];
-    }
-    selectCountry(c) {
-        this.codArea = c.code;
-        this.open = false;
-        this.dropiCodChange.emit(c.code);
-        this.dropiChangeSelect.emit(c);
-    }
-    handleInput(e) {
-        const raw = e.target.value.replace(/\D/g, '');
-        this.ngModelPhone = raw.slice(0, this.selectedCountry.maxLength);
-        e.target.value = this.ngModelPhone;
-        this.dropiPhoneChange.emit(this.ngModelPhone);
-    }
-    handleWindowClick(ev) {
-        const path = ev.composedPath();
-        if (!path.includes(this.el)) {
-            this.open = false;
-        }
-    }
-    render() {
-        const country = this.selectedCountry;
-        const isInvalid = this.isValidPhone === false;
-        return (index.h("div", { key: '8baf494cc8b0c7925414a5c6b518bed906c6c9af', class: "phone-wrap" }, index.h("div", { key: '8676178ee71fc85eaab623dea92760f0ae661c77', class: "phone-input-container" }, index.h("div", { key: 'b4037828a850187c7c01df69c46704ca38ab9399', class: "custom-select" }, index.h("button", { key: '796f0d20cffc0c821012245fe49a9c04b2d07f85', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
-                if (!this.disabledInput)
-                    this.open = !this.open;
-            } }, index.h("span", { key: '67d2755de630b936763fa2610a0e7ba4650476c4', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, index.h("img", { key: '576ea15412ad8106e9674bb53dd9b71f86654b48', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), index.h("dropi-icon", { key: '1db0802eb57a6359b2482bc8f24b39957c6cca09', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), index.h("ul", { key: 'cf7a36e39eda8d049c0f9576f52e24e0c88173f3', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (index.h("li", null, index.h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, index.h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), index.h("input", { key: '813f274452998d7d329adac1b21c796b61a26a9b', id: "phone-input", type: "tel", inputmode: "numeric", class: { 'form-control': true, 'is-invalid': isInvalid }, placeholder: this.phoneNumberPlaceholder, value: this.ngModelPhone, disabled: this.disabledInput, maxLength: country.maxLength, onInput: (e) => this.handleInput(e) }))));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "codArea": [{
-                "codAreaChanged": 0
-            }],
-        "ngModelPhone": [{
-                "ngModelPhoneChanged": 0
-            }],
-        "selectedOption": [{
-                "selectedOptionChanged": 0
-            }]
-    }; }
-};
-DropiPhoneInput.style = dropiPhoneInputCss();
-
-exports.dropi_phone_input = DropiPhoneInput;

package/dist/cjs/dropi-progress-bar.cjs.entry.js

@@ -1,43 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiProgressBarCss = () => `:host{display:block;width:100%;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.progress-container{width:100%;display:flex;flex-direction:column;gap:4px}.progress-header{display:flex;justify-content:flex-end}.progress-value{font-size:var(--font-size-xs, 12px);color:var(--Gray-Gray-600, #475066);font-weight:500}.progress-track{width:100%;border-radius:999px;overflow:hidden;position:relative}.progress-fill{height:100%;border-radius:999px;transition:width 0.3s ease-in-out, background-color 0.3s ease-in-out}`;
-
-const DropiProgressBar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** The progress value (0-100) */
-    value = 0;
-    /** The color scheme of the progress bar */
-    severity = 'primary';
-    /** Height of the progress bar */
-    height = '8px';
-    /** Whether to show the value as text */
-    showValue = false;
-    /** Background color of the track (optional, defaults to gray-100) */
-    trackColor = 'var(--Gray-Gray-100, #F7F8FA)';
-    /** Custom color for the progress fill (overrides severity) */
-    color = '';
-    render() {
-        const fillStyle = {
-            width: `${Math.min(100, Math.max(0, this.value))}%`,
-            backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,
-        };
-        return (index.h("div", { key: 'ff6b55a3f0aaf2eb6f5310d06acf9cfa0f3a2b12', class: "progress-container" }, this.showValue && (index.h("div", { key: 'f34f6818580f08c0308a4d75ac4c6cfef6d992a6', class: "progress-header" }, index.h("span", { key: 'daa2e09a6698da3dc3ad207ff6a6cd1882de66cc', class: "progress-value" }, this.value, "%"))), index.h("div", { key: 'dbe1cf7f8330446dd2a2e7b8c3b049b7c0f816eb', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, index.h("div", { key: 'ce7a0598e201918aa4e925a97c7426c048fd00b9', class: "progress-fill", style: fillStyle }))));
-    }
-    getSeverityVariable() {
-        switch (this.severity) {
-            case 'success': return 'Success-Success-500';
-            case 'warning': return 'Warning-Warning-500';
-            case 'error': return 'Error-Error-500';
-            case 'info': return 'Info-Info-500';
-            case 'neutral': return 'Gray-Gray-400';
-            default: return 'Primary-Primary-500';
-        }
-    }
-};
-DropiProgressBar.style = dropiProgressBarCss();
-
-exports.dropi_progress_bar = DropiProgressBar;

package/dist/cjs/dropi-radio-button.cjs.entry.js

@@ -1,64 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}.dropi-radio-button{display:flex;align-items:center;justify-content:flex-start;gap:20px}label{display:flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;color:var(--Gray-Gray-700, #32394d);font-size:var(--font-size-s, 12px);font-weight:var(--font-weight-regular, 400);line-height:1.5}input[type='radio']{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid var(--Gray-Gray-200, #c3c9d9);border-radius:50%;background-color:transparent;position:relative;cursor:pointer;outline:none;flex-shrink:0;align-self:center;vertical-align:middle;margin:0}input[type='radio']::before{content:'';position:absolute;top:3px;left:3px;width:10px;height:10px;background-color:var(--Primary-Primary-400, #f7b46f);border-radius:50%;display:none}input[type='radio']:checked{border:2px solid var(--Primary-Primary-500, #f49a3d)}input[type='radio']:checked::before{display:block}`;
-
-const DropiRadioButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange");
-        if (hostRef.$hostElement$["s-ei"]) {
-            this.internals = hostRef.$hostElement$["s-ei"];
-        }
-        else {
-            this.internals = hostRef.$hostElement$.attachInternals();
-            hostRef.$hostElement$["s-ei"] = this.internals;
-        }
-    }
-    internals;
-    /** Label text displayed next to the radio */
-    label = '';
-    /** Input name (for grouping radio buttons) */
-    name;
-    /** Input id */
-    inputId;
-    /** Whether this radio is selected */
-    checked = false;
-    /**
-     * Set to true to programmatically reset this radio to unchecked.
-     * Useful when the parent needs to clear a group.
-     */
-    resetTrigger = false;
-    /** Emitted when the radio is selected */
-    dropiChange;
-    onResetTrigger(val) {
-        if (val)
-            this.checked = false;
-    }
-    checkedChanged(val) {
-        this.internals.setFormValue(val ? 'on' : null);
-    }
-    componentWillLoad() {
-        this.internals.setFormValue(this.checked ? 'on' : null);
-    }
-    handleChange(e) {
-        this.checked = e.target.checked;
-        this.dropiChange.emit(e);
-    }
-    render() {
-        return (index.h("div", { key: 'f5a4cfda3991106a02821a499452294509fea514', class: "dropi-radio-button" }, index.h("label", { key: '8f28e2d4a0da03bd1b0ef2d8a92b1ed9b2b66c26', htmlFor: this.inputId }, index.h("input", { key: 'ddd006fafd64e071a1431dd3fb827f06a9c8d92d', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
-    }
-    static get formAssociated() { return true; }
-    static get watchers() { return {
-        "resetTrigger": [{
-                "onResetTrigger": 0
-            }],
-        "checked": [{
-                "checkedChanged": 0
-            }]
-    }; }
-};
-DropiRadioButton.style = dropiRadioButtonCss();
-
-exports.dropi_radio_button = DropiRadioButton;

package/dist/cjs/dropi-radio-selection-list.cjs.entry.js

@@ -1,60 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}*,*::before,*::after{box-sizing:border-box}.rsl__search{display:flex;align-items:center;gap:var(--Size-2, 8px);padding:var(--Size-2, 8px) var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);margin-bottom:var(--Size-2, 8px)}.rsl__search-input{flex:1;border:none;outline:none;font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-700, #32394d);background:transparent}.rsl__list{display:flex;flex-direction:column;gap:var(--Size-2, 8px)}.rsl__item{display:flex;align-items:flex-start;gap:var(--Size-3, 12px);padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);cursor:pointer;transition:border-color 0.15s, background 0.15s}.rsl__item:hover{background:var(--Gray-Gray-50, #f7f8fa)}.rsl__item--selected{border-color:var(--Primary-Primary-500, #f49a3d);background:var(--Primary-Primary-50, #fff5eb)}.rsl__radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--Gray-Gray-300, #a3abbf);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px;transition:border-color 0.15s}.rsl__radio--checked{border-color:var(--Primary-Primary-500, #f49a3d)}.rsl__radio-dot{width:8px;height:8px;border-radius:50%;background:var(--Primary-Primary-500, #f49a3d)}.rsl__content{display:flex;flex-direction:column;gap:2px}.rsl__name{font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d)}.rsl__desc{font-size:var(--font-size-xs, 10px);line-height:1.4;color:var(--Gray-Gray-500, #69738c)}`;
-
-const DropiRadioSelectionList = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange");
-        this.dropiSearch = index.createEvent(this, "dropiSearch");
-    }
-    /** Options array or JSON string */
-    options = [];
-    /** Selected option id */
-    selectedOption = '';
-    /** Show search box */
-    showFilter = false;
-    /** Search placeholder */
-    filterPlaceholder = 'Search';
-    /** Show description even when option is not selected */
-    alwaysShowDescription = true;
-    /** Layout type */
-    typeLayout = 'default';
-    /** Delay before filtering (matches Angular `searchDelay`) */
-    searchDelay = 100;
-    filterText = '';
-    parsedOptions = [];
-    /** Emitted on selection change. e.detail = selected option id */
-    dropiChange;
-    /** Emitted on search — matches Angular 'onSearch' */
-    dropiSearch;
-    optionsChanged(val) {
-        this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);
-    }
-    componentWillLoad() { this.optionsChanged(this.options); }
-    get filtered() {
-        if (!this.filterText)
-            return this.parsedOptions;
-        const q = this.filterText.toLowerCase();
-        return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));
-    }
-    render() {
-        return (index.h("div", { key: '296bdc955d13b8163ca954f6d399543343e7e121', class: "rsl" }, this.showFilter && (index.h("div", { key: '4cdd3764411f389d2b6ce1145f5b6759bb20fc7b', class: "rsl__search" }, index.h("dropi-icon", { key: '81af80a3dddb6176625b6ba575b084501741cd81', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), index.h("input", { key: 'aa0e762f4403431225375f95c792af8596529588', class: "rsl__search-input", type: "text", placeholder: this.filterPlaceholder, value: this.filterText, onInput: (e) => {
-                this.filterText = e.target.value;
-                this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });
-            } }))), index.h("div", { key: 'd153875a1c09957b74648f61f70320968ea6cd40', class: "rsl__list" }, this.filtered.map(opt => {
-            const isSelected = opt.id === this.selectedOption;
-            return (index.h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, index.h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && index.h("div", { class: "rsl__radio-dot" })), index.h("div", { class: "rsl__content" }, index.h("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (index.h("span", { class: "rsl__desc" }, opt.description)))));
-        }))));
-    }
-    static get watchers() { return {
-        "options": [{
-                "optionsChanged": 0
-            }]
-    }; }
-};
-DropiRadioSelectionList.style = dropiRadioSelectionListCss();
-
-exports.dropi_radio_selection_list = DropiRadioSelectionList;

package/dist/cjs/dropi-read-more.cjs.entry.js

@@ -1,40 +0,0 @@
-'use strict';
-
-var index = require('./index-eMp8lMK1.js');
-
-const dropiReadMoreCss = () => `:host{display:block;button,input,select,textarea{font-family:var(--font-family-01, 'Inter', sans-serif)}}.read-more__text{margin:0;font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);color:var(--Gray-Gray-800, #1f2433);line-height:1.5}.read-more__toggle{all:unset;display:inline;font-size:var(--font-size-s, 12px);font-family:var(--font-family-01, 'Inter', sans-serif);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-600);cursor:pointer}.read-more__toggle:hover{color:var(--Primary-Primary-600, #d4872e)}`;
-
-const DropiReadMore = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    /** Full text to display */
-    text = '';
-    /** Maximum number of words before truncating */
-    maxWords = 20;
-    /** Allow collapsing back after expanding */
-    showSeeLess = true;
-    /** Inline CSS string applied to the text element (matches Angular `textStyle`) */
-    textStyle = '';
-    /** Inline CSS string applied to the toggle button (matches Angular `buttonStyle`) */
-    buttonStyle = '';
-    expanded = false;
-    get words() {
-        return (this.text || '').split(/\s+/).filter(Boolean);
-    }
-    get needsTruncation() {
-        return this.words.length > this.maxWords;
-    }
-    get displayText() {
-        if (!this.needsTruncation || this.expanded)
-            return this.text;
-        return this.words.slice(0, this.maxWords).join(' ');
-    }
-    render() {
-        const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);
-        return (index.h("div", { key: '125c5f1d75c1e06f02d9898f375626bb75a67cd8', class: "read-more" }, index.h("p", { key: '4a4450a3468e7fe7297fdae98d370f8cd77b8553', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (index.h("button", { key: 'cfe58b2781b908d9a0a802b4bd68cedf8dea827e', class: "read-more__toggle", style: this.buttonStyle ? this.buttonStyle : undefined, onClick: () => this.expanded = !this.expanded }, this.expanded ? ' Ver menos' : '... Ver más')))));
-    }
-};
-DropiReadMore.style = dropiReadMoreCss();
-
-exports.dropi_read_more = DropiReadMore;