design-angular-kit 1.0.3 → 1.1.1

package/README.md

@@ -63,9 +63,25 @@ npm install design-angular-kit --save
 
 Scegli la versione corrispondente alla tua versione Angular:
 
-| Angular | design-angular-kit    |
-|---------|-----------------------|
-| 17+     | v1.0.0 +              |
+| Angular | design-angular-kit |
+| ------- | ------------------ |
+| 18+     | v1.1.0 +           |
+| 17+     | v1.0.0 +           |
+
+In alternativa, puoi lanciar il comando
+
+```sh
+ng add design-angular-kit --project <projectName>
+```
+
+Eseguirà in serie:
+
+- scelta della corretta versione da installare
+- installazione della dipendenza
+- aggiunta della dipendenza al package.json
+- configurazione dell'applicazione
+
+Le istruzioni del paragrafo successivo, **Configurazione**, verranno eseguite automaticamente, eccetto per la personalizzazione della configurazione di _i18n_.
 
 ## Configurazione
 
@@ -83,49 +99,39 @@ poter inizializzare le funzionalità della libreria.
 import { provideDesignAngularKit } from 'design-angular-kit';
 
 export const appConfig: ApplicationConfig = {
-  providers: [
-    ...
-    provideDesignAngularKit(),
-  ]
-}
+  providers: [...provideDesignAngularKit()],
+};
 ```
 
 #### Applicazione modulare
 
-È necessario importare `DesignAngularKitModule` all'interno del modulo principale dell'applicazione (solitamente denominato **AppModule**) 
+È necessario importare `DesignAngularKitModule` all'interno del modulo principale dell'applicazione (solitamente denominato **AppModule**)
 utilizzando il metodo `forRoot` per poter inizializzare le funzionalità della libreria e **importare tutti i componenti**.
 
 ```typescript
 import { DesignAngularKitModule } from 'design-angular-kit';
 
 @NgModule({
-  imports: [
-    ...
-    DesignAngularKitModule.forRoot()
-  ]
+  imports: [...DesignAngularKitModule.forRoot()],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 Utilizza il metodo `forChild` durante l'importazione del modulo `DesignAngularKitModule` in altri moduli dell'applicazione per **importare tutti i componenti** della libreria.
 
-
 ```typescript
 import { DesignAngularKitModule } from 'design-angular-kit';
 
 @NgModule({
-  imports: [
-    ...
-    DesignAngularKitModule.forChild()
-  ],
+  imports: [...DesignAngularKitModule.forChild()],
   exports: [DesignAngularKitModule],
 })
-export class SharedModule { }
+export class SharedModule {}
 ```
 
 #### Applicazione ibrida
 
-Se nella tua applicazione è presente il modulo **AppModule** ma vuoi utilizzare i nostri **componenti con la configurazione _standalone_**, 
+Se nella tua applicazione è presente il modulo **AppModule** ma vuoi utilizzare i nostri **componenti con la configurazione _standalone_**,
 utilizza la funzione `provideDesignAngularKit` all'interno del modulo principale dell'applicazione per poter inizializzare le funzionalità della libreria.
 
 ```typescript
@@ -133,11 +139,9 @@ import { provideDesignAngularKit } from 'design-angular-kit';
 
 @NgModule({
   imports: [],
-  providers: [
-    provideDesignAngularKit(),
-  ]
+  providers: [provideDesignAngularKit()],
 })
-export class AppModule { }
+export class AppModule {}
 ```
 
 #### Parametri di configurazione
@@ -160,7 +164,7 @@ const initConfig: DesignAngularKitConfig | undefined = {
    * @default true
    */
   loadFont: boolean | undefined,
-  
+
   ...
 };
 
@@ -170,11 +174,12 @@ DesignAngularKitModule.forRoot(initConfig)
 ```
 
 ### Importazione stili bootstrap-italia
+
 Configura gli stili richiesti nel file `styles.scss`. Importa la libreria SCSS come mostrato nell'esempio qui sotto.
 
 ```scss
 // Importazione libreria SCSS di bootstrap-italia
-@import "bootstrap-italia/src/scss/bootstrap-italia";
+@import 'bootstrap-italia/src/scss/bootstrap-italia';
 ```
 
 <details>
@@ -189,7 +194,6 @@ L’utilizzo del blu #0066CC dovrebbe però essere riservato alle amministrazion
 Stato, e quindi ci si può trovare nella condizione di dover personalizzare i valori delle variabili
 colore di Bootstrap Italia, impostando nuovi valori per le proprie necessità.
 
-
 Questo colore e le altre tonalità vengono generate a partire dalla terna HSB, pertanto occorre modificare le variabili primary-h, primary-s e primary-b.
 Per avere la corrispondenza tra valore esadecimale del colore e HSB si può utilizzare il portale rgb.to, ad esempio https://rgb.to/0066CC.
 
@@ -212,6 +216,7 @@ $font-family-monospace: 'Custom Font', 'Courier New', Courier, monospace;
 // Importazione libreria SCSS di bootstrap-italia
 @import 'bootstrap-italia/src/scss/bootstrap-italia';
 ```
+
 </details>
 
 ### Supporto icone e assets
@@ -249,6 +254,7 @@ Modifica il tuo `angular.json` aggiungendo:
   ]
 }
 ```
+
 Puoi utilizzare le label localizzate della libreria `design-angular-kit` nella tua applicazione, ad esempio `{{'it.errors.required-field' | translate}}`. [Vedi le nostre label](projects/design-angular-kit/assets/i18n/it.json)
 
 #### Localizzazione esistente
@@ -256,7 +262,6 @@ Puoi utilizzare le label localizzate della libreria `design-angular-kit` nella t
 Se utilizzi già i file di localizzazione nella tua app, puoi utilizzare la libreria [ngx-translate-multi-http-loader](https://www.npmjs.com/package/ngx-translate-multi-http-loader)
 per caricare sia i file di localizzazione dell'app che quelli della libreria `design-angular-kit`
 
-
 **Utilizzando la funzione `provideDesignAngularKit`:**
 
 ```typescript
