From f7ab2826329a2f04e30a8c7ef607ef6758dd2bc8 Mon Sep 17 00:00:00 2001 From: Eunsun Mota Date: Mon, 2 Dec 2024 16:53:06 -0500 Subject: [PATCH] refactor: remove `ready` state and `*-ready` event --- components/combobox/demo/api.md | 279 ++++++++------- components/combobox/demo/api.min.js | 171 ++------- components/combobox/demo/index.min.js | 171 ++------- components/combobox/docs/api.md | 1 - components/combobox/src/auro-combobox.js | 110 +----- .../combobox/test/auro-combobox.test.js | 10 +- components/datepicker/demo/api.min.js | 19 - components/datepicker/demo/index.min.js | 19 - components/dropdown/demo/api.md | 1 - components/dropdown/demo/api.min.js | 22 +- components/dropdown/demo/index.min.js | 22 +- components/dropdown/docs/api.md | 1 - components/dropdown/src/auro-dropdown.js | 22 +- components/input/demo/api.md | 1 - components/input/demo/api.min.js | 19 - components/input/demo/index.min.js | 19 - components/input/docs/api.md | 1 - components/input/src/base-input.js | 19 - components/menu/demo/api.md | 293 ++++++++------- components/menu/demo/api.min.js | 20 -- components/menu/demo/index.min.js | 20 -- components/menu/docs/api.md | 1 - components/menu/src/auro-menu.js | 20 -- components/select/demo/api.md | 333 +++++++++--------- components/select/demo/api.min.js | 119 +------ components/select/demo/index.min.js | 119 +------ components/select/docs/api.md | 1 - components/select/src/auro-select.js | 77 +--- components/select/test/auro-select.test.js | 4 - 29 files changed, 534 insertions(+), 1380 deletions(-) diff --git a/components/combobox/demo/api.md b/components/combobox/demo/api.md index de253345..2b9adf9d 100644 --- a/components/combobox/demo/api.md +++ b/components/combobox/demo/api.md @@ -1,36 +1,35 @@ - - -# auro-combobox - + + +# auro-combobox + ## Properties | Property | Attribute | Type | Default | Description | -|---------------------|---------------------|-----------|-------------|--------------------------------------------------| -| [checkmark](#checkmark) | `checkmark` | `Boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. | -| [disabled](#disabled) | `disabled` | `Boolean` | | If set, disables the combobox. | -| [error](#error) | `error` | `Boolean` | | Sets a persistent error state (e.g. an error state returned from the server). | -| [noFilter](#noFilter) | `noFilter` | `Boolean` | false | If set, combobox will not filter menuoptions based in input. | -| [noValidate](#noValidate) | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. | -| [optionSelected](#optionSelected) | `optionSelected` | `Object` | null | Specifies the current selected option. | -| [required](#required) | `required` | `Boolean` | | Populates the `required` attribute on the input. Used for client-side validation. | -| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `String` | | Sets a custom help text message to display for all validityStates. | -| [triggerIcon](#triggerIcon) | `triggerIcon` | `Boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. | -| [type](#type) | `type` | `String` | | Applies the defined value as the type attribute on auro-input. | -| [validity](#validity) | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. | +|---------------------|---------------------|-----------|-------------|--------------------------------------------------| +| [checkmark](#checkmark) | `checkmark` | `Boolean` | | When attribute is present auro-menu will apply checkmarks to selected options. | +| [disabled](#disabled) | `disabled` | `Boolean` | | If set, disables the combobox. | +| [error](#error) | `error` | `Boolean` | | Sets a persistent error state (e.g. an error state returned from the server). | +| [noFilter](#noFilter) | `noFilter` | `Boolean` | false | If set, combobox will not filter menuoptions based in input. | +| [noValidate](#noValidate) | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. | +| [optionSelected](#optionSelected) | `optionSelected` | `Object` | null | Specifies the current selected option. | +| [required](#required) | `required` | `Boolean` | | Populates the `required` attribute on the input. Used for client-side validation. | +| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `String` | | Sets a custom help text message to display for all validityStates. | +| [triggerIcon](#triggerIcon) | `triggerIcon` | `Boolean` | | If set, the `icon` attribute will be applied to the trigger `auro-input` element. | +| [type](#type) | `type` | `String` | | Applies the defined value as the type attribute on auro-input. | +| [validity](#validity) | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. | | [value](#value) | `value` | `String` | null | Value selected for the dropdown menu. | ## Methods | Method | Type | Description | -|---------|------------|-------------------------------------| +|---------|------------|-------------------------------------| | [focus](#focus) | `(): void` | Focuses the combobox trigger input. | ## Events | Event | Type | Description | |-----------------------------|--------------------|--------------------------------------------------| -| `auroCombobox-ready` | `CustomEvent` | Notifies that the component has finished initializing. | | `auroCombobox-valueSet` | `CustomEvent` | Notifies that the component has a new value set. | | `auroFormElement-validated` | | Notifies that the component value(s) have been validated. | @@ -38,13 +37,13 @@ | Name | Description | |------------|--------------------------------------| -| | Default slot for the menu content. | -| [helpText](#helpText) | Defines the content of the helpText. | +| | Default slot for the menu content. | +| [helpText](#helpText) | Defines the content of the helpText. | | [label](#label) | Defines the content of the label. | - - -## API Examples - + + +## API Examples + ### Basic
@@ -62,12 +61,12 @@ -
+ - See code + See code - - + + ```html Name @@ -79,11 +78,11 @@ Cherries No matching option - -``` - - - + +``` + + + ### Dynamic Menu This example demonstrates a data driven combobox. The data is used to populate the `auro-menu`. In this example, each time the input's value changes, the data is updated and the menu is recreated. @@ -104,12 +103,12 @@ The menu in this example was populated from data from a country/city API. To kee - + - See code + See code - - + + ```html @@ -120,12 +119,12 @@ The menu in this example was populated from data from a country/city API. To kee due to the requirements of auro-dropdown and auro-input --> - -``` - + +``` + - - + + ```js // Javascript example file // ----------------------- @@ -185,11 +184,11 @@ export function dynamicMenuExample() { }); } ``` - - - -### Property Examples - + + + +### Property Examples + #### disabled If set, disables the combobox. @@ -212,10 +211,10 @@ If set, disables the combobox. - See code + See code - - + + ```html Name @@ -228,11 +227,11 @@ If set, disables the combobox. Prefer Alaska No matching option - -``` - - - + +``` + + + #### noFilter If set, combobox will not do suggestion filtering of the menuoptions. This option is useful when the `` elements are being pre-filtered externally to combobox (e.g. using the citysearch API). @@ -254,10 +253,10 @@ If set, combobox will not do suggestion filtering of the menuoptions. This optio - See code + See code - - + + ```html Name @@ -269,11 +268,11 @@ If set, combobox will not do suggestion filtering of the menuoptions. This optio Cherries No matching option - -``` - - - + +``` + + + #### error Sets a persistent error state (e.g. an error state returned from the server). @@ -296,10 +295,10 @@ Sets a persistent error state (e.g. an error state returned from the server). - See code + See code - - + + ```html Name @@ -312,11 +311,11 @@ Sets a persistent error state (e.g. an error state returned from the server). Prefer Alaska No matching option - -``` - - - + +``` + + + #### noValidate Intended for use with the `required` attribute. If set, disables auto-validation on blur. By using these two attributes in combination the validation for required fields is still computed for forms but no validation messaging will be generated in the UI. @@ -339,10 +338,10 @@ Intended for use with the `required` attribute. If set, disables auto-validation - See code + See code - - + + ```html Name @@ -355,11 +354,11 @@ Intended for use with the `required` attribute. If set, disables auto-validation Prefer Alaska No matching option - -``` - - - + +``` + + + #### required Populates the `required` attribute on the input. Used for client-side validation. @@ -382,10 +381,10 @@ Populates the `required` attribute on the input. Used for client-side validation - See code + See code - - + + ```html Name @@ -398,11 +397,11 @@ Populates the `required` attribute on the input. Used for client-side validation Prefer Alaska No matching option - -``` - - - + +``` + + + #### value Use the `value` attribute to programmatically set the value of the combobox. @@ -423,12 +422,12 @@ Use the `value` attribute to programmatically set the value of the combobox. - + - See code + See code - - + + ```html Name @@ -441,11 +440,11 @@ Use the `value` attribute to programmatically set the value of the combobox. Prefer Alaska No matching option - -``` - - - + +``` + + + #### Dynamically Set Value Use the `value` attribute in combination with another element to dynamically set the value of the combobox. @@ -477,12 +476,12 @@ Note: using a value that does not match a menu option will reset the combobox va - + - See code + See code - - + + ```html Set to an existing option Set to custom value @@ -499,12 +498,12 @@ Note: using a value that does not match a menu option will reset the combobox va Prefer Alaska No matching option - -``` - + +``` + - - + + ```js export function valueExample() { const valueExample = document.querySelector('#valueExample'); @@ -522,9 +521,9 @@ export function valueExample() { }); } ``` - - - + + + #### type When defined, the `auro-input` in the combobox trigger will use the defined `type` (e.g. `credit-card`). @@ -544,12 +543,12 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ - + - See code + See code - - + + ```html Date @@ -561,13 +560,13 @@ When defined, the `auro-input` in the combobox trigger will use the defined `typ 05/16/2022 - -``` - - - -### Method Examples - + +``` + + + +### Method Examples + #### focus The focus method will apply focus state to the combobox input field. @@ -589,12 +588,12 @@ The focus method will apply focus state to the combobox input field. - + - See code + See code - - + + ```js export function focusExample() { const focusExample = document.querySelector('#focusExample'); @@ -605,10 +604,10 @@ export function focusExample() { }); } ``` - + - - + + ```html Apply focus to combobox

