@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.6 → 0.0.0-pr624.7

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

@@ -6468,6 +6468,7 @@ class AuroSelect extends AuroElement$3 {
     this.value = undefined;
     this.fullscreenBreakpoint = 'sm';
     this.onDark = false;
+    this.isPopoverVisible = false;
   }
 
   // This function is to define props used within the scope of this component
@@ -6509,6 +6510,14 @@ class AuroSelect extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * @private
+       */
+      isPopoverVisible: {
+        type: Boolean,
+        reflect: false
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -6755,6 +6764,10 @@ class AuroSelect extends AuroElement$3 {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    this.dropdown.addEventListener('auroDropdown-toggled', () => {
+      this.isPopoverVisible = this.dropdown.isPopoverVisible;
+    });
+
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
 
@@ -6787,13 +6800,18 @@ class AuroSelect extends AuroElement$3 {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
     // Clear out old value
-    // const placeholder = triggerContentEl.querySelector('#placeholder');
     const valueElem = triggerContentEl.querySelector('#value');
     if (valueElem) {
       valueElem.innerHTML = '';
-      // valueElem.innerHTML = ''.appendChild(value);
     }
 
+    const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
+    const slottedElements = slot.assignedElements();
+
+    slottedElements.forEach((element) => {
+      element.remove();
+    });
+
     // Handle selected options
     if (this.optionSelected) {
       if (this.multiSelect && this.optionSelected.length > 0) {
@@ -6803,10 +6821,8 @@ class AuroSelect extends AuroElement$3 {
       } else {
         valueElem.innerHTML = this.optionSelected.innerHTML;
         const displayValueEl = this.optionSelected.querySelector("[slot='displayValue']");
-        if (displayValueEl) {
-          const oldDisplayValueEl = this.querySelectorAll("[slot='displayValue']");
-          oldDisplayValueEl.forEach((el) => el.remove());
 
+        if (displayValueEl) {
           this.appendChild(displayValueEl.cloneNode(true));
         }
         this.hasDisplayValueContent = displayValueEl !== null;
@@ -7315,14 +7331,14 @@ class AuroSelect extends AuroElement$3 {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
-      'hasFocus': this.hasFocus,
+      'hasFocus': this.isPopoverVisible,
       'withValue': this.value && this.value.length > 0,
       'force': this.forceDisplayValue,
     };
 
     const valueContainerClasses = {
       'valueContainer': true,
-      'util_displayHiddenVisually': true
+      'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
     };
 
     return u`
@@ -7395,14 +7411,14 @@ class AuroSelect extends AuroElement$3 {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
-      'hasFocus': this.hasFocus,
+      'hasFocus': this.isPopoverVisible,
       'withValue': this.value && this.value.length > 0,
       'force': this.forceDisplayValue,
     };
 
     const valueContainerClasses = {
       'valueContainer': true,
-      'util_displayHiddenVisually': (this.forceDisplayValue || !this.hasFocus) && this.hasDisplayValueContent
+      'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
     };
 
     return u`

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

@@ -6365,6 +6365,7 @@ class AuroSelect extends AuroElement$3 {
     this.value = undefined;
     this.fullscreenBreakpoint = 'sm';
     this.onDark = false;
+    this.isPopoverVisible = false;
   }
 
   // This function is to define props used within the scope of this component
@@ -6406,6 +6407,14 @@ class AuroSelect extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * @private
+       */
+      isPopoverVisible: {
+        type: Boolean,
+        reflect: false
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -6652,6 +6661,10 @@ class AuroSelect extends AuroElement$3 {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    this.dropdown.addEventListener('auroDropdown-toggled', () => {
+      this.isPopoverVisible = this.dropdown.isPopoverVisible;
+    });
+
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
 
@@ -6684,13 +6697,18 @@ class AuroSelect extends AuroElement$3 {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
     // Clear out old value
-    // const placeholder = triggerContentEl.querySelector('#placeholder');
     const valueElem = triggerContentEl.querySelector('#value');
     if (valueElem) {
       valueElem.innerHTML = '';
-      // valueElem.innerHTML = ''.appendChild(value);
     }
 
+    const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
+    const slottedElements = slot.assignedElements();
+
+    slottedElements.forEach((element) => {
+      element.remove();
+    });
+
     // Handle selected options
     if (this.optionSelected) {
       if (this.multiSelect && this.optionSelected.length > 0) {
@@ -6700,10 +6718,8 @@ class AuroSelect extends AuroElement$3 {
       } else {
         valueElem.innerHTML = this.optionSelected.innerHTML;
         const displayValueEl = this.optionSelected.querySelector("[slot='displayValue']");
-        if (displayValueEl) {
-          const oldDisplayValueEl = this.querySelectorAll("[slot='displayValue']");
-          oldDisplayValueEl.forEach((el) => el.remove());
 
+        if (displayValueEl) {
           this.appendChild(displayValueEl.cloneNode(true));
         }
         this.hasDisplayValueContent = displayValueEl !== null;
@@ -7212,14 +7228,14 @@ class AuroSelect extends AuroElement$3 {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
-      'hasFocus': this.hasFocus,
+      'hasFocus': this.isPopoverVisible,
       'withValue': this.value && this.value.length > 0,
       'force': this.forceDisplayValue,
     };
 
     const valueContainerClasses = {
       'valueContainer': true,
-      'util_displayHiddenVisually': true
+      'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
     };
 
     return u`
@@ -7292,14 +7308,14 @@ class AuroSelect extends AuroElement$3 {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
-      'hasFocus': this.hasFocus,
+      'hasFocus': this.isPopoverVisible,
       'withValue': this.value && this.value.length > 0,
       'force': this.forceDisplayValue,
     };
 
     const valueContainerClasses = {
       'valueContainer': true,
-      'util_displayHiddenVisually': (this.forceDisplayValue || !this.hasFocus) && this.hasDisplayValueContent
+      'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
     };
 
     return u`

package/components/select/dist/auro-select.d.ts

@@ -43,6 +43,13 @@ export class AuroSelect extends AuroElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        /**
+         * @private
+         */
+        isPopoverVisible: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         /**
          * If declared, the popover and trigger will be set to the same width.
          */
@@ -293,6 +300,7 @@ export class AuroSelect extends AuroElement {
     value: any;
     fullscreenBreakpoint: string;
     onDark: boolean;
+    isPopoverVisible: any;
     /**
      * Returns classmap configuration for wrapper elements in each layout.
      * @private

package/components/select/dist/index.js

@@ -6319,6 +6319,7 @@ class AuroSelect extends AuroElement$3 {
     this.value = undefined;
     this.fullscreenBreakpoint = 'sm';
     this.onDark = false;
+    this.isPopoverVisible = false;
   }
 
   // This function is to define props used within the scope of this component
@@ -6360,6 +6361,14 @@ class AuroSelect extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * @private
+       */
+      isPopoverVisible: {
+        type: Boolean,
+        reflect: false
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -6606,6 +6615,10 @@ class AuroSelect extends AuroElement$3 {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    this.dropdown.addEventListener('auroDropdown-toggled', () => {
+      this.isPopoverVisible = this.dropdown.isPopoverVisible;
+    });
+
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
 
@@ -6638,13 +6651,18 @@ class AuroSelect extends AuroElement$3 {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
     // Clear out old value
-    // const placeholder = triggerContentEl.querySelector('#placeholder');
     const valueElem = triggerContentEl.querySelector('#value');
     if (valueElem) {
       valueElem.innerHTML = '';
-      // valueElem.innerHTML = ''.appendChild(value);
     }
 
+    const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
+    const slottedElements = slot.assignedElements();
+
+    slottedElements.forEach((element) => {
+      element.remove();
+    });
+
     // Handle selected options
     if (this.optionSelected) {
       if (this.multiSelect && this.optionSelected.length > 0) {
@@ -6654,10 +6672,8 @@ class AuroSelect extends AuroElement$3 {
       } else {
         valueElem.innerHTML = this.optionSelected.innerHTML;
         const displayValueEl = this.optionSelected.querySelector("[slot='displayValue']");
-        if (displayValueEl) {
-          const oldDisplayValueEl = this.querySelectorAll("[slot='displayValue']");
-          oldDisplayValueEl.forEach((el) => el.remove());
 
+        if (displayValueEl) {
           this.appendChild(displayValueEl.cloneNode(true));
         }
         this.hasDisplayValueContent = displayValueEl !== null;
@@ -7166,14 +7182,14 @@ class AuroSelect extends AuroElement$3 {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
-      'hasFocus': this.hasFocus,
+      'hasFocus': this.isPopoverVisible,
       'withValue': this.value && this.value.length > 0,
       'force': this.forceDisplayValue,
     };
 
     const valueContainerClasses = {
       'valueContainer': true,
-      'util_displayHiddenVisually': true
+      'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
     };
 
     return html`
@@ -7246,14 +7262,14 @@ class AuroSelect extends AuroElement$3 {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
-      'hasFocus': this.hasFocus,
+      'hasFocus': this.isPopoverVisible,
       'withValue': this.value && this.value.length > 0,
       'force': this.forceDisplayValue,
     };
 
     const valueContainerClasses = {
       'valueContainer': true,
-      'util_displayHiddenVisually': (this.forceDisplayValue || !this.hasFocus) && this.hasDisplayValueContent
+      'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
     };
 
     return html`

package/components/select/dist/registered.js

@@ -6319,6 +6319,7 @@ class AuroSelect extends AuroElement$3 {
     this.value = undefined;
     this.fullscreenBreakpoint = 'sm';
     this.onDark = false;
+    this.isPopoverVisible = false;
   }
 
   // This function is to define props used within the scope of this component
@@ -6360,6 +6361,14 @@ class AuroSelect extends AuroElement$3 {
         reflect: true
       },
 
+      /**
+       * @private
+       */
+      isPopoverVisible: {
+        type: Boolean,
+        reflect: false
+      },
+
       /**
        * If declared, the popover and trigger will be set to the same width.
        */
@@ -6606,6 +6615,10 @@ class AuroSelect extends AuroElement$3 {
   configureDropdown() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
 
+    this.dropdown.addEventListener('auroDropdown-toggled', () => {
+      this.isPopoverVisible = this.dropdown.isPopoverVisible;
+    });
+
     // setting up bibtemplate
     this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
 
@@ -6638,13 +6651,18 @@ class AuroSelect extends AuroElement$3 {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
     // Clear out old value
-    // const placeholder = triggerContentEl.querySelector('#placeholder');
     const valueElem = triggerContentEl.querySelector('#value');
     if (valueElem) {
       valueElem.innerHTML = '';
-      // valueElem.innerHTML = ''.appendChild(value);
     }
 
+    const slot = this.shadowRoot.querySelector('slot[name="displayValue"]');
+    const slottedElements = slot.assignedElements();
+
+    slottedElements.forEach((element) => {
+      element.remove();
+    });
+
     // Handle selected options
     if (this.optionSelected) {
       if (this.multiSelect && this.optionSelected.length > 0) {
@@ -6654,10 +6672,8 @@ class AuroSelect extends AuroElement$3 {
       } else {
         valueElem.innerHTML = this.optionSelected.innerHTML;
         const displayValueEl = this.optionSelected.querySelector("[slot='displayValue']");
-        if (displayValueEl) {
-          const oldDisplayValueEl = this.querySelectorAll("[slot='displayValue']");
-          oldDisplayValueEl.forEach((el) => el.remove());
 
+        if (displayValueEl) {
           this.appendChild(displayValueEl.cloneNode(true));
         }
         this.hasDisplayValueContent = displayValueEl !== null;
@@ -7166,14 +7182,14 @@ class AuroSelect extends AuroElement$3 {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
-      'hasFocus': this.hasFocus,
+      'hasFocus': this.isPopoverVisible,
       'withValue': this.value && this.value.length > 0,
       'force': this.forceDisplayValue,
     };
 
     const valueContainerClasses = {
       'valueContainer': true,
-      'util_displayHiddenVisually': true
+      'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
     };
 
     return html`
@@ -7246,14 +7262,14 @@ class AuroSelect extends AuroElement$3 {
     const displayValueClasses = {
       'displayValue': true,
       'hasContent': this.hasDisplayValueContent,
-      'hasFocus': this.hasFocus,
+      'hasFocus': this.isPopoverVisible,
       'withValue': this.value && this.value.length > 0,
       'force': this.forceDisplayValue,
     };
 
     const valueContainerClasses = {
       'valueContainer': true,
-      'util_displayHiddenVisually': (this.forceDisplayValue || !this.hasFocus) && this.hasDisplayValueContent
+      'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
     };
 
     return html`

package/package.json

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