From 58978fbad34ab969b4d8b739079336645a964b18 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Tue, 7 May 2024 11:57:17 +0200 Subject: [PATCH] refactor: use typed PropertyValues and always call super method of willChange (#2642) --- src/components/accordion/accordion.ts | 2 + src/components/action-group/action-group.ts | 2 + src/components/autocomplete/autocomplete.ts | 3 +- .../breadcrumb-group/breadcrumb-group.ts | 8 ++-- src/components/calendar/calendar.ts | 2 + .../checkbox/checkbox-group/checkbox-group.ts | 2 + src/components/core/mixins/hydration-mixin.ts | 5 ++- .../core/mixins/named-slot-list-mixin.ts | 2 +- src/components/core/mixins/required-mixin.ts | 1 + .../datepicker/common/datepicker-button.ts | 2 + .../datepicker-toggle/datepicker-toggle.ts | 2 + .../datepicker/datepicker/datepicker.ts | 4 +- .../__snapshots__/dialog-title.spec.snap.js | 44 ++++++++----------- .../dialog/dialog-title/dialog-title.spec.ts | 28 +++++++----- .../dialog/dialog-title/dialog-title.ts | 2 + .../dialog/__snapshots__/dialog.spec.snap.js | 1 + src/components/dialog/dialog/dialog.ts | 4 +- src/components/divider/divider.ts | 2 +- .../expansion-panel/expansion-panel.ts | 2 + .../form-field/form-field/form-field.ts | 2 + src/components/icon/icon.ts | 2 + src/components/link-list/link-list.ts | 1 + .../navigation-list/navigation-list.ts | 1 + .../navigation-marker/navigation-marker.ts | 1 + src/components/option/optgroup/optgroup.ts | 1 + src/components/option/option/option.ts | 4 +- src/components/overlay/overlay.ts | 2 +- src/components/popover/popover/popover.ts | 2 + .../radio-button-group/radio-button-group.ts | 2 + .../radio-button/radio-button/radio-button.ts | 2 + src/components/select/select.ts | 2 + .../selection-panel/selection-panel.ts | 2 + src/components/skiplink-list/skiplink-list.ts | 1 + src/components/tag/tag-group/tag-group.ts | 5 ++- .../timetable-occupancy-icon.ts | 1 + src/components/timetable-row/timetable-row.ts | 2 +- src/components/title/title-base.ts | 2 +- .../toggle/toggle-option/toggle-option.ts | 7 +-- src/components/toggle/toggle/toggle.ts | 4 +- .../train/train-formation/train-formation.ts | 5 ++- .../train/train-wagon/train-wagon.ts | 2 +- src/components/train/train/train.ts | 5 ++- .../boilerplate/component.ts | 2 + 43 files changed, 114 insertions(+), 64 deletions(-) diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts index 4705073907..90a2d68791 100644 --- a/src/components/accordion/accordion.ts +++ b/src/components/accordion/accordion.ts @@ -91,6 +91,8 @@ export class SbbAccordionElement extends SbbHydrationMixin(LitElement) { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('size')) { this._expansionPanels.forEach((panel: SbbExpansionPanelElement) => (panel.size = this.size)); } diff --git a/src/components/action-group/action-group.ts b/src/components/action-group/action-group.ts index 1b63a12d18..891242d5fb 100644 --- a/src/components/action-group/action-group.ts +++ b/src/components/action-group/action-group.ts @@ -61,6 +61,8 @@ export class SbbActionGroupElement extends LitElement { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('buttonSize')) { this._syncButtons(); } diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts index bdf65d2f2b..8f36bff0e5 100644 --- a/src/components/autocomplete/autocomplete.ts +++ b/src/components/autocomplete/autocomplete.ts @@ -244,6 +244,7 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); + if (changedProperties.has('origin')) { this._resetOriginClickListener(this.origin, changedProperties.get('origin')); } @@ -255,7 +256,7 @@ export class SbbAutocompleteElement extends SbbNegativeMixin(SbbHydrationMixin(L } } - protected override firstUpdated(changedProperties: PropertyValues): void { + protected override firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); this._componentSetup(); this._didLoad = true; diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts index 1a4f40b1b7..2143dd4547 100644 --- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts +++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts @@ -3,7 +3,6 @@ import { html, nothing, LitElement, - type PropertyValueMap, type PropertyValues, type TemplateResult, } from 'lit'; @@ -79,7 +78,7 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin< this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal }); } - protected override firstUpdated(changedProperties: PropertyValues): void { + protected override firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); this._resizeObserver.observe(this); this.toggleAttribute('data-loaded', true); @@ -90,14 +89,15 @@ export class SbbBreadcrumbGroupElement extends SbbNamedSlotListMixin< this._resizeObserver.disconnect(); } - protected override willUpdate(changedProperties: PropertyValueMap>): void { + protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); + if (changedProperties.has('listChildren')) { this._syncBreadcrumbs(); } } - protected override updated(changedProperties: PropertyValueMap>): void { + protected override updated(changedProperties: PropertyValues>): void { super.updated(changedProperties); if (changedProperties.has('listChildren')) { Promise.resolve().then(() => this._evaluateCollapsedState()); diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index 746e193c31..1195bbfe88 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -251,6 +251,8 @@ export class SbbCalendarElement extends LitElement { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (!this._initialized) { return; } diff --git a/src/components/checkbox/checkbox-group/checkbox-group.ts b/src/components/checkbox/checkbox-group/checkbox-group.ts index 7bed9703e3..65b102ea4a 100644 --- a/src/components/checkbox/checkbox-group/checkbox-group.ts +++ b/src/components/checkbox/checkbox-group/checkbox-group.ts @@ -56,6 +56,8 @@ export class SbbCheckboxGroupElement extends SbbDisabledMixin(LitElement) { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('disabled')) { this.checkboxes.forEach((c) => c.requestUpdate?.('disabled')); } diff --git a/src/components/core/mixins/hydration-mixin.ts b/src/components/core/mixins/hydration-mixin.ts index fcb19b6c81..9c02aa157f 100644 --- a/src/components/core/mixins/hydration-mixin.ts +++ b/src/components/core/mixins/hydration-mixin.ts @@ -107,14 +107,15 @@ export const SbbHydrationMixin = >( return super.createRenderRoot(); } - protected override willUpdate(changedProperties: PropertyValues): void { + protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); + if (isServer) { this.recoverSsrState?.(); } } - protected override update(changedProperties: PropertyValues): void { + protected override update(changedProperties: PropertyValues): void { // When hydration is needed, we wait the hydration process to finish, which is patched // into the update method of the LitElement base class. super.update(changedProperties); diff --git a/src/components/core/mixins/named-slot-list-mixin.ts b/src/components/core/mixins/named-slot-list-mixin.ts index b6d41e0ef9..3006e7408c 100644 --- a/src/components/core/mixins/named-slot-list-mixin.ts +++ b/src/components/core/mixins/named-slot-list-mixin.ts @@ -16,7 +16,7 @@ const SLOTNAME_PREFIX = 'li'; * Allows the usage of the string literal 'listChildren'. * * @example - * protected override willUpdate(changedProperties: PropertyValueMap>): void { + * protected override willUpdate(changedProperties: PropertyValues>): void { * if (changedProperties.has('listChildren')) { * ... * } diff --git a/src/components/core/mixins/required-mixin.ts b/src/components/core/mixins/required-mixin.ts index 38d3675fc4..476df7f145 100644 --- a/src/components/core/mixins/required-mixin.ts +++ b/src/components/core/mixins/required-mixin.ts @@ -34,6 +34,7 @@ export const SbbRequiredMixin = < protected override async willUpdate(changedProperties: PropertyValues): Promise { super.willUpdate(changedProperties); + if (changedProperties.has('required')) { // Firefox needs explicitly set aria-required value. this.internals.ariaRequired = `${this.required}`; diff --git a/src/components/datepicker/common/datepicker-button.ts b/src/components/datepicker/common/datepicker-button.ts index 2d8cf6ae96..070ce9d4a0 100644 --- a/src/components/datepicker/common/datepicker-button.ts +++ b/src/components/datepicker/common/datepicker-button.ts @@ -54,6 +54,8 @@ export abstract class SbbDatepickerButton extends SbbNegativeMixin(SbbButtonBase } public override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('datePicker')) { this._init(this.datePicker); } diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts index d3552c44d9..faa658d775 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -73,6 +73,8 @@ export class SbbDatepickerToggleElement extends SbbNegativeMixin(LitElement) { } public override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('datePicker')) { this._init(this.datePicker); } diff --git a/src/components/datepicker/datepicker/datepicker.ts b/src/components/datepicker/datepicker/datepicker.ts index baadf3b46b..13f6ec902e 100644 --- a/src/components/datepicker/datepicker/datepicker.ts +++ b/src/components/datepicker/datepicker/datepicker.ts @@ -361,6 +361,8 @@ export class SbbDatepickerElement extends LitElement { } public override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('input')) { this._findInput(this.input!, changedProperties.get('input')!); } @@ -375,7 +377,7 @@ export class SbbDatepickerElement extends LitElement { this._datePickerController?.abort(); } - protected override firstUpdated(changedProperties: PropertyValues): void { + protected override firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); this._setAriaLiveMessage(this.getValueAsDate()); } diff --git a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js index 03fb644d4f..6f4d73929a 100644 --- a/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js +++ b/src/components/dialog/dialog-title/__snapshots__/dialog-title.spec.snap.js @@ -1,7 +1,19 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-dialog-title renders"] = +snapshots["sbb-dialog-title renders Light DOM"] = +` + Title + +`; +/* end snapshot sbb-dialog-title renders Light DOM */ + +snapshots["sbb-dialog-title renders Shadow DOM"] = `

`; -/* end snapshot sbb-dialog-title renders */ +/* end snapshot sbb-dialog-title renders Shadow DOM */ -snapshots["sbb-dialog-title A11y tree Chrome"] = +snapshots["sbb-dialog-title renders A11y tree Chrome"] = `

{ "role": "WebArea", @@ -47,9 +59,9 @@ snapshots["sbb-dialog-title A11y tree Chrome"] = }

`; -/* end snapshot sbb-dialog-title A11y tree Chrome */ +/* end snapshot sbb-dialog-title renders A11y tree Chrome */ -snapshots["sbb-dialog-title A11y tree Firefox"] = +snapshots["sbb-dialog-title renders A11y tree Firefox"] = `

{ "role": "document", @@ -67,25 +79,5 @@ snapshots["sbb-dialog-title A11y tree Firefox"] = }

`; -/* end snapshot sbb-dialog-title A11y tree Firefox */ - -snapshots["sbb-dialog-title A11y tree Safari"] = -`

- { - "role": "WebArea", - "name": "", - "children": [ - { - "role": "heading", - "name": "Title" - }, - { - "role": "button", - "name": "Close secondary window" - } - ] -} -

-`; -/* end snapshot sbb-dialog-title A11y tree Safari */ +/* end snapshot sbb-dialog-title renders A11y tree Firefox */ diff --git a/src/components/dialog/dialog-title/dialog-title.spec.ts b/src/components/dialog/dialog-title/dialog-title.spec.ts index 82f968915f..e61cb5d0f1 100644 --- a/src/components/dialog/dialog-title/dialog-title.spec.ts +++ b/src/components/dialog/dialog-title/dialog-title.spec.ts @@ -2,21 +2,27 @@ import { expect } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; + +import type { SbbDialogTitleElement } from './dialog-title.js'; + import './dialog-title.js'; describe('sbb-dialog-title', () => { - it('renders', async () => { - const root = await fixture(html`Title`); + let element: SbbDialogTitleElement; - expect(root).dom.to.be.equal(` - Title - `); + describe('renders', () => { + beforeEach(async () => { + element = await fixture(html`Title`); + }); - await expect(root).shadowDom.to.equalSnapshot(); - }); + it('Light DOM', async () => { + await expect(element).dom.to.equalSnapshot(); + }); - testA11yTreeSnapshot(html`Title`); + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.equalSnapshot(); + }); + + testA11yTreeSnapshot(); + }); }); diff --git a/src/components/dialog/dialog-title/dialog-title.ts b/src/components/dialog/dialog-title/dialog-title.ts index 8514883db3..8740aa302d 100644 --- a/src/components/dialog/dialog-title/dialog-title.ts +++ b/src/components/dialog/dialog-title/dialog-title.ts @@ -76,6 +76,8 @@ export class SbbDialogTitleElement extends SbbTitleBase { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('backButton') || changedProperties.has('accessibilityBackLabel')) { this.backButton = !this.backButton && !!this.accessibilityBackLabel ? true : this.backButton; } diff --git a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js index f7f34903d8..574f7fb8f6 100644 --- a/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js +++ b/src/components/dialog/dialog/__snapshots__/dialog.spec.snap.js @@ -4,6 +4,7 @@ export const snapshots = {}; snapshots["sbb-dialog renders an open dialog Dom"] = ` ): void { this._ariaLiveRef = this.shadowRoot!.querySelector('sbb-screen-reader-only')!; @@ -250,6 +250,8 @@ export class SbbDialogElement extends SbbNegativeMixin(LitElement) { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('negative')) { this._syncNegative(); } diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts index 19eea19ee6..1200986fb0 100644 --- a/src/components/divider/divider.ts +++ b/src/components/divider/divider.ts @@ -21,7 +21,7 @@ export class SbbDividerElement extends SbbNegativeMixin(LitElement) { /** Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal. */ @property({ reflect: true }) public orientation: SbbOrientation = 'horizontal'; - protected override willUpdate(changedProperties: PropertyValues): void { + protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); if (changedProperties.has('orientation')) { diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.ts index 0e1ce5b20e..a18d0c3691 100644 --- a/src/components/expansion-panel/expansion-panel/expansion-panel.ts +++ b/src/components/expansion-panel/expansion-panel/expansion-panel.ts @@ -131,6 +131,8 @@ export class SbbExpansionPanelElement extends SbbHydrationMixin(LitElement) { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('size')) { this._headerRef?.setAttribute('data-size', String(this.size)); this._contentRef?.setAttribute('data-size', String(this.size)); diff --git a/src/components/form-field/form-field/form-field.ts b/src/components/form-field/form-field/form-field.ts index a093d1aeb9..7c7dd0acaa 100644 --- a/src/components/form-field/form-field/form-field.ts +++ b/src/components/form-field/form-field/form-field.ts @@ -140,6 +140,8 @@ export class SbbFormFieldElement extends SbbNegativeMixin(LitElement) { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('negative')) { this._syncNegative(); } diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index d711304896..b91d34f623 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -35,6 +35,8 @@ export class SbbIconElement extends SbbIconBase { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('name')) { this.loadSvgIcon(this.name); } diff --git a/src/components/link-list/link-list.ts b/src/components/link-list/link-list.ts index c0273421cf..75b65d5e03 100644 --- a/src/components/link-list/link-list.ts +++ b/src/components/link-list/link-list.ts @@ -63,6 +63,7 @@ export class SbbLinkListElement extends SbbNegativeMixin( protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); + if ( changedProperties.has('size') || changedProperties.has('negative') || diff --git a/src/components/navigation/navigation-list/navigation-list.ts b/src/components/navigation/navigation-list/navigation-list.ts index 1788ec8c3c..e9915993ea 100644 --- a/src/components/navigation/navigation-list/navigation-list.ts +++ b/src/components/navigation/navigation-list/navigation-list.ts @@ -43,6 +43,7 @@ export class SbbNavigationListElement extends SbbNamedSlotListMixin< protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); + if (changedProperties.has('listChildren')) { this.listChildren.forEach((c) => (c.size = 'm')); } diff --git a/src/components/navigation/navigation-marker/navigation-marker.ts b/src/components/navigation/navigation-marker/navigation-marker.ts index 0ccc8009a7..2ecf28aa5d 100644 --- a/src/components/navigation/navigation-marker/navigation-marker.ts +++ b/src/components/navigation/navigation-marker/navigation-marker.ts @@ -37,6 +37,7 @@ export class SbbNavigationMarkerElement extends SbbNamedSlotListMixin< protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); + if (changedProperties.has('size') || changedProperties.has('listChildren')) { this._updateMarkerActions(); } diff --git a/src/components/option/optgroup/optgroup.ts b/src/components/option/optgroup/optgroup.ts index 4742f4fd6d..71e6fa5d30 100644 --- a/src/components/option/optgroup/optgroup.ts +++ b/src/components/option/optgroup/optgroup.ts @@ -61,6 +61,7 @@ export class SbbOptGroupElement extends SbbDisabledMixin(SbbHydrationMixin(LitEl protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); + if (changedProperties.has('disabled')) { if (!inertAriaGroups) { this.setAttribute('aria-disabled', this.disabled.toString()); diff --git a/src/components/option/option/option.ts b/src/components/option/option/option.ts index 5575e401b2..850880b05c 100644 --- a/src/components/option/option/option.ts +++ b/src/components/option/option/option.ts @@ -205,7 +205,7 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme }); } - protected override willUpdate(changedProperties: PropertyValues): void { + protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); if (changedProperties.has('disabled')) { @@ -214,7 +214,7 @@ export class SbbOptionElement extends SbbDisabledMixin(SbbIconNameMixin(LitEleme } } - protected override firstUpdated(changedProperties: PropertyValues): void { + protected override firstUpdated(changedProperties: PropertyValues): void { super.firstUpdated(changedProperties); // Init first select state because false would not call setter of selected property. diff --git a/src/components/overlay/overlay.ts b/src/components/overlay/overlay.ts index d7f1d9f418..b941da4c3f 100644 --- a/src/components/overlay/overlay.ts +++ b/src/components/overlay/overlay.ts @@ -208,7 +208,7 @@ export class SbbOverlayElement extends SbbNegativeMixin(LitElement) { removeInertMechanism(); } - protected override firstUpdated(changedProperties: PropertyValues): void { + protected override firstUpdated(changedProperties: PropertyValues): void { this._ariaLiveRef = this.shadowRoot!.querySelector('sbb-screen-reader-only')!; super.firstUpdated(changedProperties); diff --git a/src/components/popover/popover/popover.ts b/src/components/popover/popover/popover.ts index 4d4b4c8381..65f76b0b6f 100644 --- a/src/components/popover/popover/popover.ts +++ b/src/components/popover/popover/popover.ts @@ -199,6 +199,8 @@ export class SbbPopoverElement extends LitElement { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('trigger')) { this._removeTriggerClickListener(this.trigger, changedProperties.get('trigger')); } diff --git a/src/components/radio-button/radio-button-group/radio-button-group.ts b/src/components/radio-button/radio-button-group/radio-button-group.ts index 8656dbfe87..c757f705b0 100644 --- a/src/components/radio-button/radio-button-group/radio-button-group.ts +++ b/src/components/radio-button/radio-button-group/radio-button-group.ts @@ -152,6 +152,8 @@ export class SbbRadioButtonGroupElement extends SbbDisabledMixin(LitElement) { } public override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('value')) { this._valueChanged(this.value); } diff --git a/src/components/radio-button/radio-button/radio-button.ts b/src/components/radio-button/radio-button/radio-button.ts index 1827c6b092..6bb4da5014 100644 --- a/src/components/radio-button/radio-button/radio-button.ts +++ b/src/components/radio-button/radio-button/radio-button.ts @@ -211,6 +211,8 @@ export class SbbRadioButtonElement extends SbbUpdateSchedulerMixin(LitElement) { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('checked')) { this._handleCheckedChange(this.checked, changedProperties.get('checked')!); } diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 06119156e5..1fe566da4b 100644 --- a/src/components/select/select.ts +++ b/src/components/select/select.ts @@ -305,6 +305,8 @@ export class SbbSelectElement extends SbbUpdateSchedulerMixin( } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('value')) { this._onValueChanged(this.value!); } diff --git a/src/components/selection-panel/selection-panel.ts b/src/components/selection-panel/selection-panel.ts index 10b694ff14..f54ebfaf54 100644 --- a/src/components/selection-panel/selection-panel.ts +++ b/src/components/selection-panel/selection-panel.ts @@ -115,6 +115,8 @@ export class SbbSelectionPanelElement extends LitElement { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('forceOpen')) { this._updateState(); } diff --git a/src/components/skiplink-list/skiplink-list.ts b/src/components/skiplink-list/skiplink-list.ts index 77815e1a71..ebb833b30f 100644 --- a/src/components/skiplink-list/skiplink-list.ts +++ b/src/components/skiplink-list/skiplink-list.ts @@ -46,6 +46,7 @@ export class SbbSkiplinkListElement extends SbbNamedSlotListMixin< protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); + if (changedProperties.has('listChildren')) { for (const child of this.listChildren) { child.size = 'm'; diff --git a/src/components/tag/tag-group/tag-group.ts b/src/components/tag/tag-group/tag-group.ts index e16f4109de..5eefc5f4b2 100644 --- a/src/components/tag/tag-group/tag-group.ts +++ b/src/components/tag/tag-group/tag-group.ts @@ -3,7 +3,7 @@ import { html, isServer, LitElement, - type PropertyValueMap, + type PropertyValues, type TemplateResult, } from 'lit'; import { customElement, property } from 'lit/decorators.js'; @@ -86,8 +86,9 @@ export class SbbTagGroupElement extends SbbNamedSlotListMixin>): void { + protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); + if ( (changedProperties.has('listChildren') || changedProperties.has('multiple')) && !this.multiple diff --git a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts index ff253dd694..f166a7bf34 100644 --- a/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts +++ b/src/components/timetable-occupancy-icon/timetable-occupancy-icon.ts @@ -72,6 +72,7 @@ export class SbbTimetableOccupancyIconElement extends SbbNegativeMixin(SbbIconBa protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); + if (changedProperties.has('occupancy') || changedProperties.has('negative')) { this._setNameAndAriaLabel(); } diff --git a/src/components/timetable-row/timetable-row.ts b/src/components/timetable-row/timetable-row.ts index d34cd87927..d183fd3ac2 100644 --- a/src/components/timetable-row/timetable-row.ts +++ b/src/components/timetable-row/timetable-row.ts @@ -247,7 +247,7 @@ export class SbbTimetableRowElement extends LitElement { private _language = new SbbLanguageController(this); - protected override willUpdate(changedProperties: PropertyValues): void { + protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); if (changedProperties.has('loadingTrip')) { diff --git a/src/components/title/title-base.ts b/src/components/title/title-base.ts index 67a7a9740f..8f72d36258 100644 --- a/src/components/title/title-base.ts +++ b/src/components/title/title-base.ts @@ -36,7 +36,7 @@ export abstract class SbbTitleBase extends SbbNegativeMixin(LitElement) { @property({ attribute: 'visually-hidden', reflect: true, type: Boolean }) public visuallyHidden?: boolean; - protected override willUpdate(changedProperties: PropertyValues): void { + protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); if (changedProperties.has('level')) { diff --git a/src/components/toggle/toggle-option/toggle-option.ts b/src/components/toggle/toggle-option/toggle-option.ts index 9db8a30691..06d4ba93f7 100644 --- a/src/components/toggle/toggle-option/toggle-option.ts +++ b/src/components/toggle/toggle-option/toggle-option.ts @@ -77,13 +77,14 @@ export class SbbToggleOptionElement extends SbbIconNameMixin(LitElement) { this._verifyTabindex(); } - protected override willUpdate(changedProperties: PropertyValues): void { + protected override willUpdate(changedProperties: PropertyValues): void { super.willUpdate(changedProperties); + if (changedProperties.has('checked')) { - this._handleCheckedChange(this.checked, changedProperties.get('checked')); + this._handleCheckedChange(this.checked, changedProperties.get('checked')!); } if (changedProperties.has('value')) { - this._handleValueChange(this.value, changedProperties.get('value')); + this._handleValueChange(this.value, changedProperties.get('value')!); } if (changedProperties.has('disabled')) { this._handleDisabledChange(); diff --git a/src/components/toggle/toggle/toggle.ts b/src/components/toggle/toggle/toggle.ts index 7d3a7a77ae..8bf68ce6f2 100644 --- a/src/components/toggle/toggle/toggle.ts +++ b/src/components/toggle/toggle/toggle.ts @@ -205,12 +205,14 @@ export class SbbToggleElement extends LitElement { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('value')) { this._valueChanged(this.value); } } - protected override async firstUpdated(changedProperties: PropertyValues): Promise { + protected override async firstUpdated(changedProperties: PropertyValues): Promise { super.firstUpdated(changedProperties); await this.updateComplete; this._loaded = true; diff --git a/src/components/train/train-formation/train-formation.ts b/src/components/train/train-formation/train-formation.ts index ef96e919d2..6441b5f4dd 100644 --- a/src/components/train/train-formation/train-formation.ts +++ b/src/components/train/train-formation/train-formation.ts @@ -2,7 +2,7 @@ import { type CSSResultGroup, html, LitElement, - type PropertyValueMap, + type PropertyValues, type TemplateResult, } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; @@ -126,8 +126,9 @@ export class SbbTrainFormationElement extends SbbNamedSlotListMixin< this._applyCssWidth(); } - protected override willUpdate(changedProperties: PropertyValueMap>): void { + protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); + if (changedProperties.has('listChildren')) { this._readSectors(); } diff --git a/src/components/train/train-wagon/train-wagon.ts b/src/components/train/train-wagon/train-wagon.ts index b6ad255362..b4d25f1246 100644 --- a/src/components/train/train-wagon/train-wagon.ts +++ b/src/components/train/train-wagon/train-wagon.ts @@ -90,7 +90,7 @@ export class SbbTrainWagonElement extends SbbNamedSlotListMixin): void { super.willUpdate(changedProperties); if ( diff --git a/src/components/train/train/train.ts b/src/components/train/train/train.ts index 16a70f46ea..fbd8297a19 100644 --- a/src/components/train/train/train.ts +++ b/src/components/train/train/train.ts @@ -2,7 +2,7 @@ import { type CSSResultGroup, LitElement, nothing, - type PropertyValueMap, + type PropertyValues, type TemplateResult, } from 'lit'; import { customElement, property } from 'lit/decorators.js'; @@ -86,8 +86,9 @@ export class SbbTrainElement extends SbbNamedSlotListMixin< return `${textParts.join(', ')}.`; } - protected override willUpdate(changedProperties: PropertyValueMap>): void { + protected override willUpdate(changedProperties: PropertyValues>): void { super.willUpdate(changedProperties); + if (changedProperties.has('listChildren')) { this._trainSlotChange.emit(); } diff --git a/tools/generate-component/boilerplate/component.ts b/tools/generate-component/boilerplate/component.ts index 175e646100..44e250dbe4 100644 --- a/tools/generate-component/boilerplate/component.ts +++ b/tools/generate-component/boilerplate/component.ts @@ -42,6 +42,8 @@ export class __nameUpperCase__ extends LitElement { } protected override willUpdate(changedProperties: PropertyValues): void { + super.willUpdate(changedProperties); + if (changedProperties.has('myProp')) { // do stuff }