diff --git a/README.md b/README.md index 9f26e31..c564d29 100644 --- a/README.md +++ b/README.md @@ -15,71 +15,71 @@ The following sections are editable by making changes to the following files: | Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` | | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` | | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` | ---> - +--> + # Input Use the `` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support. - + - - - + + + ## UI development browser support For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport) - - + + ## Install [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-input/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-input/actions/workflows/testPublish.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-input?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-input) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-input?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) -![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) - +![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) + ```shell $ npm i @aurodesignsystem/auro-input ``` Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer. - - + + ### Design Token CSS Custom Property dependency The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens). - - + + ### Define dependency in project component Defining the component dependency within each component that is using the `` component. - - - + + + ```js import "@aurodesignsystem/auro-input"; ``` - + **Reference component in HTML** - - + + ```html - -``` - - + +``` + + ## Install bundled assets from CDN @@ -87,20 +87,20 @@ In cases where the project is not able to process JS assets, there are pre-proce **WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned. - - + + ### Bundle example code - - + + ```html - - -``` + + +``` + + - - ## auro-input use cases @@ -109,21 +109,21 @@ The `` element should be used in situations where users may: * needs to enter information * be filling out a form - - -## API Code Examples - + + +## API Code Examples + ### Default auro-input - - + + ```html - -``` - - + +``` + + ## Development @@ -131,8 +131,8 @@ In order to develop against this project, if you are not part of the core team, Please be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document. - - + + ### Start development environment @@ -152,22 +152,22 @@ $ npm run build:watch $ npm run serve ``` - - + + ### API generation The custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control. - - + + ### Testing Automated tests are required for every Auro component. See `.\test\auro-input.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details. - - + + ### Bundled assets diff --git a/demo/api.md b/demo/api.md index b687a94..929e401 100644 --- a/demo/api.md +++ b/demo/api.md @@ -14,67 +14,67 @@ margin-bottom: unset; } } - + - - -# auro-input - + + +# auro-input + ## Attributes | Attribute | Type | Description | -|--------------|-----------|--------------------------------| -| [bordered](#bordered) | `Boolean` | Applies bordered UI variant. | +|--------------|-----------|--------------------------------| +| [bordered](#bordered) | `Boolean` | Applies bordered UI variant. | | [borderless](#borderless) | `Boolean` | Applies borderless UI variant. | ## Properties | Property | Attribute | Type | Default | Description | -|-----------------------------------|-----------------------------------|-----------|----------------------------|--------------------------------------------------| -| [activeLabel](#activeLabel) | `activeLabel` | `Boolean` | false | If set, the label will remain fixed in the active position. | -| [autocapitalize](#autocapitalize) | `autocapitalize` | `String` | | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] | -| [autocomplete](#autocomplete) | `autocomplete` | `String` | | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. | -| [autocorrect](#autocorrect) | `autocorrect` | `String` | | When set to `off`, stops iOS from auto correcting words when typed into a text box. | -| [customValidityTypeEmail](#customValidityTypeEmail) | `customValidityTypeEmail` | `string` | | | -| [disabled](#disabled) | `disabled` | `Boolean` | false | If set, disables the input. | -| [error](#error) | `error` | `String` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. | -| [errorMessage](#errorMessage) | `errorMessage` | `String` | | Contains the help text message for the current validity error. | -| [helpText](#helpText) | `helpText` | `String` | | Deprecated, see `slot`. | -| [icon](#icon) | `icon` | `Boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. | -| [id](#id) | `id` | `String` | | Sets the unique ID of the element. | -| [isValid](#isValid) | `isValid` | `String` | false | (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. | -| [label](#label) | `label` | `String` | "Input label is undefined" | Deprecated, see `slot`. | -| [lang](#lang) | `lang` | `String` | | defines the language of an element. | -| [max](#max) | `max` | `String` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. | -| [maxLength](#maxLength) | `maxLength` | `Number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. | -| [min](#min) | `min` | `String` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. | -| [minLength](#minLength) | `minLength` | `Number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. | -| [name](#name) | `name` | `String` | | Populates the `name` attribute on the input. | -| [noValidate](#noValidate) | `noValidate` | `Boolean` | false | If set, disables auto-validation on blur. | -| [pattern](#pattern) | `pattern` | `String` | | Specifies a regular expression the form control's value should match. | -| [placeholder](#placeholder) | `placeholder` | `String` | | Define custom placeholder text, only supported by date input formats. | -| [readonly](#readonly) | `readonly` | `Boolean` | | Makes the input read-only, but can be set programmatically. | -| [ready](#ready) | `ready` | `Boolean` | false | When false the component API should not be called. | -| [required](#required) | `required` | `Boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. | -| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `String` | | Sets a custom help text message to display for all validityStates. | -| [setCustomValidityBadInput](#setCustomValidityBadInput) | `setCustomValidityBadInput` | `String` | | Custom help text message to display when validity = `badInput`. | -| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `String` | | Custom help text message to display when validity = `customError`. | -| [setCustomValidityForType](#setCustomValidityForType) | `setCustomValidityForType` | `String` | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. | -| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow) | `setCustomValidityRangeOverflow` | `String` | | Custom help text message to display when validity = `rangeOverflow`. | -| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `String` | | Custom help text message to display when validity = `rangeUnderflow`. | -| [setCustomValidityTooLong](#setCustomValidityTooLong) | `setCustomValidityTooLong` | `String` | | Custom help text message to display when validity = `tooLong`. | -| [setCustomValidityTooShort](#setCustomValidityTooShort) | `setCustomValidityTooShort` | `String` | | Custom help text message to display when validity = `tooShort`. | -| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String` | | Custom help text message to display when validity = `valueMissing`. | -| [spellcheck](#spellcheck) | `spellcheck` | `String` | | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. | -| [type](#type) | `type` | `String` | | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. | -| [validateOnInput](#validateOnInput) | `validateOnInput` | `Boolean` | | Sets validation mode to re-eval with each input. | -| [validity](#validity) | `validity` | `String` | | Specifies the `validityState` this element is in. | +|-----------------------------------|-----------------------------------|-----------|----------------------------|--------------------------------------------------| +| [activeLabel](#activeLabel) | `activeLabel` | `Boolean` | false | If set, the label will remain fixed in the active position. | +| [autocapitalize](#autocapitalize) | `autocapitalize` | `String` | | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] | +| [autocomplete](#autocomplete) | `autocomplete` | `String` | | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. | +| [autocorrect](#autocorrect) | `autocorrect` | `String` | | When set to `off`, stops iOS from auto correcting words when typed into a text box. | +| [customValidityTypeEmail](#customValidityTypeEmail) | `customValidityTypeEmail` | `string` | | | +| [disabled](#disabled) | `disabled` | `Boolean` | false | If set, disables the input. | +| [error](#error) | `error` | `String` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. | +| [errorMessage](#errorMessage) | `errorMessage` | `String` | | Contains the help text message for the current validity error. | +| [helpText](#helpText) | `helpText` | `String` | | Deprecated, see `slot`. | +| [icon](#icon) | `icon` | `Boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. | +| [id](#id) | `id` | `String` | | Sets the unique ID of the element. | +| [isValid](#isValid) | `isValid` | `String` | false | (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. | +| [label](#label) | `label` | `String` | "Input label is undefined" | Deprecated, see `slot`. | +| [lang](#lang) | `lang` | `String` | | defines the language of an element. | +| [max](#max) | `max` | `String` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. | +| [maxLength](#maxLength) | `maxLength` | `Number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. | +| [min](#min) | `min` | `String` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. | +| [minLength](#minLength) | `minLength` | `Number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. | +| [name](#name) | `name` | `String` | | Populates the `name` attribute on the input. | +| [noValidate](#noValidate) | `noValidate` | `Boolean` | false | If set, disables auto-validation on blur. | +| [pattern](#pattern) | `pattern` | `String` | | Specifies a regular expression the form control's value should match. | +| [placeholder](#placeholder) | `placeholder` | `String` | | Define custom placeholder text, only supported by date input formats. | +| [readonly](#readonly) | `readonly` | `Boolean` | | Makes the input read-only, but can be set programmatically. | +| [ready](#ready) | `ready` | `Boolean` | false | When false the component API should not be called. | +| [required](#required) | `required` | `Boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. | +| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `String` | | Sets a custom help text message to display for all validityStates. | +| [setCustomValidityBadInput](#setCustomValidityBadInput) | `setCustomValidityBadInput` | `String` | | Custom help text message to display when validity = `badInput`. | +| [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `String` | | Custom help text message to display when validity = `customError`. | +| [setCustomValidityForType](#setCustomValidityForType) | `setCustomValidityForType` | `String` | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. | +| [setCustomValidityRangeOverflow](#setCustomValidityRangeOverflow) | `setCustomValidityRangeOverflow` | `String` | | Custom help text message to display when validity = `rangeOverflow`. | +| [setCustomValidityRangeUnderflow](#setCustomValidityRangeUnderflow) | `setCustomValidityRangeUnderflow` | `String` | | Custom help text message to display when validity = `rangeUnderflow`. | +| [setCustomValidityTooLong](#setCustomValidityTooLong) | `setCustomValidityTooLong` | `String` | | Custom help text message to display when validity = `tooLong`. | +| [setCustomValidityTooShort](#setCustomValidityTooShort) | `setCustomValidityTooShort` | `String` | | Custom help text message to display when validity = `tooShort`. | +| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String` | | Custom help text message to display when validity = `valueMissing`. | +| [spellcheck](#spellcheck) | `spellcheck` | `String` | | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. | +| [type](#type) | `type` | `String` | | Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. | +| [validateOnInput](#validateOnInput) | `validateOnInput` | `Boolean` | | Sets validation mode to re-eval with each input. | +| [validity](#validity) | `validity` | `String` | | Specifies the `validityState` this element is in. | | [value](#value) | `value` | `String` | | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. | ## Methods | Method | Type | Description | -|------------|------------|------------------------------------------| +|------------|------------|------------------------------------------| | [validate](#validate) | `(): void` | Public method force validation of input. | ## Events @@ -83,29 +83,29 @@ |-----------------------------|--------------------|--------------------------------------------------| | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` value has changed. | | `auroInput-ready` | `CustomEvent` | | -| `auroInput-validityChange` | `CustomEvent` | | +| `auroInput-validityChange` | `CustomEvent` | | | [input](#input) | | Event fires when the value of an `auro-input` has been changed. | ## Slots | Name | Description | -|------------|-----------------------------------------------| -| [helptext](#helptext) | Sets the help text displayed below the input. | +|------------|-----------------------------------------------| +| [helptext](#helptext) | Sets the help text displayed below the input. | | [label](#label) | Sets the label text for the input. | ## CSS Shadow Parts | Part | Description | -|-----------------|--------------------------------------------------| -| [accentIcon](#accentIcon) | Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) | -| [helpText](#helpText) | Use for customizing the style of the helpText element | -| [iconContainer](#iconContainer) | Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) | -| [label](#label) | Use for customizing the style of the label element | +|-----------------|--------------------------------------------------| +| [accentIcon](#accentIcon) | Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) | +| [helpText](#helpText) | Use for customizing the style of the helpText element | +| [iconContainer](#iconContainer) | Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) | +| [label](#label) | Use for customizing the style of the label element | | [wrapper](#wrapper) | Use for customizing the style of the root element | - - -# API Examples - + + +# API Examples + ## Localization Support The `auro-input` element supports the localization of all content managed within the scope of the element. This DOES NOT include any custom content placed in the `slot` element. @@ -114,8 +114,8 @@ The `auro-input` element supports the localization of all content managed within Use the options here to toggle between languages English Spanish - - + + ## Basic
@@ -124,22 +124,22 @@ The `auro-input` element supports the localization of all content managed within -
+ - See code + See code - - + + ```html - -``` - - - -## Attribute Examples - -### Disabled + +``` + + + +## Attribute Examples + +### Disabled Use the `disable` attribute to prevent the user from interacting with the input.
@@ -152,24 +152,24 @@ Use the `disable` attribute to prevent the user from interacting with the input. Arrival date -
+ - See code + See code - - + + ```html Departure date Arrival date - -``` - - - -### Placeholder + +``` + + + +### Placeholder Use the `placeholder` attribute to add a custom placeholder message within the element.
@@ -177,31 +177,31 @@ Use the `placeholder` attribute to add a custom placeholder message within the e Full name - + Full name Please enter your full name. -
+ - See code + See code - - + + ```html Full name - + Full name Please enter your full name. - -``` - - - -### Value + +``` + + + +### Value Use the `value` attribute to programmatically set the value of the input.
@@ -212,21 +212,21 @@ Use the `value` attribute to programmatically set the value of the input. Please enter your full name. -
+ - See code + See code - - + + ```html Name Please enter your full name. - -``` - - - + +``` + + + #### Dynamically Set Value Use the `value` and other components to dynamically set the value of the input. @@ -237,34 +237,34 @@ Note: Setting the `value` to `undefined` will also reset the element. Set Value to Alaska - Reset + Reset Name Please enter your full name. - + - See code + See code - - + + ```html Set Value to Alaska -Reset +Reset Name Please enter your full name. - -``` - + +``` + - - + + ```js export function programmaticallySetValue() { - const elem = document.querySelector('#setProgrammaticValueExample'); - + const elem = document.querySelector('#setProgrammaticValueExample'); + // set value of auro-input element document.querySelector('#setValidValueBtn').addEventListener('click', () => { elem.value = "Alaska Airlines is the best"; @@ -276,14 +276,14 @@ export function programmaticallySetValue() { }); } ``` - - - -### Max + + + +### Max Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `` also has a `type` attribute for `numeric` or any date format. -The `max` attribute should be used in combination with the `setCustomValidityRangeOverflow` attribute to define help text used when the `max` attribute validation fails. - +The `max` attribute should be used in combination with the `setCustomValidityRangeOverflow` attribute to define help text used when the `max` attribute validation fails. + #### Date Example
@@ -293,20 +293,20 @@ The `max` attribute should be used in combination with the `setCustomValidityRan Choose a date -
+ - See code + See code - - + + ```html Choose a date - -``` - - - + +``` + + + #### Numeric Example
@@ -316,25 +316,25 @@ The `max` attribute should be used in combination with the `setCustomValidityRan Choose a number -
+ - See code + See code - - + + ```html Choose a number - -``` - - - -### Min + +``` + + + +### Min Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `` also has a `type` attribute for numeric or any date format. -The `min` attribute should be used in combination with the `setCustomValidityRangeUnderflow` attribute to define help text used when the `min` attribute validation fails. - +The `min` attribute should be used in combination with the `setCustomValidityRangeUnderflow` attribute to define help text used when the `min` attribute validation fails. + #### Date Example
@@ -344,20 +344,20 @@ The `min` attribute should be used in combination with the `setCustomValidityRan Choose a date -
+ - See code + See code - - + + ```html Choose a date - -``` - - - + +``` + + + #### Numeric Example
@@ -367,21 +367,21 @@ The `min` attribute should be used in combination with the `setCustomValidityRan Choose a number -
+ - See code + See code - - + + ```html Choose a number - -``` - - - -### Pattern + +``` + + + +### Pattern Use the `pattern` attribute to set custom input validation. This example also uses the `spellcheck` attribute set to `false` which in turn sets `autocorrect` to `off` and `autocapitalize` to `none`. Additionally the `maxlength` attribute sets the maximum length of characters that can be entered. The `` component supports setting a custom validity message specific to the pattern validation by using the `setCustomValidityBadInput` attribute. @@ -392,32 +392,32 @@ The `` component supports setting a custom validity message specific Username Please enter a username. - + Username Please enter a username. - + - See code + See code - - + + ```html Username Please enter a username. - + Username Please enter a username. - -``` - - - -### Borderless + +``` + + + +### Borderless Use the `borderless` attribute to remove the bottom border. This attribute is intended for use when input is wrapped in a container that already handles the different state displays, e.g. [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown).
@@ -428,22 +428,22 @@ Use the `borderless` attribute to remove the bottom border. This attribute is in Please enter your full name. -
+ - See code + See code - - + + ```html Name Please enter your full name. - -``` - - - -### Readonly + +``` + + + +### Readonly Use the `readonly` attribute to prevent the user from editing the value of the input. In this example, the user is able to programmatically change the value of the input by clicking the button or clear out the contents of the input. @@ -452,30 +452,30 @@ In this example, the user is able to programmatically change the value of the in Set Value to Auro Alaska - Reset + Reset Name Please enter your full name. - + - See code + See code - - + + ```html Set Value to Auro Alaska -Reset +Reset Name Please enter your full name. - -``` - + +``` + - - + + ```js export function setReadonlyValue() { const elem = document.querySelector('#readonlyExample'); @@ -490,10 +490,10 @@ export function setReadonlyValue() { }); } ``` - - - -### Active Label + + + +### Active Label Example use cases for auro-input support the `activeLabel` attribute. If set, the label will stay fixed in the active position.
@@ -502,32 +502,32 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th Address Please enter your home address. - + Address Please enter your home address. -
+ - See code + See code - - + + ```html Address Please enter your home address. - + Address Please enter your home address. - -``` - - - -### Disable auto-validation + +``` + + + +### Disable auto-validation For use cases where the field is `required`, but live validation is not wanted, use the `noValidate` attribute.
@@ -536,38 +536,38 @@ For use cases where the field is `required`, but live validation is not wanted, Address Please enter your home address. - + Address Please enter your home address. -
+ - See code + See code - - + + ```html Address Please enter your home address. - + Address Please enter your home address. - -``` - - - + +``` + + + ## Error support and HTML5 Validity The `` component follows the HTML5 input `validity` and `validityState` [specification](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#client-side_validation). -> if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you. - -### Required +> if there is a form control that fails constraint validation, supporting browsers will display an error message on the first invalid form control; displaying a default message based on the error type, or a message set by you. + +### Required When present, the `required` attribute specifies that an input field must be filled out before submitting the form. When the validity check fails the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be changed to a custom string using the `setCustomValidityValueMissing`. @@ -577,65 +577,65 @@ When the validity check fails the validityState equals `valueMissing`. The error Full name - + Full name Please enter your full name. - + - See code + See code - - + + ```html Full name - + Full name Please enter your full name. - -``` - - - -### Validation on input -Use the `validateOnInput` attribute to enable live validation on the `input` event. Recommended use is with setting a custom `pattern` and validation is required prior to a `blur` event. - + +``` + + + +### Validation on input +Use the `validateOnInput` attribute to enable live validation on the `input` event. Recommended use is with setting a custom `pattern` and validation is required prior to a `blur` event. +
Full Name Please enter your full name as it appears on the card. - + Full Name Please enter your full name as it appears on the card. -
+ - See code + See code - - + + ```html Full Name Please enter your full name as it appears on the card. - + Full Name Please enter your full name as it appears on the card. - -``` - - - -### setCustomValidity + +``` + + + +### setCustomValidity The `setCustomValidity` attribute can be used to set a custom string for all validityStates. When the component is first loaded, if this attribute is set on the element, all validityStates (except `valid`) will display the defined message. **NOTE:** Custom strings are NOT localized. It is the responsibility of the element consumer to provide localized strings when using this element property. @@ -646,62 +646,62 @@ The `setCustomValidity` attribute can be used to set a custom string for all val Full Name Please enter your full name. - + Full Name Please enter your full name. - + - See code + See code - - + + ```html Full Name Please enter your full name. - + Full Name Please enter your full name. - -``` - - - -### Error + +``` + + + +### Error Use the `error` attribute to apply a persistent custom error that supersedes the HTML5 validation logic.
Set Custom Error - Clear Custom Error + Clear Custom Error Name Please enter your full name. -
+ - See code + See code - - + + ```html Set Custom Error -Clear Custom Error +Clear Custom Error Name Please enter your full name. - -``` - + +``` + - - + + ```js export function customError() { const elem = document.querySelector('#setCustomErrorExample'); @@ -716,11 +716,11 @@ export function customError() { }); } ``` - - - -## Types - + + + +## Types + ### Password Use the `type="password"` attribute for a password style input. The hide/show password feature will automatically appear once a user begins to enter data. @@ -732,30 +732,30 @@ Default help text will be added to the input `type="password"` if custom help te Password - + Password Please enter a secure password. - + - See code + See code - - + + ```html Password - + Password Please enter a secure password. - -``` - - - + +``` + + + ### Email Use the `type="email"` attribute for a email style input. These examples illustrate the default error messaging per that browser. Content may vary. @@ -767,30 +767,30 @@ Default help text will be added to the input `type="email"` if custom help text Email address - + Email address Please enter your email address. - + - See code + See code - - + + ```html Email address - + Email address Please enter your email address. - -``` - - - + +``` + + + ### Number Use the `type="number"` attribute for a numeric style input and invoke a numeric virtual keyboard on handheld devices. @@ -801,32 +801,32 @@ Use the `type="number"` attribute for a numeric style input and invoke a numeric Account number Please enter your account number. - + Account number Please enter your account number. - + - See code + See code - - + + ```html Account number Please enter your account number. - + Account number Please enter your account number. - -``` - - - -#### maxLength + +``` + + + +#### maxLength Use the `type="number"` in combination wit the `maxlength` attribute to control the length of the number entered.
@@ -835,32 +835,32 @@ Use the `type="number"` in combination wit the `maxlength` attribute to control Account number Please enter your 12 digit account number. - + Account number Please enter your 12 digit account number. -
+ - See code + See code - - + + ```html Account number Please enter your 12 digit account number. - + Account number Please enter your 12 digit account number. - -``` - - - -#### minLength + +``` + + + +#### minLength Use the `type="number"` in combination wit the `minlength` attribute to control the length of the number entered.
@@ -869,31 +869,31 @@ Use the `type="number"` in combination wit the `minlength` attribute to control Account number Please enter your 12 digit account number. - + Account number Please enter your 12 digit account number. -
+ - See code + See code - - + + ```html Account number Please enter your 12 digit account number. - + Account number Please enter your 12 digit account number. - -``` - - - + +``` + + + ### Credit Card Use the `type="credit-card"` attribute for a credit card formatted input. @@ -905,29 +905,29 @@ Default help text will be added to the input `type="credit-card"` if custom help Card number - + Card number Valid credit card numbers must include 16 digits (15 for Amex). - + - See code + See code - - + + ```html Card number - + Card number Valid credit card numbers must include 16 digits (15 for Amex). - -``` - - + +``` + + Use the `type="credit-card"` and `icon` attributes for a credit card formatted input with credit card icon support. **Dependency**: Please be sure to also install [auro-icon](https://auro.alaskaair.com/components/auro/icon/install) as a peer dependency. @@ -937,31 +937,31 @@ Use the `type="credit-card"` and `icon` attributes for a credit card formatted i Card number - + Card number Valid credit card numbers must include 16 digits (15 for Amex). - + - See code + See code // Use 4147 3411 1111 1111 to see the Alaska Airline's credit card! - - + + ```html Card number - + Card number Valid credit card numbers must include 16 digits (15 for Amex). - -``` - - - + +``` + + + ### Date Format Use the `type="month-day-year"` attribute for a date formatted input. @@ -971,27 +971,27 @@ Use the `type="month-day-year"` attribute for a date formatted input. Departure date - + Arrival date - + - See code + See code - - + + ```html Departure date - + Arrival date - -``` - - + +``` + + Use the `type="month-year"` attribute for a date formatted input.
@@ -999,27 +999,27 @@ Use the `type="month-year"` attribute for a date formatted input. Departure date - + Arrival date -
+ - See code + See code - - + + ```html Departure date - + Arrival date - -``` - - + +``` + + Use the `type="month-fullYear"` attribute for a date formatted input.
@@ -1027,27 +1027,27 @@ Use the `type="month-fullYear"` attribute for a date formatted input. Departure date - + Arrival date -
+ - See code + See code - - + + ```html Departure date - + Arrival date - -``` - - + +``` + + Use the `type="year-month-day"` attribute for a date formatted input.
@@ -1055,30 +1055,30 @@ Use the `type="year-month-day"` attribute for a date formatted input. Departure date - + Arrival date -
+ - See code + See code - - + + ```html Departure date - + Arrival date - -``` - - - -## Additional Use Cases - + +``` + + + +## Additional Use Cases + ### Swapping Values Between Inputs Example illustrates using a JavaScript function attached to an `auro-button` component `click` event to swap the values of two `auro-input` elements. An example of this use case would be swapping the departure and arrival airports in a flight search form. @@ -1092,29 +1092,29 @@ Example illustrates using a JavaScript function attached to an `auro-button` com Swap Values Right Input - + - + - See code + See code - - + + ```html Left Input @@ -1122,7 +1122,7 @@ Example illustrates using a JavaScript function attached to an `auro-button` com Swap Values Right Input - + -``` - + +``` + - - + + ```js export function swapInputValues() { const btn = document.querySelector('#swapExampleBtn'); @@ -1158,20 +1158,20 @@ export function swapInputValues() { }); } ``` - - - + + + ## Theme Support The component may be restyled using the following code sample and changing the values of the following token(s). - - + + ```scss @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; -:root { +:host { --ds-auro-input-border-color: var(--ds-color-border-secondary-default, #{$ds-color-border-secondary-default}); --ds-auro-input-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); --ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #{$ds-color-text-ui-focus-default}); diff --git a/demo/api.min.js b/demo/api.min.js index c244f72..8c78816 100644 --- a/demo/api.min.js +++ b/demo/api.min.js @@ -1,15 +1,3 @@ -import { html } from 'lit/static-html.js'; -import { repeat } from 'lit/directives/repeat.js'; -import { classMap } from 'lit/directives/class-map.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { css, LitElement } from 'lit'; -import Cleave from 'cleave.js'; -import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js'; -import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; -import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; -import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js'; -import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js'; - /** * Function used for the lang switch demo * @private @@ -81,6 +69,52 @@ function programmaticallySetValue() { }); } +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$3=globalThis,i$5=t$3.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h$1,n$3=`<${o$4}>`,r$4=document,l$2=()=>r$4.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$4=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_=/>/g,m$1=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$4.createTreeWalker(r$4,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$3?s$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$1;for(let i=0;i"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g:p$2):c===g||c===p$2?c=m$1:c===v$1||c===_?c=f$1:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$4+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length0){r.textContent=i$5?i$5.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1(this,t,i,0),o=!c$3(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h}; + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const a$1=Symbol.for(""),o$3=t=>{if(t?.r===a$1)return t?._$litStatic$},s$2=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$(...e)=>({_$litDirective$:t,values:e});let i$3 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const {I:t$1}=Z,s$1=()=>document.createComment(""),r$3=(o,i,n)=>{const e=o._$AA.parentNode,l=void 0===i?o._$AB:i._$AA;if(void 0===n){const i=e.insertBefore(s$1(),l),c=e.insertBefore(s$1(),l);n=new t$1(i,c,o,o.options);}else {const t=n._$AB.nextSibling,i=n._$AM,c=i!==o;if(c){let t;n._$AQ?.(o),n._$AM=o,void 0!==n._$AP&&(t=o._$AU)!==i._$AU&&n._$AP(t);}if(t!==l||c){let o=n._$AA;for(;o!==t;){const t=o.nextSibling;e.insertBefore(o,l),o=t;}}}return n},v=(o,t,i=o)=>(o._$AI(t,i),o),u$2={},m=(o,t=u$2)=>o._$AH=t,p$1=o=>o._$AH,M=o=>{o._$AP?.(!1,!0);let t=o._$AA;const i=o._$AB.nextSibling;for(;t!==i;){const o=t.nextSibling;t.remove(),t=o;}}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const u$1=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c$2=e$3(class extends i$3{constructor(e){if(super(e),e.type!==t$2.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=p$1(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v$1=[];let m$1,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p[k]),x++,k++;else if(h[j]===a[w])v$1[w]=v(d[j],p[w]),j--,w--;else if(h[x]===a[w])v$1[w]=v(d[x],p[w]),r$3(s,v$1[w+1],d[x]),x++,w--;else if(h[j]===a[k])v$1[k]=v(d[j],p[k]),r$3(s,d[x],d[j]),j--,k++;else if(void 0===m$1&&(m$1=u$1(a,k,w),y=u$1(h,x,j)),m$1.has(h[x]))if(m$1.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r$3(s,d[x]);v(e,p[k]),v$1[k]=e;}else v$1[k]=v(t,p[k]),r$3(s,d[x],t),d[e]=null;k++;}else M(d[j]),j--;else M(d[x]),x++;for(;k<=w;){const e=r$3(s,v$1[w+1]);v(e,p[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&M(e);}return this.ut=a,m(s,v$1),T}}); + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const e$2=e$3(class extends i$3{constructor(t){if(super(t),t.type!==t$2.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}}); + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const o$2=o=>o??E; + const watchedItems = new Set(); @@ -178,904 +212,3564 @@ function stopNotifyingOnLangChange(element) { watchedItems.delete(element); } -var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.clearBtn{height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{height:calc(var(--ds-size-300, 1.5rem));width:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;padding:0;border:0;background:unset;cursor:pointer;height:var(--ds-size-200, 1rem);width:var(--ds-size-200, 1rem)}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-200, 1rem);width:var(--ds-size-200, 1rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{visibility:hidden;height:0;width:0;overflow:hidden;margin:0;padding:0}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{border-style:solid;overflow:hidden;position:relative}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{display:block;content:"";position:absolute;inset:0;pointer-events:none;border-bottom-style:solid;border-bottom-width:1px}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host label.withValue{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{flex:1;position:relative;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);outline:none}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{pointer-events:none;background:none}`; +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$1=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$1.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$1("string"==typeof t?t:t+"",void 0,s),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s)},S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t; -var colorCss = css`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:r$1,getOwnPropertyNames:h,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4"); -var tokensCss = css`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1"); + +var styleCss$3 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{height:calc(var(--ds-size-300, 1.5rem));width:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;padding:0;border:0;background:unset;cursor:pointer;height:var(--ds-size-200, 1rem);width:var(--ds-size-200, 1rem)}.notificationBtn [auro-icon]{--ds-auro-icon-size: var(--ds-size-200, 1rem);height:var(--ds-size-200, 1rem);display:block}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{visibility:hidden;height:0;width:0;overflow:hidden;margin:0;padding:0}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{border-style:solid;overflow:hidden;position:relative}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{display:block;content:"";position:absolute;inset:0;pointer-events:none;border-bottom-style:solid;border-bottom-width:1px}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host label.withValue{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{flex:1;position:relative;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);outline:none}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{pointer-events:none;background:none}`; + +var colorCss$3 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`; + +var tokensCss$3 = i$2`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; + +var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + +var NumeralFormatter = function (numeralDecimalMark, + numeralIntegerScale, + numeralDecimalScale, + numeralThousandsGroupStyle, + numeralPositiveOnly, + stripLeadingZeroes, + prefix, + signBeforePrefix, + tailPrefix, + delimiter) { + var owner = this; + + owner.numeralDecimalMark = numeralDecimalMark || '.'; + owner.numeralIntegerScale = numeralIntegerScale > 0 ? numeralIntegerScale : 0; + owner.numeralDecimalScale = numeralDecimalScale >= 0 ? numeralDecimalScale : 2; + owner.numeralThousandsGroupStyle = numeralThousandsGroupStyle || NumeralFormatter.groupStyle.thousand; + owner.numeralPositiveOnly = !!numeralPositiveOnly; + owner.stripLeadingZeroes = stripLeadingZeroes !== false; + owner.prefix = (prefix || prefix === '') ? prefix : ''; + owner.signBeforePrefix = !!signBeforePrefix; + owner.tailPrefix = !!tailPrefix; + owner.delimiter = (delimiter || delimiter === '') ? delimiter : ','; + owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : ''; +}; -// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. +NumeralFormatter.groupStyle = { + thousand: 'thousand', + lakh: 'lakh', + wan: 'wan', + none: 'none' +}; +NumeralFormatter.prototype = { + getRawValue: function (value) { + return value.replace(this.delimiterRE, '').replace(this.numeralDecimalMark, '.'); + }, -/** - * Auro-input provides users a way to enter data into a text field. - * - * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position. - * @attr {String} autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] - * @attr {String} autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. - * @attr {String} autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box. - * @attr {Boolean} bordered - Applies bordered UI variant. - * @attr {Boolean} borderless - Applies borderless UI variant. - * @attr {Boolean} disabled - If set, disables the input. - * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. - * @prop {String} errorMessage - Contains the help text message for the current validity error. - * @attr {String} helpText - Deprecated, see `slot`. - * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. - * @attr {String} id - Sets the unique ID of the element. - * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. - * @attr {String} label - Deprecated, see `slot`. - * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. - * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. - * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. - * @attr {String} name - Populates the `name` attribute on the input. - * @attr {Boolean} noValidate - If set, disables auto-validation on blur. - * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. - * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. - * @attr {String} pattern - Specifies a regular expression the form control's value should match. - * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. - * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates. - * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`. - * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`. - * @attr {String} setCustomValidityBadInput - Custom help text message to display when validity = `badInput`. - * @attr {String} setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`. - * @attr {String} setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`. - * @attr {String} setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails. - * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`. - * @attr {String} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`. - * @attr {String} spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. - * @attr {String} type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. - * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input. - * @attr {String} validity - Specifies the `validityState` this element is in. - * @attr {String} value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. - * - * @slot helptext - Sets the help text displayed below the input. - * @slot label - Sets the label text for the input. - * - * @csspart wrapper - Use for customizing the style of the root element - * @csspart label - Use for customizing the style of the label element - * @csspart helpText - Use for customizing the style of the helpText element - * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) - * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) - * @event input - Event fires when the value of an `auro-input` has been changed. - * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed. - */ + format: function (value) { + var owner = this, parts, partSign, partSignAndPrefix, partInteger, partDecimal = ''; -class BaseInput extends LitElement { + // strip alphabet letters + value = value.replace(/[A-Za-z]/g, '') + // replace the first decimal mark with reserved placeholder + .replace(owner.numeralDecimalMark, 'M') - constructor() { - super(); + // strip non numeric letters except minus and "M" + // this is to ensure prefix has been stripped + .replace(/[^\dM-]/g, '') - this.isValid = false; + // replace the leading minus with reserved placeholder + .replace(/^\-/, 'N') - this.icon = false; - this.disabled = false; - this.required = false; - this.noValidate = false; - this.max = undefined; - this.min = undefined; - this.maxLength = undefined; - this.minLength = undefined; - this.label = 'Input label is undefined'; - this.ready = false; - this.activeLabel = false; + // strip the other minus sign (if present) + .replace(/\-/g, '') - this.setCustomValidityForType = undefined; - } + // replace the minus sign (if present) + .replace('N', owner.numeralPositiveOnly ? '' : '-') - /** - * Internal Defaults. - * @private - * @returns {void} - */ - privateDefaults() { - this.validation = new AuroFormValidation(); - this.inputIconName = undefined; - this.showPassword = false; - this.validationCCLength = undefined; - this.hasValue = false; + // replace decimal mark + .replace('M', owner.numeralDecimalMark); - this.allowedInputTypes = [ - "text", - "email", - "password", - "credit-card", - "month-day-year", - "year-month-day", - "month-year" - ]; + // strip any leading zeros + if (owner.stripLeadingZeroes) { + value = value.replace(/^(-)?0+(?=\d)/, '$1'); + } - this.dateInputTypes = [ - "month-day-year", - "year-month-day", - "month-year", - "month-fullYear" - ]; + partSign = value.slice(0, 1) === '-' ? '-' : ''; + if (typeof owner.prefix != 'undefined') { + if (owner.signBeforePrefix) { + partSignAndPrefix = partSign + owner.prefix; + } else { + partSignAndPrefix = owner.prefix + partSign; + } + } else { + partSignAndPrefix = partSign; + } + + partInteger = value; - this.autoFormattingTypes = [ - 'credit-card', - 'month-day-year', - 'month-year', - 'month-fullyear', - 'year-month-day' - ]; + if (value.indexOf(owner.numeralDecimalMark) >= 0) { + parts = value.split(owner.numeralDecimalMark); + partInteger = parts[0]; + partDecimal = owner.numeralDecimalMark + parts[1].slice(0, owner.numeralDecimalScale); + } - /** - * Credit Card is not included as this caused cursor placement issues. - * The Safari issue. - */ - this.setSelectionInputTypes = [ - "text", - "password", - "email", - ]; + if(partSign === '-') { + partInteger = partInteger.slice(1); + } - const idLength = 36; - const idSubstrEnd = 8; - const idSubstrStart = 2; + if (owner.numeralIntegerScale > 0) { + partInteger = partInteger.slice(0, owner.numeralIntegerScale); + } - this.uniqueId = Math.random() - .toString(idLength) - .substring(idSubstrStart, idSubstrEnd); - } + switch (owner.numeralThousandsGroupStyle) { + case NumeralFormatter.groupStyle.lakh: + partInteger = partInteger.replace(/(\d)(?=(\d\d)+\d$)/g, '$1' + owner.delimiter); - // function to define props used within the scope of this component - static get properties() { - return { - id: { type: String }, - label: { type: String }, - name: { type: String }, - type: { type: String, - reflect: true }, - value: { type: String }, - lang: { type: String }, - pattern: { - type: String, - reflect: true - }, - icon: { type: Boolean }, - disabled: { type: Boolean }, - required: { type: Boolean }, - noValidate: { type: Boolean }, - helpText: { type: String }, - spellcheck: { type: String }, - autocorrect: { type: String }, - autocapitalize: { type: String }, - autocomplete: { - type: String, - reflect: true - }, - placeholder: { type: String }, - activeLabel: { - type: Boolean, - reflect: true - }, - max: { type: String }, - min: { type: String }, - maxLength: { type: Number }, - minLength: { type: Number }, + break; - /** - * @ignore - */ - showPassword: { state: true }, - validateOnInput: { type: Boolean }, - readonly: { type: Boolean }, - ready: { type: Boolean }, - error: { - type: String, - reflect: true - }, - errorMessage: { type: String }, - isValid: { - type: String, - reflect: true - }, - validity: { - type: String, - reflect: true - }, - setCustomValidity: { type: String }, - setCustomValidityCustomError: { type: String }, - setCustomValidityValueMissing: { type: String }, - setCustomValidityBadInput: { type: String }, - setCustomValidityTooShort: { type: String }, - setCustomValidityTooLong: { type: String }, - setCustomValidityRangeOverflow: { type: String}, - setCustomValidityRangeUnderflow: { type: String}, - customValidityTypeEmail: { type: String } - }; - } + case NumeralFormatter.groupStyle.wan: + partInteger = partInteger.replace(/(\d)(?=(\d{4})+$)/g, '$1' + owner.delimiter); - static get styles() { - return [ - css`${styleCss}`, - css`${colorCss}`, - css`${tokensCss}` - ]; - } + break; - connectedCallback() { - super.connectedCallback(); + case NumeralFormatter.groupStyle.thousand: + partInteger = partInteger.replace(/(\d)(?=(\d{3})+$)/g, '$1' + owner.delimiter); - this.privateDefaults(); + break; + } - notifyOnLangChange(this); + if (owner.tailPrefix) { + return partSign + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : '') + owner.prefix; + } - // Process auto-formatting if defined for CleaveJS - if (this.type) { - let config = null; + return partSignAndPrefix + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : ''); + } +}; - // Set config for credit card - switch (this.type) { - case 'number': - config = { - numeral: true, - delimiter: '' - }; +var NumeralFormatter_1 = NumeralFormatter; - this.inputMode = 'numeric'; +var DateFormatter = function (datePattern, dateMin, dateMax) { + var owner = this; - break; + owner.date = []; + owner.blocks = []; + owner.datePattern = datePattern; + owner.dateMin = dateMin + .split('-') + .reverse() + .map(function(x) { + return parseInt(x, 10); + }); + if (owner.dateMin.length === 2) owner.dateMin.unshift(0); - case 'credit-card': - config = { - creditCard: true - }; + owner.dateMax = dateMax + .split('-') + .reverse() + .map(function(x) { + return parseInt(x, 10); + }); + if (owner.dateMax.length === 2) owner.dateMax.unshift(0); + + owner.initBlocks(); +}; - this.inputMode = 'numeric'; +DateFormatter.prototype = { + initBlocks: function () { + var owner = this; + owner.datePattern.forEach(function (value) { + if (value === 'Y') { + owner.blocks.push(4); + } else { + owner.blocks.push(2); + } + }); + }, + + getISOFormatDate: function () { + var owner = this, + date = owner.date; + + return date[2] ? ( + date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0]) + ) : ''; + }, + + getBlocks: function () { + return this.blocks; + }, + + getValidatedDate: function (value) { + var owner = this, result = ''; + + value = value.replace(/[^\d]/g, ''); + + owner.blocks.forEach(function (length, index) { + if (value.length > 0) { + var sub = value.slice(0, length), + sub0 = sub.slice(0, 1), + rest = value.slice(length); + + switch (owner.datePattern[index]) { + case 'd': + if (sub === '00') { + sub = '01'; + } else if (parseInt(sub0, 10) > 3) { + sub = '0' + sub0; + } else if (parseInt(sub, 10) > 31) { + sub = '31'; + } + + break; + + case 'm': + if (sub === '00') { + sub = '01'; + } else if (parseInt(sub0, 10) > 1) { + sub = '0' + sub0; + } else if (parseInt(sub, 10) > 12) { + sub = '12'; + } + + break; + } + + result += sub; + + // update remaining string + value = rest; + } + }); - break; + return this.getFixedDateString(result); + }, - case 'month-day-year': - config = { - date: true, - delimiter: '/', - datePattern: [ - 'm', - 'd', - 'Y' - ] - }; + getFixedDateString: function (value) { + var owner = this, datePattern = owner.datePattern, date = [], + dayIndex = 0, monthIndex = 0, yearIndex = 0, + dayStartIndex = 0, monthStartIndex = 0, yearStartIndex = 0, + day, month, year, fullYearDone = false; - this.inputMode = 'numeric'; + // mm-dd || dd-mm + if (value.length === 4 && datePattern[0].toLowerCase() !== 'y' && datePattern[1].toLowerCase() !== 'y') { + dayStartIndex = datePattern[0] === 'd' ? 0 : 2; + monthStartIndex = 2 - dayStartIndex; + day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10); + month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10); - break; + date = this.getFixedDate(day, month, 0); + } - case 'year-month-day': - config = { - date: true, - delimiter: '/', - datePattern: [ - 'Y', - 'm', - 'd' - ] - }; + // yyyy-mm-dd || yyyy-dd-mm || mm-dd-yyyy || dd-mm-yyyy || dd-yyyy-mm || mm-yyyy-dd + if (value.length === 8) { + datePattern.forEach(function (type, index) { + switch (type) { + case 'd': + dayIndex = index; + break; + case 'm': + monthIndex = index; + break; + default: + yearIndex = index; + break; + } + }); + + yearStartIndex = yearIndex * 2; + dayStartIndex = (dayIndex <= yearIndex) ? dayIndex * 2 : (dayIndex * 2 + 2); + monthStartIndex = (monthIndex <= yearIndex) ? monthIndex * 2 : (monthIndex * 2 + 2); + + day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10); + month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10); + year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10); + + fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4; + + date = this.getFixedDate(day, month, year); + } - this.inputMode = 'numeric'; + // mm-yy || yy-mm + if (value.length === 4 && (datePattern[0] === 'y' || datePattern[1] === 'y')) { + monthStartIndex = datePattern[0] === 'm' ? 0 : 2; + yearStartIndex = 2 - monthStartIndex; + month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10); + year = parseInt(value.slice(yearStartIndex, yearStartIndex + 2), 10); - break; + fullYearDone = value.slice(yearStartIndex, yearStartIndex + 2).length === 2; - case 'month-year': - config = { - date: true, - datePattern: [ - 'm', - 'y' - ] - }; + date = [0, month, year]; + } - this.inputMode = 'numeric'; + // mm-yyyy || yyyy-mm + if (value.length === 6 && (datePattern[0] === 'Y' || datePattern[1] === 'Y')) { + monthStartIndex = datePattern[0] === 'm' ? 0 : 4; + yearStartIndex = 2 - 0.5 * monthStartIndex; + month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10); + year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10); - break; + fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4; - case 'month-fullYear': - config = { - date: true, - datePattern: [ - 'm', - 'Y' - ] - }; + date = [0, month, year]; + } - this.inputMode = 'numeric'; + date = owner.getRangeFixedDate(date); + owner.date = date; + + var result = date.length === 0 ? value : datePattern.reduce(function (previous, current) { + switch (current) { + case 'd': + return previous + (date[0] === 0 ? '' : owner.addLeadingZero(date[0])); + case 'm': + return previous + (date[1] === 0 ? '' : owner.addLeadingZero(date[1])); + case 'y': + return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], false) : ''); + case 'Y': + return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], true) : ''); + } + }, ''); + + return result; + }, + + getRangeFixedDate: function (date) { + var owner = this, + datePattern = owner.datePattern, + dateMin = owner.dateMin || [], + dateMax = owner.dateMax || []; + + if (!date.length || (dateMin.length < 3 && dateMax.length < 3)) return date; + + if ( + datePattern.find(function(x) { + return x.toLowerCase() === 'y'; + }) && + date[2] === 0 + ) return date; + + if (dateMax.length && (dateMax[2] < date[2] || ( + dateMax[2] === date[2] && (dateMax[1] < date[1] || ( + dateMax[1] === date[1] && dateMax[0] < date[0] + )) + ))) return dateMax; + + if (dateMin.length && (dateMin[2] > date[2] || ( + dateMin[2] === date[2] && (dateMin[1] > date[1] || ( + dateMin[1] === date[1] && dateMin[0] > date[0] + )) + ))) return dateMin; + + return date; + }, + + getFixedDate: function (day, month, year) { + day = Math.min(day, 31); + month = Math.min(month, 12); + year = parseInt((year || 0), 10); + + if ((month < 7 && month % 2 === 0) || (month > 8 && month % 2 === 1)) { + day = Math.min(day, month === 2 ? (this.isLeapYear(year) ? 29 : 28) : 30); + } - break; - // Do nothing - } + return [day, month, year]; + }, - // initialize CleaveJS if we have a defined config for the requested format - if (config) { - // eslint-disable-next-line no-unused-vars - new Cleave(this, config); - } - } - } + isLeapYear: function (year) { + return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0); + }, - disconnectedCallback() { - super.disconnectedCallback(); - stopNotifyingOnLangChange(this); - } + addLeadingZero: function (number) { + return (number < 10 ? '0' : '') + number; + }, - firstUpdated() { - // add attribute for query selectors when auro-input is registered under a custom name - if (this.tagName.toLowerCase() !== 'auro-input') { - this.setAttribute('auro-input', true); + addLeadingZeroForYear: function (number, fullYearMode) { + if (fullYearMode) { + return (number < 10 ? '000' : (number < 100 ? '00' : (number < 1000 ? '0' : ''))) + number; + } + + return (number < 10 ? '0' : '') + number; } +}; - this.inputElement = this.renderRoot.querySelector('input'); - this.labelElement = this.shadowRoot.querySelector('label'); +var DateFormatter_1 = DateFormatter; - // use validity message override if declared when initializing the component - if (this.hasAttribute('setCustomValidity')) { - this.ValidityMessageOverride = this.setCustomValidity; - } +var TimeFormatter = function (timePattern, timeFormat) { + var owner = this; - // if setCustomValidityForType is not set, use our default - if (!this.setCustomValidityForType) { - if (this.type === 'password') { - this.setCustomValidityForType = i18n(this.lang, 'password'); - } else if (this.type === 'credit-card') { - this.setCustomValidityForType = i18n(this.lang, 'creditcard'); - } else if (this.type === 'email') { - this.setCustomValidityForType = i18n(this.lang, 'email'); - } else if (this.type === 'month-day-year') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY'); - } else if (this.type === 'month-year') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMYY'); - } else if (this.type === 'month-fullyear') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); - } else if (this.type === 'year-month-day') { - this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); - } - } + owner.time = []; + owner.blocks = []; + owner.timePattern = timePattern; + owner.timeFormat = timeFormat; + owner.initBlocks(); +}; - this.addEventListener('keydown', (evt) => { - if (this.autoFormattingTypes.includes(this.type)) { - if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { - if (evt.key.length === 1) { - const numCharSelected = this.inputElement.selectionEnd - this.inputElement.selectionStart; +TimeFormatter.prototype = { + initBlocks: function () { + var owner = this; + owner.timePattern.forEach(function () { + owner.blocks.push(2); + }); + }, + + getISOFormatTime: function () { + var owner = this, + time = owner.time; + + return time[2] ? ( + owner.addLeadingZero(time[0]) + ':' + owner.addLeadingZero(time[1]) + ':' + owner.addLeadingZero(time[2]) + ) : ''; + }, + + getBlocks: function () { + return this.blocks; + }, + + getTimeFormatOptions: function () { + var owner = this; + if (String(owner.timeFormat) === '12') { + return { + maxHourFirstDigit: 1, + maxHours: 12, + maxMinutesFirstDigit: 5, + maxMinutes: 60 + }; + } - if (numCharSelected > 1) { - this.cursorPosition = this.inputElement.selectionStart + 1; - } else if (numCharSelected === 1) { - this.cursorPosition = this.inputElement.selectionEnd; - } else { - this.cursorPosition = this.inputElement.selectionEnd + 1; + return { + maxHourFirstDigit: 2, + maxHours: 23, + maxMinutesFirstDigit: 5, + maxMinutes: 60 + }; + }, + + getValidatedTime: function (value) { + var owner = this, result = ''; + + value = value.replace(/[^\d]/g, ''); + + var timeFormatOptions = owner.getTimeFormatOptions(); + + owner.blocks.forEach(function (length, index) { + if (value.length > 0) { + var sub = value.slice(0, length), + sub0 = sub.slice(0, 1), + rest = value.slice(length); + + switch (owner.timePattern[index]) { + + case 'h': + if (parseInt(sub0, 10) > timeFormatOptions.maxHourFirstDigit) { + sub = '0' + sub0; + } else if (parseInt(sub, 10) > timeFormatOptions.maxHours) { + sub = timeFormatOptions.maxHours + ''; + } + + break; + + case 'm': + case 's': + if (parseInt(sub0, 10) > timeFormatOptions.maxMinutesFirstDigit) { + sub = '0' + sub0; + } else if (parseInt(sub, 10) > timeFormatOptions.maxMinutes) { + sub = timeFormatOptions.maxMinutes + ''; + } + break; + } + + result += sub; + + // update remaining string + value = rest; } - } else if (evt.key === 'Backspace') { - this.cursorPosition = this.inputElement.selectionEnd - 1; - } else if (evt.key === 'Delete') { - this.cursorPosition = this.inputElement.selectionEnd; - } + }); + + return this.getFixedTimeString(result); + }, + + getFixedTimeString: function (value) { + var owner = this, timePattern = owner.timePattern, time = [], + secondIndex = 0, minuteIndex = 0, hourIndex = 0, + secondStartIndex = 0, minuteStartIndex = 0, hourStartIndex = 0, + second, minute, hour; + + if (value.length === 6) { + timePattern.forEach(function (type, index) { + switch (type) { + case 's': + secondIndex = index * 2; + break; + case 'm': + minuteIndex = index * 2; + break; + case 'h': + hourIndex = index * 2; + break; + } + }); + + hourStartIndex = hourIndex; + minuteStartIndex = minuteIndex; + secondStartIndex = secondIndex; + + second = parseInt(value.slice(secondStartIndex, secondStartIndex + 2), 10); + minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10); + hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10); + + time = this.getFixedTime(hour, minute, second); } - if (evt.key === "ArrowUp" || evt.key === "ArrowDown" || evt.key === "ArrowLeft" || evt.key === "ArrowRight") { - if (evt.key === 'ArrowUp') { - this.cursorPosition = 0; - } else if (evt.key === 'ArrowDown') { - this.cursorPosition = this.value.length; - } else if (evt.key === 'ArrowLeft') { - this.cursorPosition = this.inputElement.selectionEnd - 1; - } else if (evt.key === 'ArrowRight') { - this.cursorPosition = this.inputElement.selectionEnd + 1; - } + if (value.length === 4 && owner.timePattern.indexOf('s') < 0) { + timePattern.forEach(function (type, index) { + switch (type) { + case 'm': + minuteIndex = index * 2; + break; + case 'h': + hourIndex = index * 2; + break; + } + }); + + hourStartIndex = hourIndex; + minuteStartIndex = minuteIndex; + + second = 0; + minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10); + hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10); + + time = this.getFixedTime(hour, minute, second); } - } - }); - this.notifyReady(); - } + owner.time = time; - /** - * LitElement lifecycle method. Called after the DOM has been updated. - * @param {Map} changedProperties - Keys are the names of changed properties, values are the corresponding previous values. - * @returns {void} - */ - updated(changedProperties) { - if (this.type === 'password') { - this.spellcheck = 'false'; - } + return time.length === 0 ? value : timePattern.reduce(function (previous, current) { + switch (current) { + case 's': + return previous + owner.addLeadingZero(time[2]); + case 'm': + return previous + owner.addLeadingZero(time[1]); + case 'h': + return previous + owner.addLeadingZero(time[0]); + } + }, ''); + }, - if (this.spellcheck === 'false') { - this.autocorrect = 'off'; - this.autocapitalize = 'none'; - } else { - this.autocorrect = this.autocorrect ? this.autocorrect : undefined; - this.autocapitalize = undefined; - } + getFixedTime: function (hour, minute, second) { + second = Math.min(parseInt(second || 0, 10), 60); + minute = Math.min(minute, 60); + hour = Math.min(hour, 60); - if (changedProperties.has('readonly')) { - if (this.readonly) { - this.inputElement.setAttribute('readonly', true); - this.inputElement.setAttribute('aria-readonly', true); - } else { - this.inputElement.removeAttribute('readonly'); - this.inputElement.removeAttribute('aria-readonly'); - } - } + return [hour, minute, second]; + }, - if (changedProperties.has('type')) { - this.configureDataForType(); + addLeadingZero: function (number) { + return (number < 10 ? '0' : '') + number; } +}; - if (changedProperties.has('value')) { - if (this.value && this.value.length > 0) { - this.hasValue = true; - this.requestUpdate(); - } else { - this.hasValue = false; - this.requestUpdate(); - } +var TimeFormatter_1 = TimeFormatter; - if (this.value !== this.inputElement.value) { - if (this.value) { - this.inputElement.value = this.value; - } else { - this.inputElement.value = ''; - } +var PhoneFormatter = function (formatter, delimiter) { + var owner = this; - if (!this.shadowRoot.contains(this.getActiveElement())) { - this.validation.validate(this); + owner.delimiter = (delimiter || delimiter === '') ? delimiter : ' '; + owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : ''; + + owner.formatter = formatter; +}; + +PhoneFormatter.prototype = { + setFormatter: function (formatter) { + this.formatter = formatter; + }, + + format: function (phoneNumber) { + var owner = this; + + owner.formatter.clear(); + + // only keep number and + + phoneNumber = phoneNumber.replace(/[^\d+]/g, ''); + + // strip non-leading + + phoneNumber = phoneNumber.replace(/^\+/, 'B').replace(/\+/g, '').replace('B', '+'); + + // strip delimiter + phoneNumber = phoneNumber.replace(owner.delimiterRE, ''); + + var result = '', current, validated = false; + + for (var i = 0, iMax = phoneNumber.length; i < iMax; i++) { + current = owner.formatter.inputDigit(phoneNumber.charAt(i)); + + // has ()- or space inside + if (/[\s()-]/g.test(current)) { + result = current; + + validated = true; + } else { + if (!validated) { + result = current; + } + // else: over length input + // it turns to invalid number again + } } - this.notifyValueChanged(); - } - this.autoFormatHandling(); - } + // strip () + // e.g. US: 7161234567 returns (716) 123-4567 + result = result.replace(/[()]/g, ''); + // replace library delimiter with user customized delimiter + result = result.replace(/[\s-]/g, owner.delimiter); - if (changedProperties.has('error')) { - this.validation.validate(this, true); + return result; } +}; - if (changedProperties.has('validity')) { - this.notifyValidityChange(); +var PhoneFormatter_1 = PhoneFormatter; + +var CreditCardDetector = { + blocks: { + uatp: [4, 5, 6], + amex: [4, 6, 5], + diners: [4, 6, 4], + discover: [4, 4, 4, 4], + mastercard: [4, 4, 4, 4], + dankort: [4, 4, 4, 4], + instapayment: [4, 4, 4, 4], + jcb15: [4, 6, 5], + jcb: [4, 4, 4, 4], + maestro: [4, 4, 4, 4], + visa: [4, 4, 4, 4], + mir: [4, 4, 4, 4], + unionPay: [4, 4, 4, 4], + general: [4, 4, 4, 4] + }, + + re: { + // starts with 1; 15 digits, not starts with 1800 (jcb card) + uatp: /^(?!1800)1\d{0,14}/, + + // starts with 34/37; 15 digits + amex: /^3[47]\d{0,13}/, + + // starts with 6011/65/644-649; 16 digits + discover: /^(?:6011|65\d{0,2}|64[4-9]\d?)\d{0,12}/, + + // starts with 300-305/309 or 36/38/39; 14 digits + diners: /^3(?:0([0-5]|9)|[689]\d?)\d{0,11}/, + + // starts with 51-55/2221–2720; 16 digits + mastercard: /^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/, + + // starts with 5019/4175/4571; 16 digits + dankort: /^(5019|4175|4571)\d{0,12}/, + + // starts with 637-639; 16 digits + instapayment: /^63[7-9]\d{0,13}/, + + // starts with 2131/1800; 15 digits + jcb15: /^(?:2131|1800)\d{0,11}/, + + // starts with 2131/1800/35; 16 digits + jcb: /^(?:35\d{0,2})\d{0,12}/, + + // starts with 50/56-58/6304/67; 16 digits + maestro: /^(?:5[0678]\d{0,2}|6304|67\d{0,2})\d{0,12}/, + + // starts with 22; 16 digits + mir: /^220[0-4]\d{0,12}/, + + // starts with 4; 16 digits + visa: /^4\d{0,15}/, + + // starts with 62/81; 16 digits + unionPay: /^(62|81)\d{0,14}/ + }, + + getStrictBlocks: function (block) { + var total = block.reduce(function (prev, current) { + return prev + current; + }, 0); + + return block.concat(19 - total); + }, + + getInfo: function (value, strictMode) { + var blocks = CreditCardDetector.blocks, + re = CreditCardDetector.re; + + // Some credit card can have up to 19 digits number. + // Set strictMode to true will remove the 16 max-length restrain, + // however, I never found any website validate card number like + // this, hence probably you don't want to enable this option. + strictMode = !!strictMode; + + for (var key in re) { + if (re[key].test(value)) { + var matchedBlocks = blocks[key]; + return { + type: key, + blocks: strictMode ? this.getStrictBlocks(matchedBlocks) : matchedBlocks + }; + } + } + + return { + type: 'unknown', + blocks: strictMode ? this.getStrictBlocks(blocks.general) : blocks.general + }; } - } +}; - /** - * @private - * @returns {void} Handles cursor position when input auto-formats. - */ - autoFormatHandling() { - if (this.cursorPosition >= 0 && this.autoFormattingTypes.includes(this.type)) { - if (this.type === 'credit-card' && this.inputElement.value.charAt(this.cursorPosition) === ' ') { - this.cursorPosition += 1; - } else if (this.dateInputTypes.includes(this.type)) { - const divider = '/'; - const dividerNextChar = this.inputElement.value.charAt(this.cursorPosition) === divider; +var CreditCardDetector_1 = CreditCardDetector; - if (this.cursorPosition > 1 && dividerNextChar && this.inputElement.value.charAt(this.cursorPosition - 2) !== divider) { - this.cursorPosition += 1; - } else if (this.cursorPosition > 0 && this.inputElement.value.charAt(this.cursorPosition + 1) === divider - && this.inputElement.value.charAt(this.cursorPosition - 1) === '0') { // eslint-disable-line operator-linebreak - this.cursorPosition += 2; +var Util = { + noop: function () { + }, + + strip: function (value, re) { + return value.replace(re, ''); + }, + + getPostDelimiter: function (value, delimiter, delimiters) { + // single delimiter + if (delimiters.length === 0) { + return value.slice(-delimiter.length) === delimiter ? delimiter : ''; } - } - this.inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition); - } - } + // multiple delimiters + var matchedDelimiter = ''; + delimiters.forEach(function (current) { + if (value.slice(-current.length) === current) { + matchedDelimiter = current; + } + }); - /** - * @private - * @returns {void} Notify validity state changed via event. - */ - notifyValidityChange() { - this.dispatchEvent(new CustomEvent('auroInput-validityChange', { - bubbles: true, - cancelable: false, - composed: true, - })); - } + return matchedDelimiter; + }, - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; + getDelimiterREByDelimiter: function (delimiter) { + return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g'); + }, - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } + getNextCursorPosition: function (prevPos, oldValue, newValue, delimiter, delimiters) { + // If cursor was at the end of value, just place it back. + // Because new value could contain additional chars. + if (oldValue.length === prevPos) { + return newValue.length; + } + + return prevPos + this.getPositionOffset(prevPos, oldValue, newValue, delimiter ,delimiters); + }, + + getPositionOffset: function (prevPos, oldValue, newValue, delimiter, delimiters) { + var oldRawValue, newRawValue, lengthOffset; + + oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters); + newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters); + lengthOffset = oldRawValue.length - newRawValue.length; + + return (lengthOffset !== 0) ? (lengthOffset / Math.abs(lengthOffset)) : 0; + }, + + stripDelimiters: function (value, delimiter, delimiters) { + var owner = this; + + // single delimiter + if (delimiters.length === 0) { + var delimiterRE = delimiter ? owner.getDelimiterREByDelimiter(delimiter) : ''; + + return value.replace(delimiterRE, ''); + } + + // multiple delimiters + delimiters.forEach(function (current) { + current.split('').forEach(function (letter) { + value = value.replace(owner.getDelimiterREByDelimiter(letter), ''); + }); + }); + + return value; + }, + + headStr: function (str, length) { + return str.slice(0, length); + }, + + getMaxLength: function (blocks) { + return blocks.reduce(function (previous, current) { + return previous + current; + }, 0); + }, + + // strip prefix + // Before type | After type | Return value + // PEFIX-... | PEFIX-... | '' + // PREFIX-123 | PEFIX-123 | 123 + // PREFIX-123 | PREFIX-23 | 23 + // PREFIX-123 | PREFIX-1234 | 1234 + getPrefixStrippedValue: function (value, prefix, prefixLength, prevResult, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix) { + // No prefix + if (prefixLength === 0) { + return value; + } + + // Value is prefix + if (value === prefix && value !== '') { + return ''; + } + + if (signBeforePrefix && (value.slice(0, 1) == '-')) { + var prev = (prevResult.slice(0, 1) == '-') ? prevResult.slice(1) : prevResult; + return '-' + this.getPrefixStrippedValue(value.slice(1), prefix, prefixLength, prev, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix); + } + + // Pre result prefix string does not match pre-defined prefix + if (prevResult.slice(0, prefixLength) !== prefix && !tailPrefix) { + // Check if the first time user entered something + if (noImmediatePrefix && !prevResult && value) return value; + return ''; + } else if (prevResult.slice(-prefixLength) !== prefix && tailPrefix) { + // Check if the first time user entered something + if (noImmediatePrefix && !prevResult && value) return value; + return ''; + } + + var prevValue = this.stripDelimiters(prevResult, delimiter, delimiters); + + // New value has issue, someone typed in between prefix letters + // Revert to pre value + if (value.slice(0, prefixLength) !== prefix && !tailPrefix) { + return prevValue.slice(prefixLength); + } else if (value.slice(-prefixLength) !== prefix && tailPrefix) { + return prevValue.slice(0, -prefixLength - 1); + } + + // No issue, strip prefix for new value + return tailPrefix ? value.slice(0, -prefixLength) : value.slice(prefixLength); + }, + + getFirstDiffIndex: function (prev, current) { + var index = 0; + + while (prev.charAt(index) === current.charAt(index)) { + if (prev.charAt(index++) === '') { + return -1; + } + } + + return index; + }, + + getFormattedValue: function (value, blocks, blocksLength, delimiter, delimiters, delimiterLazyShow) { + var result = '', + multipleDelimiters = delimiters.length > 0, + currentDelimiter = ''; + + // no options, normal input + if (blocksLength === 0) { + return value; + } + + blocks.forEach(function (length, index) { + if (value.length > 0) { + var sub = value.slice(0, length), + rest = value.slice(length); + + if (multipleDelimiters) { + currentDelimiter = delimiters[delimiterLazyShow ? (index - 1) : index] || currentDelimiter; + } else { + currentDelimiter = delimiter; + } + + if (delimiterLazyShow) { + if (index > 0) { + result += currentDelimiter; + } + + result += sub; + } else { + result += sub; + + if (sub.length === length && index < blocksLength - 1) { + result += currentDelimiter; + } + } + + // update remaining string + value = rest; + } + }); + + return result; + }, + + // move cursor to the end + // the first time user focuses on an input with prefix + fixPrefixCursor: function (el, prefix, delimiter, delimiters) { + if (!el) { + return; + } + + var val = el.value, + appendix = delimiter || (delimiters[0] || ' '); + + if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) <= val.length) { + return; + } + + var len = val.length * 2; + + // set timeout to avoid blink + setTimeout(function () { + el.setSelectionRange(len, len); + }, 1); + }, + + // Check if input field is fully selected + checkFullSelection: function(value) { + try { + var selection = window.getSelection() || document.getSelection() || {}; + return selection.toString().length === value.length; + } catch (ex) { + // Ignore + } + + return false; + }, + + setSelection: function (element, position, doc) { + if (element !== this.getActiveElement(doc)) { + return; + } + + // cursor is already in the end + if (element && element.value.length <= position) { + return; + } + + if (element.createTextRange) { + var range = element.createTextRange(); + + range.move('character', position); + range.select(); + } else { + try { + element.setSelectionRange(position, position); + } catch (e) { + // eslint-disable-next-line + console.warn('The input element type does not support selection'); + } + } + }, + + getActiveElement: function(parent) { + var activeElement = parent.activeElement; + if (activeElement && activeElement.shadowRoot) { + return this.getActiveElement(activeElement.shadowRoot); + } + return activeElement; + }, + + isAndroid: function () { + return navigator && /android/i.test(navigator.userAgent); + }, + + // On Android chrome, the keyup and keydown events + // always return key code 229 as a composition that + // buffers the user’s keystrokes + // see https://github.com/nosir/cleave.js/issues/147 + isAndroidBackspaceKeydown: function (lastInputValue, currentInputValue) { + if (!this.isAndroid() || !lastInputValue || !currentInputValue) { + return false; + } + + return currentInputValue === lastInputValue.slice(0, -1); + } +}; + +var Util_1 = Util; + +/** + * Props Assignment + * + * Separate this, so react module can share the usage + */ +var DefaultProperties = { + // Maybe change to object-assign + // for now just keep it as simple + assign: function (target, opts) { + target = target || {}; + opts = opts || {}; + + // credit card + target.creditCard = !!opts.creditCard; + target.creditCardStrictMode = !!opts.creditCardStrictMode; + target.creditCardType = ''; + target.onCreditCardTypeChanged = opts.onCreditCardTypeChanged || (function () {}); + + // phone + target.phone = !!opts.phone; + target.phoneRegionCode = opts.phoneRegionCode || 'AU'; + target.phoneFormatter = {}; + + // time + target.time = !!opts.time; + target.timePattern = opts.timePattern || ['h', 'm', 's']; + target.timeFormat = opts.timeFormat || '24'; + target.timeFormatter = {}; + + // date + target.date = !!opts.date; + target.datePattern = opts.datePattern || ['d', 'm', 'Y']; + target.dateMin = opts.dateMin || ''; + target.dateMax = opts.dateMax || ''; + target.dateFormatter = {}; + + // numeral + target.numeral = !!opts.numeral; + target.numeralIntegerScale = opts.numeralIntegerScale > 0 ? opts.numeralIntegerScale : 0; + target.numeralDecimalScale = opts.numeralDecimalScale >= 0 ? opts.numeralDecimalScale : 2; + target.numeralDecimalMark = opts.numeralDecimalMark || '.'; + target.numeralThousandsGroupStyle = opts.numeralThousandsGroupStyle || 'thousand'; + target.numeralPositiveOnly = !!opts.numeralPositiveOnly; + target.stripLeadingZeroes = opts.stripLeadingZeroes !== false; + target.signBeforePrefix = !!opts.signBeforePrefix; + target.tailPrefix = !!opts.tailPrefix; + + // others + target.swapHiddenInput = !!opts.swapHiddenInput; + + target.numericOnly = target.creditCard || target.date || !!opts.numericOnly; + + target.uppercase = !!opts.uppercase; + target.lowercase = !!opts.lowercase; + + target.prefix = (target.creditCard || target.date) ? '' : (opts.prefix || ''); + target.noImmediatePrefix = !!opts.noImmediatePrefix; + target.prefixLength = target.prefix.length; + target.rawValueTrimPrefix = !!opts.rawValueTrimPrefix; + target.copyDelimiter = !!opts.copyDelimiter; + + target.initValue = (opts.initValue !== undefined && opts.initValue !== null) ? opts.initValue.toString() : ''; + + target.delimiter = + (opts.delimiter || opts.delimiter === '') ? opts.delimiter : + (opts.date ? '/' : + (opts.time ? ':' : + (opts.numeral ? ',' : + (opts.phone ? ' ' : + ' ')))); + target.delimiterLength = target.delimiter.length; + target.delimiterLazyShow = !!opts.delimiterLazyShow; + target.delimiters = opts.delimiters || []; + + target.blocks = opts.blocks || []; + target.blocksLength = target.blocks.length; + + target.root = (typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window; + target.document = opts.document || target.root.document; + + target.maxLength = 0; + + target.backspace = false; + target.result = ''; + + target.onValueChanged = opts.onValueChanged || (function () {}); + + return target; + } +}; + +var DefaultProperties_1 = DefaultProperties; + +/** + * Construct a new Cleave instance by passing the configuration object + * + * @param {String | HTMLElement} element + * @param {Object} opts + */ +var Cleave = function (element, opts) { + var owner = this; + var hasMultipleElements = false; + + if (typeof element === 'string') { + owner.element = document.querySelector(element); + hasMultipleElements = document.querySelectorAll(element).length > 1; + } else { + if (typeof element.length !== 'undefined' && element.length > 0) { + owner.element = element[0]; + hasMultipleElements = element.length > 1; + } else { + owner.element = element; + } + } + + if (!owner.element) { + throw new Error('[cleave.js] Please check the element'); + } + + if (hasMultipleElements) { + try { + // eslint-disable-next-line + console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.'); + } catch (e) { + // Old IE + } + } + + opts.initValue = owner.element.value; + + owner.properties = Cleave.DefaultProperties.assign({}, opts); + + owner.init(); +}; + +Cleave.prototype = { + init: function () { + var owner = this, pps = owner.properties; + + // no need to use this lib + if (!pps.numeral && !pps.phone && !pps.creditCard && !pps.time && !pps.date && (pps.blocksLength === 0 && !pps.prefix)) { + owner.onInput(pps.initValue); + + return; + } + + pps.maxLength = Cleave.Util.getMaxLength(pps.blocks); + + owner.isAndroid = Cleave.Util.isAndroid(); + owner.lastInputValue = ''; + owner.isBackward = ''; + + owner.onChangeListener = owner.onChange.bind(owner); + owner.onKeyDownListener = owner.onKeyDown.bind(owner); + owner.onFocusListener = owner.onFocus.bind(owner); + owner.onCutListener = owner.onCut.bind(owner); + owner.onCopyListener = owner.onCopy.bind(owner); + + owner.initSwapHiddenInput(); + + owner.element.addEventListener('input', owner.onChangeListener); + owner.element.addEventListener('keydown', owner.onKeyDownListener); + owner.element.addEventListener('focus', owner.onFocusListener); + owner.element.addEventListener('cut', owner.onCutListener); + owner.element.addEventListener('copy', owner.onCopyListener); + + + owner.initPhoneFormatter(); + owner.initDateFormatter(); + owner.initTimeFormatter(); + owner.initNumeralFormatter(); + + // avoid touch input field if value is null + // otherwise Firefox will add red box-shadow for + if (pps.initValue || (pps.prefix && !pps.noImmediatePrefix)) { + owner.onInput(pps.initValue); + } + }, + + initSwapHiddenInput: function () { + var owner = this, pps = owner.properties; + if (!pps.swapHiddenInput) return; + + var inputFormatter = owner.element.cloneNode(true); + owner.element.parentNode.insertBefore(inputFormatter, owner.element); + + owner.elementSwapHidden = owner.element; + owner.elementSwapHidden.type = 'hidden'; + + owner.element = inputFormatter; + owner.element.id = ''; + }, + + initNumeralFormatter: function () { + var owner = this, pps = owner.properties; + + if (!pps.numeral) { + return; + } + + pps.numeralFormatter = new Cleave.NumeralFormatter( + pps.numeralDecimalMark, + pps.numeralIntegerScale, + pps.numeralDecimalScale, + pps.numeralThousandsGroupStyle, + pps.numeralPositiveOnly, + pps.stripLeadingZeroes, + pps.prefix, + pps.signBeforePrefix, + pps.tailPrefix, + pps.delimiter + ); + }, + + initTimeFormatter: function() { + var owner = this, pps = owner.properties; + + if (!pps.time) { + return; + } + + pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern, pps.timeFormat); + pps.blocks = pps.timeFormatter.getBlocks(); + pps.blocksLength = pps.blocks.length; + pps.maxLength = Cleave.Util.getMaxLength(pps.blocks); + }, + + initDateFormatter: function () { + var owner = this, pps = owner.properties; + + if (!pps.date) { + return; + } + + pps.dateFormatter = new Cleave.DateFormatter(pps.datePattern, pps.dateMin, pps.dateMax); + pps.blocks = pps.dateFormatter.getBlocks(); + pps.blocksLength = pps.blocks.length; + pps.maxLength = Cleave.Util.getMaxLength(pps.blocks); + }, + + initPhoneFormatter: function () { + var owner = this, pps = owner.properties; + + if (!pps.phone) { + return; + } + + // Cleave.AsYouTypeFormatter should be provided by + // external google closure lib + try { + pps.phoneFormatter = new Cleave.PhoneFormatter( + new pps.root.Cleave.AsYouTypeFormatter(pps.phoneRegionCode), + pps.delimiter + ); + } catch (ex) { + throw new Error('[cleave.js] Please include phone-type-formatter.{country}.js lib'); + } + }, + + onKeyDown: function (event) { + var owner = this, + charCode = event.which || event.keyCode; + + owner.lastInputValue = owner.element.value; + owner.isBackward = charCode === 8; + }, + + onChange: function (event) { + var owner = this, pps = owner.properties, + Util = Cleave.Util; + + owner.isBackward = owner.isBackward || event.inputType === 'deleteContentBackward'; + + var postDelimiter = Util.getPostDelimiter(owner.lastInputValue, pps.delimiter, pps.delimiters); + + if (owner.isBackward && postDelimiter) { + pps.postDelimiterBackspace = postDelimiter; + } else { + pps.postDelimiterBackspace = false; + } + + this.onInput(this.element.value); + }, + + onFocus: function () { + var owner = this, + pps = owner.properties; + owner.lastInputValue = owner.element.value; + + if (pps.prefix && pps.noImmediatePrefix && !owner.element.value) { + this.onInput(pps.prefix); + } + + Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters); + }, + + onCut: function (e) { + if (!Cleave.Util.checkFullSelection(this.element.value)) return; + this.copyClipboardData(e); + this.onInput(''); + }, + + onCopy: function (e) { + if (!Cleave.Util.checkFullSelection(this.element.value)) return; + this.copyClipboardData(e); + }, + + copyClipboardData: function (e) { + var owner = this, + pps = owner.properties, + Util = Cleave.Util, + inputValue = owner.element.value, + textToCopy = ''; + + if (!pps.copyDelimiter) { + textToCopy = Util.stripDelimiters(inputValue, pps.delimiter, pps.delimiters); + } else { + textToCopy = inputValue; + } + + try { + if (e.clipboardData) { + e.clipboardData.setData('Text', textToCopy); + } else { + window.clipboardData.setData('Text', textToCopy); + } + + e.preventDefault(); + } catch (ex) { + // empty + } + }, + + onInput: function (value) { + var owner = this, pps = owner.properties, + Util = Cleave.Util; + + // case 1: delete one more character "4" + // 1234*| -> hit backspace -> 123| + // case 2: last character is not delimiter which is: + // 12|34* -> hit backspace -> 1|34* + // note: no need to apply this for numeral mode + var postDelimiterAfter = Util.getPostDelimiter(value, pps.delimiter, pps.delimiters); + if (!pps.numeral && pps.postDelimiterBackspace && !postDelimiterAfter) { + value = Util.headStr(value, value.length - pps.postDelimiterBackspace.length); + } + + // phone formatter + if (pps.phone) { + if (pps.prefix && (!pps.noImmediatePrefix || value.length)) { + pps.result = pps.prefix + pps.phoneFormatter.format(value).slice(pps.prefix.length); + } else { + pps.result = pps.phoneFormatter.format(value); + } + owner.updateValueState(); + + return; + } + + // numeral formatter + if (pps.numeral) { + // Do not show prefix when noImmediatePrefix is specified + // This mostly because we need to show user the native input placeholder + if (pps.prefix && pps.noImmediatePrefix && value.length === 0) { + pps.result = ''; + } else { + pps.result = pps.numeralFormatter.format(value); + } + owner.updateValueState(); + + return; + } + + // date + if (pps.date) { + value = pps.dateFormatter.getValidatedDate(value); + } + + // time + if (pps.time) { + value = pps.timeFormatter.getValidatedTime(value); + } + + // strip delimiters + value = Util.stripDelimiters(value, pps.delimiter, pps.delimiters); + + // strip prefix + value = Util.getPrefixStrippedValue(value, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix); + + // strip non-numeric characters + value = pps.numericOnly ? Util.strip(value, /[^\d]/g) : value; + + // convert case + value = pps.uppercase ? value.toUpperCase() : value; + value = pps.lowercase ? value.toLowerCase() : value; + + // prevent from showing prefix when no immediate option enabled with empty input value + if (pps.prefix) { + if (pps.tailPrefix) { + value = value + pps.prefix; + } else { + value = pps.prefix + value; + } + + + // no blocks specified, no need to do formatting + if (pps.blocksLength === 0) { + pps.result = value; + owner.updateValueState(); + + return; + } + } + + // update credit card props + if (pps.creditCard) { + owner.updateCreditCardPropsByValue(value); + } + + // strip over length characters + value = Util.headStr(value, pps.maxLength); + + // apply blocks + pps.result = Util.getFormattedValue( + value, + pps.blocks, pps.blocksLength, + pps.delimiter, pps.delimiters, pps.delimiterLazyShow + ); + + owner.updateValueState(); + }, + + updateCreditCardPropsByValue: function (value) { + var owner = this, pps = owner.properties, + Util = Cleave.Util, + creditCardInfo; + + // At least one of the first 4 characters has changed + if (Util.headStr(pps.result, 4) === Util.headStr(value, 4)) { + return; + } + + creditCardInfo = Cleave.CreditCardDetector.getInfo(value, pps.creditCardStrictMode); + + pps.blocks = creditCardInfo.blocks; + pps.blocksLength = pps.blocks.length; + pps.maxLength = Util.getMaxLength(pps.blocks); + + // credit card type changed + if (pps.creditCardType !== creditCardInfo.type) { + pps.creditCardType = creditCardInfo.type; + + pps.onCreditCardTypeChanged.call(owner, pps.creditCardType); + } + }, + + updateValueState: function () { + var owner = this, + Util = Cleave.Util, + pps = owner.properties; + + if (!owner.element) { + return; + } + + var endPos = owner.element.selectionEnd; + var oldValue = owner.element.value; + var newValue = pps.result; + + endPos = Util.getNextCursorPosition(endPos, oldValue, newValue, pps.delimiter, pps.delimiters); + + // fix Android browser type="text" input field + // cursor not jumping issue + if (owner.isAndroid) { + window.setTimeout(function () { + owner.element.value = newValue; + Util.setSelection(owner.element, endPos, pps.document, false); + owner.callOnValueChanged(); + }, 1); + + return; + } + + owner.element.value = newValue; + if (pps.swapHiddenInput) owner.elementSwapHidden.value = owner.getRawValue(); + + Util.setSelection(owner.element, endPos, pps.document, false); + owner.callOnValueChanged(); + }, + + callOnValueChanged: function () { + var owner = this, + pps = owner.properties; + + pps.onValueChanged.call(owner, { + target: { + name: owner.element.name, + value: pps.result, + rawValue: owner.getRawValue() + } + }); + }, + + setPhoneRegionCode: function (phoneRegionCode) { + var owner = this, pps = owner.properties; + + pps.phoneRegionCode = phoneRegionCode; + owner.initPhoneFormatter(); + owner.onChange(); + }, + + setRawValue: function (value) { + var owner = this, pps = owner.properties; + + value = value !== undefined && value !== null ? value.toString() : ''; + + if (pps.numeral) { + value = value.replace('.', pps.numeralDecimalMark); + } + + pps.postDelimiterBackspace = false; + + owner.element.value = value; + owner.onInput(value); + }, + + getRawValue: function () { + var owner = this, + pps = owner.properties, + Util = Cleave.Util, + rawValue = owner.element.value; + + if (pps.rawValueTrimPrefix) { + rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix); + } + + if (pps.numeral) { + rawValue = pps.numeralFormatter.getRawValue(rawValue); + } else { + rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters); + } + + return rawValue; + }, + + getISOFormatDate: function () { + var owner = this, + pps = owner.properties; + + return pps.date ? pps.dateFormatter.getISOFormatDate() : ''; + }, + + getISOFormatTime: function () { + var owner = this, + pps = owner.properties; + + return pps.time ? pps.timeFormatter.getISOFormatTime() : ''; + }, + + getFormattedValue: function () { + return this.element.value; + }, + + destroy: function () { + var owner = this; + + owner.element.removeEventListener('input', owner.onChangeListener); + owner.element.removeEventListener('keydown', owner.onKeyDownListener); + owner.element.removeEventListener('focus', owner.onFocusListener); + owner.element.removeEventListener('cut', owner.onCutListener); + owner.element.removeEventListener('copy', owner.onCopyListener); + }, + + toString: function () { + return '[Cleave Object]'; + } +}; + +Cleave.NumeralFormatter = NumeralFormatter_1; +Cleave.DateFormatter = DateFormatter_1; +Cleave.TimeFormatter = TimeFormatter_1; +Cleave.PhoneFormatter = PhoneFormatter_1; +Cleave.CreditCardDetector = CreditCardDetector_1; +Cleave.Util = Util_1; +Cleave.DefaultProperties = DefaultProperties_1; + +// for angular directive +((typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window)['Cleave'] = Cleave; + +// CommonJS +var Cleave_1 = Cleave; + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ + +class AuroLibraryRuntimeUtils { + + /* eslint-disable jsdoc/require-param */ + + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } + } + + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ + + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } + + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + return elemTag === tag || elem.hasAttribute(tag); + } +} + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroFormValidation { + constructor() { + this.runtimeUtils = new AuroLibraryRuntimeUtils(); + } + + /** + * Determines the validity state of the element based on the common attribute restrictions (pattern). + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + validateAttributes(elem) { + if (elem.pattern) { + const pattern = new RegExp(`^${elem.pattern}$`, 'u'); + + if (!pattern.test(elem.value)) { + elem.validity = 'badInput'; + elem.setCustomValidity = elem.setCustomValidityBadInput || ''; + } + } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityTooShort || ''; + } else if (elem.value && elem.value.length > elem.maxLength) { + elem.validity = 'tooLong'; + elem.setCustomValidity = elem.setCustomValidityTooLong || ''; + } + } + + /** + * Determines the validity state of the element based on the type attribute. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + validateType(elem) { + if (elem.hasAttribute('type')) { + if (elem.type === 'email') { + const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp + + if (!elem.value.match(emailRegex)) { + elem.validity = 'badInput'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } + } else if (elem.type === 'credit-card') { + if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } + } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { + elem.validity = 'rangeOverflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; + } + + if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) { + elem.validity = 'rangeUnderflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || ''; + } + + } else if (elem.type === 'month-day-year' || + elem.type === 'month-year' || + elem.type === 'month-fullYear' || + elem.type === 'year-month-day' + ) { + if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } else { + const valueDate = new Date(elem.value); + + // validate max + if (elem.max !== undefined) { + const maxDate = new Date(elem.max); + + if (valueDate > maxDate) { + elem.validity = 'rangeOverflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; + } + } + + // validate min + if (elem.min) { + const minDate = new Date(elem.min); + + if (valueDate < minDate) { + elem.validity = 'rangeUnderflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || ''; + } + } + } + } + } + } + + /** + * Determines the validity state of the element. + * @param {object} elem - HTML element to validate. + * @param {boolean} force - Boolean that forces validation to run. + * @returns {void} + */ + validate(elem, force) { + this.getInputElements(elem); + this.getAuroInputs(elem); + + // Validate only if noValidate is not true and the input does not have focus + const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput; + + if (elem.hasAttribute('error')) { + elem.validity = 'customError'; + elem.setCustomValidity = elem.error; + } else if (validationShouldRun) { + elem.validity = 'valid'; + elem.setCustomValidity = ''; + + /** + * Only validate once we interact with the datepicker + * elem.value === undefined is the initial state pre-interaction. + * + * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState. + */ + + let hasValue = elem.value && elem.value.length > 0; + + // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false; + if (this.auroInputElements && this.auroInputElements.length === 2) { + if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) { + hasValue = false; + } + } + + if (!hasValue && elem.required) { + elem.validity = 'valueMissing'; + elem.setCustomValidity = elem.setCustomValidityValueMissing || ''; + } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) { + this.validateType(elem); + this.validateAttributes(elem); + } + } + + if (this.auroInputElements && this.auroInputElements.length > 0) { + elem.validity = this.auroInputElements[0].validity; + elem.setCustomValidity = this.auroInputElements[0].setCustomValidity; + + if (elem.validity === 'valid') { + if (this.auroInputElements.length > 1) { + elem.validity = this.auroInputElements[1].validity; + elem.setCustomValidity = this.auroInputElements[1].setCustomValidity; + } + } + } + + if (validationShouldRun || elem.hasAttribute('error')) { + if (elem.validity && elem.validity !== 'valid') { + elem.isValid = false; + + // Use the validity message override if it is declared + if (elem.ValidityMessageOverride) { + elem.setCustomValidity = elem.ValidityMessageOverride; + } + } else { + elem.isValid = true; + } + + this.getErrorMessage(elem); + + elem.dispatchEvent(new CustomEvent('auroFormElement-validated', { + bubbles: true, + composed: true, + detail: { + validity: elem.validity, + message: elem.errorMessage + } + })); + } + } + + /** + * Gets all the HTML5 `inputs` in the element shadow DOM. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + getInputElements(elem) { + this.inputElements = elem.renderRoot.querySelectorAll('input'); + } + + /** + * Gets all the `auro-inputs` in the element shadow DOM. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + getAuroInputs(elem) { + this.auroInputElements = elem.shadowRoot.querySelectorAll('auro-input, [auro-input]'); + } + + /** + * Return appropriate error message. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + getErrorMessage(elem) { + if (elem.validity !== 'valid') { + if (elem.setCustomValidity) { + elem.errorMessage = elem.setCustomValidity; + } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) { + const input = elem.renderRoot.querySelector('input'); + + if (input.validationMessage.length > 0) { + elem.errorMessage = input.validationMessage; + } + } else if (this.inputElements && this.inputElements.length > 0) { + const firstInput = this.inputElements[0]; + + if (firstInput.validationMessage.length > 0) { + elem.errorMessage = firstInput.validationMessage; + } else if (this.inputElements.length === 2) { + const secondInput = this.inputElements[1]; + + if (secondInput.validationMessage.length > 0) { + elem.errorMessage = secondInput.validationMessage; + } + } + } + } else { + elem.errorMessage = undefined; + } + } +} + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +/** + * Auro-input provides users a way to enter data into a text field. + * + * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position. + * @attr {String} autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] + * @attr {String} autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. + * @attr {String} autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box. + * @attr {Boolean} bordered - Applies bordered UI variant. + * @attr {Boolean} borderless - Applies borderless UI variant. + * @attr {Boolean} disabled - If set, disables the input. + * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. + * @prop {String} errorMessage - Contains the help text message for the current validity error. + * @attr {String} helpText - Deprecated, see `slot`. + * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. + * @attr {String} id - Sets the unique ID of the element. + * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. + * @attr {String} label - Deprecated, see `slot`. + * @attr {String} lang - defines the language of an element. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. + * @attr {String} name - Populates the `name` attribute on the input. + * @attr {Boolean} noValidate - If set, disables auto-validation on blur. + * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. + * @prop {Boolean} ready - When false the component API should not be called. + * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. + * @attr {String} pattern - Specifies a regular expression the form control's value should match. + * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. + * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates. + * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`. + * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`. + * @attr {String} setCustomValidityBadInput - Custom help text message to display when validity = `badInput`. + * @attr {String} setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`. + * @attr {String} setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`. + * @attr {String} setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails. + * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`. + * @attr {String} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`. + * @attr {String} spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. + * @attr {String} type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. + * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input. + * @attr {String} validity - Specifies the `validityState` this element is in. + * @attr {String} value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. + * + * @slot helptext - Sets the help text displayed below the input. + * @slot label - Sets the label text for the input. + * + * @csspart wrapper - Use for customizing the style of the root element + * @csspart label - Use for customizing the style of the label element + * @csspart helpText - Use for customizing the style of the helpText element + * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) + * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) + * @event input - Event fires when the value of an `auro-input` has been changed. + * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed. + */ + +class BaseInput extends r { + + constructor() { + super(); + + this.isValid = false; + + this.icon = false; + this.disabled = false; + this.required = false; + this.noValidate = false; + this.max = undefined; + this.min = undefined; + this.maxLength = undefined; + this.minLength = undefined; + this.label = 'Input label is undefined'; + this.ready = false; + this.activeLabel = false; + + this.setCustomValidityForType = undefined; + } + + /** + * Internal Defaults. + * @private + * @returns {void} + */ + privateDefaults() { + this.validation = new AuroFormValidation(); + this.inputIconName = undefined; + this.showPassword = false; + this.validationCCLength = undefined; + this.hasValue = false; + + this.allowedInputTypes = [ + "text", + "email", + "password", + "credit-card", + "month-day-year", + "year-month-day", + "month-year" + ]; + + this.dateInputTypes = [ + "month-day-year", + "year-month-day", + "month-year", + "month-fullYear" + ]; + + this.autoFormattingTypes = [ + 'credit-card', + 'month-day-year', + 'month-year', + 'month-fullyear', + 'year-month-day' + ]; + + /** + * Credit Card is not included as this caused cursor placement issues. + * The Safari issue. + */ + this.setSelectionInputTypes = [ + "text", + "password", + "email", + ]; + + const idLength = 36; + const idSubstrEnd = 8; + const idSubstrStart = 2; + + this.uniqueId = Math.random() + .toString(idLength) + .substring(idSubstrStart, idSubstrEnd); + } + + // function to define props used within the scope of this component + static get properties() { + return { + id: { type: String }, + label: { type: String }, + name: { type: String }, + type: { type: String, + reflect: true }, + value: { type: String }, + lang: { type: String }, + pattern: { + type: String, + reflect: true + }, + icon: { type: Boolean }, + disabled: { type: Boolean }, + required: { type: Boolean }, + noValidate: { type: Boolean }, + helpText: { type: String }, + spellcheck: { type: String }, + autocorrect: { type: String }, + autocapitalize: { type: String }, + autocomplete: { + type: String, + reflect: true + }, + placeholder: { type: String }, + activeLabel: { + type: Boolean, + reflect: true + }, + max: { type: String }, + min: { type: String }, + maxLength: { type: Number }, + minLength: { type: Number }, + + /** + * @ignore + */ + showPassword: { state: true }, + validateOnInput: { type: Boolean }, + readonly: { type: Boolean }, + ready: { type: Boolean }, + error: { + type: String, + reflect: true + }, + errorMessage: { type: String }, + isValid: { + type: String, + reflect: true + }, + validity: { + type: String, + reflect: true + }, + setCustomValidity: { type: String }, + setCustomValidityCustomError: { type: String }, + setCustomValidityValueMissing: { type: String }, + setCustomValidityBadInput: { type: String }, + setCustomValidityTooShort: { type: String }, + setCustomValidityTooLong: { type: String }, + setCustomValidityRangeOverflow: { type: String}, + setCustomValidityRangeUnderflow: { type: String}, + customValidityTypeEmail: { type: String } + }; + } + + static get styles() { + return [ + i$2`${styleCss$3}`, + i$2`${colorCss$3}`, + i$2`${tokensCss$3}` + ]; + } + + connectedCallback() { + super.connectedCallback(); + + this.privateDefaults(); + + notifyOnLangChange(this); + + // Process auto-formatting if defined for CleaveJS + if (this.type) { + let config = null; + + // Set config for credit card + switch (this.type) { + case 'number': + config = { + numeral: true, + delimiter: '' + }; + + this.inputMode = 'numeric'; + + break; + + case 'credit-card': + config = { + creditCard: true + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-day-year': + config = { + date: true, + delimiter: '/', + datePattern: [ + 'm', + 'd', + 'Y' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'year-month-day': + config = { + date: true, + delimiter: '/', + datePattern: [ + 'Y', + 'm', + 'd' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-year': + config = { + date: true, + datePattern: [ + 'm', + 'y' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-fullYear': + config = { + date: true, + datePattern: [ + 'm', + 'Y' + ] + }; + + this.inputMode = 'numeric'; + + break; + // Do nothing + } + + // initialize CleaveJS if we have a defined config for the requested format + if (config) { + // eslint-disable-next-line no-unused-vars + new Cleave_1(this, config); + } + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + stopNotifyingOnLangChange(this); + } + + firstUpdated() { + // add attribute for query selectors when auro-input is registered under a custom name + if (this.tagName.toLowerCase() !== 'auro-input') { + this.setAttribute('auro-input', true); + } + + this.inputElement = this.renderRoot.querySelector('input'); + this.labelElement = this.shadowRoot.querySelector('label'); + + // use validity message override if declared when initializing the component + if (this.hasAttribute('setCustomValidity')) { + this.ValidityMessageOverride = this.setCustomValidity; + } + + // if setCustomValidityForType is not set, use our default + if (!this.setCustomValidityForType) { + if (this.type === 'password') { + this.setCustomValidityForType = i18n(this.lang, 'password'); + } else if (this.type === 'credit-card') { + this.setCustomValidityForType = i18n(this.lang, 'creditcard'); + } else if (this.type === 'email') { + this.setCustomValidityForType = i18n(this.lang, 'email'); + } else if (this.type === 'month-day-year') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY'); + } else if (this.type === 'month-year') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMYY'); + } else if (this.type === 'month-fullyear') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); + } else if (this.type === 'year-month-day') { + this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); + } + } + + this.addEventListener('keydown', (evt) => { + if (this.autoFormattingTypes.includes(this.type)) { + if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { + if (evt.key.length === 1) { + const numCharSelected = this.inputElement.selectionEnd - this.inputElement.selectionStart; + + if (numCharSelected > 1) { + this.cursorPosition = this.inputElement.selectionStart + 1; + } else if (numCharSelected === 1) { + this.cursorPosition = this.inputElement.selectionEnd; + } else { + this.cursorPosition = this.inputElement.selectionEnd + 1; + } + } else if (evt.key === 'Backspace') { + this.cursorPosition = this.inputElement.selectionEnd - 1; + } else if (evt.key === 'Delete') { + this.cursorPosition = this.inputElement.selectionEnd; + } + } + + if (evt.key === "ArrowUp" || evt.key === "ArrowDown" || evt.key === "ArrowLeft" || evt.key === "ArrowRight") { + if (evt.key === 'ArrowUp') { + this.cursorPosition = 0; + } else if (evt.key === 'ArrowDown') { + this.cursorPosition = this.value.length; + } else if (evt.key === 'ArrowLeft') { + this.cursorPosition = this.inputElement.selectionEnd - 1; + } else if (evt.key === 'ArrowRight') { + this.cursorPosition = this.inputElement.selectionEnd + 1; + } + } + } + }); + + this.notifyReady(); + } + + /** + * LitElement lifecycle method. Called after the DOM has been updated. + * @param {Map} changedProperties - Keys are the names of changed properties, values are the corresponding previous values. + * @returns {void} + */ + updated(changedProperties) { + if (this.type === 'password') { + this.spellcheck = 'false'; + } + + if (this.spellcheck === 'false') { + this.autocorrect = 'off'; + this.autocapitalize = 'none'; + } else { + this.autocorrect = this.autocorrect ? this.autocorrect : undefined; + this.autocapitalize = undefined; + } + + if (changedProperties.has('readonly')) { + if (this.readonly) { + this.inputElement.setAttribute('readonly', true); + this.inputElement.setAttribute('aria-readonly', true); + } else { + this.inputElement.removeAttribute('readonly'); + this.inputElement.removeAttribute('aria-readonly'); + } + } + + if (changedProperties.has('type')) { + this.configureDataForType(); + } + + if (changedProperties.has('value')) { + if (this.value && this.value.length > 0) { + this.hasValue = true; + this.requestUpdate(); + } else { + this.hasValue = false; + this.requestUpdate(); + } + + if (this.value !== this.inputElement.value) { + if (this.value) { + this.inputElement.value = this.value; + } else { + this.inputElement.value = ''; + } + + if (!this.shadowRoot.contains(this.getActiveElement())) { + this.validation.validate(this); + } + + this.notifyValueChanged(); + } + this.autoFormatHandling(); + } + + if (changedProperties.has('error')) { + this.validation.validate(this, true); + } + + if (changedProperties.has('validity')) { + this.notifyValidityChange(); + } + } + + /** + * @private + * @returns {void} Handles cursor position when input auto-formats. + */ + autoFormatHandling() { + if (this.cursorPosition >= 0 && this.autoFormattingTypes.includes(this.type)) { + if (this.type === 'credit-card' && this.inputElement.value.charAt(this.cursorPosition) === ' ') { + this.cursorPosition += 1; + } else if (this.dateInputTypes.includes(this.type)) { + const divider = '/'; + const dividerNextChar = this.inputElement.value.charAt(this.cursorPosition) === divider; + + if (this.cursorPosition > 1 && dividerNextChar && this.inputElement.value.charAt(this.cursorPosition - 2) !== divider) { + this.cursorPosition += 1; + } else if (this.cursorPosition > 0 && this.inputElement.value.charAt(this.cursorPosition + 1) === divider + && this.inputElement.value.charAt(this.cursorPosition - 1) === '0') { // eslint-disable-line operator-linebreak + this.cursorPosition += 2; + } + } + + this.inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition); + } + } + + /** + * @private + * @returns {void} Notify validity state changed via event. + */ + notifyValidityChange() { + this.dispatchEvent(new CustomEvent('auroInput-validityChange', { + bubbles: true, + cancelable: false, + composed: true, + })); + } + + /** + * @private + * @returns {void} Marks the component as ready and sends event. + */ + notifyReady() { + this.ready = true; + + this.dispatchEvent(new CustomEvent('auroInput-ready', { + bubbles: true, + cancelable: false, + composed: true, + })); + } + + /** + * @private + * @returns {string} + */ + definePattern() { + if (this.type === 'credit-card' && !this.noValidate && this.maxLength) { + return `.{${this.maxLength},${this.maxLength}}`; + } + + return this.pattern; + } + + /** + * Function to set element focus. + * @private + * @return {void} + */ + focus() { + this.inputElement.focus(); + } + + /** + * Required to convert SVG icons from data to HTML string. + * @private + * @param {string} icon HTML string for requested icon. + * @returns {object} Appended HTML for SVG. + */ + getIconAsHtml(icon) { + const dom = new DOMParser().parseFromString(icon.svg, 'text/html'); + + return dom.body.firstChild; + } + + /** + * Sends event notifying that the input has changed it's value. + * @private + * @returns {void} + */ + notifyValueChanged() { + let inputEvent = null; + + inputEvent = new Event('input', { + bubbles: true, + composed: true, + }); + + // Dispatched event to alert outside shadow DOM context of event firing. + this.dispatchEvent(inputEvent); + } + + /** + * Handles event of clearing input content by clicking the X icon. + * @private + * @return {void} + */ + handleClickClear() { + this.inputElement.value = ""; + this.value = undefined; + this.labelElement.classList.remove('inputElement-label--sticky'); + this.focus(); + this.validation.validate(this); + this.notifyValueChanged(); + } + + /** + * @private + * @return {void} + */ + handleInput() { + // Prevent non-numeric characters from being entered on credit card fields. + if (this.type === 'credit-card') { + this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); + } + + // Sets value property to value of element value (el.value). + this.value = this.inputElement.value; + + // Validation on blur or input. + if (this.validateOnInput) { + this.validation.validate(this); + } + + // Prevents cursor jumping in Safari. + const { selectionStart } = this.inputElement; + + if (this.setSelectionInputTypes.includes(this.type)) { + this.updateComplete.then(() => { + try { + this.inputElement.setSelectionRange(selectionStart, selectionStart); + } catch (error) { // eslint-disable-line + // do nothing + } + }); + } + } + + /** + * Function to support @focusin event. + * @private + * @return {void} + */ + handleFocusin() { + + /** + * The input is considered to be in it's initial state based on + * if this.value === undefined. The first time we interact with the + * input manually, by applying focusin, we need to flag the + * input as no longer in the initial state. + */ + if (this.value === undefined) { + this.value = ''; + } + } + + /** + * Function to support @blur event. + * @private + * @return {void} + */ + handleBlur() { + this.inputElement.scrollLeft = 100; + + if (!this.noValidate) { + this.validation.validate(this); + } + } + + /** + * Returns focused element, even if it's in the shadow DOM. + * @private + * @param {Object} root - Element to check for focus. + * @returns {Object} + */ + getActiveElement(root = document) { + const activeEl = root.activeElement; + + if (!activeEl) { + return null; + } + + if (activeEl.shadowRoot) { + return this.getActiveElement(activeEl.shadowRoot); + } + + return activeEl; + } + + /** + * Public method force validation of input. + * @returns {void} + */ + validate() { + this.validation.validate(this); + } + + + /** + * Sets configuration data used elsewhere based on the `type` attribute. + * @private + * @returns {void} + */ + configureDataForType() { + if (this.type === 'month-day-year' || this.type === 'year-month-day') { + this.dateStrLength = 10; + } else if (this.type === 'month-year') { + this.dateStrLength = 5; + } else if (this.type === 'month-fullYear') { + this.dateStrLength = 7; + } + } + + /** + * Validates against list of supported this.allowedInputTypes; return type=text if invalid request. + * @private + * @param {string} type Value entered into component prop. + * @returns {string} Iterates over allowed types array. + */ + getInputType(type) { + if (this.allowedInputTypes.includes(type)) { + return type; + } + + return "text"; + } + + /** + * Determines default help text string. + * @private + * @param {string} type Value entered into component prop. + * @returns {string} Evaluates pre-determined help text. + */ + getHelpText(type) { + if (type === 'password') { + this.helpText = i18n(this.lang, 'password'); + } else if (type === 'email') { + this.helpText = i18n(this.lang, 'email'); + } else if (type === 'credit-card') { + this.helpText = i18n(this.lang, 'creditcard'); + } else if (type === 'month-day-year') { + this.helpText = i18n(this.lang, 'dateMMDDYYYY'); + } else if (type === 'month-year') { + this.helpText = i18n(this.lang, 'dateMMYY'); + } else if (type === 'month-fullyear') { + this.helpText = i18n(this.lang, 'dateMMYYYY'); + } else if (type === 'year-month-day') { + this.helpText = i18n(this.lang, 'dateYYYYMMDD'); + } else { + this.helpText = ''; + } + + return this.helpText; + } + + /** + * Function to support show-password feature. + * @private + * @returns {void} + */ + handleClickShowPassword() { + this.showPassword = !this.showPassword; + this.focus(); + } + + /** + * Support placeholder text. + * @private + * @returns {string} + */ + getPlaceholder() { + if (this.type === 'month-day-year') { + return !this.placeholder ? 'MM/DD/YYYY' : this.placeholder; + } else if (this.type === 'month-year') { + return !this.placeholder ? 'MM/YY' : this.placeholder; + } else if (this.type === 'month-fullYear') { + return !this.placeholder ? 'MM/YYYY' : this.placeholder; + } else if (this.type === 'year-month-day') { + return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder; + } + + return o$2(this.placeholder); + } + + /** + * Defines placement of input icon based on type, used with classMap. + * @private + * @returns {boolean} + */ + defineInputIcon() { + if (this.icon && this.type === 'credit-card') { + return true; + } else if (this.dateInputTypes.includes(this.type)) { + return true; + } + + return false; + } + + /** + * Defines padding of input label based on type, used with classMap. + * @private + * @returns {boolean} + */ + defineLabelPadding() { + if (this.icon && this.type === 'credit-card' && (this.value === "" || this.value === undefined)) { + return true; + } else if (this.dateInputTypes.includes(this.type)) { + return true; + } + + return false; + } + + // Functions specific to Credit Card component support + // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- + + /** + * Function to support credit-card feature type. + * @private + * @returns {void} + */ + processCreditCard() { + const card = this.matchInputValueToCreditCard(); + + this.maxLength = card.formatLength; + this.minLength = card.formatMinLength; + + this.setCustomValidity = card.setCustomValidity; + + if (this.icon) { + this.inputIconName = card.cardIcon; + } + } /** + * Function to support credit-card feature type. * @private - * @returns {string} + * @returns {object} JSON with data for credit card formatting. */ - definePattern() { - if (this.type === 'credit-card' && !this.noValidate && this.maxLength) { - return `.{${this.maxLength},${this.maxLength}}`; + matchInputValueToCreditCard() { + const CreditCardValidationMessage = `${i18n(this.lang, 'validCard')}`; + + const creditCardTypes = [ + { + name: 'Airlines', + regex: /^(?1|2)\d{0}/u, + formatMinLength: 17, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'credit-card' + }, + { + name: 'Commercial', + regex: /^(?2)\d{0}/u, + formatMinLength: 8, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'credit-card' + }, + { + name: 'Alaska Commercial', + regex: /^(?27)\d{0}/u, + formatMinLength: 8, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-alaska' + }, + { + name: 'American Express', + regex: /^(?34|37)\d{0}/u, + formatLength: 17, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-amex' + }, + { + name: 'Diners club', + regex: /^(?36|38)\d{0}/u, + formatLength: 16, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'credit-card' + }, + { + name: 'Visa', + regex: /^(?4)\d{0}/u, + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-visa' + }, + { + name: 'Alaska Airlines Visa', + regex: /^(?4147\s34|4888\s93|4800\s11|4313\s51|4313\s07)\d{0}/u, + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-alaska' + }, + { + name: 'Master Card', + regex: /^(?5)\d{0}/u, + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-mastercard' + }, + { + name: 'Discover Card', + regex: /^(?6)\d{0}/u, + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-discover' + } + ]; + + let type = { + name: 'Default Card', + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'credit-card' + }; + + creditCardTypes.forEach((cardType) => { + if (cardType.regex.exec(this.value)) { + type = cardType; + } + }); + + this.validationCCLength = type.formatLength; + + return type; + } +} + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroDependencyVersioning { + + /** + * Generates a unique string to be used for child auro element naming. + * @private + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateElementName(baseName, version) { + let result = baseName; + + result += '-'; + result += version.replace(/[.]/g, '_'); + + return result; + } + + /** + * Generates a unique string to be used for child auro element naming. + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateTag(baseName, version, tagClass) { + const elementName = this.generateElementName(baseName, version); + const tag = i$4`${s$2(elementName)}`; + + if (!customElements.get(elementName)) { + customElements.define(elementName, class extends tagClass {}); + } + + return tag; + } +} + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +/** + * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers + * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers + * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually + */ + +class AuroElement extends r { + + // function to define props used within the scope of this component + static get properties() { + return { + hidden: { type: Boolean, + reflect: true }, + hiddenVisually: { type: Boolean, + reflect: true }, + hiddenAudible: { type: Boolean, + reflect: true }, + }; + } + + /** + * @private Function that determines state of aria-hidden + */ + hideAudible(value) { + if (value) { + return 'true' + } + + return 'false' + } +} + +var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"Error alert indicator."}; + +/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */ + +const _fetchMap = new Map(); + +/** + * A callback to parse Response body. + * + * @callback ResponseParser + * @param {Fetch.Response} response + * @returns {Promise} + */ + +/** + * A minimal in-memory map to de-duplicate Fetch API media requests. + * + * @param {String} uri + * @param {Object} [options={}] + * @param {ResponseParser} [options.responseParser=(response) => response.text()] + * @returns {Promise} + */ +const cacheFetch = (uri, options = {}) => { + const responseParser = options.responseParser || ((response) => response.text()); + if (!_fetchMap.has(uri)) { + _fetchMap.set(uri, fetch(uri).then(responseParser)); + } + return _fetchMap.get(uri); +}; + +var styleCss$2 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`; + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" +/** + * @attr {Boolean} onDark - Set value for on-dark version of auro-icon + * @slot - Hidden from visibility, used for a11y if icon description is needed + */ + +// build the component class +class BaseIcon extends AuroElement { + constructor() { + super(); + this.onDark = false; + } + + // function to define props used within the scope of this component + static get properties() { + return { + ...super.properties, + onDark: { + type: Boolean, + reflect: true + }, + + /** + * @private + */ + svg: { + attribute: false, + reflect: true + } + }; + } + + static get styles() { + return i$2` + ${styleCss$2} + `; + } + + /** + * Async function to fetch requested icon from npm CDN. + * @private + * @param {string} category - Icon category. + * @param {string} name - Icon name. + * @returns {SVGElement} DOM - Ready HTML to be appended. + */ + async fetchIcon(category, name) { + let iconHTML = ''; + + if (category === 'logos') { + iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`); + } else { + iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`); + } + + const dom = new DOMParser().parseFromString(iconHTML, 'text/html'); + + return dom.body.querySelector('svg'); + } + + // lifecycle function + async firstUpdated() { + if (!this.customSvg) { + const svg = await this.fetchIcon(this.category, this.name); + + if (svg) { + this.svg = svg; + } else if (!svg) { + const penDOM = new DOMParser().parseFromString(error.svg, 'text/html'); + + this.svg = penDOM.body.firstChild; + } } + } +} + +var tokensCss$2 = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`; + +var colorCss$2 = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`; + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" +/** + * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name. + * + * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. + * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage + * @attr {Boolean} customColor - Removes primary selector. + * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot. + * @attr {Boolean} label - Exposes content in slot as icon label. + * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style. + * @attr {Boolean} accent - Sets the icon to use the accent style. + * @attr {Boolean} emphasis - Sets the icon to use the emphasis style. + * @attr {Boolean} disabled - Sets the icon to use the disabled style. + * @attr {Boolean} error - Sets the icon to use the error style. + * @attr {Boolean} info - Sets the icon to use the info style. + * @attr {Boolean} secondary - Sets the icon to use the secondary style. + * @attr {Boolean} tertiary - Sets the icon to use the tertiary style. + * @attr {Boolean} subtle - Sets the icon to use the subtle style. + * @attr {Boolean} success - Sets the icon to use the success style. + * @attr {Boolean} warning - Sets the icon to use the warning style. + * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`. + * @attr {String} uri - Set the uri for CDN used when fetching icons + * @slot - Hidden from visibility, used for a11y if icon description is needed. + * @slot svg - Used for custom SVG content. + */ + +// build the component class +class AuroIcon extends BaseIcon { + constructor() { + super(); + + this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist'; + + this.privateDefaults(); + } + + /** + * Internal Defaults. + * @private + * @returns {void} + */ + privateDefaults() { + this.accent = false; + this.customColor = false; + this.customSvg = false; + this.disabled = false; + this.emphasis = false; + this.error = false; + this.info = false; + this.label = false; + this.primary = false; + this.secondary = false; + this.subtle = false; + this.success = false; + this.tertiary = false; + this.warning = false; + this.runtimeUtils = new AuroLibraryRuntimeUtils(); + } + + // function to define props used within the scope of this component + static get properties() { + return { + ...super.properties, + accent: { + type: Boolean, + reflect: true + }, + ariaHidden: { + type: String, + reflect: true + }, + category: { + type: String, + reflect: true + }, + customColor: { + type: Boolean + }, + customSvg: { + type: Boolean + }, + disabled: { + type: Boolean, + reflect: true + }, + emphasis: { + type: Boolean, + reflect: true + }, + error: { + type: Boolean, + reflect: true + }, + info: { + type: Boolean, + reflect: true + }, + label: { + type: Boolean, + reflect: true + }, + name: { + type: String, + reflect: true + }, + primary: { + type: Boolean, + reflect: true + }, + secondary: { + type: Boolean, + reflect: true + }, + subtle: { + type: Boolean, + reflect: true + }, + success: { + type: Boolean, + reflect: true + }, + tertiary: { + type: Boolean, + reflect: true + }, + uri: { + type: String + }, + warning: { + type: Boolean, + reflect: true + } + }; + } - return this.pattern; + static get styles() { + return [ + super.styles, + i$2`${tokensCss$2}`, + i$2`${styleCss$2}`, + i$2`${colorCss$2}` + ]; } /** - * Function to set element focus. - * @private - * @return {void} + * This will register this element with the browser. + * @param {string} [name="auro-icon"] - The name of element that you want to register to. + * + * @example + * AuroIcon.register("custom-icon") // this will register this element to + * */ - focus() { - this.inputElement.focus(); + static register(name = "auro-icon") { + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon); } - /** - * Required to convert SVG icons from data to HTML string. - * @private - * @param {string} icon HTML string for requested icon. - * @returns {object} Appended HTML for SVG. - */ - getIconAsHtml(icon) { - const dom = new DOMParser().parseFromString(icon.svg, 'text/html'); + connectedCallback() { + super.connectedCallback(); - return dom.body.firstChild; + // Add the tag name as an attribute if it is different than the component name + this.runtimeUtils.handleComponentTagRename(this, 'auro-icon'); } - /** - * Sends event notifying that the input has changed it's value. - * @private - * @returns {void} - */ - notifyValueChanged() { - let inputEvent = null; + // function that renders the HTML and CSS into the scope of the component + render() { + const a11y = { + 'labelContainer': true, + 'util_displayHiddenVisually': !this.label + }; - inputEvent = new Event('input', { - bubbles: true, - composed: true, - }); + const classes = { + 'label': this.label + }; - // Dispatched event to alert outside shadow DOM context of event firing. - this.dispatchEvent(inputEvent); - } + return x` +
+ + ${this.customSvg ? x` + + ` : x` + ${this.svg} + ` + } + - /** - * Handles event of clearing input content by clicking the X icon. - * @private - * @return {void} - */ - handleClickClear() { - this.inputElement.value = ""; - this.value = undefined; - this.labelElement.classList.remove('inputElement-label--sticky'); - this.focus(); - this.validation.validate(this); - this.notifyValueChanged(); +
+ +
+
+ `; } +} - /** - * @private - * @return {void} - */ - handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. - if (this.type === 'credit-card') { - this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); - } +var iconVersion = '6.0.2'; - // Sets value property to value of element value (el.value). - this.value = this.inputElement.value; +var styleCss$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; - // Validation on blur or input. - if (this.validateOnInput) { - this.validation.validate(this); - } +var colorCss$1 = i$2`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`; - // Prevents cursor jumping in Safari. - const { selectionStart } = this.inputElement; +var tokensCss$1 = i$2`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`; - if (this.setSelectionInputTypes.includes(this.type)) { - this.updateComplete.then(() => { - try { - this.inputElement.setSelectionRange(selectionStart, selectionStart); - } catch (error) { // eslint-disable-line - // do nothing - } - }); - } - } +var styleCss = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`; - /** - * Function to support @focusin event. - * @private - * @return {void} - */ - handleFocusin() { +var colorCss = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`; - /** - * The input is considered to be in it's initial state based on - * if this.value === undefined. The first time we interact with the - * input manually, by applying focusin, we need to flag the - * input as no longer in the initial state. - */ - if (this.value === undefined) { - this.value = ''; - } - } +var tokensCss = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`; - /** - * Function to support @blur event. - * @private - * @return {void} - */ - handleBlur() { - this.inputElement.scrollLeft = 100; +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. - if (!this.noValidate) { - this.validation.validate(this); - } - } - /** - * Returns focused element, even if it's in the shadow DOM. - * @private - * @param {Object} root - Element to check for focus. - * @returns {Object} - */ - getActiveElement(root = document) { - const activeEl = root.activeElement; +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" +/** + * The auro-loader element is an easy to use animated loader component. + * + * @attr {Boolean} pulse - sets loader type + * @attr {Boolean} ringworm - sets loader type + * @attr {Boolean} laser - sets loader type + * @attr {Boolean} orbit - sets loader type + * @attr {Boolean} white - sets color of loader to white + * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark + * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light + * @attr {Boolean} xs - sets size to extra small + * @attr {Boolean} sm - sets size to small + * @attr {Boolean} md - sets size to medium + * @attr {Boolean} lg - sets size to large + * @csspart element - apply style to adjust speed of animation + */ - if (!activeEl) { - return null; - } +// build the component class +class AuroLoader extends r { + constructor() { + super(); - if (activeEl.shadowRoot) { - return this.getActiveElement(activeEl.shadowRoot); - } + /** + * @private + */ + this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; - return activeEl; - } + /** + * @private + */ + this.mdCount = 3; - /** - * Public method force validation of input. - * @returns {void} - */ - validate() { - this.validation.validate(this); - } + /** + * @private + */ + this.smCount = 2; + /** + * @private + */ + this.runtimeUtils = new AuroLibraryRuntimeUtils(); - /** - * Sets configuration data used elsewhere based on the `type` attribute. - * @private - * @returns {void} - */ - configureDataForType() { - if (this.type === 'month-day-year' || this.type === 'year-month-day') { - this.dateStrLength = 10; - } else if (this.type === 'month-year') { - this.dateStrLength = 5; - } else if (this.type === 'month-fullYear') { - this.dateStrLength = 7; - } + this.orbit = false; + this.ringworm = false; + this.laser = false; + this.pulse = false; } - /** - * Validates against list of supported this.allowedInputTypes; return type=text if invalid request. - * @private - * @param {string} type Value entered into component prop. - * @returns {string} Iterates over allowed types array. - */ - getInputType(type) { - if (this.allowedInputTypes.includes(type)) { - return type; - } - - return "text"; + // function to define props used within the scope of this component + static get properties() { + return { + pulse: { + type: Boolean, + reflect: true + }, + orbit: { + type: Boolean, + reflect: true + }, + ringworm: { + type: Boolean, + reflect: true + }, + laser: { + type: Boolean, + reflect: true + } + }; } - /** - * Determines default help text string. - * @private - * @param {string} type Value entered into component prop. - * @returns {string} Evaluates pre-determined help text. - */ - getHelpText(type) { - if (type === 'password') { - this.helpText = i18n(this.lang, 'password'); - } else if (type === 'email') { - this.helpText = i18n(this.lang, 'email'); - } else if (type === 'credit-card') { - this.helpText = i18n(this.lang, 'creditcard'); - } else if (type === 'month-day-year') { - this.helpText = i18n(this.lang, 'dateMMDDYYYY'); - } else if (type === 'month-year') { - this.helpText = i18n(this.lang, 'dateMMYY'); - } else if (type === 'month-fullyear') { - this.helpText = i18n(this.lang, 'dateMMYYYY'); - } else if (type === 'year-month-day') { - this.helpText = i18n(this.lang, 'dateYYYYMMDD'); - } else { - this.helpText = ''; - } - - return this.helpText; + static get styles() { + return [ + i$2`${styleCss}`, + i$2`${colorCss}`, + i$2`${tokensCss}` + ]; } /** - * Function to support show-password feature. - * @private - * @returns {void} + * This will register this element with the browser. + * @param {string} [name="auro-loader"] - The name of element that you want to register to. + * + * @example + * AuroLoader.register("custom-loader") // this will register this element to + * */ - handleClickShowPassword() { - this.showPassword = !this.showPassword; - this.focus(); + static register(name = "auro-loader") { + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader); } - /** - * Support placeholder text. - * @private - * @returns {string} - */ - getPlaceholder() { - if (this.type === 'month-day-year') { - return !this.placeholder ? 'MM/DD/YYYY' : this.placeholder; - } else if (this.type === 'month-year') { - return !this.placeholder ? 'MM/YY' : this.placeholder; - } else if (this.type === 'month-fullYear') { - return !this.placeholder ? 'MM/YYYY' : this.placeholder; - } else if (this.type === 'year-month-day') { - return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder; - } + firstUpdated() { + // Add the tag name as an attribute if it is different than the component name + this.runtimeUtils.handleComponentTagRename(this, 'auro-loader'); + } - return ifDefined(this.placeholder); + connectedCallback() { + super.connectedCallback(); } /** - * Defines placement of input icon based on type, used with classMap. * @private - * @returns {boolean} + * @returns {Array} Numbered array for template map. */ - defineInputIcon() { - if (this.icon && this.type === 'credit-card') { - return true; - } else if (this.dateInputTypes.includes(this.type)) { - return true; + defineTemplate() { + let nodes = Array.from(Array(this.mdCount).keys()); + + if (this.orbit || this.laser) { + nodes = Array.from(Array(this.smCount).keys()); + } else if (this.ringworm) { + nodes = Array.from(Array(0).keys()); } - return false; + return nodes; } - /** - * Defines padding of input label based on type, used with classMap. - * @private - * @returns {boolean} - */ - defineLabelPadding() { - if (this.icon && this.type === 'credit-card' && (this.value === "" || this.value === undefined)) { - return true; - } else if (this.dateInputTypes.includes(this.type)) { - return true; - } + // When using auroElement, use the following attribute and function when hiding content from screen readers. + // aria-hidden="${this.hideAudible(this.hiddenAudible)}" - return false; + // function that renders the HTML and CSS into the scope of the component + render() { + return x` + ${this.defineTemplate().map((idx) => x` + + `)} + +
Loading...
+ + ${this.ringworm ? x` + + + ` + : `` + } + `; } +} - // Functions specific to Credit Card component support - // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +var loaderVersion = '3.1.1'; - /** - * Function to support credit-card feature type. - * @private - * @returns {void} - */ - processCreditCard() { - const card = this.matchInputValueToCreditCard(); +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. - this.maxLength = card.formatLength; - this.minLength = card.formatMinLength; - this.setCustomValidity = card.setCustomValidity; +/** + * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user + * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions + * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content + * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled + * @attr {Boolean} onDark - Set value for on-dark version of auro-button + * @attr {Boolean} rounded - If set to true, the button will have a rounded shape + * @attr {Boolean} slim - Set value for slim version of auro-button + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container + * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. + * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. + * @attr {String} id - Set the unique ID of an element. + * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. + * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button` + * @attr {String} value - Defines the value associated with the button which is submitted with the form data. + * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary` + * @attr {Boolean} secondary - DEPRECATED + * @attr {Boolean} tertiary - DEPRECATED + * @prop {Boolean} ready - When false the component API should not be called. + * @event auroButton-ready - Notifies that the component has finished initializing. + * @slot - Default slot for the text of the button. + * @slot icon - Slot to provide auro-icon for the button. + * @csspart button - Apply CSS to HTML5 button. + * @csspart loader - Apply CSS to auro-loader. + * @csspart text - Apply CSS to text slot. + * @csspart icon - Apply CSS to icon slot. + */ - if (this.icon) { - this.inputIconName = card.cardIcon; - } +/* eslint-disable lit/no-invalid-html, lit/binding-positions */ + +class AuroButton extends r { + + constructor() { + super(); + this.autofocus = false; + this.disabled = false; + this.iconOnly = false; + this.loading = false; + this.onDark = false; + this.ready = false; + this.secondary = false; + this.tertiary = false; + this.rounded = false; + this.slim = false; + this.fluid = false; + + /** + * Generate unique names for dependency components. + */ + const versioning = new AuroDependencyVersioning(); + + /** + * @private + */ + this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader); } - /** - * Function to support credit-card feature type. - * @private - * @returns {object} JSON with data for credit card formatting. - */ - matchInputValueToCreditCard() { - const CreditCardValidationMessage = `${i18n(this.lang, 'validCard')}`; + static get styles() { + return [ + tokensCss$1, + styleCss$1, + colorCss$1 + ]; + } - const creditCardTypes = [ - { - name: 'Airlines', - regex: /^(?1|2)\d{0}/u, - formatMinLength: 17, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'credit-card' + static get properties() { + return { + autofocus: { + type: Boolean, + reflect: true }, - { - name: 'Commercial', - regex: /^(?2)\d{0}/u, - formatMinLength: 8, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'credit-card' + disabled: { + type: Boolean, + reflect: true }, - { - name: 'Alaska Commercial', - regex: /^(?27)\d{0}/u, - formatMinLength: 8, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-alaska' + secondary: { + type: Boolean, + reflect: true }, - { - name: 'American Express', - regex: /^(?34|37)\d{0}/u, - formatLength: 17, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-amex' + tertiary: { + type: Boolean, + reflect: true }, - { - name: 'Diners club', - regex: /^(?36|38)\d{0}/u, - formatLength: 16, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'credit-card' + fluid: { + type: Boolean, + reflect: true }, - { - name: 'Visa', - regex: /^(?4)\d{0}/u, - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-visa' + iconOnly: { + type: Boolean, + reflect: true }, - { - name: 'Alaska Airlines Visa', - regex: /^(?4147\s34|4888\s93|4800\s11|4313\s51|4313\s07)\d{0}/u, - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-alaska' + loading: { + type: Boolean, + reflect: true }, - { - name: 'Master Card', - regex: /^(?5)\d{0}/u, - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-mastercard' + onDark: { + type: Boolean, + reflect: true }, - { - name: 'Discover Card', - regex: /^(?6)\d{0}/u, - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-discover' - } - ]; - - let type = { - name: 'Default Card', - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'credit-card' + rounded: { + type: Boolean, + reflect: true + }, + slim: { + type: Boolean, + reflect: true + }, + arialabel: { + type: String, + reflect: true + }, + arialabelledby: { + type: String, + reflect: true + }, + title: { + type: String, + reflect: true + }, + type: { + type: String, + reflect: true + }, + value: { + type: String, + reflect: true + }, + variant: { + type: String, + reflect: true + }, + ready: { type: Boolean }, }; + } - creditCardTypes.forEach((cardType) => { - if (cardType.regex.exec(this.value)) { - type = cardType; - } - }); + /** + * This will register this element with the browser. + * @param {string} [name="auro-button"] - The name of element that you want to register to. + * + * @example + * AuroButton.register("custom-button") // this will register this element to + * + */ + static register(name = "auro-button") { + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton); + } - this.validationCCLength = type.formatLength; + /** + * Internal method to apply focus to the HTML5 button. + * @private + * @returns {void} + */ + focus() { + this.renderRoot.querySelector('button').focus(); + } - return type; + /** + * Marks the component as ready and sends event. + * @private + * @returns {void} + */ + notifyReady() { + this.ready = true; + + this.dispatchEvent(new CustomEvent('auroButton-ready', { + bubbles: true, + cancelable: false, + composed: true, + })); } -} -var iconVersion = '6.0.2'; + updated() { + // support the old `secondary` and `tertiary` attributes` that are deprecated + if (this.secondary) { + this.setAttribute('variant', 'secondary'); + } + + if (this.tertiary) { + this.setAttribute('variant', 'tertiary'); + } + } + + firstUpdated() { + this.notifyReady(); + } + + render() { + const classes = { + 'util_insetLg--squish': true, + 'auro-button': true, + 'auro-button--rounded': this.rounded, + 'auro-button--slim': this.slim, + 'auro-button--iconOnly': this.iconOnly, + 'auro-button--iconOnlySlim': this.iconOnly && this.slim, + 'loading': this.loading + }; + + return u$3` + + `; + } +} -var buttonVersion = '8.1.2'; +var buttonVersion = '8.1.3'; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -1143,7 +3837,7 @@ class AuroInput extends BaseInput { 'withValue': this.value && this.value.length > 0 }; - return html` + return u$3`
@@ -1152,7 +3846,7 @@ class AuroInput extends BaseInput { ${this.inputIconName - ? repeat([this.inputIconName], (val) => val, (name) => html` + ? c$2([this.inputIconName], (val) => val, (name) => u$3` <${this.iconTag} class="accentIcon" category="payment" @@ -1164,7 +3858,7 @@ class AuroInput extends BaseInput { } ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear' - ? html` + ? u$3` <${this.iconTag} class="accentIcon" category="interface" @@ -1175,7 +3869,7 @@ class AuroInput extends BaseInput { : undefined }
-
@@ -1210,18 +3904,17 @@ class AuroInput extends BaseInput { class="notificationIcons" part="notificationIcons" ?hasValue="${this.hasValue}"> - ${this.validity && this.validity !== 'valid' ? html` + ${this.validity && this.validity !== 'valid' ? u$3`
<${this.iconTag} category="alert" name="error-stroke" - customSize error>
` : undefined} - ${this.hasValue ? html` - ${this.type === 'password' ? html` + ${this.hasValue ? u$3` + ${this.type === 'password' ? u$3`
<${this.buttonTag} variant="flat" @@ -1232,21 +3925,19 @@ class AuroInput extends BaseInput { <${this.iconTag} category="interface" name="hide-password-stroke" - customSize customColor ?hidden=${!this.showPassword}> <${this.iconTag} category="interface" name="view-password-stroke" - customSize customColor ?hidden=${this.showPassword}>
` : undefined} - ${!this.disabled && !this.readonly ? html` + ${!this.disabled && !this.readonly ? u$3`
<${this.buttonTag} variant="flat" @@ -1258,7 +3949,7 @@ class AuroInput extends BaseInput { customColor category="interface" name="x-lg" - customSize> + >
@@ -1268,11 +3959,11 @@ class AuroInput extends BaseInput {
${!this.validity || this.validity === undefined || this.validity === 'valid' - ? html` + ? u$3`

${this.getHelpText(this.type)}

` - : html` + : u$3` ` diff --git a/demo/index.md b/demo/index.md index b6fcd31..7788276 100644 --- a/demo/index.md +++ b/demo/index.md @@ -14,15 +14,15 @@ margin-bottom: unset; } } - - + + # Input Use the `` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support. - - + + ## auro-input use cases @@ -31,8 +31,8 @@ The `` element should be used in situations where users may: * needs to enter information * be filling out a form - - + + ## Default component The default component supports the basic input `type="text"` structure. The `(optional)` label is provided to instruct the user that their input is not required. Use the `bordered` attribute for a bordered ``. @@ -43,19 +43,19 @@ The default component supports the basic input `type="text"` structure. The `(op - + - See code + See code - - + + ```html - -``` - - - + +``` + + + ## Placeholder Use the `placeholder` attribute to add a custom placeholder message within the element. @@ -65,30 +65,30 @@ Use the `placeholder` attribute to add a custom placeholder message within the e Full name - + Full name Please enter your full name. - + - See code + See code - - + + ```html Full name - + Full name Please enter your full name. - -``` - - - + +``` + + + ## Disabled Use the `disabled` attribute to prevent the user from interacting with the input. @@ -103,23 +103,23 @@ Use the `disabled` attribute to prevent the user from interacting with the input Arrival date - + - See code + See code - - + + ```html Departure date Arrival date - -``` - - - + +``` + + + ## Active Label Example use cases for auro-input support the `activeLabel` attribute. If set, the label will stay fixed in the active position. @@ -130,31 +130,31 @@ Example use cases for auro-input support the `activeLabel` attribute. If set, th Address Please enter your home address. - + Address Please enter your home address. - + - See code + See code - - + + ```html Address Please enter your home address. - + Address Please enter your home address. - -``` - - - + +``` + + + ## Value Use the `value` attribute to preset the value of the element. @@ -167,21 +167,21 @@ Use the `value` attribute to preset the value of the element. Please enter your full name. - + - See code + See code - - + + ```html Name Please enter your full name. - -``` - - - + +``` + + + ## Pattern Use the `pattern` attribute to set custom input validation. This example also uses the `spellcheck` attribute set to `false` which in turn sets `autocorrect` to `off` and `autocapitalize` to `none`. Additionally the `maxlength` attribute sets the maximum length of characters that can be entered. @@ -194,31 +194,31 @@ The `` component supports setting a custom validity message specific Username Please enter a username. - + Username Please enter a username. - + - See code + See code - - + + ```html Username Please enter a username. - + Username Please enter a username. - -``` - - - + +``` + + + ## Recommended Use and Version Control There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-input` custom element is defined automatically. @@ -239,15 +239,15 @@ This will create a new custom element that you can use in your HTML that will fu - + - See code + See code - - + + ```html - -``` - + +``` + diff --git a/demo/index.min.js b/demo/index.min.js index aac97e7..2ec5909 100644 --- a/demo/index.min.js +++ b/demo/index.min.js @@ -1,15 +1,3 @@ -import { html } from 'lit/static-html.js'; -import { repeat } from 'lit/directives/repeat.js'; -import { classMap } from 'lit/directives/class-map.js'; -import { ifDefined } from 'lit/directives/if-defined.js'; -import { css, LitElement } from 'lit'; -import Cleave from 'cleave.js'; -import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/validation.js'; -import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs'; -import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs'; -import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js'; -import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js'; - /** * Function used for the lang switch demo * @private @@ -27,6 +15,52 @@ const changeLang = () => { }); }; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$3=globalThis,i$5=t$3.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h$1,n$3=`<${o$4}>`,r$4=document,l$2=()=>r$4.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$4=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_=/>/g,m$1=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$4.createTreeWalker(r$4,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$3?s$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$1;for(let i=0;i"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$1:'"'===u[3]?g:p$2):c===g||c===p$2?c=m$1:c===v$1||c===_?c=f$1:(c=m$1,r=void 0);const x=c===m$1&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$4+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length0){r.textContent=i$5?i$5.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1(this,t,i,0),o=!c$3(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h}; + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const a$1=Symbol.for(""),o$3=t=>{if(t?.r===a$1)return t?._$litStatic$},s$2=t=>({_$litStatic$:t,r:a$1}),i$4=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a$1}),l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$(...e)=>({_$litDirective$:t,values:e});let i$3 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}; + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const {I:t$1}=Z,s$1=()=>document.createComment(""),r$3=(o,i,n)=>{const e=o._$AA.parentNode,l=void 0===i?o._$AB:i._$AA;if(void 0===n){const i=e.insertBefore(s$1(),l),c=e.insertBefore(s$1(),l);n=new t$1(i,c,o,o.options);}else {const t=n._$AB.nextSibling,i=n._$AM,c=i!==o;if(c){let t;n._$AQ?.(o),n._$AM=o,void 0!==n._$AP&&(t=o._$AU)!==i._$AU&&n._$AP(t);}if(t!==l||c){let o=n._$AA;for(;o!==t;){const t=o.nextSibling;e.insertBefore(o,l),o=t;}}}return n},v=(o,t,i=o)=>(o._$AI(t,i),o),u$2={},m=(o,t=u$2)=>o._$AH=t,p$1=o=>o._$AH,M=o=>{o._$AP?.(!1,!0);let t=o._$AA;const i=o._$AB.nextSibling;for(;t!==i;){const o=t.nextSibling;t.remove(),t=o;}}; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const u$1=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c$2=e$3(class extends i$3{constructor(e){if(super(e),e.type!==t$2.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=p$1(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v$1=[];let m$1,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v$1[k]=v(d[x],p[k]),x++,k++;else if(h[j]===a[w])v$1[w]=v(d[j],p[w]),j--,w--;else if(h[x]===a[w])v$1[w]=v(d[x],p[w]),r$3(s,v$1[w+1],d[x]),x++,w--;else if(h[j]===a[k])v$1[k]=v(d[j],p[k]),r$3(s,d[x],d[j]),j--,k++;else if(void 0===m$1&&(m$1=u$1(a,k,w),y=u$1(h,x,j)),m$1.has(h[x]))if(m$1.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=r$3(s,d[x]);v(e,p[k]),v$1[k]=e;}else v$1[k]=v(t,p[k]),r$3(s,d[x],t),d[e]=null;k++;}else M(d[j]),j--;else M(d[x]),x++;for(;k<=w;){const e=r$3(s,v$1[w+1]);v(e,p[k]),v$1[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&M(e);}return this.ut=a,m(s,v$1),T}}); + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const e$2=e$3(class extends i$3{constructor(t){if(super(t),t.type!==t$2.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}}); + +/** + * @license + * Copyright 2018 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const o$2=o=>o??E; + const watchedItems = new Set(); @@ -124,904 +158,3564 @@ function stopNotifyingOnLangChange(element) { watchedItems.delete(element); } -var styleCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.clearBtn{height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{height:calc(var(--ds-size-300, 1.5rem));width:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;padding:0;border:0;background:unset;cursor:pointer;height:var(--ds-size-200, 1rem);width:var(--ds-size-200, 1rem)}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-200, 1rem);width:var(--ds-size-200, 1rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{visibility:hidden;height:0;width:0;overflow:hidden;margin:0;padding:0}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{border-style:solid;overflow:hidden;position:relative}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{display:block;content:"";position:absolute;inset:0;pointer-events:none;border-bottom-style:solid;border-bottom-width:1px}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host label.withValue{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{flex:1;position:relative;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);outline:none}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{pointer-events:none;background:none}`; +/** + * @license + * Copyright 2019 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t=globalThis,e$1=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s=Symbol(),o$1=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$1&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$1.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$1.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$1("string"==typeof t?t:t+"",void 0,s),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s)},S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t; -var colorCss = css`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:r$1,getOwnPropertyNames:h,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4"); -var tokensCss = css`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1"); + +var styleCss$3 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{height:calc(var(--ds-size-300, 1.5rem));width:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;padding:0;border:0;background:unset;cursor:pointer;height:var(--ds-size-200, 1rem);width:var(--ds-size-200, 1rem)}.notificationBtn [auro-icon]{--ds-auro-icon-size: var(--ds-size-200, 1rem);height:var(--ds-size-200, 1rem);display:block}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{visibility:hidden;height:0;width:0;overflow:hidden;margin:0;padding:0}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{border-style:solid;overflow:hidden;position:relative}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{display:block;content:"";position:absolute;inset:0;pointer-events:none;border-bottom-style:solid;border-bottom-width:1px}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host label.withValue{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);transform:unset;font-size:var(--ds-text-body-size-xs, 0.75rem)}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{flex:1;position:relative;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);outline:none}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{pointer-events:none;background:none}`; + +var colorCss$3 = i$2`.wrapper{border-color:transparent}.inputElement-helpText{color:var(--ds-auro-input-help-text-color)}input{background-color:transparent;caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}input::placeholder{color:transparent}input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}input:disabled{--ds-auro-input-input-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}label{color:var(--ds-auro-input-label-text-color)}:host(:not([bordered],[borderless])) .wrapper{border-bottom-color:var(--ds-auro-input-border-color)}:host([bordered]) .wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-color)}:host([bordered]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host(:not([borderless])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host(:not([borderless])) .wrapper:focus-within:before{border-bottom-color:transparent}:host([validity]:not([validity=valid])){--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);--ds-auro-input-help-text-color: var(--ds-color-text-error-default, #cc1816)}:host([validity]:not([validity=valid])[bordered]) .wrapper{--ds-auro-input-border-color: var(--ds-color-border-error-default, #cc1816);box-shadow:inset 0 0 0 1px var(--ds-auro-input-border-color)}:host([disabled]){--ds-auro-input-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-input-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`; + +var tokensCss$3 = i$2`:host{--ds-auro-input-border-color: var(--ds-color-border-secondary-default, #939fad);--ds-auro-input-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-input-caret-color: var(--ds-color-text-ui-focus-default, #2c67b5);--ds-auro-input-help-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-label-text-color: var(--ds-color-text-tertiary-default, #6a717c);--ds-auro-input-placeholder-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`; + +var commonjsGlobal = typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {}; + +var NumeralFormatter = function (numeralDecimalMark, + numeralIntegerScale, + numeralDecimalScale, + numeralThousandsGroupStyle, + numeralPositiveOnly, + stripLeadingZeroes, + prefix, + signBeforePrefix, + tailPrefix, + delimiter) { + var owner = this; + + owner.numeralDecimalMark = numeralDecimalMark || '.'; + owner.numeralIntegerScale = numeralIntegerScale > 0 ? numeralIntegerScale : 0; + owner.numeralDecimalScale = numeralDecimalScale >= 0 ? numeralDecimalScale : 2; + owner.numeralThousandsGroupStyle = numeralThousandsGroupStyle || NumeralFormatter.groupStyle.thousand; + owner.numeralPositiveOnly = !!numeralPositiveOnly; + owner.stripLeadingZeroes = stripLeadingZeroes !== false; + owner.prefix = (prefix || prefix === '') ? prefix : ''; + owner.signBeforePrefix = !!signBeforePrefix; + owner.tailPrefix = !!tailPrefix; + owner.delimiter = (delimiter || delimiter === '') ? delimiter : ','; + owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : ''; +}; -// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license -// See LICENSE in the project root for license information. +NumeralFormatter.groupStyle = { + thousand: 'thousand', + lakh: 'lakh', + wan: 'wan', + none: 'none' +}; +NumeralFormatter.prototype = { + getRawValue: function (value) { + return value.replace(this.delimiterRE, '').replace(this.numeralDecimalMark, '.'); + }, -/** - * Auro-input provides users a way to enter data into a text field. - * - * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position. - * @attr {String} autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] - * @attr {String} autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. - * @attr {String} autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box. - * @attr {Boolean} bordered - Applies bordered UI variant. - * @attr {Boolean} borderless - Applies borderless UI variant. - * @attr {Boolean} disabled - If set, disables the input. - * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. - * @prop {String} errorMessage - Contains the help text message for the current validity error. - * @attr {String} helpText - Deprecated, see `slot`. - * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. - * @attr {String} id - Sets the unique ID of the element. - * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. - * @attr {String} label - Deprecated, see `slot`. - * @attr {String} lang - defines the language of an element. - * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. - * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. - * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. - * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. - * @attr {String} name - Populates the `name` attribute on the input. - * @attr {Boolean} noValidate - If set, disables auto-validation on blur. - * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. - * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. - * @attr {String} pattern - Specifies a regular expression the form control's value should match. - * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. - * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates. - * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`. - * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`. - * @attr {String} setCustomValidityBadInput - Custom help text message to display when validity = `badInput`. - * @attr {String} setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`. - * @attr {String} setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`. - * @attr {String} setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails. - * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`. - * @attr {String} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`. - * @attr {String} spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. - * @attr {String} type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. - * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input. - * @attr {String} validity - Specifies the `validityState` this element is in. - * @attr {String} value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. - * - * @slot helptext - Sets the help text displayed below the input. - * @slot label - Sets the label text for the input. - * - * @csspart wrapper - Use for customizing the style of the root element - * @csspart label - Use for customizing the style of the label element - * @csspart helpText - Use for customizing the style of the helpText element - * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) - * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) - * @event input - Event fires when the value of an `auro-input` has been changed. - * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed. - */ + format: function (value) { + var owner = this, parts, partSign, partSignAndPrefix, partInteger, partDecimal = ''; -class BaseInput extends LitElement { + // strip alphabet letters + value = value.replace(/[A-Za-z]/g, '') + // replace the first decimal mark with reserved placeholder + .replace(owner.numeralDecimalMark, 'M') - constructor() { - super(); + // strip non numeric letters except minus and "M" + // this is to ensure prefix has been stripped + .replace(/[^\dM-]/g, '') - this.isValid = false; + // replace the leading minus with reserved placeholder + .replace(/^\-/, 'N') - this.icon = false; - this.disabled = false; - this.required = false; - this.noValidate = false; - this.max = undefined; - this.min = undefined; - this.maxLength = undefined; - this.minLength = undefined; - this.label = 'Input label is undefined'; - this.ready = false; - this.activeLabel = false; + // strip the other minus sign (if present) + .replace(/\-/g, '') - this.setCustomValidityForType = undefined; - } + // replace the minus sign (if present) + .replace('N', owner.numeralPositiveOnly ? '' : '-') - /** - * Internal Defaults. - * @private - * @returns {void} - */ - privateDefaults() { - this.validation = new AuroFormValidation(); - this.inputIconName = undefined; - this.showPassword = false; - this.validationCCLength = undefined; - this.hasValue = false; + // replace decimal mark + .replace('M', owner.numeralDecimalMark); - this.allowedInputTypes = [ - "text", - "email", - "password", - "credit-card", - "month-day-year", - "year-month-day", - "month-year" - ]; + // strip any leading zeros + if (owner.stripLeadingZeroes) { + value = value.replace(/^(-)?0+(?=\d)/, '$1'); + } - this.dateInputTypes = [ - "month-day-year", - "year-month-day", - "month-year", - "month-fullYear" - ]; + partSign = value.slice(0, 1) === '-' ? '-' : ''; + if (typeof owner.prefix != 'undefined') { + if (owner.signBeforePrefix) { + partSignAndPrefix = partSign + owner.prefix; + } else { + partSignAndPrefix = owner.prefix + partSign; + } + } else { + partSignAndPrefix = partSign; + } + + partInteger = value; - this.autoFormattingTypes = [ - 'credit-card', - 'month-day-year', - 'month-year', - 'month-fullyear', - 'year-month-day' - ]; + if (value.indexOf(owner.numeralDecimalMark) >= 0) { + parts = value.split(owner.numeralDecimalMark); + partInteger = parts[0]; + partDecimal = owner.numeralDecimalMark + parts[1].slice(0, owner.numeralDecimalScale); + } - /** - * Credit Card is not included as this caused cursor placement issues. - * The Safari issue. - */ - this.setSelectionInputTypes = [ - "text", - "password", - "email", - ]; + if(partSign === '-') { + partInteger = partInteger.slice(1); + } - const idLength = 36; - const idSubstrEnd = 8; - const idSubstrStart = 2; + if (owner.numeralIntegerScale > 0) { + partInteger = partInteger.slice(0, owner.numeralIntegerScale); + } - this.uniqueId = Math.random() - .toString(idLength) - .substring(idSubstrStart, idSubstrEnd); - } + switch (owner.numeralThousandsGroupStyle) { + case NumeralFormatter.groupStyle.lakh: + partInteger = partInteger.replace(/(\d)(?=(\d\d)+\d$)/g, '$1' + owner.delimiter); - // function to define props used within the scope of this component - static get properties() { - return { - id: { type: String }, - label: { type: String }, - name: { type: String }, - type: { type: String, - reflect: true }, - value: { type: String }, - lang: { type: String }, - pattern: { - type: String, - reflect: true - }, - icon: { type: Boolean }, - disabled: { type: Boolean }, - required: { type: Boolean }, - noValidate: { type: Boolean }, - helpText: { type: String }, - spellcheck: { type: String }, - autocorrect: { type: String }, - autocapitalize: { type: String }, - autocomplete: { - type: String, - reflect: true - }, - placeholder: { type: String }, - activeLabel: { - type: Boolean, - reflect: true - }, - max: { type: String }, - min: { type: String }, - maxLength: { type: Number }, - minLength: { type: Number }, + break; - /** - * @ignore - */ - showPassword: { state: true }, - validateOnInput: { type: Boolean }, - readonly: { type: Boolean }, - ready: { type: Boolean }, - error: { - type: String, - reflect: true - }, - errorMessage: { type: String }, - isValid: { - type: String, - reflect: true - }, - validity: { - type: String, - reflect: true - }, - setCustomValidity: { type: String }, - setCustomValidityCustomError: { type: String }, - setCustomValidityValueMissing: { type: String }, - setCustomValidityBadInput: { type: String }, - setCustomValidityTooShort: { type: String }, - setCustomValidityTooLong: { type: String }, - setCustomValidityRangeOverflow: { type: String}, - setCustomValidityRangeUnderflow: { type: String}, - customValidityTypeEmail: { type: String } - }; - } + case NumeralFormatter.groupStyle.wan: + partInteger = partInteger.replace(/(\d)(?=(\d{4})+$)/g, '$1' + owner.delimiter); - static get styles() { - return [ - css`${styleCss}`, - css`${colorCss}`, - css`${tokensCss}` - ]; - } + break; - connectedCallback() { - super.connectedCallback(); + case NumeralFormatter.groupStyle.thousand: + partInteger = partInteger.replace(/(\d)(?=(\d{3})+$)/g, '$1' + owner.delimiter); - this.privateDefaults(); + break; + } - notifyOnLangChange(this); + if (owner.tailPrefix) { + return partSign + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : '') + owner.prefix; + } - // Process auto-formatting if defined for CleaveJS - if (this.type) { - let config = null; + return partSignAndPrefix + partInteger.toString() + (owner.numeralDecimalScale > 0 ? partDecimal.toString() : ''); + } +}; - // Set config for credit card - switch (this.type) { - case 'number': - config = { - numeral: true, - delimiter: '' - }; +var NumeralFormatter_1 = NumeralFormatter; - this.inputMode = 'numeric'; +var DateFormatter = function (datePattern, dateMin, dateMax) { + var owner = this; - break; + owner.date = []; + owner.blocks = []; + owner.datePattern = datePattern; + owner.dateMin = dateMin + .split('-') + .reverse() + .map(function(x) { + return parseInt(x, 10); + }); + if (owner.dateMin.length === 2) owner.dateMin.unshift(0); - case 'credit-card': - config = { - creditCard: true - }; + owner.dateMax = dateMax + .split('-') + .reverse() + .map(function(x) { + return parseInt(x, 10); + }); + if (owner.dateMax.length === 2) owner.dateMax.unshift(0); + + owner.initBlocks(); +}; - this.inputMode = 'numeric'; +DateFormatter.prototype = { + initBlocks: function () { + var owner = this; + owner.datePattern.forEach(function (value) { + if (value === 'Y') { + owner.blocks.push(4); + } else { + owner.blocks.push(2); + } + }); + }, + + getISOFormatDate: function () { + var owner = this, + date = owner.date; + + return date[2] ? ( + date[2] + '-' + owner.addLeadingZero(date[1]) + '-' + owner.addLeadingZero(date[0]) + ) : ''; + }, + + getBlocks: function () { + return this.blocks; + }, + + getValidatedDate: function (value) { + var owner = this, result = ''; + + value = value.replace(/[^\d]/g, ''); + + owner.blocks.forEach(function (length, index) { + if (value.length > 0) { + var sub = value.slice(0, length), + sub0 = sub.slice(0, 1), + rest = value.slice(length); + + switch (owner.datePattern[index]) { + case 'd': + if (sub === '00') { + sub = '01'; + } else if (parseInt(sub0, 10) > 3) { + sub = '0' + sub0; + } else if (parseInt(sub, 10) > 31) { + sub = '31'; + } + + break; + + case 'm': + if (sub === '00') { + sub = '01'; + } else if (parseInt(sub0, 10) > 1) { + sub = '0' + sub0; + } else if (parseInt(sub, 10) > 12) { + sub = '12'; + } + + break; + } + + result += sub; + + // update remaining string + value = rest; + } + }); - break; + return this.getFixedDateString(result); + }, - case 'month-day-year': - config = { - date: true, - delimiter: '/', - datePattern: [ - 'm', - 'd', - 'Y' - ] - }; + getFixedDateString: function (value) { + var owner = this, datePattern = owner.datePattern, date = [], + dayIndex = 0, monthIndex = 0, yearIndex = 0, + dayStartIndex = 0, monthStartIndex = 0, yearStartIndex = 0, + day, month, year, fullYearDone = false; - this.inputMode = 'numeric'; + // mm-dd || dd-mm + if (value.length === 4 && datePattern[0].toLowerCase() !== 'y' && datePattern[1].toLowerCase() !== 'y') { + dayStartIndex = datePattern[0] === 'd' ? 0 : 2; + monthStartIndex = 2 - dayStartIndex; + day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10); + month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10); - break; + date = this.getFixedDate(day, month, 0); + } - case 'year-month-day': - config = { - date: true, - delimiter: '/', - datePattern: [ - 'Y', - 'm', - 'd' - ] - }; + // yyyy-mm-dd || yyyy-dd-mm || mm-dd-yyyy || dd-mm-yyyy || dd-yyyy-mm || mm-yyyy-dd + if (value.length === 8) { + datePattern.forEach(function (type, index) { + switch (type) { + case 'd': + dayIndex = index; + break; + case 'm': + monthIndex = index; + break; + default: + yearIndex = index; + break; + } + }); + + yearStartIndex = yearIndex * 2; + dayStartIndex = (dayIndex <= yearIndex) ? dayIndex * 2 : (dayIndex * 2 + 2); + monthStartIndex = (monthIndex <= yearIndex) ? monthIndex * 2 : (monthIndex * 2 + 2); + + day = parseInt(value.slice(dayStartIndex, dayStartIndex + 2), 10); + month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10); + year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10); + + fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4; + + date = this.getFixedDate(day, month, year); + } - this.inputMode = 'numeric'; + // mm-yy || yy-mm + if (value.length === 4 && (datePattern[0] === 'y' || datePattern[1] === 'y')) { + monthStartIndex = datePattern[0] === 'm' ? 0 : 2; + yearStartIndex = 2 - monthStartIndex; + month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10); + year = parseInt(value.slice(yearStartIndex, yearStartIndex + 2), 10); - break; + fullYearDone = value.slice(yearStartIndex, yearStartIndex + 2).length === 2; - case 'month-year': - config = { - date: true, - datePattern: [ - 'm', - 'y' - ] - }; + date = [0, month, year]; + } - this.inputMode = 'numeric'; + // mm-yyyy || yyyy-mm + if (value.length === 6 && (datePattern[0] === 'Y' || datePattern[1] === 'Y')) { + monthStartIndex = datePattern[0] === 'm' ? 0 : 4; + yearStartIndex = 2 - 0.5 * monthStartIndex; + month = parseInt(value.slice(monthStartIndex, monthStartIndex + 2), 10); + year = parseInt(value.slice(yearStartIndex, yearStartIndex + 4), 10); - break; + fullYearDone = value.slice(yearStartIndex, yearStartIndex + 4).length === 4; - case 'month-fullYear': - config = { - date: true, - datePattern: [ - 'm', - 'Y' - ] - }; + date = [0, month, year]; + } - this.inputMode = 'numeric'; + date = owner.getRangeFixedDate(date); + owner.date = date; + + var result = date.length === 0 ? value : datePattern.reduce(function (previous, current) { + switch (current) { + case 'd': + return previous + (date[0] === 0 ? '' : owner.addLeadingZero(date[0])); + case 'm': + return previous + (date[1] === 0 ? '' : owner.addLeadingZero(date[1])); + case 'y': + return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], false) : ''); + case 'Y': + return previous + (fullYearDone ? owner.addLeadingZeroForYear(date[2], true) : ''); + } + }, ''); + + return result; + }, + + getRangeFixedDate: function (date) { + var owner = this, + datePattern = owner.datePattern, + dateMin = owner.dateMin || [], + dateMax = owner.dateMax || []; + + if (!date.length || (dateMin.length < 3 && dateMax.length < 3)) return date; + + if ( + datePattern.find(function(x) { + return x.toLowerCase() === 'y'; + }) && + date[2] === 0 + ) return date; + + if (dateMax.length && (dateMax[2] < date[2] || ( + dateMax[2] === date[2] && (dateMax[1] < date[1] || ( + dateMax[1] === date[1] && dateMax[0] < date[0] + )) + ))) return dateMax; + + if (dateMin.length && (dateMin[2] > date[2] || ( + dateMin[2] === date[2] && (dateMin[1] > date[1] || ( + dateMin[1] === date[1] && dateMin[0] > date[0] + )) + ))) return dateMin; + + return date; + }, + + getFixedDate: function (day, month, year) { + day = Math.min(day, 31); + month = Math.min(month, 12); + year = parseInt((year || 0), 10); + + if ((month < 7 && month % 2 === 0) || (month > 8 && month % 2 === 1)) { + day = Math.min(day, month === 2 ? (this.isLeapYear(year) ? 29 : 28) : 30); + } - break; - // Do nothing - } + return [day, month, year]; + }, - // initialize CleaveJS if we have a defined config for the requested format - if (config) { - // eslint-disable-next-line no-unused-vars - new Cleave(this, config); - } - } - } + isLeapYear: function (year) { + return ((year % 4 === 0) && (year % 100 !== 0)) || (year % 400 === 0); + }, - disconnectedCallback() { - super.disconnectedCallback(); - stopNotifyingOnLangChange(this); - } + addLeadingZero: function (number) { + return (number < 10 ? '0' : '') + number; + }, - firstUpdated() { - // add attribute for query selectors when auro-input is registered under a custom name - if (this.tagName.toLowerCase() !== 'auro-input') { - this.setAttribute('auro-input', true); + addLeadingZeroForYear: function (number, fullYearMode) { + if (fullYearMode) { + return (number < 10 ? '000' : (number < 100 ? '00' : (number < 1000 ? '0' : ''))) + number; + } + + return (number < 10 ? '0' : '') + number; } +}; - this.inputElement = this.renderRoot.querySelector('input'); - this.labelElement = this.shadowRoot.querySelector('label'); +var DateFormatter_1 = DateFormatter; - // use validity message override if declared when initializing the component - if (this.hasAttribute('setCustomValidity')) { - this.ValidityMessageOverride = this.setCustomValidity; - } +var TimeFormatter = function (timePattern, timeFormat) { + var owner = this; - // if setCustomValidityForType is not set, use our default - if (!this.setCustomValidityForType) { - if (this.type === 'password') { - this.setCustomValidityForType = i18n(this.lang, 'password'); - } else if (this.type === 'credit-card') { - this.setCustomValidityForType = i18n(this.lang, 'creditcard'); - } else if (this.type === 'email') { - this.setCustomValidityForType = i18n(this.lang, 'email'); - } else if (this.type === 'month-day-year') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY'); - } else if (this.type === 'month-year') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMYY'); - } else if (this.type === 'month-fullyear') { - this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); - } else if (this.type === 'year-month-day') { - this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); - } - } + owner.time = []; + owner.blocks = []; + owner.timePattern = timePattern; + owner.timeFormat = timeFormat; + owner.initBlocks(); +}; - this.addEventListener('keydown', (evt) => { - if (this.autoFormattingTypes.includes(this.type)) { - if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { - if (evt.key.length === 1) { - const numCharSelected = this.inputElement.selectionEnd - this.inputElement.selectionStart; +TimeFormatter.prototype = { + initBlocks: function () { + var owner = this; + owner.timePattern.forEach(function () { + owner.blocks.push(2); + }); + }, + + getISOFormatTime: function () { + var owner = this, + time = owner.time; + + return time[2] ? ( + owner.addLeadingZero(time[0]) + ':' + owner.addLeadingZero(time[1]) + ':' + owner.addLeadingZero(time[2]) + ) : ''; + }, + + getBlocks: function () { + return this.blocks; + }, + + getTimeFormatOptions: function () { + var owner = this; + if (String(owner.timeFormat) === '12') { + return { + maxHourFirstDigit: 1, + maxHours: 12, + maxMinutesFirstDigit: 5, + maxMinutes: 60 + }; + } - if (numCharSelected > 1) { - this.cursorPosition = this.inputElement.selectionStart + 1; - } else if (numCharSelected === 1) { - this.cursorPosition = this.inputElement.selectionEnd; - } else { - this.cursorPosition = this.inputElement.selectionEnd + 1; + return { + maxHourFirstDigit: 2, + maxHours: 23, + maxMinutesFirstDigit: 5, + maxMinutes: 60 + }; + }, + + getValidatedTime: function (value) { + var owner = this, result = ''; + + value = value.replace(/[^\d]/g, ''); + + var timeFormatOptions = owner.getTimeFormatOptions(); + + owner.blocks.forEach(function (length, index) { + if (value.length > 0) { + var sub = value.slice(0, length), + sub0 = sub.slice(0, 1), + rest = value.slice(length); + + switch (owner.timePattern[index]) { + + case 'h': + if (parseInt(sub0, 10) > timeFormatOptions.maxHourFirstDigit) { + sub = '0' + sub0; + } else if (parseInt(sub, 10) > timeFormatOptions.maxHours) { + sub = timeFormatOptions.maxHours + ''; + } + + break; + + case 'm': + case 's': + if (parseInt(sub0, 10) > timeFormatOptions.maxMinutesFirstDigit) { + sub = '0' + sub0; + } else if (parseInt(sub, 10) > timeFormatOptions.maxMinutes) { + sub = timeFormatOptions.maxMinutes + ''; + } + break; + } + + result += sub; + + // update remaining string + value = rest; } - } else if (evt.key === 'Backspace') { - this.cursorPosition = this.inputElement.selectionEnd - 1; - } else if (evt.key === 'Delete') { - this.cursorPosition = this.inputElement.selectionEnd; - } + }); + + return this.getFixedTimeString(result); + }, + + getFixedTimeString: function (value) { + var owner = this, timePattern = owner.timePattern, time = [], + secondIndex = 0, minuteIndex = 0, hourIndex = 0, + secondStartIndex = 0, minuteStartIndex = 0, hourStartIndex = 0, + second, minute, hour; + + if (value.length === 6) { + timePattern.forEach(function (type, index) { + switch (type) { + case 's': + secondIndex = index * 2; + break; + case 'm': + minuteIndex = index * 2; + break; + case 'h': + hourIndex = index * 2; + break; + } + }); + + hourStartIndex = hourIndex; + minuteStartIndex = minuteIndex; + secondStartIndex = secondIndex; + + second = parseInt(value.slice(secondStartIndex, secondStartIndex + 2), 10); + minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10); + hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10); + + time = this.getFixedTime(hour, minute, second); } - if (evt.key === "ArrowUp" || evt.key === "ArrowDown" || evt.key === "ArrowLeft" || evt.key === "ArrowRight") { - if (evt.key === 'ArrowUp') { - this.cursorPosition = 0; - } else if (evt.key === 'ArrowDown') { - this.cursorPosition = this.value.length; - } else if (evt.key === 'ArrowLeft') { - this.cursorPosition = this.inputElement.selectionEnd - 1; - } else if (evt.key === 'ArrowRight') { - this.cursorPosition = this.inputElement.selectionEnd + 1; - } + if (value.length === 4 && owner.timePattern.indexOf('s') < 0) { + timePattern.forEach(function (type, index) { + switch (type) { + case 'm': + minuteIndex = index * 2; + break; + case 'h': + hourIndex = index * 2; + break; + } + }); + + hourStartIndex = hourIndex; + minuteStartIndex = minuteIndex; + + second = 0; + minute = parseInt(value.slice(minuteStartIndex, minuteStartIndex + 2), 10); + hour = parseInt(value.slice(hourStartIndex, hourStartIndex + 2), 10); + + time = this.getFixedTime(hour, minute, second); } - } - }); - this.notifyReady(); - } + owner.time = time; - /** - * LitElement lifecycle method. Called after the DOM has been updated. - * @param {Map} changedProperties - Keys are the names of changed properties, values are the corresponding previous values. - * @returns {void} - */ - updated(changedProperties) { - if (this.type === 'password') { - this.spellcheck = 'false'; - } + return time.length === 0 ? value : timePattern.reduce(function (previous, current) { + switch (current) { + case 's': + return previous + owner.addLeadingZero(time[2]); + case 'm': + return previous + owner.addLeadingZero(time[1]); + case 'h': + return previous + owner.addLeadingZero(time[0]); + } + }, ''); + }, - if (this.spellcheck === 'false') { - this.autocorrect = 'off'; - this.autocapitalize = 'none'; - } else { - this.autocorrect = this.autocorrect ? this.autocorrect : undefined; - this.autocapitalize = undefined; - } + getFixedTime: function (hour, minute, second) { + second = Math.min(parseInt(second || 0, 10), 60); + minute = Math.min(minute, 60); + hour = Math.min(hour, 60); - if (changedProperties.has('readonly')) { - if (this.readonly) { - this.inputElement.setAttribute('readonly', true); - this.inputElement.setAttribute('aria-readonly', true); - } else { - this.inputElement.removeAttribute('readonly'); - this.inputElement.removeAttribute('aria-readonly'); - } - } + return [hour, minute, second]; + }, - if (changedProperties.has('type')) { - this.configureDataForType(); + addLeadingZero: function (number) { + return (number < 10 ? '0' : '') + number; } +}; - if (changedProperties.has('value')) { - if (this.value && this.value.length > 0) { - this.hasValue = true; - this.requestUpdate(); - } else { - this.hasValue = false; - this.requestUpdate(); - } +var TimeFormatter_1 = TimeFormatter; - if (this.value !== this.inputElement.value) { - if (this.value) { - this.inputElement.value = this.value; - } else { - this.inputElement.value = ''; - } +var PhoneFormatter = function (formatter, delimiter) { + var owner = this; - if (!this.shadowRoot.contains(this.getActiveElement())) { - this.validation.validate(this); + owner.delimiter = (delimiter || delimiter === '') ? delimiter : ' '; + owner.delimiterRE = delimiter ? new RegExp('\\' + delimiter, 'g') : ''; + + owner.formatter = formatter; +}; + +PhoneFormatter.prototype = { + setFormatter: function (formatter) { + this.formatter = formatter; + }, + + format: function (phoneNumber) { + var owner = this; + + owner.formatter.clear(); + + // only keep number and + + phoneNumber = phoneNumber.replace(/[^\d+]/g, ''); + + // strip non-leading + + phoneNumber = phoneNumber.replace(/^\+/, 'B').replace(/\+/g, '').replace('B', '+'); + + // strip delimiter + phoneNumber = phoneNumber.replace(owner.delimiterRE, ''); + + var result = '', current, validated = false; + + for (var i = 0, iMax = phoneNumber.length; i < iMax; i++) { + current = owner.formatter.inputDigit(phoneNumber.charAt(i)); + + // has ()- or space inside + if (/[\s()-]/g.test(current)) { + result = current; + + validated = true; + } else { + if (!validated) { + result = current; + } + // else: over length input + // it turns to invalid number again + } } - this.notifyValueChanged(); - } - this.autoFormatHandling(); - } + // strip () + // e.g. US: 7161234567 returns (716) 123-4567 + result = result.replace(/[()]/g, ''); + // replace library delimiter with user customized delimiter + result = result.replace(/[\s-]/g, owner.delimiter); - if (changedProperties.has('error')) { - this.validation.validate(this, true); + return result; } +}; - if (changedProperties.has('validity')) { - this.notifyValidityChange(); +var PhoneFormatter_1 = PhoneFormatter; + +var CreditCardDetector = { + blocks: { + uatp: [4, 5, 6], + amex: [4, 6, 5], + diners: [4, 6, 4], + discover: [4, 4, 4, 4], + mastercard: [4, 4, 4, 4], + dankort: [4, 4, 4, 4], + instapayment: [4, 4, 4, 4], + jcb15: [4, 6, 5], + jcb: [4, 4, 4, 4], + maestro: [4, 4, 4, 4], + visa: [4, 4, 4, 4], + mir: [4, 4, 4, 4], + unionPay: [4, 4, 4, 4], + general: [4, 4, 4, 4] + }, + + re: { + // starts with 1; 15 digits, not starts with 1800 (jcb card) + uatp: /^(?!1800)1\d{0,14}/, + + // starts with 34/37; 15 digits + amex: /^3[47]\d{0,13}/, + + // starts with 6011/65/644-649; 16 digits + discover: /^(?:6011|65\d{0,2}|64[4-9]\d?)\d{0,12}/, + + // starts with 300-305/309 or 36/38/39; 14 digits + diners: /^3(?:0([0-5]|9)|[689]\d?)\d{0,11}/, + + // starts with 51-55/2221–2720; 16 digits + mastercard: /^(5[1-5]\d{0,2}|22[2-9]\d{0,1}|2[3-7]\d{0,2})\d{0,12}/, + + // starts with 5019/4175/4571; 16 digits + dankort: /^(5019|4175|4571)\d{0,12}/, + + // starts with 637-639; 16 digits + instapayment: /^63[7-9]\d{0,13}/, + + // starts with 2131/1800; 15 digits + jcb15: /^(?:2131|1800)\d{0,11}/, + + // starts with 2131/1800/35; 16 digits + jcb: /^(?:35\d{0,2})\d{0,12}/, + + // starts with 50/56-58/6304/67; 16 digits + maestro: /^(?:5[0678]\d{0,2}|6304|67\d{0,2})\d{0,12}/, + + // starts with 22; 16 digits + mir: /^220[0-4]\d{0,12}/, + + // starts with 4; 16 digits + visa: /^4\d{0,15}/, + + // starts with 62/81; 16 digits + unionPay: /^(62|81)\d{0,14}/ + }, + + getStrictBlocks: function (block) { + var total = block.reduce(function (prev, current) { + return prev + current; + }, 0); + + return block.concat(19 - total); + }, + + getInfo: function (value, strictMode) { + var blocks = CreditCardDetector.blocks, + re = CreditCardDetector.re; + + // Some credit card can have up to 19 digits number. + // Set strictMode to true will remove the 16 max-length restrain, + // however, I never found any website validate card number like + // this, hence probably you don't want to enable this option. + strictMode = !!strictMode; + + for (var key in re) { + if (re[key].test(value)) { + var matchedBlocks = blocks[key]; + return { + type: key, + blocks: strictMode ? this.getStrictBlocks(matchedBlocks) : matchedBlocks + }; + } + } + + return { + type: 'unknown', + blocks: strictMode ? this.getStrictBlocks(blocks.general) : blocks.general + }; } - } +}; - /** - * @private - * @returns {void} Handles cursor position when input auto-formats. - */ - autoFormatHandling() { - if (this.cursorPosition >= 0 && this.autoFormattingTypes.includes(this.type)) { - if (this.type === 'credit-card' && this.inputElement.value.charAt(this.cursorPosition) === ' ') { - this.cursorPosition += 1; - } else if (this.dateInputTypes.includes(this.type)) { - const divider = '/'; - const dividerNextChar = this.inputElement.value.charAt(this.cursorPosition) === divider; +var CreditCardDetector_1 = CreditCardDetector; - if (this.cursorPosition > 1 && dividerNextChar && this.inputElement.value.charAt(this.cursorPosition - 2) !== divider) { - this.cursorPosition += 1; - } else if (this.cursorPosition > 0 && this.inputElement.value.charAt(this.cursorPosition + 1) === divider - && this.inputElement.value.charAt(this.cursorPosition - 1) === '0') { // eslint-disable-line operator-linebreak - this.cursorPosition += 2; +var Util = { + noop: function () { + }, + + strip: function (value, re) { + return value.replace(re, ''); + }, + + getPostDelimiter: function (value, delimiter, delimiters) { + // single delimiter + if (delimiters.length === 0) { + return value.slice(-delimiter.length) === delimiter ? delimiter : ''; } - } - this.inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition); - } - } + // multiple delimiters + var matchedDelimiter = ''; + delimiters.forEach(function (current) { + if (value.slice(-current.length) === current) { + matchedDelimiter = current; + } + }); - /** - * @private - * @returns {void} Notify validity state changed via event. - */ - notifyValidityChange() { - this.dispatchEvent(new CustomEvent('auroInput-validityChange', { - bubbles: true, - cancelable: false, - composed: true, - })); - } + return matchedDelimiter; + }, - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; + getDelimiterREByDelimiter: function (delimiter) { + return new RegExp(delimiter.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1'), 'g'); + }, - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } + getNextCursorPosition: function (prevPos, oldValue, newValue, delimiter, delimiters) { + // If cursor was at the end of value, just place it back. + // Because new value could contain additional chars. + if (oldValue.length === prevPos) { + return newValue.length; + } + + return prevPos + this.getPositionOffset(prevPos, oldValue, newValue, delimiter ,delimiters); + }, + + getPositionOffset: function (prevPos, oldValue, newValue, delimiter, delimiters) { + var oldRawValue, newRawValue, lengthOffset; + + oldRawValue = this.stripDelimiters(oldValue.slice(0, prevPos), delimiter, delimiters); + newRawValue = this.stripDelimiters(newValue.slice(0, prevPos), delimiter, delimiters); + lengthOffset = oldRawValue.length - newRawValue.length; + + return (lengthOffset !== 0) ? (lengthOffset / Math.abs(lengthOffset)) : 0; + }, + + stripDelimiters: function (value, delimiter, delimiters) { + var owner = this; + + // single delimiter + if (delimiters.length === 0) { + var delimiterRE = delimiter ? owner.getDelimiterREByDelimiter(delimiter) : ''; + + return value.replace(delimiterRE, ''); + } + + // multiple delimiters + delimiters.forEach(function (current) { + current.split('').forEach(function (letter) { + value = value.replace(owner.getDelimiterREByDelimiter(letter), ''); + }); + }); + + return value; + }, + + headStr: function (str, length) { + return str.slice(0, length); + }, + + getMaxLength: function (blocks) { + return blocks.reduce(function (previous, current) { + return previous + current; + }, 0); + }, + + // strip prefix + // Before type | After type | Return value + // PEFIX-... | PEFIX-... | '' + // PREFIX-123 | PEFIX-123 | 123 + // PREFIX-123 | PREFIX-23 | 23 + // PREFIX-123 | PREFIX-1234 | 1234 + getPrefixStrippedValue: function (value, prefix, prefixLength, prevResult, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix) { + // No prefix + if (prefixLength === 0) { + return value; + } + + // Value is prefix + if (value === prefix && value !== '') { + return ''; + } + + if (signBeforePrefix && (value.slice(0, 1) == '-')) { + var prev = (prevResult.slice(0, 1) == '-') ? prevResult.slice(1) : prevResult; + return '-' + this.getPrefixStrippedValue(value.slice(1), prefix, prefixLength, prev, delimiter, delimiters, noImmediatePrefix, tailPrefix, signBeforePrefix); + } + + // Pre result prefix string does not match pre-defined prefix + if (prevResult.slice(0, prefixLength) !== prefix && !tailPrefix) { + // Check if the first time user entered something + if (noImmediatePrefix && !prevResult && value) return value; + return ''; + } else if (prevResult.slice(-prefixLength) !== prefix && tailPrefix) { + // Check if the first time user entered something + if (noImmediatePrefix && !prevResult && value) return value; + return ''; + } + + var prevValue = this.stripDelimiters(prevResult, delimiter, delimiters); + + // New value has issue, someone typed in between prefix letters + // Revert to pre value + if (value.slice(0, prefixLength) !== prefix && !tailPrefix) { + return prevValue.slice(prefixLength); + } else if (value.slice(-prefixLength) !== prefix && tailPrefix) { + return prevValue.slice(0, -prefixLength - 1); + } + + // No issue, strip prefix for new value + return tailPrefix ? value.slice(0, -prefixLength) : value.slice(prefixLength); + }, + + getFirstDiffIndex: function (prev, current) { + var index = 0; + + while (prev.charAt(index) === current.charAt(index)) { + if (prev.charAt(index++) === '') { + return -1; + } + } + + return index; + }, + + getFormattedValue: function (value, blocks, blocksLength, delimiter, delimiters, delimiterLazyShow) { + var result = '', + multipleDelimiters = delimiters.length > 0, + currentDelimiter = ''; + + // no options, normal input + if (blocksLength === 0) { + return value; + } + + blocks.forEach(function (length, index) { + if (value.length > 0) { + var sub = value.slice(0, length), + rest = value.slice(length); + + if (multipleDelimiters) { + currentDelimiter = delimiters[delimiterLazyShow ? (index - 1) : index] || currentDelimiter; + } else { + currentDelimiter = delimiter; + } + + if (delimiterLazyShow) { + if (index > 0) { + result += currentDelimiter; + } + + result += sub; + } else { + result += sub; + + if (sub.length === length && index < blocksLength - 1) { + result += currentDelimiter; + } + } + + // update remaining string + value = rest; + } + }); + + return result; + }, + + // move cursor to the end + // the first time user focuses on an input with prefix + fixPrefixCursor: function (el, prefix, delimiter, delimiters) { + if (!el) { + return; + } + + var val = el.value, + appendix = delimiter || (delimiters[0] || ' '); + + if (!el.setSelectionRange || !prefix || (prefix.length + appendix.length) <= val.length) { + return; + } + + var len = val.length * 2; + + // set timeout to avoid blink + setTimeout(function () { + el.setSelectionRange(len, len); + }, 1); + }, + + // Check if input field is fully selected + checkFullSelection: function(value) { + try { + var selection = window.getSelection() || document.getSelection() || {}; + return selection.toString().length === value.length; + } catch (ex) { + // Ignore + } + + return false; + }, + + setSelection: function (element, position, doc) { + if (element !== this.getActiveElement(doc)) { + return; + } + + // cursor is already in the end + if (element && element.value.length <= position) { + return; + } + + if (element.createTextRange) { + var range = element.createTextRange(); + + range.move('character', position); + range.select(); + } else { + try { + element.setSelectionRange(position, position); + } catch (e) { + // eslint-disable-next-line + console.warn('The input element type does not support selection'); + } + } + }, + + getActiveElement: function(parent) { + var activeElement = parent.activeElement; + if (activeElement && activeElement.shadowRoot) { + return this.getActiveElement(activeElement.shadowRoot); + } + return activeElement; + }, + + isAndroid: function () { + return navigator && /android/i.test(navigator.userAgent); + }, + + // On Android chrome, the keyup and keydown events + // always return key code 229 as a composition that + // buffers the user’s keystrokes + // see https://github.com/nosir/cleave.js/issues/147 + isAndroidBackspaceKeydown: function (lastInputValue, currentInputValue) { + if (!this.isAndroid() || !lastInputValue || !currentInputValue) { + return false; + } + + return currentInputValue === lastInputValue.slice(0, -1); + } +}; + +var Util_1 = Util; + +/** + * Props Assignment + * + * Separate this, so react module can share the usage + */ +var DefaultProperties = { + // Maybe change to object-assign + // for now just keep it as simple + assign: function (target, opts) { + target = target || {}; + opts = opts || {}; + + // credit card + target.creditCard = !!opts.creditCard; + target.creditCardStrictMode = !!opts.creditCardStrictMode; + target.creditCardType = ''; + target.onCreditCardTypeChanged = opts.onCreditCardTypeChanged || (function () {}); + + // phone + target.phone = !!opts.phone; + target.phoneRegionCode = opts.phoneRegionCode || 'AU'; + target.phoneFormatter = {}; + + // time + target.time = !!opts.time; + target.timePattern = opts.timePattern || ['h', 'm', 's']; + target.timeFormat = opts.timeFormat || '24'; + target.timeFormatter = {}; + + // date + target.date = !!opts.date; + target.datePattern = opts.datePattern || ['d', 'm', 'Y']; + target.dateMin = opts.dateMin || ''; + target.dateMax = opts.dateMax || ''; + target.dateFormatter = {}; + + // numeral + target.numeral = !!opts.numeral; + target.numeralIntegerScale = opts.numeralIntegerScale > 0 ? opts.numeralIntegerScale : 0; + target.numeralDecimalScale = opts.numeralDecimalScale >= 0 ? opts.numeralDecimalScale : 2; + target.numeralDecimalMark = opts.numeralDecimalMark || '.'; + target.numeralThousandsGroupStyle = opts.numeralThousandsGroupStyle || 'thousand'; + target.numeralPositiveOnly = !!opts.numeralPositiveOnly; + target.stripLeadingZeroes = opts.stripLeadingZeroes !== false; + target.signBeforePrefix = !!opts.signBeforePrefix; + target.tailPrefix = !!opts.tailPrefix; + + // others + target.swapHiddenInput = !!opts.swapHiddenInput; + + target.numericOnly = target.creditCard || target.date || !!opts.numericOnly; + + target.uppercase = !!opts.uppercase; + target.lowercase = !!opts.lowercase; + + target.prefix = (target.creditCard || target.date) ? '' : (opts.prefix || ''); + target.noImmediatePrefix = !!opts.noImmediatePrefix; + target.prefixLength = target.prefix.length; + target.rawValueTrimPrefix = !!opts.rawValueTrimPrefix; + target.copyDelimiter = !!opts.copyDelimiter; + + target.initValue = (opts.initValue !== undefined && opts.initValue !== null) ? opts.initValue.toString() : ''; + + target.delimiter = + (opts.delimiter || opts.delimiter === '') ? opts.delimiter : + (opts.date ? '/' : + (opts.time ? ':' : + (opts.numeral ? ',' : + (opts.phone ? ' ' : + ' ')))); + target.delimiterLength = target.delimiter.length; + target.delimiterLazyShow = !!opts.delimiterLazyShow; + target.delimiters = opts.delimiters || []; + + target.blocks = opts.blocks || []; + target.blocksLength = target.blocks.length; + + target.root = (typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window; + target.document = opts.document || target.root.document; + + target.maxLength = 0; + + target.backspace = false; + target.result = ''; + + target.onValueChanged = opts.onValueChanged || (function () {}); + + return target; + } +}; + +var DefaultProperties_1 = DefaultProperties; + +/** + * Construct a new Cleave instance by passing the configuration object + * + * @param {String | HTMLElement} element + * @param {Object} opts + */ +var Cleave = function (element, opts) { + var owner = this; + var hasMultipleElements = false; + + if (typeof element === 'string') { + owner.element = document.querySelector(element); + hasMultipleElements = document.querySelectorAll(element).length > 1; + } else { + if (typeof element.length !== 'undefined' && element.length > 0) { + owner.element = element[0]; + hasMultipleElements = element.length > 1; + } else { + owner.element = element; + } + } + + if (!owner.element) { + throw new Error('[cleave.js] Please check the element'); + } + + if (hasMultipleElements) { + try { + // eslint-disable-next-line + console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.'); + } catch (e) { + // Old IE + } + } + + opts.initValue = owner.element.value; + + owner.properties = Cleave.DefaultProperties.assign({}, opts); + + owner.init(); +}; + +Cleave.prototype = { + init: function () { + var owner = this, pps = owner.properties; + + // no need to use this lib + if (!pps.numeral && !pps.phone && !pps.creditCard && !pps.time && !pps.date && (pps.blocksLength === 0 && !pps.prefix)) { + owner.onInput(pps.initValue); + + return; + } + + pps.maxLength = Cleave.Util.getMaxLength(pps.blocks); + + owner.isAndroid = Cleave.Util.isAndroid(); + owner.lastInputValue = ''; + owner.isBackward = ''; + + owner.onChangeListener = owner.onChange.bind(owner); + owner.onKeyDownListener = owner.onKeyDown.bind(owner); + owner.onFocusListener = owner.onFocus.bind(owner); + owner.onCutListener = owner.onCut.bind(owner); + owner.onCopyListener = owner.onCopy.bind(owner); + + owner.initSwapHiddenInput(); + + owner.element.addEventListener('input', owner.onChangeListener); + owner.element.addEventListener('keydown', owner.onKeyDownListener); + owner.element.addEventListener('focus', owner.onFocusListener); + owner.element.addEventListener('cut', owner.onCutListener); + owner.element.addEventListener('copy', owner.onCopyListener); + + + owner.initPhoneFormatter(); + owner.initDateFormatter(); + owner.initTimeFormatter(); + owner.initNumeralFormatter(); + + // avoid touch input field if value is null + // otherwise Firefox will add red box-shadow for + if (pps.initValue || (pps.prefix && !pps.noImmediatePrefix)) { + owner.onInput(pps.initValue); + } + }, + + initSwapHiddenInput: function () { + var owner = this, pps = owner.properties; + if (!pps.swapHiddenInput) return; + + var inputFormatter = owner.element.cloneNode(true); + owner.element.parentNode.insertBefore(inputFormatter, owner.element); + + owner.elementSwapHidden = owner.element; + owner.elementSwapHidden.type = 'hidden'; + + owner.element = inputFormatter; + owner.element.id = ''; + }, + + initNumeralFormatter: function () { + var owner = this, pps = owner.properties; + + if (!pps.numeral) { + return; + } + + pps.numeralFormatter = new Cleave.NumeralFormatter( + pps.numeralDecimalMark, + pps.numeralIntegerScale, + pps.numeralDecimalScale, + pps.numeralThousandsGroupStyle, + pps.numeralPositiveOnly, + pps.stripLeadingZeroes, + pps.prefix, + pps.signBeforePrefix, + pps.tailPrefix, + pps.delimiter + ); + }, + + initTimeFormatter: function() { + var owner = this, pps = owner.properties; + + if (!pps.time) { + return; + } + + pps.timeFormatter = new Cleave.TimeFormatter(pps.timePattern, pps.timeFormat); + pps.blocks = pps.timeFormatter.getBlocks(); + pps.blocksLength = pps.blocks.length; + pps.maxLength = Cleave.Util.getMaxLength(pps.blocks); + }, + + initDateFormatter: function () { + var owner = this, pps = owner.properties; + + if (!pps.date) { + return; + } + + pps.dateFormatter = new Cleave.DateFormatter(pps.datePattern, pps.dateMin, pps.dateMax); + pps.blocks = pps.dateFormatter.getBlocks(); + pps.blocksLength = pps.blocks.length; + pps.maxLength = Cleave.Util.getMaxLength(pps.blocks); + }, + + initPhoneFormatter: function () { + var owner = this, pps = owner.properties; + + if (!pps.phone) { + return; + } + + // Cleave.AsYouTypeFormatter should be provided by + // external google closure lib + try { + pps.phoneFormatter = new Cleave.PhoneFormatter( + new pps.root.Cleave.AsYouTypeFormatter(pps.phoneRegionCode), + pps.delimiter + ); + } catch (ex) { + throw new Error('[cleave.js] Please include phone-type-formatter.{country}.js lib'); + } + }, + + onKeyDown: function (event) { + var owner = this, + charCode = event.which || event.keyCode; + + owner.lastInputValue = owner.element.value; + owner.isBackward = charCode === 8; + }, + + onChange: function (event) { + var owner = this, pps = owner.properties, + Util = Cleave.Util; + + owner.isBackward = owner.isBackward || event.inputType === 'deleteContentBackward'; + + var postDelimiter = Util.getPostDelimiter(owner.lastInputValue, pps.delimiter, pps.delimiters); + + if (owner.isBackward && postDelimiter) { + pps.postDelimiterBackspace = postDelimiter; + } else { + pps.postDelimiterBackspace = false; + } + + this.onInput(this.element.value); + }, + + onFocus: function () { + var owner = this, + pps = owner.properties; + owner.lastInputValue = owner.element.value; + + if (pps.prefix && pps.noImmediatePrefix && !owner.element.value) { + this.onInput(pps.prefix); + } + + Cleave.Util.fixPrefixCursor(owner.element, pps.prefix, pps.delimiter, pps.delimiters); + }, + + onCut: function (e) { + if (!Cleave.Util.checkFullSelection(this.element.value)) return; + this.copyClipboardData(e); + this.onInput(''); + }, + + onCopy: function (e) { + if (!Cleave.Util.checkFullSelection(this.element.value)) return; + this.copyClipboardData(e); + }, + + copyClipboardData: function (e) { + var owner = this, + pps = owner.properties, + Util = Cleave.Util, + inputValue = owner.element.value, + textToCopy = ''; + + if (!pps.copyDelimiter) { + textToCopy = Util.stripDelimiters(inputValue, pps.delimiter, pps.delimiters); + } else { + textToCopy = inputValue; + } + + try { + if (e.clipboardData) { + e.clipboardData.setData('Text', textToCopy); + } else { + window.clipboardData.setData('Text', textToCopy); + } + + e.preventDefault(); + } catch (ex) { + // empty + } + }, + + onInput: function (value) { + var owner = this, pps = owner.properties, + Util = Cleave.Util; + + // case 1: delete one more character "4" + // 1234*| -> hit backspace -> 123| + // case 2: last character is not delimiter which is: + // 12|34* -> hit backspace -> 1|34* + // note: no need to apply this for numeral mode + var postDelimiterAfter = Util.getPostDelimiter(value, pps.delimiter, pps.delimiters); + if (!pps.numeral && pps.postDelimiterBackspace && !postDelimiterAfter) { + value = Util.headStr(value, value.length - pps.postDelimiterBackspace.length); + } + + // phone formatter + if (pps.phone) { + if (pps.prefix && (!pps.noImmediatePrefix || value.length)) { + pps.result = pps.prefix + pps.phoneFormatter.format(value).slice(pps.prefix.length); + } else { + pps.result = pps.phoneFormatter.format(value); + } + owner.updateValueState(); + + return; + } + + // numeral formatter + if (pps.numeral) { + // Do not show prefix when noImmediatePrefix is specified + // This mostly because we need to show user the native input placeholder + if (pps.prefix && pps.noImmediatePrefix && value.length === 0) { + pps.result = ''; + } else { + pps.result = pps.numeralFormatter.format(value); + } + owner.updateValueState(); + + return; + } + + // date + if (pps.date) { + value = pps.dateFormatter.getValidatedDate(value); + } + + // time + if (pps.time) { + value = pps.timeFormatter.getValidatedTime(value); + } + + // strip delimiters + value = Util.stripDelimiters(value, pps.delimiter, pps.delimiters); + + // strip prefix + value = Util.getPrefixStrippedValue(value, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix); + + // strip non-numeric characters + value = pps.numericOnly ? Util.strip(value, /[^\d]/g) : value; + + // convert case + value = pps.uppercase ? value.toUpperCase() : value; + value = pps.lowercase ? value.toLowerCase() : value; + + // prevent from showing prefix when no immediate option enabled with empty input value + if (pps.prefix) { + if (pps.tailPrefix) { + value = value + pps.prefix; + } else { + value = pps.prefix + value; + } + + + // no blocks specified, no need to do formatting + if (pps.blocksLength === 0) { + pps.result = value; + owner.updateValueState(); + + return; + } + } + + // update credit card props + if (pps.creditCard) { + owner.updateCreditCardPropsByValue(value); + } + + // strip over length characters + value = Util.headStr(value, pps.maxLength); + + // apply blocks + pps.result = Util.getFormattedValue( + value, + pps.blocks, pps.blocksLength, + pps.delimiter, pps.delimiters, pps.delimiterLazyShow + ); + + owner.updateValueState(); + }, + + updateCreditCardPropsByValue: function (value) { + var owner = this, pps = owner.properties, + Util = Cleave.Util, + creditCardInfo; + + // At least one of the first 4 characters has changed + if (Util.headStr(pps.result, 4) === Util.headStr(value, 4)) { + return; + } + + creditCardInfo = Cleave.CreditCardDetector.getInfo(value, pps.creditCardStrictMode); + + pps.blocks = creditCardInfo.blocks; + pps.blocksLength = pps.blocks.length; + pps.maxLength = Util.getMaxLength(pps.blocks); + + // credit card type changed + if (pps.creditCardType !== creditCardInfo.type) { + pps.creditCardType = creditCardInfo.type; + + pps.onCreditCardTypeChanged.call(owner, pps.creditCardType); + } + }, + + updateValueState: function () { + var owner = this, + Util = Cleave.Util, + pps = owner.properties; + + if (!owner.element) { + return; + } + + var endPos = owner.element.selectionEnd; + var oldValue = owner.element.value; + var newValue = pps.result; + + endPos = Util.getNextCursorPosition(endPos, oldValue, newValue, pps.delimiter, pps.delimiters); + + // fix Android browser type="text" input field + // cursor not jumping issue + if (owner.isAndroid) { + window.setTimeout(function () { + owner.element.value = newValue; + Util.setSelection(owner.element, endPos, pps.document, false); + owner.callOnValueChanged(); + }, 1); + + return; + } + + owner.element.value = newValue; + if (pps.swapHiddenInput) owner.elementSwapHidden.value = owner.getRawValue(); + + Util.setSelection(owner.element, endPos, pps.document, false); + owner.callOnValueChanged(); + }, + + callOnValueChanged: function () { + var owner = this, + pps = owner.properties; + + pps.onValueChanged.call(owner, { + target: { + name: owner.element.name, + value: pps.result, + rawValue: owner.getRawValue() + } + }); + }, + + setPhoneRegionCode: function (phoneRegionCode) { + var owner = this, pps = owner.properties; + + pps.phoneRegionCode = phoneRegionCode; + owner.initPhoneFormatter(); + owner.onChange(); + }, + + setRawValue: function (value) { + var owner = this, pps = owner.properties; + + value = value !== undefined && value !== null ? value.toString() : ''; + + if (pps.numeral) { + value = value.replace('.', pps.numeralDecimalMark); + } + + pps.postDelimiterBackspace = false; + + owner.element.value = value; + owner.onInput(value); + }, + + getRawValue: function () { + var owner = this, + pps = owner.properties, + Util = Cleave.Util, + rawValue = owner.element.value; + + if (pps.rawValueTrimPrefix) { + rawValue = Util.getPrefixStrippedValue(rawValue, pps.prefix, pps.prefixLength, pps.result, pps.delimiter, pps.delimiters, pps.noImmediatePrefix, pps.tailPrefix, pps.signBeforePrefix); + } + + if (pps.numeral) { + rawValue = pps.numeralFormatter.getRawValue(rawValue); + } else { + rawValue = Util.stripDelimiters(rawValue, pps.delimiter, pps.delimiters); + } + + return rawValue; + }, + + getISOFormatDate: function () { + var owner = this, + pps = owner.properties; + + return pps.date ? pps.dateFormatter.getISOFormatDate() : ''; + }, + + getISOFormatTime: function () { + var owner = this, + pps = owner.properties; + + return pps.time ? pps.timeFormatter.getISOFormatTime() : ''; + }, + + getFormattedValue: function () { + return this.element.value; + }, + + destroy: function () { + var owner = this; + + owner.element.removeEventListener('input', owner.onChangeListener); + owner.element.removeEventListener('keydown', owner.onKeyDownListener); + owner.element.removeEventListener('focus', owner.onFocusListener); + owner.element.removeEventListener('cut', owner.onCutListener); + owner.element.removeEventListener('copy', owner.onCopyListener); + }, + + toString: function () { + return '[Cleave Object]'; + } +}; + +Cleave.NumeralFormatter = NumeralFormatter_1; +Cleave.DateFormatter = DateFormatter_1; +Cleave.TimeFormatter = TimeFormatter_1; +Cleave.PhoneFormatter = PhoneFormatter_1; +Cleave.CreditCardDetector = CreditCardDetector_1; +Cleave.Util = Util_1; +Cleave.DefaultProperties = DefaultProperties_1; + +// for angular directive +((typeof commonjsGlobal === 'object' && commonjsGlobal) ? commonjsGlobal : window)['Cleave'] = Cleave; + +// CommonJS +var Cleave_1 = Cleave; + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */ + +class AuroLibraryRuntimeUtils { + + /* eslint-disable jsdoc/require-param */ + + /** + * This will register a new custom element with the browser. + * @param {String} name - The name of the custom element. + * @param {Object} componentClass - The class to register as a custom element. + * @returns {void} + */ + registerComponent(name, componentClass) { + if (!customElements.get(name)) { + customElements.define(name, class extends componentClass {}); + } + } + + /** + * Finds and returns the closest HTML Element based on a selector. + * @returns {void} + */ + closestElement( + selector, // selector like in .closest() + base = this, // extra functionality to skip a parent + __Closest = (el, found = el && el.closest(selector)) => + !el || el === document || el === window + ? null // standard .closest() returns null for non-found selectors also + : found + ? found // found a selector INside this element + : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM + ) { + return __Closest(base); + } + /* eslint-enable jsdoc/require-param */ + + /** + * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element. + * @param {Object} elem - The element to check. + * @param {String} tagName - The name of the Auro component to check for or add as an attribute. + * @returns {void} + */ + handleComponentTagRename(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + if (elemTag !== tag) { + elem.setAttribute(tag, true); + } + } + + /** + * Validates if an element is a specific Auro component. + * @param {Object} elem - The element to validate. + * @param {String} tagName - The name of the Auro component to check against. + * @returns {Boolean} - Returns true if the element is the specified Auro component. + */ + elementMatch(elem, tagName) { + const tag = tagName.toLowerCase(); + const elemTag = elem.tagName.toLowerCase(); + + return elemTag === tag || elem.hasAttribute(tag); + } +} + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroFormValidation { + constructor() { + this.runtimeUtils = new AuroLibraryRuntimeUtils(); + } + + /** + * Determines the validity state of the element based on the common attribute restrictions (pattern). + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + validateAttributes(elem) { + if (elem.pattern) { + const pattern = new RegExp(`^${elem.pattern}$`, 'u'); + + if (!pattern.test(elem.value)) { + elem.validity = 'badInput'; + elem.setCustomValidity = elem.setCustomValidityBadInput || ''; + } + } else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityTooShort || ''; + } else if (elem.value && elem.value.length > elem.maxLength) { + elem.validity = 'tooLong'; + elem.setCustomValidity = elem.setCustomValidityTooLong || ''; + } + } + + /** + * Determines the validity state of the element based on the type attribute. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + validateType(elem) { + if (elem.hasAttribute('type')) { + if (elem.type === 'email') { + const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/; // eslint-disable-line require-unicode-regexp + + if (!elem.value.match(emailRegex)) { + elem.validity = 'badInput'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } + } else if (elem.type === 'credit-card') { + if (elem.value.length > 0 && elem.value.length < elem.validationCCLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } + } else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number' + if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) { + elem.validity = 'rangeOverflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; + } + + if (elem.min !== undefined && Number(elem.min) > Number(elem.value)) { + elem.validity = 'rangeUnderflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || ''; + } + + } else if (elem.type === 'month-day-year' || + elem.type === 'month-year' || + elem.type === 'month-fullYear' || + elem.type === 'year-month-day' + ) { + if (elem.value && elem.value.length > 0 && elem.value.length < elem.dateStrLength) { + elem.validity = 'tooShort'; + elem.setCustomValidity = elem.setCustomValidityForType || ''; + } else { + const valueDate = new Date(elem.value); + + // validate max + if (elem.max !== undefined) { + const maxDate = new Date(elem.max); + + if (valueDate > maxDate) { + elem.validity = 'rangeOverflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || ''; + } + } + + // validate min + if (elem.min) { + const minDate = new Date(elem.min); + + if (valueDate < minDate) { + elem.validity = 'rangeUnderflow'; + elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeUnderflow') || ''; + } + } + } + } + } + } + + /** + * Determines the validity state of the element. + * @param {object} elem - HTML element to validate. + * @param {boolean} force - Boolean that forces validation to run. + * @returns {void} + */ + validate(elem, force) { + this.getInputElements(elem); + this.getAuroInputs(elem); + + // Validate only if noValidate is not true and the input does not have focus + const validationShouldRun = force || (!elem.contains(document.activeElement) && elem.value !== undefined) || elem.validateOnInput; + + if (elem.hasAttribute('error')) { + elem.validity = 'customError'; + elem.setCustomValidity = elem.error; + } else if (validationShouldRun) { + elem.validity = 'valid'; + elem.setCustomValidity = ''; + + /** + * Only validate once we interact with the datepicker + * elem.value === undefined is the initial state pre-interaction. + * + * The validityState definitions are located at https://developer.mozilla.org/en-US/docs/Web/API/ValidityState. + */ + + let hasValue = elem.value && elem.value.length > 0; + + // If there is a second input in the elem and that value is undefined or an empty string set hasValue to false; + if (this.auroInputElements && this.auroInputElements.length === 2) { + if (!this.auroInputElements[1].value || this.auroInputElements[1].length === 0) { + hasValue = false; + } + } + + if (!hasValue && elem.required) { + elem.validity = 'valueMissing'; + elem.setCustomValidity = elem.setCustomValidityValueMissing || ''; + } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) { + this.validateType(elem); + this.validateAttributes(elem); + } + } + + if (this.auroInputElements && this.auroInputElements.length > 0) { + elem.validity = this.auroInputElements[0].validity; + elem.setCustomValidity = this.auroInputElements[0].setCustomValidity; + + if (elem.validity === 'valid') { + if (this.auroInputElements.length > 1) { + elem.validity = this.auroInputElements[1].validity; + elem.setCustomValidity = this.auroInputElements[1].setCustomValidity; + } + } + } + + if (validationShouldRun || elem.hasAttribute('error')) { + if (elem.validity && elem.validity !== 'valid') { + elem.isValid = false; + + // Use the validity message override if it is declared + if (elem.ValidityMessageOverride) { + elem.setCustomValidity = elem.ValidityMessageOverride; + } + } else { + elem.isValid = true; + } + + this.getErrorMessage(elem); + + elem.dispatchEvent(new CustomEvent('auroFormElement-validated', { + bubbles: true, + composed: true, + detail: { + validity: elem.validity, + message: elem.errorMessage + } + })); + } + } + + /** + * Gets all the HTML5 `inputs` in the element shadow DOM. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + getInputElements(elem) { + this.inputElements = elem.renderRoot.querySelectorAll('input'); + } + + /** + * Gets all the `auro-inputs` in the element shadow DOM. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + getAuroInputs(elem) { + this.auroInputElements = elem.shadowRoot.querySelectorAll('auro-input, [auro-input]'); + } + + /** + * Return appropriate error message. + * @private + * @param {object} elem - HTML element to validate. + * @returns {void} + */ + getErrorMessage(elem) { + if (elem.validity !== 'valid') { + if (elem.setCustomValidity) { + elem.errorMessage = elem.setCustomValidity; + } else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) { + const input = elem.renderRoot.querySelector('input'); + + if (input.validationMessage.length > 0) { + elem.errorMessage = input.validationMessage; + } + } else if (this.inputElements && this.inputElements.length > 0) { + const firstInput = this.inputElements[0]; + + if (firstInput.validationMessage.length > 0) { + elem.errorMessage = firstInput.validationMessage; + } else if (this.inputElements.length === 2) { + const secondInput = this.inputElements[1]; + + if (secondInput.validationMessage.length > 0) { + elem.errorMessage = secondInput.validationMessage; + } + } + } + } else { + elem.errorMessage = undefined; + } + } +} + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +/** + * Auro-input provides users a way to enter data into a text field. + * + * @attr {Boolean} activeLabel - If set, the label will remain fixed in the active position. + * @attr {String} autocapitalize - An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters] + * @attr {String} autocomplete - An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. + * @attr {String} autocorrect - When set to `off`, stops iOS from auto correcting words when typed into a text box. + * @attr {Boolean} bordered - Applies bordered UI variant. + * @attr {Boolean} borderless - Applies borderless UI variant. + * @attr {Boolean} disabled - If set, disables the input. + * @attr {String} error - When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. + * @prop {String} errorMessage - Contains the help text message for the current validity error. + * @attr {String} helpText - Deprecated, see `slot`. + * @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. + * @attr {String} id - Sets the unique ID of the element. + * @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. + * @attr {String} label - Deprecated, see `slot`. + * @attr {String} lang - defines the language of an element. + * @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. + * @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. + * @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. + * @attr {String} name - Populates the `name` attribute on the input. + * @attr {Boolean} noValidate - If set, disables auto-validation on blur. + * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. + * @prop {Boolean} ready - When false the component API should not be called. + * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. + * @attr {String} pattern - Specifies a regular expression the form control's value should match. + * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. + * @attr {String} setCustomValidity - Sets a custom help text message to display for all validityStates. + * @attr {String} setCustomValidityCustomError - Custom help text message to display when validity = `customError`. + * @attr {String} setCustomValidityValueMissing - Custom help text message to display when validity = `valueMissing`. + * @attr {String} setCustomValidityBadInput - Custom help text message to display when validity = `badInput`. + * @attr {String} setCustomValidityTooShort - Custom help text message to display when validity = `tooShort`. + * @attr {String} setCustomValidityTooLong - Custom help text message to display when validity = `tooLong`. + * @attr {String} setCustomValidityForType - Custom help text message to display for the declared element `type` and type validity fails. + * @attr {String} setCustomValidityRangeOverflow - Custom help text message to display when validity = `rangeOverflow`. + * @attr {String} setCustomValidityRangeUnderflow - Custom help text message to display when validity = `rangeUnderflow`. + * @attr {String} spellcheck - An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. + * @attr {String} type - Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `month-day-year`, `month-year`, `year-month-day` or `text`. If given value is not allowed or set, defaults to `text`. + * @attr {Boolean} validateOnInput - Sets validation mode to re-eval with each input. + * @attr {String} validity - Specifies the `validityState` this element is in. + * @attr {String} value - Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input. + * + * @slot helptext - Sets the help text displayed below the input. + * @slot label - Sets the label text for the input. + * + * @csspart wrapper - Use for customizing the style of the root element + * @csspart label - Use for customizing the style of the label element + * @csspart helpText - Use for customizing the style of the helpText element + * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon) + * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value) + * @event input - Event fires when the value of an `auro-input` has been changed. + * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed. + */ + +class BaseInput extends r { + + constructor() { + super(); + + this.isValid = false; + + this.icon = false; + this.disabled = false; + this.required = false; + this.noValidate = false; + this.max = undefined; + this.min = undefined; + this.maxLength = undefined; + this.minLength = undefined; + this.label = 'Input label is undefined'; + this.ready = false; + this.activeLabel = false; + + this.setCustomValidityForType = undefined; + } + + /** + * Internal Defaults. + * @private + * @returns {void} + */ + privateDefaults() { + this.validation = new AuroFormValidation(); + this.inputIconName = undefined; + this.showPassword = false; + this.validationCCLength = undefined; + this.hasValue = false; + + this.allowedInputTypes = [ + "text", + "email", + "password", + "credit-card", + "month-day-year", + "year-month-day", + "month-year" + ]; + + this.dateInputTypes = [ + "month-day-year", + "year-month-day", + "month-year", + "month-fullYear" + ]; + + this.autoFormattingTypes = [ + 'credit-card', + 'month-day-year', + 'month-year', + 'month-fullyear', + 'year-month-day' + ]; + + /** + * Credit Card is not included as this caused cursor placement issues. + * The Safari issue. + */ + this.setSelectionInputTypes = [ + "text", + "password", + "email", + ]; + + const idLength = 36; + const idSubstrEnd = 8; + const idSubstrStart = 2; + + this.uniqueId = Math.random() + .toString(idLength) + .substring(idSubstrStart, idSubstrEnd); + } + + // function to define props used within the scope of this component + static get properties() { + return { + id: { type: String }, + label: { type: String }, + name: { type: String }, + type: { type: String, + reflect: true }, + value: { type: String }, + lang: { type: String }, + pattern: { + type: String, + reflect: true + }, + icon: { type: Boolean }, + disabled: { type: Boolean }, + required: { type: Boolean }, + noValidate: { type: Boolean }, + helpText: { type: String }, + spellcheck: { type: String }, + autocorrect: { type: String }, + autocapitalize: { type: String }, + autocomplete: { + type: String, + reflect: true + }, + placeholder: { type: String }, + activeLabel: { + type: Boolean, + reflect: true + }, + max: { type: String }, + min: { type: String }, + maxLength: { type: Number }, + minLength: { type: Number }, + + /** + * @ignore + */ + showPassword: { state: true }, + validateOnInput: { type: Boolean }, + readonly: { type: Boolean }, + ready: { type: Boolean }, + error: { + type: String, + reflect: true + }, + errorMessage: { type: String }, + isValid: { + type: String, + reflect: true + }, + validity: { + type: String, + reflect: true + }, + setCustomValidity: { type: String }, + setCustomValidityCustomError: { type: String }, + setCustomValidityValueMissing: { type: String }, + setCustomValidityBadInput: { type: String }, + setCustomValidityTooShort: { type: String }, + setCustomValidityTooLong: { type: String }, + setCustomValidityRangeOverflow: { type: String}, + setCustomValidityRangeUnderflow: { type: String}, + customValidityTypeEmail: { type: String } + }; + } + + static get styles() { + return [ + i$2`${styleCss$3}`, + i$2`${colorCss$3}`, + i$2`${tokensCss$3}` + ]; + } + + connectedCallback() { + super.connectedCallback(); + + this.privateDefaults(); + + notifyOnLangChange(this); + + // Process auto-formatting if defined for CleaveJS + if (this.type) { + let config = null; + + // Set config for credit card + switch (this.type) { + case 'number': + config = { + numeral: true, + delimiter: '' + }; + + this.inputMode = 'numeric'; + + break; + + case 'credit-card': + config = { + creditCard: true + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-day-year': + config = { + date: true, + delimiter: '/', + datePattern: [ + 'm', + 'd', + 'Y' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'year-month-day': + config = { + date: true, + delimiter: '/', + datePattern: [ + 'Y', + 'm', + 'd' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-year': + config = { + date: true, + datePattern: [ + 'm', + 'y' + ] + }; + + this.inputMode = 'numeric'; + + break; + + case 'month-fullYear': + config = { + date: true, + datePattern: [ + 'm', + 'Y' + ] + }; + + this.inputMode = 'numeric'; + + break; + // Do nothing + } + + // initialize CleaveJS if we have a defined config for the requested format + if (config) { + // eslint-disable-next-line no-unused-vars + new Cleave_1(this, config); + } + } + } + + disconnectedCallback() { + super.disconnectedCallback(); + stopNotifyingOnLangChange(this); + } + + firstUpdated() { + // add attribute for query selectors when auro-input is registered under a custom name + if (this.tagName.toLowerCase() !== 'auro-input') { + this.setAttribute('auro-input', true); + } + + this.inputElement = this.renderRoot.querySelector('input'); + this.labelElement = this.shadowRoot.querySelector('label'); + + // use validity message override if declared when initializing the component + if (this.hasAttribute('setCustomValidity')) { + this.ValidityMessageOverride = this.setCustomValidity; + } + + // if setCustomValidityForType is not set, use our default + if (!this.setCustomValidityForType) { + if (this.type === 'password') { + this.setCustomValidityForType = i18n(this.lang, 'password'); + } else if (this.type === 'credit-card') { + this.setCustomValidityForType = i18n(this.lang, 'creditcard'); + } else if (this.type === 'email') { + this.setCustomValidityForType = i18n(this.lang, 'email'); + } else if (this.type === 'month-day-year') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMDDYYYY'); + } else if (this.type === 'month-year') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMYY'); + } else if (this.type === 'month-fullyear') { + this.setCustomValidityForType = i18n(this.lang, 'dateMMYYYY'); + } else if (this.type === 'year-month-day') { + this.setCustomValidityForType = i18n(this.lang, 'dateYYYYMMDD'); + } + } + + this.addEventListener('keydown', (evt) => { + if (this.autoFormattingTypes.includes(this.type)) { + if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { + if (evt.key.length === 1) { + const numCharSelected = this.inputElement.selectionEnd - this.inputElement.selectionStart; + + if (numCharSelected > 1) { + this.cursorPosition = this.inputElement.selectionStart + 1; + } else if (numCharSelected === 1) { + this.cursorPosition = this.inputElement.selectionEnd; + } else { + this.cursorPosition = this.inputElement.selectionEnd + 1; + } + } else if (evt.key === 'Backspace') { + this.cursorPosition = this.inputElement.selectionEnd - 1; + } else if (evt.key === 'Delete') { + this.cursorPosition = this.inputElement.selectionEnd; + } + } + + if (evt.key === "ArrowUp" || evt.key === "ArrowDown" || evt.key === "ArrowLeft" || evt.key === "ArrowRight") { + if (evt.key === 'ArrowUp') { + this.cursorPosition = 0; + } else if (evt.key === 'ArrowDown') { + this.cursorPosition = this.value.length; + } else if (evt.key === 'ArrowLeft') { + this.cursorPosition = this.inputElement.selectionEnd - 1; + } else if (evt.key === 'ArrowRight') { + this.cursorPosition = this.inputElement.selectionEnd + 1; + } + } + } + }); + + this.notifyReady(); + } + + /** + * LitElement lifecycle method. Called after the DOM has been updated. + * @param {Map} changedProperties - Keys are the names of changed properties, values are the corresponding previous values. + * @returns {void} + */ + updated(changedProperties) { + if (this.type === 'password') { + this.spellcheck = 'false'; + } + + if (this.spellcheck === 'false') { + this.autocorrect = 'off'; + this.autocapitalize = 'none'; + } else { + this.autocorrect = this.autocorrect ? this.autocorrect : undefined; + this.autocapitalize = undefined; + } + + if (changedProperties.has('readonly')) { + if (this.readonly) { + this.inputElement.setAttribute('readonly', true); + this.inputElement.setAttribute('aria-readonly', true); + } else { + this.inputElement.removeAttribute('readonly'); + this.inputElement.removeAttribute('aria-readonly'); + } + } + + if (changedProperties.has('type')) { + this.configureDataForType(); + } + + if (changedProperties.has('value')) { + if (this.value && this.value.length > 0) { + this.hasValue = true; + this.requestUpdate(); + } else { + this.hasValue = false; + this.requestUpdate(); + } + + if (this.value !== this.inputElement.value) { + if (this.value) { + this.inputElement.value = this.value; + } else { + this.inputElement.value = ''; + } + + if (!this.shadowRoot.contains(this.getActiveElement())) { + this.validation.validate(this); + } + + this.notifyValueChanged(); + } + this.autoFormatHandling(); + } + + if (changedProperties.has('error')) { + this.validation.validate(this, true); + } + + if (changedProperties.has('validity')) { + this.notifyValidityChange(); + } + } + + /** + * @private + * @returns {void} Handles cursor position when input auto-formats. + */ + autoFormatHandling() { + if (this.cursorPosition >= 0 && this.autoFormattingTypes.includes(this.type)) { + if (this.type === 'credit-card' && this.inputElement.value.charAt(this.cursorPosition) === ' ') { + this.cursorPosition += 1; + } else if (this.dateInputTypes.includes(this.type)) { + const divider = '/'; + const dividerNextChar = this.inputElement.value.charAt(this.cursorPosition) === divider; + + if (this.cursorPosition > 1 && dividerNextChar && this.inputElement.value.charAt(this.cursorPosition - 2) !== divider) { + this.cursorPosition += 1; + } else if (this.cursorPosition > 0 && this.inputElement.value.charAt(this.cursorPosition + 1) === divider + && this.inputElement.value.charAt(this.cursorPosition - 1) === '0') { // eslint-disable-line operator-linebreak + this.cursorPosition += 2; + } + } + + this.inputElement.setSelectionRange(this.cursorPosition, this.cursorPosition); + } + } + + /** + * @private + * @returns {void} Notify validity state changed via event. + */ + notifyValidityChange() { + this.dispatchEvent(new CustomEvent('auroInput-validityChange', { + bubbles: true, + cancelable: false, + composed: true, + })); + } + + /** + * @private + * @returns {void} Marks the component as ready and sends event. + */ + notifyReady() { + this.ready = true; + + this.dispatchEvent(new CustomEvent('auroInput-ready', { + bubbles: true, + cancelable: false, + composed: true, + })); + } + + /** + * @private + * @returns {string} + */ + definePattern() { + if (this.type === 'credit-card' && !this.noValidate && this.maxLength) { + return `.{${this.maxLength},${this.maxLength}}`; + } + + return this.pattern; + } + + /** + * Function to set element focus. + * @private + * @return {void} + */ + focus() { + this.inputElement.focus(); + } + + /** + * Required to convert SVG icons from data to HTML string. + * @private + * @param {string} icon HTML string for requested icon. + * @returns {object} Appended HTML for SVG. + */ + getIconAsHtml(icon) { + const dom = new DOMParser().parseFromString(icon.svg, 'text/html'); + + return dom.body.firstChild; + } + + /** + * Sends event notifying that the input has changed it's value. + * @private + * @returns {void} + */ + notifyValueChanged() { + let inputEvent = null; + + inputEvent = new Event('input', { + bubbles: true, + composed: true, + }); + + // Dispatched event to alert outside shadow DOM context of event firing. + this.dispatchEvent(inputEvent); + } + + /** + * Handles event of clearing input content by clicking the X icon. + * @private + * @return {void} + */ + handleClickClear() { + this.inputElement.value = ""; + this.value = undefined; + this.labelElement.classList.remove('inputElement-label--sticky'); + this.focus(); + this.validation.validate(this); + this.notifyValueChanged(); + } + + /** + * @private + * @return {void} + */ + handleInput() { + // Prevent non-numeric characters from being entered on credit card fields. + if (this.type === 'credit-card') { + this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); + } + + // Sets value property to value of element value (el.value). + this.value = this.inputElement.value; + + // Validation on blur or input. + if (this.validateOnInput) { + this.validation.validate(this); + } + + // Prevents cursor jumping in Safari. + const { selectionStart } = this.inputElement; + + if (this.setSelectionInputTypes.includes(this.type)) { + this.updateComplete.then(() => { + try { + this.inputElement.setSelectionRange(selectionStart, selectionStart); + } catch (error) { // eslint-disable-line + // do nothing + } + }); + } + } + + /** + * Function to support @focusin event. + * @private + * @return {void} + */ + handleFocusin() { + + /** + * The input is considered to be in it's initial state based on + * if this.value === undefined. The first time we interact with the + * input manually, by applying focusin, we need to flag the + * input as no longer in the initial state. + */ + if (this.value === undefined) { + this.value = ''; + } + } + + /** + * Function to support @blur event. + * @private + * @return {void} + */ + handleBlur() { + this.inputElement.scrollLeft = 100; + + if (!this.noValidate) { + this.validation.validate(this); + } + } + + /** + * Returns focused element, even if it's in the shadow DOM. + * @private + * @param {Object} root - Element to check for focus. + * @returns {Object} + */ + getActiveElement(root = document) { + const activeEl = root.activeElement; + + if (!activeEl) { + return null; + } + + if (activeEl.shadowRoot) { + return this.getActiveElement(activeEl.shadowRoot); + } + + return activeEl; + } + + /** + * Public method force validation of input. + * @returns {void} + */ + validate() { + this.validation.validate(this); + } + + + /** + * Sets configuration data used elsewhere based on the `type` attribute. + * @private + * @returns {void} + */ + configureDataForType() { + if (this.type === 'month-day-year' || this.type === 'year-month-day') { + this.dateStrLength = 10; + } else if (this.type === 'month-year') { + this.dateStrLength = 5; + } else if (this.type === 'month-fullYear') { + this.dateStrLength = 7; + } + } + + /** + * Validates against list of supported this.allowedInputTypes; return type=text if invalid request. + * @private + * @param {string} type Value entered into component prop. + * @returns {string} Iterates over allowed types array. + */ + getInputType(type) { + if (this.allowedInputTypes.includes(type)) { + return type; + } + + return "text"; + } + + /** + * Determines default help text string. + * @private + * @param {string} type Value entered into component prop. + * @returns {string} Evaluates pre-determined help text. + */ + getHelpText(type) { + if (type === 'password') { + this.helpText = i18n(this.lang, 'password'); + } else if (type === 'email') { + this.helpText = i18n(this.lang, 'email'); + } else if (type === 'credit-card') { + this.helpText = i18n(this.lang, 'creditcard'); + } else if (type === 'month-day-year') { + this.helpText = i18n(this.lang, 'dateMMDDYYYY'); + } else if (type === 'month-year') { + this.helpText = i18n(this.lang, 'dateMMYY'); + } else if (type === 'month-fullyear') { + this.helpText = i18n(this.lang, 'dateMMYYYY'); + } else if (type === 'year-month-day') { + this.helpText = i18n(this.lang, 'dateYYYYMMDD'); + } else { + this.helpText = ''; + } + + return this.helpText; + } + + /** + * Function to support show-password feature. + * @private + * @returns {void} + */ + handleClickShowPassword() { + this.showPassword = !this.showPassword; + this.focus(); + } + + /** + * Support placeholder text. + * @private + * @returns {string} + */ + getPlaceholder() { + if (this.type === 'month-day-year') { + return !this.placeholder ? 'MM/DD/YYYY' : this.placeholder; + } else if (this.type === 'month-year') { + return !this.placeholder ? 'MM/YY' : this.placeholder; + } else if (this.type === 'month-fullYear') { + return !this.placeholder ? 'MM/YYYY' : this.placeholder; + } else if (this.type === 'year-month-day') { + return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder; + } + + return o$2(this.placeholder); + } + + /** + * Defines placement of input icon based on type, used with classMap. + * @private + * @returns {boolean} + */ + defineInputIcon() { + if (this.icon && this.type === 'credit-card') { + return true; + } else if (this.dateInputTypes.includes(this.type)) { + return true; + } + + return false; + } + + /** + * Defines padding of input label based on type, used with classMap. + * @private + * @returns {boolean} + */ + defineLabelPadding() { + if (this.icon && this.type === 'credit-card' && (this.value === "" || this.value === undefined)) { + return true; + } else if (this.dateInputTypes.includes(this.type)) { + return true; + } + + return false; + } + + // Functions specific to Credit Card component support + // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- + + /** + * Function to support credit-card feature type. + * @private + * @returns {void} + */ + processCreditCard() { + const card = this.matchInputValueToCreditCard(); + + this.maxLength = card.formatLength; + this.minLength = card.formatMinLength; + + this.setCustomValidity = card.setCustomValidity; + + if (this.icon) { + this.inputIconName = card.cardIcon; + } + } /** + * Function to support credit-card feature type. * @private - * @returns {string} + * @returns {object} JSON with data for credit card formatting. */ - definePattern() { - if (this.type === 'credit-card' && !this.noValidate && this.maxLength) { - return `.{${this.maxLength},${this.maxLength}}`; + matchInputValueToCreditCard() { + const CreditCardValidationMessage = `${i18n(this.lang, 'validCard')}`; + + const creditCardTypes = [ + { + name: 'Airlines', + regex: /^(?1|2)\d{0}/u, + formatMinLength: 17, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'credit-card' + }, + { + name: 'Commercial', + regex: /^(?2)\d{0}/u, + formatMinLength: 8, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'credit-card' + }, + { + name: 'Alaska Commercial', + regex: /^(?27)\d{0}/u, + formatMinLength: 8, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-alaska' + }, + { + name: 'American Express', + regex: /^(?34|37)\d{0}/u, + formatLength: 17, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-amex' + }, + { + name: 'Diners club', + regex: /^(?36|38)\d{0}/u, + formatLength: 16, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'credit-card' + }, + { + name: 'Visa', + regex: /^(?4)\d{0}/u, + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-visa' + }, + { + name: 'Alaska Airlines Visa', + regex: /^(?4147\s34|4888\s93|4800\s11|4313\s51|4313\s07)\d{0}/u, + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-alaska' + }, + { + name: 'Master Card', + regex: /^(?5)\d{0}/u, + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-mastercard' + }, + { + name: 'Discover Card', + regex: /^(?6)\d{0}/u, + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'cc-discover' + } + ]; + + let type = { + name: 'Default Card', + formatLength: 19, + setCustomValidity: CreditCardValidationMessage, + cardIcon: 'credit-card' + }; + + creditCardTypes.forEach((cardType) => { + if (cardType.regex.exec(this.value)) { + type = cardType; + } + }); + + this.validationCCLength = type.formatLength; + + return type; + } +} + +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroDependencyVersioning { + + /** + * Generates a unique string to be used for child auro element naming. + * @private + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateElementName(baseName, version) { + let result = baseName; + + result += '-'; + result += version.replace(/[.]/g, '_'); + + return result; + } + + /** + * Generates a unique string to be used for child auro element naming. + * @param {string} baseName - Defines the first part of the unique element name. + * @param {string} version - Version of the component that will be appended to the baseName. + * @returns {string} - Unique string to be used for naming. + */ + generateTag(baseName, version, tagClass) { + const elementName = this.generateElementName(baseName, version); + const tag = i$4`${s$2(elementName)}`; + + if (!customElements.get(elementName)) { + customElements.define(elementName, class extends tagClass {}); + } + + return tag; + } +} + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +/** + * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers + * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers + * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually + */ + +class AuroElement extends r { + + // function to define props used within the scope of this component + static get properties() { + return { + hidden: { type: Boolean, + reflect: true }, + hiddenVisually: { type: Boolean, + reflect: true }, + hiddenAudible: { type: Boolean, + reflect: true }, + }; + } + + /** + * @private Function that determines state of aria-hidden + */ + hideAudible(value) { + if (value) { + return 'true' + } + + return 'false' + } +} + +var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"Error alert indicator."}; + +/* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */ + +const _fetchMap = new Map(); + +/** + * A callback to parse Response body. + * + * @callback ResponseParser + * @param {Fetch.Response} response + * @returns {Promise} + */ + +/** + * A minimal in-memory map to de-duplicate Fetch API media requests. + * + * @param {String} uri + * @param {Object} [options={}] + * @param {ResponseParser} [options.responseParser=(response) => response.text()] + * @returns {Promise} + */ +const cacheFetch = (uri, options = {}) => { + const responseParser = options.responseParser || ((response) => response.text()); + if (!_fetchMap.has(uri)) { + _fetchMap.set(uri, fetch(uri).then(responseParser)); + } + return _fetchMap.get(uri); +}; + +var styleCss$2 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`; + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" +/** + * @attr {Boolean} onDark - Set value for on-dark version of auro-icon + * @slot - Hidden from visibility, used for a11y if icon description is needed + */ + +// build the component class +class BaseIcon extends AuroElement { + constructor() { + super(); + this.onDark = false; + } + + // function to define props used within the scope of this component + static get properties() { + return { + ...super.properties, + onDark: { + type: Boolean, + reflect: true + }, + + /** + * @private + */ + svg: { + attribute: false, + reflect: true + } + }; + } + + static get styles() { + return i$2` + ${styleCss$2} + `; + } + + /** + * Async function to fetch requested icon from npm CDN. + * @private + * @param {string} category - Icon category. + * @param {string} name - Icon name. + * @returns {SVGElement} DOM - Ready HTML to be appended. + */ + async fetchIcon(category, name) { + let iconHTML = ''; + + if (category === 'logos') { + iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`); + } else { + iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`); + } + + const dom = new DOMParser().parseFromString(iconHTML, 'text/html'); + + return dom.body.querySelector('svg'); + } + + // lifecycle function + async firstUpdated() { + if (!this.customSvg) { + const svg = await this.fetchIcon(this.category, this.name); + + if (svg) { + this.svg = svg; + } else if (!svg) { + const penDOM = new DOMParser().parseFromString(error.svg, 'text/html'); + + this.svg = penDOM.body.firstChild; + } } + } +} + +var tokensCss$2 = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`; + +var colorCss$2 = i$2`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`; + +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" +/** + * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name. + * + * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage. + * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage + * @attr {Boolean} customColor - Removes primary selector. + * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot. + * @attr {Boolean} label - Exposes content in slot as icon label. + * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style. + * @attr {Boolean} accent - Sets the icon to use the accent style. + * @attr {Boolean} emphasis - Sets the icon to use the emphasis style. + * @attr {Boolean} disabled - Sets the icon to use the disabled style. + * @attr {Boolean} error - Sets the icon to use the error style. + * @attr {Boolean} info - Sets the icon to use the info style. + * @attr {Boolean} secondary - Sets the icon to use the secondary style. + * @attr {Boolean} tertiary - Sets the icon to use the tertiary style. + * @attr {Boolean} subtle - Sets the icon to use the subtle style. + * @attr {Boolean} success - Sets the icon to use the success style. + * @attr {Boolean} warning - Sets the icon to use the warning style. + * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`. + * @attr {String} uri - Set the uri for CDN used when fetching icons + * @slot - Hidden from visibility, used for a11y if icon description is needed. + * @slot svg - Used for custom SVG content. + */ + +// build the component class +class AuroIcon extends BaseIcon { + constructor() { + super(); + + this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist'; + + this.privateDefaults(); + } + + /** + * Internal Defaults. + * @private + * @returns {void} + */ + privateDefaults() { + this.accent = false; + this.customColor = false; + this.customSvg = false; + this.disabled = false; + this.emphasis = false; + this.error = false; + this.info = false; + this.label = false; + this.primary = false; + this.secondary = false; + this.subtle = false; + this.success = false; + this.tertiary = false; + this.warning = false; + this.runtimeUtils = new AuroLibraryRuntimeUtils(); + } + + // function to define props used within the scope of this component + static get properties() { + return { + ...super.properties, + accent: { + type: Boolean, + reflect: true + }, + ariaHidden: { + type: String, + reflect: true + }, + category: { + type: String, + reflect: true + }, + customColor: { + type: Boolean + }, + customSvg: { + type: Boolean + }, + disabled: { + type: Boolean, + reflect: true + }, + emphasis: { + type: Boolean, + reflect: true + }, + error: { + type: Boolean, + reflect: true + }, + info: { + type: Boolean, + reflect: true + }, + label: { + type: Boolean, + reflect: true + }, + name: { + type: String, + reflect: true + }, + primary: { + type: Boolean, + reflect: true + }, + secondary: { + type: Boolean, + reflect: true + }, + subtle: { + type: Boolean, + reflect: true + }, + success: { + type: Boolean, + reflect: true + }, + tertiary: { + type: Boolean, + reflect: true + }, + uri: { + type: String + }, + warning: { + type: Boolean, + reflect: true + } + }; + } - return this.pattern; + static get styles() { + return [ + super.styles, + i$2`${tokensCss$2}`, + i$2`${styleCss$2}`, + i$2`${colorCss$2}` + ]; } /** - * Function to set element focus. - * @private - * @return {void} + * This will register this element with the browser. + * @param {string} [name="auro-icon"] - The name of element that you want to register to. + * + * @example + * AuroIcon.register("custom-icon") // this will register this element to + * */ - focus() { - this.inputElement.focus(); + static register(name = "auro-icon") { + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon); } - /** - * Required to convert SVG icons from data to HTML string. - * @private - * @param {string} icon HTML string for requested icon. - * @returns {object} Appended HTML for SVG. - */ - getIconAsHtml(icon) { - const dom = new DOMParser().parseFromString(icon.svg, 'text/html'); + connectedCallback() { + super.connectedCallback(); - return dom.body.firstChild; + // Add the tag name as an attribute if it is different than the component name + this.runtimeUtils.handleComponentTagRename(this, 'auro-icon'); } - /** - * Sends event notifying that the input has changed it's value. - * @private - * @returns {void} - */ - notifyValueChanged() { - let inputEvent = null; + // function that renders the HTML and CSS into the scope of the component + render() { + const a11y = { + 'labelContainer': true, + 'util_displayHiddenVisually': !this.label + }; - inputEvent = new Event('input', { - bubbles: true, - composed: true, - }); + const classes = { + 'label': this.label + }; - // Dispatched event to alert outside shadow DOM context of event firing. - this.dispatchEvent(inputEvent); - } + return x` +
+ + ${this.customSvg ? x` + + ` : x` + ${this.svg} + ` + } + - /** - * Handles event of clearing input content by clicking the X icon. - * @private - * @return {void} - */ - handleClickClear() { - this.inputElement.value = ""; - this.value = undefined; - this.labelElement.classList.remove('inputElement-label--sticky'); - this.focus(); - this.validation.validate(this); - this.notifyValueChanged(); +
+ +
+
+ `; } +} - /** - * @private - * @return {void} - */ - handleInput() { - // Prevent non-numeric characters from being entered on credit card fields. - if (this.type === 'credit-card') { - this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, ''); - } +var iconVersion = '6.0.2'; - // Sets value property to value of element value (el.value). - this.value = this.inputElement.value; +var styleCss$1 = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`; - // Validation on blur or input. - if (this.validateOnInput) { - this.validation.validate(this); - } +var colorCss$1 = i$2`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`; - // Prevents cursor jumping in Safari. - const { selectionStart } = this.inputElement; +var tokensCss$1 = i$2`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`; - if (this.setSelectionInputTypes.includes(this.type)) { - this.updateComplete.then(() => { - try { - this.inputElement.setSelectionRange(selectionStart, selectionStart); - } catch (error) { // eslint-disable-line - // do nothing - } - }); - } - } +var styleCss = i$2`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: 0.375rem;--margin-xs: 0.2rem;--margin-sm: 0.5rem;--margin-md: 0.75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`; - /** - * Function to support @focusin event. - * @private - * @return {void} - */ - handleFocusin() { +var colorCss = i$2`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`; - /** - * The input is considered to be in it's initial state based on - * if this.value === undefined. The first time we interact with the - * input manually, by applying focusin, we need to flag the - * input as no longer in the initial state. - */ - if (this.value === undefined) { - this.value = ''; - } - } +var tokensCss = i$2`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`; - /** - * Function to support @blur event. - * @private - * @return {void} - */ - handleBlur() { - this.inputElement.scrollLeft = 100; +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. - if (!this.noValidate) { - this.validation.validate(this); - } - } - /** - * Returns focused element, even if it's in the shadow DOM. - * @private - * @param {Object} root - Element to check for focus. - * @returns {Object} - */ - getActiveElement(root = document) { - const activeEl = root.activeElement; +// See https://git.io/JJ6SJ for "How to document your components using JSDoc" +/** + * The auro-loader element is an easy to use animated loader component. + * + * @attr {Boolean} pulse - sets loader type + * @attr {Boolean} ringworm - sets loader type + * @attr {Boolean} laser - sets loader type + * @attr {Boolean} orbit - sets loader type + * @attr {Boolean} white - sets color of loader to white + * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark + * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light + * @attr {Boolean} xs - sets size to extra small + * @attr {Boolean} sm - sets size to small + * @attr {Boolean} md - sets size to medium + * @attr {Boolean} lg - sets size to large + * @csspart element - apply style to adjust speed of animation + */ - if (!activeEl) { - return null; - } +// build the component class +class AuroLoader extends r { + constructor() { + super(); - if (activeEl.shadowRoot) { - return this.getActiveElement(activeEl.shadowRoot); - } + /** + * @private + */ + this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; - return activeEl; - } + /** + * @private + */ + this.mdCount = 3; - /** - * Public method force validation of input. - * @returns {void} - */ - validate() { - this.validation.validate(this); - } + /** + * @private + */ + this.smCount = 2; + /** + * @private + */ + this.runtimeUtils = new AuroLibraryRuntimeUtils(); - /** - * Sets configuration data used elsewhere based on the `type` attribute. - * @private - * @returns {void} - */ - configureDataForType() { - if (this.type === 'month-day-year' || this.type === 'year-month-day') { - this.dateStrLength = 10; - } else if (this.type === 'month-year') { - this.dateStrLength = 5; - } else if (this.type === 'month-fullYear') { - this.dateStrLength = 7; - } + this.orbit = false; + this.ringworm = false; + this.laser = false; + this.pulse = false; } - /** - * Validates against list of supported this.allowedInputTypes; return type=text if invalid request. - * @private - * @param {string} type Value entered into component prop. - * @returns {string} Iterates over allowed types array. - */ - getInputType(type) { - if (this.allowedInputTypes.includes(type)) { - return type; - } - - return "text"; + // function to define props used within the scope of this component + static get properties() { + return { + pulse: { + type: Boolean, + reflect: true + }, + orbit: { + type: Boolean, + reflect: true + }, + ringworm: { + type: Boolean, + reflect: true + }, + laser: { + type: Boolean, + reflect: true + } + }; } - /** - * Determines default help text string. - * @private - * @param {string} type Value entered into component prop. - * @returns {string} Evaluates pre-determined help text. - */ - getHelpText(type) { - if (type === 'password') { - this.helpText = i18n(this.lang, 'password'); - } else if (type === 'email') { - this.helpText = i18n(this.lang, 'email'); - } else if (type === 'credit-card') { - this.helpText = i18n(this.lang, 'creditcard'); - } else if (type === 'month-day-year') { - this.helpText = i18n(this.lang, 'dateMMDDYYYY'); - } else if (type === 'month-year') { - this.helpText = i18n(this.lang, 'dateMMYY'); - } else if (type === 'month-fullyear') { - this.helpText = i18n(this.lang, 'dateMMYYYY'); - } else if (type === 'year-month-day') { - this.helpText = i18n(this.lang, 'dateYYYYMMDD'); - } else { - this.helpText = ''; - } - - return this.helpText; + static get styles() { + return [ + i$2`${styleCss}`, + i$2`${colorCss}`, + i$2`${tokensCss}` + ]; } /** - * Function to support show-password feature. - * @private - * @returns {void} + * This will register this element with the browser. + * @param {string} [name="auro-loader"] - The name of element that you want to register to. + * + * @example + * AuroLoader.register("custom-loader") // this will register this element to + * */ - handleClickShowPassword() { - this.showPassword = !this.showPassword; - this.focus(); + static register(name = "auro-loader") { + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader); } - /** - * Support placeholder text. - * @private - * @returns {string} - */ - getPlaceholder() { - if (this.type === 'month-day-year') { - return !this.placeholder ? 'MM/DD/YYYY' : this.placeholder; - } else if (this.type === 'month-year') { - return !this.placeholder ? 'MM/YY' : this.placeholder; - } else if (this.type === 'month-fullYear') { - return !this.placeholder ? 'MM/YYYY' : this.placeholder; - } else if (this.type === 'year-month-day') { - return !this.placeholder ? 'YYYY/MM/DD' : this.placeholder; - } + firstUpdated() { + // Add the tag name as an attribute if it is different than the component name + this.runtimeUtils.handleComponentTagRename(this, 'auro-loader'); + } - return ifDefined(this.placeholder); + connectedCallback() { + super.connectedCallback(); } /** - * Defines placement of input icon based on type, used with classMap. * @private - * @returns {boolean} + * @returns {Array} Numbered array for template map. */ - defineInputIcon() { - if (this.icon && this.type === 'credit-card') { - return true; - } else if (this.dateInputTypes.includes(this.type)) { - return true; + defineTemplate() { + let nodes = Array.from(Array(this.mdCount).keys()); + + if (this.orbit || this.laser) { + nodes = Array.from(Array(this.smCount).keys()); + } else if (this.ringworm) { + nodes = Array.from(Array(0).keys()); } - return false; + return nodes; } - /** - * Defines padding of input label based on type, used with classMap. - * @private - * @returns {boolean} - */ - defineLabelPadding() { - if (this.icon && this.type === 'credit-card' && (this.value === "" || this.value === undefined)) { - return true; - } else if (this.dateInputTypes.includes(this.type)) { - return true; - } + // When using auroElement, use the following attribute and function when hiding content from screen readers. + // aria-hidden="${this.hideAudible(this.hiddenAudible)}" - return false; + // function that renders the HTML and CSS into the scope of the component + render() { + return x` + ${this.defineTemplate().map((idx) => x` + + `)} + +
Loading...
+ + ${this.ringworm ? x` + + + ` + : `` + } + `; } +} - // Functions specific to Credit Card component support - // -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- +var loaderVersion = '3.1.1'; - /** - * Function to support credit-card feature type. - * @private - * @returns {void} - */ - processCreditCard() { - const card = this.matchInputValueToCreditCard(); +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. - this.maxLength = card.formatLength; - this.minLength = card.formatMinLength; - this.setCustomValidity = card.setCustomValidity; +/** + * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user + * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions + * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content + * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled + * @attr {Boolean} onDark - Set value for on-dark version of auro-button + * @attr {Boolean} rounded - If set to true, the button will have a rounded shape + * @attr {Boolean} slim - Set value for slim version of auro-button + * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container + * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead. + * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion. + * @attr {String} id - Set the unique ID of an element. + * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element. + * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button` + * @attr {String} value - Defines the value associated with the button which is submitted with the form data. + * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary` + * @attr {Boolean} secondary - DEPRECATED + * @attr {Boolean} tertiary - DEPRECATED + * @prop {Boolean} ready - When false the component API should not be called. + * @event auroButton-ready - Notifies that the component has finished initializing. + * @slot - Default slot for the text of the button. + * @slot icon - Slot to provide auro-icon for the button. + * @csspart button - Apply CSS to HTML5 button. + * @csspart loader - Apply CSS to auro-loader. + * @csspart text - Apply CSS to text slot. + * @csspart icon - Apply CSS to icon slot. + */ - if (this.icon) { - this.inputIconName = card.cardIcon; - } +/* eslint-disable lit/no-invalid-html, lit/binding-positions */ + +class AuroButton extends r { + + constructor() { + super(); + this.autofocus = false; + this.disabled = false; + this.iconOnly = false; + this.loading = false; + this.onDark = false; + this.ready = false; + this.secondary = false; + this.tertiary = false; + this.rounded = false; + this.slim = false; + this.fluid = false; + + /** + * Generate unique names for dependency components. + */ + const versioning = new AuroDependencyVersioning(); + + /** + * @private + */ + this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader); } - /** - * Function to support credit-card feature type. - * @private - * @returns {object} JSON with data for credit card formatting. - */ - matchInputValueToCreditCard() { - const CreditCardValidationMessage = `${i18n(this.lang, 'validCard')}`; + static get styles() { + return [ + tokensCss$1, + styleCss$1, + colorCss$1 + ]; + } - const creditCardTypes = [ - { - name: 'Airlines', - regex: /^(?1|2)\d{0}/u, - formatMinLength: 17, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'credit-card' + static get properties() { + return { + autofocus: { + type: Boolean, + reflect: true }, - { - name: 'Commercial', - regex: /^(?2)\d{0}/u, - formatMinLength: 8, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'credit-card' + disabled: { + type: Boolean, + reflect: true }, - { - name: 'Alaska Commercial', - regex: /^(?27)\d{0}/u, - formatMinLength: 8, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-alaska' + secondary: { + type: Boolean, + reflect: true }, - { - name: 'American Express', - regex: /^(?34|37)\d{0}/u, - formatLength: 17, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-amex' + tertiary: { + type: Boolean, + reflect: true }, - { - name: 'Diners club', - regex: /^(?36|38)\d{0}/u, - formatLength: 16, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'credit-card' + fluid: { + type: Boolean, + reflect: true }, - { - name: 'Visa', - regex: /^(?4)\d{0}/u, - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-visa' + iconOnly: { + type: Boolean, + reflect: true }, - { - name: 'Alaska Airlines Visa', - regex: /^(?4147\s34|4888\s93|4800\s11|4313\s51|4313\s07)\d{0}/u, - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-alaska' + loading: { + type: Boolean, + reflect: true }, - { - name: 'Master Card', - regex: /^(?5)\d{0}/u, - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-mastercard' + onDark: { + type: Boolean, + reflect: true }, - { - name: 'Discover Card', - regex: /^(?6)\d{0}/u, - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'cc-discover' - } - ]; - - let type = { - name: 'Default Card', - formatLength: 19, - setCustomValidity: CreditCardValidationMessage, - cardIcon: 'credit-card' + rounded: { + type: Boolean, + reflect: true + }, + slim: { + type: Boolean, + reflect: true + }, + arialabel: { + type: String, + reflect: true + }, + arialabelledby: { + type: String, + reflect: true + }, + title: { + type: String, + reflect: true + }, + type: { + type: String, + reflect: true + }, + value: { + type: String, + reflect: true + }, + variant: { + type: String, + reflect: true + }, + ready: { type: Boolean }, }; + } - creditCardTypes.forEach((cardType) => { - if (cardType.regex.exec(this.value)) { - type = cardType; - } - }); + /** + * This will register this element with the browser. + * @param {string} [name="auro-button"] - The name of element that you want to register to. + * + * @example + * AuroButton.register("custom-button") // this will register this element to + * + */ + static register(name = "auro-button") { + AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton); + } - this.validationCCLength = type.formatLength; + /** + * Internal method to apply focus to the HTML5 button. + * @private + * @returns {void} + */ + focus() { + this.renderRoot.querySelector('button').focus(); + } - return type; + /** + * Marks the component as ready and sends event. + * @private + * @returns {void} + */ + notifyReady() { + this.ready = true; + + this.dispatchEvent(new CustomEvent('auroButton-ready', { + bubbles: true, + cancelable: false, + composed: true, + })); } -} -var iconVersion = '6.0.2'; + updated() { + // support the old `secondary` and `tertiary` attributes` that are deprecated + if (this.secondary) { + this.setAttribute('variant', 'secondary'); + } + + if (this.tertiary) { + this.setAttribute('variant', 'tertiary'); + } + } + + firstUpdated() { + this.notifyReady(); + } + + render() { + const classes = { + 'util_insetLg--squish': true, + 'auro-button': true, + 'auro-button--rounded': this.rounded, + 'auro-button--slim': this.slim, + 'auro-button--iconOnly': this.iconOnly, + 'auro-button--iconOnlySlim': this.iconOnly && this.slim, + 'loading': this.loading + }; + + return u$3` + + `; + } +} -var buttonVersion = '8.1.2'; +var buttonVersion = '8.1.3'; // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license // See LICENSE in the project root for license information. @@ -1089,7 +3783,7 @@ class AuroInput extends BaseInput { 'withValue': this.value && this.value.length > 0 }; - return html` + return u$3`
@@ -1098,7 +3792,7 @@ class AuroInput extends BaseInput { ${this.inputIconName - ? repeat([this.inputIconName], (val) => val, (name) => html` + ? c$2([this.inputIconName], (val) => val, (name) => u$3` <${this.iconTag} class="accentIcon" category="payment" @@ -1110,7 +3804,7 @@ class AuroInput extends BaseInput { } ${this.type === 'month-day-year' || this.type === 'month-year' || this.type === 'year-month-day' || this.type === 'month-fullYear' - ? html` + ? u$3` <${this.iconTag} class="accentIcon" category="interface" @@ -1121,7 +3815,7 @@ class AuroInput extends BaseInput { : undefined }
-
@@ -1156,18 +3850,17 @@ class AuroInput extends BaseInput { class="notificationIcons" part="notificationIcons" ?hasValue="${this.hasValue}"> - ${this.validity && this.validity !== 'valid' ? html` + ${this.validity && this.validity !== 'valid' ? u$3`
<${this.iconTag} category="alert" name="error-stroke" - customSize error>
` : undefined} - ${this.hasValue ? html` - ${this.type === 'password' ? html` + ${this.hasValue ? u$3` + ${this.type === 'password' ? u$3`
<${this.buttonTag} variant="flat" @@ -1178,21 +3871,19 @@ class AuroInput extends BaseInput { <${this.iconTag} category="interface" name="hide-password-stroke" - customSize customColor ?hidden=${!this.showPassword}> <${this.iconTag} category="interface" name="view-password-stroke" - customSize customColor ?hidden=${this.showPassword}>
` : undefined} - ${!this.disabled && !this.readonly ? html` + ${!this.disabled && !this.readonly ? u$3`
<${this.buttonTag} variant="flat" @@ -1204,7 +3895,7 @@ class AuroInput extends BaseInput { customColor category="interface" name="x-lg" - customSize> + >
@@ -1214,11 +3905,11 @@ class AuroInput extends BaseInput {
${!this.validity || this.validity === undefined || this.validity === 'valid' - ? html` + ? u$3`

${this.getHelpText(this.type)}

` - : html` + : u$3` ` diff --git a/package-lock.json b/package-lock.json index 22a6742..66c824a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,16 @@ { "name": "@aurodesignsystem/auro-input", - "version": "4.1.1", + "version": "4.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@aurodesignsystem/auro-input", - "version": "4.1.1", + "version": "4.1.2", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { - "@aurodesignsystem/auro-button": "^8.1.2", + "@aurodesignsystem/auro-button": "^8.1.3", "@aurodesignsystem/auro-formvalidation": "^1.0.4", "@aurodesignsystem/auro-icon": "^6.0.2", "@aurodesignsystem/auro-library": "~2.8", @@ -21,7 +21,7 @@ "devDependencies": { "@alaskaairux/icons": "^4.44.1", "@aurodesignsystem/design-tokens": "^4.10.1", - "@aurodesignsystem/eslint-config": "^1.3.2", + "@aurodesignsystem/eslint-config": "^1.3.3", "@aurodesignsystem/webcorestylesheets": "^5.1.2", "@commitlint/cli": "^19.5.0", "@commitlint/config-conventional": "^19.5.0", @@ -37,10 +37,10 @@ "backstopjs": "^6.3.25", "compression": "^1.7.4", "concat": "^1.0.3", - "concurrently": "^9.0.1", + "concurrently": "^9.1.0", "copyfiles": "^2.4.1", "core-js": "^3.39.0", - "eslint": "^9.13.0", + "eslint": "^9.14.0", "eslint-plugin-jsdoc": "^50.4.3", "husky": "^9.1.6", "lodash": "^4.17.21", @@ -48,11 +48,11 @@ "nodemon": "^3.1.7", "npm-run-all": "^4.1.5", "postcss": "^8.4.47", - "postcss-custom-properties": "^14.0.3", + "postcss-custom-properties": "^14.0.4", "postcss-discard-comments": "^7.0.3", - "rollup": "^4.24.3", + "rollup": "^4.24.4", "rollup-plugin-serve": "^2.0.3", - "sass": "^1.80.5", + "sass": "^1.80.6", "semantic-release": "^24.2.0", "sinon": "^19.0.2", "stylelint": "^16.10.0", @@ -167,9 +167,9 @@ } }, "node_modules/@aurodesignsystem/auro-button": { - "version": "8.1.2", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-button/-/auro-button-8.1.2.tgz", - "integrity": "sha512-8kScf8DiwSdwaEHrrZrbh6LCek4xLz7ORVim0Wo58WWEIjhS+dMpV/V5azu2xyInEmJX/Lzqyrv/DzVYCk7fyg==", + "version": "8.1.3", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/auro-button/-/auro-button-8.1.3.tgz", + "integrity": "sha512-2xLCV41nlLzoV7X8scY+pVjDu3dIRNxJrJ0o+GvFz+PETSf7Ybt1OcTYHlgTwBzV/hV5IOKufqQALnNdhQaVOA==", "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { @@ -390,7 +390,6 @@ "resolved": "https://registry.npmjs.org/@aurodesignsystem/design-tokens/-/design-tokens-4.10.1.tgz", "integrity": "sha512-NH0ckRkzJhzDWTER5Bah8xLycykNpZOKh9h7XmmM9mcZ2OqTnHJr6rKysGncRpmORX79zz5paTeCtDXF8S6ktg==", "hasInstallScript": true, - "license": "Apache-2.0", "dependencies": { "chalk": "^5.3.0" }, @@ -399,16 +398,16 @@ } }, "node_modules/@aurodesignsystem/eslint-config": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@aurodesignsystem/eslint-config/-/eslint-config-1.3.2.tgz", - "integrity": "sha512-z27s4u6M4Z+ZLYhTgnurhqkfnsyfgCf4sBOjNw7sSS+B61zaj06TlUmt+WZbdKX9VwSWK6V5KKSQ8Mgw+k7jvQ==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@aurodesignsystem/eslint-config/-/eslint-config-1.3.3.tgz", + "integrity": "sha512-pCiNMAoQVVA8yOjDD/J/D+qwPb+/7knTbucXHJn5GDJM5ySdyGP5cGe/F7XMHE3Yo2hZzevGjAvM6Xo3qSRjkQ==", "dev": true, "hasInstallScript": true, "license": "Apache-2.0", "dependencies": { "chalk": "^4.1.1", "eslint-plugin-detect-bad-words": "^1.0.7", - "eslint-plugin-jsdoc": "^48.8.3", + "eslint-plugin-jsdoc": "^50.4.3", "eslint-plugin-lit": "^1.14.0", "eslint-plugin-lit-a11y": "^4.1.4" }, @@ -416,21 +415,6 @@ "node": "^18 || ^20" } }, - "node_modules/@aurodesignsystem/eslint-config/node_modules/@es-joy/jsdoccomment": { - "version": "0.46.0", - "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.46.0.tgz", - "integrity": "sha512-C3Axuq1xd/9VqFZpW4YAzOx5O9q/LP46uIQy/iNDpHG3fmPa6TBtvfglMCs3RBiBxAIi0Go97r8+jvTt55XMyQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "comment-parser": "1.4.1", - "esquery": "^1.6.0", - "jsdoc-type-pratt-parser": "~4.0.0" - }, - "engines": { - "node": ">=16" - } - }, "node_modules/@aurodesignsystem/eslint-config/node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -484,55 +468,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@aurodesignsystem/eslint-config/node_modules/eslint-plugin-jsdoc": { - "version": "48.11.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-48.11.0.tgz", - "integrity": "sha512-d12JHJDPNo7IFwTOAItCeJY1hcqoIxE0lHA8infQByLilQ9xkqrRa6laWCnsuCrf+8rUnvxXY1XuTbibRBNylA==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "@es-joy/jsdoccomment": "~0.46.0", - "are-docs-informative": "^0.0.2", - "comment-parser": "1.4.1", - "debug": "^4.3.5", - "escape-string-regexp": "^4.0.0", - "espree": "^10.1.0", - "esquery": "^1.6.0", - "parse-imports": "^2.1.1", - "semver": "^7.6.3", - "spdx-expression-parse": "^4.0.0", - "synckit": "^0.9.1" - }, - "engines": { - "node": ">=18" - }, - "peerDependencies": { - "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0" - } - }, - "node_modules/@aurodesignsystem/eslint-config/node_modules/jsdoc-type-pratt-parser": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.0.0.tgz", - "integrity": "sha512-YtOli5Cmzy3q4dP26GraSOeAhqecewG04hoO8DY56CH4KJ9Fvv5qKWUCCo3HZob7esJQHCv6/+bnTy72xZZaVQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12.0.0" - } - }, - "node_modules/@aurodesignsystem/eslint-config/node_modules/semver": { - "version": "7.6.3", - "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", - "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", - "dev": true, - "license": "ISC", - "bin": { - "semver": "bin/semver.js" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/@aurodesignsystem/eslint-config/node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -564,14 +499,13 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", - "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.25.9.tgz", + "integrity": "sha512-z88xeGxnzehn2sqZ8UdGQEvYErF1odv2CftxInpSYJt6uHuPe9YjahKZITGs3l5LeI9d2ROG+obuDAoSlqbNfQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.25.9", - "js-tokens": "^4.0.0", + "@babel/highlight": "^7.25.9", "picocolors": "^1.0.0" }, "engines": { @@ -579,9 +513,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz", - "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.25.9.tgz", + "integrity": "sha512-yD+hEuJ/+wAJ4Ox2/rpNv5HIuPG82x3ZlQvYVn8iYCprdxzE7P1udpGF1jyjQVBU4dgznN+k2h103vxZ7NdPyw==", "dev": true, "license": "MIT", "peer": true, @@ -590,23 +524,23 @@ } }, "node_modules/@babel/core": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz", - "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.25.9.tgz", + "integrity": "sha512-WYvQviPw+Qyib0v92AwNIrdLISTp7RfDkM7bPqBvpbnhY4wq8HvHBZREVdYDXk98C8BkOIVnHAY3yvj7AVISxQ==", "dev": true, "license": "MIT", "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", - "@babel/code-frame": "^7.26.0", - "@babel/generator": "^7.26.0", + "@babel/code-frame": "^7.25.9", + "@babel/generator": "^7.25.9", "@babel/helper-compilation-targets": "^7.25.9", - "@babel/helper-module-transforms": "^7.26.0", - "@babel/helpers": "^7.26.0", - "@babel/parser": "^7.26.0", + "@babel/helper-module-transforms": "^7.25.9", + "@babel/helpers": "^7.25.9", + "@babel/parser": "^7.25.9", "@babel/template": "^7.25.9", "@babel/traverse": "^7.25.9", - "@babel/types": "^7.26.0", + "@babel/types": "^7.25.9", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -622,15 +556,14 @@ } }, "node_modules/@babel/generator": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz", - "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.25.9.tgz", + "integrity": "sha512-omlUGkr5EaoIJrhLf9CJ0TvjBRpd9+AXRG//0GEQ9THSo8wPiTlbpy1/Ow8ZTrbXpjd9FHXfbFQx32I04ht0FA==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@babel/parser": "^7.26.2", - "@babel/types": "^7.26.0", + "@babel/types": "^7.25.9", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" @@ -673,14 +606,15 @@ } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz", - "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.25.9.tgz", + "integrity": "sha512-TvLZY/F3+GvdRYFZFyxMvnsKi+4oJdgZzU3BoGN9Uc2d9C6zfNwJcKKhjqLAhK8i46mv93jsO74fDh3ih6rpHA==", "dev": true, "license": "MIT", "peer": true, "dependencies": { "@babel/helper-module-imports": "^7.25.9", + "@babel/helper-simple-access": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9", "@babel/traverse": "^7.25.9" }, @@ -691,6 +625,21 @@ "@babel/core": "^7.0.0" } }, + "node_modules/@babel/helper-simple-access": { + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.25.9.tgz", + "integrity": "sha512-c6WHXuiaRsJTyHYLJV75t9IqsmTbItYfdj99PnzYGQZkYKvan5/2jKJ7gu31J3/BJ/A18grImSPModuyG/Eo0Q==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@babel/traverse": "^7.25.9", + "@babel/types": "^7.25.9" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-string-parser": { "version": "7.25.9", "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", @@ -724,29 +673,93 @@ } }, "node_modules/@babel/helpers": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz", - "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.25.9.tgz", + "integrity": "sha512-oKWp3+usOJSzDZOucZUAMayhPz/xVjzymyDzUN8dk0Wd3RWMlGLXi07UCQ/CgQVb8LvXx3XBajJH4XGgkt7H7g==", "dev": true, "license": "MIT", "peer": true, "dependencies": { "@babel/template": "^7.25.9", - "@babel/types": "^7.26.0" + "@babel/types": "^7.25.9" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/highlight": { + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.25.9.tgz", + "integrity": "sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.25.9", + "chalk": "^2.4.2", + "js-tokens": "^4.0.0", + "picocolors": "^1.0.0" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/highlight/node_modules/chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/@babel/highlight/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/@babel/highlight/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/parser": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz", - "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.9.tgz", + "integrity": "sha512-aI3jjAAO1fh7vY/pBGsn1i9LDbRP43+asrRlkPuTXW5yHXtd1NgTEMudbBoDDxrf1daEEfPJqR+JBMakzrR4Dg==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@babel/types": "^7.26.0" + "@babel/types": "^7.25.9" }, "bin": { "parser": "bin/babel-parser.js" @@ -792,9 +805,9 @@ } }, "node_modules/@babel/types": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz", - "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==", + "version": "7.25.9", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.9.tgz", + "integrity": "sha512-OwS2CM5KocvQ/k7dFJa8i5bNGJP0hXWfVCfDkqRFP1IreH1JDC7wG6eCYCi0+McbfT8OR/kNqsI0UU0xP9H6PQ==", "dev": true, "license": "MIT", "peer": true, @@ -1088,9 +1101,9 @@ } }, "node_modules/@csstools/cascade-layer-name-parser": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-2.0.3.tgz", - "integrity": "sha512-KUcKk2oe7666aaeY+yxhy5TB0AN5x2Pi/ZJ23fbO8A0TEcLpA+VhVIw9s+6hTsAQHr8Fqc8p4RClsxxsmuIn1A==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-2.0.4.tgz", + "integrity": "sha512-7DFHlPuIxviKYZrOiwVU/PiHLm3lLUR23OMuEEtfEOQTOp9hzQ2JjdY6X5H18RVuUPJqSCI+qNnD5iOLMVE0bA==", "dev": true, "funding": [ { @@ -1102,19 +1115,18 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.3", - "@csstools/css-tokenizer": "^3.0.2" + "@csstools/css-parser-algorithms": "^3.0.4", + "@csstools/css-tokenizer": "^3.0.3" } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.3.tgz", - "integrity": "sha512-15WQTALDyxAwSgAvLt7BksAssiSrNNhTv4zM7qX9U6R7FtpNskVVakzWQlYODlwPwXhGpKPmB10LM943pxMe7w==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz", + "integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==", "dev": true, "funding": [ { @@ -1126,12 +1138,11 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.2" + "@csstools/css-tokenizer": "^3.0.3" } }, "node_modules/@csstools/css-tokenizer": { @@ -1263,20 +1274,17 @@ } }, "node_modules/@eslint-community/eslint-utils": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.1.tgz", - "integrity": "sha512-s3O3waFUrMV8P/XaF/+ZTp1X9XBZW1a4B97ZnjQF2KYWaFD2A8KyFBsrsfSjEmjn3RGWAIuvlneuZm3CUK3jbA==", + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", + "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==", "dev": true, "license": "MIT", "dependencies": { - "eslint-visitor-keys": "^3.4.3" + "eslint-visitor-keys": "^3.3.0" }, "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" }, - "funding": { - "url": "https://opencollective.com/eslint" - }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } @@ -1391,9 +1399,9 @@ "license": "MIT" }, "node_modules/@eslint/js": { - "version": "9.13.0", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.13.0.tgz", - "integrity": "sha512-IFLyoY4d72Z5y/6o/BazFBezupzI/taV8sGumxTAVw3lXG9A6md1Dc34T9s1FoD/an9pJH8RHbAxsaEbBed9lA==", + "version": "9.14.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz", + "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==", "dev": true, "license": "MIT", "engines": { @@ -1411,9 +1419,9 @@ } }, "node_modules/@eslint/plugin-kit": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.2.tgz", - "integrity": "sha512-CXtq5nR4Su+2I47WPOlWud98Y5Lv8Kyxp2ukhgFx/eW6Blm18VXJO5WuQylPugRo8nbluoi6GvvxBLqHcvqUUw==", + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.1.tgz", + "integrity": "sha512-HFZ4Mp26nbWk9d/BpvP0YNL6W4UoZF0VFcTw/aPPA8RpOxeFQgK+ClABGgAUXs9Y/RGX/l1vOmrqz1MQt9MNuw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -1464,6 +1472,20 @@ "node": ">=18.18.0" } }, + "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz", + "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, "node_modules/@humanwhocodes/module-importer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", @@ -1479,9 +1501,9 @@ } }, "node_modules/@humanwhocodes/retry": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz", - "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==", + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz", + "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==", "dev": true, "license": "Apache-2.0", "engines": { @@ -1832,10 +1854,12 @@ } }, "node_modules/@parcel/watcher": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.4.1.tgz", - "integrity": "sha512-HNjmfLQEVRZmHRET336f20H/8kOozUGwk7yajvsonjNxbj2wBTK1WsQuHkD5yYh9RxFGL2EyDHryOihOwUoKDA==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz", + "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==", + "hasInstallScript": true, "license": "MIT", + "optional": true, "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", @@ -1850,24 +1874,25 @@ "url": "https://opencollective.com/parcel" }, "optionalDependencies": { - "@parcel/watcher-android-arm64": "2.4.1", - "@parcel/watcher-darwin-arm64": "2.4.1", - "@parcel/watcher-darwin-x64": "2.4.1", - "@parcel/watcher-freebsd-x64": "2.4.1", - "@parcel/watcher-linux-arm-glibc": "2.4.1", - "@parcel/watcher-linux-arm64-glibc": "2.4.1", - "@parcel/watcher-linux-arm64-musl": "2.4.1", - "@parcel/watcher-linux-x64-glibc": "2.4.1", - "@parcel/watcher-linux-x64-musl": "2.4.1", - "@parcel/watcher-win32-arm64": "2.4.1", - "@parcel/watcher-win32-ia32": "2.4.1", - "@parcel/watcher-win32-x64": "2.4.1" + "@parcel/watcher-android-arm64": "2.5.0", + "@parcel/watcher-darwin-arm64": "2.5.0", + "@parcel/watcher-darwin-x64": "2.5.0", + "@parcel/watcher-freebsd-x64": "2.5.0", + "@parcel/watcher-linux-arm-glibc": "2.5.0", + "@parcel/watcher-linux-arm-musl": "2.5.0", + "@parcel/watcher-linux-arm64-glibc": "2.5.0", + "@parcel/watcher-linux-arm64-musl": "2.5.0", + "@parcel/watcher-linux-x64-glibc": "2.5.0", + "@parcel/watcher-linux-x64-musl": "2.5.0", + "@parcel/watcher-win32-arm64": "2.5.0", + "@parcel/watcher-win32-ia32": "2.5.0", + "@parcel/watcher-win32-x64": "2.5.0" } }, "node_modules/@parcel/watcher-android-arm64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.4.1.tgz", - "integrity": "sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz", + "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==", "cpu": [ "arm64" ], @@ -1885,9 +1910,9 @@ } }, "node_modules/@parcel/watcher-darwin-arm64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.1.tgz", - "integrity": "sha512-ln41eihm5YXIY043vBrrHfn94SIBlqOWmoROhsMVTSXGh0QahKGy77tfEywQ7v3NywyxBBkGIfrWRHm0hsKtzA==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz", + "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==", "cpu": [ "arm64" ], @@ -1905,9 +1930,9 @@ } }, "node_modules/@parcel/watcher-darwin-x64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.4.1.tgz", - "integrity": "sha512-yrw81BRLjjtHyDu7J61oPuSoeYWR3lDElcPGJyOvIXmor6DEo7/G2u1o7I38cwlcoBHQFULqF6nesIX3tsEXMg==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz", + "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==", "cpu": [ "x64" ], @@ -1925,9 +1950,9 @@ } }, "node_modules/@parcel/watcher-freebsd-x64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.4.1.tgz", - "integrity": "sha512-TJa3Pex/gX3CWIx/Co8k+ykNdDCLx+TuZj3f3h7eOjgpdKM+Mnix37RYsYU4LHhiYJz3DK5nFCCra81p6g050w==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz", + "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==", "cpu": [ "x64" ], @@ -1945,9 +1970,29 @@ } }, "node_modules/@parcel/watcher-linux-arm-glibc": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.4.1.tgz", - "integrity": "sha512-4rVYDlsMEYfa537BRXxJ5UF4ddNwnr2/1O4MHM5PjI9cvV2qymvhwZSFgXqbS8YoTk5i/JR0L0JDs69BUn45YA==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz", + "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==", + "cpu": [ + "arm" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz", + "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==", "cpu": [ "arm" ], @@ -1965,9 +2010,9 @@ } }, "node_modules/@parcel/watcher-linux-arm64-glibc": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.4.1.tgz", - "integrity": "sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz", + "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==", "cpu": [ "arm64" ], @@ -1985,9 +2030,9 @@ } }, "node_modules/@parcel/watcher-linux-arm64-musl": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.4.1.tgz", - "integrity": "sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz", + "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==", "cpu": [ "arm64" ], @@ -2005,9 +2050,9 @@ } }, "node_modules/@parcel/watcher-linux-x64-glibc": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.4.1.tgz", - "integrity": "sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz", + "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==", "cpu": [ "x64" ], @@ -2025,9 +2070,9 @@ } }, "node_modules/@parcel/watcher-linux-x64-musl": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.4.1.tgz", - "integrity": "sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz", + "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==", "cpu": [ "x64" ], @@ -2045,9 +2090,9 @@ } }, "node_modules/@parcel/watcher-win32-arm64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.4.1.tgz", - "integrity": "sha512-Uq2BPp5GWhrq/lcuItCHoqxjULU1QYEcyjSO5jqqOK8RNFDBQnenMMx4gAl3v8GiWa59E9+uDM7yZ6LxwUIfRg==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz", + "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==", "cpu": [ "arm64" ], @@ -2065,9 +2110,9 @@ } }, "node_modules/@parcel/watcher-win32-ia32": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.4.1.tgz", - "integrity": "sha512-maNRit5QQV2kgHFSYwftmPBxiuK5u4DXjbXx7q6eKjq5dsLXZ4FJiVvlcw35QXzk0KrUecJmuVFbj4uV9oYrcw==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz", + "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==", "cpu": [ "ia32" ], @@ -2085,9 +2130,9 @@ } }, "node_modules/@parcel/watcher-win32-x64": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.4.1.tgz", - "integrity": "sha512-+DvS92F9ezicfswqrvIRM2njcYJbd5mb9CUgtrHCHmvn7pPPa+nMDRu1o1bYYz/l5IB2NVGNJWiH7h1E58IF2A==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz", + "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==", "cpu": [ "x64" ], @@ -2224,15 +2269,15 @@ } }, "node_modules/@rollup/pluginutils": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz", - "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==", + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.2.tgz", + "integrity": "sha512-/FIdS3PyZ39bjZlwqFnWqCOVnW7o963LtKMwQOD0NhQqw22gSr2YY1afu3FxRip4ZCZNsD5jq6Aaz6QV3D/Njw==", "dev": true, "license": "MIT", "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", - "picomatch": "^4.0.2" + "picomatch": "^2.3.1" }, "engines": { "node": ">=14.0.0" @@ -2247,9 +2292,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.3.tgz", - "integrity": "sha512-ufb2CH2KfBWPJok95frEZZ82LtDl0A6QKTa8MoM+cWwDZvVGl5/jNb79pIhRvAalUu+7LD91VYR0nwRD799HkQ==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.24.4.tgz", + "integrity": "sha512-jfUJrFct/hTA0XDM5p/htWKoNNTbDLY0KRwEt6pyOA6k2fmk0WVwl65PdUdJZgzGEHWx+49LilkcSaumQRyNQw==", "cpu": [ "arm" ], @@ -2261,9 +2306,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.3.tgz", - "integrity": "sha512-iAHpft/eQk9vkWIV5t22V77d90CRofgR2006UiCjHcHJFVI1E0oBkQIAbz+pLtthFw3hWEmVB4ilxGyBf48i2Q==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.24.4.tgz", + "integrity": "sha512-j4nrEO6nHU1nZUuCfRKoCcvh7PIywQPUCBa2UsootTHvTHIoIu2BzueInGJhhvQO/2FTRdNYpf63xsgEqH9IhA==", "cpu": [ "arm64" ], @@ -2275,23 +2320,22 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.3.tgz", - "integrity": "sha512-QPW2YmkWLlvqmOa2OwrfqLJqkHm7kJCIMq9kOz40Zo9Ipi40kf9ONG5Sz76zszrmIZZ4hgRIkez69YnTHgEz1w==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.24.4.tgz", + "integrity": "sha512-GmU/QgGtBTeraKyldC7cDVVvAJEOr3dFLKneez/n7BvX57UdhOqDsVwzU7UOnYA7AAOt+Xb26lk79PldDHgMIQ==", "cpu": [ "arm64" ], "dev": true, - "license": "MIT", "optional": true, "os": [ "darwin" ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.3.tgz", - "integrity": "sha512-KO0pN5x3+uZm1ZXeIfDqwcvnQ9UEGN8JX5ufhmgH5Lz4ujjZMAnxQygZAVGemFWn+ZZC0FQopruV4lqmGMshow==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.24.4.tgz", + "integrity": "sha512-N6oDBiZCBKlwYcsEPXGDE4g9RoxZLK6vT98M8111cW7VsVJFpNEqvJeIPfsCzbf0XEakPslh72X0gnlMi4Ddgg==", "cpu": [ "x64" ], @@ -2303,9 +2347,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.3.tgz", - "integrity": "sha512-CsC+ZdIiZCZbBI+aRlWpYJMSWvVssPuWqrDy/zi9YfnatKKSLFCe6fjna1grHuo/nVaHG+kiglpRhyBQYRTK4A==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.24.4.tgz", + "integrity": "sha512-py5oNShCCjCyjWXCZNrRGRpjWsF0ic8f4ieBNra5buQz0O/U6mMXCpC1LvrHuhJsNPgRt36tSYMidGzZiJF6mw==", "cpu": [ "arm64" ], @@ -2317,9 +2361,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.3.tgz", - "integrity": "sha512-F0nqiLThcfKvRQhZEzMIXOQG4EeX61im61VYL1jo4eBxv4aZRmpin6crnBJQ/nWnCsjH5F6J3W6Stdm0mBNqBg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.24.4.tgz", + "integrity": "sha512-L7VVVW9FCnTTp4i7KrmHeDsDvjB4++KOBENYtNYAiYl96jeBThFfhP6HVxL74v4SiZEVDH/1ILscR5U9S4ms4g==", "cpu": [ "x64" ], @@ -2331,9 +2375,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.3.tgz", - "integrity": "sha512-KRSFHyE/RdxQ1CSeOIBVIAxStFC/hnBgVcaiCkQaVC+EYDtTe4X7z5tBkFyRoBgUGtB6Xg6t9t2kulnX6wJc6A==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.24.4.tgz", + "integrity": "sha512-10ICosOwYChROdQoQo589N5idQIisxjaFE/PAnX2i0Zr84mY0k9zul1ArH0rnJ/fpgiqfu13TFZR5A5YJLOYZA==", "cpu": [ "arm" ], @@ -2345,9 +2389,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.3.tgz", - "integrity": "sha512-h6Q8MT+e05zP5BxEKz0vi0DhthLdrNEnspdLzkoFqGwnmOzakEHSlXfVyA4HJ322QtFy7biUAVFPvIDEDQa6rw==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.24.4.tgz", + "integrity": "sha512-ySAfWs69LYC7QhRDZNKqNhz2UKN8LDfbKSMAEtoEI0jitwfAG2iZwVqGACJT+kfYvvz3/JgsLlcBP+WWoKCLcw==", "cpu": [ "arm" ], @@ -2359,9 +2403,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.3.tgz", - "integrity": "sha512-fKElSyXhXIJ9pqiYRqisfirIo2Z5pTTve5K438URf08fsypXrEkVmShkSfM8GJ1aUyvjakT+fn2W7Czlpd/0FQ==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.24.4.tgz", + "integrity": "sha512-uHYJ0HNOI6pGEeZ/5mgm5arNVTI0nLlmrbdph+pGXpC9tFHFDQmDMOEqkmUObRfosJqpU8RliYoGz06qSdtcjg==", "cpu": [ "arm64" ], @@ -2373,9 +2417,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.3.tgz", - "integrity": "sha512-YlddZSUk8G0px9/+V9PVilVDC6ydMz7WquxozToozSnfFK6wa6ne1ATUjUvjin09jp34p84milxlY5ikueoenw==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.24.4.tgz", + "integrity": "sha512-38yiWLemQf7aLHDgTg85fh3hW9stJ0Muk7+s6tIkSUOMmi4Xbv5pH/5Bofnsb6spIwD5FJiR+jg71f0CH5OzoA==", "cpu": [ "arm64" ], @@ -2387,9 +2431,9 @@ ] }, "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.3.tgz", - "integrity": "sha512-yNaWw+GAO8JjVx3s3cMeG5Esz1cKVzz8PkTJSfYzE5u7A+NvGmbVFEHP+BikTIyYWuz0+DX9kaA3pH9Sqxp69g==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.24.4.tgz", + "integrity": "sha512-q73XUPnkwt9ZNF2xRS4fvneSuaHw2BXuV5rI4cw0fWYVIWIBeDZX7c7FWhFQPNTnE24172K30I+dViWRVD9TwA==", "cpu": [ "ppc64" ], @@ -2401,9 +2445,9 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.3.tgz", - "integrity": "sha512-lWKNQfsbpv14ZCtM/HkjCTm4oWTKTfxPmr7iPfp3AHSqyoTz5AgLemYkWLwOBWc+XxBbrU9SCokZP0WlBZM9lA==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.24.4.tgz", + "integrity": "sha512-Aie/TbmQi6UXokJqDZdmTJuZBCU3QBDA8oTKRGtd4ABi/nHgXICulfg1KI6n9/koDsiDbvHAiQO3YAUNa/7BCw==", "cpu": [ "riscv64" ], @@ -2415,9 +2459,9 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.3.tgz", - "integrity": "sha512-HoojGXTC2CgCcq0Woc/dn12wQUlkNyfH0I1ABK4Ni9YXyFQa86Fkt2Q0nqgLfbhkyfQ6003i3qQk9pLh/SpAYw==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.24.4.tgz", + "integrity": "sha512-P8MPErVO/y8ohWSP9JY7lLQ8+YMHfTI4bAdtCi3pC2hTeqFJco2jYspzOzTUB8hwUWIIu1xwOrJE11nP+0JFAQ==", "cpu": [ "s390x" ], @@ -2429,9 +2473,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.3.tgz", - "integrity": "sha512-mnEOh4iE4USSccBOtcrjF5nj+5/zm6NcNhbSEfR3Ot0pxBwvEn5QVUXcuOwwPkapDtGZ6pT02xLoPaNv06w7KQ==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.24.4.tgz", + "integrity": "sha512-K03TljaaoPK5FOyNMZAAEmhlyO49LaE4qCsr0lYHUKyb6QacTNF9pnfPpXnFlFD3TXuFbFbz7tJ51FujUXkXYA==", "cpu": [ "x64" ], @@ -2443,9 +2487,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.3.tgz", - "integrity": "sha512-rMTzawBPimBQkG9NKpNHvquIUTQPzrnPxPbCY1Xt+mFkW7pshvyIS5kYgcf74goxXOQk0CP3EoOC1zcEezKXhw==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.24.4.tgz", + "integrity": "sha512-VJYl4xSl/wqG2D5xTYncVWW+26ICV4wubwN9Gs5NrqhJtayikwCXzPL8GDsLnaLU3WwhQ8W02IinYSFJfyo34Q==", "cpu": [ "x64" ], @@ -2457,9 +2501,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.3.tgz", - "integrity": "sha512-2lg1CE305xNvnH3SyiKwPVsTVLCg4TmNCF1z7PSHX2uZY2VbUpdkgAllVoISD7JO7zu+YynpWNSKAtOrX3AiuA==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.24.4.tgz", + "integrity": "sha512-ku2GvtPwQfCqoPFIJCqZ8o7bJcj+Y54cZSr43hHca6jLwAiCbZdBUOrqE6y29QFajNAzzpIOwsckaTFmN6/8TA==", "cpu": [ "arm64" ], @@ -2471,9 +2515,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.3.tgz", - "integrity": "sha512-9SjYp1sPyxJsPWuhOCX6F4jUMXGbVVd5obVpoVEi8ClZqo52ViZewA6eFz85y8ezuOA+uJMP5A5zo6Oz4S5rVQ==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.24.4.tgz", + "integrity": "sha512-V3nCe+eTt/W6UYNr/wGvO1fLpHUrnlirlypZfKCT1fG6hWfqhPgQV/K/mRBXBpxc0eKLIF18pIOFVPh0mqHjlg==", "cpu": [ "ia32" ], @@ -2485,9 +2529,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.3.tgz", - "integrity": "sha512-HGZgRFFYrMrP3TJlq58nR1xy8zHKId25vhmm5S9jETEfDf6xybPxsavFTJaufe2zgOGYJBskGlj49CwtEuFhWQ==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.24.4.tgz", + "integrity": "sha512-LTw1Dfd0mBIEqUVCxbvTE/LLo+9ZxVC9k99v1v4ahg9Aak6FpqOfNu5kRkeTAn0wphoC4JU7No1/rL+bBCEwhg==", "cpu": [ "x64" ], @@ -2623,9 +2667,9 @@ } }, "node_modules/@semantic-release/github": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/@semantic-release/github/-/github-11.0.0.tgz", - "integrity": "sha512-Uon6G6gJD8U1JNvPm7X0j46yxNRJ8Ui6SgK4Zw5Ktu8RgjEft3BGn+l/RX1TTzhhO3/uUcKuqM+/9/ETFxWS/Q==", + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/@semantic-release/github/-/github-11.0.1.tgz", + "integrity": "sha512-Z9cr0LgU/zgucbT9cksH0/pX9zmVda9hkDPcgIE0uvjMQ8w/mElDivGjx1w1pEQ+MuQJ5CBq3VCF16S6G4VH3A==", "dev": true, "license": "MIT", "dependencies": { @@ -2883,9 +2927,9 @@ } }, "node_modules/@semantic-release/npm/node_modules/execa": { - "version": "9.5.1", - "resolved": "https://registry.npmjs.org/execa/-/execa-9.5.1.tgz", - "integrity": "sha512-QY5PPtSonnGwhhHDNI7+3RvY285c7iuJFFB+lU+oEzMY/gEGJ808owqJsrr8Otd1E/x07po1LkUBmdAc5duPAg==", + "version": "9.4.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-9.4.1.tgz", + "integrity": "sha512-5eo/BRqZm3GYce+1jqX/tJ7duA2AnE39i88fuedNFUV8XxGxUpF3aWkBRfbUcjV49gCkvS/pzc0YrCPhaIewdg==", "dev": true, "license": "MIT", "dependencies": { @@ -3174,9 +3218,9 @@ } }, "node_modules/@sinonjs/fake-timers": { - "version": "13.0.5", - "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-13.0.5.tgz", - "integrity": "sha512-36/hTbH2uaWuGVERyC6da9YwGWnzUZXuPro/F2LfsdOsLnCojz/iSH8MxUt/FD2S5XBSVPhmArFUXcpCQ2Hkiw==", + "version": "13.0.4", + "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-13.0.4.tgz", + "integrity": "sha512-wpUq+QiKxrWk7U2pdvNSY9fNX62/k+7eEdlQMO0A3rU8tQ+vvzY/WzBhMz+GbQlATXZlXWYQqFWNFcn1SVvThA==", "dev": true, "license": "BSD-3-Clause", "dependencies": { @@ -3408,6 +3452,30 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/eslint": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz", + "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@types/estree": "*", + "@types/json-schema": "*" + } + }, + "node_modules/@types/eslint-scope": { + "version": "3.7.7", + "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz", + "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==", + "dev": true, + "license": "MIT", + "peer": true, + "dependencies": { + "@types/eslint": "*", + "@types/estree": "*" + } + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -3429,9 +3497,9 @@ } }, "node_modules/@types/express-serve-static-core": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.1.tgz", - "integrity": "sha512-CRICJIl0N5cXDONAdlTv5ShATZ4HEwk6kDDIW2/w9qOWKg+NU/5F8wYRWCrONad0/UKkloNSmmyN/wX4rtpbVA==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.0.tgz", + "integrity": "sha512-AbXMTZGt40T+KON9/Fdxx0B2WK5hsgxcfXJLr5bFpZ7b4JCex2WyQPTEKdXqfHiY5nKKBScZ7yCoO6Pvgxfvnw==", "dev": true, "license": "MIT", "dependencies": { @@ -3461,9 +3529,9 @@ } }, "node_modules/@types/http-assert": { - "version": "1.5.6", - "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.6.tgz", - "integrity": "sha512-TTEwmtjgVbYAzZYWyeHPrrtWnfVkm8tQkP8P21uQifPgMRgjrow3XDEYqucuC8SKZJT7pUnhU/JymvjggxO9vw==", + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@types/http-assert/-/http-assert-1.5.5.tgz", + "integrity": "sha512-4+tE/lwdAahgZT1g30Jkdm9PzFRde0xwxBNUyRsCitRvCQB90iuA2uJYdUnhnANRcqGXaWOGY4FEoxeElNAK2g==", "dev": true, "license": "MIT" }, @@ -3565,12 +3633,12 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "22.8.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.8.4.tgz", - "integrity": "sha512-SpNNxkftTJOPk0oN+y2bIqurEXHTA2AOZ3EJDDKeJ5VzkvvORSvmQXGQarcOzWV1ac7DCaPBEdMDxBsM+d8jWw==", + "version": "22.9.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz", + "integrity": "sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==", "license": "MIT", "dependencies": { - "undici-types": "~6.19.8" + "undici-types": "~6.19.2" } }, "node_modules/@types/normalize-package-data": { @@ -3588,9 +3656,9 @@ "license": "MIT" }, "node_modules/@types/qs": { - "version": "6.9.16", - "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.16.tgz", - "integrity": "sha512-7i+zxXdPD0T4cKDuxCUXJ4wHcsJLwENa6Z3dCu8cfCK743OGy5Nu1RmAGqDPsoTDINVEcdXKRvR/zre+P2Ku1A==", + "version": "6.9.17", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.17.tgz", + "integrity": "sha512-rX4/bPcfmvxHDv0XjfJELTTr+iB+tn032nPILqHm5wbthUUUuVtNGGqzhya9XUxjTP8Fpr0qYgSZZKxGY++svQ==", "license": "MIT" }, "node_modules/@types/range-parser": { @@ -3752,9 +3820,9 @@ } }, "node_modules/@web/dev-server-core": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.3.tgz", - "integrity": "sha512-GS+Ok6HiqNZOsw2oEv5V2OISZ2s/6icJodyGjUuD3RChr0G5HiESbKf2K8mZV4shTz9sRC9KSQf8qvno2gPKrQ==", + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@web/dev-server-core/-/dev-server-core-0.7.4.tgz", + "integrity": "sha512-nHSNrJ1J9GjmSceKNHpWRMjvpfE2NTV9EYUffPIr7j0sIV59gK7NI/4+9slotJ/ODXw0+e1gSeJshTOhjjVNxQ==", "dev": true, "license": "MIT", "dependencies": { @@ -3791,19 +3859,6 @@ "node": ">=16.14" } }, - "node_modules/@web/dev-server-core/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/@web/dev-server-rollup": { "version": "0.6.4", "resolved": "https://registry.npmjs.org/@web/dev-server-rollup/-/dev-server-rollup-0.6.4.tgz", @@ -3937,19 +3992,6 @@ "node": ">=18.0.0" } }, - "node_modules/@web/test-runner-core/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/@web/test-runner-coverage-v8": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/@web/test-runner-coverage-v8/-/test-runner-coverage-v8-0.8.0.tgz", @@ -3977,19 +4019,6 @@ "node": ">=16.14" } }, - "node_modules/@web/test-runner-coverage-v8/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/@web/test-runner-mocha": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/@web/test-runner-mocha/-/test-runner-mocha-0.9.0.tgz", @@ -4004,80 +4033,80 @@ } }, "node_modules/@webassemblyjs/ast": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz", - "integrity": "sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz", + "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@webassemblyjs/helper-numbers": "1.11.6", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6" + "@webassemblyjs/helper-numbers": "1.13.2", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2" } }, "node_modules/@webassemblyjs/floating-point-hex-parser": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.6.tgz", - "integrity": "sha512-ejAj9hfRJ2XMsNHk/v6Fu2dGS+i4UaXBXGemOfQ/JfQ6mdQg/WXtwleQRLLS4OvfDhv8rYnVwH27YJLMyYsxhw==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz", + "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==", "dev": true, "license": "MIT", "peer": true }, "node_modules/@webassemblyjs/helper-api-error": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.6.tgz", - "integrity": "sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz", + "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==", "dev": true, "license": "MIT", "peer": true }, "node_modules/@webassemblyjs/helper-buffer": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.12.1.tgz", - "integrity": "sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz", + "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==", "dev": true, "license": "MIT", "peer": true }, "node_modules/@webassemblyjs/helper-numbers": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.6.tgz", - "integrity": "sha512-vUIhZ8LZoIWHBohiEObxVm6hwP034jwmc9kuq5GdHZH0wiLVLIPcMCdpJzG4C11cHoQ25TFIQj9kaVADVX7N3g==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz", + "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@webassemblyjs/floating-point-hex-parser": "1.11.6", - "@webassemblyjs/helper-api-error": "1.11.6", + "@webassemblyjs/floating-point-hex-parser": "1.13.2", + "@webassemblyjs/helper-api-error": "1.13.2", "@xtuc/long": "4.2.2" } }, "node_modules/@webassemblyjs/helper-wasm-bytecode": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.6.tgz", - "integrity": "sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz", + "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==", "dev": true, "license": "MIT", "peer": true }, "node_modules/@webassemblyjs/helper-wasm-section": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.12.1.tgz", - "integrity": "sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz", + "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-buffer": "1.12.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/wasm-gen": "1.12.1" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/wasm-gen": "1.14.1" } }, "node_modules/@webassemblyjs/ieee754": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.11.6.tgz", - "integrity": "sha512-LM4p2csPNvbij6U1f19v6WR56QZ8JcHg3QIJTlSwzFcmx6WSORicYj6I63f9yU1kEUtrpG+kjkiIAkevHpDXrg==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz", + "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==", "dev": true, "license": "MIT", "peer": true, @@ -4086,9 +4115,9 @@ } }, "node_modules/@webassemblyjs/leb128": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.11.6.tgz", - "integrity": "sha512-m7a0FhE67DQXgouf1tbN5XQcdWoNgaAuoULHIfGFIEVKA6tu/edls6XnIlkmS6FrXAquJRPni3ZZKjw6FSPjPQ==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz", + "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==", "dev": true, "license": "Apache-2.0", "peer": true, @@ -4097,85 +4126,85 @@ } }, "node_modules/@webassemblyjs/utf8": { - "version": "1.11.6", - "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.11.6.tgz", - "integrity": "sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==", + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz", + "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==", "dev": true, "license": "MIT", "peer": true }, "node_modules/@webassemblyjs/wasm-edit": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.12.1.tgz", - "integrity": "sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz", + "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-buffer": "1.12.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/helper-wasm-section": "1.12.1", - "@webassemblyjs/wasm-gen": "1.12.1", - "@webassemblyjs/wasm-opt": "1.12.1", - "@webassemblyjs/wasm-parser": "1.12.1", - "@webassemblyjs/wast-printer": "1.12.1" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/helper-wasm-section": "1.14.1", + "@webassemblyjs/wasm-gen": "1.14.1", + "@webassemblyjs/wasm-opt": "1.14.1", + "@webassemblyjs/wasm-parser": "1.14.1", + "@webassemblyjs/wast-printer": "1.14.1" } }, "node_modules/@webassemblyjs/wasm-gen": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.12.1.tgz", - "integrity": "sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz", + "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/ieee754": "1.11.6", - "@webassemblyjs/leb128": "1.11.6", - "@webassemblyjs/utf8": "1.11.6" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/ieee754": "1.13.2", + "@webassemblyjs/leb128": "1.13.2", + "@webassemblyjs/utf8": "1.13.2" } }, "node_modules/@webassemblyjs/wasm-opt": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.12.1.tgz", - "integrity": "sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz", + "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-buffer": "1.12.1", - "@webassemblyjs/wasm-gen": "1.12.1", - "@webassemblyjs/wasm-parser": "1.12.1" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/wasm-gen": "1.14.1", + "@webassemblyjs/wasm-parser": "1.14.1" } }, "node_modules/@webassemblyjs/wasm-parser": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.12.1.tgz", - "integrity": "sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz", + "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@webassemblyjs/ast": "1.12.1", - "@webassemblyjs/helper-api-error": "1.11.6", - "@webassemblyjs/helper-wasm-bytecode": "1.11.6", - "@webassemblyjs/ieee754": "1.11.6", - "@webassemblyjs/leb128": "1.11.6", - "@webassemblyjs/utf8": "1.11.6" + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-api-error": "1.13.2", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/ieee754": "1.13.2", + "@webassemblyjs/leb128": "1.13.2", + "@webassemblyjs/utf8": "1.13.2" } }, "node_modules/@webassemblyjs/wast-printer": { - "version": "1.12.1", - "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.12.1.tgz", - "integrity": "sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==", + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz", + "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@webassemblyjs/ast": "1.12.1", + "@webassemblyjs/ast": "1.14.1", "@xtuc/long": "4.2.2" } }, @@ -4209,6 +4238,16 @@ "node": ">= 0.6" } }, + "node_modules/accepts/node_modules/negotiator": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", + "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/acorn": { "version": "8.14.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz", @@ -4222,17 +4261,6 @@ "node": ">=0.4.0" } }, - "node_modules/acorn-import-attributes": { - "version": "1.9.5", - "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz", - "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==", - "dev": true, - "license": "MIT", - "peer": true, - "peerDependencies": { - "acorn": "^8" - } - }, "node_modules/acorn-jsx": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", @@ -4335,16 +4363,13 @@ } }, "node_modules/ansi-regex": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", - "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true, "license": "MIT", "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" + "node": ">=8" } }, "node_modules/ansi-styles": { @@ -4380,19 +4405,6 @@ "node": ">= 8" } }, - "node_modules/anymatch/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/are-docs-informative": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/are-docs-informative/-/are-docs-informative-0.0.2.tgz", @@ -4607,9 +4619,9 @@ } }, "node_modules/axe-core": { - "version": "4.10.2", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.2.tgz", - "integrity": "sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==", + "version": "4.10.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.10.1.tgz", + "integrity": "sha512-qPC9o+kD8Tir0lzNGLeghbOrWMr3ZJpaRlCIb6Uobt/7N4FiEDvqUMnxzCHRHmg8vOg14kr5gVNyScRmbMaJ9g==", "dev": true, "license": "MPL-2.0", "engines": { @@ -4805,9 +4817,9 @@ } }, "node_modules/bare-stream": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.3.2.tgz", - "integrity": "sha512-EFZHSIBkDgSHIwj2l2QZfP4U5OcD4xFAOwhSb/vlr9PIqyGJGvB/nfClJbcnh3EY4jtPE4zsb5ztae96bVF79A==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.3.1.tgz", + "integrity": "sha512-Vm8kAeOcfzHPTH8sq0tHBnUqYrkXdroaBVVylqFT4cF5wnMfKEIxxy2jIGu2zKVNl9P8MAP9XBWwXJ9N2+jfEw==", "dev": true, "license": "Apache-2.0", "optional": true, @@ -4891,16 +4903,6 @@ "npm": "1.2.8000 || >= 1.4.16" } }, - "node_modules/body-parser/node_modules/bytes": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", - "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/body-parser/node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -5055,9 +5057,9 @@ "license": "MIT" }, "node_modules/bytes": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", - "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", + "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", "dev": true, "license": "MIT", "engines": { @@ -5121,9 +5123,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001675", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001675.tgz", - "integrity": "sha512-/wV1bQwPrkLiQMjaJF5yUMVM/VdRPOCU8QZ+PmG6uW6DvYSrNY1bpwHI/3mOcUosLaJCzYDi5o91IQB51ft6cg==", + "version": "1.0.30001678", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001678.tgz", + "integrity": "sha512-RR+4U/05gNtps58PEBDZcPWTgEO2MBeoPZ96aQcjmfkBWRIDfN451fW2qyDA9/+HohLLIL5GqiMwA+IB1pWarw==", "dev": true, "funding": [ { @@ -5802,18 +5804,18 @@ } }, "node_modules/compression": { - "version": "1.7.4", - "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz", - "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==", + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.5.tgz", + "integrity": "sha512-bQJ0YRck5ak3LgtnpKkiabX5pNF7tMUh1BSy2ZBOTh0Dim0BUu6aPPwByIns6/A5Prh8PufSPerMDUklpzes2Q==", "dev": true, "license": "MIT", "dependencies": { - "accepts": "~1.3.5", - "bytes": "3.0.0", - "compressible": "~2.0.16", + "bytes": "3.1.2", + "compressible": "~2.0.18", "debug": "2.6.9", + "negotiator": "~0.6.4", "on-headers": "~1.0.2", - "safe-buffer": "5.1.2", + "safe-buffer": "5.2.1", "vary": "~1.1.2" }, "engines": { @@ -5895,6 +5897,12 @@ "util-deprecate": "~1.0.1" } }, + "node_modules/concat-stream/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" + }, "node_modules/concat-stream/node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -5905,9 +5913,9 @@ } }, "node_modules/concurrently": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.0.1.tgz", - "integrity": "sha512-wYKvCd/f54sTXJMSfV6Ln/B8UrfLBKOYa+lzc6CHay3Qek+LorVSBdMVfyewFhRbH0Rbabsk4D+3PL/VjQ5gzg==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-9.1.0.tgz", + "integrity": "sha512-VxkzwMAn4LP7WyMnJNbHN5mKV9L2IbyDjpzemKr99sXNR3GqRNMMHdm7prV1ws9wg7ETj6WUkNOigZVsptwbgg==", "dev": true, "license": "MIT", "dependencies": { @@ -6034,27 +6042,6 @@ "node": ">= 0.6" } }, - "node_modules/content-disposition/node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, "node_modules/content-type": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", @@ -6396,9 +6383,9 @@ } }, "node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz", + "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==", "dev": true, "license": "MIT", "dependencies": { @@ -6521,13 +6508,13 @@ } }, "node_modules/css-tree": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.0.0.tgz", - "integrity": "sha512-o88DVQ6GzsABn1+6+zo2ct801dBO5OASVyxbbvA2W20ue2puSh/VOuqUj90eUeMSX/xqGqBmOKiRQN7tJOuBXw==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.0.1.tgz", + "integrity": "sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q==", "dev": true, "license": "MIT", "dependencies": { - "mdn-data": "2.10.0", + "mdn-data": "2.12.1", "source-map-js": "^1.0.1" }, "engines": { @@ -6891,6 +6878,7 @@ "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", "license": "Apache-2.0", + "optional": true, "bin": { "detect-libc": "bin/detect-libc.js" }, @@ -7090,6 +7078,13 @@ "util-deprecate": "~1.0.1" } }, + "node_modules/duplexer2/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true, + "license": "MIT" + }, "node_modules/duplexer2/node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -7108,9 +7103,9 @@ "license": "MIT" }, "node_modules/electron-to-chromium": { - "version": "1.5.49", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.49.tgz", - "integrity": "sha512-ZXfs1Of8fDb6z7WEYZjXpgIRF6MEu8JdeGA0A40aZq6OQbS+eJpnnV49epZRna2DU/YsEjSQuGtQPPtvt6J65A==", + "version": "1.5.52", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.52.tgz", + "integrity": "sha512-xtoijJTZ+qeucLBDNztDOuQBE1ksqjvNjvqFoST3nGC7fSpqJ+X6BdTBaY5BHG+IhWWmpc6b/KfpeuEDupEPOQ==", "dev": true, "license": "ISC" }, @@ -7618,22 +7613,22 @@ } }, "node_modules/eslint": { - "version": "9.13.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.13.0.tgz", - "integrity": "sha512-EYZK6SX6zjFHST/HRytOdA/zE72Cq/bfw45LSyuwrdvcclb/gqV8RRQxywOBEWO2+WDpva6UZa4CcDeJKzUCFA==", + "version": "9.14.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz", + "integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", - "@eslint-community/regexpp": "^4.11.0", + "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.18.0", "@eslint/core": "^0.7.0", "@eslint/eslintrc": "^3.1.0", - "@eslint/js": "9.13.0", + "@eslint/js": "9.14.0", "@eslint/plugin-kit": "^0.2.0", - "@humanfs/node": "^0.16.5", + "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", - "@humanwhocodes/retry": "^0.3.1", + "@humanwhocodes/retry": "^0.4.0", "@types/estree": "^1.0.6", "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", @@ -7641,9 +7636,9 @@ "cross-spawn": "^7.0.2", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", - "eslint-scope": "^8.1.0", - "eslint-visitor-keys": "^4.1.0", - "espree": "^10.2.0", + "eslint-scope": "^8.2.0", + "eslint-visitor-keys": "^4.2.0", + "espree": "^10.3.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", @@ -7786,9 +7781,9 @@ } }, "node_modules/eslint-plugin-lit-a11y/node_modules/parse5": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz", - "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==", + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz", + "integrity": "sha512-ZkDsAOcxsUMZ4Lz5fVciOehNcJ+Gb8gTzcA4yl3wnc273BAybYWrQ+Ks/OjCjSEpjvQkDSeZbybK9qj2VHHdGA==", "dev": true, "license": "MIT", "dependencies": { @@ -8291,27 +8286,6 @@ "dev": true, "license": "MIT" }, - "node_modules/express/node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, "node_modules/express/node_modules/statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", @@ -8713,26 +8687,6 @@ "node": ">= 0.12" } }, - "node_modules/form-data/node_modules/safe-buffer": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", - "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT" - }, "node_modules/format": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz", @@ -8809,6 +8763,13 @@ "util-deprecate": "~1.0.1" } }, + "node_modules/from2/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true, + "license": "MIT" + }, "node_modules/from2/node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -10495,9 +10456,9 @@ "license": "MIT" }, "node_modules/isbinaryfile": { - "version": "5.0.4", - "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.4.tgz", - "integrity": "sha512-YKBKVkKhty7s8rxddb40oOkuP0NbaeXrQvLin6QMHL7Ypiy2RW9LwOVrVgZRyOrhQlayMd9t+D8yDy8MKFTSDQ==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-5.0.3.tgz", + "integrity": "sha512-VR4gNjFaDP8csJQvzInG20JvBj8MaHYLxNOMXysxRbGM7tcsHZwCjhch3FubFtZBkuDbN55i4dUukGeIrzF+6g==", "dev": true, "license": "MIT", "engines": { @@ -11367,25 +11328,24 @@ } }, "node_modules/marked-terminal": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-7.2.1.tgz", - "integrity": "sha512-rQ1MoMFXZICWNsKMiiHwP/Z+92PLKskTPXj+e7uwXmuMPkNn7iTqC+IvDekVm1MPeC9wYQeLxeFaOvudRR/XbQ==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-7.1.0.tgz", + "integrity": "sha512-+pvwa14KZL74MVXjYdPR3nSInhGhNvPce/3mqLVZT2oUvt654sL1XImFuLZ1pkA866IYZ3ikDTOFUIC7XzpZZg==", "dev": true, "license": "MIT", "dependencies": { "ansi-escapes": "^7.0.0", - "ansi-regex": "^6.1.0", "chalk": "^5.3.0", "cli-highlight": "^2.1.11", "cli-table3": "^0.6.5", "node-emoji": "^2.1.3", - "supports-hyperlinks": "^3.1.0" + "supports-hyperlinks": "^3.0.0" }, "engines": { "node": ">=16.0.0" }, "peerDependencies": { - "marked": ">=1 <15" + "marked": ">=1 <14" } }, "node_modules/marked-terminal/node_modules/ansi-escapes": { @@ -11582,9 +11542,9 @@ } }, "node_modules/mdn-data": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.10.0.tgz", - "integrity": "sha512-qq7C3EtK3yJXMwz1zAab65pjl+UhohqMOctTgcqjLOWABqmwj+me02LSsCuEUxnst9X1lCBpoE0WArGKgdGDzw==", + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.1.tgz", + "integrity": "sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==", "dev": true, "license": "CC0-1.0" }, @@ -11824,18 +11784,6 @@ "node": ">=8.6" } }, - "node_modules/micromatch/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/mime": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz", @@ -12121,9 +12069,9 @@ } }, "node_modules/negotiator": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", - "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "version": "0.6.4", + "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz", + "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==", "dev": true, "license": "MIT", "engines": { @@ -12185,7 +12133,8 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", - "license": "MIT" + "license": "MIT", + "optional": true }, "node_modules/node-emoji": { "version": "2.1.3", @@ -12333,19 +12282,6 @@ "node": ">=4" } }, - "node_modules/nodemon/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8.6" - }, - "funding": { - "url": "https://github.com/sponsors/jonschlinkert" - } - }, "node_modules/nodemon/node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -16378,13 +16314,12 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz", - "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==", - "dev": true, + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "license": "MIT", "engines": { - "node": ">=12" + "node": ">=8.6" }, "funding": { "url": "https://github.com/sponsors/jonschlinkert" @@ -16545,13 +16480,13 @@ } }, "node_modules/playwright": { - "version": "1.48.2", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.2.tgz", - "integrity": "sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==", + "version": "1.48.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.48.1.tgz", + "integrity": "sha512-j8CiHW/V6HxmbntOfyB4+T/uk08tBy6ph0MpBXwuoofkSnLmlfdYNNkFTYD6ofzzlSqLA1fwH4vwvVFvJgLN0w==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.48.2" + "playwright-core": "1.48.1" }, "bin": { "playwright": "cli.js" @@ -16564,9 +16499,9 @@ } }, "node_modules/playwright-core": { - "version": "1.48.2", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.2.tgz", - "integrity": "sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==", + "version": "1.48.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.48.1.tgz", + "integrity": "sha512-Yw/t4VAFX/bBr1OzwCuOMZkY1Cnb4z/doAFSwf4huqAGWmf9eMNjmK7NiOljCdLmxeRYcGPPmcDgU0zOlzP0YA==", "dev": true, "license": "Apache-2.0", "bin": { @@ -16663,9 +16598,9 @@ } }, "node_modules/postcss-custom-properties": { - "version": "14.0.3", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-14.0.3.tgz", - "integrity": "sha512-zCc5y6cilcZXld3RK0glb5OR9p6i/54ro7Dul2drDI7kLCIZC1uiblHGociomp2fwBet3kRFf9DpG4lJtz5yhw==", + "version": "14.0.4", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-14.0.4.tgz", + "integrity": "sha512-QnW8FCCK6q+4ierwjnmXF9Y9KF8q0JkbgVfvQEMa93x1GT8FvOiUevWCN2YLaOWyByeDX8S6VFbZEeWoAoXs2A==", "dev": true, "funding": [ { @@ -16677,11 +16612,10 @@ "url": "https://opencollective.com/csstools" } ], - "license": "MIT", "dependencies": { - "@csstools/cascade-layer-name-parser": "^2.0.3", - "@csstools/css-parser-algorithms": "^3.0.3", - "@csstools/css-tokenizer": "^3.0.2", + "@csstools/cascade-layer-name-parser": "^2.0.4", + "@csstools/css-parser-algorithms": "^3.0.4", + "@csstools/css-tokenizer": "^3.0.3", "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, @@ -16985,13 +16919,13 @@ } }, "node_modules/puppeteer-core": { - "version": "23.6.1", - "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.6.1.tgz", - "integrity": "sha512-DoNLAzQfGklPauEn33N4h9cM9GubJSINEn+AUMwAXwW159Y9JLk5y34Jsbv4c7kG8P0puOYWV9leu2siMZ/QpQ==", + "version": "23.7.1", + "resolved": "https://registry.npmjs.org/puppeteer-core/-/puppeteer-core-23.7.1.tgz", + "integrity": "sha512-Om/qCZhd+HLoAr7GltrRAZpS3uOXwHu7tXAoDbNcJADHjG2zeAlDArgyIPXYGG4QB/EQUHk13Q6RklNxGM73Pg==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@puppeteer/browsers": "2.4.0", + "@puppeteer/browsers": "2.4.1", "chromium-bidi": "0.8.0", "debug": "^4.3.7", "devtools-protocol": "0.0.1354347", @@ -17003,13 +16937,13 @@ } }, "node_modules/puppeteer-core/node_modules/@puppeteer/browsers": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.4.0.tgz", - "integrity": "sha512-x8J1csfIygOwf6D6qUAZ0ASk3z63zPb7wkNeHRerCMh82qWKUrOgkuP005AJC8lDL6/evtXETGEJVcwykKT4/g==", + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@puppeteer/browsers/-/browsers-2.4.1.tgz", + "integrity": "sha512-0kdAbmic3J09I6dT8e9vE2JOCSt13wHCW5x/ly8TSt2bDtuIWe2TgLZZDHdcziw9AVCzflMAXCrVyRIhIs44Ng==", "dev": true, "license": "Apache-2.0", "dependencies": { - "debug": "^4.3.6", + "debug": "^4.3.7", "extract-zip": "^2.0.1", "progress": "^2.0.3", "proxy-agent": "^6.4.0", @@ -17200,16 +17134,6 @@ "node": ">= 0.8" } }, - "node_modules/raw-body/node_modules/bytes": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", - "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/raw-body/node_modules/http-errors": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", @@ -17630,11 +17554,10 @@ } }, "node_modules/rollup": { - "version": "4.24.3", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.3.tgz", - "integrity": "sha512-HBW896xR5HGmoksbi3JBDtmVzWiPAYqp7wip50hjQ67JbDz61nyoMPdqu1DvVW9asYb2M65Z20ZHsyJCMqMyDg==", + "version": "4.24.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.24.4.tgz", + "integrity": "sha512-vGorVWIsWfX3xbcyAS+I047kFKapHYivmkaT63Smj77XwvLSJos6M1xGqZnBPFQFBRZDOcG1QnYEIxAvTr/HjA==", "dev": true, - "license": "MIT", "dependencies": { "@types/estree": "1.0.6" }, @@ -17646,24 +17569,24 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.24.3", - "@rollup/rollup-android-arm64": "4.24.3", - "@rollup/rollup-darwin-arm64": "4.24.3", - "@rollup/rollup-darwin-x64": "4.24.3", - "@rollup/rollup-freebsd-arm64": "4.24.3", - "@rollup/rollup-freebsd-x64": "4.24.3", - "@rollup/rollup-linux-arm-gnueabihf": "4.24.3", - "@rollup/rollup-linux-arm-musleabihf": "4.24.3", - "@rollup/rollup-linux-arm64-gnu": "4.24.3", - "@rollup/rollup-linux-arm64-musl": "4.24.3", - "@rollup/rollup-linux-powerpc64le-gnu": "4.24.3", - "@rollup/rollup-linux-riscv64-gnu": "4.24.3", - "@rollup/rollup-linux-s390x-gnu": "4.24.3", - "@rollup/rollup-linux-x64-gnu": "4.24.3", - "@rollup/rollup-linux-x64-musl": "4.24.3", - "@rollup/rollup-win32-arm64-msvc": "4.24.3", - "@rollup/rollup-win32-ia32-msvc": "4.24.3", - "@rollup/rollup-win32-x64-msvc": "4.24.3", + "@rollup/rollup-android-arm-eabi": "4.24.4", + "@rollup/rollup-android-arm64": "4.24.4", + "@rollup/rollup-darwin-arm64": "4.24.4", + "@rollup/rollup-darwin-x64": "4.24.4", + "@rollup/rollup-freebsd-arm64": "4.24.4", + "@rollup/rollup-freebsd-x64": "4.24.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.24.4", + "@rollup/rollup-linux-arm-musleabihf": "4.24.4", + "@rollup/rollup-linux-arm64-gnu": "4.24.4", + "@rollup/rollup-linux-arm64-musl": "4.24.4", + "@rollup/rollup-linux-powerpc64le-gnu": "4.24.4", + "@rollup/rollup-linux-riscv64-gnu": "4.24.4", + "@rollup/rollup-linux-s390x-gnu": "4.24.4", + "@rollup/rollup-linux-x64-gnu": "4.24.4", + "@rollup/rollup-linux-x64-musl": "4.24.4", + "@rollup/rollup-win32-arm64-msvc": "4.24.4", + "@rollup/rollup-win32-ia32-msvc": "4.24.4", + "@rollup/rollup-win32-x64-msvc": "4.24.4", "fsevents": "~2.3.2" } }, @@ -17736,9 +17659,23 @@ "license": "MIT" }, "node_modules/safe-buffer": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", + "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], "license": "MIT" }, "node_modules/safe-regex-test": { @@ -17766,12 +17703,11 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.80.5", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.5.tgz", - "integrity": "sha512-TQd2aoQl/+zsxRMEDSxVdpPIqeq9UFc6pr7PzkugiTx3VYCFPUaa3P4RrBQsqok4PO200Vkz0vXQBNlg7W907g==", + "version": "1.80.6", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.6.tgz", + "integrity": "sha512-ccZgdHNiBF1NHBsWvacvT5rju3y1d/Eu+8Ex6c21nHp2lZGLBEtuwc415QfiI1PJa1TpCo3iXwwSRjRpn2Ckjg==", "license": "MIT", "dependencies": { - "@parcel/watcher": "^2.4.1", "chokidar": "^4.0.0", "immutable": "^4.0.0", "source-map-js": ">=0.6.2 <2.0.0" @@ -17781,6 +17717,9 @@ }, "engines": { "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" } }, "node_modules/schema-utils": { @@ -17829,7 +17768,6 @@ "resolved": "https://registry.npmjs.org/semantic-release/-/semantic-release-24.2.0.tgz", "integrity": "sha512-fQfn6e/aYToRtVJYKqneFM1Rg3KP2gh3wSWtpYsLlz6uaPKlISrTzvYAFn+mYWo07F0X1Cz5ucU89AVE8X1mbg==", "dev": true, - "license": "MIT", "dependencies": { "@semantic-release/commit-analyzer": "^13.0.0-beta.1", "@semantic-release/error": "^4.0.0", @@ -17938,9 +17876,9 @@ } }, "node_modules/semantic-release/node_modules/execa": { - "version": "9.5.1", - "resolved": "https://registry.npmjs.org/execa/-/execa-9.5.1.tgz", - "integrity": "sha512-QY5PPtSonnGwhhHDNI7+3RvY285c7iuJFFB+lU+oEzMY/gEGJ808owqJsrr8Otd1E/x07po1LkUBmdAc5duPAg==", + "version": "9.4.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-9.4.1.tgz", + "integrity": "sha512-5eo/BRqZm3GYce+1jqX/tJ7duA2AnE39i88fuedNFUV8XxGxUpF3aWkBRfbUcjV49gCkvS/pzc0YrCPhaIewdg==", "dev": true, "license": "MIT", "dependencies": { @@ -18955,6 +18893,13 @@ "util-deprecate": "~1.0.1" } }, + "node_modules/stream-combiner2/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true, + "license": "MIT" + }, "node_modules/stream-combiner2/node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -19089,16 +19034,6 @@ "node": ">=8" } }, - "node_modules/strip-ansi/node_modules/ansi-regex": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", - "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, "node_modules/strip-bom": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz", @@ -19354,9 +19289,9 @@ } }, "node_modules/stylelint-scss/node_modules/mdn-data": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.1.tgz", - "integrity": "sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q==", + "version": "2.11.1", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.11.1.tgz", + "integrity": "sha512-Hdx3wmyqPFrhd6YHVuSkUK2eIGAcxR0xlndcgZqjA68yMJTbfXrjJwbgsBOsNjI7LnBIVUQnmyMVSdi/ob0GpQ==", "dev": true, "license": "CC0-1.0" }, @@ -19994,6 +19929,13 @@ "util-deprecate": "~1.0.1" } }, + "node_modules/through2/node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "dev": true, + "license": "MIT" + }, "node_modules/through2/node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -20131,9 +20073,9 @@ "license": "MIT" }, "node_modules/tslib": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz", - "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==", + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "dev": true, "license": "0BSD" }, @@ -20905,20 +20847,20 @@ } }, "node_modules/webpack": { - "version": "5.95.0", - "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz", - "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==", + "version": "5.96.1", + "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.96.1.tgz", + "integrity": "sha512-l2LlBSvVZGhL4ZrPwyr8+37AunkcYj5qh8o6u2/2rzoPc8gxFJkLj1WxNgooi9pnoc06jh0BjuXnamM4qlujZA==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@types/estree": "^1.0.5", + "@types/eslint-scope": "^3.7.7", + "@types/estree": "^1.0.6", "@webassemblyjs/ast": "^1.12.1", "@webassemblyjs/wasm-edit": "^1.12.1", "@webassemblyjs/wasm-parser": "^1.12.1", - "acorn": "^8.7.1", - "acorn-import-attributes": "^1.9.5", - "browserslist": "^4.21.10", + "acorn": "^8.14.0", + "browserslist": "^4.24.0", "chrome-trace-event": "^1.0.2", "enhanced-resolve": "^5.17.1", "es-module-lexer": "^1.2.1", diff --git a/package.json b/package.json index bcd8671..f8d5c42 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "node": "^18 || ^20" }, "dependencies": { - "@aurodesignsystem/auro-button": "^8.1.2", + "@aurodesignsystem/auro-button": "^8.1.3", "@aurodesignsystem/auro-formvalidation": "^1.0.4", "@aurodesignsystem/auro-icon": "^6.0.2", "@aurodesignsystem/auro-library": "~2.8", @@ -36,7 +36,7 @@ "devDependencies": { "@alaskaairux/icons": "^4.44.1", "@aurodesignsystem/design-tokens": "^4.10.1", - "@aurodesignsystem/eslint-config": "^1.3.2", + "@aurodesignsystem/eslint-config": "^1.3.3", "@aurodesignsystem/webcorestylesheets": "^5.1.2", "@commitlint/cli": "^19.5.0", "@commitlint/config-conventional": "^19.5.0", @@ -52,10 +52,10 @@ "backstopjs": "^6.3.25", "compression": "^1.7.4", "concat": "^1.0.3", - "concurrently": "^9.0.1", + "concurrently": "^9.1.0", "copyfiles": "^2.4.1", "core-js": "^3.39.0", - "eslint": "^9.13.0", + "eslint": "^9.14.0", "eslint-plugin-jsdoc": "^50.4.3", "husky": "^9.1.6", "lodash": "^4.17.21", @@ -63,11 +63,11 @@ "nodemon": "^3.1.7", "npm-run-all": "^4.1.5", "postcss": "^8.4.47", - "postcss-custom-properties": "^14.0.3", + "postcss-custom-properties": "^14.0.4", "postcss-discard-comments": "^7.0.3", - "rollup": "^4.24.3", + "rollup": "^4.24.4", "rollup-plugin-serve": "^2.0.3", - "sass": "^1.80.5", + "sass": "^1.80.6", "semantic-release": "^24.2.0", "sinon": "^19.0.2", "stylelint": "^16.10.0", diff --git a/rollup.config.mjs b/rollup.config.mjs index 095017b..82e5d5a 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -28,7 +28,8 @@ const indexExamplesConfig = { output: { format: 'esm', dir: 'demo/' - } + }, + plugins: [nodeResolve()] }; const apiExamplesConfig = { @@ -38,7 +39,8 @@ const apiExamplesConfig = { output: { format: 'esm', dir: 'demo/' - } + }, + plugins: [nodeResolve()] }; export default [modernConfig, indexExamplesConfig, apiExamplesConfig]; diff --git a/src/auro-input.js b/src/auro-input.js index 3157cad..cfa2b5f 100644 --- a/src/auro-input.js +++ b/src/auro-input.js @@ -154,7 +154,6 @@ export class AuroInput extends BaseInput { <${this.iconTag} category="alert" name="error-stroke" - customSize error> @@ -171,14 +170,12 @@ export class AuroInput extends BaseInput { <${this.iconTag} category="interface" name="hide-password-stroke" - customSize customColor ?hidden=${!this.showPassword}> <${this.iconTag} category="interface" name="view-password-stroke" - customSize customColor ?hidden=${this.showPassword}> @@ -197,7 +194,7 @@ export class AuroInput extends BaseInput { customColor category="interface" name="x-lg" - customSize> + > diff --git a/src/buttonVersion.js b/src/buttonVersion.js index 6780d95..94bdd6a 100644 --- a/src/buttonVersion.js +++ b/src/buttonVersion.js @@ -1 +1 @@ -export default '8.1.2' \ No newline at end of file +export default '8.1.3' \ No newline at end of file diff --git a/src/styles/notificationIcons.scss b/src/styles/notificationIcons.scss index ad2346e..f59eda8 100644 --- a/src/styles/notificationIcons.scss +++ b/src/styles/notificationIcons.scss @@ -8,8 +8,9 @@ align-items: center; [auro-icon] { + --ds-auro-icon-size: var(--ds-size-300, #{$ds-size-300}); + height: var(--ds-size-300, $ds-size-300); - width: var(--ds-size-300, $ds-size-300); margin-right: var(--ds-size-100, $ds-size-100); } } @@ -37,8 +38,8 @@ } .alertNotification { - height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); - width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); + height: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-25, $ds-size-25)); + width: calc(var(--ds-size-300, $ds-size-300) + var(--ds-size-25, $ds-size-25)); } .clearBtn { @@ -61,9 +62,10 @@ width: var(--ds-size-200, $ds-size-200); [auro-icon] { - display: block; + --ds-auro-icon-size: var(--ds-size-200, #{$ds-size-200}); + height: var(--ds-size-200, $ds-size-200); - width: var(--ds-size-200, $ds-size-200); + display: block; &[hidden] { display: none;