feat: new version for angular 14

* update angular cli@7

* aggiornamento app demo ad angular 7

* updating peer dependencies

* aggiornamento ad angular 8

* fix component type resolution

* aggiornamento ad angular 9

* aggiornamento angular 10

* fix test cases

* update peer dependencies

* Aggiornamento ad angular 11

* Aggiornamento ad angular 12

* aggiornamento bootstrap-italia e fix aggiornamento angular 12

* minor fix

* aggiornamento generale dipendenze

* inizializzazione IconComponent

* fix tipi allineamenti icone

* rimossa icona deprecata "it-favorite"

* inizializzazione prefix & suffix in it-input

* Aggiunta retrocompatibilità per utilizzo proprietà "icon" su it-input

* aggiunto ng-bootstrap

* fix polyfills

* update ng 13

* fix test icone

* fix package

* update package lock

* update ng 14

* fix icone bootstrap italia 2

* Completato Wrapper direttiva NgbPopover

* corretta pagina popover

* sostituito vecchio componente popover con nuovo

* fix popover con configurazioni

* tooltip con ng bootstrap

* aggiornamento documentazione tooltip

* Aggiornata direttiva badge

* aggiornamento breadcrumb

* corretto disabled e mouse--focus su componente bottone

* aggiunto supporto per rounded-icon e rounded-color; aggiunto supporto per bottoni con icona

* Aggiornata documentazione bottone con icona

* migliorata doc per checkbox

* Trasformato componente bottone in direttiva per agevolarne l'utilizzo e renderlo compatibile con elementi contenitori

* cambio nome file di spec

* Aggiornamento componente e documentazione per checkbox

* Aggiunto supporto per checkbox indeterminate

* inizializzazione ngbootstrap wrapper per collapse

* fix collapse group

* Aggiornamento doc collapse

* corretti test collapsed

* Collapse funzionante

* setup dropdown

* fix menu dropdown

* dropdown ok con nuove direttive

* inizio setup componenti per dropdown

* miglioramento dropdown, manca solo da sistemare colorazione icona dropdown-toggle

* Auto aggiornamento colore icona in base al colore del bottone contenitore

* rimoosso frammento di esempio per dropdown

* Auto aggiornamento colore icone in dropdown in base al tema

* Aggiornamento progress bar

* supporto progress bar in componente button

* correto test controllo apertura dropdown

* rimozione componente progress-bar-height

* chore(deps): restore deps and package lock

* chore(deps): force update dependencies

* Migliorata gestione icona e focus in form-input

* riorganizzazione doc per form input icone e bottoni

* label sempre su per input time

* Label form input sempre in posizione superiore in caso di presenza di placeholder

* Campo di input inserito in input-group in base ad elementi accessori

* fix posizione label in caso di presenza placeholder alla creazione del componente

* snellimento doc per form input con icone e bottoni

* Corretta colorazione codice HTML e TS con ngx-highlightjs

* miglioramento links a componenti in sidebar

* aggiornato supporto password mode per form input

* Inzio implementazione indicatore sicurezza password

* migliorato algoritmo indicatore sicurezza password

* Aggiornamento intestazione superiore e aggiunta font boostrap-italia

* Aggiunto supporto per rilevamento CAPS LOCK in form input

* fix icona password

* gestione readonly nella forma stilizzata come testo normale

* Ristrutturazione e aggiornamento autocomplete su form-input

* lista autocomplete non visibile se input vuoto

* Supporto per autocomplete di grandi dimensioni

* Aggiunto supporto per label visually-hidden

* Aggiunto supporto per max, min e step in form-input

* Aggiunto supporto per valuta in form-input numerico

* correzione label + supporto tipo percentuale su form-input numerico

* Fix form-input non numerico

* Misuratore sicurezza password in base a sorgente attuale di bootstrap-italia

* Aggiunto supporto per input numerico con ridimensionamento

* Aggiunta direttiva per facilitare l'aggiunta della class "focus--mouse"

* fix form-input width per icone

* Aggiornamento tempalte codice per input numerico

* Aggiunta documentazione per form input date

* Aggiunto supporto per input di tipo date

