Merge branch 'main' into fix/button-focus

.devcontainer/devcontainer.json

@@ -6,7 +6,7 @@
   "mounts": [
     "source=design-angular-kit-bundle-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume" // deps volume
   ],
-  "remoteUser": "root",
+  // "remoteUser": "root",
   "postCreateCommand": "sh .devcontainer/scripts/postCreateCommand.sh",
   // "postStartCommand": "/bin/bash -c '.devcontainer/scripts/postStartCommand.sh \"${containerWorkspaceFolder}\"'",
   "postStartCommand": "sh .devcontainer/scripts/postStartCommand.sh \"${containerWorkspaceFolder}\"",

.devcontainer/scripts/postCreateCommand.sh

@@ -1,9 +1,9 @@
 #/bin/bash
 echo "lifecycle hook: postCreateCommand => start"
 
-# echo "Set node_modules permission"
-# sudo chown -R node:node node_modules
-# echo "Set node_modules permission: done"
+echo "Set node_modules permission"
+sudo chown -R node:node node_modules
+echo "Set node_modules permission: done"
 
 echo "Installing deps"
 npm i

projects/design-angular-kit/.eslintrc.json

@@ -1,13 +1,9 @@
 {
   "extends": "../../.eslintrc.json",
-  "ignorePatterns": [
-    "!**/*"
-  ],
+  "ignorePatterns": ["!**/*"],
   "overrides": [
     {
-      "files": [
-        "*.ts"
-      ],
+      "files": ["*.ts"],
       "rules": {
         "@angular-eslint/directive-selector": [
           "error",
@@ -28,9 +24,7 @@
       }
     },
     {
-      "files": [
-        "*.html"
-      ],
+      "files": ["*.html"],
       "rules": {}
     }
   ]

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}}",

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}}",

projects/design-angular-kit/karma.conf.js

@@ -11,15 +11,15 @@ module.exports = function (config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, '../../coverage'),
       reports: ['html', 'lcovonly', 'text-summary'],
-      fixWebpackSourcePaths: true
+      fixWebpackSourcePaths: true,
     },
     reporters: ['progress', 'kjhtml', 'coverage-istanbul'],
     port: 9876,
@@ -30,9 +30,9 @@ module.exports = function (config) {
     customLaunchers: {
       ChromeNoSandbox: {
         base: 'Chrome',
-        flags: ['--no-sandbox']
-      }
+        flags: ['--no-sandbox'],
+      },
     },
-    singleRun: false
+    singleRun: false,
   });
 };

projects/design-angular-kit/ng-package.json

@@ -5,7 +5,5 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "assets": [
-    "assets/**/*.json"
-  ]
+  "assets": ["assets/**/*.json"]
 }

projects/design-angular-kit/ng-package.prod.json

@@ -4,7 +4,5 @@
   "lib": {
     "entryFile": "src/public_api.ts"
   },
-  "assets": [
-    "assets/**/*.json"
-  ]
+  "assets": ["assets/**/*.json"]
 }

projects/design-angular-kit/schematics/collection.json

@@ -1,19 +1,19 @@
 {
-    "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
-    "schematics": {
-      "ng-add": {
-        "description": "Add my Design Angular Kit to the project.",
-        "factory": "./ng-add/index",
-        "schema": "./ng-add/schema.json",
-        "hidden": true,
-        "aliases": ["install"]
-      },
-      "ng-add-setup-project": {
-        "description": "Sets up the specified project after the ng-add dependencies have been installed",
-        "factory": "./ng-add/setup-project",
-        "schema": "./ng-add/schema.json",
-        "hidden": true,
-        "private": true
-      }
+  "$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Add my Design Angular Kit to the project.",
+      "factory": "./ng-add/index",
+      "schema": "./ng-add/schema.json",
+      "hidden": true,
+      "aliases": ["install"]
+    },
+    "ng-add-setup-project": {
+      "description": "Sets up the specified project after the ng-add dependencies have been installed",
+      "factory": "./ng-add/setup-project",
+      "schema": "./ng-add/schema.json",
+      "hidden": true,
+      "private": true
     }
-  }
+  }
+}

projects/design-angular-kit/schematics/ng-add/schema.json

@@ -1,16 +1,16 @@
 {
-    "$schema": "http://json-schema.org/schema",
-    "$id": "design-angular-kit-ng-add",
-    "title": "Design Angular Hit ng-add schematic",
-    "type": "object",
-    "properties": {
-        "project": {
-            "type": "string",
-            "description": "Name of the project.",
-            "$default": {
-              "$source": "projectName"
-            }
-        }
-    },
-    "required": []
-}
+  "$schema": "http://json-schema.org/schema",
+  "$id": "design-angular-kit-ng-add",
+  "title": "Design Angular Hit ng-add schematic",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    }
+  },
+  "required": []
+}

