@dropi/ui 0.1.37 → 0.1.42

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

@@ -0,0 +1,198 @@
+import { r as registerInstance, d as createEvent, a as getElement, h } from './index-Cvp2LQOM.js';
+
+const dropiPhoneInputCss = () => `:host{display:block;width:100%;position:relative;font-family:'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:inherit;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:inherit;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:100}.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:inherit;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) {
+        registerInstance(this, hostRef);
+        this.dropiCodChange = createEvent(this, "dropiCodChange", 7);
+        this.dropiPhoneChange = createEvent(this, "dropiPhoneChange", 7);
+        this.dropiVerify = createEvent(this, "dropiVerify", 7);
+        this.dropiChangeSelect = createEvent(this, "dropiChangeSelect", 7);
+    }
+    get el() { return getElement(this); }
+    /** 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 = '';
+    }
+    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);
+    }
+    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 (h("div", { key: 'a377fcfcfdb239d79f319f0e058f5d54cbcfac02', class: "phone-wrap" }, h("div", { key: '83719d2b76b491f1f7a9f3e202eb61c61abb2c31', class: "phone-input-container" }, h("div", { key: 'c92ff5d9f260b80ad4e7b8f7e290b7b4e1f595f0', class: "custom-select" }, h("button", { key: '35c56642c1828d86b7f211face2845dc79878fd4', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+                if (!this.disabledInput)
+                    this.open = !this.open;
+            } }, h("span", { key: 'e39cdac451df1c9a47c6552e7f133cb7662cae7f', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '620c8efc2695ee26fed0c2bcd7f6132af05cdbed', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: 'cf57cc1ef06e12b0112fdbbb063fb8f045c17e39', name: this.open ? 'Dropdown-up' : 'Dropdown-down', iconWidth: "14px", iconHeight: "14px", color: "Gray-Gray-500" })), h("ul", { key: '1009d2e4212267bbfaf4aa26c0c2152606a8d092', class: { 'select-dropdown': true, 'expanded-select': this.open, 'collapsed-select': !this.open } }, COUNTRIES.map(option => (h("li", null, h("button", { type: "button", class: "option", onMouseDown: (e) => { e.preventDefault(); this.selectCountry(option); } }, h("img", { src: `https://flagsapi.com/${option.flag}/flat/24.png`, alt: option.flag }), option.code)))))), h("input", { key: '87be58fc820c63741b076b04d807b7410e292344', 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 watchers() { return {
+        "codArea": [{
+                "codAreaChanged": 0
+            }],
+        "selectedOption": [{
+                "selectedOptionChanged": 0
+            }]
+    }; }
+};
+DropiPhoneInput.style = dropiPhoneInputCss();
+
+export { DropiPhoneInput as dropi_phone_input };
+//# sourceMappingURL=dropi-phone-input.entry.esm.js.map
+
+//# sourceMappingURL=dropi-phone-input.entry.js.map

package/dist/dropi-ui/dropi-phone-input.entry.js.map

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

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

