chore(deps): upgrade bsi

package.json

@@ -76,7 +76,7 @@
     "@angular/router": "^18.0.6",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "bootstrap-italia": "^2.10.0",
+    "bootstrap-italia": "^2.12.1",
     "core-js": "^3.37.1",
     "fp-ts": "^2.16.8",
     "io-ts": "^2.2.21",

projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.html

@@ -2,32 +2,34 @@
   @if (pinType === 'now') {
     <span class="it-now-label d-none d-lg-flex">{{ 'it.timeline.today' | translate }}</span>
   }
-  <div class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
+  <h3 class="it-pin-wrapper" [ngClass]="{ 'it-evidence': pinType === 'evidence', 'it-now': pinType === 'now' }">
     <div class="pin-icon">
       @if (pinIcon) {
-        <it-icon [name]="pinIcon"></it-icon>
+        <it-icon [name]="pinIcon" [title]="pinIconTitle" [attr.role]="pinIconTitle ? 'img' : null"></it-icon>
       } @else {
         <it-icon name="code-circle"></it-icon>
       }
     </div>
     <div class="pin-text">
       <span>{{ pinText }}</span>
     </div>
-  </div>
+  </h3>
   <div class="card-wrapper">
     <div class="card">
       <div class="card-body">
         @if ((categoryTitle && categoryLink) || eventDate) {
           <div class="category-top">
             @if (categoryTitle) {
+              <span class="visually-hidden">{{ categoryLabel }}</span>
               <a class="category" [href]="categoryLink">{{ categoryTitle }}</a>
             }
             @if (eventDate) {
+              <span class="visually-hidden">{{ dateLabel }}</span>
               <span class="data">{{ eventDate | date: dateFormat }}</span>
             }
           </div>
         }
-        <h5 class="card-title">{{ title }}</h5>
+        <h4 class="card-title">{{ title }}</h4>
         <p class="card-text">{{ text }}</p>
         @if (signature) {
           <span class="card-signature">{{ signature }}</span>

projects/design-angular-kit/src/lib/components/core/timeline/timeline-item/timeline-item.component.ts

@@ -62,6 +62,22 @@ export class ItTimelineItemComponent extends ItAbstractComponent {
    */
   @Input() pinIcon: IconName | undefined = 'code-circle';
 
+  /**
+   * Timeline element PIN icon
+   * @default code-circle
+   */
+  @Input() pinIconTitle: string | undefined;
+
+  /**
+   * Timeline element category label
+   */
+  @Input() categoryLabel: string | undefined = 'Categoria evento: ';
+
+  /**
+   * Timeline element date label
+   */
+  @Input() dateLabel: string | undefined = 'Data evento: ';
+
   /**
    * Timeline element category title
    */

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

@@ -15,7 +15,7 @@
       [attr.aria-hidden]="control.disabled"
       [formControl]="control" />
     <label class="full" [for]="id + '-' + starValue">
-      <it-icon name="star-full" size="sm"></it-icon>
+      <it-icon name="star-full" size="sm" aria-hidden="true"></it-icon>
       <span class="visually-hidden">
         {{ 'it.core.rate-star' | translate: { current: starValue, total: stars.length } }}
       </span>

projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.html

@@ -2,7 +2,7 @@
   #backToTop
   [id]="id"
   href="#"
-  aria-hidden="true"
+  [attr.aria-label]="ariaLabel"
   class="back-to-top"
   [class.back-to-top-small]="small"
   [class.shadow]="shadow"

projects/design-angular-kit/src/lib/components/navigation/back-to-top/back-to-top.component.ts

@@ -13,6 +13,12 @@ import { inputToBoolean } from '../../../utils/coercion';
   imports: [ItIconComponent],
 })
 export class ItBackToTopComponent extends ItAbstractComponent implements AfterViewInit {
+  /**
+   * Aria label for the component
+   * @default 'Torna su'
+   */
+  @Input() ariaLabel: string = 'Torna su';
+
   /**
    * Show small button
    * @default false

src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.html

@@ -1,7 +1,7 @@
 <h3>Esempio Breadcrumb</h3>
 <div class="bd-example">
   <it-breadcrumb [dark]="isDark" [separator]="separator">
-    <it-breadcrumb-item *ngFor="let item of items" class="me-1" [href]="item.link" [iconName]="item.icon">
+    <it-breadcrumb-item *ngFor="let item of items" class="me-1" [href]="item.link" [iconName]="item.icon" [active]="item.active">
       {{ item.label }}
     </it-breadcrumb-item>
   </it-breadcrumb>

src/app/breadcrumb/breadcrumb-example/breadcrumb-example.component.ts

@@ -19,15 +19,18 @@ export class BreadcrumbExampleComponent {
   separator = '/';
   isDark = false;
   items = [
-    { link: 'https://www.aol.com', label: 'Crumb 1', icon: this.icon },
-    { link: 'https://www.yahoo.com', label: 'Crumb 2', icon: this.icon },
-    { link: 'https://www.bing.com', label: 'Crumb 3', icon: this.icon },
+    { link: 'https://www.aol.com', label: 'Crumb 1', icon: this.icon, active: false },
+    { link: 'https://www.yahoo.com', label: 'Crumb 2', icon: this.icon, active: false },
+    { link: 'https://www.bing.com', label: 'Crumb 3', icon: this.icon, active: true },
   ];
 
   i = 4;
 
   insert() {
-    this.items.push({ link: `https://www.google.com`, label: `Crumb ${this.i}`, icon: this.icon });
+    for (const item of this.items) {
+      item.active = false;
+    }
+    this.items.push({ link: `https://www.google.com`, label: `Crumb ${this.i}`, icon: this.icon, active: true });
     this.i++;
   }
 

src/app/list/list-multiple/list-multiple.component.html

@@ -4,7 +4,10 @@ <h3>Lista con azioni multiple, metadata e testo aggiuntivo</h3>
 <div class="bd-example">
   <it-list>
     <it-list-item iconLeft="true" href="#" externalLink="true">
-      <span class="text">Link lista 1</span>
+      <div>
+        <h4 class="text m-0">Link lista 1</h4>
+        <p class="small m-0">Lorem ipsum dolor sit amet.</p>
+      </div>
       <ng-container multiple>
         <a href="#" aria-label="Testo - Azione 1">
           <it-icon name="code-circle" color="primary"></it-icon>
@@ -18,7 +21,10 @@ <h3>Lista con azioni multiple, metadata e testo aggiuntivo</h3>
       </ng-container>
     </it-list-item>
     <it-list-item iconLeft="true" href="#" externalLink="true">
-      <span class="text">Link lista 2</span>
+      <div>
+        <h4 class="text m-0">Link lista 2</h4>
+        <p class="small m-0">Lorem ipsum dolor sit amet.</p>
+      </div>
       <ng-container multiple>
         <span class="metadata">metadata testo</span>
         <a href="#" aria-label="Testo - Azione 1">
@@ -33,7 +39,10 @@ <h3>Lista con azioni multiple, metadata e testo aggiuntivo</h3>
       </ng-container>
     </it-list-item>
     <it-list-item iconLeft="true" href="#" externalLink="true">
-      <span class="text">Testo<em>Lorem ipsum dolor sit amet.</em></span>
+      <div>
+        <h4 class="text m-0">Testo <em>Lorem ipsum dolor sit amet.</em></h4>
+        <p class="small m-0">Lorem ipsum dolor sit amet.</p>
+      </div>
       <ng-container multiple>
         <span class="metadata">metadata testo</span>
         <a href="#" aria-label="Testo - Azione 1">