@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-phone-field/co-phone-field.js

@@ -0,0 +1,414 @@
+import { h } from "@stencil/core";
+import { RequiredMark } from "../../utils/requiredMark";
+import { DIAL_CODES, DIAL_CODE_MAP } from "./dial-codes";
+import { highlightMatch, rankByMatch } from "../../utils/normalizeText";
+/**
+ * Phone input with country code indicator. Composes a country selector
+ * (flag + dial code) alongside a free-form phone number input.
+ *
+ * Value format: free string — the component stores `"{dialCode}{number}"`
+ * concatenated. The host may parse/normalize as needed.
+ *
+ * @event coChange - Emits the full phone string on every change.
+ */
+export class CoPhoneField {
+    constructor() {
+        /** Placeholder for the number input. */
+        this.placeholder = '';
+        /** Current full value (dialCode + number). */
+        this.value = '';
+        /** Disable the entire field. */
+        this.disabled = false;
+        /** Required indicator. */
+        this.required = false;
+        /** Validation status. */
+        this.status = 'default';
+        /** Label layout: vertical (label above) or horizontal (label beside) */
+        this.layout = 'vertical';
+        /** Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48. */
+        this.size = 'md';
+        /** Default country ISO2 code (e.g. "CO", "US"). Optional — if not set, starts empty. */
+        this.defaultCountry = '';
+        this.selectedIso2 = '';
+        this.numberPart = '';
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.handleOutsideClick = (e) => {
+            if (!this.isOpen)
+                return;
+            const path = e.composedPath();
+            const shadowRoot = this.host.shadowRoot;
+            if (!shadowRoot)
+                return;
+            const dropdown = shadowRoot.querySelector('.co-phone-field__dropdown');
+            const selector = shadowRoot.querySelector('.co-phone-field__selector');
+            if (dropdown && path.includes(dropdown))
+                return;
+            if (selector && path.includes(selector))
+                return;
+            this.isOpen = false;
+            this.searchQuery = '';
+        };
+    }
+    get selectedEntry() {
+        var _a;
+        if (!this.selectedIso2)
+            return null;
+        return (_a = DIAL_CODE_MAP[this.selectedIso2]) !== null && _a !== void 0 ? _a : null;
+    }
+    get filteredCountries() {
+        if (!this.searchQuery.trim())
+            return DIAL_CODES;
+        return rankByMatch(DIAL_CODES, this.searchQuery, (d) => [d.name, d.dialCode, d.iso2]);
+    }
+    /** Country name with the matched substring wrapped for highlighting. */
+    renderName(name) {
+        const seg = this.searchQuery.trim() ? highlightMatch(name, this.searchQuery) : null;
+        if (!seg)
+            return name;
+        return [seg.pre, h("span", { class: "co-phone-field__match" }, seg.match), seg.post];
+    }
+    onValueChange(newVal) {
+        if (!newVal) {
+            this.numberPart = '';
+            return;
+        }
+        // Try to parse dial code from value.
+        const match = this.findDialCodeInValue(newVal);
+        if (match) {
+            this.selectedIso2 = match.iso2;
+            this.numberPart = newVal.slice(match.dialCode.length).trim();
+        }
+        else {
+            this.numberPart = newVal;
+        }
+    }
+    onDefaultCountryChange(iso2) {
+        if (DIAL_CODE_MAP[iso2] && !this.value) {
+            this.selectedIso2 = iso2;
+        }
+    }
+    componentWillLoad() {
+        if (this.defaultCountry && DIAL_CODE_MAP[this.defaultCountry]) {
+            this.selectedIso2 = this.defaultCountry;
+        }
+        if (this.value) {
+            this.onValueChange(this.value);
+        }
+    }
+    get hasCountry() {
+        return !!this.selectedIso2 && !!this.selectedEntry;
+    }
+    get statusIcon() {
+        const map = {
+            error: 'warning-circle',
+            success: 'check-circle',
+            warning: 'warning',
+            info: 'info',
+        };
+        return map[this.status] || null;
+    }
+    findDialCodeInValue(val) {
+        if (!val.startsWith('+'))
+            return null;
+        // Try longest matching dial code first (max 5 digits after +).
+        for (let len = 5; len >= 1; len--) {
+            const prefix = val.slice(0, len + 1); // includes '+'
+            const entry = DIAL_CODES.find((d) => d.dialCode === prefix);
+            if (entry)
+                return entry;
+        }
+        return null;
+    }
+    emitValue() {
+        var _a, _b;
+        const dialCode = (_b = (_a = this.selectedEntry) === null || _a === void 0 ? void 0 : _a.dialCode) !== null && _b !== void 0 ? _b : '';
+        const full = this.numberPart
+            ? `${dialCode}${this.numberPart}`
+            : '';
+        this.value = full;
+        this.coChange.emit(full);
+    }
+    handleCountrySelect(entry) {
+        this.selectedIso2 = entry.iso2;
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.emitValue();
+    }
+    handleNumberInput(e) {
+        const input = e.target;
+        this.numberPart = input.value;
+        this.emitValue();
+    }
+    handleToggleDropdown() {
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        if (!this.isOpen)
+            this.searchQuery = '';
+    }
+    handleSearchInput(e) {
+        this.searchQuery = e.target.value;
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.handleOutsideClick, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.handleOutsideClick, true);
+    }
+    render() {
+        const entry = this.selectedEntry;
+        const statusClass = this.status !== 'default' ? `co-phone-field--${this.status}` : '';
+        return (h("div", { key: '2b0e81ff34e0fc215d538133304ee2fdc57a91c0', class: `co-phone-field co-phone-field--${this.size} ${statusClass} ${this.disabled ? 'co-phone-field--disabled' : ''}` }, this.label && (h("label", { key: '7630372c42ddefe001e05bdb31ce25b59beda0ca', class: "co-phone-field__label" }, this.label, h(RequiredMark, { key: 'c1b30a0d84adb6c127a5a8ef57e4d9764ac95fba', required: this.required }))), h("div", { key: '8e03e67dcee1e18b675e2738f5b6daaecb784c95', class: "co-phone-field__container" }, h("button", { key: 'ba6a5fa8800b01cf19683f3d3750330b5ba615f8', type: "button", class: "co-phone-field__selector", disabled: this.disabled, onClick: () => this.handleToggleDropdown(), "aria-expanded": String(this.isOpen), "aria-haspopup": "listbox" }, entry ? (h("img", { class: "co-phone-field__flag", src: `https://flagcdn.com/w40/${entry.iso2.toLowerCase()}.png`, alt: entry.iso2 })) : (h("co-icon", { name: "phone", size: 16 })), h("span", { key: '88a511099354fb3a5a87094ad42e9815442d645f', class: "co-phone-field__dial-code" }, entry ? entry.dialCode : ''), h("span", { key: 'a90e81ed45d444462832bae8a557bfca650e9cf9', class: "co-phone-field__chevron" }, h("co-icon", { key: '6af34f6d60d89d2f361ed624c9d03a4a97154d70', name: "caret-down", size: 14 }))), h("input", { key: '64d0070a7acd9305fabcdcf251e295467800ca8c', class: "co-phone-field__input", type: "tel", placeholder: this.placeholder, value: this.numberPart, disabled: this.disabled, onInput: (e) => this.handleNumberInput(e) })), this.isOpen && (h("div", { key: 'bcd1d824b74774f1164bdd985d13154436529264', class: "co-phone-field__dropdown", role: "listbox" }, h("div", { key: '0d381b0c4bf154c3a360f2c8c18bd983183ed271', class: "co-phone-field__search" }, h("input", { key: '054fa9f9c5b9086e084f0f46382c8b8f5b282b21', class: "co-phone-field__search-input", type: "text", placeholder: "Search country...", value: this.searchQuery, onInput: (e) => this.handleSearchInput(e), autoFocus: true })), h("div", { key: '3fad42562f19a689bc3f9ea630c93e07fd9bcb32', class: "co-phone-field__options" }, this.filteredCountries.map((d) => (h("button", { type: "button", key: d.iso2, class: `co-phone-field__option ${d.iso2 === this.selectedIso2 ? 'co-phone-field__option--selected' : ''}`, role: "option", "aria-selected": d.iso2 === this.selectedIso2 ? 'true' : 'false', onClick: () => this.handleCountrySelect(d) }, h("img", { class: "co-phone-field__option-flag", src: `https://flagcdn.com/w40/${d.iso2.toLowerCase()}.png`, alt: d.iso2 }), h("span", { class: "co-phone-field__option-name" }, this.renderName(d.name)), h("span", { class: "co-phone-field__option-code" }, d.dialCode))))))), this.helperText && (h("div", { key: 'b9d4d6ab05c36a90aac5ba349f00ec3462ada032', class: "co-phone-field__helper" }, this.statusIcon && (h("co-icon", { key: 'c886b12e93267c884d33aa5145d69e71f0efac6a', name: this.statusIcon, size: 14, weight: "fill", class: "co-phone-field__helper-icon" })), h("span", { key: '21be6a8deca13c7ea80ffe55069762ccf16458fd', class: "co-phone-field__helper-text" }, this.helperText)))));
+    }
+    static get is() { return "co-phone-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-phone-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-phone-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Field label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder for the number input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current full value (dialCode + number)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disable the entire field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Required indicator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'error' | 'success' | 'warning' | 'info'",
+                    "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Validation status."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "status",
+                "defaultValue": "'default'"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper/error text below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-text"
+            },
+            "layout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label layout: vertical (label above) or horizontal (label beside)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "layout",
+                "defaultValue": "'vertical'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'s' | 'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"s\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field size (mirrors co-input): s 28 / sm 32 / md 40 / lg 48."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "defaultCountry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default country ISO2 code (e.g. \"CO\", \"US\"). Optional \u2014 if not set, starts empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "default-country",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedIso2": {},
+            "numberPart": {},
+            "isOpen": {},
+            "searchQuery": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coChange",
+                "name": "coChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits the full phone string on change."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }, {
+                "propName": "defaultCountry",
+                "methodName": "onDefaultCountryChange"
+            }];
+    }
+}

