From dc807ac3e2475874c20d66b8834b91390f5271a8 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Fri, 16 Feb 2024 10:04:03 +0100 Subject: [PATCH] refactor: changed NamedSlotListElement to a mixin, minor fixes --- .../breadcrumb-group/breadcrumb-group.ts | 17 +- .../named-slot-list-element.ts | 211 ++++++++++-------- src/components/link-list/link-list.ts | 22 +- src/components/link-list/readme.md | 16 +- src/components/menu/menu/menu.ts | 12 +- .../navigation-list/navigation-list.ts | 18 +- .../navigation-marker/navigation-marker.ts | 11 +- .../popover-trigger/popover-trigger.ts | 14 +- .../popover/popover-trigger/readme.md | 18 +- src/components/skiplink-list/skiplink-list.ts | 17 +- src/components/status/readme.md | 12 +- src/components/status/status.ts | 9 - src/components/tag/tag-group/tag-group.ts | 17 +- .../train/train-formation/train-formation.ts | 18 +- .../train/train-wagon/train-wagon.ts | 10 +- src/components/train/train/train.ts | 20 +- 16 files changed, 250 insertions(+), 192 deletions(-) diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts index d91401beeaa..6769c71076b 100644 --- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts +++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts @@ -1,10 +1,16 @@ -import type { CSSResultGroup, PropertyValueMap, PropertyValues, TemplateResult } from 'lit'; +import { + type CSSResultGroup, + LitElement, + type PropertyValueMap, + type PropertyValues, + type TemplateResult, +} from 'lit'; import { html, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; import { getNextElementIndex, isArrowKeyPressed, sbbInputModalityDetector } from '../../core/a11y'; -import type { WithListChildren } from '../../core/common-behaviors'; -import { LanguageController, NamedSlotListElement } from '../../core/common-behaviors'; +import { SbbNamedSlotListElementMixin, type WithListChildren } from '../../core/common-behaviors'; +import { LanguageController } from '../../core/common-behaviors'; import { setAttribute } from '../../core/dom'; import { ConnectedAbortController } from '../../core/eventing'; import { i18nBreadcrumbEllipsisButtonLabel } from '../../core/i18n'; @@ -21,7 +27,10 @@ import '../../icon'; * @slot - Use the unnamed slot to add `sbb-breadcrumb` elements. */ @customElement('sbb-breadcrumb-group') -export class SbbBreadcrumbGroupElement extends NamedSlotListElement { +export class SbbBreadcrumbGroupElement extends SbbNamedSlotListElementMixin< + SbbBreadcrumbElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; protected override readonly listChildTagNames = ['SBB-BREADCRUMB']; diff --git a/src/components/core/common-behaviors/named-slot-list-element.ts b/src/components/core/common-behaviors/named-slot-list-element.ts index fdcafc9645a..7a18cdc19d9 100644 --- a/src/components/core/common-behaviors/named-slot-list-element.ts +++ b/src/components/core/common-behaviors/named-slot-list-element.ts @@ -1,7 +1,7 @@ -import type { TemplateResult } from 'lit'; -import { LitElement, html, nothing } from 'lit'; +import { type LitElement, html, nothing, type TemplateResult } from 'lit'; import { state } from 'lit/decorators.js'; +import type { AbstractConstructor } from './constructor'; import { SlotChildObserver } from './slot-child-observer'; import '../../screenreader-only'; @@ -20,109 +20,136 @@ const SLOTNAME_PREFIX = 'li'; * } */ export type WithListChildren< - T extends NamedSlotListElement, + T extends NamedSlotListElementMixinType, C extends HTMLElement = HTMLElement, > = T & { listChildren: C[] }; -/** - * This base class provides named slot list observer functionality. - * This allows using the pattern of rendering a named slot for each child, which allows - * wrapping children in a ul/li list. - */ -export abstract class NamedSlotListElement< - C extends HTMLElement = HTMLElement, -> extends SlotChildObserver(LitElement) { - /** A list of upper-cased tag names to match against. (e.g. SBB-LINK) */ +export declare abstract class NamedSlotListElementMixinType { protected abstract readonly listChildTagNames: string[]; + @state() protected listChildren: C[]; + protected checkChildren(): void; + protected renderList(attributes?: { + class?: string; + ariaLabel?: string; + ariaLabelledby?: string; + }): TemplateResult; + protected listSlotNames(): string[]; + protected renderHiddenSlot(): TemplateResult; +} +// eslint-disable-next-line @typescript-eslint/naming-convention +export const SbbNamedSlotListElementMixin = < + C extends HTMLElement, + T extends AbstractConstructor, +>( + superClass: T, +): AbstractConstructor> & T => { /** - * A list of children with the defined tag names. - * This array is only updated, if there is an actual change - * to the child elements. + * This base class provides named slot list observer functionality. + * This allows using the pattern of rendering a named slot for each child, which allows + * wrapping children in a ul/li list. */ - @state() protected listChildren: C[] = []; + abstract class NamedSlotListElement + extends SlotChildObserver(superClass) + implements Partial> + { + /** A list of upper-cased tag names to match against. (e.g. SBB-LINK) */ + protected abstract readonly listChildTagNames: string[]; - protected override checkChildren(): void { - const listChildren = Array.from(this.children ?? []).filter((e): e is C => - this.listChildTagNames.includes(e.tagName), - ); - // If the slotted child instances have not changed, we can skip syncing and updating - // the link reference list. - if ( - listChildren.length === this.listChildren.length && - this.listChildren.every((e, i) => listChildren[i] === e) - ) { - return; - } + /** + * A list of children with the defined tag names. + * This array is only updated, if there is an actual change + * to the child elements. + */ + @state() protected listChildren: C[] = []; - this.listChildren - .filter((c) => !listChildren.includes(c)) - .forEach((c) => c.removeAttribute('slot')); - this.listChildren = listChildren; - this.listChildren.forEach((c, index) => c.setAttribute('slot', `${SLOTNAME_PREFIX}-${index}`)); + protected override checkChildren(): void { + const listChildren = Array.from(this.children ?? []).filter((e): e is C => + this.listChildTagNames.includes(e.tagName), + ); + // If the slotted child instances have not changed, we can skip syncing and updating + // the link reference list. + if ( + listChildren.length === this.listChildren.length && + this.listChildren.every((e, i) => listChildren[i] === e) + ) { + return; + } - // Remove the ssr attribute, once we have actually initialized the children elements. - this.removeAttribute(SSR_CHILD_COUNT_ATTRIBUTE); - } + this.listChildren + .filter((c) => !listChildren.includes(c)) + .forEach((c) => c.removeAttribute('slot')); + this.listChildren = listChildren; + this.listChildren.forEach((c, index) => + c.setAttribute('slot', `${SLOTNAME_PREFIX}-${index}`), + ); - /** - * Renders list and list slots for slotted children or an amount of list slots - * corresponding to the `data-ssr-child-count` attribute value. - * - * This is a possible optimization for SSR, as in an SSR Lit environment - * other elements are not available, but might be available in the meta - * framework wrapper (like e.g. React). This allows to provide the amount of - * children to be passed via the `data-ssr-child-count` attribute value. - */ - protected renderList( - attributes: { class?: string; ariaLabel?: string; ariaLabelledby?: string } = {}, - ): TemplateResult { - const listSlotNames = this.listSlotNames(); + // Remove the ssr attribute, once we have actually initialized the children elements. + this.removeAttribute(SSR_CHILD_COUNT_ATTRIBUTE); + } + + /** + * Renders list and list slots for slotted children or an amount of list slots + * corresponding to the `data-ssr-child-count` attribute value. + * + * This is a possible optimization for SSR, as in an SSR Lit environment + * other elements are not available, but might be available in the meta + * framework wrapper (like e.g. React). This allows to provide the amount of + * children to be passed via the `data-ssr-child-count` attribute value. + */ + protected renderList( + attributes: { class?: string; ariaLabel?: string; ariaLabelledby?: string } = {}, + ): TemplateResult { + const listSlotNames = this.listSlotNames(); - if (listSlotNames.length >= 2) { - return html` -
    - ${listSlotNames.map((name) => html`
    • `)} -
- ${this.renderHiddenSlot()} - `; - } else if (listSlotNames.length === 1) { - return html`${attributes.ariaLabel} - - - - ${this.renderHiddenSlot()} `; - } else { - return this.renderHiddenSlot(); + if (listSlotNames.length >= 2) { + return html` +
    + ${listSlotNames.map((name) => html`
    • `)} +
+ ${this.renderHiddenSlot()} + `; + } else if (listSlotNames.length === 1) { + return html`${attributes.ariaLabel} + + + + ${this.renderHiddenSlot()} `; + } else { + return this.renderHiddenSlot(); + } } - } - /** - * Returns an array of list slot names with the length corresponding to the amount of matched - * children or the `data-ssr-child-count` attribute value. - * - * This is a possible optimization for SSR, as in an SSR Lit environment - * other elements are not available, but might be available in the meta - * framework wrapper (like e.g. React). This allows to provide the amount of - * children to be passed via the `data-ssr-child-count` attribute value. - */ - protected listSlotNames(): string[] { - const listChildren = this.listChildren.length - ? this.listChildren - : Array.from({ length: +(this.getAttribute(SSR_CHILD_COUNT_ATTRIBUTE) ?? 0) }); - return listChildren.map((_, i) => `${SLOTNAME_PREFIX}-${i}`); - } + /** + * Returns an array of list slot names with the length corresponding to the amount of matched + * children or the `data-ssr-child-count` attribute value. + * + * This is a possible optimization for SSR, as in an SSR Lit environment + * other elements are not available, but might be available in the meta + * framework wrapper (like e.g. React). This allows to provide the amount of + * children to be passed via the `data-ssr-child-count` attribute value. + */ + protected listSlotNames(): string[] { + const listChildren = this.listChildren.length + ? this.listChildren + : Array.from({ length: +(this.getAttribute(SSR_CHILD_COUNT_ATTRIBUTE) ?? 0) }); + return listChildren.map((_, i) => `${SLOTNAME_PREFIX}-${i}`); + } - /** - * Returns a hidden slot, which is intended as the children change detection. - * When an element without a slot attribute is slotted to the element, it triggers - * the slotchange event, which can be used to assign it to the appropriate named slot. - */ - protected renderHiddenSlot(): TemplateResult { - return html``; + /** + * Returns a hidden slot, which is intended as the children change detection. + * When an element without a slot attribute is slotted to the element, it triggers + * the slotchange event, which can be used to assign it to the appropriate named slot. + */ + protected renderHiddenSlot(): TemplateResult { + return html``; + } } -} + + return NamedSlotListElement as unknown as AbstractConstructor> & + T; +}; diff --git a/src/components/link-list/link-list.ts b/src/components/link-list/link-list.ts index eb37a6871b6..6506ac362bb 100644 --- a/src/components/link-list/link-list.ts +++ b/src/components/link-list/link-list.ts @@ -1,9 +1,13 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit'; -import { html, nothing } from 'lit'; +import { html, nothing, LitElement } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { WithListChildren } from '../core/common-behaviors'; -import { NamedSlotListElement, NamedSlotStateController } from '../core/common-behaviors'; +import { + SbbNamedSlotListElementMixin, + SbbNegativeMixin, + NamedSlotStateController, + type WithListChildren, +} from '../core/common-behaviors'; import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces'; import type { SbbLinkElement, SbbLinkSize } from '../link'; import type { TitleLevel } from '../title'; @@ -19,9 +23,11 @@ import '../title'; * @slot title - Use this slot to provide a title. */ @customElement('sbb-link-list') -export class SbbLinkListElement extends NamedSlotListElement { +export class SbbLinkListElement extends SbbNegativeMixin( + SbbNamedSlotListElementMixin(LitElement), +) { public static override styles: CSSResultGroup = style; - protected override readonly listChildTagNames = ['SBB-LINK']; + protected override readonly listChildTagNames = ['SBB-LINK', 'SBB-LINK-BUTTON']; /** The title text we want to show before the list. */ @property({ attribute: 'title-content', reflect: true }) public titleContent?: string; @@ -35,12 +41,6 @@ export class SbbLinkListElement extends NamedSlotListElement { */ @property({ reflect: true }) public size: SbbLinkSize = 's'; - /** - * Whether to render the link list and nested sbb-link instances as negative. This will overwrite - * the negative attribute of nested sbb-link instances. - */ - @property({ reflect: true, type: Boolean }) public negative: boolean = false; - /** Selected breakpoint from which the list is rendered horizontally. */ @property({ attribute: 'horizontal-from', reflect: true }) public horizontalFrom?: SbbHorizontalFrom; diff --git a/src/components/link-list/readme.md b/src/components/link-list/readme.md index bf85a8d5e5b..99cda382e7d 100644 --- a/src/components/link-list/readme.md +++ b/src/components/link-list/readme.md @@ -64,14 +64,14 @@ The title will not be displayed in the horizontal orientation. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | -------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | -| `titleContent` | `title-content` | public | `string \| undefined` | | The title text we want to show before the list. | -| `titleLevel` | `title-level` | public | `TitleLevel \| undefined` | `'2'` | The semantic level of the title, e.g. 2 = h2. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances. | -| `negative` | `negative` | public | `boolean` | `false` | Whether to render the link list and nested sbb-link instances as negative. This will overwrite the negative attribute of nested sbb-link instances. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Selected breakpoint from which the list is rendered horizontally. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | -------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- | +| `titleContent` | `title-content` | public | `string \| undefined` | | The title text we want to show before the list. | +| `titleLevel` | `title-level` | public | `TitleLevel \| undefined` | `'2'` | The semantic level of the title, e.g. 2 = h2. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Selected breakpoint from which the list is rendered horizontally. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Slots diff --git a/src/components/menu/menu/menu.ts b/src/components/menu/menu/menu.ts index 4d58d76f1a7..12576cc6592 100644 --- a/src/components/menu/menu/menu.ts +++ b/src/components/menu/menu/menu.ts @@ -1,5 +1,4 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html } from 'lit'; +import { type CSSResultGroup, html, LitElement, type TemplateResult } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { ref } from 'lit/directives/ref.js'; @@ -11,7 +10,7 @@ import { isArrowKeyPressed, setModalityOnNextFocus, } from '../../core/a11y'; -import { NamedSlotListElement } from '../../core/common-behaviors'; +import { SbbNamedSlotListElementMixin } from '../../core/common-behaviors'; import { findReferencedElement, isBreakpoint, @@ -55,9 +54,10 @@ let nextId = 0; * @event {CustomEvent} didClose - Emits whenever the `sbb-menu` is closed. */ @customElement('sbb-menu') -export class SbbMenuElement extends NamedSlotListElement< - SbbMenuButtonElement | SbbMenuLinkElement -> { +export class SbbMenuElement extends SbbNamedSlotListElementMixin< + SbbMenuButtonElement | SbbMenuLinkElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { willOpen: 'willOpen', diff --git a/src/components/navigation/navigation-list/navigation-list.ts b/src/components/navigation/navigation-list/navigation-list.ts index d2235a292df..73e216441f1 100644 --- a/src/components/navigation/navigation-list/navigation-list.ts +++ b/src/components/navigation/navigation-list/navigation-list.ts @@ -1,10 +1,15 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; -import { html } from 'lit'; +import { + type CSSResultGroup, + html, + LitElement, + type PropertyValues, + type TemplateResult, +} from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { - NamedSlotListElement, NamedSlotStateController, + SbbNamedSlotListElementMixin, type WithListChildren, } from '../../core/common-behaviors'; import type { SbbNavigationButtonElement, SbbNavigationLinkElement } from '../index'; @@ -18,9 +23,10 @@ import style from './navigation-list.scss?lit&inline'; * @slot label - Use this to provide a label element. */ @customElement('sbb-navigation-list') -export class SbbNavigationListElement extends NamedSlotListElement< - SbbNavigationButtonElement | SbbNavigationLinkElement -> { +export class SbbNavigationListElement extends SbbNamedSlotListElementMixin< + SbbNavigationButtonElement | SbbNavigationLinkElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; protected override readonly listChildTagNames = ['SBB-NAVIGATION-BUTTON', 'SBB-NAVIGATION-LINK']; diff --git a/src/components/navigation/navigation-marker/navigation-marker.ts b/src/components/navigation/navigation-marker/navigation-marker.ts index bc2ac4eb5a2..ecdad1f967f 100644 --- a/src/components/navigation/navigation-marker/navigation-marker.ts +++ b/src/components/navigation/navigation-marker/navigation-marker.ts @@ -1,7 +1,7 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; +import { type CSSResultGroup, LitElement, type PropertyValues, type TemplateResult } from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; -import { NamedSlotListElement, type WithListChildren } from '../../core/common-behaviors'; +import { SbbNamedSlotListElementMixin, type WithListChildren } from '../../core/common-behaviors'; import { AgnosticResizeObserver } from '../../core/observers'; import type { SbbNavigationButtonElement, SbbNavigationLinkElement } from '../index'; @@ -13,9 +13,10 @@ import style from './navigation-marker.scss?lit&inline'; * @slot - Use the unnamed slot to add `sbb-navigation-button`/`sbb-navigation-link` elements into the `sbb-navigation-marker`. */ @customElement('sbb-navigation-marker') -export class SbbNavigationMarkerElement extends NamedSlotListElement< - SbbNavigationButtonElement | SbbNavigationLinkElement -> { +export class SbbNavigationMarkerElement extends SbbNamedSlotListElementMixin< + SbbNavigationButtonElement | SbbNavigationLinkElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; protected override readonly listChildTagNames = ['SBB-NAVIGATION-BUTTON', 'SBB-NAVIGATION-LINK']; diff --git a/src/components/popover/popover-trigger/popover-trigger.ts b/src/components/popover/popover-trigger/popover-trigger.ts index 280ea557f3b..e4b03dfcc0c 100644 --- a/src/components/popover/popover-trigger/popover-trigger.ts +++ b/src/components/popover/popover-trigger/popover-trigger.ts @@ -1,6 +1,5 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; +import { type CSSResultGroup, html, type TemplateResult } from 'lit'; +import { customElement } from 'lit/decorators.js'; import { SbbButtonBaseElement, @@ -24,13 +23,6 @@ export class SbbPopoverTriggerElement extends SbbDisabledTabIndexActionMixin( ) { public static override styles: CSSResultGroup = style; - /** - * 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. - */ - @property({ attribute: 'icon-name' }) public override iconName = 'circle-information-small'; - public override connectedCallback(): void { super.connectedCallback(); const formField = hostContext('sbb-form-field', this) ?? hostContext('[data-form-field]', this); @@ -44,7 +36,7 @@ export class SbbPopoverTriggerElement extends SbbDisabledTabIndexActionMixin( protected override renderIconSlot(): TemplateResult { return html` - + `; } diff --git a/src/components/popover/popover-trigger/readme.md b/src/components/popover/popover-trigger/readme.md index 7205ff4dcc6..8bad8b3bc5c 100644 --- a/src/components/popover/popover-trigger/readme.md +++ b/src/components/popover/popover-trigger/readme.md @@ -73,15 +73,15 @@ associate the popover trigger with the popover via `aria-describedby` and an `id ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | ------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `iconName` | `icon-name` | public | `string \| undefined` | `'circle-information-small'` | 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. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `type` | `type` | public | `ButtonType \| undefined` | | The type attribute to use for the button. | -| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | -| `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | -| `form` | `form` | public | `string \| undefined` | | The
element to associate the button with. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `iconName` | `icon-name` | public | `string \| undefined` | | 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. | +| `type` | `type` | public | `ButtonType \| undefined` | | The type attribute to use for the button. | +| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | +| `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/skiplink-list/skiplink-list.ts b/src/components/skiplink-list/skiplink-list.ts index 9cd8f309280..d5152348c00 100644 --- a/src/components/skiplink-list/skiplink-list.ts +++ b/src/components/skiplink-list/skiplink-list.ts @@ -1,10 +1,16 @@ -import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit'; -import { html, nothing } from 'lit'; +import { + type CSSResultGroup, + html, + LitElement, + nothing, + type PropertyValues, + type TemplateResult, +} from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { - NamedSlotListElement, NamedSlotStateController, + SbbNamedSlotListElementMixin, type WithListChildren, } from '../core/common-behaviors'; import type { SbbLinkElement } from '../link'; @@ -20,7 +26,10 @@ import '../title'; * @slot - Use the unnamed slot to add `sbb-link` elements to the `sbb-skiplink-list`. */ @customElement('sbb-skiplink-list') -export class SbbSkiplinkListElement extends NamedSlotListElement { +export class SbbSkiplinkListElement extends SbbNamedSlotListElementMixin< + SbbLinkElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; protected override readonly listChildTagNames = ['SBB-LINK']; diff --git a/src/components/status/readme.md b/src/components/status/readme.md index c1cab1117ae..e6705eccd89 100644 --- a/src/components/status/readme.md +++ b/src/components/status/readme.md @@ -49,12 +49,12 @@ If needed, the `role="status"` attribute can be added on the component's tag. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------- | --------------- | ------- | --------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `type` | `type` | public | `SbbStatusType` | `'info'` | The type of the status. | -| `iconName` | `icon-name` | public | `string \| undefined` | | If iconName is set, it overrides default ones which are bound to status. 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. | -| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | -| `titleLevel` | `title-level` | public | `TitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------- | --------------- | ------- | --------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `type` | `type` | public | `SbbStatusType` | `'info'` | The type of the status. | +| `titleContent` | `title-content` | public | `string \| undefined` | | Content of title. | +| `titleLevel` | `title-level` | public | `TitleLevel` | `'3'` | Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| `iconName` | `icon-name` | public | `string \| undefined` | | 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. | ## Slots diff --git a/src/components/status/status.ts b/src/components/status/status.ts index e9f3de9b455..7c94cc075e9 100644 --- a/src/components/status/status.ts +++ b/src/components/status/status.ts @@ -32,15 +32,6 @@ export class SbbStatusElement extends SbbIconNameMixin(LitElement) { /** The type of the status. */ @property({ reflect: true }) public type: SbbStatusType = 'info'; - /** - * If iconName is set, it overrides default ones which are bound to status. - * - * 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. - */ - @property({ attribute: 'icon-name' }) public override iconName?: string; - /** Content of title. */ @property({ reflect: true, attribute: 'title-content' }) public titleContent?: string; diff --git a/src/components/tag/tag-group/tag-group.ts b/src/components/tag/tag-group/tag-group.ts index f30db2085bb..8cc104add22 100644 --- a/src/components/tag/tag-group/tag-group.ts +++ b/src/components/tag/tag-group/tag-group.ts @@ -1,9 +1,13 @@ -import type { CSSResultGroup, TemplateResult, PropertyValueMap } from 'lit'; -import { html } from 'lit'; +import { + type CSSResultGroup, + html, + LitElement, + type PropertyValueMap, + type TemplateResult, +} from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import type { WithListChildren } from '../../core/common-behaviors'; -import { NamedSlotListElement } from '../../core/common-behaviors'; +import { SbbNamedSlotListElementMixin, type WithListChildren } from '../../core/common-behaviors'; import { setAttribute } from '../../core/dom'; import { ConnectedAbortController } from '../../core/eventing'; import type { SbbStateChange } from '../../core/interfaces'; @@ -17,7 +21,10 @@ import style from './tag-group.scss?lit&inline'; * @slot - Use the unnamed slot to add one or more 'sbb-tag' elements to the `sbb-tag-group`. */ @customElement('sbb-tag-group') -export class SbbTagGroupElement extends NamedSlotListElement { +export class SbbTagGroupElement extends SbbNamedSlotListElementMixin< + SbbTagElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; // DIV is added here due to special requirements from sbb.ch. protected override readonly listChildTagNames = ['SBB-TAG', 'DIV']; diff --git a/src/components/train/train-formation/train-formation.ts b/src/components/train/train-formation/train-formation.ts index 8e238c6142f..02e01673f6d 100644 --- a/src/components/train/train-formation/train-formation.ts +++ b/src/components/train/train-formation/train-formation.ts @@ -1,10 +1,15 @@ -import type { CSSResultGroup, PropertyValueMap, TemplateResult } from 'lit'; -import { html } from 'lit'; +import { + type CSSResultGroup, + html, + LitElement, + type PropertyValueMap, + type TemplateResult, +} from 'lit'; import { customElement, property, state } from 'lit/decorators.js'; import { ref } from 'lit/directives/ref.js'; -import type { WithListChildren } from '../../core/common-behaviors'; -import { LanguageController, NamedSlotListElement } from '../../core/common-behaviors'; +import { SbbNamedSlotListElementMixin, type WithListChildren } from '../../core/common-behaviors'; +import { LanguageController } from '../../core/common-behaviors'; import { ConnectedAbortController } from '../../core/eventing'; import { i18nSector, i18nSectorShort, i18nTrains } from '../../core/i18n'; import { AgnosticResizeObserver } from '../../core/observers'; @@ -26,7 +31,10 @@ interface AggregatedSector { * @slot - Use the unnamed slot to add 'sbb-train' elements to the `sbb-train-formation`. */ @customElement('sbb-train-formation') -export class SbbTrainFormationElement extends NamedSlotListElement { +export class SbbTrainFormationElement extends SbbNamedSlotListElementMixin< + SbbTrainElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; protected override readonly listChildTagNames = ['SBB-TRAIN']; diff --git a/src/components/train/train-wagon/train-wagon.ts b/src/components/train/train-wagon/train-wagon.ts index a96fc99a302..5eb4432306d 100644 --- a/src/components/train/train-wagon/train-wagon.ts +++ b/src/components/train/train-wagon/train-wagon.ts @@ -1,9 +1,8 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { nothing } from 'lit'; +import { type CSSResultGroup, LitElement, nothing, type TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { html, unsafeStatic } from 'lit/static-html.js'; -import { LanguageController, NamedSlotListElement } from '../../core/common-behaviors'; +import { LanguageController, SbbNamedSlotListElementMixin } from '../../core/common-behaviors'; import { setAttribute } from '../../core/dom'; import { EventEmitter } from '../../core/eventing'; import { @@ -28,7 +27,10 @@ import style from './train-wagon.scss?lit&inline'; * @slot - Use the unnamed slot to add one or more `sbb-icon` for meta-information of the `sbb-train-wagon`. */ @customElement('sbb-train-wagon') -export class SbbTrainWagonElement extends NamedSlotListElement { +export class SbbTrainWagonElement extends SbbNamedSlotListElementMixin< + SbbIconElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { sectorChange: 'sectorChange', diff --git a/src/components/train/train/train.ts b/src/components/train/train/train.ts index f4523f24c38..1d5acfeff61 100644 --- a/src/components/train/train/train.ts +++ b/src/components/train/train/train.ts @@ -1,10 +1,15 @@ -import type { CSSResultGroup, PropertyValueMap, TemplateResult } from 'lit'; -import { nothing } from 'lit'; +import { + type CSSResultGroup, + nothing, + LitElement, + type PropertyValueMap, + type TemplateResult, +} from 'lit'; import { customElement, property } from 'lit/decorators.js'; import { html, unsafeStatic } from 'lit/static-html.js'; -import type { WithListChildren } from '../../core/common-behaviors'; -import { LanguageController, NamedSlotListElement } from '../../core/common-behaviors'; +import { SbbNamedSlotListElementMixin, type WithListChildren } from '../../core/common-behaviors'; +import { LanguageController } from '../../core/common-behaviors'; import { EventEmitter } from '../../core/eventing'; import { i18nTrain, i18nWagonsLabel } from '../../core/i18n'; import type { TitleLevel } from '../../title'; @@ -21,9 +26,10 @@ import '../../icon'; * @slot - Use the unnamed slot to add 'sbb-train-wagon' elements to the `sbb-train`. */ @customElement('sbb-train') -export class SbbTrainElement extends NamedSlotListElement< - SbbTrainWagonElement | SbbTrainBlockedPassageElement -> { +export class SbbTrainElement extends SbbNamedSlotListElementMixin< + SbbTrainWagonElement | SbbTrainBlockedPassageElement, + typeof LitElement +>(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { trainSlotChange: 'trainSlotChange',