@agnos-ui/angular-bootstrap 0.6.0 → 0.7.0-next.0

package/fesm2022/agnos-ui-angular-bootstrap.mjs

@@ -1,7 +1,7 @@
 import { widgetsConfigFactory, SlotDirective, UseDirective, ComponentTemplate, BaseWidgetDirective, auBooleanAttribute, UseMultiDirective, auNumberAttribute, useDirectiveForHost, callWidgetFactory as callWidgetFactory$1 } from '@agnos-ui/angular-headless';
 export * from '@agnos-ui/angular-headless';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, Directive, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Input, ContentChild, Output, ViewEncapsulation, forwardRef, NgModule, Injector, ApplicationRef, createComponent, EnvironmentInjector, Injectable } from '@angular/core';
+import { InjectionToken, inject, TemplateRef, Directive, viewChild, Component, ChangeDetectionStrategy, input, contentChild, output, ViewEncapsulation, forwardRef, NgModule, Injector, ApplicationRef, createComponent, EnvironmentInjector, OutputEmitterRef, Injectable } from '@angular/core';
 import { getModalDefaultConfig, createModal, modalOutsideClick, modalCloseButtonClick } from '@agnos-ui/core-bootstrap/components/modal';
 import { getPaginationDefaultConfig, createPagination } from '@agnos-ui/core-bootstrap/components/pagination';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -164,7 +164,7 @@ class ModalStructureDirective {
         return true;
     }
     static { this.ɵfac = function ModalStructureDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalStructureDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalStructureDirective, selectors: [["ng-template", "auModalStructure", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalStructureDirective, selectors: [["ng-template", "auModalStructure", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalStructureDirective, [{
         type: Directive,
@@ -182,7 +182,7 @@ class ModalHeaderDirective {
         return true;
     }
     static { this.ɵfac = function ModalHeaderDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalHeaderDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalHeaderDirective, selectors: [["ng-template", "auModalHeader", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalHeaderDirective, selectors: [["ng-template", "auModalHeader", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalHeaderDirective, [{
         type: Directive,
@@ -200,7 +200,7 @@ class ModalTitleDirective {
         return true;
     }
     static { this.ɵfac = function ModalTitleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalTitleDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalTitleDirective, selectors: [["ng-template", "auModalTitle", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalTitleDirective, selectors: [["ng-template", "auModalTitle", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalTitleDirective, [{
         type: Directive,
@@ -218,7 +218,7 @@ class ModalBodyDirective {
         return true;
     }
     static { this.ɵfac = function ModalBodyDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalBodyDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalBodyDirective, selectors: [["ng-template", "auModalBody", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalBodyDirective, selectors: [["ng-template", "auModalBody", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalBodyDirective, [{
         type: Directive,
@@ -236,7 +236,7 @@ class ModalFooterDirective {
         return true;
     }
     static { this.ɵfac = function ModalFooterDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalFooterDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalFooterDirective, selectors: [["ng-template", "auModalFooter", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ModalFooterDirective, selectors: [["ng-template", "auModalFooter", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalFooterDirective, [{
         type: Directive,
@@ -246,22 +246,23 @@ class ModalFooterDirective {
  * Component containing the default slots for the modal.
  */
 class ModalDefaultSlotsComponent {
+    constructor() {
+        this.header = viewChild.required('header');
+        this.structure = viewChild.required('structure');
+    }
     static { this.ɵfac = function ModalDefaultSlotsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalDefaultSlotsComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModalDefaultSlotsComponent, selectors: [["ng-component"]], viewQuery: function ModalDefaultSlotsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$9, 7);
-            i0.ɵɵviewQuery(_c1$9, 7);
+            i0.ɵɵviewQuerySignal(ctx.header, _c0$9, 5);
+            i0.ɵɵviewQuerySignal(ctx.structure, _c1$9, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.header = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.structure = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 4, vars: 0, consts: [["header", ""], ["structure", ""], ["auModalHeader", ""], ["auModalStructure", ""], [1, "modal-title"], [3, "auSlot", "auSlotProps"], [1, "btn-close", 3, "auUse"], [1, "modal-header"], [1, "modal-body"], [1, "modal-footer"]], template: function ModalDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance(2);
+        } }, decls: 4, vars: 0, consts: [["header", ""], ["structure", ""], ["auModalHeader", ""], ["auModalStructure", ""], [1, "modal-title"], [3, "auSlot", "auSlotProps"], [1, "btn-close", 3, "auUse"], [1, "modal-header"], [1, "modal-body"], [1, "modal-footer"]], template: function ModalDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, ModalDefaultSlotsComponent_ng_template_0_Template, 3, 7, "ng-template", 2, 0, i0.ɵɵtemplateRefExtractor)(2, ModalDefaultSlotsComponent_ng_template_2_Template, 4, 8, "ng-template", 3, 1, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [SlotDirective, ModalHeaderDirective, ModalStructureDirective, UseDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalDefaultSlotsComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, ModalHeaderDirective, ModalStructureDirective, UseDirective],
                 template: `
@@ -290,14 +291,8 @@ class ModalDefaultSlotsComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { header: [{
-            type: ViewChild,
-            args: ['header', { static: true }]
-        }], structure: [{
-            type: ViewChild,
-            args: ['structure', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalDefaultSlotsComponent, { className: "ModalDefaultSlotsComponent", filePath: "components/modal/modal.component.ts", lineNumber: 112 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalDefaultSlotsComponent, { className: "ModalDefaultSlotsComponent", filePath: "components/modal/modal.component.ts", lineNumber: 100 }); })();
 /**
  * Default slot for modal header.
  */
@@ -325,14 +320,121 @@ class ModalComponent extends BaseWidgetDirective {
                 onVisibleChange: (event) => this.visibleChange.emit(event),
             },
             slotTemplates: () => ({
-                children: this.slotDefaultFromContent?.templateRef,
-                footer: this.slotFooterFromContent?.templateRef,
-                header: this.slotHeaderFromContent?.templateRef,
-                structure: this.slotStructureFromContent?.templateRef,
-                title: this.slotTitleFromContent?.templateRef,
+                children: this.slotDefaultFromContent()?.templateRef,
+                footer: this.slotFooterFromContent()?.templateRef,
+                header: this.slotHeaderFromContent()?.templateRef,
+                structure: this.slotStructureFromContent()?.templateRef,
+                title: this.slotTitleFromContent()?.templateRef,
             }),
-            slotChildren: () => this.slotChildren,
+            slotChildren: () => this.slotChildren(),
         }));
+        /**
+         * Whether the modal and its backdrop (if present) should be animated when shown or hidden.
+         *
+         * @defaultValue `true`
+         */
+        this.animated = input(undefined, { alias: 'auAnimated', transform: auBooleanAttribute });
+        /**
+         * The transition to use for the backdrop behind the modal (if present).
+         *
+         * @defaultValue `fadeTransition`
+         */
+        this.backdropTransition = input(undefined, { alias: 'auBackdropTransition' });
+        /**
+         * The transition to use for the modal.
+         *
+         * @defaultValue `fadeTransition`
+         */
+        this.modalTransition = input(undefined, { alias: 'auModalTransition' });
+        /**
+         * Whether the modal should be visible when the transition is completed.
+         *
+         * @defaultValue `false`
+         */
+        this.visible = input(undefined, { alias: 'auVisible', transform: auBooleanAttribute });
+        /**
+         * Whether a backdrop should be created behind the modal.
+         *
+         * @defaultValue `true`
+         */
+        this.backdrop = input(undefined, { alias: 'auBackdrop', transform: auBooleanAttribute });
+        /**
+         * Whether the modal should be closed when clicking on the viewport outside the modal.
+         *
+         * @defaultValue `true`
+         */
+        this.closeOnOutsideClick = input(undefined, { alias: 'auCloseOnOutsideClick', transform: auBooleanAttribute });
+        /**
+         * Which element should contain the modal and backdrop DOM elements.
+         * If it is not null, the modal and backdrop DOM elements are moved to the specified container.
+         * Otherwise, they stay where the widget is located.
+         *
+         * @defaultValue
+         * ```ts
+         * typeof window !== 'undefined' ? document.body : null
+         * ```
+         */
+        this.container = input(undefined, { alias: 'auContainer' });
+        /**
+         * Value of the aria-label attribute to put on the close button.
+         *
+         * @defaultValue `'Close'`
+         */
+        this.ariaCloseButtonLabel = input(undefined, { alias: 'auAriaCloseButtonLabel' });
+        /**
+         * Classes to add on the backdrop DOM element.
+         *
+         * @defaultValue `''`
+         */
+        this.backdropClass = input(undefined, { alias: 'auBackdropClass' });
+        /**
+         * Whether to display the close button.
+         *
+         * @defaultValue `true`
+         */
+        this.closeButton = input(undefined, { alias: 'auCloseButton', transform: auBooleanAttribute });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        /**
+         * Option to create a fullscreen modal, according to the bootstrap documentation.
+         *
+         * @defaultValue `false`
+         */
+        this.fullscreen = input(undefined, { alias: 'auFullscreen', transform: auBooleanAttribute });
+        /**
+         * Structure of the modal.
+         * The default structure uses {@link ModalProps.header|header}, {@link ModalProps.children|children} and {@link ModalProps.footer|footer}.
+         */
+        this.structure = input(undefined, { alias: 'auStructure' });
+        this.slotStructureFromContent = contentChild(ModalStructureDirective);
+        /**
+         * Header of the modal. The default header includes {@link ModalProps.title|title}.
+         */
+        this.header = input(undefined, { alias: 'auHeader' });
+        this.slotHeaderFromContent = contentChild(ModalHeaderDirective);
+        /**
+         * Title of the modal.
+         */
+        this.title = input(undefined, { alias: 'auTitle' });
+        this.slotTitleFromContent = contentChild(ModalTitleDirective);
+        /**
+         * Body of the modal.
+         */
+        this.children = input(undefined, { alias: 'auChildren' });
+        this.slotDefaultFromContent = contentChild(ModalBodyDirective);
+        /**
+         * Footer of the modal.
+         */
+        this.footer = input(undefined, { alias: 'auFooter' });
+        this.slotFooterFromContent = contentChild(ModalFooterDirective);
+        /**
+         * Data to use in content slots
+         */
+        this.contentData = input(undefined, { alias: 'auContentData' });
         /**
          * Event to be triggered when the visible property changes.
          *
@@ -343,7 +445,7 @@ class ModalComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.visibleChange = new EventEmitter();
+        this.visibleChange = output({ alias: 'auVisibleChange' });
         /**
          * Event to be triggered when the modal is about to be closed (i.e. the {@link ModalApi.close|close} method was called).
          *
@@ -355,7 +457,7 @@ class ModalComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.beforeClose = new EventEmitter();
+        this.beforeClose = output({ alias: 'auBeforeClose' });
         /**
          * Event to be triggered when the transition is completed and the modal is not visible.
          *
@@ -364,7 +466,7 @@ class ModalComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.hidden = new EventEmitter();
+        this.hidden = output({ alias: 'auHidden' });
         /**
          * Event to be triggered when the transition is completed and the modal is visible.
          *
@@ -373,28 +475,23 @@ class ModalComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.shown = new EventEmitter();
+        this.shown = output({ alias: 'auShown' });
+        this.slotChildren = viewChild('content');
     }
     static { this.ɵfac = function ModalComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModalComponent, selectors: [["", "auModal", ""]], contentQueries: function ModalComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, ModalStructureDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, ModalHeaderDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, ModalTitleDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, ModalBodyDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, ModalFooterDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotStructureFromContent, ModalStructureDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotHeaderFromContent, ModalHeaderDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotTitleFromContent, ModalTitleDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotDefaultFromContent, ModalBodyDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotFooterFromContent, ModalFooterDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotHeaderFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotTitleFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotDefaultFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotFooterFromContent = _t.first);
+            i0.ɵɵqueryAdvance(5);
         } }, viewQuery: function ModalComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c3$8, 7);
+            i0.ɵɵviewQuerySignal(ctx.slotChildren, _c3$8, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotChildren = _t.first);
-        } }, inputs: { animated: [2, "auAnimated", "animated", auBooleanAttribute], backdropTransition: [0, "auBackdropTransition", "backdropTransition"], modalTransition: [0, "auModalTransition", "modalTransition"], visible: [2, "auVisible", "visible", auBooleanAttribute], backdrop: [2, "auBackdrop", "backdrop", auBooleanAttribute], closeOnOutsideClick: [2, "auCloseOnOutsideClick", "closeOnOutsideClick", auBooleanAttribute], container: [0, "auContainer", "container"], ariaCloseButtonLabel: [0, "auAriaCloseButtonLabel", "ariaCloseButtonLabel"], backdropClass: [0, "auBackdropClass", "backdropClass"], closeButton: [2, "auCloseButton", "closeButton", auBooleanAttribute], className: [0, "auClassName", "className"], fullscreen: [2, "auFullscreen", "fullscreen", auBooleanAttribute], structure: [0, "auStructure", "structure"], header: [0, "auHeader", "header"], title: [0, "auTitle", "title"], children: [0, "auChildren", "children"], footer: [0, "auFooter", "footer"], contentData: [0, "auContentData", "contentData"] }, outputs: { visibleChange: "auVisibleChange", beforeClose: "auBeforeClose", hidden: "auHidden", shown: "auShown" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c4$7, ngContentSelectors: _c5$5, decls: 4, vars: 2, consts: [["content", ""], [1, "modal-backdrop", 3, "auUseMulti"], [1, "modal", "d-block", 3, "auUseMulti"], [1, "modal-content"], [3, "auSlot", "auSlotProps"]], template: function ModalComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { animated: [1, "auAnimated", "animated"], backdropTransition: [1, "auBackdropTransition", "backdropTransition"], modalTransition: [1, "auModalTransition", "modalTransition"], visible: [1, "auVisible", "visible"], backdrop: [1, "auBackdrop", "backdrop"], closeOnOutsideClick: [1, "auCloseOnOutsideClick", "closeOnOutsideClick"], container: [1, "auContainer", "container"], ariaCloseButtonLabel: [1, "auAriaCloseButtonLabel", "ariaCloseButtonLabel"], backdropClass: [1, "auBackdropClass", "backdropClass"], closeButton: [1, "auCloseButton", "closeButton"], className: [1, "auClassName", "className"], fullscreen: [1, "auFullscreen", "fullscreen"], structure: [1, "auStructure", "structure"], header: [1, "auHeader", "header"], title: [1, "auTitle", "title"], children: [1, "auChildren", "children"], footer: [1, "auFooter", "footer"], contentData: [1, "auContentData", "contentData"] }, outputs: { visibleChange: "auVisibleChange", beforeClose: "auBeforeClose", hidden: "auHidden", shown: "auShown" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c4$7, ngContentSelectors: _c5$5, decls: 4, vars: 2, consts: [["content", ""], [1, "modal-backdrop", 3, "auUseMulti"], [1, "modal", "d-block", 3, "auUseMulti"], [1, "modal-content"], [3, "auSlot", "auSlotProps"]], template: function ModalComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, ModalComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, ModalComponent_Conditional_2_Template, 1, 4, "div", 1)(3, ModalComponent_Conditional_3_Template, 4, 13, "div", 2);
         } if (rf & 2) {
@@ -408,7 +505,6 @@ class ModalComponent extends BaseWidgetDirective {
         type: Component,
         args: [{
                 selector: '[auModal]',
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [UseMultiDirective, SlotDirective],
                 template: `
@@ -427,92 +523,8 @@ class ModalComponent extends BaseWidgetDirective {
 		}
 	`,
             }]
-    }], () => [], { animated: [{
-            type: Input,
-            args: [{ alias: 'auAnimated', transform: auBooleanAttribute }]
-        }], backdropTransition: [{
-            type: Input,
-            args: ['auBackdropTransition']
-        }], modalTransition: [{
-            type: Input,
-            args: ['auModalTransition']
-        }], visible: [{
-            type: Input,
-            args: [{ alias: 'auVisible', transform: auBooleanAttribute }]
-        }], backdrop: [{
-            type: Input,
-            args: [{ alias: 'auBackdrop', transform: auBooleanAttribute }]
-        }], closeOnOutsideClick: [{
-            type: Input,
-            args: [{ alias: 'auCloseOnOutsideClick', transform: auBooleanAttribute }]
-        }], container: [{
-            type: Input,
-            args: ['auContainer']
-        }], ariaCloseButtonLabel: [{
-            type: Input,
-            args: ['auAriaCloseButtonLabel']
-        }], backdropClass: [{
-            type: Input,
-            args: ['auBackdropClass']
-        }], closeButton: [{
-            type: Input,
-            args: [{ alias: 'auCloseButton', transform: auBooleanAttribute }]
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], fullscreen: [{
-            type: Input,
-            args: [{ alias: 'auFullscreen', transform: auBooleanAttribute }]
-        }], structure: [{
-            type: Input,
-            args: ['auStructure']
-        }], slotStructureFromContent: [{
-            type: ContentChild,
-            args: [ModalStructureDirective, { static: false }]
-        }], header: [{
-            type: Input,
-            args: ['auHeader']
-        }], slotHeaderFromContent: [{
-            type: ContentChild,
-            args: [ModalHeaderDirective, { static: false }]
-        }], title: [{
-            type: Input,
-            args: ['auTitle']
-        }], slotTitleFromContent: [{
-            type: ContentChild,
-            args: [ModalTitleDirective, { static: false }]
-        }], children: [{
-            type: Input,
-            args: ['auChildren']
-        }], slotDefaultFromContent: [{
-            type: ContentChild,
-            args: [ModalBodyDirective, { static: false }]
-        }], footer: [{
-            type: Input,
-            args: ['auFooter']
-        }], slotFooterFromContent: [{
-            type: ContentChild,
-            args: [ModalFooterDirective, { static: false }]
-        }], contentData: [{
-            type: Input,
-            args: ['auContentData']
-        }], visibleChange: [{
-            type: Output,
-            args: ['auVisibleChange']
-        }], beforeClose: [{
-            type: Output,
-            args: ['auBeforeClose']
-        }], hidden: [{
-            type: Output,
-            args: ['auHidden']
-        }], shown: [{
-            type: Output,
-            args: ['auShown']
-        }], slotChildren: [{
-            type: ViewChild,
-            args: ['content', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalComponent, { className: "ModalComponent", filePath: "components/modal/modal.component.ts", lineNumber: 151 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalComponent, { className: "ModalComponent", filePath: "components/modal/modal.component.ts", lineNumber: 138 }); })();
 
 /**
  * Retrieve a shallow copy of the default Pagination config
@@ -697,7 +709,7 @@ class PaginationEllipsisDirective {
         return true;
     }
     static { this.ɵfac = function PaginationEllipsisDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationEllipsisDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationEllipsisDirective, selectors: [["ng-template", "auPaginationEllipsis", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationEllipsisDirective, selectors: [["ng-template", "auPaginationEllipsis", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationEllipsisDirective, [{
         type: Directive,
@@ -715,7 +727,7 @@ class PaginationFirstDirective {
         return true;
     }
     static { this.ɵfac = function PaginationFirstDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationFirstDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationFirstDirective, selectors: [["ng-template", "auPaginationFirst", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationFirstDirective, selectors: [["ng-template", "auPaginationFirst", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationFirstDirective, [{
         type: Directive,
@@ -733,7 +745,7 @@ class PaginationLastDirective {
         return true;
     }
     static { this.ɵfac = function PaginationLastDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationLastDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationLastDirective, selectors: [["ng-template", "auPaginationLast", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationLastDirective, selectors: [["ng-template", "auPaginationLast", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationLastDirective, [{
         type: Directive,
@@ -751,7 +763,7 @@ class PaginationNextDirective {
         return true;
     }
     static { this.ɵfac = function PaginationNextDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationNextDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationNextDirective, selectors: [["ng-template", "auPaginationNext", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationNextDirective, selectors: [["ng-template", "auPaginationNext", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationNextDirective, [{
         type: Directive,
@@ -769,7 +781,7 @@ class PaginationNumberDirective {
         return true;
     }
     static { this.ɵfac = function PaginationNumberDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationNumberDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationNumberDirective, selectors: [["ng-template", "auPaginationNumber", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationNumberDirective, selectors: [["ng-template", "auPaginationNumber", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationNumberDirective, [{
         type: Directive,
@@ -787,7 +799,7 @@ class PaginationPreviousDirective {
         return true;
     }
     static { this.ɵfac = function PaginationPreviousDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationPreviousDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationPreviousDirective, selectors: [["ng-template", "auPaginationPrevious", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationPreviousDirective, selectors: [["ng-template", "auPaginationPrevious", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationPreviousDirective, [{
         type: Directive,
@@ -805,7 +817,7 @@ class PaginationPagesDirective {
         return true;
     }
     static { this.ɵfac = function PaginationPagesDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationPagesDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationPagesDirective, selectors: [["ng-template", "auPaginationPages", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationPagesDirective, selectors: [["ng-template", "auPaginationPages", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationPagesDirective, [{
         type: Directive,
@@ -823,29 +835,30 @@ class PaginationStructureDirective {
         return true;
     }
     static { this.ɵfac = function PaginationStructureDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationStructureDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationStructureDirective, selectors: [["ng-template", "auPaginationStructure", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PaginationStructureDirective, selectors: [["ng-template", "auPaginationStructure", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationStructureDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auPaginationStructure]', standalone: true }]
     }], null, null); })();
 class PaginationDefaultSlotsComponent {
+    constructor() {
+        this.pages = viewChild.required('pages');
+        this.structure = viewChild.required('structure');
+    }
     static { this.ɵfac = function PaginationDefaultSlotsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationDefaultSlotsComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaginationDefaultSlotsComponent, selectors: [["ng-component"]], viewQuery: function PaginationDefaultSlotsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$8, 7);
-            i0.ɵɵviewQuery(_c1$8, 7);
+            i0.ɵɵviewQuerySignal(ctx.pages, _c0$8, 5);
+            i0.ɵɵviewQuerySignal(ctx.structure, _c1$8, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.pages = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.structure = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 4, vars: 0, consts: [["pages", ""], ["structure", ""], ["auPaginationPages", ""], ["auPaginationStructure", ""], [1, "page-item", 3, "active", "disabled"], [1, "page-item"], [1, "page-link", 3, "auUse"], ["aria-hidden", "true", 1, "page-link", "au-ellipsis"], [3, "auSlot", "auSlotProps"], [1, "visually-hidden"], [1, "page-item", 3, "disabled"], ["aria-live", "polite", 1, "visually-hidden"], ["aria-hidden", "true"]], template: function PaginationDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance(2);
+        } }, decls: 4, vars: 0, consts: [["pages", ""], ["structure", ""], ["auPaginationPages", ""], ["auPaginationStructure", ""], [1, "page-item", 3, "active", "disabled"], [1, "page-item"], [1, "page-link", 3, "auUse"], ["aria-hidden", "true", 1, "page-link", "au-ellipsis"], [3, "auSlot", "auSlotProps"], [1, "visually-hidden"], [1, "page-item", 3, "disabled"], ["aria-live", "polite", 1, "visually-hidden"], ["aria-hidden", "true"]], template: function PaginationDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PaginationDefaultSlotsComponent_ng_template_0_Template, 2, 0, "ng-template", 2, 0, i0.ɵɵtemplateRefExtractor)(2, PaginationDefaultSlotsComponent_ng_template_2_Template, 8, 13, "ng-template", 3, 1, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [SlotDirective, PaginationPagesDirective, PaginationStructureDirective, UseDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationDefaultSlotsComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 imports: [SlotDirective, PaginationPagesDirective, PaginationStructureDirective, UseDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
@@ -912,14 +925,8 @@ class PaginationDefaultSlotsComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { pages: [{
-            type: ViewChild,
-            args: ['pages', { static: true }]
-        }], structure: [{
-            type: ViewChild,
-            args: ['structure', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationDefaultSlotsComponent, { className: "PaginationDefaultSlotsComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 184 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationDefaultSlotsComponent, { className: "PaginationDefaultSlotsComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 182 }); })();
 /**
  * The default slot for the pages
  */
@@ -946,16 +953,274 @@ class PaginationComponent extends BaseWidgetDirective {
                 onPageChange: (page) => this.pageChange.emit(page),
             },
             slotTemplates: () => ({
-                structure: this.slotStructureFromContent?.templateRef,
-                ellipsisLabel: this.slotEllipsisFromContent?.templateRef,
-                firstPageLabel: this.slotFirstFromContent?.templateRef,
-                previousPageLabel: this.slotPreviousFromContent?.templateRef,
-                nextPageLabel: this.slotNextFromContent?.templateRef,
-                lastPageLabel: this.slotLastFromContent?.templateRef,
-                pagesDisplay: this.slotPagesFromContent?.templateRef,
-                numberLabel: this.slotNumberLabelFromContent?.templateRef,
+                structure: this.slotStructureFromContent()?.templateRef,
+                ellipsisLabel: this.slotEllipsisFromContent()?.templateRef,
+                firstPageLabel: this.slotFirstFromContent()?.templateRef,
+                previousPageLabel: this.slotPreviousFromContent()?.templateRef,
+                nextPageLabel: this.slotNextFromContent()?.templateRef,
+                lastPageLabel: this.slotLastFromContent()?.templateRef,
+                pagesDisplay: this.slotPagesFromContent()?.templateRef,
+                numberLabel: this.slotNumberLabelFromContent()?.templateRef,
             }),
         }));
+        /**
+         * Provide the label for each "Page" page button.
+         * This is used for accessibility purposes.
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         * @param processPage - The current page number
+         * @param pageCount - The total number of pages
+         *
+         * @defaultValue
+         * ```ts
+         * (processPage: number, pageCount: number) => `Page ${processPage} of ${pageCount}`
+         * ```
+         */
+        this.ariaPageLabel = input(undefined, { alias: 'auAriaPageLabel' });
+        /**
+         * Provide the label for the aria-live element
+         * This is used for accessibility purposes.
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         * @param currentPage - The current page number
+         * @param pageCount - The total number of pages
+         *
+         * @defaultValue
+         * ```ts
+         * (currentPage: number) => `Current page is ${currentPage}`
+         * ```
+         */
+        this.ariaLiveLabel = input(undefined, { alias: 'auAriaLiveLabel' });
+        /**
+         * The label for the nav element.
+         *
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue `'Page navigation'`
+         */
+        this.ariaLabel = input(undefined, { alias: 'auAriaLabel' });
+        /**
+         * The label for the "active" page.
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue
+         * ```ts
+         * '(current)'
+         * ```
+         */
+        this.activeLabel = input(undefined, { alias: 'auActiveLabel' });
+        /**
+         * The label for the "First" page button.
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue
+         * ```ts
+         * 'Action link for first page'
+         * ```
+         */
+        this.ariaFirstLabel = input(undefined, { alias: 'auAriaFirstLabel' });
+        /**
+         * The label for the "Previous" page button.
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue
+         * ```ts
+         * 'Action link for previous page'
+         * ```
+         */
+        this.ariaPreviousLabel = input(undefined, { alias: 'auAriaPreviousLabel' });
+        /**
+         * The label for the "Next" page button.
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue
+         * ```ts
+         * 'Action link for next page'
+         * ```
+         */
+        this.ariaNextLabel = input(undefined, { alias: 'auAriaNextLabel' });
+        /**
+         * The label for the "Last" page button.
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue
+         * ```ts
+         * 'Action link for last page'
+         * ```
+         */
+        this.ariaLastLabel = input(undefined, { alias: 'auAriaLastLabel' });
+        /**
+         * The label for the "Ellipsis" page.
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue `'Ellipsis page element'`
+         */
+        this.ariaEllipsisLabel = input(undefined, { alias: 'auAriaEllipsisLabel' });
+        /**
+         * Factory function providing the href for a "Page" page anchor,
+         * based on the current page number
+         * @param pageNumber - The index to use in the link
+         *
+         * @defaultValue
+         * ```ts
+         * (_page: number) => PAGE_LINK_DEFAULT
+         * ```
+         */
+        this.pageLink = input(undefined, { alias: 'auPageLink' });
+        /**
+         * The template to use for the ellipsis slot
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue `'…'`
+         */
+        this.ellipsisLabel = input(undefined, { alias: 'auEllipsisLabel' });
+        this.slotEllipsisFromContent = contentChild(PaginationEllipsisDirective);
+        /**
+         * The template to use for the first slot
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue `'«'`
+         */
+        this.firstPageLabel = input(undefined, { alias: 'auFirstPageLabel' });
+        this.slotFirstFromContent = contentChild(PaginationFirstDirective);
+        /**
+         * The template to use for the previous slot
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue `'‹'`
+         */
+        this.previousPageLabel = input(undefined, { alias: 'auPreviousPageLabel' });
+        this.slotPreviousFromContent = contentChild(PaginationPreviousDirective);
+        /**
+         * The template to use for the next slot
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue `'›'`
+         */
+        this.nextPageLabel = input(undefined, { alias: 'auNextPageLabel' });
+        this.slotNextFromContent = contentChild(PaginationNextDirective);
+        /**
+         * The template to use for the last slot
+         * for I18n, we suggest to use the global configuration
+         * override any configuration parameters provided for this
+         *
+         * @defaultValue `'»'`
+         */
+        this.lastPageLabel = input(undefined, { alias: 'auLastPageLabel' });
+        this.slotLastFromContent = contentChild(PaginationLastDirective);
+        /**
+         * The template to use for the pages slot
+         * To use to customize the pages view
+         * override any configuration parameters provided for this
+         */
+        this.pagesDisplay = input(undefined, { alias: 'auPagesDisplay' });
+        this.slotPagesFromContent = contentChild(PaginationPagesDirective);
+        /**
+         * The template to use for the number slot
+         * override any configuration parameters provided for this
+         * for I18n, we suggest to use the global configuration
+         * @param displayedPage - The current page number
+         *
+         * @defaultValue
+         * ```ts
+         * ({displayedPage}: PaginationNumberContext) => `${displayedPage}`
+         * ```
+         */
+        this.numberLabel = input(undefined, { alias: 'auNumberLabel' });
+        this.slotNumberLabelFromContent = contentChild(PaginationNumberDirective);
+        /**
+         * The template to use for the structure of the pagination component
+         * The default structure uses {@link PaginationProps.ellipsisLabel|ellipsisLabel}, {@link PaginationProps.firstPageLabel|firstPageLabel},
+         * {@link PaginationProps.previousPageLabel|previousPageLabel}, {@link PaginationProps.nextPageLabel|nextPageLabel},
+         * {@link PaginationProps.lastPageLabel|lastPageLabel}, {@link PaginationProps.pagesDisplay|pagesDisplay},
+         * {@link PaginationProps.numberLabel|numberLabel},
+         */
+        this.structure = input(undefined, { alias: 'auStructure' });
+        this.slotStructureFromContent = contentChild(PaginationStructureDirective);
+        /**
+         * If `true`, pagination links will be disabled.
+         *
+         * @defaultValue `false`
+         */
+        this.disabled = input(undefined, { alias: 'auDisabled', transform: auBooleanAttribute });
+        /**
+         * If `true`, the "First" and "Last" page links are shown.
+         *
+         * @defaultValue `false`
+         */
+        this.boundaryLinks = input(undefined, { alias: 'auBoundaryLinks', transform: auBooleanAttribute });
+        /**
+         * If `true`, the "Next" and "Previous" page links are shown.
+         *
+         * @defaultValue `true`
+         */
+        this.directionLinks = input(undefined, { alias: 'auDirectionLinks', transform: auBooleanAttribute });
+        /**
+         * The number of items in your paginated collection.
+         *
+         * Note, that this is not the number of pages. Page numbers are calculated dynamically based on
+         * `collectionSize` and `pageSize`.
+         *
+         * Ex. if you have 100 items in your collection and displaying 20 items per page, you'll end up with 5 pages.
+         *
+         * Whatever the collectionSize the page number is of minimum 1.
+         *
+         * @defaultValue `0`
+         */
+        this.collectionSize = input(undefined, { alias: 'auCollectionSize', transform: auNumberAttribute });
+        /**
+         * The current page.
+         *
+         * Page numbers start with `1`.
+         *
+         * @defaultValue `1`
+         */
+        this.page = input(undefined, { alias: 'auPage', transform: auNumberAttribute });
+        /**
+         * The number of items per page.
+         * @remarks min value is 1
+         *
+         * @defaultValue `10`
+         */
+        this.pageSize = input(undefined, { alias: 'auPageSize', transform: auNumberAttribute });
+        /**
+         * The pagination display size.
+         *
+         * Bootstrap currently supports small and large sizes.
+         *
+         * @defaultValue `null`
+         */
+        this.size = input(undefined, { alias: 'auSize' });
+        /**
+         * pagesFactory returns a function computing the array of pages to be displayed
+         * as number (-1 are treated as ellipsis).
+         * Use Page slot to customize the pages view and not this
+         * @param page - The current page number
+         * @param pageCount - The total number of pages
+         *
+         * @defaultValue
+         * ```ts
+         * (_page: number, pageCount: number) => {
+         * 		const pages: number[] = [];
+         * 		for (let i = 1; i <= pageCount; i++) {
+         * 			pages.push(i);
+         * 		}
+         * 		return pages;
+         * 	}
+         * ```
+         */
+        this.pagesFactory = input(undefined, { alias: 'auPagesFactory' });
         /**
          * An event fired when the page is changed.
          *
@@ -967,31 +1232,29 @@ class PaginationComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.pageChange = new EventEmitter();
+        this.pageChange = output({ alias: 'auPageChange' });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
     }
     static { this.ɵfac = function PaginationComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PaginationComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PaginationComponent, selectors: [["", "auPagination", ""]], contentQueries: function PaginationComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, PaginationEllipsisDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, PaginationFirstDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, PaginationPreviousDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, PaginationNextDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, PaginationLastDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, PaginationPagesDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, PaginationNumberDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, PaginationStructureDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotEllipsisFromContent, PaginationEllipsisDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotFirstFromContent, PaginationFirstDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotPreviousFromContent, PaginationPreviousDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotNextFromContent, PaginationNextDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotLastFromContent, PaginationLastDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotPagesFromContent, PaginationPagesDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotNumberLabelFromContent, PaginationNumberDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotStructureFromContent, PaginationStructureDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotEllipsisFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotFirstFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotPreviousFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotNextFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotLastFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotPagesFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotNumberLabelFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
+            i0.ɵɵqueryAdvance(8);
         } }, hostVars: 1, hostBindings: function PaginationComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵattribute("aria-label", ctx.state.ariaLabel());
-        } }, inputs: { ariaPageLabel: [0, "auAriaPageLabel", "ariaPageLabel"], ariaLiveLabel: [0, "auAriaLiveLabel", "ariaLiveLabel"], ariaLabel: [0, "auAriaLabel", "ariaLabel"], activeLabel: [0, "auActiveLabel", "activeLabel"], ariaFirstLabel: [0, "auAriaFirstLabel", "ariaFirstLabel"], ariaPreviousLabel: [0, "auAriaPreviousLabel", "ariaPreviousLabel"], ariaNextLabel: [0, "auAriaNextLabel", "ariaNextLabel"], ariaLastLabel: [0, "auAriaLastLabel", "ariaLastLabel"], ariaEllipsisLabel: [0, "auAriaEllipsisLabel", "ariaEllipsisLabel"], pageLink: [0, "auPageLink", "pageLink"], ellipsisLabel: [0, "auEllipsisLabel", "ellipsisLabel"], firstPageLabel: [0, "auFirstPageLabel", "firstPageLabel"], previousPageLabel: [0, "auPreviousPageLabel", "previousPageLabel"], nextPageLabel: [0, "auNextPageLabel", "nextPageLabel"], lastPageLabel: [0, "auLastPageLabel", "lastPageLabel"], pagesDisplay: [0, "auPagesDisplay", "pagesDisplay"], numberLabel: [0, "auNumberLabel", "numberLabel"], structure: [0, "auStructure", "structure"], disabled: [2, "auDisabled", "disabled", auBooleanAttribute], boundaryLinks: [2, "auBoundaryLinks", "boundaryLinks", auBooleanAttribute], directionLinks: [2, "auDirectionLinks", "directionLinks", auBooleanAttribute], collectionSize: [2, "auCollectionSize", "collectionSize", auNumberAttribute], page: [2, "auPage", "page", auNumberAttribute], pageSize: [2, "auPageSize", "pageSize", auNumberAttribute], size: [0, "auSize", "size"], pagesFactory: [0, "auPagesFactory", "pagesFactory"], className: [0, "auClassName", "className"] }, outputs: { pageChange: "auPageChange" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c6$2, decls: 1, vars: 6, consts: [[3, "auSlotProps", "auSlot"]], template: function PaginationComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { ariaPageLabel: [1, "auAriaPageLabel", "ariaPageLabel"], ariaLiveLabel: [1, "auAriaLiveLabel", "ariaLiveLabel"], ariaLabel: [1, "auAriaLabel", "ariaLabel"], activeLabel: [1, "auActiveLabel", "activeLabel"], ariaFirstLabel: [1, "auAriaFirstLabel", "ariaFirstLabel"], ariaPreviousLabel: [1, "auAriaPreviousLabel", "ariaPreviousLabel"], ariaNextLabel: [1, "auAriaNextLabel", "ariaNextLabel"], ariaLastLabel: [1, "auAriaLastLabel", "ariaLastLabel"], ariaEllipsisLabel: [1, "auAriaEllipsisLabel", "ariaEllipsisLabel"], pageLink: [1, "auPageLink", "pageLink"], ellipsisLabel: [1, "auEllipsisLabel", "ellipsisLabel"], firstPageLabel: [1, "auFirstPageLabel", "firstPageLabel"], previousPageLabel: [1, "auPreviousPageLabel", "previousPageLabel"], nextPageLabel: [1, "auNextPageLabel", "nextPageLabel"], lastPageLabel: [1, "auLastPageLabel", "lastPageLabel"], pagesDisplay: [1, "auPagesDisplay", "pagesDisplay"], numberLabel: [1, "auNumberLabel", "numberLabel"], structure: [1, "auStructure", "structure"], disabled: [1, "auDisabled", "disabled"], boundaryLinks: [1, "auBoundaryLinks", "boundaryLinks"], directionLinks: [1, "auDirectionLinks", "directionLinks"], collectionSize: [1, "auCollectionSize", "collectionSize"], page: [1, "auPage", "page"], pageSize: [1, "auPageSize", "pageSize"], size: [1, "auSize", "size"], pagesFactory: [1, "auPagesFactory", "pagesFactory"], className: [1, "auClassName", "className"] }, outputs: { pageChange: "auPageChange" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c6$2, decls: 1, vars: 6, consts: [[3, "auSlotProps", "auSlot"]], template: function PaginationComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, PaginationComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("auSlotProps", i0.ɵɵpureFunction3(2, _c2$8, ctx.state, ctx.api, ctx.directives))("auSlot", ctx.state.structure());
@@ -1001,7 +1264,6 @@ class PaginationComponent extends BaseWidgetDirective {
         type: Component,
         args: [{
                 selector: '[auPagination]',
-                standalone: true,
                 imports: [SlotDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 host: {
@@ -1010,116 +1272,8 @@ class PaginationComponent extends BaseWidgetDirective {
                 encapsulation: ViewEncapsulation.None,
                 template: `<ng-template [auSlotProps]="{state, api, directives}" [auSlot]="state.structure()" />`,
             }]
-    }], () => [], { ariaPageLabel: [{
-            type: Input,
-            args: ['auAriaPageLabel']
-        }], ariaLiveLabel: [{
-            type: Input,
-            args: ['auAriaLiveLabel']
-        }], ariaLabel: [{
-            type: Input,
-            args: ['auAriaLabel']
-        }], activeLabel: [{
-            type: Input,
-            args: ['auActiveLabel']
-        }], ariaFirstLabel: [{
-            type: Input,
-            args: ['auAriaFirstLabel']
-        }], ariaPreviousLabel: [{
-            type: Input,
-            args: ['auAriaPreviousLabel']
-        }], ariaNextLabel: [{
-            type: Input,
-            args: ['auAriaNextLabel']
-        }], ariaLastLabel: [{
-            type: Input,
-            args: ['auAriaLastLabel']
-        }], ariaEllipsisLabel: [{
-            type: Input,
-            args: ['auAriaEllipsisLabel']
-        }], pageLink: [{
-            type: Input,
-            args: ['auPageLink']
-        }], ellipsisLabel: [{
-            type: Input,
-            args: ['auEllipsisLabel']
-        }], slotEllipsisFromContent: [{
-            type: ContentChild,
-            args: [PaginationEllipsisDirective, { static: false }]
-        }], firstPageLabel: [{
-            type: Input,
-            args: ['auFirstPageLabel']
-        }], slotFirstFromContent: [{
-            type: ContentChild,
-            args: [PaginationFirstDirective, { static: false }]
-        }], previousPageLabel: [{
-            type: Input,
-            args: ['auPreviousPageLabel']
-        }], slotPreviousFromContent: [{
-            type: ContentChild,
-            args: [PaginationPreviousDirective, { static: false }]
-        }], nextPageLabel: [{
-            type: Input,
-            args: ['auNextPageLabel']
-        }], slotNextFromContent: [{
-            type: ContentChild,
-            args: [PaginationNextDirective, { static: false }]
-        }], lastPageLabel: [{
-            type: Input,
-            args: ['auLastPageLabel']
-        }], slotLastFromContent: [{
-            type: ContentChild,
-            args: [PaginationLastDirective, { static: false }]
-        }], pagesDisplay: [{
-            type: Input,
-            args: ['auPagesDisplay']
-        }], slotPagesFromContent: [{
-            type: ContentChild,
-            args: [PaginationPagesDirective, { static: false }]
-        }], numberLabel: [{
-            type: Input,
-            args: ['auNumberLabel']
-        }], slotNumberLabelFromContent: [{
-            type: ContentChild,
-            args: [PaginationNumberDirective, { static: false }]
-        }], structure: [{
-            type: Input,
-            args: ['auStructure']
-        }], slotStructureFromContent: [{
-            type: ContentChild,
-            args: [PaginationStructureDirective, { static: false }]
-        }], disabled: [{
-            type: Input,
-            args: [{ alias: 'auDisabled', transform: auBooleanAttribute }]
-        }], boundaryLinks: [{
-            type: Input,
-            args: [{ alias: 'auBoundaryLinks', transform: auBooleanAttribute }]
-        }], directionLinks: [{
-            type: Input,
-            args: [{ alias: 'auDirectionLinks', transform: auBooleanAttribute }]
-        }], collectionSize: [{
-            type: Input,
-            args: [{ alias: 'auCollectionSize', transform: auNumberAttribute }]
-        }], page: [{
-            type: Input,
-            args: [{ alias: 'auPage', transform: auNumberAttribute }]
-        }], pageSize: [{
-            type: Input,
-            args: [{ alias: 'auPageSize', transform: auNumberAttribute }]
-        }], size: [{
-            type: Input,
-            args: ['auSize']
-        }], pagesFactory: [{
-            type: Input,
-            args: ['auPagesFactory']
-        }], pageChange: [{
-            type: Output,
-            args: ['auPageChange']
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationComponent, { className: "PaginationComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 213 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationComponent, { className: "PaginationComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 210 }); })();
 
 /**
  * Retrieve a shallow copy of the default Rating config
@@ -1167,7 +1321,7 @@ class RatingStarDirective {
         return true;
     }
     static { this.ɵfac = function RatingStarDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RatingStarDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: RatingStarDirective, selectors: [["ng-template", "auRatingStar", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: RatingStarDirective, selectors: [["ng-template", "auRatingStar", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RatingStarDirective, [{
         type: Directive,
@@ -1206,11 +1360,89 @@ class RatingComponent extends BaseWidgetDirective {
                 useDirectiveForHost(widget.directives.containerDirective);
             },
             slotTemplates: () => ({
-                star: this.slotStarFromContent?.templateRef,
+                star: this.slotStarFromContent()?.templateRef,
             }),
         }));
         this.onChange = (_) => { };
         this.onTouched = () => { };
+        /**
+         * Return the value for the 'aria-valuetext' attribute.
+         * @param rating - Current rating value.
+         * @param maxRating - maxRating value.
+         *
+         * @defaultValue
+         * ```ts
+         * (rating: number, maxRating: number) => `${rating} out of ${maxRating}`
+         * ```
+         */
+        this.ariaValueTextFn = input(undefined, { alias: 'auAriaValueTextFn' });
+        /**
+         * If `true`, the rating is disabled.
+         *
+         * @defaultValue `false`
+         */
+        this.disabled = input(undefined, { alias: 'auDisabled', transform: auBooleanAttribute });
+        /**
+         * The maximum rating that can be given.
+         *
+         * @defaultValue `10`
+         */
+        this.maxRating = input(undefined, { alias: 'auMaxRating', transform: auNumberAttribute });
+        /**
+         * The current rating. Could be a decimal value like `3.75`.
+         *
+         * @defaultValue `0`
+         */
+        this.rating = input(undefined, { alias: 'auRating', transform: auNumberAttribute });
+        /**
+         * If `true`, the rating can't be changed.
+         *
+         * @defaultValue `false`
+         */
+        this.readonly = input(undefined, { alias: 'auReadonly', transform: auBooleanAttribute });
+        /**
+         * 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.
+         *
+         * @defaultValue `true`
+         */
+        this.resettable = input(undefined, { alias: 'auResettable', transform: auBooleanAttribute });
+        /**
+         * The template to override the way each star is displayed.
+         *
+         * @defaultValue
+         * ```ts
+         * ({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734)
+         * ```
+         */
+        this.star = input(undefined, { alias: 'auStar' });
+        this.slotStarFromContent = contentChild(RatingStarDirective);
+        /**
+         * Allows setting a custom rating tabindex.
+         * If the component is disabled, `tabindex` will still be set to `-1`.
+         *
+         * @defaultValue `0`
+         */
+        this.tabindex = input(undefined, { alias: 'auTabindex', transform: auNumberAttribute });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        /**
+         * The aria label
+         *
+         * @defaultValue `'Rating'`
+         */
+        this.ariaLabel = input(undefined, { alias: 'auAriaLabel' });
+        /**
+         * The aria labelled by
+         *
+         * @defaultValue `''`
+         */
+        this.ariaLabelledBy = input(undefined, { alias: 'auAriaLabelledBy' });
         /**
          * An event emitted when the user is hovering over a given rating.
          *
@@ -1221,7 +1453,7 @@ class RatingComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.hover = new EventEmitter();
+        this.hover = output({ alias: 'auHover' });
         /**
          * An event emitted when the user stops hovering over a given rating.
          *
@@ -1232,7 +1464,7 @@ class RatingComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.leave = new EventEmitter();
+        this.leave = output({ alias: 'auLeave' });
         /**
          * An event emitted when the rating is changed.
          *
@@ -1243,20 +1475,19 @@ class RatingComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.ratingChange = new EventEmitter();
+        this.ratingChange = output({ alias: 'auRatingChange' });
     }
     trackByIndex(index) {
         return index;
     }
     static { this.ɵfac = function RatingComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RatingComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RatingComponent, selectors: [["", "auRating", ""]], contentQueries: function RatingComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, RatingStarDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotStarFromContent, RatingStarDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStarFromContent = _t.first);
+            i0.ɵɵqueryAdvance();
         } }, hostAttrs: [1, "d-inline-flex"], hostBindings: function RatingComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("blur", function RatingComponent_blur_HostBindingHandler() { return ctx.onTouched(); });
-        } }, inputs: { ariaValueTextFn: [0, "auAriaValueTextFn", "ariaValueTextFn"], disabled: [2, "auDisabled", "disabled", auBooleanAttribute], maxRating: [2, "auMaxRating", "maxRating", auNumberAttribute], rating: [2, "auRating", "rating", auNumberAttribute], readonly: [2, "auReadonly", "readonly", auBooleanAttribute], resettable: [2, "auResettable", "resettable", auBooleanAttribute], star: [0, "auStar", "star"], tabindex: [2, "auTabindex", "tabindex", auNumberAttribute], className: [0, "auClassName", "className"], ariaLabel: [0, "auAriaLabel", "ariaLabel"], ariaLabelledBy: [0, "auAriaLabelledBy", "ariaLabelledBy"] }, outputs: { hover: "auHover", leave: "auLeave", ratingChange: "auRatingChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true }]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c0$7, decls: 2, vars: 0, consts: [[1, "visually-hidden"], [3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function RatingComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { ariaValueTextFn: [1, "auAriaValueTextFn", "ariaValueTextFn"], disabled: [1, "auDisabled", "disabled"], maxRating: [1, "auMaxRating", "maxRating"], rating: [1, "auRating", "rating"], readonly: [1, "auReadonly", "readonly"], resettable: [1, "auResettable", "resettable"], star: [1, "auStar", "star"], tabindex: [1, "auTabindex", "tabindex"], className: [1, "auClassName", "className"], ariaLabel: [1, "auAriaLabel", "ariaLabel"], ariaLabelledBy: [1, "auAriaLabelledBy", "ariaLabelledBy"] }, outputs: { hover: "auHover", leave: "auLeave", ratingChange: "auRatingChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true }]), i0.ɵɵInheritDefinitionFeature], attrs: _c0$7, decls: 2, vars: 0, consts: [[1, "visually-hidden"], [3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function RatingComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵrepeaterCreate(0, RatingComponent_For_1_Template, 4, 9, null, null, ctx.trackByIndex, true);
         } if (rf & 2) {
             i0.ɵɵrepeater(ctx.state.stars());
@@ -1266,7 +1497,6 @@ class RatingComponent extends BaseWidgetDirective {
         type: Component,
         args: [{
                 selector: '[auRating]',
-                standalone: true,
                 imports: [UseDirective, SlotDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
@@ -1284,53 +1514,8 @@ class RatingComponent extends BaseWidgetDirective {
 	`,
                 providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true }],
             }]
-    }], () => [], { ariaValueTextFn: [{
-            type: Input,
-            args: ['auAriaValueTextFn']
-        }], disabled: [{
-            type: Input,
-            args: [{ alias: 'auDisabled', transform: auBooleanAttribute }]
-        }], maxRating: [{
-            type: Input,
-            args: [{ alias: 'auMaxRating', transform: auNumberAttribute }]
-        }], rating: [{
-            type: Input,
-            args: [{ alias: 'auRating', transform: auNumberAttribute }]
-        }], readonly: [{
-            type: Input,
-            args: [{ alias: 'auReadonly', transform: auBooleanAttribute }]
-        }], resettable: [{
-            type: Input,
-            args: [{ alias: 'auResettable', transform: auBooleanAttribute }]
-        }], star: [{
-            type: Input,
-            args: ['auStar']
-        }], slotStarFromContent: [{
-            type: ContentChild,
-            args: [RatingStarDirective, { static: false }]
-        }], tabindex: [{
-            type: Input,
-            args: [{ alias: 'auTabindex', transform: auNumberAttribute }]
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], ariaLabel: [{
-            type: Input,
-            args: ['auAriaLabel']
-        }], ariaLabelledBy: [{
-            type: Input,
-            args: ['auAriaLabelledBy']
-        }], hover: [{
-            type: Output,
-            args: ['auHover']
-        }], leave: [{
-            type: Output,
-            args: ['auLeave']
-        }], ratingChange: [{
-            type: Output,
-            args: ['auRatingChange']
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RatingComponent, { className: "RatingComponent", filePath: "components/rating/rating.component.ts", lineNumber: 66 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RatingComponent, { className: "RatingComponent", filePath: "components/rating/rating.component.ts", lineNumber: 64 }); })();
 
 /**
  * Retrieve a shallow copy of the default Select config
@@ -1403,7 +1588,7 @@ class SelectBadgeLabelDirective {
         return true;
     }
     static { this.ɵfac = function SelectBadgeLabelDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SelectBadgeLabelDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SelectBadgeLabelDirective, selectors: [["ng-template", "auSelectBadgeLabel", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SelectBadgeLabelDirective, selectors: [["ng-template", "auSelectBadgeLabel", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectBadgeLabelDirective, [{
         type: Directive,
@@ -1427,7 +1612,7 @@ class SelectItemLabelDirective {
         return true;
     }
     static { this.ɵfac = function SelectItemLabelDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SelectItemLabelDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SelectItemLabelDirective, selectors: [["ng-template", "auSelectItemLabel", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SelectItemLabelDirective, selectors: [["ng-template", "auSelectItemLabel", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectItemLabelDirective, [{
         type: Directive,
@@ -1452,10 +1637,110 @@ class SelectComponent extends BaseWidgetDirective {
                 useDirectiveForHost(widget.directives.referenceDirective);
             },
             slotTemplates: () => ({
-                badgeLabel: this.slotSelectBadgeLabelFromContent?.templateRef,
-                itemLabel: this.slotSelectItemLabelFromContent?.templateRef,
+                badgeLabel: this.slotSelectBadgeLabelFromContent()?.templateRef,
+                itemLabel: this.slotSelectItemLabelFromContent()?.templateRef,
             }),
         }));
+        /**
+         * aria-label used for the input inside the select
+         *
+         * @defaultValue `'Select'`
+         */
+        this.ariaLabel = input(undefined, { alias: 'auAriaLabel' });
+        /**
+         * id used for the input inside the select
+         */
+        this.id = input(undefined, { alias: 'auId' });
+        /**
+         * List of available items for the dropdown
+         *
+         * @defaultValue `[]`
+         */
+        this.items = input(undefined, { alias: 'auItems' });
+        /**
+         * List of allowed placements for the dropdown.
+         * This refers to the [allowedPlacements from floating UI](https://floating-ui.com/docs/autoPlacement#allowedplacements), given the different [Placement possibilities](https://floating-ui.com/docs/computePosition#placement).
+         *
+         * @defaultValue
+         * ```ts
+         * ['bottom-start', 'top-start', 'bottom-end', 'top-end']
+         * ```
+         */
+        this.allowedPlacements = input(undefined, { alias: 'auAllowedPlacements' });
+        /**
+         * true if the select is open
+         *
+         * @defaultValue `false`
+         */
+        this.open = input(undefined, { alias: 'auOpen', transform: auBooleanAttribute });
+        /**
+         * Filtered text to be display in the filter input
+         *
+         * @defaultValue `''`
+         */
+        this.filterText = input(undefined, { alias: 'auFilterText' });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        /**
+         * true if the select is disabled
+         *
+         * @defaultValue `false`
+         */
+        this.disabled = input(undefined, { alias: 'auDisabled', transform: auBooleanAttribute });
+        /**
+         * List of selected item ids
+         *
+         * @defaultValue `[]`
+         */
+        this.selected = input(undefined, { alias: 'auSelected' });
+        /**
+         * true if a loading process is being done
+         *
+         * @defaultValue `false`
+         */
+        this.loading = input(undefined, { alias: 'auLoading', transform: auBooleanAttribute });
+        /**
+         * Custom function to get the id of an item
+         * By default, the item is returned
+         *
+         * @defaultValue
+         * ```ts
+         * (item: any) => '' + item
+         * ```
+         */
+        this.itemIdFn = input(undefined, { alias: 'auItemIdFn' });
+        /**
+         * Class to be added on the dropdown menu container
+         *
+         * @defaultValue `''`
+         */
+        this.menuClassName = input(undefined, { alias: 'auMenuClassName' });
+        /**
+         * The template to override the way each badge on the left of the input is displayed.
+         * This define the content of the badge inside the badge container.
+         *
+         * @defaultValue
+         * ```ts
+         * ({itemContext}: SelectItemContext<any>) => itemContext.item
+         * ```
+         */
+        this.badgeLabel = input(undefined, { alias: 'auBadgeLabel' });
+        this.slotSelectBadgeLabelFromContent = contentChild(SelectBadgeLabelDirective);
+        /**
+         * The template to override the way each item is displayed in the list.
+         * This define the content of the badge inside the badge container.
+         *
+         * @defaultValue
+         * ```ts
+         * ({itemContext}: SelectItemContext<any>) => itemContext.item
+         * ```
+         */
+        this.itemLabel = input(undefined, { alias: 'auItemLabel' });
+        this.slotSelectItemLabelFromContent = contentChild(SelectItemLabelDirective);
         /**
          * Callback called when the text filter change
          * @param text - Filtered text
@@ -1465,7 +1750,7 @@ class SelectComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.filterTextChange = new EventEmitter();
+        this.filterTextChange = output({ alias: 'auFilterTextChange' });
         /**
          * Callback called when the selection change
          *
@@ -1474,7 +1759,7 @@ class SelectComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.selectedChange = new EventEmitter();
+        this.selectedChange = output({ alias: 'auSelectedChange' });
         /**
          * Callback called dropdown open state change
          * @param isOpen - updated open state
@@ -1484,22 +1769,43 @@ class SelectComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.openChange = new EventEmitter();
+        this.openChange = output({ alias: 'auOpenChange' });
+        /**
+         * Class to be added on menu items
+         *
+         * @defaultValue `''`
+         */
+        this.menuItemClassName = input(undefined, { alias: 'auMenuItemClassName' });
+        /**
+         * Class to be added on selected items (displayed in the input zone)
+         *
+         * @defaultValue `''`
+         */
+        this.badgeClassName = input(undefined, { alias: 'auBadgeClassName' });
+        /**
+         * Retrieves navigable elements within an HTML element containing badges and the input.
+         *
+         * @param node - HTMLElement that contains the badges and the input
+         *
+         * @defaultValue
+         * ```ts
+         * (node: HTMLElement) => node.querySelectorAll('.au-select-badge,input')
+         * ```
+         */
+        this.navSelector = input(undefined, { alias: 'auNavSelector' });
     }
     itemCtxTrackBy(_, itemContext) {
         return itemContext.id;
     }
     static { this.ɵfac = function SelectComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SelectComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SelectComponent, selectors: [["", "auSelect", ""]], contentQueries: function SelectComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, SelectBadgeLabelDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, SelectItemLabelDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotSelectBadgeLabelFromContent, SelectBadgeLabelDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotSelectItemLabelFromContent, SelectItemLabelDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotSelectBadgeLabelFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotSelectItemLabelFromContent = _t.first);
+            i0.ɵɵqueryAdvance(2);
         } }, hostVars: 2, hostBindings: function SelectComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap("au-select dropdown border border-1 p-1 mb-3 d-block" + ctx.state.className());
-        } }, inputs: { ariaLabel: [0, "auAriaLabel", "ariaLabel"], id: [0, "auId", "id"], items: [0, "auItems", "items"], allowedPlacements: [0, "auAllowedPlacements", "allowedPlacements"], open: [2, "auOpen", "open", auBooleanAttribute], filterText: [0, "auFilterText", "filterText"], className: [0, "auClassName", "className"], disabled: [2, "auDisabled", "disabled", auBooleanAttribute], selected: [0, "auSelected", "selected"], loading: [2, "auLoading", "loading", auBooleanAttribute], itemIdFn: [0, "auItemIdFn", "itemIdFn"], menuClassName: [0, "auMenuClassName", "menuClassName"], badgeLabel: [0, "auBadgeLabel", "badgeLabel"], itemLabel: [0, "auItemLabel", "itemLabel"], menuItemClassName: [0, "auMenuItemClassName", "menuItemClassName"], badgeClassName: [0, "auBadgeClassName", "badgeClassName"], navSelector: [0, "auNavSelector", "navSelector"] }, outputs: { filterTextChange: "auFilterTextChange", selectedChange: "auSelectedChange", openChange: "auOpenChange" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c0$6, decls: 4, vars: 8, consts: [[1, "d-flex", "align-items-center", "flex-wrap", "gap-1", 3, "auUseMulti"], [3, "auUse", "value"], [1, "dropdown-menu", "show", 3, "auUseMulti"], [3, "auUse"], [3, "auSlot", "auSlotProps"], [1, "dropdown-item", "position-relative", 3, "auUse", "text-bg-primary"], [1, "dropdown-item", "position-relative", 3, "auUse"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { ariaLabel: [1, "auAriaLabel", "ariaLabel"], id: [1, "auId", "id"], items: [1, "auItems", "items"], allowedPlacements: [1, "auAllowedPlacements", "allowedPlacements"], open: [1, "auOpen", "open"], filterText: [1, "auFilterText", "filterText"], className: [1, "auClassName", "className"], disabled: [1, "auDisabled", "disabled"], selected: [1, "auSelected", "selected"], loading: [1, "auLoading", "loading"], itemIdFn: [1, "auItemIdFn", "itemIdFn"], menuClassName: [1, "auMenuClassName", "menuClassName"], badgeLabel: [1, "auBadgeLabel", "badgeLabel"], itemLabel: [1, "auItemLabel", "itemLabel"], menuItemClassName: [1, "auMenuItemClassName", "menuItemClassName"], badgeClassName: [1, "auBadgeClassName", "badgeClassName"], navSelector: [1, "auNavSelector", "navSelector"] }, outputs: { filterTextChange: "auFilterTextChange", selectedChange: "auSelectedChange", openChange: "auOpenChange" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c0$6, decls: 4, vars: 8, consts: [[1, "d-flex", "align-items-center", "flex-wrap", "gap-1", 3, "auUseMulti"], [3, "auUse", "value"], [1, "dropdown-menu", "show", 3, "auUseMulti"], [3, "auUse"], [3, "auSlot", "auSlotProps"], [1, "dropdown-item", "position-relative", 3, "auUse", "text-bg-primary"], [1, "dropdown-item", "position-relative", 3, "auUse"]], template: function SelectComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵtemplate(1, SelectComponent_Conditional_1_Template, 2, 0);
             i0.ɵɵelement(2, "input", 1);
@@ -1519,7 +1825,6 @@ class SelectComponent extends BaseWidgetDirective {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 imports: [UseMultiDirective, SlotDirective, UseDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: '[auSelect]',
@@ -1552,74 +1857,8 @@ class SelectComponent extends BaseWidgetDirective {
 		}
 	`,
             }]
-    }], () => [], { ariaLabel: [{
-            type: Input,
-            args: ['auAriaLabel']
-        }], id: [{
-            type: Input,
-            args: ['auId']
-        }], items: [{
-            type: Input,
-            args: ['auItems']
-        }], allowedPlacements: [{
-            type: Input,
-            args: ['auAllowedPlacements']
-        }], open: [{
-            type: Input,
-            args: [{ alias: 'auOpen', transform: auBooleanAttribute }]
-        }], filterText: [{
-            type: Input,
-            args: ['auFilterText']
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], disabled: [{
-            type: Input,
-            args: [{ alias: 'auDisabled', transform: auBooleanAttribute }]
-        }], selected: [{
-            type: Input,
-            args: ['auSelected']
-        }], loading: [{
-            type: Input,
-            args: [{ alias: 'auLoading', transform: auBooleanAttribute }]
-        }], itemIdFn: [{
-            type: Input,
-            args: ['auItemIdFn']
-        }], menuClassName: [{
-            type: Input,
-            args: ['auMenuClassName']
-        }], badgeLabel: [{
-            type: Input,
-            args: ['auBadgeLabel']
-        }], slotSelectBadgeLabelFromContent: [{
-            type: ContentChild,
-            args: [SelectBadgeLabelDirective, { static: false }]
-        }], itemLabel: [{
-            type: Input,
-            args: ['auItemLabel']
-        }], slotSelectItemLabelFromContent: [{
-            type: ContentChild,
-            args: [SelectItemLabelDirective, { static: false }]
-        }], filterTextChange: [{
-            type: Output,
-            args: ['auFilterTextChange']
-        }], selectedChange: [{
-            type: Output,
-            args: ['auSelectedChange']
-        }], openChange: [{
-            type: Output,
-            args: ['auOpenChange']
-        }], menuItemClassName: [{
-            type: Input,
-            args: ['auMenuItemClassName']
-        }], badgeClassName: [{
-            type: Input,
-            args: ['auBadgeClassName']
-        }], navSelector: [{
-            type: Input,
-            args: ['auNavSelector']
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "components/select/select.component.ts", lineNumber: 88 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "components/select/select.component.ts", lineNumber: 87 }); })();
 
 /**
  * Retrieve a shallow copy of the default Alert config
@@ -1690,7 +1929,7 @@ class AlertBodyDirective {
         return true;
     }
     static { this.ɵfac = function AlertBodyDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AlertBodyDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AlertBodyDirective, selectors: [["ng-template", "auAlertBody", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AlertBodyDirective, selectors: [["ng-template", "auAlertBody", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AlertBodyDirective, [{
         type: Directive,
@@ -1709,27 +1948,28 @@ class AlertStructureDirective {
         return true;
     }
     static { this.ɵfac = function AlertStructureDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AlertStructureDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AlertStructureDirective, selectors: [["ng-template", "auAlertStructure", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AlertStructureDirective, selectors: [["ng-template", "auAlertStructure", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AlertStructureDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auAlertStructure]', standalone: true }]
     }], null, null); })();
 class AlertDefaultSlotsComponent {
+    constructor() {
+        this.structure = viewChild.required('structure');
+    }
     static { this.ɵfac = function AlertDefaultSlotsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AlertDefaultSlotsComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AlertDefaultSlotsComponent, selectors: [["ng-component"]], viewQuery: function AlertDefaultSlotsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$5, 7);
+            i0.ɵɵviewQuerySignal(ctx.structure, _c0$5, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.structure = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["structure", ""], ["auAlertStructure", ""], [1, "alert-body"], [3, "auSlot", "auSlotProps"], ["type", "button", 1, "btn-close"], ["type", "button", 1, "btn-close", 3, "click"]], template: function AlertDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["structure", ""], ["auAlertStructure", ""], [1, "alert-body"], [3, "auSlot", "auSlotProps"], ["type", "button", 1, "btn-close"], ["type", "button", 1, "btn-close", 3, "click"]], template: function AlertDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, AlertDefaultSlotsComponent_ng_template_0_Template, 3, 7, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [SlotDirective, AlertStructureDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AlertDefaultSlotsComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, AlertStructureDirective],
                 template: ` <ng-template auAlertStructure #structure let-state="state" let-api="api" let-directives="directives">
@@ -1741,11 +1981,8 @@ class AlertDefaultSlotsComponent {
 		}
 	</ng-template>`,
             }]
-    }], null, { structure: [{
-            type: ViewChild,
-            args: ['structure', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AlertDefaultSlotsComponent, { className: "AlertDefaultSlotsComponent", filePath: "components/alert/alert.component.ts", lineNumber: 59 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AlertDefaultSlotsComponent, { className: "AlertDefaultSlotsComponent", filePath: "components/alert/alert.component.ts", lineNumber: 47 }); })();
 /**
  * Represents the default slot structure for the alert component.
  */
@@ -1772,11 +2009,72 @@ class AlertComponent extends BaseWidgetDirective {
                 onHidden: () => this.hidden.emit(),
             },
             slotTemplates: () => ({
-                children: this.slotDefaultFromContent?.templateRef,
-                structure: this.slotStructureFromContent?.templateRef,
+                children: this.slotDefaultFromContent()?.templateRef,
+                structure: this.slotStructureFromContent()?.templateRef,
             }),
-            slotChildren: () => this.slotChildren,
+            slotChildren: () => this.slotChildren(),
         }));
+        /**
+         * Type of the alert, following bootstrap types.
+         *
+         * @defaultValue `'primary'`
+         */
+        this.type = input(undefined, { alias: 'auType' });
+        /**
+         * 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.
+         *
+         * @defaultValue `true`
+         */
+        this.dismissible = input(undefined, { alias: 'auDismissible', transform: auBooleanAttribute });
+        /**
+         * The transition function will be executed when the alert is displayed or hidden.
+         *
+         * Depending on the value of `animatedOnInit`, the animation can be optionally skipped during the showing process.
+         *
+         * @defaultValue `fadeTransition`
+         */
+        this.transition = input(undefined, { alias: 'auTransition' });
+        /**
+         * If `true` the alert is visible to the user
+         *
+         * @defaultValue `true`
+         */
+        this.visible = input(undefined, { alias: 'auVisible', transform: auBooleanAttribute });
+        /**
+         * If `true`, alert opening will be animated.
+         *
+         * Animation is triggered  when the `.open()` function is called
+         * or the visible prop is changed
+         *
+         * @defaultValue `false`
+         */
+        this.animatedOnInit = input(undefined, { alias: 'auAnimatedOnInit', transform: auBooleanAttribute });
+        /**
+         * If `true`, alert closing will be animated.
+         *
+         * Animation is triggered  when clicked on the close button (×),
+         * via the `.close()` function or the visible prop is changed
+         *
+         * @defaultValue `true`
+         */
+        this.animated = input(undefined, { alias: 'auAnimated', transform: auBooleanAttribute });
+        /**
+         * Accessibility close button label
+         *
+         * @defaultValue `'Close'`
+         */
+        this.ariaCloseButtonLabel = input(undefined, { alias: 'auAriaCloseButtonLabel' });
+        /**
+         * Template for the alert content
+         */
+        this.children = input(undefined, { alias: 'auChildren' });
+        this.slotDefaultFromContent = contentChild(AlertBodyDirective);
+        /**
+         * Global template for the alert component
+         */
+        this.structure = input(undefined, { alias: 'auStructure' });
+        this.slotStructureFromContent = contentChild(AlertStructureDirective);
         /**
          * Callback called when the alert visibility changed.
          *
@@ -1785,7 +2083,7 @@ class AlertComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.visibleChange = new EventEmitter();
+        this.visibleChange = output({ alias: 'auVisibleChange' });
         /**
          * Callback called when the alert is hidden.
          *
@@ -1794,7 +2092,7 @@ class AlertComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.hidden = new EventEmitter();
+        this.hidden = output({ alias: 'auHidden' });
         /**
          * Callback called when the alert is shown.
          *
@@ -1803,22 +2101,26 @@ class AlertComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.shown = new EventEmitter();
+        this.shown = output({ alias: 'auShown' });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        this.slotChildren = viewChild('content');
     }
     static { this.ɵfac = function AlertComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AlertComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AlertComponent, selectors: [["", "auAlert", ""]], contentQueries: function AlertComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, AlertBodyDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, AlertStructureDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotDefaultFromContent, AlertBodyDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotStructureFromContent, AlertStructureDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotDefaultFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
+            i0.ɵɵqueryAdvance(2);
         } }, viewQuery: function AlertComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c2$5, 7);
+            i0.ɵɵviewQuerySignal(ctx.slotChildren, _c2$5, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotChildren = _t.first);
-        } }, inputs: { type: [0, "auType", "type"], dismissible: [2, "auDismissible", "dismissible", auBooleanAttribute], transition: [0, "auTransition", "transition"], visible: [2, "auVisible", "visible", auBooleanAttribute], animatedOnInit: [2, "auAnimatedOnInit", "animatedOnInit", auBooleanAttribute], animated: [2, "auAnimated", "animated", auBooleanAttribute], ariaCloseButtonLabel: [0, "auAriaCloseButtonLabel", "ariaCloseButtonLabel"], children: [0, "auChildren", "children"], structure: [0, "auStructure", "structure"], className: [0, "auClassName", "className"] }, outputs: { visibleChange: "auVisibleChange", hidden: "auHidden", shown: "auShown" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c3$5, ngContentSelectors: _c4$5, decls: 3, vars: 1, consts: [["content", ""], ["role", "alert", 3, "auUse", "class"], ["role", "alert", 3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function AlertComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { type: [1, "auType", "type"], dismissible: [1, "auDismissible", "dismissible"], transition: [1, "auTransition", "transition"], visible: [1, "auVisible", "visible"], animatedOnInit: [1, "auAnimatedOnInit", "animatedOnInit"], animated: [1, "auAnimated", "animated"], ariaCloseButtonLabel: [1, "auAriaCloseButtonLabel", "ariaCloseButtonLabel"], children: [1, "auChildren", "children"], structure: [1, "auStructure", "structure"], className: [1, "auClassName", "className"] }, outputs: { visibleChange: "auVisibleChange", hidden: "auHidden", shown: "auShown" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c3$5, ngContentSelectors: _c4$5, decls: 3, vars: 1, consts: [["content", ""], ["role", "alert", 3, "auUse", "class"], ["role", "alert", 3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function AlertComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, AlertComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, AlertComponent_Conditional_2_Template, 2, 12, "div", 1);
         } if (rf & 2) {
@@ -1830,7 +2132,6 @@ class AlertComponent extends BaseWidgetDirective {
         type: Component,
         args: [{
                 selector: '[auAlert]',
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, UseDirective],
                 template: ` <ng-template #content>
@@ -1847,56 +2148,8 @@ class AlertComponent extends BaseWidgetDirective {
 			</div>
 		}`,
             }]
-    }], () => [], { type: [{
-            type: Input,
-            args: ['auType']
-        }], dismissible: [{
-            type: Input,
-            args: [{ alias: 'auDismissible', transform: auBooleanAttribute }]
-        }], transition: [{
-            type: Input,
-            args: ['auTransition']
-        }], visible: [{
-            type: Input,
-            args: [{ alias: 'auVisible', transform: auBooleanAttribute }]
-        }], animatedOnInit: [{
-            type: Input,
-            args: [{ alias: 'auAnimatedOnInit', transform: auBooleanAttribute }]
-        }], animated: [{
-            type: Input,
-            args: [{ alias: 'auAnimated', transform: auBooleanAttribute }]
-        }], ariaCloseButtonLabel: [{
-            type: Input,
-            args: ['auAriaCloseButtonLabel']
-        }], children: [{
-            type: Input,
-            args: ['auChildren']
-        }], slotDefaultFromContent: [{
-            type: ContentChild,
-            args: [AlertBodyDirective, { static: false }]
-        }], structure: [{
-            type: Input,
-            args: ['auStructure']
-        }], slotStructureFromContent: [{
-            type: ContentChild,
-            args: [AlertStructureDirective, { static: false }]
-        }], visibleChange: [{
-            type: Output,
-            args: ['auVisibleChange']
-        }], hidden: [{
-            type: Output,
-            args: ['auHidden']
-        }], shown: [{
-            type: Output,
-            args: ['auShown']
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], slotChildren: [{
-            type: ViewChild,
-            args: ['content', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AlertComponent, { className: "AlertComponent", filePath: "components/alert/alert.component.ts", lineNumber: 95 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AlertComponent, { className: "AlertComponent", filePath: "components/alert/alert.component.ts", lineNumber: 82 }); })();
 
 /**
  * Retrieve a shallow copy of the default accordion config
@@ -2109,7 +2362,7 @@ class AccordionBodyDirective {
         return true;
     }
     static { this.ɵfac = function AccordionBodyDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccordionBodyDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AccordionBodyDirective, selectors: [["ng-template", "auAccordionItemBody", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AccordionBodyDirective, selectors: [["ng-template", "auAccordionItemBody", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionBodyDirective, [{
         type: Directive,
@@ -2128,7 +2381,7 @@ class AccordionHeaderDirective {
         return true;
     }
     static { this.ɵfac = function AccordionHeaderDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccordionHeaderDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AccordionHeaderDirective, selectors: [["ng-template", "auAccordionItemHeader", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AccordionHeaderDirective, selectors: [["ng-template", "auAccordionItemHeader", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionHeaderDirective, [{
         type: Directive,
@@ -2148,27 +2401,28 @@ class AccordionItemStructureDirective {
         return true;
     }
     static { this.ɵfac = function AccordionItemStructureDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccordionItemStructureDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AccordionItemStructureDirective, selectors: [["ng-template", "auAccordionItemStructure", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AccordionItemStructureDirective, selectors: [["ng-template", "auAccordionItemStructure", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionItemStructureDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auAccordionItemStructure]', standalone: true }]
     }], null, null); })();
 class AccordionItemDefaultSlotsComponent {
+    constructor() {
+        this.structure = viewChild.required('structure');
+    }
     static { this.ɵfac = function AccordionItemDefaultSlotsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccordionItemDefaultSlotsComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AccordionItemDefaultSlotsComponent, selectors: [["ng-component"]], viewQuery: function AccordionItemDefaultSlotsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$4, 7);
+            i0.ɵɵviewQuerySignal(ctx.structure, _c0$4, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.structure = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["structure", ""], ["h1", ""], ["h2", ""], ["h3", ""], ["h4", ""], ["h5", ""], ["h6", ""], ["button", ""], ["auAccordionItemStructure", ""], [3, "ngTemplateOutlet"], [1, "accordion-collapse", 3, "auUse"], [1, "accordion-header", 3, "auUse"], [1, "accordion-button", 3, "auUse"], [3, "auSlotProps", "auSlot"], [1, "accordion-body", 3, "auUse"]], template: function AccordionItemDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["structure", ""], ["h1", ""], ["h2", ""], ["h3", ""], ["h4", ""], ["h5", ""], ["h6", ""], ["button", ""], ["auAccordionItemStructure", ""], [3, "ngTemplateOutlet"], [1, "accordion-collapse", 3, "auUse"], [1, "accordion-header", 3, "auUse"], [1, "accordion-button", 3, "auUse"], [3, "auSlotProps", "auSlot"], [1, "accordion-body", 3, "auUse"]], template: function AccordionItemDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, AccordionItemDefaultSlotsComponent_ng_template_0_Template, 22, 2, "ng-template", 8, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [UseDirective, SlotDirective, NgTemplateOutlet, AccordionItemStructureDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionItemDefaultSlotsComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [UseDirective, SlotDirective, NgTemplateOutlet, AccordionItemStructureDirective],
                 template: `
@@ -2247,11 +2501,8 @@ class AccordionItemDefaultSlotsComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { structure: [{
-            type: ViewChild,
-            args: ['structure', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AccordionItemDefaultSlotsComponent, { className: "AccordionItemDefaultSlotsComponent", filePath: "components/accordion/accordion.component.ts", lineNumber: 148 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AccordionItemDefaultSlotsComponent, { className: "AccordionItemDefaultSlotsComponent", filePath: "components/accordion/accordion.component.ts", lineNumber: 136 }); })();
 /**
  * Represents the default slot structure for an accordion item.
  */
@@ -2275,46 +2526,119 @@ class AccordionItemComponent extends BaseWidgetDirective {
                 useDirectiveForHost(widget.directives.itemDirective);
             },
             slotTemplates: () => ({
-                structure: this.slotStructureFromContent?.templateRef,
-                header: this.slotHeaderFromContent?.templateRef,
-                children: this.slotBodyFromContent?.templateRef,
+                structure: this.slotStructureFromContent()?.templateRef,
+                header: this.slotHeaderFromContent()?.templateRef,
+                children: this.slotBodyFromContent()?.templateRef,
             }),
-            slotChildren: () => this.slotChildren,
+            slotChildren: () => this.slotChildren(),
         }));
+        /**
+         * Content present in the accordion button inside the accordion header.
+         *
+         * It is a prop of the accordion-item.
+         */
+        this.header = input(undefined, { alias: 'auHeader' });
+        this.slotHeaderFromContent = contentChild(AccordionHeaderDirective);
+        /**
+         * Content present in the accordion body.
+         *
+         * It is a prop of the accordion-item.
+         */
+        this.children = input(undefined, { alias: 'auChildren' });
+        this.slotBodyFromContent = contentChild(AccordionBodyDirective);
+        /**
+         * Structure of the accordion-item. The default item structure is: accordion-item
+         * contains accordion header and accordion-item body container; the accordion header contains the accordion button
+         * (that contains `header`), while the accordion-item body container contains the accordion body (that contains `children`).
+         * The itemTransition is applied on this element.
+         *
+         * It is a prop of the accordion-item.
+         */
+        this.structure = input(undefined, { alias: 'auStructure' });
+        this.slotStructureFromContent = contentChild(AccordionItemStructureDirective);
+        /**
+         * The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
+         */
+        this.id = input(undefined, { alias: 'auId' });
+        /**
+         * The transition to use for the accordion-item body-container when the accordion-item is toggled.
+         */
+        this.transition = input(undefined, { alias: 'auTransition' });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        /**
+         * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
+         */
+        this.destroyOnHide = input(undefined, { alias: 'auDestroyOnHide', transform: auBooleanAttribute });
+        /**
+         * If `true`, the accordion-item will be disabled.
+         * It will not react to user's clicks, but still will be possible to toggle programmatically.
+         */
+        this.disabled = input(undefined, { alias: 'auDisabled', transform: auBooleanAttribute });
+        /**
+         * If `true`, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
+         */
+        this.visible = input(undefined, { alias: 'auVisible', transform: auBooleanAttribute });
+        /**
+         * If `true`, accordion-item will be animated.
+         */
+        this.animated = input(undefined, { alias: 'auAnimated', transform: auBooleanAttribute });
+        /**
+         * CSS classes to add on the accordion-item header DOM element.
+         */
+        this.headerClassName = input(undefined, { alias: 'auHeaderClassName' });
+        /**
+         * CSS classes to add on the accordion-item collapse DOM element.
+         */
+        this.buttonClassName = input(undefined, { alias: 'auButtonClassName' });
+        /**
+         * CSS classes to add on the accordion-item body container DOM element.
+         * The accordion-item body container is the DOM element on what the itemTransition is applied.
+         */
+        this.bodyContainerClassName = input(undefined, { alias: 'auBodyContainerClassName' });
+        /**
+         * CSS classes to add on the accordion-item body DOM element.
+         */
+        this.bodyClassName = input(undefined, { alias: 'auBodyClassName' });
+        /**
+         * The html tag to use for the accordion-item-header.
+         */
+        this.headingTag = input(undefined, { alias: 'auHeadingTag' });
         /**
          * An event fired when an item is shown.
          */
-        this.shown = new EventEmitter();
+        this.shown = output({ alias: 'auShown' });
         /**
          * An event fired when an item is hidden.
          */
-        this.hidden = new EventEmitter();
+        this.hidden = output({ alias: 'auHidden' });
         /**
          * An event fired when the `visible` value changes.
          *
          * Event payload is the new value of visible.
          */
-        this.visibleChange = new EventEmitter();
+        this.visibleChange = output({ alias: 'auVisibleChange' });
+        this.slotChildren = viewChild('content');
     }
     ngAfterViewInit() {
         queueMicrotask(() => this.api.initDone());
     }
     static { this.ɵfac = function AccordionItemComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccordionItemComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AccordionItemComponent, selectors: [["", "auAccordionItem", ""]], contentQueries: function AccordionItemComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, AccordionHeaderDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, AccordionBodyDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, AccordionItemStructureDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotHeaderFromContent, AccordionHeaderDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotBodyFromContent, AccordionBodyDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotStructureFromContent, AccordionItemStructureDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotHeaderFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotBodyFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
+            i0.ɵɵqueryAdvance(3);
         } }, viewQuery: function AccordionItemComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c2$4, 7);
+            i0.ɵɵviewQuerySignal(ctx.slotChildren, _c2$4, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotChildren = _t.first);
-        } }, hostAttrs: [1, "accordion-item"], inputs: { header: [0, "auHeader", "header"], children: [0, "auChildren", "children"], structure: [0, "auStructure", "structure"], id: [0, "auId", "id"], transition: [0, "auTransition", "transition"], className: [0, "auClassName", "className"], destroyOnHide: [2, "auDestroyOnHide", "destroyOnHide", auBooleanAttribute], disabled: [2, "auDisabled", "disabled", auBooleanAttribute], visible: [2, "auVisible", "visible", auBooleanAttribute], animated: [2, "auAnimated", "animated", auBooleanAttribute], headerClassName: [0, "auHeaderClassName", "headerClassName"], buttonClassName: [0, "auButtonClassName", "buttonClassName"], bodyContainerClassName: [0, "auBodyContainerClassName", "bodyContainerClassName"], bodyClassName: [0, "auBodyClassName", "bodyClassName"], headingTag: [0, "auHeadingTag", "headingTag"] }, outputs: { shown: "auShown", hidden: "auHidden", visibleChange: "auVisibleChange" }, exportAs: ["auAccordionItem"], standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c3$4, ngContentSelectors: _c4$4, decls: 3, vars: 6, consts: [["content", ""], [3, "auSlotProps", "auSlot"]], template: function AccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, hostAttrs: [1, "accordion-item"], inputs: { header: [1, "auHeader", "header"], children: [1, "auChildren", "children"], structure: [1, "auStructure", "structure"], id: [1, "auId", "id"], transition: [1, "auTransition", "transition"], className: [1, "auClassName", "className"], destroyOnHide: [1, "auDestroyOnHide", "destroyOnHide"], disabled: [1, "auDisabled", "disabled"], visible: [1, "auVisible", "visible"], animated: [1, "auAnimated", "animated"], headerClassName: [1, "auHeaderClassName", "headerClassName"], buttonClassName: [1, "auButtonClassName", "buttonClassName"], bodyContainerClassName: [1, "auBodyContainerClassName", "bodyContainerClassName"], bodyClassName: [1, "auBodyClassName", "bodyClassName"], headingTag: [1, "auHeadingTag", "headingTag"] }, outputs: { shown: "auShown", hidden: "auHidden", visibleChange: "auVisibleChange" }, exportAs: ["auAccordionItem"], features: [i0.ɵɵInheritDefinitionFeature], attrs: _c3$4, ngContentSelectors: _c4$4, decls: 3, vars: 6, consts: [["content", ""], [3, "auSlotProps", "auSlot"]], template: function AccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, AccordionItemComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, AccordionItemComponent_ng_template_2_Template, 0, 0, "ng-template", 1);
         } if (rf & 2) {
@@ -2327,85 +2651,18 @@ class AccordionItemComponent extends BaseWidgetDirective {
         args: [{
                 selector: '[auAccordionItem]',
                 exportAs: 'auAccordionItem',
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 host: {
                     class: 'accordion-item',
                 },
-                imports: [SlotDirective, UseDirective],
+                imports: [SlotDirective],
                 template: `
 		<ng-template #content><ng-content /></ng-template>
 		<ng-template [auSlotProps]="{state, api, directives}" [auSlot]="state.structure()" />
 	`,
             }]
-    }], () => [], { header: [{
-            type: Input,
-            args: ['auHeader']
-        }], slotHeaderFromContent: [{
-            type: ContentChild,
-            args: [AccordionHeaderDirective, { static: false }]
-        }], children: [{
-            type: Input,
-            args: ['auChildren']
-        }], slotBodyFromContent: [{
-            type: ContentChild,
-            args: [AccordionBodyDirective, { static: false }]
-        }], structure: [{
-            type: Input,
-            args: ['auStructure']
-        }], slotStructureFromContent: [{
-            type: ContentChild,
-            args: [AccordionItemStructureDirective, { static: false }]
-        }], id: [{
-            type: Input,
-            args: ['auId']
-        }], transition: [{
-            type: Input,
-            args: ['auTransition']
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], destroyOnHide: [{
-            type: Input,
-            args: [{ alias: 'auDestroyOnHide', transform: auBooleanAttribute }]
-        }], disabled: [{
-            type: Input,
-            args: [{ alias: 'auDisabled', transform: auBooleanAttribute }]
-        }], visible: [{
-            type: Input,
-            args: [{ alias: 'auVisible', transform: auBooleanAttribute }]
-        }], animated: [{
-            type: Input,
-            args: [{ alias: 'auAnimated', transform: auBooleanAttribute }]
-        }], headerClassName: [{
-            type: Input,
-            args: ['auHeaderClassName']
-        }], buttonClassName: [{
-            type: Input,
-            args: ['auButtonClassName']
-        }], bodyContainerClassName: [{
-            type: Input,
-            args: ['auBodyContainerClassName']
-        }], bodyClassName: [{
-            type: Input,
-            args: ['auBodyClassName']
-        }], headingTag: [{
-            type: Input,
-            args: ['auHeadingTag']
-        }], shown: [{
-            type: Output,
-            args: ['auShown']
-        }], hidden: [{
-            type: Output,
-            args: ['auHidden']
-        }], visibleChange: [{
-            type: Output,
-            args: ['auVisibleChange']
-        }], slotChildren: [{
-            type: ViewChild,
-            args: ['content', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AccordionItemComponent, { className: "AccordionItemComponent", filePath: "components/accordion/accordion.component.ts", lineNumber: 176 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AccordionItemComponent, { className: "AccordionItemComponent", filePath: "components/accordion/accordion.component.ts", lineNumber: 163 }); })();
 /**
  * Directive for creating an accordion component.
  *
@@ -2426,6 +2683,18 @@ class AccordionDirective extends BaseWidgetDirective {
                 useDirectiveForHost(widget.directives.accordionDirective);
             },
         }));
+        /**
+         * If `true`, only one accordion-item at the time can stay open.
+         *
+         * @defaultValue `false`
+         */
+        this.closeOthers = input(undefined, { alias: 'auCloseOthers', transform: auBooleanAttribute });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
         /**
          * An event fired when an item is shown.
          *
@@ -2436,7 +2705,7 @@ class AccordionDirective extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.itemShown = new EventEmitter();
+        this.itemShown = output({ alias: 'auItemShown' });
         /**
          * An event fired when an item is hidden.
          *
@@ -2447,10 +2716,77 @@ class AccordionDirective extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.itemHidden = new EventEmitter();
+        this.itemHidden = output({ alias: 'auItemHidden' });
+        /**
+         * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
+         *
+         * @defaultValue `true`
+         */
+        this.itemDestroyOnHide = input(undefined, { alias: 'auItemDestroyOnHide', transform: auBooleanAttribute });
+        /**
+         * If `true`, accordion-item will be animated.
+         *
+         * @defaultValue `true`
+         */
+        this.itemAnimated = input(undefined, { alias: 'auItemAnimated', transform: auBooleanAttribute });
+        /**
+         * The transition to use for the accordion-item body-container when the accordion-item is toggled.
+         *
+         * @defaultValue
+         * ```ts
+         * collapseVerticalTransition
+         * ```
+         */
+        this.itemTransition = input(undefined, { alias: 'auItemTransition' });
+        /**
+         * Structure of the accordion-item. The default item structure is: accordion-item
+         * contains accordion header and accordion-item body container; the accordion header contains the accordion button
+         * (that contains `header`), while the accordion-item body container contains the accordion body (that contains `children`).
+         * The itemTransition is applied on this element.
+         *
+         * It is a prop of the accordion-item.
+         */
+        this.itemStructure = input(undefined, { alias: 'auItemStructure' });
+        /**
+         * CSS classes to add on the accordion-item DOM element.
+         *
+         * @defaultValue `''`
+         */
+        this.itemClassName = input(undefined, { alias: 'auItemClassName' });
+        /**
+         * CSS classes to add on the accordion-item header DOM element.
+         *
+         * @defaultValue `''`
+         */
+        this.itemHeaderClassName = input(undefined, { alias: 'auItemHeaderClassName' });
+        /**
+         * CSS classes to add on the accordion-item toggle button DOM element.
+         *
+         * @defaultValue `''`
+         */
+        this.itemButtonClassName = input(undefined, { alias: 'auItemButtonClassName' });
+        /**
+         * CSS classes to add on the accordion-item body container DOM element.
+         * The accordion-item body container is the DOM element on what the itemTransition is applied.
+         *
+         * @defaultValue `''`
+         */
+        this.itemBodyContainerClassName = input(undefined, { alias: 'auItemBodyContainerClassName' });
+        /**
+         * CSS classes to add on the accordion-item body DOM element.
+         *
+         * @defaultValue `''`
+         */
+        this.itemBodyClassName = input(undefined, { alias: 'auItemBodyClassName' });
+        /**
+         * The html tag to use for the accordion-item-header.
+         *
+         * @defaultValue `''`
+         */
+        this.itemHeadingTag = input(undefined, { alias: 'auItemHeadingTag' });
     }
     static { this.ɵfac = function AccordionDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccordionDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AccordionDirective, selectors: [["", "auAccordion", ""]], hostAttrs: [1, "accordion"], inputs: { closeOthers: [2, "auCloseOthers", "closeOthers", auBooleanAttribute], className: [0, "auClassName", "className"], itemDestroyOnHide: [2, "auItemDestroyOnHide", "itemDestroyOnHide", auBooleanAttribute], itemAnimated: [2, "auItemAnimated", "itemAnimated", auBooleanAttribute], itemTransition: [0, "auItemTransition", "itemTransition"], itemStructure: [0, "auItemStructure", "itemStructure"], itemClassName: [0, "auItemClassName", "itemClassName"], itemHeaderClassName: [0, "auItemHeaderClassName", "itemHeaderClassName"], itemButtonClassName: [0, "auItemButtonClassName", "itemButtonClassName"], itemBodyContainerClassName: [0, "auItemBodyContainerClassName", "itemBodyContainerClassName"], itemBodyClassName: [0, "auItemBodyClassName", "itemBodyClassName"], itemHeadingTag: [0, "auItemHeadingTag", "itemHeadingTag"] }, outputs: { itemShown: "auItemShown", itemHidden: "auItemHidden" }, exportAs: ["auAccordion"], standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature] }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: AccordionDirective, selectors: [["", "auAccordion", ""]], hostAttrs: [1, "accordion"], inputs: { closeOthers: [1, "auCloseOthers", "closeOthers"], className: [1, "auClassName", "className"], itemDestroyOnHide: [1, "auItemDestroyOnHide", "itemDestroyOnHide"], itemAnimated: [1, "auItemAnimated", "itemAnimated"], itemTransition: [1, "auItemTransition", "itemTransition"], itemStructure: [1, "auItemStructure", "itemStructure"], itemClassName: [1, "auItemClassName", "itemClassName"], itemHeaderClassName: [1, "auItemHeaderClassName", "itemHeaderClassName"], itemButtonClassName: [1, "auItemButtonClassName", "itemButtonClassName"], itemBodyContainerClassName: [1, "auItemBodyContainerClassName", "itemBodyContainerClassName"], itemBodyClassName: [1, "auItemBodyClassName", "itemBodyClassName"], itemHeadingTag: [1, "auItemHeadingTag", "itemHeadingTag"] }, outputs: { itemShown: "auItemShown", itemHidden: "auItemHidden" }, exportAs: ["auAccordion"], features: [i0.ɵɵInheritDefinitionFeature] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionDirective, [{
         type: Directive,
@@ -2462,49 +2798,7 @@ class AccordionDirective extends BaseWidgetDirective {
                     class: 'accordion',
                 },
             }]
-    }], () => [], { closeOthers: [{
-            type: Input,
-            args: [{ alias: 'auCloseOthers', transform: auBooleanAttribute }]
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], itemShown: [{
-            type: Output,
-            args: ['auItemShown']
-        }], itemHidden: [{
-            type: Output,
-            args: ['auItemHidden']
-        }], itemDestroyOnHide: [{
-            type: Input,
-            args: [{ alias: 'auItemDestroyOnHide', transform: auBooleanAttribute }]
-        }], itemAnimated: [{
-            type: Input,
-            args: [{ alias: 'auItemAnimated', transform: auBooleanAttribute }]
-        }], itemTransition: [{
-            type: Input,
-            args: ['auItemTransition']
-        }], itemStructure: [{
-            type: Input,
-            args: ['auItemStructure']
-        }], itemClassName: [{
-            type: Input,
-            args: ['auItemClassName']
-        }], itemHeaderClassName: [{
-            type: Input,
-            args: ['auItemHeaderClassName']
-        }], itemButtonClassName: [{
-            type: Input,
-            args: ['auItemButtonClassName']
-        }], itemBodyContainerClassName: [{
-            type: Input,
-            args: ['auItemBodyContainerClassName']
-        }], itemBodyClassName: [{
-            type: Input,
-            args: ['auItemBodyClassName']
-        }], itemHeadingTag: [{
-            type: Input,
-            args: ['auItemHeadingTag']
-        }] }); })();
+    }], () => [], null); })();
 
 /**
  * Retrieve a shallow copy of the default Slider config
@@ -2669,7 +2963,7 @@ class SliderLabelDirective {
         return true;
     }
     static { this.ɵfac = function SliderLabelDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SliderLabelDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SliderLabelDirective, selectors: [["ng-template", "auSliderLabel", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SliderLabelDirective, selectors: [["ng-template", "auSliderLabel", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderLabelDirective, [{
         type: Directive,
@@ -2688,27 +2982,28 @@ class SliderHandleDirective {
         return true;
     }
     static { this.ɵfac = function SliderHandleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SliderHandleDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SliderHandleDirective, selectors: [["ng-template", "auSliderHandle", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SliderHandleDirective, selectors: [["ng-template", "auSliderHandle", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderHandleDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auSliderHandle]', standalone: true }]
     }], null, null); })();
 class SliderDefaultHandleSlotComponent {
+    constructor() {
+        this.handle = viewChild.required('handle');
+    }
     static { this.ɵfac = function SliderDefaultHandleSlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SliderDefaultHandleSlotComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SliderDefaultHandleSlotComponent, selectors: [["ng-component"]], viewQuery: function SliderDefaultHandleSlotComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 7);
+            i0.ɵɵviewQuerySignal(ctx.handle, _c0$3, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.handle = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["handle", ""], ["auSliderHandle", ""], [3, "auUse"]], template: function SliderDefaultHandleSlotComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["handle", ""], ["auSliderHandle", ""], [3, "auUse"]], template: function SliderDefaultHandleSlotComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SliderDefaultHandleSlotComponent_ng_template_0_Template, 2, 6, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [UseDirective, SliderHandleDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderDefaultHandleSlotComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [UseDirective, SliderHandleDirective],
                 template: `
@@ -2717,11 +3012,8 @@ class SliderDefaultHandleSlotComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { handle: [{
-            type: ViewChild,
-            args: ['handle', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultHandleSlotComponent, { className: "SliderDefaultHandleSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 65 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultHandleSlotComponent, { className: "SliderDefaultHandleSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 63 }); })();
 /**
  * A constant representing the default slot handle for the slider component.
  */
@@ -2739,27 +3031,28 @@ class SliderStructureDirective {
         return true;
     }
     static { this.ɵfac = function SliderStructureDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SliderStructureDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SliderStructureDirective, selectors: [["ng-template", "auSliderStructure", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: SliderStructureDirective, selectors: [["ng-template", "auSliderStructure", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderStructureDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auSliderStructure]', standalone: true }]
     }], null, null); })();
 class SliderDefaultStructureSlotComponent {
+    constructor() {
+        this.structure = viewChild.required('structure');
+    }
     static { this.ɵfac = function SliderDefaultStructureSlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SliderDefaultStructureSlotComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SliderDefaultStructureSlotComponent, selectors: [["ng-component"]], viewQuery: function SliderDefaultStructureSlotComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c3$3, 7);
+            i0.ɵɵviewQuerySignal(ctx.structure, _c3$3, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.structure = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["structure", ""], ["auSliderStructure", ""], [3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function SliderDefaultStructureSlotComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["structure", ""], ["auSliderStructure", ""], [3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function SliderDefaultStructureSlotComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SliderDefaultStructureSlotComponent_ng_template_0_Template, 7, 3, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [SlotDirective, SliderStructureDirective, UseDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderDefaultStructureSlotComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, SliderStructureDirective, UseDirective],
                 template: `
@@ -2798,11 +3091,8 @@ class SliderDefaultStructureSlotComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { structure: [{
-            type: ViewChild,
-            args: ['structure', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultStructureSlotComponent, { className: "SliderDefaultStructureSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 127 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultStructureSlotComponent, { className: "SliderDefaultStructureSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 124 }); })();
 /**
  * Represents the default slot structure for the slider component.
  */
@@ -2832,11 +3122,101 @@ class SliderComponent extends BaseWidgetDirective {
                 useDirectiveForHost(widget.directives.sliderDirective);
             },
             slotTemplates: () => ({
-                structure: this.slotStructureFromContent?.templateRef,
-                handle: this.slotHandleFromContent?.templateRef,
-                label: this.slotLabelFromContent?.templateRef,
+                structure: this.slotStructureFromContent()?.templateRef,
+                handle: this.slotHandleFromContent()?.templateRef,
+                label: this.slotLabelFromContent()?.templateRef,
             }),
         }));
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        /**
+         * Minimum value that can be assigned to the slider
+         *
+         * @defaultValue `0`
+         */
+        this.min = input(undefined, { alias: 'auMin', transform: auNumberAttribute });
+        /**
+         * Maximum value that can be assigned to the slider
+         *
+         * @defaultValue `100`
+         */
+        this.max = input(undefined, { alias: 'auMax', transform: auNumberAttribute });
+        /**
+         * Unit value between slider steps
+         *
+         * @defaultValue `1`
+         */
+        this.stepSize = input(undefined, { alias: 'auStepSize', transform: auNumberAttribute });
+        /**
+         * Current slider values
+         *
+         * @defaultValue `[0]`
+         */
+        this.values = input(undefined, { alias: 'auValues' });
+        /**
+         * It `true` slider display is inversed
+         *
+         * @defaultValue `false`
+         */
+        this.rtl = input(undefined, { alias: 'auRtl', transform: auBooleanAttribute });
+        /**
+         * If `true` the value labels are displayed on the slider
+         *
+         * @defaultValue `true`
+         */
+        this.showValueLabels = input(undefined, { alias: 'auShowValueLabels', transform: auBooleanAttribute });
+        /**
+         * If `true` the min and max labels are displayed on the slider
+         *
+         * @defaultValue `true`
+         */
+        this.showMinMaxLabels = input(undefined, { alias: 'auShowMinMaxLabels', transform: auBooleanAttribute });
+        /**
+         * Return the value for the 'aria-label' attribute for the handle
+         * @param value - value of the handle
+         * @param sortedIndex - index of the handle in the sorted list
+         * @param index - index of the handle in the original list
+         *
+         * @defaultValue
+         * ```ts
+         * (value: number) => '' + value
+         * ```
+         */
+        this.ariaLabelHandle = input(undefined, { alias: 'auAriaLabelHandle' });
+        /**
+         * Return the value for the 'aria-valuetext' attribute for the handle
+         * @param value - value of the handle
+         * @param sortedIndex - index of the handle in the sorted list
+         * @param index - index of the handle in the original list
+         *
+         * @defaultValue
+         * ```ts
+         * (value: number) => '' + value
+         * ```
+         */
+        this.ariaValueText = input(undefined, { alias: 'auAriaValueText' });
+        /**
+         * If `true` slider value cannot be changed but the slider is still focusable
+         *
+         * @defaultValue `false`
+         */
+        this.readonly = input(undefined, { alias: 'auReadonly', transform: auBooleanAttribute });
+        /**
+         * If `true` slider value cannot be changed and the slider cannot be focused
+         *
+         * @defaultValue `false`
+         */
+        this.disabled = input(undefined, { alias: 'auDisabled', transform: auBooleanAttribute });
+        /**
+         * If `true` is vertically positioned otherwise it is horizontal
+         *
+         * @defaultValue `false`
+         */
+        this.vertical = input(undefined, { alias: 'auVertical', transform: auBooleanAttribute });
         /**
          * An event emitted when slider values are changed
          *
@@ -2847,7 +3227,27 @@ class SliderComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.valuesChange = new EventEmitter();
+        this.valuesChange = output({ alias: 'auValuesChange' });
+        /**
+         * Slot to change the default labels of the slider
+         *
+         * @defaultValue
+         * ```ts
+         * ({value}: SliderSlotLabelContext) => '' + value
+         * ```
+         */
+        this.label = input(undefined, { alias: 'auLabel' });
+        this.slotLabelFromContent = contentChild(SliderLabelDirective);
+        /**
+         * Slot to change the default display of the slider
+         */
+        this.structure = input(undefined, { alias: 'auStructure' });
+        this.slotStructureFromContent = contentChild(SliderStructureDirective);
+        /**
+         * Slot to change the handlers
+         */
+        this.handle = input(undefined, { alias: 'auHandle' });
+        this.slotHandleFromContent = contentChild(SliderHandleDirective);
         /**
          * Control value accessor methods
          */
@@ -2882,17 +3282,14 @@ class SliderComponent extends BaseWidgetDirective {
     }
     static { this.ɵfac = function SliderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SliderComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SliderComponent, selectors: [["", "auSlider", ""]], contentQueries: function SliderComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, SliderLabelDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, SliderStructureDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, SliderHandleDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotLabelFromContent, SliderLabelDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotStructureFromContent, SliderStructureDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotHandleFromContent, SliderHandleDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotLabelFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotHandleFromContent = _t.first);
+            i0.ɵɵqueryAdvance(3);
         } }, hostBindings: function SliderComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("blur", function SliderComponent_blur_HostBindingHandler() { return ctx.handleBlur(); });
-        } }, inputs: { className: [0, "auClassName", "className"], min: [2, "auMin", "min", auNumberAttribute], max: [2, "auMax", "max", auNumberAttribute], stepSize: [2, "auStepSize", "stepSize", auNumberAttribute], values: [0, "auValues", "values"], rtl: [2, "auRtl", "rtl", auBooleanAttribute], showValueLabels: [2, "auShowValueLabels", "showValueLabels", auBooleanAttribute], showMinMaxLabels: [2, "auShowMinMaxLabels", "showMinMaxLabels", auBooleanAttribute], ariaLabelHandle: [0, "auAriaLabelHandle", "ariaLabelHandle"], ariaValueText: [0, "auAriaValueText", "ariaValueText"], readonly: [2, "auReadonly", "readonly", auBooleanAttribute], disabled: [2, "auDisabled", "disabled", auBooleanAttribute], vertical: [2, "auVertical", "vertical", auBooleanAttribute], label: [0, "auLabel", "label"], structure: [0, "auStructure", "structure"], handle: [0, "auHandle", "handle"] }, outputs: { valuesChange: "auValuesChange" }, standalone: true, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }]), i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c8$1, decls: 1, vars: 6, consts: [[3, "auSlot", "auSlotProps"]], template: function SliderComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { className: [1, "auClassName", "className"], min: [1, "auMin", "min"], max: [1, "auMax", "max"], stepSize: [1, "auStepSize", "stepSize"], values: [1, "auValues", "values"], rtl: [1, "auRtl", "rtl"], showValueLabels: [1, "auShowValueLabels", "showValueLabels"], showMinMaxLabels: [1, "auShowMinMaxLabels", "showMinMaxLabels"], ariaLabelHandle: [1, "auAriaLabelHandle", "ariaLabelHandle"], ariaValueText: [1, "auAriaValueText", "ariaValueText"], readonly: [1, "auReadonly", "readonly"], disabled: [1, "auDisabled", "disabled"], vertical: [1, "auVertical", "vertical"], label: [1, "auLabel", "label"], structure: [1, "auStructure", "structure"], handle: [1, "auHandle", "handle"] }, outputs: { valuesChange: "auValuesChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }]), i0.ɵɵInheritDefinitionFeature], attrs: _c8$1, decls: 1, vars: 6, consts: [[3, "auSlot", "auSlotProps"]], template: function SliderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SliderComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("auSlot", ctx.state.structure())("auSlotProps", i0.ɵɵpureFunction3(2, _c9, ctx.state, ctx.api, ctx.directives));
@@ -2902,7 +3299,6 @@ class SliderComponent extends BaseWidgetDirective {
         type: Component,
         args: [{
                 selector: '[auSlider]',
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 encapsulation: ViewEncapsulation.None,
                 providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }],
@@ -2912,68 +3308,8 @@ class SliderComponent extends BaseWidgetDirective {
                 },
                 template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" /> `,
             }]
-    }], () => [], { className: [{
-            type: Input,
-            args: ['auClassName']
-        }], min: [{
-            type: Input,
-            args: [{ alias: 'auMin', transform: auNumberAttribute }]
-        }], max: [{
-            type: Input,
-            args: [{ alias: 'auMax', transform: auNumberAttribute }]
-        }], stepSize: [{
-            type: Input,
-            args: [{ alias: 'auStepSize', transform: auNumberAttribute }]
-        }], values: [{
-            type: Input,
-            args: ['auValues']
-        }], rtl: [{
-            type: Input,
-            args: [{ alias: 'auRtl', transform: auBooleanAttribute }]
-        }], showValueLabels: [{
-            type: Input,
-            args: [{ alias: 'auShowValueLabels', transform: auBooleanAttribute }]
-        }], showMinMaxLabels: [{
-            type: Input,
-            args: [{ alias: 'auShowMinMaxLabels', transform: auBooleanAttribute }]
-        }], ariaLabelHandle: [{
-            type: Input,
-            args: ['auAriaLabelHandle']
-        }], ariaValueText: [{
-            type: Input,
-            args: ['auAriaValueText']
-        }], readonly: [{
-            type: Input,
-            args: [{ alias: 'auReadonly', transform: auBooleanAttribute }]
-        }], disabled: [{
-            type: Input,
-            args: [{ alias: 'auDisabled', transform: auBooleanAttribute }]
-        }], vertical: [{
-            type: Input,
-            args: [{ alias: 'auVertical', transform: auBooleanAttribute }]
-        }], valuesChange: [{
-            type: Output,
-            args: ['auValuesChange']
-        }], label: [{
-            type: Input,
-            args: ['auLabel']
-        }], slotLabelFromContent: [{
-            type: ContentChild,
-            args: [SliderLabelDirective, { static: false }]
-        }], structure: [{
-            type: Input,
-            args: ['auStructure']
-        }], slotStructureFromContent: [{
-            type: ContentChild,
-            args: [SliderStructureDirective, { static: false }]
-        }], handle: [{
-            type: Input,
-            args: ['auHandle']
-        }], slotHandleFromContent: [{
-            type: ContentChild,
-            args: [SliderHandleDirective, { static: false }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderComponent, { className: "SliderComponent", filePath: "components/slider/slider.component.ts", lineNumber: 153 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderComponent, { className: "SliderComponent", filePath: "components/slider/slider.component.ts", lineNumber: 149 }); })();
 
 /**
  * Retrieve a shallow copy of the default Progressbar config
@@ -3025,7 +3361,7 @@ class ProgressbarBodyDirective {
         return true;
     }
     static { this.ɵfac = function ProgressbarBodyDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProgressbarBodyDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ProgressbarBodyDirective, selectors: [["ng-template", "auProgressbarBody", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ProgressbarBodyDirective, selectors: [["ng-template", "auProgressbarBody", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressbarBodyDirective, [{
         type: Directive,
@@ -3044,27 +3380,28 @@ class ProgressbarStructureDirective {
         return true;
     }
     static { this.ɵfac = function ProgressbarStructureDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProgressbarStructureDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ProgressbarStructureDirective, selectors: [["ng-template", "auProgressbarStructure", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ProgressbarStructureDirective, selectors: [["ng-template", "auProgressbarStructure", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressbarStructureDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auProgressbarStructure]', standalone: true }]
     }], null, null); })();
 class ProgressbarDefaultSlotsComponent {
+    constructor() {
+        this.structure = viewChild.required('structure');
+    }
     static { this.ɵfac = function ProgressbarDefaultSlotsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProgressbarDefaultSlotsComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProgressbarDefaultSlotsComponent, selectors: [["ng-component"]], viewQuery: function ProgressbarDefaultSlotsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$2, 7);
+            i0.ɵɵviewQuerySignal(ctx.structure, _c0$2, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.structure = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["structure", ""], ["auProgressbarStructure", ""], [1, "progress"], [1, "progress-bar", 3, "ngClass"], [3, "auSlot", "auSlotProps"]], template: function ProgressbarDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["structure", ""], ["auProgressbarStructure", ""], [1, "progress"], [1, "progress-bar", 3, "ngClass"], [3, "auSlot", "auSlotProps"]], template: function ProgressbarDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, ProgressbarDefaultSlotsComponent_ng_template_0_Template, 3, 15, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [NgClass, SlotDirective, ProgressbarStructureDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressbarDefaultSlotsComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [NgClass, SlotDirective, ProgressbarStructureDirective],
                 template: `
@@ -3083,11 +3420,8 @@ class ProgressbarDefaultSlotsComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { structure: [{
-            type: ViewChild,
-            args: ['structure', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressbarDefaultSlotsComponent, { className: "ProgressbarDefaultSlotsComponent", filePath: "components/progressbar/progressbar.component.ts", lineNumber: 63 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressbarDefaultSlotsComponent, { className: "ProgressbarDefaultSlotsComponent", filePath: "components/progressbar/progressbar.component.ts", lineNumber: 62 }); })();
 /**
  * Represents the default slot structure for the progress bar component.
  */
@@ -3108,28 +3442,101 @@ class ProgressbarComponent extends BaseWidgetDirective {
             },
             afterInit: (widget) => useDirectiveForHost(widget.directives.ariaDirective),
             slotTemplates: () => ({
-                structure: this.slotStructureFromContent?.templateRef,
-                children: this.slotDefaultFromContent?.templateRef,
+                structure: this.slotStructureFromContent()?.templateRef,
+                children: this.slotDefaultFromContent()?.templateRef,
             }),
-            slotChildren: () => this.slotChildren,
+            slotChildren: () => this.slotChildren(),
         }));
+        /**
+         * The aria label.
+         *
+         * @defaultValue `'Progressbar'`
+         */
+        this.ariaLabel = input(undefined, { alias: 'auAriaLabel' });
+        /**
+         * The minimum value.
+         *
+         * @defaultValue `0`
+         */
+        this.min = input(undefined, { alias: 'auMin', transform: auNumberAttribute });
+        /**
+         * The maximum value.
+         *
+         * @defaultValue `100`
+         */
+        this.max = input(undefined, { alias: 'auMax', transform: auNumberAttribute });
+        /**
+         * The current value.
+         *
+         * @defaultValue `0`
+         */
+        this.value = input(undefined, { alias: 'auValue', transform: auNumberAttribute });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        /**
+         * Label of the progress.
+         */
+        this.children = input(undefined, { alias: 'auChildren' });
+        this.slotDefaultFromContent = contentChild(ProgressbarBodyDirective);
+        /**
+         * Global template for the Progressbar.
+         */
+        this.structure = input(undefined, { alias: 'auStructure' });
+        this.slotStructureFromContent = contentChild(ProgressbarStructureDirective);
+        /**
+         * Height of the progressbar, can be any valid css height value.
+         *
+         * @defaultValue `''`
+         */
+        this.height = input(undefined, { alias: 'auHeight' });
+        /**
+         * If `true`, animates a striped progressbar.
+         * Takes effect only for browsers supporting CSS3 animations, and if `striped` is `true`.
+         *
+         * @defaultValue `false`
+         */
+        this.animated = input(undefined, { alias: 'auAnimated', transform: auBooleanAttribute });
+        /**
+         * If `true`, shows a striped progressbar.
+         *
+         * @defaultValue `false`
+         */
+        this.striped = input(undefined, { alias: 'auStriped', transform: auBooleanAttribute });
+        /**
+         * Return the value for the 'aria-valuetext' attribute.
+         * @param value - current value
+         * @param minimum - minimum value
+         * @param maximum - maximum value
+         *
+         * @defaultValue
+         * ```ts
+         * () => undefined
+         * ```
+         */
+        this.ariaValueTextFn = input(undefined, { alias: 'auAriaValueTextFn' });
+        /**
+         * Type of the progressbar, following bootstrap types.
+         */
+        this.type = input(undefined, { alias: 'auType' });
+        this.slotChildren = viewChild('content');
     }
     static { this.ɵfac = function ProgressbarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ProgressbarComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProgressbarComponent, selectors: [["", "auProgressbar", ""]], contentQueries: function ProgressbarComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, ProgressbarBodyDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, ProgressbarStructureDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotDefaultFromContent, ProgressbarBodyDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotStructureFromContent, ProgressbarStructureDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotDefaultFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
+            i0.ɵɵqueryAdvance(2);
         } }, viewQuery: function ProgressbarComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c2$2, 7);
+            i0.ɵɵviewQuerySignal(ctx.slotChildren, _c2$2, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotChildren = _t.first);
+            i0.ɵɵqueryAdvance();
         } }, hostVars: 2, hostBindings: function ProgressbarComponent_HostBindings(rf, ctx) { if (rf & 2) {
             i0.ɵɵclassMap(ctx.state.className());
-        } }, inputs: { ariaLabel: [0, "auAriaLabel", "ariaLabel"], min: [2, "auMin", "min", auNumberAttribute], max: [2, "auMax", "max", auNumberAttribute], value: [2, "auValue", "value", auNumberAttribute], className: [0, "auClassName", "className"], children: [0, "auChildren", "children"], structure: [0, "auStructure", "structure"], height: [0, "auHeight", "height"], animated: [2, "auAnimated", "animated", auBooleanAttribute], striped: [2, "auStriped", "striped", auBooleanAttribute], ariaValueTextFn: [0, "auAriaValueTextFn", "ariaValueTextFn"], type: [0, "auType", "type"] }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c3$2, ngContentSelectors: _c4$2, decls: 3, vars: 6, consts: [["content", ""], [3, "auSlot", "auSlotProps"]], template: function ProgressbarComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { ariaLabel: [1, "auAriaLabel", "ariaLabel"], min: [1, "auMin", "min"], max: [1, "auMax", "max"], value: [1, "auValue", "value"], className: [1, "auClassName", "className"], children: [1, "auChildren", "children"], structure: [1, "auStructure", "structure"], height: [1, "auHeight", "height"], animated: [1, "auAnimated", "animated"], striped: [1, "auStriped", "striped"], ariaValueTextFn: [1, "auAriaValueTextFn", "ariaValueTextFn"], type: [1, "auType", "type"] }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c3$2, ngContentSelectors: _c4$2, decls: 3, vars: 6, consts: [["content", ""], [3, "auSlot", "auSlotProps"]], template: function ProgressbarComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, ProgressbarComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, ProgressbarComponent_ng_template_2_Template, 0, 0, "ng-template", 1);
         } if (rf & 2) {
@@ -3141,7 +3548,6 @@ class ProgressbarComponent extends BaseWidgetDirective {
         type: Component,
         args: [{
                 selector: '[auProgressbar]',
-                standalone: true,
                 imports: [SlotDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 host: {
@@ -3152,53 +3558,8 @@ class ProgressbarComponent extends BaseWidgetDirective {
 		<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" />
 	`,
             }]
-    }], () => [], { ariaLabel: [{
-            type: Input,
-            args: ['auAriaLabel']
-        }], min: [{
-            type: Input,
-            args: [{ alias: 'auMin', transform: auNumberAttribute }]
-        }], max: [{
-            type: Input,
-            args: [{ alias: 'auMax', transform: auNumberAttribute }]
-        }], value: [{
-            type: Input,
-            args: [{ alias: 'auValue', transform: auNumberAttribute }]
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], children: [{
-            type: Input,
-            args: ['auChildren']
-        }], slotDefaultFromContent: [{
-            type: ContentChild,
-            args: [ProgressbarBodyDirective, { static: false }]
-        }], structure: [{
-            type: Input,
-            args: ['auStructure']
-        }], slotStructureFromContent: [{
-            type: ContentChild,
-            args: [ProgressbarStructureDirective, { static: false }]
-        }], height: [{
-            type: Input,
-            args: ['auHeight']
-        }], animated: [{
-            type: Input,
-            args: [{ alias: 'auAnimated', transform: auBooleanAttribute }]
-        }], striped: [{
-            type: Input,
-            args: [{ alias: 'auStriped', transform: auBooleanAttribute }]
-        }], ariaValueTextFn: [{
-            type: Input,
-            args: ['auAriaValueTextFn']
-        }], type: [{
-            type: Input,
-            args: ['auType']
-        }], slotChildren: [{
-            type: ViewChild,
-            args: ['content', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressbarComponent, { className: "ProgressbarComponent", filePath: "components/progressbar/progressbar.component.ts", lineNumber: 91 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressbarComponent, { className: "ProgressbarComponent", filePath: "components/progressbar/progressbar.component.ts", lineNumber: 89 }); })();
 
 /**
  * Retrieve a shallow copy of the default Toast config
@@ -3289,7 +3650,7 @@ class ToastBodyDirective {
         return true;
     }
     static { this.ɵfac = function ToastBodyDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ToastBodyDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ToastBodyDirective, selectors: [["ng-template", "auToastBody", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ToastBodyDirective, selectors: [["ng-template", "auToastBody", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastBodyDirective, [{
         type: Directive,
@@ -3307,7 +3668,7 @@ class ToastStructureDirective {
         return true;
     }
     static { this.ɵfac = function ToastStructureDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ToastStructureDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ToastStructureDirective, selectors: [["ng-template", "auToastStructure", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ToastStructureDirective, selectors: [["ng-template", "auToastStructure", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastStructureDirective, [{
         type: Directive,
@@ -3325,27 +3686,28 @@ class ToastHeaderDirective {
         return true;
     }
     static { this.ɵfac = function ToastHeaderDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ToastHeaderDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ToastHeaderDirective, selectors: [["ng-template", "auToastHeader", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ToastHeaderDirective, selectors: [["ng-template", "auToastHeader", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastHeaderDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auToastHeader]', standalone: true }]
     }], null, null); })();
 class ToastDefaultSlotsComponent {
+    constructor() {
+        this.structure = viewChild.required('structure');
+    }
     static { this.ɵfac = function ToastDefaultSlotsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ToastDefaultSlotsComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToastDefaultSlotsComponent, selectors: [["ng-component"]], viewQuery: function ToastDefaultSlotsComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$1, 7);
+            i0.ɵɵviewQuerySignal(ctx.structure, _c0$1, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.structure = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["structure", ""], ["auToastStructure", ""], [1, "toast-header"], [1, "toast-body"], [3, "auSlot", "auSlotProps"], [1, "btn-close", "btn-close-white", "me-2", "m-auto", 3, "auUse"], [1, "btn-close", "me-0", "ms-auto", 3, "auUse"]], template: function ToastDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["structure", ""], ["auToastStructure", ""], [1, "toast-header"], [1, "toast-body"], [3, "auSlot", "auSlotProps"], [1, "btn-close", "btn-close-white", "me-2", "m-auto", 3, "auUse"], [1, "btn-close", "me-0", "ms-auto", 3, "auUse"]], template: function ToastDefaultSlotsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, ToastDefaultSlotsComponent_ng_template_0_Template, 4, 8, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [SlotDirective, ToastStructureDirective, UseDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastDefaultSlotsComponent, [{
         type: Component,
         args: [{
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, ToastStructureDirective, UseDirective],
                 template: ` <ng-template auToastStructure #structure let-state="state" let-api="api" let-directives="directives">
@@ -3365,11 +3727,8 @@ class ToastDefaultSlotsComponent {
 		}
 	</ng-template>`,
             }]
-    }], null, { structure: [{
-            type: ViewChild,
-            args: ['structure', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastDefaultSlotsComponent, { className: "ToastDefaultSlotsComponent", filePath: "components/toast/toast.component.ts", lineNumber: 84 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastDefaultSlotsComponent, { className: "ToastDefaultSlotsComponent", filePath: "components/toast/toast.component.ts", lineNumber: 72 }); })();
 /**
  * Represents the default slot structure for the toast component.
  */
@@ -3393,12 +3752,84 @@ class ToastComponent extends BaseWidgetDirective {
                 onHidden: () => this.hidden.emit(),
             },
             slotTemplates: () => ({
-                children: this.slotDefaultFromContent?.templateRef,
-                structure: this.slotStructureFromContent?.templateRef,
-                header: this.slotHeaderFromContent?.templateRef,
+                children: this.slotDefaultFromContent()?.templateRef,
+                structure: this.slotStructureFromContent()?.templateRef,
+                header: this.slotHeaderFromContent()?.templateRef,
             }),
-            slotChildren: () => this.slotChildren,
+            slotChildren: () => this.slotChildren(),
         }));
+        /**
+         * 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.
+         *
+         * @defaultValue `true`
+         */
+        this.dismissible = input(undefined, { alias: 'auDismissible', transform: auBooleanAttribute });
+        /**
+         * The transition function will be executed when the alert is displayed or hidden.
+         *
+         * Depending on the value of `animatedOnInit`, the animation can be optionally skipped during the showing process.
+         *
+         * @defaultValue `fadeTransition`
+         */
+        this.transition = input(undefined, { alias: 'auTransition' });
+        /**
+         * If `true` the alert is visible to the user
+         *
+         * @defaultValue `true`
+         */
+        this.visible = input(undefined, { alias: 'auVisible', transform: auBooleanAttribute });
+        /**
+         * If `true`, alert opening will be animated.
+         *
+         * Animation is triggered  when the `.open()` function is called
+         * or the visible prop is changed
+         *
+         * @defaultValue `false`
+         */
+        this.animatedOnInit = input(undefined, { alias: 'auAnimatedOnInit', transform: auBooleanAttribute });
+        /**
+         * If `true`, alert closing will be animated.
+         *
+         * Animation is triggered  when clicked on the close button (×),
+         * via the `.close()` function or the visible prop is changed
+         *
+         * @defaultValue `true`
+         */
+        this.animated = input(undefined, { alias: 'auAnimated', transform: auBooleanAttribute });
+        /**
+         * If `true` automatically hides the toast after the delay.
+         *
+         * @defaultValue `true`
+         */
+        this.autoHide = input(undefined, { alias: 'auAutoHide', transform: auBooleanAttribute });
+        /**
+         * Delay in milliseconds before hiding the toast.
+         *
+         * @defaultValue `5000`
+         */
+        this.delay = input(undefined, { alias: 'auDelay', transform: auNumberAttribute });
+        /**
+         * Accessibility close button label
+         *
+         * @defaultValue `'Close'`
+         */
+        this.ariaCloseButtonLabel = input(undefined, { alias: 'auAriaCloseButtonLabel' });
+        /**
+         * Template for the toast content
+         */
+        this.children = input(undefined, { alias: 'auChildren' });
+        this.slotDefaultFromContent = contentChild(ToastBodyDirective);
+        /**
+         * Global template for the toast component
+         */
+        this.structure = input(undefined, { alias: 'auStructure' });
+        this.slotStructureFromContent = contentChild(ToastStructureDirective);
+        /**
+         * Header template for the toast component
+         */
+        this.header = input(undefined, { alias: 'auHeader' });
+        this.slotHeaderFromContent = contentChild(ToastHeaderDirective);
         /**
          * Callback called when the alert visibility changed.
          *
@@ -3407,7 +3838,7 @@ class ToastComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.visibleChange = new EventEmitter();
+        this.visibleChange = output({ alias: 'auVisibleChange' });
         /**
          * Callback called when the alert is hidden.
          *
@@ -3416,7 +3847,7 @@ class ToastComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.hidden = new EventEmitter();
+        this.hidden = output({ alias: 'auHidden' });
         /**
          * Callback called when the alert is shown.
          *
@@ -3425,24 +3856,27 @@ class ToastComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.shown = new EventEmitter();
+        this.shown = output({ alias: 'auShown' });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        this.slotChildren = viewChild('content');
     }
     static { this.ɵfac = function ToastComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ToastComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToastComponent, selectors: [["", "auToast", ""]], contentQueries: function ToastComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, ToastBodyDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, ToastStructureDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, ToastHeaderDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotDefaultFromContent, ToastBodyDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotStructureFromContent, ToastStructureDirective, 5);
+            i0.ɵɵcontentQuerySignal(dirIndex, ctx.slotHeaderFromContent, ToastHeaderDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotDefaultFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotHeaderFromContent = _t.first);
+            i0.ɵɵqueryAdvance(3);
         } }, viewQuery: function ToastComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c2$1, 7);
+            i0.ɵɵviewQuerySignal(ctx.slotChildren, _c2$1, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotChildren = _t.first);
-        } }, inputs: { dismissible: [2, "auDismissible", "dismissible", auBooleanAttribute], transition: [0, "auTransition", "transition"], visible: [2, "auVisible", "visible", auBooleanAttribute], animatedOnInit: [2, "auAnimatedOnInit", "animatedOnInit", auBooleanAttribute], animated: [2, "auAnimated", "animated", auBooleanAttribute], autoHide: [2, "auAutoHide", "autoHide", auBooleanAttribute], delay: [2, "auDelay", "delay", auNumberAttribute], ariaCloseButtonLabel: [0, "auAriaCloseButtonLabel", "ariaCloseButtonLabel"], children: [0, "auChildren", "children"], structure: [0, "auStructure", "structure"], header: [0, "auHeader", "header"], className: [0, "auClassName", "className"] }, outputs: { visibleChange: "auVisibleChange", hidden: "auHidden", shown: "auShown" }, standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c3$1, ngContentSelectors: _c4$1, decls: 3, vars: 1, consts: [["content", ""], [1, "toast", 3, "d-flex", "toast-dismissible", "auUseMulti"], [1, "toast", 3, "auUseMulti"], [3, "auSlot", "auSlotProps"]], template: function ToastComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, inputs: { dismissible: [1, "auDismissible", "dismissible"], transition: [1, "auTransition", "transition"], visible: [1, "auVisible", "visible"], animatedOnInit: [1, "auAnimatedOnInit", "animatedOnInit"], animated: [1, "auAnimated", "animated"], autoHide: [1, "auAutoHide", "autoHide"], delay: [1, "auDelay", "delay"], ariaCloseButtonLabel: [1, "auAriaCloseButtonLabel", "ariaCloseButtonLabel"], children: [1, "auChildren", "children"], structure: [1, "auStructure", "structure"], header: [1, "auHeader", "header"], className: [1, "auClassName", "className"] }, outputs: { visibleChange: "auVisibleChange", hidden: "auHidden", shown: "auShown" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c3$1, ngContentSelectors: _c4$1, decls: 3, vars: 1, consts: [["content", ""], [1, "toast", 3, "d-flex", "toast-dismissible", "auUseMulti"], [1, "toast", 3, "auUseMulti"], [3, "auSlot", "auSlotProps"]], template: function ToastComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, ToastComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, ToastComponent_Conditional_2_Template, 2, 15, "div", 1);
         } if (rf & 2) {
@@ -3454,7 +3888,6 @@ class ToastComponent extends BaseWidgetDirective {
         type: Component,
         args: [{
                 selector: '[auToast]',
-                standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, UseMultiDirective],
                 template: ` <ng-template #content>
@@ -3471,65 +3904,8 @@ class ToastComponent extends BaseWidgetDirective {
 			</div>
 		}`,
             }]
-    }], () => [], { dismissible: [{
-            type: Input,
-            args: [{ alias: 'auDismissible', transform: auBooleanAttribute }]
-        }], transition: [{
-            type: Input,
-            args: ['auTransition']
-        }], visible: [{
-            type: Input,
-            args: [{ alias: 'auVisible', transform: auBooleanAttribute }]
-        }], animatedOnInit: [{
-            type: Input,
-            args: [{ alias: 'auAnimatedOnInit', transform: auBooleanAttribute }]
-        }], animated: [{
-            type: Input,
-            args: [{ alias: 'auAnimated', transform: auBooleanAttribute }]
-        }], autoHide: [{
-            type: Input,
-            args: [{ alias: 'auAutoHide', transform: auBooleanAttribute }]
-        }], delay: [{
-            type: Input,
-            args: [{ alias: 'auDelay', transform: auNumberAttribute }]
-        }], ariaCloseButtonLabel: [{
-            type: Input,
-            args: ['auAriaCloseButtonLabel']
-        }], children: [{
-            type: Input,
-            args: ['auChildren']
-        }], slotDefaultFromContent: [{
-            type: ContentChild,
-            args: [ToastBodyDirective, { static: false }]
-        }], structure: [{
-            type: Input,
-            args: ['auStructure']
-        }], slotStructureFromContent: [{
-            type: ContentChild,
-            args: [ToastStructureDirective, { static: false }]
-        }], header: [{
-            type: Input,
-            args: ['auHeader']
-        }], slotHeaderFromContent: [{
-            type: ContentChild,
-            args: [ToastHeaderDirective, { static: false }]
-        }], visibleChange: [{
-            type: Output,
-            args: ['auVisibleChange']
-        }], hidden: [{
-            type: Output,
-            args: ['auHidden']
-        }], shown: [{
-            type: Output,
-            args: ['auShown']
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], slotChildren: [{
-            type: ViewChild,
-            args: ['content', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastComponent, { className: "ToastComponent", filePath: "components/toast/toast.component.ts", lineNumber: 117 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastComponent, { className: "ToastComponent", filePath: "components/toast/toast.component.ts", lineNumber: 104 }); })();
 
 /**
  * Directive to control the collapse behavior of an element.
@@ -3548,6 +3924,42 @@ class CollapseDirective extends BaseWidgetDirective {
                 useDirectiveForHost(widget.directives.collapseDirective);
             },
         }));
+        /**
+         * If `true`, collapse opening will be animated at init time.
+         *
+         * @defaultValue `false`
+         */
+        this.animatedOnInit = input(undefined, { alias: 'auAnimatedOnInit', transform: auBooleanAttribute });
+        /**
+         * If `true`, collapse closing and opening will be animated.
+         *
+         * @defaultValue `true`
+         */
+        this.animated = input(undefined, { alias: 'auAnimated', transform: auBooleanAttribute });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        /**
+         * If `true`, collapse will be done horizontally.
+         *
+         * @defaultValue `false`
+         */
+        this.horizontal = input(undefined, { alias: 'auHorizontal', transform: auBooleanAttribute });
+        /**
+         * If `true` the collapse is visible to the user
+         *
+         * @defaultValue `true`
+         */
+        this.visible = input(undefined, { alias: 'auVisible', transform: auBooleanAttribute });
+        /**
+         * id of the collapse
+         *
+         * @defaultValue `''`
+         */
+        this.id = input(undefined, { alias: 'auId' });
         /**
          * Callback called when the collapse visibility changed.
          *
@@ -3555,8 +3967,9 @@ class CollapseDirective extends BaseWidgetDirective {
          * ```ts
          * () => {}
          * ```
+         * @param visible - The new visibility state of the collapse.
          */
-        this.visibleChange = new EventEmitter();
+        this.visibleChange = output({ alias: 'auVisibleChange' });
         /**
          * Callback called when the collapse is hidden.
          *
@@ -3565,7 +3978,7 @@ class CollapseDirective extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.hidden = new EventEmitter();
+        this.hidden = output({ alias: 'auHidden' });
         /**
          * Callback called when the collapse is shown.
          *
@@ -3574,10 +3987,10 @@ class CollapseDirective extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.shown = new EventEmitter();
+        this.shown = output({ alias: 'auShown' });
     }
     static { this.ɵfac = function CollapseDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapseDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CollapseDirective, selectors: [["", "auCollapse", ""]], inputs: { animatedOnInit: [2, "auAnimatedOnInit", "animatedOnInit", auBooleanAttribute], animated: [2, "auAnimated", "animated", auBooleanAttribute], className: [0, "auClassName", "className"], horizontal: [2, "auHorizontal", "horizontal", auBooleanAttribute], visible: [2, "auVisible", "visible", auBooleanAttribute], id: [0, "auId", "id"] }, outputs: { visibleChange: "auVisibleChange", hidden: "auHidden", shown: "auShown" }, exportAs: ["auCollapse"], standalone: true, features: [i0.ɵɵInputTransformsFeature, i0.ɵɵInheritDefinitionFeature] }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: CollapseDirective, selectors: [["", "auCollapse", ""]], inputs: { animatedOnInit: [1, "auAnimatedOnInit", "animatedOnInit"], animated: [1, "auAnimated", "animated"], className: [1, "auClassName", "className"], horizontal: [1, "auHorizontal", "horizontal"], visible: [1, "auVisible", "visible"], id: [1, "auId", "id"] }, outputs: { visibleChange: "auVisibleChange", hidden: "auHidden", shown: "auShown" }, exportAs: ["auCollapse"], features: [i0.ɵɵInheritDefinitionFeature] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollapseDirective, [{
         type: Directive,
@@ -3586,34 +3999,7 @@ class CollapseDirective extends BaseWidgetDirective {
                 standalone: true,
                 exportAs: 'auCollapse',
             }]
-    }], () => [], { animatedOnInit: [{
-            type: Input,
-            args: [{ alias: 'auAnimatedOnInit', transform: auBooleanAttribute }]
-        }], animated: [{
-            type: Input,
-            args: [{ alias: 'auAnimated', transform: auBooleanAttribute }]
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], horizontal: [{
-            type: Input,
-            args: [{ alias: 'auHorizontal', transform: auBooleanAttribute }]
-        }], visible: [{
-            type: Input,
-            args: [{ alias: 'auVisible', transform: auBooleanAttribute }]
-        }], id: [{
-            type: Input,
-            args: ['auId']
-        }], visibleChange: [{
-            type: Output,
-            args: ['auVisibleChange']
-        }], hidden: [{
-            type: Output,
-            args: ['auHidden']
-        }], shown: [{
-            type: Output,
-            args: ['auShown']
-        }] }); })();
+    }], () => [], null); })();
 
 /**
  * Retrieve a shallow copy of the default collapse config
@@ -3756,23 +4142,25 @@ class TreeStructureDirective {
         return true;
     }
     static { this.ɵfac = function TreeStructureDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeStructureDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TreeStructureDirective, selectors: [["ng-template", "auTreeStructure", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TreeStructureDirective, selectors: [["ng-template", "auTreeStructure", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeStructureDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auTreeStructure]', standalone: true }]
     }], null, null); })();
 class TreeDefaultStructureSlotComponent {
+    constructor() {
+        this.structure = viewChild.required('structure');
+    }
     trackNode(index, node) {
         return node.label + node.level + index;
     }
     static { this.ɵfac = function TreeDefaultStructureSlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeDefaultStructureSlotComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeDefaultStructureSlotComponent, selectors: [["ng-component"]], viewQuery: function TreeDefaultStructureSlotComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0, 7);
+            i0.ɵɵviewQuerySignal(ctx.structure, _c0, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.structure = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["structure", ""], ["auTreeStructure", ""], ["role", "tree", 3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function TreeDefaultStructureSlotComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["structure", ""], ["auTreeStructure", ""], ["role", "tree", 3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function TreeDefaultStructureSlotComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, TreeDefaultStructureSlotComponent_ng_template_0_Template, 3, 4, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [UseDirective, TreeStructureDirective, SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
@@ -3792,11 +4180,8 @@ class TreeDefaultStructureSlotComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { structure: [{
-            type: ViewChild,
-            args: ['structure', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultStructureSlotComponent, { className: "TreeDefaultStructureSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 45 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultStructureSlotComponent, { className: "TreeDefaultStructureSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 34 }); })();
 /**
  * A constant representing the default slot for tree structure.
  */
@@ -3814,20 +4199,22 @@ class TreeItemToggleDirective {
         return true;
     }
     static { this.ɵfac = function TreeItemToggleDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeItemToggleDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TreeItemToggleDirective, selectors: [["ng-template", "auTreeItemToggle", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TreeItemToggleDirective, selectors: [["ng-template", "auTreeItemToggle", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeItemToggleDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auTreeItemToggle]', standalone: true }]
     }], null, null); })();
 class TreeDefaultItemToggleSlotComponent {
+    constructor() {
+        this.toggle = viewChild.required('toggle');
+    }
     static { this.ɵfac = function TreeDefaultItemToggleSlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeDefaultItemToggleSlotComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeDefaultItemToggleSlotComponent, selectors: [["ng-component"]], viewQuery: function TreeDefaultItemToggleSlotComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c2, 7);
+            i0.ɵɵviewQuerySignal(ctx.toggle, _c2, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.toggle = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["toggle", ""], ["auTreeItemToggle", ""], [3, "auUse"], [1, "au-tree-expand-icon-placeholder"], [1, "au-tree-expand-icon-svg"]], template: function TreeDefaultItemToggleSlotComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["toggle", ""], ["auTreeItemToggle", ""], [3, "auUse"], [1, "au-tree-expand-icon-placeholder"], [1, "au-tree-expand-icon-svg"]], template: function TreeDefaultItemToggleSlotComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, TreeDefaultItemToggleSlotComponent_ng_template_0_Template, 2, 1, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [UseDirective, TreeItemToggleDirective], encapsulation: 2, changeDetection: 0 }); }
 }
@@ -3849,11 +4236,8 @@ class TreeDefaultItemToggleSlotComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { toggle: [{
-            type: ViewChild,
-            args: ['toggle', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemToggleSlotComponent, { className: "TreeDefaultItemToggleSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 87 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemToggleSlotComponent, { className: "TreeDefaultItemToggleSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 76 }); })();
 /**
  * A constant representing the default slot for tree item toggle.
  */
@@ -3871,20 +4255,22 @@ class TreeItemContentDirective {
         return true;
     }
     static { this.ɵfac = function TreeItemContentDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeItemContentDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TreeItemContentDirective, selectors: [["ng-template", "auTreeItemContent", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TreeItemContentDirective, selectors: [["ng-template", "auTreeItemContent", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeItemContentDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auTreeItemContent]', standalone: true }]
     }], null, null); })();
 class TreeDefaultItemContentSlotComponent {
+    constructor() {
+        this.treeItemContent = viewChild.required('treeItemContent');
+    }
     static { this.ɵfac = function TreeDefaultItemContentSlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeDefaultItemContentSlotComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeDefaultItemContentSlotComponent, selectors: [["ng-component"]], viewQuery: function TreeDefaultItemContentSlotComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c5, 7);
+            i0.ɵɵviewQuerySignal(ctx.treeItemContent, _c5, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.treeItemContent = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["treeItemContent", ""], ["auTreeItem", ""], [1, "au-tree-item"], [3, "auSlot", "auSlotProps"]], template: function TreeDefaultItemContentSlotComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["treeItemContent", ""], ["auTreeItem", ""], [1, "au-tree-item"], [3, "auSlot", "auSlotProps"]], template: function TreeDefaultItemContentSlotComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, TreeDefaultItemContentSlotComponent_ng_template_0_Template, 3, 8, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
@@ -3903,11 +4289,8 @@ class TreeDefaultItemContentSlotComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { treeItemContent: [{
-            type: ViewChild,
-            args: ['treeItemContent', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemContentSlotComponent, { className: "TreeDefaultItemContentSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 122 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemContentSlotComponent, { className: "TreeDefaultItemContentSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 111 }); })();
 /**
  * A constant representing the default slot for tree item.
  */
@@ -3925,23 +4308,25 @@ class TreeItemDirective {
         return true;
     }
     static { this.ɵfac = function TreeItemDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeItemDirective)(); }; }
-    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TreeItemDirective, selectors: [["ng-template", "auTreeItem", ""]], standalone: true }); }
+    static { this.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: TreeItemDirective, selectors: [["ng-template", "auTreeItem", ""]] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeItemDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auTreeItem]', standalone: true }]
     }], null, null); })();
 class TreeDefaultItemSlotComponent {
+    constructor() {
+        this.treeItem = viewChild.required('treeItem');
+    }
     trackNode(index, node) {
         return node.label + node.level + index;
     }
     static { this.ɵfac = function TreeDefaultItemSlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeDefaultItemSlotComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeDefaultItemSlotComponent, selectors: [["ng-component"]], viewQuery: function TreeDefaultItemSlotComponent_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c6, 7);
+            i0.ɵɵviewQuerySignal(ctx.treeItem, _c6, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.treeItem = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["treeItem", ""], ["auTreeItem", ""], [3, "auUse"], [3, "auSlot", "auSlotProps"], ["role", "group"]], template: function TreeDefaultItemSlotComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance();
+        } }, decls: 2, vars: 0, consts: [["treeItem", ""], ["auTreeItem", ""], [3, "auUse"], [3, "auSlot", "auSlotProps"], ["role", "group"]], template: function TreeDefaultItemSlotComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, TreeDefaultItemSlotComponent_ng_template_0_Template, 3, 14, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [UseDirective, SlotDirective, TreeItemDirective], encapsulation: 2, changeDetection: 0 }); }
 }
@@ -3966,11 +4351,8 @@ class TreeDefaultItemSlotComponent {
 		</ng-template>
 	`,
             }]
-    }], null, { treeItem: [{
-            type: ViewChild,
-            args: ['treeItem', { static: true }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemSlotComponent, { className: "TreeDefaultItemSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 166 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemSlotComponent, { className: "TreeDefaultItemSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 155 }); })();
 /**
  * A constant representing the default slot for tree item.
  */
@@ -3995,12 +4377,51 @@ class TreeComponent extends BaseWidgetDirective {
                 onExpandToggle: (item) => this.expandToggle.emit(item),
             },
             slotTemplates: () => ({
-                structure: this.slotStructureFromContent?.templateRef,
-                item: this.slotItemFromContent?.templateRef,
-                itemContent: this.slotItemContentFromContent?.templateRef,
-                itemToggle: this.slotItemToggleFromContent?.templateRef,
+                structure: this.slotStructureFromContent()?.templateRef,
+                item: this.slotItemFromContent()?.templateRef,
+                itemContent: this.slotItemContentFromContent()?.templateRef,
+                itemToggle: this.slotItemToggleFromContent()?.templateRef,
             }),
         }));
+        /**
+         * Optional accessibility label for the tree if there is no explicit label
+         *
+         * @defaultValue `''`
+         */
+        this.ariaLabel = input(undefined, { alias: 'auAriaLabel' });
+        /**
+         * Array of the tree nodes to display
+         *
+         * @defaultValue `[]`
+         */
+        this.nodes = input(undefined, { alias: 'auNodes' });
+        /**
+         * CSS classes to be applied on the widget main container
+         *
+         * @defaultValue `''`
+         */
+        this.className = input(undefined, { alias: 'auClassName' });
+        /**
+         * Retrieves expand items of the TreeItem
+         *
+         * @param node - HTML element that is representing the expand item
+         *
+         * @defaultValue
+         * ```ts
+         * (node: HTMLElement) => node.querySelectorAll('button')
+         * ```
+         */
+        this.navSelector = input(undefined, { alias: 'auNavSelector' });
+        /**
+         * Return the value for the 'aria-label' attribute of the toggle
+         * @param label - tree item label
+         *
+         * @defaultValue
+         * ```ts
+         * (label: string) => `Toggle ${label}`
+         * ```
+         */
+        this.ariaLabelToggleFn = input(undefined, { alias: 'auAriaLabelToggleFn' });
         /**
          * An event emitted when the user toggles the expand of the TreeItem.
          *
@@ -4011,21 +4432,37 @@ class TreeComponent extends BaseWidgetDirective {
          * () => {}
          * ```
          */
-        this.expandToggle = new EventEmitter();
+        this.expandToggle = output({ alias: 'auExpandToggle' });
+        /**
+         * Slot to change the default tree item content
+         */
+        this.itemContent = input(undefined, { alias: 'auItemContent' });
+        this.slotItemContentFromContent = viewChild(TreeItemContentDirective);
+        /**
+         * Slot to change the default display of the tree
+         */
+        this.structure = input(undefined, { alias: 'auStructure' });
+        this.slotStructureFromContent = viewChild(TreeStructureDirective);
+        /**
+         * Slot to change the default tree item toggle
+         */
+        this.itemToggle = input(undefined, { alias: 'auItemToggle' });
+        this.slotItemToggleFromContent = viewChild(TreeItemToggleDirective);
+        /**
+         * Slot to change the default tree item
+         */
+        this.item = input(undefined, { alias: 'auItem' });
+        this.slotItemFromContent = viewChild(TreeItemDirective);
     }
     static { this.ɵfac = function TreeComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TreeComponent)(); }; }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeComponent, selectors: [["", "auTree", ""]], contentQueries: function TreeComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
-            i0.ɵɵcontentQuery(dirIndex, TreeItemContentDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, TreeStructureDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, TreeItemToggleDirective, 5);
-            i0.ɵɵcontentQuery(dirIndex, TreeItemDirective, 5);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TreeComponent, selectors: [["", "auTree", ""]], viewQuery: function TreeComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.slotItemContentFromContent, TreeItemContentDirective, 5);
+            i0.ɵɵviewQuerySignal(ctx.slotStructureFromContent, TreeStructureDirective, 5);
+            i0.ɵɵviewQuerySignal(ctx.slotItemToggleFromContent, TreeItemToggleDirective, 5);
+            i0.ɵɵviewQuerySignal(ctx.slotItemFromContent, TreeItemDirective, 5);
         } if (rf & 2) {
-            let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotItemContentFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotItemToggleFromContent = _t.first);
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotItemFromContent = _t.first);
-        } }, inputs: { ariaLabel: [0, "auAriaLabel", "ariaLabel"], nodes: [0, "auNodes", "nodes"], className: [0, "auClassName", "className"], navSelector: [0, "auNavSelector", "navSelector"], ariaLabelToggleFn: [0, "auAriaLabelToggleFn", "ariaLabelToggleFn"], item: [0, "auItemContent", "item"], structure: [0, "auStructure", "structure"], toggle: [0, "auToggle", "toggle"], root: [0, "auItem", "root"] }, outputs: { expandToggle: "auExpandToggle" }, standalone: true, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵStandaloneFeature], attrs: _c7, decls: 1, vars: 6, consts: [[3, "auSlot", "auSlotProps"]], template: function TreeComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵqueryAdvance(4);
+        } }, inputs: { ariaLabel: [1, "auAriaLabel", "ariaLabel"], nodes: [1, "auNodes", "nodes"], className: [1, "auClassName", "className"], navSelector: [1, "auNavSelector", "navSelector"], ariaLabelToggleFn: [1, "auAriaLabelToggleFn", "ariaLabelToggleFn"], itemContent: [1, "auItemContent", "itemContent"], structure: [1, "auStructure", "structure"], itemToggle: [1, "auItemToggle", "itemToggle"], item: [1, "auItem", "item"] }, outputs: { expandToggle: "auExpandToggle" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c7, decls: 1, vars: 6, consts: [[3, "auSlot", "auSlotProps"]], template: function TreeComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, TreeComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("auSlot", ctx.state.structure())("auSlotProps", i0.ɵɵpureFunction3(2, _c8, ctx.state, ctx.api, ctx.directives));
@@ -4040,50 +4477,8 @@ class TreeComponent extends BaseWidgetDirective {
                 imports: [SlotDirective],
                 template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" /> `,
             }]