projects/design-angular-kit/src/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.scss

@@ -1,5 +1,5 @@
-// made because of bug with before triangle that goes up 
-.link-list-wrapper{
+// made because of bug with before triangle that goes up
+.link-list-wrapper {
   z-index: 2;
   position: relative;
 }
@@ -14,4 +14,4 @@ a {
   .icon {
     display: none;
   }
-}
+}

projects/design-angular-kit/src/lib/components/core/card/card.component.scss

@@ -2,9 +2,9 @@
   display: none;
 }
 
-
-::ng-deep .row [class*=col-] {
-  .card, .card-wrapper {
+::ng-deep .row [class*='col-'] {
+  .card,
+  .card-wrapper {
     height: 100%;
   }
 }
@@ -18,7 +18,7 @@
     margin: 16px 0;
   }
 
-  @media (min-width: 768px) { 
+  @media (min-width: 768px) {
     it-card {
       flex: 0 0 49%;
     }
@@ -27,4 +27,4 @@
 
 :host {
   width: 100%;
-}
+}

projects/design-angular-kit/src/lib/components/core/carousel/carousel/carousel.component.scss

@@ -1 +1 @@
-@import "@splidejs/splide/dist/css/splide.min"; // Splide
+@import '@splidejs/splide/dist/css/splide.min'; // Splide

projects/design-angular-kit/src/lib/components/core/list/list-item/list-item.component.scss

@@ -1,4 +1,5 @@
-.metadata:empty, .it-rounded-icon:empty {
+.metadata:empty,
+.it-rounded-icon:empty {
   display: none;
 }
 
@@ -12,4 +13,4 @@
   p + .it-multiple {
     display: none !important;
   }
-}
+}

projects/design-angular-kit/src/lib/components/form/autocomplete/autocomplete.component.html

@@ -8,7 +8,7 @@
   <input
     [id]="id"
     type="search"
-    class="autocomplete"
+    class="autocomplete form-control"
     [placeholder]="placeholder"
     [formControl]="control"
     [class.is-invalid]="isInvalid"

projects/design-angular-kit/src/lib/components/form/input/input.component.scss

@@ -9,7 +9,7 @@
   }
 
   .input-number {
-    .align-buttons{
+    .align-buttons {
       height: 100%;
     }
   }
@@ -27,4 +27,3 @@
     transform: translateY(-75%);
   }
 }
-

projects/design-angular-kit/src/lib/components/form/range/range.component.scss

@@ -1,9 +1,17 @@
 .form-range.double-color {
   &::-webkit-slider-runnable-track {
-    background: linear-gradient(to right, var(--range-left-color) var(--range-percentage), var(--range-right-color) var(--range-percentage));
+    background: linear-gradient(
+      to right,
+      var(--range-left-color) var(--range-percentage),
+      var(--range-right-color) var(--range-percentage)
+    );
   }
 
   &::-moz-range-track {
-    background: linear-gradient(to right, var(--range-left-color) var(--range-percentage), var(--range-right-color) var(--range-percentage));
+    background: linear-gradient(
+      to right,
+      var(--range-left-color) var(--range-percentage),
+      var(--range-right-color) var(--range-percentage)
+    );
   }
 }

projects/design-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 }}"

projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.spec.ts

@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { HostAttributeToken } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { tb_base } from 'projects/design-angular-kit/src/test';
 import { TransferStore } from '../store/transfer.store';
 import { ItTransferListComponent } from './transfer-list.component';
 
@@ -10,11 +10,13 @@ describe('ItTransferListComponent', <T>() => {
   let fixture: ComponentFixture<ItTransferListComponent<T>>;
 
   beforeEach(async () => {
+    const { imports, providers } = tb_base;
+
     await TestBed.configureTestingModule({
-      imports: [ItTransferListComponent],
+      imports,
       providers: [
+        ...providers,
         TransferStore,
-        TranslateService,
         { provide: new HostAttributeToken('title'), useValue: 'title' },
         { provide: new HostAttributeToken('sourceType'), useValue: 'source' },
       ],

projects/design-angular-kit/src/lib/components/form/transfer/transfer-list/transfer-list.component.ts

@@ -4,7 +4,7 @@ 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 { SourceType, TransferItem } from '../transfer.model';
 
 interface SelectableTransferItem<T> extends TransferItem<T> {
@@ -14,7 +14,7 @@ interface SelectableTransferItem<T> extends TransferItem<T> {
 @Component({
   selector: 'it-transfer-list',
   standalone: true,
-  imports: [AsyncPipe, TitleCasePipe],
+  imports: [TranslateModule, AsyncPipe, TitleCasePipe],
   templateUrl: './transfer-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })