@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.0 → 0.0.0-pr624.10

package/components/select/demo/api.md

@@ -14,45 +14,53 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a
 
 ## Properties
 
-| Property                        | Attribute                       | Type      | Default        | Description                                      |
-|---------------------------------|---------------------------------|-----------|----------------|--------------------------------------------------|
-| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean` | "false"        | If declared, bib's position will be automatically calculated where to appear. |
-| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`  |                | If declared, sets the autocomplete attribute for the select element. |
-| [disabled](#disabled)                      | `disabled`                      | `boolean` |                | When attribute is present, element shows disabled state. |
-| [error](#error)                         | `error`                         | `string`  |                | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
-| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean` |                | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
-| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`  | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
-| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean` |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600 |
-| [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean` |                | Sets multi-select mode, allowing multiple options to be selected at once. |
-| [name](#name)                          | `name`                          | `string`  |                | The name for the select element.                 |
-| [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean` |                | When true, checkmark on selected option will no longer be present. |
-| [noFlip](#noFlip)                        | `noFlip`                        | `boolean` | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
-| [noValidate](#noValidate)                    | `noValidate`                    | `boolean` |                | If set, disables auto-validation on blur.        |
-| [offset](#offset)                        | `offset`                        | `number`  | "0"            | Gap between the trigger element and bib.         |
-| [onDark](#onDark)                        | `onDark`                        | `boolean` |                | If declared, onDark styles will be applied to the trigger. |
-| [optionSelected](#optionSelected)                | `optionSelected`                |           |                | Specifies the current selected menuOption.       |
-| [placement](#placement)                     | `placement`                     | `string`  | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
-| [required](#required)                      | `required`                      | `boolean` |                | Populates the `required` attribute on the element. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`  |                | Sets a custom help text message to display for all validityStates. |
-| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`  |                | Custom help text message to display when validity = `customError`. |
-| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`  |                | Custom help text message to display when validity = `valueMissing`. |
-| [validity](#validity)                      | `validity`                      | `string`  |                | Specifies the `validityState` this element is in. |
-| [value](#value)                         | `value`                         |           |                | Value selected for the component.                |
+| Property                        | Attribute                       | Type                              | Default        | Description                                      |
+|---------------------------------|---------------------------------|-----------------------------------|----------------|--------------------------------------------------|
+| [autoPlacement](#autoPlacement)                 | `autoPlacement`                 | `boolean`                         | "false"        | If declared, bib's position will be automatically calculated where to appear. |
+| [autocomplete](#autocomplete)                  | `autocomplete`                  | `string`                          |                | If declared, sets the autocomplete attribute for the select element. |
+| [disabled](#disabled)                      | `disabled`                      | `boolean`                         |                | When attribute is present, element shows disabled state. |
+| [error](#error)                         | `error`                         | `string`                          |                | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
+| [flexMenuWidth](#flexMenuWidth)                 | `flexMenuWidth`                 | `boolean`                         |                | If set, makes dropdown width match the size of the content, rather than the width of the trigger. |
+| [forceDisplayValue](#forceDisplayValue)             | `forceDisplayValue`             | `boolean`                         | false          | If declared, the label and value will be visually hidden and the displayValue will render 100% of the time. |
+| [fullscreenBreakpoint](#fullscreenBreakpoint)          | `fullscreenBreakpoint`          | `string`                          | "sm"           | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
+| [largeFullscreenHeadline](#largeFullscreenHeadline)       | `largeFullscreenHeadline`       | `boolean`                         |                | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
+| [layout](#layout)                        |                                 | `string`                          | "classic"      |                                                  |
+| [matchWidth](#matchWidth)                    | `matchWidth`                    | `boolean`                         | true           | If declared, the popover and trigger will be set to the same width. |
+| [multiSelect](#multiSelect)                   | `multiselect`                   | `boolean`                         |                | Sets multi-select mode, allowing multiple options to be selected at once. |
+| [name](#name)                          | `name`                          | `string`                          |                | The name for the select element.                 |
+| [noCheckmark](#noCheckmark)                   | `noCheckmark`                   | `boolean`                         |                | When true, checkmark on selected option will no longer be present. |
+| [noFlip](#noFlip)                        | `noFlip`                        | `boolean`                         | "false"        | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `boolean`                         |                | If set, disables auto-validation on blur.        |
+| [offset](#offset)                        | `offset`                        | `number`                          | "0"            | Gap between the trigger element and bib.         |
+| [onDark](#onDark)                        | `onDark`                        | `boolean`                         |                | If declared, onDark styles will be applied to the trigger. |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `HTMLElement\|Array<HTMLElement>` |                | Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true. |
+| [placement](#placement)                     | `placement`                     | `string`                          | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
+| [required](#required)                      | `required`                      | `boolean`                         |                | Populates the `required` attribute on the element. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `string`                          |                | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `string`                          |                | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `string`                          |                | Custom help text message to display when validity = `valueMissing`. |
+| [shape](#shape)                         |                                 | `string`                          | "classic"      |                                                  |
+| [size](#size)                          |                                 | `string`                          | "xl"           |                                                  |
+| [validity](#validity)                      | `validity`                      | `string`                          |                | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `String\|Array<String>`           |                | Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true. |
 
 ## Methods
 
-| Method     | Type                                   | Description                                      |
-|------------|----------------------------------------|--------------------------------------------------|
-| [reset](#reset)    | `(): void`                             | Resets component to initial state.               |
-| [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
+| Method               | Type                                   | Description                                      |
+|----------------------|----------------------------------------|--------------------------------------------------|
+| [renderAriaHtml](#renderAriaHtml)     | `(): TemplateResult`                   |                                                  |
+| [renderBACKUP](#renderBACKUP)       | `(): TemplateResult`                   |                                                  |
+| [renderNativeSelect](#renderNativeSelect) | `(): TemplateResult`                   |                                                  |
+| [reset](#reset)              | `(): void`                             | Resets component to initial state.               |
+| [validate](#validate)           | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
 
 ## 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 delivered in `detail` object. |
 
 ## Slots
 
@@ -62,7 +70,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
 
@@ -161,7 +170,7 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
   <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
   <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
   <br/><br/>
-  <auro-select id="valueExample" value='["price"]'>
+  <auro-select id="valueExample" multiselect value='["price", "duration"]'>
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <span slot="label">Name</span>
     <auro-menu>
@@ -184,7 +193,7 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele
 <auro-button id="validValueExampleBtn">Set Value to Valid Option</auro-button>
 <auro-button id="invalidValueExampleBtn">Set Value to Invalid Option</auro-button>
 <br/><br/>
-<auro-select id="valueExample" value='["price"]'>
+<auro-select id="valueExample" multiselect value='["price", "duration"]'>
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <span slot="label">Name</span>
   <auro-menu>
@@ -206,11 +215,11 @@ export function valueExample() {
   const valueExample = document.querySelector('#valueExample');
 
   document.querySelector('#validValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['arrival'];
+    valueExample.value = '["arrival", "prefer alaska"]';
   });
 
   document.querySelector('#invalidValueExampleBtn').addEventListener('click', () => {
-    valueExample.value = ['flight course'];
+    valueExample.value = '["flight course"]';
   });
 }
 ```
@@ -786,7 +795,7 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
   <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
   <auro-button id="resetStateBtn">Reset</auro-button>
   <br/><br/>
-  <auro-select id="resetStateExample" value='["price"]'>
+  <auro-select id="resetStateExample" value="price">
     <span slot="bib.fullscreen.headline">Bib Headline</span>
     <label slot="placeholder">Placeholder Text</label>
     <span slot="label">Name</span>
@@ -809,7 +818,7 @@ Use the `reset()` method to reset the `<auro-select>`'s `value` and `validity` s
 ```html
 <auro-button id="resetStateBtn">Reset</auro-button>
 <br/><br/>
-<auro-select id="resetStateExample" value='["price"]'>
+<auro-select id="resetStateExample" value="price">
   <span slot="bib.fullscreen.headline">Bib Headline</span>
   <label slot="placeholder">Placeholder Text</label>
   <span slot="label">Name</span>
@@ -1033,6 +1042,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 the `input` event which delivers the new value and selected `auro-menuoption` element in the `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.
 
@@ -1193,7 +1259,7 @@ The component can be in a dialog.
     <auro-dialog id="select-dialog">
       <span slot="header">Select in Dialog</span>
       <div slot="content">
-        <auro-select id="valueExample" value='["price"]'>
+        <auro-select id="valueExample" value="price">
           <span slot="bib.fullscreen.headline">Bib Headline</span>
           <span slot="label">Name</span>
           <auro-menu>
@@ -1221,7 +1287,7 @@ The component can be in a dialog.
   <auro-dialog id="select-dialog">
     <span slot="header">Select in Dialog</span>
     <div slot="content">
-      <auro-select id="valueExample" value='["price"]'>
+      <auro-select id="valueExample" value="price">
         <span slot="bib.fullscreen.headline">Bib Headline</span>
         <span slot="label">Name</span>
         <auro-menu>