@aurodesignsystem/auro-formkit 2.0.0-beta.9 → 2.0.0

package/components/input/dist/styles/borders-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=borders-css.d.ts.map

package/components/input/dist/styles/color-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=color-css.d.ts.map

package/components/input/dist/styles/input-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=input-css.d.ts.map

package/components/input/dist/styles/label-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=label-css.d.ts.map

package/components/input/dist/styles/mixins-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=mixins-css.d.ts.map

package/components/input/dist/styles/notificationIcons-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=notificationIcons-css.d.ts.map

package/components/input/dist/styles/style-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=style-css.d.ts.map

package/components/input/dist/styles/tokens-css.d.ts

@@ -1,3 +1,2 @@
 declare const _default: import("lit").CSSResult;
 export default _default;
-//# sourceMappingURL=tokens-css.d.ts.map

package/components/input/dist/utilities.d.ts

@@ -0,0 +1,25 @@
+export class AuroInputUtilities {
+    /**
+     * Configures the mask to be used on the input element based on format and/or type.
+     * IMask tool documentation: https://imask.js.org/.
+     * @private
+     * @param {string} type - The input type.
+     * @param {string} format - The format of the mask to apply.
+     * @returns {void}
+     */
+    private getMaskOptions;
+    /**
+     * @private
+     * @param {string} dateStr - Date string to format.
+     * @param {string} format - Date format to use.
+     * @returns {void}
+     */
+    private toNorthAmericanFormat;
+    /**
+     * @private
+     * @param {string} dateStr - Date string to parse.
+     * @param {string} format - Date format to parse.
+     * @returns {void}
+     */
+    private parseDate;
+}

package/components/menu/README.md

@@ -18,7 +18,6 @@ The following sections are editable by making changes to the following files:
 -->
 
 # Menu
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
 <!-- The below content is automatically added from ./docs/partials/description.md -->
 The `<auro-menu>` element provides a list of options for a user to select from.
@@ -32,42 +31,55 @@ The `<auro-menu>` element is designed for contextual menus, e.g. a dropdown menu
 <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## UI development browser support
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
-For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Install
-
+## Getting Started
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
 <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
 
+#### NPM Installation
+
 ```shell
 $ npm i @aurodesignsystem/auro-formkit
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
+<!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
 
-### Design Token CSS Custom Property dependency
+### Import Options
+
+#### Automatic Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
-The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
+For automatic registration, simply import the component:
 
-<!-- AURO-GENERATED-CONTENT:END -->
+```javascript
+// Registers <auro-menu> automatically
+import '@aurodesignsystem/auro-formkit/auro-menu';
+```
 
-### Define dependency in project component
+#### Custom Registration
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) -->
-Defining the component dependency within each component that is using the `<auro-menu>` component.
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroMenu.register('custom-menu')` method on the component class and pass in a unique name.
 
-<!-- AURO-GENERATED-CONTENT:END -->
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentUsage.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentUsage.md -->
+```javascript
+// Import the class only
+import { AuroMenu } from '@aurodesignsystem/auro-formkit/auro-menu/class';
+
+// Register with a custom name if desired
+AuroMenu.register('custom-menu');
+```
 
-```js
-import "@aurodesignsystem/auro-formkit/auro-menu";
+#### TypeScript Module Resolution
+
+When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
+
+```json
+{
+    "compilerOptions": {
+        "moduleResolution": "bundler"
+    }
+}
 ```
+
+This configuration enables proper module resolution for the component's TypeScript files.
 <!-- AURO-GENERATED-CONTENT:END -->
 **Reference component in HTML**
 
@@ -85,26 +97,30 @@ import "@aurodesignsystem/auro-formkit/auro-menu";
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Install bundled assets from CDN
+### Design Token CSS Custom Property dependency
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) -->
-In cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-menu__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
+The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
 
-**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.
+<!-- AURO-GENERATED-CONTENT:END -->
+
+## Install from CDN
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
+<!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
+In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
+```html
+<script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.0-beta.54/auro-menu/+esm"></script>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### Bundle example code
+## UI development browser support
+<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
+For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
 
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentBundleUseModBrowsers.md) -->
-<!-- The below content is automatically added from ../../docs/templates/componentBundleUseModBrowsers.md -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@4.12.1/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css" />
-<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit/auro-menu@2.0.0-beta.8/dist/auro-menu__bundled.js" type="module"></script>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## auro-menu use cases
-
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./docs/partials/useCases.md -->
 The `<auro-menu>` element should be used in situations where users may:
