chore: migration to Angular 17, Prettier 3 and lint-staged

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx pretty-quick --staged
+npx lint-staged

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+	"*": "prettier --write --ignore-unknown"
+}

angular/angular.json

@@ -69,20 +69,14 @@
 					"configurations": {
 						"production": {
 							"servePath": "/angular/samples",
-							"browserTarget": "demo:build:production"
+							"buildTarget": "demo:build:production"
 						},
 						"development": {
 							"servePath": "/angular/samples",
-							"browserTarget": "demo:build:development"
+							"buildTarget": "demo:build:development"
 						}
 					},
 					"defaultConfiguration": "development"
-				},
-				"extract-i18n": {
-					"builder": "@angular-devkit/build-angular:extract-i18n",
-					"options": {
-						"browserTarget": "demo:build"
-					}
 				}
 			}
 		},

angular/demo/src/app/links.component.ts

@@ -9,12 +9,14 @@ export const links = new InjectionToken<string[]>('app-links');
 	template: `
 		<h3>Samples:</h3>
 		<div class="sample-links">
-			<div *ngFor="let url of links">
-				<a href="#/{{ url }}">{{ url }}</a>
-			</div>
+			@for (url of links; track url) {
+				<div>
+					<a href="#/{{ url }}">{{ url }}</a>
+				</div>
+			}
 		</div>
 	`,
