refactor: convert languageChangeHandlerAspect to `LanguageControlle…

…r` (#2279) Co-authored-by: Jeri Peier <[email protected]>
sbb-design-systems · Dec 12, 2023 · 87d0e68 · 87d0e68
1 parent 6b406bd
commit 87d0e68
Show file tree

Hide file tree

Showing 56 changed files with 549 additions and 968 deletions.
diff --git a/CODING_STANDARDS.md b/CODING_STANDARDS.md
@@ -119,24 +119,13 @@ As the language can be changed dynamically, you have to listen to the `sbbLangua
 event and re-render the view. This can be done by marking the field with `@state` and using the language change handler (see code below).
 
 ```ts
-import { languageChangeHandlerAspect } from '../core/eventing';
+import { LanguageController } from '../core/common-behaviors';
 
-export class Component {
-  @state() private _currentLanguage = documentLanguage();
+export class Component extends LitElement {
+  private _language = new LanguageController(this);
 
-  private _handlerRepository = new HandlerRepository(
-    this,
-    languageChangeHandlerAspect((l) => (this._currentLanguage = l)),
-  );
-
-  public override connectedCallback(): void {
-    super.connectedCallback();
-    this._handlerRepository.connect();
-  }
-
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._handlerRepository.disconnect();
+  protected override render(): TemplateResult {
+    return html` ... ${i18nExample[this._language.current]} ... `;
   }
 }
 ```

diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts
@@ -1,14 +1,10 @@
 import { spread } from '@open-wc/lit-helpers';
 import { CSSResultGroup, html, LitElement, nothing, TemplateResult } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property } from 'lit/decorators.js';
 import { ref } from 'lit/directives/ref.js';
 
-import {
-  documentLanguage,
-  HandlerRepository,
-  languageChangeHandlerAspect,
-  EventEmitter,
-} from '../../core/eventing';
+import { LanguageController } from '../../core/common-behaviors';
+import { EventEmitter } from '../../core/eventing';
 import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n';
 import { LinkProperties, LinkTargetType } from '../../core/interfaces';
 import type { TitleLevel } from '../../title';
@@ -97,20 +93,15 @@ export class SbbAlertElement extends LitElement implements LinkProperties {
     SbbAlertElement.events.dismissalRequested,
   );
 
-  @state() private _currentLanguage = documentLanguage();
-  private _handlerRepository = new HandlerRepository(
-    this,
-    languageChangeHandlerAspect((l) => (this._currentLanguage = l)),
-  );
-
   private _transitionWrapperElement!: HTMLElement;
   private _alertElement!: HTMLElement;
 
   private _firstRenderingDone = false;
 
+  private _language = new LanguageController(this);
+
   public override connectedCallback(): void {
     super.connectedCallback();
-    this._handlerRepository.connect();
     // Skip very first render where the animation elements are not yet ready.
     // Presentation is postponed.
     if (this._transitionWrapperElement) {
@@ -119,11 +110,6 @@ export class SbbAlertElement extends LitElement implements LinkProperties {
     }
   }
 
-  public override disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._handlerRepository.disconnect();
-  }
-
   protected override updated(): void {
     // During the very first rendering, the animation elements are only present in updated.
     // So we need to fire the fade in animation later than at connectedCallback().
@@ -230,7 +216,7 @@ export class SbbAlertElement extends LitElement implements LinkProperties {
             </p>
             ${this.href
               ? html` <sbb-link ${spread(this._linkProperties())} variant="inline" negative>
-                  ${this.linkContent ? this.linkContent : i18nFindOutMore[this._currentLanguage]}
+                  ${this.linkContent ? this.linkContent : i18nFindOutMore[this._language.current]}
                 </sbb-link>`
               : nothing}
           </span>
@@ -247,7 +233,7 @@ export class SbbAlertElement extends LitElement implements LinkProperties {
                   size="m"
                   icon-name="cross-small"
                   @click=${() => this.requestDismissal()}
-                  aria-label=${i18nCloseAlert[this._currentLanguage]}
+                  aria-label=${i18nCloseAlert[this._language.current]}
                   class="sbb-alert__close-button"
                 ></sbb-button>
               </span>`

diff --git a/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts b/src/components/breadcrumb/breadcrumb-group/breadcrumb-group.ts
@@ -2,14 +2,9 @@ import { CSSResultGroup, html, LitElement, nothing, PropertyValues, TemplateResu
 import { customElement, state } from 'lit/decorators.js';
 
 import { getNextElementIndex, isArrowKeyPressed, sbbInputModalityDetector } from '../../core/a11y';
-import { SlotChildObserver } from '../../core/common-behaviors';
+import { LanguageController, SlotChildObserver } from '../../core/common-behaviors';
 import { setAttribute } from '../../core/dom';
-import {
-  documentLanguage,
-  HandlerRepository,
-  languageChangeHandlerAspect,
-  ConnectedAbortController,
-} from '../../core/eventing';
+import { ConnectedAbortController } from '../../core/eventing';
 import { i18nBreadcrumbEllipsisButtonLabel } from '../../core/i18n';
 import { AgnosticResizeObserver } from '../../core/observers';
 import type { SbbBreadcrumbElement } from '../breadcrumb';
@@ -34,16 +29,9 @@ export class SbbBreadcrumbGroupElement extends SlotChildObserver(LitElement) {
 
   @state() private _loaded = false;
 
-  /** Current document language used for translation of the button label. */
-  @state() private _currentLanguage = documentLanguage();
-
-  private _handlerRepository = new HandlerRepository(
-    this,
-    languageChangeHandlerAspect((l) => (this._currentLanguage = l)),
-  );
-
   private _resizeObserver = new AgnosticResizeObserver(() => this._evaluateCollapsedState());
   private _abort = new ConnectedAbortController(this);
+  private _language = new LanguageController(this);
   private _markForFocus = false;
 
   private _handleKeyDown(evt: KeyboardEvent): void {
@@ -67,7 +55,6 @@ export class SbbBreadcrumbGroupElement extends SlotChildObserver(LitElement) {
     super.connectedCallback();
     const signal = this._abort.signal;
     this.addEventListener('keydown', (e) => this._handleKeyDown(e), { signal });
-    this._handlerRepository.connect();
   }
 
   protected override firstUpdated(changedProperties: PropertyValues): void {
@@ -88,7 +75,6 @@ export class SbbBreadcrumbGroupElement extends SlotChildObserver(LitElement) {
   public override disconnectedCallback(): void {
     super.disconnectedCallback();
     this._resizeObserver.disconnect();
-    this._handlerRepository.disconnect();
   }
 
   /** Creates and sets an array with only the sbb-breadcrumb children. */
@@ -189,7 +175,7 @@ export class SbbBreadcrumbGroupElement extends SlotChildObserver(LitElement) {
         <button
           type="button"
           id="sbb-breadcrumb-ellipsis"
-          aria-label=${i18nBreadcrumbEllipsisButtonLabel[this._currentLanguage]}
+          aria-label=${i18nBreadcrumbEllipsisButtonLabel[this._language.current]}
           aria-expanded="false"
           @click=${() => this._expandBreadcrumbs()}
         >

diff --git a/src/components/breadcrumb/breadcrumb/breadcrumb.ts b/src/components/breadcrumb/breadcrumb/breadcrumb.ts
@@ -3,14 +3,9 @@ import { CSSResultGroup, LitElement, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
-import { SlotChildObserver } from '../../core/common-behaviors';
+import { LanguageController, SlotChildObserver } from '../../core/common-behaviors';
 import { setAttributes } from '../../core/dom';
-import {
-  actionElementHandlerAspect,
-  documentLanguage,
-  HandlerRepository,
-  languageChangeHandlerAspect,
-} from '../../core/eventing';
+import { actionElementHandlerAspect, HandlerRepository } from '../../core/eventing';
 import { i18nTargetOpensInNewWindow } from '../../core/i18n';
 import {
   LinkTargetType,
@@ -51,15 +46,10 @@ export class SbbBreadcrumbElement extends SlotChildObserver(LitElement) {
    */
   @property({ attribute: 'icon-name' }) public iconName?: string;
 
-  @state() private _currentLanguage = documentLanguage();
-
   @state() private _hasText = false;
 
-  private _handlerRepository = new HandlerRepository(
-    this,
-    actionElementHandlerAspect,
-    languageChangeHandlerAspect((l) => (this._currentLanguage = l)),
-  );
+  private _language = new LanguageController(this);
+  private _handlerRepository = new HandlerRepository(this, actionElementHandlerAspect);
 
   public override connectedCallback(): void {
     super.connectedCallback();
@@ -106,7 +96,7 @@ export class SbbBreadcrumbElement extends SlotChildObserver(LitElement) {
         ${
           targetsNewWindow(this)
             ? html` <span class="sbb-breadcrumb__label--opens-in-new-window">
-                . ${i18nTargetOpensInNewWindow[this._currentLanguage]}
+                . ${i18nTargetOpensInNewWindow[this._language.current]}
               </span>`
             : nothing
         }

diff --git a/src/components/button/button.ts b/src/components/button/button.ts
@@ -3,6 +3,7 @@ import { CSSResultGroup, LitElement, nothing, TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 
+import { LanguageController } from '../core/common-behaviors';
 import {
   ACTION_ELEMENTS,
   hostContext,
@@ -14,9 +15,7 @@ import {
 import {
   actionElementHandlerAspect,
   createNamedSlotState,
-  documentLanguage,
   HandlerRepository,
-  languageChangeHandlerAspect,
   namedSlotChangeHandlerAspect,
 } from '../core/eventing';
 import { i18nTargetOpensInNewWindow } from '../core/i18n';
@@ -102,12 +101,10 @@ export class SbbButtonElement extends LitElement implements LinkButtonProperties
 
   @state() private _hasText = false;
 
-  @state() private _currentLanguage = documentLanguage();
-
+  private _language = new LanguageController(this);
   private _handlerRepository = new HandlerRepository(
     this,
     actionElementHandlerAspect,
-    languageChangeHandlerAspect((l) => (this._currentLanguage = l)),
     namedSlotChangeHandlerAspect((m) => (this._namedSlots = m(this._namedSlots))),
   );
 
@@ -162,7 +159,7 @@ export class SbbButtonElement extends LitElement implements LinkButtonProperties
           ${
             targetsNewWindow(this)
               ? html`<span class="sbb-button__opens-in-new-window">
-                  . ${i18nTargetOpensInNewWindow[this._currentLanguage]}
+                  . ${i18nTargetOpensInNewWindow[this._language.current]}
                 </span>`
               : nothing
           }