npm - @digital-realty/ix-phone-input - Versions diffs - 2.2.9 → 2.2.11 - Mend

@digital-realty/ix-phone-input 2.2.9 → 2.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/IxPhoneInput.d.ts +1 -0
package/dist/IxPhoneInput.js +11 -0
package/dist/IxPhoneInput.js.map +1 -1
package/dist/ix-phone-input-styles.js +2 -2
package/dist/ix-phone-input-styles.js.map +1 -1
package/esmDist/ix-phone-input.js +13 -2
package/package.json +2 -2

package/dist/IxPhoneInput.d.ts CHANGED Viewed

@@ -169,6 +169,7 @@ export declare class IxPhoneInput extends LitElement {
     protected updated(changedProperties: PropertyValues): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     private handleInput;
+    private handlePaste;
     disconnectedCallback(): void;
     protected render(): import("lit-html").TemplateResult<1>;
     /** @private */

package/dist/IxPhoneInput.js CHANGED Viewed

@@ -354,6 +354,16 @@ export class IxPhoneInput extends LitElement {
         // Sync validity so that clients can check validity on input.
         this.syncValidity();
     }
+    handlePaste() {
+        // zero second time out to ensure that the input value is updated
+        setTimeout(() => {
+            var _a;
+            this.formatValue();
+            (_a = this.iti) === null || _a === void 0 ? void 0 : _a.setNumber(this.value);
+            this.syncValidity();
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        }, 0);
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.iti) === null || _a === void 0 ? void 0 : _a.destroy();
@@ -394,6 +404,7 @@ export class IxPhoneInput extends LitElement {
             aria-describedby="description"
             @input="${this.handleInput}"
             @keypress="${this.handleKeyPress}"
+            @paste="${this.handlePaste}"
           />
           <div id="description" slot="aria-describedby"></div>
         </ix-field>

package/dist/IxPhoneInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IxPhoneInput.js","sourceRoot":"","sources":["../src/IxPhoneInput.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit/no-value-attribute /\nimport '@digital-realty/ix-field/ix-field.js';\nimport { Field } from '@material/web/field/internal/field.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport {\n styles as outlinedForcedColorsStyles,\n styles as outlinedStyles,\n} from '@material/web/textfield/internal/outlined-styles.css.js';\nimport { styles as sharedStyles } from '@material/web/textfield/internal/shared-styles.css.js';\nimport intlTelInput, { Plugin } from 'intl-tel-input';\nimport { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { CONFIG } from './config.js';\nimport { IxPhoneInputStyles } from './ix-phone-input-styles.js';\n\nexport class IxPhoneInput extends LitElement {\n static {\n requestUpdateOnAriaChange(IxPhoneInput);\n }\n\n @query('input')\n readonly input!: HTMLInputElement;\n\n @query('.field') private readonly field?: Field \| null;\n\n static get styles() {\n return [\n sharedStyles,\n outlinedStyles,\n outlinedForcedColorsStyles,\n CONFIG.FLAG_SPRITES,\n IxPhoneInputStyles,\n ];\n }\n\n /* @nocollapse /\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /* @nocollapse /\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) / needed for closure /\n .attachInternals();\n\n @property()\n private readonly type = 'tel';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n Gets or sets whether or not the text field is in a visually invalid state.\n \n This error state overrides the error state controlled by\n * `reportValidity()`.\n /\n @property({ type: Boolean, reflect: true }) error = false;\n\n /\n The error message that replaces supporting text when `error` is true. If\n * `errorText` is an empty string, then the supporting text will continue to\n * show.\n \n This error message overrides the error message displayed by\n * `reportValidity()`.\n /\n @property({ attribute: 'error-text' }) errorText = '';\n\n /\n Conveys additional information below the text field, such as how it should\n * be used.\n /\n @property({ attribute: 'supporting-text' }) supportingText = '';\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n /\n Returns true when the text field has been interacted with. Native\n * validation errors only display in response to user interactions.\n /\n @state() private dirty = false;\n\n @state() private focused = false;\n\n /\n Whether or not a native error has been reported via `reportValidity()`.\n /\n @state() private nativeError = false;\n\n /\n The validation message displayed from a native error via\n * `reportValidity()`.\n /\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error \|\| this.nativeError;\n }\n\n /\n Returns the text field's validation error message.\n \n https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n /\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n /\n Returns a `ValidityState` object that represents the validity states of the\n * text field.\n \n https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n /\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n /\n Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n \n https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n /\n get willValidate() {\n this.syncValidity();\n return this.internals.willValidate;\n }\n\n /\n The associated form element with which this element's value will submit.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n The labels this element is associated with.\n /\n get labels() {\n return this.internals.labels;\n }\n\n /\n The HTML name to use in form submission.\n /\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /\n Gets or sets the direction in which selection occurred.\n /\n get selectionDirection() {\n return this.getInput().selectionDirection;\n }\n\n set selectionDirection(value: 'forward' \| 'backward' \| 'none' \| null) {\n this.getInput().selectionDirection = value;\n }\n\n /\n Gets or sets the end position or offset of a text selection.\n /\n get selectionEnd() {\n return this.getInput().selectionEnd;\n }\n\n set selectionEnd(value: number \| null) {\n this.getInput().selectionEnd = value;\n }\n\n /\n Gets or sets the starting position or offset of a text selection.\n /\n get selectionStart() {\n return this.getInput().selectionStart;\n }\n\n set selectionStart(value: number \| null) {\n this.getInput().selectionStart = value;\n }\n\n /\n Checks the text field's native validation and returns whether or not the\n * element is valid.\n \n If invalid, this method will dispatch the `invalid` event.\n \n https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n \n @return true if the text field is valid, or false if not.\n /\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n /\n Checks the text field's native validation and returns whether or not the\n * element is valid.\n \n If invalid, this method will dispatch the `invalid` event.\n \n This method will display or clear an error text message equal to the text\n * field's `validationMessage`, unless the invalid event is canceled.\n \n Use `setCustomValidity()` to customize the `validationMessage`.\n \n This method can also be used to re-announce error messages to screen\n * readers.\n \n https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n \n @return true if the text field is valid, or false if not.\n /\n reportValidity() {\n let invalidEvent: Event \| undefined;\n this.addEventListener(\n 'invalid',\n event => {\n invalidEvent = event;\n },\n { once: true }\n );\n\n const valid = this.checkValidity();\n if (invalidEvent?.defaultPrevented) {\n return valid;\n }\n\n const prevMessage = this.getErrorText();\n this.nativeError = !valid;\n this.nativeErrorText = this.validationMessage;\n\n if (prevMessage === this.getErrorText()) {\n this.field?.reannounceError();\n }\n\n return valid;\n }\n\n /\n Selects all the text in the text field.\n \n https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select\n /\n select() {\n this.input.select();\n }\n\n /\n Sets a custom validation error message for the text field. Use this for\n * custom error message.\n \n When the error is not an empty string, the text field is considered invalid\n * and `validity.customError` will be true.\n \n https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n \n @param error The error message to display.\n /\n setCustomValidity(error: string) {\n this.hasCustomValidityError = !!error;\n this.internals.setValidity({ customError: !!error }, error, this.input);\n }\n\n /\n Reset the text field to its default value.\n /\n reset() {\n this.dirty = false;\n this.value = this.getAttribute('value') ?? '';\n this.input.value = this.value;\n this.nativeError = false;\n this.nativeErrorText = '';\n }\n\n private hasCustomValidityError = false;\n\n private syncValidity() {\n // Sync the internal <input>'s validity and the host's ElementInternals\n // validity. We do this to re-use native `<input>` validation messages.\n const input = this.getInput();\n if (this.hasCustomValidityError) {\n input.setCustomValidity(this.internals.validationMessage);\n } else {\n input.setCustomValidity('');\n }\n\n this.internals.setValidity(\n input.validity,\n input.validationMessage,\n this.getInput()\n );\n }\n\n @property() label = '';\n\n @property({ type: String }) value = '';\n\n @property({ type: String }) region = '';\n\n // get geo lookup fn from props, use default fn from config or use empty callback\n @property() geoFn = CONFIG?.GEO_FN \|\| ((callback: Function) => callback(''));\n\n iti: Plugin \| undefined = undefined;\n\n private formatValue() {\n if (window.intlTelInputUtils?.numberFormat) {\n this.value =\n this.iti?.getNumber(window.intlTelInputUtils.numberFormat.E164) \|\| '';\n }\n }\n\n private handleKeyPress(e: KeyboardEvent) {\n if (/^[A-Z]$/i.test(e.key)) {\n e.preventDefault();\n return false;\n }\n this.formatValue();\n return true;\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n private handleFocusin() {\n this.focused = true;\n }\n\n private handleFocusout() {\n this.focused = false;\n }\n\n private getInput() {\n if (!this.input) {\n // If the input is not yet defined, synchronously render.\n // e.g.\n // const textField = document.createElement('md-outlined-text-field');\n // document.body.appendChild(textField);\n // textField.focus(); // synchronously render\n this.connectedCallback();\n this.scheduleUpdate();\n }\n\n if (this.isUpdatePending) {\n // If there are pending updates, synchronously perform them. This ensures\n // that constraint validation properties (like `required`) are synced\n // before interacting with input APIs that depend on them.\n this.scheduleUpdate();\n }\n\n return this.input!;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n if (!window.intlTelInputUtils) {\n window.intlTelInputGlobals.loadUtils(CONFIG.UTILS_SCRIPT);\n }\n }\n\n protected override firstUpdated() {\n this.input.addEventListener('countrychange', () => {\n this.formatValue();\n this.dispatchEvent(\n new CustomEvent('country-change', {\n bubbles: true,\n composed: true,\n })\n );\n });\n this.iti = intlTelInput(this.input, {\n initialCountry: this.region !== '' ? this.region : 'auto',\n formatOnDisplay: true,\n nationalMode: false,\n hiddenInput: 'full',\n autoPlaceholder: 'off',\n geoIpLookup: this.geoFn,\n });\n this.iti.promise.then(() => {\n // format on inititalisation\n this.formatValue();\n });\n }\n\n override attributeChangedCallback(\n attribute: string,\n oldValue: string \| null,\n newValue: string \| null\n ) {\n if (attribute === 'value' && this.dirty) {\n // After user input, changing the value attribute no longer updates the\n // text field's value (until reset). This matches native <input> behavior.\n return;\n }\n\n super.attributeChangedCallback(attribute, oldValue, newValue);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected override updated(changedProperties: PropertyValues) {\n // Keep changedProperties arg so that subclasses may call it\n\n // If a property such as `type` changes and causes the internal <input>\n // value to change without dispatching an event, re-sync it.\n const { value } = this.input;\n if (this.value !== value) {\n // Note this is typically inefficient in updated() since it schedules\n // another update. However, it is needed for the <input> to fully render\n // before checking its value.\n this.value = value;\n }\n\n this.internals.setFormValue(value);\n // Sync validity when properties change, since validation properties may\n // have changed.\n this.syncValidity();\n }\n\n protected willUpdate(changedProperties: PropertyValues<this>) {\n if (changedProperties.has('region')) {\n this.iti?.setCountry(this.region);\n }\n }\n\n private handleInput(event: InputEvent) {\n this.dirty = true;\n this.value = (event.target as HTMLInputElement).value;\n // Sync validity so that clients can check validity on input.\n this.syncValidity();\n }\n\n override disconnectedCallback() {\n this.iti?.destroy();\n }\n\n protected override render() {\n if (this.iti && this.value) {\n this.iti.setNumber(this.value);\n }\n\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.hasError,\n };\n\n const ariaLabel = this.ariaLabel \|\| this.label \|\| nothing;\n\n return html`\n <span class=\"text-field ${classMap(classes)}\">\n <ix-field\n class=\"field\"\n count=${this.value.length}\n ?disabled=${this.disabled}\n ?error=${this.hasError}\n error-text=${this.getErrorText()}\n ?focused=${this.focused}\n label=${this.label}\n ?populated=${!!this.value}\n ?required=${this.required}\n supporting-text=${this.supportingText}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n >\n <input\n name=\"${this.name}\"\n type=\"${this.type}\"\n value=\"${this.value}\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-invalid=${this.hasError}\n aria-label=${ariaLabel}\n aria-describedby=\"description\"\n @input=\"${this.handleInput}\"\n @keypress=\"${this.handleKeyPress}\"\n />\n <div id=\"description\" slot=\"aria-describedby\"></div>\n </ix-field>\n </span>\n `;\n }\n\n /* @private /\n formResetCallback() {\n this.reset();\n }\n\n /* @private */\n formStateRestoreCallback(newState: string) {\n this.value = newState;\n }\n\n override focus() {\n // Required for the case that the user slots a focusable element into the\n // leading icon slot such as an iconbutton due to how delegatesFocus works.\n this.getInput().focus();\n }\n}\n"]}
1	+ {"version":3,"file":"IxPhoneInput.js","sourceRoot":"","sources":["../src/IxPhoneInput.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit/no-value-attribute /\nimport '@digital-realty/ix-field/ix-field.js';\nimport { Field } from '@material/web/field/internal/field.js';\nimport { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';\nimport {\n styles as outlinedForcedColorsStyles,\n styles as outlinedStyles,\n} from '@material/web/textfield/internal/outlined-styles.css.js';\nimport { styles as sharedStyles } from '@material/web/textfield/internal/shared-styles.css.js';\nimport intlTelInput, { Plugin } from 'intl-tel-input';\nimport { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { CONFIG } from './config.js';\nimport { IxPhoneInputStyles } from './ix-phone-input-styles.js';\n\nexport class IxPhoneInput extends LitElement {\n static {\n requestUpdateOnAriaChange(IxPhoneInput);\n }\n\n @query('input')\n readonly input!: HTMLInputElement;\n\n @query('.field') private readonly field?: Field \| null;\n\n static get styles() {\n return [\n sharedStyles,\n outlinedStyles,\n outlinedForcedColorsStyles,\n CONFIG.FLAG_SPRITES,\n IxPhoneInputStyles,\n ];\n }\n\n /* @nocollapse /\n static override shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /* @nocollapse /\n static readonly formAssociated = true;\n\n private readonly internals = (this as HTMLElement) / needed for closure /\n .attachInternals();\n\n @property()\n private readonly type = 'tel';\n\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /\n Gets or sets whether or not the text field is in a visually invalid state.\n \n This error state overrides the error state controlled by\n * `reportValidity()`.\n /\n @property({ type: Boolean, reflect: true }) error = false;\n\n /\n The error message that replaces supporting text when `error` is true. If\n * `errorText` is an empty string, then the supporting text will continue to\n * show.\n \n This error message overrides the error message displayed by\n * `reportValidity()`.\n /\n @property({ attribute: 'error-text' }) errorText = '';\n\n /\n Conveys additional information below the text field, such as how it should\n * be used.\n /\n @property({ attribute: 'supporting-text' }) supportingText = '';\n\n @property({ type: Boolean, reflect: true }) required = false;\n\n /\n Returns true when the text field has been interacted with. Native\n * validation errors only display in response to user interactions.\n /\n @state() private dirty = false;\n\n @state() private focused = false;\n\n /\n Whether or not a native error has been reported via `reportValidity()`.\n /\n @state() private nativeError = false;\n\n /\n The validation message displayed from a native error via\n * `reportValidity()`.\n /\n @state() private nativeErrorText = '';\n\n private get hasError() {\n return this.error \|\| this.nativeError;\n }\n\n /\n Returns the text field's validation error message.\n \n https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation\n /\n get validationMessage() {\n this.syncValidity();\n return this.internals.validationMessage;\n }\n\n /\n Returns a `ValidityState` object that represents the validity states of the\n * text field.\n \n https://developer.mozilla.org/en-US/docs/Web/API/ValidityState\n /\n get validity() {\n this.syncValidity();\n return this.internals.validity;\n }\n\n /\n Returns whether an element will successfully validate based on forms\n * validation rules and constraints.\n \n https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/willValidate\n /\n get willValidate() {\n this.syncValidity();\n return this.internals.willValidate;\n }\n\n /\n The associated form element with which this element's value will submit.\n /\n get form() {\n return this.internals.form;\n }\n\n /\n The labels this element is associated with.\n /\n get labels() {\n return this.internals.labels;\n }\n\n /\n The HTML name to use in form submission.\n /\n get name() {\n return this.getAttribute('name') ?? '';\n }\n\n set name(name: string) {\n this.setAttribute('name', name);\n }\n\n /\n Gets or sets the direction in which selection occurred.\n /\n get selectionDirection() {\n return this.getInput().selectionDirection;\n }\n\n set selectionDirection(value: 'forward' \| 'backward' \| 'none' \| null) {\n this.getInput().selectionDirection = value;\n }\n\n /\n Gets or sets the end position or offset of a text selection.\n /\n get selectionEnd() {\n return this.getInput().selectionEnd;\n }\n\n set selectionEnd(value: number \| null) {\n this.getInput().selectionEnd = value;\n }\n\n /\n Gets or sets the starting position or offset of a text selection.\n /\n get selectionStart() {\n return this.getInput().selectionStart;\n }\n\n set selectionStart(value: number \| null) {\n this.getInput().selectionStart = value;\n }\n\n /\n Checks the text field's native validation and returns whether or not the\n * element is valid.\n \n If invalid, this method will dispatch the `invalid` event.\n \n https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity\n \n @return true if the text field is valid, or false if not.\n /\n checkValidity() {\n this.syncValidity();\n return this.internals.checkValidity();\n }\n\n /\n Checks the text field's native validation and returns whether or not the\n * element is valid.\n \n If invalid, this method will dispatch the `invalid` event.\n \n This method will display or clear an error text message equal to the text\n * field's `validationMessage`, unless the invalid event is canceled.\n \n Use `setCustomValidity()` to customize the `validationMessage`.\n \n This method can also be used to re-announce error messages to screen\n * readers.\n \n https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity\n \n @return true if the text field is valid, or false if not.\n /\n reportValidity() {\n let invalidEvent: Event \| undefined;\n this.addEventListener(\n 'invalid',\n event => {\n invalidEvent = event;\n },\n { once: true }\n );\n\n const valid = this.checkValidity();\n if (invalidEvent?.defaultPrevented) {\n return valid;\n }\n\n const prevMessage = this.getErrorText();\n this.nativeError = !valid;\n this.nativeErrorText = this.validationMessage;\n\n if (prevMessage === this.getErrorText()) {\n this.field?.reannounceError();\n }\n\n return valid;\n }\n\n /\n Selects all the text in the text field.\n \n https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select\n /\n select() {\n this.input.select();\n }\n\n /\n Sets a custom validation error message for the text field. Use this for\n * custom error message.\n \n When the error is not an empty string, the text field is considered invalid\n * and `validity.customError` will be true.\n \n https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity\n \n @param error The error message to display.\n /\n setCustomValidity(error: string) {\n this.hasCustomValidityError = !!error;\n this.internals.setValidity({ customError: !!error }, error, this.input);\n }\n\n /\n Reset the text field to its default value.\n /\n reset() {\n this.dirty = false;\n this.value = this.getAttribute('value') ?? '';\n this.input.value = this.value;\n this.nativeError = false;\n this.nativeErrorText = '';\n }\n\n private hasCustomValidityError = false;\n\n private syncValidity() {\n // Sync the internal <input>'s validity and the host's ElementInternals\n // validity. We do this to re-use native `<input>` validation messages.\n const input = this.getInput();\n if (this.hasCustomValidityError) {\n input.setCustomValidity(this.internals.validationMessage);\n } else {\n input.setCustomValidity('');\n }\n\n this.internals.setValidity(\n input.validity,\n input.validationMessage,\n this.getInput()\n );\n }\n\n @property() label = '';\n\n @property({ type: String }) value = '';\n\n @property({ type: String }) region = '';\n\n // get geo lookup fn from props, use default fn from config or use empty callback\n @property() geoFn = CONFIG?.GEO_FN \|\| ((callback: Function) => callback(''));\n\n iti: Plugin \| undefined = undefined;\n\n private formatValue() {\n if (window.intlTelInputUtils?.numberFormat) {\n this.value =\n this.iti?.getNumber(window.intlTelInputUtils.numberFormat.E164) \|\| '';\n }\n }\n\n private handleKeyPress(e: KeyboardEvent) {\n if (/^[A-Z]$/i.test(e.key)) {\n e.preventDefault();\n return false;\n }\n this.formatValue();\n return true;\n }\n\n private getErrorText() {\n return this.error ? this.errorText : this.nativeErrorText;\n }\n\n private handleFocusin() {\n this.focused = true;\n }\n\n private handleFocusout() {\n this.focused = false;\n }\n\n private getInput() {\n if (!this.input) {\n // If the input is not yet defined, synchronously render.\n // e.g.\n // const textField = document.createElement('md-outlined-text-field');\n // document.body.appendChild(textField);\n // textField.focus(); // synchronously render\n this.connectedCallback();\n this.scheduleUpdate();\n }\n\n if (this.isUpdatePending) {\n // If there are pending updates, synchronously perform them. This ensures\n // that constraint validation properties (like `required`) are synced\n // before interacting with input APIs that depend on them.\n this.scheduleUpdate();\n }\n\n return this.input!;\n }\n\n override connectedCallback() {\n super.connectedCallback();\n if (!window.intlTelInputUtils) {\n window.intlTelInputGlobals.loadUtils(CONFIG.UTILS_SCRIPT);\n }\n }\n\n protected override firstUpdated() {\n this.input.addEventListener('countrychange', () => {\n this.formatValue();\n this.dispatchEvent(\n new CustomEvent('country-change', {\n bubbles: true,\n composed: true,\n })\n );\n });\n this.iti = intlTelInput(this.input, {\n initialCountry: this.region !== '' ? this.region : 'auto',\n formatOnDisplay: true,\n nationalMode: false,\n hiddenInput: 'full',\n autoPlaceholder: 'off',\n geoIpLookup: this.geoFn,\n });\n this.iti.promise.then(() => {\n // format on inititalisation\n this.formatValue();\n });\n }\n\n override attributeChangedCallback(\n attribute: string,\n oldValue: string \| null,\n newValue: string \| null\n ) {\n if (attribute === 'value' && this.dirty) {\n // After user input, changing the value attribute no longer updates the\n // text field's value (until reset). This matches native <input> behavior.\n return;\n }\n\n super.attributeChangedCallback(attribute, oldValue, newValue);\n }\n\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n protected override updated(changedProperties: PropertyValues) {\n // Keep changedProperties arg so that subclasses may call it\n\n // If a property such as `type` changes and causes the internal <input>\n // value to change without dispatching an event, re-sync it.\n const { value } = this.input;\n if (this.value !== value) {\n // Note this is typically inefficient in updated() since it schedules\n // another update. However, it is needed for the <input> to fully render\n // before checking its value.\n this.value = value;\n }\n\n this.internals.setFormValue(value);\n // Sync validity when properties change, since validation properties may\n // have changed.\n this.syncValidity();\n }\n\n protected willUpdate(changedProperties: PropertyValues<this>) {\n if (changedProperties.has('region')) {\n this.iti?.setCountry(this.region);\n }\n }\n\n private handleInput(event: InputEvent) {\n this.dirty = true;\n this.value = (event.target as HTMLInputElement).value;\n // Sync validity so that clients can check validity on input.\n this.syncValidity();\n }\n\n private handlePaste() {\n // zero second time out to ensure that the input value is updated\n setTimeout(() => {\n this.formatValue();\n this.iti?.setNumber(this.value);\n this.syncValidity();\n this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n }, 0);\n }\n\n override disconnectedCallback() {\n this.iti?.destroy();\n }\n\n protected override render() {\n if (this.iti && this.value) {\n this.iti.setNumber(this.value);\n }\n\n const classes = {\n disabled: this.disabled,\n error: !this.disabled && this.hasError,\n };\n\n const ariaLabel = this.ariaLabel \|\| this.label \|\| nothing;\n\n return html`\n <span class=\"text-field ${classMap(classes)}\">\n <ix-field\n class=\"field\"\n count=${this.value.length}\n ?disabled=${this.disabled}\n ?error=${this.hasError}\n error-text=${this.getErrorText()}\n ?focused=${this.focused}\n label=${this.label}\n ?populated=${!!this.value}\n ?required=${this.required}\n supporting-text=${this.supportingText}\n @focusin=${this.handleFocusin}\n @focusout=${this.handleFocusout}\n >\n <input\n name=\"${this.name}\"\n type=\"${this.type}\"\n value=\"${this.value}\"\n ?disabled=${this.disabled}\n ?required=${this.required}\n aria-invalid=${this.hasError}\n aria-label=${ariaLabel}\n aria-describedby=\"description\"\n @input=\"${this.handleInput}\"\n @keypress=\"${this.handleKeyPress}\"\n @paste=\"${this.handlePaste}\"\n />\n <div id=\"description\" slot=\"aria-describedby\"></div>\n </ix-field>\n </span>\n `;\n }\n\n /* @private /\n formResetCallback() {\n this.reset();\n }\n\n /* @private */\n formStateRestoreCallback(newState: string) {\n this.value = newState;\n }\n\n override focus() {\n // Required for the case that the user slots a focusable element into the\n // leading icon slot such as an iconbutton due to how delegatesFocus works.\n this.getInput().focus();\n }\n}\n"]}

package/dist/ix-phone-input-styles.js CHANGED Viewed

@@ -30,8 +30,8 @@ export const IxPhoneInputStyles = css `
     padding-left: 4rem;
     padding-right: 36px;
     margin-right: 0;
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     width: 100%;
     border: none;
     outline: none;

package/dist/ix-phone-input-styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ix-phone-input-styles.js","sourceRoot":"","sources":["../src/ix-phone-input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4xCpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxPhoneInputStyles = css`\n :host([hidden]) {\n display: none;\n }\n\n .iti {\n position: relative;\n display: block;\n padding: 0;\n }\n .iti * {\n box-sizing: border-box;\n padding: 0;\n }\n .iti__hide {\n display: none;\n }\n .iti__v-hide {\n visibility: hidden;\n }\n .iti input,\n .iti input[type='text'],\n .iti input[type='tel'] {\n color: var(--ix-phone-input-color, var(--clr-on-surface, #000));\n position: relative;\n z-index: 0;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n padding-left: 4rem;\n padding-right: 36px;\n margin-right: 0;\n padding-top: 12px;\n padding-bottom: 12px;\n width: 100%;\n border: none;\n outline: none;\n line-height: 24px;\n font-size: 16px;\n }\n .iti__flag-container {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n padding: 1px;\n }\n .iti__selected-flag {\n z-index: 1;\n position: relative;\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 6px 0 8px;\n }\n .iti__arrow {\n margin-left: 6px;\n width: 0;\n height: 0;\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n border-top: 4px solid\n var(--ix-phone-arrow-color, var(--clr-graphics-fill, #555));\n }\n [dir='rtl'] .iti__arrow {\n margin-right: 6px;\n margin-left: 0;\n }\n .iti__arrow--up {\n border-top: none;\n border-bottom: 4px solid\n var(--ix-phone-arrow-color, var(--clr-graphics-fill, #555));\n }\n .iti__country-list {\n position: absolute;\n z-index: 2;\n list-style: none;\n padding: 0;\n margin: 0 0 0 -1px;\n box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);\n background-color: var(--clr-on-primary, white);\n border: 1px solid var(--clr-outline, #ccc);\n white-space: nowrap;\n max-height: 200px;\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n }\n .iti__country-list--dropup {\n bottom: 100%;\n margin-bottom: -1px;\n }\n @media (max-width: 500px) {\n .iti__country-list {\n white-space: normal;\n }\n }\n .iti__flag-box {\n display: inline-block;\n width: 20px;\n }\n .iti__divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid\n var(--ix-phone-divider-color, var(--clr-outline, #ccc));\n }\n .iti__country {\n display: flex;\n align-items: center;\n padding: 5px 10px;\n outline: none;\n }\n .iti__dial-code {\n color: var(--ix-phone-dial-code-color, var(--clr-on-surface-variant, #999));\n }\n .iti__country.iti__highlight {\n background-color: rgba(0, 0, 0, 0.05);\n }\n .iti__flag-box,\n .iti__country-name {\n margin-right: 6px;\n }\n [dir='rtl'] .iti__flag-box,\n [dir='rtl'] .iti__country-name {\n margin-right: 0;\n margin-left: 6px;\n }\n .iti--allow-dropdown input,\n .iti--allow-dropdown input[type='text'],\n .iti--allow-dropdown input[type='tel'],\n .iti--separate-dial-code input,\n .iti--separate-dial-code input[type='text'],\n .iti--separate-dial-code input[type='tel'] {\n padding-right: 6px;\n padding-left: 4pem;\n margin-left: 0;\n }\n [dir='rtl'] .iti--allow-dropdown input,\n [dir='rtl'] .iti--allow-dropdown input[type='text'],\n [dir='rtl'] .iti--allow-dropdown input[type='tel'],\n [dir='rtl'] .iti--separate-dial-code input,\n [dir='rtl'] .iti--separate-dial-code input[type='text'],\n [dir='rtl'] .iti--separate-dial-code input[type='tel'] {\n padding-right: 52px;\n padding-left: 6px;\n margin-right: 0;\n }\n .iti--allow-dropdown .iti__flag-container,\n .iti--separate-dial-code .iti__flag-container {\n right: auto;\n left: 0.75rem;\n }\n [dir='rtl'] .iti--allow-dropdown .iti__flag-container,\n [dir='rtl'] .iti--separate-dial-code .iti__flag-container {\n right: 0;\n left: auto;\n }\n .iti--allow-dropdown .iti__flag-container:hover {\n cursor: pointer;\n }\n .iti--allow-dropdown input[disabled] + .iti__flag-container:hover,\n .iti--allow-dropdown input[readonly] + .iti__flag-container:hover {\n cursor: default;\n }\n .iti--allow-dropdown\n input[disabled]\n + .iti__flag-container:hover\n .iti__selected-flag,\n .iti--allow-dropdown\n input[readonly]\n + .iti__flag-container:hover\n .iti__selected-flag {\n background-color: transparent;\n }\n .iti--separate-dial-code .iti__selected-flag {\n background-color: rgba(0, 0, 0, 0.05);\n }\n .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {\n margin-left: 6px;\n }\n [dir='rtl']\n .iti--separate-dial-code.iti--show-flags\n .iti__selected-dial-code {\n margin-left: 0;\n margin-right: 6px;\n }\n .iti--container {\n position: absolute;\n top: -1000px;\n left: -1000px;\n z-index: 1060;\n padding: 1px;\n }\n .iti--container:hover {\n cursor: pointer;\n }\n\n .iti-mobile .iti--container {\n top: 30px;\n bottom: 30px;\n left: 30px;\n right: 30px;\n position: fixed;\n }\n .iti-mobile .iti__country-list {\n max-height: 100%;\n width: 100%;\n }\n .iti-mobile .iti__country {\n padding: 10px 10px;\n line-height: 1.5em;\n }\n\n .iti__flag {\n width: 20px;\n }\n .iti__flag.iti__be {\n width: 18px;\n }\n .iti__flag.iti__ch {\n width: 15px;\n }\n .iti__flag.iti__mc {\n width: 19px;\n }\n .iti__flag.iti__ne {\n width: 18px;\n }\n .iti__flag.iti__np {\n width: 13px;\n }\n .iti__flag.iti__va {\n width: 15px;\n }\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n .iti__flag {\n background-size: 5762px 15px;\n }\n }\n .iti__flag.iti__ac {\n height: 10px;\n background-position: 0px 0px;\n }\n .iti__flag.iti__ad {\n height: 14px;\n background-position: -22px 0px;\n }\n .iti__flag.iti__ae {\n height: 10px;\n background-position: -44px 0px;\n }\n .iti__flag.iti__af {\n height: 14px;\n background-position: -66px 0px;\n }\n .iti__flag.iti__ag {\n height: 14px;\n background-position: -88px 0px;\n }\n .iti__flag.iti__ai {\n height: 10px;\n background-position: -110px 0px;\n }\n .iti__flag.iti__al {\n height: 15px;\n background-position: -132px 0px;\n }\n .iti__flag.iti__am {\n height: 10px;\n background-position: -154px 0px;\n }\n .iti__flag.iti__ao {\n height: 14px;\n background-position: -176px 0px;\n }\n .iti__flag.iti__aq {\n height: 14px;\n background-position: -198px 0px;\n }\n .iti__flag.iti__ar {\n height: 13px;\n background-position: -220px 0px;\n }\n .iti__flag.iti__as {\n height: 10px;\n background-position: -242px 0px;\n }\n .iti__flag.iti__at {\n height: 14px;\n background-position: -264px 0px;\n }\n .iti__flag.iti__au {\n height: 10px;\n background-position: -286px 0px;\n }\n .iti__flag.iti__aw {\n height: 14px;\n background-position: -308px 0px;\n }\n .iti__flag.iti__ax {\n height: 13px;\n background-position: -330px 0px;\n }\n .iti__flag.iti__az {\n height: 10px;\n background-position: -352px 0px;\n }\n .iti__flag.iti__ba {\n height: 10px;\n background-position: -374px 0px;\n }\n .iti__flag.iti__bb {\n height: 14px;\n background-position: -396px 0px;\n }\n .iti__flag.iti__bd {\n height: 12px;\n background-position: -418px 0px;\n }\n .iti__flag.iti__be {\n height: 15px;\n background-position: -440px 0px;\n }\n .iti__flag.iti__bf {\n height: 14px;\n background-position: -460px 0px;\n }\n .iti__flag.iti__bg {\n height: 12px;\n background-position: -482px 0px;\n }\n .iti__flag.iti__bh {\n height: 12px;\n background-position: -504px 0px;\n }\n .iti__flag.iti__bi {\n height: 12px;\n background-position: -526px 0px;\n }\n .iti__flag.iti__bj {\n height: 14px;\n background-position: -548px 0px;\n }\n .iti__flag.iti__bl {\n height: 14px;\n background-position: -570px 0px;\n }\n .iti__flag.iti__bm {\n height: 10px;\n background-position: -592px 0px;\n }\n .iti__flag.iti__bn {\n height: 10px;\n background-position: -614px 0px;\n }\n .iti__flag.iti__bo {\n height: 14px;\n background-position: -636px 0px;\n }\n .iti__flag.iti__bq {\n height: 14px;\n background-position: -658px 0px;\n }\n .iti__flag.iti__br {\n height: 14px;\n background-position: -680px 0px;\n }\n .iti__flag.iti__bs {\n height: 10px;\n background-position: -702px 0px;\n }\n .iti__flag.iti__bt {\n height: 14px;\n background-position: -724px 0px;\n }\n .iti__flag.iti__bv {\n height: 15px;\n background-position: -746px 0px;\n }\n .iti__flag.iti__bw {\n height: 14px;\n background-position: -768px 0px;\n }\n .iti__flag.iti__by {\n height: 10px;\n background-position: -790px 0px;\n }\n .iti__flag.iti__bz {\n height: 12px;\n background-position: -812px 0px;\n }\n .iti__flag.iti__ca {\n height: 10px;\n background-position: -834px 0px;\n }\n .iti__flag.iti__cc {\n height: 10px;\n background-position: -856px 0px;\n }\n .iti__flag.iti__cd {\n height: 15px;\n background-position: -878px 0px;\n }\n .iti__flag.iti__cf {\n height: 14px;\n background-position: -900px 0px;\n }\n .iti__flag.iti__cg {\n height: 14px;\n background-position: -922px 0px;\n }\n .iti__flag.iti__ch {\n height: 15px;\n background-position: -944px 0px;\n }\n .iti__flag.iti__ci {\n height: 14px;\n background-position: -961px 0px;\n }\n .iti__flag.iti__ck {\n height: 10px;\n background-position: -983px 0px;\n }\n .iti__flag.iti__cl {\n height: 14px;\n background-position: -1005px 0px;\n }\n .iti__flag.iti__cm {\n height: 14px;\n background-position: -1027px 0px;\n }\n .iti__flag.iti__cn {\n height: 14px;\n background-position: -1049px 0px;\n }\n .iti__flag.iti__co {\n height: 14px;\n background-position: -1071px 0px;\n }\n .iti__flag.iti__cp {\n height: 14px;\n background-position: -1093px 0px;\n }\n .iti__flag.iti__cq {\n height: 12px;\n background-position: -1115px 0px;\n }\n .iti__flag.iti__cr {\n height: 12px;\n background-position: -1137px 0px;\n }\n .iti__flag.iti__cu {\n height: 10px;\n background-position: -1159px 0px;\n }\n .iti__flag.iti__cv {\n height: 12px;\n background-position: -1181px 0px;\n }\n .iti__flag.iti__cw {\n height: 14px;\n background-position: -1203px 0px;\n }\n .iti__flag.iti__cx {\n height: 10px;\n background-position: -1225px 0px;\n }\n .iti__flag.iti__cy {\n height: 14px;\n background-position: -1247px 0px;\n }\n .iti__flag.iti__cz {\n height: 14px;\n background-position: -1269px 0px;\n }\n .iti__flag.iti__de {\n height: 12px;\n background-position: -1291px 0px;\n }\n .iti__flag.iti__dg {\n height: 10px;\n background-position: -1313px 0px;\n }\n .iti__flag.iti__dj {\n height: 14px;\n background-position: -1335px 0px;\n }\n .iti__flag.iti__dk {\n height: 15px;\n background-position: -1357px 0px;\n }\n .iti__flag.iti__dm {\n height: 10px;\n background-position: -1379px 0px;\n }\n .iti__flag.iti__do {\n height: 14px;\n background-position: -1401px 0px;\n }\n .iti__flag.iti__dz {\n height: 14px;\n background-position: -1423px 0px;\n }\n .iti__flag.iti__ea {\n height: 14px;\n background-position: -1445px 0px;\n }\n .iti__flag.iti__ec {\n height: 14px;\n background-position: -1467px 0px;\n }\n .iti__flag.iti__ee {\n height: 13px;\n background-position: -1489px 0px;\n }\n .iti__flag.iti__eg {\n height: 14px;\n background-position: -1511px 0px;\n }\n .iti__flag.iti__eh {\n height: 10px;\n background-position: -1533px 0px;\n }\n .iti__flag.iti__er {\n height: 10px;\n background-position: -1555px 0px;\n }\n .iti__flag.iti__es {\n height: 14px;\n background-position: -1577px 0px;\n }\n .iti__flag.iti__et {\n height: 10px;\n background-position: -1599px 0px;\n }\n .iti__flag.iti__eu {\n height: 14px;\n background-position: -1621px 0px;\n }\n .iti__flag.iti__ez {\n height: 14px;\n background-position: -1643px 0px;\n }\n .iti__flag.iti__fi {\n height: 12px;\n background-position: -1665px 0px;\n }\n .iti__flag.iti__fj {\n height: 10px;\n background-position: -1687px 0px;\n }\n .iti__flag.iti__fk {\n height: 10px;\n background-position: -1709px 0px;\n }\n .iti__flag.iti__fm {\n height: 11px;\n background-position: -1731px 0px;\n }\n .iti__flag.iti__fo {\n height: 15px;\n background-position: -1753px 0px;\n }\n .iti__flag.iti__fr {\n height: 14px;\n background-position: -1775px 0px;\n }\n .iti__flag.iti__fx {\n height: 14px;\n background-position: -1797px 0px;\n }\n .iti__flag.iti__ga {\n height: 15px;\n background-position: -1819px 0px;\n }\n .iti__flag.iti__gb {\n height: 10px;\n background-position: -1841px 0px;\n }\n .iti__flag.iti__gd {\n height: 12px;\n background-position: -1863px 0px;\n }\n .iti__flag.iti__ge {\n height: 14px;\n background-position: -1885px 0px;\n }\n .iti__flag.iti__gf {\n height: 14px;\n background-position: -1907px 0px;\n }\n .iti__flag.iti__gg {\n height: 14px;\n background-position: -1929px 0px;\n }\n .iti__flag.iti__gh {\n height: 14px;\n background-position: -1951px 0px;\n }\n .iti__flag.iti__gi {\n height: 10px;\n background-position: -1973px 0px;\n }\n .iti__flag.iti__gl {\n height: 14px;\n background-position: -1995px 0px;\n }\n .iti__flag.iti__gm {\n height: 14px;\n background-position: -2017px 0px;\n }\n .iti__flag.iti__gn {\n height: 14px;\n background-position: -2039px 0px;\n }\n .iti__flag.iti__gp {\n height: 14px;\n background-position: -2061px 0px;\n }\n .iti__flag.iti__gq {\n height: 14px;\n background-position: -2083px 0px;\n }\n .iti__flag.iti__gr {\n height: 14px;\n background-position: -2105px 0px;\n }\n .iti__flag.iti__gs {\n height: 10px;\n background-position: -2127px 0px;\n }\n .iti__flag.iti__gt {\n height: 13px;\n background-position: -2149px 0px;\n }\n .iti__flag.iti__gu {\n height: 11px;\n background-position: -2171px 0px;\n }\n .iti__flag.iti__gw {\n height: 10px;\n background-position: -2193px 0px;\n }\n .iti__flag.iti__gy {\n height: 12px;\n background-position: -2215px 0px;\n }\n .iti__flag.iti__hk {\n height: 14px;\n background-position: -2237px 0px;\n }\n .iti__flag.iti__hm {\n height: 10px;\n background-position: -2259px 0px;\n }\n .iti__flag.iti__hn {\n height: 10px;\n background-position: -2281px 0px;\n }\n .iti__flag.iti__hr {\n height: 10px;\n background-position: -2303px 0px;\n }\n .iti__flag.iti__ht {\n height: 12px;\n background-position: -2325px 0px;\n }\n .iti__flag.iti__hu {\n height: 10px;\n background-position: -2347px 0px;\n }\n .iti__flag.iti__ic {\n height: 14px;\n background-position: -2369px 0px;\n }\n .iti__flag.iti__id {\n height: 14px;\n background-position: -2391px 0px;\n }\n .iti__flag.iti__ie {\n height: 10px;\n background-position: -2413px 0px;\n }\n .iti__flag.iti__il {\n height: 15px;\n background-position: -2435px 0px;\n }\n .iti__flag.iti__im {\n height: 10px;\n background-position: -2457px 0px;\n }\n .iti__flag.iti__in {\n height: 14px;\n background-position: -2479px 0px;\n }\n .iti__flag.iti__io {\n height: 10px;\n background-position: -2501px 0px;\n }\n .iti__flag.iti__iq {\n height: 14px;\n background-position: -2523px 0px;\n }\n .iti__flag.iti__ir {\n height: 12px;\n background-position: -2545px 0px;\n }\n .iti__flag.iti__is {\n height: 15px;\n background-position: -2567px 0px;\n }\n .iti__flag.iti__it {\n height: 14px;\n background-position: -2589px 0px;\n }\n .iti__flag.iti__je {\n height: 12px;\n background-position: -2611px 0px;\n }\n .iti__flag.iti__jm {\n height: 10px;\n background-position: -2633px 0px;\n }\n .iti__flag.iti__jo {\n height: 10px;\n background-position: -2655px 0px;\n }\n .iti__flag.iti__jp {\n height: 14px;\n background-position: -2677px 0px;\n }\n .iti__flag.iti__ke {\n height: 14px;\n background-position: -2699px 0px;\n }\n .iti__flag.iti__kg {\n height: 12px;\n background-position: -2721px 0px;\n }\n .iti__flag.iti__kh {\n height: 13px;\n background-position: -2743px 0px;\n }\n .iti__flag.iti__ki {\n height: 10px;\n background-position: -2765px 0px;\n }\n .iti__flag.iti__km {\n height: 12px;\n background-position: -2787px 0px;\n }\n .iti__flag.iti__kn {\n height: 14px;\n background-position: -2809px 0px;\n }\n .iti__flag.iti__kp {\n height: 10px;\n background-position: -2831px 0px;\n }\n .iti__flag.iti__kr {\n height: 14px;\n background-position: -2853px 0px;\n }\n .iti__flag.iti__kw {\n height: 10px;\n background-position: -2875px 0px;\n }\n .iti__flag.iti__ky {\n height: 10px;\n background-position: -2897px 0px;\n }\n .iti__flag.iti__kz {\n height: 10px;\n background-position: -2919px 0px;\n }\n .iti__flag.iti__la {\n height: 14px;\n background-position: -2941px 0px;\n }\n .iti__flag.iti__lb {\n height: 14px;\n background-position: -2963px 0px;\n }\n .iti__flag.iti__lc {\n height: 10px;\n background-position: -2985px 0px;\n }\n .iti__flag.iti__li {\n height: 12px;\n background-position: -3007px 0px;\n }\n .iti__flag.iti__lk {\n height: 10px;\n background-position: -3029px 0px;\n }\n .iti__flag.iti__lr {\n height: 11px;\n background-position: -3051px 0px;\n }\n .iti__flag.iti__ls {\n height: 14px;\n background-position: -3073px 0px;\n }\n .iti__flag.iti__lt {\n height: 12px;\n background-position: -3095px 0px;\n }\n .iti__flag.iti__lu {\n height: 12px;\n background-position: -3117px 0px;\n }\n .iti__flag.iti__lv {\n height: 10px;\n background-position: -3139px 0px;\n }\n .iti__flag.iti__ly {\n height: 10px;\n background-position: -3161px 0px;\n }\n .iti__flag.iti__ma {\n height: 14px;\n background-position: -3183px 0px;\n }\n .iti__flag.iti__mc {\n height: 15px;\n background-position: -3205px 0px;\n }\n .iti__flag.iti__md {\n height: 10px;\n background-position: -3226px 0px;\n }\n .iti__flag.iti__me {\n height: 10px;\n background-position: -3248px 0px;\n }\n .iti__flag.iti__mf {\n height: 14px;\n background-position: -3270px 0px;\n }\n .iti__flag.iti__mg {\n height: 14px;\n background-position: -3292px 0px;\n }\n .iti__flag.iti__mh {\n height: 11px;\n background-position: -3314px 0px;\n }\n .iti__flag.iti__mk {\n height: 10px;\n background-position: -3336px 0px;\n }\n .iti__flag.iti__ml {\n height: 14px;\n background-position: -3358px 0px;\n }\n .iti__flag.iti__mm {\n height: 14px;\n background-position: -3380px 0px;\n }\n .iti__flag.iti__mn {\n height: 10px;\n background-position: -3402px 0px;\n }\n .iti__flag.iti__mo {\n height: 14px;\n background-position: -3424px 0px;\n }\n .iti__flag.iti__mp {\n height: 10px;\n background-position: -3446px 0px;\n }\n .iti__flag.iti__mq {\n height: 14px;\n background-position: -3468px 0px;\n }\n .iti__flag.iti__mr {\n height: 14px;\n background-position: -3490px 0px;\n }\n .iti__flag.iti__ms {\n height: 10px;\n background-position: -3512px 0px;\n }\n .iti__flag.iti__mt {\n height: 14px;\n background-position: -3534px 0px;\n }\n .iti__flag.iti__mu {\n height: 14px;\n background-position: -3556px 0px;\n }\n .iti__flag.iti__mv {\n height: 14px;\n background-position: -3578px 0px;\n }\n .iti__flag.iti__mw {\n height: 14px;\n background-position: -3600px 0px;\n }\n .iti__flag.iti__mx {\n height: 12px;\n background-position: -3622px 0px;\n }\n .iti__flag.iti__my {\n height: 10px;\n background-position: -3644px 0px;\n }\n .iti__flag.iti__mz {\n height: 14px;\n background-position: -3666px 0px;\n }\n .iti__flag.iti__na {\n height: 14px;\n background-position: -3688px 0px;\n }\n .iti__flag.iti__nc {\n height: 10px;\n background-position: -3710px 0px;\n }\n .iti__flag.iti__ne {\n height: 15px;\n background-position: -3732px 0px;\n }\n .iti__flag.iti__nf {\n height: 10px;\n background-position: -3752px 0px;\n }\n .iti__flag.iti__ng {\n height: 10px;\n background-position: -3774px 0px;\n }\n .iti__flag.iti__ni {\n height: 12px;\n background-position: -3796px 0px;\n }\n .iti__flag.iti__nl {\n height: 14px;\n background-position: -3818px 0px;\n }\n .iti__flag.iti__no {\n height: 15px;\n background-position: -3840px 0px;\n }\n .iti__flag.iti__np {\n height: 15px;\n background-position: -3862px 0px;\n }\n .iti__flag.iti__nr {\n height: 10px;\n background-position: -3877px 0px;\n }\n .iti__flag.iti__nu {\n height: 10px;\n background-position: -3899px 0px;\n }\n .iti__flag.iti__nz {\n height: 10px;\n background-position: -3921px 0px;\n }\n .iti__flag.iti__om {\n height: 10px;\n background-position: -3943px 0px;\n }\n .iti__flag.iti__pa {\n height: 14px;\n background-position: -3965px 0px;\n }\n .iti__flag.iti__pe {\n height: 14px;\n background-position: -3987px 0px;\n }\n .iti__flag.iti__pf {\n height: 14px;\n background-position: -4009px 0px;\n }\n .iti__flag.iti__pg {\n height: 15px;\n background-position: -4031px 0px;\n }\n .iti__flag.iti__ph {\n height: 10px;\n background-position: -4053px 0px;\n }\n .iti__flag.iti__pk {\n height: 14px;\n background-position: -4075px 0px;\n }\n .iti__flag.iti__pl {\n height: 13px;\n background-position: -4097px 0px;\n }\n .iti__flag.iti__pm {\n height: 14px;\n background-position: -4119px 0px;\n }\n .iti__flag.iti__pn {\n height: 10px;\n background-position: -4141px 0px;\n }\n .iti__flag.iti__pr {\n height: 14px;\n background-position: -4163px 0px;\n }\n .iti__flag.iti__ps {\n height: 10px;\n background-position: -4185px 0px;\n }\n .iti__flag.iti__pt {\n height: 14px;\n background-position: -4207px 0px;\n }\n .iti__flag.iti__pw {\n height: 13px;\n background-position: -4229px 0px;\n }\n .iti__flag.iti__py {\n height: 11px;\n background-position: -4251px 0px;\n }\n .iti__flag.iti__qa {\n height: 8px;\n background-position: -4273px 0px;\n }\n .iti__flag.iti__re {\n height: 14px;\n background-position: -4295px 0px;\n }\n .iti__flag.iti__ro {\n height: 14px;\n background-position: -4317px 0px;\n }\n .iti__flag.iti__rs {\n height: 14px;\n background-position: -4339px 0px;\n }\n .iti__flag.iti__ru {\n height: 14px;\n background-position: -4361px 0px;\n }\n .iti__flag.iti__rw {\n height: 14px;\n background-position: -4383px 0px;\n }\n .iti__flag.iti__sa {\n height: 14px;\n background-position: -4405px 0px;\n }\n .iti__flag.iti__sb {\n height: 10px;\n background-position: -4427px 0px;\n }\n .iti__flag.iti__sc {\n height: 10px;\n background-position: -4449px 0px;\n }\n .iti__flag.iti__sd {\n height: 10px;\n background-position: -4471px 0px;\n }\n .iti__flag.iti__se {\n height: 13px;\n background-position: -4493px 0px;\n }\n .iti__flag.iti__sg {\n height: 14px;\n background-position: -4515px 0px;\n }\n .iti__flag.iti__sh {\n height: 10px;\n background-position: -4537px 0px;\n }\n .iti__flag.iti__si {\n height: 10px;\n background-position: -4559px 0px;\n }\n .iti__flag.iti__sj {\n height: 15px;\n background-position: -4581px 0px;\n }\n .iti__flag.iti__sk {\n height: 14px;\n background-position: -4603px 0px;\n }\n .iti__flag.iti__sl {\n height: 14px;\n background-position: -4625px 0px;\n }\n .iti__flag.iti__sm {\n height: 15px;\n background-position: -4647px 0px;\n }\n .iti__flag.iti__sn {\n height: 14px;\n background-position: -4669px 0px;\n }\n .iti__flag.iti__so {\n height: 14px;\n background-position: -4691px 0px;\n }\n .iti__flag.iti__sr {\n height: 14px;\n background-position: -4713px 0px;\n }\n .iti__flag.iti__ss {\n height: 10px;\n background-position: -4735px 0px;\n }\n .iti__flag.iti__st {\n height: 10px;\n background-position: -4757px 0px;\n }\n .iti__flag.iti__su {\n height: 10px;\n background-position: -4779px 0px;\n }\n .iti__flag.iti__sv {\n height: 12px;\n background-position: -4801px 0px;\n }\n .iti__flag.iti__sx {\n height: 14px;\n background-position: -4823px 0px;\n }\n .iti__flag.iti__sy {\n height: 14px;\n background-position: -4845px 0px;\n }\n .iti__flag.iti__sz {\n height: 14px;\n background-position: -4867px 0px;\n }\n .iti__flag.iti__ta {\n height: 10px;\n background-position: -4889px 0px;\n }\n .iti__flag.iti__tc {\n height: 10px;\n background-position: -4911px 0px;\n }\n .iti__flag.iti__td {\n height: 14px;\n background-position: -4933px 0px;\n }\n .iti__flag.iti__tf {\n height: 14px;\n background-position: -4955px 0px;\n }\n .iti__flag.iti__tg {\n height: 13px;\n background-position: -4977px 0px;\n }\n .iti__flag.iti__th {\n height: 14px;\n background-position: -4999px 0px;\n }\n .iti__flag.iti__tj {\n height: 10px;\n background-position: -5021px 0px;\n }\n .iti__flag.iti__tk {\n height: 10px;\n background-position: -5043px 0px;\n }\n .iti__flag.iti__tl {\n height: 10px;\n background-position: -5065px 0px;\n }\n .iti__flag.iti__tm {\n height: 14px;\n background-position: -5087px 0px;\n }\n .iti__flag.iti__tn {\n height: 14px;\n background-position: -5109px 0px;\n }\n .iti__flag.iti__to {\n height: 10px;\n background-position: -5131px 0px;\n }\n .iti__flag.iti__tr {\n height: 14px;\n background-position: -5153px 0px;\n }\n .iti__flag.iti__tt {\n height: 12px;\n background-position: -5175px 0px;\n }\n .iti__flag.iti__tv {\n height: 10px;\n background-position: -5197px 0px;\n }\n .iti__flag.iti__tw {\n height: 14px;\n background-position: -5219px 0px;\n }\n .iti__flag.iti__tz {\n height: 14px;\n background-position: -5241px 0px;\n }\n .iti__flag.iti__ua {\n height: 14px;\n background-position: -5263px 0px;\n }\n .iti__flag.iti__ug {\n height: 14px;\n background-position: -5285px 0px;\n }\n .iti__flag.iti__uk {\n height: 10px;\n background-position: -5307px 0px;\n }\n .iti__flag.iti__um {\n height: 11px;\n background-position: -5329px 0px;\n }\n .iti__flag.iti__un {\n height: 14px;\n background-position: -5351px 0px;\n }\n .iti__flag.iti__us {\n height: 11px;\n background-position: -5373px 0px;\n }\n .iti__flag.iti__uy {\n height: 14px;\n background-position: -5395px 0px;\n }\n .iti__flag.iti__uz {\n height: 10px;\n background-position: -5417px 0px;\n }\n .iti__flag.iti__va {\n height: 15px;\n background-position: -5439px 0px;\n }\n .iti__flag.iti__vc {\n height: 14px;\n background-position: -5456px 0px;\n }\n .iti__flag.iti__ve {\n height: 14px;\n background-position: -5478px 0px;\n }\n .iti__flag.iti__vg {\n height: 10px;\n background-position: -5500px 0px;\n }\n .iti__flag.iti__vi {\n height: 14px;\n background-position: -5522px 0px;\n }\n .iti__flag.iti__vn {\n height: 14px;\n background-position: -5544px 0px;\n }\n .iti__flag.iti__vu {\n height: 12px;\n background-position: -5566px 0px;\n }\n .iti__flag.iti__wf {\n height: 14px;\n background-position: -5588px 0px;\n }\n .iti__flag.iti__ws {\n height: 10px;\n background-position: -5610px 0px;\n }\n .iti__flag.iti__xk {\n height: 15px;\n background-position: -5632px 0px;\n }\n .iti__flag.iti__ye {\n height: 14px;\n background-position: -5654px 0px;\n }\n .iti__flag.iti__yt {\n height: 14px;\n background-position: -5676px 0px;\n }\n .iti__flag.iti__za {\n height: 14px;\n background-position: -5698px 0px;\n }\n .iti__flag.iti__zm {\n height: 14px;\n background-position: -5720px 0px;\n }\n .iti__flag.iti__zw {\n height: 10px;\n background-position: -5742px 0px;\n }\n\n .iti__flag {\n height: 15px;\n box-shadow: 0px 0px 1px 0px var(--ix-phone-flag-box-shadow-color, #888);\n background-image: var(--flag-url);\n background-repeat: no-repeat;\n background-color: var(--ix-phone-flag-bg-color, #dbdbdb);\n background-position: 20px 0;\n }\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n .iti__flag {\n background-image: var(--flag-urlx2);\n }\n }\n\n .iti__flag.iti__np {\n background-color: transparent;\n }\n`;\n"]}
1	+ {"version":3,"file":"ix-phone-input-styles.js","sourceRoot":"","sources":["../src/ix-phone-input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4xCpC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxPhoneInputStyles = css`\n :host([hidden]) {\n display: none;\n }\n\n .iti {\n position: relative;\n display: block;\n padding: 0;\n }\n .iti * {\n box-sizing: border-box;\n padding: 0;\n }\n .iti__hide {\n display: none;\n }\n .iti__v-hide {\n visibility: hidden;\n }\n .iti input,\n .iti input[type='text'],\n .iti input[type='tel'] {\n color: var(--ix-phone-input-color, var(--clr-on-surface, #000));\n position: relative;\n z-index: 0;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n padding-left: 4rem;\n padding-right: 36px;\n margin-right: 0;\n padding-top: 10px;\n padding-bottom: 10px;\n width: 100%;\n border: none;\n outline: none;\n line-height: 24px;\n font-size: 16px;\n }\n .iti__flag-container {\n position: absolute;\n top: 0;\n bottom: 0;\n right: 0;\n padding: 1px;\n }\n .iti__selected-flag {\n z-index: 1;\n position: relative;\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 6px 0 8px;\n }\n .iti__arrow {\n margin-left: 6px;\n width: 0;\n height: 0;\n border-left: 3px solid transparent;\n border-right: 3px solid transparent;\n border-top: 4px solid\n var(--ix-phone-arrow-color, var(--clr-graphics-fill, #555));\n }\n [dir='rtl'] .iti__arrow {\n margin-right: 6px;\n margin-left: 0;\n }\n .iti__arrow--up {\n border-top: none;\n border-bottom: 4px solid\n var(--ix-phone-arrow-color, var(--clr-graphics-fill, #555));\n }\n .iti__country-list {\n position: absolute;\n z-index: 2;\n list-style: none;\n padding: 0;\n margin: 0 0 0 -1px;\n box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);\n background-color: var(--clr-on-primary, white);\n border: 1px solid var(--clr-outline, #ccc);\n white-space: nowrap;\n max-height: 200px;\n overflow-y: scroll;\n -webkit-overflow-scrolling: touch;\n }\n .iti__country-list--dropup {\n bottom: 100%;\n margin-bottom: -1px;\n }\n @media (max-width: 500px) {\n .iti__country-list {\n white-space: normal;\n }\n }\n .iti__flag-box {\n display: inline-block;\n width: 20px;\n }\n .iti__divider {\n padding-bottom: 5px;\n margin-bottom: 5px;\n border-bottom: 1px solid\n var(--ix-phone-divider-color, var(--clr-outline, #ccc));\n }\n .iti__country {\n display: flex;\n align-items: center;\n padding: 5px 10px;\n outline: none;\n }\n .iti__dial-code {\n color: var(--ix-phone-dial-code-color, var(--clr-on-surface-variant, #999));\n }\n .iti__country.iti__highlight {\n background-color: rgba(0, 0, 0, 0.05);\n }\n .iti__flag-box,\n .iti__country-name {\n margin-right: 6px;\n }\n [dir='rtl'] .iti__flag-box,\n [dir='rtl'] .iti__country-name {\n margin-right: 0;\n margin-left: 6px;\n }\n .iti--allow-dropdown input,\n .iti--allow-dropdown input[type='text'],\n .iti--allow-dropdown input[type='tel'],\n .iti--separate-dial-code input,\n .iti--separate-dial-code input[type='text'],\n .iti--separate-dial-code input[type='tel'] {\n padding-right: 6px;\n padding-left: 4pem;\n margin-left: 0;\n }\n [dir='rtl'] .iti--allow-dropdown input,\n [dir='rtl'] .iti--allow-dropdown input[type='text'],\n [dir='rtl'] .iti--allow-dropdown input[type='tel'],\n [dir='rtl'] .iti--separate-dial-code input,\n [dir='rtl'] .iti--separate-dial-code input[type='text'],\n [dir='rtl'] .iti--separate-dial-code input[type='tel'] {\n padding-right: 52px;\n padding-left: 6px;\n margin-right: 0;\n }\n .iti--allow-dropdown .iti__flag-container,\n .iti--separate-dial-code .iti__flag-container {\n right: auto;\n left: 0.75rem;\n }\n [dir='rtl'] .iti--allow-dropdown .iti__flag-container,\n [dir='rtl'] .iti--separate-dial-code .iti__flag-container {\n right: 0;\n left: auto;\n }\n .iti--allow-dropdown .iti__flag-container:hover {\n cursor: pointer;\n }\n .iti--allow-dropdown input[disabled] + .iti__flag-container:hover,\n .iti--allow-dropdown input[readonly] + .iti__flag-container:hover {\n cursor: default;\n }\n .iti--allow-dropdown\n input[disabled]\n + .iti__flag-container:hover\n .iti__selected-flag,\n .iti--allow-dropdown\n input[readonly]\n + .iti__flag-container:hover\n .iti__selected-flag {\n background-color: transparent;\n }\n .iti--separate-dial-code .iti__selected-flag {\n background-color: rgba(0, 0, 0, 0.05);\n }\n .iti--separate-dial-code.iti--show-flags .iti__selected-dial-code {\n margin-left: 6px;\n }\n [dir='rtl']\n .iti--separate-dial-code.iti--show-flags\n .iti__selected-dial-code {\n margin-left: 0;\n margin-right: 6px;\n }\n .iti--container {\n position: absolute;\n top: -1000px;\n left: -1000px;\n z-index: 1060;\n padding: 1px;\n }\n .iti--container:hover {\n cursor: pointer;\n }\n\n .iti-mobile .iti--container {\n top: 30px;\n bottom: 30px;\n left: 30px;\n right: 30px;\n position: fixed;\n }\n .iti-mobile .iti__country-list {\n max-height: 100%;\n width: 100%;\n }\n .iti-mobile .iti__country {\n padding: 10px 10px;\n line-height: 1.5em;\n }\n\n .iti__flag {\n width: 20px;\n }\n .iti__flag.iti__be {\n width: 18px;\n }\n .iti__flag.iti__ch {\n width: 15px;\n }\n .iti__flag.iti__mc {\n width: 19px;\n }\n .iti__flag.iti__ne {\n width: 18px;\n }\n .iti__flag.iti__np {\n width: 13px;\n }\n .iti__flag.iti__va {\n width: 15px;\n }\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n .iti__flag {\n background-size: 5762px 15px;\n }\n }\n .iti__flag.iti__ac {\n height: 10px;\n background-position: 0px 0px;\n }\n .iti__flag.iti__ad {\n height: 14px;\n background-position: -22px 0px;\n }\n .iti__flag.iti__ae {\n height: 10px;\n background-position: -44px 0px;\n }\n .iti__flag.iti__af {\n height: 14px;\n background-position: -66px 0px;\n }\n .iti__flag.iti__ag {\n height: 14px;\n background-position: -88px 0px;\n }\n .iti__flag.iti__ai {\n height: 10px;\n background-position: -110px 0px;\n }\n .iti__flag.iti__al {\n height: 15px;\n background-position: -132px 0px;\n }\n .iti__flag.iti__am {\n height: 10px;\n background-position: -154px 0px;\n }\n .iti__flag.iti__ao {\n height: 14px;\n background-position: -176px 0px;\n }\n .iti__flag.iti__aq {\n height: 14px;\n background-position: -198px 0px;\n }\n .iti__flag.iti__ar {\n height: 13px;\n background-position: -220px 0px;\n }\n .iti__flag.iti__as {\n height: 10px;\n background-position: -242px 0px;\n }\n .iti__flag.iti__at {\n height: 14px;\n background-position: -264px 0px;\n }\n .iti__flag.iti__au {\n height: 10px;\n background-position: -286px 0px;\n }\n .iti__flag.iti__aw {\n height: 14px;\n background-position: -308px 0px;\n }\n .iti__flag.iti__ax {\n height: 13px;\n background-position: -330px 0px;\n }\n .iti__flag.iti__az {\n height: 10px;\n background-position: -352px 0px;\n }\n .iti__flag.iti__ba {\n height: 10px;\n background-position: -374px 0px;\n }\n .iti__flag.iti__bb {\n height: 14px;\n background-position: -396px 0px;\n }\n .iti__flag.iti__bd {\n height: 12px;\n background-position: -418px 0px;\n }\n .iti__flag.iti__be {\n height: 15px;\n background-position: -440px 0px;\n }\n .iti__flag.iti__bf {\n height: 14px;\n background-position: -460px 0px;\n }\n .iti__flag.iti__bg {\n height: 12px;\n background-position: -482px 0px;\n }\n .iti__flag.iti__bh {\n height: 12px;\n background-position: -504px 0px;\n }\n .iti__flag.iti__bi {\n height: 12px;\n background-position: -526px 0px;\n }\n .iti__flag.iti__bj {\n height: 14px;\n background-position: -548px 0px;\n }\n .iti__flag.iti__bl {\n height: 14px;\n background-position: -570px 0px;\n }\n .iti__flag.iti__bm {\n height: 10px;\n background-position: -592px 0px;\n }\n .iti__flag.iti__bn {\n height: 10px;\n background-position: -614px 0px;\n }\n .iti__flag.iti__bo {\n height: 14px;\n background-position: -636px 0px;\n }\n .iti__flag.iti__bq {\n height: 14px;\n background-position: -658px 0px;\n }\n .iti__flag.iti__br {\n height: 14px;\n background-position: -680px 0px;\n }\n .iti__flag.iti__bs {\n height: 10px;\n background-position: -702px 0px;\n }\n .iti__flag.iti__bt {\n height: 14px;\n background-position: -724px 0px;\n }\n .iti__flag.iti__bv {\n height: 15px;\n background-position: -746px 0px;\n }\n .iti__flag.iti__bw {\n height: 14px;\n background-position: -768px 0px;\n }\n .iti__flag.iti__by {\n height: 10px;\n background-position: -790px 0px;\n }\n .iti__flag.iti__bz {\n height: 12px;\n background-position: -812px 0px;\n }\n .iti__flag.iti__ca {\n height: 10px;\n background-position: -834px 0px;\n }\n .iti__flag.iti__cc {\n height: 10px;\n background-position: -856px 0px;\n }\n .iti__flag.iti__cd {\n height: 15px;\n background-position: -878px 0px;\n }\n .iti__flag.iti__cf {\n height: 14px;\n background-position: -900px 0px;\n }\n .iti__flag.iti__cg {\n height: 14px;\n background-position: -922px 0px;\n }\n .iti__flag.iti__ch {\n height: 15px;\n background-position: -944px 0px;\n }\n .iti__flag.iti__ci {\n height: 14px;\n background-position: -961px 0px;\n }\n .iti__flag.iti__ck {\n height: 10px;\n background-position: -983px 0px;\n }\n .iti__flag.iti__cl {\n height: 14px;\n background-position: -1005px 0px;\n }\n .iti__flag.iti__cm {\n height: 14px;\n background-position: -1027px 0px;\n }\n .iti__flag.iti__cn {\n height: 14px;\n background-position: -1049px 0px;\n }\n .iti__flag.iti__co {\n height: 14px;\n background-position: -1071px 0px;\n }\n .iti__flag.iti__cp {\n height: 14px;\n background-position: -1093px 0px;\n }\n .iti__flag.iti__cq {\n height: 12px;\n background-position: -1115px 0px;\n }\n .iti__flag.iti__cr {\n height: 12px;\n background-position: -1137px 0px;\n }\n .iti__flag.iti__cu {\n height: 10px;\n background-position: -1159px 0px;\n }\n .iti__flag.iti__cv {\n height: 12px;\n background-position: -1181px 0px;\n }\n .iti__flag.iti__cw {\n height: 14px;\n background-position: -1203px 0px;\n }\n .iti__flag.iti__cx {\n height: 10px;\n background-position: -1225px 0px;\n }\n .iti__flag.iti__cy {\n height: 14px;\n background-position: -1247px 0px;\n }\n .iti__flag.iti__cz {\n height: 14px;\n background-position: -1269px 0px;\n }\n .iti__flag.iti__de {\n height: 12px;\n background-position: -1291px 0px;\n }\n .iti__flag.iti__dg {\n height: 10px;\n background-position: -1313px 0px;\n }\n .iti__flag.iti__dj {\n height: 14px;\n background-position: -1335px 0px;\n }\n .iti__flag.iti__dk {\n height: 15px;\n background-position: -1357px 0px;\n }\n .iti__flag.iti__dm {\n height: 10px;\n background-position: -1379px 0px;\n }\n .iti__flag.iti__do {\n height: 14px;\n background-position: -1401px 0px;\n }\n .iti__flag.iti__dz {\n height: 14px;\n background-position: -1423px 0px;\n }\n .iti__flag.iti__ea {\n height: 14px;\n background-position: -1445px 0px;\n }\n .iti__flag.iti__ec {\n height: 14px;\n background-position: -1467px 0px;\n }\n .iti__flag.iti__ee {\n height: 13px;\n background-position: -1489px 0px;\n }\n .iti__flag.iti__eg {\n height: 14px;\n background-position: -1511px 0px;\n }\n .iti__flag.iti__eh {\n height: 10px;\n background-position: -1533px 0px;\n }\n .iti__flag.iti__er {\n height: 10px;\n background-position: -1555px 0px;\n }\n .iti__flag.iti__es {\n height: 14px;\n background-position: -1577px 0px;\n }\n .iti__flag.iti__et {\n height: 10px;\n background-position: -1599px 0px;\n }\n .iti__flag.iti__eu {\n height: 14px;\n background-position: -1621px 0px;\n }\n .iti__flag.iti__ez {\n height: 14px;\n background-position: -1643px 0px;\n }\n .iti__flag.iti__fi {\n height: 12px;\n background-position: -1665px 0px;\n }\n .iti__flag.iti__fj {\n height: 10px;\n background-position: -1687px 0px;\n }\n .iti__flag.iti__fk {\n height: 10px;\n background-position: -1709px 0px;\n }\n .iti__flag.iti__fm {\n height: 11px;\n background-position: -1731px 0px;\n }\n .iti__flag.iti__fo {\n height: 15px;\n background-position: -1753px 0px;\n }\n .iti__flag.iti__fr {\n height: 14px;\n background-position: -1775px 0px;\n }\n .iti__flag.iti__fx {\n height: 14px;\n background-position: -1797px 0px;\n }\n .iti__flag.iti__ga {\n height: 15px;\n background-position: -1819px 0px;\n }\n .iti__flag.iti__gb {\n height: 10px;\n background-position: -1841px 0px;\n }\n .iti__flag.iti__gd {\n height: 12px;\n background-position: -1863px 0px;\n }\n .iti__flag.iti__ge {\n height: 14px;\n background-position: -1885px 0px;\n }\n .iti__flag.iti__gf {\n height: 14px;\n background-position: -1907px 0px;\n }\n .iti__flag.iti__gg {\n height: 14px;\n background-position: -1929px 0px;\n }\n .iti__flag.iti__gh {\n height: 14px;\n background-position: -1951px 0px;\n }\n .iti__flag.iti__gi {\n height: 10px;\n background-position: -1973px 0px;\n }\n .iti__flag.iti__gl {\n height: 14px;\n background-position: -1995px 0px;\n }\n .iti__flag.iti__gm {\n height: 14px;\n background-position: -2017px 0px;\n }\n .iti__flag.iti__gn {\n height: 14px;\n background-position: -2039px 0px;\n }\n .iti__flag.iti__gp {\n height: 14px;\n background-position: -2061px 0px;\n }\n .iti__flag.iti__gq {\n height: 14px;\n background-position: -2083px 0px;\n }\n .iti__flag.iti__gr {\n height: 14px;\n background-position: -2105px 0px;\n }\n .iti__flag.iti__gs {\n height: 10px;\n background-position: -2127px 0px;\n }\n .iti__flag.iti__gt {\n height: 13px;\n background-position: -2149px 0px;\n }\n .iti__flag.iti__gu {\n height: 11px;\n background-position: -2171px 0px;\n }\n .iti__flag.iti__gw {\n height: 10px;\n background-position: -2193px 0px;\n }\n .iti__flag.iti__gy {\n height: 12px;\n background-position: -2215px 0px;\n }\n .iti__flag.iti__hk {\n height: 14px;\n background-position: -2237px 0px;\n }\n .iti__flag.iti__hm {\n height: 10px;\n background-position: -2259px 0px;\n }\n .iti__flag.iti__hn {\n height: 10px;\n background-position: -2281px 0px;\n }\n .iti__flag.iti__hr {\n height: 10px;\n background-position: -2303px 0px;\n }\n .iti__flag.iti__ht {\n height: 12px;\n background-position: -2325px 0px;\n }\n .iti__flag.iti__hu {\n height: 10px;\n background-position: -2347px 0px;\n }\n .iti__flag.iti__ic {\n height: 14px;\n background-position: -2369px 0px;\n }\n .iti__flag.iti__id {\n height: 14px;\n background-position: -2391px 0px;\n }\n .iti__flag.iti__ie {\n height: 10px;\n background-position: -2413px 0px;\n }\n .iti__flag.iti__il {\n height: 15px;\n background-position: -2435px 0px;\n }\n .iti__flag.iti__im {\n height: 10px;\n background-position: -2457px 0px;\n }\n .iti__flag.iti__in {\n height: 14px;\n background-position: -2479px 0px;\n }\n .iti__flag.iti__io {\n height: 10px;\n background-position: -2501px 0px;\n }\n .iti__flag.iti__iq {\n height: 14px;\n background-position: -2523px 0px;\n }\n .iti__flag.iti__ir {\n height: 12px;\n background-position: -2545px 0px;\n }\n .iti__flag.iti__is {\n height: 15px;\n background-position: -2567px 0px;\n }\n .iti__flag.iti__it {\n height: 14px;\n background-position: -2589px 0px;\n }\n .iti__flag.iti__je {\n height: 12px;\n background-position: -2611px 0px;\n }\n .iti__flag.iti__jm {\n height: 10px;\n background-position: -2633px 0px;\n }\n .iti__flag.iti__jo {\n height: 10px;\n background-position: -2655px 0px;\n }\n .iti__flag.iti__jp {\n height: 14px;\n background-position: -2677px 0px;\n }\n .iti__flag.iti__ke {\n height: 14px;\n background-position: -2699px 0px;\n }\n .iti__flag.iti__kg {\n height: 12px;\n background-position: -2721px 0px;\n }\n .iti__flag.iti__kh {\n height: 13px;\n background-position: -2743px 0px;\n }\n .iti__flag.iti__ki {\n height: 10px;\n background-position: -2765px 0px;\n }\n .iti__flag.iti__km {\n height: 12px;\n background-position: -2787px 0px;\n }\n .iti__flag.iti__kn {\n height: 14px;\n background-position: -2809px 0px;\n }\n .iti__flag.iti__kp {\n height: 10px;\n background-position: -2831px 0px;\n }\n .iti__flag.iti__kr {\n height: 14px;\n background-position: -2853px 0px;\n }\n .iti__flag.iti__kw {\n height: 10px;\n background-position: -2875px 0px;\n }\n .iti__flag.iti__ky {\n height: 10px;\n background-position: -2897px 0px;\n }\n .iti__flag.iti__kz {\n height: 10px;\n background-position: -2919px 0px;\n }\n .iti__flag.iti__la {\n height: 14px;\n background-position: -2941px 0px;\n }\n .iti__flag.iti__lb {\n height: 14px;\n background-position: -2963px 0px;\n }\n .iti__flag.iti__lc {\n height: 10px;\n background-position: -2985px 0px;\n }\n .iti__flag.iti__li {\n height: 12px;\n background-position: -3007px 0px;\n }\n .iti__flag.iti__lk {\n height: 10px;\n background-position: -3029px 0px;\n }\n .iti__flag.iti__lr {\n height: 11px;\n background-position: -3051px 0px;\n }\n .iti__flag.iti__ls {\n height: 14px;\n background-position: -3073px 0px;\n }\n .iti__flag.iti__lt {\n height: 12px;\n background-position: -3095px 0px;\n }\n .iti__flag.iti__lu {\n height: 12px;\n background-position: -3117px 0px;\n }\n .iti__flag.iti__lv {\n height: 10px;\n background-position: -3139px 0px;\n }\n .iti__flag.iti__ly {\n height: 10px;\n background-position: -3161px 0px;\n }\n .iti__flag.iti__ma {\n height: 14px;\n background-position: -3183px 0px;\n }\n .iti__flag.iti__mc {\n height: 15px;\n background-position: -3205px 0px;\n }\n .iti__flag.iti__md {\n height: 10px;\n background-position: -3226px 0px;\n }\n .iti__flag.iti__me {\n height: 10px;\n background-position: -3248px 0px;\n }\n .iti__flag.iti__mf {\n height: 14px;\n background-position: -3270px 0px;\n }\n .iti__flag.iti__mg {\n height: 14px;\n background-position: -3292px 0px;\n }\n .iti__flag.iti__mh {\n height: 11px;\n background-position: -3314px 0px;\n }\n .iti__flag.iti__mk {\n height: 10px;\n background-position: -3336px 0px;\n }\n .iti__flag.iti__ml {\n height: 14px;\n background-position: -3358px 0px;\n }\n .iti__flag.iti__mm {\n height: 14px;\n background-position: -3380px 0px;\n }\n .iti__flag.iti__mn {\n height: 10px;\n background-position: -3402px 0px;\n }\n .iti__flag.iti__mo {\n height: 14px;\n background-position: -3424px 0px;\n }\n .iti__flag.iti__mp {\n height: 10px;\n background-position: -3446px 0px;\n }\n .iti__flag.iti__mq {\n height: 14px;\n background-position: -3468px 0px;\n }\n .iti__flag.iti__mr {\n height: 14px;\n background-position: -3490px 0px;\n }\n .iti__flag.iti__ms {\n height: 10px;\n background-position: -3512px 0px;\n }\n .iti__flag.iti__mt {\n height: 14px;\n background-position: -3534px 0px;\n }\n .iti__flag.iti__mu {\n height: 14px;\n background-position: -3556px 0px;\n }\n .iti__flag.iti__mv {\n height: 14px;\n background-position: -3578px 0px;\n }\n .iti__flag.iti__mw {\n height: 14px;\n background-position: -3600px 0px;\n }\n .iti__flag.iti__mx {\n height: 12px;\n background-position: -3622px 0px;\n }\n .iti__flag.iti__my {\n height: 10px;\n background-position: -3644px 0px;\n }\n .iti__flag.iti__mz {\n height: 14px;\n background-position: -3666px 0px;\n }\n .iti__flag.iti__na {\n height: 14px;\n background-position: -3688px 0px;\n }\n .iti__flag.iti__nc {\n height: 10px;\n background-position: -3710px 0px;\n }\n .iti__flag.iti__ne {\n height: 15px;\n background-position: -3732px 0px;\n }\n .iti__flag.iti__nf {\n height: 10px;\n background-position: -3752px 0px;\n }\n .iti__flag.iti__ng {\n height: 10px;\n background-position: -3774px 0px;\n }\n .iti__flag.iti__ni {\n height: 12px;\n background-position: -3796px 0px;\n }\n .iti__flag.iti__nl {\n height: 14px;\n background-position: -3818px 0px;\n }\n .iti__flag.iti__no {\n height: 15px;\n background-position: -3840px 0px;\n }\n .iti__flag.iti__np {\n height: 15px;\n background-position: -3862px 0px;\n }\n .iti__flag.iti__nr {\n height: 10px;\n background-position: -3877px 0px;\n }\n .iti__flag.iti__nu {\n height: 10px;\n background-position: -3899px 0px;\n }\n .iti__flag.iti__nz {\n height: 10px;\n background-position: -3921px 0px;\n }\n .iti__flag.iti__om {\n height: 10px;\n background-position: -3943px 0px;\n }\n .iti__flag.iti__pa {\n height: 14px;\n background-position: -3965px 0px;\n }\n .iti__flag.iti__pe {\n height: 14px;\n background-position: -3987px 0px;\n }\n .iti__flag.iti__pf {\n height: 14px;\n background-position: -4009px 0px;\n }\n .iti__flag.iti__pg {\n height: 15px;\n background-position: -4031px 0px;\n }\n .iti__flag.iti__ph {\n height: 10px;\n background-position: -4053px 0px;\n }\n .iti__flag.iti__pk {\n height: 14px;\n background-position: -4075px 0px;\n }\n .iti__flag.iti__pl {\n height: 13px;\n background-position: -4097px 0px;\n }\n .iti__flag.iti__pm {\n height: 14px;\n background-position: -4119px 0px;\n }\n .iti__flag.iti__pn {\n height: 10px;\n background-position: -4141px 0px;\n }\n .iti__flag.iti__pr {\n height: 14px;\n background-position: -4163px 0px;\n }\n .iti__flag.iti__ps {\n height: 10px;\n background-position: -4185px 0px;\n }\n .iti__flag.iti__pt {\n height: 14px;\n background-position: -4207px 0px;\n }\n .iti__flag.iti__pw {\n height: 13px;\n background-position: -4229px 0px;\n }\n .iti__flag.iti__py {\n height: 11px;\n background-position: -4251px 0px;\n }\n .iti__flag.iti__qa {\n height: 8px;\n background-position: -4273px 0px;\n }\n .iti__flag.iti__re {\n height: 14px;\n background-position: -4295px 0px;\n }\n .iti__flag.iti__ro {\n height: 14px;\n background-position: -4317px 0px;\n }\n .iti__flag.iti__rs {\n height: 14px;\n background-position: -4339px 0px;\n }\n .iti__flag.iti__ru {\n height: 14px;\n background-position: -4361px 0px;\n }\n .iti__flag.iti__rw {\n height: 14px;\n background-position: -4383px 0px;\n }\n .iti__flag.iti__sa {\n height: 14px;\n background-position: -4405px 0px;\n }\n .iti__flag.iti__sb {\n height: 10px;\n background-position: -4427px 0px;\n }\n .iti__flag.iti__sc {\n height: 10px;\n background-position: -4449px 0px;\n }\n .iti__flag.iti__sd {\n height: 10px;\n background-position: -4471px 0px;\n }\n .iti__flag.iti__se {\n height: 13px;\n background-position: -4493px 0px;\n }\n .iti__flag.iti__sg {\n height: 14px;\n background-position: -4515px 0px;\n }\n .iti__flag.iti__sh {\n height: 10px;\n background-position: -4537px 0px;\n }\n .iti__flag.iti__si {\n height: 10px;\n background-position: -4559px 0px;\n }\n .iti__flag.iti__sj {\n height: 15px;\n background-position: -4581px 0px;\n }\n .iti__flag.iti__sk {\n height: 14px;\n background-position: -4603px 0px;\n }\n .iti__flag.iti__sl {\n height: 14px;\n background-position: -4625px 0px;\n }\n .iti__flag.iti__sm {\n height: 15px;\n background-position: -4647px 0px;\n }\n .iti__flag.iti__sn {\n height: 14px;\n background-position: -4669px 0px;\n }\n .iti__flag.iti__so {\n height: 14px;\n background-position: -4691px 0px;\n }\n .iti__flag.iti__sr {\n height: 14px;\n background-position: -4713px 0px;\n }\n .iti__flag.iti__ss {\n height: 10px;\n background-position: -4735px 0px;\n }\n .iti__flag.iti__st {\n height: 10px;\n background-position: -4757px 0px;\n }\n .iti__flag.iti__su {\n height: 10px;\n background-position: -4779px 0px;\n }\n .iti__flag.iti__sv {\n height: 12px;\n background-position: -4801px 0px;\n }\n .iti__flag.iti__sx {\n height: 14px;\n background-position: -4823px 0px;\n }\n .iti__flag.iti__sy {\n height: 14px;\n background-position: -4845px 0px;\n }\n .iti__flag.iti__sz {\n height: 14px;\n background-position: -4867px 0px;\n }\n .iti__flag.iti__ta {\n height: 10px;\n background-position: -4889px 0px;\n }\n .iti__flag.iti__tc {\n height: 10px;\n background-position: -4911px 0px;\n }\n .iti__flag.iti__td {\n height: 14px;\n background-position: -4933px 0px;\n }\n .iti__flag.iti__tf {\n height: 14px;\n background-position: -4955px 0px;\n }\n .iti__flag.iti__tg {\n height: 13px;\n background-position: -4977px 0px;\n }\n .iti__flag.iti__th {\n height: 14px;\n background-position: -4999px 0px;\n }\n .iti__flag.iti__tj {\n height: 10px;\n background-position: -5021px 0px;\n }\n .iti__flag.iti__tk {\n height: 10px;\n background-position: -5043px 0px;\n }\n .iti__flag.iti__tl {\n height: 10px;\n background-position: -5065px 0px;\n }\n .iti__flag.iti__tm {\n height: 14px;\n background-position: -5087px 0px;\n }\n .iti__flag.iti__tn {\n height: 14px;\n background-position: -5109px 0px;\n }\n .iti__flag.iti__to {\n height: 10px;\n background-position: -5131px 0px;\n }\n .iti__flag.iti__tr {\n height: 14px;\n background-position: -5153px 0px;\n }\n .iti__flag.iti__tt {\n height: 12px;\n background-position: -5175px 0px;\n }\n .iti__flag.iti__tv {\n height: 10px;\n background-position: -5197px 0px;\n }\n .iti__flag.iti__tw {\n height: 14px;\n background-position: -5219px 0px;\n }\n .iti__flag.iti__tz {\n height: 14px;\n background-position: -5241px 0px;\n }\n .iti__flag.iti__ua {\n height: 14px;\n background-position: -5263px 0px;\n }\n .iti__flag.iti__ug {\n height: 14px;\n background-position: -5285px 0px;\n }\n .iti__flag.iti__uk {\n height: 10px;\n background-position: -5307px 0px;\n }\n .iti__flag.iti__um {\n height: 11px;\n background-position: -5329px 0px;\n }\n .iti__flag.iti__un {\n height: 14px;\n background-position: -5351px 0px;\n }\n .iti__flag.iti__us {\n height: 11px;\n background-position: -5373px 0px;\n }\n .iti__flag.iti__uy {\n height: 14px;\n background-position: -5395px 0px;\n }\n .iti__flag.iti__uz {\n height: 10px;\n background-position: -5417px 0px;\n }\n .iti__flag.iti__va {\n height: 15px;\n background-position: -5439px 0px;\n }\n .iti__flag.iti__vc {\n height: 14px;\n background-position: -5456px 0px;\n }\n .iti__flag.iti__ve {\n height: 14px;\n background-position: -5478px 0px;\n }\n .iti__flag.iti__vg {\n height: 10px;\n background-position: -5500px 0px;\n }\n .iti__flag.iti__vi {\n height: 14px;\n background-position: -5522px 0px;\n }\n .iti__flag.iti__vn {\n height: 14px;\n background-position: -5544px 0px;\n }\n .iti__flag.iti__vu {\n height: 12px;\n background-position: -5566px 0px;\n }\n .iti__flag.iti__wf {\n height: 14px;\n background-position: -5588px 0px;\n }\n .iti__flag.iti__ws {\n height: 10px;\n background-position: -5610px 0px;\n }\n .iti__flag.iti__xk {\n height: 15px;\n background-position: -5632px 0px;\n }\n .iti__flag.iti__ye {\n height: 14px;\n background-position: -5654px 0px;\n }\n .iti__flag.iti__yt {\n height: 14px;\n background-position: -5676px 0px;\n }\n .iti__flag.iti__za {\n height: 14px;\n background-position: -5698px 0px;\n }\n .iti__flag.iti__zm {\n height: 14px;\n background-position: -5720px 0px;\n }\n .iti__flag.iti__zw {\n height: 10px;\n background-position: -5742px 0px;\n }\n\n .iti__flag {\n height: 15px;\n box-shadow: 0px 0px 1px 0px var(--ix-phone-flag-box-shadow-color, #888);\n background-image: var(--flag-url);\n background-repeat: no-repeat;\n background-color: var(--ix-phone-flag-bg-color, #dbdbdb);\n background-position: 20px 0;\n }\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n .iti__flag {\n background-image: var(--flag-urlx2);\n }\n }\n\n .iti__flag.iti__np {\n background-color: transparent;\n }\n`;\n"]}

package/esmDist/ix-phone-input.js CHANGED Viewed

@@ -1725,8 +1725,8 @@ const IxPhoneInputStyles = css `
     padding-left: 4rem;
     padding-right: 36px;
     margin-right: 0;
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding-top: 10px;
+    padding-bottom: 10px;
     width: 100%;
     border: none;
     outline: none;
@@ -3348,6 +3348,16 @@ class IxPhoneInput extends LitElement {
         // Sync validity so that clients can check validity on input.
         this.syncValidity();
     }
+    handlePaste() {
+        // zero second time out to ensure that the input value is updated
+        setTimeout(() => {
+            var _a;
+            this.formatValue();
+            (_a = this.iti) === null || _a === void 0 ? void 0 : _a.setNumber(this.value);
+            this.syncValidity();
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        }, 0);
+    }
     disconnectedCallback() {
         var _a;
         (_a = this.iti) === null || _a === void 0 ? void 0 : _a.destroy();
@@ -3388,6 +3398,7 @@ class IxPhoneInput extends LitElement {
             aria-describedby="description"
             @input="${this.handleInput}"
             @keypress="${this.handleKeyPress}"
+            @paste="${this.handlePaste}"
           />
           <div id="description" slot="aria-describedby"></div>
         </ix-field>

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "Webcomponent ix-phone-input following open-wc recommendations",
   "license": "MIT",
   "author": "Digital Realty",
-  "version": "2.2.9",
+  "version": "2.2.11",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -119,5 +119,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "88d71dc777dfb338bb137b04f0ec54489600ee26"
+  "gitHead": "f2d07371348538398bd2173111fddc5d03e9aa80"
 }