[CST-16756] create dsNormalizeLanguageCode pipe

Author: Andrea Barbasso

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -14,14 +14,14 @@
 
 <!-- Render value as markdown -->
 <ng-template #markdown let-value="value" let-lang="lang">
-  <span class="dont-break-out" [dsMarkdown]="value" [attr.lang]="lang">
+  <span class="dont-break-out" [dsMarkdown]="value" [attr.lang]="lang | dsNormalizeLanguageCode">
   </span>
 </ng-template>
 
 <!-- Render value as a link (href and label) -->
 <ng-template #link let-value="value" let-lang="lang">
   <a class="dont-break-out ds-simple-metadata-link"
-    [attr.lang]="lang"
+    [attr.lang]="lang | dsNormalizeLanguageCode"
     [href]="value"
     [attr.target]="getLinkAttributes(value).target"
     [attr.rel]="getLinkAttributes(value).rel" role="link" tabindex="0">
@@ -32,7 +32,7 @@
 <!-- Render value as a link with icon -->
 <ng-template #linkImg let-img="img" let-value="value" let-lang="lang">
   <a [href]="value" class="link-anchor dont-break-out ds-simple-metadata-link"
-     target="_blank" role="link" tabindex="0" [attr.lang]="lang">
+     target="_blank" role="link" tabindex="0" [attr.lang]="lang | dsNormalizeLanguageCode">
     <img class="link-logo"
       [alt]="img.alt | translate"
       [style.height]="'var(' + img.heightVar + ', --ds-item-page-img-field-default-inline-height)'"
@@ -43,13 +43,13 @@
 
 <!-- Render simple value in a span  -->
 <ng-template #simple let-value="value" let-lang="lang">
-  <span class="dont-break-out preserve-line-breaks" [attr.lang]="lang">{{value}}</span>
+  <span class="dont-break-out preserve-line-breaks" [attr.lang]="lang | dsNormalizeLanguageCode">{{value}}</span>
 </ng-template>
 
 <!-- Render value as a link to browse index -->
 <ng-template #browselink let-value="value" let-lang="lang">
   <a class="dont-break-out preserve-line-breaks ds-browse-link"
-     [attr.lang]="lang"
+     [attr.lang]="lang | dsNormalizeLanguageCode"
      [routerLink]="['/browse', browseDefinition.id]"
      [queryParams]="getQueryParams(value)" role="link" tabindex="0">{{ value }}</a>
 </ng-template>

src/app/item-page/field-components/metadata-values/metadata-values.component.spec.ts

@@ -99,11 +99,11 @@ describe('MetadataValuesComponent', () => {
     expect(result.rel).toBe('noopener noreferrer');
   });
 
