@aurodesignsystem-dev/auro-formkit 0.0.0-pr1052.1 → 0.0.0-pr1052.3

package/components/combobox/demo/api.md

@@ -40,15 +40,16 @@
 
 ## Methods
 
-| Method     | Type                                   | Description                                      |
-|------------|----------------------------------------|--------------------------------------------------|
-| [clear](#clear)    | `(): void`                             | Clears the current value of the combobox.        |
-| [focus](#focus)    | `(): void`                             | Focuses the combobox trigger input.              |
-| [hideBib](#hideBib)  | `(): void`                             | Hides the dropdown bib if its open.              |
-| [isValid](#isValid)  | `(): boolean`                          | Checks if the element is valid.                  |
-| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
-| [showBib](#showBib)  | `(): void`                             | Shows the dropdown bib if there are options to show. |
-| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+| Method               | Type                                   | Description                                      |
+|----------------------|----------------------------------------|--------------------------------------------------|
+| [clear](#clear)              | `(): void`                             | Clears the current value of the combobox.        |
+| [focus](#focus)              | `(): void`                             | Focuses the combobox trigger input.              |
+| [hideBib](#hideBib)            | `(): void`                             | Hides the dropdown bib if its open.              |
+| [isValid](#isValid)            | `(): boolean`                          | Checks if the element is valid.                  |
+| [reset](#reset)              | `(): void`                             | Resets component to initial state.               |
+| [showBib](#showBib)            | `(): void`                             | Shows the dropdown bib if there are options to show. |
+| [updateActiveOption](#updateActiveOption) | `(index: number): void`                | Updates the active option in the menu.<br /><br />**index**: Index of the option to make active. |
+| [validate](#validate)           | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## Events
 
@@ -171,7 +172,9 @@ The menu in this example was populated from data from a country/city API. To kee
     size="lg"
     ondark
     noFilter
-    persistInput>
+    persistInput
+    dvInputOnly
+    required>
     <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
     <span slot="label">Name</span>
     <!--
@@ -198,7 +201,9 @@ The menu in this example was populated from data from a country/city API. To kee
   size="lg"
   ondark
   noFilter
-  persistInput>
+  persistInput
+  dvInputOnly
+  required>
   <span slot="bib.fullscreen.headline">Dynamic Combobox Header</span>
   <span slot="label">Name</span>
   <!--
@@ -217,7 +222,7 @@ The menu in this example was populated from data from a country/city API. To kee
 // -----------------------
 import { DynamicData } from './dynamicMenuDataApi';
 
-export function dynamicMenuExample() {
+export async function dynamicMenuExample() {
   // Resets the root menu
   function resetMenu(root) {
     while (root.firstChild) {
@@ -262,16 +267,22 @@ export function dynamicMenuExample() {
 
   // Main javascript that runs all JS to create example
   const dynamicData = new DynamicData();
-  const dynamicMenuExample = document.querySelector('#dynamicMenuExample');
-  const dropdownEl = dynamicMenuExample.shadowRoot.querySelector(dynamicMenuExample.dropdownTag._$litStatic$);
-  const inputEl = dropdownEl.querySelector(dynamicMenuExample.inputTag._$litStatic$);
+  const dynamicMenuExampleEl = document.querySelector('#dynamicMenuExample');
+  const dropdownEl = dynamicMenuExampleEl.shadowRoot.querySelector(dynamicMenuExampleEl.dropdownTag._$litStatic$);
+  const inputEl = dropdownEl.querySelector(dynamicMenuExampleEl.inputTag._$litStatic$);
 
   inputEl.addEventListener('input', () => {
     let data = dynamicData.getData();
     data = dynamicData.filterData(data, inputEl.value);
 
     generateHtml(data);
-  });
+  });
+
+  if (dynamicMenuExampleEl.value && dynamicMenuExampleEl.value.length > 0 && dynamicMenuExampleEl.input.value && (!dynamicMenuExampleEl.menu.availableOptions || dynamicMenuExampleEl.menu.availableOptions.length === 0)) {
+    let data = dynamicData.getData();
+    data = dynamicData.filterData(data, inputEl.value);
+    generateHtml(data);
+  }
 }
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

package/components/combobox/demo/api.min.js

@@ -32,7 +32,7 @@ class DynamicData {
 // Javascript example file
 // -----------------------
 
-function dynamicMenuExample() {
+async function dynamicMenuExample() {
   // Resets the root menu
   function resetMenu(root) {
     while (root.firstChild) {
@@ -76,9 +76,9 @@ function dynamicMenuExample() {
 
   // Main javascript that runs all JS to create example
   const dynamicData = new DynamicData();
-  const dynamicMenuExample = document.querySelector('#dynamicMenuExample');
-  const dropdownEl = dynamicMenuExample.shadowRoot.querySelector(dynamicMenuExample.dropdownTag._$litStatic$);
-  const inputEl = dropdownEl.querySelector(dynamicMenuExample.inputTag._$litStatic$);
+  const dynamicMenuExampleEl = document.querySelector('#dynamicMenuExample');
+  const dropdownEl = dynamicMenuExampleEl.shadowRoot.querySelector(dynamicMenuExampleEl.dropdownTag._$litStatic$);
+  const inputEl = dropdownEl.querySelector(dynamicMenuExampleEl.inputTag._$litStatic$);
 
   inputEl.addEventListener('input', () => {
     let data = dynamicData.getData();
@@ -86,6 +86,13 @@ function dynamicMenuExample() {
 
     generateHtml(data);
   });
+
+
+  if (dynamicMenuExampleEl.value && dynamicMenuExampleEl.value.length > 0 && dynamicMenuExampleEl.input.value && (!dynamicMenuExampleEl.menu.availableOptions || dynamicMenuExampleEl.menu.availableOptions.length === 0)) {
+    let data = dynamicData.getData();
+    data = dynamicData.filterData(data, inputEl.value);
+    generateHtml(data);
+  }
 }
 
 function valueExample() {
@@ -16728,6 +16735,10 @@ class AuroCombobox extends AuroElement$1 {
     this.generateOptionsArray();
     this.availableOptions = [];
     this.updateFilter();
+
+    if (this.value && this.input.value && !this.menu.value) {
+      this.menu.value = this.value;
+    }
   }
 
   /**
@@ -17199,6 +17210,15 @@ class AuroCombobox extends AuroElement$1 {
   async updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
+      if (this.value && this.value.length > 0) {
+        this.hasValue = true;
+      } else {
+        this.hasValue = false;
+      }
+
+      if (this.hasValue && !this.input.value && (!this.menu.availableOptions || this.menu.availableOptions.length === 0)) {
+        this.input.value = this.value;
+      }
 
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
@@ -17267,6 +17287,16 @@ class AuroCombobox extends AuroElement$1 {
     });
   }
 
+  /**
+   * Updates the active option in the menu.
+   * @param {number} index - Index of the option to make active.
+   */
+  updateActiveOption(index) {
+    if (this.menu) {
+      this.menu.updateActiveOption(index);
+    }
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -17292,12 +17322,6 @@ class AuroCombobox extends AuroElement$1 {
 
         this.handleMenuOptions();
 
-
-        console.warn('make a selection?');
-        console.info('this.hasFocus', this.componentHasFocus);
-        console.info('this.inputValue', this.inputValue);
-        console.info('this.value', this.value);
-
         break;
 
       // Programmatically inject as the slot cannot be carried over to bibtemplate.
@@ -18209,7 +18233,6 @@ class AuroMenu extends AuroElement$1 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {

package/components/combobox/demo/index.min.js

@@ -16583,6 +16583,10 @@ class AuroCombobox extends AuroElement$1 {
     this.generateOptionsArray();
     this.availableOptions = [];
     this.updateFilter();
+
+    if (this.value && this.input.value && !this.menu.value) {
+      this.menu.value = this.value;
+    }
   }
 
   /**
@@ -17054,6 +17058,15 @@ class AuroCombobox extends AuroElement$1 {
   async updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
+      if (this.value && this.value.length > 0) {
+        this.hasValue = true;
+      } else {
+        this.hasValue = false;
+      }
+
+      if (this.hasValue && !this.input.value && (!this.menu.availableOptions || this.menu.availableOptions.length === 0)) {
+        this.input.value = this.value;
+      }
 
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
@@ -17122,6 +17135,16 @@ class AuroCombobox extends AuroElement$1 {
     });
   }
 
+  /**
+   * Updates the active option in the menu.
+   * @param {number} index - Index of the option to make active.
+   */
+  updateActiveOption(index) {
+    if (this.menu) {
+      this.menu.updateActiveOption(index);
+    }
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -17147,12 +17170,6 @@ class AuroCombobox extends AuroElement$1 {
 
         this.handleMenuOptions();
 
-
-        console.warn('make a selection?');
-        console.info('this.hasFocus', this.componentHasFocus);
-        console.info('this.inputValue', this.inputValue);
-        console.info('this.value', this.value);
-
         break;
 
       // Programmatically inject as the slot cannot be carried over to bibtemplate.
@@ -18064,7 +18081,6 @@ class AuroMenu extends AuroElement$1 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {

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

@@ -461,6 +461,7 @@ export class AuroCombobox extends AuroElement {
      */
     validate(force?: boolean): void;
     updated(changedProperties: any): Promise<void>;
+    hasValue: boolean;
     /**
      * Applies slotted nodes to a target element with a new slot name.
      * @private
@@ -470,6 +471,11 @@ export class AuroCombobox extends AuroElement {
      * @returns {void}
      */
     private transportAssignedNodes;
+    /**
+     * Updates the active option in the menu.
+     * @param {number} index - Index of the option to make active.
+     */
+    updateActiveOption(index: number): void;
     /**
      * Watch for slot changes and recalculate the menuoptions.
      * @private

package/components/combobox/dist/index.js

@@ -16501,6 +16501,10 @@ class AuroCombobox extends AuroElement {
     this.generateOptionsArray();
     this.availableOptions = [];
     this.updateFilter();
+
+    if (this.value && this.input.value && !this.menu.value) {
+      this.menu.value = this.value;
+    }
   }
 
   /**
@@ -16972,6 +16976,15 @@ class AuroCombobox extends AuroElement {
   async updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
+      if (this.value && this.value.length > 0) {
+        this.hasValue = true;
+      } else {
+        this.hasValue = false;
+      }
+
+      if (this.hasValue && !this.input.value && (!this.menu.availableOptions || this.menu.availableOptions.length === 0)) {
+        this.input.value = this.value;
+      }
 
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
@@ -17040,6 +17053,16 @@ class AuroCombobox extends AuroElement {
     });
   }
 
+  /**
+   * Updates the active option in the menu.
+   * @param {number} index - Index of the option to make active.
+   */
+  updateActiveOption(index) {
+    if (this.menu) {
+      this.menu.updateActiveOption(index);
+    }
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -17065,12 +17088,6 @@ class AuroCombobox extends AuroElement {
 
         this.handleMenuOptions();
 
-
-        console.warn('make a selection?');
-        console.info('this.hasFocus', this.componentHasFocus);
-        console.info('this.inputValue', this.inputValue);
-        console.info('this.value', this.value);
-
         break;
 
       // Programmatically inject as the slot cannot be carried over to bibtemplate.

package/components/combobox/dist/registered.js

@@ -16501,6 +16501,10 @@ class AuroCombobox extends AuroElement {
     this.generateOptionsArray();
     this.availableOptions = [];
     this.updateFilter();
+
+    if (this.value && this.input.value && !this.menu.value) {
+      this.menu.value = this.value;
+    }
   }
 
   /**
@@ -16972,6 +16976,15 @@ class AuroCombobox extends AuroElement {
   async updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
+      if (this.value && this.value.length > 0) {
+        this.hasValue = true;
+      } else {
+        this.hasValue = false;
+      }
+
+      if (this.hasValue && !this.input.value && (!this.menu.availableOptions || this.menu.availableOptions.length === 0)) {
+        this.input.value = this.value;
+      }
 
       if (this.value) {
         // If the value got set programmatically make sure we hide the bib
@@ -17040,6 +17053,16 @@ class AuroCombobox extends AuroElement {
     });
   }
 
+  /**
+   * Updates the active option in the menu.
+   * @param {number} index - Index of the option to make active.
+   */
+  updateActiveOption(index) {
+    if (this.menu) {
+      this.menu.updateActiveOption(index);
+    }
+  }
+
   /**
    * Watch for slot changes and recalculate the menuoptions.
    * @private
@@ -17065,12 +17088,6 @@ class AuroCombobox extends AuroElement {
 
         this.handleMenuOptions();
 
-
-        console.warn('make a selection?');
-        console.info('this.hasFocus', this.componentHasFocus);
-        console.info('this.inputValue', this.inputValue);
-        console.info('this.value', this.value);
-
         break;
 
       // Programmatically inject as the slot cannot be carried over to bibtemplate.

package/components/input/demo/index.md

@@ -57,10 +57,15 @@ The `<auro-input>` element should be used in situations where users may:
 <div class="exampleWrapper--ondark">
   <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
   <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
-  <auro-input id="snowflakePill" layout="snowflake" shape="snowflake" size="lg" placeholder="Departure" style="width: 249px;" ondark required>
+  <auro-input dvInputOnly value="lax" id="snowflakePill" layout="snowflake" shape="snowflake" size="lg" placeholder="Departure" style="width: 249px;" ondark required>
     <span slot="ariaLabel.clear">Clear All</span>
     <label slot="label">From</label>
     <span slot="helpText">Example help text</span>
+    <span slot="displayValue">
+      <div>
+        <div class="subText">Los Angeles</div>
+      </div>
+    </span>
   </auro-input>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>

package/components/menu/demo/api.md

@@ -22,9 +22,10 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Methods
 
-| Method  | Type       | Description                                      |
-|---------|------------|--------------------------------------------------|
-| [reset](#reset) | `(): void` | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
+| Method               | Type                    | Description                                      |
+|----------------------|-------------------------|--------------------------------------------------|
+| [reset](#reset)              | `(): void`              | Resets the menu to its initial state.<br />This is the only way to return value to undefined. |
+| [updateActiveOption](#updateActiveOption) | `(index: number): void` | Updates the active option state and dispatches events.<br /><br />**index**: Index of the option to make active. |
 
 ## Events
 

package/components/menu/demo/api.min.js

@@ -1026,7 +1026,6 @@ class AuroMenu extends AuroElement$1 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {

package/components/menu/demo/index.min.js

@@ -986,7 +986,6 @@ class AuroMenu extends AuroElement$1 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {

package/components/menu/dist/auro-menu.d.ts

@@ -204,10 +204,9 @@ export class AuroMenu extends AuroElement {
     private navigateOptions;
     /**
      * Updates the active option state and dispatches events.
-     * @private
      * @param {number} index - Index of the option to make active.
      */
-    private updateActiveOption;
+    updateActiveOption(index: number): void;
     /**
      * Handles custom events defined on options.
      * @private

package/components/menu/dist/index.js

@@ -993,7 +993,6 @@ class AuroMenu extends AuroElement$1 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {

package/components/menu/dist/registered.js

@@ -952,7 +952,6 @@ class AuroMenu extends AuroElement$1 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {

package/components/select/demo/api.min.js

@@ -9840,7 +9840,6 @@ class AuroMenu extends AuroElement$4 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {

package/components/select/demo/index.min.js

@@ -9748,7 +9748,6 @@ class AuroMenu extends AuroElement$4 {
 
   /**
    * Updates the active option state and dispatches events.
-   * @private
    * @param {number} index - Index of the option to make active.
    */
   updateActiveOption(index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr1052.1",
+  "version": "0.0.0-pr1052.3",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {