AmadeusITGroup · quentinderoubaix · Sep 5, 2024 · Sep 2, 2024
diff --git a/angular/bootstrap/src/components/slider/slider.component.ts b/angular/bootstrap/src/components/slider/slider.component.ts
@@ -17,7 +17,6 @@ import {
 	Directive,
 	EventEmitter,
 	Input,
-	NgZone,
 	Output,
 	TemplateRef,
 	ViewChild,
@@ -26,7 +25,6 @@ import {
 	inject,
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR} from '@angular/forms';
-import {take} from 'rxjs';
 import {callWidgetFactory} from '../../config';
 import type {SliderContext, SliderProps, SliderSlotHandleContext, SliderSlotLabelContext, SliderWidget} from './slider.gen';
 import {createSlider} from './slider.gen';
@@ -58,16 +56,7 @@ export class SliderHandleDirective {
 	`,
 })
 export class SliderDefaultHandleSlotComponent {
-	private readonly _zone = inject(NgZone);
-
 	@ViewChild('handle', {static: true}) readonly handle!: TemplateRef<SliderSlotHandleContext>;
-
-	onKeyDown(event: KeyboardEvent, handleId: number, widgetOnKeyDownFn: (event: KeyboardEvent, handleId: number) => void) {
-		widgetOnKeyDownFn(event, handleId);
-		this._zone.onStable.pipe(take(1)).subscribe(() => {
-			(event.target as HTMLElement).focus();
-		});
-	}
 }
 
 export const sliderDefaultSlotHandle = new ComponentTemplate(SliderDefaultHandleSlotComponent, 'handle');

diff --git a/angular/demo/angular.json b/angular/demo/angular.json
@@ -34,12 +34,6 @@
 					},
 					"configurations": {
 						"coverage": {
-							"fileReplacements": [
-								{
-									"replace": "bootstrap/src/environments/environment.ts",
-									"with": "bootstrap/src/environments/environment.prod.ts"
-								}
-							],
 							"outputHashing": "all",
 							"tsConfig": "bootstrap/tsconfig.json"
 						},
@@ -56,12 +50,6 @@
 									"maximumError": "4kb"
 								}
 							],
-							"fileReplacements": [
-								{
-									"replace": "bootstrap/src/environments/environment.ts",
-									"with": "bootstrap/src/environments/environment.prod.ts"
-								}
-							],
 							"outputHashing": "all"
 						},
 						"development": {
@@ -122,12 +110,6 @@
 					},
 					"configurations": {
 						"coverage": {
-							"fileReplacements": [
-								{
-									"replace": "daisyui/src/environments/environment.ts",
-									"with": "daisyui/src/environments/environment.prod.ts"
-								}
-							],
 							"outputHashing": "all",
 							"tsConfig": "daisyui/tsconfig.json"
 						},
@@ -144,12 +126,6 @@
 									"maximumError": "4kb"
 								}
 							],
-							"fileReplacements": [
-								{
-									"replace": "daisyui/src/environments/environment.ts",
-									"with": "daisyui/src/environments/environment.prod.ts"
-								}
-							],
 							"outputHashing": "all"
 						},
 						"development": {

diff --git a/angular/demo/bootstrap/src/app/samples/accordion/customHeaders.route.ts b/angular/demo/bootstrap/src/app/samples/accordion/customHeaders.route.ts
@@ -1,5 +1,5 @@
 import {AgnosUIAngularModule, UseDirective} from '@agnos-ui/angular-bootstrap';
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import BODY from '@agnos-ui/common/samples/accordion/body.txt';
 
 @Component({
@@ -52,8 +52,8 @@ import BODY from '@agnos-ui/common/samples/accordion/body.txt';
 							>
 								Toggle second
 							</button>
-							<button type="button" class="btn btn-sm btn-outline-secondary" (click)="thirdDisabled = !thirdDisabled">
-								{{ thirdDisabled ? 'En' : 'Dis' }}able third
+							<button type="button" class="btn btn-sm btn-outline-secondary" (click)="toggleThirdDisabled()">
+								{{ thirdDisabled() ? 'En' : 'Dis' }}able third
 							</button>
 							<button type="button" class="btn btn-sm btn-outline-danger" (click)="accordion.api.collapseAll()">Collapse all</button>
 						</div>
@@ -67,7 +67,7 @@ import BODY from '@agnos-ui/common/samples/accordion/body.txt';
 					}
 				</ng-template>
 			</div>
-			<div auAccordionItem [auDisabled]="thirdDisabled">
+			<div auAccordionItem [auDisabled]="thirdDisabled()">
 				<ng-template auAccordionItemStructure let-state="state" let-widget="widget">
 					<div
 						[auUse]="widget.directives.headerDirective"
@@ -83,7 +83,7 @@ import BODY from '@agnos-ui/common/samples/accordion/body.txt';
 						>
 							Third panel
 						</button>
-						@if (thirdDisabled) {
+						@if (thirdDisabled()) {
 							<p class="text-muted m-0 small">[I'm&nbsp;disabled]</p>
 						}
 					</div>
@@ -101,6 +101,9 @@ import BODY from '@agnos-ui/common/samples/accordion/body.txt';
 	styles: "@import '@agnos-ui/common/samples/accordion/custom.scss';",
 })
 export default class AccordionComponent {
-	thirdDisabled = false;
-	BODY = BODY;
+	readonly thirdDisabled = signal(false);
+	toggleThirdDisabled() {
+		this.thirdDisabled.update((val) => !val);
+	}
+	readonly BODY = BODY;
 }
diff --git a/angular/demo/bootstrap/src/app/samples/alert/config.route.ts b/angular/demo/bootstrap/src/app/samples/alert/config.route.ts
@@ -1,6 +1,6 @@
 import {AgnosUIAngularModule} from '@agnos-ui/angular-bootstrap';
 import type {AlertComponent} from '@agnos-ui/angular-bootstrap';
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 export enum AlertStatus {
@@ -38,7 +38,7 @@ export enum AlertStatus {
 		<br />
 		<br />
 
-		<au-component auAlert #alert [auAnimated]="animated" [auAnimatedOnInit]="animatedOnInit" [auDismissible]="dismissible" [auType]="type">
+		<au-component auAlert #alert [auAnimated]="animated()" [auAnimatedOnInit]="animatedOnInit()" [auDismissible]="dismissible()" [auType]="type()">
 			<h4 class="alert-heading">Well done!</h4>
 			<p>
 				Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing
@@ -49,17 +49,17 @@ export enum AlertStatus {
 		</au-component>`,
 })
 export default class ConfigAlertComponent {
-	styleList = Object.entries(AlertStatus).map((entry) => {
+	readonly styleList = Object.entries(AlertStatus).map((entry) => {
 		return {
 			value: entry[1],
 			label: entry[0],
 		};
 	});
 
-	animatedOnInit = true;
-	animated = true;
-	dismissible = true;
-	type = this.styleList[0].value;
+	readonly animatedOnInit = signal(true);
+	readonly animated = signal(true);
+	readonly dismissible = signal(true);
+	readonly type = signal(this.styleList[0].value);
 
 	async showAlert(alert: AlertComponent) {
 		alert.api.open();

diff --git a/angular/demo/bootstrap/src/app/samples/alert/dynamic.route.ts b/angular/demo/bootstrap/src/app/samples/alert/dynamic.route.ts
@@ -1,6 +1,6 @@
 import {AlertComponent} from '@agnos-ui/angular-bootstrap';
 import type {AlertProps} from '@agnos-ui/angular-bootstrap';
-import {Component, Injectable} from '@angular/core';
+import {Component, inject, Injectable} from '@angular/core';
 
 @Injectable({providedIn: 'root'})
 class AlertContainerService {
@@ -37,7 +37,7 @@ class AlertContainerService {
 	`,
 })
 export class ChildComponent {
-	constructor(readonly alertContainerService: AlertContainerService) {}
+	readonly alertContainerService = inject(AlertContainerService);
 
 	removeAlert(type: Partial<AlertProps>) {
 		this.alertContainerService.remove(type);
@@ -57,7 +57,7 @@ export class ChildComponent {
 	`,
 })
 export default class ParentComponent {
-	constructor(readonly alertContainerService: AlertContainerService) {}
+	readonly alertContainerService = inject(AlertContainerService);
 
 	addError() {
 		this.alertContainerService.add({type: 'danger', children: 'Error', dismissible: true, animated: true});

diff --git a/angular/demo/bootstrap/src/app/samples/directives/usage.route.ts b/angular/demo/bootstrap/src/app/samples/directives/usage.route.ts
@@ -1,5 +1,5 @@
 import {UseDirective} from '@agnos-ui/angular-headless';
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 import {createSampleDirective} from '@agnos-ui/common/samples/directives/sample-directive';
@@ -8,7 +8,7 @@ import {createSampleDirective} from '@agnos-ui/common/samples/directives/sample-
 	standalone: true,
 	imports: [UseDirective, FormsModule],
 	template: `
-		<div [auUse]="[createSampleDirective, config]">
+		<div [auUse]="[createSampleDirective, config()]">
 			<button class="btn btn-primary" id="test">button 1</button>
 			<button class="btn btn-primary" id="test2">button 2</button>
 		</div>
@@ -19,6 +19,6 @@ import {createSampleDirective} from '@agnos-ui/common/samples/directives/sample-
 	`,
 })
 export default class GenericComponent {
-	config = 'focus element clicked';
-	createSampleDirective = createSampleDirective;
+	readonly config = signal('focus element clicked');
+	readonly createSampleDirective = createSampleDirective;
 }
diff --git a/angular/demo/bootstrap/src/app/samples/floatingUI/floatingUI.route.ts b/angular/demo/bootstrap/src/app/samples/floatingUI/floatingUI.route.ts
@@ -1,5 +1,5 @@
 import {AgnosUIAngularModule, browserDirective, createFloatingUI, toAngularSignal} from '@agnos-ui/angular-bootstrap';
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
 import {autoPlacement, hide, offset, shift} from '@floating-ui/dom';
 
 const scrollToMiddle = browserDirective((element) => {
@@ -11,10 +11,10 @@ const scrollToMiddle = browserDirective((element) => {
 	imports: [AgnosUIAngularModule],
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	template: `<div class="position-relative overflow-auto border border-primary-subtle demo-floatingui" [auUse]="scrollToMiddle">
-		<button [auUse]="floatingUI.directives.referenceDirective" type="button" class="btn btn-primary" (click)="displayPopover = !displayPopover">
+		<button [auUse]="floatingUI.directives.referenceDirective" type="button" class="btn btn-primary" (click)="toggleDisplayPopover()">
 			Toggle popover
 		</button>
-		@if (displayPopover) {
+		@if (displayPopover()) {
 			<div
 				[auUse]="floatingUI.directives.floatingDirective"
 				[attr.data-popper-placement]="floatingUIState().placement"
@@ -31,9 +31,12 @@ const scrollToMiddle = browserDirective((element) => {
 	styles: "@import '@agnos-ui/common/samples/floatingui/floatingui.scss';",
 })
 export default class FloatingUIComponent {
-	displayPopover = true;
+	readonly displayPopover = signal(true);
+	toggleDisplayPopover() {
+		this.displayPopover.update((val) => !val);
+	}
 
-	floatingUI = createFloatingUI({
+	readonly floatingUI = createFloatingUI({
 		props: {
 			arrowOptions: {
 				padding: 6,
@@ -50,6 +53,6 @@ export default class FloatingUIComponent {
 			},
 		},
 	});
-	floatingUIState = toAngularSignal(this.floatingUI.state$);
-	scrollToMiddle = scrollToMiddle;
+	readonly floatingUIState = toAngularSignal(this.floatingUI.state$);
+	readonly scrollToMiddle = scrollToMiddle;
 }
diff --git a/angular/demo/bootstrap/src/app/samples/modal/default.route.ts b/angular/demo/bootstrap/src/app/samples/modal/default.route.ts
@@ -1,6 +1,6 @@
 import type {ModalComponent} from '@agnos-ui/angular-bootstrap';
 import {AgnosUIAngularModule, modalCloseButtonClick, modalOutsideClick} from '@agnos-ui/angular-bootstrap';
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 
 @Component({
@@ -13,8 +13,8 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 			<label class="form-check-label" for="fullscreen">Fullscreen</label>
 		</div>
 		<hr />
-		<div data-testid="message">{{ message }}</div>
-		<au-component auModal #modal auTitle="Save changes" [auFullscreen]="fullscreenToggle">
+		<div data-testid="message">{{ message() }}</div>
+		<au-component auModal #modal auTitle="Save changes" [auFullscreen]="fullscreenToggle()">
 			Do you want to save your changes?
 			<ng-template auModalFooter>
 				<button type="button" class="btn btn-outline-primary" (click)="modal.api.close(true)">Yes</button>
@@ -24,18 +24,18 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 	`,
 })
 export default class DefaultModalComponent {
-	message = '';
-	fullscreenToggle = false;
+	readonly message = signal('');
+	readonly fullscreenToggle = signal(false);
 
 	async show(modal: ModalComponent<void>) {
-		this.message = '';
+		this.message.set('');
 		const result = await modal.api.open();
 		if (result === modalCloseButtonClick) {
-			this.message = 'You clicked on the close button.';
+			this.message.set('You clicked on the close button.');
 		} else if (result === modalOutsideClick) {
-			this.message = 'You clicked outside the modal.';
+			this.message.set('You clicked outside the modal.');
 		} else {
-			this.message = `You answered the question with "${result ? 'Yes' : 'No'}".`;
+			this.message.set(`You answered the question with "${result ? 'Yes' : 'No'}".`);
 		}
 	}
 }
diff --git a/angular/demo/bootstrap/src/app/samples/navManager/navManager.route.ts b/angular/demo/bootstrap/src/app/samples/navManager/navManager.route.ts
@@ -1,27 +1,27 @@
 import type {NavManagerItemConfig} from '@agnos-ui/angular-bootstrap';
 import {AgnosUIAngularModule, createNavManager} from '@agnos-ui/angular-bootstrap';
-import {Component, Input} from '@angular/core';
+import {Component, input} from '@angular/core';
 
 @Component({
 	standalone: true,
 	selector: 'app-navmanager-line',
 	imports: [AgnosUIAngularModule],
 	template: `
 		<div class="d-flex demo-navmanager-line">
-			<input [auUse]="[navManager.directive, navManagerConfig]" type="text" [value]="text" class="form-control me-1" />
-			<span [auUse]="[navManager.directive, navManagerConfig]" tabindex="-1" class="form-control w-auto me-1">{{ text }}</span>
+			<input [auUse]="[navManager.directive, navManagerConfig]" type="text" [value]="text()" class="form-control me-1" />
+			<span [auUse]="[navManager.directive, navManagerConfig]" tabindex="-1" class="form-control w-auto me-1">{{ text() }}</span>
 			<input [auUse]="[navManager.directive, navManagerConfig]" tabindex="-1" type="checkbox" class="form-check-input align-self-center me-1" />
-			<input [auUse]="[navManager.directive, navManagerConfig]" tabindex="-1" type="text" [value]="text" disabled class="form-control me-1" />
-			<input [auUse]="[navManager.directive, navManagerConfig]" tabindex="-1" type="text" [value]="text" class="form-control me-1" />
+			<input [auUse]="[navManager.directive, navManagerConfig]" tabindex="-1" type="text" [value]="text()" disabled class="form-control me-1" />
+			<input [auUse]="[navManager.directive, navManagerConfig]" tabindex="-1" type="text" [value]="text()" class="form-control me-1" />
 		</div>
 	`,
 })
 export class NavmanagerLineComponent {
-	@Input() text = '';
+	readonly text = input('');
 
-	navManager = createNavManager();
+	readonly navManager = createNavManager();
 
-	navManagerConfig: NavManagerItemConfig = {
+	readonly navManagerConfig: NavManagerItemConfig = {
 		keys: {
 			ArrowLeft: this.navManager.focusLeft,
 			ArrowRight: this.navManager.focusRight,

diff --git a/angular/demo/bootstrap/src/app/samples/navManager/navManagerWithSelector.route.ts b/angular/demo/bootstrap/src/app/samples/navManager/navManagerWithSelector.route.ts
@@ -1,27 +1,27 @@
 import type {NavManagerItemConfig} from '@agnos-ui/angular-bootstrap';
 import {AgnosUIAngularModule, createNavManager} from '@agnos-ui/angular-bootstrap';
-import {Component, Input} from '@angular/core';
+import {Component, input} from '@angular/core';
 
 @Component({
 	standalone: true,
 	selector: 'app-navmanager-line',
 	imports: [AgnosUIAngularModule],
 	template: `
 		<div class="d-flex demo-navmanager-line" [auUse]="[navManager.directive, navManagerConfig]">
-			<input type="text" [value]="text" class="form-control me-1" />
-			<span tabindex="-1" class="form-control w-auto me-1">{{ text }}</span>
+			<input type="text" [value]="text()" class="form-control me-1" />
+			<span tabindex="-1" class="form-control w-auto me-1">{{ text() }}</span>
 			<input tabindex="-1" type="checkbox" class="form-check-input align-self-center me-1" />
-			<input tabindex="-1" type="text" [value]="text" disabled class="form-control me-1" />
-			<input tabindex="-1" type="text" [value]="text" class="form-control me-1" />
+			<input tabindex="-1" type="text" [value]="text()" disabled class="form-control me-1" />
+			<input tabindex="-1" type="text" [value]="text()" class="form-control me-1" />
 		</div>
 	`,
 })
 export class NavmanagerLineComponent {
-	@Input() text = '';
+	readonly text = input('');
 
-	navManager = createNavManager();
+	readonly navManager = createNavManager();
 
-	navManagerConfig: NavManagerItemConfig = {
+	readonly navManagerConfig: NavManagerItemConfig = {
 		keys: {
 			ArrowLeft: this.navManager.focusLeft,
 			ArrowRight: this.navManager.focusRight,