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

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

@@ -9326,20 +9326,6 @@ var styleCss$3 = i$d`.util_displayInline{display:inline}.util_displayInlineBlock
 
 // 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.
@@ -9358,28 +9344,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);
   }
 
   /**
@@ -9390,6 +9354,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
@@ -9398,92 +9373,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$1,
         hasChanged: arrayOrUndefinedHasChanged$1
       },
-      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$1,
-        hasChanged: arrayOrUndefinedHasChanged$1
-      },
-      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$1,
+        hasChanged: arrayOrUndefinedHasChanged$1
+      },
     };
   }
 
@@ -9894,6 +9900,10 @@ class AuroCombobox extends r$7 {
         }
       }
     });
+
+    this.addEventListener('focusin', () => {
+      this.focus();
+    });
   }
 
   /**
@@ -10038,6 +10048,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>

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

@@ -9184,20 +9184,6 @@ var styleCss$3 = i$d`.util_displayInline{display:inline}.util_displayInlineBlock
 
 // 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.
@@ -9216,28 +9202,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);
   }
 
   /**
@@ -9248,6 +9212,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
@@ -9256,92 +9231,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$1,
         hasChanged: arrayOrUndefinedHasChanged$1
       },
-      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$1,
-        hasChanged: arrayOrUndefinedHasChanged$1
-      },
-      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$1,
+        hasChanged: arrayOrUndefinedHasChanged$1
+      },
     };
   }
 
@@ -9752,6 +9758,10 @@ class AuroCombobox extends r$7 {
         }
       }
     });
+
+    this.addEventListener('focusin', () => {
+      this.focus();
+    });
   }
 
   /**
@@ -9896,6 +9906,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>