@@ -0,0 +1,44 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiProgressBarCss = () => `:host{display:block;width:100%}.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) {
+        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 (h("div", { key: 'f68b88240ebc188f1f0378424b8d1617c2e7440e', class: "progress-container" }, this.showValue && (h("div", { key: 'f8116e4eb824031d4bd1ac9d694e2bd3bca1ed6d', class: "progress-header" }, h("span", { key: '892813f8e0a028ce286c00edd0489d489dd271c4', class: "progress-value" }, this.value, "%"))), h("div", { key: '2e740487a59df1ec7def96565a9ee64d53b773b8', class: "progress-track", style: { height: this.height, backgroundColor: this.trackColor } }, h("div", { key: '4f6fd1c436563cacac31e385d84c4a21945f6e10', 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();
+
+export { DropiProgressBar as dropi_progress_bar };
+//# sourceMappingURL=dropi-progress-bar.entry.esm.js.map
+
+//# sourceMappingURL=dropi-progress-bar.entry.js.map

package/dist/dropi-ui/dropi-progress-bar.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-progress-bar.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,6cAA6c,CAAC;;MCOpe,gBAAgB,GAAA,MAAA;;;;;IAEnB,KAAK,GAAW,CAAC;;IAGjB,QAAQ,GAAqE,SAAS;;IAGtF,MAAM,GAAW,KAAK;;IAGtB,SAAS,GAAY,KAAK;;IAG1B,UAAU,GAAW,+BAA+B;;IAGpD,KAAK,GAAW,EAAE;IAE1B,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG;AAChB,YAAA,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA,CAAA,CAAG;YACnD,eAAe,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,IAAI,CAAC,mBAAmB,EAAE,CAAA,UAAA,CAAY;SAC/E;QAED,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,SAAS,KACb,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,gBAAgB,EAAA,EAAE,IAAI,CAAC,KAAK,EAAS,GAAA,CAAA,CAC7C,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,eAAe,EAAE,IAAI,CAAC,UAAU,EAAE,EAAA,EAC1F,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,SAAS,EAAA,CAAQ,CAC/C,CACF;;IAIF,mBAAmB,GAAA;AACzB,QAAA,QAAQ,IAAI,CAAC,QAAQ;AACnB,YAAA,KAAK,SAAS,EAAE,OAAO,qBAAqB;AAC5C,YAAA,KAAK,SAAS,EAAE,OAAO,qBAAqB;AAC5C,YAAA,KAAK,OAAO,EAAE,OAAO,iBAAiB;AACtC,YAAA,KAAK,MAAM,EAAE,OAAO,eAAe;AACnC,YAAA,KAAK,SAAS,EAAE,OAAO,eAAe;AACtC,YAAA,SAAS,OAAO,qBAAqB;;;;;;;;","names":[],"sources":["src/components/dropi-progress-bar/dropi-progress-bar.css?tag=dropi-progress-bar&encapsulation=shadow","src/components/dropi-progress-bar/dropi-progress-bar.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.progress-container {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.progress-header {\n  display: flex;\n  justify-content: flex-end;\n}\n\n.progress-value {\n  font-size: var(--font-size-xs, 12px);\n  color: var(--Gray-Gray-600, #475066);\n  font-weight: 500;\n}\n\n.progress-track {\n  width: 100%;\n  border-radius: 999px;\n  overflow: hidden;\n  position: relative;\n}\n\n.progress-fill {\n  height: 100%;\n  border-radius: 999px;\n  transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'dropi-progress-bar',\n  styleUrl: 'dropi-progress-bar.css',\n  shadow: true,\n})\nexport class DropiProgressBar {\n  /** The progress value (0-100) */\n  @Prop() value: number = 0;\n\n  /** The color scheme of the progress bar */\n  @Prop() severity: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral' = 'primary';\n\n  /** Height of the progress bar */\n  @Prop() height: string = '8px';\n\n  /** Whether to show the value as text */\n  @Prop() showValue: boolean = false;\n\n  /** Background color of the track (optional, defaults to gray-100) */\n  @Prop() trackColor: string = 'var(--Gray-Gray-100, #F7F8FA)';\n\n  /** Custom color for the progress fill (overrides severity) */\n  @Prop() color: string = '';\n\n  render() {\n    const fillStyle = {\n      width: `${Math.min(100, Math.max(0, this.value))}%`,\n      backgroundColor: this.color || `var(--${this.getSeverityVariable()}, #50A5F1)`,\n    };\n\n    return (\n      <div class=\"progress-container\">\n        {this.showValue && (\n          <div class=\"progress-header\">\n            <span class=\"progress-value\">{this.value}%</span>\n          </div>\n        )}\n        <div class=\"progress-track\" style={{ height: this.height, backgroundColor: this.trackColor }}>\n          <div class=\"progress-fill\" style={fillStyle}></div>\n        </div>\n      </div>\n    );\n  }\n\n  private getSeverityVariable() {\n    switch (this.severity) {\n      case 'success': return 'Success-Success-500';\n      case 'warning': return 'Warning-Warning-500';\n      case 'error': return 'Error-Error-500';\n      case 'info': return 'Info-Info-500';\n      case 'neutral': return 'Gray-Gray-400';\n      default: return 'Primary-Primary-500';\n    }\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,48 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiRadioButtonCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.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) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+    }
+    /** Label text displayed next to the radio */
+    label = '';
+    /** Input name (for grouping radio buttons) */
+    name = 'name';
+    /** Input id */
+    id = 'radioButton';
+    /** 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;
+    }
+    handleChange(e) {
+        this.checked = e.target.checked;
+        this.dropiChange.emit(e);
+    }
+    render() {
+        return (h("div", { key: '9f4c4f3be63c0aa0bcd1c48dacb97cec903db98d', class: "dropi-radio-button" }, h("label", { key: 'c29bd1ccc6c468b57fdcb4dd6c15cf541255cb71', htmlFor: this.id }, h("input", { key: '19533ffd5e5eb1b43d7e0f42971aa81652c8c926', id: this.id, 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
+            }]
+    }; }
+};
+DropiRadioButton.style = dropiRadioButtonCss();
+
+export { DropiRadioButton as dropi_radio_button };
+//# sourceMappingURL=dropi-radio-button.entry.esm.js.map
+
+//# sourceMappingURL=dropi-radio-button.entry.js.map

package/dist/dropi-ui/dropi-radio-button.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-radio-button.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,MAAM,CAAC,s9BAAs9B,CAAC;;MCY7+B,gBAAgB,GAAA,MAAA;;;;;;IAEnB,KAAK,GAAW,EAAE;;IAElB,IAAI,GAAW,MAAM;;IAErB,EAAE,GAAW,aAAa;;IAEM,OAAO,GAAY,KAAK;AAChE;;;AAGG;IACK,YAAY,GAAY,KAAK;;AAG5B,IAAA,WAAW;AAGpB,IAAA,cAAc,CAAC,GAAY,EAAA;AACzB,QAAA,IAAI,GAAG;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;AAGvB,IAAA,YAAY,CAAC,CAAQ,EAAA;QAC3B,IAAI,CAAC,OAAO,GAAI,CAAC,CAAC,MAA2B,CAAC,OAAO;AACrD,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;;IAG1B,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,EAAE,EAAA,EACrB,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,EAAE,EACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAA,CACrC,EACD,IAAI,CAAC,KAAK,CACL,CACJ;;;;;;;;;;;;;","names":[],"sources":["src/components/dropi-radio-button/dropi-radio-button.css?tag=dropi-radio-button&encapsulation=shadow","src/components/dropi-radio-button/dropi-radio-button.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\n*, *::before, *::after { box-sizing: border-box; }\n\n.dropi-radio-button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 20px;\n}\n\nlabel {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  color: var(--Gray-Gray-700, #32394d);\n  font-size: var(--font-size-s, 12px);\n  font-weight: var(--font-weight-regular, 400);\n  line-height: 1.5;\n}\n\ninput[type='radio'] {\n  appearance: none;\n  -webkit-appearance: none;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  border: 2px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: 50%;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  outline: none;\n  flex-shrink: 0;\n  align-self: center;\n  vertical-align: middle;\n  margin: 0;\n}\n\ninput[type='radio']::before {\n  content: '';\n  position: absolute;\n  top: 3px;\n  left: 3px;\n  width: 10px;\n  height: 10px;\n  background-color: var(--Primary-Primary-400, #f7b46f);\n  border-radius: 50%;\n  display: none;\n}\n\ninput[type='radio']:checked {\n  border: 2px solid var(--Primary-Primary-500, #f49a3d);\n}\n\ninput[type='radio']:checked::before {\n  display: block;\n}\n","import { Component, Prop, Event, EventEmitter, Watch, h } from '@stencil/core';\n\n/**\n * @component dropi-radio-button\n * Styled radio button with label.\n */\n@Component({\n  tag: 'dropi-radio-button',\n  styleUrl: 'dropi-radio-button.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class DropiRadioButton {\n  /** Label text displayed next to the radio */\n  @Prop() label: string = '';\n  /** Input name (for grouping radio buttons) */\n  @Prop() name: string = 'name';\n  /** Input id */\n  @Prop() id: string = 'radioButton';\n  /** Whether this radio is selected */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n  /**\n   * Set to true to programmatically reset this radio to unchecked.\n   * Useful when the parent needs to clear a group.\n   */\n  @Prop() resetTrigger: boolean = false;\n\n  /** Emitted when the radio is selected */\n  @Event() dropiChange: EventEmitter<any>;\n\n  @Watch('resetTrigger')\n  onResetTrigger(val: boolean) {\n    if (val) this.checked = false;\n  }\n\n  private handleChange(e: Event) {\n    this.checked = (e.target as HTMLInputElement).checked;\n    this.dropiChange.emit(e);\n  }\n\n  render() {\n    return (\n      <div class=\"dropi-radio-button\">\n        <label htmlFor={this.id}>\n          <input\n            id={this.id}\n            type=\"radio\"\n            name={this.name}\n            checked={this.checked}\n            onChange={(e) => this.handleChange(e)}\n          />\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,61 @@
+import { r as registerInstance, d as createEvent, h } from './index-Cvp2LQOM.js';
+
+const dropiRadioSelectionListCss = () => `:host{display:block;width:100%}*,*::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:inherit;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) {
+        registerInstance(this, hostRef);
+        this.dropiChange = createEvent(this, "dropiChange", 7);
+        this.dropiSearch = createEvent(this, "dropiSearch", 7);
+    }
+    /** 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 (h("div", { key: '296bdc955d13b8163ca954f6d399543343e7e121', class: "rsl" }, this.showFilter && (h("div", { key: '4cdd3764411f389d2b6ce1145f5b6759bb20fc7b', class: "rsl__search" }, h("dropi-icon", { key: '81af80a3dddb6176625b6ba575b084501741cd81', name: "Search", iconWidth: "16px", iconHeight: "16px", color: "Gray-Gray-400" }), 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 });
+            } }))), h("div", { key: 'd153875a1c09957b74648f61f70320968ea6cd40', class: "rsl__list" }, this.filtered.map(opt => {
+            const isSelected = opt.id === this.selectedOption;
+            return (h("div", { class: { 'rsl__item': true, 'rsl__item--selected': isSelected }, key: opt.id, onClick: () => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); } }, h("div", { class: { 'rsl__radio': true, 'rsl__radio--checked': isSelected } }, isSelected && h("div", { class: "rsl__radio-dot" })), h("div", { class: "rsl__content" }, h("span", { class: "rsl__name" }, opt.name), (isSelected || this.alwaysShowDescription) && opt.description && (h("span", { class: "rsl__desc" }, opt.description)))));
+        }))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }]
+    }; }
+};
+DropiRadioSelectionList.style = dropiRadioSelectionListCss();
+
+export { DropiRadioSelectionList as dropi_radio_selection_list };
+//# sourceMappingURL=dropi-radio-selection-list.entry.esm.js.map
+
+//# sourceMappingURL=dropi-radio-selection-list.entry.js.map

package/dist/dropi-ui/dropi-radio-selection-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-radio-selection-list.entry.js","mappings":"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","names":[],"sources":["src/components/dropi-radio-selection-list/dropi-radio-selection-list.css?tag=dropi-radio-selection-list&encapsulation=shadow","src/components/dropi-radio-selection-list/dropi-radio-selection-list.tsx"],"sourcesContent":[":host { display: block; width: 100%; }\n*, *::before, *::after { box-sizing: border-box; }\n\n.rsl__search {\n  display: flex;\n  align-items: center;\n  gap: var(--Size-2, 8px);\n  padding: var(--Size-2, 8px) var(--Size-3, 12px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  margin-bottom: var(--Size-2, 8px);\n}\n\n.rsl__search-input {\n  flex: 1;\n  border: none;\n  outline: none;\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-700, #32394d);\n  background: transparent;\n}\n\n.rsl__list { display: flex; flex-direction: column; gap: var(--Size-2, 8px); }\n\n.rsl__item {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--Size-3, 12px);\n  padding: var(--Size-3, 12px);\n  border: 1px solid var(--Gray-Gray-200, #c3c9d9);\n  border-radius: var(--Border-2, 8px);\n  cursor: pointer;\n  transition: border-color 0.15s, background 0.15s;\n}\n\n.rsl__item:hover { background: var(--Gray-Gray-50, #f7f8fa); }\n.rsl__item--selected { border-color: var(--Primary-Primary-500, #f49a3d); background: var(--Primary-Primary-50, #fff5eb); }\n\n.rsl__radio {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n  border: 2px solid var(--Gray-Gray-300, #a3abbf);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-top: 3px;\n  transition: border-color 0.15s;\n}\n\n.rsl__radio--checked { border-color: var(--Primary-Primary-500, #f49a3d); }\n\n.rsl__radio-dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--Primary-Primary-500, #f49a3d);\n}\n\n.rsl__content { display: flex; flex-direction: column; gap: 2px; }\n.rsl__name { font-size: var(--font-size-s, 12px); color: var(--Gray-Gray-700, #32394d); }\n.rsl__desc { font-size: var(--font-size-xs, 10px); line-height: 1.4; color: var(--Gray-Gray-500, #69738c); }\n","import { Component, Prop, State, Event, EventEmitter, Watch, h } from '@stencil/core';\n\nexport interface RadioOption {\n  id: string | number;\n  name: string;\n  description?: string;\n  icon?: string;\n  [key: string]: any;\n}\n\n/**\n * @component dropi-radio-selection-list\n * List of radio button options with optional search filter.\n */\n@Component({\n  tag: 'dropi-radio-selection-list',\n  styleUrl: 'dropi-radio-selection-list.css',\n  shadow: true,\n})\nexport class DropiRadioSelectionList {\n  /** Options array or JSON string */\n  @Prop() options: RadioOption[] | string = [];\n  /** Selected option id */\n  @Prop({ mutable: true }) selectedOption: string | number = '';\n  /** Show search box */\n  @Prop() showFilter: boolean = false;\n  /** Search placeholder */\n  @Prop() filterPlaceholder: string = 'Search';\n  /** Show description even when option is not selected */\n  @Prop() alwaysShowDescription: boolean = true;\n  /** Layout type */\n  @Prop() typeLayout: 'description' | 'default' = 'default';\n  /** Delay before filtering (matches Angular `searchDelay`) */\n  @Prop() searchDelay: number = 100;\n\n  @State() private filterText: string = '';\n  @State() private parsedOptions: RadioOption[] = [];\n\n  /** Emitted on selection change. e.detail = selected option id */\n  @Event() dropiChange: EventEmitter<string | number>;\n  /** Emitted on search — matches Angular 'onSearch' */\n  @Event() dropiSearch: EventEmitter<{ searchValue: string; filteredOptions: RadioOption[] }>;\n\n  @Watch('options')\n  optionsChanged(val: RadioOption[] | string) {\n    this.parsedOptions = typeof val === 'string' ? JSON.parse(val) : (val || []);\n  }\n\n  componentWillLoad() { this.optionsChanged(this.options); }\n\n  private get filtered(): RadioOption[] {\n    if (!this.filterText) return this.parsedOptions;\n    const q = this.filterText.toLowerCase();\n    return this.parsedOptions.filter(o => o.name?.toLowerCase().includes(q));\n  }\n\n  render() {\n    return (\n      <div class=\"rsl\">\n        {this.showFilter && (\n          <div class=\"rsl__search\">\n            <dropi-icon name=\"Search\" iconWidth=\"16px\" iconHeight=\"16px\" color=\"Gray-Gray-400\" />\n            <input\n              class=\"rsl__search-input\"\n              type=\"text\"\n              placeholder={this.filterPlaceholder}\n              value={this.filterText}\n              onInput={(e) => {\n                this.filterText = (e.target as HTMLInputElement).value;\n                this.dropiSearch.emit({ searchValue: this.filterText, filteredOptions: this.filtered });\n              }}\n            />\n          </div>\n        )}\n\n        <div class=\"rsl__list\">\n          {this.filtered.map(opt => {\n            const isSelected = opt.id === this.selectedOption;\n            return (\n              <div\n                class={{ 'rsl__item': true, 'rsl__item--selected': isSelected }}\n                key={opt.id}\n                onClick={() => { this.selectedOption = opt.id; this.dropiChange.emit(opt.id); }}\n              >\n                <div class={{ 'rsl__radio': true, 'rsl__radio--checked': isSelected }}>\n                  {isSelected && <div class=\"rsl__radio-dot\" />}\n                </div>\n                <div class=\"rsl__content\">\n                  <span class=\"rsl__name\">{opt.name}</span>\n                  {(isSelected || this.alwaysShowDescription) && opt.description && (\n                    <span class=\"rsl__desc\">{opt.description}</span>\n                  )}\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -0,0 +1,41 @@
+import { r as registerInstance, h } from './index-Cvp2LQOM.js';
+
+const dropiReadMoreCss = () => `:host{display:block}.read-more__text{margin:0;font-size:var(--font-size-s, 12px);font-family:inherit;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:inherit;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) {
+        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 (h("div", { key: '6accf9aa0a6f7377c7de6e8cbcb9e2a7ee99573a', class: "read-more" }, h("p", { key: '96e5493df8b065008f9bc45cea1ba768eabfc0a2', class: "read-more__text", style: this.textStyle ? this.textStyle : undefined }, this.displayText, showToggle && (h("button", { key: '195d962715c5c618701c3e86df618289915e3a9b', 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();
+
+export { DropiReadMore as dropi_read_more };
+//# sourceMappingURL=dropi-read-more.entry.esm.js.map
+
+//# sourceMappingURL=dropi-read-more.entry.js.map

package/dist/dropi-ui/dropi-read-more.entry.js.map

@@ -0,0 +1 @@
+{"file":"dropi-read-more.entry.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,MAAM,CAAC,kZAAkZ,CAAC;;MCWta,aAAa,GAAA,MAAA;;;;;IAEhB,IAAI,GAAW,EAAE;;IAEjB,QAAQ,GAAW,EAAE;;IAErB,WAAW,GAAY,IAAI;;IAE3B,SAAS,GAAW,EAAE;;IAEtB,WAAW,GAAW,EAAE;IAEf,QAAQ,GAAY,KAAK;AAE1C,IAAA,IAAY,KAAK,GAAA;AACf,QAAA,OAAO,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;;AAGvD,IAAA,IAAY,eAAe,GAAA;QACzB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ;;AAG1C,IAAA,IAAY,WAAW,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO,IAAI,CAAC,IAAI;AAC5D,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;IAGrD,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QAEpF,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpB,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAgB,GAAG,SAAS,EAAA,EACjF,IAAI,CAAC,WAAW,EAChB,UAAU,KACT,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAkB,GAAG,SAAS,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAA,EAC3I,IAAI,CAAC,QAAQ,GAAG,YAAY,GAAG,aAAa,CACtC,CACV,CACC,CACA;;;;;;;","names":[],"sources":["src/components/dropi-read-more/dropi-read-more.css?tag=dropi-read-more&encapsulation=shadow","src/components/dropi-read-more/dropi-read-more.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.read-more__text {\n  margin: 0;\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  color: var(--Gray-Gray-800, #1f2433);\n  line-height: 1.5;\n}\n\n.read-more__toggle {\n  all: unset;\n  display: inline;\n  font-size: var(--font-size-s, 12px);\n  font-family: inherit;\n  font-weight: var(--font-weight-bold, 700);\n  color: var(--Gray-Gray-600);\n  cursor: pointer;\n}\n\n.read-more__toggle:hover {\n  color: var(--Primary-Primary-600, #d4872e);\n}\n","import { Component, Prop, State, h } from '@stencil/core';\n\n/**\n * @component dropi-read-more\n * Truncates text to a word limit with an expandable \"Ver más / Ver menos\" toggle.\n */\n@Component({\n  tag: 'dropi-read-more',\n  styleUrl: 'dropi-read-more.css',\n  shadow: true,\n})\nexport class DropiReadMore {\n  /** Full text to display */\n  @Prop() text: string = '';\n  /** Maximum number of words before truncating */\n  @Prop() maxWords: number = 20;\n  /** Allow collapsing back after expanding */\n  @Prop() showSeeLess: boolean = true;\n  /** Inline CSS string applied to the text element (matches Angular `textStyle`) */\n  @Prop() textStyle: string = '';\n  /** Inline CSS string applied to the toggle button (matches Angular `buttonStyle`) */\n  @Prop() buttonStyle: string = '';\n\n  @State() private expanded: boolean = false;\n\n  private get words(): string[] {\n    return (this.text || '').split(/\\s+/).filter(Boolean);\n  }\n\n  private get needsTruncation(): boolean {\n    return this.words.length > this.maxWords;\n  }\n\n  private get displayText(): string {\n    if (!this.needsTruncation || this.expanded) return this.text;\n    return this.words.slice(0, this.maxWords).join(' ');\n  }\n\n  render() {\n    const showToggle = this.needsTruncation && (this.expanded ? this.showSeeLess : true);\n\n    return (\n      <div class=\"read-more\">\n        <p class=\"read-more__text\" style={this.textStyle ? this.textStyle as any : undefined}>\n          {this.displayText}\n          {showToggle && (\n            <button class=\"read-more__toggle\" style={this.buttonStyle ? this.buttonStyle as any : undefined} onClick={() => this.expanded = !this.expanded}>\n              {this.expanded ? ' Ver menos' : '... Ver más'}\n            </button>\n          )}\n        </p>\n      </div>\n    );\n  }\n}\n"],"version":3}