@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.18 → 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();
@@ -7893,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}`,
@@ -7927,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
     };
   }
 
@@ -7940,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();
@@ -7818,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}`,
@@ -7852,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
     };
   }
 
@@ -7865,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.

package/components/input/dist/index.js

@@ -5834,22 +5834,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();
@@ -7742,6 +7737,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 [
       css`${classicStyleCss}`,
@@ -7776,8 +7785,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
     };
   }
 
@@ -7789,7 +7803,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/registered.js

@@ -5834,22 +5834,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();
@@ -7742,6 +7737,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 [
       css`${classicStyleCss}`,
@@ -7776,8 +7785,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
     };
   }
 
@@ -7789,7 +7803,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/package.json

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