Upgrade Bootstrap Italia and bug fix

package.json

@@ -52,60 +52,60 @@
     "postversion": "echo \"You can now publish your version using 'git push --follow-tags'\""
   },
   "dependencies": {
-    "@angular-devkit/schematics": "^16.1.4",
-    "@angular/animations": "^16.1.3",
-    "@angular/common": "^16.1.3",
-    "@angular/compiler": "^16.1.3",
-    "@angular/core": "^16.1.3",
-    "@angular/forms": "^16.1.3",
-    "@angular/localize": "^16.1.3",
-    "@angular/platform-browser": "^16.1.3",
-    "@angular/platform-browser-dynamic": "^16.1.3",
-    "@angular/router": "^16.1.3",
+    "@angular-devkit/schematics": "^16.2.4",
+    "@angular/animations": "^16.2.7",
+    "@angular/common": "^16.2.7",
+    "@angular/compiler": "^16.2.7",
+    "@angular/core": "^16.2.7",
+    "@angular/forms": "^16.2.7",
+    "@angular/localize": "^16.2.7",
+    "@angular/platform-browser": "^16.2.7",
+    "@angular/platform-browser-dynamic": "^16.2.7",
+    "@angular/router": "^16.2.7",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "bootstrap-italia": "^2.6.0",
+    "bootstrap-italia": "^2.7.0",
     "core-js": "^3.31.1",
-    "fp-ts": "^2.16.0",
+    "fp-ts": "^2.16.1",
     "io-ts": "^2.2.20",
     "ngx-highlightjs": "^10.0.0",
     "rxjs": "^7.8.1",
-    "tslib": "^2.6.0",
+    "tslib": "^2.6.2",
     "zone.js": "~0.13.1"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^16.1.4",
-    "@angular-eslint/builder": "16.0.3",
-    "@angular-eslint/eslint-plugin": "16.0.3",
-    "@angular-eslint/eslint-plugin-template": "16.0.3",
-    "@angular-eslint/schematics": "16.0.3",
-    "@angular-eslint/template-parser": "16.0.3",
-    "@angular/cli": "^16.1.4",
-    "@angular/compiler-cli": "^16.1.3",
-    "@angular/language-service": "^16.1.3",
+    "@angular-devkit/build-angular": "^16.2.4",
+    "@angular-eslint/builder": "16.2.0",
+    "@angular-eslint/eslint-plugin": "16.2.0",
+    "@angular-eslint/eslint-plugin-template": "16.2.0",
+    "@angular-eslint/schematics": "16.2.0",
+    "@angular-eslint/template-parser": "16.2.0",
+    "@angular/cli": "^16.2.4",
+    "@angular/compiler-cli": "^16.2.7",
+    "@angular/language-service": "^16.2.7",
     "@compodoc/compodoc": "^1.1.21",
-    "@types/bootstrap": "^5.2.6",
-    "@types/jasmine": "~4.3.5",
-    "@types/jasminewd2": "~2.0.10",
-    "@types/node": "^20.4.0",
+    "@types/bootstrap": "^5.2.7",
+    "@types/jasmine": "~4.3.6",
+    "@types/jasminewd2": "~2.0.11",
+    "@types/node": "^20.8.0",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
     "browserslist-config-design-italia": "^1.1.0",
-    "concurrently": "^8.2.0",
+    "concurrently": "^8.2.1",
     "conventional-changelog": "^4.0.0",
     "conventional-changelog-cli": "^3.0.0",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "^8.44.0",
     "gh-pages": "^5.0.0",
-    "jasmine-core": "~5.0.1",
+    "jasmine-core": "~5.1.1",
     "jasmine-spec-reporter": "~7.0.0",
     "karma": "~6.4.2",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "^2.2.1",
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ng-packagr": "^16.1.0",
+    "ng-packagr": "^16.2.3",
     "nunjucks-cli": "^1.0.0",
     "semantic-release": "^21.0.7",
     "ts-node": "~10.9.1",
@@ -114,4 +114,4 @@
   "browserslist": [
     "extends browserslist-config-design-italia"
   ]
-}
+}

projects/design-angular-kit/package.json

@@ -37,6 +37,6 @@
     "@angular/platform-browser": "^16.0.0",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "bootstrap-italia": "^2.6.0"
+    "bootstrap-italia": "^2.7.0"
   }
-}
+}

projects/design-angular-kit/src/lib/abstracts/abstract-form.component.ts

@@ -33,7 +33,7 @@ export abstract class ItAbstractFormComponent<T = any> extends ItAbstractCompone
   /**
    * Internal form control
    */
