@aurodesignsystem/auro-formkit 1.6.0-beta.6 → 1.6.0-beta.8

package/components/menu/demo/api.md

@@ -7,14 +7,16 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Properties
 
-| Property         | Attribute        | Type      | Default     | Description                                      |
-|------------------|------------------|-----------|-------------|--------------------------------------------------|
-| [disabled](#disabled)       | `disabled`       | `Boolean` |             | When true, the entire menu and all options are disabled; |
-| [matchWord](#matchWord)      | `matchWord`      | `String`  | "undefined" | Specifies the a string used to highlight matched string parts in options. |
-| [noCheckmark](#noCheckmark)    | `noCheckmark`    | `Boolean` | false       | When true, selected option will not show the checkmark. |
-| [optionActive](#optionActive)   | `optionActive`   | `object`  | "undefined" |                                                  |
-| [optionSelected](#optionSelected) | `optionSelected` | `Object`  | "undefined" | Specifies the current selected menuOption.       |
-| [value](#value)          | `value`          | `String`  | "undefined" | Value selected for the menu.                     |
+| Property                | Attribute        | Type      | Default     | Description                                      |
+|-------------------------|------------------|-----------|-------------|--------------------------------------------------|
+| [disabled](#disabled)              | `disabled`       | `Boolean` |             | When true, the entire menu and all options are disabled; |
+| [hasLoadingPlaceholder](#hasLoadingPlaceholder) |                  | `Boolean` |             | Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state. |
+| [loading](#loading)               | `loading`        | `Boolean` | false       | When true, displays a loading state using the loadingIcon and loadingText slots if provided. |
+| [matchWord](#matchWord)             | `matchWord`      | `String`  | "undefined" | Specifies a string used to highlight matched string parts in options. |
+| [noCheckmark](#noCheckmark)           | `noCheckmark`    | `Boolean` | false       | When true, selected option will not show the checkmark. |
+| [optionActive](#optionActive)          | `optionActive`   | `object`  | "undefined" |                                                  |
+| [optionSelected](#optionSelected)        | `optionSelected` | `Object`  | "undefined" | Specifies the current selected menuOption.       |
+| [value](#value)                 | `value`          | `String`  | "undefined" | Value selected for the menu.                     |
 
 ## Methods
 
@@ -26,23 +28,26 @@ The auro-menu element provides users a way to select from a list of options.
 
 ## Events
 
-| Event                         | Type                   | Description                                      |
-|-------------------------------|------------------------|--------------------------------------------------|
-| `auroMenu-activatedOption`    | `CustomEvent<Element>` | Notifies that a menuoption has been made `active`. |
-| `auroMenu-customEventFired`   | `CustomEvent<any>`     | Notifies that a custom event has been fired.     |
-| `auroMenu-selectValueFailure` | `CustomEvent<any>`     | Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| `auroMenu-selectValueReset`   | `CustomEvent<any>`     | Notifies that the component value has been reset. |
-| `auroMenu-selectedOption`     | `CustomEvent<any>`     | Notifies that a new menuoption selection has been made. |
-| [auroMenuActivatedOption](#auroMenuActivatedOption)     | `CustomEvent<Element>` | (DEPRECATED) Notifies that a menuoption has been made `active`. |
-| [auroMenuCustomEventFired](#auroMenuCustomEventFired)    | `CustomEvent<any>`     | (DEPRECATED) Notifies that a custom event has been fired. |
-| [auroMenuSelectValueFailure](#auroMenuSelectValueFailure)  | `CustomEvent<any>`     | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| [selectedOption](#selectedOption)              | `CustomEvent<any>`     | (DEPRECATED) Notifies that a new menuoption selection has been made. |
+| Event                         | Type                                             | Description                                      |
+|-------------------------------|--------------------------------------------------|--------------------------------------------------|
+| `auroMenu-activatedOption`    | `CustomEvent<Element>`                           | Notifies that a menuoption has been made `active`. |
+| `auroMenu-customEventFired`   | `CustomEvent<any>`                               | Notifies that a custom event has been fired.     |
+| `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
+| `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that a an attempt to select a menuoption by matching a value has failed. |
+| `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
+| `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
+| [auroMenuActivatedOption](#auroMenuActivatedOption)     | `CustomEvent<Element>`                           | (DEPRECATED) Notifies that a menuoption has been made `active`. |
+| [auroMenuCustomEventFired](#auroMenuCustomEventFired)    | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a custom event has been fired. |
+| [auroMenuSelectValueFailure](#auroMenuSelectValueFailure)  | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. |
+| [selectedOption](#selectedOption)              | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a new menuoption selection has been made. |
 
 ## Slots
 
-| Name | Description                         |
-|------|-------------------------------------|
-|      | Slot for insertion of menu options. |
+| Name          | Description                                 |
+|---------------|---------------------------------------------|
+|               | Slot for insertion of menu options.         |
+| [loadingIcon](#loadingIcon) | Icon to show while loading attribute is set |
+| [loadingText](#loadingText) | Text to show while loading attribute is set |
 
 # auro-menuoption
 
@@ -307,6 +312,143 @@ export function auroMenuMatchWordExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### Loading<a name="loading"></a>
+While content is loading, the menu can either remain empty or display a loading placeholder
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/loading.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/loading.html -->
+  <script>
+  </script>
+  <auro-button common id="loadingExampleToggleButton">Toggle Loading</auro-button>
+  <table id="loadingExampleTable">
+    <thead>
+      <tr>
+        <td width="25%">Spinner + Text</td>
+        <td width="25%">Text Only</td>
+        <td width="25%">Spinner Only</td>
+        <td width="25%">None</td>
+      </tr>
+    </thead>
+    <tr>
+      <td>
+        <auro-menu>
+          <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+          <auro-menuoption value="stops">Stops</auro-menuoption>
+          <auro-menuoption value="price">Price</auro-menuoption>
+          <auro-menuoption value="duration">Duration</auro-menuoption>
+          <auro-menuoption value="departure">Departure</auro-menuoption>
+          <auro-menuoption value="arrival">Arrival</auro-menuoption>
+        </auro-menu>
+      </td>
+      <td>
+        <auro-menu>
+          <span slot="loadingText">Loading...</span>
+          <auro-menuoption value="stops">Stops</auro-menuoption>
+          <auro-menuoption value="price">Price</auro-menuoption>
+          <auro-menuoption value="duration">Duration</auro-menuoption>
+          <auro-menuoption value="departure">Departure</auro-menuoption>
+          <auro-menuoption value="arrival">Arrival</auro-menuoption>
+        </auro-menu>
+      </td>
+      <td>
+        <auro-menu>
+          <auro-loader slot="loadingIcon" orbit xs></auro-loader>
+          <auro-menuoption value="stops">Stops</auro-menuoption>
+          <auro-menuoption value="price">Price</auro-menuoption>
+          <auro-menuoption value="duration">Duration</auro-menuoption>
+          <auro-menuoption value="departure">Departure</auro-menuoption>
+          <auro-menuoption value="arrival">Arrival</auro-menuoption>
+        </auro-menu>
+      </td>
+      <td>
+        <auro-menu>
+          <auro-menuoption value="stops">Stops</auro-menuoption>
+          <auro-menuoption value="price">Price</auro-menuoption>
+          <auro-menuoption value="duration">Duration</auro-menuoption>
+          <auro-menuoption value="departure">Departure</auro-menuoption>
+          <auro-menuoption value="arrival">Arrival</auro-menuoption>
+        </auro-menu>
+      </td>
+  </tr>
+  </table>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/loading.js -->
+
+```js
+export function auroMenuLoadingExample() {
+  document.querySelector("#loadingExampleToggleButton").addEventListener("click", () => {
+    document.querySelectorAll("#loadingExampleTable auro-menu").forEach(menu => menu.toggleAttribute("loading"));
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/loading.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/loading.html -->
+
+```html
+<script>
+</script>
+<auro-button common id="loadingExampleToggleButton">Toggle Loading</auro-button>
+<table id="loadingExampleTable">
+  <thead>
+    <tr>
+      <td width="25%">Spinner + Text</td>
+      <td width="25%">Text Only</td>
+      <td width="25%">Spinner Only</td>
+      <td width="25%">None</td>
+    </tr>
+  </thead>
+  <tr>
+    <td>
+      <auro-menu>
+        <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
+        <auro-menuoption value="stops">Stops</auro-menuoption>
+        <auro-menuoption value="price">Price</auro-menuoption>
+        <auro-menuoption value="duration">Duration</auro-menuoption>
+        <auro-menuoption value="departure">Departure</auro-menuoption>
+        <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      </auro-menu>
+    </td>
+    <td>
+      <auro-menu>
+        <span slot="loadingText">Loading...</span>
+        <auro-menuoption value="stops">Stops</auro-menuoption>
+        <auro-menuoption value="price">Price</auro-menuoption>
+        <auro-menuoption value="duration">Duration</auro-menuoption>
+        <auro-menuoption value="departure">Departure</auro-menuoption>
+        <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      </auro-menu>
+    </td>
+    <td>
+      <auro-menu>
+        <auro-loader slot="loadingIcon" orbit xs></auro-loader>
+        <auro-menuoption value="stops">Stops</auro-menuoption>
+        <auro-menuoption value="price">Price</auro-menuoption>
+        <auro-menuoption value="duration">Duration</auro-menuoption>
+        <auro-menuoption value="departure">Departure</auro-menuoption>
+        <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      </auro-menu>
+    </td>
+    <td>
+      <auro-menu>
+        <auro-menuoption value="stops">Stops</auro-menuoption>
+        <auro-menuoption value="price">Price</auro-menuoption>
+        <auro-menuoption value="duration">Duration</auro-menuoption>
+        <auro-menuoption value="departure">Departure</auro-menuoption>
+        <auro-menuoption value="arrival">Arrival</auro-menuoption>
+      </auro-menu>
+    </td>
+</tr>
+</table>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Common Use Cases
 
 #### Scroll