@aurodesignsystem-dev/auro-formkit 0.0.0-pr649.6 → 0.0.0-pr657.0

package/components/select/demo/api.js

@@ -5,6 +5,7 @@ import { valueAlertExample } from "../apiExamples/valueAlert.js";
 import { inDialogExample } from '../apiExamples/inDialog';
 import { resetStateExample } from "../apiExamples/resetState";
 import { auroMenuLoadingExample } from "../apiExamples/loading";
+import { valueTextExample } from '../apiExamples/valueText.js';
 
 /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
 import { AuroSelect } from '../src/auro-select.js';
@@ -24,6 +25,7 @@ export function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
+    valueTextExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/components/select/demo/api.md

@@ -48,11 +48,11 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Events
 
-| Event                       | Type               | Description                                      |
-|-----------------------------|--------------------|--------------------------------------------------|
-| `auroFormElement-validated` |                    | Notifies that the `validity` and `errorMessage` values have changed. |
-| `auroSelect-valueSet`       | `CustomEvent<any>` | Notifies that the component has a new value set. |
-| [input](#input)                     | `CustomEvent<any>` | Notifies every time the value prop of the element is changed. |
+| Event                       | Type                                             | Description                                      |
+|-----------------------------|--------------------------------------------------|--------------------------------------------------|
+| `auroFormElement-validated` |                                                  | Notifies that the `validity` and `errorMessage` values have changed. |
+| `auroSelect-valueSet`       | `CustomEvent<any>`                               | Notifies that the component has a new value set. |
+| [input](#input)                     | `CustomEvent<{ optionSelected: any; value: any; }>` | Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be deleiverd in `detail` object. |
 
 ## Slots
 
@@ -62,7 +62,8 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 | `bib.fullscreen.headline` | Defines the headline to display above menu-options |
 | [helpText](#helpText)                | Defines the content of the helpText.             |
 | [label](#label)                   | Defines the content of the label.                |
-| [placeholder](#placeholder)             | Defines the content of the placeholder to be shown when there is no value |
+| [placeholder](#placeholder)             | Defines the content of the placeholder to be shown when there is no value |
+| [valueText](#valueText)               | Dropdown value text display.                     |
 
 ## CSS Shadow Parts
 
@@ -1033,6 +1034,63 @@ export function auroMenuLoadingExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+### valueText <a name="valueText"></a>
+The label for selected option can be customized using `valueText` slot.
+This slot can be manipulated on `input` event which deleivers new value and selected `auro-menuoption` element in `detail` object.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/valueText.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/valueText.html -->
+  <auro-select id="valueTextExample" autocomplete="address-level1">
+    <span slot="bib.fullscreen.headline">Select Your Gender</span>
+    <span slot="label">Gender</span>
+    <span slot="valueText"></span>
+      <auro-menu>
+        <auro-menuoption value="m" data-display="Male">M - Male</auro-menuoption>
+        <auro-menuoption value="f" data-display="Female">F - Female</auro-menuoption>
+        <auro-menuoption value="x" data-display="Unspecified">X - Unspecified</auro-menuoption>
+        <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed</auro-menuoption>
+    </auro-menu>
+  </auro-select>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueText.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueText.js -->
+
+```js
+export function valueTextExample() {
+  const onValueTextSelectInput = (e) => {
+    const valueText = e.target.querySelector("[slot=valueText]");
+
+    valueText.textContent = e.detail.optionSelected.dataset.display;
+  };
+
+  const select = document.querySelector("#valueTextExample");
+  select.addEventListener('input', onValueTextSelectInput);
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/valueText.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/valueText.html -->
+
+```html
+<auro-select id="valueTextExample" autocomplete="address-level1">
+  <span slot="bib.fullscreen.headline">Select Your Gender</span>
+  <span slot="label">Gender</span>
+  <span slot="valueText"></span>
+    <auro-menu>
+      <auro-menuoption value="m" data-display="Male">M - Male</auro-menuoption>
+      <auro-menuoption value="f" data-display="Female">F - Female</auro-menuoption>
+      <auro-menuoption value="x" data-display="Unspecified">X - Unspecified</auro-menuoption>
+      <auro-menuoption value="u" data-display="Undisclosed">U - Undisclosed</auro-menuoption>
+  </auro-menu>
+</auro-select>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Customized bib position
 The bib position can be customized with `placement`, `offset`, `flip`, `autoPlacement` attributes.
 

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

@@ -90,6 +90,17 @@ function auroMenuLoadingExample() {
   });
 }
 
+function valueTextExample() {
+  const onValueTextSelectInput = (e) => {
+    const valueText = e.target.querySelector("[slot=valueText]");
+
+    valueText.textContent = e.detail.optionSelected.dataset.display;
+  };
+
+  const select = document.querySelector("#valueTextExample");
+  select.addEventListener('input', onValueTextSelectInput);
+}
+
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -5537,8 +5548,9 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be deleiverd in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5880,12 +5892,8 @@ class AuroSelect extends i$2 {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
     if (this.optionSelected) {
@@ -5898,9 +5906,7 @@ class AuroSelect extends i$2 {
         displayText = this.optionSelected.textContent;
       }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6229,6 +6235,10 @@ class AuroSelect extends i$2 {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6357,7 +6367,13 @@ class AuroSelect extends i$2 {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${e(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${e(placeholderClass)}"
+              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
+              >
+              <slot name="placeholder"></slot>
+            </span>
+            <slot name="valueText" id="valueText"></slot>
           </span>
 
           <div class="menuWrapper">
@@ -7650,6 +7666,7 @@ function initExamples(initCount) {
     inDialogExample();
     resetStateExample();
     auroMenuLoadingExample();
+    valueTextExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

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

@@ -5445,8 +5445,9 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be deleiverd in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5788,12 +5789,8 @@ class AuroSelect extends i$2 {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
     if (this.optionSelected) {
@@ -5806,9 +5803,7 @@ class AuroSelect extends i$2 {
         displayText = this.optionSelected.textContent;
       }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6137,6 +6132,10 @@ class AuroSelect extends i$2 {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6265,7 +6264,13 @@ class AuroSelect extends i$2 {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${e(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${e(placeholderClass)}"
+              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
+              >
+              <slot name="placeholder"></slot>
+            </span>
+            <slot name="valueText" id="valueText"></slot>
           </span>
 
           <div class="menuWrapper">

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

@@ -6,8 +6,9 @@
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be deleiverd in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */

package/components/select/dist/index.js

@@ -5399,8 +5399,9 @@ var styleCss = css`:focus:not(:focus-visible){outline:3px solid transparent}.uti
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be deleiverd in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5742,12 +5743,8 @@ class AuroSelect extends LitElement {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
     if (this.optionSelected) {
@@ -5760,9 +5757,7 @@ class AuroSelect extends LitElement {
         displayText = this.optionSelected.textContent;
       }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6091,6 +6086,10 @@ class AuroSelect extends LitElement {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6219,7 +6218,13 @@ class AuroSelect extends LitElement {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${classMap(placeholderClass)}"
+              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
+              >
+              <slot name="placeholder"></slot>
+            </span>
+            <slot name="valueText" id="valueText"></slot>
           </span>
 
           <div class="menuWrapper">

package/components/select/dist/registered.js

@@ -5399,8 +5399,9 @@ var styleCss = css`:focus:not(:focus-visible){outline:3px solid transparent}.uti
  * @slot label - Defines the content of the label.
  * @slot helpText - Defines the content of the helpText.
  * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
+ * @slot valueText - Dropdown value text display.
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
- * @event input - Notifies every time the value prop of the element is changed.
+ * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be deleiverd in `detail` object.
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
  * @csspart helpText - Apply CSS to the help text.
  */
@@ -5742,12 +5743,8 @@ class AuroSelect extends LitElement {
   updateDisplayedValue() {
     const triggerContentEl = this.dropdown.querySelector('#triggerFocus');
 
-    // Clear everything except placeholder
-    const placeholder = triggerContentEl.querySelector('#placeholder');
-    triggerContentEl.innerHTML = '';
-    if (placeholder) {
-      triggerContentEl.appendChild(placeholder);
-    }
+    const valueText = triggerContentEl.querySelector("#valueText");
+    valueText.textContent = '';
 
     // Handle selected options
     if (this.optionSelected) {
@@ -5760,9 +5757,7 @@ class AuroSelect extends LitElement {
         displayText = this.optionSelected.textContent;
       }
 
-      const span = document.createElement('span');
-      span.textContent = displayText;
-      triggerContentEl.appendChild(span);
+      valueText.textContent = displayText;
     }
 
     this.dropdown.requestUpdate();
@@ -6091,6 +6086,10 @@ class AuroSelect extends LitElement {
         bubbles: true,
         cancelable: true,
         composed: true,
+        detail: {
+          optionSelected: this.optionSelected,
+          value: this.value
+        }
       }));
     }
 
@@ -6219,7 +6218,13 @@ class AuroSelect extends LitElement {
           ?noFlip="${this.noFlip}"
           part="dropdown">
           <span slot="trigger" aria-haspopup="true" id="triggerFocus">
-            <span id="placeholder" class="${classMap(placeholderClass)}"><slot name="placeholder"></slot></span>
+            <span id="placeholder"
+              class="${classMap(placeholderClass)}"
+              ?aria-hidden="${this.optionSelected && this.optionSelected.length ? 'true' : false}"
+              >
+              <slot name="placeholder"></slot>
+            </span>
+            <slot name="valueText" id="valueText"></slot>
           </span>
 
           <div class="menuWrapper">

package/package.json

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