@aurodesignsystem/auro-formkit 2.0.0-beta.11 → 2.0.0-beta.12

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

@@ -1,18 +1,4 @@
 /**
- * @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 label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -21,100 +7,107 @@
  */
 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;
         };
-        noFilter: {
-            type: BooleanConstructor;
+        /**
+         * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
+         */
+        error: {
+            type: StringConstructor;
             reflect: boolean;
         };
-        optionSelected: {
-            type: ObjectConstructor;
-            converter: typeof arrayConverter;
-            hasChanged: typeof arrayOrUndefinedHasChanged;
-        };
-        noValidate: {
-            type: BooleanConstructor;
-        };
-        required: {
+        /**
+         * If set, combobox will not filter menuoptions based in input.
+         */
+        noFilter: {
             type: BooleanConstructor;
             reflect: boolean;
         };
-        triggerIcon: {
+        /**
+         * If set, disables auto-validation on blur.
+         */
+        noValidate: {
             type: BooleanConstructor;
-            reflect: boolean;
         };
-        type: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
-        value: {
+        /**
+         * Specifies the current selected option.
+         */
+        optionSelected: {
+            type: ObjectConstructor;
             converter: typeof arrayConverter;
             hasChanged: typeof arrayOrUndefinedHasChanged;
         };
-        checkmark: {
+        /**
+         * Populates the `required` attribute on the input. Used for client-side validation.
+         */
+        required: {
             type: BooleanConstructor;
             reflect: boolean;
         };
         /**
-         * @private
+         * Sets a custom help text message to display for all validityStates.
          */
-        availableOptions: {
-            type: ArrayConstructor;
+        setCustomValidity: {
+            type: StringConstructor;
         };
         /**
-         * @private
+         * Custom help text message to display when validity = `customError`.
          */
-        optionActive: {
-            type: ObjectConstructor;
+        setCustomValidityCustomError: {
+            type: StringConstructor;
         };
         /**
-         * @private
+         * Custom help text message to display when validity = `valueMissing`.
          */
-        msgSelectionMissing: {
+        setCustomValidityValueMissing: {
             type: StringConstructor;
         };
         /**
-         * @private
+         * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
          */
-        dropdownElementName: {
-            type: StringConstructor;
+        triggerIcon: {
+            type: BooleanConstructor;
+            reflect: boolean;
         };
         /**
-         * @private
+         * Applies the defined value as the type attribute on auro-input.
          */
-        dropdownTag: {
-            type: ObjectConstructor;
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
         };
         /**
-         * @private
+         * Specifies the `validityState` this element is in.
          */
-        inputElementName: {
+        validity: {
             type: StringConstructor;
+            reflect: boolean;
         };
         /**
-         * @private
+         * Value selected for the dropdown menu.
          */
-        inputTag: {
-            type: ObjectConstructor;
+        value: {
+            converter: typeof arrayConverter;
+            hasChanged: typeof arrayOrUndefinedHasChanged;
         };
     };
     static get styles(): import("lit").CSSResult[];
@@ -131,20 +124,6 @@ export class AuroCombobox extends LitElement {
     validity: any;
     value: any[];
     optionSelected: any[];
-    /**
-     * @private
-     */
-    private validation;
-    /**
-     * @private
-     */
-    private runtimeUtils;
-    /**
-     * @private
-     */
-    private isHiddenWhileLoading;
-    dropdownTag: any;
-    inputTag: any;
     /**
      * @private
      * @returns {void} Internal defaults.
@@ -153,6 +132,11 @@ export class AuroCombobox extends LitElement {
     availableOptions: any[];
     optionActive: any;
     msgSelectionMissing: string;
+    validation: AuroFormValidation;
+    runtimeUtils: any;
+    isHiddenWhileLoading: boolean;
+    dropdownTag: any;
+    inputTag: any;
     /**
      * Processes hidden state of all menu options and determines if there are any available options not hidden.
      * @private
@@ -252,6 +236,7 @@ export class AuroCombobox extends LitElement {
     render(): import("lit-html").TemplateResult;
 }
 import { LitElement } from "lit";
+import AuroFormValidation from '@auro-formkit/form-validation';
 import { arrayConverter } from '@aurodesignsystem/auro-menu';
 import { arrayOrUndefinedHasChanged } from '@aurodesignsystem/auro-menu';
 //# sourceMappingURL=auro-combobox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"auro-combobox.d.ts","sourceRoot":"","sources":["../src/auro-combobox.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;GAoBG;AAGH;IA+CE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAuDI;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;QAGH;;WAEG;;;;MAGN;IAED,+CAEC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IArJC,kBAAqB;IACrB,cAAyB;IACzB,aAAsB;IACtB,sBAA+B;IAI/B;;OAEG;IACH,mBAA0C;IAE1C;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,6BAAiC;IAMjC,iBAAyF;IACzF,cAA6E;IAG/E;;;OAGG;IACH,wBAIC;IAHC,wBAA0B;IAC1B,kBAAwB;IACxB,4BAAqD;IAkHvD;;;;OAIG;IACH,0BA4EC;IA1CG,mBAA8B;IA4ClC;;;;OAIG;IACH,6BAMC;IAJG,qCAA+E;IAMnF;;;;OAIG;IACH,gBAIC;IAED;;;;OAIG;IACH,gBAcC;IAED;;;;OAIG;IACH,0BAaC;IAZC,iBAA8D;IAchE;;;;OAIG;IACH,sBA0EC;IAzEC,cAAwD;IA2E1D;;;;OAIG;IACH,uBAwBC;IAFG,kBAAsC;IAI1C;;;;;;;;;;;;;OAaG;IACH,gCAOC;IAED;;;;OAIG;IACH,+BA2DC;IAED;;;;OAIG;IACH,0BAqCC;IAWC,iBAAiE;IAWnE,qBAgBC;IAZC,cAA4E;IAC5E,WAAoE;IAatE;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;OAGG;IACH,SAFa,IAAI,CAMhB;IAED,sCA8BC;IAED;;;;;OAKG;IACH,yBAcC;IAGD,4CAmDC;CACF;2BApvB0B,KAAK;+BAgBzB,6BAA6B;2CAA7B,6BAA6B"}
+{"version":3,"file":"auro-combobox.d.ts","sourceRoot":"","sources":["../src/auro-combobox.js"],"names":[],"mappings":"AA8BA;;;;;;GAMG;AAGH;IAoCE;QAII;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;;;QAOH;;WAEG;;;;;QAMH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;QAKH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;QAMH;;WAEG;;;;;MAMN;IAED,+CAEC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAzKC,kBAAqB;IACrB,cAAyB;IACzB,aAAsB;IACtB,sBAA+B;IAKjC;;;OAGG;IACH,wBAeC;IAdC,wBAA0B;IAC1B,kBAAwB;IACxB,4BAAqD;IAErD,+BAA0C;IAE1C,kBAAiD;IAEjD,8BAAiC;IAIjC,iBAAyF;IACzF,cAA6E;IAiJ/E;;;;OAIG;IACH,0BA4EC;IA1CG,mBAA8B;IA4ClC;;;;OAIG;IACH,6BAMC;IAJG,qCAA+E;IAMnF;;;;OAIG;IACH,gBAIC;IAED;;;;OAIG;IACH,gBAcC;IAED;;;;OAIG;IACH,0BAaC;IAZC,iBAA8D;IAchE;;;;OAIG;IACH,sBA0EC;IAzEC,cAAwD;IA2E1D;;;;OAIG;IACH,uBAwBC;IAFG,kBAAsC;IAI1C;;;;;;;;;;;;;OAaG;IACH,gCAOC;IAED;;;;OAIG;IACH,+BA2DC;IAED;;;;OAIG;IACH,0BAyCC;IAWC,iBAAiE;IAWnE,qBAgBC;IAZC,cAA4E;IAC5E,WAAoE;IAatE;;;OAGG;IACH,SAFa,IAAI,CAIhB;IAED;;;OAGG;IACH,SAFa,IAAI,CAMhB;IAED,sCA8BC;IAED;;;;;OAKG;IACH,yBAcC;IAGD,4CAoDC;CACF;2BA/vB0B,KAAK;+BAKD,+BAA+B;+BAWvD,6BAA6B;2CAA7B,6BAA6B"}

package/components/combobox/dist/index.js

@@ -9161,20 +9161,6 @@ var styleCss = i$c`.util_displayInline{display:inline}.util_displayInlineBlock{d
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * @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 label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
@@ -9193,28 +9179,6 @@ class AuroCombobox extends r$7 {
     this.optionSelected = undefined;
 
     this.privateDefaults();
-
-    /**
-     * @private
-     */
-    this.validation = new AuroFormValidation$1();
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
-
-    /**
-     * @private
-     */
-    this.isHiddenWhileLoading = false;
-
-    /**
-     * Generate unique names for dependency components.
-     */
-    const versioning = new AuroDependencyVersioning$3();
-    this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
-    this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
   }
 
   /**
@@ -9225,6 +9189,17 @@ class AuroCombobox extends r$7 {
     this.availableOptions = [];
     this.optionActive = null;
     this.msgSelectionMissing = 'Please select an option.';
+
+    this.validation = new AuroFormValidation$1();
+
+    this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
+
+    this.isHiddenWhileLoading = false;
+
+    const versioning = new AuroDependencyVersioning$3();
+
+    this.dropdownTag = versioning.generateTag('auro-dropdown', dropdownVersion, AuroDropdown);
+    this.inputTag = versioning.generateTag('auro-input', inputVersion, AuroInput);
   }
 
   // This function is to define props used within the scope of this component
@@ -9233,92 +9208,123 @@ class AuroCombobox extends r$7 {
   static get properties() {
     return {
       // ...super.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: String,
         reflect: true
       },
-      setCustomValidity: {
-        type: String
-      },
-      setCustomValidityCustomError: {
-        type: String
-      },
-      setCustomValidityValueMissing: {
-        type: String
-      },
-      validity: {
-        type: String,
+
+      /**
+       * When attribute is present auro-menu will apply checkmarks to selected options.
+       */
+      checkmark: {
+        type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set, disables the combobox.
+       */
       disabled: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.
+       */
+      error: {
+        type: String,
+        reflect: true
+      },
+
+      /**
+       * If set, combobox will not filter menuoptions based in input.
+       */
       noFilter: {
         type: Boolean,
         reflect: true
       },
+
+      /**
+       * If set, disables auto-validation on blur.
+       */
+      noValidate: {
+        type: Boolean
+      },
+
+      /**
+       * Specifies the current selected option.
+       */
       optionSelected: {
         type: Object,
         converter: arrayConverter,
         hasChanged: arrayOrUndefinedHasChanged
       },
-      noValidate: { type: Boolean },
+
+      /**
+       * Populates the `required` attribute on the input. Used for client-side validation.
+       */
       required: {
         type: Boolean,
         reflect: true
       },
-      triggerIcon: {
-        type: Boolean,
-        reflect: true
-      },
-      type: {
-        type: String,
-        reflect: true
-      },
-      value: {
-        converter: arrayConverter,
-        hasChanged: arrayOrUndefinedHasChanged
-      },
-      checkmark: {
-        type: Boolean,
-        reflect: true
-      },
 
       /**
-       * @private
+       * Sets a custom help text message to display for all validityStates.
        */
-      availableOptions: { type: Array },
+      setCustomValidity: {
+        type: String
+      },
 
       /**
-       * @private
+       * Custom help text message to display when validity = `customError`.
        */
-      optionActive: { type: Object },
+      setCustomValidityCustomError: {
+        type: String
+      },
 
       /**
-       * @private
+       * Custom help text message to display when validity = `valueMissing`.
        */
-      msgSelectionMissing: { type: String },
+      setCustomValidityValueMissing: {
+        type: String
+      },
 
       /**
-       * @private
+       * If set, the `icon` attribute will be applied to the trigger `auro-input` element.
        */
-      dropdownElementName: { type: String },
+      triggerIcon: {
+        type: Boolean,
+        reflect: true
+      },
 
       /**
-       * @private
+       * Applies the defined value as the type attribute on auro-input.
        */
-      dropdownTag: { type: Object },
+      type: {
+        type: String,
+        reflect: true
+      },
 
       /**
-       * @private
+       * Specifies the `validityState` this element is in.
        */
-      inputElementName: { type: String },
+      validity: {
+        type: String,
+        reflect: true
+      },
 
       /**
-       * @private
+       * Value selected for the dropdown menu.
        */
-      inputTag: { type: Object }
+      value: {
+        converter: arrayConverter,
+        hasChanged: arrayOrUndefinedHasChanged
+      },
     };
   }
 
@@ -9729,6 +9735,10 @@ class AuroCombobox extends r$7 {
         }
       }
     });
+
+    this.addEventListener('focusin', () => {
+      this.focus();
+    });
   }
 
   /**
@@ -9873,6 +9883,7 @@ class AuroCombobox extends r$7 {
             setCustomValidity="${this.setCustomValidity}"
             setCustomValidityValueMissing="${this.setCustomValidityValueMissing}"
             setCustomValidityCustomError="${this.setCustomValidityCustomError}"
+            .autocomplete="${this.autocomplete}"
             .type="${this.type}"
             @input="${this.handleInputValueChange}">
             <slot name="label" slot="label"></slot>