package/dist/collection/components/co-phone-field/dial-codes.js

@@ -0,0 +1,208 @@
+/**
+ * Dial codes sorted by name. Covers the full ITU-T E.164 assignment.
+ * The iso2 key matches country-flag-icons' 3x2/{ISO2} naming.
+ */
+export const DIAL_CODES = [
+    { iso2: 'AF', dialCode: '+93', name: 'Afghanistan' },
+    { iso2: 'AL', dialCode: '+355', name: 'Albania' },
+    { iso2: 'DZ', dialCode: '+213', name: 'Algeria' },
+    { iso2: 'AD', dialCode: '+376', name: 'Andorra' },
+    { iso2: 'AO', dialCode: '+244', name: 'Angola' },
+    { iso2: 'AG', dialCode: '+1268', name: 'Antigua and Barbuda' },
+    { iso2: 'AR', dialCode: '+54', name: 'Argentina' },
+    { iso2: 'AM', dialCode: '+374', name: 'Armenia' },
+    { iso2: 'AU', dialCode: '+61', name: 'Australia' },
+    { iso2: 'AT', dialCode: '+43', name: 'Austria' },
+    { iso2: 'AZ', dialCode: '+994', name: 'Azerbaijan' },
+    { iso2: 'BS', dialCode: '+1242', name: 'Bahamas' },
+    { iso2: 'BH', dialCode: '+973', name: 'Bahrain' },
+    { iso2: 'BD', dialCode: '+880', name: 'Bangladesh' },
+    { iso2: 'BB', dialCode: '+1246', name: 'Barbados' },
+    { iso2: 'BY', dialCode: '+375', name: 'Belarus' },
+    { iso2: 'BE', dialCode: '+32', name: 'Belgium' },
+    { iso2: 'BZ', dialCode: '+501', name: 'Belize' },
+    { iso2: 'BJ', dialCode: '+229', name: 'Benin' },
+    { iso2: 'BT', dialCode: '+975', name: 'Bhutan' },
+    { iso2: 'BO', dialCode: '+591', name: 'Bolivia' },
+    { iso2: 'BA', dialCode: '+387', name: 'Bosnia and Herzegovina' },
+    { iso2: 'BW', dialCode: '+267', name: 'Botswana' },
+    { iso2: 'BR', dialCode: '+55', name: 'Brazil' },
+    { iso2: 'BN', dialCode: '+673', name: 'Brunei' },
+    { iso2: 'BG', dialCode: '+359', name: 'Bulgaria' },
+    { iso2: 'BF', dialCode: '+226', name: 'Burkina Faso' },
+    { iso2: 'BI', dialCode: '+257', name: 'Burundi' },
+    { iso2: 'KH', dialCode: '+855', name: 'Cambodia' },
+    { iso2: 'CM', dialCode: '+237', name: 'Cameroon' },
+    { iso2: 'CA', dialCode: '+1', name: 'Canada' },
+    { iso2: 'CV', dialCode: '+238', name: 'Cape Verde' },
+    { iso2: 'CF', dialCode: '+236', name: 'Central African Republic' },
+    { iso2: 'TD', dialCode: '+235', name: 'Chad' },
+    { iso2: 'CL', dialCode: '+56', name: 'Chile' },
+    { iso2: 'CN', dialCode: '+86', name: 'China' },
+    { iso2: 'CO', dialCode: '+57', name: 'Colombia' },
+    { iso2: 'KM', dialCode: '+269', name: 'Comoros' },
+    { iso2: 'CD', dialCode: '+243', name: 'Congo (DRC)' },
+    { iso2: 'CG', dialCode: '+242', name: 'Congo (Republic)' },
+    { iso2: 'CR', dialCode: '+506', name: 'Costa Rica' },
+    { iso2: 'CI', dialCode: '+225', name: 'Côte d\'Ivoire' },
+    { iso2: 'HR', dialCode: '+385', name: 'Croatia' },
+    { iso2: 'CU', dialCode: '+53', name: 'Cuba' },
+    { iso2: 'CY', dialCode: '+357', name: 'Cyprus' },
+    { iso2: 'CZ', dialCode: '+420', name: 'Czech Republic' },
+    { iso2: 'DK', dialCode: '+45', name: 'Denmark' },
+    { iso2: 'DJ', dialCode: '+253', name: 'Djibouti' },
+    { iso2: 'DM', dialCode: '+1767', name: 'Dominica' },
+    { iso2: 'DO', dialCode: '+1809', name: 'Dominican Republic' },
+    { iso2: 'EC', dialCode: '+593', name: 'Ecuador' },
+    { iso2: 'EG', dialCode: '+20', name: 'Egypt' },
+    { iso2: 'SV', dialCode: '+503', name: 'El Salvador' },
+    { iso2: 'GQ', dialCode: '+240', name: 'Equatorial Guinea' },
+    { iso2: 'ER', dialCode: '+291', name: 'Eritrea' },
+    { iso2: 'EE', dialCode: '+372', name: 'Estonia' },
+    { iso2: 'SZ', dialCode: '+268', name: 'Eswatini' },
+    { iso2: 'ET', dialCode: '+251', name: 'Ethiopia' },
+    { iso2: 'FJ', dialCode: '+679', name: 'Fiji' },
+    { iso2: 'FI', dialCode: '+358', name: 'Finland' },
+    { iso2: 'FR', dialCode: '+33', name: 'France' },
+    { iso2: 'GA', dialCode: '+241', name: 'Gabon' },
+    { iso2: 'GM', dialCode: '+220', name: 'Gambia' },
+    { iso2: 'GE', dialCode: '+995', name: 'Georgia' },
+    { iso2: 'DE', dialCode: '+49', name: 'Germany' },
+    { iso2: 'GH', dialCode: '+233', name: 'Ghana' },
+    { iso2: 'GR', dialCode: '+30', name: 'Greece' },
+    { iso2: 'GD', dialCode: '+1473', name: 'Grenada' },
+    { iso2: 'GT', dialCode: '+502', name: 'Guatemala' },
+    { iso2: 'GN', dialCode: '+224', name: 'Guinea' },
+    { iso2: 'GW', dialCode: '+245', name: 'Guinea-Bissau' },
+    { iso2: 'GY', dialCode: '+592', name: 'Guyana' },
+    { iso2: 'HT', dialCode: '+509', name: 'Haiti' },
+    { iso2: 'HN', dialCode: '+504', name: 'Honduras' },
+    { iso2: 'HU', dialCode: '+36', name: 'Hungary' },
+    { iso2: 'IS', dialCode: '+354', name: 'Iceland' },
+    { iso2: 'IN', dialCode: '+91', name: 'India' },
+    { iso2: 'ID', dialCode: '+62', name: 'Indonesia' },
+    { iso2: 'IR', dialCode: '+98', name: 'Iran' },
+    { iso2: 'IQ', dialCode: '+964', name: 'Iraq' },
+    { iso2: 'IE', dialCode: '+353', name: 'Ireland' },
+    { iso2: 'IL', dialCode: '+972', name: 'Israel' },
+    { iso2: 'IT', dialCode: '+39', name: 'Italy' },
+    { iso2: 'JM', dialCode: '+1876', name: 'Jamaica' },
+    { iso2: 'JP', dialCode: '+81', name: 'Japan' },
+    { iso2: 'JO', dialCode: '+962', name: 'Jordan' },
+    { iso2: 'KZ', dialCode: '+7', name: 'Kazakhstan' },
+    { iso2: 'KE', dialCode: '+254', name: 'Kenya' },
+    { iso2: 'KI', dialCode: '+686', name: 'Kiribati' },
+    { iso2: 'KW', dialCode: '+965', name: 'Kuwait' },
+    { iso2: 'KG', dialCode: '+996', name: 'Kyrgyzstan' },
+    { iso2: 'LA', dialCode: '+856', name: 'Laos' },
+    { iso2: 'LV', dialCode: '+371', name: 'Latvia' },
+    { iso2: 'LB', dialCode: '+961', name: 'Lebanon' },
+    { iso2: 'LS', dialCode: '+266', name: 'Lesotho' },
+    { iso2: 'LR', dialCode: '+231', name: 'Liberia' },
+    { iso2: 'LY', dialCode: '+218', name: 'Libya' },
+    { iso2: 'LI', dialCode: '+423', name: 'Liechtenstein' },
+    { iso2: 'LT', dialCode: '+370', name: 'Lithuania' },
+    { iso2: 'LU', dialCode: '+352', name: 'Luxembourg' },
+    { iso2: 'MG', dialCode: '+261', name: 'Madagascar' },
+    { iso2: 'MW', dialCode: '+265', name: 'Malawi' },
+    { iso2: 'MY', dialCode: '+60', name: 'Malaysia' },
+    { iso2: 'MV', dialCode: '+960', name: 'Maldives' },
+    { iso2: 'ML', dialCode: '+223', name: 'Mali' },
+    { iso2: 'MT', dialCode: '+356', name: 'Malta' },
+    { iso2: 'MH', dialCode: '+692', name: 'Marshall Islands' },
+    { iso2: 'MR', dialCode: '+222', name: 'Mauritania' },
+    { iso2: 'MU', dialCode: '+230', name: 'Mauritius' },
+    { iso2: 'MX', dialCode: '+52', name: 'Mexico' },
+    { iso2: 'FM', dialCode: '+691', name: 'Micronesia' },
+    { iso2: 'MD', dialCode: '+373', name: 'Moldova' },
+    { iso2: 'MC', dialCode: '+377', name: 'Monaco' },
+    { iso2: 'MN', dialCode: '+976', name: 'Mongolia' },
+    { iso2: 'ME', dialCode: '+382', name: 'Montenegro' },
+    { iso2: 'MA', dialCode: '+212', name: 'Morocco' },
+    { iso2: 'MZ', dialCode: '+258', name: 'Mozambique' },
+    { iso2: 'MM', dialCode: '+95', name: 'Myanmar' },
+    { iso2: 'NA', dialCode: '+264', name: 'Namibia' },
+    { iso2: 'NR', dialCode: '+674', name: 'Nauru' },
+    { iso2: 'NP', dialCode: '+977', name: 'Nepal' },
+    { iso2: 'NL', dialCode: '+31', name: 'Netherlands' },
+    { iso2: 'NZ', dialCode: '+64', name: 'New Zealand' },
+    { iso2: 'NI', dialCode: '+505', name: 'Nicaragua' },
+    { iso2: 'NE', dialCode: '+227', name: 'Niger' },
+    { iso2: 'NG', dialCode: '+234', name: 'Nigeria' },
+    { iso2: 'KP', dialCode: '+850', name: 'North Korea' },
+    { iso2: 'MK', dialCode: '+389', name: 'North Macedonia' },
+    { iso2: 'NO', dialCode: '+47', name: 'Norway' },
+    { iso2: 'OM', dialCode: '+968', name: 'Oman' },
+    { iso2: 'PK', dialCode: '+92', name: 'Pakistan' },
+    { iso2: 'PW', dialCode: '+680', name: 'Palau' },
+    { iso2: 'PS', dialCode: '+970', name: 'Palestine' },
+    { iso2: 'PA', dialCode: '+507', name: 'Panama' },
+    { iso2: 'PG', dialCode: '+675', name: 'Papua New Guinea' },
+    { iso2: 'PY', dialCode: '+595', name: 'Paraguay' },
+    { iso2: 'PE', dialCode: '+51', name: 'Peru' },
+    { iso2: 'PH', dialCode: '+63', name: 'Philippines' },
+    { iso2: 'PL', dialCode: '+48', name: 'Poland' },
+    { iso2: 'PT', dialCode: '+351', name: 'Portugal' },
+    { iso2: 'QA', dialCode: '+974', name: 'Qatar' },
+    { iso2: 'RO', dialCode: '+40', name: 'Romania' },
+    { iso2: 'RU', dialCode: '+7', name: 'Russia' },
+    { iso2: 'RW', dialCode: '+250', name: 'Rwanda' },
+    { iso2: 'KN', dialCode: '+1869', name: 'Saint Kitts and Nevis' },
+    { iso2: 'LC', dialCode: '+1758', name: 'Saint Lucia' },
+    { iso2: 'VC', dialCode: '+1784', name: 'Saint Vincent and the Grenadines' },
+    { iso2: 'WS', dialCode: '+685', name: 'Samoa' },
+    { iso2: 'SM', dialCode: '+378', name: 'San Marino' },
+    { iso2: 'ST', dialCode: '+239', name: 'São Tomé and Príncipe' },
+    { iso2: 'SA', dialCode: '+966', name: 'Saudi Arabia' },
+    { iso2: 'SN', dialCode: '+221', name: 'Senegal' },
+    { iso2: 'RS', dialCode: '+381', name: 'Serbia' },
+    { iso2: 'SC', dialCode: '+248', name: 'Seychelles' },
+    { iso2: 'SL', dialCode: '+232', name: 'Sierra Leone' },
+    { iso2: 'SG', dialCode: '+65', name: 'Singapore' },
+    { iso2: 'SK', dialCode: '+421', name: 'Slovakia' },
+    { iso2: 'SI', dialCode: '+386', name: 'Slovenia' },
+    { iso2: 'SB', dialCode: '+677', name: 'Solomon Islands' },
+    { iso2: 'SO', dialCode: '+252', name: 'Somalia' },
+    { iso2: 'ZA', dialCode: '+27', name: 'South Africa' },
+    { iso2: 'KR', dialCode: '+82', name: 'South Korea' },
+    { iso2: 'SS', dialCode: '+211', name: 'South Sudan' },
+    { iso2: 'ES', dialCode: '+34', name: 'Spain' },
+    { iso2: 'LK', dialCode: '+94', name: 'Sri Lanka' },
+    { iso2: 'SD', dialCode: '+249', name: 'Sudan' },
+    { iso2: 'SR', dialCode: '+597', name: 'Suriname' },
+    { iso2: 'SE', dialCode: '+46', name: 'Sweden' },
+    { iso2: 'CH', dialCode: '+41', name: 'Switzerland' },
+    { iso2: 'SY', dialCode: '+963', name: 'Syria' },
+    { iso2: 'TW', dialCode: '+886', name: 'Taiwan' },
+    { iso2: 'TJ', dialCode: '+992', name: 'Tajikistan' },
+    { iso2: 'TZ', dialCode: '+255', name: 'Tanzania' },
+    { iso2: 'TH', dialCode: '+66', name: 'Thailand' },
+    { iso2: 'TL', dialCode: '+670', name: 'Timor-Leste' },
+    { iso2: 'TG', dialCode: '+228', name: 'Togo' },
+    { iso2: 'TO', dialCode: '+676', name: 'Tonga' },
+    { iso2: 'TT', dialCode: '+1868', name: 'Trinidad and Tobago' },
+    { iso2: 'TN', dialCode: '+216', name: 'Tunisia' },
+    { iso2: 'TR', dialCode: '+90', name: 'Turkey' },
+    { iso2: 'TM', dialCode: '+993', name: 'Turkmenistan' },
+    { iso2: 'TV', dialCode: '+688', name: 'Tuvalu' },
+    { iso2: 'UG', dialCode: '+256', name: 'Uganda' },
+    { iso2: 'UA', dialCode: '+380', name: 'Ukraine' },
+    { iso2: 'AE', dialCode: '+971', name: 'United Arab Emirates' },
+    { iso2: 'GB', dialCode: '+44', name: 'United Kingdom' },
+    { iso2: 'US', dialCode: '+1', name: 'United States' },
+    { iso2: 'UY', dialCode: '+598', name: 'Uruguay' },
+    { iso2: 'UZ', dialCode: '+998', name: 'Uzbekistan' },
+    { iso2: 'VU', dialCode: '+678', name: 'Vanuatu' },
+    { iso2: 'VA', dialCode: '+379', name: 'Vatican City' },
+    { iso2: 'VE', dialCode: '+58', name: 'Venezuela' },
+    { iso2: 'VN', dialCode: '+84', name: 'Vietnam' },
+    { iso2: 'YE', dialCode: '+967', name: 'Yemen' },
+    { iso2: 'ZM', dialCode: '+260', name: 'Zambia' },
+    { iso2: 'ZW', dialCode: '+263', name: 'Zimbabwe' },
+];
+/** ISO2 code → DialCode entry lookup. */
+export const DIAL_CODE_MAP = Object.fromEntries(DIAL_CODES.map((d) => [d.iso2, d]));
+/** Convert ISO2 country code to Unicode flag emoji. */
+export function iso2ToEmoji(iso2) {
+    return [...iso2.toUpperCase()].map((c) => String.fromCodePoint(c.charCodeAt(0) + 127397)).join('');
+}

package/dist/collection/components/co-popover/co-popover.css

@@ -25,8 +25,17 @@
 /* ── Panel ──────────────────────────────────────────────── */
 .co-popover__panel {
   position: fixed;
+  /* Reset the [popover] UA defaults (inset:0; margin:auto; fit-content sizing;
+     padding/border) so our JS-driven top/left + width win in the top layer. */
+  inset: auto;
   top: 0;
   left: 0;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+  max-width: none;
+  max-height: none;
   z-index: 10000;
   visibility: hidden;
   background: var(--co-semantic-surface-page, #fff);