@@ -622,13 +621,13 @@ export function focusExample() { Cherries No matching option - -``` - - - -### Slot Examples - + +``` + + + +### Slot Examples + #### helpText Sets the help text displayed below the trigger. The `helpText` slot can be used to provide additional context for the combobox. When using the `error` property, the `helpText` slot can be used to describe the error. @@ -652,10 +651,10 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used - See code + See code - - + + ```html Name @@ -669,7 +668,7 @@ Sets the help text displayed below the trigger. The `helpText` slot can be used Prefer Alaska No matching option - -``` - - + +``` + + diff --git a/components/combobox/demo/api.min.js b/components/combobox/demo/api.min.js index be021c9a..4500ff32 100644 --- a/components/combobox/demo/api.min.js +++ b/components/combobox/demo/api.min.js @@ -2948,7 +2948,6 @@ if (!customElements.get("auro-dropdownbib")) { * @csspart helpText - The helpText content container. * @csspart popover - The bib content container. * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked. - * @event auroDropdown-ready - Notifies that the component has finished initializing. * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ class AuroDropdown extends r$1 { @@ -2974,7 +2973,6 @@ class AuroDropdown extends r$1 { this.inset = false; this.placement = 'bottom-start'; this.rounded = false; - this.ready = false; this.tabIndex = 0; this.noToggle = false; @@ -3073,7 +3071,6 @@ class AuroDropdown extends r$1 { reflect: true }, isPopoverVisible: { type: Boolean }, - ready: { type: Boolean }, onSlotChange: { type: Function, reflect: false @@ -3137,23 +3134,6 @@ class AuroDropdown extends r$1 { this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); document.body.append(this.bibContent); - - this.notifyReady(); - } - - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroDropdown-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); } /** @@ -3235,7 +3215,7 @@ class AuroDropdown extends r$1 {
+ @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}">
${this.chevron || this.common ? u$3` @@ -5001,7 +4981,6 @@ var Cleave_1 = Cleave; * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. * @attr {String} pattern - Specifies a regular expression the form control's value should match. * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. @@ -5048,7 +5027,6 @@ class BaseInput extends r$5 { this.maxLength = undefined; this.minLength = undefined; this.label = 'Input label is undefined'; - this.ready = false; this.activeLabel = false; this.setCustomValidityForType = undefined; @@ -5155,7 +5133,6 @@ class BaseInput extends r$5 { showPassword: { state: true }, validateOnInput: { type: Boolean }, readonly: { type: Boolean }, - ready: { type: Boolean }, error: { type: String, reflect: true @@ -5394,8 +5371,6 @@ class BaseInput extends r$5 { } } }); - - this.notifyReady(); } /** @@ -5500,20 +5475,6 @@ class BaseInput extends r$5 { })); } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - /** * @private * @returns {string} @@ -6905,7 +6866,6 @@ var styleCss$2 = i$b`.util_displayInline{display:inline}.util_displayInlineBlock * @slot - Default slot for the menu content. * @slot label - Defines the content of the label. * @slot helpText - Defines the content of the helpText. - * @event auroCombobox-ready - Notifies that the component has finished initializing. * @event auroCombobox-valueSet - Notifies that the component has a new value set. * @event auroFormElement-validated - Notifies that the component value(s) have been validated. */ @@ -7159,9 +7119,6 @@ class AuroCombobox extends r$5 { this.menuWrapper.append(this.menu); this.dropdown.setAttribute('role', 'combobox'); - this.dropdown.addEventListener('auroDropdown-ready', () => { - this.auroDropdownReady = true; - }); this.dropdown.addEventListener('auroDropdown-triggerClick', () => { this.showBib(); @@ -7198,15 +7155,6 @@ class AuroCombobox extends r$5 { this.menu.setAttribute('nocheckmark', ''); } - if (this.noFilter) { - this.auroMenuReady = true; - } else { - this.menu.addEventListener('auroMenu-ready', () => { - this.auroMenuReady = true; - }); - } - - // handle the menu event for an option selection this.menu.addEventListener('auroMenu-selectedOption', () => { // dropdown bib should hide when making a selection @@ -7267,10 +7215,6 @@ class AuroCombobox extends r$5 { * @returns {void} */ configureInput() { - this.input.addEventListener('auroInput-ready', () => { - this.auroInputReady = true; - }); - this.input.addEventListener('keyup', (evt) => { if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { this.showBib(); @@ -7294,22 +7238,20 @@ class AuroCombobox extends r$5 { this.menu.matchWord = this.input.value; this.optionActive = null; - if (this.ready) { - if (this.value !== this.input.value) { - this.value = this.input.value; - } - - if (this.value !== this.menu.value) { - this.menu.value = this.value; - } + if (this.value !== this.input.value) { + this.value = this.input.value; + } - if (this.optionSelected && this.input.value !== this.optionSelected.innerText) { - this.optionSelected = undefined; - } + if (this.value !== this.menu.value) { + this.menu.value = this.value; + } - this.menu.resetOptionsStates(); + if (this.optionSelected && this.input.value !== this.optionSelected.innerText) { + this.optionSelected = undefined; } + this.menu.resetOptionsStates(); + this.handleMenuOptions(); this.handleInputValueChange(); @@ -7443,57 +7385,6 @@ class AuroCombobox extends r$5 { this.configureDropdown(); this.configureCombobox(); - this.checkReadiness(); - } - - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroCombobox-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - - /** - * Monitors readiness of peer dependencies and begins work that should only start when ready. - * @private - * @returns {void} - */ - checkReadiness() { - if (this.auroDropdownReady && this.auroInputReady && this.auroMenuReady) { - this.readyActions(); - this.notifyReady(); - } else { - // Start a retry counter to limit the retry count - if (!this.readyRetryCount && this.readyRetryCount !== 0) { - this.readyRetryCount = 0; - } else { - this.readyRetryCount += 1; - } - - const readyTimer = 0; - const readyRetryLimit = 200; - - if (this.readyRetryCount <= readyRetryLimit) { - setTimeout(() => { - this.checkReadiness(); - }, readyTimer); - } - } - } - - /** - * Functionality that should not be performed until the combobox is in a ready state. - * @private - * @returns {void} - */ - readyActions() { // Set the initial value in auro-menu if defined if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { this.menu.value = this.value; @@ -7510,7 +7401,7 @@ class AuroCombobox extends r$5 { updated(changedProperties) { // After the component is ready, send direct value changes to auro-menu. - if (this.ready && changedProperties.has('value')) { + if (changedProperties.has('value')) { if (this.value) { if (this.optionSelected && this.optionSelected.value === this.value) { // If value updates and the previously selected option already matches the new value @@ -7548,16 +7439,14 @@ class AuroCombobox extends r$5 { * @returns {void} */ handleSlotChange() { - if (this.auroMenuReady) { - this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]'); - this.options.forEach((opt) => { - if (this.checkmark) { - opt.removeAttribute('nocheckmark'); - } else { - opt.setAttribute('nocheckmark', ''); - } - }); - } + this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]'); + this.options.forEach((opt) => { + if (this.checkmark) { + opt.removeAttribute('nocheckmark'); + } else { + opt.setAttribute('nocheckmark', ''); + } + }); this.handleMenuOptions(); } @@ -7762,7 +7651,6 @@ class AuroMenuOption extends r$5 { * @attr {Boolean} disabled - When true, the entire menu and all options are disabled; * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark. * @attr {String} value - Value selected for the menu. - * @prop {Boolean} ready - When false the component API should not be called. * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made. * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made. * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`. @@ -7771,7 +7659,6 @@ class AuroMenuOption extends r$5 { * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. * @event auroMenu-customEventFired - Notifies that a custom event has been fired. * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired. - * @event auroMenu-ready - Notifies that the component has finished initializing. * @event auroMenu-selectValueReset - Notifies that the component value has been reset. * @slot Slot for insertion of menu options. */ @@ -7785,7 +7672,6 @@ class AuroMenu extends r$5 { this.optionSelected = undefined; this.matchWord = undefined; this.noCheckmark = false; - this.ready = false; this.optionActive = undefined; /** @@ -7817,7 +7703,6 @@ class AuroMenu extends r$5 { optionSelected: { type: Object }, optionActive: { type: Object }, matchWord: { type: String }, - ready: { type: Boolean }, value: { type: String } }; } @@ -8251,28 +8136,12 @@ class AuroMenu extends r$5 { this.index = this.items.indexOf(evt.target); this.updateActiveOption(this.index); }); - - this.notifyReady(); } else { // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed this.handleNoCheckmarkAttr(); } } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroMenu-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - render() { return x$1` diff --git a/components/combobox/demo/index.min.js b/components/combobox/demo/index.min.js index cdb75227..02617ae2 100644 --- a/components/combobox/demo/index.min.js +++ b/components/combobox/demo/index.min.js @@ -2859,7 +2859,6 @@ if (!customElements.get("auro-dropdownbib")) { * @csspart helpText - The helpText content container. * @csspart popover - The bib content container. * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked. - * @event auroDropdown-ready - Notifies that the component has finished initializing. * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ class AuroDropdown extends r$1 { @@ -2885,7 +2884,6 @@ class AuroDropdown extends r$1 { this.inset = false; this.placement = 'bottom-start'; this.rounded = false; - this.ready = false; this.tabIndex = 0; this.noToggle = false; @@ -2984,7 +2982,6 @@ class AuroDropdown extends r$1 { reflect: true }, isPopoverVisible: { type: Boolean }, - ready: { type: Boolean }, onSlotChange: { type: Function, reflect: false @@ -3048,23 +3045,6 @@ class AuroDropdown extends r$1 { this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); document.body.append(this.bibContent); - - this.notifyReady(); - } - - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroDropdown-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); } /** @@ -3146,7 +3126,7 @@ class AuroDropdown extends r$1 {
+ @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}">
${this.chevron || this.common ? u$3` @@ -4912,7 +4892,6 @@ var Cleave_1 = Cleave; * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. * @attr {String} pattern - Specifies a regular expression the form control's value should match. * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. @@ -4959,7 +4938,6 @@ class BaseInput extends r$5 { this.maxLength = undefined; this.minLength = undefined; this.label = 'Input label is undefined'; - this.ready = false; this.activeLabel = false; this.setCustomValidityForType = undefined; @@ -5066,7 +5044,6 @@ class BaseInput extends r$5 { showPassword: { state: true }, validateOnInput: { type: Boolean }, readonly: { type: Boolean }, - ready: { type: Boolean }, error: { type: String, reflect: true @@ -5305,8 +5282,6 @@ class BaseInput extends r$5 { } } }); - - this.notifyReady(); } /** @@ -5411,20 +5386,6 @@ class BaseInput extends r$5 { })); } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - /** * @private * @returns {string} @@ -6816,7 +6777,6 @@ var styleCss$2 = i$b`.util_displayInline{display:inline}.util_displayInlineBlock * @slot - Default slot for the menu content. * @slot label - Defines the content of the label. * @slot helpText - Defines the content of the helpText. - * @event auroCombobox-ready - Notifies that the component has finished initializing. * @event auroCombobox-valueSet - Notifies that the component has a new value set. * @event auroFormElement-validated - Notifies that the component value(s) have been validated. */ @@ -7070,9 +7030,6 @@ class AuroCombobox extends r$5 { this.menuWrapper.append(this.menu); this.dropdown.setAttribute('role', 'combobox'); - this.dropdown.addEventListener('auroDropdown-ready', () => { - this.auroDropdownReady = true; - }); this.dropdown.addEventListener('auroDropdown-triggerClick', () => { this.showBib(); @@ -7109,15 +7066,6 @@ class AuroCombobox extends r$5 { this.menu.setAttribute('nocheckmark', ''); } - if (this.noFilter) { - this.auroMenuReady = true; - } else { - this.menu.addEventListener('auroMenu-ready', () => { - this.auroMenuReady = true; - }); - } - - // handle the menu event for an option selection this.menu.addEventListener('auroMenu-selectedOption', () => { // dropdown bib should hide when making a selection @@ -7178,10 +7126,6 @@ class AuroCombobox extends r$5 { * @returns {void} */ configureInput() { - this.input.addEventListener('auroInput-ready', () => { - this.auroInputReady = true; - }); - this.input.addEventListener('keyup', (evt) => { if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { this.showBib(); @@ -7205,22 +7149,20 @@ class AuroCombobox extends r$5 { this.menu.matchWord = this.input.value; this.optionActive = null; - if (this.ready) { - if (this.value !== this.input.value) { - this.value = this.input.value; - } - - if (this.value !== this.menu.value) { - this.menu.value = this.value; - } + if (this.value !== this.input.value) { + this.value = this.input.value; + } - if (this.optionSelected && this.input.value !== this.optionSelected.innerText) { - this.optionSelected = undefined; - } + if (this.value !== this.menu.value) { + this.menu.value = this.value; + } - this.menu.resetOptionsStates(); + if (this.optionSelected && this.input.value !== this.optionSelected.innerText) { + this.optionSelected = undefined; } + this.menu.resetOptionsStates(); + this.handleMenuOptions(); this.handleInputValueChange(); @@ -7354,57 +7296,6 @@ class AuroCombobox extends r$5 { this.configureDropdown(); this.configureCombobox(); - this.checkReadiness(); - } - - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroCombobox-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - - /** - * Monitors readiness of peer dependencies and begins work that should only start when ready. - * @private - * @returns {void} - */ - checkReadiness() { - if (this.auroDropdownReady && this.auroInputReady && this.auroMenuReady) { - this.readyActions(); - this.notifyReady(); - } else { - // Start a retry counter to limit the retry count - if (!this.readyRetryCount && this.readyRetryCount !== 0) { - this.readyRetryCount = 0; - } else { - this.readyRetryCount += 1; - } - - const readyTimer = 0; - const readyRetryLimit = 200; - - if (this.readyRetryCount <= readyRetryLimit) { - setTimeout(() => { - this.checkReadiness(); - }, readyTimer); - } - } - } - - /** - * Functionality that should not be performed until the combobox is in a ready state. - * @private - * @returns {void} - */ - readyActions() { // Set the initial value in auro-menu if defined if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { this.menu.value = this.value; @@ -7421,7 +7312,7 @@ class AuroCombobox extends r$5 { updated(changedProperties) { // After the component is ready, send direct value changes to auro-menu. - if (this.ready && changedProperties.has('value')) { + if (changedProperties.has('value')) { if (this.value) { if (this.optionSelected && this.optionSelected.value === this.value) { // If value updates and the previously selected option already matches the new value @@ -7459,16 +7350,14 @@ class AuroCombobox extends r$5 { * @returns {void} */ handleSlotChange() { - if (this.auroMenuReady) { - this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]'); - this.options.forEach((opt) => { - if (this.checkmark) { - opt.removeAttribute('nocheckmark'); - } else { - opt.setAttribute('nocheckmark', ''); - } - }); - } + this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]'); + this.options.forEach((opt) => { + if (this.checkmark) { + opt.removeAttribute('nocheckmark'); + } else { + opt.setAttribute('nocheckmark', ''); + } + }); this.handleMenuOptions(); } @@ -7673,7 +7562,6 @@ class AuroMenuOption extends r$5 { * @attr {Boolean} disabled - When true, the entire menu and all options are disabled; * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark. * @attr {String} value - Value selected for the menu. - * @prop {Boolean} ready - When false the component API should not be called. * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made. * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made. * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`. @@ -7682,7 +7570,6 @@ class AuroMenuOption extends r$5 { * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. * @event auroMenu-customEventFired - Notifies that a custom event has been fired. * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired. - * @event auroMenu-ready - Notifies that the component has finished initializing. * @event auroMenu-selectValueReset - Notifies that the component value has been reset. * @slot Slot for insertion of menu options. */ @@ -7696,7 +7583,6 @@ class AuroMenu extends r$5 { this.optionSelected = undefined; this.matchWord = undefined; this.noCheckmark = false; - this.ready = false; this.optionActive = undefined; /** @@ -7728,7 +7614,6 @@ class AuroMenu extends r$5 { optionSelected: { type: Object }, optionActive: { type: Object }, matchWord: { type: String }, - ready: { type: Boolean }, value: { type: String } }; } @@ -8162,28 +8047,12 @@ class AuroMenu extends r$5 { this.index = this.items.indexOf(evt.target); this.updateActiveOption(this.index); }); - - this.notifyReady(); } else { // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed this.handleNoCheckmarkAttr(); } } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroMenu-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - render() { return x$1` diff --git a/components/combobox/docs/api.md b/components/combobox/docs/api.md index 870eab7c..1dd5d9a5 100644 --- a/components/combobox/docs/api.md +++ b/components/combobox/docs/api.md @@ -27,7 +27,6 @@ | Event | Type | Description | |-----------------------------|--------------------|--------------------------------------------------| -| `auroCombobox-ready` | `CustomEvent` | Notifies that the component has finished initializing. | | `auroCombobox-valueSet` | `CustomEvent` | Notifies that the component has a new value set. | | `auroFormElement-validated` | | Notifies that the component value(s) have been validated. | diff --git a/components/combobox/src/auro-combobox.js b/components/combobox/src/auro-combobox.js index 6efe9a23..22b1d8ab 100644 --- a/components/combobox/src/auro-combobox.js +++ b/components/combobox/src/auro-combobox.js @@ -39,7 +39,6 @@ import styleCss from "./style-css.js"; * @slot - Default slot for the menu content. * @slot label - Defines the content of the label. * @slot helpText - Defines the content of the helpText. - * @event auroCombobox-ready - Notifies that the component has finished initializing. * @event auroCombobox-valueSet - Notifies that the component has a new value set. * @event auroFormElement-validated - Notifies that the component value(s) have been validated. */ @@ -293,9 +292,6 @@ export class AuroCombobox extends LitElement { this.menuWrapper.append(this.menu); this.dropdown.setAttribute('role', 'combobox'); - this.dropdown.addEventListener('auroDropdown-ready', () => { - this.auroDropdownReady = true; - }); this.dropdown.addEventListener('auroDropdown-triggerClick', () => { this.showBib(); @@ -332,15 +328,6 @@ export class AuroCombobox extends LitElement { this.menu.setAttribute('nocheckmark', ''); } - if (this.noFilter) { - this.auroMenuReady = true; - } else { - this.menu.addEventListener('auroMenu-ready', () => { - this.auroMenuReady = true; - }); - } - - // handle the menu event for an option selection this.menu.addEventListener('auroMenu-selectedOption', () => { // dropdown bib should hide when making a selection @@ -401,10 +388,6 @@ export class AuroCombobox extends LitElement { * @returns {void} */ configureInput() { - this.input.addEventListener('auroInput-ready', () => { - this.auroInputReady = true; - }); - this.input.addEventListener('keyup', (evt) => { if (evt.key.length === 1 || evt.key === 'Backspace' || evt.key === 'Delete') { this.showBib(); @@ -428,22 +411,20 @@ export class AuroCombobox extends LitElement { this.menu.matchWord = this.input.value; this.optionActive = null; - if (this.ready) { - if (this.value !== this.input.value) { - this.value = this.input.value; - } - - if (this.value !== this.menu.value) { - this.menu.value = this.value; - } + if (this.value !== this.input.value) { + this.value = this.input.value; + } - if (this.optionSelected && this.input.value !== this.optionSelected.innerText) { - this.optionSelected = undefined; - } + if (this.value !== this.menu.value) { + this.menu.value = this.value; + } - this.menu.resetOptionsStates(); + if (this.optionSelected && this.input.value !== this.optionSelected.innerText) { + this.optionSelected = undefined; } + this.menu.resetOptionsStates(); + this.handleMenuOptions(); this.handleInputValueChange(); @@ -577,57 +558,6 @@ export class AuroCombobox extends LitElement { this.configureDropdown(); this.configureCombobox(); - this.checkReadiness(); - } - - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroCombobox-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - - /** - * Monitors readiness of peer dependencies and begins work that should only start when ready. - * @private - * @returns {void} - */ - checkReadiness() { - if (this.auroDropdownReady && this.auroInputReady && this.auroMenuReady) { - this.readyActions(); - this.notifyReady(); - } else { - // Start a retry counter to limit the retry count - if (!this.readyRetryCount && this.readyRetryCount !== 0) { - this.readyRetryCount = 0; - } else { - this.readyRetryCount += 1; - } - - const readyTimer = 0; - const readyRetryLimit = 200; - - if (this.readyRetryCount <= readyRetryLimit) { - setTimeout(() => { - this.checkReadiness(); - }, readyTimer); - } - } - } - - /** - * Functionality that should not be performed until the combobox is in a ready state. - * @private - * @returns {void} - */ - readyActions() { // Set the initial value in auro-menu if defined if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { this.menu.value = this.value; @@ -644,7 +574,7 @@ export class AuroCombobox extends LitElement { updated(changedProperties) { // After the component is ready, send direct value changes to auro-menu. - if (this.ready && changedProperties.has('value')) { + if (changedProperties.has('value')) { if (this.value) { if (this.optionSelected && this.optionSelected.value === this.value) { // If value updates and the previously selected option already matches the new value @@ -682,16 +612,14 @@ export class AuroCombobox extends LitElement { * @returns {void} */ handleSlotChange() { - if (this.auroMenuReady) { - this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]'); - this.options.forEach((opt) => { - if (this.checkmark) { - opt.removeAttribute('nocheckmark'); - } else { - opt.setAttribute('nocheckmark', ''); - } - }); - } + this.options = this.menu.querySelectorAll('auro-menuoption, [auro-menuoption]'); + this.options.forEach((opt) => { + if (this.checkmark) { + opt.removeAttribute('nocheckmark'); + } else { + opt.setAttribute('nocheckmark', ''); + } + }); this.handleMenuOptions(); } diff --git a/components/combobox/test/auro-combobox.test.js b/components/combobox/test/auro-combobox.test.js index 72b27e72..fc2c0601 100644 --- a/components/combobox/test/auro-combobox.test.js +++ b/components/combobox/test/auro-combobox.test.js @@ -84,7 +84,6 @@ describe('auro-combobox', () => { it('hides the bib when making a selection', async () => { const el = await defaultFixture(); - await waitUntil(() => el.ready); const trigger = el.dropdown.querySelector('[slot="trigger"]'); @@ -142,7 +141,7 @@ describe('auro-combobox', () => { it('navigates menu with up and down arrow keys', async () => { const el = await defaultFixture(); - + el.focus(); // Validate bib is shown when hitting enter but there is a value in the input setInputValue(el, 'pp'); el.dispatchEvent(new KeyboardEvent('keydown', { @@ -156,6 +155,9 @@ describe('auro-combobox', () => { const menuOptions = menu.querySelectorAll('auro-menuoption'); setInputValue(el, 'a'); + // el.showBib(); + + await expect(dropdown.isPopoverVisible).to.be.true; el.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'ArrowDown' @@ -288,8 +290,6 @@ describe('auro-combobox', () => { it('makes a selection programmatically', async () => { const el = await defaultFixture(); - await waitUntil(() => el.ready); - const dropdown = el.shadowRoot.querySelector('[auro-dropdown]'); const menu = dropdown.bibContent.querySelector('auro-menu') const menuOptions = menu.querySelectorAll('auro-menuoption'); @@ -311,7 +311,6 @@ describe('auro-combobox', () => { it('reset selection value programmatically', async () => { const el = await presetValueFixture(); - await waitUntil(() => el.ready); el.value = undefined; @@ -345,7 +344,6 @@ describe('auro-combobox', () => { it('Does not throw an error state when trying to programmatically set a value that doesn\'t match an option', async () => { const el = await defaultFixture(); - await waitUntil(() => el.ready); const menu = el.querySelector('auro-menu') diff --git a/components/datepicker/demo/api.min.js b/components/datepicker/demo/api.min.js index d653f1ea..1d0150bc 100644 --- a/components/datepicker/demo/api.min.js +++ b/components/datepicker/demo/api.min.js @@ -12874,7 +12874,6 @@ var Cleave_1 = Cleave; * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. * @attr {String} pattern - Specifies a regular expression the form control's value should match. * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. @@ -12921,7 +12920,6 @@ class BaseInput extends r$2 { this.maxLength = undefined; this.minLength = undefined; this.label = 'Input label is undefined'; - this.ready = false; this.activeLabel = false; this.setCustomValidityForType = undefined; @@ -13028,7 +13026,6 @@ class BaseInput extends r$2 { showPassword: { state: true }, validateOnInput: { type: Boolean }, readonly: { type: Boolean }, - ready: { type: Boolean }, error: { type: String, reflect: true @@ -13267,8 +13264,6 @@ class BaseInput extends r$2 { } } }); - - this.notifyReady(); } /** @@ -13373,20 +13368,6 @@ class BaseInput extends r$2 { })); } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - /** * @private * @returns {string} diff --git a/components/datepicker/demo/index.min.js b/components/datepicker/demo/index.min.js index 5ca23f58..2b8f9fd8 100644 --- a/components/datepicker/demo/index.min.js +++ b/components/datepicker/demo/index.min.js @@ -12629,7 +12629,6 @@ var Cleave_1 = Cleave; * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. * @attr {String} pattern - Specifies a regular expression the form control's value should match. * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. @@ -12676,7 +12675,6 @@ class BaseInput extends r$2 { this.maxLength = undefined; this.minLength = undefined; this.label = 'Input label is undefined'; - this.ready = false; this.activeLabel = false; this.setCustomValidityForType = undefined; @@ -12783,7 +12781,6 @@ class BaseInput extends r$2 { showPassword: { state: true }, validateOnInput: { type: Boolean }, readonly: { type: Boolean }, - ready: { type: Boolean }, error: { type: String, reflect: true @@ -13022,8 +13019,6 @@ class BaseInput extends r$2 { } } }); - - this.notifyReady(); } /** @@ -13128,20 +13123,6 @@ class BaseInput extends r$2 { })); } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - /** * @private * @returns {string} diff --git a/components/dropdown/demo/api.md b/components/dropdown/demo/api.md index 74bee0de..eeaabca5 100644 --- a/components/dropdown/demo/api.md +++ b/components/dropdown/demo/api.md @@ -36,7 +36,6 @@ | Event | Type | Description | |-----------------------------|---------------------------------------|--------------------------------------------------| -| `auroDropdown-ready` | `CustomEvent` | Notifies that the component has finished initializing. | | `auroDropdown-toggled` | `CustomEvent<{ expanded: boolean; }>` | Notifies that the visibility of the dropdown bib has changed. | | `auroDropdown-triggerClick` | `CustomEvent` | Notifies that the trigger has been clicked. | | [dropdownToggled](#dropdownToggled) | `CustomEvent<{ expanded: boolean; }>` | (DEPRECATED) Notifies that the visibility of the dropdown bib has changed. | diff --git a/components/dropdown/demo/api.min.js b/components/dropdown/demo/api.min.js index 02d1db23..5ffb1db7 100644 --- a/components/dropdown/demo/api.min.js +++ b/components/dropdown/demo/api.min.js @@ -2406,7 +2406,6 @@ if (!customElements.get("auro-dropdownbib")) { * @csspart helpText - The helpText content container. * @csspart popover - The bib content container. * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked. - * @event auroDropdown-ready - Notifies that the component has finished initializing. * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ class AuroDropdown extends r { @@ -2432,7 +2431,6 @@ class AuroDropdown extends r { this.inset = false; this.placement = 'bottom-start'; this.rounded = false; - this.ready = false; this.tabIndex = 0; this.noToggle = false; @@ -2531,7 +2529,6 @@ class AuroDropdown extends r { reflect: true }, isPopoverVisible: { type: Boolean }, - ready: { type: Boolean }, onSlotChange: { type: Function, reflect: false @@ -2595,23 +2592,6 @@ class AuroDropdown extends r { this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); document.body.append(this.bibContent); - - this.notifyReady(); - } - - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroDropdown-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); } /** @@ -2693,7 +2673,7 @@ class AuroDropdown extends r {
+ @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}">
${this.chevron || this.common ? u$1` diff --git a/components/dropdown/demo/index.min.js b/components/dropdown/demo/index.min.js index 69e15a97..bbdc0a70 100644 --- a/components/dropdown/demo/index.min.js +++ b/components/dropdown/demo/index.min.js @@ -2388,7 +2388,6 @@ if (!customElements.get("auro-dropdownbib")) { * @csspart helpText - The helpText content container. * @csspart popover - The bib content container. * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked. - * @event auroDropdown-ready - Notifies that the component has finished initializing. * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ class AuroDropdown extends r { @@ -2414,7 +2413,6 @@ class AuroDropdown extends r { this.inset = false; this.placement = 'bottom-start'; this.rounded = false; - this.ready = false; this.tabIndex = 0; this.noToggle = false; @@ -2513,7 +2511,6 @@ class AuroDropdown extends r { reflect: true }, isPopoverVisible: { type: Boolean }, - ready: { type: Boolean }, onSlotChange: { type: Function, reflect: false @@ -2577,23 +2574,6 @@ class AuroDropdown extends r { this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); document.body.append(this.bibContent); - - this.notifyReady(); - } - - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroDropdown-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); } /** @@ -2675,7 +2655,7 @@ class AuroDropdown extends r {
+ @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}">
${this.chevron || this.common ? u$1` diff --git a/components/dropdown/docs/api.md b/components/dropdown/docs/api.md index 5008fb2e..a24a92ce 100644 --- a/components/dropdown/docs/api.md +++ b/components/dropdown/docs/api.md @@ -33,7 +33,6 @@ | Event | Type | Description | |-----------------------------|---------------------------------------|--------------------------------------------------| -| `auroDropdown-ready` | `CustomEvent` | Notifies that the component has finished initializing. | | `auroDropdown-toggled` | `CustomEvent<{ expanded: boolean; }>` | Notifies that the visibility of the dropdown bib has changed. | | `auroDropdown-triggerClick` | `CustomEvent` | Notifies that the trigger has been clicked. | | `dropdownToggled` | `CustomEvent<{ expanded: boolean; }>` | (DEPRECATED) Notifies that the visibility of the dropdown bib has changed. | diff --git a/components/dropdown/src/auro-dropdown.js b/components/dropdown/src/auro-dropdown.js index 4390aa95..4f89a031 100644 --- a/components/dropdown/src/auro-dropdown.js +++ b/components/dropdown/src/auro-dropdown.js @@ -47,7 +47,6 @@ import './auro-dropdownBib.js'; * @csspart helpText - The helpText content container. * @csspart popover - The bib content container. * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked. - * @event auroDropdown-ready - Notifies that the component has finished initializing. * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ export class AuroDropdown extends LitElement { @@ -73,7 +72,6 @@ export class AuroDropdown extends LitElement { this.inset = false; this.placement = 'bottom-start'; this.rounded = false; - this.ready = false; this.tabIndex = 0; this.noToggle = false; @@ -172,7 +170,6 @@ export class AuroDropdown extends LitElement { reflect: true }, isPopoverVisible: { type: Boolean }, - ready: { type: Boolean }, onSlotChange: { type: Function, reflect: false @@ -236,23 +233,6 @@ export class AuroDropdown extends LitElement { this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); document.body.append(this.bibContent); - - this.notifyReady(); - } - - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroDropdown-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); } /** @@ -336,7 +316,7 @@ export class AuroDropdown extends LitElement {
+ @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}">
${this.chevron || this.common ? html` diff --git a/components/input/demo/api.md b/components/input/demo/api.md index a1cc01a3..4f19652e 100644 --- a/components/input/demo/api.md +++ b/components/input/demo/api.md @@ -82,7 +82,6 @@ | Event | Type | Description | |-----------------------------|--------------------|--------------------------------------------------| | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` value has changed. | -| `auroInput-ready` | `CustomEvent` | | | `auroInput-validityChange` | `CustomEvent` | | | [input](#input) | | Event fires when the value of an `auro-input` has been changed. | diff --git a/components/input/demo/api.min.js b/components/input/demo/api.min.js index 737520cd..87f0cf13 100644 --- a/components/input/demo/api.min.js +++ b/components/input/demo/api.min.js @@ -2134,7 +2134,6 @@ class AuroFormValidation { * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. * @attr {String} pattern - Specifies a regular expression the form control's value should match. * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. @@ -2181,7 +2180,6 @@ class BaseInput extends r { this.maxLength = undefined; this.minLength = undefined; this.label = 'Input label is undefined'; - this.ready = false; this.activeLabel = false; this.setCustomValidityForType = undefined; @@ -2288,7 +2286,6 @@ class BaseInput extends r { showPassword: { state: true }, validateOnInput: { type: Boolean }, readonly: { type: Boolean }, - ready: { type: Boolean }, error: { type: String, reflect: true @@ -2527,8 +2524,6 @@ class BaseInput extends r { } } }); - - this.notifyReady(); } /** @@ -2633,20 +2628,6 @@ class BaseInput extends r { })); } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - /** * @private * @returns {string} diff --git a/components/input/demo/index.min.js b/components/input/demo/index.min.js index a17f43ae..ca83662a 100644 --- a/components/input/demo/index.min.js +++ b/components/input/demo/index.min.js @@ -2080,7 +2080,6 @@ class AuroFormValidation { * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. * @attr {String} pattern - Specifies a regular expression the form control's value should match. * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. @@ -2127,7 +2126,6 @@ class BaseInput extends r { this.maxLength = undefined; this.minLength = undefined; this.label = 'Input label is undefined'; - this.ready = false; this.activeLabel = false; this.setCustomValidityForType = undefined; @@ -2234,7 +2232,6 @@ class BaseInput extends r { showPassword: { state: true }, validateOnInput: { type: Boolean }, readonly: { type: Boolean }, - ready: { type: Boolean }, error: { type: String, reflect: true @@ -2473,8 +2470,6 @@ class BaseInput extends r { } } }); - - this.notifyReady(); } /** @@ -2579,20 +2574,6 @@ class BaseInput extends r { })); } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - /** * @private * @returns {string} diff --git a/components/input/docs/api.md b/components/input/docs/api.md index 1fa4b4a5..3c8e7ebd 100644 --- a/components/input/docs/api.md +++ b/components/input/docs/api.md @@ -62,7 +62,6 @@ | Event | Type | Description | |-----------------------------|--------------------|--------------------------------------------------| | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` value has changed. | -| `auroInput-ready` | `CustomEvent` | | | `auroInput-validityChange` | `CustomEvent` | | | `input` | | Event fires when the value of an `auro-input` has been changed. | diff --git a/components/input/src/base-input.js b/components/input/src/base-input.js index 6ef6c2c7..c93798b4 100644 --- a/components/input/src/base-input.js +++ b/components/input/src/base-input.js @@ -42,7 +42,6 @@ import AuroFormValidation from '@aurodesignsystem/auro-formvalidation/src/valida * @attr {String} name - Populates the `name` attribute on the input. * @attr {Boolean} noValidate - If set, disables auto-validation on blur. * @attr {Boolean} readonly - Makes the input read-only, but can be set programmatically. - * @prop {Boolean} ready - When false the component API should not be called. * @attr {Boolean} required - Populates the `required` attribute on the input. Used for client-side validation. * @attr {String} pattern - Specifies a regular expression the form control's value should match. * @attr {String} placeholder - Define custom placeholder text, only supported by date input formats. @@ -89,7 +88,6 @@ export default class BaseInput extends LitElement { this.maxLength = undefined; this.minLength = undefined; this.label = 'Input label is undefined'; - this.ready = false; this.activeLabel = false; this.setCustomValidityForType = undefined; @@ -196,7 +194,6 @@ export default class BaseInput extends LitElement { showPassword: { state: true }, validateOnInput: { type: Boolean }, readonly: { type: Boolean }, - ready: { type: Boolean }, error: { type: String, reflect: true @@ -437,8 +434,6 @@ export default class BaseInput extends LitElement { } } }); - - this.notifyReady(); } /** @@ -543,20 +538,6 @@ export default class BaseInput extends LitElement { })); } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroInput-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - /** * @private * @returns {string} diff --git a/components/menu/demo/api.md b/components/menu/demo/api.md index 6bb045fa..3ffe5245 100644 --- a/components/menu/demo/api.md +++ b/components/menu/demo/api.md @@ -1,28 +1,28 @@ - - + + # auro-menu -The auro-menu element provides users a way to select from a list of options. - +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. | -| [ready](#ready) | `ready` | `Boolean` | false | When false the component API should not be called. | +|------------------|------------------|-----------|-------------|--------------------------------------------------| +| [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. | +| [ready](#ready) | `ready` | `Boolean` | false | When false the component API should not be called. | | [value](#value) | `value` | `String` | "undefined" | Value selected for the menu. | ## Methods | Method | Type | Description | -|----------------------|---------------------------------|--------------------------------------------------| -| [makeSelection](#makeSelection) | `(): void` | Process actions for making making a menuoption selection. | -| [resetOptionsStates](#resetOptionsStates) | `(): void` | Reset the menu and all options. | +|----------------------|---------------------------------|--------------------------------------------------| +| [makeSelection](#makeSelection) | `(): void` | Process actions for making making a menuoption selection. | +| [resetOptionsStates](#resetOptionsStates) | `(): void` | Reset the menu and all options. | | [selectNextItem](#selectNextItem) | `(moveDirection: string): void` | Using value of current this.index evaluates index
of next :focus to set based on array of this.items ignoring items
with disabled attr.

The event.target is not used as the function needs to know where to go,
versus knowing where it is.

**moveDirection**: Up or Down based on keyboard event. | ## Events @@ -31,13 +31,12 @@ The auro-menu element provides users a way to select from a list of options. |-------------------------------|------------------------|--------------------------------------------------| | `auroMenu-activatedOption` | `CustomEvent` | Notifies that a menuoption has been made `active`. | | `auroMenu-customEventFired` | `CustomEvent` | Notifies that a custom event has been fired. | -| `auroMenu-ready` | `CustomEvent` | Notifies that the component has finished initializing. | | `auroMenu-selectValueFailure` | `CustomEvent` | Notifies that a an attempt to select a menuoption by matching a value has failed. | | `auroMenu-selectValueReset` | `CustomEvent` | Notifies that the component value has been reset. | -| `auroMenu-selectedOption` | `CustomEvent` | Notifies that a new menuoption selection has been made. | -| [auroMenuActivatedOption](#auroMenuActivatedOption) | `CustomEvent` | (DEPRECATED) Notifies that a menuoption has been made `active`. | -| [auroMenuCustomEventFired](#auroMenuCustomEventFired) | `CustomEvent` | (DEPRECATED) Notifies that a custom event has been fired. | -| [auroMenuSelectValueFailure](#auroMenuSelectValueFailure) | `CustomEvent` | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. | +| `auroMenu-selectedOption` | `CustomEvent` | Notifies that a new menuoption selection has been made. | +| [auroMenuActivatedOption](#auroMenuActivatedOption) | `CustomEvent` | (DEPRECATED) Notifies that a menuoption has been made `active`. | +| [auroMenuCustomEventFired](#auroMenuCustomEventFired) | `CustomEvent` | (DEPRECATED) Notifies that a custom event has been fired. | +| [auroMenuSelectValueFailure](#auroMenuSelectValueFailure) | `CustomEvent` | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. | | [selectedOption](#selectedOption) | `CustomEvent` | (DEPRECATED) Notifies that a new menuoption selection has been made. | ## Slots @@ -45,10 +44,10 @@ The auro-menu element provides users a way to select from a list of options. | Name | Description | |------|-------------------------------------| | | Slot for insertion of menu options. | - - -## API Examples - + + +## API Examples + ### Basic
@@ -62,12 +61,12 @@ The auro-menu element provides users a way to select from a list of options. Arrival -
+ - See code + See code - - + + ```html Stops @@ -75,14 +74,14 @@ The auro-menu element provides users a way to select from a list of options. Duration Departure Arrival - -``` - - - -### Attribute Examples - -#### noCheckmark + +``` + + + +### Attribute Examples + +#### noCheckmark Applying the `noCheckmark` attribute will prevent the check icon from being shown on the selected option. The left padding to reserve space for the checkmark is also removed.
@@ -121,12 +120,12 @@ Applying the `noCheckmark` attribute will prevent the check icon from being show -
+ - See code + See code - - + + ```html Stops @@ -159,12 +158,12 @@ Applying the `noCheckmark` attribute will prevent the check icon from being show Planes Motorcycles - -``` - - - -#### disabled + +``` + + + +#### disabled The `auro-menu` element with `disabled` will mark all `auro-menuoption` elements as disabled.
@@ -185,12 +184,12 @@ The `auro-menu` element with `disabled` will mark all `auro-menuoption` elements Print -
+ - See code + See code - - + + ```html New tab @@ -205,12 +204,12 @@ The `auro-menu` element with `disabled` will mark all `auro-menuoption` elements Share
Print - -``` - - - -#### matchWord + +``` + + + +#### matchWord The `auro-menu` component supports the use of the `matchWord` attribute to highlight string parts of each menuoption that are equal to `matchWord`. The matching algorithm is case insensitive (e.g., `n` matches `N`).
@@ -233,12 +232,12 @@ The `auro-menu` component supports the use of the `matchWord` attribute to highl Arrival -
+ - See code + See code - - + + ```js function updateMatch() { let matchWordMenu = document.querySelector('#matchWordMenu'); @@ -252,10 +251,10 @@ export function auroMenuMatchWordExample() { matchWordInput.addEventListener('keyup', updateMatch); } ``` - + - - + + ```html Enter a value to match in the menu @@ -272,13 +271,13 @@ export function auroMenuMatchWordExample() { Peaches Arrival - -``` - - - -### Common Use Cases - + +``` + + + +### Common Use Cases + #### Scroll When setting the `max-height` of `auro-menu`, all of the overflowing content can be accessed via a scrollbar. @@ -319,12 +318,12 @@ When setting the `max-height` of `auro-menu`, all of the overflowing content can - + - See code + See code - - + + ```html Stops @@ -357,11 +356,11 @@ When setting the `max-height` of `auro-menu`, all of the overflowing content can Planes Motorcycles - -``` - - - + +``` + + + #### Options with horizonal separator To create a natural separation between options, simply use a `
` element. @@ -384,12 +383,12 @@ To create a natural separation between options, simply use a `
` element. Print - + - See code + See code - - + + ```html New tab @@ -404,11 +403,11 @@ To create a natural separation between options, simply use a `
` element. Share
Print - -``` - - - + +``` + + + #### Nesting auro-menus to create sub-menus The `auro-menu` element supports the placement of an `auro-menu` inside of another `auro-menu`. There is no technical limit to the level of nesting. @@ -449,12 +448,12 @@ The `auro-menu` element supports the placement of an `auro-menu` inside of anoth - + - See code + See code - - + + ```html Stops @@ -487,11 +486,11 @@ The `auro-menu` element supports the placement of an `auro-menu` inside of anoth Planes Motorcycles - -``` - - - + +``` + + + #### An auro-menuoption element w/ disabled state The `auro-menuoption` element supports the placement of the `disabled` attribute per option. A fully disabled list would be managed in an outer wrapping drop down menu element. @@ -514,12 +513,12 @@ The `auro-menuoption` element supports the placement of the `disabled` attribute Print - + - See code + See code - - + + ```html New tab @@ -534,11 +533,11 @@ The `auro-menuoption` element supports the placement of the `disabled` attribute Share
Print - -``` - - - + +``` + + + #### Menu with pre-selected menu option The `auro-menu` element supports a pre-selected option via the `selected` attribute on the `auro-menuoption` element. @@ -561,12 +560,12 @@ The `auro-menu` element supports a pre-selected option via the `selected` attrib Print - + - See code + See code - - + + ```html New tab @@ -581,11 +580,11 @@ The `auro-menu` element supports a pre-selected option via the `selected` attrib Share
Print - -``` - - - + +``` + + + #### Menu with restricted width and long option The `auro-menu` element supports scenarios where the outer parent element of the menu constrains its width and there are options with text longer than the pull down menu will support. Truncated content will be illustrated with an ellipsis. @@ -608,12 +607,12 @@ The `auro-menu` element supports scenarios where the outer parent element of the Print - + - See code + See code - - + + ```html New tab @@ -628,11 +627,11 @@ The `auro-menu` element supports scenarios where the outer parent element of the Share
Print - -``` - - - + +``` + + + #### Menu with hidden options The `auro-menuoption` element supports scenarios where the menu option needs to be hidden. e.g. the only visible menu options contain the `matchWord`. @@ -655,12 +654,12 @@ The `auro-menuoption` element supports scenarios where the menu option needs to Print - + - See code + See code - - + + ```html New tab @@ -675,11 +674,11 @@ The `auro-menuoption` element supports scenarios where the menu option needs to Share
Print - -``` - - - + +``` + + + #### Reset menu selection state The `auro-menu` may be reset to a state with no menuoption selected by setting the `value` to `undefined`. @@ -697,12 +696,12 @@ The `auro-menu` may be reset to a state with no menuoption selected by setting t

RESET - + - See code + See code - - + + ```js export function auroMenuResetExample() { const resetExampleBtnElem = document.querySelector('#resetExampleBtn'); @@ -715,10 +714,10 @@ export function auroMenuResetExample() { } } ``` - + - - + + ```html Stops @@ -728,18 +727,18 @@ export function auroMenuResetExample() { Arrival

-RESET -``` - - - +RESET +``` + + + ### Theme Support The component may be restyled using the following code sample and changing the values of the following token(s). - - + + ```scss :host { --ds-auro-menu-divider-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default); @@ -748,4 +747,4 @@ The component may be restyled using the following code sample and changing the v --ds-auro-menuoption-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); } ``` - + diff --git a/components/menu/demo/api.min.js b/components/menu/demo/api.min.js index 4870bb81..92b26b28 100644 --- a/components/menu/demo/api.min.js +++ b/components/menu/demo/api.min.js @@ -695,7 +695,6 @@ class AuroMenuOption extends r { * @attr {Boolean} disabled - When true, the entire menu and all options are disabled; * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark. * @attr {String} value - Value selected for the menu. - * @prop {Boolean} ready - When false the component API should not be called. * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made. * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made. * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`. @@ -704,7 +703,6 @@ class AuroMenuOption extends r { * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. * @event auroMenu-customEventFired - Notifies that a custom event has been fired. * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired. - * @event auroMenu-ready - Notifies that the component has finished initializing. * @event auroMenu-selectValueReset - Notifies that the component value has been reset. * @slot Slot for insertion of menu options. */ @@ -718,7 +716,6 @@ class AuroMenu extends r { this.optionSelected = undefined; this.matchWord = undefined; this.noCheckmark = false; - this.ready = false; this.optionActive = undefined; /** @@ -750,7 +747,6 @@ class AuroMenu extends r { optionSelected: { type: Object }, optionActive: { type: Object }, matchWord: { type: String }, - ready: { type: Boolean }, value: { type: String } }; } @@ -1184,28 +1180,12 @@ class AuroMenu extends r { this.index = this.items.indexOf(evt.target); this.updateActiveOption(this.index); }); - - this.notifyReady(); } else { // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed this.handleNoCheckmarkAttr(); } } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroMenu-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - render() { return x` diff --git a/components/menu/demo/index.min.js b/components/menu/demo/index.min.js index 8a58d579..194e1db7 100644 --- a/components/menu/demo/index.min.js +++ b/components/menu/demo/index.min.js @@ -661,7 +661,6 @@ class AuroMenuOption extends r { * @attr {Boolean} disabled - When true, the entire menu and all options are disabled; * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark. * @attr {String} value - Value selected for the menu. - * @prop {Boolean} ready - When false the component API should not be called. * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made. * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made. * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`. @@ -670,7 +669,6 @@ class AuroMenuOption extends r { * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. * @event auroMenu-customEventFired - Notifies that a custom event has been fired. * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired. - * @event auroMenu-ready - Notifies that the component has finished initializing. * @event auroMenu-selectValueReset - Notifies that the component value has been reset. * @slot Slot for insertion of menu options. */ @@ -684,7 +682,6 @@ class AuroMenu extends r { this.optionSelected = undefined; this.matchWord = undefined; this.noCheckmark = false; - this.ready = false; this.optionActive = undefined; /** @@ -716,7 +713,6 @@ class AuroMenu extends r { optionSelected: { type: Object }, optionActive: { type: Object }, matchWord: { type: String }, - ready: { type: Boolean }, value: { type: String } }; } @@ -1150,28 +1146,12 @@ class AuroMenu extends r { this.index = this.items.indexOf(evt.target); this.updateActiveOption(this.index); }); - - this.notifyReady(); } else { // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed this.handleNoCheckmarkAttr(); } } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroMenu-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - render() { return x` diff --git a/components/menu/docs/api.md b/components/menu/docs/api.md index 40678547..c0df839d 100644 --- a/components/menu/docs/api.md +++ b/components/menu/docs/api.md @@ -28,7 +28,6 @@ The auro-menu element provides users a way to select from a list of options. |-------------------------------|------------------------|--------------------------------------------------| | `auroMenu-activatedOption` | `CustomEvent` | Notifies that a menuoption has been made `active`. | | `auroMenu-customEventFired` | `CustomEvent` | Notifies that a custom event has been fired. | -| `auroMenu-ready` | `CustomEvent` | Notifies that the component has finished initializing. | | `auroMenu-selectValueFailure` | `CustomEvent` | Notifies that a an attempt to select a menuoption by matching a value has failed. | | `auroMenu-selectValueReset` | `CustomEvent` | Notifies that the component value has been reset. | | `auroMenu-selectedOption` | `CustomEvent` | Notifies that a new menuoption selection has been made. | diff --git a/components/menu/src/auro-menu.js b/components/menu/src/auro-menu.js index 8d4eeccd..74d9d8e4 100644 --- a/components/menu/src/auro-menu.js +++ b/components/menu/src/auro-menu.js @@ -21,7 +21,6 @@ import './auro-menuoption.js'; * @attr {Boolean} disabled - When true, the entire menu and all options are disabled; * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark. * @attr {String} value - Value selected for the menu. - * @prop {Boolean} ready - When false the component API should not be called. * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made. * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made. * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`. @@ -30,7 +29,6 @@ import './auro-menuoption.js'; * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. * @event auroMenu-customEventFired - Notifies that a custom event has been fired. * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired. - * @event auroMenu-ready - Notifies that the component has finished initializing. * @event auroMenu-selectValueReset - Notifies that the component value has been reset. * @slot Slot for insertion of menu options. */ @@ -44,7 +42,6 @@ export class AuroMenu extends LitElement { this.optionSelected = undefined; this.matchWord = undefined; this.noCheckmark = false; - this.ready = false; this.optionActive = undefined; /** @@ -76,7 +73,6 @@ export class AuroMenu extends LitElement { optionSelected: { type: Object }, optionActive: { type: Object }, matchWord: { type: String }, - ready: { type: Boolean }, value: { type: String } }; } @@ -512,28 +508,12 @@ export class AuroMenu extends LitElement { this.index = this.items.indexOf(evt.target); this.updateActiveOption(this.index); }); - - this.notifyReady(); } else { // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed this.handleNoCheckmarkAttr(); } } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroMenu-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - render() { return html` diff --git a/components/select/demo/api.md b/components/select/demo/api.md index 5995fcf3..0d03f1b6 100644 --- a/components/select/demo/api.md +++ b/components/select/demo/api.md @@ -4,30 +4,30 @@ The apiExamples.md file is a compiled document. No edits should be made directly apiExamples.md is created by running `npm run build:markdownDocs`. This file is generated based on a template fetched from `./docs/partials/apiExamples.md` ---> +--> - - + + # auro-select -The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control. - +The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control. + ## Properties | Property | Attribute | Type | Default | Description | -|---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------| -| [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 bib width match the size of the content, rather than the width of the trigger. | -| [noCheckmark](#noCheckmark) | `noCheckmark` | `Boolean` | | When true, checkmark on selected option will no longer be present. | -| [noValidate](#noValidate) | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. | -| [optionSelected](#optionSelected) | `optionSelected` | `Object` | "undefined" | Specifies the current selected menuOption. | -| [placeholder](#placeholder) | `placeholder` | `String` | "Please select option" | Define placeholder text to display before a value is manually selected. | -| [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` | "undefined" | Specifies the `validityState` this element is in. | +|---------------------------------|---------------------------------|-----------|------------------------|--------------------------------------------------| +| [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 bib width match the size of the content, rather than the width of the trigger. | +| [noCheckmark](#noCheckmark) | `noCheckmark` | `Boolean` | | When true, checkmark on selected option will no longer be present. | +| [noValidate](#noValidate) | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. | +| [optionSelected](#optionSelected) | `optionSelected` | `Object` | "undefined" | Specifies the current selected menuOption. | +| [placeholder](#placeholder) | `placeholder` | `String` | "Please select option" | Define placeholder text to display before a value is manually selected. | +| [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` | "undefined" | Specifies the `validityState` this element is in. | | [value](#value) | `value` | `String` | | Value selected for the component. | ## Events @@ -35,26 +35,25 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a | Event | Type | Description | |-----------------------------|--------------------|--------------------------------------------------| | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. | -| `auroSelect-ready` | `CustomEvent` | Notifies that the component has finished initializing. | | `auroSelect-valueSet` | `CustomEvent` | Notifies that the component has a new value set. | ## Slots | Name | Description | |------------|--------------------------------------| -| | Default slot for the menu content. | -| [helpText](#helpText) | Defines the content of the helpText. | +| | Default slot for the menu content. | +| [helpText](#helpText) | Defines the content of the helpText. | | [label](#label) | Defines the content of the label. | ## CSS Shadow Parts | Part | Description | -|------------|-----------------------------| +|------------|-----------------------------| | [helpText](#helpText) | Apply CSS to the help text. | - - -## API Examples - + + +## API Examples + ### Default example A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements. Notice a default `Please select option` placeholder in the trigger. @@ -75,10 +74,10 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements. Notic - See code + See code - - + + ```html @@ -89,14 +88,14 @@ A baseline `auro-select` using `auro-menu` and `auro-menuoption` elements. Notic Arrival Prefer Alaska - -``` - - - -### Property Examples - -#### value + +``` + + + +### Property Examples + +#### value Use the `value` property to define a preset value on the `auro-select` element. The `value` of `auro-select` must match the `value` defined of a single `auro-menuoption`. Upon initially rendering the component, if the `value` does not match an `auro-menuoption`, the `value` of `auro-select` will be set to `undefined`. To pre-set the value of auro-select on load, use the `value` property. The `selected` attribute on auro-menuoption is designed to illustrate state in the DOM. @@ -122,10 +121,10 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele - See code + See code - - + + ```html Set Value to Valid Option Set Value to Invalid Option @@ -141,12 +140,12 @@ To pre-set the value of auro-select on load, use the `value` property. The `sele Arrival Prefer Alaska - -``` - + +``` + - - + + ```js export function valueExample() { const valueExample = document.querySelector('#valueExample'); @@ -164,10 +163,10 @@ export function valueExample() { }) } ``` - - - -#### placeholder + + + +#### placeholder Use the `placeholder` string attribute to inject a custom placeholder option with the select element.
@@ -186,10 +185,10 @@ Use the `placeholder` string attribute to inject a custom placeholder option wit
- See code + See code - - + + ```html @@ -200,12 +199,12 @@ Use the `placeholder` string attribute to inject a custom placeholder option wit Arrival Prefer Alaska - -``` - - - -#### required + +``` + + + +#### required When present, the `required` attribute specifies that a select field must be filled out before submitting the form. When the validity check fails the validityState equals `valueMissing`. The error message for the `valueMissing` validityState can be set to a custom string using the `setCustomValidityValueMissing`. There is no default error message defined. @@ -226,10 +225,10 @@ When the validity check fails the validityState equals `valueMissing`. The error - See code + See code - - + + ```html @@ -240,12 +239,12 @@ When the validity check fails the validityState equals `valueMissing`. The error Arrival Prefer Alaska - -``` - - - -#### error + +``` + + + +#### error Use the `error` boolean attribute to toggle the error UI.
@@ -265,12 +264,12 @@ Use the `error` boolean attribute to toggle the error UI. -
+ - See code + See code - - + + ```html Set Error Remove Error @@ -284,12 +283,12 @@ Use the `error` boolean attribute to toggle the error UI. Arrival Prefer Alaska - -``` - - - -#### disabled + +``` + + + +#### disabled Use the `disabled` boolean attribute to toggle the disabled UI.
@@ -306,12 +305,12 @@ Use the `disabled` boolean attribute to toggle the disabled UI. -
+ - See code + See code - - + + ```html @@ -322,12 +321,12 @@ Use the `disabled` boolean attribute to toggle the disabled UI. Arrival Prefer Alaska - -``` - - - -#### flexMenuWidth + +``` + + + +#### flexMenuWidth Use the `flexMenuWidth` boolean attribute to toggle the width of the `` element to match the width of the bib content, rather than the width of the trigger.
@@ -341,7 +340,7 @@ Use the `flexMenuWidth` boolean attribute to toggle the width of the `Afghanistan has a country code of (+93) Albania has a country code of (+355) - + -``` - - - -### Slot Examples - -#### label + +``` + + + +### Slot Examples + +#### label Use the `label` slot to give your users contextual information about their selection options. This `label` content is also helpful for assistive devices.
@@ -395,10 +394,10 @@ Use the `label` slot to give your users contextual information about their selec
- See code + See code - - + + ```html Please select a preference @@ -410,11 +409,11 @@ Use the `label` slot to give your users contextual information about their selec Arrival Prefer Alaska - -``` - - - + +``` + + + #### label with placeholder The `label` slot and `placeholder` attribute may be used together. @@ -436,10 +435,10 @@ The `label` slot and `placeholder` attribute may be used together.
- See code + See code - - + + ```html Label Text @@ -451,12 +450,12 @@ The `label` slot and `placeholder` attribute may be used together. Arrival Prefer Alaska - -``` - - - -#### helpText + +``` + + + +#### helpText Use the `helptext` slot to provide additional information back to your user about their selection option(s).
@@ -476,10 +475,10 @@ Use the `helptext` slot to provide additional information back to your user abou
- See code + See code - - + + ```html Custom help text message. @@ -491,13 +490,13 @@ Use the `helptext` slot to provide additional information back to your user abou Arrival Prefer Alaska - -``` - - - -## Functional Examples - + +``` + + + +## Functional Examples + ### Extract value The following example illustrates how a user may query the `element.value` or `element.optionSelected` for the current value or complete option object that is selected. @@ -514,15 +513,15 @@ The following example illustrates how a user may query the `element.value` or `e Arrival Prefer Alaska - + Get current value - + - See code + See code - - + + ```js export function valueExtractionExample() { const valueExtractionExample = document.querySelector('#valueExtraction'); @@ -536,10 +535,10 @@ export function valueExtractionExample() { }) } ``` - + - - + + ```html @@ -550,12 +549,12 @@ export function valueExtractionExample() { Arrival Prefer Alaska - -Get current value -``` - - - + +Get current value +``` + + + ### Custom Validity with Error State This example programmatically adds the `error` state when a user selects an option that is greater than `2`. @@ -574,12 +573,12 @@ This example programmatically adds the `error` state when a user selects an opti - + - See code + See code - - + + ```html @@ -590,12 +589,12 @@ This example programmatically adds the `error` state when a user selects an opti 5 6 - -``` - + +``` + - - + + ```js export function customErrorValidityExample(elem) { const customErrorValidityExample = document.querySelector('#primaryError'); @@ -609,9 +608,9 @@ export function customErrorValidityExample(elem) { }) }; ``` - - - + + + ### Watch for value changes The following example listens for the `selectedOption` event. Once triggered, `element.value` or `element.optionSelected` may be queried for the new value or complete option object. @@ -630,12 +629,12 @@ The following example listens for the `selectedOption` event. Once triggered, `e - + - See code + See code - - + + ```js export function valueAlert(elem) { elem.addEventListener('selectedOption', () => { @@ -644,10 +643,10 @@ export function valueAlert(elem) { }) } ``` - + - - + + ```html @@ -658,18 +657,18 @@ export function valueAlert(elem) { Arrival Prefer Alaska - -``` - - - + +``` + + + ### Theme Support The component may be restyled using the following code sample and changing the values of the following token(s). - - + + ```scss @import './../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables'; diff --git a/components/select/demo/api.min.js b/components/select/demo/api.min.js index 199db199..330d0bfc 100644 --- a/components/select/demo/api.min.js +++ b/components/select/demo/api.min.js @@ -2888,7 +2888,6 @@ if (!customElements.get("auro-dropdownbib")) { * @csspart helpText - The helpText content container. * @csspart popover - The bib content container. * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked. - * @event auroDropdown-ready - Notifies that the component has finished initializing. * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ class AuroDropdown extends r { @@ -2914,7 +2913,6 @@ class AuroDropdown extends r { this.inset = false; this.placement = 'bottom-start'; this.rounded = false; - this.ready = false; this.tabIndex = 0; this.noToggle = false; @@ -3013,7 +3011,6 @@ class AuroDropdown extends r { reflect: true }, isPopoverVisible: { type: Boolean }, - ready: { type: Boolean }, onSlotChange: { type: Function, reflect: false @@ -3077,23 +3074,6 @@ class AuroDropdown extends r { this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); document.body.append(this.bibContent); - - this.notifyReady(); - } - - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroDropdown-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); } /** @@ -3175,7 +3155,7 @@ class AuroDropdown extends r {
+ @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}">
${this.chevron || this.common ? u$1` @@ -3244,7 +3224,6 @@ var tokensCss$2 = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-co * @slot - Default slot for the menu content. * @slot label - Defines the content of the label. * @slot helpText - Defines the content of the helpText. - * @event auroSelect-ready - Notifies that the component has finished initializing. * @event auroSelect-valueSet - Notifies that the component has a new value set. * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed. * @csspart helpText - Apply CSS to the help text. @@ -3387,10 +3366,6 @@ class AuroSelect extends r$4 { // Exposes the CSS parts from the dropdown for styling this.dropdown.exposeCssParts(); - - this.dropdown.addEventListener('auroDropdown-ready', () => { - this.auroDropdownReady = true; - }); } /** @@ -3457,10 +3432,6 @@ class AuroSelect extends r$4 { this.generateOptionsArray(); - this.menu.addEventListener('auroMenu-ready', () => { - this.auroMenuReady = true; - }); - this.addEventListener('auroMenu-activatedOption', (evt) => { this.optionActive = evt.detail; }); @@ -3577,51 +3548,6 @@ class AuroSelect extends r$4 { } } - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroSelect-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - - /** - * Monitors readiness of peer dependencies and begins work that should only start when ready. - * @private - * @returns {void} - */ - async checkReadiness() { - if (this.auroDropdownReady && this.auroMenuReady) { - this.readyActions(); - this.notifyReady(); - } else { - // Start a retry counter to limit the retry count - if (!this.readyRetryCount && this.readyRetryCount !== 0) { - this.readyRetryCount = 0; - } else { - this.readyRetryCount += 1; - } - - const readyTimer = 0; - const readyRetryLimit = 200; - - if (this.readyRetryCount <= readyRetryLimit) { - - const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time)); - - await sleep(readyTimer); - this.checkReadiness(); - } - } - } - /** * Determines the element error state based on the `required` attribute and input value. * @private @@ -3635,18 +3561,6 @@ class AuroSelect extends r$4 { } } - /** - * Functionality that should not be performed until the combobox is in a ready state. - * @private - * @returns {void} - */ - readyActions() { - // Set the initial value in auro-menu if defined - if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { - this.menu.value = this.value; - } - } - /** * Handle element attributes on update. * @private @@ -3681,24 +3595,23 @@ class AuroSelect extends r$4 { this.configureDropdown(); this.configureSelect(); - this.checkReadiness(); + // Set the initial value in auro-menu if defined + if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { + this.menu.value = this.value; + } } updated(changedProperties) { // After the component is ready, send direct value changes to auro-menu. - if (this.ready && changedProperties.has('value')) { + if (changedProperties.has('value')) { if (this.value) { this.menu.value = this.value; } else { this.menu.value = undefined; } - } - if (changedProperties.has('value')) { this.validation.validate(this); - } - if (changedProperties.has('value')) { this.dispatchEvent(new CustomEvent('auroSelect-valueSet', { bubbles: true, cancelable: false, @@ -4326,7 +4239,6 @@ class AuroMenuOption extends r$4 { * @attr {Boolean} disabled - When true, the entire menu and all options are disabled; * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark. * @attr {String} value - Value selected for the menu. - * @prop {Boolean} ready - When false the component API should not be called. * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made. * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made. * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`. @@ -4335,7 +4247,6 @@ class AuroMenuOption extends r$4 { * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. * @event auroMenu-customEventFired - Notifies that a custom event has been fired. * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired. - * @event auroMenu-ready - Notifies that the component has finished initializing. * @event auroMenu-selectValueReset - Notifies that the component value has been reset. * @slot Slot for insertion of menu options. */ @@ -4349,7 +4260,6 @@ class AuroMenu extends r$4 { this.optionSelected = undefined; this.matchWord = undefined; this.noCheckmark = false; - this.ready = false; this.optionActive = undefined; /** @@ -4381,7 +4291,6 @@ class AuroMenu extends r$4 { optionSelected: { type: Object }, optionActive: { type: Object }, matchWord: { type: String }, - ready: { type: Boolean }, value: { type: String } }; } @@ -4815,28 +4724,12 @@ class AuroMenu extends r$4 { this.index = this.items.indexOf(evt.target); this.updateActiveOption(this.index); }); - - this.notifyReady(); } else { // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed this.handleNoCheckmarkAttr(); } } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroMenu-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - render() { return x$1` diff --git a/components/select/demo/index.min.js b/components/select/demo/index.min.js index ea8de2e9..7bf2835e 100644 --- a/components/select/demo/index.min.js +++ b/components/select/demo/index.min.js @@ -2836,7 +2836,6 @@ if (!customElements.get("auro-dropdownbib")) { * @csspart helpText - The helpText content container. * @csspart popover - The bib content container. * @event auroDropdown-triggerClick - Notifies that the trigger has been clicked. - * @event auroDropdown-ready - Notifies that the component has finished initializing. * @event auroDropdown-toggled - Notifies that the visibility of the dropdown bib has changed. */ class AuroDropdown extends r { @@ -2862,7 +2861,6 @@ class AuroDropdown extends r { this.inset = false; this.placement = 'bottom-start'; this.rounded = false; - this.ready = false; this.tabIndex = 0; this.noToggle = false; @@ -2961,7 +2959,6 @@ class AuroDropdown extends r { reflect: true }, isPopoverVisible: { type: Boolean }, - ready: { type: Boolean }, onSlotChange: { type: Function, reflect: false @@ -3025,23 +3022,6 @@ class AuroDropdown extends r { this.bibContent = this.shadowRoot.querySelector('auro-dropdownbib'); document.body.append(this.bibContent); - - this.notifyReady(); - } - - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroDropdown-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); } /** @@ -3123,7 +3103,7 @@ class AuroDropdown extends r {
+ @slotchange="${() => {this.floater.handleTriggerTabIndex(); }}">
${this.chevron || this.common ? u$1` @@ -3192,7 +3172,6 @@ var tokensCss$2 = i$b`:host{--ds-auro-select-placeholder-text-color: var(--ds-co * @slot - Default slot for the menu content. * @slot label - Defines the content of the label. * @slot helpText - Defines the content of the helpText. - * @event auroSelect-ready - Notifies that the component has finished initializing. * @event auroSelect-valueSet - Notifies that the component has a new value set. * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed. * @csspart helpText - Apply CSS to the help text. @@ -3335,10 +3314,6 @@ class AuroSelect extends r$4 { // Exposes the CSS parts from the dropdown for styling this.dropdown.exposeCssParts(); - - this.dropdown.addEventListener('auroDropdown-ready', () => { - this.auroDropdownReady = true; - }); } /** @@ -3405,10 +3380,6 @@ class AuroSelect extends r$4 { this.generateOptionsArray(); - this.menu.addEventListener('auroMenu-ready', () => { - this.auroMenuReady = true; - }); - this.addEventListener('auroMenu-activatedOption', (evt) => { this.optionActive = evt.detail; }); @@ -3525,51 +3496,6 @@ class AuroSelect extends r$4 { } } - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroSelect-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - - /** - * Monitors readiness of peer dependencies and begins work that should only start when ready. - * @private - * @returns {void} - */ - async checkReadiness() { - if (this.auroDropdownReady && this.auroMenuReady) { - this.readyActions(); - this.notifyReady(); - } else { - // Start a retry counter to limit the retry count - if (!this.readyRetryCount && this.readyRetryCount !== 0) { - this.readyRetryCount = 0; - } else { - this.readyRetryCount += 1; - } - - const readyTimer = 0; - const readyRetryLimit = 200; - - if (this.readyRetryCount <= readyRetryLimit) { - - const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time)); - - await sleep(readyTimer); - this.checkReadiness(); - } - } - } - /** * Determines the element error state based on the `required` attribute and input value. * @private @@ -3583,18 +3509,6 @@ class AuroSelect extends r$4 { } } - /** - * Functionality that should not be performed until the combobox is in a ready state. - * @private - * @returns {void} - */ - readyActions() { - // Set the initial value in auro-menu if defined - if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { - this.menu.value = this.value; - } - } - /** * Handle element attributes on update. * @private @@ -3629,24 +3543,23 @@ class AuroSelect extends r$4 { this.configureDropdown(); this.configureSelect(); - this.checkReadiness(); + // Set the initial value in auro-menu if defined + if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { + this.menu.value = this.value; + } } updated(changedProperties) { // After the component is ready, send direct value changes to auro-menu. - if (this.ready && changedProperties.has('value')) { + if (changedProperties.has('value')) { if (this.value) { this.menu.value = this.value; } else { this.menu.value = undefined; } - } - if (changedProperties.has('value')) { this.validation.validate(this); - } - if (changedProperties.has('value')) { this.dispatchEvent(new CustomEvent('auroSelect-valueSet', { bubbles: true, cancelable: false, @@ -4274,7 +4187,6 @@ class AuroMenuOption extends r$4 { * @attr {Boolean} disabled - When true, the entire menu and all options are disabled; * @attr {Boolean} noCheckmark - When true, selected option will not show the checkmark. * @attr {String} value - Value selected for the menu. - * @prop {Boolean} ready - When false the component API should not be called. * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made. * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made. * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`. @@ -4283,7 +4195,6 @@ class AuroMenuOption extends r$4 { * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. * @event auroMenu-customEventFired - Notifies that a custom event has been fired. * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired. - * @event auroMenu-ready - Notifies that the component has finished initializing. * @event auroMenu-selectValueReset - Notifies that the component value has been reset. * @slot Slot for insertion of menu options. */ @@ -4297,7 +4208,6 @@ class AuroMenu extends r$4 { this.optionSelected = undefined; this.matchWord = undefined; this.noCheckmark = false; - this.ready = false; this.optionActive = undefined; /** @@ -4329,7 +4239,6 @@ class AuroMenu extends r$4 { optionSelected: { type: Object }, optionActive: { type: Object }, matchWord: { type: String }, - ready: { type: Boolean }, value: { type: String } }; } @@ -4763,28 +4672,12 @@ class AuroMenu extends r$4 { this.index = this.items.indexOf(evt.target); this.updateActiveOption(this.index); }); - - this.notifyReady(); } else { // make sure to update all menuoption noCheckmark attributes when the menu is dynamically changed this.handleNoCheckmarkAttr(); } } - /** - * @private - * @returns {void} Marks the component as ready and sends event. - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroMenu-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - render() { return x$1` diff --git a/components/select/docs/api.md b/components/select/docs/api.md index 725f605e..cf85f609 100644 --- a/components/select/docs/api.md +++ b/components/select/docs/api.md @@ -25,7 +25,6 @@ The auro-select element is a wrapper for auro-dropdown and auro-menu to create a | Event | Type | Description | |-----------------------------|--------------------|--------------------------------------------------| | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. | -| `auroSelect-ready` | `CustomEvent` | Notifies that the component has finished initializing. | | `auroSelect-valueSet` | `CustomEvent` | Notifies that the component has a new value set. | ## Slots diff --git a/components/select/src/auro-select.js b/components/select/src/auro-select.js index b30a0688..1540557e 100644 --- a/components/select/src/auro-select.js +++ b/components/select/src/auro-select.js @@ -41,7 +41,6 @@ import tokensCss from "./tokens-css.js"; * @slot - Default slot for the menu content. * @slot label - Defines the content of the label. * @slot helpText - Defines the content of the helpText. - * @event auroSelect-ready - Notifies that the component has finished initializing. * @event auroSelect-valueSet - Notifies that the component has a new value set. * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed. * @csspart helpText - Apply CSS to the help text. @@ -184,10 +183,6 @@ export class AuroSelect extends LitElement { // Exposes the CSS parts from the dropdown for styling this.dropdown.exposeCssParts(); - - this.dropdown.addEventListener('auroDropdown-ready', () => { - this.auroDropdownReady = true; - }); } /** @@ -254,10 +249,6 @@ export class AuroSelect extends LitElement { this.generateOptionsArray(); - this.menu.addEventListener('auroMenu-ready', () => { - this.auroMenuReady = true; - }); - this.addEventListener('auroMenu-activatedOption', (evt) => { this.optionActive = evt.detail; }); @@ -374,51 +365,6 @@ export class AuroSelect extends LitElement { } } - /** - * Marks the component as ready and sends event. - * @private - * @returns {void} - */ - notifyReady() { - this.ready = true; - - this.dispatchEvent(new CustomEvent('auroSelect-ready', { - bubbles: true, - cancelable: false, - composed: true, - })); - } - - /** - * Monitors readiness of peer dependencies and begins work that should only start when ready. - * @private - * @returns {void} - */ - async checkReadiness() { - if (this.auroDropdownReady && this.auroMenuReady) { - this.readyActions(); - this.notifyReady(); - } else { - // Start a retry counter to limit the retry count - if (!this.readyRetryCount && this.readyRetryCount !== 0) { - this.readyRetryCount = 0; - } else { - this.readyRetryCount += 1; - } - - const readyTimer = 0; - const readyRetryLimit = 200; - - if (this.readyRetryCount <= readyRetryLimit) { - - const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time)); - - await sleep(readyTimer); - this.checkReadiness(); - } - } - } - /** * Determines the element error state based on the `required` attribute and input value. * @private @@ -432,18 +378,6 @@ export class AuroSelect extends LitElement { } } - /** - * Functionality that should not be performed until the combobox is in a ready state. - * @private - * @returns {void} - */ - readyActions() { - // Set the initial value in auro-menu if defined - if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { - this.menu.value = this.value; - } - } - /** * Handle element attributes on update. * @private @@ -478,24 +412,23 @@ export class AuroSelect extends LitElement { this.configureDropdown(); this.configureSelect(); - this.checkReadiness(); + // Set the initial value in auro-menu if defined + if (this.hasAttribute('value') && this.getAttribute('value').length > 0) { + this.menu.value = this.value; + } } updated(changedProperties) { // After the component is ready, send direct value changes to auro-menu. - if (this.ready && changedProperties.has('value')) { + if (changedProperties.has('value')) { if (this.value) { this.menu.value = this.value; } else { this.menu.value = undefined; } - } - if (changedProperties.has('value')) { this.validation.validate(this); - } - if (changedProperties.has('value')) { this.dispatchEvent(new CustomEvent('auroSelect-valueSet', { bubbles: true, cancelable: false, diff --git a/components/select/test/auro-select.test.js b/components/select/test/auro-select.test.js index 04d6b0f2..29675154 100644 --- a/components/select/test/auro-select.test.js +++ b/components/select/test/auro-select.test.js @@ -104,7 +104,6 @@ describe('auro-select', () => { it('make invalid selection programmatically results in error ui', async () => { const el = await presetValueFixture(); - await waitUntil(() => el.ready); await expect(el.value).to.be.equal('price'); @@ -122,7 +121,6 @@ describe('auro-select', () => { it('reset selection value programmatically', async () => { const el = await presetValueFixture(); - await waitUntil(() => el.ready); el.value = undefined; @@ -150,8 +148,6 @@ describe('auro-select', () => { it('removing error attribute reruns validity even when value is undefined', async () => { const el = await errorFixture(); - await waitUntil(() => el.ready); - await expect(el.getAttribute('validity')).to.be.equal('customError'); el.removeAttribute('error');