@@ -112,71 +128,18 @@ The `<auro-menu>` element should be used in situations where users may:
 * A user needs to select one option from a list of options.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## API Code Examples
-
-### Default auro-menu
-
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
-<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
-
-```html
-<auro-menu>
-  <auro-menuoption value="stops">Stops</auro-menuoption>
-  <auro-menuoption value="price">Price</auro-menuoption>
-  <auro-menuoption value="duration">Duration</auro-menuoption>
-  <auro-menuoption value="departure">Departure</auro-menuoption>
-  <auro-menuoption value="arrival">Arrival</auro-menuoption>
-</auro-menu>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-
-## Development
+## Formkit development
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) -->
-In order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.
-
-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.
-
-<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
 
-### Start development environment
+### Filtering
 
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) -->
-Once the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
 
-```shell
-$ npm run dev
-```
-
-Open [localhost:8000](http://localhost:8000/)
-
-If running separate sessions is preferred, please run the following commands in individual terminal shells.
+To only develop a single component, use the `--filter` flag:
 
 ```shell
-$ npm run build:watch
-
-$ npm run serve
+npx turbo dev --filter=@aurodesignsystem/auro-input
 ```
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### API generation
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) -->
-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.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Testing
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) -->
-Automated tests are required for every Auro component. See `.\test\auro-menu.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.
-
-<!-- AURO-GENERATED-CONTENT:END -->
-
-### Bundled assets
-
-<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) -->
-Bundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.
-
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/menu/demo/api.js

@@ -4,7 +4,7 @@ import { auroMenuResetExample } from '../apiExamples/reset';
 import { auroMenuMatchWordExample } from '../apiExamples/matchWord';
 import { auroMenuCustomEventExample } from '../apiExamples/customEvent';
 import { auroMenuLoadingExample } from '../apiExamples/loading';
