@baloise/ds-core 20.0.0-next.10 → 20.0.0-next.11

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

@@ -1,1174 +0,0 @@
-/*!
- * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
- */
-import { __decorate, __metadata } from "tslib";
-import { h } from "@stencil/core";
-import { defaultConfig, ListenToConfig } from "../../global/index";
-import { inheritAttributes, Logger, OneOf, Type, stopEventBubbling, watchInvalidTextSlot, isEnterKey, isSpaceKey, isEscapeKey, isArrowDownKey, isArrowUpKey, isHomeKey, isEndKey, isTabKey, } from "../../utils/index";
-import { Field } from "../input/field.util";
-import { INPUT_COLORS } from "../input/input.interfaces";
-import { i18nDsInputPhone } from "./input-phone.i18n";
-import { filterCountries, getCountryName, matchesCountryQuery, parseCountriesProp } from "./country-data";
-import { PhoneFormatter, caretFromDigitCount, countDigitsBefore, detectCountryFromInput, getExamplePlaceholder, } from "./formatting";
-import { getFlagUrl } from "./flag";
-/**
- * Input phone renders an international phone number field with a country picker
- * (flag + calling code) and a national-number input that live-formats as the user types.
- *
- * @slot invalid-text - Overrides the `invalidText` prop with custom markup, shown instead of the description when `invalid` is `true`.
- * @part inner - The inner wrapper element containing label, control, and description.
- * @part label - The label element.
- * @part control - The control container wrapping the country trigger and number field.
- * @part description - The description / validation message element.
- * @part input - The native HTML input element for the national number.
- * @part country-trigger - The country picker trigger button.
- */
-export class InputPhone {
-    constructor() {
-        this.inheritedAttributes = {};
-        this.formatter = new PhoneFormatter();
-        this.pendingCaret = null;
-        this.skipCountryWatch = false;
-        this.skipValueWatch = false;
-        this.shouldFocusFilter = false;
-        this.initialValue = null;
-        this.initialResolvedCountry = undefined;
-        this.inputId = `ds-input-phone-${InputPhoneIds++}`;
-        this.focused = false;
-        this.language = defaultConfig.language;
-        this.region = defaultConfig.region;
-        this.hasInvalidTextSlotContent = false;
-        this.pickerOpen = false;
-        this.filterQuery = '';
-        this.activeCode = undefined;
-        this.displayValue = '';
-        this.resolvedCountry = undefined;
-        this.nationalNumber = '';
-        /**
-         * PUBLIC PROPERTY API
-         * ─────────────────────────────────────────────────────
-         */
-        /**
-         * The canonical phone number value in E.164 format (e.g. `+41791234567`).
-         */
-        this.value = null;
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * Allow-list of ISO 3166-1 alpha-2 country codes. Accepts a comma-separated
-         * string or a string array. `undefined` / empty shows every country.
-         */
-        this.countries = undefined;
-        /**
-         * The label of the input, which is displayed above the input field.
-         */
-        this.label = '';
-        /**
-         * The description of the input, which is displayed below the input field.
-         */
-        this.description = '';
-        /**
-         * Defines the color of the input. The default value is `primary`.
-         */
-        this.color = 'primary';
-        /**
-         * If `true` the component gets a invalid style.
-         */
-        this.invalid = false;
-        /**
-         * The text to display when the input is in an invalid state.
-         */
-        this.invalidText = '';
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        this.required = true;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form.
-         */
-        this.disabled = false;
-        /**
-         * If `true` the element can not be mutated, meaning the user can not edit the control.
-         * The country picker is disabled; the number field stays focusable and selectable.
-         */
-        this.readonly = false;
-        /**
-         * Instructional text that shows before the number field has a value.
-         */
-        this.placeholder = '';
-        /**
-         * EVENT HANDLERS
-         * ─────────────────────────────────────────────────────
-         */
-        this.handleTriggerClick = (ev) => {
-            ev.preventDefault();
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            this.pickerOpen ? this.closePicker() : this.openPicker();
-        };
-        this.handleTriggerKeyDown = (ev) => {
-            if (this.disabled || this.readonly) {
-                return;
-            }
-            if (isEnterKey(ev) || isSpaceKey(ev) || isArrowDownKey(ev)) {
-                ev.preventDefault();
-                this.openPicker();
-            }
-            else if (isEscapeKey(ev) && this.pickerOpen) {
-                ev.preventDefault();
-                this.closePicker(true);
-            }
-        };
-        this.handleFilterInput = (ev) => {
-            var _a;
-            const input = ev.target;
-            this.filterQuery = input.value;
-            const visible = this.getVisibleCountries();
-            if (!visible.some(country => country.code === this.activeCode)) {
-                this.activeCode = (_a = visible[0]) === null || _a === void 0 ? void 0 : _a.code;
-            }
-        };
-        this.handleFilterKeyDown = (ev) => {
-            var _a, _b;
-            const visible = this.getVisibleCountries();
-            if (isTabKey(ev)) {
-                this.closePicker();
-                return;
-            }
-            if (isEscapeKey(ev)) {
-                ev.preventDefault();
-                this.closePicker(true);
-                return;
-            }
-            if (isEnterKey(ev)) {
-                ev.preventDefault();
-                if (this.activeCode) {
-                    this.selectCountry(this.activeCode, { emit: true });
-                }
-                this.closePicker(true);
-                return;
-            }
-            if (isArrowDownKey(ev)) {
-                ev.preventDefault();
-                this.moveActive(visible, 1);
-                return;
-            }
-            if (isArrowUpKey(ev)) {
-                ev.preventDefault();
-                this.moveActive(visible, -1);
-                return;
-            }
-            if (isHomeKey(ev)) {
-                ev.preventDefault();
-                this.activeCode = (_a = visible[0]) === null || _a === void 0 ? void 0 : _a.code;
-                return;
-            }
-            if (isEndKey(ev)) {
-                ev.preventDefault();
-                this.activeCode = (_b = visible[visible.length - 1]) === null || _b === void 0 ? void 0 : _b.code;
-            }
-        };
-        this.handleOptionMouseDown = (ev) => {
-            ev.preventDefault();
-        };
-        this.handleOptionClick = (code) => {
-            this.selectCountry(code, { emit: true });
-            this.closePicker(true);
-        };
-        this.handleOptionMouseEnter = (code) => {
-            this.activeCode = code;
-        };
-        this.handleInput = (ev) => {
-            var _a;
-            const input = ev.target;
-            const raw = input.value;
-            const detected = detectCountryFromInput(raw);
-            if (detected && detected !== this.resolvedCountry) {
-                const available = this.getAvailableCountries();
-                if (available.some(country => country.code === detected)) {
-                    this.setInternalCountry(detected, { emit: false, reformat: false });
-                }
-                else if (available[0]) {
-                    this.warnCountryMismatch(detected, available);
-                    this.setInternalCountry(available[0].code, { emit: false, reformat: false });
-                }
-            }
-            const caret = (_a = input.selectionStart) !== null && _a !== void 0 ? _a : raw.length;
-            const digitsBefore = countDigitsBefore(raw, caret);
-            const formatted = this.formatter.formatLive(raw);
-            const nextCaret = digitsBefore === 0 && formatted === '+' ? 1 : caretFromDigitCount(formatted, digitsBefore);
-            this.displayValue = formatted;
-            this.pendingCaret = nextCaret;
-            // Stencil only re-syncs the native input's `value` when `displayValue` actually changes
-            // between renders — typing characters the formatter discards entirely (letters, symbols)
-            // can leave `displayValue` unchanged (e.g. still ''), so the disallowed characters the
-            // user just typed would otherwise stay visible in the field. Force the DOM back in sync.
-            if (input.value !== formatted) {
-                input.value = formatted;
-                try {
-                    input.setSelectionRange(nextCaret, nextCaret);
-                }
-                catch (_b) {
-                    // Some environments reject setSelectionRange on unfocused inputs.
-                }
-                this.pendingCaret = null;
-            }
-            this.nationalNumber = this.formatter.getNationalNumber();
-            this.setInternalValue(this.formatter.getE164());
-            this.dsInput.emit(this.eventDetail());
-        };
-        this.handleFocus = (ev) => {
-            this.focused = true;
-            if (this.pickerOpen) {
-                this.closePicker();
-            }
-            if (!this.disabled) {
-                this.dsFocus.emit(ev);
-            }
-        };
-        this.handleBlur = (ev) => {
-            this.focused = false;
-            this.applyFormattedValue(this.displayValue, true);
-            if (!this.disabled) {
-                this.dsChange.emit(this.eventDetail());
-                this.dsBlur.emit(ev);
-            }
-        };
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    valueChanged(newVal) {
-        if (this.skipValueWatch) {
-            return;
-        }
-        this.applyExternalValue(newVal);
-    }
-    countriesChanged() {
-        this.syncCountryFromProps({ emit: false });
-    }
-    countryChanged() {
-        if (this.skipCountryWatch) {
-            return;
-        }
-        this.syncCountryFromProps({ emit: false });
-    }
-    /**
-     * LIFECYCLE
-     * ─────────────────────────────────────────────────────
-     */
-    connectedCallback() {
-        this.disconnectInvalidTextSlotWatcher = watchInvalidTextSlot(this.el, hasContent => {
-            this.hasInvalidTextSlotContent = hasContent;
-        });
-    }
-    componentWillLoad() {
-        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label', 'tabindex', 'title', 'data-hj-allow']);
-        this.initializeFromProps();
-        this.initialValue = this.value;
-        this.initialResolvedCountry = this.resolvedCountry;
-    }
-    componentDidLoad() {
-        this.syncFormValue();
-    }
-    componentDidRender() {
-        if (this.pendingCaret !== null && this.inputEl) {
-            try {
-                this.inputEl.setSelectionRange(this.pendingCaret, this.pendingCaret);
-            }
-            catch (_a) {
-                // Some environments reject setSelectionRange on unfocused inputs.
-            }
-            this.pendingCaret = null;
-        }
-        if (this.shouldFocusFilter && this.filterEl) {
-            this.filterEl.focus();
-            this.shouldFocusFilter = false;
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.disconnectInvalidTextSlotWatcher) === null || _a === void 0 ? void 0 : _a.call(this);
-    }
-    /**
-     * PUBLIC LISTENERS
-     * ─────────────────────────────────────────────────────
-     */
-    listenToClick(ev) {
-        if ((this.disabled || this.readonly) && ev.target === this.el) {
-            stopEventBubbling(ev);
-        }
-        if (this.pickerOpen && ev.target !== this.el && !this.el.contains(ev.target)) {
-            this.closePicker();
-        }
-    }
-    listenToReset(ev) {
-        const form = ev.target;
-        if (form === null || form === void 0 ? void 0 : form.contains(this.el)) {
-            this.setInternalCountry(this.initialResolvedCountry, { emit: false, reformat: false });
-            this.applyExternalValue(this.initialValue);
-        }
-    }
-    /**
-     * PUBLIC METHODS
-     * ─────────────────────────────────────────────────────
-     */
-    /**
-     * @internal define config for the component
-     */
-    async configChanged(state) {
-        this.language = state.language;
-        this.region = state.region;
-    }
-    /**
-     * Sets focus on the national-number field.
-     */
-    async setFocus() {
-        var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    /**
-     * Removes focus from the national-number field.
-     * @internal
-     */
-    async setBlur() {
-        var _a;
-        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    /**
-     * Returns the native `<input>` element used under the hood.
-     */
-    async getInputElement() {
-        return this.inputEl;
-    }
-    /**
-     * PRIVATE METHODS
-     * ─────────────────────────────────────────────────────
-     */
-    initializeFromProps() {
-        var _a, _b;
-        const available = this.getAvailableCountries();
-        let next = this.normalizeCode(this.country);
-        if (next && !this.isCountryAvailable(next, available)) {
-            this.warnCountryMismatch(next, available);
-            next = (_a = available[0]) === null || _a === void 0 ? void 0 : _a.code;
-            this.setInternalCountry(next, { emit: false, reformat: false });
-        }
-        if (!next && this.initialCountry) {
-            const seed = this.normalizeCode(this.initialCountry);
-            if (seed && this.isCountryAvailable(seed, available)) {
-                next = seed;
-            }
-            else if (seed) {
-                this.warnCountryMismatch(seed, available);
-                next = (_b = available[0]) === null || _b === void 0 ? void 0 : _b.code;
-            }
-        }
-        if (!next && this.value) {
-            const detected = detectCountryFromInput(this.value);
-            if (detected && this.isCountryAvailable(detected, available)) {
-                next = detected;
-            }
-        }
-        this.resolvedCountry = next;
-        this.skipCountryWatch = true;
-        this.country = next;
-        this.skipCountryWatch = false;
-        this.formatter.setCountry(next);
-        if (this.value) {
-            this.applyFormattedValue(this.value, true);
-        }
-    }
-    syncCountryFromProps(options) {
-        var _a;
-        const available = this.getAvailableCountries();
-        let next = this.normalizeCode(this.country);
-        if (next && !this.isCountryAvailable(next, available)) {
-            this.warnCountryMismatch(next, available);
-            next = (_a = available[0]) === null || _a === void 0 ? void 0 : _a.code;
-            this.setInternalCountry(next, { emit: false, reformat: true });
-            return;
-        }
-        if (next !== this.resolvedCountry) {
-            this.applyCountry(next, { emit: options.emit, reformat: true });
-        }
-    }
-    applyExternalValue(newVal) {
-        if (!newVal) {
-            this.displayValue = '';
-            this.nationalNumber = '';
-            this.formatter.formatLive('');
-            this.syncFormValue();
-            return;
-        }
-        const detected = detectCountryFromInput(newVal);
-        const available = this.getAvailableCountries();
-        if (detected && this.isCountryAvailable(detected, available) && detected !== this.resolvedCountry) {
-            this.applyCountry(detected, { emit: false, reformat: false });
-        }
-        this.applyFormattedValue(newVal, true);
-    }
-    selectCountry(code, options) {
-        var _a, _b;
-        const available = this.getAvailableCountries();
-        if (!this.isCountryAvailable(code, available)) {
-            this.warnCountryMismatch(code, available);
-            code = (_b = (_a = available[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : code;
-        }
-        this.setInternalCountry(code, { emit: options.emit, reformat: true });
-    }
-    setInternalCountry(code, options) {
-        const previous = this.resolvedCountry;
-        this.skipCountryWatch = true;
-        this.country = code;
-        this.skipCountryWatch = false;
-        this.applyCountry(code, { emit: options.emit && previous !== code, reformat: options.reformat });
-    }
-    applyCountry(code, options) {
-        const digits = this.nationalNumber;
-        this.resolvedCountry = code;
-        this.formatter.setCountry(code);
-        if (options.reformat) {
-            this.applyFormattedValue(digits, true);
-        }
-        if (options.emit && code) {
-            this.dsCountryChange.emit({ country: code });
-        }
-    }
-    applyFormattedValue(raw, stable) {
-        this.displayValue = this.formatter.formatLive(raw);
-        if (stable) {
-            this.displayValue = this.formatter.formatStable() || this.displayValue;
-        }
-        this.nationalNumber = this.formatter.getNationalNumber();
-        this.setInternalValue(this.formatter.getE164());
-    }
-    setInternalValue(next) {
-        this.skipValueWatch = true;
-        this.value = next;
-        this.skipValueWatch = false;
-        this.syncFormValue();
-    }
-    syncFormValue() {
-        this.internals.setFormValue(this.value);
-    }
-    eventDetail() {
-        var _a;
-        return {
-            value: this.value,
-            country: (_a = this.resolvedCountry) !== null && _a !== void 0 ? _a : '',
-            nationalNumber: this.nationalNumber,
-        };
-    }
-    getAvailableCountries() {
-        return filterCountries(parseCountriesProp(this.countries));
-    }
-    getVisibleCountries() {
-        const available = this.getAvailableCountries();
-        const filtered = available.filter(country => matchesCountryQuery(country, getCountryName(country.code, this.language), this.filterQuery));
-        const allowList = parseCountriesProp(this.countries);
-        if (allowList) {
-            return filtered;
-        }
-        return filtered
-            .slice()
-            .sort((a, b) => getCountryName(a.code, this.language).localeCompare(getCountryName(b.code, this.language), this.language));
-    }
-    isCountryAvailable(code, available) {
-        return available.some(country => country.code === code);
-    }
-    normalizeCode(code) {
-        const trimmed = code === null || code === void 0 ? void 0 : code.trim().toUpperCase();
-        return trimmed ? trimmed : undefined;
-    }
-    warnCountryMismatch(code, available) {
-        var _a;
-        const fallback = (_a = available[0]) === null || _a === void 0 ? void 0 : _a.code;
-        console.warn(`[ds-input-phone] \`country\` "${code}" is not in \`countries\`. Falling back to "${fallback !== null && fallback !== void 0 ? fallback : ''}".`);
-    }
-    openPicker() {
-        var _a, _b;
-        if (this.disabled || this.readonly || this.pickerOpen) {
-            return;
-        }
-        this.filterQuery = '';
-        this.activeCode = (_a = this.resolvedCountry) !== null && _a !== void 0 ? _a : (_b = this.getVisibleCountries()[0]) === null || _b === void 0 ? void 0 : _b.code;
-        this.shouldFocusFilter = true;
-        this.pickerOpen = true;
-    }
-    closePicker(restoreTriggerFocus = false) {
-        var _a;
-        if (!this.pickerOpen) {
-            return;
-        }
-        this.pickerOpen = false;
-        this.filterQuery = '';
-        if (restoreTriggerFocus) {
-            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    }
-    moveActive(visible, delta) {
-        if (visible.length === 0) {
-            return;
-        }
-        const currentIndex = visible.findIndex(country => country.code === this.activeCode);
-        const start = currentIndex === -1 ? (delta > 0 ? -1 : visible.length) : currentIndex;
-        const nextIndex = Math.max(0, Math.min(visible.length - 1, start + delta));
-        this.activeCode = visible[nextIndex].code;
-        this.scrollActiveIntoView();
-    }
-    scrollActiveIntoView() {
-        var _a, _b;
-        const active = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(this.optionId((_b = this.activeCode) !== null && _b !== void 0 ? _b : ''));
-        active === null || active === void 0 ? void 0 : active.scrollIntoView({ block: 'nearest' });
-    }
-    optionId(code) {
-        return `country-option-${code}`;
-    }
-    triggerAccessibleName(selected, countryName) {
-        const i18n = i18nDsInputPhone[this.language];
-        if (!selected) {
-            return i18n.selectCountry;
-        }
-        return `${i18n.country} ${countryName} +${selected.callingCode}`;
-    }
-    /**
-     * RENDER
-     * ─────────────────────────────────────────────────────
-     */
-    render() {
-        const isInvalid = this.invalid || this.hasInvalidTextSlotContent;
-        const i18n = i18nDsInputPhone[this.language];
-        const available = this.getAvailableCountries();
-        const visible = this.getVisibleCountries();
-        const selected = available.find(country => country.code === this.resolvedCountry);
-        const selectedName = selected ? getCountryName(selected.code, this.language) : '';
-        const pickerDisabled = this.disabled || this.readonly;
-        const inputPlaceholder = this.placeholder || getExamplePlaceholder(this.resolvedCountry);
-        return (h(Field, { key: 'dda89804db28c680ccf96ba7ea13a9811eb1ae30', disabled: this.disabled, color: this.color, invalid: isInvalid, label: this.label, description: this.description, invalidText: this.invalidText, required: this.required, language: this.language, inputId: "input", cssClasses: { 'is-open': this.pickerOpen } }, h("button", { key: '53445efb17b9da9dd7f90dad9ade7dc624145fdf', id: "country-trigger", part: "country-trigger", type: "button", ref: el => (this.triggerEl = el), disabled: pickerDisabled, "aria-haspopup": "listbox", "aria-expanded": this.pickerOpen ? 'true' : 'false', "aria-controls": "country-list", "aria-labelledby": this.label ? 'label country-trigger-label' : 'country-trigger-label', onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, selected ? (h("img", { class: "flag", src: getFlagUrl(selected.code), alt: "", "aria-hidden": "true", draggable: false })) : (h("span", { class: "flag is-empty", "aria-hidden": "true" })), h("span", { key: '87ed5d98c47ff03854664e50e30e06c4a2466561', class: "calling-code" }, selected ? `+${selected.callingCode}` : ''), h("span", { key: '9cf5764cae9c574cc4bb44ce998f370489af4369', id: "country-trigger-label", class: "sr-only" }, this.triggerAccessibleName(selected, selectedName)), h("span", { key: '7740bce6549fc3423947947f68d7e8950baa440d', class: "chevron", "aria-hidden": "true" })), h("div", { key: 'a39265591bf6abba31b290344ece4590be85d49c', id: "input-segment" }, h("input", Object.assign({ key: 'a74e9d96424c0bbbb155246a2761559d4c731c5c', id: "input", part: "input", name: this.name, ref: el => (this.inputEl = el), type: "text", inputMode: "tel", autocomplete: "tel-national", "aria-describedby": "description", "aria-invalid": isInvalid ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: inputPlaceholder, value: this.displayValue, onInput: ev => this.handleInput(ev), onFocus: ev => this.handleFocus(ev), onBlur: ev => this.handleBlur(ev) }, this.inheritedAttributes))), h("div", { key: 'ce82e35225b8ba30ddf977745db26f9bff9bccfe', id: "popup", "aria-hidden": this.pickerOpen ? 'false' : 'true', inert: this.pickerOpen ? undefined : true }, h("div", { key: 'd2859f611710002643b1b75f9a09988010aeb98c', class: "filter" }, h("label", { key: '7d5fadfe32af18f7be597aadb38a463da8453a3f', class: "sr-only", htmlFor: "country-filter" }, i18n.filterCountries), h("input", { key: 'fa69e7e0673a9a8cf64a0b53ed4cf7e9f89990e4', id: "country-filter", ref: el => (this.filterEl = el), type: "text", autocomplete: "off", "aria-controls": "country-list", placeholder: i18n.filterCountries, value: this.filterQuery, onInput: ev => this.handleFilterInput(ev), onKeyDown: this.handleFilterKeyDown })), h("span", { key: 'e66d643c5fd4ef0908d3ca2949635cf4ca3349a4', id: "country-list-label", class: "sr-only" }, i18n.selectCountry), h("div", { key: '7e85529702180bbe46048104d9387875c1ccc219', id: "country-list", role: "listbox", tabIndex: 0, "aria-labelledby": "country-list-label", "aria-activedescendant": this.activeCode ? this.optionId(this.activeCode) : undefined }, this.pickerOpen && visible.length === 0 && h("div", { key: '9feb019423945faaa341c0d0d1961b495233137d', class: "no-results" }, i18n.noResults), this.pickerOpen &&
-            visible.map(country => {
-                const name = getCountryName(country.code, this.language);
-                const selectedOption = country.code === this.resolvedCountry;
-                const active = country.code === this.activeCode;
-                return (h("div", { id: this.optionId(country.code), role: "option", "aria-selected": selectedOption ? 'true' : 'false', class: {
-                        'option': true,
-                        'is-selected': selectedOption,
-                        'is-active': active,
-                    }, onMouseDown: this.handleOptionMouseDown, onClick: () => this.handleOptionClick(country.code), onMouseEnter: () => this.handleOptionMouseEnter(country.code) }, h("img", { class: "flag", src: getFlagUrl(country.code), alt: "", "aria-hidden": "true", draggable: false }), h("span", { class: "option-name" }, name), h("span", { class: "option-code" }, "+", country.callingCode)));
-            })))));
-    }
-    static get is() { return "ds-input-phone"; }
-    static get encapsulation() { return "shadow"; }
-    static get formAssociated() { return true; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["input-phone.host.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["input-phone.host.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "value": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string | null",
-                    "resolved": "null | string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The canonical phone number value in E.164 format (e.g. `+41791234567`)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "value",
-                "defaultValue": "null"
-            },
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The name of the control, which is submitted with the form data."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "attribute": "name",
-                "defaultValue": "this.inputId"
-            },
-            "countries": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string | string[] | undefined",
-                    "resolved": "string | string[] | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Allow-list of ISO 3166-1 alpha-2 country codes. Accepts a comma-separated\nstring or a string array. `undefined` / empty shows every country."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "countries",
-                "defaultValue": "undefined"
-            },
-            "initialCountry": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Uncontrolled seed for the starting country. Read once during first load."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "initial-country"
-            },
-            "country": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Live / controlled selected country (ISO 3166-1 alpha-2)."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "country"
-            },
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The label of the input, which is displayed above the input field."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "''"
-            },
-            "description": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The description of the input, which is displayed below the input field."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "description",
-                "defaultValue": "''"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "InputColor",
-                    "resolved": "\"danger\" | \"primary\" | \"success\" | \"warning\"",
-                    "references": {
-                        "InputColor": {
-                            "location": "import",
-                            "path": "../input/input.interfaces",
-                            "id": "src/components/input/input.interfaces.ts::InputColor",
-                            "referenceLocation": "InputColor"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the color of the input. The default value is `primary`."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'primary'"
-            },
-            "invalid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the component gets a invalid style."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid",
-                "defaultValue": "false"
-            },
-            "invalidText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "The text to display when the input is in an invalid state."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "invalid-text",
-                "defaultValue": "''"
-            },
-            "required": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the user must fill in a value before submitting a form."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "required",
-                "defaultValue": "true"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true`, the element is not mutable, focusable, or even submitted with the form."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "readonly": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If `true` the element can not be mutated, meaning the user can not edit the control.\nThe country picker is disabled; the number field stays focusable and selectable."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "readonly",
-                "defaultValue": "false"
-            },
-            "placeholder": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Instructional text that shows before the number field has a value."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placeholder",
-                "defaultValue": "''"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "focused": {},
-            "language": {},
-            "region": {},
-            "hasInvalidTextSlotContent": {},
-            "pickerOpen": {},
-            "filterQuery": {},
-            "activeCode": {},
-            "displayValue": {},
-            "resolvedCountry": {},
-            "nationalNumber": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "dsInput",
-                "name": "dsInput",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted on every keystroke or paste in the number field, after live formatting is applied."
-                },
-                "complexType": {
-                    "original": "PhoneInputDetail",
-                    "resolved": "{ value: string | null; country: string; nationalNumber: string; }",
-                    "references": {
-                        "PhoneInputDetail": {
-                            "location": "import",
-                            "path": "./input-phone.interfaces",
-                            "id": "src/components/input-phone/input-phone.interfaces.ts::PhoneInputDetail",
-                            "referenceLocation": "PhoneInputDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsChange",
-                "name": "dsChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the number field blurs, after the blur-time reformat."
-                },
-                "complexType": {
-                    "original": "PhoneChangeDetail",
-                    "resolved": "{ value: string | null; country: string; nationalNumber: string; }",
-                    "references": {
-                        "PhoneChangeDetail": {
-                            "location": "import",
-                            "path": "./input-phone.interfaces",
-                            "id": "src/components/input-phone/input-phone.interfaces.ts::PhoneChangeDetail",
-                            "referenceLocation": "PhoneChangeDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsCountryChange",
-                "name": "dsCountryChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the selected country changes through the picker."
-                },
-                "complexType": {
-                    "original": "PhoneCountryChangeDetail",
-                    "resolved": "{ country: string; }",
-                    "references": {
-                        "PhoneCountryChangeDetail": {
-                            "location": "import",
-                            "path": "./input-phone.interfaces",
-                            "id": "src/components/input-phone/input-phone.interfaces.ts::PhoneCountryChangeDetail",
-                            "referenceLocation": "PhoneCountryChangeDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsFocus",
-                "name": "dsFocus",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the number field receives focus."
-                },
-                "complexType": {
-                    "original": "FocusEvent",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "FocusEvent": {
-                            "location": "global",
-                            "id": "global::FocusEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "dsBlur",
-                "name": "dsBlur",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the number field loses focus."
-                },
-                "complexType": {
-                    "original": "FocusEvent",
-                    "resolved": "FocusEvent",
-                    "references": {
-                        "FocusEvent": {
-                            "location": "global",
-                            "id": "global::FocusEvent"
-                        }
-                    }
-                }
-            }];
-    }
-    static get methods() {
-        return {
-            "configChanged": {
-                "complexType": {
-                    "signature": "(state: DsConfigState) => Promise<void>",
-                    "parameters": [{
-                            "name": "state",
-                            "type": "DsConfigState",
-                            "docs": ""
-                        }],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "DsConfigState": {
-                            "location": "import",
-                            "path": "@global",
-                            "id": "src/global/index.ts::DsConfigState",
-                            "referenceLocation": "DsConfigState"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "",
-                    "tags": [{
-                            "name": "internal",
-                            "text": "define config for the component"
-                        }]
-                }
-            },
-            "setFocus": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Sets focus on the national-number field.",
-                    "tags": []
-                }
-            },
-            "setBlur": {
-                "complexType": {
-                    "signature": "() => Promise<void>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        }
-                    },
-                    "return": "Promise<void>"
-                },
-                "docs": {
-                    "text": "Removes focus from the national-number field.",
-                    "tags": [{
-                            "name": "internal",
-                            "text": undefined
-                        }]
-                }
-            },
-            "getInputElement": {
-                "complexType": {
-                    "signature": "() => Promise<HTMLInputElement | undefined>",
-                    "parameters": [],
-                    "references": {
-                        "Promise": {
-                            "location": "global",
-                            "id": "global::Promise"
-                        },
-                        "HTMLInputElement": {
-                            "location": "global",
-                            "id": "global::HTMLInputElement"
-                        }
-                    },
-                    "return": "Promise<HTMLInputElement | undefined>"
-                },
-                "docs": {
-                    "text": "Returns the native `<input>` element used under the hood.",
-                    "tags": []
-                }
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "value",
-                "methodName": "valueChanged"
-            }, {
-                "propName": "countries",
-                "methodName": "countriesChanged"
-            }, {
-                "propName": "country",
-                "methodName": "countryChanged"
-            }];
-    }
-    static get listeners() {
-        return [{
-                "name": "click",
-                "method": "listenToClick",
-                "target": "document",
-                "capture": true,
-                "passive": false
-            }, {
-                "name": "reset",
-                "method": "listenToReset",
-                "target": "document",
-                "capture": false,
-                "passive": false
-            }];
-    }
-    static get attachInternalsMemberName() { return "internals"; }
-}
-__decorate([
-    Logger('input-phone'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], InputPhone.prototype, "createLogger", null);
-__decorate([
-    Type('string'),
-    __metadata("design:type", Object)
-], InputPhone.prototype, "value", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], InputPhone.prototype, "name", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], InputPhone.prototype, "initialCountry", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], InputPhone.prototype, "country", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], InputPhone.prototype, "label", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], InputPhone.prototype, "description", void 0);
-__decorate([
-    OneOf(INPUT_COLORS),
-    __metadata("design:type", String)
-], InputPhone.prototype, "color", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], InputPhone.prototype, "invalid", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], InputPhone.prototype, "invalidText", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], InputPhone.prototype, "required", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], InputPhone.prototype, "disabled", void 0);
-__decorate([
-    Type('boolean'),
-    __metadata("design:type", Boolean)
-], InputPhone.prototype, "readonly", void 0);
-__decorate([
-    Type('string'),
-    __metadata("design:type", String)
-], InputPhone.prototype, "placeholder", void 0);
-__decorate([
-    ListenToConfig(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", Promise)
-], InputPhone.prototype, "configChanged", null);
-let InputPhoneIds = 0;