@aurodesignsystem-dev/auro-formkit 0.0.0-pr1215.0 → 0.0.0-pr1218.0

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

@@ -21132,7 +21132,6 @@ class BaseInput extends AuroElement$1 {
     this.validationCCLength = undefined;
     this.hasValue = false;
     this.label = 'Input label is undefined';
-    this.placeholderStr = '';
 
     this.allowedInputTypes = [
       "text",
@@ -21289,6 +21288,26 @@ class BaseInput extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * @private
+       * Flag to indicate if the input currently has value.
+       */
+      hasValue: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       * Flag to indicate if the input currently has focus.
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: 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.
        */
@@ -21591,7 +21610,6 @@ class BaseInput extends AuroElement$1 {
       this.ValidityMessageOverride = this.setCustomValidity;
     }
 
-    this.getPlaceholder();
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
   }
@@ -21676,10 +21694,6 @@ class BaseInput extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('placeholder')) {
-      this.getPlaceholder();
-    }
-
     if (changedProperties.has('format')) {
       this.configureAutoFormatting();
     }
@@ -21713,10 +21727,8 @@ class BaseInput extends AuroElement$1 {
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
-        this.requestUpdate();
       } else {
         this.hasValue = false;
-        this.requestUpdate();
       }
 
       if (this.value !== this.inputElement.value) {
@@ -21902,8 +21914,6 @@ class BaseInput extends AuroElement$1 {
   handleFocusin() {
     this.hasFocus = true;
 
-    this.getPlaceholder();
-
     this.touched = true;
   }
 
@@ -21914,7 +21924,6 @@ class BaseInput extends AuroElement$1 {
    */
   handleFocusout() {
     this.hasFocus = false;
-    this.getPlaceholder();
   }
 
   /**
@@ -22051,16 +22060,11 @@ class BaseInput extends AuroElement$1 {
    * @private
    * @returns {void}
    */
-  getPlaceholder() {
-    if (this.placeholder) {
-      this.placeholderStr = this.placeholder;
-    } else if (this.type === 'date') {
-      this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
+  get placeholderStr() {
+    if (!this.placeholder && this.type === 'date') {
+      return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
     }
-
-    this.requestUpdate();
-
-    return this.placeholderStr;
+    return this.placeholder || "";
   }
 
   /**
@@ -22642,7 +22646,7 @@ class AuroInput extends BaseInput {
       (
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
-        (!this.placeholder || this.placeholder === '')
+        (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
@@ -22687,11 +22691,11 @@ class AuroInput extends BaseInput {
     }
 
     if (this.layout === 'snowflake') {
-      return this.hasValue || this.hasFocus || this.placeholder ? 'body-xs' : 'body-lg';
+      return this.hasValue || this.hasFocus || this.placeholderStr ? 'body-xs' : 'body-lg';
     }
 
     // classic layout (default)
-    return ((!this.value || this.value.length === 0) && !this.placeholder && !this.hasFocus) ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
   }
 
   /**

package/components/datepicker/dist/index.js

@@ -21057,7 +21057,6 @@ class BaseInput extends AuroElement$1 {
     this.validationCCLength = undefined;
     this.hasValue = false;
     this.label = 'Input label is undefined';
-    this.placeholderStr = '';
 
     this.allowedInputTypes = [
       "text",
@@ -21214,6 +21213,26 @@ class BaseInput extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * @private
+       * Flag to indicate if the input currently has value.
+       */
+      hasValue: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       * Flag to indicate if the input currently has focus.
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: 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.
        */
@@ -21516,7 +21535,6 @@ class BaseInput extends AuroElement$1 {
       this.ValidityMessageOverride = this.setCustomValidity;
     }
 
-    this.getPlaceholder();
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
   }
@@ -21601,10 +21619,6 @@ class BaseInput extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('placeholder')) {
-      this.getPlaceholder();
-    }
-
     if (changedProperties.has('format')) {
       this.configureAutoFormatting();
     }
@@ -21638,10 +21652,8 @@ class BaseInput extends AuroElement$1 {
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
-        this.requestUpdate();
       } else {
         this.hasValue = false;
-        this.requestUpdate();
       }
 
       if (this.value !== this.inputElement.value) {
@@ -21827,8 +21839,6 @@ class BaseInput extends AuroElement$1 {
   handleFocusin() {
     this.hasFocus = true;
 
-    this.getPlaceholder();
-
     this.touched = true;
   }
 
@@ -21839,7 +21849,6 @@ class BaseInput extends AuroElement$1 {
    */
   handleFocusout() {
     this.hasFocus = false;
-    this.getPlaceholder();
   }
 
   /**
@@ -21976,16 +21985,11 @@ class BaseInput extends AuroElement$1 {
    * @private
    * @returns {void}
    */
-  getPlaceholder() {
-    if (this.placeholder) {
-      this.placeholderStr = this.placeholder;
-    } else if (this.type === 'date') {
-      this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
+  get placeholderStr() {
+    if (!this.placeholder && this.type === 'date') {
+      return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
     }
-
-    this.requestUpdate();
-
-    return this.placeholderStr;
+    return this.placeholder || "";
   }
 
   /**
@@ -22567,7 +22571,7 @@ class AuroInput extends BaseInput {
       (
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
-        (!this.placeholder || this.placeholder === '')
+        (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
@@ -22612,11 +22616,11 @@ class AuroInput extends BaseInput {
     }
 
     if (this.layout === 'snowflake') {
-      return this.hasValue || this.hasFocus || this.placeholder ? 'body-xs' : 'body-lg';
+      return this.hasValue || this.hasFocus || this.placeholderStr ? 'body-xs' : 'body-lg';
     }
 
     // classic layout (default)
-    return ((!this.value || this.value.length === 0) && !this.placeholder && !this.hasFocus) ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
   }
 
   /**

package/components/datepicker/dist/registered.js

@@ -21057,7 +21057,6 @@ class BaseInput extends AuroElement$1 {
     this.validationCCLength = undefined;
     this.hasValue = false;
     this.label = 'Input label is undefined';
-    this.placeholderStr = '';
 
     this.allowedInputTypes = [
       "text",
@@ -21214,6 +21213,26 @@ class BaseInput extends AuroElement$1 {
         reflect: true
       },
 
+      /**
+       * @private
+       * Flag to indicate if the input currently has value.
+       */
+      hasValue: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       * Flag to indicate if the input currently has focus.
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: 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.
        */
@@ -21516,7 +21535,6 @@ class BaseInput extends AuroElement$1 {
       this.ValidityMessageOverride = this.setCustomValidity;
     }
 
-    this.getPlaceholder();
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
   }
@@ -21601,10 +21619,6 @@ class BaseInput extends AuroElement$1 {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('placeholder')) {
-      this.getPlaceholder();
-    }
-
     if (changedProperties.has('format')) {
       this.configureAutoFormatting();
     }
@@ -21638,10 +21652,8 @@ class BaseInput extends AuroElement$1 {
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
-        this.requestUpdate();
       } else {
         this.hasValue = false;
-        this.requestUpdate();
       }
 
       if (this.value !== this.inputElement.value) {
@@ -21827,8 +21839,6 @@ class BaseInput extends AuroElement$1 {
   handleFocusin() {
     this.hasFocus = true;
 
-    this.getPlaceholder();
-
     this.touched = true;
   }
 
@@ -21839,7 +21849,6 @@ class BaseInput extends AuroElement$1 {
    */
   handleFocusout() {
     this.hasFocus = false;
-    this.getPlaceholder();
   }
 
   /**
@@ -21976,16 +21985,11 @@ class BaseInput extends AuroElement$1 {
    * @private
    * @returns {void}
    */
-  getPlaceholder() {
-    if (this.placeholder) {
-      this.placeholderStr = this.placeholder;
-    } else if (this.type === 'date') {
-      this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
+  get placeholderStr() {
+    if (!this.placeholder && this.type === 'date') {
+      return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
     }
-
-    this.requestUpdate();
-
-    return this.placeholderStr;
+    return this.placeholder || "";
   }
 
   /**
@@ -22567,7 +22571,7 @@ class AuroInput extends BaseInput {
       (
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
-        (!this.placeholder || this.placeholder === '')
+        (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
@@ -22612,11 +22616,11 @@ class AuroInput extends BaseInput {
     }
 
     if (this.layout === 'snowflake') {
-      return this.hasValue || this.hasFocus || this.placeholder ? 'body-xs' : 'body-lg';
+      return this.hasValue || this.hasFocus || this.placeholderStr ? 'body-xs' : 'body-lg';
     }
 
     // classic layout (default)
-    return ((!this.value || this.value.length === 0) && !this.placeholder && !this.hasFocus) ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
   }
 
   /**

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

@@ -5281,7 +5281,6 @@ class BaseInput extends AuroElement {
     this.validationCCLength = undefined;
     this.hasValue = false;
     this.label = 'Input label is undefined';
-    this.placeholderStr = '';
 
     this.allowedInputTypes = [
       "text",
@@ -5438,6 +5437,26 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
+      /**
+       * @private
+       * Flag to indicate if the input currently has value.
+       */
+      hasValue: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       * Flag to indicate if the input currently has focus.
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: 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.
        */
@@ -5740,7 +5759,6 @@ class BaseInput extends AuroElement {
       this.ValidityMessageOverride = this.setCustomValidity;
     }
 
-    this.getPlaceholder();
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
   }
@@ -5825,10 +5843,6 @@ class BaseInput extends AuroElement {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('placeholder')) {
-      this.getPlaceholder();
-    }
-
     if (changedProperties.has('format')) {
       this.configureAutoFormatting();
     }
@@ -5862,10 +5876,8 @@ class BaseInput extends AuroElement {
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
-        this.requestUpdate();
       } else {
         this.hasValue = false;
-        this.requestUpdate();
       }
 
       if (this.value !== this.inputElement.value) {
@@ -6051,8 +6063,6 @@ class BaseInput extends AuroElement {
   handleFocusin() {
     this.hasFocus = true;
 
-    this.getPlaceholder();
-
     this.touched = true;
   }
 
@@ -6063,7 +6073,6 @@ class BaseInput extends AuroElement {
    */
   handleFocusout() {
     this.hasFocus = false;
-    this.getPlaceholder();
   }
 
   /**
@@ -6200,16 +6209,11 @@ class BaseInput extends AuroElement {
    * @private
    * @returns {void}
    */
-  getPlaceholder() {
-    if (this.placeholder) {
-      this.placeholderStr = this.placeholder;
-    } else if (this.type === 'date') {
-      this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
+  get placeholderStr() {
+    if (!this.placeholder && this.type === 'date') {
+      return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
     }
-
-    this.requestUpdate();
-
-    return this.placeholderStr;
+    return this.placeholder || "";
   }
 
   /**
@@ -6791,7 +6795,7 @@ class AuroInput extends BaseInput {
       (
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
-        (!this.placeholder || this.placeholder === '')
+        (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
@@ -6836,11 +6840,11 @@ class AuroInput extends BaseInput {
     }
 
     if (this.layout === 'snowflake') {
-      return this.hasValue || this.hasFocus || this.placeholder ? 'body-xs' : 'body-lg';
+      return this.hasValue || this.hasFocus || this.placeholderStr ? 'body-xs' : 'body-lg';
     }
 
     // classic layout (default)
-    return ((!this.value || this.value.length === 0) && !this.placeholder && !this.hasFocus) ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
   }
 
   /**

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

@@ -5206,7 +5206,6 @@ class BaseInput extends AuroElement {
     this.validationCCLength = undefined;
     this.hasValue = false;
     this.label = 'Input label is undefined';
-    this.placeholderStr = '';
 
     this.allowedInputTypes = [
       "text",
@@ -5363,6 +5362,26 @@ class BaseInput extends AuroElement {
         reflect: true
       },
 
+      /**
+       * @private
+       * Flag to indicate if the input currently has value.
+       */
+      hasValue: {
+        type: Boolean,
+        reflect: false,
+        attribute: false
+      },
+
+      /**
+       * @private
+       * Flag to indicate if the input currently has focus.
+       */
+      hasFocus: {
+        type: Boolean,
+        reflect: false,
+        attribute: 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.
        */
@@ -5665,7 +5684,6 @@ class BaseInput extends AuroElement {
       this.ValidityMessageOverride = this.setCustomValidity;
     }
 
-    this.getPlaceholder();
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
   }
@@ -5750,10 +5768,6 @@ class BaseInput extends AuroElement {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('placeholder')) {
-      this.getPlaceholder();
-    }
-
     if (changedProperties.has('format')) {
       this.configureAutoFormatting();
     }
@@ -5787,10 +5801,8 @@ class BaseInput extends AuroElement {
     if (changedProperties.has('value')) {
       if (this.value && this.value.length > 0) {
         this.hasValue = true;
-        this.requestUpdate();
       } else {
         this.hasValue = false;
-        this.requestUpdate();
       }
 
       if (this.value !== this.inputElement.value) {
@@ -5976,8 +5988,6 @@ class BaseInput extends AuroElement {
   handleFocusin() {
     this.hasFocus = true;
 
-    this.getPlaceholder();
-
     this.touched = true;
   }
 
@@ -5988,7 +5998,6 @@ class BaseInput extends AuroElement {
    */
   handleFocusout() {
     this.hasFocus = false;
-    this.getPlaceholder();
   }
 
   /**
@@ -6125,16 +6134,11 @@ class BaseInput extends AuroElement {
    * @private
    * @returns {void}
    */
-  getPlaceholder() {
-    if (this.placeholder) {
-      this.placeholderStr = this.placeholder;
-    } else if (this.type === 'date') {
-      this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
+  get placeholderStr() {
+    if (!this.placeholder && this.type === 'date') {
+      return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
     }
-
-    this.requestUpdate();
-
-    return this.placeholderStr;
+    return this.placeholder || "";
   }
 
   /**
@@ -6716,7 +6720,7 @@ class AuroInput extends BaseInput {
       (
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
-        (!this.placeholder || this.placeholder === '')
+        (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
@@ -6761,11 +6765,11 @@ class AuroInput extends BaseInput {
     }
 
     if (this.layout === 'snowflake') {
-      return this.hasValue || this.hasFocus || this.placeholder ? 'body-xs' : 'body-lg';
+      return this.hasValue || this.hasFocus || this.placeholderStr ? 'body-xs' : 'body-lg';
     }
 
     // classic layout (default)
-    return ((!this.value || this.value.length === 0) && !this.placeholder && !this.hasFocus) ? 'body-default' : 'body-xs';
+    return ((!this.value || this.value.length === 0) && !this.placeholderStr && !this.hasFocus) ? 'body-default' : 'body-xs';
   }
 
   /**

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

@@ -117,6 +117,24 @@ export default class BaseInput extends AuroElement {
             type: StringConstructor;
             reflect: boolean;
         };
+        /**
+         * @private
+         * Flag to indicate if the input currently has value.
+         */
+        hasValue: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
+        /**
+         * @private
+         * Flag to indicate if the input currently has focus.
+         */
+        hasFocus: {
+            type: BooleanConstructor;
+            reflect: boolean;
+            attribute: boolean;
+        };
         /**
          * 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.
          */
@@ -382,7 +400,6 @@ export default class BaseInput extends AuroElement {
     validationCCLength: number;
     hasValue: boolean;
     label: string;
-    placeholderStr: any;
     allowedInputTypes: string[];
     /**
      * Credit Card is not included as this caused cursor placement issues.
@@ -562,7 +579,7 @@ export default class BaseInput extends AuroElement {
      * @private
      * @returns {void}
      */
-    private getPlaceholder;
+    private get placeholderStr();
     /**
      * Defines placement of input icon based on type, used with classMap.
      * @private