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

package/components/input/dist/index.js

@@ -5130,7 +5130,6 @@ class BaseInput extends AuroElement {
     this.validationCCLength = undefined;
     this.hasValue = false;
     this.label = 'Input label is undefined';
-    this.placeholderStr = '';
 
     this.allowedInputTypes = [
       "text",
@@ -5287,6 +5286,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.
        */
@@ -5589,7 +5608,6 @@ class BaseInput extends AuroElement {
       this.ValidityMessageOverride = this.setCustomValidity;
     }
 
-    this.getPlaceholder();
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
   }
@@ -5674,10 +5692,6 @@ class BaseInput extends AuroElement {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('placeholder')) {
-      this.getPlaceholder();
-    }
-
     if (changedProperties.has('format')) {
       this.configureAutoFormatting();
     }
@@ -5711,10 +5725,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) {
@@ -5900,8 +5912,6 @@ class BaseInput extends AuroElement {
   handleFocusin() {
     this.hasFocus = true;
 
-    this.getPlaceholder();
-
     this.touched = true;
   }
 
@@ -5912,7 +5922,6 @@ class BaseInput extends AuroElement {
    */
   handleFocusout() {
     this.hasFocus = false;
-    this.getPlaceholder();
   }
 
   /**
@@ -6049,16 +6058,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 || "";
   }
 
   /**
@@ -6640,7 +6644,7 @@ class AuroInput extends BaseInput {
       (
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
-        (!this.placeholder || this.placeholder === '')
+        (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
@@ -6685,11 +6689,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/registered.js

@@ -5130,7 +5130,6 @@ class BaseInput extends AuroElement {
     this.validationCCLength = undefined;
     this.hasValue = false;
     this.label = 'Input label is undefined';
-    this.placeholderStr = '';
 
     this.allowedInputTypes = [
       "text",
@@ -5287,6 +5286,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.
        */
@@ -5589,7 +5608,6 @@ class BaseInput extends AuroElement {
       this.ValidityMessageOverride = this.setCustomValidity;
     }
 
-    this.getPlaceholder();
     this.setCustomHelpTextMessage();
     this.configureAutoFormatting();
   }
@@ -5674,10 +5692,6 @@ class BaseInput extends AuroElement {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('placeholder')) {
-      this.getPlaceholder();
-    }
-
     if (changedProperties.has('format')) {
       this.configureAutoFormatting();
     }
@@ -5711,10 +5725,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) {
@@ -5900,8 +5912,6 @@ class BaseInput extends AuroElement {
   handleFocusin() {
     this.hasFocus = true;
 
-    this.getPlaceholder();
-
     this.touched = true;
   }
 
@@ -5912,7 +5922,6 @@ class BaseInput extends AuroElement {
    */
   handleFocusout() {
     this.hasFocus = false;
-    this.getPlaceholder();
   }
 
   /**
@@ -6049,16 +6058,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 || "";
   }
 
   /**
@@ -6640,7 +6644,7 @@ class AuroInput extends BaseInput {
       (
         (!this.value || this.value.length === 0) &&
         !this.hasFocus &&
-        (!this.placeholder || this.placeholder === '')
+        (!this.placeholderStr || this.placeholderStr === '')
       );
   }
 
@@ -6685,11 +6689,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/package.json

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