diff --git a/src/components/button/button-link/button-link.ts b/src/components/button/button-link/button-link.ts
index 748cb0e7808..b809482707a 100644
--- a/src/components/button/button-link/button-link.ts
+++ b/src/components/button/button-link/button-link.ts
@@ -38,11 +38,7 @@ export class SbbButtonLinkElement extends SbbButtonCommonElementMixin(SbbLinkBas
/* eslint-disable lit/binding-positions */
return html`
<${unsafeStatic(TAG_NAME)} class="sbb-button" ${spread(attributes)}>
-
-
- ${this.iconName ? html`` : nothing}
-
-
+ ${this.renderIconSlot()}
${
diff --git a/src/components/button/button-link/readme.md b/src/components/button/button-link/readme.md
index 37f428671fd..355a85f1f0c 100644
--- a/src/components/button/button-link/readme.md
+++ b/src/components/button/button-link/readme.md
@@ -87,7 +87,7 @@ Use the accessibility properties in case of an icon-only button to describe the
| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. |
| `isStatic` | `is-static` | public | `boolean` | `false` | Set this property to true if you want only a visual representation of a button, but no interaction (a span instead of a link/button will be rendered). |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
-| `disabled` | `disabled` | public | `boolean \| undefined` | `false` | Whether the button is disabled. |
+| `disabled` | `disabled` | public | `boolean` | `false` | Whether the button is disabled. |
| `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. |
| `href` | `href` | public | `string \| undefined` | | The href value you want to link to. |
| `target` | `target` | public | `LinkTargetType \| string \| undefined` | | Where to display the linked URL. |
diff --git a/src/components/button/button/button.ts b/src/components/button/button/button.ts
index 6b5569e66ef..4edc4d2dee2 100644
--- a/src/components/button/button/button.ts
+++ b/src/components/button/button/button.ts
@@ -1,4 +1,4 @@
-import { nothing, type TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import { html } from 'lit/static-html.js';
@@ -24,12 +24,7 @@ export class SbbButtonElement extends SbbButtonCommonElementMixin(SbbButtonBaseE
return html`
-
-
- ${this.iconName ? html`` : nothing}
-
-
-
+ ${this.renderIconSlot()}
diff --git a/src/components/button/button/readme.md b/src/components/button/button/readme.md
index e7c8489e56d..cbe53a83526 100644
--- a/src/components/button/button/readme.md
+++ b/src/components/button/button/readme.md
@@ -80,7 +80,7 @@ Use the accessibility properties in case of an icon-only button to describe the
| `size` | `size` | public | `SbbButtonSize \| undefined` | `'l'` | Size variant, either l or m. |
| `isStatic` | `is-static` | public | `boolean` | `false` | Set this property to true if you want only a visual representation of a button, but no interaction (a span instead of a link/button will be rendered). |
| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. |
-| `disabled` | `disabled` | public | `boolean \| undefined` | `false` | Whether the button is disabled. |
+| `disabled` | `disabled` | public | `boolean` | `false` | Whether the button is disabled. |
| `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. |
diff --git a/src/components/button/common/button-common.ts b/src/components/button/common/button-common.ts
index 60e576a5ec4..7bba6f4b29a 100644
--- a/src/components/button/common/button-common.ts
+++ b/src/components/button/common/button-common.ts
@@ -1,11 +1,11 @@
-import type { CSSResultGroup, LitElement } from 'lit';
+import { type CSSResultGroup, html, type LitElement, type TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
-import type {
- AbstractConstructor,
- SbbDisabledMixinType,
- SbbIconNameMixinType,
- SbbNegativeMixinType,
+import {
+ type AbstractConstructor,
+ type SbbDisabledMixinType,
+ type SbbIconNameMixinType,
+ type SbbNegativeMixinType,
} from '../../core/common-behaviors';
import {
NamedSlotStateController,
@@ -33,6 +33,7 @@ export declare class SbbButtonCommonElementMixinType
public disabled: boolean;
public iconName: string;
public negative: boolean;
+ public renderIconSlot: () => TemplateResult;
}
// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -80,6 +81,10 @@ export const SbbButtonCommonElementMixin = ${super.renderIconSlot()} `;
+ }
}
return SbbButtonCommonElement as unknown as AbstractConstructor &
T;
diff --git a/src/components/core/common-behaviors/disabled-mixin.ts b/src/components/core/common-behaviors/disabled-mixin.ts
index b34e5f10fa8..d4954884e5d 100644
--- a/src/components/core/common-behaviors/disabled-mixin.ts
+++ b/src/components/core/common-behaviors/disabled-mixin.ts
@@ -11,9 +11,9 @@ export declare class SbbDisabledMixinType {
export const SbbDisabledMixin = >(
superClass: T,
): AbstractConstructor & T => {
- abstract class SbbDisabled extends superClass implements Partial {
+ abstract class SbbDisabled extends superClass implements SbbDisabledMixinType {
/** Whether the button is disabled. */
- @property({ reflect: true, type: Boolean }) public disabled?: boolean = false;
+ @property({ reflect: true, type: Boolean }) public disabled: boolean = false;
}
return SbbDisabled as AbstractConstructor & T;
diff --git a/src/components/core/common-behaviors/icon-name-mixin.ts b/src/components/core/common-behaviors/icon-name-mixin.ts
index 0b740a34d8d..2fff3fa9ed8 100644
--- a/src/components/core/common-behaviors/icon-name-mixin.ts
+++ b/src/components/core/common-behaviors/icon-name-mixin.ts
@@ -1,23 +1,35 @@
-import type { LitElement } from 'lit';
+import { html, type LitElement, nothing, type TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import type { AbstractConstructor } from './constructor';
export declare class SbbIconNameMixinType {
- public iconName: string;
+ public iconName?: string;
+ public renderIconSlot(): TemplateResult;
}
// eslint-disable-next-line @typescript-eslint/naming-convention
export const SbbIconNameMixin = >(
superClass: T,
): AbstractConstructor & T => {
- abstract class SbbIconName extends superClass implements Partial {
+ abstract class SbbIconName extends superClass implements SbbIconNameMixinType {
/**
* 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', reflect: true }) public iconName?: string;
+
+ /**
+ * @private
+ */
+ public renderIconSlot(): TemplateResult {
+ return html`
+
+ ${this.iconName ? html`` : nothing}
+
+ `;
+ }
}
return SbbIconName as AbstractConstructor & T;
diff --git a/src/components/core/common-behaviors/negative-mixin.ts b/src/components/core/common-behaviors/negative-mixin.ts
index b32d720781f..95a129de45c 100644
--- a/src/components/core/common-behaviors/negative-mixin.ts
+++ b/src/components/core/common-behaviors/negative-mixin.ts
@@ -11,9 +11,9 @@ export declare class SbbNegativeMixinType {
export const SbbNegativeMixin = >(
superClass: T,
): AbstractConstructor & T => {
- abstract class SbbNegative extends superClass implements Partial {
+ abstract class SbbNegative extends superClass implements SbbNegativeMixinType {
/** Negative coloring variant flag. */
- @property({ reflect: true, type: Boolean }) public negative = false;
+ @property({ reflect: true, type: Boolean }) public negative: boolean = false;
}
return SbbNegative as AbstractConstructor & T;
diff --git a/src/components/header/common/header-action-common.ts b/src/components/header/common/header-action-common.ts
index 31ccfeb2c40..a58fffde636 100644
--- a/src/components/header/common/header-action-common.ts
+++ b/src/components/header/common/header-action-common.ts
@@ -1,3 +1,4 @@
+import { html, type TemplateResult } from 'lit';
import { property } from 'lit/decorators.js';
import type { CSSResultGroup, LitElement } from 'lit/development';
@@ -13,6 +14,7 @@ import style from './header-action.scss?lit&inline';
export declare class SbbHeaderActionCommonElementMixinType implements SbbIconNameMixinType {
public expandFrom: SbbHorizontalFrom;
public iconName: string;
+ public renderIconSlot(): TemplateResult;
}
// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -44,6 +46,10 @@ export const SbbHeaderActionCommonElementMixin = `;
}
}
return SbbHeaderActionCommonElement as unknown as AbstractConstructor &
diff --git a/src/components/header/header-button/header-button.ts b/src/components/header/header-button/header-button.ts
index 73abcabb309..72d7bc9540b 100644
--- a/src/components/header/header-button/header-button.ts
+++ b/src/components/header/header-button/header-button.ts
@@ -1,4 +1,4 @@
-import { nothing, type TemplateResult } from 'lit';
+import type { TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import { html } from 'lit/static-html.js';
@@ -23,11 +23,7 @@ export class SbbHeaderButtonElement extends SbbHeaderActionCommonElementMixin(
return html`