Merge branch 'main' into feat/autocomplete

italia · Dec 9, 2024 · eb73b9f · eb73b9f
2 parents ccdd7f6 + 3a5ae08
commit eb73b9f
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 20 deletions.
diff --git a/projects/design-angular-kit/assets/i18n/en.json b/projects/design-angular-kit/assets/i18n/en.json
@@ -104,6 +104,18 @@
       "aria-label-toggle": "Show/Hide navigation",
       "hide": "Hide navigation"
     },
+    "transfer": {
+      "label-move-backward": "Label move backward",
+      "label-move-forward": "Label move forward",
+      "label-reset": "Label reset",
+      "aria-label-move-backward": "Move backward",
+      "aria-label-move-forward": "Move forward",
+      "aria-label-reset": "Reset",
+      "source": "Source",
+      "target": "Destination",
+      "item": "Item",
+      "items": "Items"
+    },
     "timeline": {
       "read-more": "Read more",
       "read-more-on": "on {{title}}",

diff --git a/projects/design-angular-kit/assets/i18n/it.json b/projects/design-angular-kit/assets/i18n/it.json
@@ -104,6 +104,18 @@
       "aria-label-toggle": "Mostra/Nascondi la navigazione",
       "hide": "Nascondi la navigazione"
     },
+    "transfer": {
+      "label-move-backward": "Etichetta sposta indietro",
+      "label-move-forward": "Etichetta sposta avanti",
+      "label-reset": "Etichetta reset",
+      "aria-label-move-backward": "Sposta indietro",
+      "aria-label-move-forward": "Sposta avanti",
+      "aria-label-reset": "Reset",
+      "source": "Sorgente",
+      "target": "Destinazione",
+      "item": "Elemento",
+      "items": "Elementi"
+    },
     "timeline": {
       "read-more": "Leggi di più",
       "read-more-on": "su {{title}}",

diff --git a/...n-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.html b/...n-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.html
@@ -1,6 +1,6 @@
 <div class="it-transfer-wrapper source">
   <div class="transfer-header">
-    <div class="form-check" aria-describedby="">
+    <div class="form-check">
       <input
         #selectAllCheckbox
         type="checkbox"
@@ -10,8 +10,8 @@
       <label for="{{ instanceId }}checkbox{{ title }}">
         <span>
           @if (numberOfItems$ | async; as numberOfItems) {
-            <span class="num"> {{ numberOfItems.length }} </span>
-            <span> {{ numberOfItems.length > 1 ? 'ITEMS' : 'ITEM' }} </span>
+            <span class="num"> {{ numberOfItems.length }}</span>
+            <span> {{ (numberOfItems.length === 1 ? 'it.transfer.item' : 'it.transfer.items') | translate }}</span>
           }
         </span>
         <span class="descr">{{ title | titlecase }}</span>
@@ -23,7 +23,7 @@
   <div class="transfer-scroll">
     <div class="transfer-group">
       @for (item of items$ | async; track item.value) {
-        <div class="form-check" aria-describedby="">
+        <div class="form-check">
           <input
             type="checkbox"
             id="{{ instanceId }}-{{ item.value }}"

diff --git a/...ign-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts b/...ign-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts
@@ -4,7 +4,8 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { combineLatest, distinctUntilChanged, map, shareReplay, skip, startWith, tap } from 'rxjs';
 import { ItAbstractComponent } from '../../../../abstracts/abstract.component';
 import { TransferStore } from '../store/transfer.store';
-
+import { TranslateModule } from '@ngx-translate/core';
+import { ItIconComponent } from 'projects/design-angular-kit/src/public_api';
 import { SourceType, TransferItem } from '../transfer.model';
 
 interface SelectableTransferItem<T> extends TransferItem<T> {
@@ -14,7 +15,7 @@ interface SelectableTransferItem<T> extends TransferItem<T> {
 @Component({
   selector: 'it-transfer-list',
   standalone: true,
-  imports: [AsyncPipe, TitleCasePipe],
+  imports: [ItIconComponent, TranslateModule, AsyncPipe, TitleCasePipe],
   templateUrl: './transfer-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.html b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.html
@@ -1,10 +1,10 @@
-<div class="form-group">
+<div>
   @if (label) {
     <label [for]="id" [class.active]="!!control.value">{{ label }}</label>
   }
   <div class="row">
     <div class="col-xs-12 col-md-5">
-      <it-transfer-list sourceType="source" title="source"></it-transfer-list>
+      <it-transfer-list sourceType="source" [title]="'it.transfer.source' | translate"></it-transfer-list>
     </div>
     <!-- col -->
     <div class="col-xs-12 col-md-2">
@@ -17,36 +17,36 @@
           [ngClass]="{ active: transferEnabled | async }"
           (click)="transferClickHandler($event)"
           (keypress)="transferKeyPressHandler($event)"
-          aria-label="Sposta avanti">
-          <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-right"></use></svg>
+          [attr.aria-label]="'it.transfer.aria-label-move-forward' | translate">
+          <it-icon name="arrow-right"></it-icon>
         </a>
-        <span class="visually-hidden">Etichetta per freccia destra</span>
+        <span class="visually-hidden">{{ 'it.transfer.label-move-forward' | translate }}</span>
         <a
           class="backtransfer"
           role="button"
           href="#"
           [ngClass]="{ active: backtransferEnabled | async }"
           (click)="backtransferClickHandler($event)"
           (keypress)="backtransferKeyPressHandler($event)"
-          aria-label="Sposta indietro">
-          <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-arrow-left"></use></svg>
+          [attr.aria-label]="'it.transfer.aria-label-move-backward' | translate">
+          <it-icon name="arrow-left"></it-icon>
         </a>
-        <span class="visually-hidden">Etichetta for freccia sinistra</span>
+        <span class="visually-hidden">{{ 'it.transfer.label-move-backward' | translate }}</span>
         <a
           class="reset"
           role="button"
           href="#"
           [ngClass]="{ active: resetEnabled | async }"
           (click)="resetClickHandler($event)"
           (keypress)="resetKeyPressHandler($event)"
-          aria-label="Reset">
-          <svg class="icon"><use href="/bootstrap-italia/dist/svg/sprites.svg#it-restore"></use></svg>
+          [attr.aria-label]="'it.transfer.aria-label-reset' | translate">
+          <it-icon name="restore"></it-icon>
         </a>
-        <span class="visually-hidden">Etichetta per icona di reset</span>
+        <span class="visually-hidden">{{ 'it.transfer.label-reset' | translate }}</span>
       </div>
     </div>
     <div class="col-xs-12 col-md-5">
-      <it-transfer-list sourceType="target" title="target"></it-transfer-list>
+      <it-transfer-list sourceType="target" [title]="'it.transfer.target' | translate"></it-transfer-list>
     </div>
   </div>
 </div>
diff --git a/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.ts b/projects/design-angular-kit/src/lib/components/form/transfer/transfer.component.ts
@@ -8,6 +8,8 @@ import { ItAbstractFormComponent } from '../../../abstracts/abstract-form.compon
 import { TransferStore } from './store/transfer.store';
 import { ItTransferListComponent } from './transfer-list/transfer-list.component';
 import { TransferItem } from './transfer.model';
+import { TranslateModule } from '@ngx-translate/core';
+import { ItIconComponent } from 'projects/design-angular-kit/src/public_api';
 
 /**
  * Transfer
@@ -17,7 +19,7 @@ import { TransferItem } from './transfer.model';
   selector: 'it-transfer',
   standalone: true,
   templateUrl: './transfer.component.html',
-  imports: [ItTransferListComponent, NgClass, AsyncPipe, ReactiveFormsModule],
+  imports: [ItIconComponent, TranslateModule, ItTransferListComponent, NgClass, AsyncPipe, ReactiveFormsModule],
   providers: [TransferStore],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

diff --git a/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html b/projects/design-angular-kit/src/lib/components/navigation/header/header.component.html
@@ -7,7 +7,7 @@
   data-bs-target="#header-nav-wrapper">
   @if (showSlim) {
     <div class="it-header-slim-wrapper" [class.theme-light]="light">
-      <div class="container">
+      <div class="container-xxl">
         <div class="row">
           <div class="col-12">
             <div class="it-header-slim-wrapper-content">