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

package/components/datepicker/dist/styles/snowflake/style-css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/input/demo/api.md

@@ -21,6 +21,7 @@ Generate unique names for dependency components.
 | [error](#error)                           | `error`                           | `string`  |             | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
 | [errorMessage](#errorMessage)                    | `errorMessage`                    | `string`  |             | Contains the help text message for the current validity error. |
 | [format](#format)                          | `format`                          | `string`  |             | Specifies the input mask format.                 |
+| [hideInputVisually](#hideInputVisually)               | `hideInputVisually`               | `boolean` |             |                                                  |
 | [icon](#icon)                            | `icon`                            | `boolean` | false       | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
 | [id](#id)                              | `id`                              | `string`  |             | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
 | [inputmode](#inputmode)                       | `inputmode`                       | `string`  |             | Exposes inputmode attribute for input.           |

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

@@ -5985,22 +5985,17 @@ class BaseInput extends AuroElement$2 {
    * @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();
@@ -6987,7 +6982,6 @@ class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -7296,7 +7290,7 @@ class AuroLoader extends i$2 {
 
 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.
 
@@ -7363,6 +7357,21 @@ class AuroButton extends AuroElement {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -7429,13 +7438,23 @@ class AuroButton extends AuroElement {
       },
 
       /**
-       * 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.
        */
@@ -7468,6 +7487,27 @@ class AuroButton extends AuroElement {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -7558,14 +7598,17 @@ class AuroButton extends AuroElement {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i$1`a` : i$1`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return u$2`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${o(this.tIndex)}"
+        tabindex="${o(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${e(classes)}"
+        class=${e(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${o(this.title ? this.title : undefined)}"
@@ -7574,6 +7617,9 @@ class AuroButton extends AuroElement {
         variant="${o(this.variant ? this.variant : undefined)}"
         .value="${o(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${o(this.buttonHref || undefined)}"
+        target="${o(this.buttonTarget || undefined)}"
+        rel="${o(this.buttonRel || undefined)}"
       >
         ${o(this.loading ? u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -7582,12 +7628,12 @@ class AuroButton extends AuroElement {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -7842,6 +7888,20 @@ class AuroInput extends BaseInput {
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
   }
 
+  static get properties() {
+    return {
+      ...super.properties,
+
+      /**
+       * @type {boolean}
+       */
+      hideInputVisually: {
+        type: Boolean,
+        reflect: true,
+      }
+    };
+  }
+
   static get styles() {
     return [
       i$5`${classicStyleCss}`,
@@ -7876,8 +7936,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
     };
   }
 
@@ -7889,7 +7954,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
     };
   }
 

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

@@ -5910,22 +5910,17 @@ class BaseInput extends AuroElement$2 {
    * @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();
@@ -6912,7 +6907,6 @@ class AuroElement extends i$2 {
        * @private
        */
       wrapper: {
-        type: HTMLElement,
         attribute: false,
         reflect: false
       }
@@ -7221,7 +7215,7 @@ class AuroLoader extends i$2 {
 
 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.
 
@@ -7288,6 +7282,21 @@ class AuroButton extends AuroElement {
      * @private
      */
     this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
+
+    /**
+     *  @private
+     */
+    this.buttonHref = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonTarget = undefined;
+
+    /**
+     *  @private
+     */
+    this.buttonRel = undefined;
   }
 
   static get styles() {
@@ -7354,13 +7363,23 @@ class AuroButton extends AuroElement {
       },
 
       /**
-       * 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.
        */
@@ -7393,6 +7412,27 @@ class AuroButton extends AuroElement {
         type: String,
         reflect: true
       },
+
+      /**
+       * @private
+       */
+      buttonHref: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonTarget: {
+        type: String,
+      },
+
+      /**
+       * @private
+       */
+      buttonRel: {
+        type: String,
+      },
     };
   }
 
@@ -7483,14 +7523,17 @@ class AuroButton extends AuroElement {
       loading: this.loading,
     };
 
+    const tag = this.buttonHref ? i$1`a` : i$1`button`;
+    const part = this.buttonHref ? 'link' : 'button';
+
     return u$2`
-      <button
-        part="button"
+      <${tag}
+        part="${part}"
         aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
         aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
-        tabIndex="${o(this.tIndex)}"
+        tabindex="${o(this.tIndex || this.tabindex)}"
         ?autofocus="${this.autofocus}"
-        class="${e(classes)}"
+        class=${e(classes)}
         ?disabled="${this.disabled || this.loading}"
         ?onDark="${this.onDark}"
         title="${o(this.title ? this.title : undefined)}"
@@ -7499,6 +7542,9 @@ class AuroButton extends AuroElement {
         variant="${o(this.variant ? this.variant : undefined)}"
         .value="${o(this.value ? this.value : undefined)}"
         @click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
+        href="${o(this.buttonHref || undefined)}"
+        target="${o(this.buttonTarget || undefined)}"
+        rel="${o(this.buttonRel || undefined)}"
       >
         ${o(this.loading ? u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
 
@@ -7507,12 +7553,12 @@ class AuroButton extends AuroElement {
             <slot></slot>
           </span>
         </span>
-      </button>
+      </${tag}>
     `;
   }
 
   /**
-   * Renders the layout of the button
+   * Renders the layout of the button.
    * @returns {TemplateResult}
    * @private
    */
@@ -7767,6 +7813,20 @@ class AuroInput extends BaseInput {
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion, AuroIcon);
   }
 
+  static get properties() {
+    return {
+      ...super.properties,
+
+      /**
+       * @type {boolean}
+       */
+      hideInputVisually: {
+        type: Boolean,
+        reflect: true,
+      }
+    };
+  }
+
   static get styles() {
     return [
       i$5`${classicStyleCss}`,
@@ -7801,8 +7861,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
     };
   }
 
@@ -7814,7 +7879,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
     };
   }
 

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

@@ -1,4 +1,178 @@
 export class AuroInput extends BaseInput {
+    static get properties(): {
+        /**
+         * @type {boolean}
+         */
+        hideInputVisually: boolean;
+        a11yRole: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        a11yExpanded: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        a11yControls: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        activeLabel: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        autocapitalize: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        autocomplete: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        autocorrect: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        error: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        errorMessage: {
+            type: StringConstructor;
+        };
+        format: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        icon: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        inputmode: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        lang: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        max: {
+            type: StringConstructor;
+        };
+        maxLength: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        min: {
+            type: StringConstructor;
+        };
+        minLength: {
+            type: NumberConstructor;
+            reflect: boolean;
+        };
+        name: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        nested: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        noValidate: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        onDark: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        pattern: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        placeholder: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        readonly: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        required: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        showPassword: {
+            state: boolean;
+        };
+        setCustomValidity: {
+            type: StringConstructor;
+        };
+        setCustomValidityBadInput: {
+            type: StringConstructor;
+        };
+        setCustomValidityCustomError: {
+            type: StringConstructor;
+        };
+        setCustomValidityForType: {
+            type: StringConstructor;
+        };
+        setCustomValidityRangeOverflow: {
+            type: StringConstructor;
+        };
+        setCustomValidityRangeUnderflow: {
+            type: StringConstructor;
+        };
+        setCustomValidityTooLong: {
+            type: StringConstructor;
+        };
+        setCustomValidityTooShort: {
+            type: StringConstructor;
+        };
+        setCustomValidityValueMissing: {
+            type: StringConstructor;
+        };
+        simple: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+        customValidityTypeEmail: {
+            type: StringConstructor;
+        };
+        spellcheck: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        type: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        value: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        validateOnInput: {
+            type: BooleanConstructor;
+        };
+        validity: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        touched: boolean;
+        inputId: {
+            type: StringConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        layout: {
+            type: StringConstructor;
+            attribute: string;
+            reflect: boolean;
+        };
+    };
     static get styles(): import("lit").CSSResult[];
     /**
      * This will register this element with the browser.