* Aggiunta a documentazione progress bar indeterminate e pulsante con progress bar

* fix test form-input autocomplete

* fix test automatici

* Aggiunti fonts in assets progetto documentazione

* Importazione libreria scss di bootstrap-italia da styles.scss

* Aggiunti commenti per modificare variabili sass

* modificato tema highlight

* codice di esempio senza padding

* Adeguata doc form-input come standard bootstrap-italia

* fix evidenzazione del testo in input search

* adeguamento docs badge

* adeguamento docs per breadcrumb

* adeguamento docs per button

* Corretti stili tutti titoli e sotto titoli componenti docs

* adeguamento docs per checkbox

* adeguamento docs per collapse + popover

* adeguamento docs per progress bar + radio

* adeguamento docs per toggle + tabs

* adeguamento docs per tooltip

* Corretto readme.md con nuove info su come personalizzare la libreria + aggiornamento copyright

* Aggiunti tutti gli input types per form input

* Aggiornate dipendenze

* Aggiornamento public_api.ts

Co-authored-by: Cristian Borelli <[email protected]>
Co-authored-by: Cristian Borelli <[email protected]>
Co-authored-by: Cristian Borelli <[email protected]>

Author: 4 people

src/browserslist .browserslistrcsrc/browserslist renamed to .browserslistrc

@@ -6,7 +6,7 @@
 /out-tsc
 
 # dependencies
-/node_modules
+**/node_modules
 
 # IDEs and editors
 /.idea
@@ -21,6 +21,7 @@
 .vscode/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

.gitignore

@@ -1,3 +1,3 @@
-Copyright (c) 2018 Presidenza del Consiglio dei Ministri
+Copyright (c) 2022 Presidenza del Consiglio dei Ministri
 
 The version control system provides attribution for specific lines of code.

AUTHORS

@@ -1,6 +1,6 @@
 BSD 3-Clause License
 
-Copyright (c) 2018, the respective contributors, as shown by the AUTHORS file.
+Copyright (c) 2022, the respective contributors, as shown by the AUTHORS file.
 
 Redistribution and use in source and binary forms, with or without
 modification, are permitted provided that the following conditions are met:

LICENSE

@@ -22,16 +22,52 @@ Design Angular Kit è disponibile su NPM, se hai una applicazione esistente eseg
 npm install design-angular-kit --save
 ```
 
-#### Integrazione con Angular CLI
-Configura gli stili richiesti nella sezione `styles`, come mostrato nell'esempio qui sotto.
+#### 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 '../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';
+
 ```
-"styles": [
-  "node_modules/bootstrap-italia/dist/css/bootstrap-italia.min.css",
-  "node_modules/bootstrap-italia/dist/css/italia-icon-font.css"
-  //...
-],
+
+#### Come personalizzare e sovrascrivere le variabili di default della libreria (es. colori, font-family, misure, ecc.)
+
+Bootstrap Italia eredita ed estende tutte le variabili di default di Bootstrap, sovrascrivendo 
+alcuni valori in fase di compilazione e impostandone di nuovi all’occorenza. Un esempio fra tutti è 
+il valore del colore $primary che in Bootstrap Italia è rappresentato dal colore blu #0066CC,
+tipico della libreria.
+
+L’utilizzo del blu #0066CC dovrebbe però essere riservato alle amministrazioni centrali dello
+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.
+
+Di seguito un esempio di file `styles.scss` con la personalizzazione dei colori.
+Le personalizzazioni delle variabili devono sempre essere effettuate prima dell'importazione del file `bootstrap-italia.scss`
+
+```scss
+// modifica completa del template: è possibile ricompilare la libreria modificando alcune variabili SCSS
+
+// Per l'override del colore $primary della palette in formato HSB (colore #FF3333 https://rgb.to/ff3333):
+$primary-h: 0;
+$primary-s: 80;
+$primary-b: 100;
+
+// Per l'override della famiglia di caratteri
+$font-family-serif: 'Custom Font', Georgia, serif;
+$font-family-sans-serif: 'Custom Font', Arial, Helvetica, sans-serif;
+$font-family-monospace: 'Custom Font', 'Courier New', Courier, monospace;
+
+// Importazione libreria SCSS di bootstrap-italia
+@import '../node_modules/bootstrap-italia/src/scss/bootstrap-italia.scss';
 ```
 
