diff --git a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts index a49b455c26..a63995b0f0 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid-option/autocomplete-grid-option.ts @@ -29,7 +29,6 @@ class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement { public static readonly events = { selectionChange: 'autocompleteOptionSelectionChange', optionSelected: 'autocompleteOptionSelected', - optionLabelChanged: 'optionLabelChanged', } as const; protected optionId = autocompleteGridOptionId; @@ -46,15 +45,6 @@ class SbbAutocompleteGridOptionElement extends SbbOptionBaseElement { SbbAutocompleteGridOptionElement.events.optionSelected, ); - /** - * @internal - * Emits when the label changed. - */ - protected optionLabelChanged: EventEmitter = new EventEmitter( - this, - SbbAutocompleteGridOptionElement.events.optionLabelChanged, - ); - protected override onOptionAttributesChange(mutationsList: MutationRecord[]): void { super.onOptionAttributesChange(mutationsList); this.closest?.('sbb-autocomplete-grid-row')?.toggleAttribute( diff --git a/src/elements/option/option/option-base-element.ts b/src/elements/option/option/option-base-element.ts index fafc9a5eac..96b84aaa6c 100644 --- a/src/elements/option/option/option-base-element.ts +++ b/src/elements/option/option/option-base-element.ts @@ -62,9 +62,6 @@ abstract class SbbOptionBaseElement extends SbbDisabledMixin( /** Emits when an option was selected by user. */ protected abstract optionSelected: EventEmitter; - /** Emits when the label changes. */ - protected abstract optionLabelChanged: EventEmitter; - /** Whether to apply the negative styling */ @state() protected accessor negative = false; @@ -266,7 +263,7 @@ abstract class SbbOptionBaseElement extends SbbDisabledMixin( private _handleSlotChange(): void { this.handleHighlightState(); - this.optionLabelChanged.emit(); + this.dispatchEvent(new Event('optionLabelChanged', { bubbles: true })); } protected override render(): TemplateResult { diff --git a/src/elements/option/option/option.ts b/src/elements/option/option/option.ts index dc2ca86a8e..2e6520655b 100644 --- a/src/elements/option/option/option.ts +++ b/src/elements/option/option/option.ts @@ -31,7 +31,6 @@ class SbbOptionElement extends SbbOptionBaseElement { public static readonly events = { selectionChange: 'optionSelectionChange', optionSelected: 'optionSelected', - optionLabelChanged: 'optionLabelChanged', } as const; protected optionId = `sbb-option`; @@ -48,15 +47,6 @@ class SbbOptionElement extends SbbOptionBaseElement { SbbOptionElement.events.optionSelected, ); - /** - * @internal - * Emits when the label changed. - */ - protected optionLabelChanged: EventEmitter = new EventEmitter( - this, - SbbOptionElement.events.optionLabelChanged, - ); - private set _variant(state: SbbOptionVariant) { if (state) { this.setAttribute('data-variant', state); diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts index 4548d5e24e..df39866159 100644 --- a/src/elements/select/select.ts +++ b/src/elements/select/select.ts @@ -268,23 +268,23 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin( /** Listens to option changes. */ private _onOptionLabelChanged(event: Event): void { const target = event.target as SbbOptionElement; - const selectedOption = this._getSelectedOption(); + const selected = this._getSelected(); if ( - (!Array.isArray(selectedOption) && target !== selectedOption) || - (Array.isArray(selectedOption) && !selectedOption.includes(target)) + (!Array.isArray(selected) && target !== selected) || + (Array.isArray(selected) && !selected.includes(target)) ) { return; } - this._updateDisplayValue(selectedOption); + this._updateDisplayValue(selected); } - private _updateDisplayValue(selectedOption: SbbOptionElement | SbbOptionElement[] | null): void { - if (Array.isArray(selectedOption)) { - this._displayValue = selectedOption.map((o) => o.textContent).join(', ') || null; - } else if (selectedOption) { - this._displayValue = selectedOption?.textContent || null; + private _updateDisplayValue(selected: SbbOptionElement | SbbOptionElement[] | null): void { + if (Array.isArray(selected)) { + this._displayValue = selected.map((o) => o.textContent).join(', ') || null; + } else if (selected) { + this._displayValue = selected?.textContent || null; } else { this._displayValue = null; } @@ -307,11 +307,11 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin( options .filter((o) => !newValue.includes(o.value ?? o.getAttribute('value'))) .forEach((e) => (e.selected = false)); - const selectedOptionElements = options.filter((o) => + const selectedElements = options.filter((o) => newValue.includes(o.value ?? o.getAttribute('value')), ); - selectedOptionElements.forEach((o) => (o.selected = true)); - this._updateDisplayValue(selectedOptionElements); + selectedElements.forEach((o) => (o.selected = true)); + this._updateDisplayValue(selectedElements); } this._stateChange.emit({ type: 'value', value: newValue }); } @@ -792,26 +792,24 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin( } }; - private _setValueFromSelectedOption(): void { - const selectedOption = this._getSelectedOption(); + private _setValueFromSelected(): void { + const selected = this._getSelected(); - if (Array.isArray(selectedOption)) { - if (selectedOption && selectedOption.length > 0) { + if (Array.isArray(selected)) { + if (selected && selected.length > 0) { const value: string[] = []; - for (const option of selectedOption) { + for (const option of selected) { value.push(option.value!); } this.value = value; } - } else if (selectedOption) { - this._activeItemIndex = this._filteredOptions.findIndex( - (option) => option === selectedOption, - ); - this.value = selectedOption.value; + } else if (selected) { + this._activeItemIndex = this._filteredOptions.findIndex((option) => option === selected); + this.value = selected.value; } } - private _getSelectedOption(): SbbOptionElement | SbbOptionElement[] | null { + private _getSelected(): SbbOptionElement | SbbOptionElement[] | null { if (this.multiple) { return this._filteredOptions.filter((option) => option.selected); } else { @@ -897,7 +895,7 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin( ?aria-multiselectable=${this.multiple} ${ref((containerRef) => (this._optionContainer = containerRef as HTMLElement))} > - +