@aurodesignsystem-dev/auro-formkit 0.0.0-pr685.1 → 0.0.0-pr687.0

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

@@ -10865,7 +10865,6 @@ class BaseInput extends AuroElement$2$1 {
    * @return {void}
    */
   focus() {
-    console.info("BaseInput.focus() called", this);
     this.inputElement.focus();
   }
 
@@ -11060,22 +11059,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();
@@ -12917,6 +12911,20 @@ class AuroInput extends BaseInput {
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
   }
 
+  static get properties() {
+    return {
+      ...super.properties,
+
+      /**
+       * @type {boolean}
+       */
+      hideInputVisually: {
+        type: Boolean,
+        reflect: true,
+      }
+    };
+  }
+
   static get styles() {
     return [
       i$5`${classicStyleCss}`,
@@ -12951,8 +12959,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
     };
   }
 
@@ -12964,7 +12977,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/combobox/demo/index.min.js

@@ -10723,7 +10723,6 @@ class BaseInput extends AuroElement$2$1 {
    * @return {void}
    */
   focus() {
-    console.info("BaseInput.focus() called", this);
     this.inputElement.focus();
   }
 
@@ -10918,22 +10917,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();
@@ -12775,6 +12769,20 @@ class AuroInput extends BaseInput {
     this.iconTag = versioning.generateTag('auro-formkit-input-icon', iconVersion$2, AuroIcon$2);
   }
 
+  static get properties() {
+    return {
+      ...super.properties,
+
+      /**
+       * @type {boolean}
+       */
+      hideInputVisually: {
+        type: Boolean,
+        reflect: true,
+      }
+    };
+  }
+
   static get styles() {
     return [
       i$5`${classicStyleCss}`,
@@ -12809,8 +12817,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
     };
   }
 
@@ -12822,7 +12835,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/combobox/dist/index.js

@@ -10641,7 +10641,6 @@ class BaseInput extends AuroElement$2$1 {
    * @return {void}
    */
   focus() {
-    console.info("BaseInput.focus() called", this);
     this.inputElement.focus();
   }
 
@@ -10836,22 +10835,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();
@@ -12693,6 +12687,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 +12735,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 +12753,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/combobox/dist/registered.js

@@ -10641,7 +10641,6 @@ class BaseInput extends AuroElement$2$1 {
    * @return {void}
    */
   focus() {
-    console.info("BaseInput.focus() called", this);
     this.inputElement.focus();
   }
 
@@ -10836,22 +10835,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();
@@ -12693,6 +12687,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 +12735,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 +12753,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/counter/demo/api.md

@@ -39,23 +39,21 @@
 
 ## Properties
 
-| Property                  | Attribute                 | Type                     | Default        | Description                                      |
-|---------------------------|---------------------------|--------------------------|----------------|--------------------------------------------------|
-| [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean`                | "false"        | If declared, bib's position will be automatically calculated where to appear. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `string`                 | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| [isDropdown](#isDropdown)              | `isDropdown`              | `boolean`                | false          | Indicates if the counter group is displayed as a dropdown. |
-| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean`                | false          | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
-| [layout](#layout)                  |                           | `'classic'\|'snowflake'` |                | Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'. |
-| [matchWidth](#matchWidth)              | `matchWidth`              | `boolean`                | false          | If declared, the dropdown will expand to the width of its parent container.<br />Otherwise, the dropdown width will be determined by its content. |
-| [max](#max)                     | `max`                     | `number`                 | "undefined"    | The maximum value allowed for the whole group of counters. |
-| [min](#min)                     | `min`                     | `number`                 | "undefined"    | The minimum value allowed for the whole group of counters. |
-| [noFlip](#noFlip)                  | `noFlip`                  | `boolean`                | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [offset](#offset)                  | `offset`                  | `number`                 | "0"            | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                  | `onDark`                  | `boolean`                | false          | If declared, counters and dropdown will be rendered with onDark styles. |
-| [placement](#placement)               | `placement`               | `string`                 | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
-| [total](#total)                   | `total`                   | `number`                 | "undefined"    | The total value of the counters.                 |
-| [validity](#validity)                | `validity`                | `string`                 | "undefined"    | Reflects the validity state.                     |
-| [value](#value)                   | `value`                   | `object`                 | "undefined"    | The current individual values of the nested counters. |
+| Property                  | Attribute                 | Type      | Default        | Description                                      |
+|---------------------------|---------------------------|-----------|----------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)           | `autoPlacement`           | `boolean` | "false"        | If declared, bib's position will be automatically calculated where to appear. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)    | `fullscreenBreakpoint`    | `string`  | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [isDropdown](#isDropdown)              | `isDropdown`              | `boolean` | false          | Indicates if the counter group is displayed as a dropdown. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | false          | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| [max](#max)                     | `max`                     | `number`  | "undefined"    | The maximum value allowed for the whole group of counters. |
+| [min](#min)                     | `min`                     | `number`  | "undefined"    | The minimum value allowed for the whole group of counters. |
+| [noFlip](#noFlip)                  | `noFlip`                  | `boolean` | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [offset](#offset)                  | `offset`                  | `number`  | "0"            | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                  | `onDark`                  | `boolean` | false          | If declared, counters and dropdown will be rendered with onDark styles. |
+| [placement](#placement)               | `placement`               | `string`  | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
+| [total](#total)                   | `total`                   | `number`  | "undefined"    | The total value of the counters.                 |
+| [validity](#validity)                | `validity`                | `string`  | "undefined"    | Reflects the validity state.                     |
+| [value](#value)                   | `value`                   | `object`  | "undefined"    | The current individual values of the nested counters. |
 
 ## Methods
 
@@ -428,7 +426,7 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   <div style="width: 350px">
     <auro-counter-group isDropdown offset="20" placement="bottom-end">
       <div slot="bib.fullscreen.headline">Passengers</div>
-      <div slot="label">bottom-end bib with 20px offset</div>
+      <div slot="label">bottome-end bib with 20px offset</div>
       <auro-counter>
         Adults
         <span slot="description">18 years or older</span>
@@ -440,7 +438,7 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
     </auro-counter-group>
     <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
       <div slot="bib.fullscreen.headline">Passengers</div>
-      <div slot="label">bottom-end bib with 20px offset and noFlip</div>
+      <div slot="label">bottome-end bib with 20px offset and noFlip</div>
       <auro-counter>
         Adults
         <span slot="description">18 years or older</span>
@@ -474,7 +472,7 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
 <div style="width: 350px">
   <auro-counter-group isDropdown offset="20" placement="bottom-end">
     <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">bottom-end bib with 20px offset</div>
+    <div slot="label">bottome-end bib with 20px offset</div>
     <auro-counter>
       Adults
       <span slot="description">18 years or older</span>
@@ -486,7 +484,7 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
   </auro-counter-group>
   <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
     <div slot="bib.fullscreen.headline">Passengers</div>
-    <div slot="label">bottom-end bib with 20px offset and noFlip</div>
+    <div slot="label">bottome-end bib with 20px offset and noFlip</div>
     <auro-counter>
       Adults
       <span slot="description">18 years or older</span>