@@ -268,16 +273,18 @@ import { provideDesignAngularKit } from 'design-angular-kit';
 provideDesignAngularKit({
   translateLoader: (itPrefix: string, itSuffix: string) => ({
     provide: TranslateLoader,
-    useFactory: (http: HttpBackend) => new MultiTranslateHttpLoader(http, [
-      { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
-      { prefix: './assets/i18n/' }, // Your i18n location
-    ]),
-    deps: [HttpBackend]
+    useFactory: (http: HttpBackend) =>
+      new MultiTranslateHttpLoader(http, [
+        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
+        { prefix: './assets/i18n/' }, // Your i18n location
+      ]),
+    deps: [HttpBackend],
   }),
-})
+});
 ```
 
 **Utilizzando il modulo `DesignAngularKitModule`:**
+
 ```typescript
 import { HttpBackend } from '@angular/common/http';
 import { TranslateLoader } from '@ngx-translate/core';
@@ -287,22 +294,24 @@ import { DesignAngularKitModule } from 'design-angular-kit';
 DesignAngularKitModule.forRoot({
   translateLoader: (itPrefix: string, itSuffix: string) => ({
     provide: TranslateLoader,
-    useFactory: (http: HttpBackend) => new MultiTranslateHttpLoader(http, [
-      { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
-      { prefix: './assets/i18n/' }, // Your i18n location
-    ]),
-    deps: [HttpBackend]
+    useFactory: (http: HttpBackend) =>
+      new MultiTranslateHttpLoader(http, [
+        { prefix: itPrefix, suffix: itSuffix }, // Load library translations first, so you can edit the keys in your localization file
+        { prefix: './assets/i18n/' }, // Your i18n location
+      ]),
+    deps: [HttpBackend],
   }),
-})
+});
 ```
 
 #### Personalizzazione della localizzazione
 
 Se vuoi personalizzare le nostre label:
-- Non includere il supporto i18n nel tuo `angular.json` 
-    - Crea i tuoi file di localizzazione personalizzati nella tua cartella `assets/bootstrap-italia/i18n/` (crea il percorso se non esiste)
-    - Il json deve avere [questo formato](projects/design-angular-kit/assets/i18n/it.json).
-    - Aggiungi nella configurazione iniziale della libreria il `translateLoader` custom, sostituendo la stringa `assets/bootstrap-italia/i18n/` all'attributo `itPrefix`  
+
+- Non includere il supporto i18n nel tuo `angular.json`
+  - Crea i tuoi file di localizzazione personalizzati nella tua cartella `assets/bootstrap-italia/i18n/` (crea il percorso se non esiste)
+  - Il json deve avere [questo formato](projects/design-angular-kit/assets/i18n/it.json).
+  - Aggiungi nella configurazione iniziale della libreria il `translateLoader` custom, sostituendo la stringa `assets/bootstrap-italia/i18n/` all'attributo `itPrefix`
 - Oppure, aggiungi le localizzazioni nei tuoi file json, sovrascrivendo le [chiavi del json della libreria](projects/design-angular-kit/assets/i18n/it.json).
 
 ### Utilizzo
@@ -316,13 +325,12 @@ import { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'de
 
 @NgModule({
   imports: [
-    ItAlertComponent, 
-    ItPaginationComponent, 
-    ItBreadcrumbsModule // Include ItBreadcrumbComponent e ItBreadcrumbItemComponent 
+    ItAlertComponent,
+    ItPaginationComponent,
+    ItBreadcrumbsModule, // Include ItBreadcrumbComponent e ItBreadcrumbItemComponent
   ],
 })
-export class YourAppModule {
-}
+export class YourAppModule {}
 ```
 
 ```typescript
@@ -332,24 +340,23 @@ import { ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule } from 'de
   selector: 'app-product',
   standalone: true,
   imports: [ItAlertComponent, ItPaginationComponent, ItBreadcrumbsModule],
-  templateUrl: './product.component.html'
+  templateUrl: './product.component.html',
 })
-export class ProductComponent {
-}
+export class ProductComponent {}
 ```
 
 ## Come contribuire 💙
 
 👉🏻 È possibile contribuire alla libreria in vari modi:
 
