npm - @aurodesignsystem/auro-formkit - Versions diffs - 2.0.0-beta.9 → 2.0.0 - Mend

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

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

Files changed (1005) hide show

package/components/combobox/demo/readme.html ADDED Viewed

@@ -0,0 +1,49 @@
+<!--
+  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
+  See LICENSE in the project root for license information.
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
+  With the exception of adding custom elements if needed for the demo.
+  ----------------------- DO NOT EDIT -----------------------------
+-->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Auro Web Component Generator | auro-combobox custom element</title>
+    <link
+      rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
+    />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
+  </head>
+  <body class="auro-markdown">
+    <main></main>
+    <script type="module">
+      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
+      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
+      fetch('./readme.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        })
+    </script>
+    <script type="module">
+      import { initExamples } from "./index.min.js";
+      initExamples();
+    </script>
+  </body>
+</html>

package/components/combobox/demo/readme.md ADDED Viewed

@@ -0,0 +1,152 @@
+<!--
+The README.md file is a compiled document. No edits should be made directly to this file.
+README.md is created by running `npm run build:docs`.
+This file is generated based on a template fetched from
+`../../docs/templates/componentReadmeTemplate.md`
+and copied to `./componentDocs/README.md` each time the docs are compiled.
+The following sections are editable by making changes to the following files:
+| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |
+|------------------------|---------------------------------------------------|-------------------------------------|
+| Description            | Description of the component                      | `./docs/partials/description.md`    |
+| 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`          |
+-->
+# Combobox
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
+<!-- The below content is automatically added from ./docs/partials/description.md -->
+`<auro-combobox>` is the combination of [dropdown](http://auro.alaskaair.com/components/auro/dropdown), [input](http://auro.alaskaair.com/components/auro/input), and [menu](http://auro.alaskaair.com/components/auro/menu) and allows users to filter search results from a predefined list as they type. When the user starts typing in the text input, a dropdown of a menu shows up to display options that match the user’s search.
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
+<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
+<!-- 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 -->
+## 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 -->
+### Import Options
+#### Automatic Registration
+For automatic registration, simply import the component:
+```javascript
+// Registers <auro-combobox> automatically
+import '@aurodesignsystem/auro-formkit/auro-combobox';
+```
+#### Custom Registration
+To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroCombobox.register('custom-combobox')` method on the component class and pass in a unique name.
+```javascript
+// Import the class only
+import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
+// Register with a custom name if desired
+AuroCombobox.register('custom-combobox');
+```
+#### 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**
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
+<!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
+```html
+<auro-combobox>
+  <span slot="bib.fullscreen.headline">Bib Header</span>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+### Design Token CSS Custom Property dependency
+<!-- 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).
+<!-- 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-combobox/+esm"></script>
+```
+<!-- 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 -->
+## auro-combobox 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-combobox>` element should be used in situations where users may:
+* Search
+  * Airports: user looks for a specific airport by searching for the city name or airport code
+  * Site wide: user searches for a topic site wide and combobox makes suggestions on searchable results
+* Filter
+  * Options: user chooses filters for their search by using combobox
+* Select
+  * Quantity: user types a quantity to select an option within a range (for example, the user may be limited to 2-34)
+<!-- AURO-GENERATED-CONTENT:END -->
+## Formkit development
+<!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
+<!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
+### Filtering
+Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
+To only develop a single component, use the `--filter` flag:
+```shell
+npx turbo dev --filter=@aurodesignsystem/auro-input
+```
+<!-- AURO-GENERATED-CONTENT:END -->

package/components/combobox/dist/auro-combobox.d.ts CHANGED Viewed

@@ -1,19 +1,6 @@
 /**
- * @prop {Object} optionSelected - Specifies the current selected option.
- * @prop {String} value - Value selected for the dropdown menu.
- * @prop {Boolean} checkmark - When attribute is present auro-menu will apply checkmarks to selected options.
- * @attr {String} error - When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
- * @attr {String} validity - Specifies the `validityState` this element is in.
- * @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 {Boolean} disabled - If set, disables the combobox.
- * @attr {Boolean} noFilter - If set, combobox will not filter menuoptions based in input.
- * @attr {Boolean} noValidate - If set, disables auto-validation on blur.
- * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation.
- * @attr {Boolean} triggerIcon - If set, the `icon` attribute will be applied to the trigger `auro-input` element.
- * @attr {String} type - Applies the defined value as the type attribute on auro-input.
  * @slot - Default slot for the menu content.
+ * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @event auroCombobox-valueSet - Notifies that the component has a new value set.
@@ -21,127 +8,147 @@
  */
 export class AuroCombobox extends LitElement {
     static get properties(): {
-        error: {
+        /**
+         * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
+         */
+        autocomplete: {
             type: StringConstructor;
             reflect: boolean;
         };
-        setCustomValidity: {
-            type: StringConstructor;
-        };
-        setCustomValidityCustomError: {
-            type: StringConstructor;
-        };
-        setCustomValidityValueMissing: {
-            type: StringConstructor;
-        };
-        validity: {
-            type: StringConstructor;
+        /**
+         * When attribute is present auro-menu will apply checkmarks to selected options.
+         */
+        checkmark: {
+            type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * If set, disables the combobox.
+         */
         disabled: {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
+         */
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        /**
+         * If set, combobox will not filter menuoptions based in input.
+         */
         noFilter: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        optionSelected: {
-            type: ObjectConstructor;
-        };
+        /**
+         * If set, disables auto-validation on blur.
+         */
         noValidate: {
             type: BooleanConstructor;
         };
-        required: {
-            type: BooleanConstructor;
-            reflect: boolean;
+        /**
+         * Specifies the current selected option.
+         */
+        optionSelected: {
+            type: ObjectConstructor;
+            converter: typeof arrayConverter;
+            hasChanged: typeof arrayOrUndefinedHasChanged;
         };
-        triggerIcon: {
+        /**
+         * Populates the `required` attribute on the input. Used for client-side validation.
+         */
+        required: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        type: {
+        /**
+         * Sets a custom help text message to display for all validityStates.
+         */
+        setCustomValidity: {
             type: StringConstructor;
-            reflect: boolean;
         };
-        value: {
+        /**
+         * Custom help text message to display when validity = `customError`.
+         */
+        setCustomValidityCustomError: {
             type: StringConstructor;
         };
-        checkmark: {
-            type: BooleanConstructor;
-            reflect: boolean;
-        };
         /**
-         * @private
+         * Custom help text message to display when validity = `valueMissing`.
          */
-        availableOptions: {
-            type: ArrayConstructor;
+        setCustomValidityValueMissing: {
+            type: StringConstructor;
         };
         /**
-         * @private
+         * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
          */
-        optionActive: {
-            type: ObjectConstructor;
+        triggerIcon: {
+            type: BooleanConstructor;
+            reflect: boolean;
         };
         /**
-         * @private
+         * Applies the defined value as the type attribute on auro-input.
          */
-        msgSelectionMissing: {
+        type: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
-         * @private
+         * Specifies the `validityState` this element is in.
          */
-        dropdownElementName: {
+        validity: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
-         * @private
+         * Value selected for the dropdown menu.
          */
-        dropdownTag: {
-            type: ObjectConstructor;
+        value: {
+            converter: typeof arrayConverter;
+            hasChanged: typeof arrayOrUndefinedHasChanged;
         };
         /**
-         * @private
+         * If declared, make bib.fullscreen.headline in HeadingDisplay.
+         * Otherwise, Heading 600
+         */
+        largeFullscreenHeadline: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        /**
+         * Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile.
+         * When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
+         * @default sm
          */
-        inputElementName: {
+        fullscreenBreakpoint: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
          * @private
          */
-        inputTag: {
-            type: ObjectConstructor;
+        isDropdownFullscreen: {
+            type: BooleanConstructor;
+            reflect: boolean;
         };
     };
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.
-     * @param {string} [name="auro-combobox"] - The name of element that you want to register to.
+     * @param {string} [name='auro-combobox'] - The name of element that you want to register to.
      *
      * @example
-     * AuroCombobox.register("custom-combobox") // this will register this element to <custom-combobox/>
+     * AuroCombobox.register('custom-combobox') // this will register this element to <custom-combobox/>
      *
      */
     static register(name?: string): void;
     noFilter: boolean;
     validity: any;
     value: any;
-    optionSelected: any;
-    /**
-     * @private
-     */
-    private validation;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * @private
-     */
-    private isHiddenWhileLoading;
-    dropdownTag: any;
-    inputTag: any;
+    optionSelected: any[];
     /**
      * @private
      * @returns {void} Internal defaults.
@@ -150,6 +157,13 @@ export class AuroCombobox extends LitElement {
     availableOptions: any[];
     optionActive: any;
     msgSelectionMissing: string;
+    fullscreenBreakpoint: string;
+    validation: AuroFormValidation;
+    runtimeUtils: any;
+    isHiddenWhileLoading: boolean;
+    dropdownTag: any;
+    bibtemplateTag: any;
+    inputTag: any;
     /**
      * Processes hidden state of all menu options and determines if there are any available options not hidden.
      * @private
@@ -176,6 +190,7 @@ export class AuroCombobox extends LitElement {
      * @returns {void}
      */
     private showBib;
+    isDropdownFullscreen: any;
     /**
      * Binds all behavior needed to the dropdown after rendering.
      * @private
@@ -183,6 +198,15 @@ export class AuroCombobox extends LitElement {
      */
     private configureDropdown;
     menuWrapper: any;
+    bibtemplate: any;
+    /**
+     * @private
+     * When the dropdown is visible in fullscreen mode, the input is moved to the subheader slot of bibtemplate.
+     * Otherwise, it's moved back to the trigger slot.
+     * @private
+     * @returns {void}
+     */
+    private transportInput;
     /**
      * Binds all behavior needed to the menu after rendering.
      * @private
@@ -190,6 +214,13 @@ export class AuroCombobox extends LitElement {
      */
     private configureMenu;
     menu: Element;
+    /**
+     * @private
+     * Dispatches input's keyboard events from host
+     * This allows key events from the input to be handled by the parent.
+     * @param {KeyboardEvent} event - The keyboard event.
+     */
+    private bubbleUpInputKeyEvent;
     /**
      * Binds all behavior needed to the input after rendering.
      * @private
@@ -238,15 +269,31 @@ export class AuroCombobox extends LitElement {
      * @returns {void}
      */
     reset(): void;
+    /**
+     * Validates value.
+     * @param {boolean} [force=false] - Whether to force validation.
+     */
+    validate(force?: boolean): void;
     updated(changedProperties: any): void;
+    /**
+     * Applies slotted nodes to a target element with a new slot name.
+     * @private
+     * @param {HTMLSlotElement} slot - The slot element containing the nodes to apply.
+     * @param {HTMLElement} target - The target element to apply the nodes to.
+     * @param {string} newSlotName - The new slot name for the applied nodes.
+     * @returns {void}
+     */
+    private transportAssignedNodes;
     /**
      * Watch for slot changes and recalculate the menuoptions.
      * @private
-     * @param {Event} event - slotchange event
+     * @param {Event} event - `slotchange` event.
      * @returns {void}
      */
     private handleSlotChange;
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
-//# sourceMappingURL=auro-combobox.d.ts.map
+import AuroFormValidation from '@auro-formkit/form-validation';
+import { arrayConverter } from '@aurodesignsystem/auro-menu';
+import { arrayOrUndefinedHasChanged } from '@aurodesignsystem/auro-menu';

package/components/combobox/dist/bibtemplateVersion.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const _default: "1.0.0";
2	+ export default _default;

package/components/combobox/dist/{formkit/auro-dropdownVersion.d.ts → dropdownVersion.d.ts} RENAMED Viewed

@@ -1,3 +1,2 @@
 declare const _default: "3.0.0";
 export default _default;
-//# sourceMappingURL=auro-dropdownVersion.d.ts.map

package/components/combobox/dist/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 export { AuroCombobox };
 import { AuroCombobox } from './auro-combobox.js';
-//# sourceMappingURL=index.d.ts.map