From b7f4e21c06ad7fb72bfddbc07e77141bb10f0fa2 Mon Sep 17 00:00:00 2001
From: Quentin Deroubaix <quentin.deroubaix@amadeus.com>
Date: Wed, 15 Nov 2023 13:56:27 +0100
Subject: [PATCH] feat: support and enforce number and boolean transform
 functions in angular

---
 .../app/samples/accordion/default.route.ts    |   4 +-
 .../app/samples/pagination/custom.route.ts    |   4 +-
 .../app/samples/pagination/default.route.ts   |   8 +-
 .../app/samples/progressbar/default.route.ts  |  10 +-
 .../samples/progressbar/simpleCustom.route.ts |   6 +-
 .../samples/rating/customTemplate.route.ts    |   2 +-
 .../src/app/samples/rating/readonly.route.ts  |   2 +-
 .../src/app/samples/slider/default.route.ts   |   6 +-
 .../src/app/samples/slider/range.route.ts     |   4 +-
 .../src/app/samples/slider/vertical.route.ts  |   4 +-
 angular/headless/src/lib/coercion.spec.ts     | 112 ++++++++++++++++++
 angular/headless/src/lib/coercion.ts          |  35 ++++++
 angular/headless/src/public-api.ts            |   1 +
 .../src/lib/accordion/accordion.component.ts  |  19 +--
 angular/lib/src/lib/alert/alert.component.ts  |   9 +-
 angular/lib/src/lib/modal/modal.component.ts  |  11 +-
 .../lib/pagination/pagination.component.ts    |  14 ++-
 .../lib/progressbar/progressbar.component.ts  |  12 +-
 .../lib/src/lib/rating/rating.component.ts    |  22 ++--
 .../lib/src/lib/select/select.component.ts    |   8 +-
 .../lib/src/lib/slider/slider.component.ts    |  14 ++-
 eslint-plugin/src/angular-check-props.ts      |  92 ++++++++++++--
 .../test/angular-check-props.spec.ts          |  29 +++--
 23 files changed, 341 insertions(+), 87 deletions(-)
 create mode 100644 angular/headless/src/lib/coercion.spec.ts
 create mode 100644 angular/headless/src/lib/coercion.ts

diff --git a/angular/demo/src/app/samples/accordion/default.route.ts b/angular/demo/src/app/samples/accordion/default.route.ts
index 5a70b3cb1b..8349f1929b 100644
--- a/angular/demo/src/app/samples/accordion/default.route.ts
+++ b/angular/demo/src/app/samples/accordion/default.route.ts
@@ -7,7 +7,7 @@ import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
 	imports: [AgnosUIAngularModule],
 	template: `
 		<div auAccordion>
-			<div auAccordionItem [auItemVisible]="true">
+			<div auAccordionItem auItemVisible>
 				<ng-template auAccordionItemHeader>Simple</ng-template>
 				<ng-template auAccordionItemBody>{{ BODY }} </ng-template>
 			</div>
@@ -17,7 +17,7 @@ import BODY from '!raw-loader!@agnos-ui/common/samples/accordion/body.txt';
 				>
 				<ng-template auAccordionItemBody>{{ BODY }} </ng-template>
 			</div>
-			<div auAccordionItem [auItemDisabled]="true">
+			<div auAccordionItem auItemDisabled>
 				<ng-template auAccordionItemHeader>Disabled</ng-template>
 				<ng-template auAccordionItemBody>{{ BODY }} </ng-template>
 			</div>
diff --git a/angular/demo/src/app/samples/pagination/custom.route.ts b/angular/demo/src/app/samples/pagination/custom.route.ts
index 13cac688a7..ab378c1d82 100644
--- a/angular/demo/src/app/samples/pagination/custom.route.ts
+++ b/angular/demo/src/app/samples/pagination/custom.route.ts
@@ -9,7 +9,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 	imports: [AgnosUIAngularModule],
 	template: `
 		<p>A pagination with customized links:</p>
-		<nav auPagination [auCollectionSize]="60" [(auPage)]="customPage" auAriaLabel="Page navigation with customized links">
+		<nav auPagination auCollectionSize="60" [(auPage)]="customPage" auAriaLabel="Page navigation with customized links">
 			<ng-template auPaginationPrevious>Prev</ng-template>
 			<ng-template auPaginationNext>Next</ng-template>
 			<ng-template auPaginationNumber let-displayedPage="displayedPage">{{ getPageSymbol(displayedPage) }}</ng-template>
@@ -17,7 +17,7 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
 		<hr />
 
 		<p>A pagination with customized pages:</p>
-		<nav auPagination [auCollectionSize]="60" [(auPage)]="customPage" auAriaLabel="Page navigation with customized pages">
+		<nav auPagination auCollectionSize="60" [(auPage)]="customPage" auAriaLabel="Page navigation with customized pages">
 			<ng-template auPaginationPages let-widget="widget" let-state="state">
 				@if (state.pages.length > 0) {
 					<li class="au-custom-pages-item">
diff --git a/angular/demo/src/app/samples/pagination/default.route.ts b/angular/demo/src/app/samples/pagination/default.route.ts
index 943462fcd5..7f9dbebf05 100644
--- a/angular/demo/src/app/samples/pagination/default.route.ts
+++ b/angular/demo/src/app/samples/pagination/default.route.ts
@@ -6,20 +6,20 @@ import {Component} from '@angular/core';
 	imports: [AgnosUIAngularModule],
 	template: `
 		<h5>Basic pagination:</h5>
-		<nav auPagination [(auPage)]="page" [auCollectionSize]="60"></nav>
+		<nav auPagination auCollectionSize="60" [(auPage)]="page"></nav>
 
 		<h5>No direction links:</h5>
-		<nav auPagination [auCollectionSize]="60" [(auPage)]="page" [auDirectionLinks]="false"></nav>
+		<nav auPagination auCollectionSize="60" [(auPage)]="page" [auDirectionLinks]="false"></nav>
 
 		<h5>With boundary links:</h5>
-		<nav auPagination [auCollectionSize]="60" [(auPage)]="page" [auBoundaryLinks]="true"></nav>
+		<nav auPagination auCollectionSize="60" [(auPage)]="page" auBoundaryLinks></nav>
 
 		<div class="mb-3">
 			Current page: <span id="defaultPage">{{ page }}</span>
 		</div>
 
 		<h5>Disabled pagination:</h5>
-		<nav auPagination [auCollectionSize]="60" [(auPage)]="pageAlone" auAriaLabel="Disabled pagination" [auDisabled]="true"></nav>
+		<nav auPagination auCollectionSize="60" [(auPage)]="pageAlone" auAriaLabel="Disabled pagination" auDisabled></nav>
 	`,
 })
 export default class DefaultPaginationComponent {
diff --git a/angular/demo/src/app/samples/progressbar/default.route.ts b/angular/demo/src/app/samples/progressbar/default.route.ts
index d73d92d862..2d43bd4f3a 100644
--- a/angular/demo/src/app/samples/progressbar/default.route.ts
+++ b/angular/demo/src/app/samples/progressbar/default.route.ts
@@ -12,11 +12,11 @@ import {Component} from '@angular/core';
 	],
 	template: `
 		<div class="d-flex flex-column gap-2">
-			<div auProgressbar [auValue]="20"></div>
-			<div auProgressbar [auValue]="40" auClassName="text-bg-success"></div>
-			<div auProgressbar [auValue]="60" auClassName="text-bg-info"></div>
-			<div auProgressbar [auValue]="80" auClassName="text-bg-warning"></div>
-			<div auProgressbar [auValue]="100" auClassName="text-bg-danger"></div>
+			<div auProgressbar auValue="20"></div>
+			<div auProgressbar auValue="40" auClassName="text-bg-success"></div>
+			<div auProgressbar auValue="60" auClassName="text-bg-info"></div>
+			<div auProgressbar auValue="80" auClassName="text-bg-warning"></div>
+			<div auProgressbar auValue="100" auClassName="text-bg-danger"></div>
 		</div>
 	`,
 })