-	styles: ["@import '@agnos-ui/common/samples/links.scss';"],
+	styles: "@import '@agnos-ui/common/samples/links.scss';",
 })
 export class LinksComponent {
 	links = inject(links);

angular/demo/src/app/samples/accordion/customHeaders.route.ts

@@ -1,11 +1,10 @@
 import {AgnosUIAngularModule} from '@agnos-ui/angular';
 import {Component} from '@angular/core';
-import {NgIf} from '@angular/common';
 import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
 
 @Component({
 	standalone: true,
-	imports: [AgnosUIAngularModule, NgIf],
+	imports: [AgnosUIAngularModule],
 	template: `
 		<div auAccordion #accordion="auAccordion">
 			<div auAccordionItem>
@@ -31,17 +30,18 @@ import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
 							Toggle first
 						</button>
 					</div>
-					<div
-						*ngIf="state!.shouldBeInDOM"
-						[auUse]="widget!.directives.collapseDirective"
-						attr.aria-labelledby="{{ state!.itemId }}-toggle"
-						id="{{ state!.itemId }}-collapse"
-						class="accordion-collapse {{ state!.itemCollapseClass }}"
-					>
-						<div class="accordion-body {{ state!.itemBodyClass }}">
-							{{ BODY }}
+					@if (state!.shouldBeInDOM) {
+						<div
+							[auUse]="widget!.directives.collapseDirective"
+							attr.aria-labelledby="{{ state!.itemId }}-toggle"
+							id="{{ state!.itemId }}-collapse"
+							class="accordion-collapse {{ state!.itemCollapseClass }}"
+						>
+							<div class="accordion-body {{ state!.itemBodyClass }}">
+								{{ BODY }}
+							</div>
 						</div>
-					</div>
+					}
 				</ng-template>
 			</div>
 			<div auAccordionItem>
@@ -73,17 +73,18 @@ import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
 							<button type="button" class="btn btn-sm btn-outline-danger me-2" (click)="accordion.api.collapseAll()">Collapse all</button>
 						</div>
 					</div>
-					<div
-						*ngIf="state!.shouldBeInDOM"
-						[auUse]="widget!.directives.collapseDirective"
-						attr.aria-labelledby="{{ state!.itemId }}-toggle"
-						id="{{ state!.itemId }}-collapse"
-						class="accordion-collapse {{ state!.itemCollapseClass }}"
-					>
-						<div class="accordion-body {{ state!.itemBodyClass }}">
-							{{ BODY }}
+					@if (state!.shouldBeInDOM) {
+						<div
+							[auUse]="widget!.directives.collapseDirective"
+							attr.aria-labelledby="{{ state!.itemId }}-toggle"
+							id="{{ state!.itemId }}-collapse"
+							class="accordion-collapse {{ state!.itemCollapseClass }}"
+						>
+							<div class="accordion-body {{ state!.itemBodyClass }}">
+								{{ BODY }}
+							</div>
 						</div>
-					</div>
+					}
 				</ng-template>
 			</div>
 			<div auAccordionItem [auItemDisabled]="thirdDisabled">
@@ -107,24 +108,27 @@ import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
 						>
 							Third panel
 						</button>
-						<p *ngIf="thirdDisabled" class="text-muted m-0 small">[I'm&nbsp;disabled]</p>
+						@if (thirdDisabled) {
+							<p class="text-muted m-0 small">[I'm&nbsp;disabled]</p>
+						}
 					</div>
-					<div
-						*ngIf="state!.shouldBeInDOM"
-						[auUse]="widget!.directives.collapseDirective"
-						attr.aria-labelledby="{{ state!.itemId }}-toggle"
-						id="{{ state!.itemId }}-collapse"
-						class="accordion-collapse {{ state!.itemCollapseClass }}"
-					>
-						<div class="accordion-body {{ state!.itemBodyClass }}">
-							{{ BODY }}
+					@if (state!.shouldBeInDOM) {
+						<div
+							[auUse]="widget!.directives.collapseDirective"
+							attr.aria-labelledby="{{ state!.itemId }}-toggle"
+							id="{{ state!.itemId }}-collapse"
+							class="accordion-collapse {{ state!.itemCollapseClass }}"
+						>
+							<div class="accordion-body {{ state!.itemBodyClass }}">
+								{{ BODY }}
+							</div>
 						</div>
-					</div>
+					}
 				</ng-template>
 			</div>
 		</div>
 	`,
-	styles: ["@import '@agnos-ui/common/samples/accordion/custom.scss';"],
+	styles: "@import '@agnos-ui/common/samples/accordion/custom.scss';",
 })
 export default class AccordionComponent {
 	thirdDisabled = false;

angular/demo/src/app/samples/alert/alert-icon.component.ts

@@ -5,13 +5,12 @@ import biInfoCircleFill from '!raw-loader!bootstrap-icons/icons/info-circle-fill
 import biLightbulb from '!raw-loader!bootstrap-icons/icons/lightbulb.svg';
 import type {AlertWidget} from '@agnos-ui/angular';
 import {SlotComponent, SlotDirective} from '@agnos-ui/angular';
-import {NgIf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
 
 @Component({
 	standalone: true,
-	imports: [NgIf, SlotDirective],
+	imports: [SlotDirective],
 	providers: [SlotDirective],
 	selector: 'app-icon-structure',
 	host: {
@@ -21,13 +20,9 @@ import {DomSanitizer} from '@angular/platform-browser';
 		<span class="d-flex align-items-center me-2" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"></span>
 		<div class="d-flex w-100 alert-body">
 			<ng-template [auSlot]="state.slotDefault" [auSlotProps]="{widget, state}"></ng-template>
-			<button
-				*ngIf="state.dismissible"
-				type="button"
-				class="btn-close ms-auto"
-				(click)="widget.api.close()"
-				[attr.aria-label]="state.ariaCloseButtonLabel"
-			></button>
+			@if (state.dismissible) {
+				<button type="button" class="btn-close ms-auto" (click)="widget.api.close()" [attr.aria-label]="state.ariaCloseButtonLabel"></button>
+			}
 		</div>
 	`,
 })

angular/demo/src/app/samples/alert/config.route.ts

@@ -1,6 +1,5 @@
 import {AgnosUIAngularModule} from '@agnos-ui/angular';
 import type {AlertComponent} from '@agnos-ui/angular';
-import {NgFor} from '@angular/common';
 import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
@@ -17,15 +16,17 @@ export enum AlertStatus {
 
 @Component({
 	standalone: true,
-	imports: [AgnosUIAngularModule, NgFor, FormsModule],
+	imports: [AgnosUIAngularModule, FormsModule],
 	template: ` <button class="btn btn-primary showAlert" (click)="showAlert(alert)" type="button">Show alert</button>
 		<br />
 		<br />
 		<div class="d-flex flex-column">
 			<div class="d-flex form-group">
 				<label class="align-self-center me-3" for="typeSelect">Alert type: </label>
 				<select id="typeSelect" class="form-select w-auto" [(ngModel)]="type">
-					<option *ngFor="let style of styleList" [value]="style.value">{{ style.label }}</option>
+					@for (style of styleList; track style) {
+						<option [value]="style.value">{{ style.label }}</option>
+					}
 				</select>
 			</div>
 

angular/demo/src/app/samples/alert/dynamic.route.ts

@@ -1,6 +1,5 @@
 import {AlertComponent} from '@agnos-ui/angular';
 import type {AlertProps} from '@agnos-ui/angular';
-import {NgFor} from '@angular/common';
 import {Component, Injectable} from '@angular/core';
 
 @Injectable({providedIn: 'root'})
@@ -22,18 +21,19 @@ class AlertContainerService {
 @Component({
 	selector: 'app-alert-child',
 	standalone: true,
-	imports: [AlertComponent, NgFor],
+	imports: [AlertComponent],
 	template: `
-		<au-component
-			auAlert
-			*ngFor="let alert of alertContainerService.alerts"
-			[auAnimation]="alert.animation"
-			[auAnimationOnInit]="alert.animationOnInit"
-			[auDismissible]="alert.dismissible"
-			[auType]="alert.type"
-			[auSlotDefault]="alert.slotDefault"
-			(auHidden)="removeAlert(alert)"
-		></au-component>
+		@for (alert of alertContainerService.alerts; track alert) {
+			<au-component
+				auAlert
+				[auAnimation]="alert.animation"
+				[auAnimationOnInit]="alert.animationOnInit"
+				[auDismissible]="alert.dismissible"
+				[auType]="alert.type"
+				[auSlotDefault]="alert.slotDefault"
+				(auHidden)="removeAlert(alert)"
+			></au-component>
+		}
 	`,
 })
 export class ChildComponent {

angular/demo/src/app/samples/pagination/custom.route.ts

@@ -1,13 +1,12 @@
 import {AgnosUIAngularModule} from '@agnos-ui/angular';
 import type {PaginationContext} from '@agnos-ui/angular';
-import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
 
 const FILTER_PAG_REGEX = /[^0-9]/g;
 
 @Component({
 	standalone: true,
-	imports: [AgnosUIAngularModule, NgIf],
+	imports: [AgnosUIAngularModule],
 	template: `
 		<p>A pagination with customized links:</p>
 		<nav auPagination [auCollectionSize]="60" [(auPage)]="customPage" auAriaLabel="Page navigation with customized links">
@@ -20,26 +19,28 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 		<p>A pagination with customized pages:</p>
 		<nav auPagination [auCollectionSize]="60" [(auPage)]="customPage" auAriaLabel="Page navigation with customized pages">
 			<ng-template auPaginationPages let-widget="widget" let-state="state">
-				<li class="au-custom-pages-item" *ngIf="state.pages.length > 0">
-					<div class="mb-3 d-flex flex-nowrap px-2">
-						<label id="paginationInputLabel" for="paginationInput" class="col-form-label me-2 ms-1">Page</label>
-						<input
-							#i
-							type="text"
-							inputmode="numeric"
-							pattern="[0-9]*"
-							class="form-control custom-pages-input"
-							id="paginationInput"
-							[value]="state.page"
-							(keyup.enter)="handleTheChange(i, widget)"
-							(blur)="handleTheChange(i, widget)"
-							(input)="formatInput(i)"
-							aria-labelledby="paginationInputLabel paginationDescription"
-							style="width: 2.5rem"
-						/>
-						<span id="paginationDescription" class="col-form-label text-nowrap px-2"> of {{ state.pages.length }}</span>
-					</div>
-				</li>
+				@if (state.pages.length > 0) {
+					<li class="au-custom-pages-item">
+						<div class="mb-3 d-flex flex-nowrap px-2">
+							<label id="paginationInputLabel" for="paginationInput" class="col-form-label me-2 ms-1">Page</label>
+							<input
+								#i
+								type="text"
+								inputmode="numeric"
+								pattern="[0-9]*"
+								class="form-control custom-pages-input"
+								id="paginationInput"
+								[value]="state.page"
+								(keyup.enter)="handleTheChange(i, widget)"
+								(blur)="handleTheChange(i, widget)"
+								(input)="formatInput(i)"
+								aria-labelledby="paginationInputLabel paginationDescription"
+								style="width: 2.5rem"
+							/>
+							<span id="paginationDescription" class="col-form-label text-nowrap px-2"> of {{ state.pages.length }}</span>
+						</div>
+					</li>
+				}
 			</ng-template>
 		</nav>
 	`,

angular/demo/src/app/samples/progressbar/fullCustom.route.ts

@@ -1,13 +1,12 @@
 import {ProgressbarComponent, ProgressbarContentDirective} from '@agnos-ui/angular';
-import {NgIf} from '@angular/common';
 import type {OnDestroy} from '@angular/core';
 import {Component} from '@angular/core';
 import type {Subscription} from 'rxjs';
 import {interval, takeWhile} from 'rxjs';
 
 @Component({
 	standalone: true,
-	imports: [ProgressbarComponent, ProgressbarContentDirective, NgIf],
+	imports: [ProgressbarComponent, ProgressbarContentDirective],
 	template: `
 		<div class="d-flex align-items-center flex-wrap">
 			<div style="width: 350px">
@@ -17,9 +16,11 @@ import {interval, takeWhile} from 'rxjs';
 							<div class="cup">
 								<div class="cup-fill-parent">
 									<div class="cup-fill" [style.height.px]="value * 1.7">
-										<div class="bubble bubble-1" *ngIf="value >= 50"></div>
-										<div class="bubble bubble-2" *ngIf="value >= 50"></div>
-										<div class="bubble bubble-3" *ngIf="value >= 50"></div>
+										@if (value >= 50) {
+											<div class="bubble bubble-1"></div>
+											<div class="bubble bubble-2"></div>
+											<div class="bubble bubble-3"></div>
+										}
 									</div>
 								</div>
 							</div>
@@ -45,7 +46,7 @@ import {interval, takeWhile} from 'rxjs';
 			</div>
 		</div>
 	`,
-	styles: ["@import '@agnos-ui/common/samples/progressbar/custom.scss';"],
+	styles: "@import '@agnos-ui/common/samples/progressbar/custom.scss';",
 })
 export default class FullCustomProgressBarComponent implements OnDestroy {
 	value = 0;

angular/demo/src/app/samples/rating/customTemplate.route.ts

@@ -11,6 +11,6 @@ import {Component} from '@angular/core';
 			</ng-template>
 		</div>
 	`,
-	styles: ["@import '@agnos-ui/common/samples/rating/custom.scss';"],
+	styles: "@import '@agnos-ui/common/samples/rating/custom.scss';",
 })
 export default class CustomTemplateComponent {}

angular/demo/src/app/samples/rating/form.route.ts

@@ -1,17 +1,20 @@
 import {AgnosUIAngularModule} from '@agnos-ui/angular';
-import {NgIf} from '@angular/common';
 import {Component} from '@angular/core';
 import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
 
 @Component({
 	standalone: true,
-	imports: [AgnosUIAngularModule, ReactiveFormsModule, NgIf],
+	imports: [AgnosUIAngularModule, ReactiveFormsModule],
 	template: `
 		<label class="form-label" id="ratingLabel">Rating of your experience</label><br />
 		<div [auRating] [formControl]="ctrl" auAriaLabelledBy="ratingLabel"></div>
 		<div id="form-msg" class="form-text small">
-			<div *ngIf="ctrl.valid" class="text-success">Thanks!</div>
-			<div *ngIf="ctrl.invalid" class="text-danger">Please rate us</div>
+			@if (ctrl.valid) {
+				<div class="text-success">Thanks!</div>
+			}
+			@if (ctrl.invalid) {
+				<div class="text-danger">Please rate us</div>
+			}
 		</div>
 		<pre>Model: <span id="form-model"><b>{{ ctrl.value }}</b></span></pre>
 		<button id="form-btn-enable" class="btn btn-sm btn-outline-{{ ctrl.disabled ? 'danger' : 'success' }} me-2" (click)="toggle()">