npm - @digital-realty/ix-phone-input - Versions diffs - 2.2.7 → 2.2.8 - Mend

@digital-realty/ix-phone-input 2.2.7 → 2.2.8

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 (5) hide show

package/dist/IxPhoneInput.d.ts +2 -1
package/dist/IxPhoneInput.js +19 -5
package/dist/IxPhoneInput.js.map +1 -1
package/esmDist/ix-phone-input.js +19 -5
package/package.json +3 -3

package/dist/IxPhoneInput.d.ts CHANGED Viewed

@@ -163,8 +163,9 @@ export declare class IxPhoneInput extends LitElement {
     private handleFocusin;
     private handleFocusout;
     private getInput;
+    connectedCallback(): void;
     protected firstUpdated(): void;
-    attributeChangedCallback(attribute: string, newValue: string | null, oldValue: string | null): void;
+    attributeChangedCallback(attribute: string, oldValue: string | null, newValue: string | null): void;
     protected updated(changedProperties: PropertyValues): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     private handleInput;

package/dist/IxPhoneInput.js CHANGED Viewed

@@ -231,6 +231,7 @@ export class IxPhoneInput extends LitElement {
         var _a;
         this.dirty = false;
         this.value = (_a = this.getAttribute('value')) !== null && _a !== void 0 ? _a : '';
+        this.input.value = this.value;
         this.nativeError = false;
         this.nativeErrorText = '';
     }
@@ -288,30 +289,40 @@ export class IxPhoneInput extends LitElement {
         }
         return this.input;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!window.intlTelInputUtils) {
+            window.intlTelInputGlobals.loadUtils(CONFIG.UTILS_SCRIPT);
+        }
+    }
     firstUpdated() {
         this.input.addEventListener('countrychange', () => {
             this.formatValue();
+            this.dispatchEvent(new CustomEvent('country-change', {
+                bubbles: true,
+                composed: true,
+            }));
         });
         this.iti = intlTelInput(this.input, {
             initialCountry: this.region !== '' ? this.region : 'auto',
-            nationalMode: true,
+            formatOnDisplay: true,
+            nationalMode: false,
             hiddenInput: 'full',
             autoPlaceholder: 'off',
             geoIpLookup: this.geoFn,
-            utilsScript: CONFIG.UTILS_SCRIPT,
         });
         this.iti.promise.then(() => {
             // format on inititalisation
             this.formatValue();
         });
     }