diff --git a/angular/demo/src/app/samples/progressbar/simpleCustom.route.ts b/angular/demo/src/app/samples/progressbar/simpleCustom.route.ts
index 2c8d5c3daa..df1d74de5c 100644
--- a/angular/demo/src/app/samples/progressbar/simpleCustom.route.ts
+++ b/angular/demo/src/app/samples/progressbar/simpleCustom.route.ts
@@ -8,15 +8,15 @@ import {Component} from '@angular/core';
 		<div class="d-flex flex-column gap-2">
 			<div>
 				A progressbar using custom values for minimum and maximum:
-				<div auProgressbar [auMin]="1" [auMax]="5" [auValue]="4" [auAriaValueTextFn]="valueText">Step 4 out of 5</div>
+				<div auProgressbar auMin="1" auMax="5" auValue="4" [auAriaValueTextFn]="valueText">Step 4 out of 5</div>
 			</div>
 			<div>
 				A striped animated progress bar:
-				<div auProgressbar auClassName="text-bg-info" [auValue]="63" [auStriped]="true" [auAnimated]="true"></div>
+				<div auProgressbar auClassName="text-bg-info" auValue="63" auStriped auAnimated></div>
 			</div>
 			<div>
 				Changing the height:
-				<div auProgressbar [auHeight]="'1.5rem'" [auValue]="47"></div>
+				<div auProgressbar [auHeight]="'1.5rem'" auValue="47"></div>
 			</div>
 		</div>
 	`,
diff --git a/angular/demo/src/app/samples/rating/customTemplate.route.ts b/angular/demo/src/app/samples/rating/customTemplate.route.ts
index 655746743a..08848a2227 100644
--- a/angular/demo/src/app/samples/rating/customTemplate.route.ts
+++ b/angular/demo/src/app/samples/rating/customTemplate.route.ts
@@ -5,7 +5,7 @@ import {Component} from '@angular/core';
 	standalone: true,
 	imports: [AgnosUIAngularModule],
 	template: `
-		<div class="rating-custom" [auRating]="7" auAriaLabel="custom rating">
+		<div class="rating-custom" auRating="7" auAriaLabel="custom rating">
 			<ng-template auRatingStar let-fill="fill" let-index="index">
 				<span class="star" [class.filled]="fill === 100" [class.bad]="index < 3">&#9733;</span>
 			</ng-template>
diff --git a/angular/demo/src/app/samples/rating/readonly.route.ts b/angular/demo/src/app/samples/rating/readonly.route.ts
index a344b46766..89888556af 100644
--- a/angular/demo/src/app/samples/rating/readonly.route.ts
+++ b/angular/demo/src/app/samples/rating/readonly.route.ts
@@ -13,7 +13,7 @@ import {DomSanitizer} from '@angular/platform-browser';
 				<span [innerHTML]="sanitizer.bypassSecurityTrustHtml(heartFill)"></span>
 			</span>
 		</ng-template>
-		<div class="rating-readonly" [auRating]="3.64" [auSlotStar]="custom" [auReadonly]="true" [auMaxRating]="5" auAriaLabel="readonly rating"></div>
+		<div class="rating-readonly" auRating="3.64" [auSlotStar]="custom" auReadonly auMaxRating="5" auAriaLabel="readonly rating"></div>
 	`,
 	encapsulation: ViewEncapsulation.None,
 	styles: "@import '@agnos-ui/common/samples/rating/readonly.scss';",
diff --git a/angular/demo/src/app/samples/slider/default.route.ts b/angular/demo/src/app/samples/slider/default.route.ts
index 0259fef39c..bfac6eb158 100644
--- a/angular/demo/src/app/samples/slider/default.route.ts
+++ b/angular/demo/src/app/samples/slider/default.route.ts
@@ -8,19 +8,19 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 	imports: [AgnosUIAngularModule, ReactiveFormsModule, FormsModule],
 	template: `
 		<h2>Slider with form control</h2>
-		<div auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [formControl]="sliderControl"></div>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderControl"></div>
 		Form control value:
 		{{ sliderControl.value }}
 		<hr />
 
 		<h2>Slider with value</h2>
-		<div auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [(auValues)]="sliderValues"></div>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [(auValues)]="sliderValues"></div>
 		Value:
 		{{ sliderValues }}
 		<hr />
 
 		<h2>Disabled slider</h2>
-		<div auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [formControl]="disabledControl" [auReadonly]="readonlyToggle"></div>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="disabledControl" [auReadonly]="readonlyToggle"></div>
 
 		<div class="form-check form-switch">
 			<input class="form-check-input" type="checkbox" role="switch" id="disabled" [(ngModel)]="disabledToggle" (change)="handleDisabled()" />
diff --git a/angular/demo/src/app/samples/slider/range.route.ts b/angular/demo/src/app/samples/slider/range.route.ts
index ffeff344a3..d49e648b36 100644
--- a/angular/demo/src/app/samples/slider/range.route.ts
+++ b/angular/demo/src/app/samples/slider/range.route.ts
@@ -7,12 +7,12 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 	imports: [AgnosUIAngularModule, ReactiveFormsModule, FormsModule],
 	template: `
 		<h2>Slider with form control</h2>
-		<div auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [formControl]="sliderControl"></div>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [formControl]="sliderControl"></div>
 		Form control values: {{ sliderControl.value?.join(', ') }}
 		<hr />
 
 		<h2>Slider with values</h2>
-		<div auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [(auValues)]="sliderValues"></div>
+		<div auSlider auMin="0" auMax="100" auStepSize="1" [(auValues)]="sliderValues"></div>
 		Values: {{ sliderValues.join(', ') }}
 	`,
 })
