@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.17 → 0.0.0-pr624.19

package/components/combobox/dist/index.js

@@ -10836,22 +10836,17 @@ class BaseInput extends AuroElement$2$1 {
    * @returns {void}
    */
   getPlaceholder() {
-    const isFocused = this.inputElement === this.getActiveElement();
+    this.inputElement === this.getActiveElement();
 
     // console.warn('isFocused', isFocused);
     // console.warn(this.inputElement);
     // console.warn(this.getActiveElement());
 
-    if (!isFocused) {
-      if (this.placeholder) {
-        this.placeholderStr = this.placeholder;
-        // return this.placeholder;
-      } else if (this.type === 'date') {
-        this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
-        // return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
-      }
-    } else {
-      this.placeholderStr = '';
+    // if (!isFocused) {
+    if (this.placeholder) {
+      this.placeholderStr = this.placeholder;
+    } else if (this.type === 'date') {
+      this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
     }
 
     this.requestUpdate();
@@ -11838,7 +11833,6 @@ let AuroElement$3 = class AuroElement extends LitElement {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -12147,7 +12141,7 @@ let AuroLoader$1 = class AuroLoader extends LitElement {
 
 var loaderVersion$1 = '5.0.0';
 
-/* eslint-disable max-lines, curly */
+/* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -12214,6 +12208,21 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion$1, AuroLoader$1);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -12280,13 +12289,23 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
       },
 
       /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
+       */
+      tabindex: {
+        type: String,
+        reflect: false
+      },
+
       /**
        * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
@@ -12319,6 +12338,27 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -12409,14 +12449,17 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? literal`a` : literal`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return html`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${ifDefined(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${ifDefined(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${ifDefined(this.tIndex)}"
+        tabindex="${ifDefined(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${classMap(classes)}"
+        class=${classMap(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${ifDefined(this.title ? this.title : undefined)}"
@@ -12425,6 +12468,9 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
         variant="${ifDefined(this.variant ? this.variant : undefined)}"
         .value="${ifDefined(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${ifDefined(this.buttonHref || undefined)}"
+        target="${ifDefined(this.buttonTarget || undefined)}"
+        rel="${ifDefined(this.buttonRel || undefined)}"
       >
         ${ifDefined(this.loading ? html`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -12433,12 +12479,12 @@ let AuroButton$1 = class AuroButton extends AuroElement$3 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -12693,6 +12739,20 @@ class AuroInput extends BaseInput {
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$1, AuroIcon$1);
   }
 
+  static get properties() {
+    return {
+      ...super.properties,
+
+      /**
+       * @type {boolean}
+       */
+      hideInputVisually: {
+        type: Boolean,
+        reflect: true,
+      }
+    };
+  }
+
   static get styles() {
     return [
       css`${classicStyleCss}`,
@@ -12727,8 +12787,13 @@ class AuroInput extends BaseInput {
    * @returns {object} - Returns classmap.
    */
   get commonInputClasses() {
+    console.log(`hideInputVisually: ${JSON.stringify(this.hideInputVisually)}`);
     return {
-      'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
+      'util_displayHiddenVisually': this.hideInputVisually !== undefined
+        ? this.hideInputVisually
+        // eslint-disable-next-line no-warning-comments
+        // TODO: refactor this to use a less brittle/forced solution.
+        : this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
     };
   }
 
@@ -12740,7 +12805,10 @@ class AuroInput extends BaseInput {
   get legacyInputClasses() {
     return {
       ...this.commonInputClasses,
-      'util_displayHiddenVisually': !this.hasFocus && !this.value
+      'util_displayHiddenVisually':
+        this.hideInputVisually !== undefined
+          ? this.hideInputVisually
+          : !this.hasFocus && !this.value
     };
   }
 
@@ -13668,7 +13736,6 @@ let AuroElement$1 = class AuroElement extends LitElement {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -13977,7 +14044,7 @@ class AuroLoader extends LitElement {
 
 var loaderVersion = '5.0.0';
 
-/* eslint-disable max-lines, curly */
+/* eslint-disable max-lines, curly, jsdoc/no-undefined-types */
 // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
 
@@ -14044,6 +14111,21 @@ class AuroButton extends AuroElement$1 {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -14110,13 +14192,23 @@ class AuroButton extends AuroElement$1 {
       },
 
       /**
-       * Populates `tabIndex` to define the focusable sequence in keyboard navigation.
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
        */
       tIndex: {
         type: String,
         reflect: true
       },
 
+      /**
+       * Populates `tabindex` to define the focusable sequence in keyboard navigation.
+       * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
+       * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`
+       */
+      tabindex: {
+        type: String,
+        reflect: false
+      },
+
       /**
        * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
        */
@@ -14149,6 +14241,27 @@ class AuroButton extends AuroElement$1 {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -14239,14 +14352,17 @@ class AuroButton extends AuroElement$1 {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? literal`a` : literal`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return html`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${ifDefined(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${ifDefined(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${ifDefined(this.tIndex)}"
+        tabindex="${ifDefined(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${classMap(classes)}"
+        class=${classMap(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${ifDefined(this.title ? this.title : undefined)}"
@@ -14255,6 +14371,9 @@ class AuroButton extends AuroElement$1 {
         variant="${ifDefined(this.variant ? this.variant : undefined)}"
         .value="${ifDefined(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${ifDefined(this.buttonHref || undefined)}"
+        target="${ifDefined(this.buttonTarget || undefined)}"
+        rel="${ifDefined(this.buttonRel || undefined)}"
       >
         ${ifDefined(this.loading ? html`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -14263,12 +14382,12 @@ class AuroButton extends AuroElement$1 {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -14277,7 +14396,7 @@ class AuroButton extends AuroElement$1 {
   }
 }
 
-var buttonVersion = '11.0.0';
+var buttonVersion = '11.2.1';
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -16173,10 +16292,10 @@ class AuroCombobox extends AuroElement {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
     this.input = this.dropdown.querySelector(this.inputTag._$litStatic$);
 
-    this.configureMenu();
     this.configureInput();
     this.configureDropdown();
     this.configureCombobox();
+    this.configureMenu();
 
     // Set the initial value in auro-menu if defined
     if (this.hasAttribute('value') && this.getAttribute('value').length > 0) {