-  protected control: FormControl;
+  protected control: FormControl<T>;
 
   constructor(
     protected readonly _translateService: TranslateService,

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

@@ -13,6 +13,7 @@ import { Modal } from 'bootstrap-italia';
 import { BooleanInput, isTrueBooleanInput } from '../../../utils/boolean-input';
 import { NgIf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { Modal as BSModal } from 'bootstrap'
 
 /**
  * Modal windows
@@ -80,12 +81,35 @@ export class ItModalComponent extends ItAbstractComponent implements AfterViewIn
    */
   @Input() size: 'sm' | 'lg' | 'xl' | undefined;
 
+  /**
+   * Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn’t close the modal when clicked.
+   * @default true
+   */
+  @Input() backdrop: 'static' | BooleanInput = true;
+
+  /**
+   * Puts the focus on the modal when initialized.
+   * @default true
+   */
+  @Input() focus: BooleanInput = true;
+
+  /**
+   * Closes the modal when escape key is pressed.
+   * @default true
+   */
+  @Input() keyboard: BooleanInput = true;
+
   /**
    * To better distinguish the footer element with a shadow
    * @default false
    */
   @Input() footerShadow: BooleanInput | undefined;
 
+  /**
+   * Modal options
+   */
+  @Input() options?: Partial<BSModal.Options>
+
   /**
    * This event fires immediately when the instance method show is called.
    */
@@ -122,7 +146,12 @@ export class ItModalComponent extends ItAbstractComponent implements AfterViewIn
 
     if (this.modalElement) {
       const element = this.modalElement.nativeElement;
-      this.modal = Modal.getOrCreateInstance(element);
+      this.modal = Modal.getOrCreateInstance(element, {
+        ...this.options,
+        backdrop: this.backdrop === 'static' ? 'static' : isTrueBooleanInput(this.backdrop),
+        focus: isTrueBooleanInput(this.focus),
+        keyboard: isTrueBooleanInput(this.keyboard)
+      });
 
       element.addEventListener('show.bs.modal', event => this.showEvent.emit(event));
       element.addEventListener('shown.bs.modal', event => this.shownEvent.emit(event));

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

@@ -96,7 +96,7 @@
    * If you need to retrieve items via API, can pass a function of Observable
    * @default undefined
    */
-  @Input() autocompleteData?: Array<AutocompleteItem> | ((search?: string) => Observable<Array<AutocompleteItem>>);
+  @Input() autocompleteData?: Array<AutocompleteItem> | ((search?: string | number | null) => Observable<Array<AutocompleteItem>>);
 
   /**
    * Time span [ms] has passed without another source emission, to delay data filtering.
@@ -189,7 +189,7 @@
 
   /** Observable da cui vengono emessi i risultati dell'auto completamento */
   autocompleteResults$: Observable<{
-    searchedValue: string,
+    searchedValue: string | number | null | undefined,
     relatedEntries: Array<AutocompleteItem>
   }> = new Observable();
 
@@ -250,7 +250,7 @@
   /**
    * Create the autocomplete list
    */
-  private getAutocompleteResults$(): Observable<{ searchedValue: string, relatedEntries: Array<AutocompleteItem> }> {
+  private getAutocompleteResults$(): Observable<{ searchedValue: string | number | null | undefined, relatedEntries: Array<AutocompleteItem> }> {
     if (this.type !== 'search') {
       return of({ searchedValue: '', relatedEntries: [] });
     }
@@ -259,13 +259,13 @@
       distinctUntilChanged(), // Only if searchValue is distinct in comparison to the last value
       switchMap(searchedValue => {
         if (!this.autocompleteData) {
-          return of({ searchedValue, relatedEntries: [] });
+          return of({ searchedValue, relatedEntries: <Array<AutocompleteItem>>[] });
         }
 
         const autoCompleteData$ = Array.isArray(this.autocompleteData) ? of(this.autocompleteData) : this.autocompleteData(searchedValue);
         return autoCompleteData$.pipe(
           map(autocompleteData => {
-            if (!searchedValue) {
+            if (!searchedValue || typeof searchedValue === 'number') {
               return { searchedValue, relatedEntries: [] };
             }
 

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

@@ -6,21 +6,21 @@
           (blur)="markAsTouched()"
           [attr.aria-describedby]="id + '-description'">
 
-    <option *ngIf="defaultOption" [value]="null" disabled selected>
+    <option *ngIf="defaultOption" [ngValue]="null" disabled selected>
       {{defaultOption}}
     </option>
 
     <ng-content></ng-content>
 
     <ng-container *ngIf="options">
-      <option *ngFor="let option of options" [disabled]="optionIsDisabled(option)" [value]="option.value">
+      <option *ngFor="let option of options" [disabled]="optionIsDisabled(option)" [ngValue]="option.value">
         {{option.text ?? option.value}}
       </option>
     </ng-container>
 
     <ng-container *ngIf="groups">
       <optgroup *ngFor="let group of groups" [label]="group.label">
-        <option *ngFor="let option of group.options" [disabled]="optionIsDisabled(option)" [value]="option.value">
+        <option *ngFor="let option of group.options" [disabled]="optionIsDisabled(option)" [ngValue]="option.value">
           {{option.text ?? option.value}}
         </option>
       </optgroup>

projects/design-angular-kit/src/lib/interfaces/core.ts

@@ -1,6 +1,6 @@
 import { IconName } from './icon';
 
-export type AlertColor = 'info' | 'success' | 'warning' | 'danger';
+export type AlertColor = 'primary' | 'info' | 'success' | 'warning' | 'danger';
 
 export type ButtonColor =
   'primary'

projects/design-angular-kit/src/lib/interfaces/form.ts

@@ -2,16 +2,16 @@ import { IconName } from './icon';
 
 export type InputControlType = 'text' | 'email' | 'number' | 'date' | 'time' | 'tel' | 'color' | 'url' | 'search';
 
-export interface SelectControlOption {
-  value: any,
+export interface SelectControlOption<T = any> {
+  value: T,
   text?: string,
-  selected?: boolean | ((value: any) => boolean),
-  disabled?: boolean | ((value: any) => boolean)
+  selected?: boolean | ((value: T) => boolean),
+  disabled?: boolean | ((value: T) => boolean)
 }
 
-export interface SelectControlGroup {
+export interface SelectControlGroup<T = any> {
   label: string,
-  options: Array<SelectControlOption>,
+  options: Array<SelectControlOption<T>>,
   dragdrop?: boolean
 }
 

src/app/alert/alert-color-example/alert-color-example.component.html

@@ -3,6 +3,10 @@ <h3>Esempi</h3>
 <div class="bd-example">
   <div class="example-section">
 
+    <it-alert color="primary">
+      Questo è un alert di tipo "<b>primary</b>".
+    </it-alert>
+
     <it-alert>
       Questo è un alert di tipo "<b>info</b>".
     </it-alert>