+
+
 ## Segnalazione bug e richieste di aiuto
 
 Vuoi segnalare un bug o fare una richiesta?

README.md

@@ -10,7 +10,7 @@
       "prefix": "it",
       "schematics": {
         "@schematics/angular:component": {
-          "styleext": "scss"
+          "style": "scss"
         }
       },
       "architect": {
@@ -27,15 +27,25 @@
               "src/assets"
             ],
             "styles": [
-              "node_modules/bootstrap-italia/dist/css/bootstrap-italia.min.css",
-              "node_modules/bootstrap-italia/dist/css/italia-icon-font.css",
+              "node_modules/highlight.js/styles/github.css",
               "src/styles.scss"
             ],
-            "scripts": [
-            ]
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -45,14 +55,13 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
-              "aot": true,
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true
             }
-          }
+          },
+          "defaultConfiguration": ""
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
@@ -87,18 +96,6 @@
               "src/assets"
             ]
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "src/tsconfig.app.json",
-              "src/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -117,15 +114,6 @@
               "devServerTarget": "design-angular-kit-bundle:serve:production"
             }
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },
@@ -136,14 +124,15 @@
       "prefix": "it",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/design-angular-kit/tsconfig.lib.json",
             "project": "projects/design-angular-kit/ng-package.json"
           },
           "configurations": {
             "production": {
-              "project": "projects/design-angular-kit/ng-package.prod.json"
+              "project": "projects/design-angular-kit/ng-package.prod.json",
+              "tsConfig": "projects/design-angular-kit/tsconfig.lib.prod.json"
             }
           }
         },
@@ -154,21 +143,8 @@
             "tsConfig": "projects/design-angular-kit/tsconfig.spec.json",
             "karmaConfig": "projects/design-angular-kit/karma.conf.js"
           }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "projects/design-angular-kit/tsconfig.lib.json",
-              "projects/design-angular-kit/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     }
-  },
-  "defaultProject": "design-angular-kit-bundle"
+  }
 }

angular.json