-*   Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-angular-kit/issues) di Angular Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).
-*   Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-angular-kit/) di Angular Kit.
-*   Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04H3C19D52/) di Slack.
+- Con il proprio codice, prendendo in carico una issue tra quelle aperte e non già assegnate tra [le issue](https://github.com/italia/design-angular-kit/issues) di Angular Kit (è sufficiente anche un commento sulla issue per notificare la volontà di presa in carico).
+- Attraverso la segnalazione di bug o miglioramenti al [repository ufficiale](https://github.com/italia/design-angular-kit/) di Angular Kit.
+- Scrivendoci sul [canale dedicato](https://developersitalia.slack.com/messages/C04H3C19D52/) di Slack.
 
 ## Come contribuire con il codice
 
 Vorresti dare una mano su Design Angular Kit? **Sei nel posto giusto!**
- 
+
 Se non l'hai già fatto, inizia spendendo qualche minuto per approfondire la tua conoscenza sulle
 [linee guida di design per i servizi web della PA](https://design-italia.readthedocs.io/it/stable/index.html),
 e fai riferimento alle [indicazioni su come contribuire a Design Angular Kit](https://github.com/italia/design-angular-kit/blob/main/CONTRIBUTING.md).
@@ -409,7 +416,7 @@ git clone https://github.com/italia/design-angular-kit.git
 
 3. Al caricamento, Visual Studio Code riconoscerà la presenta della configurazione di un Devcontainer. Aprire il progetto con il devcontainer. Altre info [qui](https://code.visualstudio.com/docs/devcontainers/create-dev-container).
 
-4. Visual Studio Code effettuerà il setup del container, andando ad installare la corretta versione di NodeJs, di npm e delle estensioni dell'IDE. Le dipendenze di progetto saranno installate nel processo di creazione del container. L'ambiente di sviuppo sarà pronto a setup ultimato. 
+4. Visual Studio Code effettuerà il setup del container, andando ad installare la corretta versione di NodeJs, di npm e delle estensioni dell'IDE. Le dipendenze di progetto saranno installate nel processo di creazione del container. L'ambiente di sviuppo sarà pronto a setup ultimato.
 
 5. Lanciare l'applicazione in locale
 
@@ -437,9 +444,9 @@ npm run test
 
 Un grazie speciale a chi ha reso possibile lo sviluppo di questa libreria
 
-[![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
---- | --- | --- |
-Antonino Bonanno | Cristian Borelli | Alessio Napolitano |
+| [![Antonino Bonanno](https://github.com/AntoninoBonanno.png?size=100)](https://github.com/AntoninoBonanno) | [![Cristian Borelli](https://github.com/cri99.png?size=100)](https://github.com/cri99) | [![Alessio Napolitano](https://github.com/alenap93.png?size=100)](https://github.com/alenap93) |
+| ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| Antonino Bonanno                                                                                           | Cristian Borelli                                                                       | Alessio Napolitano                                                                             |
 
 e grazie in particolare al team di [NetService](https://www.net-serv.it/):
 
@@ -447,7 +454,7 @@ e grazie in particolare al team di [NetService](https://www.net-serv.it/):
 
 ---
 
-Tutti i contributor (*made with [contributors-img](https://contrib.rocks)*)
+Tutti i contributor (_made with [contributors-img](https://contrib.rocks)_)
 
 <a href = "https://github.com/italia/design-angular-kit/graphs/contributors">
   <img src = "https://contrib.rocks/image?repo=italia/design-angular-kit"/>

package/esm2022/lib/abstracts/abstract-form.component.mjs

@@ -165,10 +165,10 @@ export class ItAbstractFormComponent extends ItAbstractComponent {
         }
         return this.control.getError(errorCode, path);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAbstractFormComponent, deps: [{ token: i1.TranslateService }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.1.2", type: ItAbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: ["disabled", "disabled", inputToBoolean] }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, deps: [{ token: i1.TranslateService }, { token: i2.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.0.6", type: ItAbstractFormComponent, selector: "ng-component", inputs: { label: "label", validationMode: "validationMode", disabled: ["disabled", "disabled", inputToBoolean] }, usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAbstractFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractFormComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: () => [{ type: i1.TranslateService }, { type: i2.NgControl, decorators: [{

package/esm2022/lib/abstracts/abstract.component.mjs

@@ -32,10 +32,10 @@ export class ItAbstractComponent {
         const kebabName = name.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
         return `${kebabName}-${ItAbstractComponent.instances++}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItAbstractComponent, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAbstractComponent, selector: "ng-component", inputs: { id: "id" }, outputs: { valueChanges: "valueChanges" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAbstractComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAbstractComponent, decorators: [{
             type: Component,
             args: [{ template: '' }]
         }], ctorParameters: () => [], propDecorators: { id: [{

package/esm2022/lib/components/core/accordion/accordion.component.mjs

@@ -23,10 +23,10 @@ export class ItAccordionComponent extends ItCollapseComponent {
             this._changeDetectorRef.detectChanges();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItAccordionComponent, isStandalone: true, selector: "it-accordion", inputs: { title: "title" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAccordionComponent, isStandalone: true, selector: "it-accordion", inputs: { title: "title" }, viewQueries: [{ propertyName: "collapseDiv", first: true, predicate: ["collapse"], descendants: true }], exportAs: ["itAccordion"], usesInheritance: true, ngImport: i0, template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAccordionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAccordionComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-accordion', exportAs: 'itAccordion', changeDetection: ChangeDetectionStrategy.OnPush, imports: [], template: "<div class=\"accordion\">\n  <div class=\"accordion-item\">\n    <h2 class=\"accordion-header\" id=\"collapse-{{ id }}-heading\">\n      <button\n        class=\"accordion-button\"\n        type=\"button\"\n        data-bs-toggle=\"collapse\"\n        [class.collapsed]=\"isCollapsed\"\n        [attr.data-bs-target]=\"'#collapse-' + id\"\n        [attr.aria-controls]=\"'collapse-' + id\"\n        [attr.aria-expanded]=\"opened ? 'true' : 'false'\">\n        {{ title }}\n      </button>\n    </h2>\n\n    <div\n      #collapse\n      id=\"collapse-{{ id }}\"\n      role=\"region\"\n      class=\"accordion-collapse collapse {{ class }}\"\n      [attr.aria-labelledby]=\"'collapse-' + id + '-heading'\">\n      <div class=\"accordion-body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { title: [{

package/esm2022/lib/components/core/alert/alert.component.mjs

@@ -49,10 +49,10 @@ export class ItAlertComponent extends ItAbstractComponent {
     dispose() {
         this.alert?.dispose();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAlertComponent, isStandalone: true, selector: "it-alert", inputs: { color: "color", dismissible: ["dismissible", "dismissible", inputToBoolean] }, outputs: { closeEvent: "closeEvent", closedEvent: "closedEvent" }, viewQueries: [{ propertyName: "alertElement", first: true, predicate: ["alertElement"], descendants: true }], exportAs: ["itAlert"], usesInheritance: true, ngImport: i0, template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAlertComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-alert', exportAs: 'itAlert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, ItIconComponent], template: "<div\n  #alertElement\n  class=\"alert alert-{{ color }}\"\n  [class.alert-dismissible]=\"dismissible\"\n  [class.fade]=\"dismissible\"\n  [class.show]=\"dismissible\"\n  role=\"alert\">\n  <h4 class=\"alert-heading\">\n    <ng-content select=\"[heading]\"></ng-content>\n  </h4>\n\n  <ng-content></ng-content>\n\n  @if (dismissible) {\n    <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" [attr.aria-label]=\"'it.core.close-alert' | translate\">\n      <it-icon name=\"close\"></it-icon>\n    </button>\n  }\n</div>\n", styles: [".alert-heading:empty{display:none}\n"] }]
         }], propDecorators: { color: [{

package/esm2022/lib/components/core/avatar/avatar-dropdown/avatar-dropdown.component.mjs

@@ -5,10 +5,10 @@ import { RouterLink } from '@angular/router';
 import * as i0 from "@angular/core";
 import * as i1 from "../../dropdown/dropdown/dropdown.component";
 export class ItAvatarDropdownItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItAvatarDropdownItemComponent, isStandalone: true, selector: "it-avatar-dropdown-item", inputs: { link: "link", title: "title", accesskey: "accesskey", tabindex: "tabindex" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarDropdownItemComponent, isStandalone: true, selector: "it-avatar-dropdown-item", inputs: { link: "link", title: "title", accesskey: "accesskey", tabindex: "tabindex" }, viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDropdownItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownItemComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-avatar-dropdown-item', template: '<ng-template><ng-content></ng-content></ng-template>', imports: [NgTemplateOutlet], styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
         }], propDecorators: { _implicitContent: [{
@@ -27,10 +27,10 @@ export class ItAvatarDropdownComponent {
     constructor() {
         this.componentClass = 'avatar avatar-dropdown';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItAvatarDropdownComponent, isStandalone: true, selector: "it-avatar-dropdown", host: { properties: { "class": "this.componentClass" } }, queries: [{ propertyName: "items", predicate: ItAvatarDropdownItemComponent }], ngImport: i0, template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: i1.ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAvatarDropdownComponent, isStandalone: true, selector: "it-avatar-dropdown", host: { properties: { "class": "this.componentClass" } }, queries: [{ propertyName: "items", predicate: ItAvatarDropdownItemComponent }], ngImport: i0, template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ItDropdownModule }, { kind: "component", type: i1.ItDropdownComponent, selector: "it-dropdown", inputs: ["mode", "color", "direction", "fullWidth", "megamenu", "dark"], outputs: ["showEvent", "shownEvent", "hideEvent", "hiddenEvent"], exportAs: ["itDropdown"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDropdownComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-avatar-dropdown', imports: [ItDropdownModule, NgTemplateOutlet, RouterLink], template: "<it-dropdown id=\"dropdown\" class=\"dropdown\">\n  <ng-content button select=\"[it-avatar-dropdown-toggle]\"></ng-content>\n  <ng-container list class=\"dropdown-menu\">\n    @for (item of items; track item) {\n      <li>\n        @if (item.link) {\n          <a\n            [routerLink]=\"item.link\"\n            class=\"dropdown-item list-item\"\n            title=\"item.title\"\n            accesskey=\"item.accesskey\"\n            tabindex=\"item.tabindex\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </a>\n        } @else {\n          <div class=\"dropdown-item list-item\">\n            <ng-template *ngTemplateOutlet=\"item._implicitContent\"></ng-template>\n          </div>\n        }\n      </li>\n    }\n  </ng-container>\n</it-dropdown>\n", styles: [".link-list-wrapper{z-index:2;position:relative}a{cursor:pointer}:host ::ng-deep .dropdown-toggle{width:100%;height:100%}:host ::ng-deep .dropdown-toggle .icon{display:none}\n"] }]
         }], propDecorators: { componentClass: [{

package/esm2022/lib/components/core/avatar/avatar-group/avatar-group.component.mjs

@@ -3,10 +3,10 @@ import { NgTemplateOutlet } from '@angular/common';
 import { inputToBoolean } from '../../../../utils/coercion';
 import * as i0 from "@angular/core";
 export class ItAvatarGroupItemComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: ItAvatarGroupItemComponent, isStandalone: true, selector: "it-avatar-item", viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarGroupItemComponent, isStandalone: true, selector: "it-avatar-item", viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarGroupItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupItemComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -21,10 +21,10 @@ export class ItAvatarGroupComponent {
     constructor() {
         this.linkList = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItAvatarGroupComponent, isStandalone: true, selector: "it-avatar-group", inputs: { linkList: ["linkList", "linkList", inputToBoolean] }, host: { properties: { "class.link-list-wrapper": "this.linkList" } }, queries: [{ propertyName: "avatars", predicate: ItAvatarGroupItemComponent }], ngImport: i0, template: "<ul [class]=\"linkList ? 'link-list avatar-group' : 'avatar-group-stacked'\">\n  @for (avatar of avatars; track avatar) {\n    <li>\n      <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItAvatarGroupComponent, isStandalone: true, selector: "it-avatar-group", inputs: { linkList: ["linkList", "linkList", inputToBoolean] }, host: { properties: { "class.link-list-wrapper": "this.linkList" } }, queries: [{ propertyName: "avatars", predicate: ItAvatarGroupItemComponent }], ngImport: i0, template: "<ul [class]=\"linkList ? 'link-list avatar-group' : 'avatar-group-stacked'\">\n  @for (avatar of avatars; track avatar) {\n    <li>\n      <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n    </li>\n  }\n</ul>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarGroupComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-avatar-group', imports: [NgTemplateOutlet], template: "<ul [class]=\"linkList ? 'link-list avatar-group' : 'avatar-group-stacked'\">\n  @for (avatar of avatars; track avatar) {\n    <li>\n      <ng-container *ngTemplateOutlet=\"avatar._implicitContent\"></ng-container>\n    </li>\n  }\n</ul>\n" }]
         }], propDecorators: { linkList: [{

package/esm2022/lib/components/core/avatar/avatar.directive.mjs

@@ -57,10 +57,10 @@ export class ItAvatarDirective {
         }
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.2", type: ItAvatarDirective, isStandalone: true, selector: "[itAvatar]", inputs: { color: "color", size: "size" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatar"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.0.6", type: ItAvatarDirective, isStandalone: true, selector: "[itAvatar]", inputs: { color: "color", size: "size" }, host: { properties: { "class": "this.hostClasses" } }, exportAs: ["itAvatar"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,

package/esm2022/lib/components/core/avatar/avatar.module.mjs

@@ -11,8 +11,8 @@ const avatarComponents = [
     ItAvatarDirective,
 ];
 export class ItAvatarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarGroupItemComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarGroupItemComponent,
             ItAvatarGroupComponent,
             ItAvatarDropdownComponent,
             ItAvatarDropdownItemComponent,
@@ -21,9 +21,9 @@ export class ItAvatarModule {
             ItAvatarDropdownComponent,
             ItAvatarDropdownItemComponent,
             ItAvatarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarDropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, imports: [ItAvatarDropdownComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItAvatarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItAvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: avatarComponents,

package/esm2022/lib/components/core/badge/badge.directive.mjs

@@ -16,10 +16,10 @@ export class ItBadgeDirective {
         }
         return badgeClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItBadgeDirective, isStandalone: true, selector: "[itBadge]", inputs: { color: ["itBadge", "color"], rounded: ["rounded", "rounded", inputToBoolean] }, host: { properties: { "class": "this.badgeClass" } }, exportAs: ["itBadge"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItBadgeDirective, isStandalone: true, selector: "[itBadge]", inputs: { color: ["itBadge", "color"], rounded: ["rounded", "rounded", inputToBoolean] }, host: { properties: { "class": "this.badgeClass" } }, exportAs: ["itBadge"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItBadgeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItBadgeDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,

package/esm2022/lib/components/core/button/button.directive.mjs

@@ -48,10 +48,10 @@ export class ItButtonDirective {
         }
         return cssClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItButtonDirective, deps: [{ token: i1.ItProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.1.2", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "type": "this.type", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItButtonDirective, deps: [{ token: i1.ItProgressButtonComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.0.6", type: ItButtonDirective, isStandalone: true, selector: "[itButton]", inputs: { color: ["itButton", "color"], size: "size", block: "block", disabled: ["disabled", "disabled", inputToBoolean], type: "type" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "disabled": "this.disabled", "type": "this.type", "class": "this.hostClasses" } }, queries: [{ propertyName: "icons", predicate: ItIconComponent }], exportAs: ["itButton"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItButtonDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItButtonDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,

package/esm2022/lib/components/core/callout/callout.component.mjs

@@ -42,10 +42,10 @@ export class ItCalloutComponent {
                 return 'info-circle';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItCalloutComponent, isStandalone: true, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon", labelWaria: "labelWaria" }, ngImport: i0, template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCalloutComponent, isStandalone: true, selector: "it-callout", inputs: { label: "label", hiddenLabel: "hiddenLabel", color: "color", appearance: "appearance", icon: "icon", labelWaria: "labelWaria" }, ngImport: i0, template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ItIconComponent, selector: "it-icon", inputs: ["name", "size", "color", "padded", "svgClass", "labelWaria"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCalloutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCalloutComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-callout', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ItIconComponent], template: "<div class=\"callout {{ color }}\" [class.callout-highlight]=\"appearance === 'highlight'\" [class.callout-more]=\"appearance === 'more'\">\n  @if (appearance === 'default') {\n    <div class=\"callout-inner\">\n      <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n    </div>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"inner\"></ng-container>\n  }\n</div>\n\n<ng-template #inner>\n  @if (label) {\n    <div class=\"callout-title\">\n      <it-icon [labelWaria]=\"labelWaria\" [name]=\"iconName\"></it-icon>\n      @if (hiddenLabel) {\n        <span class=\"visually-hidden\">{{ hiddenLabel }}</span>\n      }\n      <span class=\"text\">{{ label }}</span>\n    </div>\n  }\n  <p class=\"callout-big-text\">\n    <ng-content select=\"[bigText]\"></ng-content>\n  </p>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".callout-big-text:empty{display:none}\n"] }]
         }], propDecorators: { label: [{

package/esm2022/lib/components/core/card/card.component.mjs

@@ -21,10 +21,10 @@ export class ItCardComponent extends ItAbstractComponent {
          */
         this.bodyClass = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.2", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { teaser: ["teaser", "teaser", inputToBoolean], special: ["special", "special", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], background: ["background", "background", inputToBoolean], borderBottom: ["borderBottom", "borderBottom", inputToBoolean], big: ["big", "big", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.6", type: ItCardComponent, isStandalone: true, selector: "it-card", inputs: { teaser: ["teaser", "teaser", inputToBoolean], special: ["special", "special", inputToBoolean], hasImage: ["hasImage", "hasImage", inputToBoolean], rounded: ["rounded", "rounded", inputToBoolean], shadow: ["shadow", "shadow", inputToBoolean], background: ["background", "background", inputToBoolean], borderBottom: ["borderBottom", "borderBottom", inputToBoolean], big: ["big", "big", inputToBoolean], cardClass: "cardClass", bodyClass: "bodyClass" }, usesInheritance: true, ngImport: i0, template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: ItCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.6", ngImport: i0, type: ItCardComponent, decorators: [{
             type: Component,
             args: [{ standalone: true, selector: 'it-card', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], template: "<ng-template #cardContent>\n  <ng-content select=\"[beforeBody]\"></ng-content>\n\n  <div class=\"card-body {{ bodyClass }}\">\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n\n@if (!special) {\n  <div\n    class=\"card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.no-after]=\"hasImage\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </div>\n} @else {\n  <a\n    class=\"card special-card {{ cardClass }}\"\n    [class.card-img]=\"hasImage\"\n    [class.card-teaser]=\"teaser\"\n    [class.shadow]=\"shadow\"\n    [class.card-bg]=\"background\"\n    [class.card-big]=\"big\"\n    [class.no-after]=\"hasImage\"\n    [class.border-bottom-card]=\"borderBottom\"\n    [class.rounded]=\"rounded\">\n    <ng-container *ngTemplateOutlet=\"cardContent\"></ng-container>\n  </a>\n}\n", styles: [".card-body:empty{display:none}::ng-deep .row [class*=col-] .card,::ng-deep .row [class*=col-] .card-wrapper{height:100%}::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex-direction:row;align-items:flex-start;flex:0 0 100%;flex-wrap:wrap;margin:16px 0}@media (min-width: 768px){::ng-deep .card-wrapper.card-teaser-wrapper it-card{flex:0 0 49%}}:host{width:100%}\n"] }]
         }], propDecorators: { teaser: [{