diff --git a/ci/lit-migration.mts b/ci/lit-migration.mts index 6ebfccf13d..f270608cfa 100644 --- a/ci/lit-migration.mts +++ b/ci/lit-migration.mts @@ -1064,7 +1064,7 @@ declare global { if (ts.isVariableStatement(node) && node.getText().match(/(element: E2EElement|page: E2EPage)/)) { mutator.insertAt(node, '/** NOTE: These are too hard to migrate and are prone to errors :/ \n' + ' * consider that the E2EPage is now the \'document\' (you should just delete it) \n' - + ' * and that the E2EElement equivalent is directly the SbbComponent (e.g. SbbTimeInput) */ \n'); + + ' * and that the E2EElement equivalent is directly the SbbComponent (e.g. SbbTimeInputElement) */ \n'); } if (ts.isCallExpression(node) && (node.expression.getText() === 'it' || node.expression.getText() === 'beforeEach')) { diff --git a/src/components/accordion/accordion.e2e.ts b/src/components/accordion/accordion.e2e.ts index 9d994954a5..c27e27880e 100644 --- a/src/components/accordion/accordion.e2e.ts +++ b/src/components/accordion/accordion.e2e.ts @@ -2,13 +2,13 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing'; -import { SbbExpansionPanel } from '../expansion-panel'; -import type { SbbExpansionPanelHeader } from '../expansion-panel'; +import { SbbExpansionPanelElement } from '../expansion-panel'; +import type { SbbExpansionPanelHeaderElement } from '../expansion-panel'; -import { SbbAccordion } from './accordion'; +import { SbbAccordionElement } from './accordion'; describe('sbb-accordion', () => { - let element: SbbAccordion; + let element: SbbAccordionElement; beforeEach(async () => { element = await fixture(html` @@ -30,7 +30,7 @@ describe('sbb-accordion', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbAccordion); + assert.instanceOf(element, SbbAccordionElement); }); it('should set accordion context on expansion panel', async () => { @@ -44,7 +44,7 @@ describe('sbb-accordion', () => { }); it('should set accordion context on expansion panel when removing and adding expansion-panels', async () => { - let panels: SbbExpansionPanel[]; + let panels: SbbExpansionPanelElement[]; element.querySelector('sbb-expansion-panel').remove(); await waitForLitRender(element); @@ -101,13 +101,13 @@ describe('sbb-accordion', () => { }); it('should close others when expanding and multi = false', async () => { - const willOpenEventSpy = new EventSpy(SbbExpansionPanel.events.willOpen); - const panelOne: SbbExpansionPanel = element.querySelector('#panel-1'); - const headerOne: SbbExpansionPanelHeader = element.querySelector('#header-1'); - const panelTwo: SbbExpansionPanel = element.querySelector('#panel-2'); - const headerTwo: SbbExpansionPanelHeader = element.querySelector('#header-2'); - const panelThree: SbbExpansionPanel = element.querySelector('#panel-3'); - const headerThree: SbbExpansionPanelHeader = element.querySelector('#header-3'); + const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen); + const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1'); + const headerOne: SbbExpansionPanelHeaderElement = element.querySelector('#header-1'); + const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2'); + const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2'); + const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3'); + const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3'); for (const panel of [panelOne, panelTwo, panelThree]) { expect(panel.expanded).to.be.equal(false); @@ -138,13 +138,13 @@ describe('sbb-accordion', () => { it('should not change others when expanding and multi = false', async () => { element.multi = true; await waitForLitRender(element); - const willOpenEventSpy = new EventSpy(SbbExpansionPanel.events.willOpen); - const panelOne: SbbExpansionPanel = element.querySelector('#panel-1'); - const headerOne: SbbExpansionPanelHeader = element.querySelector('#header-1'); - const panelTwo: SbbExpansionPanel = element.querySelector('#panel-2'); - const headerTwo: SbbExpansionPanelHeader = element.querySelector('#header-2'); - const panelThree: SbbExpansionPanel = element.querySelector('#panel-3'); - const headerThree: SbbExpansionPanelHeader = element.querySelector('#header-3'); + const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen); + const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1'); + const headerOne: SbbExpansionPanelHeaderElement = element.querySelector('#header-1'); + const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2'); + const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2'); + const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3'); + const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3'); for (const panel of [panelOne, panelTwo, panelThree]) { expect(panel.expanded).to.be.equal(false); @@ -175,17 +175,17 @@ describe('sbb-accordion', () => { it('should close all panels except the first when multi changes from true to false', async () => { element.multi = true; await waitForLitRender(element); - const panelOne: SbbExpansionPanel = element.querySelector('#panel-1'); - const panelTwo: SbbExpansionPanel = element.querySelector('#panel-2'); - const headerTwo: SbbExpansionPanelHeader = element.querySelector('#header-2'); - const panelThree: SbbExpansionPanel = element.querySelector('#panel-3'); - const headerThree: SbbExpansionPanelHeader = element.querySelector('#header-3'); + const panelOne: SbbExpansionPanelElement = element.querySelector('#panel-1'); + const panelTwo: SbbExpansionPanelElement = element.querySelector('#panel-2'); + const headerTwo: SbbExpansionPanelHeaderElement = element.querySelector('#header-2'); + const panelThree: SbbExpansionPanelElement = element.querySelector('#panel-3'); + const headerThree: SbbExpansionPanelHeaderElement = element.querySelector('#header-3'); for (const panel of [panelOne, panelTwo, panelThree]) { expect(panel.expanded).to.be.equal(false); } - const willOpenEventSpy = new EventSpy(SbbExpansionPanel.events.willOpen); + const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen); headerTwo.click(); await waitForCondition(() => willOpenEventSpy.events.length === 1); diff --git a/src/components/accordion/accordion.stories.ts b/src/components/accordion/accordion.stories.ts index 2243fa89c3..e29387df26 100644 --- a/src/components/accordion/accordion.stories.ts +++ b/src/components/accordion/accordion.stories.ts @@ -7,7 +7,7 @@ import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../core/dom'; -import { SbbExpansionPanel } from '../expansion-panel'; +import { SbbExpansionPanelElement } from '../expansion-panel'; import readme from './readme.md?raw'; import './accordion'; @@ -244,10 +244,10 @@ const meta: Meta = { }, actions: { handles: [ - SbbExpansionPanel.events.willOpen, - SbbExpansionPanel.events.didOpen, - SbbExpansionPanel.events.willClose, - SbbExpansionPanel.events.didClose, + SbbExpansionPanelElement.events.willOpen, + SbbExpansionPanelElement.events.didOpen, + SbbExpansionPanelElement.events.willClose, + SbbExpansionPanelElement.events.didClose, ], }, docs: { diff --git a/src/components/accordion/accordion.ts b/src/components/accordion/accordion.ts index f2a82b9b0f..800f6e743e 100644 --- a/src/components/accordion/accordion.ts +++ b/src/components/accordion/accordion.ts @@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js'; import { toggleDatasetEntry } from '../core/dom'; import { ConnectedAbortController } from '../core/eventing'; -import { SbbExpansionPanel } from '../expansion-panel'; +import { SbbExpansionPanelElement } from '../expansion-panel'; import type { TitleLevel } from '../title'; import style from './accordion.scss?lit&inline'; @@ -14,7 +14,7 @@ import style from './accordion.scss?lit&inline'; * @slot - Use the unnamed slot to add `sbb-expansion-panel` elements. */ @customElement('sbb-accordion') -export class SbbAccordion extends LitElement { +export class SbbAccordionElement extends LitElement { public static override styles: CSSResultGroup = style; /** The heading level for the sbb-expansion-panel-headers within the component. */ @@ -71,7 +71,7 @@ export class SbbAccordion extends LitElement { this._expansionPanels.forEach((panel) => (panel.titleLevel = this.titleLevel)); } - private get _expansionPanels(): SbbExpansionPanel[] { + private get _expansionPanels(): SbbExpansionPanelElement[] { return Array.from(this.querySelectorAll?.('sbb-expansion-panel') ?? []); } @@ -81,7 +81,7 @@ export class SbbAccordion extends LitElement { return; } - expansionPanels.forEach((panel: SbbExpansionPanel) => { + expansionPanels.forEach((panel: SbbExpansionPanelElement) => { panel.titleLevel = this.titleLevel; panel.disableAnimation = this.disableAnimation; toggleDatasetEntry(panel, 'accordionFirst', false); @@ -95,7 +95,7 @@ export class SbbAccordion extends LitElement { super.connectedCallback(); const signal = this._abort.signal; this.addEventListener( - SbbExpansionPanel.events.willOpen, + SbbExpansionPanelElement.events.willOpen, (e: CustomEvent) => this._closePanels(e), { signal }, ); @@ -113,6 +113,6 @@ export class SbbAccordion extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-accordion': SbbAccordion; + 'sbb-accordion': SbbAccordionElement; } } diff --git a/src/components/action-group/action-group.e2e.ts b/src/components/action-group/action-group.e2e.ts index 41dfb28815..d036d23605 100644 --- a/src/components/action-group/action-group.e2e.ts +++ b/src/components/action-group/action-group.e2e.ts @@ -1,14 +1,14 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbButton } from '../button'; +import { SbbButtonElement } from '../button'; import { waitForLitRender } from '../core/testing'; -import { SbbLink } from '../link'; +import { SbbLinkElement } from '../link'; -import { SbbActionGroup } from './action-group'; +import { SbbActionGroupElement } from './action-group'; describe('sbb-action-group', () => { - let element: SbbActionGroup; + let element: SbbActionGroupElement; beforeEach(async () => { element = await fixture(html` @@ -26,14 +26,14 @@ describe('sbb-action-group', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbActionGroup); + assert.instanceOf(element, SbbActionGroupElement); }); describe('property sync', () => { it('should sync default size with sbb-button', async () => { const links = Array.from( document.querySelectorAll('sbb-action-group sbb-button'), - ) as SbbButton[]; + ) as SbbButtonElement[]; expect(links.every((l) => l.size === 'l')).to.be.ok; }); @@ -42,20 +42,24 @@ describe('sbb-action-group', () => { await waitForLitRender(element); const links = Array.from( document.querySelectorAll('sbb-action-group sbb-button'), - ) as SbbButton[]; + ) as SbbButtonElement[]; expect(links.every((l) => l.size === 'm')).to.be.ok; }); it('should update attributes with link-size="s"', async () => { element.setAttribute('link-size', 's'); await waitForLitRender(element); - const links = Array.from(document.querySelectorAll('sbb-action-group sbb-link')) as SbbLink[]; + const links = Array.from( + document.querySelectorAll('sbb-action-group sbb-link'), + ) as SbbLinkElement[]; expect(links.every((l) => l.size === 's')).to.be.ok; }); it('should apply variant block to sbb-link', async () => { await waitForLitRender(element); - const links = Array.from(document.querySelectorAll('sbb-action-group sbb-link')) as SbbLink[]; + const links = Array.from( + document.querySelectorAll('sbb-action-group sbb-link'), + ) as SbbLinkElement[]; expect(links.every((l) => l.variant === 'block')).to.be.ok; }); }); diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts index 9c7033bd3f..29cc9b06dc 100644 --- a/src/components/action-group/action-group.spec.ts +++ b/src/components/action-group/action-group.spec.ts @@ -1,9 +1,9 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbButton } from '../button'; +import { SbbButtonElement } from '../button'; -import { SbbActionGroup } from './action-group'; +import { SbbActionGroupElement } from './action-group'; import '.'; describe('sbb-action-group', () => { @@ -43,8 +43,8 @@ describe('sbb-action-group', () => { describe('property sync', () => { const assertButtons = ( - root: SbbActionGroup, - assertion: (link: SbbButton) => boolean, + root: SbbActionGroupElement, + assertion: (link: SbbButtonElement) => boolean, ): boolean => Array.from(root.querySelectorAll('sbb-button')).every(assertion); it('should sync default button-size property with sbb-button', async () => { @@ -58,7 +58,7 @@ describe('sbb-action-group', () => { Link - `)) as SbbActionGroup; + `)) as SbbActionGroupElement; expect(assertButtons(root, (b) => b.size === 'l')).to.be.ok; }); @@ -73,7 +73,7 @@ describe('sbb-action-group', () => { Link - `)) as SbbActionGroup; + `)) as SbbActionGroupElement; expect(assertButtons(root, (b) => b.size === 'm')).to.be.ok; }); @@ -88,7 +88,7 @@ describe('sbb-action-group', () => { Link - `)) as SbbActionGroup; + `)) as SbbActionGroupElement; expect(Array.from(root.querySelectorAll('sbb-link')).every((l) => l.variant === 'block')).to .be.ok; }); @@ -104,7 +104,7 @@ describe('sbb-action-group', () => { Link - `)) as SbbActionGroup; + `)) as SbbActionGroupElement; expect(Array.from(root.querySelectorAll('sbb-link')).every((l) => l.size === 's')).to.be.ok; }); }); diff --git a/src/components/action-group/action-group.ts b/src/components/action-group/action-group.ts index 1639362e46..a0f6a25f4c 100644 --- a/src/components/action-group/action-group.ts +++ b/src/components/action-group/action-group.ts @@ -13,7 +13,7 @@ import style from './action-group.scss?lit&inline'; * @slot - Use the unnamed slot to add `sbb-link` or `sbb-button` elements to the `sbb-action-group`. */ @customElement('sbb-action-group') -export class SbbActionGroup extends LitElement { +export class SbbActionGroupElement extends LitElement { public static override styles: CSSResultGroup = style; /** @@ -80,6 +80,6 @@ export class SbbActionGroup extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-action-group': SbbActionGroup; + 'sbb-action-group': SbbActionGroupElement; } } diff --git a/src/components/alert/alert-group/alert-group.e2e.ts b/src/components/alert/alert-group/alert-group.e2e.ts index 66055b9d26..68502f5cde 100644 --- a/src/components/alert/alert-group/alert-group.e2e.ts +++ b/src/components/alert/alert-group/alert-group.e2e.ts @@ -1,16 +1,16 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbButton } from '../../button'; +import { SbbButtonElement } from '../../button'; import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing'; -import { SbbAlertGroup } from './alert-group'; +import { SbbAlertGroupElement } from './alert-group'; import '.'; import '../alert'; describe('sbb-alert-group', () => { - let element: SbbAlertGroup; + let element: SbbAlertGroupElement; it('should handle events ond states on interacting with alerts', async () => { const alertGroupId = 'alertgroup'; @@ -28,8 +28,8 @@ describe('sbb-alert-group', () => { Second `); - const didDismissAlertSpy = new EventSpy(SbbAlertGroup.events.didDismissAlert); - const emptySpy = new EventSpy(SbbAlertGroup.events.empty); + const didDismissAlertSpy = new EventSpy(SbbAlertGroupElement.events.didDismissAlert); + const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty); // When rendering initially await waitForLitRender(element); @@ -43,7 +43,7 @@ describe('sbb-alert-group', () => { // When clicking on close button of the first alert const closeButton = element .querySelector('sbb-alert') - .shadowRoot.querySelector('.sbb-alert__close-button-wrapper sbb-button') as SbbButton; + .shadowRoot.querySelector('.sbb-alert__close-button-wrapper sbb-button') as SbbButtonElement; closeButton.focus(); closeButton.click(); @@ -66,7 +66,7 @@ describe('sbb-alert-group', () => { ( element .querySelector('sbb-alert') - .shadowRoot.querySelector('.sbb-alert__close-button-wrapper sbb-button') as SbbButton + .shadowRoot.querySelector('.sbb-alert__close-button-wrapper sbb-button') as SbbButtonElement ).click(); await waitForLitRender(element); @@ -95,7 +95,7 @@ describe('sbb-alert-group', () => { element = await fixture( html``, ); - const emptySpy = new EventSpy(SbbAlertGroup.events.empty); + const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty); // Then no title should be rendered and no empty event fired expect(element.shadowRoot.querySelector('.sbb-alert-group__title')).to.be.null; diff --git a/src/components/alert/alert-group/alert-group.stories.ts b/src/components/alert/alert-group/alert-group.stories.ts index e5136aa9d3..b8a5bdbbfc 100644 --- a/src/components/alert/alert-group/alert-group.stories.ts +++ b/src/components/alert/alert-group/alert-group.stories.ts @@ -6,7 +6,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../../core/dom'; -import { SbbAlertGroup } from './alert-group'; +import { SbbAlertGroupElement } from './alert-group'; import readme from './readme.md?raw'; import '../alert'; @@ -81,7 +81,7 @@ const meta: Meta = { ], parameters: { actions: { - handles: [SbbAlertGroup.events.didDismissAlert, SbbAlertGroup.events.empty], + handles: [SbbAlertGroupElement.events.didDismissAlert, SbbAlertGroupElement.events.empty], }, backgrounds: { disable: true, diff --git a/src/components/alert/alert-group/alert-group.ts b/src/components/alert/alert-group/alert-group.ts index 7eb16a3872..0f0c964101 100644 --- a/src/components/alert/alert-group/alert-group.ts +++ b/src/components/alert/alert-group/alert-group.ts @@ -5,7 +5,7 @@ import { html, unsafeStatic } from 'lit/static-html.js'; import { setAttribute } from '../../core/dom'; import { EventEmitter, ConnectedAbortController } from '../../core/eventing'; import type { TitleLevel } from '../../title'; -import { SbbAlert } from '../alert'; +import { SbbAlertElement } from '../alert'; import style from './alert-group.scss?lit&inline'; @@ -14,11 +14,11 @@ import style from './alert-group.scss?lit&inline'; * * @slot - Use the unnamed slot to add `sbb-alert` elements to the `sbb-alert-group`. * @slot accessibility-title - title for this `sbb-alert-group` which is only visible for screen reader users. - * @event {CustomEvent} didDismissAlert - Emits when an alert was removed from DOM. + * @event {CustomEvent} didDismissAlert - Emits when an alert was removed from DOM. * @event {CustomEvent} empty - Emits when `sbb-alert-group` becomes empty. */ @customElement('sbb-alert-group') -export class SbbAlertGroup extends LitElement { +export class SbbAlertGroupElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { didDismissAlert: 'didDismissAlert', @@ -45,18 +45,18 @@ export class SbbAlertGroup extends LitElement { @state() private _hasAlerts: boolean; /** Emits when an alert was removed from DOM. */ - private _didDismissAlert: EventEmitter = new EventEmitter( + private _didDismissAlert: EventEmitter = new EventEmitter( this, - SbbAlertGroup.events.didDismissAlert, + SbbAlertGroupElement.events.didDismissAlert, ); /** Emits when `sbb-alert-group` becomes empty. */ - private _empty: EventEmitter = new EventEmitter(this, SbbAlertGroup.events.empty); + private _empty: EventEmitter = new EventEmitter(this, SbbAlertGroupElement.events.empty); private _abort = new ConnectedAbortController(this); private _removeAlert(event: Event): void { - const target = event.target as SbbAlert; + const target = event.target as SbbAlertElement; const hasFocusInsideAlertGroup = document.activeElement === target; target.parentNode.removeChild(target); @@ -78,7 +78,7 @@ export class SbbAlertGroup extends LitElement { public override connectedCallback(): void { super.connectedCallback(); const signal = this._abort.signal; - this.addEventListener(SbbAlert.events.dismissalRequested, (e) => this._removeAlert(e), { + this.addEventListener(SbbAlertElement.events.dismissalRequested, (e) => this._removeAlert(e), { signal, }); } @@ -114,6 +114,6 @@ export class SbbAlertGroup extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-alert-group': SbbAlertGroup; + 'sbb-alert-group': SbbAlertGroupElement; } } diff --git a/src/components/alert/alert-group/readme.md b/src/components/alert/alert-group/readme.md index e41b6b627b..f8c2373af0 100644 --- a/src/components/alert/alert-group/readme.md +++ b/src/components/alert/alert-group/readme.md @@ -51,10 +51,10 @@ and therefore interrupts screen reader flow, to immediately read out the alert c ## Events -| Name | Type | Description | Inherited From | -| ----------------- | ----------------------- | ------------------------------------------- | -------------- | -| `didDismissAlert` | `CustomEvent` | Emits when an alert was removed from DOM. | | -| `empty` | `CustomEvent` | Emits when `sbb-alert-group` becomes empty. | | +| Name | Type | Description | Inherited From | +| ----------------- | ------------------------------ | ------------------------------------------- | -------------- | +| `didDismissAlert` | `CustomEvent` | Emits when an alert was removed from DOM. | | +| `empty` | `CustomEvent` | Emits when `sbb-alert-group` becomes empty. | | ## Slots diff --git a/src/components/alert/alert/alert.e2e.ts b/src/components/alert/alert/alert.e2e.ts index dc67c38a78..533606ebbf 100644 --- a/src/components/alert/alert/alert.e2e.ts +++ b/src/components/alert/alert/alert.e2e.ts @@ -3,19 +3,19 @@ import { html } from 'lit/static-html.js'; import { waitForCondition, EventSpy } from '../../core/testing'; -import { SbbAlert } from './alert'; +import { SbbAlertElement } from './alert'; describe('sbb-alert', () => { - let alert: SbbAlert; + let alert: SbbAlertElement; it('renders', async () => { alert = await fixture(html``); - assert.instanceOf(alert, SbbAlert); + assert.instanceOf(alert, SbbAlertElement); }); it('should fire animation events', async () => { - const willPresentSpy = new EventSpy(SbbAlert.events.willPresent); - const didPresentSpy = new EventSpy(SbbAlert.events.didPresent); + const willPresentSpy = new EventSpy(SbbAlertElement.events.willPresent); + const didPresentSpy = new EventSpy(SbbAlertElement.events.didPresent); await fixture(html`Interruption`); diff --git a/src/components/alert/alert/alert.spec.ts b/src/components/alert/alert/alert.spec.ts index a98a841cb7..7f26f854f8 100644 --- a/src/components/alert/alert/alert.spec.ts +++ b/src/components/alert/alert/alert.spec.ts @@ -1,11 +1,11 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import type { SbbAlert } from './alert'; +import type { SbbAlertElement } from './alert'; import './alert'; describe('sbb-alert', () => { - let element: SbbAlert; + let element: SbbAlertElement; it('should render default properties', async () => { element = await fixture( diff --git a/src/components/alert/alert/alert.stories.ts b/src/components/alert/alert/alert.stories.ts index 17204dbc09..adc0c7da6d 100644 --- a/src/components/alert/alert/alert.stories.ts +++ b/src/components/alert/alert/alert.stories.ts @@ -6,7 +6,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../../core/dom'; -import { SbbAlert } from './alert'; +import { SbbAlertElement } from './alert'; import readme from './readme.md?raw'; const Default = ({ 'content-slot-text': contentSlotText, ...args }: Args): TemplateResult => html` @@ -217,9 +217,9 @@ const meta: Meta = { parameters: { actions: { handles: [ - SbbAlert.events.willPresent, - SbbAlert.events.didPresent, - SbbAlert.events.dismissalRequested, + SbbAlertElement.events.willPresent, + SbbAlertElement.events.didPresent, + SbbAlertElement.events.dismissalRequested, ], }, backgrounds: { diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts index cab1b118b1..6034c4cae0 100644 --- a/src/components/alert/alert/alert.ts +++ b/src/components/alert/alert/alert.ts @@ -31,7 +31,7 @@ import '../../title'; * @event {CustomEvent} dismissalRequested - Emits when dismissal of an alert was requested. */ @customElement('sbb-alert') -export class SbbAlert extends LitElement implements LinkProperties { +export class SbbAlertElement extends LitElement implements LinkProperties { public static override styles: CSSResultGroup = style; public static readonly events = { willPresent: 'willPresent', @@ -80,15 +80,21 @@ export class SbbAlert extends LitElement implements LinkProperties { @property({ attribute: 'accessibility-label' }) public accessibilityLabel: string | undefined; /** Emits when the fade in animation starts. */ - private _willPresent: EventEmitter = new EventEmitter(this, SbbAlert.events.willPresent); + private _willPresent: EventEmitter = new EventEmitter( + this, + SbbAlertElement.events.willPresent, + ); /** Emits when the fade in animation ends and the button is displayed. */ - private _didPresent: EventEmitter = new EventEmitter(this, SbbAlert.events.didPresent); + private _didPresent: EventEmitter = new EventEmitter( + this, + SbbAlertElement.events.didPresent, + ); /** Emits when dismissal of an alert was requested. */ private _dismissalRequested: EventEmitter = new EventEmitter( this, - SbbAlert.events.dismissalRequested, + SbbAlertElement.events.dismissalRequested, ); @state() private _currentLanguage = documentLanguage(); @@ -255,6 +261,6 @@ export class SbbAlert extends LitElement implements LinkProperties { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-alert': SbbAlert; + 'sbb-alert': SbbAlertElement; } } diff --git a/src/components/autocomplete/autocomplete.e2e.ts b/src/components/autocomplete/autocomplete.e2e.ts index 81434ef31b..4e17bfb84d 100644 --- a/src/components/autocomplete/autocomplete.e2e.ts +++ b/src/components/autocomplete/autocomplete.e2e.ts @@ -3,13 +3,13 @@ import { sendKeys, sendMouse } from '@web/test-runner-commands'; import { html } from 'lit/static-html.js'; import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing'; -import { SbbFormField } from '../form-field'; -import { SbbOption } from '../option'; +import { SbbFormFieldElement } from '../form-field'; +import { SbbOptionElement } from '../option'; -import { SbbAutocomplete } from './autocomplete'; +import { SbbAutocompleteElement } from './autocomplete'; describe('sbb-autocomplete', () => { - let element: SbbAutocomplete, formField: SbbFormField, input: HTMLInputElement; + let element: SbbAutocompleteElement, formField: SbbFormFieldElement, input: HTMLInputElement; beforeEach(async () => { formField = await fixture(html` @@ -28,8 +28,8 @@ describe('sbb-autocomplete', () => { }); it('renders and sets the correct attributes', () => { - assert.instanceOf(formField, SbbFormField); - assert.instanceOf(element, SbbAutocomplete); + assert.instanceOf(formField, SbbFormFieldElement); + assert.instanceOf(element, SbbAutocompleteElement); expect(element).not.to.have.attribute('autocomplete-origin-borderless'); @@ -43,10 +43,10 @@ describe('sbb-autocomplete', () => { }); it('opens and closes with mouse and keyboard', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocomplete.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbAutocomplete.events.didOpen); - const willCloseEventSpy = new EventSpy(SbbAutocomplete.events.willClose); - const didCloseEventSpy = new EventSpy(SbbAutocomplete.events.didClose); + const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen); + const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); + const willCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.willClose); + const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose); input.click(); await waitForCondition(() => willOpenEventSpy.events.length === 1); @@ -95,9 +95,9 @@ describe('sbb-autocomplete', () => { }); it('select by mouse', async () => { - const willOpenEventSpy = new EventSpy(SbbAutocomplete.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbAutocomplete.events.didOpen); - const optionSelectedEventSpy = new EventSpy(SbbOption.events.optionSelected); + const willOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.willOpen); + const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); + const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected); input.focus(); await waitForCondition(() => willOpenEventSpy.events.length === 1); @@ -115,9 +115,9 @@ describe('sbb-autocomplete', () => { }); it('opens and select with keyboard', async () => { - const didOpenEventSpy = new EventSpy(SbbAutocomplete.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbAutocomplete.events.didClose); - const optionSelectedEventSpy = new EventSpy(SbbOption.events.optionSelected); + const didOpenEventSpy = new EventSpy(SbbAutocompleteElement.events.didOpen); + const didCloseEventSpy = new EventSpy(SbbAutocompleteElement.events.didClose); + const optionSelectedEventSpy = new EventSpy(SbbOptionElement.events.optionSelected); const optOne = element.querySelector('#option-1'); const optTwo = element.querySelector('#option-2'); input.focus(); diff --git a/src/components/autocomplete/autocomplete.stories.ts b/src/components/autocomplete/autocomplete.stories.ts index db00834537..a4650646db 100644 --- a/src/components/autocomplete/autocomplete.stories.ts +++ b/src/components/autocomplete/autocomplete.stories.ts @@ -15,10 +15,10 @@ import { styleMap } from 'lit/directives/style-map.js'; import { waitForComponentsReady } from '../../storybook/testing/wait-for-components-ready'; import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-position'; -import type { SbbFormError } from '../form-error'; -import { SbbOption } from '../option'; +import type { SbbFormErrorElement } from '../form-error'; +import { SbbOptionElement } from '../option'; -import { SbbAutocomplete } from './autocomplete'; +import { SbbAutocompleteElement } from './autocomplete'; import readme from './readme.md?raw'; import '../form-field'; @@ -343,7 +343,7 @@ const MixedTemplate = (args): TemplateResult => html` `; const RequiredTemplate = (args): TemplateResult => { - const sbbFormError: SbbFormError = document.createElement('sbb-form-error'); + const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error'); sbbFormError.setAttribute('slot', 'error'); sbbFormError.textContent = 'This is a required field.'; @@ -527,12 +527,12 @@ const meta: Meta = { chromatic: { disableSnapshot: false }, actions: { handles: [ - SbbAutocomplete.events.willOpen, - SbbAutocomplete.events.didOpen, - SbbAutocomplete.events.didClose, - SbbAutocomplete.events.willClose, + SbbAutocompleteElement.events.willOpen, + SbbAutocompleteElement.events.didOpen, + SbbAutocompleteElement.events.didClose, + SbbAutocompleteElement.events.willClose, 'change', - SbbOption.events.optionSelected, + SbbOptionElement.events.optionSelected, ], }, backgrounds: { diff --git a/src/components/autocomplete/autocomplete.ts b/src/components/autocomplete/autocomplete.ts index 48217087f8..9c4153f948 100644 --- a/src/components/autocomplete/autocomplete.ts +++ b/src/components/autocomplete/autocomplete.ts @@ -21,7 +21,7 @@ import { setAriaComboBoxAttributes, setOverlayPosition, } from '../core/overlay'; -import type { SbbOption } from '../option'; +import type { SbbOptionElement } from '../option'; import style from './autocomplete.scss?lit&inline'; @@ -37,7 +37,7 @@ let nextId = 0; * @event {CustomEvent} didClose - Emits whenever the `sbb-autocomplete` is closed. */ @customElement('sbb-autocomplete') -export class SbbAutocomplete extends LitElement { +export class SbbAutocompleteElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { willOpen: 'willOpen', @@ -74,16 +74,19 @@ export class SbbAutocomplete extends LitElement { @state() private _state: SbbOverlayState = 'closed'; /** Emits whenever the `sbb-autocomplete` starts the opening transition. */ - private _willOpen: EventEmitter = new EventEmitter(this, SbbAutocomplete.events.willOpen); + private _willOpen: EventEmitter = new EventEmitter(this, SbbAutocompleteElement.events.willOpen); /** Emits whenever the `sbb-autocomplete` is opened. */ - private _didOpen: EventEmitter = new EventEmitter(this, SbbAutocomplete.events.didOpen); + private _didOpen: EventEmitter = new EventEmitter(this, SbbAutocompleteElement.events.didOpen); /** Emits whenever the `sbb-autocomplete` begins the closing transition. */ - private _willClose: EventEmitter = new EventEmitter(this, SbbAutocomplete.events.willClose); + private _willClose: EventEmitter = new EventEmitter( + this, + SbbAutocompleteElement.events.willClose, + ); /** Emits whenever the `sbb-autocomplete` is closed. */ - private _didClose: EventEmitter = new EventEmitter(this, SbbAutocomplete.events.didClose); + private _didClose: EventEmitter = new EventEmitter(this, SbbAutocompleteElement.events.didClose); private _overlay: HTMLElement; private _optionContainer: HTMLElement; @@ -122,7 +125,7 @@ export class SbbAutocomplete extends LitElement { return this.triggerElement && isValidAttribute(this.triggerElement, 'readonly'); } - private get _options(): SbbOption[] { + private get _options(): SbbOptionElement[] { return Array.from(this.querySelectorAll?.('sbb-option') ?? []); } @@ -175,7 +178,7 @@ export class SbbAutocomplete extends LitElement { /** When an option is selected, update the input value and close the autocomplete. */ private _onOptionSelected(event: CustomEvent): void { - const target = event.target as SbbOption; + const target = event.target as SbbOptionElement; if (!target.selected) { return; } @@ -553,6 +556,6 @@ export class SbbAutocomplete extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-autocomplete': SbbAutocomplete; + 'sbb-autocomplete': SbbAutocompleteElement; } } diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts index 88789c6d6f..fcccc59947 100644 --- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts +++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.e2e.ts @@ -3,14 +3,14 @@ import { sendKeys, setViewport } from '@web/test-runner-commands'; import { html } from 'lit/static-html.js'; import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing'; -import type { SbbBreadcrumb } from '../breadcrumb'; +import type { SbbBreadcrumbElement } from '../breadcrumb'; import '../breadcrumb'; -import { SbbBreadcrumbGroup } from './breadcrumb-group'; +import { SbbBreadcrumbGroupElement } from './breadcrumb-group'; describe('sbb-breadcrumb-group', () => { describe('without ellipsis', () => { - let element: SbbBreadcrumbGroup; + let element: SbbBreadcrumbGroupElement; beforeEach(async () => { element = await fixture(html` @@ -24,13 +24,13 @@ describe('sbb-breadcrumb-group', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbBreadcrumbGroup); + assert.instanceOf(element, SbbBreadcrumbGroupElement); }); it('keyboard navigation', async () => { - const first: SbbBreadcrumb = document.querySelector('#breadcrumb-0'); - const second: SbbBreadcrumb = document.querySelector('#breadcrumb-1'); - const third: SbbBreadcrumb = document.querySelector('#breadcrumb-2'); + const first: SbbBreadcrumbElement = document.querySelector('#breadcrumb-0'); + const second: SbbBreadcrumbElement = document.querySelector('#breadcrumb-1'); + const third: SbbBreadcrumbElement = document.querySelector('#breadcrumb-2'); first.focus(); await sendKeys({ down: 'ArrowRight' }); @@ -41,7 +41,7 @@ describe('sbb-breadcrumb-group', () => { }); describe('with ellipsis', () => { - let breadcrumbGroup: SbbBreadcrumbGroup; + let breadcrumbGroup: SbbBreadcrumbGroupElement; let ellipsisListItemElement: HTMLLIElement; let ellipsisButton: HTMLButtonElement; @@ -93,8 +93,8 @@ describe('sbb-breadcrumb-group', () => { it('keyboard navigation with ellipsis', async () => { expect(ellipsisListItemElement).not.to.be.null; expect(ellipsisButton).not.to.be.null; - const first: SbbBreadcrumb = document.querySelector('#breadcrumb-0'); - const last: SbbBreadcrumb = document.querySelector('#breadcrumb-6'); + const first: SbbBreadcrumbElement = document.querySelector('#breadcrumb-0'); + const last: SbbBreadcrumbElement = document.querySelector('#breadcrumb-6'); first.focus(); expect(document.activeElement.id).to.be.equal(first.id); diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts index 6bd325a32d..affb522399 100644 --- a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts +++ b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts @@ -12,7 +12,7 @@ import { } from '../../core/eventing'; import { i18nBreadcrumbEllipsisButtonLabel } from '../../core/i18n'; import { AgnosticResizeObserver } from '../../core/observers'; -import type { SbbBreadcrumb } from '../breadcrumb'; +import type { SbbBreadcrumbElement } from '../breadcrumb'; import style from './breadcrumb-group.scss?lit&inline'; @@ -24,11 +24,11 @@ import '../../icon'; * @slot - Use the unnamed slot to add `sbb-breadcrumb` elements. */ @customElement('sbb-breadcrumb-group') -export class SbbBreadcrumbGroup extends SlotChildObserver(LitElement) { +export class SbbBreadcrumbGroupElement extends SlotChildObserver(LitElement) { public static override styles: CSSResultGroup = style; /** Local instance of slotted sbb-breadcrumb elements */ - @state() private _breadcrumbs: SbbBreadcrumb[] = []; + @state() private _breadcrumbs: SbbBreadcrumbElement[] = []; @state() private _state?: 'collapsed' | 'manually-expanded'; @@ -96,7 +96,7 @@ export class SbbBreadcrumbGroup extends SlotChildObserver(LitElement) { this._evaluateCollapsedState(); const breadcrumbs = Array.from(this.children ?? []).filter( - (e): e is SbbBreadcrumb => e.tagName === 'SBB-BREADCRUMB', + (e): e is SbbBreadcrumbElement => e.tagName === 'SBB-BREADCRUMB', ); // If the slotted sbb-breadcrumb instances have not changed, // we can skip syncing and updating the breadcrumb reference list. @@ -131,15 +131,18 @@ export class SbbBreadcrumbGroup extends SlotChildObserver(LitElement) { * Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows. */ private _focusNextCollapsed(evt: KeyboardEvent): void { - const arrayCollapsed: SbbBreadcrumb[] = [ + const arrayCollapsed: SbbBreadcrumbElement[] = [ this._breadcrumbs[0], - this.shadowRoot.querySelector('#sbb-breadcrumb-ellipsis') as SbbBreadcrumb, + this.shadowRoot.querySelector('#sbb-breadcrumb-ellipsis') as SbbBreadcrumbElement, this._breadcrumbs[this._breadcrumbs.length - 1], ]; this._focusNext(evt, arrayCollapsed); } - private _focusNext(evt: KeyboardEvent, breadcrumbs: SbbBreadcrumb[] = this._breadcrumbs): void { + private _focusNext( + evt: KeyboardEvent, + breadcrumbs: SbbBreadcrumbElement[] = this._breadcrumbs, + ): void { const current: number = breadcrumbs.findIndex( (e) => e === document.activeElement || e === this.shadowRoot.activeElement, ); @@ -206,7 +209,7 @@ export class SbbBreadcrumbGroup extends SlotChildObserver(LitElement) { private _renderExpanded(): TemplateResult[] { const slotName = (index: number): string => `breadcrumb-${index}`; - return this._breadcrumbs.map((element: SbbBreadcrumb, index: number) => { + return this._breadcrumbs.map((element: SbbBreadcrumbElement, index: number) => { element.setAttribute('slot', slotName(index)); return html` @@ -242,6 +245,6 @@ export class SbbBreadcrumbGroup extends SlotChildObserver(LitElement) { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-breadcrumb-group': SbbBreadcrumbGroup; + 'sbb-breadcrumb-group': SbbBreadcrumbGroupElement; } } diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.e2e.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.e2e.ts index 968f252ce6..58f34ad42f 100644 --- a/src/components/breadcrumb/breadcrumb/breadcrumb.e2e.ts +++ b/src/components/breadcrumb/breadcrumb/breadcrumb.e2e.ts @@ -3,17 +3,17 @@ import { html } from 'lit/static-html.js'; import { waitForCondition, EventSpy, waitForLitRender } from '../../core/testing'; -import { SbbBreadcrumb } from './breadcrumb'; +import { SbbBreadcrumbElement } from './breadcrumb'; describe('sbb-breadcrumb', () => { - let element: SbbBreadcrumb; + let element: SbbBreadcrumbElement; beforeEach(async () => { element = await fixture(html`Test`); }); it('renders', async () => { - assert.instanceOf(element, SbbBreadcrumb); + assert.instanceOf(element, SbbBreadcrumbElement); }); it('dispatches event on click', async () => { diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.ts index 1237777427..caee9d7bd2 100644 --- a/src/components/breadcrumb/breadcrumb/breadcrumb.ts +++ b/src/components/breadcrumb/breadcrumb/breadcrumb.ts @@ -29,7 +29,7 @@ import '../../icon'; * @slot icon - Use this to display an icon as breadcrumb. */ @customElement('sbb-breadcrumb') -export class SbbBreadcrumb extends SlotChildObserver(LitElement) { +export class SbbBreadcrumbElement extends SlotChildObserver(LitElement) { public static override styles: CSSResultGroup = style; /** The href value you want to link to. */ @@ -119,6 +119,6 @@ export class SbbBreadcrumb extends SlotChildObserver(LitElement) { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-breadcrumb': SbbBreadcrumb; + 'sbb-breadcrumb': SbbBreadcrumbElement; } } diff --git a/src/components/button/button.e2e.ts b/src/components/button/button.e2e.ts index 5111ad3567..f1c3646c7f 100644 --- a/src/components/button/button.e2e.ts +++ b/src/components/button/button.e2e.ts @@ -4,17 +4,17 @@ import { html } from 'lit/static-html.js'; import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing'; -import { SbbButton } from './button'; +import { SbbButtonElement } from './button'; describe('sbb-button', () => { - let element: SbbButton; + let element: SbbButtonElement; beforeEach(async () => { element = await fixture(html`I am a button`); }); it('renders', async () => { - assert.instanceOf(element, SbbButton); + assert.instanceOf(element, SbbButtonElement); }); describe('events', () => { diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 9f90f18b92..169475d3b2 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -41,7 +41,7 @@ export type SbbButtonSize = 'l' | 'm'; * @slot icon - Slot used to display the icon, if one is set */ @customElement('sbb-button') -export class SbbButton extends LitElement implements LinkButtonProperties, IsStaticProperty { +export class SbbButtonElement extends LitElement implements LinkButtonProperties, IsStaticProperty { public static override styles: CSSResultGroup = style; /** Variant of the button, like primary, secondary etc. */ @@ -176,6 +176,6 @@ export class SbbButton extends LitElement implements LinkButtonProperties, IsSta declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-button': SbbButton; + 'sbb-button': SbbButtonElement; } } diff --git a/src/components/calendar/calendar.e2e.ts b/src/components/calendar/calendar.e2e.ts index 04c95be11a..01e43b9bf5 100644 --- a/src/components/calendar/calendar.e2e.ts +++ b/src/components/calendar/calendar.e2e.ts @@ -6,11 +6,11 @@ import { waitForCondition, waitForLitRender, EventSpy } from '../core/testing'; import '../button'; import '../icon'; -import { SbbCalendar } from './calendar'; +import { SbbCalendarElement } from './calendar'; describe('sbb-calendar', () => { const selected = new Date(2023, 0, 15).getTime() / 1000; - let element: SbbCalendar; + let element: SbbCalendarElement; beforeEach(async () => { element = await fixture( @@ -19,7 +19,7 @@ describe('sbb-calendar', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbCalendar); + assert.instanceOf(element, SbbCalendarElement); }); it('highlights current day', async () => { @@ -92,7 +92,7 @@ describe('sbb-calendar', () => { }); it('selects a different date', async () => { - const selectedSpy = new EventSpy(SbbCalendar.events.dateSelected); + const selectedSpy = new EventSpy(SbbCalendarElement.events.dateSelected); const selectedDate = element.shadowRoot.querySelector('button[data-day="15 1 2023"]'); expect(selectedDate).to.have.class('sbb-calendar__selected'); @@ -110,7 +110,7 @@ describe('sbb-calendar', () => { }); it("clicks on disabled day and doesn't change selection", async () => { - const selectedSpy = new EventSpy(SbbCalendar.events.dateSelected); + const selectedSpy = new EventSpy(SbbCalendarElement.events.dateSelected); element.max = 1674946800; await waitForLitRender(element); diff --git a/src/components/calendar/calendar.stories.ts b/src/components/calendar/calendar.stories.ts index b95acbfeee..35b153a335 100644 --- a/src/components/calendar/calendar.stories.ts +++ b/src/components/calendar/calendar.stories.ts @@ -7,7 +7,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../core/dom'; -import { SbbCalendar } from './calendar'; +import { SbbCalendarElement } from './calendar'; import readme from './readme.md?raw'; const getCalendarAttr = (min, max): Record => { @@ -186,7 +186,7 @@ const meta: Meta = { decorators: [withActions as Decorator], parameters: { actions: { - handles: [SbbCalendar.events.dateSelected], + handles: [SbbCalendarElement.events.dateSelected], }, backgrounds: { disable: true, diff --git a/src/components/calendar/calendar.ts b/src/components/calendar/calendar.ts index c7377c0f71..47563b8bb3 100644 --- a/src/components/calendar/calendar.ts +++ b/src/components/calendar/calendar.ts @@ -84,7 +84,7 @@ export type CalendarView = 'day' | 'month' | 'year'; * @event {CustomEvent} dateSelected - Event emitted on date selection. */ @customElement('sbb-calendar') -export class SbbCalendar extends LitElement { +export class SbbCalendarElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { dateSelected: 'dateSelected', @@ -108,7 +108,7 @@ export class SbbCalendar extends LitElement { /** Event emitted on date selection. */ private _dateSelected: EventEmitter = new EventEmitter( this, - SbbCalendar.events.dateSelected, + SbbCalendarElement.events.dateSelected, ); /** The currently active date. */ @@ -1232,6 +1232,6 @@ export class SbbCalendar extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-calendar': SbbCalendar; + 'sbb-calendar': SbbCalendarElement; } } diff --git a/src/components/card/card-action/card-action.e2e.ts b/src/components/card/card-action/card-action.e2e.ts index 57a66adb93..fbd665c340 100644 --- a/src/components/card/card-action/card-action.e2e.ts +++ b/src/components/card/card-action/card-action.e2e.ts @@ -3,15 +3,15 @@ import { sendKeys } from '@web/test-runner-commands'; import { html } from 'lit/static-html.js'; import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing'; -import type { SbbCard } from '../card'; +import type { SbbCardElement } from '../card'; -import type { SbbCardAction } from './card-action'; +import type { SbbCardActionElement } from './card-action'; import '../card'; import './card-action'; describe('sbb-card-action', () => { - let element: SbbCard; + let element: SbbCardElement; it('should render an sbb-card-action as a link opening in a new window', async () => { element = await fixture( @@ -167,7 +167,7 @@ describe('sbb-card-action', () => { }); describe('events', () => { - let action: SbbCardAction; + let action: SbbCardActionElement; beforeEach(async () => { element = await fixture( diff --git a/src/components/card/card-action/card-action.stories.ts b/src/components/card/card-action/card-action.stories.ts index e5c13860aa..94d0d72e8b 100644 --- a/src/components/card/card-action/card-action.stories.ts +++ b/src/components/card/card-action/card-action.stories.ts @@ -11,7 +11,7 @@ const Template = (): TemplateResult => html` `; -export const SbbCardAction: StoryObj = { +export const SbbCardActionElement: StoryObj = { render: Template, }; diff --git a/src/components/card/card-action/card-action.ts b/src/components/card/card-action/card-action.ts index 58d63f3977..5d611ad607 100644 --- a/src/components/card/card-action/card-action.ts +++ b/src/components/card/card-action/card-action.ts @@ -21,7 +21,7 @@ import { targetsNewWindow, } from '../../core/interfaces'; import { AgnosticMutationObserver } from '../../core/observers'; -import type { SbbCard } from '../card'; +import type { SbbCardElement } from '../card'; import style from './card-action.scss?lit&inline'; @@ -32,7 +32,7 @@ import style from './card-action.scss?lit&inline'; * This is relevant for SEO and screen readers. */ @customElement('sbb-card-action') -export class SbbCardAction extends LitElement implements LinkButtonProperties { +export class SbbCardActionElement extends LitElement implements LinkButtonProperties { public static override styles: CSSResultGroup = style; /** Whether the card is active. */ @@ -79,7 +79,7 @@ export class SbbCardAction extends LitElement implements LinkButtonProperties { } private _abortController = new AbortController(); - private _card: SbbCard | null = null; + private _card: SbbCardElement | null = null; private _cardMutationObserver = new AgnosticMutationObserver(() => this._checkForSlottedActions(), ); @@ -170,6 +170,6 @@ export class SbbCardAction extends LitElement implements LinkButtonProperties { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-card-action': SbbCardAction; + 'sbb-card-action': SbbCardActionElement; } } diff --git a/src/components/card/card-badge/card-badge.e2e.ts b/src/components/card/card-badge/card-badge.e2e.ts index 3da10de94b..f2e2686141 100644 --- a/src/components/card/card-badge/card-badge.e2e.ts +++ b/src/components/card/card-badge/card-badge.e2e.ts @@ -1,13 +1,13 @@ import { assert, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbCardBadge } from './card-badge'; +import { SbbCardBadgeElement } from './card-badge'; describe('sbb-card-badge', () => { - let element: SbbCardBadge; + let element: SbbCardBadgeElement; it('renders', async () => { element = await fixture(html``); - assert.instanceOf(element, SbbCardBadge); + assert.instanceOf(element, SbbCardBadgeElement); }); }); diff --git a/src/components/card/card-badge/card-badge.ts b/src/components/card/card-badge/card-badge.ts index 7f857df744..41ee15368b 100644 --- a/src/components/card/card-badge/card-badge.ts +++ b/src/components/card/card-badge/card-badge.ts @@ -12,7 +12,7 @@ import style from './card-badge.scss?lit&inline'; * Content parts should be wrapped in `` tags to achieve correct spacings. */ @customElement('sbb-card-badge') -export class SbbCardBadge extends LitElement { +export class SbbCardBadgeElement extends LitElement { public static override styles: CSSResultGroup = style; /** Color of the card badge. */ @@ -55,6 +55,6 @@ export class SbbCardBadge extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-card-badge': SbbCardBadge; + 'sbb-card-badge': SbbCardBadgeElement; } } diff --git a/src/components/card/card/card.e2e.ts b/src/components/card/card/card.e2e.ts index b57008574a..26f6f4ea2b 100644 --- a/src/components/card/card/card.e2e.ts +++ b/src/components/card/card/card.e2e.ts @@ -1,15 +1,15 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbCard } from './card'; +import { SbbCardElement } from './card'; import '../card-badge'; describe('sbb-card', () => { - let element: SbbCard; + let element: SbbCardElement; it('renders', async () => { element = await fixture(html``); - assert.instanceOf(element, SbbCard); + assert.instanceOf(element, SbbCardElement); }); it('should render with sbb-card-badge', async () => { diff --git a/src/components/card/card/card.ts b/src/components/card/card/card.ts index 57dacddd84..62e69d0cbf 100644 --- a/src/components/card/card/card.ts +++ b/src/components/card/card/card.ts @@ -11,7 +11,7 @@ import style from './card.scss?lit&inline'; * @slot action - Use this slot to render a `sbb-card-action` component. */ @customElement('sbb-card') -export class SbbCard extends LitElement { +export class SbbCardElement extends LitElement { public static override styles: CSSResultGroup = style; /** Size variant, either xs, s, m, l, xl, xxl or xxxl. */ @@ -53,6 +53,6 @@ export class SbbCard extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-card': SbbCard; + 'sbb-card': SbbCardElement; } } diff --git a/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts b/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts index b23122f951..2d81621544 100644 --- a/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts +++ b/src/components/checkbox/checkbox-group/checkbox-group.e2e.ts @@ -3,13 +3,15 @@ import { sendKeys } from '@web/test-runner-commands'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; -import { SbbCheckbox } from '../checkbox'; +import { SbbCheckboxElement } from '../checkbox'; -import { SbbCheckboxGroup } from './checkbox-group'; +import { SbbCheckboxGroupElement } from './checkbox-group'; describe('sbb-checkbox-group', () => { - let element: SbbCheckboxGroup; - let checkboxOne: SbbCheckbox, checkboxTwo: SbbCheckbox, checkboxThree: SbbCheckbox; + let element: SbbCheckboxGroupElement; + let checkboxOne: SbbCheckboxElement, + checkboxTwo: SbbCheckboxElement, + checkboxThree: SbbCheckboxElement; beforeEach(async () => { element = await fixture(html` @@ -25,10 +27,10 @@ describe('sbb-checkbox-group', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbCheckboxGroup); - assert.instanceOf(checkboxOne, SbbCheckbox); - assert.instanceOf(checkboxTwo, SbbCheckbox); - assert.instanceOf(checkboxThree, SbbCheckbox); + assert.instanceOf(element, SbbCheckboxGroupElement); + assert.instanceOf(checkboxOne, SbbCheckboxElement); + assert.instanceOf(checkboxTwo, SbbCheckboxElement); + assert.instanceOf(checkboxThree, SbbCheckboxElement); }); it('disabled status is inherited', async () => { @@ -48,8 +50,10 @@ describe('sbb-checkbox-group', () => { }); it('disabled status prevents changes', async () => { - const checkboxes: SbbCheckbox[] = [checkboxOne, checkboxTwo, checkboxThree]; - checkboxes.forEach((check: SbbCheckbox) => expect(check).not.to.have.attribute('checked')); + const checkboxes: SbbCheckboxElement[] = [checkboxOne, checkboxTwo, checkboxThree]; + checkboxes.forEach((check: SbbCheckboxElement) => + expect(check).not.to.have.attribute('checked'), + ); element.setAttribute('disabled', 'true'); await waitForLitRender(element); @@ -58,7 +62,9 @@ describe('sbb-checkbox-group', () => { check.click(); } await waitForLitRender(element); - checkboxes.forEach((check: SbbCheckbox) => expect(check).not.to.have.attribute('checked')); + checkboxes.forEach((check: SbbCheckboxElement) => + expect(check).not.to.have.attribute('checked'), + ); element.removeAttribute('disabled'); await waitForLitRender(element); diff --git a/src/components/checkbox/checkbox-group/checkbox-group.ts b/src/components/checkbox/checkbox-group/checkbox-group.ts index 591d57f1ec..979504b17b 100644 --- a/src/components/checkbox/checkbox-group/checkbox-group.ts +++ b/src/components/checkbox/checkbox-group/checkbox-group.ts @@ -10,7 +10,7 @@ import { ConnectedAbortController, } from '../../core/eventing'; import { SbbHorizontalFrom, SbbOrientation } from '../../core/interfaces'; -import type { SbbCheckbox, SbbCheckboxSize } from '../checkbox'; +import type { SbbCheckboxElement, SbbCheckboxSize } from '../checkbox'; import style from './checkbox-group.scss?lit&inline'; @@ -21,7 +21,7 @@ import style from './checkbox-group.scss?lit&inline'; * @slot error - Slot used to render a `sbb-form-error` inside the `sbb-checkbox-group`. */ @customElement('sbb-checkbox-group') -export class SbbCheckboxGroup extends LitElement { +export class SbbCheckboxGroupElement extends LitElement { public static override styles: CSSResultGroup = style; /** Whether the checkbox group is disabled. */ @@ -102,8 +102,9 @@ export class SbbCheckboxGroup extends LitElement { } private _handleKeyDown(evt: KeyboardEvent): void { - const enabledCheckboxes: SbbCheckbox[] = this._checkboxes.filter( - (checkbox: SbbCheckbox) => !checkbox.disabled && interactivityChecker.isVisible(checkbox), + const enabledCheckboxes: SbbCheckboxElement[] = this._checkboxes.filter( + (checkbox: SbbCheckboxElement) => + !checkbox.disabled && interactivityChecker.isVisible(checkbox), ); if ( @@ -117,7 +118,9 @@ export class SbbCheckboxGroup extends LitElement { } if (isArrowKeyPressed(evt)) { - const current: number = enabledCheckboxes.findIndex((e: SbbCheckbox) => e === evt.target); + const current: number = enabledCheckboxes.findIndex( + (e: SbbCheckboxElement) => e === evt.target, + ); const nextIndex: number = getNextElementIndex(evt, current, enabledCheckboxes.length); enabledCheckboxes[nextIndex]?.focus(); } @@ -137,9 +140,9 @@ export class SbbCheckboxGroup extends LitElement { } } - private get _checkboxes(): SbbCheckbox[] { + private get _checkboxes(): SbbCheckboxElement[] { return Array.from(this.querySelectorAll?.('sbb-checkbox') ?? []).filter( - (el: SbbCheckbox) => el.closest('sbb-checkbox-group') === this, + (el: SbbCheckboxElement) => el.closest('sbb-checkbox-group') === this, ); } @@ -160,6 +163,6 @@ export class SbbCheckboxGroup extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-checkbox-group': SbbCheckboxGroup; + 'sbb-checkbox-group': SbbCheckboxGroupElement; } } diff --git a/src/components/checkbox/checkbox/checkbox.e2e.ts b/src/components/checkbox/checkbox/checkbox.e2e.ts index b1504b0258..3a5fd0ca36 100644 --- a/src/components/checkbox/checkbox/checkbox.e2e.ts +++ b/src/components/checkbox/checkbox/checkbox.e2e.ts @@ -4,10 +4,10 @@ import { html } from 'lit/static-html.js'; import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing'; -import { SbbCheckbox } from './checkbox'; +import { SbbCheckboxElement } from './checkbox'; describe('sbb-checkbox', () => { - let element: SbbCheckbox; + let element: SbbCheckboxElement; beforeEach(async () => { await fixture(html``); @@ -15,7 +15,7 @@ describe('sbb-checkbox', () => { }); it('should render', async () => { - assert.instanceOf(element, SbbCheckbox); + assert.instanceOf(element, SbbCheckboxElement); }); it('should not render accessibility label containing expanded state', async () => { diff --git a/src/components/checkbox/checkbox/checkbox.ts b/src/components/checkbox/checkbox/checkbox.ts index e0334ebfd8..f93e7f72a4 100644 --- a/src/components/checkbox/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox/checkbox.ts @@ -50,7 +50,7 @@ const checkboxObserverConfig: MutationObserverInit = { * @event {CustomEvent} didChange - Deprecated. used for React. Will probably be removed once React 19 is available. */ @customElement('sbb-checkbox') -export class SbbCheckbox extends LitElement { +export class SbbCheckboxElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { didChange: 'didChange', @@ -115,7 +115,7 @@ export class SbbCheckbox extends LitElement { /** * @deprecated only used for React. Will probably be removed once React 19 is available. */ - private _didChange: EventEmitter = new EventEmitter(this, SbbCheckbox.events.didChange, { + private _didChange: EventEmitter = new EventEmitter(this, SbbCheckboxElement.events.didChange, { bubbles: true, cancelable: true, }); @@ -127,7 +127,7 @@ export class SbbCheckbox extends LitElement { */ private _stateChange: EventEmitter = new EventEmitter( this, - SbbCheckbox.events.stateChange, + SbbCheckboxElement.events.stateChange, { bubbles: true }, ); @@ -137,7 +137,7 @@ export class SbbCheckbox extends LitElement { */ private _checkboxLoaded: EventEmitter = new EventEmitter( this, - SbbCheckbox.events.checkboxLoaded, + SbbCheckboxElement.events.checkboxLoaded, { bubbles: true }, ); @@ -336,6 +336,6 @@ export class SbbCheckbox extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-checkbox': SbbCheckbox; + 'sbb-checkbox': SbbCheckboxElement; } } diff --git a/src/components/chip/chip.e2e.ts b/src/components/chip/chip.e2e.ts index 8afb7727f5..1ae4fc84db 100644 --- a/src/components/chip/chip.e2e.ts +++ b/src/components/chip/chip.e2e.ts @@ -1,11 +1,11 @@ import { assert, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbChip } from './chip'; +import { SbbChipElement } from './chip'; describe('sbb-chip', () => { it('renders', async () => { - const element: SbbChip = await fixture(html`Label`); - assert.instanceOf(element, SbbChip); + const element: SbbChipElement = await fixture(html`Label`); + assert.instanceOf(element, SbbChipElement); }); }); diff --git a/src/components/chip/chip.ts b/src/components/chip/chip.ts index 4c16b0c665..e3f755d5d4 100644 --- a/src/components/chip/chip.ts +++ b/src/components/chip/chip.ts @@ -9,7 +9,7 @@ import style from './chip.scss?lit&inline'; * @slot - Use the unnamed slot to add content to the `sbb-chip`. */ @customElement('sbb-chip') -export class SbbChip extends LitElement { +export class SbbChipElement extends LitElement { public static override styles: CSSResultGroup = style; /** Size of the chip. */ @@ -34,6 +34,6 @@ export class SbbChip extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-chip': SbbChip; + 'sbb-chip': SbbChipElement; } } diff --git a/src/components/clock/clock.spec.ts b/src/components/clock/clock.spec.ts index 56d8dd3482..629bff5723 100644 --- a/src/components/clock/clock.spec.ts +++ b/src/components/clock/clock.spec.ts @@ -1,14 +1,14 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbClock } from './clock'; +import { SbbClockElement } from './clock'; describe('sbb-clock', () => { - let element: SbbClock; + let element: SbbClockElement; it('renders', async () => { element = await fixture(html``); - assert.instanceOf(element, SbbClock); + assert.instanceOf(element, SbbClockElement); expect(element).dom.to.be.equal(``); @@ -26,7 +26,7 @@ describe('sbb-clock', () => { it('renders with a fixed time', async () => { element = await fixture(html``); - assert.instanceOf(element, SbbClock); + assert.instanceOf(element, SbbClockElement); expect(element).to.have.attribute('data-initialized'); diff --git a/src/components/clock/clock.ts b/src/components/clock/clock.ts index 4835e0b713..97490d4a04 100644 --- a/src/components/clock/clock.ts +++ b/src/components/clock/clock.ts @@ -49,7 +49,7 @@ const ADD_EVENT_LISTENER_OPTIONS: AddEventListenerOptions = { * It displays an analog clock with the classic SBB face. */ @customElement('sbb-clock') -export class SbbClock extends LitElement { +export class SbbClockElement extends LitElement { public static override styles: CSSResultGroup = style; /** If it's false, the clock's hands are hidden; it's set to true when calculations are ready. */ @@ -318,6 +318,6 @@ export class SbbClock extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-clock': SbbClock; + 'sbb-clock': SbbClockElement; } } diff --git a/src/components/core/dom/input-element.ts b/src/components/core/dom/input-element.ts index b94760ae29..c4939dd9e6 100644 --- a/src/components/core/dom/input-element.ts +++ b/src/components/core/dom/input-element.ts @@ -12,7 +12,7 @@ export function findShadowInput(element: HTMLElement): HTMLInputElement | null { * 1. Input field in `sbb-form-field` (if trigger is undefiend) * 2. Input referenced by id (trigger is string) * 3. Input referenced directly (trigger is HTMLElement) - * @param element The starting SbbDatepicker element. + * @param element The starting SbbDatepickerElement element. * @param trigger The id or the reference of the input. */ export function findInput( diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts index f70f1a7f88..c3dc4a37af 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.e2e.ts @@ -2,20 +2,20 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing'; -import { SbbFormField } from '../../form-field'; -import type { SbbDatepicker } from '../datepicker'; +import { SbbFormFieldElement } from '../../form-field'; +import type { SbbDatepickerElement } from '../datepicker'; -import { SbbDatepickerNextDay } from './datepicker-next-day'; +import { SbbDatepickerNextDayElement } from './datepicker-next-day'; import '../datepicker'; describe('sbb-datepicker-next-day', () => { describe('standalone', () => { it('renders', async () => { - const element: SbbDatepickerNextDay = await fixture( + const element: SbbDatepickerNextDayElement = await fixture( html``, ); - assert.instanceOf(element, SbbDatepickerNextDay); + assert.instanceOf(element, SbbDatepickerNextDayElement); }); }); @@ -29,14 +29,14 @@ describe('sbb-datepicker-next-day', () => { `); - const element: SbbDatepickerNextDay = page.querySelector('sbb-datepicker-next-day'); + const element: SbbDatepickerNextDayElement = page.querySelector('sbb-datepicker-next-day'); await waitForLitRender(element); const input: HTMLInputElement = page.querySelector('input'); const changeSpy = new EventSpy('change', input); const blurSpy = new EventSpy('blur', input); - assert.instanceOf(element, SbbDatepickerNextDay); + assert.instanceOf(element, SbbDatepickerNextDayElement); expect(input.value).to.be.equal('Sa, 31.12.2022'); await element.click(); @@ -57,7 +57,7 @@ describe('sbb-datepicker-next-day', () => { `); await waitForLitRender(doc); - const nextButton: SbbDatepickerNextDay = doc.querySelector('sbb-datepicker-next-day'); + const nextButton: SbbDatepickerNextDayElement = doc.querySelector('sbb-datepicker-next-day'); const inputUpdated: EventSpy = new EventSpy( 'inputUpdated', document.querySelector('#parent'), @@ -67,7 +67,7 @@ describe('sbb-datepicker-next-day', () => { expect(inputUpdated.count).to.be.equal(0); expect(nextButton.dataset.disabled).to.be.equal(''); - const picker: SbbDatepicker = document.createElement('sbb-datepicker'); + const picker: SbbDatepickerElement = document.createElement('sbb-datepicker'); picker.setAttribute('input', 'datepicker-input'); picker.setAttribute('id', 'datepicker'); picker.setAttribute('value', '01-01-2023'); @@ -89,7 +89,7 @@ describe('sbb-datepicker-next-day', () => { `); await waitForLitRender(doc); - const nextButton: SbbDatepickerNextDay = doc.querySelector('sbb-datepicker-next-day'); + const nextButton: SbbDatepickerNextDayElement = doc.querySelector('sbb-datepicker-next-day'); const inputUpdated: EventSpy = new EventSpy( 'inputUpdated', document.querySelector('#parent'), @@ -99,7 +99,7 @@ describe('sbb-datepicker-next-day', () => { expect(inputUpdated.count).to.be.equal(0); expect(nextButton.dataset.disabled).to.be.equal(''); - const picker: SbbDatepicker = document.createElement('sbb-datepicker'); + const picker: SbbDatepickerElement = document.createElement('sbb-datepicker'); picker.setAttribute('input', 'datepicker-input'); picker.setAttribute('id', 'datepicker'); picker.setAttribute('value', '01-01-2023'); @@ -113,10 +113,10 @@ describe('sbb-datepicker-next-day', () => { }); describe('in form field', () => { - let element: SbbDatepickerNextDay, input: HTMLInputElement; + let element: SbbDatepickerNextDayElement, input: HTMLInputElement; beforeEach(async () => { - const form: SbbFormField = await fixture(html` + const form: SbbFormFieldElement = await fixture(html` @@ -129,7 +129,7 @@ describe('sbb-datepicker-next-day', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbDatepickerNextDay); + assert.instanceOf(element, SbbDatepickerNextDayElement); }); it('click', async () => { @@ -144,7 +144,7 @@ describe('sbb-datepicker-next-day', () => { }); it('disabled due max value equals to value', async () => { - const form: SbbFormField = await fixture(html` + const form: SbbFormFieldElement = await fixture(html` diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts index d61efb006f..4d4266281a 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.spec.ts @@ -1,16 +1,16 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbFormField } from '../../form-field'; +import { SbbFormFieldElement } from '../../form-field'; -import type { SbbDatepickerNextDay } from './datepicker-next-day'; +import type { SbbDatepickerNextDayElement } from './datepicker-next-day'; import '../datepicker'; import './datepicker-next-day'; describe('sbb-datepicker-next-day', () => { it('renders', async () => { - const page: SbbDatepickerNextDay = await fixture( + const page: SbbDatepickerNextDayElement = await fixture( html``, ); @@ -34,7 +34,7 @@ describe('sbb-datepicker-next-day', () => { `); - const element: SbbDatepickerNextDay = page.querySelector('sbb-datepicker-next-day'); + const element: SbbDatepickerNextDayElement = page.querySelector('sbb-datepicker-next-day'); expect(element).dom.to.be.equal(` { }); it('renders with datepicker and input disabled', async () => { - const page: SbbFormField = await fixture(html` + const page: SbbFormFieldElement = await fixture(html` @@ -62,12 +62,12 @@ describe('sbb-datepicker-next-day', () => { `); - const element: SbbDatepickerNextDay = page.querySelector('sbb-datepicker-next-day'); + const element: SbbDatepickerNextDayElement = page.querySelector('sbb-datepicker-next-day'); expect(element).to.have.attribute('data-disabled'); }); it('renders with datepicker and input readonly', async () => { - const page: SbbFormField = await fixture(html` + const page: SbbFormFieldElement = await fixture(html` @@ -75,7 +75,7 @@ describe('sbb-datepicker-next-day', () => { `); - const element: SbbDatepickerNextDay = page.querySelector('sbb-datepicker-next-day'); + const element: SbbDatepickerNextDayElement = page.querySelector('sbb-datepicker-next-day'); expect(element).to.have.attribute('data-disabled'); }); }); diff --git a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts index 6e871ea169..e199052ac5 100644 --- a/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts +++ b/src/components/datepicker/datepicker-next-day/datepicker-next-day.ts @@ -17,7 +17,7 @@ import { datepickerControlRegisteredEventFactory, findNextAvailableDate, getDatePicker, - type SbbDatepicker, + type SbbDatepickerElement, } from '../datepicker'; import style from './datepicker-next-day.scss?lit&inline'; @@ -28,7 +28,7 @@ import '../../icon'; * Combined with a `sbb-datepicker`, it can be used to move the date ahead. */ @customElement('sbb-datepicker-next-day') -export class SbbDatepickerNextDay extends LitElement implements ButtonProperties { +export class SbbDatepickerNextDayElement extends LitElement implements ButtonProperties { public static override styles: CSSResultGroup = style; /** The name attribute to use for the button. */ @@ -38,7 +38,7 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties @property({ reflect: true, type: Boolean }) public negative = false; /** Datepicker reference. */ - @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepicker; + @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement; /** Whether the component is disabled due date equals to max date. */ @state() private _disabled = false; @@ -60,7 +60,7 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties }), ); - private _datePickerElement: SbbDatepicker; + private _datePickerElement: SbbDatepickerElement; private _dateAdapter: DateAdapter = defaultDateAdapter; @@ -105,7 +105,7 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties if (formField) { this.negative = isValidAttribute(formField, 'negative'); - // We can't use getInputElement of SbbFormField as async awaiting is not supported in connectedCallback. + // We can't use getInputElement of SbbFormFieldElement as async awaiting is not supported in connectedCallback. // We here only have to look for input. const inputElement = formField.querySelector('input'); @@ -122,7 +122,7 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties this._datePickerController?.abort(); } - private _init(picker?: string | SbbDatepicker): void { + private _init(picker?: string | SbbDatepickerElement): void { this._datePickerController?.abort(); this._datePickerController = new AbortController(); this._datePickerElement = getDatePicker(this, picker); @@ -132,7 +132,7 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties // assuming that the two components share the same parent element. this.parentElement?.addEventListener( 'inputUpdated', - (e: Event) => this._init(e.target as SbbDatepicker), + (e: Event) => this._init(e.target as SbbDatepickerElement), { once: true, signal: this._datePickerController.signal }, ); return; @@ -142,7 +142,7 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties this._datePickerElement.addEventListener( 'change', (event: Event) => { - this._setDisabledState(event.target as SbbDatepicker); + this._setDisabledState(event.target as SbbDatepickerElement); this._setAriaLabel(); }, { signal: this._datePickerController.signal }, @@ -150,7 +150,7 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties this._datePickerElement.addEventListener( 'datePickerUpdated', (event: Event) => { - this._setDisabledState(event.target as SbbDatepicker); + this._setDisabledState(event.target as SbbDatepickerElement); this._setAriaLabel(); }, { signal: this._datePickerController.signal }, @@ -171,7 +171,7 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties this._datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory()); } - private _setDisabledState(datepicker: SbbDatepicker): void { + private _setDisabledState(datepicker: SbbDatepickerElement): void { const pickerValueAsDate: Date = datepicker?.getValueAsDate(); if (!pickerValueAsDate) { @@ -242,6 +242,6 @@ export class SbbDatepickerNextDay extends LitElement implements ButtonProperties declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-datepicker-next-day': SbbDatepickerNextDay; + 'sbb-datepicker-next-day': SbbDatepickerNextDayElement; } } diff --git a/src/components/datepicker/datepicker-next-day/readme.md b/src/components/datepicker/datepicker-next-day/readme.md index 67ce60bcb7..926cb0c051 100644 --- a/src/components/datepicker/datepicker-next-day/readme.md +++ b/src/components/datepicker/datepicker-next-day/readme.md @@ -35,8 +35,8 @@ both standalone or within the `sbb-form-field`, they must have the same parent e ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | -------------------------------------- | ------- | ----------------------------------------- | -| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `datePicker` | `date-picker` | public | `string \| SbbDatepicker \| undefined` | | Datepicker reference. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------- | ------- | --------------------------------------------- | ------- | ----------------------------------------- | +| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts index 5306cdb269..acfae92ee8 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.e2e.ts @@ -2,20 +2,20 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing'; -import { SbbFormField } from '../../form-field'; -import type { SbbDatepicker } from '../datepicker'; +import { SbbFormFieldElement } from '../../form-field'; +import type { SbbDatepickerElement } from '../datepicker'; -import { SbbDatepickerPreviousDay } from './datepicker-previous-day'; +import { SbbDatepickerPreviousDayElement } from './datepicker-previous-day'; import '../datepicker'; describe('sbb-datepicker-previous-day', () => { describe('standalone', () => { it('renders', async () => { - const element: SbbDatepickerPreviousDay = await fixture( + const element: SbbDatepickerPreviousDayElement = await fixture( html``, ); - assert.instanceOf(element, SbbDatepickerPreviousDay); + assert.instanceOf(element, SbbDatepickerPreviousDayElement); }); }); @@ -26,12 +26,12 @@ describe('sbb-datepicker-previous-day', () => { `); - const element: SbbDatepickerPreviousDay = document.querySelector( + const element: SbbDatepickerPreviousDayElement = document.querySelector( 'sbb-datepicker-previous-day', ); const input: HTMLInputElement = document.querySelector('input'); await waitForLitRender(element); - assert.instanceOf(element, SbbDatepickerPreviousDay); + assert.instanceOf(element, SbbDatepickerPreviousDayElement); expect(input.value).to.be.equal('Su, 01.01.2023'); const changeSpy = new EventSpy('change', input); @@ -53,7 +53,9 @@ describe('sbb-datepicker-previous-day', () => { `); await waitForLitRender(doc); - const prevButton: SbbDatepickerPreviousDay = doc.querySelector('sbb-datepicker-previous-day'); + const prevButton: SbbDatepickerPreviousDayElement = doc.querySelector( + 'sbb-datepicker-previous-day', + ); const inputUpdated: EventSpy = new EventSpy( 'inputUpdated', document.querySelector('#parent'), @@ -63,7 +65,7 @@ describe('sbb-datepicker-previous-day', () => { expect(inputUpdated.count).to.be.equal(0); expect(prevButton.dataset.disabled).to.be.equal(''); - const picker: SbbDatepicker = document.createElement('sbb-datepicker'); + const picker: SbbDatepickerElement = document.createElement('sbb-datepicker'); picker.setAttribute('input', 'datepicker-input'); picker.setAttribute('id', 'datepicker'); picker.setAttribute('value', '01-01-2023'); @@ -85,7 +87,9 @@ describe('sbb-datepicker-previous-day', () => { `); await waitForLitRender(doc); - const prevButton: SbbDatepickerPreviousDay = doc.querySelector('sbb-datepicker-previous-day'); + const prevButton: SbbDatepickerPreviousDayElement = doc.querySelector( + 'sbb-datepicker-previous-day', + ); const inputUpdated: EventSpy = new EventSpy( 'inputUpdated', document.querySelector('#parent'), @@ -95,7 +99,7 @@ describe('sbb-datepicker-previous-day', () => { expect(inputUpdated.count).to.be.equal(0); expect(prevButton.dataset.disabled).to.be.equal(''); - const picker: SbbDatepicker = document.createElement('sbb-datepicker'); + const picker: SbbDatepickerElement = document.createElement('sbb-datepicker'); picker.setAttribute('input', 'datepicker-input'); picker.setAttribute('id', 'datepicker'); picker.setAttribute('value', '01-01-2023'); @@ -109,10 +113,10 @@ describe('sbb-datepicker-previous-day', () => { }); describe('in form field', () => { - let element: SbbDatepickerPreviousDay, input: HTMLInputElement; + let element: SbbDatepickerPreviousDayElement, input: HTMLInputElement; beforeEach(async () => { - const form: SbbFormField = await fixture(html` + const form: SbbFormFieldElement = await fixture(html` @@ -125,7 +129,7 @@ describe('sbb-datepicker-previous-day', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbDatepickerPreviousDay); + assert.instanceOf(element, SbbDatepickerPreviousDayElement); }); it('click', async () => { @@ -140,7 +144,7 @@ describe('sbb-datepicker-previous-day', () => { }); it('disabled due min equals to value', async () => { - const form: SbbFormField = await fixture(html` + const form: SbbFormFieldElement = await fixture(html` diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts index 875941b042..40a2622e14 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts @@ -1,16 +1,16 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbFormField } from '../../form-field'; +import { SbbFormFieldElement } from '../../form-field'; -import type { SbbDatepickerPreviousDay } from './datepicker-previous-day'; +import type { SbbDatepickerPreviousDayElement } from './datepicker-previous-day'; import '../datepicker'; import './datepicker-previous-day'; describe('sbb-datepicker-previous-day', () => { it('renders', async () => { - const page: SbbDatepickerPreviousDay = await fixture( + const page: SbbDatepickerPreviousDayElement = await fixture( html``, ); @@ -34,7 +34,9 @@ describe('sbb-datepicker-previous-day', () => { `); - const element: SbbDatepickerPreviousDay = page.querySelector('sbb-datepicker-previous-day'); + const element: SbbDatepickerPreviousDayElement = page.querySelector( + 'sbb-datepicker-previous-day', + ); expect(element).dom.to.be.equal(` { }); it('renders with datepicker and input disabled', async () => { - const page: SbbFormField = await fixture(html` + const page: SbbFormFieldElement = await fixture(html` @@ -62,12 +64,14 @@ describe('sbb-datepicker-previous-day', () => { `); - const element: SbbDatepickerPreviousDay = page.querySelector('sbb-datepicker-previous-day'); + const element: SbbDatepickerPreviousDayElement = page.querySelector( + 'sbb-datepicker-previous-day', + ); expect(element).to.have.attribute('data-disabled'); }); it('renders with datepicker and input readonly', async () => { - const page: SbbFormField = await fixture(html` + const page: SbbFormFieldElement = await fixture(html` @@ -75,7 +79,9 @@ describe('sbb-datepicker-previous-day', () => { `); - const element: SbbDatepickerPreviousDay = page.querySelector('sbb-datepicker-previous-day'); + const element: SbbDatepickerPreviousDayElement = page.querySelector( + 'sbb-datepicker-previous-day', + ); expect(element).to.have.attribute('data-disabled'); }); }); diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts index da8bb14128..55eed23072 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.ts @@ -17,7 +17,7 @@ import { datepickerControlRegisteredEventFactory, findPreviousAvailableDate, getDatePicker, - type SbbDatepicker, + type SbbDatepickerElement, } from '../datepicker'; import style from './datepicker-previous-day.scss?lit&inline'; @@ -28,7 +28,7 @@ import '../../icon'; * Combined with a `sbb-datepicker`, it can be used to move the date back. */ @customElement('sbb-datepicker-previous-day') -export class SbbDatepickerPreviousDay extends LitElement implements ButtonProperties { +export class SbbDatepickerPreviousDayElement extends LitElement implements ButtonProperties { public static override styles: CSSResultGroup = style; /** The name attribute to use for the button. */ @@ -38,7 +38,7 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper @property({ reflect: true, type: Boolean }) public negative = false; /** Datepicker reference. */ - @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepicker; + @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement; /** Whether the component is disabled due date equals to min date. */ @state() private _disabled = false; @@ -60,7 +60,7 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper }), ); - private _datePickerElement: SbbDatepicker; + private _datePickerElement: SbbDatepickerElement; private _dateAdapter: DateAdapter = defaultDateAdapter; @@ -105,7 +105,7 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper if (formField) { this.negative = isValidAttribute(formField, 'negative'); - // We can't use getInputElement of SbbFormField as async awaiting is not supported in connectedCallback. + // We can't use getInputElement of SbbFormFieldElement as async awaiting is not supported in connectedCallback. // We here only have to look for input. const inputElement = formField.querySelector('input'); @@ -122,7 +122,7 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper this._datePickerController?.abort(); } - private _init(picker?: string | SbbDatepicker): void { + private _init(picker?: string | SbbDatepickerElement): void { this._datePickerController?.abort(); this._datePickerController = new AbortController(); this._datePickerElement = getDatePicker(this, picker); @@ -132,7 +132,7 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper // assuming that the two components share the same parent element. this.parentElement?.addEventListener( 'inputUpdated', - (e: Event) => this._init(e.target as SbbDatepicker), + (e: Event) => this._init(e.target as SbbDatepickerElement), { once: true, signal: this._datePickerController.signal }, ); return; @@ -142,7 +142,7 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper this._datePickerElement.addEventListener( 'change', (event: Event) => { - this._setDisabledState(event.target as SbbDatepicker); + this._setDisabledState(event.target as SbbDatepickerElement); this._setAriaLabel(); }, { signal: this._datePickerController.signal }, @@ -150,7 +150,7 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper this._datePickerElement.addEventListener( 'datePickerUpdated', (event: Event) => { - this._setDisabledState(event.target as SbbDatepicker); + this._setDisabledState(event.target as SbbDatepickerElement); this._setAriaLabel(); }, { signal: this._datePickerController.signal }, @@ -171,7 +171,7 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper this._datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory()); } - private _setDisabledState(datepicker: SbbDatepicker): void { + private _setDisabledState(datepicker: SbbDatepickerElement): void { const pickerValueAsDate: Date = datepicker?.getValueAsDate(); if (!pickerValueAsDate) { @@ -244,6 +244,6 @@ export class SbbDatepickerPreviousDay extends LitElement implements ButtonProper declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-datepicker-previous-day': SbbDatepickerPreviousDay; + 'sbb-datepicker-previous-day': SbbDatepickerPreviousDayElement; } } diff --git a/src/components/datepicker/datepicker-previous-day/readme.md b/src/components/datepicker/datepicker-previous-day/readme.md index b25c416c66..792f1aa90f 100644 --- a/src/components/datepicker/datepicker-previous-day/readme.md +++ b/src/components/datepicker/datepicker-previous-day/readme.md @@ -35,8 +35,8 @@ both standalone or within the `sbb-form-field`, they must have the same parent e ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------- | ------- | -------------------------------------- | ------- | ----------------------------------------- | -| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | -| `datePicker` | `date-picker` | public | `string \| SbbDatepicker \| undefined` | | Datepicker reference. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------ | ------------- | ------- | --------------------------------------------- | ------- | ----------------------------------------- | +| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts index 2d2477e60e..07a957e2da 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.e2e.ts @@ -1,24 +1,24 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbCalendar } from '../../calendar'; +import { SbbCalendarElement } from '../../calendar'; import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing'; -import { SbbFormField } from '../../form-field'; -import { SbbTooltipTrigger, SbbTooltip } from '../../tooltip'; -import type { SbbDatepicker } from '../datepicker'; +import { SbbFormFieldElement } from '../../form-field'; +import { SbbTooltipTriggerElement, SbbTooltipElement } from '../../tooltip'; +import type { SbbDatepickerElement } from '../datepicker'; -import { SbbDatepickerToggle } from './datepicker-toggle'; +import { SbbDatepickerToggleElement } from './datepicker-toggle'; import '../datepicker'; describe('sbb-datepicker-toggle', () => { it('renders standalone', async () => { - const element: SbbDatepickerToggle = await fixture( + const element: SbbDatepickerToggleElement = await fixture( html``, ); - assert.instanceOf(element, SbbDatepickerToggle); + assert.instanceOf(element, SbbDatepickerToggleElement); - const tooltipTrigger: SbbTooltipTrigger = + const tooltipTrigger: SbbTooltipTriggerElement = element.shadowRoot.querySelector('sbb-tooltip-trigger'); expect(tooltipTrigger).to.have.attribute('disabled'); }); @@ -29,13 +29,13 @@ describe('sbb-datepicker-toggle', () => { `); - const element: SbbDatepickerToggle = document.querySelector('sbb-datepicker-toggle'); - assert.instanceOf(element, SbbDatepickerToggle); + const element: SbbDatepickerToggleElement = document.querySelector('sbb-datepicker-toggle'); + assert.instanceOf(element, SbbDatepickerToggleElement); - const didOpenEventSpy = new EventSpy(SbbTooltip.events.didOpen, element); - const tooltipTrigger: SbbTooltipTrigger = + const didOpenEventSpy = new EventSpy(SbbTooltipElement.events.didOpen, element); + const tooltipTrigger: SbbTooltipTriggerElement = element.shadowRoot.querySelector('sbb-tooltip-trigger'); - const tooltip: SbbTooltip = element.shadowRoot.querySelector('sbb-tooltip'); + const tooltip: SbbTooltipElement = element.shadowRoot.querySelector('sbb-tooltip'); await waitForLitRender(element); expect(tooltipTrigger).not.to.have.attribute('disabled'); @@ -53,17 +53,17 @@ describe('sbb-datepicker-toggle', () => { `); - const element: SbbDatepickerToggle = document.querySelector('sbb-datepicker-toggle'); - const didOpenEventSpy = new EventSpy(SbbTooltip.events.didOpen, element); - const tooltipTrigger: SbbTooltipTrigger = + const element: SbbDatepickerToggleElement = document.querySelector('sbb-datepicker-toggle'); + const didOpenEventSpy = new EventSpy(SbbTooltipElement.events.didOpen, element); + const tooltipTrigger: SbbTooltipTriggerElement = element.shadowRoot.querySelector('sbb-tooltip-trigger'); - const tooltip: SbbTooltip = element.shadowRoot.querySelector('sbb-tooltip'); + const tooltip: SbbTooltipElement = element.shadowRoot.querySelector('sbb-tooltip'); await waitForLitRender(element); - assert.instanceOf(element, SbbDatepickerToggle); + assert.instanceOf(element, SbbDatepickerToggleElement); expect(tooltipTrigger).not.to.have.attribute('disabled'); expect(tooltip).to.have.attribute('data-state', 'closed'); - (document.querySelector('sbb-datepicker-toggle') as SbbDatepickerToggle).open(); + (document.querySelector('sbb-datepicker-toggle') as SbbDatepickerToggleElement).open(); await waitForCondition(() => didOpenEventSpy.events.length === 1); @@ -79,18 +79,19 @@ describe('sbb-datepicker-toggle', () => { `); await waitForLitRender(doc); - const toggle: SbbDatepickerToggle = document.querySelector('sbb-datepicker-toggle'); + const toggle: SbbDatepickerToggleElement = document.querySelector('sbb-datepicker-toggle'); const inputUpdated: EventSpy = new EventSpy( 'inputUpdated', document.querySelector('#parent'), ); - const trigger: SbbTooltipTrigger = toggle.shadowRoot.querySelector('sbb-tooltip-trigger'); + const trigger: SbbTooltipTriggerElement = + toggle.shadowRoot.querySelector('sbb-tooltip-trigger'); // there's no datepicker, so no event and the tooltipTrigger is disabled due _datePickerElement not set expect(toggle).not.to.be.null; expect(inputUpdated.count).to.be.equal(0); expect(trigger.getAttribute('disabled')).to.be.equal(''); - const picker: SbbDatepicker = document.createElement('sbb-datepicker'); + const picker: SbbDatepickerElement = document.createElement('sbb-datepicker'); picker.setAttribute('input', 'datepicker-input'); picker.setAttribute('id', 'datepicker'); picker.setAttribute('value', '01-01-2023'); @@ -112,18 +113,19 @@ describe('sbb-datepicker-toggle', () => { `); await waitForLitRender(doc); - const toggle: SbbDatepickerToggle = document.querySelector('sbb-datepicker-toggle'); + const toggle: SbbDatepickerToggleElement = document.querySelector('sbb-datepicker-toggle'); const inputUpdated: EventSpy = new EventSpy( 'inputUpdated', document.querySelector('#parent'), ); - const trigger: SbbTooltipTrigger = toggle.shadowRoot.querySelector('sbb-tooltip-trigger'); + const trigger: SbbTooltipTriggerElement = + toggle.shadowRoot.querySelector('sbb-tooltip-trigger'); // there's no datepicker, so no event and the tooltipTrigger is disabled due _datePickerElement not set expect(toggle).not.to.be.null; expect(inputUpdated.count).to.be.equal(0); expect(trigger.getAttribute('disabled')).to.be.equal(''); - const picker: SbbDatepicker = document.createElement('sbb-datepicker'); + const picker: SbbDatepickerElement = document.createElement('sbb-datepicker'); picker.setAttribute('input', 'datepicker-input'); picker.setAttribute('id', 'datepicker'); picker.setAttribute('value', '01-01-2023'); @@ -136,29 +138,29 @@ describe('sbb-datepicker-toggle', () => { }); it('renders in form field, open calendar and change date', async () => { - const form: SbbFormField = await fixture(html` + const form: SbbFormFieldElement = await fixture(html` `); - const element: SbbDatepickerToggle = form.querySelector('sbb-datepicker-toggle'); + const element: SbbDatepickerToggleElement = form.querySelector('sbb-datepicker-toggle'); const input: HTMLInputElement = form.querySelector('input'); - const tooltip: SbbTooltip = element.shadowRoot.querySelector('sbb-tooltip'); + const tooltip: SbbTooltipElement = element.shadowRoot.querySelector('sbb-tooltip'); expect(tooltip).to.have.attribute('data-state', 'closed'); - const didOpenEventSpy = new EventSpy(SbbTooltip.events.didOpen, element); + const didOpenEventSpy = new EventSpy(SbbTooltipElement.events.didOpen, element); const changeSpy = new EventSpy('change', input); const blurSpy = new EventSpy('blur', input); - assert.instanceOf(element, SbbDatepickerToggle); + assert.instanceOf(element, SbbDatepickerToggleElement); - const tooltipTrigger: SbbTooltipTrigger = + const tooltipTrigger: SbbTooltipTriggerElement = element.shadowRoot.querySelector('sbb-tooltip-trigger'); tooltipTrigger.click(); await waitForCondition(() => didOpenEventSpy.events.length === 1); expect(tooltip).to.have.attribute('data-state', 'opened'); - const calendar: SbbCalendar = element.shadowRoot.querySelector('sbb-calendar'); + const calendar: SbbCalendarElement = element.shadowRoot.querySelector('sbb-calendar'); calendar.dispatchEvent( new CustomEvent('dateSelected', { detail: new Date('2022-01-01'), diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts index bdb68fe646..5f9db60593 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.spec.ts @@ -1,9 +1,9 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbFormField } from '../../form-field'; +import { SbbFormFieldElement } from '../../form-field'; -import type { SbbDatepickerToggle } from './datepicker-toggle'; +import type { SbbDatepickerToggleElement } from './datepicker-toggle'; import '../datepicker'; import './datepicker-toggle'; @@ -40,14 +40,14 @@ describe('sbb-datepicker-toggle', () => { describe('renders in form-field', () => { it('renders in form-field', async () => { - const page: SbbFormField = await fixture(html` + const page: SbbFormFieldElement = await fixture(html` `); - const element: SbbDatepickerToggle = page.querySelector('sbb-datepicker-toggle'); + const element: SbbDatepickerToggleElement = page.querySelector('sbb-datepicker-toggle'); expect(element).dom.to.be.equal( ``, ); @@ -77,14 +77,14 @@ describe('sbb-datepicker-toggle', () => { }); it('renders in disabled form-field', async () => { - const page: SbbFormField = await fixture(html` + const page: SbbFormFieldElement = await fixture(html` `); - const element: SbbDatepickerToggle = page.querySelector('sbb-datepicker-toggle'); + const element: SbbDatepickerToggleElement = page.querySelector('sbb-datepicker-toggle'); expect(element).dom.to.be.equal( ``, ); @@ -122,7 +122,7 @@ describe('sbb-datepicker-toggle', () => { `); - const element: SbbDatepickerToggle = page.querySelector('sbb-datepicker-toggle'); + const element: SbbDatepickerToggleElement = page.querySelector('sbb-datepicker-toggle'); expect(element).dom.to.be.equal( ``, ); diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts index 1a467e178f..c9c0d80c98 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts @@ -16,7 +16,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { waitForComponentsReady } from '../../../storybook/testing/wait-for-components-ready'; import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position'; import { sbbSpread } from '../../core/dom'; -import { SbbTooltipTrigger } from '../../tooltip'; +import { SbbTooltipTriggerElement } from '../../tooltip'; import '../../form-field'; import '../datepicker'; @@ -55,7 +55,7 @@ const defaultArgs: Args = { // Story interaction executed after the story renders const playStory = async ({ canvasElement }): Promise => { const canvas = within(canvasElement); - const queryTrigger = (): SbbTooltipTrigger => + const queryTrigger = (): SbbTooltipTriggerElement => canvas.getByTestId('toggle').shadowRoot!.querySelector('sbb-tooltip-trigger')!; await waitForComponentsReady(queryTrigger); diff --git a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts index 34dfbdbd44..4f425e810f 100644 --- a/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts +++ b/src/components/datepicker/datepicker-toggle/datepicker-toggle.ts @@ -2,7 +2,7 @@ import { CSSResultGroup, html, LitElement, nothing, PropertyValues, TemplateResu import { customElement, property, state } from 'lit/decorators.js'; import { ref } from 'lit/directives/ref.js'; -import type { SbbCalendar } from '../../calendar'; +import type { SbbCalendarElement } from '../../calendar'; import { sbbInputModalityDetector } from '../../core/a11y'; import { isValidAttribute, setAttribute } from '../../core/dom'; import { @@ -11,12 +11,12 @@ import { languageChangeHandlerAspect, } from '../../core/eventing'; import { i18nShowCalendar } from '../../core/i18n'; -import type { SbbTooltip, SbbTooltipTrigger } from '../../tooltip'; +import type { SbbTooltipElement, SbbTooltipTriggerElement } from '../../tooltip'; import { datepickerControlRegisteredEventFactory, getDatePicker, InputUpdateEvent, - type SbbDatepicker, + type SbbDatepickerElement, } from '../datepicker'; import '../../calendar'; import '../../tooltip'; @@ -27,11 +27,11 @@ import style from './datepicker-toggle.scss?lit&inline'; * Combined with a `sbb-datepicker`, it can be used to select a date from a `sbb-calendar`. */ @customElement('sbb-datepicker-toggle') -export class SbbDatepickerToggle extends LitElement { +export class SbbDatepickerToggleElement extends LitElement { public static override styles: CSSResultGroup = style; /** Datepicker reference. */ - @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepicker; + @property({ attribute: 'date-picker' }) public datePicker?: string | SbbDatepickerElement; /** Whether the animation is disabled. */ @property({ attribute: 'disable-animation', type: Boolean }) public disableAnimation = false; @@ -47,13 +47,13 @@ export class SbbDatepickerToggle extends LitElement { @state() private _currentLanguage = documentLanguage(); - private _datePickerElement: SbbDatepicker; + private _datePickerElement: SbbDatepickerElement; - private _calendarElement: SbbCalendar; + private _calendarElement: SbbCalendarElement; - private _triggerElement: SbbTooltipTrigger; + private _triggerElement: SbbTooltipTriggerElement; - private _tooltipElement: SbbTooltip; + private _tooltipElement: SbbTooltipElement; private _datePickerController: AbortController; @@ -97,7 +97,7 @@ export class SbbDatepickerToggle extends LitElement { this._handlerRepository.disconnect(); } - private _init(datePicker?: string | SbbDatepicker): void { + private _init(datePicker?: string | SbbDatepickerElement): void { this._datePickerController?.abort(); this._datePickerController = new AbortController(); this._datePickerElement = getDatePicker(this, datePicker); @@ -106,7 +106,7 @@ export class SbbDatepickerToggle extends LitElement { // assuming that the two components share the same parent element. this.parentElement.addEventListener( 'inputUpdated', - (e: Event) => this._init(e.target as SbbDatepicker), + (e: Event) => this._init(e.target as SbbDatepickerElement), { once: true, signal: this._datePickerController.signal }, ); return; @@ -115,7 +115,7 @@ export class SbbDatepickerToggle extends LitElement { this._datePickerElement?.addEventListener( 'inputUpdated', (event: CustomEvent) => { - this._datePickerElement = event.target as SbbDatepicker; + this._datePickerElement = event.target as SbbDatepickerElement; this._disabled = event.detail.disabled || event.detail.readonly; this._min = event.detail.min; this._max = event.detail.max; @@ -132,13 +132,13 @@ export class SbbDatepickerToggle extends LitElement { this._datePickerElement?.addEventListener( 'datePickerUpdated', (event: Event) => - this._configureCalendar(this._calendarElement, event.target as SbbDatepicker), + this._configureCalendar(this._calendarElement, event.target as SbbDatepickerElement), { signal: this._datePickerController.signal }, ); this._datePickerElement.dispatchEvent(datepickerControlRegisteredEventFactory()); } - private _configureCalendar(calendar: SbbCalendar, datepicker: SbbDatepicker): void { + private _configureCalendar(calendar: SbbCalendarElement, datepicker: SbbDatepickerElement): void { if (!calendar || !datepicker) { return; } @@ -147,11 +147,11 @@ export class SbbDatepickerToggle extends LitElement { } private _datePickerChanged(event: Event): void { - this._datePickerElement = event.target as SbbDatepicker; + this._datePickerElement = event.target as SbbDatepickerElement; this._calendarElement.selectedDate = this._datePickerElement.getValueAsDate(); } - private _assignCalendar(calendar: SbbCalendar): void { + private _assignCalendar(calendar: SbbCalendarElement): void { if (this._calendarElement && this._calendarElement === calendar) { return; } @@ -198,7 +198,7 @@ export class SbbDatepickerToggle extends LitElement { ?disabled=${!this._datePickerElement || this._disabled} ?negative=${this.negative} data-icon-small - ${ref((el: SbbTooltipTrigger) => (this._triggerElement = el))} + ${ref((el: SbbTooltipTriggerElement) => (this._triggerElement = el))} > this._calendarElement.resetPosition()} @@ -209,7 +209,7 @@ export class SbbDatepickerToggle extends LitElement { .trigger=${this._triggerElement} ?disable-animation=${this.disableAnimation} hide-close-button - ${ref((el: SbbTooltip) => (this._tooltipElement = el))} + ${ref((el: SbbTooltipElement) => (this._tooltipElement = el))} > this._assignCalendar(calendar))} + ${ref((calendar: SbbCalendarElement) => this._assignCalendar(calendar))} > `; @@ -232,6 +232,6 @@ export class SbbDatepickerToggle extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-datepicker-toggle': SbbDatepickerToggle; + 'sbb-datepicker-toggle': SbbDatepickerToggleElement; } } diff --git a/src/components/datepicker/datepicker-toggle/readme.md b/src/components/datepicker/datepicker-toggle/readme.md index 9de5be57ac..b3093ecb9e 100644 --- a/src/components/datepicker/datepicker-toggle/readme.md +++ b/src/components/datepicker/datepicker-toggle/readme.md @@ -36,11 +36,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 \| SbbDatepicker \| undefined` | | Datepicker reference. | -| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is disabled. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| Name | Attribute | Privacy | Type | Default | Description | +| ------------------ | ------------------- | ------- | --------------------------------------------- | ------- | ---------------------------------- | +| `datePicker` | `date-picker` | public | `string \| SbbDatepickerElement \| undefined` | | Datepicker reference. | +| `disableAnimation` | `disable-animation` | public | `boolean` | `false` | Whether the animation is disabled. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Methods diff --git a/src/components/datepicker/datepicker/datepicker.e2e.ts b/src/components/datepicker/datepicker/datepicker.e2e.ts index 3be004a5e5..8048aa63ce 100644 --- a/src/components/datepicker/datepicker/datepicker.e2e.ts +++ b/src/components/datepicker/datepicker/datepicker.e2e.ts @@ -6,14 +6,14 @@ import { html } from 'lit/static-html.js'; import { i18nDateChangedTo } from '../../core/i18n'; import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing'; -import { SbbDatepicker } from './datepicker'; +import { SbbDatepickerElement } from './datepicker'; import '../../form-field'; describe('sbb-datepicker', () => { it('renders', async () => { const element = await fixture(html``); - assert.instanceOf(element, SbbDatepicker); + assert.instanceOf(element, SbbDatepickerElement); }); it('renders and formats date', async () => { @@ -50,7 +50,7 @@ describe('sbb-datepicker', () => { }); const commonBehaviorTest: (template: TemplateResult) => void = (template: TemplateResult) => { - let element: SbbDatepicker, input: HTMLInputElement, button: HTMLButtonElement; + let element: SbbDatepickerElement, input: HTMLInputElement, button: HTMLButtonElement; beforeEach(async () => { await fixture(template); @@ -324,7 +324,7 @@ describe('sbb-datepicker', () => { it('renders', async () => { const page = await fixture(template); - assert.instanceOf(page.querySelector('sbb-datepicker'), SbbDatepicker); + assert.instanceOf(page.querySelector('sbb-datepicker'), SbbDatepickerElement); expect(document.querySelector('input')).dom.to.be.equal( '', ); @@ -344,7 +344,7 @@ describe('sbb-datepicker', () => { it('renders', async () => { const page = await fixture(template); - assert.instanceOf(page.querySelector('sbb-datepicker'), SbbDatepicker); + assert.instanceOf(page.querySelector('sbb-datepicker'), SbbDatepickerElement); expect(document.querySelector('input')).dom.to.be.equal( '', ); diff --git a/src/components/datepicker/datepicker/datepicker.spec.ts b/src/components/datepicker/datepicker/datepicker.spec.ts index 4603960eea..20580be984 100644 --- a/src/components/datepicker/datepicker/datepicker.spec.ts +++ b/src/components/datepicker/datepicker/datepicker.spec.ts @@ -3,10 +3,10 @@ import { html } from 'lit/static-html.js'; import { NativeDateAdapter } from '../../core/datetime'; import { findInput } from '../../core/dom'; -import { SbbFormField } from '../../form-field'; +import { SbbFormFieldElement } from '../../form-field'; import { - SbbDatepicker, + SbbDatepickerElement, getDatePicker, getAvailableDate, findPreviousAvailableDate, @@ -25,14 +25,14 @@ describe('sbb-datepicker', () => { describe('getDatePicker', () => { it('returns the datepicker if no trigger', async () => { - const page: SbbFormField = await fixture(html` + const page: SbbFormFieldElement = await fixture(html` `); - const picker: SbbDatepicker = page.querySelector('sbb-datepicker'); + const picker: SbbDatepickerElement = page.querySelector('sbb-datepicker'); const elementNext = page.querySelector('sbb-datepicker-next-day'); expect(getDatePicker(elementNext)).to.equal(picker); }); @@ -45,7 +45,7 @@ describe('getDatePicker', () => { `); - const picker: SbbDatepicker = page.querySelector('#picker'); + const picker: SbbDatepickerElement = page.querySelector('#picker'); const elementPrevious = page.querySelector('sbb-datepicker-previous-day'); expect(getDatePicker(elementPrevious, 'picker')).to.equal(picker); }); @@ -53,13 +53,13 @@ describe('getDatePicker', () => { describe('getInput', () => { it('returns the input if no trigger', async () => { - const page: SbbFormField = await fixture(html` + const page: SbbFormFieldElement = await fixture(html` `); - const element: SbbDatepicker = page.querySelector('sbb-datepicker'); + const element: SbbDatepickerElement = page.querySelector('sbb-datepicker'); const input: HTMLInputElement = page.querySelector('input'); expect(findInput(element)).to.equal(input); }); @@ -72,7 +72,7 @@ describe('getInput', () => { `); - const picker: SbbDatepicker = page.querySelector('sbb-datepicker'); + const picker: SbbDatepickerElement = page.querySelector('sbb-datepicker'); const input: HTMLInputElement = page.querySelector('input'); expect(findInput(picker, 'input')).to.equal(input); }); diff --git a/src/components/datepicker/datepicker/datepicker.stories.ts b/src/components/datepicker/datepicker/datepicker.stories.ts index f5187b3930..1cdd7817a5 100644 --- a/src/components/datepicker/datepicker/datepicker.stories.ts +++ b/src/components/datepicker/datepicker/datepicker.stories.ts @@ -11,7 +11,7 @@ import { waitForComponentsReady } from '../../../storybook/testing/wait-for-comp import { waitForStablePosition } from '../../../storybook/testing/wait-for-stable-position'; import { sbbSpread } from '../../core/dom'; -import { SbbDatepicker } from './datepicker'; +import { SbbDatepickerElement } from './datepicker'; import readme from './readme.md?raw'; import '../datepicker-next-day'; @@ -511,7 +511,7 @@ const meta: Meta = { parameters: { chromatic: { disableSnapshot: false }, actions: { - handles: ['input', 'change', SbbDatepicker.events.validationChange], + handles: ['input', 'change', SbbDatepickerElement.events.validationChange], }, backgrounds: { disable: true, diff --git a/src/components/datepicker/datepicker/datepicker.ts b/src/components/datepicker/datepicker/datepicker.ts index 4244323d03..71f04500c1 100644 --- a/src/components/datepicker/datepicker/datepicker.ts +++ b/src/components/datepicker/datepicker/datepicker.ts @@ -19,9 +19,9 @@ import { import { i18nDateChangedTo, i18nDatePickerPlaceholder } from '../../core/i18n'; import { ValidationChangeEvent, SbbDateLike } from '../../core/interfaces'; import { AgnosticMutationObserver } from '../../core/observers'; -import type { SbbDatepickerNextDay } from '../datepicker-next-day'; -import type { SbbDatepickerPreviousDay } from '../datepicker-previous-day'; -import type { SbbDatepickerToggle } from '../datepicker-toggle'; +import type { SbbDatepickerNextDayElement } from '../datepicker-next-day'; +import type { SbbDatepickerPreviousDayElement } from '../datepicker-previous-day'; +import type { SbbDatepickerToggleElement } from '../datepicker-toggle'; import style from './datepicker.scss?lit&inline'; @@ -36,28 +36,31 @@ export interface InputUpdateEvent { } /** - * Given a SbbDatepickerPreviousDay, a SbbDatepickerNextDay or a SbbDatepickerToggle component, - * it returns the related SbbDatepicker reference, if exists. - * @param element The element potentially connected to the SbbDatepicker. + * Given a SbbDatepickerPreviousDayElement, a SbbDatepickerNextDayElement or a SbbDatepickerToggleElement component, + * it returns the related SbbDatepickerElement reference, if exists. + * @param element The element potentially connected to the SbbDatepickerElement. * @param trigger The id or the reference of the SbbDatePicker. */ export function getDatePicker( - element: SbbDatepickerPreviousDay | SbbDatepickerNextDay | SbbDatepickerToggle, + element: + | SbbDatepickerPreviousDayElement + | SbbDatepickerNextDayElement + | SbbDatepickerToggleElement, trigger?: string | HTMLElement, -): SbbDatepicker { +): SbbDatepickerElement { if (!trigger) { const parent = element.closest?.('sbb-form-field'); return parent?.querySelector('sbb-datepicker'); } - return findReferencedElement(trigger); + return findReferencedElement(trigger); } /** - * Returns the first available date before or after a given one, considering the SbbDatepicker `dateFilter` property. + * Returns the first available date before or after a given one, considering the SbbDatepickerElement `dateFilter` property. * @param date The starting date for calculations. * @param delta The number of days to add/subtract from the starting one. - * @param dateFilter The dateFilter function from the SbbDatepicker. + * @param dateFilter The dateFilter function from the SbbDatepickerElement. * @param dateAdapter The adapter class. */ export function getAvailableDate( @@ -79,9 +82,9 @@ export function getAvailableDate( /** * Calculates the first available date before the given one, - * considering the SbbDatepicker `dateFilter` property and `min` parameter (e.g. from the self-named input's attribute). + * considering the SbbDatepickerElement `dateFilter` property and `min` parameter (e.g. from the self-named input's attribute). * @param date The starting date for calculations. - * @param dateFilter The dateFilter function from the SbbDatepicker. + * @param dateFilter The dateFilter function from the SbbDatepickerElement. * @param dateAdapter The adapter class. * @param min The minimum value to consider in calculations. */ @@ -105,9 +108,9 @@ export function findPreviousAvailableDate( /** * Calculates the first available date after the given one, - * considering the SbbDatepicker `dateFilter` property and `max` parameter (e.g. from the self-named input's attribute). + * considering the SbbDatepickerElement `dateFilter` property and `max` parameter (e.g. from the self-named input's attribute). * @param date The starting date for calculations. - * @param dateFilter The dateFilter function from the SbbDatepicker. + * @param dateFilter The dateFilter function from the SbbDatepickerElement. * @param dateAdapter The adapter class. * @param max The maximum value to consider in calculations. */ @@ -130,10 +133,10 @@ export function findNextAvailableDate( } /** - * Checks if the provided date is a valid one, considering the SbbDatepicker `dateFilter` property + * Checks if the provided date is a valid one, considering the SbbDatepickerElement `dateFilter` property * and `min` and `max` parameters (e.g. from the self-named input's attributes). * @param date The starting date for calculations. - * @param dateFilter The dateFilter function from the SbbDatepicker. + * @param dateFilter The dateFilter function from the SbbDatepickerElement. * @param min The minimum value to consider in calculations. * @param max The maximum value to consider in calculations. */ @@ -174,7 +177,7 @@ export const datepickerControlRegisteredEventFactory = (): CustomEvent => * @event {CustomEvent} validationChange - Emits whenever the internal validation state changes. */ @customElement('sbb-datepicker') -export class SbbDatepicker extends LitElement { +export class SbbDatepickerElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { didChange: 'didChange', @@ -203,27 +206,27 @@ export class SbbDatepicker extends LitElement { /** * @deprecated only used for React. Will probably be removed once React 19 is available. */ - private _didChange: EventEmitter = new EventEmitter(this, SbbDatepicker.events.didChange, { + private _didChange: EventEmitter = new EventEmitter(this, SbbDatepickerElement.events.didChange, { bubbles: true, cancelable: true, }); /** Notifies that the connected input has changes. */ - private _change: EventEmitter = new EventEmitter(this, SbbDatepicker.events.change, { + private _change: EventEmitter = new EventEmitter(this, SbbDatepickerElement.events.change, { bubbles: true, }); /** Notifies that the attributes of the input connected to the datepicker have changes. */ private _inputUpdated: EventEmitter = new EventEmitter( this, - SbbDatepicker.events.inputUpdated, + SbbDatepickerElement.events.inputUpdated, { bubbles: true, cancelable: true }, ); /** Notifies that the attributes of the datepicker have changes. */ private _datePickerUpdated: EventEmitter = new EventEmitter( this, - SbbDatepicker.events.datePickerUpdated, + SbbDatepickerElement.events.datePickerUpdated, { bubbles: true, cancelable: true, @@ -233,7 +236,7 @@ export class SbbDatepicker extends LitElement { /** Emits whenever the internal validation state changes. */ private _validationChange: EventEmitter = new EventEmitter( this, - SbbDatepicker.events.validationChange, + SbbDatepickerElement.events.validationChange, ); @state() private get _inputElement(): HTMLInputElement | null { @@ -494,6 +497,6 @@ export class SbbDatepicker extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-datepicker': SbbDatepicker; + 'sbb-datepicker': SbbDatepickerElement; } } diff --git a/src/components/datepicker/datepicker/readme.md b/src/components/datepicker/datepicker/readme.md index e2f7f4afe3..00ed6b4c06 100644 --- a/src/components/datepicker/datepicker/readme.md +++ b/src/components/datepicker/datepicker/readme.md @@ -64,7 +64,7 @@ In particular, `dateParser` is the function that the component uses internally t while the `format` function is the one that the component uses internally to display a given `Date` object as a string. ```ts -// datePicker is a SbbDatepicker element +// datePicker is a SbbDatepickerElement element datePicker.dateParser = (value: string) => { // You should implement some kind of input validation if (!value || !isValid(value)) { diff --git a/src/components/dialog/dialog.e2e.ts b/src/components/dialog/dialog.e2e.ts index 991af56537..926231ec71 100644 --- a/src/components/dialog/dialog.e2e.ts +++ b/src/components/dialog/dialog.e2e.ts @@ -5,14 +5,14 @@ import { html } from 'lit/static-html.js'; import { i18nDialog } from '../core/i18n'; import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing'; -import { SbbDialog } from './dialog'; +import { SbbDialogElement } from './dialog'; import '../button'; import '../icon'; import '../title'; -async function openDialog(element: SbbDialog): Promise { - const willOpen = new EventSpy(SbbDialog.events.willOpen); - const didOpen = new EventSpy(SbbDialog.events.didOpen); +async function openDialog(element: SbbDialogElement): Promise { + const willOpen = new EventSpy(SbbDialogElement.events.willOpen); + const didOpen = new EventSpy(SbbDialogElement.events.didOpen); element.open(); await waitForLitRender(element); @@ -29,7 +29,7 @@ async function openDialog(element: SbbDialog): Promise { } describe('sbb-dialog', () => { - let element: SbbDialog, ariaLiveRef: HTMLElement; + let element: SbbDialogElement, ariaLiveRef: HTMLElement; beforeEach(async () => { await setViewport({ width: 900, height: 600 }); @@ -43,7 +43,7 @@ describe('sbb-dialog', () => { }); it('renders', () => { - assert.instanceOf(element, SbbDialog); + assert.instanceOf(element, SbbDialogElement); }); it('opens the dialog', async () => { @@ -51,8 +51,8 @@ describe('sbb-dialog', () => { }); it('closes the dialog', async () => { - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); await openDialog(element); @@ -74,8 +74,8 @@ describe('sbb-dialog', () => { }); it('closes the dialog on backdrop click', async () => { - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); await openDialog(element); @@ -96,8 +96,8 @@ describe('sbb-dialog', () => { }); it('does not close the dialog on backdrop click', async () => { - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); element.backdropAction = 'none'; await waitForLitRender(element); @@ -119,8 +119,8 @@ describe('sbb-dialog', () => { }); it('does not close the dialog on backdrop click if pointerdown is on dialog', async () => { - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); await openDialog(element); @@ -141,8 +141,8 @@ describe('sbb-dialog', () => { }); it('does not close the dialog on backdrop click if pointerup is on dialog', async () => { - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); await openDialog(element); @@ -164,8 +164,8 @@ describe('sbb-dialog', () => { it('closes the dialog on close button click', async () => { const closeButton = element.shadowRoot.querySelector('[sbb-dialog-close]') as HTMLElement; - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); await openDialog(element); @@ -184,8 +184,8 @@ describe('sbb-dialog', () => { }); it('closes the dialog on Esc key press', async () => { - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); await openDialog(element); @@ -240,14 +240,14 @@ describe('sbb-dialog', () => { `); - const willOpen = new EventSpy(SbbDialog.events.willOpen); - const didOpen = new EventSpy(SbbDialog.events.didOpen); - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); + const willOpen = new EventSpy(SbbDialogElement.events.willOpen); + const didOpen = new EventSpy(SbbDialogElement.events.didOpen); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); await openDialog(element); - const stackedDialog = document.querySelector('#stacked-dialog') as SbbDialog; + const stackedDialog = document.querySelector('#stacked-dialog') as SbbDialogElement; stackedDialog.open(); await waitForLitRender(element); @@ -309,11 +309,11 @@ describe('sbb-dialog', () => { `); - const willOpen = new EventSpy(SbbDialog.events.willOpen); - const didOpen = new EventSpy(SbbDialog.events.didOpen); - const willClose = new EventSpy(SbbDialog.events.willClose); - const didClose = new EventSpy(SbbDialog.events.didClose); - const innerElement = element.querySelector('sbb-dialog') as SbbDialog; + const willOpen = new EventSpy(SbbDialogElement.events.willOpen); + const didOpen = new EventSpy(SbbDialogElement.events.didOpen); + const willClose = new EventSpy(SbbDialogElement.events.willClose); + const didClose = new EventSpy(SbbDialogElement.events.didClose); + const innerElement = element.querySelector('sbb-dialog') as SbbDialogElement; await openDialog(element); diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts index e07adf7e93..611a502638 100644 --- a/src/components/dialog/dialog.stories.ts +++ b/src/components/dialog/dialog.stories.ts @@ -11,7 +11,7 @@ import { waitForStablePosition } from '../../storybook/testing/wait-for-stable-p import { sbbSpread } from '../core/dom'; import sampleImages from '../core/images'; -import { SbbDialog } from './dialog'; +import { SbbDialogElement } from './dialog'; import readme from './readme.md?raw'; import '../button'; @@ -125,7 +125,7 @@ const basicArgs: Args = { }; const openDialog = (_event, id): void => { - const dialog = document.getElementById(id) as SbbDialog; + const dialog = document.getElementById(id) as SbbDialogElement; dialog.open(); }; @@ -390,11 +390,11 @@ const meta: Meta = { chromatic: { disableSnapshot: false }, actions: { handles: [ - SbbDialog.events.willOpen, - SbbDialog.events.didOpen, - SbbDialog.events.willClose, - SbbDialog.events.didClose, - SbbDialog.events.backClick, + SbbDialogElement.events.willOpen, + SbbDialogElement.events.didOpen, + SbbDialogElement.events.willClose, + SbbDialogElement.events.didClose, + SbbDialogElement.events.backClick, ], }, backgrounds: { diff --git a/src/components/dialog/dialog.ts b/src/components/dialog/dialog.ts index 72d9fcb970..5082013606 100644 --- a/src/components/dialog/dialog.ts +++ b/src/components/dialog/dialog.ts @@ -28,7 +28,7 @@ import style from './dialog.scss?lit&inline'; import '../button'; // A global collection of existing dialogs -const dialogRefs: SbbDialog[] = []; +const dialogRefs: SbbDialogElement[] = []; let nextId = 0; /** @@ -44,7 +44,7 @@ let nextId = 0; * @event {CustomEvent} requestBackAction - Emits whenever the back button is clicked. */ @customElement('sbb-dialog') -export class SbbDialog extends LitElement { +export class SbbDialogElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { willOpen: 'willOpen', @@ -129,19 +129,22 @@ export class SbbDialog extends LitElement { private _ariaLiveRefToggle = false; /** Emits whenever the `sbb-dialog` starts the opening transition. */ - private _willOpen: EventEmitter = new EventEmitter(this, SbbDialog.events.willOpen); + private _willOpen: EventEmitter = new EventEmitter(this, SbbDialogElement.events.willOpen); /** Emits whenever the `sbb-dialog` is opened. */ - private _didOpen: EventEmitter = new EventEmitter(this, SbbDialog.events.didOpen); + private _didOpen: EventEmitter = new EventEmitter(this, SbbDialogElement.events.didOpen); /** Emits whenever the `sbb-dialog` begins the closing transition. */ - private _willClose: EventEmitter = new EventEmitter(this, SbbDialog.events.willClose); + private _willClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.willClose); /** Emits whenever the `sbb-dialog` is closed. */ - private _didClose: EventEmitter = new EventEmitter(this, SbbDialog.events.didClose); + private _didClose: EventEmitter = new EventEmitter(this, SbbDialogElement.events.didClose); /** Emits whenever the back button is clicked. */ - private _backClick: EventEmitter = new EventEmitter(this, SbbDialog.events.backClick); + private _backClick: EventEmitter = new EventEmitter( + this, + SbbDialogElement.events.backClick, + ); private _dialog: HTMLDivElement; private _dialogWrapperElement: HTMLElement; @@ -187,7 +190,7 @@ export class SbbDialog extends LitElement { this._willOpen.emit(); this._state = 'opening'; // Add this dialog to the global collection - dialogRefs.push(this as SbbDialog); + dialogRefs.push(this as SbbDialogElement); this._setOverflowAttribute(); // Disable scrolling for content below the dialog this._scrollHandler.disableScroll(); @@ -257,7 +260,7 @@ export class SbbDialog extends LitElement { } private _removeInstanceFromGlobalCollection(): void { - dialogRefs.splice(dialogRefs.indexOf(this as SbbDialog), 1); + dialogRefs.splice(dialogRefs.indexOf(this as SbbDialogElement), 1); } private _attachWindowEvents(): void { @@ -483,6 +486,6 @@ export class SbbDialog extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-dialog': SbbDialog; + 'sbb-dialog': SbbDialogElement; } } diff --git a/src/components/divider/divider.e2e.ts b/src/components/divider/divider.e2e.ts index df991ccaa4..0e7d474684 100644 --- a/src/components/divider/divider.e2e.ts +++ b/src/components/divider/divider.e2e.ts @@ -1,11 +1,11 @@ import { assert, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbDivider } from './divider'; +import { SbbDividerElement } from './divider'; describe('sbb-divider', () => { it('renders', async () => { - const element: SbbDivider = await fixture(html``); - assert.instanceOf(element, SbbDivider); + const element: SbbDividerElement = await fixture(html``); + assert.instanceOf(element, SbbDividerElement); }); }); diff --git a/src/components/divider/divider.ts b/src/components/divider/divider.ts index 4f94425259..970117ada1 100644 --- a/src/components/divider/divider.ts +++ b/src/components/divider/divider.ts @@ -10,7 +10,7 @@ import style from './divider.scss?lit&inline'; * It displays a divider between sections. */ @customElement('sbb-divider') -export class SbbDivider extends LitElement { +export class SbbDividerElement extends LitElement { public static override styles: CSSResultGroup = style; /** Negative coloring variant flag */ @@ -30,6 +30,6 @@ export class SbbDivider extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-divider': SbbDivider; + 'sbb-divider': SbbDividerElement; } } diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.e2e.ts b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.e2e.ts index f96fedaa59..cdc477578f 100644 --- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.e2e.ts +++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.e2e.ts @@ -1,15 +1,15 @@ import { assert, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbExpansionPanelContent } from './expansion-panel-content'; +import { SbbExpansionPanelContentElement } from './expansion-panel-content'; describe('sbb-expansion-panel-content', () => { - let element: SbbExpansionPanelContent; + let element: SbbExpansionPanelContentElement; it('renders', async () => { element = await fixture( html`Content`, ); - assert.instanceOf(element, SbbExpansionPanelContent); + assert.instanceOf(element, SbbExpansionPanelContentElement); }); }); diff --git a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.ts b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.ts index 9f348d6b95..c9670acbfb 100644 --- a/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.ts +++ b/src/components/expansion-panel/expansion-panel-content/expansion-panel-content.ts @@ -11,7 +11,7 @@ import style from './expansion-panel-content.scss?lit&inline'; * @slot - Use the unnamed slot to add content to the `sbb-expansion-panel`. */ @customElement('sbb-expansion-panel-content') -export class SbbExpansionPanelContent extends LitElement { +export class SbbExpansionPanelContentElement extends LitElement { public static override styles: CSSResultGroup = style; protected override render(): TemplateResult { @@ -29,6 +29,6 @@ export class SbbExpansionPanelContent extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-expansion-panel-content': SbbExpansionPanelContent; + 'sbb-expansion-panel-content': SbbExpansionPanelContentElement; } } diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts index 4a93d63c5a..d075598b00 100644 --- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts +++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.e2e.ts @@ -3,21 +3,21 @@ import { html } from 'lit/static-html.js'; import { EventSpy } from '../../core/testing'; -import { SbbExpansionPanelHeader } from './expansion-panel-header'; +import { SbbExpansionPanelHeaderElement } from './expansion-panel-header'; describe('sbb-expansion-panel-header', () => { - let element: SbbExpansionPanelHeader; + let element: SbbExpansionPanelHeaderElement; beforeEach(async () => { element = await fixture(html`Header`); }); it('renders', async () => { - assert.instanceOf(element, SbbExpansionPanelHeader); + assert.instanceOf(element, SbbExpansionPanelHeaderElement); }); it('should emit event on click', async () => { - const spy = new EventSpy(SbbExpansionPanelHeader.events.toggleExpanded); + const spy = new EventSpy(SbbExpansionPanelHeaderElement.events.toggleExpanded); element.click(); expect(spy.count).to.be.greaterThan(0); }); @@ -26,7 +26,7 @@ describe('sbb-expansion-panel-header', () => { element = await fixture( html`Header`, ); - const spy = new EventSpy(SbbExpansionPanelHeader.events.toggleExpanded); + const spy = new EventSpy(SbbExpansionPanelHeaderElement.events.toggleExpanded); element.click(); expect(spy.count).not.to.be.greaterThan(0); }); diff --git a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts index dcd9fd7a07..1eb7615af3 100644 --- a/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts +++ b/src/components/expansion-panel/expansion-panel-header/expansion-panel-header.ts @@ -11,7 +11,7 @@ import { ConnectedAbortController, } from '../../core/eventing'; import { resolveButtonRenderVariables } from '../../core/interfaces'; -import type { SbbExpansionPanel } from '../expansion-panel'; +import type { SbbExpansionPanelElement } from '../expansion-panel'; import style from './expansion-panel-header.scss?lit&inline'; import '../../icon'; @@ -24,7 +24,7 @@ import '../../icon'; * @event {CustomEvent} toggleExpanded - Notifies that the `sbb-expansion-panel` has to expand. */ @customElement('sbb-expansion-panel-header') -export class SbbExpansionPanelHeader extends LitElement { +export class SbbExpansionPanelHeaderElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { toggleExpanded: 'toggleExpanded', @@ -46,7 +46,7 @@ export class SbbExpansionPanelHeader extends LitElement { /** Notifies that the `sbb-expansion-panel` has to expand. */ private _toggleExpanded: EventEmitter = new EventEmitter( this, - SbbExpansionPanelHeader.events.toggleExpanded, + SbbExpansionPanelHeaderElement.events.toggleExpanded, { bubbles: true, }, @@ -80,7 +80,7 @@ export class SbbExpansionPanelHeader extends LitElement { } private _onMouseMovement(toggleDataAttribute: boolean): void { - const parent: SbbExpansionPanel = this.closest('sbb-expansion-panel'); + const parent: SbbExpansionPanelElement = this.closest('sbb-expansion-panel'); // The `sbb.hover-mq` logic has been removed from scss, but it must be replicated to have the correct behavior on mobile. if (!toggleDataAttribute || (parent && window.matchMedia('(any-hover: hover)').matches)) { toggleDatasetEntry(parent, 'toggleHover', toggleDataAttribute); @@ -123,6 +123,6 @@ export class SbbExpansionPanelHeader extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-expansion-panel-header': SbbExpansionPanelHeader; + 'sbb-expansion-panel-header': SbbExpansionPanelHeaderElement; } } diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts index e6deb06d5f..06bcff2535 100644 --- a/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts +++ b/src/components/expansion-panel/expansion-panel/expansion-panel.e2e.ts @@ -2,14 +2,14 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForCondition, waitForLitRender, EventSpy } from '../../core/testing'; -import type { SbbExpansionPanelContent } from '../expansion-panel-content'; +import type { SbbExpansionPanelContentElement } from '../expansion-panel-content'; import '../expansion-panel-content'; -import { SbbExpansionPanelHeader } from '../expansion-panel-header'; +import { SbbExpansionPanelHeaderElement } from '../expansion-panel-header'; -import { SbbExpansionPanel } from './expansion-panel'; +import { SbbExpansionPanelElement } from './expansion-panel'; describe('sbb-expansion-panel', () => { - let element: SbbExpansionPanel; + let element: SbbExpansionPanelElement; beforeEach(async () => { element = await fixture(html` @@ -21,7 +21,7 @@ describe('sbb-expansion-panel', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbExpansionPanel); + assert.instanceOf(element, SbbExpansionPanelElement); }); it('has slotted elements with the correct properties', async () => { @@ -51,17 +51,23 @@ describe('sbb-expansion-panel', () => { }); it('click the header expands the panel, click again collapses it', async () => { - const header: SbbExpansionPanelHeader = element.querySelector('sbb-expansion-panel-header'); - const content: SbbExpansionPanelContent = element.querySelector('sbb-expansion-panel-content'); + const header: SbbExpansionPanelHeaderElement = element.querySelector( + 'sbb-expansion-panel-header', + ); + const content: SbbExpansionPanelContentElement = element.querySelector( + 'sbb-expansion-panel-content', + ); expect(element.expanded).to.be.equal(false); expect(header.getAttribute('aria-expanded')).to.be.equal('false'); expect(content.getAttribute('aria-hidden')).to.be.equal('true'); - const toggleExpandedEventSpy = new EventSpy(SbbExpansionPanelHeader.events.toggleExpanded); - const willOpenEventSpy = new EventSpy(SbbExpansionPanel.events.willOpen); - const willCloseEventSpy = new EventSpy(SbbExpansionPanel.events.willClose); - const didOpenEventSpy = new EventSpy(SbbExpansionPanel.events.didOpen); - const didCloseEventSpy = new EventSpy(SbbExpansionPanel.events.didClose); + const toggleExpandedEventSpy = new EventSpy( + SbbExpansionPanelHeaderElement.events.toggleExpanded, + ); + const willOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.willOpen); + const willCloseEventSpy = new EventSpy(SbbExpansionPanelElement.events.willClose); + const didOpenEventSpy = new EventSpy(SbbExpansionPanelElement.events.didOpen); + const didCloseEventSpy = new EventSpy(SbbExpansionPanelElement.events.didClose); header.click(); await waitForCondition(() => toggleExpandedEventSpy.events.length === 1); @@ -89,7 +95,9 @@ describe('sbb-expansion-panel', () => { }); it('disabled property is proxied to header', async () => { - const header: SbbExpansionPanelHeader = element.querySelector('sbb-expansion-panel-header'); + const header: SbbExpansionPanelHeaderElement = element.querySelector( + 'sbb-expansion-panel-header', + ); expect(header.disabled).to.be.undefined; expect(header).not.to.have.attribute('aria-disabled'); diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts index 883685f867..0e59f02a5a 100644 --- a/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts +++ b/src/components/expansion-panel/expansion-panel/expansion-panel.stories.ts @@ -12,9 +12,9 @@ import { html, TemplateResult } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../../core/dom'; -import { SbbExpansionPanelHeader } from '../expansion-panel-header'; +import { SbbExpansionPanelHeaderElement } from '../expansion-panel-header'; -import { SbbExpansionPanel } from './expansion-panel'; +import { SbbExpansionPanelElement } from './expansion-panel'; import readme from './readme.md?raw'; import '../expansion-panel-content'; @@ -220,11 +220,11 @@ const meta: Meta = { parameters: { actions: { handles: [ - SbbExpansionPanel.events.willOpen, - SbbExpansionPanel.events.didOpen, - SbbExpansionPanel.events.willClose, - SbbExpansionPanel.events.didClose, - SbbExpansionPanelHeader.events.toggleExpanded, + SbbExpansionPanelElement.events.willOpen, + SbbExpansionPanelElement.events.didOpen, + SbbExpansionPanelElement.events.willClose, + SbbExpansionPanelElement.events.didClose, + SbbExpansionPanelHeaderElement.events.toggleExpanded, ], }, backgrounds: { diff --git a/src/components/expansion-panel/expansion-panel/expansion-panel.ts b/src/components/expansion-panel/expansion-panel/expansion-panel.ts index 96590bea10..614ac96ba0 100644 --- a/src/components/expansion-panel/expansion-panel/expansion-panel.ts +++ b/src/components/expansion-panel/expansion-panel/expansion-panel.ts @@ -6,8 +6,8 @@ import { toggleDatasetEntry } from '../../core/dom'; import { EventEmitter, ConnectedAbortController } from '../../core/eventing'; import { SbbOverlayState } from '../../core/overlay'; import type { TitleLevel } from '../../title'; -import type { SbbExpansionPanelContent } from '../expansion-panel-content'; -import type { SbbExpansionPanelHeader } from '../expansion-panel-header'; +import type { SbbExpansionPanelContentElement } from '../expansion-panel-content'; +import type { SbbExpansionPanelHeaderElement } from '../expansion-panel-header'; import style from './expansion-panel.scss?lit&inline'; @@ -23,7 +23,7 @@ let nextId = 0; * @event {CustomEvent} didClose - Emits whenever the `sbb-expansion-panel` is closed. */ @customElement('sbb-expansion-panel') -export class SbbExpansionPanel extends LitElement { +export class SbbExpansionPanelElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { willOpen: 'willOpen', @@ -68,19 +68,28 @@ export class SbbExpansionPanel extends LitElement { public disableAnimation = false; /** Emits whenever the `sbb-expansion-panel` starts the opening transition. */ - private _willOpen: EventEmitter = new EventEmitter(this, SbbExpansionPanel.events.willOpen); + private _willOpen: EventEmitter = new EventEmitter( + this, + SbbExpansionPanelElement.events.willOpen, + ); /** Emits whenever the `sbb-expansion-panel` is opened. */ - private _didOpen: EventEmitter = new EventEmitter(this, SbbExpansionPanel.events.didOpen); + private _didOpen: EventEmitter = new EventEmitter( + this, + SbbExpansionPanelElement.events.didOpen, + ); /** Emits whenever the `sbb-expansion-panel` begins the closing transition. */ private _willClose: EventEmitter = new EventEmitter( this, - SbbExpansionPanel.events.willClose, + SbbExpansionPanelElement.events.willClose, ); /** Emits whenever the `sbb-expansion-panel` is closed. */ - private _didClose: EventEmitter = new EventEmitter(this, SbbExpansionPanel.events.didClose); + private _didClose: EventEmitter = new EventEmitter( + this, + SbbExpansionPanelElement.events.didClose, + ); private _abort = new ConnectedAbortController(this); private _state: SbbOverlayState = 'closed'; @@ -118,8 +127,8 @@ export class SbbExpansionPanel extends LitElement { private _transitionEventController: AbortController; private _progressiveId = `-${++nextId}`; - private _headerRef: SbbExpansionPanelHeader; - private _contentRef: SbbExpansionPanelContent; + private _headerRef: SbbExpansionPanelHeaderElement; + private _contentRef: SbbExpansionPanelContentElement; private _contentWrapperRef: HTMLElement; public override connectedCallback(): void { @@ -155,7 +164,7 @@ export class SbbExpansionPanel extends LitElement { } this._headerRef = elements.find( - (e): e is SbbExpansionPanelHeader => e.tagName === 'SBB-EXPANSION-PANEL-HEADER', + (e): e is SbbExpansionPanelHeaderElement => e.tagName === 'SBB-EXPANSION-PANEL-HEADER', ); if (!this._headerRef) { @@ -180,7 +189,9 @@ export class SbbExpansionPanel extends LitElement { this._contentRef = (event.target as HTMLSlotElement) .assignedElements() - .find((e): e is SbbExpansionPanelContent => e.tagName === 'SBB-EXPANSION-PANEL-CONTENT'); + .find( + (e): e is SbbExpansionPanelContentElement => e.tagName === 'SBB-EXPANSION-PANEL-CONTENT', + ); this._contentWrapperRef = this.shadowRoot.querySelector( '.sbb-expansion-panel__content-wrapper', @@ -263,6 +274,6 @@ export class SbbExpansionPanel extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-expansion-panel': SbbExpansionPanel; + 'sbb-expansion-panel': SbbExpansionPanelElement; } } diff --git a/src/components/file-selector/file-selector.e2e.ts b/src/components/file-selector/file-selector.e2e.ts index 7c583c0cac..6807946d66 100644 --- a/src/components/file-selector/file-selector.e2e.ts +++ b/src/components/file-selector/file-selector.e2e.ts @@ -1,13 +1,13 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbButton } from '../button'; +import { SbbButtonElement } from '../button'; import { EventSpy, waitForLitRender } from '../core/testing'; -import { SbbFileSelector } from './file-selector'; +import { SbbFileSelectorElement } from './file-selector'; function addFilesToComponentInput( - elem: SbbFileSelector, + elem: SbbFileSelectorElement, numberOfFiles: number, filesContent: string | string[] = 'Hello world', ): void { @@ -27,18 +27,18 @@ function addFilesToComponentInput( } describe('sbb-file-selector', () => { - let element: SbbFileSelector; + let element: SbbFileSelectorElement; beforeEach(async () => { element = await fixture(html``); }); it('renders', () => { - assert.instanceOf(element, SbbFileSelector); + assert.instanceOf(element, SbbFileSelectorElement); }); it('loads a file, then deletes it', async () => { - const fileChangedSpy = new EventSpy(SbbFileSelector.events.fileChangedEvent); + const fileChangedSpy = new EventSpy(SbbFileSelectorElement.events.fileChangedEvent); addFilesToComponentInput(element, 1); await waitForLitRender(element); @@ -60,7 +60,7 @@ describe('sbb-file-selector', () => { `); - const button: SbbButton = element.shadowRoot.querySelector( + const button: SbbButtonElement = element.shadowRoot.querySelector( 'sbb-button[icon-name="trash-small"]', ); expect(button).not.to.be.null; @@ -73,7 +73,7 @@ describe('sbb-file-selector', () => { }); it('loads more than one file in multiple mode', async () => { - const fileChangedSpy = new EventSpy(SbbFileSelector.events.fileChangedEvent); + const fileChangedSpy = new EventSpy(SbbFileSelectorElement.events.fileChangedEvent); element.multiple = true; await waitForLitRender(element); addFilesToComponentInput(element, 2); @@ -94,7 +94,7 @@ describe('sbb-file-selector', () => { }); it('loads files in multiple persistent mode', async () => { - const fileChangedSpy = new EventSpy(SbbFileSelector.events.fileChangedEvent); + const fileChangedSpy = new EventSpy(SbbFileSelectorElement.events.fileChangedEvent); element.multiple = true; element.multipleMode = 'persistent'; await waitForLitRender(element); diff --git a/src/components/file-selector/file-selector.stories.ts b/src/components/file-selector/file-selector.stories.ts index 1e146f027a..8169a8e5bd 100644 --- a/src/components/file-selector/file-selector.stories.ts +++ b/src/components/file-selector/file-selector.stories.ts @@ -4,9 +4,9 @@ import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-c import { html, TemplateResult } from 'lit'; import { sbbSpread } from '../core/dom'; -import type { SbbFormError } from '../form-error'; +import type { SbbFormErrorElement } from '../form-error'; -import { SbbFileSelector } from './file-selector'; +import { SbbFileSelectorElement } from './file-selector'; import readme from './readme.md?raw'; import '../form-error'; @@ -85,7 +85,7 @@ const Template = (args): TemplateResult => html``; const TemplateWithError = (args): TemplateResult => { - const sbbFormError: SbbFormError = document.createElement('sbb-form-error'); + const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error'); sbbFormError.setAttribute('slot', 'error'); sbbFormError.textContent = 'There has been an error.'; @@ -178,7 +178,7 @@ const meta: Meta = { decorators: [(story) => html`
${story()}
`, withActions as Decorator], parameters: { actions: { - handles: [SbbFileSelector.events.fileChangedEvent], + handles: [SbbFileSelectorElement.events.fileChangedEvent], }, backgrounds: { disable: true, diff --git a/src/components/file-selector/file-selector.ts b/src/components/file-selector/file-selector.ts index 1e2b0b64b1..869042faa6 100644 --- a/src/components/file-selector/file-selector.ts +++ b/src/components/file-selector/file-selector.ts @@ -33,7 +33,7 @@ export type DOMEvent = globalThis.Event; * @event {CustomEvent} fileChanged - An event which is emitted each time the file list changes. */ @customElement('sbb-file-selector') -export class SbbFileSelector extends LitElement { +export class SbbFileSelectorElement extends LitElement { public static override styles: CSSResultGroup = style; public static readonly events = { fileChangedEvent: 'fileChanged', @@ -73,7 +73,7 @@ export class SbbFileSelector extends LitElement { /** An event which is emitted each time the file list changes. */ private _fileChangedEvent: EventEmitter = new EventEmitter( this, - SbbFileSelector.events.fileChangedEvent, + SbbFileSelectorElement.events.fileChangedEvent, ); /** @@ -344,6 +344,6 @@ export class SbbFileSelector extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-file-selector': SbbFileSelector; + 'sbb-file-selector': SbbFileSelectorElement; } } diff --git a/src/components/footer/footer.e2e.ts b/src/components/footer/footer.e2e.ts index bf4cd7164a..951bbe7cab 100644 --- a/src/components/footer/footer.e2e.ts +++ b/src/components/footer/footer.e2e.ts @@ -1,13 +1,13 @@ import { assert, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbFooter } from './footer'; +import { SbbFooterElement } from './footer'; describe('sbb-footer', () => { - let element: SbbFooter; + let element: SbbFooterElement; it('renders', async () => { element = await fixture(html``); - assert.instanceOf(element, SbbFooter); + assert.instanceOf(element, SbbFooterElement); }); }); diff --git a/src/components/footer/footer.spec.ts b/src/components/footer/footer.spec.ts index 8cf0e3c127..ae3bb7b853 100644 --- a/src/components/footer/footer.spec.ts +++ b/src/components/footer/footer.spec.ts @@ -1,13 +1,13 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import type { SbbFooter } from './footer'; +import type { SbbFooterElement } from './footer'; import './footer'; describe('sbb-footer', () => { it('renders', async () => { - const element: SbbFooter = await fixture( + const element: SbbFooterElement = await fixture( html``, ); diff --git a/src/components/footer/footer.ts b/src/components/footer/footer.ts index 08bbf44f0c..aaf061dcb8 100644 --- a/src/components/footer/footer.ts +++ b/src/components/footer/footer.ts @@ -12,7 +12,7 @@ import style from './footer.scss?lit&inline'; * @slot - Use the unnamed slot to add elements like `sbb-link`, `sbb-link-list`, `sbb-divider` and so on. */ @customElement('sbb-footer') -export class SbbFooter extends LitElement { +export class SbbFooterElement extends LitElement { public static override styles: CSSResultGroup = style; /** @@ -60,6 +60,6 @@ export class SbbFooter extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-footer': SbbFooter; + 'sbb-footer': SbbFooterElement; } } diff --git a/src/components/form-error/form-error.e2e.ts b/src/components/form-error/form-error.e2e.ts index 8e0370dc31..e450962faa 100644 --- a/src/components/form-error/form-error.e2e.ts +++ b/src/components/form-error/form-error.e2e.ts @@ -1,15 +1,15 @@ import { assert, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbFormError } from './form-error'; +import { SbbFormErrorElement } from './form-error'; describe('sbb-form-error', () => { - let element: SbbFormError; + let element: SbbFormErrorElement; it('renders', async () => { await fixture(html``); element = document.querySelector('sbb-form-error'); - assert.instanceOf(element, SbbFormError); + assert.instanceOf(element, SbbFormErrorElement); }); }); diff --git a/src/components/form-error/form-error.ts b/src/components/form-error/form-error.ts index 785afa6b19..e96fae6b19 100644 --- a/src/components/form-error/form-error.ts +++ b/src/components/form-error/form-error.ts @@ -15,7 +15,7 @@ let nextId = 0; * @slot icon - Use this slot to override the default error icon. */ @customElement('sbb-form-error') -export class SbbFormError extends LitElement { +export class SbbFormErrorElement extends LitElement { public static override styles: CSSResultGroup = style; /** Negative coloring variant flag. */ @@ -60,6 +60,6 @@ export class SbbFormError extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-form-error': SbbFormError; + 'sbb-form-error': SbbFormErrorElement; } } diff --git a/src/components/form-field/form-field-clear/form-field-clear.e2e.ts b/src/components/form-field/form-field-clear/form-field-clear.e2e.ts index 8c2e35a77e..871cf79234 100644 --- a/src/components/form-field/form-field-clear/form-field-clear.e2e.ts +++ b/src/components/form-field/form-field-clear/form-field-clear.e2e.ts @@ -2,13 +2,13 @@ import { assert, expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../../core/testing'; -import { SbbFormField } from '../form-field'; +import { SbbFormFieldElement } from '../form-field'; -import { SbbFormFieldClear } from './form-field-clear'; +import { SbbFormFieldClearElement } from './form-field-clear'; describe('sbb-form-field-clear', () => { - let element: SbbFormFieldClear; - let formField: SbbFormField; + let element: SbbFormFieldClearElement; + let formField: SbbFormFieldElement; let input: HTMLInputElement; beforeEach(async () => { @@ -23,8 +23,8 @@ describe('sbb-form-field-clear', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbFormFieldClear); - assert.instanceOf(formField, SbbFormField); + assert.instanceOf(element, SbbFormFieldClearElement); + assert.instanceOf(formField, SbbFormFieldElement); }); it('clears the value and sets the focus on the input', async () => { diff --git a/src/components/form-field/form-field-clear/form-field-clear.ts b/src/components/form-field/form-field-clear/form-field-clear.ts index 8f8a4f24a9..70e4356a52 100644 --- a/src/components/form-field/form-field-clear/form-field-clear.ts +++ b/src/components/form-field/form-field-clear/form-field-clear.ts @@ -11,7 +11,7 @@ import { } from '../../core/eventing'; import { i18nClearInput } from '../../core/i18n'; import { ButtonProperties, resolveButtonRenderVariables } from '../../core/interfaces'; -import type { SbbFormField } from '../form-field'; +import type { SbbFormFieldElement } from '../form-field'; import style from './form-field-clear.scss?lit&inline'; import '../../icon'; @@ -20,7 +20,7 @@ import '../../icon'; * Combined with `sbb-form-field`, it displays a button which clears the input value. */ @customElement('sbb-form-field-clear') -export class SbbFormFieldClear extends LitElement { +export class SbbFormFieldClearElement extends LitElement { public static override styles: CSSResultGroup = style; /** Negative coloring variant flag. */ @@ -33,7 +33,7 @@ export class SbbFormFieldClear extends LitElement { actionElementHandlerAspect, languageChangeHandlerAspect((l) => (this._currentLanguage = l)), ); - private _formField: SbbFormField; + private _formField: SbbFormFieldElement; private _abort = new ConnectedAbortController(this); public override connectedCallback(): void { @@ -42,8 +42,8 @@ export class SbbFormFieldClear extends LitElement { this.addEventListener('click', () => this._handleClick(), { signal }); this._handlerRepository.connect(); this._formField = - (hostContext('sbb-form-field', this) as SbbFormField) ?? - (hostContext('[data-form-field]', this) as SbbFormField); + (hostContext('sbb-form-field', this) as SbbFormFieldElement) ?? + (hostContext('[data-form-field]', this) as SbbFormFieldElement); if (this._formField) { this.negative = isValidAttribute(this._formField, 'negative'); @@ -84,6 +84,6 @@ export class SbbFormFieldClear extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-form-field-clear': SbbFormFieldClear; + 'sbb-form-field-clear': SbbFormFieldClearElement; } } diff --git a/src/components/form-field/form-field/form-field.e2e.ts b/src/components/form-field/form-field/form-field.e2e.ts index 78d8ab0912..e34196449d 100644 --- a/src/components/form-field/form-field/form-field.e2e.ts +++ b/src/components/form-field/form-field/form-field.e2e.ts @@ -3,14 +3,14 @@ import { sendKeys } from '@web/test-runner-commands'; import { html } from 'lit/static-html.js'; import { waitForCondition, waitForLitRender } from '../../core/testing'; -import { SbbOption } from '../../option'; -import { SbbSelect } from '../../select'; +import { SbbOptionElement } from '../../option'; +import { SbbSelectElement } from '../../select'; -import { SbbFormField } from './form-field'; +import { SbbFormFieldElement } from './form-field'; describe('sbb-form-field', () => { describe('with input', () => { - let element: SbbFormField; + let element: SbbFormFieldElement; let input: HTMLInputElement; beforeEach(async () => { @@ -19,7 +19,7 @@ describe('sbb-form-field', () => { }); it('renders', async () => { - assert.instanceOf(element, SbbFormField); + assert.instanceOf(element, SbbFormFieldElement); }); it('should remove the label element if no label is configured', async () => { @@ -136,8 +136,8 @@ describe('sbb-form-field', () => { }); describe('with sbb-select', () => { - let element: SbbFormField; - let select: SbbSelect; + let element: SbbFormFieldElement; + let select: SbbSelectElement; beforeEach(async () => { element = await fixture(html` @@ -151,8 +151,8 @@ describe('sbb-form-field', () => { it('renders', async () => { const option = select.querySelector('sbb-option'); - assert.instanceOf(select, SbbSelect); - assert.instanceOf(option, SbbOption); + assert.instanceOf(select, SbbSelectElement); + assert.instanceOf(option, SbbOptionElement); }); it('should react to focus state', async () => { @@ -227,7 +227,7 @@ describe('sbb-form-field', () => { }); it('should never be empty if input type is date', async () => { - const element: SbbFormField = await fixture( + const element: SbbFormFieldElement = await fixture( html``, ); @@ -235,7 +235,7 @@ describe('sbb-form-field', () => { }); it('should read sbb-select empty state', async () => { - const element: SbbFormField = await fixture(html` + const element: SbbFormFieldElement = await fixture(html` @@ -261,7 +261,7 @@ describe('sbb-form-field', () => { }); it('should update floating label after clearing', async () => { - const element: SbbFormField = await fixture( + const element: SbbFormFieldElement = await fixture( html` Displayed Value @@ -297,7 +297,7 @@ describe('sbb-form-field', () => { }); it('should reset floating label when calling reset of sbb-form-field', async () => { - const element: SbbFormField = await fixture(html` + const element: SbbFormFieldElement = await fixture(html` diff --git a/src/components/form-field/form-field/form-field.stories.ts b/src/components/form-field/form-field/form-field.stories.ts index 9f65a4740e..bfc6202d17 100644 --- a/src/components/form-field/form-field/form-field.stories.ts +++ b/src/components/form-field/form-field/form-field.stories.ts @@ -5,7 +5,7 @@ import { html, TemplateResult } from 'lit'; import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../../core/dom'; -import type { SbbFormError } from '../../form-error'; +import type { SbbFormErrorElement } from '../../form-error'; import readme from './readme.md?raw'; import './form-field'; @@ -117,7 +117,7 @@ const TemplateInputWithSlottedLabel = ({ `; const TemplateInputWithErrorSpace = (args: Args): TemplateResult => { - const sbbFormError: SbbFormError = document.createElement('sbb-form-error'); + const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error'); sbbFormError.setAttribute('slot', 'error'); sbbFormError.textContent = args.errorText; @@ -214,7 +214,7 @@ const TemplateSelect = (args: Args): TemplateResult => html` `; const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => { - const sbbFormError: SbbFormError = document.createElement('sbb-form-error'); + const sbbFormError: SbbFormErrorElement = document.createElement('sbb-form-error'); sbbFormError.setAttribute('slot', 'error'); sbbFormError.textContent = args.errorText; diff --git a/src/components/form-field/form-field/form-field.ts b/src/components/form-field/form-field/form-field.ts index 86946f5d9c..77b0e3fdd6 100644 --- a/src/components/form-field/form-field/form-field.ts +++ b/src/components/form-field/form-field/form-field.ts @@ -13,7 +13,7 @@ import { } from '../../core/eventing'; import { i18nOptional } from '../../core/i18n'; import { AgnosticMutationObserver } from '../../core/observers'; -import type { SbbSelect } from '../../select'; +import type { SbbSelectElement } from '../../select'; import style from './form-field.scss?lit&inline'; import '../../icon'; @@ -33,7 +33,7 @@ const supportedPopupTagNames = ['SBB-AUTOCOMPLETE', 'SBB-SELECT']; * @slot error - Use this slot to render an error. */ @customElement('sbb-form-field') -export class SbbFormField extends LitElement { +export class SbbFormFieldElement extends LitElement { public static override styles: CSSResultGroup = style; private readonly _supportedNativeInputElements = ['INPUT', 'SELECT']; @@ -327,7 +327,7 @@ export class SbbFormField extends LitElement { signal: this._inputAbortController.signal, }); - inputFocusElement = (this._input as SbbSelect).inputElement; + inputFocusElement = (this._input as SbbSelectElement).inputElement; } inputFocusElement.addEventListener( @@ -379,7 +379,7 @@ export class SbbFormField extends LitElement { } else if (this._input instanceof HTMLSelectElement) { return this._input.selectedOptions?.item(0)?.label?.trim() === ''; } else if (this._input.tagName === 'SBB-SELECT') { - return (this._input as SbbSelect).getDisplayValue()?.trim() === ''; + return (this._input as SbbSelectElement).getDisplayValue()?.trim() === ''; } else { return this._isInputValueEmpty(); } @@ -530,6 +530,6 @@ export class SbbFormField extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-form-field': SbbFormField; + 'sbb-form-field': SbbFormFieldElement; } } diff --git a/src/components/header/header-action/header-action.e2e.ts b/src/components/header/header-action/header-action.e2e.ts index ae92d6cb7c..60e14805a3 100644 --- a/src/components/header/header-action/header-action.e2e.ts +++ b/src/components/header/header-action/header-action.e2e.ts @@ -4,17 +4,17 @@ import { html } from 'lit/static-html.js'; import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing'; -import { SbbHeaderAction } from './header-action'; +import { SbbHeaderActionElement } from './header-action'; describe('sbb-header-action', () => { - let element: SbbHeaderAction; + let element: SbbHeaderActionElement; beforeEach(async () => { element = await fixture(html`Action`); }); it('renders', async () => { - assert.instanceOf(element, SbbHeaderAction); + assert.instanceOf(element, SbbHeaderActionElement); }); describe('events', () => { diff --git a/src/components/header/header-action/header-action.ts b/src/components/header/header-action/header-action.ts index 831ee3576a..19404b8991 100644 --- a/src/components/header/header-action/header-action.ts +++ b/src/components/header/header-action/header-action.ts @@ -32,7 +32,7 @@ import '../../icon'; * @slot - Use the unnamed slot to add content to the `sbb-header-action`. */ @customElement('sbb-header-action') -export class SbbHeaderAction extends LitElement implements LinkButtonProperties { +export class SbbHeaderActionElement extends LitElement implements LinkButtonProperties { public static override styles: CSSResultGroup = style; /** @@ -143,6 +143,6 @@ export class SbbHeaderAction extends LitElement implements LinkButtonProperties declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-header-action': SbbHeaderAction; + 'sbb-header-action': SbbHeaderActionElement; } } diff --git a/src/components/header/header/header.e2e.ts b/src/components/header/header/header.e2e.ts index 49bc028a17..a66c4499f7 100644 --- a/src/components/header/header/header.e2e.ts +++ b/src/components/header/header/header.e2e.ts @@ -3,13 +3,13 @@ import { setViewport } from '@web/test-runner-commands'; import { html } from 'lit/static-html.js'; import { EventSpy, waitForLitRender, mockScrollTo, waitForCondition } from '../../core/testing'; -import { SbbMenu } from '../../menu'; +import { SbbMenuElement } from '../../menu'; -import { SbbHeader } from './header'; +import { SbbHeaderElement } from './header'; import '../header-action'; describe('sbb-header', () => { - let element: SbbHeader; + let element: SbbHeaderElement; beforeEach(async () => { await setViewport({ width: 1200, height: 600 }); @@ -17,7 +17,7 @@ describe('sbb-header', () => { it('renders', async () => { element = await fixture(html``); - assert.instanceOf(element, SbbHeader); + assert.instanceOf(element, SbbHeaderElement); }); it('should be fixed on scroll', async () => { @@ -92,8 +92,8 @@ describe('sbb-header', () => { expect(element).to.have.attribute('data-visible'); // Open menu - const willOpenEventSpy = new EventSpy(SbbMenu.events.willOpen); - const didOpenEventSpy = new EventSpy(SbbMenu.events.didOpen); + const willOpenEventSpy = new EventSpy(SbbMenuElement.events.willOpen); + const didOpenEventSpy = new EventSpy(SbbMenuElement.events.didOpen); const menuTrigger = document.querySelector('sbb-header-action'); menuTrigger.click(); await waitForLitRender(element); diff --git a/src/components/header/header/header.ts b/src/components/header/header/header.ts index 47a0dd4ac5..5aee425da9 100644 --- a/src/components/header/header/header.ts +++ b/src/components/header/header/header.ts @@ -15,7 +15,7 @@ const IS_MENU_OPENED_QUERY = "[aria-controls][aria-expanded='true']"; * @slot logo - Slot used to render the logo on the right side (sbb-logo as default). */ @customElement('sbb-header') -export class SbbHeader extends LitElement { +export class SbbHeaderElement extends LitElement { public static override styles: CSSResultGroup = style; /** @@ -189,6 +189,6 @@ export class SbbHeader extends LitElement { declare global { interface HTMLElementTagNameMap { // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-header': SbbHeader; + 'sbb-header': SbbHeaderElement; } } diff --git a/src/components/icon/icon.e2e.ts b/src/components/icon/icon.e2e.ts index 9b8e26d947..ea874ef3a3 100644 --- a/src/components/icon/icon.e2e.ts +++ b/src/components/icon/icon.e2e.ts @@ -1,14 +1,14 @@ import { assert, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { SbbIcon } from './icon'; +import { SbbIconElement } from './icon'; describe('sbb-icon', () => { - let element: SbbIcon; + let element: SbbIconElement; it('renders', async () => { element = await fixture(html``); - assert.instanceOf(element, SbbIcon); + assert.instanceOf(element, SbbIconElement); }); }); diff --git a/src/components/icon/icon.spec.ts b/src/components/icon/icon.spec.ts index 8db6912ac4..4e9624a6d6 100644 --- a/src/components/icon/icon.spec.ts +++ b/src/components/icon/icon.spec.ts @@ -4,7 +4,7 @@ import { html } from 'lit/static-html.js'; import { SbbIconConfig, readConfig } from '../core/config'; import { waitForLitRender } from '../core/testing'; -import type { SbbIcon } from './icon'; +import type { SbbIconElement } from './icon'; import './icon'; @@ -20,7 +20,7 @@ describe('sbb-icon', () => { }); it('renders aria-hidden and no aria-label', async () => { - const root: SbbIcon = await fixture(html``); + const root: SbbIconElement = await fixture(html``); expect(root).dom.to.be.equal(`