-    attributeChangedCallback(attribute, newValue, oldValue) {
+    attributeChangedCallback(attribute, oldValue, newValue) {
         if (attribute === 'value' && this.dirty) {
             // After user input, changing the value attribute no longer updates the
             // text field's value (until reset). This matches native <input> behavior.
             return;
         }
-        super.attributeChangedCallback(attribute, newValue, oldValue);
+        super.attributeChangedCallback(attribute, oldValue, newValue);
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     updated(changedProperties) {
@@ -347,6 +358,9 @@ export class IxPhoneInput extends LitElement {
         (_a = this.iti) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
+        if (this.iti && this.value) {
+            this.iti.setNumber(this.value);
+        }
         const classes = {
             disabled: this.disabled,
             error: !this.disabled && this.hasError,
@@ -371,12 +385,12 @@ export class IxPhoneInput extends LitElement {
           <input
             name="${this.name}"
             type="${this.type}"
+            value="${this.value}"
             ?disabled=${this.disabled}
             ?required=${this.required}
             aria-invalid=${this.hasError}
             aria-label=${ariaLabel}
             aria-describedby="description"
-            .value="${this.value}"
             @input="${this.handleInput}"
             @keypress="${this.handleKeyPress}"
           />

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":["import '@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.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 protected override firstUpdated() {\n this.input.addEventListener('countrychange', () => {\n this.formatValue();\n });\n this.iti = intlTelInput(this.input, {\n initialCountry: this.region !== '' ? this.region : 'auto',\n nationalMode: true,\n hiddenInput: 'full',\n autoPlaceholder: 'off',\n geoIpLookup: this.geoFn,\n utilsScript: CONFIG.UTILS_SCRIPT,\n });\n this.iti.promise.then(() => {\n // format on inititalisation\n this.formatValue();\n });\n }\n\n override attributeChangedCallback(\n attribute: string,\n newValue: string \| null,\n oldValue: 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, newValue, oldValue);\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 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 ?disabled=${this.disabled}\n ?required=${this.required}\n aria-invalid=${this.hasError}\n aria-label=${ariaLabel}\n aria-describedby=\"description\"\n .value=\"${this.value}\"\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":["import '@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(new CustomEvent('country-change', {\n bubbles: true,\n composed: true,\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"]}

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

@@ -3226,6 +3226,7 @@ class IxPhoneInput extends LitElement {
         var _a;
         this.dirty = false;
         this.value = (_a = this.getAttribute('value')) !== null && _a !== undefined ? _a : '';
+        this.input.value = this.value;
         this.nativeError = false;
         this.nativeErrorText = '';
     }
@@ -3283,30 +3284,40 @@ class IxPhoneInput extends LitElement {
         }
         return this.input;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!window.intlTelInputUtils) {
+            window.intlTelInputGlobals.loadUtils(CONFIG.UTILS_SCRIPT);
+        }
+    }
     firstUpdated() {
         this.input.addEventListener('countrychange', () => {
             this.formatValue();
+            this.dispatchEvent(new CustomEvent('country-change', {
+                bubbles: true,
+                composed: true,
+            }));
         });
         this.iti = index(this.input, {
             initialCountry: this.region !== '' ? this.region : 'auto',
-            nationalMode: true,
+            formatOnDisplay: true,
+            nationalMode: false,
             hiddenInput: 'full',
             autoPlaceholder: 'off',
             geoIpLookup: this.geoFn,
-            utilsScript: CONFIG.UTILS_SCRIPT,
         });
         this.iti.promise.then(() => {
             // format on inititalisation
             this.formatValue();
         });
     }
-    attributeChangedCallback(attribute, newValue, oldValue) {
+    attributeChangedCallback(attribute, oldValue, newValue) {
         if (attribute === 'value' && this.dirty) {
             // After user input, changing the value attribute no longer updates the
             // text field's value (until reset). This matches native <input> behavior.
             return;
         }
-        super.attributeChangedCallback(attribute, newValue, oldValue);
+        super.attributeChangedCallback(attribute, oldValue, newValue);
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     updated(changedProperties) {
@@ -3342,6 +3353,9 @@ class IxPhoneInput extends LitElement {
         (_a = this.iti) === null || _a === undefined ? undefined : _a.destroy();
     }
     render() {
+        if (this.iti && this.value) {
+            this.iti.setNumber(this.value);
+        }
         const classes = {
             disabled: this.disabled,
             error: !this.disabled && this.hasError,
@@ -3366,12 +3380,12 @@ class IxPhoneInput extends LitElement {
           <input
             name="${this.name}"
             type="${this.type}"
+            value="${this.value}"
             ?disabled=${this.disabled}
             ?required=${this.required}
             aria-invalid=${this.hasError}
             aria-label=${ariaLabel}
             aria-describedby="description"
-            .value="${this.value}"
             @input="${this.handleInput}"
             @keypress="${this.handleKeyPress}"
           />

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.7",
+  "version": "2.2.8",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -33,7 +33,7 @@
     "@digital-realty/ix-field": "^1.1.6",
     "@lit/react": "^1.0.2",
     "@material/web": "1.2.0",
-    "intl-tel-input": "^18.2.1",
+    "intl-tel-input": "^18.5.3",
     "lit": "^3.2.1",
     "react": "^18.2.0"
   },
@@ -119,5 +119,5 @@
     "README.md",
     "LICENSE"
   ],
-  "gitHead": "a781e30ec63dcc3307d86b94e35fa93c4e61f22f"
+  "gitHead": "30cbd739d7b27224e88600cc10c996ed1d21873e"
 }