npm - @aurodesignsystem-dev/auro-formkit - Versions diffs - 0.0.0-pr1052.3 → 0.0.0-pr1052.5 - Mend

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

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 (7) hide show

package/components/combobox/demo/api.md +35 -32
package/components/combobox/demo/api.min.js +45 -55
package/components/combobox/demo/index.min.js +45 -55
package/components/combobox/dist/auro-combobox.d.ts +31 -33
package/components/combobox/dist/index.js +45 -55
package/components/combobox/dist/registered.js +45 -55
package/package.json +1 -1

package/components/combobox/demo/api.md CHANGED Viewed

@@ -5,38 +5,41 @@
 ## Properties
-| Property                        | Attribute                       | Modifiers | Type                  | Default        | Description                                      |
-|---------------------------------|---------------------------------|-----------|-----------------------|----------------|--------------------------------------------------|
-| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 |           | `boolean`             |                | If declared, bib's position will be automatically calculated where to appear. |
-| [autocomplete](#autocomplete)                  | `autocomplete`                  |           | `string`              | "false"        | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
-| [checkmark](#checkmark)                     | `checkmark`                     |           | `boolean`             |                | When attribute is present auro-menu will apply check marks to selected options. |
-| [disabled](#disabled)                      | `disabled`                      |           | `boolean`             |                | If set, disables the combobox.                   |
-| [dvInputOnly](#dvInputOnly)                   | `dvInputOnly`                   |           | `boolean`             |                | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
-| [error](#error)                         | `error`                         |           | `string`              |                | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
-| [format](#format)                        | `format`                        |           | `string`              |                | Specifies the input mask format.                 |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          |           | `string`              | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| [inputValue](#inputValue)                    |                                 | readonly  | `string \| undefined` |                | Returns the current value of the input element within the combobox. |
-| [inputmode](#inputmode)                     | `inputmode`                     |           | `string`              |                | Exposes inputmode attribute for input.           |
-| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       |           | `boolean`             |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
-| [layout](#layout)                        |                                 |           | `string`              |                |                                                  |
-| [matchWidth](#matchWidth)                    | `matchWidth`                    |           | `boolean`             | true           | If declared, the popover and trigger will be set to the same width. |
-| [noFilter](#noFilter)                      | `noFilter`                      |           | `boolean`             |                | If set, combobox will not filter menuoptions based in input. |
-| [noFlip](#noFlip)                        | `noFlip`                        |           | `boolean`             | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [noValidate](#noValidate)                    | `noValidate`                    |           | `boolean`             |                | If set, disables auto-validation on blur.        |
-| [offset](#offset)                        | `offset`                        |           | `number`              | "0"            | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                        | `onDark`                        |           | `boolean`             |                | If declared, onDark styles will be applied to the trigger. |
-| [optionSelected](#optionSelected)                | `optionSelected`                |           | `HTMLElement`         |                | Specifies the current selected option.           |
-| [persistInput](#persistInput)                  | `persistInput`                  |           | `Boolean`             |                | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
-| [placeholder](#placeholder)                   | `placeholder`                   |           | `string`              |                | Define custom placeholder text, only supported by date input formats. |
-| [placement](#placement)                     | `placement`                     |           | `string`              | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
-| [required](#required)                      | `required`                      |           | `boolean`             |                | 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. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  |           | `string`              |                | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` |           | `string`              |                | Custom help text message to display when validity = `valueMissing`. |
-| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   |           | `boolean`             |                | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
-| [type](#type)                          | `type`                          |           | `string`              |                | Applies the defined value as the type attribute on auro-input. |
-| [validity](#validity)                      | `validity`                      |           | `string`              |                | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         |           | `string`              |                | Value selected for the dropdown menu.            |
+| Property                        | Attribute                       | Type                  | Default                    | Description                                      |
+|---------------------------------|---------------------------------|-----------------------|----------------------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean`             | false                      | If declared, bib's position will be automatically calculated where to appear. |
+| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`              | "false"                    | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
+| [checkmark](#checkmark)                     | `checkmark`                     | `boolean`             | false                      | When attribute is present auro-menu will apply check marks to selected options. |
+| [disabled](#disabled)                      | `disabled`                      | `boolean`             | false                      | If set, disables the combobox.                   |
+| [dvInputOnly](#dvInputOnly)                   | `dvInputOnly`                   | `boolean`             | false                      | If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked. |
+| [error](#error)                         | `error`                         | `string`              |                            | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [format](#format)                        | `format`                        | `string`              |                            | Specifies the input mask format.                 |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`              | "sm"                       | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [inputValue](#inputValue)                    |                                 | `string \| undefined` |                            | Returns the current value of the input element within the combobox. |
+| [inputmode](#inputmode)                     | `inputmode`                     | `string`              |                            | Exposes inputmode attribute for input.           |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`             |                            | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
+| [layout](#layout)                        |                                 | `string`              | "classic"                  |                                                  |
+| [matchWidth](#matchWidth)                    | `matchWidth`                    | `boolean`             | true                       | If declared, the popover and trigger will be set to the same width. |
+| [msgSelectionMissing](#msgSelectionMissing)           |                                 | `string`              | "Please select an option." |                                                  |
+| [noFilter](#noFilter)                      | `noFilter`                      | `boolean`             | false                      | If set, combobox will not filter menuoptions based in input. |
+| [noFlip](#noFlip)                        | `noFlip`                        | `boolean`             | "false"                    | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`             | false                      | If set, disables auto-validation on blur.        |
+| [offset](#offset)                        | `offset`                        | `number`              | "0"                        | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                        | `onDark`                        | `boolean`             |                            | If declared, onDark styles will be applied to the trigger. |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `HTMLElement`         |                            | Specifies the current selected option.           |
+| [persistInput](#persistInput)                  | `persistInput`                  | `Boolean`             | false                      | If declared, selecting a menu option will not change the input value. By doing so,<br />the current menu filter will be preserved and the user can continue from their last<br />filter state. It is recommended to use this in combination with the `displayValue` slot. |
+| [placeholder](#placeholder)                   | `placeholder`                   | `string`              |                            | Define custom placeholder text, only supported by date input formats. |
+| [placement](#placement)                     | `placement`                     | `string`              | "bottom-start"             | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
+| [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. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`              |                            | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`              |                            | Custom help text message to display when validity = `valueMissing`. |
+| [shape](#shape)                         |                                 | `string`              | "classic"                  |                                                  |
+| [size](#size)                          |                                 | `string`              | "xl"                       |                                                  |
+| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `boolean`             | false                      | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| [type](#type)                          | `type`                          | `string`              |                            | Applies the defined value as the type attribute on auro-input. |
+| [validity](#validity)                      | `validity`                      | `string`              |                            | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `string`              | "undefined"                | Value selected for the dropdown menu.            |
 ## Methods

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

@@ -16193,80 +16193,59 @@ class AuroCombobox extends AuroElement$1 {
   constructor() {
     super();
-    this.matchWidth = true;
-    this.privateDefaults();
-  }
-  /**
-   * @private
-   * @returns {void} Internal defaults.
-   */
-  privateDefaults() {
-    this.touched = false;
-    this.dropdownOpen = false;
-    this.dropdownId = undefined;
-    this.onDark = false;
-    this.noFilter = false;
-    this.validity = undefined;
-    this.value = undefined;
-    this.optionSelected = undefined;
-    this.checkmark = false;
+    // Defaults that effect the combobox behavior and state
     this.disabled = false;
+    this.msgSelectionMissing = 'Please select an option.';
+    this.noFilter = false;
     this.noValidate = false;
-    this.required = false;
-    this.triggerIcon = false;
-    this.availableOptions = [];
     this.optionActive = null;
-    this.msgSelectionMissing = 'Please select an option.';
-    this.fullscreenBreakpoint = 'sm';
-    this.largeFullscreenHeadline = false;
-    this.validation = new AuroFormValidation$1();
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
-    this.isHiddenWhileLoading = false;
     this.persistInput = false;
+    this.required = false;
+    this.value = undefined;
+    // Defaults that effect the overall layout of the combobox
+    this.checkmark = false;
     this.dvInputOnly = false;
-    // Error message
-    this.errorMessage = null;
-    // Layout Config
-    /**
-     * @private
-     */
+    this.fullscreenBreakpoint = 'sm';
     this.layout = 'classic';
-    /**
-     * @private
-     */
+    this.matchWidth = true;
     this.shape = 'classic';
-    /**
-     * @private
-     */
     this.size = 'xl';
+    this.triggerIcon = false;
-    // floaterConfig
+    // Defaults that effect the dropdown
     this.placement = 'bottom-start';
     this.offset = 0;
     this.noFlip = false;
     this.autoPlacement = false;
+    this.privateDefaults();
+  }
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  privateDefaults() {
     const versioning = new AuroDependencyVersioning$3();
     this.dropdownTag = versioning.generateTag('auro-formkit-combobox-dropdown', dropdownVersion, AuroDropdown);
     this.bibtemplateTag = versioning.generateTag('auro-formkit-combobox-bibtemplate', bibTemplateVersion, AuroBibtemplate);
     this.inputTag = versioning.generateTag('auro-formkit-combobox-input', inputVersion, AuroInput);
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', '1.0.0', AuroHelpText);
+    this.availableOptions = [];
+    this.dropdownId = undefined;
+    this.dropdownOpen = false;
+    this.errorMessage = null;
+    this.isHiddenWhileLoading = false;
+    this.largeFullscreenHeadline = false;
+    this.onDark = false;
+    this.optionSelected = undefined;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.touched = false;
+    this.validation = new AuroFormValidation$1();
+    this.validity = undefined;
   }
   // This function is to define props used within the scope of this component
@@ -16591,6 +16570,13 @@ class AuroCombobox extends AuroElement$1 {
     return this.input.value;
   }
+  /**
+   * Sets the value of the input element within the combobox.
+   */
+  set inputValue(value) {
+    this.input.value = value;
+  }
   /**
    * Checks if the element is valid.
    * @returns {boolean} - Returns true if the element is valid, false otherwise.
@@ -16730,6 +16716,7 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleMenuOptions() {
+    console.warn('handleMenuOptions()');
     this.resetMenuMatchword();
     this.generateOptionsArray();
@@ -16737,7 +16724,7 @@ class AuroCombobox extends AuroElement$1 {
     this.updateFilter();
     if (this.value && this.input.value && !this.menu.value) {
-      this.menu.value = this.value;
+      this.syncValuesAndStates();
     }
   }
@@ -16917,6 +16904,7 @@ class AuroCombobox extends AuroElement$1 {
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
+      console.warn('event auroMenu-selectedOption', evt);
       if (this.menu.optionSelected) {
         const selected = this.menu.optionSelected;
@@ -16926,7 +16914,7 @@ class AuroCombobox extends AuroElement$1 {
         if (!this.value || this.value !== this.optionSelected.value) {
           this.value = this.optionSelected.value;
-          this.menu.value = this.value;
+          // this.menu.value = this.value;
         }
         this.updateTriggerTextDisplay();
@@ -17021,6 +17009,7 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    console.warn('handleInputValueChange', event);
     if (event.target === this.inputInBib) {
       this.input.value = this.inputInBib.value;
       return;
@@ -17304,6 +17293,7 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleSlotChange(event) {
+    console.warn('handleSlotChange', event);
     switch (event.target.name) {
       case '':
         if (!this.menu || this.menu !== this.querySelector('auro-menu, [auro-menu]')) {

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

@@ -16041,80 +16041,59 @@ class AuroCombobox extends AuroElement$1 {
   constructor() {
     super();
-    this.matchWidth = true;
-    this.privateDefaults();
-  }
-  /**
-   * @private
-   * @returns {void} Internal defaults.
-   */
-  privateDefaults() {
-    this.touched = false;
-    this.dropdownOpen = false;
-    this.dropdownId = undefined;
-    this.onDark = false;
-    this.noFilter = false;
-    this.validity = undefined;
-    this.value = undefined;
-    this.optionSelected = undefined;
-    this.checkmark = false;
+    // Defaults that effect the combobox behavior and state
     this.disabled = false;
+    this.msgSelectionMissing = 'Please select an option.';
+    this.noFilter = false;
     this.noValidate = false;
-    this.required = false;
-    this.triggerIcon = false;
-    this.availableOptions = [];
     this.optionActive = null;
-    this.msgSelectionMissing = 'Please select an option.';
-    this.fullscreenBreakpoint = 'sm';
-    this.largeFullscreenHeadline = false;
-    this.validation = new AuroFormValidation$1();
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
-    this.isHiddenWhileLoading = false;
     this.persistInput = false;
+    this.required = false;
+    this.value = undefined;
+    // Defaults that effect the overall layout of the combobox
+    this.checkmark = false;
     this.dvInputOnly = false;
-    // Error message
-    this.errorMessage = null;
-    // Layout Config
-    /**
-     * @private
-     */
+    this.fullscreenBreakpoint = 'sm';
     this.layout = 'classic';
-    /**
-     * @private
-     */
+    this.matchWidth = true;
     this.shape = 'classic';
-    /**
-     * @private
-     */
     this.size = 'xl';
+    this.triggerIcon = false;
-    // floaterConfig
+    // Defaults that effect the dropdown
     this.placement = 'bottom-start';
     this.offset = 0;
     this.noFlip = false;
     this.autoPlacement = false;
+    this.privateDefaults();
+  }
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  privateDefaults() {
     const versioning = new AuroDependencyVersioning$3();
     this.dropdownTag = versioning.generateTag('auro-formkit-combobox-dropdown', dropdownVersion, AuroDropdown);
     this.bibtemplateTag = versioning.generateTag('auro-formkit-combobox-bibtemplate', bibTemplateVersion, AuroBibtemplate);
     this.inputTag = versioning.generateTag('auro-formkit-combobox-input', inputVersion, AuroInput);
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', '1.0.0', AuroHelpText);
+    this.availableOptions = [];
+    this.dropdownId = undefined;
+    this.dropdownOpen = false;
+    this.errorMessage = null;
+    this.isHiddenWhileLoading = false;
+    this.largeFullscreenHeadline = false;
+    this.onDark = false;
+    this.optionSelected = undefined;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.touched = false;
+    this.validation = new AuroFormValidation$1();
+    this.validity = undefined;
   }
   // This function is to define props used within the scope of this component
@@ -16439,6 +16418,13 @@ class AuroCombobox extends AuroElement$1 {
     return this.input.value;
   }
+  /**
+   * Sets the value of the input element within the combobox.
+   */
+  set inputValue(value) {
+    this.input.value = value;
+  }
   /**
    * Checks if the element is valid.
    * @returns {boolean} - Returns true if the element is valid, false otherwise.
@@ -16578,6 +16564,7 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleMenuOptions() {
+    console.warn('handleMenuOptions()');
     this.resetMenuMatchword();
     this.generateOptionsArray();
@@ -16585,7 +16572,7 @@ class AuroCombobox extends AuroElement$1 {
     this.updateFilter();
     if (this.value && this.input.value && !this.menu.value) {
-      this.menu.value = this.value;
+      this.syncValuesAndStates();
     }
   }
@@ -16765,6 +16752,7 @@ class AuroCombobox extends AuroElement$1 {
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
+      console.warn('event auroMenu-selectedOption', evt);
       if (this.menu.optionSelected) {
         const selected = this.menu.optionSelected;
@@ -16774,7 +16762,7 @@ class AuroCombobox extends AuroElement$1 {
         if (!this.value || this.value !== this.optionSelected.value) {
           this.value = this.optionSelected.value;
-          this.menu.value = this.value;
+          // this.menu.value = this.value;
         }
         this.updateTriggerTextDisplay();
@@ -16869,6 +16857,7 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    console.warn('handleInputValueChange', event);
     if (event.target === this.inputInBib) {
       this.input.value = this.inputInBib.value;
       return;
@@ -17152,6 +17141,7 @@ class AuroCombobox extends AuroElement$1 {
    * @returns {void}
    */
   handleSlotChange(event) {
+    console.warn('handleSlotChange', event);
     switch (event.target.name) {
       case '':
         if (!this.menu || this.menu !== this.querySelector('auro-menu, [auro-menu]')) {

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

@@ -273,52 +273,50 @@ export class AuroCombobox extends AuroElement {
      *
      */
     static register(name?: string): void;
-    matchWidth: boolean;
-    /**
-     * @private
-     * @returns {void} Internal defaults.
-     */
-    private privateDefaults;
-    touched: boolean;
-    dropdownOpen: any;
-    dropdownId: any;
-    onDark: boolean;
-    noFilter: boolean;
-    validity: any;
-    value: any;
-    optionSelected: any;
-    checkmark: boolean;
     disabled: boolean;
+    msgSelectionMissing: string;
+    noFilter: boolean;
     noValidate: boolean;
-    required: boolean;
-    triggerIcon: boolean;
-    availableOptions: any[];
     optionActive: any;
-    msgSelectionMissing: string;
-    fullscreenBreakpoint: string;
-    largeFullscreenHeadline: boolean;
-    validation: AuroFormValidation;
-    runtimeUtils: any;
-    isHiddenWhileLoading: boolean;
     persistInput: boolean;
+    required: boolean;
+    value: any;
+    checkmark: boolean;
     dvInputOnly: boolean;
-    errorMessage: any;
-    /**
-     * @private
-     */
-    private shape;
-    /**
-     * @private
-     */
-    private size;
+    fullscreenBreakpoint: string;
+    matchWidth: boolean;
+    shape: string;
+    size: string;
+    triggerIcon: boolean;
     placement: string;
     offset: number;
     noFlip: boolean;
     autoPlacement: boolean;
+    /**
+     * @private
+     * @returns {void} Internal defaults.
+     */
+    private privateDefaults;
     dropdownTag: any;
     bibtemplateTag: any;
     inputTag: any;
     helpTextTag: any;
+    availableOptions: any[];
+    dropdownId: any;
+    dropdownOpen: any;
+    errorMessage: any;
+    isHiddenWhileLoading: boolean;
+    largeFullscreenHeadline: boolean;
+    onDark: boolean;
+    optionSelected: any;
+    runtimeUtils: any;
+    touched: boolean;
+    validation: AuroFormValidation;
+    validity: any;
+    /**
+     * Sets the value of the input element within the combobox.
+     */
+    set inputValue(value: string | undefined);
     /**
      * Returns the current value of the input element within the combobox.
      * @returns {string|undefined} The value of the input element, or undefined if the input is not present.

package/components/combobox/dist/index.js CHANGED Viewed

@@ -15959,80 +15959,59 @@ class AuroCombobox extends AuroElement {
   constructor() {
     super();
-    this.matchWidth = true;
-    this.privateDefaults();
-  }
-  /**
-   * @private
-   * @returns {void} Internal defaults.
-   */
-  privateDefaults() {
-    this.touched = false;
-    this.dropdownOpen = false;
-    this.dropdownId = undefined;
-    this.onDark = false;
-    this.noFilter = false;
-    this.validity = undefined;
-    this.value = undefined;
-    this.optionSelected = undefined;
-    this.checkmark = false;
+    // Defaults that effect the combobox behavior and state
     this.disabled = false;
+    this.msgSelectionMissing = 'Please select an option.';
+    this.noFilter = false;
     this.noValidate = false;
-    this.required = false;
-    this.triggerIcon = false;
-    this.availableOptions = [];
     this.optionActive = null;
-    this.msgSelectionMissing = 'Please select an option.';
-    this.fullscreenBreakpoint = 'sm';
-    this.largeFullscreenHeadline = false;
-    this.validation = new AuroFormValidation$1();
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
-    this.isHiddenWhileLoading = false;
     this.persistInput = false;
+    this.required = false;
+    this.value = undefined;
+    // Defaults that effect the overall layout of the combobox
+    this.checkmark = false;
     this.dvInputOnly = false;
-    // Error message
-    this.errorMessage = null;
-    // Layout Config
-    /**
-     * @private
-     */
+    this.fullscreenBreakpoint = 'sm';
     this.layout = 'classic';
-    /**
-     * @private
-     */
+    this.matchWidth = true;
     this.shape = 'classic';
-    /**
-     * @private
-     */
     this.size = 'xl';
+    this.triggerIcon = false;
-    // floaterConfig
+    // Defaults that effect the dropdown
     this.placement = 'bottom-start';
     this.offset = 0;
     this.noFlip = false;
     this.autoPlacement = false;
+    this.privateDefaults();
+  }
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  privateDefaults() {
     const versioning = new AuroDependencyVersioning$3();
     this.dropdownTag = versioning.generateTag('auro-formkit-combobox-dropdown', dropdownVersion, AuroDropdown);
     this.bibtemplateTag = versioning.generateTag('auro-formkit-combobox-bibtemplate', bibTemplateVersion, AuroBibtemplate);
     this.inputTag = versioning.generateTag('auro-formkit-combobox-input', inputVersion, AuroInput);
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', '1.0.0', AuroHelpText);
+    this.availableOptions = [];
+    this.dropdownId = undefined;
+    this.dropdownOpen = false;
+    this.errorMessage = null;
+    this.isHiddenWhileLoading = false;
+    this.largeFullscreenHeadline = false;
+    this.onDark = false;
+    this.optionSelected = undefined;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.touched = false;
+    this.validation = new AuroFormValidation$1();
+    this.validity = undefined;
   }
   // This function is to define props used within the scope of this component
@@ -16357,6 +16336,13 @@ class AuroCombobox extends AuroElement {
     return this.input.value;
   }
+  /**
+   * Sets the value of the input element within the combobox.
+   */
+  set inputValue(value) {
+    this.input.value = value;
+  }
   /**
    * Checks if the element is valid.
    * @returns {boolean} - Returns true if the element is valid, false otherwise.
@@ -16496,6 +16482,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleMenuOptions() {
+    console.warn('handleMenuOptions()');
     this.resetMenuMatchword();
     this.generateOptionsArray();
@@ -16503,7 +16490,7 @@ class AuroCombobox extends AuroElement {
     this.updateFilter();
     if (this.value && this.input.value && !this.menu.value) {
-      this.menu.value = this.value;
+      this.syncValuesAndStates();
     }
   }
@@ -16683,6 +16670,7 @@ class AuroCombobox extends AuroElement {
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
+      console.warn('event auroMenu-selectedOption', evt);
       if (this.menu.optionSelected) {
         const selected = this.menu.optionSelected;
@@ -16692,7 +16680,7 @@ class AuroCombobox extends AuroElement {
         if (!this.value || this.value !== this.optionSelected.value) {
           this.value = this.optionSelected.value;
-          this.menu.value = this.value;
+          // this.menu.value = this.value;
         }
         this.updateTriggerTextDisplay();
@@ -16787,6 +16775,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    console.warn('handleInputValueChange', event);
     if (event.target === this.inputInBib) {
       this.input.value = this.inputInBib.value;
       return;
@@ -17070,6 +17059,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleSlotChange(event) {
+    console.warn('handleSlotChange', event);
     switch (event.target.name) {
       case '':
         if (!this.menu || this.menu !== this.querySelector('auro-menu, [auro-menu]')) {

package/components/combobox/dist/registered.js CHANGED Viewed

@@ -15959,80 +15959,59 @@ class AuroCombobox extends AuroElement {
   constructor() {
     super();
-    this.matchWidth = true;
-    this.privateDefaults();
-  }
-  /**
-   * @private
-   * @returns {void} Internal defaults.
-   */
-  privateDefaults() {
-    this.touched = false;
-    this.dropdownOpen = false;
-    this.dropdownId = undefined;
-    this.onDark = false;
-    this.noFilter = false;
-    this.validity = undefined;
-    this.value = undefined;
-    this.optionSelected = undefined;
-    this.checkmark = false;
+    // Defaults that effect the combobox behavior and state
     this.disabled = false;
+    this.msgSelectionMissing = 'Please select an option.';
+    this.noFilter = false;
     this.noValidate = false;
-    this.required = false;
-    this.triggerIcon = false;
-    this.availableOptions = [];
     this.optionActive = null;
-    this.msgSelectionMissing = 'Please select an option.';
-    this.fullscreenBreakpoint = 'sm';
-    this.largeFullscreenHeadline = false;
-    this.validation = new AuroFormValidation$1();
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
-    this.isHiddenWhileLoading = false;
     this.persistInput = false;
+    this.required = false;
+    this.value = undefined;
+    // Defaults that effect the overall layout of the combobox
+    this.checkmark = false;
     this.dvInputOnly = false;
-    // Error message
-    this.errorMessage = null;
-    // Layout Config
-    /**
-     * @private
-     */
+    this.fullscreenBreakpoint = 'sm';
     this.layout = 'classic';
-    /**
-     * @private
-     */
+    this.matchWidth = true;
     this.shape = 'classic';
-    /**
-     * @private
-     */
     this.size = 'xl';
+    this.triggerIcon = false;
-    // floaterConfig
+    // Defaults that effect the dropdown
     this.placement = 'bottom-start';
     this.offset = 0;
     this.noFlip = false;
     this.autoPlacement = false;
+    this.privateDefaults();
+  }
+  /**
+   * @private
+   * @returns {void} Internal defaults.
+   */
+  privateDefaults() {
     const versioning = new AuroDependencyVersioning$3();
     this.dropdownTag = versioning.generateTag('auro-formkit-combobox-dropdown', dropdownVersion, AuroDropdown);
     this.bibtemplateTag = versioning.generateTag('auro-formkit-combobox-bibtemplate', bibTemplateVersion, AuroBibtemplate);
     this.inputTag = versioning.generateTag('auro-formkit-combobox-input', inputVersion, AuroInput);
     this.helpTextTag = versioning.generateTag('auro-formkit-input-helptext', '1.0.0', AuroHelpText);
+    this.availableOptions = [];
+    this.dropdownId = undefined;
+    this.dropdownOpen = false;
+    this.errorMessage = null;
+    this.isHiddenWhileLoading = false;
+    this.largeFullscreenHeadline = false;
+    this.onDark = false;
+    this.optionSelected = undefined;
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
+    this.touched = false;
+    this.validation = new AuroFormValidation$1();
+    this.validity = undefined;
   }
   // This function is to define props used within the scope of this component
@@ -16357,6 +16336,13 @@ class AuroCombobox extends AuroElement {
     return this.input.value;
   }
+  /**
+   * Sets the value of the input element within the combobox.
+   */
+  set inputValue(value) {
+    this.input.value = value;
+  }
   /**
    * Checks if the element is valid.
    * @returns {boolean} - Returns true if the element is valid, false otherwise.
@@ -16496,6 +16482,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleMenuOptions() {
+    console.warn('handleMenuOptions()');
     this.resetMenuMatchword();
     this.generateOptionsArray();
@@ -16503,7 +16490,7 @@ class AuroCombobox extends AuroElement {
     this.updateFilter();
     if (this.value && this.input.value && !this.menu.value) {
-      this.menu.value = this.value;
+      this.syncValuesAndStates();
     }
   }
@@ -16683,6 +16670,7 @@ class AuroCombobox extends AuroElement {
     // handle the menu event for an option selection
     this.menu.addEventListener('auroMenu-selectedOption', (evt) => {
+      console.warn('event auroMenu-selectedOption', evt);
       if (this.menu.optionSelected) {
         const selected = this.menu.optionSelected;
@@ -16692,7 +16680,7 @@ class AuroCombobox extends AuroElement {
         if (!this.value || this.value !== this.optionSelected.value) {
           this.value = this.optionSelected.value;
-          this.menu.value = this.value;
+          // this.menu.value = this.value;
         }
         this.updateTriggerTextDisplay();
@@ -16787,6 +16775,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleInputValueChange(event) {
+    console.warn('handleInputValueChange', event);
     if (event.target === this.inputInBib) {
       this.input.value = this.inputInBib.value;
       return;
@@ -17070,6 +17059,7 @@ class AuroCombobox extends AuroElement {
    * @returns {void}
    */
   handleSlotChange(event) {
+    console.warn('handleSlotChange', event);
     switch (event.target.name) {
       case '':
         if (!this.menu || this.menu !== this.querySelector('auro-menu, [auro-menu]')) {

package/package.json CHANGED Viewed

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