-    }], () => [], { ariaLabel: [{
-            type: Input,
-            args: ['auAriaLabel']
-        }], nodes: [{
-            type: Input,
-            args: ['auNodes']
-        }], className: [{
-            type: Input,
-            args: ['auClassName']
-        }], navSelector: [{
-            type: Input,
-            args: ['auNavSelector']
-        }], ariaLabelToggleFn: [{
-            type: Input,
-            args: ['auAriaLabelToggleFn']
-        }], expandToggle: [{
-            type: Output,
-            args: ['auExpandToggle']
-        }], item: [{
-            type: Input,
-            args: ['auItemContent']
-        }], slotItemContentFromContent: [{
-            type: ContentChild,
-            args: [TreeItemContentDirective, { static: false }]
-        }], structure: [{
-            type: Input,
-            args: ['auStructure']
-        }], slotStructureFromContent: [{
-            type: ContentChild,
-            args: [TreeStructureDirective, { static: false }]
-        }], toggle: [{
-            type: Input,
-            args: ['auToggle']
-        }], slotItemToggleFromContent: [{
-            type: ContentChild,
-            args: [TreeItemToggleDirective, { static: false }]
-        }], root: [{
-            type: Input,
-            args: ['auItem']
-        }], slotItemFromContent: [{
-            type: ContentChild,
-            args: [TreeItemDirective, { static: false }]
-        }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeComponent, { className: "TreeComponent", filePath: "components/tree/tree.component.ts", lineNumber: 191 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeComponent, { className: "TreeComponent", filePath: "components/tree/tree.component.ts", lineNumber: 180 }); })();
 
 /* istanbul ignore next */
 const components = [
@@ -4272,7 +4667,7 @@ class ModalService {
                 if (prop.startsWith('on')) {
                     const eventName = `${prop[2].toLowerCase()}${prop.substring(3)}`;
                     const eventEmitter = component.instance[eventName];
-                    if (eventEmitter instanceof EventEmitter) {
+                    if (eventEmitter instanceof OutputEmitterRef) {
                         subscriptions.push(eventEmitter.subscribe(value));
                     }
                 }