diff --git a/package.json b/package.json index 7f42c1324f..72c271051b 100644 --- a/package.json +++ b/package.json @@ -114,7 +114,7 @@ "eslint": "9.17.0", "eslint-config-prettier": "9.1.0", "eslint-import-resolver-typescript": "3.7.0", - "eslint-plugin-import-x": "4.5.0", + "eslint-plugin-import-x": "4.5.1", "eslint-plugin-lit": "1.15.0", "eslint-plugin-react": "7.37.2", "eslint-plugin-storybook": "0.11.1", diff --git a/src/elements/button/accent-button/readme.md b/src/elements/button/accent-button/readme.md index a8c461d1e0..383c22948d 100644 --- a/src/elements/button/accent-button/readme.md +++ b/src/elements/button/accent-button/readme.md @@ -85,7 +85,7 @@ guard against such cases in your component. | --------------------- | ---------------------- | ------- | ------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `
` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | diff --git a/src/elements/button/button/readme.md b/src/elements/button/button/readme.md index cf47a54117..8082e96d0c 100644 --- a/src/elements/button/button/readme.md +++ b/src/elements/button/button/readme.md @@ -83,7 +83,7 @@ guard against such cases in your component. | --------------------- | ---------------------- | ------- | ------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | diff --git a/src/elements/button/mini-button/readme.md b/src/elements/button/mini-button/readme.md index 00fae1ba6d..f3fdacdd12 100644 --- a/src/elements/button/mini-button/readme.md +++ b/src/elements/button/mini-button/readme.md @@ -91,7 +91,7 @@ guard against such cases in your component. | --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | diff --git a/src/elements/button/secondary-button/readme.md b/src/elements/button/secondary-button/readme.md index f3ceceb53e..695fdeabd4 100644 --- a/src/elements/button/secondary-button/readme.md +++ b/src/elements/button/secondary-button/readme.md @@ -88,7 +88,7 @@ guard against such cases in your component. | --------------------- | ---------------------- | ------- | ------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | diff --git a/src/elements/button/transparent-button/readme.md b/src/elements/button/transparent-button/readme.md index 387053387d..afdece211e 100644 --- a/src/elements/button/transparent-button/readme.md +++ b/src/elements/button/transparent-button/readme.md @@ -88,7 +88,7 @@ guard against such cases in your component. | --------------------- | ---------------------- | ------- | ------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | diff --git a/src/elements/calendar/calendar.spec.ts b/src/elements/calendar/calendar.spec.ts index 642bf653e6..79793cb3c0 100644 --- a/src/elements/calendar/calendar.spec.ts +++ b/src/elements/calendar/calendar.spec.ts @@ -256,7 +256,7 @@ describe(`sbb-calendar`, () => { }); it('opens month view with current date', async () => { - element.selected = undefined; + element.selected = null; element.now = '2022-08-15'; element.view = 'month'; await waitForLitRender(element); diff --git a/src/elements/calendar/calendar.ts b/src/elements/calendar/calendar.ts index 5da8b91918..0937ef12ba 100644 --- a/src/elements/calendar/calendar.ts +++ b/src/elements/calendar/calendar.ts @@ -123,7 +123,7 @@ class SbbCalendarElement extends SbbHydrationMixin(LitElement) { /** The maximum valid date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */ @property() - public set max(value: SbbDateLike | undefined) { + public set max(value: SbbDateLike | null) { this._max = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); } public get max(): T | null { @@ -133,7 +133,7 @@ class SbbCalendarElement extends SbbHydrationMixin(LitElement) { /** A configured date which acts as the current date instead of the real current date. Recommended for testing purposes. */ @property() - public set now(value: SbbDateLike | undefined) { + public set now(value: SbbDateLike | null) { this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); } public get now(): T { @@ -143,7 +143,7 @@ class SbbCalendarElement extends SbbHydrationMixin(LitElement) { /** The selected date. Takes T Object, ISOString, and Unix Timestamp (number of seconds since Jan 1, 1970). */ @property() - public set selected(value: SbbDateLike | undefined) { + public set selected(value: SbbDateLike | null) { this._selectedDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value)); if ( !!this._selectedDate && diff --git a/src/elements/card/card-button/readme.md b/src/elements/card/card-button/readme.md index e47d30f448..38881bc719 100644 --- a/src/elements/card/card-button/readme.md +++ b/src/elements/card/card-button/readme.md @@ -22,13 +22,13 @@ as it is used for search engines and screen-reader users. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------- | --------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------- | -| `active` | `active` | public | `boolean` | `false` | Whether the card is active. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------- | --------- | ------- | ------------------------- | ---------- | ----------------------------------------------------------- | +| `active` | `active` | public | `boolean` | `false` | Whether the card is active. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Slots diff --git a/src/elements/core/base-elements/button-base-element.ts b/src/elements/core/base-elements/button-base-element.ts index 05fce0bbfa..96dfcf2c01 100644 --- a/src/elements/core/base-elements/button-base-element.ts +++ b/src/elements/core/base-elements/button-base-element.ts @@ -33,7 +33,7 @@ abstract class SbbButtonBaseElement extends SbbFormAssociatedMixin(SbbActionBase return (this.getAttribute('type') as SbbButtonType) ?? 'button'; } - /** The element to associate the button with. */ + /** The `` element to associate the button with. */ @property() public override set form(value: string) { this._formId = value; diff --git a/src/elements/datepicker/datepicker-next-day/readme.md b/src/elements/datepicker/datepicker-next-day/readme.md index 2d1d3d616b..71388cda72 100644 --- a/src/elements/datepicker/datepicker-next-day/readme.md +++ b/src/elements/datepicker/datepicker-next-day/readme.md @@ -35,11 +35,11 @@ both standalone or within the `sbb-form-field`, they must have the same parent e ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | ------------------------------------------- | ---------- | -------------------------------------------------------------- | -| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| null` | `null` | Datepicker reference. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------- | ------- | ------------------------------------------- | ---------- | ----------------------------------------------------------- | +| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| null` | `null` | Datepicker reference. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/datepicker/datepicker-previous-day/readme.md b/src/elements/datepicker/datepicker-previous-day/readme.md index b62f832abb..f1a02f3264 100644 --- a/src/elements/datepicker/datepicker-previous-day/readme.md +++ b/src/elements/datepicker/datepicker-previous-day/readme.md @@ -35,11 +35,11 @@ both standalone or within the `sbb-form-field`, they must have the same parent e ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | ------------------------------------------- | ---------- | -------------------------------------------------------------- | -| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| null` | `null` | Datepicker reference. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------- | ------- | ------------------------------------------- | ---------- | ----------------------------------------------------------- | +| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| null` | `null` | Datepicker reference. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts index 71197d28a1..92d6706f49 100644 --- a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -157,14 +157,14 @@ class SbbDatepickerToggleElement extends SbbNegativeMixin(SbbHydration return; } calendar.wide = datepicker.wide; - calendar.now = this._nowOrUndefined(); + calendar.now = this._nowOrNull(); calendar.dateFilter = datepicker.dateFilter; } private _datePickerChanged(event: Event): void { this._datePickerElement = event.target as SbbDatepickerElement; if (this._calendarElement) { - this._calendarElement.selected = this._datePickerElement.valueAsDate || undefined; + this._calendarElement.selected = this._datePickerElement.valueAsDate ?? null; } } @@ -179,7 +179,7 @@ class SbbDatepickerToggleElement extends SbbNegativeMixin(SbbHydration ) { return; } - this._calendarElement.selected = this._datePickerElement!.valueAsDate ?? undefined; + this._calendarElement.selected = this._datePickerElement!.valueAsDate ?? null; this._configureCalendar(this._calendarElement, this._datePickerElement!); this._calendarElement.resetPosition(); } @@ -190,8 +190,8 @@ class SbbDatepickerToggleElement extends SbbNegativeMixin(SbbHydration this._popoverElement.trigger = this._triggerElement; } - private _nowOrUndefined(): T | undefined { - return this._datePickerElement?.hasCustomNow() ? this._datePickerElement.now : undefined; + private _nowOrNull(): T | null { + return this._datePickerElement?.hasCustomNow() ? this._datePickerElement.now : null; } protected override render(): TemplateResult { @@ -220,7 +220,7 @@ class SbbDatepickerToggleElement extends SbbNegativeMixin(SbbHydration .view=${this.view} .min=${this._min} .max=${this._max} - .now=${this._nowOrUndefined()} + .now=${this._nowOrNull()} ?wide=${this._datePickerElement?.wide} .dateFilter=${this._datePickerElement?.dateFilter} @dateSelected=${(d: CustomEvent) => { diff --git a/src/elements/expansion-panel/expansion-panel-header/readme.md b/src/elements/expansion-panel/expansion-panel-header/readme.md index cdb6b62fb0..ab2bead53b 100644 --- a/src/elements/expansion-panel/expansion-panel-header/readme.md +++ b/src/elements/expansion-panel/expansion-panel-header/readme.md @@ -39,7 +39,7 @@ When the element is clicked, the `toggleExpanded` event is emitted. | --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | diff --git a/src/elements/form-field/form-field-clear/readme.md b/src/elements/form-field/form-field-clear/readme.md index 206c6bdf69..9e64e74ad6 100644 --- a/src/elements/form-field/form-field-clear/readme.md +++ b/src/elements/form-field/form-field-clear/readme.md @@ -15,10 +15,10 @@ to provide the possibility to display a clear button which can clear the input v ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ---------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------- | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ---------- | ------- | ------------------------- | ---------- | ----------------------------------------------------------- | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | diff --git a/src/elements/header/header-button/readme.md b/src/elements/header/header-button/readme.md index bc317b9729..05c4755ffc 100644 --- a/src/elements/header/header-button/readme.md +++ b/src/elements/header/header-button/readme.md @@ -51,7 +51,7 @@ accepting its associated properties (`type`, `name`, `value` and `form`). | Name | Attribute | Privacy | Type | Default | Description | | ------------ | ------------- | ------- | ------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `expandFrom` | `expand-from` | public | `SbbHorizontalFrom` | `'medium'` | Used to set the minimum breakpoint from which the text is displayed. E.g. if set to 'large', the text will be visible for breakpoints large, wide, ultra, and hidden for all the others. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | diff --git a/src/elements/link/block-link-button/readme.md b/src/elements/link/block-link-button/readme.md index 5c42841482..e8e7490841 100644 --- a/src/elements/link/block-link-button/readme.md +++ b/src/elements/link/block-link-button/readme.md @@ -65,7 +65,7 @@ guard against such cases in your component. | --------------------- | ---------------------- | ------- | ------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `iconPlacement` | `icon-placement` | public | `SbbIconPlacement` | `'start'` | Moves the icon to the end of the component if set to true. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | diff --git a/src/elements/link/link-button/readme.md b/src/elements/link/link-button/readme.md index 12570c0f36..1f82495e19 100644 --- a/src/elements/link/link-button/readme.md +++ b/src/elements/link/link-button/readme.md @@ -51,7 +51,7 @@ guard against such cases in your component. | --------------------- | ---------------------- | ------- | ------------------------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `size` | `size` | public | `SbbLinkSize` | `'s' / 'xs' (lean)` | Text size, the link should get in the non-button variation. With inline variant, the text size adapts to where it is used. | diff --git a/src/elements/menu/menu-button/readme.md b/src/elements/menu/menu-button/readme.md index 1470c64dca..1c15dea736 100644 --- a/src/elements/menu/menu-button/readme.md +++ b/src/elements/menu/menu-button/readme.md @@ -50,7 +50,7 @@ guard against such cases in your component. | `amount` | `amount` | public | `string` | `''` | Value shown as badge at component end. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | diff --git a/src/elements/navigation/common/navigation-action-common.ts b/src/elements/navigation/common/navigation-action-common.ts index e6bbd4dd7d..7f2347df56 100644 --- a/src/elements/navigation/common/navigation-action-common.ts +++ b/src/elements/navigation/common/navigation-action-common.ts @@ -21,7 +21,7 @@ export declare class SbbNavigationActionCommonElementMixinType { public accessor size: SbbNavigationActionSize; public get marker(): SbbNavigationMarkerElement | null; public get section(): SbbNavigationSectionElement | null; - public connectedSection: SbbNavigationSectionElement | null; + public connectedSection: SbbNavigationSectionElement | undefined; } // eslint-disable-next-line @typescript-eslint/naming-convention diff --git a/src/elements/navigation/navigation-button/readme.md b/src/elements/navigation/navigation-button/readme.md index 30f5549ca3..38ff7108c6 100644 --- a/src/elements/navigation/navigation-button/readme.md +++ b/src/elements/navigation/navigation-button/readme.md @@ -31,16 +31,16 @@ The component has three different sizes, which can be changed using the `size` p ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------------ | --------- | ------- | ------------------------------------------ | ------------------ | -------------------------------------------------------------- | -| `connectedSection` | - | public | `SbbNavigationSectionElement \| undefined` | | The section that is beign controlled by the action, if any. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | -| `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | -| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | -| `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | -| `size` | `size` | public | `SbbNavigationActionSize` | `'l' / 's' (lean)` | Action size variant, either s, m or l. | -| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | -| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------ | --------- | ------- | ------------------------------------------ | ------------------ | ----------------------------------------------------------- | +| `connectedSection` | - | public | `SbbNavigationSectionElement \| undefined` | | The section that is beign controlled by the action, if any. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | +| `marker` | - | public | `SbbNavigationMarkerElement \| null` | | The navigation marker in which the action is nested. | +| `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | +| `section` | - | public | `SbbNavigationSectionElement \| null` | | The section in which the action is nested. | +| `size` | `size` | public | `SbbNavigationActionSize` | `'l' / 's' (lean)` | Action size variant, either s, m or l. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `value` | `value` | public | `string \| null` | `null` | Value of the form element. | ## Slots diff --git a/src/elements/popover/popover-trigger/readme.md b/src/elements/popover/popover-trigger/readme.md index bcbd0fee0e..d4233fc1ff 100644 --- a/src/elements/popover/popover-trigger/readme.md +++ b/src/elements/popover/popover-trigger/readme.md @@ -88,7 +88,7 @@ guard against such cases in your component. | --------------------- | ---------------------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | diff --git a/src/elements/slider/slider.ts b/src/elements/slider/slider.ts index 5ec305d408..0bc5e39b60 100644 --- a/src/elements/slider/slider.ts +++ b/src/elements/slider/slider.ts @@ -56,8 +56,8 @@ class SbbSliderElement extends SbbDisabledMixin(SbbFormAssociatedMixin(LitElemen /** Numeric value for the inner HTMLInputElement. */ @property({ attribute: 'value-as-number', type: Number }) - public set valueAsNumber(value: number) { - this.value = value?.toString(); + public set valueAsNumber(value: number | null) { + this.value = value?.toString() ?? null; } public get valueAsNumber(): number | null { return Number(this.value); diff --git a/src/elements/stepper/step-label/readme.md b/src/elements/stepper/step-label/readme.md index 2aad06dd21..15e94247ec 100644 --- a/src/elements/stepper/step-label/readme.md +++ b/src/elements/stepper/step-label/readme.md @@ -39,7 +39,7 @@ The accessibility properties `aria-controls`, `aria-setsize`, `aria-posinset` ar | Name | Attribute | Privacy | Type | Default | Description | | ---------- | ----------- | ------- | ------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `step` | - | public | `SbbStepElement \| null` | `null` | The step controlled by the label. | diff --git a/src/elements/stepper/step/step.ts b/src/elements/stepper/step/step.ts index bd5413b0cd..022793d554 100644 --- a/src/elements/stepper/step/step.ts +++ b/src/elements/stepper/step/step.ts @@ -19,10 +19,10 @@ import style from './step.scss?lit&inline'; let nextId = 0; export type SbbStepValidateEventDetails = { - currentIndex?: number; - currentStep?: SbbStepElement; - nextIndex?: number; - nextStep?: SbbStepElement; + currentIndex: number | null; + currentStep: SbbStepElement | null; + nextIndex: number | null; + nextStep: SbbStepElement | null; }; /** diff --git a/src/elements/stepper/stepper/readme.md b/src/elements/stepper/stepper/readme.md index 79e723bd5f..46f52b261c 100644 --- a/src/elements/stepper/stepper/readme.md +++ b/src/elements/stepper/stepper/readme.md @@ -103,15 +103,15 @@ Use an `aria-label` attribute to describe the purpose of the stepper. The `sbb-s ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | -------------------------------- | ------------------ | --------------------------------------------------------------------------------- | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Overrides the behaviour of `orientation` property. | -| `linear` | `linear` | public | `boolean` | `false` | If set to true, only the current and previous labels can be clicked and selected. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. | -| `selected` | - | public | `SbbStepElement \| undefined` | | The currently selected step. | -| `selectedIndex` | `selected-index` | public | `number \| undefined` | | The currently selected step index. | -| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either s or m. | -| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | --------------------------- | ------------------ | --------------------------------------------------------------------------------- | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| null` | `null` | Overrides the behaviour of `orientation` property. | +| `linear` | `linear` | public | `boolean` | `false` | If set to true, only the current and previous labels can be clicked and selected. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Steps orientation, either horizontal or vertical. | +| `selected` | - | public | `SbbStepElement \| null` | | The currently selected step. | +| `selectedIndex` | `selected-index` | public | `number \| null` | | The currently selected step index. | +| `size` | `size` | public | `'s' \| 'm'` | `'m' / 's' (lean)` | Size variant, either s or m. | +| `steps` | - | public | `SbbStepElement[]` | | The steps of the stepper. | ## Methods diff --git a/src/elements/stepper/stepper/stepper.ts b/src/elements/stepper/stepper/stepper.ts index 1c67f89cf2..011474ad07 100644 --- a/src/elements/stepper/stepper/stepper.ts +++ b/src/elements/stepper/stepper/stepper.ts @@ -37,16 +37,16 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** Overrides the behaviour of `orientation` property. */ @property({ attribute: 'horizontal-from', reflect: true }) - public set horizontalFrom(value: SbbHorizontalFrom) { - this._horizontalFrom = breakpoints.includes(value) ? value : undefined; + public set horizontalFrom(value: SbbHorizontalFrom | null) { + this._horizontalFrom = value && breakpoints.includes(value) ? value : null; if (this._horizontalFrom && this._loaded) { this._checkOrientation(); } } - public get horizontalFrom(): SbbHorizontalFrom | undefined { + public get horizontalFrom(): SbbHorizontalFrom | null { return this._horizontalFrom; } - private _horizontalFrom?: SbbHorizontalFrom | undefined; + private _horizontalFrom: SbbHorizontalFrom | null = null; /** Steps orientation, either horizontal or vertical. */ @property({ reflect: true }) @@ -60,24 +60,24 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** The currently selected step. */ @property({ attribute: false }) - public set selected(step: SbbStepElement) { + public set selected(step: SbbStepElement | null) { if (this._loaded) { this._select(step); } } - public get selected(): SbbStepElement | undefined { - return this.querySelector?.('sbb-step[data-selected]') ?? undefined; + public get selected(): SbbStepElement | null { + return this.querySelector?.('sbb-step[data-selected]') ?? null; } /** The currently selected step index. */ @property({ attribute: 'selected-index', type: Number }) - public set selectedIndex(index: number) { - if (this._loaded) { + public set selectedIndex(index: number | null) { + if (this._loaded && index !== null) { this._select(this.steps[index]); } } - public get selectedIndex(): number | undefined { - return this.selected ? this.steps.indexOf(this.selected) : undefined; + public get selectedIndex(): number | null { + return this.selected ? this.steps.indexOf(this.selected) : null; } /** The steps of the stepper. */ @@ -95,14 +95,14 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { /** Selects the next step. */ public next(): void { - if (this.selectedIndex !== undefined) { + if (this.selectedIndex !== null) { this._select(this.steps[this.selectedIndex + 1]); } } /** Selects the previous step. */ public previous(): void { - if (this.selectedIndex !== undefined) { + if (this.selectedIndex !== null) { this._select(this.steps[this.selectedIndex - 1]); } } @@ -122,7 +122,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { } } - private _isValidStep(step: SbbStepElement): boolean { + private _isValidStep(step: SbbStepElement | null): boolean { if (!step || (!this.linear && step.label?.hasAttribute('disabled'))) { return false; } @@ -131,7 +131,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { return step === this.steps[0]; } - if (this.linear && this.selectedIndex !== undefined) { + if (this.linear && this.selectedIndex !== null) { const index = this.steps.indexOf(step); return index < this.selectedIndex || index === this.selectedIndex + 1; } @@ -139,22 +139,22 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { return true; } - private _select(step: SbbStepElement): void { + private _select(step: SbbStepElement | null): void { if (!this._isValidStep(step)) { return; } const validatePayload: SbbStepValidateEventDetails = { currentIndex: this.selectedIndex, currentStep: this.selected, - nextIndex: this.selectedIndex !== undefined ? this.selectedIndex + 1 : undefined, - nextStep: this.selectedIndex !== undefined ? this.steps[this.selectedIndex + 1] : undefined, + nextIndex: this.selectedIndex !== null ? this.selectedIndex + 1 : null, + nextStep: this.selectedIndex !== null ? this.steps[this.selectedIndex + 1] : null, }; if (this.selected && !this.selected.validate(validatePayload)) { return; } const current = this.selected; current?.deselect(); - step.select(); + step!.select(); this._setMarkerSize(); this._configureLinearMode(); // In case the focus is currently inside the stepper, we focus the selected step label. @@ -181,7 +181,7 @@ class SbbStepperElement extends SbbHydrationMixin(LitElement) { } private _calculateLabelOffsetTop(): number | undefined { - if (this.selectedIndex === undefined) { + if (this.selectedIndex === null) { return; } let offset = 0; diff --git a/src/elements/tag/tag-group/tag-group.ts b/src/elements/tag/tag-group/tag-group.ts index 5211bb0762..0cd4c3d202 100644 --- a/src/elements/tag/tag-group/tag-group.ts +++ b/src/elements/tag/tag-group/tag-group.ts @@ -58,7 +58,7 @@ class SbbTagGroupElement extends SbbNamedSlotListMixin t.checked).map((t) => t.value) : (this.tags.find((t) => t.checked)?.value ?? null); } - private _value: string | string[] | null = null; + private _value: string | (string | null)[] | null = null; /** The child instances of sbb-tag as an array. */ public get tags(): SbbTagElement[] { diff --git a/src/elements/tag/tag/readme.md b/src/elements/tag/tag/readme.md index 1a0377a2e6..c78b620961 100644 --- a/src/elements/tag/tag/readme.md +++ b/src/elements/tag/tag/readme.md @@ -84,7 +84,7 @@ This can be achieved by adding an `aria-label`, `aria-labelledby` or `aria-descr | `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | | `disabledInteractive` | `disabled-interactive` | public | `boolean` | `false` | Whether the button should be aria-disabled but stay interactive. | -| `form` | `form` | public | `HTMLFormElement \| null` | | Returns the form owner of the internals of the target element. | +| `form` | `form` | public | `HTMLFormElement \| null` | | The `` element to associate the button with. | | `iconName` | `icon-name` | public | `string` | `''` | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `name` | `name` | public | `string` | | Name of the form element. Will be read from name attribute. | | `size` | `size` | public | `SbbTagSize` | `'m' / 's' (lean)` | Tag size, either s or m. | diff --git a/src/elements/time-input/time-input.ts b/src/elements/time-input/time-input.ts index 9316ce0fcd..ba02e5787a 100644 --- a/src/elements/time-input/time-input.ts +++ b/src/elements/time-input/time-input.ts @@ -37,7 +37,7 @@ class SbbTimeInputElement extends LitElement { /** Reference of the native input connected to the datepicker. */ @property() - public set input(value: string | HTMLElement) { + public set input(value: string | HTMLElement | null) { this._input = value; this._findInputElement(); } diff --git a/tools/manifest/custom-elements-manifest.config.js b/tools/manifest/custom-elements-manifest.config.js index 398f5fddd2..d236d79a53 100644 --- a/tools/manifest/custom-elements-manifest.config.js +++ b/tools/manifest/custom-elements-manifest.config.js @@ -182,6 +182,29 @@ export function createManifestConfig(library = '') { publicMember.default = member.default; } } + + /** + * If an element extends a base class, and the base class implements a mixin and overrides some of its property, + * the overriding is not considered during the manifest generation because the inheritance chain + * is traversed from the outer to the inner element and not vice versa as expected. + * + * A practical example is the `form` property (get/set) in the button-base-element, which overrides the `form` getter in the form-associated-mixin; + * however, the changes are not reflected in the manifest, which mark the `form` member as `readonly`. + * This behavior is problematic when the Angular classes are generated, so a manual override must be done. + * The corresponding attribute field is not changed, so it can be used as a 'baseline'. + */ + const matchedAttribute = declaration.attributes?.find( + (e) => + e.name === member.name && + member.inheritedFrom && + e.inheritedFrom && + e.inheritedFrom?.name !== member.inheritedFrom?.name, + ); + if (matchedAttribute) { + delete member.readonly; + member.description = matchedAttribute.description; + member.inheritedFrom = matchedAttribute.inheritedFrom; + } } } } diff --git a/yarn.lock b/yarn.lock index ca04232da6..2ba8837163 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1661,6 +1661,11 @@ resolved "https://registry.yarnpkg.com/@types/deep-eql/-/deep-eql-4.0.2.tgz#334311971d3a07121e7eb91b684a605e7eea9cbd" integrity sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw== +"@types/doctrine@^0.0.9": + version "0.0.9" + resolved "https://registry.yarnpkg.com/@types/doctrine/-/doctrine-0.0.9.tgz#d86a5f452a15e3e3113b99e39616a9baa0f9863f" + integrity sha512-eOIHzCUSH7SMfonMG1LsC2f8vxBFtho6NGBznK41R84YzPuvSBzrhEps33IsQiOW9+VL6NQ9DbjQJznk/S4uRA== + "@types/estree@1.0.6", "@types/estree@^1.0.0", "@types/estree@^1.0.6": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.6.tgz#628effeeae2064a1b4e79f78e81d87b7e5fc7b50" @@ -4103,11 +4108,12 @@ eslint-import-resolver-typescript@3.7.0: is-glob "^4.0.3" stable-hash "^0.0.4" -eslint-plugin-import-x@4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-import-x/-/eslint-plugin-import-x-4.5.0.tgz#a2e65113513c4ee44bec13ed600389558b041cf0" - integrity sha512-l0OTfnPF8RwmSXfjT75N8d6ZYLVrVYWpaGlgvVkVqFERCI5SyBfDP7QEMr3kt0zWi2sOa9EQ47clbdFsHkF83Q== +eslint-plugin-import-x@4.5.1: + version "4.5.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-import-x/-/eslint-plugin-import-x-4.5.1.tgz#07ea3e6053ca027d8c4568c3073f53c77020d6bf" + integrity sha512-Wyut9jDeHdfZSebiWRmmOYDBov33M0ZZ3x9J/lD1v4M3nBgMNC02XH6Kq271pMxJWqctVRCjA+X5AQJZ2FezoQ== dependencies: + "@types/doctrine" "^0.0.9" "@typescript-eslint/scope-manager" "^8.1.0" "@typescript-eslint/utils" "^8.1.0" debug "^4.3.4"