@@ -76,9 +76,9 @@ describe('Breadcrumb', () => {
   it('dovrebbe poter cambiare l\'icona o disattivarla per tutti i suoi elementi', async () => {
     const breadcrumbItemsIcons: ElementFinder[] = await page.getBreadcrumbItemsIcon();
 
-    const FAVORITE_ICON = 'it-favorite';
+    const STAR_ICON = 'it-star-outline';
     breadcrumbItemsIcons.forEach(item => {
-      expect(item.getAttribute('class')).toBe(FAVORITE_ICON);
+      expect(item.getAttribute('class')).toBe(STAR_ICON);
     });
 
     page.clickFacebookIcon();

e2e/src/breadcrumb/breadcrumb.e2e-spec.ts

@@ -15,7 +15,7 @@ export class BreadcrumbPage {
   private readonly ID_RADIO_SEPARATOR_GTHAN = 'radio-2';
   private readonly ID_RADIO_SEPARATOR_TILDE = 'radio-3';
 
-  private readonly ID_RADIO_ICON_IT_FAVORITE = 'radio-4';
+  private readonly ID_RADIO_ICON_IT_STAR = 'radio-4';
   private readonly ID_RADIO_ICON_IT_FACEBOOK = 'radio-5';
   private readonly ID_RADIO_ICON_IT_FLICKR = 'radio-6';
 
@@ -27,7 +27,7 @@ export class BreadcrumbPage {
 
   private readonly CSS_SELECTOR_LABEL_TILDE = this.getLabelForAttribute(this.ID_RADIO_SEPARATOR_TILDE);
 
-  private readonly CSS_SELECTOR_LABEL_FAVORITE = this.getLabelForAttribute(this.ID_RADIO_ICON_IT_FAVORITE);
+  private readonly CSS_SELECTOR_LABEL_STAR = this.getLabelForAttribute(this.ID_RADIO_ICON_IT_STAR);
 
   private readonly CSS_SELECTOR_LABEL_FACEBOOK = this.getLabelForAttribute(this.ID_RADIO_ICON_IT_FACEBOOK);
 
@@ -90,8 +90,8 @@ export class BreadcrumbPage {
     await element(by.css(this.CSS_SELECTOR_LABEL_TILDE)).click();
   }
 
-  async clickFavoriteIcon() {
-    await element(by.css(this.CSS_SELECTOR_LABEL_FAVORITE)).click();
+  async clickStarIcon() {
+    await element(by.css(this.CSS_SELECTOR_LABEL_STAR)).click();
   }
 
   async clickFacebookIcon() {

e2e/src/breadcrumb/breadcrumb.po.ts

@@ -111,13 +111,13 @@ describe('Dropdown', () => {
     let isIconSectionPresent = await page.isIconSectionPresent();
     expect(isIconSectionPresent).toBeFalsy();
 
-    await page.clickFavoriteIconItemRadio();
+    await page.clickStarIconItemRadio();
 
     isIconSectionPresent = await page.isIconSectionPresent();
     let dropdownItemIconClasses = await page.getDropdownItemIconClasses();
-    const hasFavoriteIcon = dropdownItemIconClasses.indexOf(page.FAVORITE_ICON_CLASS) > -1;
+    const hasStarIcon = dropdownItemIconClasses.indexOf(page.STAR_ICON_CLASS) > -1;
     expect(isIconSectionPresent).toBeTruthy();
-    expect(hasFavoriteIcon).toBeTruthy();
+    expect(hasStarIcon).toBeTruthy();
 
     await page.clickLinkIconItemRadio();
 
@@ -129,7 +129,7 @@ describe('Dropdown', () => {
   });
 
   it('dovrebbe impostare la posizione della icona di un item della dropdown', async () => {
-    await page.clickFavoriteIconItemRadio();
+    await page.clickStarIconItemRadio();
 
     await page.clickIconLeftPosition();
     let dropdownItemClasses = await page.getDropdownItemClasses();

e2e/src/dropdown/dropdown.e2e-spec.ts

@@ -14,7 +14,7 @@ export class DropdownPage {
   public readonly ITEM_DISABLED_CLASS = 'disabled';
   public readonly ITEM_LARGE_CLASS = 'large';
 
-  public readonly FAVORITE_ICON_CLASS = 'it-favorite';
+  public readonly STAR_ICON_CLASS = 'it-star-outline';
   public readonly LINK_ICON_CLASS = 'it-link';
 
   public readonly DROPDOWN_ITEM_LEFT_ICON_CLASS = 'left-icon';
@@ -69,8 +69,8 @@ export class DropdownPage {
   private readonly NULL_ICON_ITEM_RADIO_ID = 'radio-15';
   private readonly NULL_ICON_ITEM_RADIO_LABEL = this.getLabelForAttribute(this.NULL_ICON_ITEM_RADIO_ID);
 
-  private readonly FAVORITE_ICON_ITEM_RADIO_ID = 'radio-16';
-  private readonly FAVORITE_ICON_ITEM_RADIO_LABEL = this.getLabelForAttribute(this.FAVORITE_ICON_ITEM_RADIO_ID);
+  private readonly STAR_ICON_ITEM_RADIO_ID = 'radio-16';
+  private readonly STAR_ICON_ITEM_RADIO_LABEL = this.getLabelForAttribute(this.STAR_ICON_ITEM_RADIO_ID);
 
   private readonly LINK_ICON_ITEM_RADIO_ID = 'radio-17';
   private readonly LINK_ICON_ITEM_RADIO_LABEL = this.getLabelForAttribute(this.LINK_ICON_ITEM_RADIO_ID);
@@ -168,8 +168,8 @@ export class DropdownPage {
     await this.clickOnElement(this.NULL_ICON_ITEM_RADIO_LABEL);
   }
 
-  async clickFavoriteIconItemRadio() {
-    await this.clickOnElement(this.FAVORITE_ICON_ITEM_RADIO_LABEL);
+  async clickStarIconItemRadio() {
+    await this.clickOnElement(this.STAR_ICON_ITEM_RADIO_LABEL);
   }
 
   async clickLinkIconItemRadio() {