-  it('should set the lang attribute for each rendered metadata value', () => {
+  it('should set the lang attribute for each rendered metadata value and convert underscores', () => {
     const valueSpans = fixture.debugElement.queryAll(By.css('span.dont-break-out.preserve-line-breaks'));
     expect(valueSpans.length).toBe(mockMetadata.length);
     valueSpans.forEach(spanDebugEl => {
-      expect(spanDebugEl.attributes.lang).toBe('en_US');
+      expect(spanDebugEl.attributes.lang).toBe('en-US');
     });
   });
 

src/app/item-page/field-components/metadata-values/metadata-values.component.ts

@@ -23,6 +23,7 @@ import { VALUE_LIST_BROWSE_DEFINITION } from '../../../core/shared/value-list-br
 import { hasValue } from '../../../shared/empty.util';
 import { MetadataFieldWrapperComponent } from '../../../shared/metadata-field-wrapper/metadata-field-wrapper.component';
 import { MarkdownDirective } from '../../../shared/utils/markdown.directive';
+import { NormalizeLanguageCodePipe } from '../../../shared/utils/normalize-language-code.pipe';
 import { ImageField } from '../../simple/field-components/specific-field/image-field';
 
 /**
@@ -39,6 +40,7 @@ import { ImageField } from '../../simple/field-components/specific-field/image-f
     MarkdownDirective,
     MetadataFieldWrapperComponent,
     NgTemplateOutlet,
+    NormalizeLanguageCodePipe,
     RouterLink,
     TranslateModule,
   ],

src/app/shared/metadata.directive.ts

@@ -7,6 +7,7 @@ import {
 } from '@angular/core';
 
 import { MetadataValue } from '../core/shared/metadata.models';
+import { normalizeLanguageCode } from './utils/normalize-language-code-utils';
 
 /**
  * A directive that sets the innerHTML and lang attribute of the host element
@@ -61,7 +62,8 @@ export class MetadataDirective {
       const val = this._metadataValue.value ?? '';
       this.renderer.setProperty(this.el.nativeElement, 'innerHTML', val);
       if (this._metadataValue.language) {
-        this.renderer.setAttribute(this.el.nativeElement, 'lang', this._metadataValue.language);
+        const normalizedLang = normalizeLanguageCode(this._metadataValue.language);
+        this.renderer.setAttribute(this.el.nativeElement, 'lang', normalizedLang);
       } else {
         this.renderer.removeAttribute(this.el.nativeElement, 'lang');
       }

src/app/shared/object-list/metadata-representation-list-element/browse-link/browse-link-metadata-list-element.component.html

@@ -3,7 +3,7 @@
     <a
       target="_blank" class="dont-break-out"
       [routerLink]="['/browse/', mdRepresentation.browseDefinition.id]"
-      [attr.lang]="mdRepresentation.getLanguage()"
+      [attr.lang]="mdRepresentation.getLanguage() | dsNormalizeLanguageCode"
       [queryParams]="getQueryParams()">
       {{mdRepresentation.getValue()}}
     </a>

src/app/shared/object-list/metadata-representation-list-element/browse-link/browse-link-metadata-list-element.component.ts

@@ -3,13 +3,15 @@ import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
 import { VALUE_LIST_BROWSE_DEFINITION } from '../../../../core/shared/value-list-browse-definition.resource-type';
+import { NormalizeLanguageCodePipe } from '../../../utils/normalize-language-code.pipe';
 import { MetadataRepresentationListElementComponent } from '../metadata-representation-list-element.component';
 
 @Component({
   selector: 'ds-browse-link-metadata-list-element',
   templateUrl: './browse-link-metadata-list-element.component.html',
   standalone: true,
   imports: [
+    NormalizeLanguageCodePipe,
     RouterLink,
   ],
 })

src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html

@@ -1,27 +1,27 @@
 <div>
   <!-- Because this template is used by default, we will additionally test for representation type and display accordingly -->
   @if ((mdRepresentation.representationType==='plain_text') && !isLink()) {
-    <span class="dont-break-out" [attr.lang]="mdRepresentation.getLanguage()">
+    <span class="dont-break-out" [attr.lang]="mdRepresentation.getLanguage() | dsNormalizeLanguageCode">
       {{mdRepresentation.getValue()}}
     </span>
   }
   @if ((mdRepresentation.representationType==='plain_text') && isLink()) {
     <a class="dont-break-out"
-      [attr.lang]="mdRepresentation.getLanguage()"
+      [attr.lang]="mdRepresentation.getLanguage() | dsNormalizeLanguageCode"
       target="_blank" [href]="mdRepresentation.getValue()" role="link" tabindex="0">
       {{mdRepresentation.getValue()}}
     </a>
   }
   @if ((mdRepresentation.representationType==='authority_controlled')) {
-    <span class="dont-break-out" [attr.lang]="mdRepresentation.getLanguage()">{{mdRepresentation.getValue()}}</span>
+    <span class="dont-break-out" [attr.lang]="mdRepresentation.getLanguage() | dsNormalizeLanguageCode">{{mdRepresentation.getValue()}}</span>
   }
   @if ((mdRepresentation.representationType==='browse_link')) {
     <a
       class="dont-break-out ds-browse-link"
       [routerLink]="['/browse/', mdRepresentation.browseDefinition.id]"
       [queryParams]="getQueryParams()"
       role="link"
-      [attr.lang]="mdRepresentation.getLanguage()"
+      [attr.lang]="mdRepresentation.getLanguage() | dsNormalizeLanguageCode"
       tabindex="0">
       {{mdRepresentation.getValue()}}
     </a>

src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.ts

@@ -3,13 +3,15 @@ import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 
 import { VALUE_LIST_BROWSE_DEFINITION } from '../../../../core/shared/value-list-browse-definition.resource-type';
+import { NormalizeLanguageCodePipe } from '../../../utils/normalize-language-code.pipe';
 import { MetadataRepresentationListElementComponent } from '../metadata-representation-list-element.component';
 
 @Component({
   selector: 'ds-plain-text-metadata-list-element',
   templateUrl: './plain-text-metadata-list-element.component.html',
   standalone: true,
   imports: [
+    NormalizeLanguageCodePipe,
     RouterLink,
   ],
 })

src/app/shared/utils/normalize-language-code-utils.ts

@@ -0,0 +1,15 @@
+/**
+ * Normalizes a language code by replacing underscores with hyphens.
+ *
+ * This function is useful for transforming POSIX-style language codes (e.g., 'en_US') into
+ * standard BCP 47 language tags (e.g., 'en-US').
+ *
+ * @param value - The input string to be transformed. Can be null or undefined.
+ * @returns The transformed string with underscores replaced by dashes, or the original value if null/undefined.
+ */
+export function normalizeLanguageCode(value: string | null | undefined): string | null | undefined {
+  if (value === null || value === undefined) {
+    return value;
+  }
+  return value.replace(/_/g, '-');
+}

src/app/shared/utils/normalize-language-code.pipe.spec.ts

@@ -0,0 +1,25 @@
+import { NormalizeLanguageCodePipe } from './normalize-language-code.pipe';
+
+describe('NormalizeLanguageCodePipe', () => {
+  const pipe = new NormalizeLanguageCodePipe();
+
+  it('transforms language codes replacing underscores with dashes', () => {
+    expect(pipe.transform('en_US')).toBe('en-US');
+    expect(pipe.transform('pt_BR')).toBe('pt-BR');
+    expect(pipe.transform('zh_Hant_TW')).toBe('zh-Hant-TW');
+  });
+
+  it('returns the same value when there are no underscores', () => {
+    expect(pipe.transform('en')).toBe('en');
+    expect(pipe.transform('fr')).toBe('fr');
+  });
+
+  it('preserves null and undefined input', () => {
+    expect(pipe.transform(null)).toBeNull();
+    expect(pipe.transform(undefined)).toBeUndefined();
+  });
+
+  it('handles empty string input', () => {
+    expect(pipe.transform('')).toBe('');
+  });
+});