@dropi/ui 0.1.19 → 0.1.21

package/dist/collection/components/dropi-phone-input/dropi-phone-input.js

@@ -0,0 +1,442 @@
+import { h } from "@stencil/core";
+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 },
+];
+/**
+ * @component dropi-phone-input
+ * Phone number input with country code selector.
+ * Syncs perfectly with dropi-core_front natively
+ */
+export class DropiPhoneInput {
+    el;
+    /** 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' */
+    ngModelChangeCod;
+    /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
+    ngModelChangePhone;
+    /** Emitted on field verification — matches Angular 'verifiedField' */
+    verifiedField;
+    /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
+    onChangeSelect;
+    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.replace('+', '');
+        return COUNTRIES.find(c => c.code === cleanCodArea) ?? COUNTRIES[0];
+    }
+    selectCountry(c) {
+        this.codArea = c.code;
+        this.open = false;
+        this.ngModelChangeCod.emit(c.code);
+        this.onChangeSelect.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.ngModelChangePhone.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: '884ddc86a364c666e79c2e99501c607a5c332599', class: "phone-wrap" }, h("div", { key: 'e0b044ac41b640cddffe080c695b7fe2d4add574', class: "phone-input-container" }, h("div", { key: 'f9f8b6794fb73efff50e064550ce462e25bb4d51', class: "custom-select" }, h("button", { key: '564675d4b89d33cc7cba743f77b4d96f7f6afea3', type: "button", class: { 'select-button': true, 'select-invalid': isInvalid }, disabled: this.disabledInput, onClick: () => {
+                if (!this.disabledInput)
+                    this.open = !this.open;
+            } }, h("span", { key: '884a8a6d688e9fae8bc62ace8ba1f870f3ebdedf', style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } }, h("img", { key: '4c263356870f8d2aaaa84ffe5f1a1bff49f98e34', src: `https://flagsapi.com/${country.flag}/flat/24.png`, alt: "flag" }), country.code), h("dropi-icon", { key: '589ff50ef5881a58586e9b08d9db3e0abcde5873', name: this.open ? 'Dropdown-up' : 'Dropdown-down', width: "14px", height: "14px", color: "Gray-Gray-500" })), h("ul", { key: 'fed2ed2efc5be49ebeb8fe8c36557914eff439c7', 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: 'dcefc1987643eab23dc5d9fbf211804fa90a9d82', 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 is() { return "dropi-phone-input"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["dropi-phone-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["dropi-phone-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "codArea": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial country dial code (e.g. \"57\") \u2014 matches Angular 'CodArea' setter"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cod-area",
+                "defaultValue": "'57'"
+            },
+            "ngModelPhone": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Phone number value \u2014 matches Angular 'ngModelPhone'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "ng-model-phone",
+                "defaultValue": "''"
+            },
+            "phoneNumberPlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input placeholder \u2014 matches Angular 'phoneNumberPlaceholder'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "phone-number-placeholder",
+                "defaultValue": "null"
+            },
+            "disabledInput": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state \u2014 matches Angular 'disabledInput'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled-input",
+                "defaultValue": "false"
+            },
+            "isValidPhone": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation state \u2014 matches Angular 'isValidPhone'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-valid-phone",
+                "defaultValue": "undefined"
+            },
+            "validateOnInit": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validate on init \u2014 matches Angular 'validateOnInit'"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "validate-on-init",
+                "defaultValue": "true"
+            },
+            "selectedOption": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pre-selected country object (matches Angular `selectedOption: Country`).\nPass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-option",
+                "defaultValue": "null"
+            },
+            "selectProperties": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Country select configuration object (matches Angular `selectProperties: SelectProperties`).\nFields: `label`, `placeholder`, `options` (array of Country objects).\nWhen provided, overrides the internal country list."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "select-properties",
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "ngModelChangeCod",
+                "name": "ngModelChangeCod",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when country dial code changes \u2014 matches Angular 'ngModelChangeCod'"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "ngModelChangePhone",
+                "name": "ngModelChangePhone",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when phone number changes \u2014 matches Angular 'ngModelChangePhone'"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "verifiedField",
+                "name": "verifiedField",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on field verification \u2014 matches Angular 'verifiedField'"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "onChangeSelect",
+                "name": "onChangeSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when country selection changes \u2014 matches Angular 'onChangeSelect'"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "codArea",
+                "methodName": "codAreaChanged"
+            }, {
+                "propName": "selectedOption",
+                "methodName": "selectedOptionChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleWindowClick",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/dropi-radio-button/dropi-radio-button.js

@@ -7,9 +7,9 @@ export class DropiRadioButton {
     /** Label text displayed next to the radio */
     label = '';
     /** Input name (for grouping radio buttons) */
-    name = 'radio';
+    name = 'name';
     /** Input id */
-    inputId = 'radioButton';
+    id = 'radioButton';
     /** Whether this radio is selected */
     checked = false;
     /**
@@ -18,17 +18,17 @@ export class DropiRadioButton {
      */
     resetTrigger = false;
     /** Emitted when the radio is selected */
-    dropiChange;
+    onChange;
     onResetTrigger(val) {
         if (val)
             this.checked = false;
     }
     handleChange(e) {
         this.checked = e.target.checked;
-        this.dropiChange.emit(e);
+        this.onChange.emit(e);
     }
     render() {
-        return (h("div", { key: 'd1f58dca9ddeacc153cfd1808fdc19d8c830e738', class: "dropi-radio-button" }, h("label", { key: '569169ec20f9d8fe69abe1869aed04f80f569fe8', htmlFor: this.inputId }, h("input", { key: '47f93ccdeedb805ec79e3f349aefb1b5e818437d', id: this.inputId, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
+        return (h("div", { key: '560f5edef6d0646d8797dfc3add17003ea847d0b', class: "dropi-radio-button" }, h("label", { key: 'aeb5159c64643485457ffe083bbeb78a97da8b50', htmlFor: this.id }, h("input", { key: '78ff657aee559c1230e2e16c01adfea0382e4979', id: this.id, type: "radio", name: this.name, checked: this.checked, onChange: (e) => this.handleChange(e) }), this.label)));
     }
     static get is() { return "dropi-radio-button"; }
     static get encapsulation() { return "shadow"; }
@@ -83,9 +83,9 @@ export class DropiRadioButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "name",
-                "defaultValue": "'radio'"
+                "defaultValue": "'name'"
             },
-            "inputId": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -102,7 +102,7 @@ export class DropiRadioButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "input-id",
+                "attribute": "id",
                 "defaultValue": "'radioButton'"
             },
             "checked": {
@@ -149,8 +149,8 @@ export class DropiRadioButton {
     }
     static get events() {
         return [{
-                "method": "dropiChange",
-                "name": "dropiChange",
+                "method": "onChange",
+                "name": "onChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -159,16 +159,9 @@ export class DropiRadioButton {
                     "text": "Emitted when the radio is selected"
                 },
                 "complexType": {
-                    "original": "Event",
-                    "resolved": "Event",
-                    "references": {
-                        "Event": {
-                            "location": "import",
-                            "path": "@stencil/core",
-                            "id": "node_modules::Event",
-                            "referenceLocation": "Event"
-                        }
-                    }
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
                 }
             }];
     }

package/dist/collection/components/dropi-radio-selection-list/dropi-radio-selection-list.css

@@ -46,7 +46,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-top: 1px;
+  margin-top: 3px;
   transition: border-color 0.15s;
 }
 
@@ -60,5 +60,5 @@
 }
 
 .rsl__content { display: flex; flex-direction: column; gap: 2px; }
-.rsl__name { font-size: var(--font-size-s, 12px); font-weight: var(--font-weight-bold, 700); color: var(--Gray-Gray-700, #32394d); }
-.rsl__desc { font-size: var(--font-size-xs, 10px); color: var(--Gray-Gray-500, #69738c); }
+.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); }