fix(core,platform): added missing translations for the dynamic page

SAP · Nov 23, 2023 · 4ad48cb · 4ad48cb
1 parent eaa76e7
commit 4ad48cb
Show file tree

Hide file tree

Showing 42 changed files with 281 additions and 43 deletions.
diff --git a/libs/core/src/lib/dynamic-page/dynamic-page-header/header/dynamic-page-header.component.ts b/libs/core/src/lib/dynamic-page/dynamic-page-header/header/dynamic-page-header.component.ts
@@ -50,9 +50,6 @@ export const ActionSquashBreakpointPx = 1280;
     imports: [NgIf, NgTemplateOutlet, IgnoreClickOnSelectionDirective]
 })
 export class DynamicPageHeaderComponent implements OnInit, AfterViewInit, OnDestroy, DynamicPageHeader {
-    /** @hidden */
-    _collapsed = false;
-
     /** Title property for dynamic page */
     @Input()
     title: string;
@@ -99,6 +96,9 @@ export class DynamicPageHeaderComponent implements OnInit, AfterViewInit, OnDest
     @ContentChild(DynamicPageTitleContentComponent)
     _contentToolbar: DynamicPageTitleContentComponent;
 
+    /** @hidden */
+    _collapsed = false;
+
     /** @hidden */
     _actionsSquashed = false;
 

diff --git a/.../src/lib/dynamic-page/dynamic-page-header/subheader/dynamic-page-subheader.component.html b/.../src/lib/dynamic-page/dynamic-page-header/subheader/dynamic-page-subheader.component.html
@@ -17,8 +17,8 @@
                     fd-button
                     class="fd-dynamic-page__collapse-button"
                     aria-haspopup="true"
-                    [ariaLabel]="collapsed ? expandLabel : collapseLabel"
-                    [attr.title]="collapsed ? expandLabel : collapseLabel"
+                    [ariaLabel]="_toggleButtonAriaLabel"
+                    [attr.title]="_toggleButtonAriaLabel"
                     [attr.aria-expanded]="!collapsed"
                     [attr.aria-controls]="id"
                     (click)="toggleCollapse()"
@@ -29,8 +29,8 @@
                 <button
                     fd-button
                     class="fd-dynamic-page__pin-button"
-                    [ariaLabel]="_pinned ? unpinAriaLabel : pinAriaLabel"
-                    [attr.title]="_pinned ? unpinAriaLabel : pinAriaLabel"
+                    [ariaLabel]="_pinButtonAriaLabel"
+                    [attr.title]="_pinButtonAriaLabel"
                     [toggled]="_pinned"
                     (click)="togglePinned()"
                     *ngIf="pinnable && !collapsed"

diff --git a/...re/src/lib/dynamic-page/dynamic-page-header/subheader/dynamic-page-subheader.component.ts b/...re/src/lib/dynamic-page/dynamic-page-header/subheader/dynamic-page-subheader.component.ts
@@ -6,6 +6,7 @@ import {
     EventEmitter,
     HostBinding,
     Input,
+    Optional,
     Output,
     ViewChild,
     ViewEncapsulation
@@ -14,9 +15,12 @@ import { Nullable } from '@fundamental-ngx/cdk/utils';
 import { distinctUntilChanged } from 'rxjs/operators';
 
 import { NgIf } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
+import { FD_LANGUAGE, FdTranslatePipe, resolveTranslationSignalFn } from '@fundamental-ngx/i18n';
 import { DynamicPageConfig } from '../../dynamic-page.config';
 import { DynamicPageService } from '../../dynamic-page.service';
+import { patchHeaderI18nTexts } from '../../patch-header-i18n-texts';
 
 let dynamicPageSubHeaderId = 0;
 @Component({
@@ -25,7 +29,14 @@ let dynamicPageSubHeaderId = 0;
     changeDetection: ChangeDetectionStrategy.OnPush,
     encapsulation: ViewEncapsulation.None,
     standalone: true,
-    imports: [NgIf, ButtonComponent]
+    imports: [NgIf, ButtonComponent, FdTranslatePipe],
+    providers: [
+        {
+            provide: FD_LANGUAGE,
+            useFactory: patchHeaderI18nTexts,
+            deps: [[new Optional(), DynamicPageConfig]]
+        }
+    ]
 })
 export class DynamicPageSubheaderComponent {
     /**
@@ -58,13 +69,13 @@ export class DynamicPageSubheaderComponent {
      * ARIA label for button when the header is collapsed
      */
     @Input()
-    expandLabel: string = this._dynamicPageConfig.expandLabel;
+    expandLabel: string;
 
     /**
      * ARIA label for button when the header is expanded
      */
     @Input()
-    collapseLabel: string = this._dynamicPageConfig.collapseLabel;
+    collapseLabel: string;
 
     /** Header role  */
     @Input()
@@ -78,10 +89,6 @@ export class DynamicPageSubheaderComponent {
     @HostBinding('attr.id')
     id = `fd-dynamic-page-header-id-${dynamicPageSubHeaderId++}`;
 
-    /**
-     * id for collapsible header
-     */
-    collapsibleHeaderId = `${this.id}-collapsible`;
     /**
      * aria label for header
      */
@@ -92,13 +99,13 @@ export class DynamicPageSubheaderComponent {
      * aria label for pin state of pin button
      */
     @Input()
-    pinAriaLabel: string = this._dynamicPageConfig.pinLabel;
+    pinAriaLabel: string;
 
     /**
      * aria label for unpin state of pin button
      */
     @Input()
-    unpinAriaLabel: string = this._dynamicPageConfig.unpinLabel;
+    unpinAriaLabel: string;
 
     /** Collapse/Expand change event raised */
     @Output()
@@ -108,6 +115,31 @@ export class DynamicPageSubheaderComponent {
     @ViewChild('pincollapseContainer')
     pinCollapseContainer: ElementRef<HTMLElement>;
 
+    /**
+     * id for collapsible header
+     */
+    collapsibleHeaderId = `${this.id}-collapsible`;
+
+    /**
+     * Aria Label for the toggle button
+     * @hidden
+     **/
+    get _toggleButtonAriaLabel(): string {
+        const expandLabel = this.expandLabel || this._defaultExpandLabel();
+        const collapseLabel = this.collapseLabel || this._defaultCollapseLabel();
+        return this._collapsed ? expandLabel : collapseLabel;
+    }
+
+    /**
+     * Aria Label for the pin button
+     * @hidden
+     **/
+    get _pinButtonAriaLabel(): string {
+        const pinLabel = this.pinAriaLabel || this._defaultPinLabel();
+        const unpinLabel = this.unpinAriaLabel || this._defaultUnpinLabel();
+        return this._pinned ? unpinLabel : pinLabel;
+    }
+
     /**
      * tracking if pin button is pinned
      */
@@ -120,13 +152,24 @@ export class DynamicPageSubheaderComponent {
     private _collapsed = false;
 
     /** @hidden */
-    constructor(
-        private _cd: ChangeDetectorRef,
-        protected _dynamicPageConfig: DynamicPageConfig,
-        private _dynamicPageService: DynamicPageService
-    ) {
+    private _resolveTranslationSignal = resolveTranslationSignalFn();
+
+    /** @hidden */
+    private _defaultExpandLabel = this._resolveTranslationSignal('coreDynamicPage.expandLabel');
+
+    /** @hidden */
+    private _defaultCollapseLabel = this._resolveTranslationSignal('coreDynamicPage.collapseLabel');
+
+    /** @hidden */
+    private _defaultPinLabel = this._resolveTranslationSignal('coreDynamicPage.pinLabel');
+
+    /** @hidden */
+    private _defaultUnpinLabel = this._resolveTranslationSignal('coreDynamicPage.unpinLabel');
+
+    /** @hidden */
+    constructor(private _cd: ChangeDetectorRef, private _dynamicPageService: DynamicPageService) {
         this._dynamicPageService.collapsed
-            .pipe(distinctUntilChanged())
+            .pipe(takeUntilDestroyed(), distinctUntilChanged())
             .subscribe((collapsed) => this._handleCollapsedChange(collapsed));
     }
 

diff --git a/libs/core/src/lib/dynamic-page/dynamic-page.config.ts b/libs/core/src/lib/dynamic-page/dynamic-page.config.ts
@@ -2,8 +2,9 @@ import { Injectable } from '@angular/core';
 
 /**
  * Default options for core dynamic-page
+ * @deprecated use i18n coreDynamicPage key instead
  */
-@Injectable({ providedIn: 'root' })
+@Injectable()
 export class DynamicPageConfig {
     /**
      * aria label for expand/collapse button when the Dynamic Page is collapsed

diff --git a/libs/core/src/lib/dynamic-page/index.ts b/libs/core/src/lib/dynamic-page/index.ts
@@ -1,18 +1,19 @@
 export * from './constants';
-export * from './dynamic-page.component';
-export * from './dynamic-page-wrapper.directive';
-export * from './dynamic-page-header/actions/dynamic-page-title-content.component';
+export * from './directives/dynamic-page-header-subtitle.directive';
+export * from './directives/dynamic-page-header-title.directive';
+export * from './dynamic-page-content/dynamic-page-content.component';
+export * from './dynamic-page-footer/dynamic-page-footer.component';
 export * from './dynamic-page-header/actions/dynamic-page-base-actions';
 export * from './dynamic-page-header/actions/dynamic-page-global-actions.component';
 export * from './dynamic-page-header/actions/dynamic-page-layout-actions.component';
-export * from './dynamic-page-header/subheader/dynamic-page-subheader.component';
+export * from './dynamic-page-header/actions/dynamic-page-title-content.component';
 export * from './dynamic-page-header/header/dynamic-page-header.component';
-export * from './dynamic-page-content/dynamic-page-content.component';
-export * from './dynamic-page-footer/dynamic-page-footer.component';
+export * from './dynamic-page-header/subheader/dynamic-page-subheader.component';
+export * from './dynamic-page-wrapper.directive';
+export * from './dynamic-page.component';
 export * from './dynamic-page.config';
 export * from './dynamic-page.module';
 export * from './dynamic-page.service';
-export * from './utils';
 export * from './models/title-directive-context';
-export * from './directives/dynamic-page-header-subtitle.directive';
-export * from './directives/dynamic-page-header-title.directive';
+export * from './patch-header-i18n-texts';
+export * from './utils';
diff --git a/libs/core/src/lib/dynamic-page/patch-header-i18n-texts.ts b/libs/core/src/lib/dynamic-page/patch-header-i18n-texts.ts
@@ -0,0 +1,23 @@
+import { inject } from '@angular/core';
+import { FD_LANGUAGE, FdLanguage } from '@fundamental-ngx/i18n';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { DynamicPageConfig } from './dynamic-page.config';
+
+/**
+ * Patch header i18n texts
+ */
+export function patchHeaderI18nTexts(config?: DynamicPageConfig): Observable<FdLanguage> {
+    const lang$ = inject(FD_LANGUAGE, { skipSelf: true });
+    if (config) {
+        return lang$.pipe(
+            map((lang) => ({
+                ...lang,
+                coreDynamicPage: {
+                    ...config
+                }
+            }))
+        );
+    }
+    return lang$;
+}
diff --git a/libs/docs/core/dynamic-page/index.ts b/libs/docs/core/dynamic-page/index.ts
@@ -19,3 +19,4 @@ export const ROUTES: Routes = [
 ];
 export const LIBRARY_NAME = 'dynamic-page';
 export const API_FILE_KEY = 'dynamicPage';
+export const I18N_KEY = 'coreDynamicPage';
diff --git a/libs/docs/platform/dynamic-page/index.ts b/libs/docs/platform/dynamic-page/index.ts
@@ -19,3 +19,4 @@ export const ROUTES: Routes = [
 ];
 export const LIBRARY_NAME = 'dynamic-page';
 export const API_FILE_KEY = 'dynamicPage';
+export const I18N_KEY = 'coreDynamicPage';
diff --git a/libs/i18n/src/lib/models/lang.ts b/libs/i18n/src/lib/models/lang.ts
@@ -112,6 +112,12 @@ export interface FdLanguage {
         datetimeOkLabel: FdLanguageKey;
         datetimeCancelLabel: FdLanguageKey;
     };
+    coreDynamicPage: {
+        expandLabel: FdLanguageKey;
+        collapseLabel: FdLanguageKey;
+        pinLabel: FdLanguageKey;
+        unpinLabel: FdLanguageKey;
+    };
     coreFeedListItem: {
         moreLabel: FdLanguageKey;
         lessLabel: FdLanguageKey;

diff --git a/libs/i18n/src/lib/translations/translations.properties b/libs/i18n/src/lib/translations/translations.properties
@@ -70,6 +70,14 @@ coreDatetimePicker.displayTypeTimeLabel = Time
 coreDatetimePicker.datetimeOkLabel = Ok
 #XBUT: Button used to cancel the date time selection and close the calendar.
 coreDatetimePicker.datetimeCancelLabel = Cancel
+#XACT aria label for expand/collapse button when the Dynamic Page is collapsed
+coreDynamicPage.expandLabel = Expand Header
+#XACT aria label for expand/collapse button when the Dynamic Page is expanded
+coreDynamicPage.collapseLabel = Collapse Header
+#XACT aria label for pin button when the Dynamic Page should be pinned
+coreDynamicPage.pinLabel = Pin Header
+#XACT aria label for pin button when the Panel should be unpinned
+coreDynamicPage.unpinLabel = Unpin Header
 #XBUT: Button used to display more of the hidden text on a feed list item when the amount of text surpasses the max character limit.
 coreFeedListItem.moreLabel = {count} more
 #XBUT: Button used to hide text in a feed list item that surpasses the max character limit.

diff --git a/libs/i18n/src/lib/translations/translations.ts b/libs/i18n/src/lib/translations/translations.ts
@@ -47,6 +47,12 @@ export default {
         datetimeOkLabel: 'Ok',
         datetimeCancelLabel: 'Cancel'
     },
+    coreDynamicPage: {
+        expandLabel: 'Expand Header',
+        collapseLabel: 'Collapse Header',
+        pinLabel: 'Pin Header',
+        unpinLabel: 'Unpin Header'
+    },
     coreFeedListItem: {
         moreLabel: '{count} more',
         lessLabel: 'Less'

diff --git a/libs/i18n/src/lib/translations/translations_bg.properties b/libs/i18n/src/lib/translations/translations_bg.properties
@@ -34,6 +34,10 @@ coreDatetimePicker.displayTypeDateLabel = Дата
 coreDatetimePicker.displayTypeTimeLabel = Час
 coreDatetimePicker.datetimeOkLabel = Ok
 coreDatetimePicker.datetimeCancelLabel = Отмени
+coreDynamicPage.expandLabel = Разширяване на заглавието
+coreDynamicPage.collapseLabel = Свиване на заглавието
+coreDynamicPage.pinLabel = Закачане на заглавието
+coreDynamicPage.unpinLabel = Откачане на заглавието
 coreFeedListItem.moreLabel = Повече
 coreFeedListItem.lessLabel = По-малко
 coreGridList.filterBarCancelButtonTitle = Отмени

diff --git a/libs/i18n/src/lib/translations/translations_bg.ts b/libs/i18n/src/lib/translations/translations_bg.ts
@@ -47,6 +47,12 @@ export default {
         datetimeOkLabel: 'Ok',
         datetimeCancelLabel: 'Отмени'
     },
+    coreDynamicPage: {
+        expandLabel: 'Разширяване на заглавието',
+        collapseLabel: 'Свиване на заглавието',
+        pinLabel: 'Закачане на заглавието',
+        unpinLabel: 'Откачане на заглавието'
+    },
     coreFeedListItem: {
         moreLabel: 'Повече',
         lessLabel: 'По-малко'

diff --git a/libs/i18n/src/lib/translations/translations_cs.properties b/libs/i18n/src/lib/translations/translations_cs.properties
@@ -35,6 +35,10 @@ coreDatetimePicker.displayTypeDateLabel = Datum
 coreDatetimePicker.displayTypeTimeLabel = Čas
 coreDatetimePicker.datetimeOkLabel = Ok
 coreDatetimePicker.datetimeCancelLabel = Zrušit
+coreDynamicPage.expandLabel = Rozbalit záhlaví
+coreDynamicPage.collapseLabel = Sbalit záhlaví
+coreDynamicPage.pinLabel = Připnout záhlaví
+coreDynamicPage.unpinLabel = Odepnout záhlaví
 coreFeedListItem.moreLabel = Více
 coreFeedListItem.lessLabel = Méně
 coreGridList.filterBarCancelButtonTitle = Zrušit

diff --git a/libs/i18n/src/lib/translations/translations_cs.ts b/libs/i18n/src/lib/translations/translations_cs.ts
@@ -47,6 +47,12 @@ export default {
         datetimeOkLabel: 'Ok',
         datetimeCancelLabel: 'Zrušit'
     },
+    coreDynamicPage: {
+        expandLabel: 'Rozbalit záhlaví',
+        collapseLabel: 'Sbalit záhlaví',
+        pinLabel: 'Připnout záhlaví',
+        unpinLabel: 'Odepnout záhlaví'
+    },
     coreFeedListItem: {
         moreLabel: 'Více',
         lessLabel: 'Méně'

diff --git a/libs/i18n/src/lib/translations/translations_de.properties b/libs/i18n/src/lib/translations/translations_de.properties
@@ -35,6 +35,10 @@ coreDatetimePicker.displayTypeDateLabel = Datum
 coreDatetimePicker.displayTypeTimeLabel = Uhrzeit
 coreDatetimePicker.datetimeOkLabel = OK
 coreDatetimePicker.datetimeCancelLabel = Abbrechen
+coreDynamicPage.expandLabel = Kopfzeile erweitern
+coreDynamicPage.collapseLabel = Kopfzeile reduzieren
+coreDynamicPage.pinLabel = Kopfzeile anheften
+coreDynamicPage.unpinLabel = Kopfzeile lösen
 coreFeedListItem.moreLabel = {count} weitere
 coreFeedListItem.lessLabel = Weniger
 coreGridList.filterBarCancelButtonTitle = Abbrechen

diff --git a/libs/i18n/src/lib/translations/translations_de.ts b/libs/i18n/src/lib/translations/translations_de.ts
@@ -47,6 +47,12 @@ export default {
         datetimeOkLabel: 'OK',
         datetimeCancelLabel: 'Abbrechen'
     },
+    coreDynamicPage: {
+        expandLabel: 'Kopfzeile erweitern',
+        collapseLabel: 'Kopfzeile reduzieren',
+        pinLabel: 'Kopfzeile anheften',
+        unpinLabel: 'Kopfzeile lösen'
+    },
     coreFeedListItem: {
         moreLabel: '{count} weitere',
         lessLabel: 'Weniger'

diff --git a/libs/i18n/src/lib/translations/translations_fr.properties b/libs/i18n/src/lib/translations/translations_fr.properties
@@ -35,6 +35,10 @@ coreDatetimePicker.displayTypeDateLabel = Date
 coreDatetimePicker.displayTypeTimeLabel = Heure
 coreDatetimePicker.datetimeOkLabel = Ok
 coreDatetimePicker.datetimeCancelLabel = Annuler
+coreDynamicPage.expandLabel = Développer l'en-tête
+coreDynamicPage.collapseLabel = Réduire l'en-tête
+coreDynamicPage.pinLabel = Épingler l'en-tête
+coreDynamicPage.unpinLabel = Détacher l'en-tête
 coreFeedListItem.moreLabel = Plus
 coreFeedListItem.lessLabel = Moins
 coreGridList.filterBarCancelButtonTitle = Annuler

diff --git a/libs/i18n/src/lib/translations/translations_fr.ts b/libs/i18n/src/lib/translations/translations_fr.ts
@@ -47,6 +47,12 @@ export default {
         datetimeOkLabel: 'Ok',
         datetimeCancelLabel: 'Annuler'
     },
+    coreDynamicPage: {
+        expandLabel: "Développer l'en-tête",
+        collapseLabel: "Réduire l'en-tête",
+        pinLabel: "Épingler l'en-tête",
+        unpinLabel: "Détacher l'en-tête"
+    },
     coreFeedListItem: {
         moreLabel: 'Plus',
         lessLabel: 'Moins'