@aurodesignsystem-dev/auro-formkit 0.0.0-pr1215.1 → 0.0.0-pr1217.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/components/menu/demo/api.min.js

@@ -1327,10 +1327,15 @@ class AuroMenuOption extends AuroElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
   }
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     // Add the tag name as an attribute if it is different than the component name
+    // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  }
 
+  firstUpdated() {
     if (!this.hasAttribute('size')) {
       this.size = this.parentElement.getAttribute('size') || 'sm';
     }

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

@@ -1287,10 +1287,15 @@ class AuroMenuOption extends AuroElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
   }
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     // Add the tag name as an attribute if it is different than the component name
+    // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  }
 
+  firstUpdated() {
     if (!this.hasAttribute('size')) {
       this.size = this.parentElement.getAttribute('size') || 'sm';
     }

package/components/menu/dist/index.js

@@ -1281,10 +1281,15 @@ class AuroMenuOption extends AuroElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
   }
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     // Add the tag name as an attribute if it is different than the component name
+    // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  }
 
+  firstUpdated() {
     if (!this.hasAttribute('size')) {
       this.size = this.parentElement.getAttribute('size') || 'sm';
     }

package/components/menu/dist/registered.js

@@ -1240,10 +1240,15 @@ class AuroMenuOption extends AuroElement {
     AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroMenuOption);
   }
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     // Add the tag name as an attribute if it is different than the component name
+    // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  }
 
+  firstUpdated() {
     if (!this.hasAttribute('size')) {
       this.size = this.parentElement.getAttribute('size') || 'sm';
     }

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

@@ -6671,6 +6671,7 @@ class AuroSelect extends AuroElement$1 {
     }
 
     this.updateMenuShapeSize();
+    this.updateMenuValue(this.value);
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;
@@ -8485,10 +8486,15 @@ class AuroMenuOption extends AuroElement$1 {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroMenuOption);
   }
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     // Add the tag name as an attribute if it is different than the component name
+    // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  }
 
+  firstUpdated() {
     if (!this.hasAttribute('size')) {
       this.size = this.parentElement.getAttribute('size') || 'sm';
     }

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

@@ -6579,6 +6579,7 @@ class AuroSelect extends AuroElement$1 {
     }
 
     this.updateMenuShapeSize();
+    this.updateMenuValue(this.value);
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;
@@ -8393,10 +8394,15 @@ class AuroMenuOption extends AuroElement$1 {
     AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroMenuOption);
   }
 
-  firstUpdated() {
+  connectedCallback() {
+    super.connectedCallback();
+
     // Add the tag name as an attribute if it is different than the component name
+    // Add this step soon as this node gets attached to the DOM to avoid racing condition with menu's value setting logic.
     this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
+  }
 
+  firstUpdated() {
     if (!this.hasAttribute('size')) {
       this.size = this.parentElement.getAttribute('size') || 'sm';
     }

package/components/select/dist/index.js

@@ -6516,6 +6516,7 @@ class AuroSelect extends AuroElement$1 {
     }
 
     this.updateMenuShapeSize();
+    this.updateMenuValue(this.value);
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;

package/components/select/dist/registered.js

@@ -6516,6 +6516,7 @@ class AuroSelect extends AuroElement$1 {
     }
 
     this.updateMenuShapeSize();
+    this.updateMenuValue(this.value);
 
     if (this.multiSelect) {
       this.menu.multiSelect = this.multiSelect;

package/package.json

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