-import '../src/index.js';
+import '../src/registered.js';
 
 export function initExamples(initCount) {
   initCount = initCount || 0;

package/components/menu/demo/api.md

@@ -5,26 +5,31 @@
 
 The auro-menu element provides users a way to select from a list of options.
 
+## Attributes
+
+| Attribute        | Type                            | Description                                      |
+|------------------|---------------------------------|--------------------------------------------------|
+| [optionselected](#optionselected) | `Array<HTMLElement>\|undefined` | An array of currently selected menu options. In single-select mode, the array will contain only one HTMLElement. `undefined` when no options are selected. |
+
 ## Properties
 
-| Property                | Attribute        | Type      | Default     | Description                                      |
-|-------------------------|------------------|-----------|-------------|--------------------------------------------------|
-| [disabled](#disabled)              | `disabled`       | `Boolean` |             | When true, the entire menu and all options are disabled; |
-| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `Boolean` |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
-| [loading](#loading)               | `loading`        | `Boolean` | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
-| [matchWord](#matchWord)             | `matchWord`      | `String`  | "undefined" | Specifies a string used to highlight matched string parts in options. |
-| [noCheckmark](#noCheckmark)           | `noCheckmark`    | `Boolean` | false       | When true, selected option will not show the checkmark. |
-| [optionActive](#optionActive)          | `optionActive`   | `object`  | "undefined" |                                                  |
-| [optionSelected](#optionSelected)        | `optionSelected` | `Object`  | "undefined" | Specifies the current selected menuOption.       |
-| [value](#value)                 | `value`          | `String`  | "undefined" | Value selected for the menu.                     |
+| Property                | Attribute        | Type                       | Default     | Description                                      |
+|-------------------------|------------------|----------------------------|-------------|--------------------------------------------------|
+| [disabled](#disabled)              | `disabled`       | `boolean`                  |             | When true, the entire menu and all options are disabled; |
+| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `boolean`                  |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
+| [loading](#loading)               | `loading`        | `boolean`                  | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| [matchWord](#matchWord)             | `matchword`      | `string`                   | "undefined" | Specifies a string used to highlight matched string parts in options. |
+| [multiSelect](#multiSelect)           | `multiselect`    | `boolean`                  | false       | When true, the selected option can be multiple options. |
+| [noCheckmark](#noCheckmark)           | `nocheckmark`    | `boolean`                  | false       | When true, selected option will not show the checkmark. |
+| [optionActive](#optionActive)          | `optionactive`   | `object`                   | "undefined" | Specifies the current active menuOption.         |
+| [optionSelected](#optionSelected)        | `optionSelected` |                            | "undefined" |                                                  |
+| [value](#value)                 | `value`          | `Array<string>\|undefined` | "undefined" | Value selected for the menu. `undefined` when no selection has been made, otherwise an array of strings. In single-select mode, the array will contain only one value. |
 
 ## Methods
 
-| Method               | Type                            | Description                                      |
-|----------------------|---------------------------------|--------------------------------------------------|
-| [makeSelection](#makeSelection)      | `(): void`                      | Process actions for making making a menuoption selection. |
-| [resetOptionsStates](#resetOptionsStates) | `(): void`                      | Reset the menu and all options.                  |
-| [selectNextItem](#selectNextItem)     | `(moveDirection: string): void` | Using value of current this.index evaluates index<br />of next :focus to set based on array of this.items ignoring items<br />with disabled attr.<br /><br />The event.target is not used as the function needs to know where to go,<br />versus knowing where it is.<br /><br />**moveDirection**: Up or Down based on keyboard event. |
+| Method  | Type       | Description                                      |
+|---------|------------|--------------------------------------------------|
+| [reset](#reset) | `(): void` | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
 
 ## Events
 
@@ -33,7 +38,7 @@ The auro-menu element provides users a way to select from a list of options.
 | `auroMenu-activatedOption`    | `CustomEvent<Element>`                           | Notifies that a menuoption has been made `active`. |
 | `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
 | `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
-| `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that a an attempt to select a menuoption by matching a value has failed. |
+| `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that an attempt to select a menuoption by matching a value has failed. |
 | `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
 | `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
 
@@ -308,6 +313,38 @@ export function auroMenuMatchWordExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### Multi Select<a name="multiSelect"></a>
+The `auro-menu` supports a multi-select option. To use, place the `multiselect` attribute on the `<auro-menu>` element tag. When applied, the `value` attribute will become an Array versus String value.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multiSelect.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/multiSelect.html -->
+  <auro-menu multiselect>
+    <auro-menuoption value="stops">Stops</auro-menuoption>
+    <auro-menuoption value="price">Price</auro-menuoption>
+    <auro-menuoption value="duration">Duration</auro-menuoption>
+    <auro-menuoption value="departure">Departure</auro-menuoption>
+    <auro-menuoption value="arrival">Arrival</auro-menuoption>
+  </auro-menu>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multiSelect.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/multiSelect.html -->
+
+```html
+<auro-menu multiselect>
+  <auro-menuoption value="stops">Stops</auro-menuoption>
+  <auro-menuoption value="price">Price</auro-menuoption>
+  <auro-menuoption value="duration">Duration</auro-menuoption>
+  <auro-menuoption value="departure">Departure</auro-menuoption>
+  <auro-menuoption value="arrival">Arrival</auro-menuoption>
+</auro-menu>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 #### Loading<a name="loading"></a>
 While content is loading, the menu can either remain empty or display a loading placeholder
 
@@ -874,12 +911,12 @@ The `auro-menu` may be reset to a state with no menuoption selected by setting t
 ```js
 export function auroMenuResetExample() {
   const resetExampleBtnElem = document.querySelector('#resetExampleBtn');
-  const resetExampleElem = document.querySelector('#resetExample');
-
+  const resetExampleElem = document.querySelector('#resetExample');
+
   if (resetExampleElem && resetExampleBtnElem) {
     resetExampleBtnElem.addEventListener('click', () => {
-      resetExampleElem.value = undefined;
-    })
+      resetExampleElem.reset();
+    });
   }
 }
 ```