@digital-realty/ix-phone-input 2.1.10 → 2.1.12
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.
- package/dist/IxPhoneInput.js +1 -2
- package/dist/IxPhoneInput.js.map +1 -1
- package/esmDist/ix-phone-input.js +178 -69
- package/package.json +3 -3
package/dist/IxPhoneInput.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import '@digital-realty/ix-field/ix-field.js';
|
|
3
3
|
import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
|
|
4
|
-
import { styles as outlinedForcedColorsStyles } from '@material/web/textfield/internal/outlined-
|
|
5
|
-
import { styles as outlinedStyles } from '@material/web/textfield/internal/outlined-styles.css.js';
|
|
4
|
+
import { styles as outlinedForcedColorsStyles, styles as outlinedStyles, } from '@material/web/textfield/internal/outlined-styles.css.js';
|
|
6
5
|
import { styles as sharedStyles } from '@material/web/textfield/internal/shared-styles.css.js';
|
|
7
6
|
import intlTelInput from 'intl-tel-input';
|
|
8
7
|
import { LitElement, html, nothing } from 'lit';
|
package/dist/IxPhoneInput.js.map
CHANGED
|
@@ -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 { styles as outlinedForcedColorsStyles } from '@material/web/textfield/internal/outlined-forced-colors-styles.css.js';\nimport { styles as outlinedStyles } 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":";AAAA,OAAO,sCAAsC,CAAC;AAE9C,OAAO,EAAE,yBAAyB,EAAE,MAAM,yCAAyC,CAAC;AACpF,OAAO,EACL,MAAM,IAAI,0BAA0B,EACpC,MAAM,IAAI,cAAc,GACzB,MAAM,yDAAyD,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,uDAAuD,CAAC;AAC/F,OAAO,YAAwB,MAAM,gBAAgB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAkB,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,OAAO,YAAa,SAAQ,UAAU;IAA5C;;QA6BmB,cAAS,GAAI,IAAoB,CAAC,wBAAwB;aACxE,eAAe,EAAE,CAAC;QAGJ,SAAI,GAAG,KAAK,CAAC;QAEc,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;;;WAKG;QACyC,UAAK,GAAG,KAAK,CAAC;QAE1D;;;;;;;WAOG;QACoC,cAAS,GAAG,EAAE,CAAC;QAEtD;;;WAGG;QACyC,mBAAc,GAAG,EAAE,CAAC;QAEpB,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;WAGG;QACc,UAAK,GAAG,KAAK,CAAC;QAEd,YAAO,GAAG,KAAK,CAAC;QAEjC;;WAEG;QACc,gBAAW,GAAG,KAAK,CAAC;QAErC;;;WAGG;QACc,oBAAe,GAAG,EAAE,CAAC;QA8L9B,2BAAsB,GAAG,KAAK,CAAC;QAmB3B,UAAK,GAAG,EAAE,CAAC;QAEK,UAAK,GAAG,EAAE,CAAC;QAEX,WAAM,GAAG,EAAE,CAAC;QAExC,iFAAiF;QACrE,UAAK,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,KAAI,CAAC,CAAC,QAAkB,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC;QAE7E,QAAG,GAAuB,SAAS,CAAC;IAiLtC,CAAC;IAjdC,MAAM,KAAK,MAAM;QACf,OAAO;YACL,YAAY;YACZ,cAAc;YACd,0BAA0B;YAC1B,MAAM,CAAC,YAAY;YACnB,kBAAkB;SACnB,CAAC;IACJ,CAAC;IAgED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACH,IAAI,iBAAiB;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACH,IAAI,QAAQ;QACV,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjC,CAAC;IAED;;;;;OAKG;IACH,IAAI,YAAY;QACd,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC;IACrC,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IAED;;OAEG;IACH,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,IAAI,IAAI;;QACN,OAAO,MAAA,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,mCAAI,EAAE,CAAC;IACzC,CAAC;IAED,IAAI,IAAI,CAAC,IAAY;QACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAClC,CAAC;IAED;;OAEG;IACH,IAAI,kBAAkB;QACpB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,kBAAkB,CAAC;IAC5C,CAAC;IAED,IAAI,kBAAkB,CAAC,KAA6C;QAClE,IAAI,CAAC,QAAQ,EAAE,CAAC,kBAAkB,GAAG,KAAK,CAAC;IAC7C,CAAC;IAED;;OAEG;IACH,IAAI,YAAY;QACd,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,YAAY,CAAC;IACtC,CAAC;IAED,IAAI,YAAY,CAAC,KAAoB;QACnC,IAAI,CAAC,QAAQ,EAAE,CAAC,YAAY,GAAG,KAAK,CAAC;IACvC,CAAC;IAED;;OAEG;IACH,IAAI,cAAc;QAChB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,cAAc,CAAC;IACxC,CAAC;IAED,IAAI,cAAc,CAAC,KAAoB;QACrC,IAAI,CAAC,QAAQ,EAAE,CAAC,cAAc,GAAG,KAAK,CAAC;IACzC,CAAC;IAED;;;;;;;;;OASG;IACH,aAAa;QACX,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAC;IACxC,CAAC;IAED;;;;;;;;;;;;;;;;;OAiBG;IACH,cAAc;;QACZ,IAAI,YAA+B,CAAC;QACpC,IAAI,CAAC,gBAAgB,CACnB,SAAS,EACT,KAAK,CAAC,EAAE;YACN,YAAY,GAAG,KAAK,CAAC;QACvB,CAAC,EACD,EAAE,IAAI,EAAE,IAAI,EAAE,CACf,CAAC;QAEF,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACnC,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,EAAE,CAAC;YACnC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,IAAI,CAAC,WAAW,GAAG,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,CAAC;QAE9C,IAAI,WAAW,KAAK,IAAI,CAAC,YAAY,EAAE,EAAE,CAAC;YACxC,MAAA,IAAI,CAAC,KAAK,0CAAE,eAAe,EAAE,CAAC;QAChC,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC;IAED;;;;OAIG;IACH,MAAM;QACJ,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IACtB,CAAC;IAED;;;;;;;;;;OAUG;IACH,iBAAiB,CAAC,KAAa;QAC7B,IAAI,CAAC,sBAAsB,GAAG,CAAC,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1E,CAAC;IAED;;OAEG;IACH,KAAK;;QACH,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,KAAK,GAAG,MAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,mCAAI,EAAE,CAAC;QAC9C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;IAC5B,CAAC;IAIO,YAAY;QAClB,uEAAuE;QACvE,uEAAuE;QACvE,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC9B,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAChC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC5D,CAAC;aAAM,CAAC;YACN,KAAK,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QAC9B,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,KAAK,CAAC,QAAQ,EACd,KAAK,CAAC,iBAAiB,EACvB,IAAI,CAAC,QAAQ,EAAE,CAChB,CAAC;IACJ,CAAC;IAaO,WAAW;;QACjB,IAAI,MAAA,MAAM,CAAC,iBAAiB,0CAAE,YAAY,EAAE,CAAC;YAC3C,IAAI,CAAC,KAAK;gBACR,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,YAAY,CAAC,IAAI,CAAC,KAAI,EAAE,CAAC;QAC1E,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,CAAgB;QACrC,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO,KAAK,CAAC;QACf,CAAC;QACD,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,OAAO,IAAI,CAAC;IACd,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAC5D,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACtB,CAAC;IAEO,cAAc;QACpB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;IACvB,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,yDAAyD;YACzD,OAAO;YACP,sEAAsE;YACtE,wCAAwC;YACxC,6CAA6C;YAC7C,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,yEAAyE;YACzE,qEAAqE;YACrE,0DAA0D;YAC1D,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,OAAO,IAAI,CAAC,KAAM,CAAC;IACrB,CAAC;IAEkB,YAAY;QAC7B,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,eAAe,EAAE,GAAG,EAAE;YAChD,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,KAAK,EAAE;YAClC,cAAc,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YACzD,YAAY,EAAE,IAAI;YAClB,WAAW,EAAE,MAAM;YACnB,eAAe,EAAE,KAAK;YACtB,WAAW,EAAE,IAAI,CAAC,KAAK;YACvB,WAAW,EAAE,MAAM,CAAC,YAAY;SACjC,CAAC,CAAC;QACH,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE;YACzB,4BAA4B;YAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,wBAAwB,CAC/B,SAAiB,EACjB,QAAuB,EACvB,QAAuB;QAEvB,IAAI,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACxC,uEAAuE;YACvE,0EAA0E;YAC1E,OAAO;QACT,CAAC;QAED,KAAK,CAAC,wBAAwB,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAChE,CAAC;IAED,6DAA6D;IAC1C,OAAO,CAAC,iBAAiC;QAC1D,4DAA4D;QAE5D,uEAAuE;QACvE,4DAA4D;QAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC7B,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACzB,qEAAqE;YACrE,wEAAwE;YACxE,6BAA6B;YAC7B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;QAED,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACnC,wEAAwE;QACxE,gBAAgB;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAES,UAAU,CAAC,iBAAuC;;QAC1D,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,MAAA,IAAI,CAAC,GAAG,0CAAE,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACpC,CAAC;IACH,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAClB,IAAI,CAAC,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;QACtD,6DAA6D;QAC7D,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEQ,oBAAoB;;QAC3B,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,EAAE,CAAC;IACtB,CAAC;IAEkB,MAAM;QACvB,MAAM,OAAO,GAAG;YACd,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;SACvC,CAAC;QAEF,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,OAAO,CAAC;QAE1D,OAAO,IAAI,CAAA;gCACiB,QAAQ,CAAC,OAAO,CAAC;;;kBAG/B,IAAI,CAAC,KAAK,CAAC,MAAM;sBACb,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,QAAQ;uBACT,IAAI,CAAC,YAAY,EAAE;qBACrB,IAAI,CAAC,OAAO;kBACf,IAAI,CAAC,KAAK;uBACL,CAAC,CAAC,IAAI,CAAC,KAAK;sBACb,IAAI,CAAC,QAAQ;4BACP,IAAI,CAAC,cAAc;qBAC1B,IAAI,CAAC,aAAa;sBACjB,IAAI,CAAC,cAAc;;;oBAGrB,IAAI,CAAC,IAAI;oBACT,IAAI,CAAC,IAAI;wBACL,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;2BACV,IAAI,CAAC,QAAQ;yBACf,SAAS;;sBAEZ,IAAI,CAAC,KAAK;sBACV,IAAI,CAAC,WAAW;yBACb,IAAI,CAAC,cAAc;;;;;KAKvC,CAAC;IACJ,CAAC;IAED,eAAe;IACf,iBAAiB;QACf,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAED,eAAe;IACf,wBAAwB,CAAC,QAAgB;QACvC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;IACxB,CAAC;IAEQ,KAAK;QACZ,yEAAyE;QACzE,2EAA2E;QAC3E,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC;IAC1B,CAAC;;AAzdD;IACE,yBAAyB,CAAC,YAAY,CAAC,CAAC;AAC1C,CAAC,GAAA,CAAA;AAiBD,kBAAkB;AACF,8BAAiB,GAAmB;IAClD,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHgC,CAG/B;AAEF,mBAAmB;AACH,2BAAc,GAAG,IAAI,AAAP,CAAQ;AArB7B;IADR,KAAK,CAAC,OAAO,CAAC;2CACmB;AAEA;IAAjC,KAAK,CAAC,QAAQ,CAAC;2CAAuC;AAyBtC;IADhB,QAAQ,EAAE;0CACmB;AAEc;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAQjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAe;AAUnB;IAAtC,QAAQ,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;+CAAgB;AAMV;IAA3C,QAAQ,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;oDAAqB;AAEpB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAM5C;IAAhB,KAAK,EAAE;2CAAuB;AAEd;IAAhB,KAAK,EAAE;6CAAyB;AAKhB;IAAhB,KAAK,EAAE;iDAA6B;AAMpB;IAAhB,KAAK,EAAE;qDAA8B;AAiN1B;IAAX,QAAQ,EAAE;2CAAY;AAEK;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAY;AAEX;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAa;AAG5B;IAAX,QAAQ,EAAE;2CAAkE","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,7 +1,6 @@
|
|
|
1
1
|
import { __decorate } from 'tslib';
|
|
2
2
|
import '@digital-realty/ix-field/ix-field.js';
|
|
3
3
|
import { requestUpdateOnAriaChange } from '@material/web/internal/aria/delegate.js';
|
|
4
|
-
import { styles as styles$2 } from '@material/web/textfield/internal/outlined-forced-colors-styles.css.js';
|
|
5
4
|
import { styles as styles$1 } from '@material/web/textfield/internal/outlined-styles.css.js';
|
|
6
5
|
import { styles } from '@material/web/textfield/internal/shared-styles.css.js';
|
|
7
6
|
import { css, LitElement, nothing, html } from 'lit';
|
|
@@ -34,7 +33,7 @@ var intlTelInput$1 = {exports: {}};
|
|
|
34
33
|
// Order (if >1 country with same dial code),
|
|
35
34
|
// Area codes
|
|
36
35
|
// ]
|
|
37
|
-
var allCountries = [ [ "Afghanistan
|
|
36
|
+
var allCountries = [ [ "Afghanistan", "af", "93" ], [ "Albania", "al", "355" ], [ "Algeria", "dz", "213" ], [ "American Samoa", "as", "1", 5, [ "684" ] ], [ "Andorra", "ad", "376" ], [ "Angola", "ao", "244" ], [ "Anguilla", "ai", "1", 6, [ "264" ] ], [ "Antigua & Barbuda", "ag", "1", 7, [ "268" ] ], [ "Argentina", "ar", "54" ], [ "Armenia", "am", "374" ], [ "Aruba", "aw", "297" ], [ "Ascension Island", "ac", "247" ], [ "Australia", "au", "61", 0 ], [ "Austria", "at", "43" ], [ "Azerbaijan", "az", "994" ], [ "Bahamas", "bs", "1", 8, [ "242" ] ], [ "Bahrain", "bh", "973" ], [ "Bangladesh", "bd", "880" ], [ "Barbados", "bb", "1", 9, [ "246" ] ], [ "Belarus", "by", "375" ], [ "Belgium", "be", "32" ], [ "Belize", "bz", "501" ], [ "Benin", "bj", "229" ], [ "Bermuda", "bm", "1", 10, [ "441" ] ], [ "Bhutan", "bt", "975" ], [ "Bolivia", "bo", "591" ], [ "Bosnia & Herzegovina", "ba", "387" ], [ "Botswana", "bw", "267" ], [ "Brazil", "br", "55" ], [ "British Indian Ocean Territory", "io", "246" ], [ "British Virgin Islands", "vg", "1", 11, [ "284" ] ], [ "Brunei", "bn", "673" ], [ "Bulgaria", "bg", "359" ], [ "Burkina Faso", "bf", "226" ], [ "Burundi", "bi", "257" ], [ "Cambodia", "kh", "855" ], [ "Cameroon", "cm", "237" ], [ "Canada", "ca", "1", 1, [ "204", "226", "236", "249", "250", "263", "289", "306", "343", "354", "365", "367", "368", "382", "387", "403", "416", "418", "428", "431", "437", "438", "450", "584", "468", "474", "506", "514", "519", "548", "579", "581", "584", "587", "604", "613", "639", "647", "672", "683", "705", "709", "742", "753", "778", "780", "782", "807", "819", "825", "867", "873", "902", "905" ] ], [ "Cape Verde", "cv", "238" ], [ "Caribbean Netherlands", "bq", "599", 1, [ "3", "4", "7" ] ], [ "Cayman Islands", "ky", "1", 12, [ "345" ] ], [ "Central African Republic", "cf", "236" ], [ "Chad", "td", "235" ], [ "Chile", "cl", "56" ], [ "China", "cn", "86" ], [ "Christmas Island", "cx", "61", 2, [ "89164" ] ], [ "Cocos (Keeling) Islands", "cc", "61", 1, [ "89162" ] ], [ "Colombia", "co", "57" ], [ "Comoros", "km", "269" ], [ "Congo - Brazzaville", "cg", "242" ], [ "Congo - Kinshasa", "cd", "243" ], [ "Cook Islands", "ck", "682" ], [ "Costa Rica", "cr", "506" ], [ "Côte d’Ivoire", "ci", "225" ], [ "Croatia", "hr", "385" ], [ "Cuba", "cu", "53" ], [ "Curaçao", "cw", "599", 0 ], [ "Cyprus", "cy", "357" ], [ "Czech Republic", "cz", "420" ], [ "Denmark", "dk", "45" ], [ "Djibouti", "dj", "253" ], [ "Dominica", "dm", "1", 13, [ "767" ] ], [ "Dominican Republic", "do", "1", 2, [ "809", "829", "849" ] ], [ "Ecuador", "ec", "593" ], [ "Egypt", "eg", "20" ], [ "El Salvador", "sv", "503" ], [ "Equatorial Guinea", "gq", "240" ], [ "Eritrea", "er", "291" ], [ "Estonia", "ee", "372" ], [ "Eswatini", "sz", "268" ], [ "Ethiopia", "et", "251" ], [ "Falkland Islands", "fk", "500" ], [ "Faroe Islands", "fo", "298" ], [ "Fiji", "fj", "679" ], [ "Finland", "fi", "358", 0 ], [ "France", "fr", "33" ], [ "French Guiana", "gf", "594" ], [ "French Polynesia", "pf", "689" ], [ "Gabon", "ga", "241" ], [ "Gambia", "gm", "220" ], [ "Georgia", "ge", "995" ], [ "Germany", "de", "49" ], [ "Ghana", "gh", "233" ], [ "Gibraltar", "gi", "350" ], [ "Greece", "gr", "30" ], [ "Greenland", "gl", "299" ], [ "Grenada", "gd", "1", 14, [ "473" ] ], [ "Guadeloupe", "gp", "590", 0 ], [ "Guam", "gu", "1", 15, [ "671" ] ], [ "Guatemala", "gt", "502" ], [ "Guernsey", "gg", "44", 1, [ "1481", "7781", "7839", "7911" ] ], [ "Guinea", "gn", "224" ], [ "Guinea-Bissau", "gw", "245" ], [ "Guyana", "gy", "592" ], [ "Haiti", "ht", "509" ], [ "Honduras", "hn", "504" ], [ "Hong Kong", "hk", "852" ], [ "Hungary", "hu", "36" ], [ "Iceland", "is", "354" ], [ "India", "in", "91" ], [ "Indonesia", "id", "62" ], [ "Iran", "ir", "98" ], [ "Iraq", "iq", "964" ], [ "Ireland", "ie", "353" ], [ "Isle of Man", "im", "44", 2, [ "1624", "74576", "7524", "7924", "7624" ] ], [ "Israel", "il", "972" ], [ "Italy", "it", "39", 0 ], [ "Jamaica", "jm", "1", 4, [ "876", "658" ] ], [ "Japan", "jp", "81" ], [ "Jersey", "je", "44", 3, [ "1534", "7509", "7700", "7797", "7829", "7937" ] ], [ "Jordan", "jo", "962" ], [ "Kazakhstan", "kz", "7", 1, [ "33", "7" ] ], [ "Kenya", "ke", "254" ], [ "Kiribati", "ki", "686" ], [ "Kosovo", "xk", "383" ], [ "Kuwait", "kw", "965" ], [ "Kyrgyzstan", "kg", "996" ], [ "Laos", "la", "856" ], [ "Latvia", "lv", "371" ], [ "Lebanon", "lb", "961" ], [ "Lesotho", "ls", "266" ], [ "Liberia", "lr", "231" ], [ "Libya", "ly", "218" ], [ "Liechtenstein", "li", "423" ], [ "Lithuania", "lt", "370" ], [ "Luxembourg", "lu", "352" ], [ "Macau", "mo", "853" ], [ "Madagascar", "mg", "261" ], [ "Malawi", "mw", "265" ], [ "Malaysia", "my", "60" ], [ "Maldives", "mv", "960" ], [ "Mali", "ml", "223" ], [ "Malta", "mt", "356" ], [ "Marshall Islands", "mh", "692" ], [ "Martinique", "mq", "596" ], [ "Mauritania", "mr", "222" ], [ "Mauritius", "mu", "230" ], [ "Mayotte", "yt", "262", 1, [ "269", "639" ] ], [ "Mexico", "mx", "52" ], [ "Micronesia", "fm", "691" ], [ "Moldova", "md", "373" ], [ "Monaco", "mc", "377" ], [ "Mongolia", "mn", "976" ], [ "Montenegro", "me", "382" ], [ "Montserrat", "ms", "1", 16, [ "664" ] ], [ "Morocco", "ma", "212", 0 ], [ "Mozambique", "mz", "258" ], [ "Myanmar (Burma)", "mm", "95" ], [ "Namibia", "na", "264" ], [ "Nauru", "nr", "674" ], [ "Nepal", "np", "977" ], [ "Netherlands", "nl", "31" ], [ "New Caledonia", "nc", "687" ], [ "New Zealand", "nz", "64" ], [ "Nicaragua", "ni", "505" ], [ "Niger", "ne", "227" ], [ "Nigeria", "ng", "234" ], [ "Niue", "nu", "683" ], [ "Norfolk Island", "nf", "672" ], [ "North Korea", "kp", "850" ], [ "North Macedonia", "mk", "389" ], [ "Northern Mariana Islands", "mp", "1", 17, [ "670" ] ], [ "Norway", "no", "47", 0 ], [ "Oman", "om", "968" ], [ "Pakistan", "pk", "92" ], [ "Palau", "pw", "680" ], [ "Palestine", "ps", "970" ], [ "Panama", "pa", "507" ], [ "Papua New Guinea", "pg", "675" ], [ "Paraguay", "py", "595" ], [ "Peru", "pe", "51" ], [ "Philippines", "ph", "63" ], [ "Poland", "pl", "48" ], [ "Portugal", "pt", "351" ], [ "Puerto Rico", "pr", "1", 3, [ "787", "939" ] ], [ "Qatar", "qa", "974" ], [ "Réunion", "re", "262", 0 ], [ "Romania", "ro", "40" ], [ "Russia", "ru", "7", 0 ], [ "Rwanda", "rw", "250" ], [ "Samoa", "ws", "685" ], [ "San Marino", "sm", "378" ], [ "São Tomé & Príncipe", "st", "239" ], [ "Saudi Arabia", "sa", "966" ], [ "Senegal", "sn", "221" ], [ "Serbia", "rs", "381" ], [ "Seychelles", "sc", "248" ], [ "Sierra Leone", "sl", "232" ], [ "Singapore", "sg", "65" ], [ "Sint Maarten", "sx", "1", 21, [ "721" ] ], [ "Slovakia", "sk", "421" ], [ "Slovenia", "si", "386" ], [ "Solomon Islands", "sb", "677" ], [ "Somalia", "so", "252" ], [ "South Africa", "za", "27" ], [ "South Korea", "kr", "82" ], [ "South Sudan", "ss", "211" ], [ "Spain", "es", "34" ], [ "Sri Lanka", "lk", "94" ], [ "St Barthélemy", "bl", "590", 1 ], [ "St Helena", "sh", "290" ], [ "St Kitts & Nevis", "kn", "1", 18, [ "869" ] ], [ "St Lucia", "lc", "1", 19, [ "758" ] ], [ "St Martin", "mf", "590", 2 ], [ "St Pierre & Miquelon", "pm", "508" ], [ "St Vincent & Grenadines", "vc", "1", 20, [ "784" ] ], [ "Sudan", "sd", "249" ], [ "Suriname", "sr", "597" ], [ "Svalbard & Jan Mayen", "sj", "47", 1, [ "79" ] ], [ "Sweden", "se", "46" ], [ "Switzerland", "ch", "41" ], [ "Syria", "sy", "963" ], [ "Taiwan", "tw", "886" ], [ "Tajikistan", "tj", "992" ], [ "Tanzania", "tz", "255" ], [ "Thailand", "th", "66" ], [ "Timor-Leste", "tl", "670" ], [ "Togo", "tg", "228" ], [ "Tokelau", "tk", "690" ], [ "Tonga", "to", "676" ], [ "Trinidad & Tobago", "tt", "1", 22, [ "868" ] ], [ "Tunisia", "tn", "216" ], [ "Turkey", "tr", "90" ], [ "Turkmenistan", "tm", "993" ], [ "Turks & Caicos Islands", "tc", "1", 23, [ "649" ] ], [ "Tuvalu", "tv", "688" ], [ "Uganda", "ug", "256" ], [ "Ukraine", "ua", "380" ], [ "United Arab Emirates", "ae", "971" ], [ "United Kingdom", "gb", "44", 0 ], [ "United States", "us", "1", 0 ], [ "Uruguay", "uy", "598" ], [ "US Virgin Islands", "vi", "1", 24, [ "340" ] ], [ "Uzbekistan", "uz", "998" ], [ "Vanuatu", "vu", "678" ], [ "Vatican City", "va", "39", 1, [ "06698" ] ], [ "Venezuela", "ve", "58" ], [ "Vietnam", "vn", "84" ], [ "Wallis & Futuna", "wf", "681" ], [ "Western Sahara", "eh", "212", 1, [ "5288", "5289" ] ], [ "Yemen", "ye", "967" ], [ "Zambia", "zm", "260" ], [ "Zimbabwe", "zw", "263" ], [ "Åland Islands", "ax", "358", 1, [ "18" ] ] ];
|
|
38
37
|
// loop over all of the countries above, restructuring the data to be objects with named keys
|
|
39
38
|
for (var i = 0; i < allCountries.length; i++) {
|
|
40
39
|
var c = allCountries[i];
|
|
@@ -135,6 +134,8 @@ var intlTelInput$1 = {exports: {}};
|
|
|
135
134
|
autoInsertDialCode: false,
|
|
136
135
|
// add a placeholder in the input with an example number for the selected country
|
|
137
136
|
autoPlaceholder: "polite",
|
|
137
|
+
// add a country search input at the top of the dropdown
|
|
138
|
+
countrySearch: false,
|
|
138
139
|
// modify the parentClass
|
|
139
140
|
customContainer: "",
|
|
140
141
|
// modify the auto placeholder
|
|
@@ -143,6 +144,8 @@ var intlTelInput$1 = {exports: {}};
|
|
|
143
144
|
dropdownContainer: null,
|
|
144
145
|
// don't display these countries
|
|
145
146
|
excludeCountries: [],
|
|
147
|
+
// fix the dropdown width to the input width (rather than being as wide as the longest country name)
|
|
148
|
+
fixDropdownWidth: false,
|
|
146
149
|
// format the input value during initialisation and on setNumber
|
|
147
150
|
formatOnDisplay: true,
|
|
148
151
|
// geoIp lookup function
|
|
@@ -166,10 +169,10 @@ var intlTelInput$1 = {exports: {}};
|
|
|
166
169
|
// option to hide the flags - must be used with separateDialCode, or allowDropdown=false
|
|
167
170
|
showFlags: true,
|
|
168
171
|
// use full screen popup instead of dropdown for country list
|
|
169
|
-
useFullscreenPopup: // we cannot just test screen size as some smartphones/website meta tags will report desktop
|
|
172
|
+
useFullscreenPopup: typeof navigator !== "undefined" && typeof window !== "undefined" ? // we cannot just test screen size as some smartphones/website meta tags will report desktop
|
|
170
173
|
// resolutions
|
|
171
174
|
// Note: to target Android Mobiles (and not Tablets), we must find 'Android' and 'Mobile'
|
|
172
|
-
/Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 500,
|
|
175
|
+
/Android.+Mobile|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) || window.innerWidth <= 500 : false,
|
|
173
176
|
// specify the path to the libphonenumber script to enable validation/formatting
|
|
174
177
|
utilsScript: ""
|
|
175
178
|
};
|
|
@@ -212,6 +215,14 @@ var intlTelInput$1 = {exports: {}};
|
|
|
212
215
|
key: "_init",
|
|
213
216
|
value: function _init() {
|
|
214
217
|
var _this2 = this;
|
|
218
|
+
// if showing fullscreen popup, do not fix the width
|
|
219
|
+
if (this.options.useFullscreenPopup) {
|
|
220
|
+
this.options.fixDropdownWidth = false;
|
|
221
|
+
}
|
|
222
|
+
// when search enabled, we must fix the width else it would change with different results
|
|
223
|
+
if (this.options.countrySearch && !this.options.useFullscreenPopup) {
|
|
224
|
+
this.options.fixDropdownWidth = true;
|
|
225
|
+
}
|
|
215
226
|
// if in nationalMode, do not insert dial codes
|
|
216
227
|
if (this.options.nationalMode) {
|
|
217
228
|
this.options.autoInsertDialCode = false;
|
|
@@ -226,13 +237,9 @@ var intlTelInput$1 = {exports: {}};
|
|
|
226
237
|
if (!this.options.showFlags && forceShowFlags) {
|
|
227
238
|
this.options.showFlags = true;
|
|
228
239
|
}
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
document.body
|
|
232
|
-
// on mobile, we want a full screen dropdown, so we must append it to the body
|
|
233
|
-
if (!this.options.dropdownContainer) {
|
|
234
|
-
this.options.dropdownContainer = document.body;
|
|
235
|
-
}
|
|
240
|
+
// on mobile, we want a full screen dropdown, so we must append it to the body
|
|
241
|
+
if (this.options.useFullscreenPopup && !this.options.dropdownContainer) {
|
|
242
|
+
this.options.dropdownContainer = document.body;
|
|
236
243
|
}
|
|
237
244
|
// check if input has one parent with RTL
|
|
238
245
|
this.isRTL = !!this.telInput.closest("[dir=rtl]");
|
|
@@ -417,6 +424,7 @@ var intlTelInput$1 = {exports: {}};
|
|
|
417
424
|
}, {
|
|
418
425
|
key: "_generateMarkup",
|
|
419
426
|
value: function _generateMarkup() {
|
|
427
|
+
this.telInput.classList.add("iti__tel-input");
|
|
420
428
|
// if autocomplete does not exist on the element and its form, then
|
|
421
429
|
// prevent autocomplete as there's no safe, cross-browser event we can react to, so it can
|
|
422
430
|
// easily put the plugin in an inconsistent state e.g. the wrong flag selected for the
|
|
@@ -424,7 +432,7 @@ var intlTelInput$1 = {exports: {}};
|
|
|
424
432
|
if (!this.telInput.hasAttribute("autocomplete") && !(this.telInput.form && this.telInput.form.hasAttribute("autocomplete"))) {
|
|
425
433
|
this.telInput.setAttribute("autocomplete", "off");
|
|
426
434
|
}
|
|
427
|
-
var _this$options = this.options, allowDropdown = _this$options.allowDropdown, separateDialCode = _this$options.separateDialCode, showFlags = _this$options.showFlags, customContainer = _this$options.customContainer, hiddenInput = _this$options.hiddenInput, dropdownContainer = _this$options.dropdownContainer;
|
|
435
|
+
var _this$options = this.options, allowDropdown = _this$options.allowDropdown, separateDialCode = _this$options.separateDialCode, showFlags = _this$options.showFlags, customContainer = _this$options.customContainer, hiddenInput = _this$options.hiddenInput, dropdownContainer = _this$options.dropdownContainer, fixDropdownWidth = _this$options.fixDropdownWidth, useFullscreenPopup = _this$options.useFullscreenPopup, countrySearch = _this$options.countrySearch;
|
|
428
436
|
// containers (mostly for positioning)
|
|
429
437
|
var parentClass = "iti";
|
|
430
438
|
if (allowDropdown) {
|
|
@@ -486,30 +494,47 @@ var intlTelInput$1 = {exports: {}};
|
|
|
486
494
|
this.dropdownArrow = this._createEl("div", {
|
|
487
495
|
"class": "iti__arrow"
|
|
488
496
|
}, this.selectedFlag);
|
|
489
|
-
|
|
497
|
+
var extraClasses = fixDropdownWidth ? "" : "iti--flexible-dropdown-width";
|
|
498
|
+
this.dropdownContent = this._createEl("div", {
|
|
499
|
+
"class": "iti__dropdown-content iti__hide ".concat(extraClasses)
|
|
500
|
+
});
|
|
501
|
+
if (countrySearch) {
|
|
502
|
+
this.searchInput = this._createEl("input", {
|
|
503
|
+
type: "text",
|
|
504
|
+
"class": "iti__search-input",
|
|
505
|
+
placeholder: "Search"
|
|
506
|
+
}, this.dropdownContent);
|
|
507
|
+
}
|
|
508
|
+
// country list: preferred countries, then divider, then all countries
|
|
490
509
|
this.countryList = this._createEl("ul", {
|
|
491
|
-
"class": "iti__country-list
|
|
510
|
+
"class": "iti__country-list",
|
|
492
511
|
id: "iti-".concat(this.id, "__country-listbox"),
|
|
493
512
|
role: "listbox",
|
|
494
513
|
"aria-label": "List of countries"
|
|
495
|
-
});
|
|
496
|
-
if (this.preferredCountries.length) {
|
|
514
|
+
}, this.dropdownContent);
|
|
515
|
+
if (this.preferredCountries.length && !countrySearch) {
|
|
497
516
|
this._appendListItems(this.preferredCountries, "iti__preferred", true);
|
|
498
517
|
this._createEl("li", {
|
|
499
518
|
"class": "iti__divider",
|
|
500
|
-
|
|
501
|
-
"aria-disabled": "true"
|
|
519
|
+
"aria-hidden": "true"
|
|
502
520
|
}, this.countryList);
|
|
503
521
|
}
|
|
504
522
|
this._appendListItems(this.countries, "iti__standard");
|
|
505
523
|
// create dropdownContainer markup
|
|
506
524
|
if (dropdownContainer) {
|
|
525
|
+
var dropdownClasses = "iti iti--container";
|
|
526
|
+
if (useFullscreenPopup) {
|
|
527
|
+
dropdownClasses += " iti--fullscreen-popup";
|
|
528
|
+
}
|
|
529
|
+
if (countrySearch) {
|
|
530
|
+
dropdownClasses += " iti--country-search";
|
|
531
|
+
}
|
|
507
532
|
this.dropdown = this._createEl("div", {
|
|
508
|
-
"class":
|
|
533
|
+
"class": dropdownClasses
|
|
509
534
|
});
|
|
510
|
-
this.dropdown.appendChild(this.
|
|
535
|
+
this.dropdown.appendChild(this.dropdownContent);
|
|
511
536
|
} else {
|
|
512
|
-
this.flagsContainer.appendChild(this.
|
|
537
|
+
this.flagsContainer.appendChild(this.dropdownContent);
|
|
513
538
|
}
|
|
514
539
|
}
|
|
515
540
|
if (hiddenInput) {
|
|
@@ -533,26 +558,30 @@ var intlTelInput$1 = {exports: {}};
|
|
|
533
558
|
}, {
|
|
534
559
|
key: "_appendListItems",
|
|
535
560
|
value: function _appendListItems(countries, className, preferred) {
|
|
536
|
-
// we create so many DOM elements, it is faster to build a temp string
|
|
537
|
-
// and then add everything to the DOM in one go at the end
|
|
538
|
-
var tmp = "";
|
|
539
|
-
// for each country
|
|
540
561
|
for (var i = 0; i < countries.length; i++) {
|
|
541
562
|
var c = countries[i];
|
|
542
563
|
var idSuffix = preferred ? "-preferred" : "";
|
|
543
|
-
|
|
544
|
-
|
|
564
|
+
var listItem = this._createEl("li", {
|
|
565
|
+
id: "iti-".concat(this.id, "__item-").concat(c.iso2).concat(idSuffix),
|
|
566
|
+
"class": "iti__country ".concat(className),
|
|
567
|
+
tabindex: "-1",
|
|
568
|
+
role: "option",
|
|
569
|
+
"data-dial-code": c.dialCode,
|
|
570
|
+
"data-country-code": c.iso2,
|
|
571
|
+
"aria-selected": "false"
|
|
572
|
+
}, this.countryList);
|
|
573
|
+
// store this for later use e.g. country search filtering
|
|
574
|
+
c.node = listItem;
|
|
575
|
+
var content = "";
|
|
545
576
|
// add the flag
|
|
546
577
|
if (this.options.showFlags) {
|
|
547
|
-
|
|
578
|
+
content += "<div class='iti__flag-box'><div class='iti__flag iti__".concat(c.iso2, "'></div></div>");
|
|
548
579
|
}
|
|
549
580
|
// and the country name and dial code
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
tmp += "</li>";
|
|
581
|
+
content += "<span class='iti__country-name'>".concat(c.name, "</span>");
|
|
582
|
+
content += "<span class='iti__dial-code'>+".concat(c.dialCode, "</span>");
|
|
583
|
+
listItem.insertAdjacentHTML("beforeend", content);
|
|
554
584
|
}
|
|
555
|
-
this.countryList.insertAdjacentHTML("beforeend", tmp);
|
|
556
585
|
}
|
|
557
586
|
}, {
|
|
558
587
|
key: "_setInitialState",
|
|
@@ -572,8 +601,9 @@ var intlTelInput$1 = {exports: {}};
|
|
|
572
601
|
if (dialCode && !isRegionlessNanp) {
|
|
573
602
|
this._updateFlagFromNumber(val);
|
|
574
603
|
} else if (initialCountry !== "auto") {
|
|
604
|
+
var isValidInitialCountry = initialCountry && this._getCountryData(initialCountry, false, true);
|
|
575
605
|
// see if we should select a flag
|
|
576
|
-
if (
|
|
606
|
+
if (isValidInitialCountry) {
|
|
577
607
|
this._setFlag(initialCountry.toLowerCase());
|
|
578
608
|
} else {
|
|
579
609
|
if (dialCode && isRegionlessNanp) {
|
|
@@ -641,7 +671,7 @@ var intlTelInput$1 = {exports: {}};
|
|
|
641
671
|
// close it again
|
|
642
672
|
this._handleLabelClick = function(e) {
|
|
643
673
|
// if the dropdown is closed, then focus the input, else ignore the click
|
|
644
|
-
if (_this4.
|
|
674
|
+
if (_this4.dropdownContent.classList.contains("iti__hide")) {
|
|
645
675
|
_this4.telInput.focus();
|
|
646
676
|
} else {
|
|
647
677
|
e.preventDefault();
|
|
@@ -656,15 +686,15 @@ var intlTelInput$1 = {exports: {}};
|
|
|
656
686
|
// only intercept this event if we're opening the dropdown
|
|
657
687
|
// else let it bubble up to the top ("click-off-to-close" listener)
|
|
658
688
|
// we cannot just stopPropagation as it may be needed to close another instance
|
|
659
|
-
if (_this4.
|
|
689
|
+
if (_this4.dropdownContent.classList.contains("iti__hide") && !_this4.telInput.disabled && !_this4.telInput.readOnly) {
|
|
660
690
|
_this4._showDropdown();
|
|
661
691
|
}
|
|
662
692
|
};
|
|
663
693
|
this.selectedFlag.addEventListener("click", this._handleClickSelectedFlag);
|
|
664
|
-
// open dropdown
|
|
694
|
+
// open dropdown if selected flag is focused and they press up/down/space/enter
|
|
665
695
|
this._handleFlagsContainerKeydown = function(e) {
|
|
666
|
-
var isDropdownHidden = _this4.
|
|
667
|
-
if (isDropdownHidden && [ "ArrowUp", "
|
|
696
|
+
var isDropdownHidden = _this4.dropdownContent.classList.contains("iti__hide");
|
|
697
|
+
if (isDropdownHidden && [ "ArrowUp", "ArrowDown", " ", "Enter" ].includes(e.key)) {
|
|
668
698
|
// prevent form from being submitted if "ENTER" was pressed
|
|
669
699
|
e.preventDefault();
|
|
670
700
|
// prevent event from being handled again by document
|
|
@@ -798,11 +828,18 @@ var intlTelInput$1 = {exports: {}};
|
|
|
798
828
|
}, {
|
|
799
829
|
key: "_showDropdown",
|
|
800
830
|
value: function _showDropdown() {
|
|
801
|
-
this.
|
|
831
|
+
if (this.options.fixDropdownWidth) {
|
|
832
|
+
this.dropdownContent.style.width = "".concat(this.telInput.offsetWidth, "px");
|
|
833
|
+
}
|
|
834
|
+
this.dropdownContent.classList.remove("iti__hide");
|
|
802
835
|
this.selectedFlag.setAttribute("aria-expanded", "true");
|
|
803
836
|
this._setDropdownPosition();
|
|
804
|
-
|
|
805
|
-
|
|
837
|
+
if (this.options.countrySearch) {
|
|
838
|
+
// start by highlighting the first item in the list
|
|
839
|
+
this._highlightListItem(this.countryList.firstElementChild, false);
|
|
840
|
+
this.searchInput.focus();
|
|
841
|
+
} else if (this.activeItem) {
|
|
842
|
+
// update highlighting and scroll to active list item
|
|
806
843
|
this._highlightListItem(this.activeItem, false);
|
|
807
844
|
this._scrollTo(this.activeItem, true);
|
|
808
845
|
}
|
|
@@ -833,18 +870,20 @@ var intlTelInput$1 = {exports: {}};
|
|
|
833
870
|
// windowTop from https://stackoverflow.com/a/14384091/217866
|
|
834
871
|
var windowTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
835
872
|
var inputTop = pos.top + windowTop;
|
|
836
|
-
var dropdownHeight = this.
|
|
873
|
+
var dropdownHeight = this.dropdownContent.offsetHeight;
|
|
837
874
|
// dropdownFitsBelow = (dropdownBottom < windowBottom)
|
|
838
875
|
var dropdownFitsBelow = inputTop + this.telInput.offsetHeight + dropdownHeight < windowTop + window.innerHeight;
|
|
839
876
|
var dropdownFitsAbove = inputTop - dropdownHeight > windowTop;
|
|
877
|
+
// dont allow positioning above when country search enabled as the search box jumps around as you filter countries
|
|
878
|
+
var positionDropdownAboveInput = !this.options.countrySearch && !dropdownFitsBelow && dropdownFitsAbove;
|
|
840
879
|
// by default, the dropdown will be below the input. If we want to position it above the
|
|
841
880
|
// input, we add the dropup class.
|
|
842
|
-
this._toggleClass(this.
|
|
881
|
+
this._toggleClass(this.dropdownContent, "iti__dropdown-content--dropup", positionDropdownAboveInput);
|
|
843
882
|
// if dropdownContainer is enabled, calculate postion
|
|
844
883
|
if (this.options.dropdownContainer) {
|
|
845
884
|
// by default the dropdown will be directly over the input because it's not in the flow.
|
|
846
885
|
// If we want to position it below, we need to add some extra top value.
|
|
847
|
-
var extraTop =
|
|
886
|
+
var extraTop = positionDropdownAboveInput ? 0 : this.telInput.offsetHeight;
|
|
848
887
|
// calculate placement
|
|
849
888
|
this.dropdown.style.top = "".concat(inputTop + extraTop, "px");
|
|
850
889
|
this.dropdown.style.left = "".concat(pos.left + document.body.scrollLeft, "px");
|
|
@@ -899,7 +938,7 @@ var intlTelInput$1 = {exports: {}};
|
|
|
899
938
|
isOpening = false;
|
|
900
939
|
};
|
|
901
940
|
document.documentElement.addEventListener("click", this._handleClickOffToClose);
|
|
902
|
-
// listen for up/down scrolling, enter to select, or
|
|
941
|
+
// listen for up/down scrolling, enter to select, or escape to close
|
|
903
942
|
// use keydown as keypress doesn't fire for non-char keys and we want to catch if they
|
|
904
943
|
// just hit down and hold it to scroll down (no keyup event).
|
|
905
944
|
// listen on the document because that's where key events are triggered if no input has focus
|
|
@@ -908,15 +947,22 @@ var intlTelInput$1 = {exports: {}};
|
|
|
908
947
|
this._handleKeydownOnDropdown = function(e) {
|
|
909
948
|
// prevent down key from scrolling the whole page,
|
|
910
949
|
// and enter key from submitting a form etc
|
|
911
|
-
e.
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
950
|
+
if ([ "ArrowUp", "ArrowDown", "Enter", "Escape" ].includes(e.key)) {
|
|
951
|
+
e.preventDefault();
|
|
952
|
+
e.stopPropagation();
|
|
953
|
+
// up and down to navigate
|
|
954
|
+
if (e.key === "ArrowUp" || e.key === "ArrowDown") {
|
|
955
|
+
_this9._handleUpDownKey(e.key);
|
|
956
|
+
} else if (e.key === "Enter") {
|
|
957
|
+
_this9._handleEnterKey();
|
|
958
|
+
} else if (e.key === "Escape") {
|
|
959
|
+
_this9._closeDropdown();
|
|
960
|
+
}
|
|
961
|
+
}
|
|
962
|
+
// alpha chars to perform search
|
|
963
|
+
// regex allows one latin alpha char or space, based on https://stackoverflow.com/a/26900132/217866)
|
|
964
|
+
if (!_this9.options.countrySearch && /^[a-zA-ZÀ-ÿа-яА-Я ]$/.test(e.key)) {
|
|
965
|
+
e.stopPropagation();
|
|
920
966
|
// jump to countries that start with the query string
|
|
921
967
|
if (queryTimer) {
|
|
922
968
|
clearTimeout(queryTimer);
|
|
@@ -930,17 +976,73 @@ var intlTelInput$1 = {exports: {}};
|
|
|
930
976
|
}
|
|
931
977
|
};
|
|
932
978
|
document.addEventListener("keydown", this._handleKeydownOnDropdown);
|
|
979
|
+
if (this.options.countrySearch) {
|
|
980
|
+
var doFilter = function doFilter() {
|
|
981
|
+
var inputQuery = _this9.searchInput.value.trim();
|
|
982
|
+
if (inputQuery) {
|
|
983
|
+
_this9._filterCountries(inputQuery.toLowerCase());
|
|
984
|
+
} else {
|
|
985
|
+
_this9._filterCountries(null, true);
|
|
986
|
+
}
|
|
987
|
+
};
|
|
988
|
+
var keyupTimer = null;
|
|
989
|
+
this._handleSearchChange = function() {
|
|
990
|
+
// filtering country nodes is expensive (lots of DOM manipulation), so rate limit it
|
|
991
|
+
if (keyupTimer) {
|
|
992
|
+
clearTimeout(keyupTimer);
|
|
993
|
+
}
|
|
994
|
+
keyupTimer = setTimeout(function() {
|
|
995
|
+
doFilter();
|
|
996
|
+
keyupTimer = null;
|
|
997
|
+
}, 100);
|
|
998
|
+
};
|
|
999
|
+
this.searchInput.addEventListener("input", this._handleSearchChange);
|
|
1000
|
+
// stop propagation on search input click, so doesn't trigger click-off-to-close listener
|
|
1001
|
+
this.searchInput.addEventListener("click", function(e) {
|
|
1002
|
+
return e.stopPropagation();
|
|
1003
|
+
});
|
|
1004
|
+
}
|
|
1005
|
+
}
|
|
1006
|
+
}, {
|
|
1007
|
+
key: "_filterCountries",
|
|
1008
|
+
value: function _filterCountries(query) {
|
|
1009
|
+
var isReset = arguments.length > 1 && arguments[1] !== undefined$1 ? arguments[1] : false;
|
|
1010
|
+
var isFirst = true;
|
|
1011
|
+
this.countryList.innerHTML = "";
|
|
1012
|
+
for (var i = 0; i < this.countries.length; i++) {
|
|
1013
|
+
var c = this.countries[i];
|
|
1014
|
+
var nameLower = c.name.toLowerCase();
|
|
1015
|
+
var fullDialCode = "+".concat(c.dialCode);
|
|
1016
|
+
if (isReset || nameLower.includes(query) || fullDialCode.includes(query)) {
|
|
1017
|
+
this.countryList.appendChild(c.node);
|
|
1018
|
+
// highlight the first item
|
|
1019
|
+
if (isFirst) {
|
|
1020
|
+
this._highlightListItem(c.node, false);
|
|
1021
|
+
isFirst = false;
|
|
1022
|
+
}
|
|
1023
|
+
}
|
|
1024
|
+
}
|
|
933
1025
|
}
|
|
934
1026
|
}, {
|
|
935
1027
|
key: "_handleUpDownKey",
|
|
936
1028
|
value: function _handleUpDownKey(key) {
|
|
937
|
-
var next = key === "ArrowUp"
|
|
1029
|
+
var next = key === "ArrowUp" ? this.highlightedItem.previousElementSibling : this.highlightedItem.nextElementSibling;
|
|
938
1030
|
if (next) {
|
|
939
1031
|
// skip the divider
|
|
940
1032
|
if (next.classList.contains("iti__divider")) {
|
|
941
|
-
next = key === "ArrowUp"
|
|
1033
|
+
next = key === "ArrowUp" ? next.previousElementSibling : next.nextElementSibling;
|
|
1034
|
+
}
|
|
1035
|
+
} else if (this.countryList.childElementCount > 1) {
|
|
1036
|
+
// otherwise, we must be at the end, so loop round again
|
|
1037
|
+
next = key === "ArrowUp" ? this.countryList.lastElementChild : this.countryList.firstElementChild;
|
|
1038
|
+
}
|
|
1039
|
+
if (next) {
|
|
1040
|
+
// if country search enabled, dont lose focus from the search input on up/down
|
|
1041
|
+
var doFocus = !this.options.countrySearch;
|
|
1042
|
+
this._highlightListItem(next, doFocus);
|
|
1043
|
+
if (this.options.countrySearch) {
|
|
1044
|
+
this._scrollTo(next, false);
|
|
942
1045
|
}
|
|
943
|
-
this._highlightListItem(next, true);
|
|
944
1046
|
}
|
|
945
1047
|
}
|
|
946
1048
|
}, {
|
|
@@ -955,7 +1057,7 @@ var intlTelInput$1 = {exports: {}};
|
|
|
955
1057
|
value: function _searchForCountry(query) {
|
|
956
1058
|
for (var i = 0; i < this.countries.length; i++) {
|
|
957
1059
|
if (this._startsWith(this.countries[i].name, query)) {
|
|
958
|
-
var listItem = this.
|
|
1060
|
+
var listItem = this.countries[i].node;
|
|
959
1061
|
// update highlighting and scroll
|
|
960
1062
|
this._highlightListItem(listItem, false);
|
|
961
1063
|
this._scrollTo(listItem, true);
|
|
@@ -970,8 +1072,8 @@ var intlTelInput$1 = {exports: {}};
|
|
|
970
1072
|
}
|
|
971
1073
|
}, {
|
|
972
1074
|
key: "_updateValFromNumber",
|
|
973
|
-
value: function _updateValFromNumber(
|
|
974
|
-
var number =
|
|
1075
|
+
value: function _updateValFromNumber(fullNumber) {
|
|
1076
|
+
var number = fullNumber;
|
|
975
1077
|
if (this.options.formatOnDisplay && window.intlTelInputUtils && this.selectedCountryData) {
|
|
976
1078
|
var useNational = this.options.nationalMode || number.charAt(0) !== "+" && !this.options.separateDialCode;
|
|
977
1079
|
var _intlTelInputUtils$nu = intlTelInputUtils.numberFormat, NATIONAL = _intlTelInputUtils$nu.NATIONAL, INTERNATIONAL = _intlTelInputUtils$nu.INTERNATIONAL;
|
|
@@ -983,13 +1085,17 @@ var intlTelInput$1 = {exports: {}};
|
|
|
983
1085
|
}
|
|
984
1086
|
}, {
|
|
985
1087
|
key: "_updateFlagFromNumber",
|
|
986
|
-
value: function _updateFlagFromNumber(
|
|
1088
|
+
value: function _updateFlagFromNumber(fullNumber) {
|
|
1089
|
+
var plusIndex = fullNumber.indexOf("+");
|
|
1090
|
+
// if it contains a plus, discard any chars before it e.g. accidental space char.
|
|
1091
|
+
// this keeps the selected country auto-updating correctly, which we want as
|
|
1092
|
+
// libphonenumber's validation/getNumber methods will ignore these chars anyway
|
|
1093
|
+
var number = plusIndex ? fullNumber.substring(plusIndex) : fullNumber;
|
|
987
1094
|
// if we already have US/Canada selected, make sure the number starts
|
|
988
1095
|
// with a +1 so _getDialCode will be able to extract the area code
|
|
989
1096
|
// update: if we dont yet have selectedCountryData, but we're here (trying to update the flag
|
|
990
1097
|
// from the number), that means we're initialising the plugin with a number that already has a
|
|
991
1098
|
// dial code, so fine to ignore this bit
|
|
992
|
-
var number = originalNumber;
|
|
993
1099
|
var selectedDialCode = this.selectedCountryData.dialCode;
|
|
994
1100
|
var isNanp = selectedDialCode === "1";
|
|
995
1101
|
if (number && isNanp && number.charAt(0) !== "+") {
|
|
@@ -1195,13 +1301,16 @@ var intlTelInput$1 = {exports: {}};
|
|
|
1195
1301
|
}, {
|
|
1196
1302
|
key: "_closeDropdown",
|
|
1197
1303
|
value: function _closeDropdown() {
|
|
1198
|
-
this.
|
|
1304
|
+
this.dropdownContent.classList.add("iti__hide");
|
|
1199
1305
|
this.selectedFlag.setAttribute("aria-expanded", "false");
|
|
1200
1306
|
this.selectedFlag.removeAttribute("aria-activedescendant");
|
|
1201
1307
|
// update the arrow
|
|
1202
1308
|
this.dropdownArrow.classList.remove("iti__arrow--up");
|
|
1203
1309
|
// unbind key events
|
|
1204
1310
|
document.removeEventListener("keydown", this._handleKeydownOnDropdown);
|
|
1311
|
+
if (this.options.countrySearch) {
|
|
1312
|
+
this.searchInput.removeEventListener("input", this._handleSearchChange);
|
|
1313
|
+
}
|
|
1205
1314
|
document.documentElement.removeEventListener("click", this._handleClickOffToClose);
|
|
1206
1315
|
this.countryList.removeEventListener("mouseover", this._handleMouseoverCountryList);
|
|
1207
1316
|
this.countryList.removeEventListener("click", this._handleClickCountryList);
|
|
@@ -1219,7 +1328,7 @@ var intlTelInput$1 = {exports: {}};
|
|
|
1219
1328
|
}, {
|
|
1220
1329
|
key: "_scrollTo",
|
|
1221
1330
|
value: function _scrollTo(element, middle) {
|
|
1222
|
-
var container = this.
|
|
1331
|
+
var container = this.dropdownContent;
|
|
1223
1332
|
// windowTop from https://stackoverflow.com/a/14384091/217866
|
|
1224
1333
|
var windowTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
1225
1334
|
var containerHeight = container.offsetHeight;
|
|
@@ -1326,8 +1435,8 @@ var intlTelInput$1 = {exports: {}};
|
|
|
1326
1435
|
}
|
|
1327
1436
|
}, {
|
|
1328
1437
|
key: "_beforeSetNumber",
|
|
1329
|
-
value: function _beforeSetNumber(
|
|
1330
|
-
var number =
|
|
1438
|
+
value: function _beforeSetNumber(fullNumber) {
|
|
1439
|
+
var number = fullNumber;
|
|
1331
1440
|
if (this.options.separateDialCode) {
|
|
1332
1441
|
var dialCode = this._getDialCode(number);
|
|
1333
1442
|
// if there is a valid dial code
|
|
@@ -1546,7 +1655,7 @@ var intlTelInput$1 = {exports: {}};
|
|
|
1546
1655
|
// default options
|
|
1547
1656
|
intlTelInputGlobals.defaults = defaults;
|
|
1548
1657
|
// version
|
|
1549
|
-
intlTelInputGlobals.version = "18.3
|
|
1658
|
+
intlTelInputGlobals.version = "18.5.3";
|
|
1550
1659
|
// convenience wrapper
|
|
1551
1660
|
return function(input, options) {
|
|
1552
1661
|
var iti = new Iti(input, options);
|
|
@@ -2949,7 +3058,7 @@ class IxPhoneInput extends LitElement {
|
|
|
2949
3058
|
return [
|
|
2950
3059
|
styles,
|
|
2951
3060
|
styles$1,
|
|
2952
|
-
styles$
|
|
3061
|
+
styles$1,
|
|
2953
3062
|
CONFIG.FLAG_SPRITES,
|
|
2954
3063
|
IxPhoneInputStyles,
|
|
2955
3064
|
];
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Webcomponent ix-phone-input following open-wc recommendations",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "Digital Realty",
|
|
6
|
-
"version": "2.1.
|
|
6
|
+
"version": "2.1.12",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/index.js",
|
|
9
9
|
"module": "dist/index.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
|
|
25
25
|
"format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
|
|
26
26
|
"pretest": "npm run build",
|
|
27
|
-
"
|
|
27
|
+
"test2": "wtr --coverage",
|
|
28
28
|
"pretest:watch": "npm run build",
|
|
29
29
|
"test:watch": "concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
|
|
30
30
|
"build": "npm run start:pre-serve && npm run buildTS && npm run start:pre-serve && rimraf distEsm && rollup -c rollup.config.js"
|
|
@@ -118,5 +118,5 @@
|
|
|
118
118
|
"README.md",
|
|
119
119
|
"LICENSE"
|
|
120
120
|
],
|
|
121
|
-
"gitHead": "
|
|
121
|
+
"gitHead": "1b89f4799af29a2ed1c0946843cb4b694a5d8cae"
|
|
122
122
|
}
|