diff --git a/angular/demo/src/app/samples/slider/vertical.route.ts b/angular/demo/src/app/samples/slider/vertical.route.ts
index 65a92960da..3ffd145971 100644
--- a/angular/demo/src/app/samples/slider/vertical.route.ts
+++ b/angular/demo/src/app/samples/slider/vertical.route.ts
@@ -8,11 +8,11 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 	template: `
 		<div class="d-flex" style="height: 350px">
 			<div class="col-6" style="height: 300px">
-				<div auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [auVertical]="true" [formControl]="sliderControl" auClassName="my-0"></div>
+				<div auSlider auMin="0" auMax="100" auStepSize="1" auVertical [formControl]="sliderControl" auClassName="my-0"></div>
 				<div class="mt-3">Form control values: {{ sliderControl.value?.join(', ') }}</div>
 			</div>
 			<div class="col-6" style="height: 300px">
-				<div auSlider [auMin]="0" [auMax]="100" [auStepSize]="1" [auVertical]="true" [formControl]="sliderControlRange" auClassName="my-0"></div>
+				<div auSlider auMin="0" auMax="100" auStepSize="1" auVertical [formControl]="sliderControlRange" auClassName="my-0"></div>
 				<div class="mt-3">From control value: {{ sliderControlRange.value?.join(', ') }}</div>
 			</div>
 		</div>
diff --git a/angular/headless/src/lib/coercion.spec.ts b/angular/headless/src/lib/coercion.spec.ts
new file mode 100644
index 0000000000..d0c92f3264
--- /dev/null
+++ b/angular/headless/src/lib/coercion.spec.ts
@@ -0,0 +1,112 @@
+import {auBooleanAttribute, auNumberAttribute} from './coercion';
+import {describe, expect, it} from 'vitest';
+
+describe('coercion functions', () => {
+	describe('auBooleanAttribute', () => {
+		it('should coerce undefined to undefined', () => {
+			expect(auBooleanAttribute(undefined)).toBe(undefined);
+		});
+
+		it('should coerce null to false', () => {
+			expect(auBooleanAttribute(null)).toBe(false);
+		});
+
+		it('should coerce the empty string to true', () => {
+			expect(auBooleanAttribute('')).toBe(true);
+		});
+
+		it('should coerce zero to true', () => {
+			expect(auBooleanAttribute(0)).toBe(true);
+		});
+
+		it('should coerce the string "false" to false', () => {
+			expect(auBooleanAttribute('false')).toBe(false);
+		});
+
+		it('should coerce the boolean false to false', () => {
+			expect(auBooleanAttribute(false)).toBe(false);
+		});
+
+		it('should coerce the boolean true to true', () => {
+			expect(auBooleanAttribute(true)).toBe(true);
+		});
+
+		it('should coerce the string "true" to true', () => {
+			expect(auBooleanAttribute('true')).toBe(true);
+		});
+
+		it('should coerce an arbitrary string to true', () => {
+			expect(auBooleanAttribute('pink')).toBe(true);
+		});
+
+		it('should coerce an object to true', () => {
+			expect(auBooleanAttribute({})).toBe(true);
+		});
+
+		it('should coerce an array to true', () => {
+			expect(auBooleanAttribute([])).toBe(true);
+		});
+	});
+
+	describe('auNumberAttribute', () => {
+		it('should coerce undefined to undefined', () => {
+			expect(auNumberAttribute(undefined)).toBe(undefined);
+		});
+
+		it('should coerce null to NaN', () => {
+			expect(auNumberAttribute(null)).toBeNaN();
+		});
+
+		it('should coerce true to NaN', () => {
+			expect(auNumberAttribute(true)).toBeNaN();
+		});
+
+		it('should coerce false to NaN', () => {
+			expect(auNumberAttribute(false)).toBeNaN();
+		});
+
+		it('should coerce the empty string to NaN', () => {
+			expect(auNumberAttribute('')).toBeNaN();
+		});
+
+		it('should coerce the string "1" to 1', () => {
+			expect(auNumberAttribute('1')).toBe(1);
+		});
+
+		it('should coerce the string "123.456" to 123.456', () => {
+			expect(auNumberAttribute('123.456')).toBe(123.456);
+		});
+
+		it('should coerce the string "-123.456" to -123.456', () => {
+			expect(auNumberAttribute('-123.456')).toBe(-123.456);
+		});
+
+		it('should coerce an arbitrary string to NaN', () => {
+			expect(auNumberAttribute('pink')).toBeNaN();
+		});
+
+		it('should coerce an arbitrary string prefixed with a number to NaN', () => {
+			expect(auNumberAttribute('123pink')).toBeNaN();
+		});
+
+		it('should coerce the number 1 to 1', () => {
+			expect(auNumberAttribute(1)).toBe(1);
+		});
+
+		it('should coerce the number 123.456 to 123.456', () => {
+			expect(auNumberAttribute(123.456)).toBe(123.456);
+		});
+
+		it('should coerce the number -123.456 to -123.456', () => {
+			expect(auNumberAttribute(-123.456)).toBe(-123.456);
+		});
+
+		it('should coerce an object to NaN', () => {
+			expect(auNumberAttribute({})).toBeNaN();
+		});
+
+		it('should coerce an array to NaN', () => {
+			expect(auNumberAttribute([])).toBeNaN();
+		});
+	});
+});
diff --git a/angular/headless/src/lib/coercion.ts b/angular/headless/src/lib/coercion.ts
new file mode 100644
index 0000000000..bc7ea81d1a
--- /dev/null
+++ b/angular/headless/src/lib/coercion.ts
@@ -0,0 +1,35 @@
+import {booleanAttribute, numberAttribute} from '@angular/core';
+
+/**
+ * Transforms a value (typically a string) to a boolean.
+ * Intended to be used as a transform function of an input.
+ *
+ *  @usageNotes
+ *  ```typescript
+ *  @Input({ transform: auBooleanAttribute }) status: boolean | undefined;
+ *  ```
+ * @param value Value to be transformed.
+ */
+export function auBooleanAttribute(value: unknown): boolean | undefined {
+	if (value === undefined) {
+		return undefined;
+	}
+	return booleanAttribute(value);
+}
+
+/**
+ * Transforms a value (typically a string) to a number.
+ * Intended to be used as a transform function of an input.
+ * @param value Value to be transformed.
+ *
+ *  @usageNotes
+ *  ```typescript
+ *  @Input({ transform: auNumberAttribute }) id: number | undefined;
+ *  ```
+ */
+export function auNumberAttribute(value: unknown): number | undefined {
+	if (value === undefined) {
+		return undefined;
+	}
+	return numberAttribute(value);
+}
diff --git a/angular/headless/src/public-api.ts b/angular/headless/src/public-api.ts
index afb382b0fb..666c5f60bc 100644
--- a/angular/headless/src/public-api.ts
+++ b/angular/headless/src/public-api.ts
@@ -11,6 +11,7 @@ export * from './lib/slotTypes';
 export type {SlotContent} from './lib/slotTypes';
 export * from './lib/use.directive';
 export * from './lib/utils';
+export * from './lib/coercion';
 
 import type {PropsConfig, WidgetFactory, WidgetProps, WidgetState} from '@agnos-ui/core';
 import {
diff --git a/angular/lib/src/lib/accordion/accordion.component.ts b/angular/lib/src/lib/accordion/accordion.component.ts
index 12950c0760..d7f46869e2 100644
--- a/angular/lib/src/lib/accordion/accordion.component.ts
+++ b/angular/lib/src/lib/accordion/accordion.component.ts
@@ -11,6 +11,7 @@ import {
 	ComponentTemplate,
 	SlotDirective,
 	UseDirective,
+	auBooleanAttribute,
 	callWidgetFactory,
 	createAccordion,
 	patchSimpleChanges,
@@ -199,21 +200,21 @@ export class AccordionItemComponent implements OnChanges, AfterContentChecked, A
 	/**
 	 * If `true`, the content of the accordion-item collapse will be removed from the DOM. It will be just hidden otherwise.
 	 */
-	@Input('auItemDestroyOnHide') itemDestroyOnHide: boolean | undefined;
+	@Input({alias: 'auItemDestroyOnHide', transform: auBooleanAttribute}) itemDestroyOnHide: boolean | undefined;
 	/**
 	 * If `true`, the accordion-item will be disabled.
 	 * It will not react to user's clicks, but still will be possible to toggle programmatically.
 	 */
-	@Input('auItemDisabled') itemDisabled: boolean | undefined;
+	@Input({alias: 'auItemDisabled', transform: auBooleanAttribute}) itemDisabled: boolean | undefined;
 
 	/**
 	 * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
 	 */
-	@Input('auItemVisible') itemVisible: boolean | undefined;
+	@Input({alias: 'auItemVisible', transform: auBooleanAttribute}) itemVisible: boolean | undefined;
 	/**
 	 * If `true`, accordion-item will be animated.
 	 */
-	@Input('auItemAnimation') itemAnimation: boolean | undefined;
+	@Input({alias: 'auItemAnimation', transform: auBooleanAttribute}) itemAnimation: boolean | undefined;
 	/**
 	 * Classes to add on the accordion-item header DOM element.
 	 */
@@ -295,7 +296,7 @@ export class AccordionDirective implements OnChanges {
 	/**
 	 * If `true`, only one item at the time can stay open.
 	 */
-	@Input('auCloseOthers') closeOthers: boolean | undefined;
+	@Input({alias: 'auCloseOthers', transform: auBooleanAttribute}) closeOthers: boolean | undefined;
 
 	/**
 	 * CSS classes to be applied on the widget main container
@@ -326,27 +327,27 @@ export class AccordionDirective implements OnChanges {
 	 *
 	 * It is a prop of the accordion-item.
 	 */
-	@Input('auItemDestroyOnHide') itemDestroyOnHide: boolean | undefined;
+	@Input({alias: 'auItemDestroyOnHide', transform: auBooleanAttribute}) itemDestroyOnHide: boolean | undefined;
 	/**
 	 * If `true`, the accordion-item will be disabled.
 	 * It will not react to user's clicks, but still will be possible to toggle programmatically.
 	 *
 	 * It is a prop of the accordion-item.
 	 */
-	@Input('auItemDisabled') itemDisabled: boolean | undefined;
+	@Input({alias: 'auItemDisabled', transform: auBooleanAttribute}) itemDisabled: boolean | undefined;
 
 	/**
 	 * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
 	 *
 	 * It is a prop of the accordion-item.
 	 */
-	@Input('auItemVisible') itemVisible: boolean | undefined;
+	@Input({alias: 'auItemVisible', transform: auBooleanAttribute}) itemVisible: boolean | undefined;
 	/**
 	 * If `true`, accordion-item will be animated.
 	 *
 	 * It is a prop of the accordion-item.
 	 */
-	@Input('auItemAnimation') itemAnimation: boolean | undefined;
+	@Input({alias: 'auItemAnimation', transform: auBooleanAttribute}) itemAnimation: boolean | undefined;
 	/**
 	 * The transition to use for the accordion-item collapse when is toggled.
 	 *
diff --git a/angular/lib/src/lib/alert/alert.component.ts b/angular/lib/src/lib/alert/alert.component.ts
index b4fbe1969c..6fe55567c2 100644
--- a/angular/lib/src/lib/alert/alert.component.ts
+++ b/angular/lib/src/lib/alert/alert.component.ts
@@ -4,6 +4,7 @@ import {
 	SlotDefaultDirective,
 	SlotDirective,
 	UseDirective,
+	auBooleanAttribute,
 	callWidgetFactory,
 	createAlert,
 	patchSimpleChanges,
@@ -94,7 +95,7 @@ export class AlertComponent implements OnChanges, AfterContentChecked {
 	 * If `true`, alert can be dismissed by the user.
 	 * The close button (×) will be displayed and you can be notified of the event with the (close) output.
 	 */
-	@Input('auDismissible')
+	@Input({alias: 'auDismissible', transform: auBooleanAttribute})
 	dismissible: boolean | undefined;
 
 	/**
@@ -108,7 +109,7 @@ export class AlertComponent implements OnChanges, AfterContentChecked {
 	/**
 	 * If `true` the alert is visible to the user
 	 */
-	@Input('auVisible')
+	@Input({alias: 'auVisible', transform: auBooleanAttribute})
 	visible: boolean | undefined;
 
 	/**
@@ -117,7 +118,7 @@ export class AlertComponent implements OnChanges, AfterContentChecked {
 	 * Animation is triggered  when the `.open()` function is called
 	 * or the visible prop is changed
 	 */
-	@Input('auAnimationOnInit')
+	@Input({alias: 'auAnimationOnInit', transform: auBooleanAttribute})
 	animationOnInit: boolean | undefined;
 
 	/**
@@ -126,7 +127,7 @@ export class AlertComponent implements OnChanges, AfterContentChecked {
 	 * Animation is triggered  when clicked on the close button (×),
 	 * via the `.close()` function or the visible prop is changed
 	 */
-	@Input('auAnimation')
+	@Input({alias: 'auAnimation', transform: auBooleanAttribute})
 	animation: boolean | undefined;
 
 	/**
diff --git a/angular/lib/src/lib/modal/modal.component.ts b/angular/lib/src/lib/modal/modal.component.ts
index 8bd0758b4b..29ebb5fabc 100644
--- a/angular/lib/src/lib/modal/modal.component.ts
+++ b/angular/lib/src/lib/modal/modal.component.ts
@@ -4,6 +4,7 @@ import {
 	SlotDefaultDirective,
 	SlotDirective,
 	UseDirective,
+	auBooleanAttribute,
 	callWidgetFactory,
 	createModal,
 	mergeDirectives,
@@ -167,7 +168,7 @@ export class ModalComponent<Data> implements OnChanges, AfterContentChecked {
 	/**
 	 * Whether the modal and its backdrop (if present) should be animated when shown or hidden.
 	 */
-	@Input('auAnimation') animation: boolean | undefined;
+	@Input({alias: 'auAnimation', transform: auBooleanAttribute}) animation: boolean | undefined;
 
 	/**
 	 * The transition to use for the backdrop behind the modal (if present).
@@ -182,17 +183,17 @@ export class ModalComponent<Data> implements OnChanges, AfterContentChecked {
 	/**
 	 * Whether the modal should be visible when the transition is completed.
 	 */
-	@Input('auVisible') visible: boolean | undefined;
+	@Input({alias: 'auVisible', transform: auBooleanAttribute}) visible: boolean | undefined;
 
 	/**
 	 * Whether a backdrop should be created behind the modal.
 	 */
-	@Input('auBackdrop') backdrop: boolean | undefined;
+	@Input({alias: 'auBackdrop', transform: auBooleanAttribute}) backdrop: boolean | undefined;
 
 	/**
 	 * Whether the modal should be closed when clicking on the viewport outside the modal.
 	 */
-	@Input('auCloseOnOutsideClick') closeOnOutsideClick: boolean | undefined;
+	@Input({alias: 'auCloseOnOutsideClick', transform: auBooleanAttribute}) closeOnOutsideClick: boolean | undefined;
 
 	/**
 	 * Which element should contain the modal and backdrop DOM elements.
@@ -214,7 +215,7 @@ export class ModalComponent<Data> implements OnChanges, AfterContentChecked {
 	/**
 	 * Whether to display the close button.
 	 */
-	@Input('auCloseButton') closeButton: boolean | undefined;
+	@Input({alias: 'auCloseButton', transform: auBooleanAttribute}) closeButton: boolean | undefined;
 
 	/**
 	 * CSS classes to be applied on the widget main container
diff --git a/angular/lib/src/lib/pagination/pagination.component.ts b/angular/lib/src/lib/pagination/pagination.component.ts
index 73bddb68e0..4336cd4cbc 100644
--- a/angular/lib/src/lib/pagination/pagination.component.ts
+++ b/angular/lib/src/lib/pagination/pagination.component.ts
@@ -2,6 +2,8 @@ import type {PaginationContext, PaginationNumberContext, PaginationProps, Pagina
 import {
 	ComponentTemplate,
 	SlotDirective,
+	auBooleanAttribute,
+	auNumberAttribute,
 	callWidgetFactory,
 	createPagination,
 	patchSimpleChanges,
@@ -332,17 +334,17 @@ export class PaginationComponent implements OnChanges, AfterContentChecked {
 	/**
 	 * If `true`, pagination links will be disabled.
 	 */
-	@Input('auDisabled') disabled: boolean | undefined;
+	@Input({alias: 'auDisabled', transform: auBooleanAttribute}) disabled: boolean | undefined;
 
 	/**
 	 * If `true`, the "First" and "Last" page links are shown.
 	 */
-	@Input('auBoundaryLinks') boundaryLinks: boolean | undefined;
+	@Input({alias: 'auBoundaryLinks', transform: auBooleanAttribute}) boundaryLinks: boolean | undefined;
 
 	/**
 	 * If `true`, the "Next" and "Previous" page links are shown.
 	 */
-	@Input('auDirectionLinks') directionLinks: boolean | undefined;
+	@Input({alias: 'auDirectionLinks', transform: auBooleanAttribute}) directionLinks: boolean | undefined;
 
 	/**
 	 * The number of items in your paginated collection.
@@ -353,7 +355,7 @@ export class PaginationComponent implements OnChanges, AfterContentChecked {
 	 * Whatever the collectionSize the page number is of minimum 1.
 	 * @defaultValue 0
 	 */
-	@Input('auCollectionSize') collectionSize: number | undefined;
+	@Input({alias: 'auCollectionSize', transform: auNumberAttribute}) collectionSize: number | undefined;
 
 	/**
 	 * The current page.
@@ -361,13 +363,13 @@ export class PaginationComponent implements OnChanges, AfterContentChecked {
 	 * Page numbers start with `1`.
 	 * @defaultValue 1
 	 */
-	@Input('auPage') page: number | undefined;
+	@Input({alias: 'auPage', transform: auNumberAttribute}) page: number | undefined;
 
 	/**
 	 * The number of items per page.
 	 * @defaultValue 10
 	 */
-	@Input('auPageSize') pageSize: number | undefined;
+	@Input({alias: 'auPageSize', transform: auNumberAttribute}) pageSize: number | undefined;
 
 	/**
 	 * The pagination display size.
diff --git a/angular/lib/src/lib/progressbar/progressbar.component.ts b/angular/lib/src/lib/progressbar/progressbar.component.ts
index 2d13761b90..04aec77c78 100644
--- a/angular/lib/src/lib/progressbar/progressbar.component.ts
+++ b/angular/lib/src/lib/progressbar/progressbar.component.ts
@@ -3,6 +3,8 @@ import {
 	ComponentTemplate,
 	SlotDefaultDirective,
 	SlotDirective,
+	auBooleanAttribute,
+	auNumberAttribute,
 	callWidgetFactory,
 	createProgressbar,
 	patchSimpleChanges,
@@ -81,17 +83,17 @@ export class ProgressbarComponent implements AfterContentChecked, OnChanges {
 	/**
 	 * The minimum value.
 	 */
-	@Input('auMin') min: number | undefined;
+	@Input({alias: 'auMin', transform: auNumberAttribute}) min: number | undefined;
 
 	/**
 	 * The maximum value.
 	 */
-	@Input('auMax') max: number | undefined;
+	@Input({alias: 'auMax', transform: auNumberAttribute}) max: number | undefined;
 
 	/**
 	 * The current value.
 	 */
-	@Input('auValue') value: number | undefined;
+	@Input({alias: 'auValue', transform: auNumberAttribute}) value: number | undefined;
 
 	/**
 	 * CSS classes to be applied on the widget main container
@@ -111,12 +113,12 @@ export class ProgressbarComponent implements AfterContentChecked, OnChanges {
 	 * If `true`, animates a striped progressbar.
 	 * Takes effect only for browsers supporting CSS3 animations, and if `striped` is `true`.
 	 */
-	@Input('auAnimated') animated: boolean | undefined;
+	@Input({alias: 'auAnimated', transform: auBooleanAttribute}) animated: boolean | undefined;
 
 	/**
 	 * If `true`, shows a striped progressbar.
 	 */
-	@Input('auStriped') striped: boolean | undefined;
+	@Input({alias: 'auStriped', transform: auBooleanAttribute}) striped: boolean | undefined;
 
 	/**
 	 * Return the value for the 'aria-valuetext' attribute.
diff --git a/angular/lib/src/lib/rating/rating.component.ts b/angular/lib/src/lib/rating/rating.component.ts
index 9ebd579762..466e19818f 100644
--- a/angular/lib/src/lib/rating/rating.component.ts
+++ b/angular/lib/src/lib/rating/rating.component.ts
@@ -1,5 +1,13 @@
 import type {AdaptSlotContentProps, RatingState, SlotContent, StarContext} from '@agnos-ui/angular-headless';
-import {SlotDirective, callWidgetFactory, createRating, patchSimpleChanges, toAngularSignal} from '@agnos-ui/angular-headless';
+import {
+	SlotDirective,
+	auBooleanAttribute,
+	auNumberAttribute,
+	callWidgetFactory,
+	createRating,
+	patchSimpleChanges,
+	toAngularSignal,
+} from '@agnos-ui/angular-headless';
 import type {AfterContentChecked, OnChanges, Signal, SimpleChanges} from '@angular/core';
 import {
 	ChangeDetectionStrategy,
@@ -96,29 +104,29 @@ export class RatingComponent implements ControlValueAccessor, OnChanges, AfterCo
 	/**
 	 * If `true`, the rating is disabled.
 	 */
-	@Input('auDisabled') disabled: boolean | undefined;
+	@Input({alias: 'auDisabled', transform: auBooleanAttribute}) disabled: boolean | undefined;
 
 	/**
 	 * The maximum rating that can be given.
 	 */
-	@Input('auMaxRating') maxRating: number | undefined;
+	@Input({alias: 'auMaxRating', transform: auNumberAttribute}) maxRating: number | undefined;
 
 	/**
 	 * The current rating. Could be a decimal value like `3.75`.
 	 */
-	@Input('auRating') rating: number | undefined;
+	@Input({alias: 'auRating', transform: auNumberAttribute}) rating: number | undefined;
 
 	/**
 	 * If `true`, the rating can't be changed.
 	 */
-	@Input('auReadonly') readonly: boolean | undefined;
+	@Input({alias: 'auReadonly', transform: auBooleanAttribute}) readonly: boolean | undefined;
 
 	/**
 	 * Define if the rating can be reset.
 	 *
 	 * If set to true, the user can 'unset' the rating value by cliking on the current rating value.
 	 */
-	@Input('auResettable') resettable: boolean | undefined;
+	@Input({alias: 'auResettable', transform: auBooleanAttribute}) resettable: boolean | undefined;
 
 	@Input('auSlotStar') slotStar: SlotContent<AdaptSlotContentProps<StarContext>>;
 	@ContentChild(RatingStarDirective, {static: false}) slotStarFromContent: RatingStarDirective | undefined;
@@ -127,7 +135,7 @@ export class RatingComponent implements ControlValueAccessor, OnChanges, AfterCo
 	 * Allows setting a custom rating tabindex.
 	 * If the component is disabled, `tabindex` will still be set to `-1`.
 	 */
-	@Input('auTabindex') tabindex: number | undefined;
+	@Input({alias: 'auTabindex', transform: auNumberAttribute}) tabindex: number | undefined;
 
 	/**
 	 * CSS classes to be applied on the widget main container
diff --git a/angular/lib/src/lib/select/select.component.ts b/angular/lib/src/lib/select/select.component.ts
index a981f10cf2..413245b8b6 100644
--- a/angular/lib/src/lib/select/select.component.ts
+++ b/angular/lib/src/lib/select/select.component.ts
@@ -1,5 +1,5 @@
 import type {ItemCtx, SelectWidget, WidgetState} from '@agnos-ui/angular-headless';
-import {UseDirective, callWidgetFactory, createSelect, patchSimpleChanges, toAngularSignal} from '@agnos-ui/angular-headless';
+import {UseDirective, auBooleanAttribute, callWidgetFactory, createSelect, patchSimpleChanges, toAngularSignal} from '@agnos-ui/angular-headless';
 import {CommonModule} from '@angular/common';
 import type {OnChanges, Signal, SimpleChanges} from '@angular/core';
 import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from '@angular/core';
@@ -23,7 +23,7 @@ export class SelectComponent<Item> implements OnChanges {
 	/**
 	 * true if the select is open
 	 */
-	@Input('auOpened') opened: boolean | undefined;
+	@Input({alias: 'auOpened', transform: auBooleanAttribute}) opened: boolean | undefined;
 
 	/**
 	 * Filtered text to be display in the filter input
@@ -43,7 +43,7 @@ export class SelectComponent<Item> implements OnChanges {
 	/**
 	 * true if the select is disabled
 	 */
-	@Input('auDisabled') disabled: boolean | undefined;
+	@Input({alias: 'auDisabled', transform: auBooleanAttribute}) disabled: boolean | undefined;
 
 	/**
 	 * Custom function to filter an item.
@@ -65,7 +65,7 @@ export class SelectComponent<Item> implements OnChanges {
 	/**
 	 * true if a loading process is being done
 	 */
-	@Input('auLoading') loading: boolean | undefined;
+	@Input({alias: 'auLoading', transform: auBooleanAttribute}) loading: boolean | undefined;
 
 	readonly _widget = callWidgetFactory<SelectWidget<Item>>({
 		factory: createSelect,
diff --git a/angular/lib/src/lib/slider/slider.component.ts b/angular/lib/src/lib/slider/slider.component.ts
index 2171b2682f..c963a53b7c 100644
--- a/angular/lib/src/lib/slider/slider.component.ts
+++ b/angular/lib/src/lib/slider/slider.component.ts
@@ -1,6 +1,8 @@
 import type {SliderState} from '@agnos-ui/angular-headless';
 import {
 	UseDirective,
+	auBooleanAttribute,
+	auNumberAttribute,
 	callWidgetFactory,
 	createSlider,
 	patchSimpleChanges,
@@ -120,19 +122,19 @@ export class SliderComponent implements OnChanges {
 	/**
 	 * Minimum value that can be assigned to the slider
 	 */
-	@Input('auMin')
+	@Input({alias: 'auMin', transform: auNumberAttribute})
 	min: number | undefined;
 
 	/**
 	 * Maximum value that can be assigned to the slider
 	 */
-	@Input('auMax')
+	@Input({alias: 'auMax', transform: auNumberAttribute})
 	max: number | undefined;
 
 	/**
 	 * Unit value between slider steps
 	 */
-	@Input('auStepSize')
+	@Input({alias: 'auStepSize', transform: auNumberAttribute})
 	stepSize: number | undefined;
 
 	/**
@@ -149,19 +151,19 @@ export class SliderComponent implements OnChanges {
 	/**
 	 * If `true` slider value cannot be changed but the slider is still focusable
 	 */
-	@Input('auReadonly')
+	@Input({alias: 'auReadonly', transform: auBooleanAttribute})
 	readonly: boolean | undefined;
 
 	/**
 	 * If `true` slider value cannot be changed and the slider cannot be focused
 	 */
-	@Input('auDisabled')
+	@Input({alias: 'auDisabled', transform: auBooleanAttribute})
 	disabled: boolean | undefined;
 
 	/**
 	 * If `true` is vertically positioned otherwise it is horizontal
 	 */
-	@Input('auVertical')
+	@Input({alias: 'auVertical', transform: auBooleanAttribute})
 	vertical: boolean | undefined;
 
 	/**
diff --git a/eslint-plugin/src/angular-check-props.ts b/eslint-plugin/src/angular-check-props.ts
index a719197cb0..9f6f216e11 100644
--- a/eslint-plugin/src/angular-check-props.ts
+++ b/eslint-plugin/src/angular-check-props.ts
@@ -59,7 +59,33 @@ const reportExtraProp = (node: TSESTree.Node, name: string, type: 'input' | 'out
 	});
 };
 
+const validAlias = (name: string) => `au${name.substring(0, 1).toUpperCase()}${name.substring(1)}`;
+
+type transformedInputType = 'Number' | 'Boolean';
+const getTransformedInputType: (
+	type: Type,
+	node: TSESTree.Node,
+	context: Readonly<TSESLint.RuleContext<any, any>>,
+) => transformedInputType | undefined = (type, node, context) => {
+	const typeAsString = typeToString(type, node, context);
+	if (typeAsString === 'boolean | undefined') {
+		return 'Boolean';
+	}
+	if (typeAsString === 'number | undefined') {
+		return 'Number';
+	}
+	return undefined;
+};
+
+const transformedInputValidMetadata = (alias: string, type: transformedInputType) => {
+	const transform = type === 'Boolean' ? 'auBooleanAttribute' : 'auNumberAttribute';
+	return `{alias: '${alias}', transform: ${transform}}`;
+};
+
 const reportMissingInputProp = (node: TSESTree.Node, name: string, prop: PropInfo, context: Readonly<TSESLint.RuleContext<'missingProp', any>>) => {
+	const inputType = getTransformedInputType(prop.type, node, context);
+	const alias = validAlias(name);
+	const metadata = inputType ? transformedInputValidMetadata(alias, inputType) : `'${alias}'`;
 	context.report({
 		node,
 		messageId: 'missingProp',
@@ -70,10 +96,7 @@ const reportMissingInputProp = (node: TSESTree.Node, name: string, prop: PropInf
 		fix(fixer) {
 			const indentation = getIndentation(node, context);
 			const doc = createDocWithIndentation(prop.doc, indentation);
-			return fixer.insertTextBefore(
-				node,
-				`${doc}@Input('${validAlias(name)}') ${name}: ${typeToString(prop.type, node, context)};\n\n${indentation}`,
-			);
+			return fixer.insertTextBefore(node, `${doc}@Input(${metadata}) ${name}: ${typeToString(prop.type, node, context)};\n\n${indentation}`);
 		},
 	});
 };
@@ -168,18 +191,39 @@ const reportInvalidOutputPropType = (
 	});
 };
 
-const validAlias = (name: string) => `au${name.substring(0, 1).toUpperCase()}${name.substring(1)}`;
+const reportInvalidBooleanOrNumberInput = <T extends transformedInputType>(
+	type: T,
+	node: TSESTree.PropertyDefinition,
+	name: string,
+	alias: string,
+	context: Readonly<TSESLint.RuleContext<`invalid${T}Meta`, any>>,
+) => {
+	const metadata = transformedInputValidMetadata(alias, type);
+	context.report({
+		node,
+		messageId: `invalid${type}Meta`,
+		data: {
+			name,
+			metadata,
+		},
+		*fix(fixer) {
+			const decorator = getDecorator(node, 'Input')!;
+			yield fixer.remove(decorator);
+			yield fixer.insertTextBefore(node, `@Input(${metadata})`);
+		},
+	});
+};
 
 const reportInvalidAlias = (
 	node: TSESTree.PropertyDefinition,
 	name: string,
 	type: 'input' | 'output',
 	alias: string,
-	context: Readonly<TSESLint.RuleContext<'noValidAlias', any>>,
+	context: Readonly<TSESLint.RuleContext<'invalidAlias', any>>,
 ) => {
 	context.report({
 		node,
-		messageId: 'noValidAlias',
+		messageId: 'invalidAlias',
 		data: {
 			name,
 			type,
@@ -320,7 +364,35 @@ export const angularCheckPropsRule = ESLintUtils.RuleCreator.withoutDocs({
 									}
 									const decoratorArguments = (getDecorator(classMember, 'Input')!.expression as TSESTree.CallExpression).arguments;
 									const inputValidAlias = validAlias(name);
-									if (!decoratorArguments.length || decoratorArguments[0].type !== 'Literal' || decoratorArguments[0].value !== inputValidAlias) {
+									const inputType = getTransformedInputType(inputInfo.type, node, context);
+									if (inputType) {
+										if (
+											!decoratorArguments.length ||
+											decoratorArguments[0].type !== 'ObjectExpression' ||
+											!decoratorArguments[0].properties.some(
+												(prop) =>
+													prop.type === 'Property' &&
+													prop.key.type === 'Identifier' &&
+													prop.key.name === 'alias' &&
+													prop.value.type === 'Literal' &&
+													prop.value.value === inputValidAlias,
+											) ||
+											!decoratorArguments[0].properties.some(
+												(prop) =>
+													prop.type === 'Property' &&
+													prop.key.type === 'Identifier' &&
+													prop.key.name === 'transform' &&
+													prop.value.type === 'Identifier' &&
+													prop.value.name === (inputType === 'Boolean' ? 'auBooleanAttribute' : 'auNumberAttribute'),
+											)
+										) {
+											reportInvalidBooleanOrNumberInput(inputType, classMember, name, inputValidAlias, context);
+										}
+									} else if (
+										!decoratorArguments.length ||
+										decoratorArguments[0].type !== 'Literal' ||
+										decoratorArguments[0].value !== inputValidAlias
+									) {
 										reportInvalidAlias(classMember, name, 'input', inputValidAlias, context);
 									}
 								} else {
@@ -377,7 +449,9 @@ export const angularCheckPropsRule = ESLintUtils.RuleCreator.withoutDocs({
 		fixable: 'code',
 		messages: {
 			extraProp: 'Extra {{ type }} "{{ name }}" not present in the API.',
-			noValidAlias: 'No proper alias for {{ type }} "{{ name }}": expected \'{{ alias }}\'.',
+			invalidAlias: 'No proper alias for {{ type }} "{{ name }}": expected \'{{ alias }}\'.',
+			invalidBooleanMeta: 'No proper metadata for boolean input "{{ name }}": expected \'{{ metadata }}\'.',
+			invalidNumberMeta: 'No proper metadata for number input "{{ name }}": expected \'{{ metadata }}\'.',
 			invalidPropType: 'Invalid type for {{ type }} "{{ name }}": expected {{ expectedType }}, found {{ foundType }}.',
 			nonMatchingPropDoc: 'Documentation for {{ type }} "{{ name }}" does not match the API documentation.',
 			missingProp: 'Missing {{ type }} "{{ name }}" which is present in the API.',
diff --git a/eslint-plugin/test/angular-check-props.spec.ts b/eslint-plugin/test/angular-check-props.spec.ts
index 841eb69f40..a4ddcc87ed 100644
--- a/eslint-plugin/test/angular-check-props.spec.ts
+++ b/eslint-plugin/test/angular-check-props.spec.ts
@@ -37,6 +37,16 @@ describe('angular-check-props', () => {
 			errors: [{messageId: 'missingProp', data: {type: 'input', name: 'myProp'}}],
 			output: codeTemplate("\n\t@Input('auMyProp') myProp: string | undefined;\n", 'myProp: string;'),
 		},
+		{
+			code: codeTemplate('', 'myProp: boolean;'),
+			errors: [{messageId: 'missingProp', data: {type: 'input', name: 'myProp'}}],
+			output: codeTemplate("\n\t@Input({alias: 'auMyProp', transform: auBooleanAttribute}) myProp: boolean | undefined;\n", 'myProp: boolean;'),
+		},
+		{
+			code: codeTemplate('', 'myProp: number;'),
+			errors: [{messageId: 'missingProp', data: {type: 'input', name: 'myProp'}}],
+			output: codeTemplate("\n\t@Input({alias: 'auMyProp', transform: auNumberAttribute}) myProp: number | undefined;\n", 'myProp: number;'),
+		},
 		{
 			code: codeTemplate('', 'onMyEvent(value: number): void;'),
 			errors: [{messageId: 'missingProp', data: {type: 'output', name: 'myEvent'}}],
@@ -104,9 +114,9 @@ describe('angular-check-props', () => {
 			),
 		},
 		{
-			code: codeTemplate("\n\t@Input('auMyProp') myProp: boolean;\n", 'myProp: boolean;'),
+			code: codeTemplate("\n\t@Input({alias: 'auMyProp', transform: auBooleanAttribute}) myProp: boolean;\n", 'myProp: boolean;'),
 			errors: [{messageId: 'invalidPropType', data: {type: 'input', name: 'myProp', expectedType: 'boolean | undefined', foundType: 'boolean'}}],
-			output: codeTemplate("\n\t@Input('auMyProp') myProp: boolean | undefined;\n", 'myProp: boolean;'),
+			output: codeTemplate("\n\t@Input({alias: 'auMyProp', transform: auBooleanAttribute}) myProp: boolean | undefined;\n", 'myProp: boolean;'),
 		},
 		{
 			code: codeTemplate("\n\t@Input('auMyProp') myProp: number | undefined;\n", 'myProp: RegExp;'),
@@ -117,13 +127,18 @@ describe('angular-check-props', () => {
 		},
 		{
 			code: codeTemplate('\n\t@Input() myProp: string | undefined;\n', 'myProp: string;'),
-			errors: [{messageId: 'noValidAlias', data: {name: 'myProp', type: 'input', alias: 'auMyProp'}}],
+			errors: [{messageId: 'invalidAlias', data: {name: 'myProp', type: 'input', alias: 'auMyProp'}}],
 			output: codeTemplate("\n\t@Input('auMyProp') myProp: string | undefined;\n", 'myProp: string;'),
 		},
 		{
-			code: codeTemplate("\n\t@Input('auMyProp') myProp: boolean;\n", 'myProp: boolean;'),
-			errors: [{messageId: 'invalidPropType', data: {type: 'input', name: 'myProp', expectedType: 'boolean | undefined', foundType: 'boolean'}}],
-			output: codeTemplate("\n\t@Input('auMyProp') myProp: boolean | undefined;\n", 'myProp: boolean;'),
+			code: codeTemplate('\n\t@Input() myProp: boolean | undefined;\n', 'myProp: boolean;'),
+			errors: [{messageId: 'invalidBooleanMeta', data: {name: 'myProp', metadata: "{alias: 'auMyProp', transform: auBooleanAttribute}"}}],
+			output: codeTemplate("\n\t@Input({alias: 'auMyProp', transform: auBooleanAttribute}) myProp: boolean | undefined;\n", 'myProp: boolean;'),
+		},
+		{
+			code: codeTemplate('\n\t@Input() myProp: number | undefined;\n', 'myProp: number;'),
+			errors: [{messageId: 'invalidNumberMeta', data: {name: 'myProp', metadata: "{alias: 'auMyProp', transform: auNumberAttribute}"}}],
+			output: codeTemplate("\n\t@Input({alias: 'auMyProp', transform: auNumberAttribute}) myProp: number | undefined;\n", 'myProp: number;'),
 		},
 		{
 			code: codeTemplate(
@@ -131,7 +146,7 @@ describe('angular-check-props', () => {
 				'onMyEvent(value: string): void;',
 				'{\n\t\t\tonMyEvent: (event) => this.myEvent.emit(event),\n\t\t}',
 			),
-			errors: [{messageId: 'noValidAlias', data: {name: 'myEvent', type: 'output', alias: 'auMyEvent'}}],
+			errors: [{messageId: 'invalidAlias', data: {name: 'myEvent', type: 'output', alias: 'auMyEvent'}}],
 			output: codeTemplate(
 				"\n\t@Output('auMyEvent') myEvent = new EventEmitter<string>();\n",
 				'onMyEvent(value: string): void;',