@agnos-ui/angular-bootstrap 0.4.4 → 0.5.0-next.0

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

@@ -1,9 +1,8 @@
-import { widgetsConfigFactory, SlotDirective, UseDirective, ComponentTemplate, BaseWidgetDirective, auBooleanAttribute, UseMultiDirective, ContentAsSlotDirective, auNumberAttribute, useDirectiveForHost } from '@agnos-ui/angular-headless';
+import { widgetsConfigFactory, SlotDirective, UseDirective, ComponentTemplate, BaseWidgetDirective, auBooleanAttribute, UseMultiDirective, auNumberAttribute, useDirectiveForHost } 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, NgZone, NgModule, Injector, ApplicationRef, createComponent, EnvironmentInjector, Injectable } 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 { getModalDefaultConfig, createModal, modalOutsideClick, modalCloseButtonClick } from '@agnos-ui/core-bootstrap/components/modal';
-import { writable } from '@amadeus-it-group/tansu';
 import { getPaginationDefaultConfig, createPagination } from '@agnos-ui/core-bootstrap/components/pagination';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { getRatingDefaultConfig, createRating } from '@agnos-ui/core-bootstrap/components/rating';
@@ -11,10 +10,10 @@ import { getSelectDefaultConfig, createSelect } from '@agnos-ui/core-bootstrap/c
 import { getAlertDefaultConfig, createAlert } from '@agnos-ui/core-bootstrap/components/alert';
 import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { getAccordionDefaultConfig, createAccordionItem, createAccordion, factoryCreateAccordion } from '@agnos-ui/core-bootstrap/components/accordion';
-import { take } from 'rxjs';
 import { getSliderDefaultConfig, createSlider } from '@agnos-ui/core-bootstrap/components/slider';
 import { getProgressbarDefaultConfig, createProgressbar } from '@agnos-ui/core-bootstrap/components/progressbar';
 import { getToastDefaultConfig, createToast } from '@agnos-ui/core-bootstrap/components/toast';
+import { createCollapse, getCollapseDefaultConfig } from '@agnos-ui/core-bootstrap/components/collapse';
 export * from '@agnos-ui/core-bootstrap/services/transitions';
 export * from '@agnos-ui/core-bootstrap/types';
 
@@ -40,18 +39,34 @@ const export_modalOutsideClick = modalOutsideClick;
  */
 const export_modalCloseButtonClick = modalCloseButtonClick;
 
+/**
+ * @param factory - The widget factory.
+ * @param widgetName - The name of the widget.
+ * @param defaultConfig - The default configuration for the widget.
+ * @param events - The events for the widget.
+ * @param afterInit - The function to call after initialization.
+ */
 const widgetFactories = widgetsConfigFactory(new InjectionToken('bootstrapWidgetsConfig'));
+/**
+ * Destructures and exports several functions and constants from the `widgetFactories` object.
+ *
+ * @constant {InjectionToken} widgetsConfigInjectionToken - Token used for injecting widget configuration.
+ * @function provideWidgetsConfig - Provides the widget configuration.
+ * @function injectWidgetConfig - Injects a single widget configuration.
+ * @function injectWidgetsConfig - Injects multiple widget configurations.
+ * @function callWidgetFactory - Calls the widget factory function.
+ */
 const { widgetsConfigInjectionToken, provideWidgetsConfig, injectWidgetConfig, injectWidgetsConfig, callWidgetFactory } = widgetFactories;
 
 const _c0$8 = ["header"];
 const _c1$8 = ["structure"];
-const _c2$8 = (a0, a1) => ({ state: a0, widget: a1 });
+const _c2$8 = (a0, a1, a2) => ({ state: a0, api: a1, directives: a2 });
 function ModalDefaultSlotsComponent_ng_template_0_ng_template_1_Template(rf, ctx) { }
 function ModalDefaultSlotsComponent_ng_template_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "button", 6);
 } if (rf & 2) {
-    const widget_r1 = i0.ɵɵnextContext().widget;
-    i0.ɵɵproperty("auUse", widget_r1.directives.closeButtonDirective);
+    const directives_r1 = i0.ɵɵnextContext().directives;
+    i0.ɵɵproperty("auUse", directives_r1.closeButtonDirective);
 } }
 function ModalDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h5", 4);
@@ -60,11 +75,12 @@ function ModalDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtemplate(2, ModalDefaultSlotsComponent_ng_template_0_Conditional_2_Template, 1, 1, "button", 6);
 } if (rf & 2) {
     const state_r2 = ctx.state;
-    const widget_r1 = ctx.widget;
+    const api_r3 = ctx.api;
+    const directives_r1 = ctx.directives;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r2.title)("auSlotProps", i0.ɵɵpureFunction2(3, _c2$8, state_r2, widget_r1));
+    i0.ɵɵproperty("auSlot", state_r2.title())("auSlotProps", i0.ɵɵpureFunction3(3, _c2$8, state_r2, api_r3, directives_r1));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r2.closeButton ? 2 : -1);
+    i0.ɵɵconditional(state_r2.closeButton() ? 2 : -1);
 } }
 function ModalDefaultSlotsComponent_ng_template_2_Conditional_0_ng_template_1_Template(rf, ctx) { }
 function ModalDefaultSlotsComponent_ng_template_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
@@ -72,11 +88,12 @@ function ModalDefaultSlotsComponent_ng_template_2_Conditional_0_Template(rf, ctx
     i0.ɵɵtemplate(1, ModalDefaultSlotsComponent_ng_template_2_Conditional_0_ng_template_1_Template, 0, 0, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    const state_r4 = ctx_r2.state;
-    const widget_r5 = ctx_r2.widget;
+    const ctx_r3 = i0.ɵɵnextContext();
+    const state_r5 = ctx_r3.state;
+    const api_r6 = ctx_r3.api;
+    const directives_r7 = ctx_r3.directives;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r4.header)("auSlotProps", i0.ɵɵpureFunction2(2, _c2$8, state_r4, widget_r5));
+    i0.ɵɵproperty("auSlot", state_r5.header())("auSlotProps", i0.ɵɵpureFunction3(2, _c2$8, state_r5, api_r6, directives_r7));
 } }
 function ModalDefaultSlotsComponent_ng_template_2_ng_template_2_Template(rf, ctx) { }
 function ModalDefaultSlotsComponent_ng_template_2_Conditional_3_ng_template_1_Template(rf, ctx) { }
@@ -85,63 +102,67 @@ function ModalDefaultSlotsComponent_ng_template_2_Conditional_3_Template(rf, ctx
     i0.ɵɵtemplate(1, ModalDefaultSlotsComponent_ng_template_2_Conditional_3_ng_template_1_Template, 0, 0, "ng-template", 5);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    const state_r4 = ctx_r2.state;
-    const widget_r5 = ctx_r2.widget;
+    const ctx_r3 = i0.ɵɵnextContext();
+    const state_r5 = ctx_r3.state;
+    const api_r6 = ctx_r3.api;
+    const directives_r7 = ctx_r3.directives;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r4.footer)("auSlotProps", i0.ɵɵpureFunction2(2, _c2$8, state_r4, widget_r5));
+    i0.ɵɵproperty("auSlot", state_r5.footer())("auSlotProps", i0.ɵɵpureFunction3(2, _c2$8, state_r5, api_r6, directives_r7));
 } }
 function ModalDefaultSlotsComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ModalDefaultSlotsComponent_ng_template_2_Conditional_0_Template, 2, 5, "div", 7);
+    i0.ɵɵtemplate(0, ModalDefaultSlotsComponent_ng_template_2_Conditional_0_Template, 2, 6, "div", 7);
     i0.ɵɵelementStart(1, "div", 8);
     i0.ɵɵtemplate(2, ModalDefaultSlotsComponent_ng_template_2_ng_template_2_Template, 0, 0, "ng-template", 5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, ModalDefaultSlotsComponent_ng_template_2_Conditional_3_Template, 2, 5, "div", 9);
+    i0.ɵɵtemplate(3, ModalDefaultSlotsComponent_ng_template_2_Conditional_3_Template, 2, 6, "div", 9);
 } if (rf & 2) {
-    const state_r4 = ctx.state;
-    const widget_r5 = ctx.widget;
-    i0.ɵɵconditional(state_r4.title ? 0 : -1);
+    const state_r5 = ctx.state;
+    const api_r6 = ctx.api;
+    const directives_r7 = ctx.directives;
+    i0.ɵɵconditional(state_r5.title() ? 0 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", state_r4.children)("auSlotProps", i0.ɵɵpureFunction2(4, _c2$8, state_r4, widget_r5));
+    i0.ɵɵproperty("auSlot", state_r5.children())("auSlotProps", i0.ɵɵpureFunction3(4, _c2$8, state_r5, api_r6, directives_r7));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r4.footer ? 3 : -1);
+    i0.ɵɵconditional(state_r5.footer() ? 3 : -1);
 } }
-const _c3$7 = ["auModal", ""];
-const _c4$3 = ["*"];
-const _c5$2 = (a0, a1) => [a0, a1];
+const _c3$7 = ["content"];
+const _c4$6 = ["auModal", ""];
+const _c5$4 = ["*"];
+const _c6$2 = (a0, a1) => [a0, a1];
 function ModalComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-function ModalComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function ModalComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 1);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction2(1, _c5$2, ctx_r0.widget.directives.backdropPortalDirective, ctx_r0.widget.directives.backdropDirective));
+    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction2(1, _c6$2, ctx_r0.directives.backdropPortalDirective, ctx_r0.directives.backdropDirective));
 } }
-function ModalComponent_Conditional_2_ng_template_3_Template(rf, ctx) { }
-function ModalComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function ModalComponent_Conditional_3_ng_template_3_Template(rf, ctx) { }
+function ModalComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2)(1, "div")(2, "div", 3);
-    i0.ɵɵtemplate(3, ModalComponent_Conditional_2_ng_template_3_Template, 0, 0, "ng-template", 4);
+    i0.ɵɵtemplate(3, ModalComponent_Conditional_3_ng_template_3_Template, 0, 0, "ng-template", 4);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction2(6, _c5$2, ctx_r0.widget.directives.modalPortalDirective, ctx_r0.widget.directives.modalDirective));
+    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction2(6, _c6$2, ctx_r0.directives.modalPortalDirective, ctx_r0.directives.modalDirective));
     i0.ɵɵadvance();
-    i0.ɵɵclassMapInterpolate1("modal-dialog ", ctx_r0.state().fullscreen ? "modal-fullscreen" : "", "");
+    i0.ɵɵclassMapInterpolate1("modal-dialog ", ctx_r0.state.fullscreen() ? "modal-fullscreen" : "", "");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", ctx_r0.state().structure)("auSlotProps", i0.ɵɵpureFunction2(9, _c2$8, ctx_r0.state(), ctx_r0.widget));
+    i0.ɵɵproperty("auSlot", ctx_r0.state.structure())("auSlotProps", i0.ɵɵpureFunction3(9, _c2$8, ctx_r0.state, ctx_r0.api, ctx_r0.directives));
 } }
 /**
  * Directive to provide the slot structure for the modal widget.
+ * This directive provides a template reference for the {@link ModalContext<Data>}.
  */
 class ModalStructureDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ModalStructureDirective_Factory(t) { return new (t || ModalStructureDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalStructureDirective, [{
@@ -150,6 +171,7 @@ class ModalStructureDirective {
     }], null, null); })();
 /**
  * Directive to provide the slot header for the modal widget.
+ * This directive provides a template reference for the {@link ModalContext<Data>}.
  */
 class ModalHeaderDirective {
     constructor() {
@@ -158,7 +180,7 @@ class ModalHeaderDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ModalHeaderDirective_Factory(t) { return new (t || ModalHeaderDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalHeaderDirective, [{
@@ -167,6 +189,7 @@ class ModalHeaderDirective {
     }], null, null); })();
 /**
  * Directive to provide the slot title for the modal widget.
+ * This directive provides a template reference for the {@link ModalContext<Data>}.
  */
 class ModalTitleDirective {
     constructor() {
@@ -175,7 +198,7 @@ class ModalTitleDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ModalTitleDirective_Factory(t) { return new (t || ModalTitleDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalTitleDirective, [{
@@ -184,6 +207,7 @@ class ModalTitleDirective {
     }], null, null); })();
 /**
  * Directive to provide the default slot for the modal widget.
+ * This directive provides a template reference for the {@link ModalContext<Data>}.
  */
 class ModalBodyDirective {
     constructor() {
@@ -192,7 +216,7 @@ class ModalBodyDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ModalBodyDirective_Factory(t) { return new (t || ModalBodyDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalBodyDirective, [{
@@ -201,6 +225,7 @@ class ModalBodyDirective {
     }], null, null); })();
 /**
  * Directive to provide the slot footer for the modal widget.
+ * This directive provides a template reference for the {@link ModalContext<Data>}.
  */
 class ModalFooterDirective {
     constructor() {
@@ -209,7 +234,7 @@ class ModalFooterDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ModalFooterDirective_Factory(t) { return new (t || ModalFooterDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalFooterDirective, [{
@@ -220,7 +245,7 @@ class ModalFooterDirective {
  * Component containing the default slots for the modal.
  */
 class ModalDefaultSlotsComponent {
-    static { this.ɵfac = function ModalDefaultSlotsComponent_Factory(t) { return new (t || ModalDefaultSlotsComponent)(); }; }
+    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$8, 7);
             i0.ɵɵviewQuery(_c1$8, 7);
@@ -229,7 +254,7 @@ class ModalDefaultSlotsComponent {
             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.ɵɵtemplate(0, ModalDefaultSlotsComponent_ng_template_0_Template, 3, 6, "ng-template", 2, 0, i0.ɵɵtemplateRefExtractor)(2, ModalDefaultSlotsComponent_ng_template_2_Template, 4, 7, "ng-template", 3, 1, i0.ɵɵtemplateRefExtractor);
+            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, [{
@@ -239,26 +264,26 @@ class ModalDefaultSlotsComponent {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, ModalHeaderDirective, ModalStructureDirective, UseDirective],
                 template: `
-		<ng-template auModalHeader #header let-state="state" let-widget="widget">
+		<ng-template auModalHeader #header let-state="state" let-api="api" let-directives="directives">
 			<h5 class="modal-title">
-				<ng-template [auSlot]="state.title" [auSlotProps]="{state, widget}"></ng-template>
+				<ng-template [auSlot]="state.title()" [auSlotProps]="{state, api, directives}"></ng-template>
 			</h5>
-			@if (state.closeButton) {
-				<button class="btn-close" [auUse]="widget.directives.closeButtonDirective"></button>
+			@if (state.closeButton()) {
+				<button class="btn-close" [auUse]="directives.closeButtonDirective"></button>
 			}
 		</ng-template>
-		<ng-template auModalStructure #structure let-state="state" let-widget="widget">
-			@if (state.title) {
+		<ng-template auModalStructure #structure let-state="state" let-api="api" let-directives="directives">
+			@if (state.title()) {
 				<div class="modal-header">
-					<ng-template [auSlot]="state.header" [auSlotProps]="{state, widget}"></ng-template>
+					<ng-template [auSlot]="state.header()" [auSlotProps]="{state, api, directives}"></ng-template>
 				</div>
 			}
 			<div class="modal-body">
-				<ng-template [auSlot]="state.children" [auSlotProps]="{state, widget}"></ng-template>
+				<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}"></ng-template>
 			</div>
-			@if (state.footer) {
+			@if (state.footer()) {
 				<div class="modal-footer">
-					<ng-template [auSlot]="state.footer" [auSlotProps]="{state, widget}"></ng-template>
+					<ng-template [auSlot]="state.footer()" [auSlotProps]="{state, api, directives}"></ng-template>
 				</div>
 			}
 		</ng-template>
@@ -271,7 +296,7 @@ class ModalDefaultSlotsComponent {
             type: ViewChild,
             args: ['structure', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalDefaultSlotsComponent, { className: "ModalDefaultSlotsComponent", filePath: "components/modal/modal.component.ts", lineNumber: 117 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalDefaultSlotsComponent, { className: "ModalDefaultSlotsComponent", filePath: "components/modal/modal.component.ts", lineNumber: 112 }); })();
 /**
  * Default slot for modal header.
  */
@@ -280,16 +305,33 @@ const modalDefaultSlotHeader = new ComponentTemplate(ModalDefaultSlotsComponent,
  * Default slot for modal structure.
  */
 const modalDefaultSlotStructure = new ComponentTemplate(ModalDefaultSlotsComponent, 'structure');
-const defaultConfig$6 = {
-    header: modalDefaultSlotHeader,
-    structure: modalDefaultSlotStructure,
-};
 /**
  * Modal component.
  */
 class ModalComponent extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
+        super(callWidgetFactory({
+            factory: export_createModal,
+            widgetName: 'modal',
+            defaultConfig: {
+                header: modalDefaultSlotHeader,
+                structure: modalDefaultSlotStructure,
+            },
+            events: {
+                onShown: () => this.shown.emit(),
+                onHidden: () => this.hidden.emit(),
+                onBeforeClose: (event) => this.beforeClose.emit(event),
+                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,
+            }),
+            slotChildren: () => this.slotChildren,
+        }));
         /**
          * Event to be triggered when the visible property changes.
          *
@@ -331,29 +373,8 @@ class ModalComponent extends BaseWidgetDirective {
          * ```
          */
         this.shown = new EventEmitter();
-        this.defaultSlots = writable(defaultConfig$6);
-        this._widget = callWidgetFactory({
-            factory: export_createModal,
-            widgetName: 'modal',
-            defaultConfig: this.defaultSlots,
-            events: {
-                onShown: () => this.shown.emit(),
-                onHidden: () => this.hidden.emit(),
-                onBeforeClose: (event) => this.beforeClose.emit(event),
-                onVisibleChange: (event) => this.visibleChange.emit(event),
-            },
-        });
     }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            children: this.slotDefaultFromContent?.templateRef,
-            footer: this.slotFooterFromContent?.templateRef,
-            header: this.slotHeaderFromContent?.templateRef,
-            structure: this.slotStructureFromContent?.templateRef,
-            title: this.slotTitleFromContent?.templateRef,
-        });
-    }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵModalComponent_BaseFactory; return function ModalComponent_Factory(t) { return (ɵModalComponent_BaseFactory || (ɵModalComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ModalComponent)))(t || ModalComponent); }; })(); }
+    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);
@@ -367,16 +388,20 @@ class ModalComponent extends BaseWidgetDirective {
             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);
-        } }, 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: _c3$7, ngContentSelectors: _c4$3, decls: 3, vars: 3, consts: [[3, "auContentAsSlot"], [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) {
+        } }, viewQuery: function ModalComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c3$7, 7);
+        } 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$6, ngContentSelectors: _c5$4, 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", 0)(1, ModalComponent_Conditional_1_Template, 1, 4, "div", 1)(2, ModalComponent_Conditional_2_Template, 4, 12, "div", 2);
+            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) {
-            i0.ɵɵproperty("auContentAsSlot", ctx.defaultSlots);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.state().backdropHidden ? 1 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.state.backdropHidden() ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.state().hidden ? 2 : -1);
-        } }, dependencies: [UseMultiDirective, SlotDirective, ContentAsSlotDirective], encapsulation: 2, changeDetection: 0 }); }
+            i0.ɵɵconditional(!ctx.state.hidden() ? 3 : -1);
+        } }, dependencies: [UseMultiDirective, SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalComponent, [{
         type: Component,
@@ -384,24 +409,24 @@ class ModalComponent extends BaseWidgetDirective {
                 selector: '[auModal]',
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                imports: [UseMultiDirective, SlotDirective, ContentAsSlotDirective],
+                imports: [UseMultiDirective, SlotDirective],
                 template: `
-		<ng-template [auContentAsSlot]="defaultSlots"><ng-content></ng-content></ng-template>
-		@if (!state().backdropHidden) {
-			<div class="modal-backdrop" [auUseMulti]="[widget.directives.backdropPortalDirective, widget.directives.backdropDirective]"></div>
+		<ng-template #content><ng-content></ng-content></ng-template>
+		@if (!state.backdropHidden()) {
+			<div class="modal-backdrop" [auUseMulti]="[directives.backdropPortalDirective, directives.backdropDirective]"></div>
 		}
-		@if (!state().hidden) {
-			<div class="modal d-block" [auUseMulti]="[widget.directives.modalPortalDirective, widget.directives.modalDirective]">
-				<div class="modal-dialog {{ state().fullscreen ? 'modal-fullscreen' : '' }}">
+		@if (!state.hidden()) {
+			<div class="modal d-block" [auUseMulti]="[directives.modalPortalDirective, directives.modalDirective]">
+				<div class="modal-dialog {{ state.fullscreen() ? 'modal-fullscreen' : '' }}">
 					<div class="modal-content">
-						<ng-template [auSlot]="state().structure" [auSlotProps]="{state: state(), widget}"></ng-template>
+						<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template>
 					</div>
 				</div>
 			</div>
 		}
 	`,
             }]
-    }], null, { animated: [{
+    }], () => [], { animated: [{
             type: Input,
             args: [{ alias: 'auAnimated', transform: auBooleanAttribute }]
         }], backdropTransition: [{
@@ -482,8 +507,11 @@ class ModalComponent extends BaseWidgetDirective {
         }], 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: 161 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ModalComponent, { className: "ModalComponent", filePath: "components/modal/modal.component.ts", lineNumber: 151 }); })();
 
 /**
  * Retrieve a shallow copy of the default Pagination config
@@ -499,11 +527,10 @@ const export_createPagination = createPagination;
 
 const _c0$7 = ["pages"];
 const _c1$7 = ["structure"];
-const _c2$7 = (a0, a1) => ({ state: a0, widget: a1 });
+const _c2$7 = (a0, a1, a2) => ({ state: a0, api: a1, directives: a2 });
 const _c3$6 = a0 => ({ page: a0 });
-const _c4$2 = (a0, a1) => [a0, a1];
-const _c5$1 = (a0, a1, a2) => ({ state: a0, widget: a1, displayedPage: a2 });
-const _c6$1 = (a0, a1) => ({ widget: a0, state: a1 });
+const _c4$5 = (a0, a1) => [a0, a1];
+const _c5$3 = (a0, a1, a2, a3) => ({ state: a0, api: a1, directives: a2, displayedPage: a3 });
 function PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_1_ng_template_1_Template(rf, ctx) { }
 function PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 7);
@@ -515,11 +542,12 @@ function PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_1_Templ
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
     const state_r2 = ctx_r0.state;
-    const widget_r3 = ctx_r0.widget;
+    const api_r3 = ctx_r0.api;
+    const directives_r4 = ctx_r0.directives;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r2.ellipsisLabel)("auSlotProps", i0.ɵɵpureFunction2(3, _c2$7, state_r2, widget_r3));
+    i0.ɵɵproperty("auSlot", state_r2.ellipsisLabel())("auSlotProps", i0.ɵɵpureFunction3(3, _c2$7, state_r2, api_r3, directives_r4));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(state_r2.ariaEllipsisLabel);
+    i0.ɵɵtextInterpolate(state_r2.ariaEllipsisLabel());
 } }
 function PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_2_ng_template_1_Template(rf, ctx) { }
 function PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -529,39 +557,40 @@ function PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_2_Condi
 } if (rf & 2) {
     const state_r2 = i0.ɵɵnextContext(3).state;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(state_r2.activeLabel);
+    i0.ɵɵtextInterpolate(state_r2.activeLabel());
 } }
 function PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "a", 6);
     i0.ɵɵtemplate(1, PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_2_ng_template_1_Template, 0, 0, "ng-template", 8)(2, PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_2_Conditional_2_Template, 2, 1, "span", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const page_r4 = i0.ɵɵnextContext().$implicit;
+    const page_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext();
     const state_r2 = ctx_r0.state;
-    const widget_r3 = ctx_r0.widget;
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(6, _c4$2, widget_r3.directives.pageLink, i0.ɵɵpureFunction1(4, _c3$6, page_r4)));
+    const api_r3 = ctx_r0.api;
+    const directives_r4 = ctx_r0.directives;
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(6, _c4$5, directives_r4.pageLink, i0.ɵɵpureFunction1(4, _c3$6, page_r5)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r2.numberLabel)("auSlotProps", i0.ɵɵpureFunction3(9, _c5$1, state_r2, widget_r3, page_r4));
+    i0.ɵɵproperty("auSlot", state_r2.numberLabel())("auSlotProps", i0.ɵɵpureFunction4(9, _c5$3, state_r2, api_r3, directives_r4, page_r5));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r2.page === page_r4 ? 2 : -1);
+    i0.ɵɵconditional(state_r2.page() === page_r5 ? 2 : -1);
 } }
 function PaginationDefaultSlotsComponent_ng_template_0_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 5);
-    i0.ɵɵtemplate(1, PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_1_Template, 4, 6)(2, PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_2_Template, 3, 13, "a", 6);
+    i0.ɵɵtemplate(1, PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_1_Template, 4, 7)(2, PaginationDefaultSlotsComponent_ng_template_0_For_1_Conditional_2_Template, 3, 14, "a", 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const page_r4 = ctx.$implicit;
+    const page_r5 = ctx.$implicit;
     const state_r2 = i0.ɵɵnextContext().state;
-    i0.ɵɵclassProp("active", page_r4 === state_r2.page)("disabled", page_r4 === -1 || state_r2.disabled);
+    i0.ɵɵclassProp("active", page_r5 === state_r2.page())("disabled", page_r5 === -1 || state_r2.disabled());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(page_r4 === -1 ? 1 : 2);
+    i0.ɵɵconditional(page_r5 === -1 ? 1 : 2);
 } }
 function PaginationDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, PaginationDefaultSlotsComponent_ng_template_0_For_1_Template, 3, 5, "li", 4, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const state_r2 = ctx.state;
-    i0.ɵɵrepeater(state_r2.pages);
+    i0.ɵɵrepeater(state_r2.pages());
 } }
 function PaginationDefaultSlotsComponent_ng_template_2_Conditional_1_ng_template_3_Template(rf, ctx) { }
 function PaginationDefaultSlotsComponent_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -569,14 +598,15 @@ function PaginationDefaultSlotsComponent_ng_template_2_Conditional_1_Template(rf
     i0.ɵɵtemplate(3, PaginationDefaultSlotsComponent_ng_template_2_Conditional_1_ng_template_3_Template, 0, 0, "ng-template", 8);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    const state_r6 = ctx_r4.state;
-    const widget_r7 = ctx_r4.widget;
-    i0.ɵɵclassProp("disabled", state_r6.previousDisabled);
+    const ctx_r5 = i0.ɵɵnextContext();
+    const state_r7 = ctx_r5.state;
+    const api_r8 = ctx_r5.api;
+    const directives_r9 = ctx_r5.directives;
+    i0.ɵɵclassProp("disabled", state_r7.previousDisabled());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auUse", widget_r7.directives.pageFirst);
+    i0.ɵɵproperty("auUse", directives_r9.pageFirst);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", state_r6.firstPageLabel)("auSlotProps", i0.ɵɵpureFunction2(5, _c6$1, widget_r7, state_r6));
+    i0.ɵɵproperty("auSlot", state_r7.firstPageLabel())("auSlotProps", i0.ɵɵpureFunction3(5, _c2$7, state_r7, api_r8, directives_r9));
 } }
 function PaginationDefaultSlotsComponent_ng_template_2_Conditional_2_ng_template_3_Template(rf, ctx) { }
 function PaginationDefaultSlotsComponent_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
@@ -584,14 +614,15 @@ function PaginationDefaultSlotsComponent_ng_template_2_Conditional_2_Template(rf
     i0.ɵɵtemplate(3, PaginationDefaultSlotsComponent_ng_template_2_Conditional_2_ng_template_3_Template, 0, 0, "ng-template", 8);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    const state_r6 = ctx_r4.state;
-    const widget_r7 = ctx_r4.widget;
-    i0.ɵɵclassProp("disabled", state_r6.previousDisabled);
+    const ctx_r5 = i0.ɵɵnextContext();
+    const state_r7 = ctx_r5.state;
+    const api_r8 = ctx_r5.api;
+    const directives_r9 = ctx_r5.directives;
+    i0.ɵɵclassProp("disabled", state_r7.previousDisabled());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auUse", widget_r7.directives.pagePrev);
+    i0.ɵɵproperty("auUse", directives_r9.pagePrev);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", state_r6.previousPageLabel)("auSlotProps", i0.ɵɵpureFunction2(5, _c6$1, widget_r7, state_r6));
+    i0.ɵɵproperty("auSlot", state_r7.previousPageLabel())("auSlotProps", i0.ɵɵpureFunction3(5, _c2$7, state_r7, api_r8, directives_r9));
 } }
 function PaginationDefaultSlotsComponent_ng_template_2_ng_template_3_Template(rf, ctx) { }
 function PaginationDefaultSlotsComponent_ng_template_2_Conditional_4_ng_template_3_Template(rf, ctx) { }
@@ -600,14 +631,15 @@ function PaginationDefaultSlotsComponent_ng_template_2_Conditional_4_Template(rf
     i0.ɵɵtemplate(3, PaginationDefaultSlotsComponent_ng_template_2_Conditional_4_ng_template_3_Template, 0, 0, "ng-template", 8);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    const state_r6 = ctx_r4.state;
-    const widget_r7 = ctx_r4.widget;
-    i0.ɵɵclassProp("disabled", state_r6.nextDisabled);
+    const ctx_r5 = i0.ɵɵnextContext();
+    const state_r7 = ctx_r5.state;
+    const api_r8 = ctx_r5.api;
+    const directives_r9 = ctx_r5.directives;
+    i0.ɵɵclassProp("disabled", state_r7.nextDisabled());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auUse", widget_r7.directives.pageNext);
+    i0.ɵɵproperty("auUse", directives_r9.pageNext);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", state_r6.nextPageLabel)("auSlotProps", i0.ɵɵpureFunction2(5, _c6$1, widget_r7, state_r6));
+    i0.ɵɵproperty("auSlot", state_r7.nextPageLabel())("auSlotProps", i0.ɵɵpureFunction3(5, _c2$7, state_r7, api_r8, directives_r9));
 } }
 function PaginationDefaultSlotsComponent_ng_template_2_Conditional_5_ng_template_3_Template(rf, ctx) { }
 function PaginationDefaultSlotsComponent_ng_template_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
@@ -615,43 +647,46 @@ function PaginationDefaultSlotsComponent_ng_template_2_Conditional_5_Template(rf
     i0.ɵɵtemplate(3, PaginationDefaultSlotsComponent_ng_template_2_Conditional_5_ng_template_3_Template, 0, 0, "ng-template", 8);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    const state_r6 = ctx_r4.state;
-    const widget_r7 = ctx_r4.widget;
-    i0.ɵɵclassProp("disabled", state_r6.nextDisabled);
+    const ctx_r5 = i0.ɵɵnextContext();
+    const state_r7 = ctx_r5.state;
+    const api_r8 = ctx_r5.api;
+    const directives_r9 = ctx_r5.directives;
+    i0.ɵɵclassProp("disabled", state_r7.nextDisabled());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auUse", widget_r7.directives.pageLast);
+    i0.ɵɵproperty("auUse", directives_r9.pageLast);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", state_r6.lastPageLabel)("auSlotProps", i0.ɵɵpureFunction2(5, _c6$1, widget_r7, state_r6));
+    i0.ɵɵproperty("auSlot", state_r7.lastPageLabel())("auSlotProps", i0.ɵɵpureFunction3(5, _c2$7, state_r7, api_r8, directives_r9));
 } }
 function PaginationDefaultSlotsComponent_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "ul");
-    i0.ɵɵtemplate(1, PaginationDefaultSlotsComponent_ng_template_2_Conditional_1_Template, 4, 8, "li", 10)(2, PaginationDefaultSlotsComponent_ng_template_2_Conditional_2_Template, 4, 8, "li", 10)(3, PaginationDefaultSlotsComponent_ng_template_2_ng_template_3_Template, 0, 0, "ng-template", 8)(4, PaginationDefaultSlotsComponent_ng_template_2_Conditional_4_Template, 4, 8, "li", 10)(5, PaginationDefaultSlotsComponent_ng_template_2_Conditional_5_Template, 4, 8, "li", 10);
+    i0.ɵɵtemplate(1, PaginationDefaultSlotsComponent_ng_template_2_Conditional_1_Template, 4, 9, "li", 10)(2, PaginationDefaultSlotsComponent_ng_template_2_Conditional_2_Template, 4, 9, "li", 10)(3, PaginationDefaultSlotsComponent_ng_template_2_ng_template_3_Template, 0, 0, "ng-template", 8)(4, PaginationDefaultSlotsComponent_ng_template_2_Conditional_4_Template, 4, 9, "li", 10)(5, PaginationDefaultSlotsComponent_ng_template_2_Conditional_5_Template, 4, 9, "li", 10);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "div", 11);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const state_r6 = ctx.state;
-    const widget_r7 = ctx.widget;
-    i0.ɵɵclassMap("au-pagination pagination" + (state_r6.size ? " pagination-" + state_r6.size : "") + " " + state_r6.className);
+    const state_r7 = ctx.state;
+    const api_r8 = ctx.api;
+    const directives_r9 = ctx.directives;
+    i0.ɵɵclassMap("au-pagination pagination" + (state_r7.size() ? " pagination-" + state_r7.size() : "") + " " + state_r7.className());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r6.boundaryLinks ? 1 : -1);
+    i0.ɵɵconditional(state_r7.boundaryLinks() ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r6.directionLinks ? 2 : -1);
+    i0.ɵɵconditional(state_r7.directionLinks() ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r6.pagesDisplay)("auSlotProps", i0.ɵɵpureFunction2(9, _c6$1, widget_r7, state_r6));
+    i0.ɵɵproperty("auSlot", state_r7.pagesDisplay())("auSlotProps", i0.ɵɵpureFunction3(9, _c2$7, state_r7, api_r8, directives_r9));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r6.directionLinks ? 4 : -1);
+    i0.ɵɵconditional(state_r7.directionLinks() ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r6.boundaryLinks ? 5 : -1);
+    i0.ɵɵconditional(state_r7.boundaryLinks() ? 5 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(state_r6.ariaLiveLabelText);
+    i0.ɵɵtextInterpolate(state_r7.ariaLiveLabelText());
 } }
-const _c7$1 = ["auPagination", ""];
+const _c6$1 = ["auPagination", ""];
 function PaginationComponent_ng_template_0_Template(rf, ctx) { }
 /**
  * A directive to use to give the 'ellipsis' link template to the pagination component
+ * This directive provides a template reference for the {@link PaginationContext}.
  */
 class PaginationEllipsisDirective {
     constructor() {
@@ -660,7 +695,7 @@ class PaginationEllipsisDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function PaginationEllipsisDirective_Factory(t) { return new (t || PaginationEllipsisDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationEllipsisDirective, [{
@@ -669,6 +704,7 @@ class PaginationEllipsisDirective {
     }], null, null); })();
 /**
  * A directive to use to give the 'first' link template to the pagination component
+ * This directive provides a template reference for the {@link PaginationContext}.
  */
 class PaginationFirstDirective {
     constructor() {
@@ -677,7 +713,7 @@ class PaginationFirstDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function PaginationFirstDirective_Factory(t) { return new (t || PaginationFirstDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationFirstDirective, [{
@@ -686,6 +722,7 @@ class PaginationFirstDirective {
     }], null, null); })();
 /**
  * A directive to use to give the 'last' link template to the pagination component
+ * This directive provides a template reference for the {@link PaginationContext}.
  */
 class PaginationLastDirective {
     constructor() {
@@ -694,7 +731,7 @@ class PaginationLastDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function PaginationLastDirective_Factory(t) { return new (t || PaginationLastDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationLastDirective, [{
@@ -703,6 +740,7 @@ class PaginationLastDirective {
     }], null, null); })();
 /**
  * A directive to use to give the 'next' link template to the pagination component
+ * This directive provides a template reference for the {@link PaginationContext}.
  */
 class PaginationNextDirective {
     constructor() {
@@ -711,7 +749,7 @@ class PaginationNextDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function PaginationNextDirective_Factory(t) { return new (t || PaginationNextDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationNextDirective, [{
@@ -720,6 +758,7 @@ class PaginationNextDirective {
     }], null, null); })();
 /**
  * A directive to use to give the page 'number' template to the pagination component
+ * This directive provides a template reference for the {@link PaginationNumberContext}.
  */
 class PaginationNumberDirective {
     constructor() {
@@ -728,7 +767,7 @@ class PaginationNumberDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function PaginationNumberDirective_Factory(t) { return new (t || PaginationNumberDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationNumberDirective, [{
@@ -737,6 +776,7 @@ class PaginationNumberDirective {
     }], null, null); })();
 /**
  * A directive to use to give the 'previous' link template to the pagination component
+ * This directive provides a template reference for the {@link PaginationContext}.
  */
 class PaginationPreviousDirective {
     constructor() {
@@ -745,7 +785,7 @@ class PaginationPreviousDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function PaginationPreviousDirective_Factory(t) { return new (t || PaginationPreviousDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationPreviousDirective, [{
@@ -754,6 +794,7 @@ class PaginationPreviousDirective {
     }], null, null); })();
 /**
  * A directive to use to give the 'Pages' template for the Pages slot
+ * This directive provides a template reference for the {@link PaginationContext}.
  */
 class PaginationPagesDirective {
     constructor() {
@@ -762,7 +803,7 @@ class PaginationPagesDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function PaginationPagesDirective_Factory(t) { return new (t || PaginationPagesDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationPagesDirective, [{
@@ -771,15 +812,16 @@ class PaginationPagesDirective {
     }], null, null); })();
 /**
  * Directive to provide the slot structure for the pagination widget.
+ * This directive provides a template reference for the {@link PaginationContext}.
  */
 class PaginationStructureDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function PaginationStructureDirective_Factory(t) { return new (t || PaginationStructureDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationStructureDirective, [{
@@ -787,7 +829,7 @@ class PaginationStructureDirective {
         args: [{ selector: 'ng-template[auPaginationStructure]', standalone: true }]
     }], null, null); })();
 class PaginationDefaultSlotsComponent {
-    static { this.ɵfac = function PaginationDefaultSlotsComponent_Factory(t) { return new (t || PaginationDefaultSlotsComponent)(); }; }
+    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$7, 7);
             i0.ɵɵviewQuery(_c1$7, 7);
@@ -796,7 +838,7 @@ class PaginationDefaultSlotsComponent {
             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.ɵɵtemplate(0, PaginationDefaultSlotsComponent_ng_template_0_Template, 2, 0, "ng-template", 2, 0, i0.ɵɵtemplateRefExtractor)(2, PaginationDefaultSlotsComponent_ng_template_2_Template, 8, 12, "ng-template", 3, 1, i0.ɵɵtemplateRefExtractor);
+            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, [{
@@ -806,66 +848,66 @@ class PaginationDefaultSlotsComponent {
                 imports: [SlotDirective, PaginationPagesDirective, PaginationStructureDirective, UseDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 template: `
-		<ng-template auPaginationPages #pages let-state="state" let-widget="widget">
-			@for (page of state.pages; track page; let i = $index) {
-				<li class="page-item" [class.active]="page === state.page" [class.disabled]="page === -1 || state.disabled">
+		<ng-template auPaginationPages #pages let-state="state" let-api="api" let-directives="directives">
+			@for (page of state.pages(); track page; let i = $index) {
+				<li class="page-item" [class.active]="page === state.page()" [class.disabled]="page === -1 || state.disabled()">
 					@if (page === -1) {
 						<div class="page-link au-ellipsis" aria-hidden="true">
-							<ng-template [auSlot]="state.ellipsisLabel" [auSlotProps]="{state, widget}"></ng-template>
+							<ng-template [auSlot]="state.ellipsisLabel()" [auSlotProps]="{state, api, directives}"></ng-template>
 						</div>
-						<span class="visually-hidden">{{ state.ariaEllipsisLabel }}</span>
+						<span class="visually-hidden">{{ state.ariaEllipsisLabel() }}</span>
 					} @else {
-						<a class="page-link" [auUse]="[widget.directives.pageLink, {page}]">
-							<ng-template [auSlot]="state.numberLabel" [auSlotProps]="{state, widget, displayedPage: page}"></ng-template>
-							@if (state.page === page) {
-								<span class="visually-hidden">{{ state.activeLabel }}</span>
+						<a class="page-link" [auUse]="[directives.pageLink, {page}]">
+							<ng-template [auSlot]="state.numberLabel()" [auSlotProps]="{state, api, directives, displayedPage: page}"></ng-template>
+							@if (state.page() === page) {
+								<span class="visually-hidden">{{ state.activeLabel() }}</span>
 							}
 						</a>
 					}
 				</li>
 			}
 		</ng-template>
-		<ng-template auPaginationStructure #structure let-state="state" let-widget="widget">
-			<ul [class]="'au-pagination pagination' + (state.size ? ' pagination-' + state.size : '') + ' ' + state.className">
-				@if (state.boundaryLinks) {
-					<li class="page-item" [class.disabled]="state.previousDisabled">
-						<a class="page-link" [auUse]="widget.directives.pageFirst">
+		<ng-template auPaginationStructure #structure let-state="state" let-api="api" let-directives="directives">
+			<ul [class]="'au-pagination pagination' + (state.size() ? ' pagination-' + state.size() : '') + ' ' + state.className()">
+				@if (state.boundaryLinks()) {
+					<li class="page-item" [class.disabled]="state.previousDisabled()">
+						<a class="page-link" [auUse]="directives.pageFirst">
 							<span aria-hidden="true">
-								<ng-template [auSlot]="state.firstPageLabel" [auSlotProps]="{widget, state}"></ng-template>
+								<ng-template [auSlot]="state.firstPageLabel()" [auSlotProps]="{state, api, directives}"></ng-template>
 							</span>
 						</a>
 					</li>
 				}
-				@if (state.directionLinks) {
-					<li class="page-item" [class.disabled]="state.previousDisabled">
-						<a class="page-link" [auUse]="widget.directives.pagePrev">
+				@if (state.directionLinks()) {
+					<li class="page-item" [class.disabled]="state.previousDisabled()">
+						<a class="page-link" [auUse]="directives.pagePrev">
 							<span aria-hidden="true">
-								<ng-template [auSlot]="state.previousPageLabel" [auSlotProps]="{widget, state}"></ng-template>
+								<ng-template [auSlot]="state.previousPageLabel()" [auSlotProps]="{state, api, directives}"></ng-template>
 							</span>
 						</a>
 					</li>
 				}
-				<ng-template [auSlot]="state.pagesDisplay" [auSlotProps]="{widget, state}"></ng-template>
-				@if (state.directionLinks) {
-					<li class="page-item" [class.disabled]="state.nextDisabled">
-						<a class="page-link" [auUse]="widget.directives.pageNext">
+				<ng-template [auSlot]="state.pagesDisplay()" [auSlotProps]="{state, api, directives}"></ng-template>
+				@if (state.directionLinks()) {
+					<li class="page-item" [class.disabled]="state.nextDisabled()">
+						<a class="page-link" [auUse]="directives.pageNext">
 							<span aria-hidden="true">
-								<ng-template [auSlot]="state.nextPageLabel" [auSlotProps]="{widget, state}"></ng-template>
+								<ng-template [auSlot]="state.nextPageLabel()" [auSlotProps]="{state, api, directives}"></ng-template>
 							</span>
 						</a>
 					</li>
 				}
-				@if (state.boundaryLinks) {
-					<li class="page-item" [class.disabled]="state.nextDisabled">
-						<a class="page-link" [auUse]="widget.directives.pageLast">
+				@if (state.boundaryLinks()) {
+					<li class="page-item" [class.disabled]="state.nextDisabled()">
+						<a class="page-link" [auUse]="directives.pageLast">
 							<span aria-hidden="true">
-								<ng-template [auSlot]="state.lastPageLabel" [auSlotProps]="{widget, state}"></ng-template>
+								<ng-template [auSlot]="state.lastPageLabel()" [auSlotProps]="{state, api, directives}"></ng-template>
 							</span>
 						</a>
 					</li>
 				}
 			</ul>
-			<div aria-live="polite" class="visually-hidden">{{ state.ariaLiveLabelText }}</div>
+			<div aria-live="polite" class="visually-hidden">{{ state.ariaLiveLabelText() }}</div>
 		</ng-template>
 	`,
             }]
@@ -876,7 +918,7 @@ class PaginationDefaultSlotsComponent {
             type: ViewChild,
             args: ['structure', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationDefaultSlotsComponent, { className: "PaginationDefaultSlotsComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 177 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationDefaultSlotsComponent, { className: "PaginationDefaultSlotsComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 184 }); })();
 /**
  * The default slot for the pages
  */
@@ -885,21 +927,34 @@ const paginationDefaultSlotPages = new ComponentTemplate(PaginationDefaultSlotsC
  * The default slot for the structure
  */
 const paginationDefaultSlotStructure = new ComponentTemplate(PaginationDefaultSlotsComponent, 'structure');
-const defaultConfig$5 = {
-    structure: paginationDefaultSlotStructure,
-    pagesDisplay: paginationDefaultSlotPages,
-};
+/**
+ * The `PaginationComponent` is an Angular component that extends the `BaseWidgetDirective`
+ * to provide a customizable pagination widget. It includes various input properties
+ * to configure labels, templates, and behavior for accessibility and internationalization (i18n).
+ */
 class PaginationComponent extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
-        this._widget = callWidgetFactory({
+        super(callWidgetFactory({
             factory: export_createPagination,
             widgetName: 'pagination',
-            defaultConfig: defaultConfig$5,
+            defaultConfig: {
+                structure: paginationDefaultSlotStructure,
+                pagesDisplay: paginationDefaultSlotPages,
+            },
             events: {
                 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,
+            }),
+        }));
         /**
          * An event fired when the page is changed.
          *
@@ -913,19 +968,7 @@ class PaginationComponent extends BaseWidgetDirective {
          */
         this.pageChange = new EventEmitter();
     }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            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,
-        });
-    }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵPaginationComponent_BaseFactory; return function PaginationComponent_Factory(t) { return (ɵPaginationComponent_BaseFactory || (ɵPaginationComponent_BaseFactory = i0.ɵɵgetInheritedFactory(PaginationComponent)))(t || PaginationComponent); }; })(); }
+    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);
@@ -946,11 +989,11 @@ class PaginationComponent extends BaseWidgetDirective {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotNumberLabelFromContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
         } }, 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: _c7$1, decls: 1, vars: 5, consts: [[3, "auSlotProps", "auSlot"]], template: function PaginationComponent_Template(rf, ctx) { if (rf & 1) {
+            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$1, 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.ɵɵpureFunction2(2, _c2$7, ctx.state(), ctx.widget))("auSlot", ctx.state().structure);
+            i0.ɵɵproperty("auSlotProps", i0.ɵɵpureFunction3(2, _c2$7, ctx.state, ctx.api, ctx.directives))("auSlot", ctx.state.structure());
         } }, dependencies: [SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PaginationComponent, [{
@@ -961,12 +1004,12 @@ class PaginationComponent extends BaseWidgetDirective {
                 imports: [SlotDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 host: {
-                    '[attr.aria-label]': 'state().ariaLabel',
+                    '[attr.aria-label]': 'state.ariaLabel()',
                 },
                 encapsulation: ViewEncapsulation.None,
-                template: `<ng-template [auSlotProps]="{state: state(), widget}" [auSlot]="state().structure"></ng-template>`,
+                template: `<ng-template [auSlotProps]="{state, api, directives}" [auSlot]="state.structure()"></ng-template>`,
             }]
-    }], null, { ariaPageLabel: [{
+    }], () => [], { ariaPageLabel: [{
             type: Input,
             args: ['auAriaPageLabel']
         }], ariaLiveLabel: [{
@@ -1075,7 +1118,7 @@ class PaginationComponent extends BaseWidgetDirective {
             type: Input,
             args: ['auClassName']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationComponent, { className: "PaginationComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 206 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PaginationComponent, { className: "PaginationComponent", filePath: "components/pagination/pagination.component.ts", lineNumber: 213 }); })();
 
 /**
  * Retrieve a shallow copy of the default Rating config
@@ -1104,12 +1147,17 @@ function RatingComponent_For_1_Template(rf, ctx) { if (rf & 1) {
     const ɵ$index_1_r1 = ctx.$index;
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("(", ɵ$index_1_r1 < ctx_r1.state().visibleRating ? "*" : " ", ")");
+    i0.ɵɵtextInterpolate1("(", ɵ$index_1_r1 < ctx_r1.state.visibleRating() ? "*" : " ", ")");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(6, _c2$6, ctx_r1._widget.directives.starDirective, i0.ɵɵpureFunction1(4, _c1$6, ɵ$index_1_r1)));
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(6, _c2$6, ctx_r1.directives.starDirective, i0.ɵɵpureFunction1(4, _c1$6, ɵ$index_1_r1)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", ctx_r1.state().star)("auSlotProps", ctx_r1.state().stars[ɵ$index_1_r1]);
+    i0.ɵɵproperty("auSlot", ctx_r1.state.star())("auSlotProps", ctx_r1.state.stars()[ɵ$index_1_r1]);
 } }
+/**
+ * Directive to represent a rating star.
+ *
+ * This directive uses a template reference to render the {@link StarContext}.
+ */
 class RatingStarDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
@@ -1117,17 +1165,32 @@ class RatingStarDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function RatingStarDirective_Factory(t) { return new (t || RatingStarDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RatingStarDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auRatingStar]', standalone: true }]
     }], null, null); })();
+/**
+ * The `RatingComponent` is an Angular component that allows users to provide a rating.
+ * It extends `BaseWidgetDirective` and implements `ControlValueAccessor` to integrate with Angular forms.
+ */
 class RatingComponent extends BaseWidgetDirective {
+    writeValue(value) {
+        this['_widget'].patch({ rating: value });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this['_widget'].patch({ disabled });
+    }
     constructor() {
-        super(...arguments);
-        this._widget = callWidgetFactory({
+        super(callWidgetFactory({
             factory: export_createRating,
             widgetName: 'rating',
             events: {
@@ -1138,10 +1201,13 @@ class RatingComponent extends BaseWidgetDirective {
                     this.onChange(rating);
                 },
             },
-            afterInit: () => {
-                useDirectiveForHost(this._widget.directives.containerDirective);
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.containerDirective);
             },
-        });
+            slotTemplates: () => ({
+                star: this.slotStarFromContent?.templateRef,
+            }),
+        }));
         this.onChange = (_) => { };
         this.onTouched = () => { };
         /**
@@ -1178,27 +1244,10 @@ class RatingComponent extends BaseWidgetDirective {
          */
         this.ratingChange = new EventEmitter();
     }
-    writeValue(value) {
-        this._widget.patch({ rating: value });
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouched = fn;
-    }
-    setDisabledState(disabled) {
-        this._widget.patch({ disabled });
-    }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            star: this.slotStarFromContent?.templateRef,
-        });
-    }
     trackByIndex(index) {
         return index;
     }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵRatingComponent_BaseFactory; return function RatingComponent_Factory(t) { return (ɵRatingComponent_BaseFactory || (ɵRatingComponent_BaseFactory = i0.ɵɵgetInheritedFactory(RatingComponent)))(t || RatingComponent); }; })(); }
+    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);
         } if (rf & 2) {
@@ -1209,7 +1258,7 @@ class RatingComponent extends BaseWidgetDirective {
         } }, 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$6, 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);
+            i0.ɵɵrepeater(ctx.state.stars());
         } }, dependencies: [UseDirective, SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RatingComponent, [{
@@ -1225,16 +1274,16 @@ class RatingComponent extends BaseWidgetDirective {
                     '(blur)': 'onTouched()',
                 },
                 template: `
-		@for (item of state().stars; track trackByIndex(index); let index = $index) {
-			<span class="visually-hidden">({{ index < state().visibleRating ? '*' : ' ' }})</span>
-			<span [auUse]="[_widget.directives.starDirective, {index}]">
-				<ng-template [auSlot]="state().star" [auSlotProps]="state().stars[index]"></ng-template>
+		@for (item of state.stars(); track trackByIndex(index); let index = $index) {
+			<span class="visually-hidden">({{ index < state.visibleRating() ? '*' : ' ' }})</span>
+			<span [auUse]="[directives.starDirective, {index}]">
+				<ng-template [auSlot]="state.star()" [auSlotProps]="state.stars()[index]"></ng-template>
 			</span>
 		}
 	`,
                 providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true }],
             }]
-    }], null, { ariaValueTextFn: [{
+    }], () => [], { ariaValueTextFn: [{
             type: Input,
             args: ['auAriaValueTextFn']
         }], disabled: [{
@@ -1280,7 +1329,7 @@ class RatingComponent extends BaseWidgetDirective {
             type: Output,
             args: ['auRatingChange']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RatingComponent, { className: "RatingComponent", filePath: "components/rating/rating.component.ts", lineNumber: 58 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RatingComponent, { className: "RatingComponent", filePath: "components/rating/rating.component.ts", lineNumber: 66 }); })();
 
 /**
  * Retrieve a shallow copy of the default Select config
@@ -1296,72 +1345,55 @@ const export_createSelect = createSelect;
 
 const _c0$5 = ["auSelect", ""];
 const _c1$5 = (a0, a1) => [a0, a1];
-const _c2$5 = (a0, a1, a2) => ({ state: a0, widget: a1, itemContext: a2 });
+const _c2$5 = (a0, a1, a2, a3) => ({ state: a0, api: a1, directives: a2, itemContext: a3 });
 const _c3$5 = (a0, a1, a2) => [a0, a1, a2];
-function SelectComponent_Conditional_0_Conditional_1_For_1_ng_template_1_Template(rf, ctx) { }
-function SelectComponent_Conditional_0_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
+function SelectComponent_Conditional_1_For_1_ng_template_1_Template(rf, ctx) { }
+function SelectComponent_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵtemplate(1, SelectComponent_Conditional_0_Conditional_1_For_1_ng_template_1_Template, 0, 0, "ng-template", 4);
+    i0.ɵɵtemplate(1, SelectComponent_Conditional_1_For_1_ng_template_1_Template, 0, 0, "ng-template", 4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const itemContext_r2 = ctx.$implicit;
-    const state_r3 = i0.ɵɵnextContext(2);
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(3, _c1$5, ctx_r3._widget.directives.badgeAttributesDirective, itemContext_r2));
+    const itemContext_r1 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(3, _c1$5, ctx_r1.directives.badgeAttributesDirective, itemContext_r1));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r3.badgeLabel)("auSlotProps", i0.ɵɵpureFunction3(6, _c2$5, state_r3, ctx_r3.widget, itemContext_r2));
+    i0.ɵɵproperty("auSlot", ctx_r1.state.badgeLabel())("auSlotProps", i0.ɵɵpureFunction4(6, _c2$5, ctx_r1.state, ctx_r1.api, ctx_r1.directives, itemContext_r1));
 } }
-function SelectComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, SelectComponent_Conditional_0_Conditional_1_For_1_Template, 2, 10, "div", 3, i0.ɵɵcomponentInstance().itemCtxTrackBy, true);
+function SelectComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, SelectComponent_Conditional_1_For_1_Template, 2, 11, "div", 3, i0.ɵɵcomponentInstance().itemCtxTrackBy, true);
 } if (rf & 2) {
     i0.ɵɵrepeater(ctx);
 } }
-function SelectComponent_Conditional_0_Conditional_3_For_2_ng_template_1_Template(rf, ctx) { }
-function SelectComponent_Conditional_0_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+function SelectComponent_Conditional_3_For_2_ng_template_1_Template(rf, ctx) { }
+function SelectComponent_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li", 6);
-    i0.ɵɵtemplate(1, SelectComponent_Conditional_0_Conditional_3_For_2_ng_template_1_Template, 0, 0, "ng-template", 4);
+    i0.ɵɵtemplate(1, SelectComponent_Conditional_3_For_2_ng_template_1_Template, 0, 0, "ng-template", 4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const itemContext_r5 = ctx.$implicit;
-    const state_r3 = i0.ɵɵnextContext(2);
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("text-bg-primary", itemContext_r5 === state_r3.highlighted);
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(5, _c1$5, ctx_r3._widget.directives.itemAttributesDirective, itemContext_r5));
+    const itemContext_r3 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("text-bg-primary", itemContext_r3 === ctx_r1.state.highlighted());
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(5, _c1$5, ctx_r1.directives.itemAttributesDirective, itemContext_r3));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r3.itemLabel)("auSlotProps", i0.ɵɵpureFunction3(8, _c2$5, state_r3, ctx_r3.widget, itemContext_r5));
+    i0.ɵɵproperty("auSlot", ctx_r1.state.itemLabel())("auSlotProps", i0.ɵɵpureFunction4(8, _c2$5, ctx_r1.state, ctx_r1.api, ctx_r1.directives, itemContext_r3));
 } }
-function SelectComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function SelectComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "ul", 2);
-    i0.ɵɵrepeaterCreate(1, SelectComponent_Conditional_0_Conditional_3_For_2_Template, 2, 12, "li", 5, i0.ɵɵcomponentInstance().itemCtxTrackBy, true);
+    i0.ɵɵrepeaterCreate(1, SelectComponent_Conditional_3_For_2_Template, 2, 13, "li", 5, i0.ɵɵcomponentInstance().itemCtxTrackBy, true);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const state_r3 = i0.ɵɵnextContext();
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction3(1, _c3$5, ctx_r3.widget.directives.hasFocusDirective, ctx_r3.widget.directives.floatingDirective, ctx_r3.widget.directives.menuAttributesDirective));
-    i0.ɵɵadvance();
-    i0.ɵɵrepeater(state_r3.visibleItems);
-} }
-function SelectComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵtemplate(1, SelectComponent_Conditional_0_Conditional_1_Template, 2, 0);
-    i0.ɵɵelementStart(2, "input", 1);
-    i0.ɵɵlistener("input", function SelectComponent_Conditional_0_Template_input_input_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3._widget.actions.onInput($event)); })("keydown", function SelectComponent_Conditional_0_Template_input_keydown_2_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3._widget.actions.onInputKeydown($event)); });
-    i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(3, SelectComponent_Conditional_0_Conditional_3_Template, 3, 5, "ul", 2);
-} if (rf & 2) {
-    let tmp_3_0;
-    const state_r3 = ctx;
-    const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction2(6, _c1$5, ctx_r3.widget.directives.hasFocusDirective, ctx_r3.widget.directives.inputContainerDirective));
-    i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_3_0 = state_r3.selectedContexts) ? 1 : -1, tmp_3_0);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("value", state_r3.filterText);
-    i0.ɵɵattribute("id", state_r3.id)("aria-label", state_r3.ariaLabel);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction3(1, _c3$5, ctx_r1.directives.hasFocusDirective, ctx_r1.directives.floatingDirective, ctx_r1.directives.menuAttributesDirective));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r3.open && state_r3.visibleItems.length ? 3 : -1);
+    i0.ɵɵrepeater(ctx_r1.state.visibleItems());
 } }
+/**
+ * Directive to provide a custom template for the badge label in a select component.
+ *
+ * @template Item - The type of the item in the select component.
+ *
+ * This directive uses a template reference to render the {@link SelectItemContext<Item>}.
+ */
 class SelectBadgeLabelDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
@@ -1369,13 +1401,23 @@ class SelectBadgeLabelDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function SelectBadgeLabelDirective_Factory(t) { return new (t || SelectBadgeLabelDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectBadgeLabelDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auSelectBadgeLabel]', standalone: true }]
     }], null, null); })();
+/**
+ * Directive to provide a custom label template for select items.
+ *
+ * This directive allows you to define a custom template for the labels of items
+ * in a select component. The template can be specified using an Angular `TemplateRef`.
+ *
+ * @template Item - The type of the items in the select component.
+ *
+ * This directive uses a template reference to render the {@link SelectItemContext<Item>}.
+ */
 class SelectItemLabelDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
@@ -1383,16 +1425,36 @@ class SelectItemLabelDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function SelectItemLabelDirective_Factory(t) { return new (t || SelectItemLabelDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectItemLabelDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auSelectItemLabel]', standalone: true }]
     }], null, null); })();
+/**
+ * A component that represents a customizable select dropdown widget.
+ *
+ * @template Item - The type of items in the select dropdown.
+ */
 class SelectComponent extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
+        super(callWidgetFactory({
+            factory: export_createSelect,
+            widgetName: 'select',
+            events: {
+                onOpenChange: (event) => this.openChange.emit(event),
+                onSelectedChange: (event) => this.selectedChange.emit(event),
+                onFilterTextChange: (event) => this.filterTextChange.emit(event),
+            },
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.referenceDirective);
+            },
+            slotTemplates: () => ({
+                badgeLabel: this.slotSelectBadgeLabelFromContent?.templateRef,
+                itemLabel: this.slotSelectItemLabelFromContent?.templateRef,
+            }),
+        }));
         /**
          * Callback called when the text filter change
          * @param text - Filtered text
@@ -1422,29 +1484,11 @@ class SelectComponent extends BaseWidgetDirective {
          * ```
          */
         this.openChange = new EventEmitter();
-        this._widget = callWidgetFactory({
-            factory: export_createSelect,
-            widgetName: 'select',
-            events: {
-                onOpenChange: (event) => this.openChange.emit(event),
-                onSelectedChange: (event) => this.selectedChange.emit(event),
-                onFilterTextChange: (event) => this.filterTextChange.emit(event),
-            },
-            afterInit: () => {
-                useDirectiveForHost(this._widget.directives.referenceDirective);
-            },
-        });
     }
     itemCtxTrackBy(_, itemContext) {
         return itemContext.id;
     }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            badgeLabel: this.slotSelectBadgeLabelFromContent?.templateRef,
-            itemLabel: this.slotSelectItemLabelFromContent?.templateRef,
-        });
-    }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵSelectComponent_BaseFactory; return function SelectComponent_Factory(t) { return (ɵSelectComponent_BaseFactory || (ɵSelectComponent_BaseFactory = i0.ɵɵgetInheritedFactory(SelectComponent)))(t || SelectComponent); }; })(); }
+    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);
@@ -1453,12 +1497,22 @@ class SelectComponent extends BaseWidgetDirective {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotSelectBadgeLabelFromContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotSelectItemLabelFromContent = _t.first);
         } }, 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$5, decls: 1, vars: 1, consts: [[1, "d-flex", "align-items-center", "flex-wrap", "gap-1", 3, "auUseMulti"], ["type", "text", "aria-autocomplete", "list", "autoCorrect", "off", "autoCapitalize", "none", "autoComplete", "off", 1, "au-select-input", "flex-grow-1", "border-0", 3, "input", "keydown", "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.ɵɵtemplate(0, SelectComponent_Conditional_0_Template, 4, 9);
+            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$5, 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);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(3, SelectComponent_Conditional_3_Template, 3, 5, "ul", 2);
         } if (rf & 2) {
-            let tmp_0_0;
-            i0.ɵɵconditional((tmp_0_0 = ctx.state()) ? 0 : -1, tmp_0_0);
+            let tmp_1_0;
+            i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction2(5, _c1$5, ctx.directives.hasFocusDirective, ctx.directives.inputContainerDirective));
+            i0.ɵɵadvance();
+            i0.ɵɵconditional((tmp_1_0 = ctx.state.selectedContexts()) ? 1 : -1, tmp_1_0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("auUse", ctx.directives.inputDirective)("value", ctx.state.filterText());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.state.open() && ctx.state.visibleItems().length ? 3 : -1);
         } }, dependencies: [UseMultiDirective, SlotDirective, UseDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SelectComponent, [{
@@ -1469,55 +1523,35 @@ class SelectComponent extends BaseWidgetDirective {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: '[auSelect]',
                 host: {
-                    '[class]': '"au-select dropdown border border-1 p-1 mb-3 d-block" + state().className',
+                    '[class]': '"au-select dropdown border border-1 p-1 mb-3 d-block" + state.className()',
                 },
                 template: `
-		@if (state(); as state) {
-			<div
-				[auUseMulti]="[widget.directives.hasFocusDirective, widget.directives.inputContainerDirective]"
-				class="d-flex align-items-center flex-wrap gap-1"
-			>
-				@if (state.selectedContexts; as selectedContexts) {
-					@for (itemContext of selectedContexts; track itemCtxTrackBy($index, itemContext)) {
-						<div [auUse]="[_widget.directives.badgeAttributesDirective, itemContext]">
-							<ng-template [auSlot]="state.badgeLabel" [auSlotProps]="{state, widget, itemContext}"></ng-template>
-						</div>
-					}
+		<div [auUseMulti]="[directives.hasFocusDirective, directives.inputContainerDirective]" class="d-flex align-items-center flex-wrap gap-1">
+			@if (state.selectedContexts(); as selectedContexts) {
+				@for (itemContext of selectedContexts; track itemCtxTrackBy($index, itemContext)) {
+					<div [auUse]="[directives.badgeAttributesDirective, itemContext]">
+						<ng-template [auSlot]="state.badgeLabel()" [auSlotProps]="{state, api, directives, itemContext}"></ng-template>
+					</div>
 				}
-				<input
-					attr.id="{{ state.id }}"
-					attr.aria-label="{{ state.ariaLabel }}"
-					type="text"
-					class="au-select-input flex-grow-1 border-0"
-					[value]="state.filterText"
-					aria-autocomplete="list"
-					autoCorrect="off"
-					autoCapitalize="none"
-					autoComplete="off"
-					(input)="_widget.actions.onInput($event)"
-					(keydown)="_widget.actions.onInputKeydown($event)"
-				/>
-			</div>
-			@if (state.open && state.visibleItems.length) {
-				<ul
-					[auUseMulti]="[widget.directives.hasFocusDirective, widget.directives.floatingDirective, widget.directives.menuAttributesDirective]"
-					class="dropdown-menu show"
-				>
-					@for (itemContext of state.visibleItems; track itemCtxTrackBy($index, itemContext)) {
-						<li
-							class="dropdown-item position-relative"
-							[auUse]="[_widget.directives.itemAttributesDirective, itemContext]"
-							[class.text-bg-primary]="itemContext === state.highlighted"
-						>
-							<ng-template [auSlot]="state.itemLabel" [auSlotProps]="{state, widget, itemContext}"></ng-template>
-						</li>
-					}
-				</ul>
 			}
+			<input [auUse]="directives.inputDirective" [value]="state.filterText()" />
+		</div>
+		@if (state.open() && state.visibleItems().length) {
+			<ul [auUseMulti]="[directives.hasFocusDirective, directives.floatingDirective, directives.menuAttributesDirective]" class="dropdown-menu show">
+				@for (itemContext of state.visibleItems(); track itemCtxTrackBy($index, itemContext)) {
+					<li
+						class="dropdown-item position-relative"
+						[auUse]="[directives.itemAttributesDirective, itemContext]"
+						[class.text-bg-primary]="itemContext === state.highlighted()"
+					>
+						<ng-template [auSlot]="state.itemLabel()" [auSlotProps]="{state, api, directives, itemContext}"></ng-template>
+					</li>
+				}
+			</ul>
 		}
 	`,
             }]
-    }], null, { ariaLabel: [{
+    }], () => [], { ariaLabel: [{
             type: Input,
             args: ['auAriaLabel']
         }], id: [{
@@ -1584,7 +1618,7 @@ class SelectComponent extends BaseWidgetDirective {
             type: Input,
             args: ['auNavSelector']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "components/select/select.component.ts", lineNumber: 87 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SelectComponent, { className: "SelectComponent", filePath: "components/select/select.component.ts", lineNumber: 88 }); })();
 
 /**
  * Retrieve a shallow copy of the default Alert config
@@ -1599,16 +1633,16 @@ const export_getAlertDefaultConfig = getAlertDefaultConfig;
 const export_createAlert = createAlert;
 
 const _c0$4 = ["structure"];
-const _c1$4 = (a0, a1) => ({ state: a0, widget: a1 });
+const _c1$4 = (a0, a1, a2) => ({ state: a0, api: a1, directives: a2 });
 function AlertDefaultSlotsComponent_ng_template_0_ng_template_1_Template(rf, ctx) { }
 function AlertDefaultSlotsComponent_ng_template_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 5);
-    i0.ɵɵlistener("click", function AlertDefaultSlotsComponent_ng_template_0_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const widget_r2 = i0.ɵɵnextContext().widget; return i0.ɵɵresetView(widget_r2.api.close()); });
+    i0.ɵɵlistener("click", function AlertDefaultSlotsComponent_ng_template_0_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const api_r2 = i0.ɵɵnextContext().api; return i0.ɵɵresetView(api_r2.close()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const state_r3 = i0.ɵɵnextContext().state;
-    i0.ɵɵattribute("aria-label", state_r3.ariaCloseButtonLabel);
+    i0.ɵɵattribute("aria-label", state_r3.ariaCloseButtonLabel());
 } }
 function AlertDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
@@ -1617,51 +1651,63 @@ function AlertDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtemplate(2, AlertDefaultSlotsComponent_ng_template_0_Conditional_2_Template, 1, 1, "button", 4);
 } if (rf & 2) {
     const state_r3 = ctx.state;
-    const widget_r2 = ctx.widget;
+    const api_r2 = ctx.api;
+    const directives_r4 = ctx.directives;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r3.children)("auSlotProps", i0.ɵɵpureFunction2(3, _c1$4, state_r3, widget_r2));
+    i0.ɵɵproperty("auSlot", state_r3.children())("auSlotProps", i0.ɵɵpureFunction3(3, _c1$4, state_r3, api_r2, directives_r4));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r3.dismissible ? 2 : -1);
+    i0.ɵɵconditional(state_r3.dismissible() ? 2 : -1);
 } }
-const _c2$4 = ["auAlert", ""];
-const _c3$4 = ["*"];
+const _c2$4 = ["content"];
+const _c3$4 = ["auAlert", ""];
+const _c4$4 = ["*"];
 function AlertComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-function AlertComponent_Conditional_1_ng_template_1_Template(rf, ctx) { }
-function AlertComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function AlertComponent_Conditional_2_ng_template_1_Template(rf, ctx) { }
+function AlertComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtemplate(1, AlertComponent_Conditional_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵtemplate(1, AlertComponent_Conditional_2_ng_template_1_Template, 0, 0, "ng-template", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassMapInterpolate3("au-alert alert alert-", ctx_r0.state().type, " ", ctx_r0.state().className, " ", ctx_r0.state().dismissible ? "alert-dismissible" : "", "");
-    i0.ɵɵproperty("auUse", ctx_r0.widget.directives.transitionDirective);
+    i0.ɵɵclassMapInterpolate3("au-alert alert alert-", ctx_r0.state.type(), " ", ctx_r0.state.className(), " ", ctx_r0.state.dismissible() ? "alert-dismissible" : "", "");
+    i0.ɵɵproperty("auUse", ctx_r0.directives.transitionDirective);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", ctx_r0.state().structure)("auSlotProps", i0.ɵɵpureFunction2(8, _c1$4, ctx_r0.state(), ctx_r0.widget));
+    i0.ɵɵproperty("auSlot", ctx_r0.state.structure())("auSlotProps", i0.ɵɵpureFunction3(8, _c1$4, ctx_r0.state, ctx_r0.api, ctx_r0.directives));
 } }
+/**
+ * Directive to be used as a structural directive for the body of an alert component.
+ *
+ * This directive allows the use of a template reference for the alert body content, with type {@link AlertContext}.
+ */
 class AlertBodyDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function AlertBodyDirective_Factory(t) { return new (t || AlertBodyDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AlertBodyDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auAlertBody]', standalone: true }]
     }], null, null); })();
+/**
+ * Directive to define the structure of an alert component.
+ *
+ * This directive uses a `TemplateRef` to inject the template reference of the {@link AlertContext}.
+ */
 class AlertStructureDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function AlertStructureDirective_Factory(t) { return new (t || AlertStructureDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AlertStructureDirective, [{
@@ -1669,14 +1715,14 @@ class AlertStructureDirective {
         args: [{ selector: 'ng-template[auAlertStructure]', standalone: true }]
     }], null, null); })();
 class AlertDefaultSlotsComponent {
-    static { this.ɵfac = function AlertDefaultSlotsComponent_Factory(t) { return new (t || AlertDefaultSlotsComponent)(); }; }
+    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$4, 7);
         } 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.ɵɵtemplate(0, AlertDefaultSlotsComponent_ng_template_0_Template, 3, 6, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
+            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, [{
@@ -1685,12 +1731,12 @@ class AlertDefaultSlotsComponent {
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, AlertStructureDirective],
-                template: ` <ng-template auAlertStructure #structure let-state="state" let-widget="widget">
+                template: ` <ng-template auAlertStructure #structure let-state="state" let-api="api" let-directives="directives">
 		<div class="alert-body">
-			<ng-template [auSlot]="state.children" [auSlotProps]="{state, widget}"></ng-template>
+			<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}"></ng-template>
 		</div>
-		@if (state.dismissible) {
-			<button type="button" class="btn-close" (click)="widget.api.close()" [attr.aria-label]="state.ariaCloseButtonLabel"></button>
+		@if (state.dismissible()) {
+			<button type="button" class="btn-close" (click)="api.close()" [attr.aria-label]="state.ariaCloseButtonLabel()"></button>
 		}
 	</ng-template>`,
             }]
@@ -1698,14 +1744,38 @@ class AlertDefaultSlotsComponent {
             type: ViewChild,
             args: ['structure', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AlertDefaultSlotsComponent, { className: "AlertDefaultSlotsComponent", filePath: "components/alert/alert.component.ts", lineNumber: 57 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AlertDefaultSlotsComponent, { className: "AlertDefaultSlotsComponent", filePath: "components/alert/alert.component.ts", lineNumber: 59 }); })();
+/**
+ * Represents the default slot structure for the alert component.
+ */
 const alertDefaultSlotStructure = new ComponentTemplate(AlertDefaultSlotsComponent, 'structure');
-const defaultConfig$4 = {
-    structure: alertDefaultSlotStructure,
-};
+/**
+ * AlertComponent is a UI component that extends BaseWidgetDirective to provide
+ * an alert box with various customizable properties and behaviors.
+ *
+ * @remarks
+ * This component is designed to be used with Bootstrap styles and supports
+ * various Bootstrap contextual classes for different alert types.
+ */
 class AlertComponent extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
+        super(callWidgetFactory({
+            factory: export_createAlert,
+            widgetName: 'alert',
+            defaultConfig: {
+                structure: alertDefaultSlotStructure,
+            },
+            events: {
+                onVisibleChange: (event) => this.visibleChange.emit(event),
+                onShown: () => this.shown.emit(),
+                onHidden: () => this.hidden.emit(),
+            },
+            slotTemplates: () => ({
+                children: this.slotDefaultFromContent?.templateRef,
+                structure: this.slotStructureFromContent?.templateRef,
+            }),
+            slotChildren: () => this.slotChildren,
+        }));
         /**
          * Callback called when the alert visibility changed.
          *
@@ -1733,25 +1803,8 @@ class AlertComponent extends BaseWidgetDirective {
          * ```
          */
         this.shown = new EventEmitter();
-        this.defaultSlots = writable(defaultConfig$4);
-        this._widget = callWidgetFactory({
-            factory: export_createAlert,
-            widgetName: 'alert',
-            defaultConfig: this.defaultSlots,
-            events: {
-                onVisibleChange: (event) => this.visibleChange.emit(event),
-                onShown: () => this.shown.emit(),
-                onHidden: () => this.hidden.emit(),
-            },
-        });
     }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            children: this.slotDefaultFromContent?.templateRef,
-            structure: this.slotStructureFromContent?.templateRef,
-        });
-    }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵAlertComponent_BaseFactory; return function AlertComponent_Factory(t) { return (ɵAlertComponent_BaseFactory || (ɵAlertComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AlertComponent)))(t || AlertComponent); }; })(); }
+    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);
@@ -1759,14 +1812,18 @@ class AlertComponent extends BaseWidgetDirective {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotDefaultFromContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _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: _c2$4, ngContentSelectors: _c3$4, decls: 2, vars: 2, consts: [[3, "auContentAsSlot"], ["role", "alert", 3, "auUse", "class"], ["role", "alert", 3, "auUse"], [3, "auSlot", "auSlotProps"]], template: function AlertComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, viewQuery: function AlertComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c2$4, 7);
+        } 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$4, ngContentSelectors: _c4$4, 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", 0)(1, AlertComponent_Conditional_1_Template, 2, 11, "div", 1);
+            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) {
-            i0.ɵɵproperty("auContentAsSlot", ctx.defaultSlots);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.state().hidden ? 1 : -1);
-        } }, dependencies: [SlotDirective, UseDirective, ContentAsSlotDirective], encapsulation: 2, changeDetection: 0 }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.state.hidden() ? 2 : -1);
+        } }, dependencies: [SlotDirective, UseDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AlertComponent, [{
         type: Component,
@@ -1774,22 +1831,22 @@ class AlertComponent extends BaseWidgetDirective {
                 selector: '[auAlert]',
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                imports: [SlotDirective, UseDirective, ContentAsSlotDirective],
-                template: ` <ng-template [auContentAsSlot]="defaultSlots">
+                imports: [SlotDirective, UseDirective],
+                template: ` <ng-template #content>
 			<ng-content></ng-content>
 		</ng-template>
 
-		@if (!state().hidden) {
+		@if (!state.hidden()) {
 			<div
-				[auUse]="widget.directives.transitionDirective"
-				class="au-alert alert alert-{{ state().type }} {{ state().className }} {{ state().dismissible ? 'alert-dismissible' : '' }}"
+				[auUse]="directives.transitionDirective"
+				class="au-alert alert alert-{{ state.type() }} {{ state.className() }} {{ state.dismissible() ? 'alert-dismissible' : '' }}"
 				role="alert"
 			>
-				<ng-template [auSlot]="state().structure" [auSlotProps]="{state: state(), widget}"></ng-template>
+				<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template>
 			</div>
 		}`,
             }]
-    }], null, { type: [{
+    }], () => [], { type: [{
             type: Input,
             args: ['auType']
         }], dismissible: [{
@@ -1834,8 +1891,11 @@ class AlertComponent extends BaseWidgetDirective {
         }], 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: 87 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AlertComponent, { className: "AlertComponent", filePath: "components/alert/alert.component.ts", lineNumber: 95 }); })();
 
 /**
  * Retrieve a shallow copy of the default accordion config
@@ -1866,51 +1926,51 @@ const export_createAccordion = createAccordion;
 const export_factoryCreateAccordion = factoryCreateAccordion;
 
 const _c0$3 = ["structure"];
-const _c1$3 = (a0, a1) => ({ state: a0, widget: a1 });
+const _c1$3 = (a0, a1, a2) => ({ state: a0, directives: a1, api: a2 });
 function AccordionItemDefaultSlotsComponent_ng_template_0_Case_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 8);
+    i0.ɵɵelementContainer(0, 9);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const h1_r1 = i0.ɵɵreference(8);
     i0.ɵɵproperty("ngTemplateOutlet", h1_r1);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Case_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 8);
+    i0.ɵɵelementContainer(0, 9);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const h2_r2 = i0.ɵɵreference(10);
     i0.ɵɵproperty("ngTemplateOutlet", h2_r2);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Case_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 8);
+    i0.ɵɵelementContainer(0, 9);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const h3_r3 = i0.ɵɵreference(12);
     i0.ɵɵproperty("ngTemplateOutlet", h3_r3);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 8);
+    i0.ɵɵelementContainer(0, 9);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const h4_r4 = i0.ɵɵreference(14);
     i0.ɵɵproperty("ngTemplateOutlet", h4_r4);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Case_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 8);
+    i0.ɵɵelementContainer(0, 9);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const h5_r5 = i0.ɵɵreference(16);
     i0.ɵɵproperty("ngTemplateOutlet", h5_r5);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Case_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 8);
+    i0.ɵɵelementContainer(0, 9);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const h6_r6 = i0.ɵɵreference(18);
     i0.ɵɵproperty("ngTemplateOutlet", h6_r6);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Case_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainer(0, 8);
+    i0.ɵɵelementContainer(0, 9);
 } if (rf & 2) {
     i0.ɵɵnextContext();
     const h2_r2 = i0.ɵɵreference(10);
@@ -1918,155 +1978,175 @@ function AccordionItemDefaultSlotsComponent_ng_template_0_Case_6_Template(rf, ct
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_7_ng_template_1_Template(rf, ctx) { }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h1", 10);
-    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_7_ng_template_1_Template, 0, 0, "ng-template", 8);
+    i0.ɵɵelementStart(0, "h1", 11);
+    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_7_ng_template_1_Template, 0, 0, "ng-template", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const widget_r7 = i0.ɵɵnextContext().widget;
+    const directives_r7 = i0.ɵɵnextContext().directives;
     const button_r8 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("auUse", widget_r7.directives.headerDirective);
+    i0.ɵɵproperty("auUse", directives_r7.headerDirective);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", button_r8);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_9_ng_template_1_Template(rf, ctx) { }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h2", 10);
-    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_9_ng_template_1_Template, 0, 0, "ng-template", 8);
+    i0.ɵɵelementStart(0, "h2", 11);
+    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_9_ng_template_1_Template, 0, 0, "ng-template", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const widget_r7 = i0.ɵɵnextContext().widget;
+    const directives_r7 = i0.ɵɵnextContext().directives;
     const button_r8 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("auUse", widget_r7.directives.headerDirective);
+    i0.ɵɵproperty("auUse", directives_r7.headerDirective);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", button_r8);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_11_ng_template_1_Template(rf, ctx) { }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h3", 10);
-    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_11_ng_template_1_Template, 0, 0, "ng-template", 8);
+    i0.ɵɵelementStart(0, "h3", 11);
+    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_11_ng_template_1_Template, 0, 0, "ng-template", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const widget_r7 = i0.ɵɵnextContext().widget;
+    const directives_r7 = i0.ɵɵnextContext().directives;
     const button_r8 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("auUse", widget_r7.directives.headerDirective);
+    i0.ɵɵproperty("auUse", directives_r7.headerDirective);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", button_r8);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_13_ng_template_1_Template(rf, ctx) { }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h4", 10);
-    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_13_ng_template_1_Template, 0, 0, "ng-template", 8);
+    i0.ɵɵelementStart(0, "h4", 11);
+    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_13_ng_template_1_Template, 0, 0, "ng-template", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const widget_r7 = i0.ɵɵnextContext().widget;
+    const directives_r7 = i0.ɵɵnextContext().directives;
     const button_r8 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("auUse", widget_r7.directives.headerDirective);
+    i0.ɵɵproperty("auUse", directives_r7.headerDirective);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", button_r8);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_15_ng_template_1_Template(rf, ctx) { }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h5", 10);
-    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_15_ng_template_1_Template, 0, 0, "ng-template", 8);
+    i0.ɵɵelementStart(0, "h5", 11);
+    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_15_ng_template_1_Template, 0, 0, "ng-template", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const widget_r7 = i0.ɵɵnextContext().widget;
+    const directives_r7 = i0.ɵɵnextContext().directives;
     const button_r8 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("auUse", widget_r7.directives.headerDirective);
+    i0.ɵɵproperty("auUse", directives_r7.headerDirective);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", button_r8);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_17_ng_template_1_Template(rf, ctx) { }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h6", 10);
-    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_17_ng_template_1_Template, 0, 0, "ng-template", 8);
+    i0.ɵɵelementStart(0, "h6", 11);
+    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_17_ng_template_1_Template, 0, 0, "ng-template", 9);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const widget_r7 = i0.ɵɵnextContext().widget;
+    const directives_r7 = i0.ɵɵnextContext().directives;
     const button_r8 = i0.ɵɵreference(20);
-    i0.ɵɵproperty("auUse", widget_r7.directives.headerDirective);
+    i0.ɵɵproperty("auUse", directives_r7.headerDirective);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", button_r8);
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_19_ng_template_1_Template(rf, ctx) { }
 function AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_19_ng_template_1_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementStart(0, "button", 12);
+    i0.ɵɵtemplate(1, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_19_ng_template_1_Template, 0, 0, "ng-template", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r8 = i0.ɵɵnextContext();
     const state_r10 = ctx_r8.state;
-    const widget_r7 = ctx_r8.widget;
-    i0.ɵɵproperty("auUse", widget_r7.directives.buttonDirective);
+    const api_r11 = ctx_r8.api;
+    const directives_r7 = ctx_r8.directives;
+    i0.ɵɵproperty("auUse", directives_r7.buttonDirective);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlotProps", i0.ɵɵpureFunction2(3, _c1$3, state_r10, widget_r7))("auSlot", state_r10.header);
+    i0.ɵɵproperty("auSlotProps", i0.ɵɵpureFunction3(3, _c1$3, state_r10, directives_r7, api_r11))("auSlot", state_r10.header());
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Conditional_21_ng_template_2_Template(rf, ctx) { }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 13);
-    i0.ɵɵtemplate(2, AccordionItemDefaultSlotsComponent_ng_template_0_Conditional_21_ng_template_2_Template, 0, 0, "ng-template", 12);
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 14);
+    i0.ɵɵtemplate(2, AccordionItemDefaultSlotsComponent_ng_template_0_Conditional_21_ng_template_2_Template, 0, 0, "ng-template", 13);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r8 = i0.ɵɵnextContext();
     const state_r10 = ctx_r8.state;
-    const widget_r7 = ctx_r8.widget;
-    i0.ɵɵproperty("auUse", widget_r7.directives.bodyContainerDirective);
+    const api_r11 = ctx_r8.api;
+    const directives_r7 = ctx_r8.directives;
+    i0.ɵɵproperty("auUse", directives_r7.bodyContainerDirective);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auUse", widget_r7.directives.bodyDirective);
+    i0.ɵɵproperty("auUse", directives_r7.bodyDirective);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlotProps", i0.ɵɵpureFunction2(4, _c1$3, state_r10, widget_r7))("auSlot", state_r10.children);
+    i0.ɵɵproperty("auSlotProps", i0.ɵɵpureFunction3(4, _c1$3, state_r10, directives_r7, api_r11))("auSlot", state_r10.children());
 } }
 function AccordionItemDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, AccordionItemDefaultSlotsComponent_ng_template_0_Case_0_Template, 1, 1, "ng-container", 8)(1, AccordionItemDefaultSlotsComponent_ng_template_0_Case_1_Template, 1, 1, "ng-container", 8)(2, AccordionItemDefaultSlotsComponent_ng_template_0_Case_2_Template, 1, 1, "ng-container", 8)(3, AccordionItemDefaultSlotsComponent_ng_template_0_Case_3_Template, 1, 1, "ng-container", 8)(4, AccordionItemDefaultSlotsComponent_ng_template_0_Case_4_Template, 1, 1, "ng-container", 8)(5, AccordionItemDefaultSlotsComponent_ng_template_0_Case_5_Template, 1, 1, "ng-container", 8)(6, AccordionItemDefaultSlotsComponent_ng_template_0_Case_6_Template, 1, 1, "ng-container", 8)(7, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_7_Template, 2, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_9_Template, 2, 2, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(11, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_11_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor)(13, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_13_Template, 2, 2, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor)(15, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_15_Template, 2, 2, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor)(17, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_17_Template, 2, 2, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor)(19, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_19_Template, 2, 6, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor)(21, AccordionItemDefaultSlotsComponent_ng_template_0_Conditional_21_Template, 3, 7, "div", 9);
+    i0.ɵɵtemplate(0, AccordionItemDefaultSlotsComponent_ng_template_0_Case_0_Template, 1, 1, "ng-container", 9)(1, AccordionItemDefaultSlotsComponent_ng_template_0_Case_1_Template, 1, 1, "ng-container", 9)(2, AccordionItemDefaultSlotsComponent_ng_template_0_Case_2_Template, 1, 1, "ng-container", 9)(3, AccordionItemDefaultSlotsComponent_ng_template_0_Case_3_Template, 1, 1, "ng-container", 9)(4, AccordionItemDefaultSlotsComponent_ng_template_0_Case_4_Template, 1, 1, "ng-container", 9)(5, AccordionItemDefaultSlotsComponent_ng_template_0_Case_5_Template, 1, 1, "ng-container", 9)(6, AccordionItemDefaultSlotsComponent_ng_template_0_Case_6_Template, 1, 1, "ng-container", 9)(7, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_7_Template, 2, 2, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor)(9, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_9_Template, 2, 2, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor)(11, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_11_Template, 2, 2, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor)(13, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_13_Template, 2, 2, "ng-template", null, 4, i0.ɵɵtemplateRefExtractor)(15, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_15_Template, 2, 2, "ng-template", null, 5, i0.ɵɵtemplateRefExtractor)(17, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_17_Template, 2, 2, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor)(19, AccordionItemDefaultSlotsComponent_ng_template_0_ng_template_19_Template, 2, 7, "ng-template", null, 7, i0.ɵɵtemplateRefExtractor)(21, AccordionItemDefaultSlotsComponent_ng_template_0_Conditional_21_Template, 3, 8, "div", 10);
 } if (rf & 2) {
-    let tmp_11_0;
+    let tmp_12_0;
     const state_r10 = ctx.state;
-    i0.ɵɵconditional((tmp_11_0 = state_r10.itemHeadingTag) === "h1" ? 0 : tmp_11_0 === "h2" ? 1 : tmp_11_0 === "h3" ? 2 : tmp_11_0 === "h4" ? 3 : tmp_11_0 === "h5" ? 4 : tmp_11_0 === "h6" ? 5 : 6);
+    i0.ɵɵconditional((tmp_12_0 = state_r10.headingTag()) === "h1" ? 0 : tmp_12_0 === "h2" ? 1 : tmp_12_0 === "h3" ? 2 : tmp_12_0 === "h4" ? 3 : tmp_12_0 === "h5" ? 4 : tmp_12_0 === "h6" ? 5 : 6);
     i0.ɵɵadvance(21);
-    i0.ɵɵconditional(state_r10.shouldBeInDOM ? 21 : -1);
+    i0.ɵɵconditional(state_r10.shouldBeInDOM() ? 21 : -1);
 } }
-const _c2$3 = ["auAccordionItem", ""];
-const _c3$3 = ["*"];
+const _c2$3 = ["content"];
+const _c3$3 = ["auAccordionItem", ""];
+const _c4$3 = ["*"];
+const _c5$2 = (a0, a1, a2) => ({ state: a0, api: a1, directives: a2 });
 function AccordionItemComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-function AccordionItemComponent_ng_template_1_Template(rf, ctx) { }
+function AccordionItemComponent_ng_template_2_Template(rf, ctx) { }
+/**
+ * Directive to represent the body of an accordion item.
+ *
+ * This directive provides a template reference for the {@link AccordionItemContext}.
+ */
 class AccordionBodyDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function AccordionBodyDirective_Factory(t) { return new (t || AccordionBodyDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionBodyDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auAccordionItemBody]', standalone: true }]
     }], null, null); })();
+/**
+ * Directive to be used as an accordion header.
+ *
+ * This directive provides a template reference for the {@link AccordionItemContext}.
+ */
 class AccordionHeaderDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function AccordionHeaderDirective_Factory(t) { return new (t || AccordionHeaderDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionHeaderDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auAccordionItemHeader]', standalone: true }]
     }], null, null); })();
+/**
+ * Directive that represents the structure of an accordion item.
+ *
+ * This directive provides a template reference for the {@link AccordionItemContext}.
+ * It also includes a static method to guard the template context type.
+ */
 class AccordionItemStructureDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function AccordionItemStructureDirective_Factory(t) { return new (t || AccordionItemStructureDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionItemStructureDirective, [{
@@ -2074,25 +2154,25 @@ class AccordionItemStructureDirective {
         args: [{ selector: 'ng-template[auAccordionItemStructure]', standalone: true }]
     }], null, null); })();
 class AccordionItemDefaultSlotsComponent {
-    static { this.ɵfac = function AccordionItemDefaultSlotsComponent_Factory(t) { return new (t || AccordionItemDefaultSlotsComponent)(); }; }
+    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$3, 7);
         } 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", ""], [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", null, 0, i0.ɵɵtemplateRefExtractor);
-        } }, dependencies: [UseDirective, SlotDirective, NgTemplateOutlet], encapsulation: 2, changeDetection: 0 }); }
+        } }, 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.ɵɵ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, AccordionHeaderDirective, AccordionBodyDirective, NgTemplateOutlet],
+                imports: [UseDirective, SlotDirective, NgTemplateOutlet, AccordionItemStructureDirective],
                 template: `
-		<ng-template #structure let-state="state" let-widget="widget">
-			@switch (state.itemHeadingTag) {
+		<ng-template auAccordionItemStructure #structure let-state="state" let-api="api" let-directives="directives">
+			@switch (state.headingTag()) {
 				@case ('h1') {
 					<ng-container [ngTemplateOutlet]="h1"></ng-container>
 				}
@@ -2117,49 +2197,49 @@ class AccordionItemDefaultSlotsComponent {
 			}
 
 			<ng-template #h1>
-				<h1 class="accordion-header" [auUse]="widget.directives.headerDirective">
+				<h1 class="accordion-header" [auUse]="directives.headerDirective">
 					<ng-template [ngTemplateOutlet]="button"></ng-template>
 				</h1>
 			</ng-template>
 
 			<ng-template #h2>
-				<h2 class="accordion-header" [auUse]="widget.directives.headerDirective">
+				<h2 class="accordion-header" [auUse]="directives.headerDirective">
 					<ng-template [ngTemplateOutlet]="button"></ng-template>
 				</h2>
 			</ng-template>
 
 			<ng-template #h3>
-				<h3 class="accordion-header" [auUse]="widget.directives.headerDirective">
+				<h3 class="accordion-header" [auUse]="directives.headerDirective">
 					<ng-template [ngTemplateOutlet]="button"></ng-template>
 				</h3>
 			</ng-template>
 
 			<ng-template #h4>
-				<h4 class="accordion-header" [auUse]="widget.directives.headerDirective">
+				<h4 class="accordion-header" [auUse]="directives.headerDirective">
 					<ng-template [ngTemplateOutlet]="button"></ng-template>
 				</h4>
 			</ng-template>
 
 			<ng-template #h5>
-				<h5 class="accordion-header" [auUse]="widget.directives.headerDirective">
+				<h5 class="accordion-header" [auUse]="directives.headerDirective">
 					<ng-template [ngTemplateOutlet]="button"></ng-template>
 				</h5>
 			</ng-template>
 			<ng-template #h6>
-				<h6 class="accordion-header" [auUse]="widget.directives.headerDirective">
+				<h6 class="accordion-header" [auUse]="directives.headerDirective">
 					<ng-template [ngTemplateOutlet]="button"></ng-template>
 				</h6>
 			</ng-template>
 
 			<ng-template #button>
-				<button class="accordion-button " [auUse]="widget.directives.buttonDirective">
-					<ng-template [auSlotProps]="{state, widget}" [auSlot]="state.header"></ng-template>
+				<button class="accordion-button " [auUse]="directives.buttonDirective">
+					<ng-template [auSlotProps]="{state, directives, api}" [auSlot]="state.header()"></ng-template>
 				</button>
 			</ng-template>
-			@if (state.shouldBeInDOM) {
-				<div [auUse]="widget.directives.bodyContainerDirective" class="accordion-collapse">
-					<div class="accordion-body" [auUse]="widget.directives.bodyDirective">
-						<ng-template [auSlotProps]="{state, widget}" [auSlot]="state.children"></ng-template>
+			@if (state.shouldBeInDOM()) {
+				<div [auUse]="directives.bodyContainerDirective" class="accordion-collapse">
+					<div class="accordion-body" [auUse]="directives.bodyDirective">
+						<ng-template [auSlotProps]="{state, directives, api}" [auSlot]="state.children()"></ng-template>
 					</div>
 				</div>
 			}
@@ -2170,14 +2250,36 @@ class AccordionItemDefaultSlotsComponent {
             type: ViewChild,
             args: ['structure', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AccordionItemDefaultSlotsComponent, { className: "AccordionItemDefaultSlotsComponent", filePath: "components/accordion/accordion.component.ts", lineNumber: 134 }); })();
-const accordionItemDefaultSlotItemStructure = new ComponentTemplate(AccordionItemDefaultSlotsComponent, 'structure');
-const defaultConfig$3 = {
-    structure: accordionItemDefaultSlotItemStructure,
-};
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AccordionItemDefaultSlotsComponent, { className: "AccordionItemDefaultSlotsComponent", filePath: "components/accordion/accordion.component.ts", lineNumber: 148 }); })();
+/**
+ * Represents the default slot structure for an accordion item.
+ */
+const accordionItemDefaultSlotStructure = new ComponentTemplate(AccordionItemDefaultSlotsComponent, 'structure');
+/**
+ * AccordionItemComponent is a component that represents an item within an accordion.
+ */
 class AccordionItemComponent extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
+        super(callWidgetFactory({
+            factory: (arg) => inject(AccordionDirective).api.registerItem(arg),
+            defaultConfig: {
+                structure: accordionItemDefaultSlotStructure,
+            },
+            events: {
+                onVisibleChange: (visible) => this.visibleChange.emit(visible),
+                onHidden: () => this.hidden.emit(),
+                onShown: () => this.shown.emit(),
+            },
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.itemDirective);
+            },
+            slotTemplates: () => ({
+                structure: this.slotStructureFromContent?.templateRef,
+                header: this.slotHeaderFromContent?.templateRef,
+                children: this.slotBodyFromContent?.templateRef,
+            }),
+            slotChildren: () => this.slotChildren,
+        }));
         /**
          * An event fired when an item is shown.
          */
@@ -2192,32 +2294,11 @@ class AccordionItemComponent extends BaseWidgetDirective {
          * Event payload is the new value of visible.
          */
         this.visibleChange = new EventEmitter();
-        this.ad = inject(AccordionDirective);
-        this.defaultSlots = writable(defaultConfig$3);
-        this._widget = callWidgetFactory({
-            factory: ((arg) => this.ad.api.registerItem(arg)),
-            defaultConfig: this.defaultSlots,
-            events: {
-                onVisibleChange: (visible) => this.visibleChange.emit(visible),
-                onHidden: () => this.hidden.emit(),
-                onShown: () => this.shown.emit(),
-            },
-            afterInit: () => {
-                useDirectiveForHost(this._widget.directives.itemDirective);
-            },
-        });
-    }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            structure: this.slotStructureFromContent?.templateRef,
-            header: this.slotHeaderFromContent?.templateRef,
-            children: this.slotBodyFromContent?.templateRef,
-        });
     }
     ngAfterViewInit() {
         queueMicrotask(() => this.api.initDone());
     }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵAccordionItemComponent_BaseFactory; return function AccordionItemComponent_Factory(t) { return (ɵAccordionItemComponent_BaseFactory || (ɵAccordionItemComponent_BaseFactory = i0.ɵɵgetInheritedFactory(AccordionItemComponent)))(t || AccordionItemComponent); }; })(); }
+    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);
@@ -2227,14 +2308,18 @@ class AccordionItemComponent extends BaseWidgetDirective {
             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);
-        } }, 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: _c2$3, ngContentSelectors: _c3$3, decls: 2, vars: 6, consts: [[3, "auContentAsSlot"], [3, "auSlotProps", "auSlot"]], template: function AccordionItemComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, viewQuery: function AccordionItemComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c2$3, 7);
+        } 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$3, ngContentSelectors: _c4$3, 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", 0)(1, AccordionItemComponent_ng_template_1_Template, 0, 0, "ng-template", 1);
+            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) {
-            i0.ɵɵproperty("auContentAsSlot", ctx.defaultSlots);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("auSlotProps", i0.ɵɵpureFunction2(3, _c1$3, ctx.state(), ctx.widget))("auSlot", ctx.state().structure);
-        } }, dependencies: [SlotDirective, ContentAsSlotDirective], encapsulation: 2, changeDetection: 0 }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("auSlotProps", i0.ɵɵpureFunction3(2, _c5$2, ctx.state, ctx.api, ctx.directives))("auSlot", ctx.state.structure());
+        } }, dependencies: [SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionItemComponent, [{
         type: Component,
@@ -2246,15 +2331,13 @@ class AccordionItemComponent extends BaseWidgetDirective {
                 host: {
                     class: 'accordion-item',
                 },
-                imports: [SlotDirective, UseDirective, ContentAsSlotDirective],
+                imports: [SlotDirective, UseDirective],
                 template: `
-		<ng-template [auContentAsSlot]="defaultSlots">
-			<ng-content></ng-content>
-		</ng-template>
-		<ng-template [auSlotProps]="{state: state(), widget}" [auSlot]="state().structure"></ng-template>
+		<ng-template #content><ng-content></ng-content></ng-template>
+		<ng-template [auSlotProps]="{state, api, directives}" [auSlot]="state.structure()"></ng-template>
 	`,
             }]
-    }], null, { header: [{
+    }], () => [], { header: [{
             type: Input,
             args: ['auHeader']
         }], slotHeaderFromContent: [{
@@ -2317,11 +2400,31 @@ class AccordionItemComponent extends BaseWidgetDirective {
         }], 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: 159 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(AccordionItemComponent, { className: "AccordionItemComponent", filePath: "components/accordion/accordion.component.ts", lineNumber: 176 }); })();
+/**
+ * Directive for creating an accordion component.
+ *
+ * This directive extends the `BaseWidgetDirective` and provides various inputs and outputs
+ * to customize the behavior and appearance of the accordion and its items.
+ *
+ */
 class AccordionDirective extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
+        super(callWidgetFactory({
+            factory: export_createAccordion,
+            widgetName: 'accordion',
+            events: {
+                onItemShown: (id) => this.itemShown.emit(id),
+                onItemHidden: (id) => this.itemHidden.emit(id),
+            },
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.accordionDirective);
+            },
+        }));
         /**
          * An event fired when an item is shown.
          *
@@ -2344,19 +2447,8 @@ class AccordionDirective extends BaseWidgetDirective {
          * ```
          */
         this.itemHidden = new EventEmitter();
-        this._widget = callWidgetFactory({
-            factory: export_createAccordion,
-            widgetName: 'accordion',
-            events: {
-                onItemShown: (id) => this.itemShown.emit(id),
-                onItemHidden: (id) => this.itemHidden.emit(id),
-            },
-            afterInit: () => {
-                useDirectiveForHost(this._widget.directives.accordionDirective);
-            },
-        });
     }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵAccordionDirective_BaseFactory; return function AccordionDirective_Factory(t) { return (ɵAccordionDirective_BaseFactory || (ɵAccordionDirective_BaseFactory = i0.ɵɵgetInheritedFactory(AccordionDirective)))(t || AccordionDirective); }; })(); }
+    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] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccordionDirective, [{
@@ -2369,7 +2461,7 @@ class AccordionDirective extends BaseWidgetDirective {
                     class: 'accordion',
                 },
             }]
-    }], null, { closeOthers: [{
+    }], () => [], { closeOthers: [{
             type: Input,
             args: [{ alias: 'auCloseOthers', transform: auBooleanAttribute }]
         }], className: [{
@@ -2433,22 +2525,22 @@ function SliderDefaultHandleSlotComponent_ng_template_0_Template(rf, ctx) { if (
     i0.ɵɵtext(1, "\u00A0");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const widget_r1 = ctx.widget;
+    const directives_r1 = ctx.directives;
     const item_r2 = ctx.item;
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(3, _c2$2, widget_r1.directives.handleDirective, i0.ɵɵpureFunction1(1, _c1$2, item_r2)));
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(3, _c2$2, directives_r1.handleDirective, i0.ɵɵpureFunction1(1, _c1$2, item_r2)));
 } }
 const _c3$2 = ["structure"];
 const _forTrack0 = ($index, $item) => $item.id;
-const _c4$1 = a0 => ({ option: a0 });
-const _c5 = (a0, a1, a2) => ({ state: a0, widget: a1, value: a2 });
-const _c6 = (a0, a1, a2) => ({ state: a0, widget: a1, item: a2 });
+const _c4$2 = a0 => ({ option: a0 });
+const _c5$1 = (a0, a1, a2, a3) => ({ state: a0, api: a1, directives: a2, value: a3 });
+const _c6 = (a0, a1, a2, a3) => ({ state: a0, api: a1, directives: a2, item: a3 });
 const _c7 = a0 => ({ index: a0 });
 function SliderDefaultStructureSlotComponent_ng_template_0_For_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 2);
 } if (rf & 2) {
     const option_r1 = ctx.$implicit;
-    const widget_r2 = i0.ɵɵnextContext().widget;
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(3, _c2$2, widget_r2.directives.progressDisplayDirective, i0.ɵɵpureFunction1(1, _c4$1, option_r1)));
+    const directives_r2 = i0.ɵɵnextContext().directives;
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(3, _c2$2, directives_r2.progressDisplayDirective, i0.ɵɵpureFunction1(1, _c4$2, option_r1)));
 } }
 function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_3_ng_template_1_Template(rf, ctx) { }
 function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_3_ng_template_3_Template(rf, ctx) { }
@@ -2462,14 +2554,15 @@ function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_3_Templat
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     const state_r4 = ctx_r2.state;
-    const widget_r2 = ctx_r2.widget;
-    i0.ɵɵproperty("auUse", widget_r2.directives.minLabelDirective);
+    const directives_r2 = ctx_r2.directives;
+    const api_r5 = ctx_r2.api;
+    i0.ɵɵproperty("auUse", directives_r2.minLabelDirective);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r4.label)("auSlotProps", i0.ɵɵpureFunction3(6, _c5, state_r4, widget_r2, state_r4.min));
+    i0.ɵɵproperty("auSlot", state_r4.label())("auSlotProps", i0.ɵɵpureFunction4(6, _c5$1, state_r4, api_r5, directives_r2, state_r4.min()));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auUse", widget_r2.directives.maxLabelDirective);
+    i0.ɵɵproperty("auUse", directives_r2.maxLabelDirective);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r4.label)("auSlotProps", i0.ɵɵpureFunction3(10, _c5, state_r4, widget_r2, state_r4.max));
+    i0.ɵɵproperty("auSlot", state_r4.label())("auSlotProps", i0.ɵɵpureFunction4(11, _c5$1, state_r4, api_r5, directives_r2, state_r4.max()));
 } }
 function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditional_1_ng_template_0_Template(rf, ctx) { }
 function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditional_1_ng_template_2_Template(rf, ctx) { }
@@ -2480,10 +2573,11 @@ function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditi
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     const state_r4 = ctx_r2.state;
-    const widget_r2 = ctx_r2.widget;
-    i0.ɵɵproperty("auSlot", state_r4.label)("auSlotProps", i0.ɵɵpureFunction3(4, _c5, state_r4, widget_r2, state_r4.sortedValues[1]));
+    const directives_r2 = ctx_r2.directives;
+    const api_r5 = ctx_r2.api;
+    i0.ɵɵproperty("auSlot", state_r4.label())("auSlotProps", i0.ɵɵpureFunction4(4, _c5$1, state_r4, api_r5, directives_r2, state_r4.sortedValues()[1]));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", state_r4.label)("auSlotProps", i0.ɵɵpureFunction3(8, _c5, state_r4, widget_r2, state_r4.sortedValues[0]));
+    i0.ɵɵproperty("auSlot", state_r4.label())("auSlotProps", i0.ɵɵpureFunction4(9, _c5$1, state_r4, api_r5, directives_r2, state_r4.sortedValues()[0]));
 } }
 function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditional_2_ng_template_0_Template(rf, ctx) { }
 function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditional_2_ng_template_2_Template(rf, ctx) { }
@@ -2494,22 +2588,23 @@ function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditi
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     const state_r4 = ctx_r2.state;
-    const widget_r2 = ctx_r2.widget;
-    i0.ɵɵproperty("auSlot", state_r4.label)("auSlotProps", i0.ɵɵpureFunction3(4, _c5, state_r4, widget_r2, state_r4.sortedValues[0]));
+    const directives_r2 = ctx_r2.directives;
+    const api_r5 = ctx_r2.api;
+    i0.ɵɵproperty("auSlot", state_r4.label())("auSlotProps", i0.ɵɵpureFunction4(4, _c5$1, state_r4, api_r5, directives_r2, state_r4.sortedValues()[0]));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", state_r4.label)("auSlotProps", i0.ɵɵpureFunction3(8, _c5, state_r4, widget_r2, state_r4.sortedValues[1]));
+    i0.ɵɵproperty("auSlot", state_r4.label())("auSlotProps", i0.ɵɵpureFunction4(9, _c5$1, state_r4, api_r5, directives_r2, state_r4.sortedValues()[1]));
 } }
 function SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtemplate(1, SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditional_1_Template, 3, 12)(2, SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditional_2_Template, 3, 12);
+    i0.ɵɵtemplate(1, SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditional_1_Template, 3, 14)(2, SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Conditional_2_Template, 3, 14);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     const state_r4 = ctx_r2.state;
-    const widget_r2 = ctx_r2.widget;
-    i0.ɵɵproperty("auUse", widget_r2.directives.combinedHandleLabelDisplayDirective);
+    const directives_r2 = ctx_r2.directives;
+    i0.ɵɵproperty("auUse", directives_r2.combinedHandleLabelDisplayDirective);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r4.rtl ? 1 : 2);
+    i0.ɵɵconditional(state_r4.rtl() ? 1 : 2);
 } }
 function SliderDefaultStructureSlotComponent_ng_template_0_For_6_ng_template_0_Template(rf, ctx) { }
 function SliderDefaultStructureSlotComponent_ng_template_0_For_6_Conditional_1_ng_template_1_Template(rf, ctx) { }
@@ -2518,46 +2613,53 @@ function SliderDefaultStructureSlotComponent_ng_template_0_For_6_Conditional_1_T
     i0.ɵɵtemplate(1, SliderDefaultStructureSlotComponent_ng_template_0_For_6_Conditional_1_ng_template_1_Template, 0, 0, "ng-template", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ɵ$index_32_r5 = i0.ɵɵnextContext().$index;
+    const ɵ$index_32_r6 = i0.ɵɵnextContext().$index;
     const ctx_r2 = i0.ɵɵnextContext();
     const state_r4 = ctx_r2.state;
-    const widget_r2 = ctx_r2.widget;
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(5, _c2$2, widget_r2.directives.handleLabelDisplayDirective, i0.ɵɵpureFunction1(3, _c7, ɵ$index_32_r5)));
+    const directives_r2 = ctx_r2.directives;
+    const api_r5 = ctx_r2.api;
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(5, _c2$2, directives_r2.handleLabelDisplayDirective, i0.ɵɵpureFunction1(3, _c7, ɵ$index_32_r6)));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r4.label)("auSlotProps", i0.ɵɵpureFunction3(8, _c5, state_r4, widget_r2, state_r4.values[ɵ$index_32_r5]));
+    i0.ɵɵproperty("auSlot", state_r4.label())("auSlotProps", i0.ɵɵpureFunction4(8, _c5$1, state_r4, api_r5, directives_r2, state_r4.values()[ɵ$index_32_r6]));
 } }
 function SliderDefaultStructureSlotComponent_ng_template_0_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, SliderDefaultStructureSlotComponent_ng_template_0_For_6_ng_template_0_Template, 0, 0, "ng-template", 3)(1, SliderDefaultStructureSlotComponent_ng_template_0_For_6_Conditional_1_Template, 2, 12, "div", 2);
+    i0.ɵɵtemplate(0, SliderDefaultStructureSlotComponent_ng_template_0_For_6_ng_template_0_Template, 0, 0, "ng-template", 3)(1, SliderDefaultStructureSlotComponent_ng_template_0_For_6_Conditional_1_Template, 2, 13, "div", 2);
 } if (rf & 2) {
-    const item_r6 = ctx.$implicit;
+    const item_r7 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext();
     const state_r4 = ctx_r2.state;
-    const widget_r2 = ctx_r2.widget;
-    i0.ɵɵproperty("auSlot", state_r4.handle)("auSlotProps", i0.ɵɵpureFunction3(3, _c6, state_r4, widget_r2, item_r6));
+    const directives_r2 = ctx_r2.directives;
+    const api_r5 = ctx_r2.api;
+    i0.ɵɵproperty("auSlot", state_r4.handle())("auSlotProps", i0.ɵɵpureFunction4(3, _c6, state_r4, api_r5, directives_r2, item_r7));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r4.showValueLabels && !state_r4.combinedLabelDisplay ? 1 : -1);
+    i0.ɵɵconditional(state_r4.showValueLabels() && !state_r4.combinedLabelDisplay() ? 1 : -1);
 } }
 function SliderDefaultStructureSlotComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵrepeaterCreate(0, SliderDefaultStructureSlotComponent_ng_template_0_For_1_Template, 1, 6, "div", 2, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelement(2, "div", 2);
-    i0.ɵɵtemplate(3, SliderDefaultStructureSlotComponent_ng_template_0_Conditional_3_Template, 4, 14)(4, SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Template, 3, 2, "div", 2);
-    i0.ɵɵrepeaterCreate(5, SliderDefaultStructureSlotComponent_ng_template_0_For_6_Template, 2, 7, null, null, _forTrack0);
+    i0.ɵɵtemplate(3, SliderDefaultStructureSlotComponent_ng_template_0_Conditional_3_Template, 4, 16)(4, SliderDefaultStructureSlotComponent_ng_template_0_Conditional_4_Template, 3, 2, "div", 2);
+    i0.ɵɵrepeaterCreate(5, SliderDefaultStructureSlotComponent_ng_template_0_For_6_Template, 2, 8, null, null, _forTrack0);
 } if (rf & 2) {
     const state_r4 = ctx.state;
-    const widget_r2 = ctx.widget;
-    i0.ɵɵrepeater(state_r4.progressDisplayOptions);
+    const directives_r2 = ctx.directives;
+    i0.ɵɵrepeater(state_r4.progressDisplayOptions());
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auUse", widget_r2.directives.clickableAreaDirective);
+    i0.ɵɵproperty("auUse", directives_r2.clickableAreaDirective);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r4.showMinMaxLabels ? 3 : -1);
+    i0.ɵɵconditional(state_r4.showMinMaxLabels() ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r4.showValueLabels && state_r4.combinedLabelDisplay ? 4 : -1);
+    i0.ɵɵconditional(state_r4.showValueLabels() && state_r4.combinedLabelDisplay() ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(state_r4.sortedHandles);
+    i0.ɵɵrepeater(state_r4.sortedHandles());
 } }
 const _c8 = ["auSlider", ""];
-const _c9 = (a0, a1) => ({ state: a0, widget: a1 });
+const _c9 = (a0, a1, a2) => ({ state: a0, api: a1, directives: a2 });
 function SliderComponent_ng_template_0_Template(rf, ctx) { }
+/**
+ * Directive to provide a template reference for slider labels.
+ *
+ * This directive uses a template reference to render the {@link SliderSlotLabelContext}.
+ */
 class SliderLabelDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
@@ -2565,13 +2667,18 @@ class SliderLabelDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function SliderLabelDirective_Factory(t) { return new (t || SliderLabelDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderLabelDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auSliderLabel]', standalone: true }]
     }], null, null); })();
+/**
+ * Directive representing a handle for a slider component.
+ *
+ * This directive uses a template reference to render the {@link SliderSlotLabelContext}.
+ */
 class SliderHandleDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
@@ -2579,7 +2686,7 @@ class SliderHandleDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function SliderHandleDirective_Factory(t) { return new (t || SliderHandleDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderHandleDirective, [{
@@ -2587,16 +2694,7 @@ class SliderHandleDirective {
         args: [{ selector: 'ng-template[auSliderHandle]', standalone: true }]
     }], null, null); })();
 class SliderDefaultHandleSlotComponent {
-    constructor() {
-        this._zone = inject(NgZone);
-    }
-    onKeyDown(event, handleId, widgetOnKeyDownFn) {
-        widgetOnKeyDownFn(event, handleId);
-        this._zone.onStable.pipe(take(1)).subscribe(() => {
-            event.target.focus();
-        });
-    }
-    static { this.ɵfac = function SliderDefaultHandleSlotComponent_Factory(t) { return new (t || SliderDefaultHandleSlotComponent)(); }; }
+    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$2, 7);
         } if (rf & 2) {
@@ -2613,8 +2711,8 @@ class SliderDefaultHandleSlotComponent {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [UseDirective, SliderHandleDirective],
                 template: `
-		<ng-template auSliderHandle #handle let-state="state" let-widget="widget" let-item="item">
-			<button [auUse]="[widget.directives.handleDirective, {item}]">&nbsp;</button>
+		<ng-template auSliderHandle #handle let-state="state" let-directives="directives" let-item="item">
+			<button [auUse]="[directives.handleDirective, {item}]">&nbsp;</button>
 		</ng-template>
 	`,
             }]
@@ -2622,8 +2720,16 @@ class SliderDefaultHandleSlotComponent {
             type: ViewChild,
             args: ['handle', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultHandleSlotComponent, { className: "SliderDefaultHandleSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 60 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultHandleSlotComponent, { className: "SliderDefaultHandleSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 65 }); })();
+/**
+ * A constant representing the default slot handle for the slider component.
+ */
 const sliderDefaultSlotHandle = new ComponentTemplate(SliderDefaultHandleSlotComponent, 'handle');
+/**
+ * Directive that provides structure for the slider component.
+ *
+ * This directive uses a `TemplateRef` to handle the context of the slider slot.
+ */
 class SliderStructureDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
@@ -2631,7 +2737,7 @@ class SliderStructureDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function SliderStructureDirective_Factory(t) { return new (t || SliderStructureDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderStructureDirective, [{
@@ -2639,7 +2745,7 @@ class SliderStructureDirective {
         args: [{ selector: 'ng-template[auSliderStructure]', standalone: true }]
     }], null, null); })();
 class SliderDefaultStructureSlotComponent {
-    static { this.ɵfac = function SliderDefaultStructureSlotComponent_Factory(t) { return new (t || SliderDefaultStructureSlotComponent)(); }; }
+    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$2, 7);
         } if (rf & 2) {
@@ -2656,35 +2762,35 @@ class SliderDefaultStructureSlotComponent {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, SliderStructureDirective, UseDirective],
                 template: `
-		<ng-template auSliderStructure #structure let-state="state" let-widget="widget">
-			@for (option of state.progressDisplayOptions; track option) {
-				<div [auUse]="[widget.directives.progressDisplayDirective, {option}]"></div>
+		<ng-template auSliderStructure #structure let-state="state" let-directives="directives" let-api="api">
+			@for (option of state.progressDisplayOptions(); track option) {
+				<div [auUse]="[directives.progressDisplayDirective, {option}]"></div>
 			}
-			<div [auUse]="widget.directives.clickableAreaDirective"></div>
-			@if (state.showMinMaxLabels) {
-				<div [auUse]="widget.directives.minLabelDirective">
-					<ng-template [auSlot]="state.label" [auSlotProps]="{state, widget, value: state.min}"></ng-template>
+			<div [auUse]="directives.clickableAreaDirective"></div>
+			@if (state.showMinMaxLabels()) {
+				<div [auUse]="directives.minLabelDirective">
+					<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.min()}"></ng-template>
 				</div>
-				<div [auUse]="widget.directives.maxLabelDirective">
-					<ng-template [auSlot]="state.label" [auSlotProps]="{state, widget, value: state.max}"></ng-template>
+				<div [auUse]="directives.maxLabelDirective">
+					<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.max()}"></ng-template>
 				</div>
 			}
-			@if (state.showValueLabels && state.combinedLabelDisplay) {
-				<div [auUse]="widget.directives.combinedHandleLabelDisplayDirective">
-					@if (state.rtl) {
-						<ng-template [auSlot]="state.label" [auSlotProps]="{state, widget, value: state.sortedValues[1]}"></ng-template> -
-						<ng-template [auSlot]="state.label" [auSlotProps]="{state, widget, value: state.sortedValues[0]}"></ng-template>
+			@if (state.showValueLabels() && state.combinedLabelDisplay()) {
+				<div [auUse]="directives.combinedHandleLabelDisplayDirective">
+					@if (state.rtl()) {
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.sortedValues()[1]}"></ng-template> -
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.sortedValues()[0]}"></ng-template>
 					} @else {
-						<ng-template [auSlot]="state.label" [auSlotProps]="{state, widget, value: state.sortedValues[0]}"></ng-template> -
-						<ng-template [auSlot]="state.label" [auSlotProps]="{state, widget, value: state.sortedValues[1]}"></ng-template>
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.sortedValues()[0]}"></ng-template> -
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.sortedValues()[1]}"></ng-template>
 					}
 				</div>
 			}
-			@for (item of state.sortedHandles; track item.id; let i = $index) {
-				<ng-template [auSlot]="state.handle" [auSlotProps]="{state, widget, item}"></ng-template>
-				@if (state.showValueLabels && !state.combinedLabelDisplay) {
-					<div [auUse]="[widget.directives.handleLabelDisplayDirective, {index: i}]">
-						<ng-template [auSlot]="state.label" [auSlotProps]="{state, widget, value: state.values[i]}"></ng-template>
+			@for (item of state.sortedHandles(); track item.id; let i = $index) {
+				<ng-template [auSlot]="state.handle()" [auSlotProps]="{state, api, directives, item}"></ng-template>
+				@if (state.showValueLabels() && !state.combinedLabelDisplay()) {
+					<div [auUse]="[directives.handleLabelDisplayDirective, {index: i}]">
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.values()[i]}"></ng-template>
 					</div>
 				}
 			}
@@ -2695,20 +2801,25 @@ class SliderDefaultStructureSlotComponent {
             type: ViewChild,
             args: ['structure', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultStructureSlotComponent, { className: "SliderDefaultStructureSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 123 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultStructureSlotComponent, { className: "SliderDefaultStructureSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 127 }); })();
+/**
+ * Represents the default slot structure for the slider component.
+ */
 const sliderDefaultSlotStructure = new ComponentTemplate(SliderDefaultStructureSlotComponent, 'structure');
-const defaultConfig$2 = {
-    structure: sliderDefaultSlotStructure,
-    handle: sliderDefaultSlotHandle,
-};
+/**
+ * SliderComponent is an Angular component that extends the BaseWidgetDirective
+ * to provide a customizable slider widget. This component allows for various
+ * configurations and customizations through its inputs and outputs.
+ */
 class SliderComponent extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
-        this.defaultSlots = writable(defaultConfig$2);
-        this._widget = callWidgetFactory({
+        super(callWidgetFactory({
             factory: export_createSlider,
             widgetName: 'slider',
-            defaultConfig: this.defaultSlots,
+            defaultConfig: {
+                structure: sliderDefaultSlotStructure,
+                handle: sliderDefaultSlotHandle,
+            },
             events: {
                 onValuesChange: (event) => {
                     this.onChange(event);
@@ -2716,10 +2827,15 @@ class SliderComponent extends BaseWidgetDirective {
                     this.valuesChange.emit(event);
                 },
             },
-            afterInit: () => {
-                useDirectiveForHost(this._widget.directives.sliderDirective);
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.sliderDirective);
             },
-        });
+            slotTemplates: () => ({
+                structure: this.slotStructureFromContent?.templateRef,
+                handle: this.slotHandleFromContent?.templateRef,
+                label: this.slotLabelFromContent?.templateRef,
+            }),
+        }));
         /**
          * An event emitted when slider values are changed
          *
@@ -2745,32 +2861,25 @@ class SliderComponent extends BaseWidgetDirective {
     }
     writeValue(value) {
         if (Array.isArray(value)) {
-            this._widget.patch({
+            this['_widget'].patch({
                 values: value,
             });
         }
         else {
-            this._widget.patch({
+            this['_widget'].patch({
                 values: [value],
             });
         }
     }
     setDisabledState(isDisabled) {
-        this._widget.patch({
+        this['_widget'].patch({
             disabled: isDisabled,
         });
     }
     handleBlur() {
         this.onTouched();
     }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            structure: this.slotStructureFromContent?.templateRef,
-            handle: this.slotHandleFromContent?.templateRef,
-            label: this.slotLabelFromContent?.templateRef,
-        });
-    }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵSliderComponent_BaseFactory; return function SliderComponent_Factory(t) { return (ɵSliderComponent_BaseFactory || (ɵSliderComponent_BaseFactory = i0.ɵɵgetInheritedFactory(SliderComponent)))(t || SliderComponent); }; })(); }
+    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);
@@ -2782,10 +2891,10 @@ class SliderComponent extends BaseWidgetDirective {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotHandleFromContent = _t.first);
         } }, 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, decls: 1, vars: 5, consts: [[3, "auSlot", "auSlotProps"]], template: function SliderComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, 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, 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.ɵɵpureFunction2(2, _c9, ctx.state(), ctx.widget));
+            i0.ɵɵproperty("auSlot", ctx.state.structure())("auSlotProps", i0.ɵɵpureFunction3(2, _c9, ctx.state, ctx.api, ctx.directives));
         } }, dependencies: [SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderComponent, [{
@@ -2800,9 +2909,9 @@ class SliderComponent extends BaseWidgetDirective {
                 host: {
                     '(blur)': 'handleBlur()',
                 },
-                template: ` <ng-template [auSlot]="state().structure" [auSlotProps]="{state: state(), widget}"></ng-template> `,
+                template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template> `,
             }]
-    }], null, { className: [{
+    }], () => [], { className: [{
             type: Input,
             args: ['auClassName']
         }], min: [{
@@ -2863,7 +2972,7 @@ class SliderComponent extends BaseWidgetDirective {
             type: ContentChild,
             args: [SliderHandleDirective, { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderComponent, { className: "SliderComponent", filePath: "components/slider/slider.component.ts", lineNumber: 147 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderComponent, { className: "SliderComponent", filePath: "components/slider/slider.component.ts", lineNumber: 153 }); })();
 
 /**
  * Retrieve a shallow copy of the default Progressbar config
@@ -2878,7 +2987,7 @@ const export_getProgressbarDefaultConfig = getProgressbarDefaultConfig;
 const export_createProgressbar = createProgressbar;
 
 const _c0$1 = ["structure"];
-const _c1$1 = (a0, a1) => ({ state: a0, widget: a1 });
+const _c1$1 = (a0, a1, a2) => ({ state: a0, api: a1, directives: a2 });
 function ProgressbarDefaultSlotsComponent_ng_template_0_ng_template_2_Template(rf, ctx) { }
 function ProgressbarDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2)(1, "div", 3);
@@ -2886,21 +2995,46 @@ function ProgressbarDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const state_r1 = ctx.state;
-    const widget_r2 = ctx.widget;
-    i0.ɵɵstyleProp("height", state_r1.height);
+    const api_r2 = ctx.api;
+    const directives_r3 = ctx.directives;
+    i0.ɵɵstyleProp("height", state_r1.height());
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("width", state_r1.percentage, "%");
-    i0.ɵɵclassProp("progress-bar-striped", state_r1.striped)("progress-bar-animated", state_r1.animated);
-    i0.ɵɵproperty("ngClass", state_r1.type ? "text-bg-" + state_r1.type : undefined);
+    i0.ɵɵstyleProp("width", state_r1.percentage(), "%");
+    i0.ɵɵclassProp("progress-bar-striped", state_r1.striped())("progress-bar-animated", state_r1.animated());
+    i0.ɵɵproperty("ngClass", state_r1.type() ? "text-bg-" + state_r1.type() : undefined);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r1.children)("auSlotProps", i0.ɵɵpureFunction2(11, _c1$1, state_r1, widget_r2));
+    i0.ɵɵproperty("auSlot", state_r1.children())("auSlotProps", i0.ɵɵpureFunction3(11, _c1$1, state_r1, api_r2, directives_r3));
 } }
-const _c2$1 = ["auProgressbar", ""];
-const _c3$1 = ["*"];
+const _c2$1 = ["content"];
+const _c3$1 = ["auProgressbar", ""];
+const _c4$1 = ["*"];
 function ProgressbarComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-function ProgressbarComponent_ng_template_1_Template(rf, ctx) { }
+function ProgressbarComponent_ng_template_2_Template(rf, ctx) { }
+/**
+ * Directive that provides a template reference for the progress bar context.
+ * This directive provides a template reference for the {@link ProgressbarContext}.
+ */
+class ProgressbarBodyDirective {
+    constructor() {
+        this.templateRef = inject((TemplateRef));
+    }
+    static ngTemplateContextGuard(_dir, context) {
+        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 }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressbarBodyDirective, [{
+        type: Directive,
+        args: [{ selector: 'ng-template[auProgressbarBody]', standalone: true }]
+    }], null, null); })();
+/**
+ * Directive to define the structure of a progress bar.
+ *
+ * This directive provides a template reference for the {@link ProgressbarContext}.
+ */
 class ProgressbarStructureDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
@@ -2908,7 +3042,7 @@ class ProgressbarStructureDirective {
     static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ProgressbarStructureDirective_Factory(t) { return new (t || ProgressbarStructureDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressbarStructureDirective, [{
@@ -2916,14 +3050,14 @@ class ProgressbarStructureDirective {
         args: [{ selector: 'ng-template[auProgressbarStructure]', standalone: true }]
     }], null, null); })();
 class ProgressbarDefaultSlotsComponent {
-    static { this.ɵfac = function ProgressbarDefaultSlotsComponent_Factory(t) { return new (t || ProgressbarDefaultSlotsComponent)(); }; }
+    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$1, 7);
         } 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.ɵɵtemplate(0, ProgressbarDefaultSlotsComponent_ng_template_0_Template, 3, 14, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
+            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, [{
@@ -2933,16 +3067,16 @@ class ProgressbarDefaultSlotsComponent {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [NgClass, SlotDirective, ProgressbarStructureDirective],
                 template: `
-		<ng-template auProgressbarStructure #structure let-state="state" let-widget="widget">
-			<div class="progress" [style.height]="state.height">
+		<ng-template auProgressbarStructure #structure let-state="state" let-api="api" let-directives="directives">
+			<div class="progress" [style.height]="state.height()">
 				<div
 					class="progress-bar"
-					[class.progress-bar-striped]="state.striped"
-					[class.progress-bar-animated]="state.animated"
-					[ngClass]="state.type ? 'text-bg-' + state.type : undefined"
-					[style.width.%]="state.percentage"
+					[class.progress-bar-striped]="state.striped()"
+					[class.progress-bar-animated]="state.animated()"
+					[ngClass]="state.type() ? 'text-bg-' + state.type() : undefined"
+					[style.width.%]="state.percentage()"
 				>
-					<ng-template [auSlot]="state.children" [auSlotProps]="{state, widget}"></ng-template>
+					<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}"></ng-template>
 				</div>
 			</div>
 		</ng-template>
@@ -2952,63 +3086,72 @@ class ProgressbarDefaultSlotsComponent {
             type: ViewChild,
             args: ['structure', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressbarDefaultSlotsComponent, { className: "ProgressbarDefaultSlotsComponent", filePath: "components/progressbar/progressbar.component.ts", lineNumber: 49 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressbarDefaultSlotsComponent, { className: "ProgressbarDefaultSlotsComponent", filePath: "components/progressbar/progressbar.component.ts", lineNumber: 63 }); })();
+/**
+ * Represents the default slot structure for the progress bar component.
+ */
 const progressbarDefaultSlotStructure = new ComponentTemplate(ProgressbarDefaultSlotsComponent, 'structure');
-const defaultConfig$1 = {
-    structure: progressbarDefaultSlotStructure,
-};
+/**
+ * ProgressbarComponent is a UI component that extends the BaseWidgetDirective
+ * to create a customizable progress bar widget. It provides various inputs
+ * to configure the appearance and behavior of the progress bar.
+ *
+ */
 class ProgressbarComponent extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
-        this.defaultSlots = writable(defaultConfig$1);
-        this._widget = callWidgetFactory({
+        super(callWidgetFactory({
             factory: export_createProgressbar,
             widgetName: 'progressbar',
-            defaultConfig: this.defaultSlots,
-            afterInit: () => {
-                useDirectiveForHost(this._widget.directives.ariaDirective);
+            defaultConfig: {
+                structure: progressbarDefaultSlotStructure,
             },
-        });
-    }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            children: undefined,
-            structure: this.slotStructureFromContent?.templateRef,
-        });
-    }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵProgressbarComponent_BaseFactory; return function ProgressbarComponent_Factory(t) { return (ɵProgressbarComponent_BaseFactory || (ɵProgressbarComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ProgressbarComponent)))(t || ProgressbarComponent); }; })(); }
+            afterInit: (widget) => useDirectiveForHost(widget.directives.ariaDirective),
+            slotTemplates: () => ({
+                structure: this.slotStructureFromContent?.templateRef,
+                children: this.slotDefaultFromContent?.templateRef,
+            }),
+            slotChildren: () => this.slotChildren,
+        }));
+    }
+    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);
         } if (rf & 2) {
             let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotDefaultFromContent = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotStructureFromContent = _t.first);
+        } }, viewQuery: function ProgressbarComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c2$1, 7);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.slotChildren = _t.first);
         } }, 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: _c2$1, ngContentSelectors: _c3$1, decls: 2, vars: 6, consts: [[3, "auContentAsSlot"], [3, "auSlot", "auSlotProps"]], template: function ProgressbarComponent_Template(rf, ctx) { if (rf & 1) {
+            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$1, ngContentSelectors: _c4$1, 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", 0)(1, ProgressbarComponent_ng_template_1_Template, 0, 0, "ng-template", 1);
+            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) {
-            i0.ɵɵproperty("auContentAsSlot", ctx.defaultSlots);
-            i0.ɵɵadvance();
-            i0.ɵɵproperty("auSlot", ctx.state().structure)("auSlotProps", i0.ɵɵpureFunction2(3, _c1$1, ctx.state(), ctx.widget));
-        } }, dependencies: [SlotDirective, ContentAsSlotDirective], encapsulation: 2, changeDetection: 0 }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("auSlot", ctx.state.structure())("auSlotProps", i0.ɵɵpureFunction3(2, _c1$1, ctx.state, ctx.api, ctx.directives));
+        } }, dependencies: [SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProgressbarComponent, [{
         type: Component,
         args: [{
                 selector: '[auProgressbar]',
                 standalone: true,
-                imports: [SlotDirective, ContentAsSlotDirective],
+                imports: [SlotDirective],
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 host: {
-                    '[class]': 'state().className',
+                    '[class]': 'state.className()',
                 },
                 template: `
-		<ng-template [auContentAsSlot]="defaultSlots"><ng-content></ng-content></ng-template>
-		<ng-template [auSlot]="state().structure" [auSlotProps]="{state: state(), widget}"></ng-template>
+		<ng-template #content><ng-content></ng-content></ng-template>
+		<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template>
 	`,
             }]
-    }], null, { ariaLabel: [{
+    }], () => [], { ariaLabel: [{
             type: Input,
             args: ['auAriaLabel']
         }], min: [{
@@ -3026,6 +3169,9 @@ class ProgressbarComponent extends BaseWidgetDirective {
         }], children: [{
             type: Input,
             args: ['auChildren']
+        }], slotDefaultFromContent: [{
+            type: ContentChild,
+            args: [ProgressbarBodyDirective, { static: false }]
         }], structure: [{
             type: Input,
             args: ['auStructure']
@@ -3047,8 +3193,11 @@ class ProgressbarComponent extends BaseWidgetDirective {
         }], 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: 73 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ProgressbarComponent, { className: "ProgressbarComponent", filePath: "components/progressbar/progressbar.component.ts", lineNumber: 91 }); })();
 
 /**
  * Retrieve a shallow copy of the default Toast config
@@ -3063,13 +3212,13 @@ const export_getToastDefaultConfig = getToastDefaultConfig;
 const export_createToast = createToast;
 
 const _c0 = ["structure"];
-const _c1 = (a0, a1) => ({ state: a0, widget: a1 });
+const _c1 = (a0, a1, a2) => ({ state: a0, api: a1, directives: a2 });
 function ToastDefaultSlotsComponent_ng_template_0_Conditional_0_ng_template_1_Template(rf, ctx) { }
 function ToastDefaultSlotsComponent_ng_template_0_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "button", 6);
 } if (rf & 2) {
-    const widget_r1 = i0.ɵɵnextContext(2).widget;
-    i0.ɵɵproperty("auUse", widget_r1.directives.closeButtonDirective);
+    const directives_r1 = i0.ɵɵnextContext(2).directives;
+    i0.ɵɵproperty("auUse", directives_r1.closeButtonDirective);
 } }
 function ToastDefaultSlotsComponent_ng_template_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
@@ -3078,88 +3227,103 @@ function ToastDefaultSlotsComponent_ng_template_0_Conditional_0_Template(rf, ctx
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     const state_r3 = ctx_r1.state;
-    const widget_r1 = ctx_r1.widget;
+    const api_r4 = ctx_r1.api;
+    const directives_r1 = ctx_r1.directives;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", state_r3.header)("auSlotProps", i0.ɵɵpureFunction2(3, _c1, state_r3, widget_r1));
+    i0.ɵɵproperty("auSlot", state_r3.header())("auSlotProps", i0.ɵɵpureFunction3(3, _c1, state_r3, api_r4, directives_r1));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r3.dismissible ? 2 : -1);
+    i0.ɵɵconditional(state_r3.dismissible() ? 2 : -1);
 } }
 function ToastDefaultSlotsComponent_ng_template_0_ng_template_2_Template(rf, ctx) { }
 function ToastDefaultSlotsComponent_ng_template_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "button", 5);
 } if (rf & 2) {
-    const widget_r1 = i0.ɵɵnextContext().widget;
-    i0.ɵɵproperty("auUse", widget_r1.directives.closeButtonDirective);
+    const directives_r1 = i0.ɵɵnextContext().directives;
+    i0.ɵɵproperty("auUse", directives_r1.closeButtonDirective);
 } }
 function ToastDefaultSlotsComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ToastDefaultSlotsComponent_ng_template_0_Conditional_0_Template, 3, 6, "div", 2);
+    i0.ɵɵtemplate(0, ToastDefaultSlotsComponent_ng_template_0_Conditional_0_Template, 3, 7, "div", 2);
     i0.ɵɵelementStart(1, "div", 3);
     i0.ɵɵtemplate(2, ToastDefaultSlotsComponent_ng_template_0_ng_template_2_Template, 0, 0, "ng-template", 4);
     i0.ɵɵelementEnd();
     i0.ɵɵtemplate(3, ToastDefaultSlotsComponent_ng_template_0_Conditional_3_Template, 1, 1, "button", 5);
 } if (rf & 2) {
     const state_r3 = ctx.state;
-    const widget_r1 = ctx.widget;
-    i0.ɵɵconditional(state_r3.header ? 0 : -1);
+    const api_r4 = ctx.api;
+    const directives_r1 = ctx.directives;
+    i0.ɵɵconditional(state_r3.header() ? 0 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("auSlot", state_r3.children)("auSlotProps", i0.ɵɵpureFunction2(4, _c1, state_r3, widget_r1));
+    i0.ɵɵproperty("auSlot", state_r3.children())("auSlotProps", i0.ɵɵpureFunction3(4, _c1, state_r3, api_r4, directives_r1));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(state_r3.dismissible && !state_r3.header ? 3 : -1);
+    i0.ɵɵconditional(state_r3.dismissible() && !state_r3.header() ? 3 : -1);
 } }
-const _c2 = ["auToast", ""];
-const _c3 = ["*"];
-const _c4 = (a0, a1, a2) => [a0, a1, a2];
+const _c2 = ["content"];
+const _c3 = ["auToast", ""];
+const _c4 = ["*"];
+const _c5 = (a0, a1, a2) => [a0, a1, a2];
 function ToastComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵprojection(0);
 } }
-function ToastComponent_Conditional_1_ng_template_1_Template(rf, ctx) { }
-function ToastComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function ToastComponent_Conditional_2_ng_template_1_Template(rf, ctx) { }
+function ToastComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵtemplate(1, ToastComponent_Conditional_1_ng_template_1_Template, 0, 0, "ng-template", 3);
+    i0.ɵɵtemplate(1, ToastComponent_Conditional_2_ng_template_1_Template, 0, 0, "ng-template", 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("d-flex", !ctx_r0.state().header)("toast-dismissible", ctx_r0.state().dismissible);
-    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction3(7, _c4, ctx_r0.widget.directives.autoHideDirective, ctx_r0.widget.directives.transitionDirective, ctx_r0.widget.directives.bodyDirective));
+    i0.ɵɵclassProp("d-flex", !ctx_r0.state.header())("toast-dismissible", ctx_r0.state.dismissible());
+    i0.ɵɵproperty("auUseMulti", i0.ɵɵpureFunction3(7, _c5, ctx_r0.directives.autoHideDirective, ctx_r0.directives.transitionDirective, ctx_r0.directives.bodyDirective));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auSlot", ctx_r0.state().structure)("auSlotProps", i0.ɵɵpureFunction2(11, _c1, ctx_r0.state(), ctx_r0.widget));
+    i0.ɵɵproperty("auSlot", ctx_r0.state.structure())("auSlotProps", i0.ɵɵpureFunction3(11, _c1, ctx_r0.state, ctx_r0.api, ctx_r0.directives));
 } }
+/**
+ * Directive to represent the body of a toast notification.
+ * This directive uses a template reference to render the {@link ToastContext}.
+ */
 class ToastBodyDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ToastBodyDirective_Factory(t) { return new (t || ToastBodyDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastBodyDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auToastBody]', standalone: true }]
     }], null, null); })();
+/**
+ * Directive to define the structure of a toast component.
+ * This directive uses a template reference to render the {@link ToastContext}.
+ */
 class ToastStructureDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ToastStructureDirective_Factory(t) { return new (t || ToastStructureDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastStructureDirective, [{
         type: Directive,
         args: [{ selector: 'ng-template[auToastStructure]', standalone: true }]
     }], null, null); })();
+/**
+ * Directive representing the header of a toast component.
+ * This directive uses a template reference to render the {@link ToastContext}.
+ */
 class ToastHeaderDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
     }
-    static ngTemplateContextGuard(dir, context) {
+    static ngTemplateContextGuard(_dir, context) {
         return true;
     }
-    static { this.ɵfac = function ToastHeaderDirective_Factory(t) { return new (t || ToastHeaderDirective)(); }; }
+    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 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastHeaderDirective, [{
@@ -3167,14 +3331,14 @@ class ToastHeaderDirective {
         args: [{ selector: 'ng-template[auToastHeader]', standalone: true }]
     }], null, null); })();
 class ToastDefaultSlotsComponent {
-    static { this.ɵfac = function ToastDefaultSlotsComponent_Factory(t) { return new (t || ToastDefaultSlotsComponent)(); }; }
+    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, 7);
         } 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.ɵɵtemplate(0, ToastDefaultSlotsComponent_ng_template_0_Template, 4, 7, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
+            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, [{
@@ -3183,20 +3347,20 @@ class ToastDefaultSlotsComponent {
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, ToastStructureDirective, UseDirective],
-                template: ` <ng-template auToastStructure #structure let-state="state" let-widget="widget">
-		@if (state.header) {
+                template: ` <ng-template auToastStructure #structure let-state="state" let-api="api" let-directives="directives">
+		@if (state.header()) {
 			<div class="toast-header">
-				<ng-template [auSlot]="state.header" [auSlotProps]="{state, widget}"></ng-template>
-				@if (state.dismissible) {
-					<button class="btn-close me-0 ms-auto" [auUse]="widget.directives.closeButtonDirective"></button>
+				<ng-template [auSlot]="state.header()" [auSlotProps]="{state, api, directives}"></ng-template>
+				@if (state.dismissible()) {
+					<button class="btn-close me-0 ms-auto" [auUse]="directives.closeButtonDirective"></button>
 				}
 			</div>
 		}
 		<div class="toast-body">
-			<ng-template [auSlot]="state.children" [auSlotProps]="{state, widget}"></ng-template>
+			<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}"></ng-template>
 		</div>
-		@if (state.dismissible && !state.header) {
-			<button class="btn-close btn-close-white me-2 m-auto" [auUse]="widget.directives.closeButtonDirective"></button>
+		@if (state.dismissible() && !state.header()) {
+			<button class="btn-close btn-close-white me-2 m-auto" [auUse]="directives.closeButtonDirective"></button>
 		}
 	</ng-template>`,
             }]
@@ -3204,14 +3368,36 @@ class ToastDefaultSlotsComponent {
             type: ViewChild,
             args: ['structure', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastDefaultSlotsComponent, { className: "ToastDefaultSlotsComponent", filePath: "components/toast/toast.component.ts", lineNumber: 76 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastDefaultSlotsComponent, { className: "ToastDefaultSlotsComponent", filePath: "components/toast/toast.component.ts", lineNumber: 84 }); })();
+/**
+ * Represents the default slot structure for the toast component.
+ */
 const toastDefaultSlotStructure = new ComponentTemplate(ToastDefaultSlotsComponent, 'structure');
-const defaultConfig = {
-    structure: toastDefaultSlotStructure,
-};
+/**
+ * The `ToastComponent` is a UI component that displays a toast notification.
+ * It extends the `BaseWidgetDirective` and provides various configurable properties
+ * and events to control the behavior and appearance of the toast.
+ */
 class ToastComponent extends BaseWidgetDirective {
     constructor() {
-        super(...arguments);
+        super(callWidgetFactory({
+            factory: export_createToast,
+            widgetName: 'toast',
+            defaultConfig: {
+                structure: toastDefaultSlotStructure,
+            },
+            events: {
+                onVisibleChange: (event) => this.visibleChange.emit(event),
+                onShown: () => this.shown.emit(),
+                onHidden: () => this.hidden.emit(),
+            },
+            slotTemplates: () => ({
+                children: this.slotDefaultFromContent?.templateRef,
+                structure: this.slotStructureFromContent?.templateRef,
+                header: this.slotHeaderFromContent?.templateRef,
+            }),
+            slotChildren: () => this.slotChildren,
+        }));
         /**
          * Callback called when the alert visibility changed.
          *
@@ -3239,26 +3425,8 @@ class ToastComponent extends BaseWidgetDirective {
          * ```
          */
         this.shown = new EventEmitter();
-        this.defaultSlots = writable(defaultConfig);
-        this._widget = callWidgetFactory({
-            factory: export_createToast,
-            widgetName: 'toast',
-            defaultConfig: this.defaultSlots,
-            events: {
-                onVisibleChange: (event) => this.visibleChange.emit(event),
-                onShown: () => this.shown.emit(),
-                onHidden: () => this.hidden.emit(),
-            },
-        });
     }
-    ngAfterContentChecked() {
-        this._widget.patchSlots({
-            children: this.slotDefaultFromContent?.templateRef,
-            structure: this.slotStructureFromContent?.templateRef,
-            header: this.slotHeaderFromContent?.templateRef,
-        });
-    }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵToastComponent_BaseFactory; return function ToastComponent_Factory(t) { return (ɵToastComponent_BaseFactory || (ɵToastComponent_BaseFactory = i0.ɵɵgetInheritedFactory(ToastComponent)))(t || ToastComponent); }; })(); }
+    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);
@@ -3268,14 +3436,18 @@ class ToastComponent extends BaseWidgetDirective {
             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);
-        } }, 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: _c2, ngContentSelectors: _c3, decls: 2, vars: 2, consts: [[3, "auContentAsSlot"], [1, "toast", 3, "d-flex", "toast-dismissible", "auUseMulti"], [1, "toast", 3, "auUseMulti"], [3, "auSlot", "auSlotProps"]], template: function ToastComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, viewQuery: function ToastComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c2, 7);
+        } 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, ngContentSelectors: _c4, 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", 0)(1, ToastComponent_Conditional_1_Template, 2, 14, "div", 1);
+            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) {
-            i0.ɵɵproperty("auContentAsSlot", ctx.defaultSlots);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.state().hidden ? 1 : -1);
-        } }, dependencies: [SlotDirective, UseMultiDirective, ContentAsSlotDirective], encapsulation: 2, changeDetection: 0 }); }
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(!ctx.state.hidden() ? 2 : -1);
+        } }, dependencies: [SlotDirective, UseMultiDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToastComponent, [{
         type: Component,
@@ -3283,22 +3455,22 @@ class ToastComponent extends BaseWidgetDirective {
                 selector: '[auToast]',
                 standalone: true,
                 changeDetection: ChangeDetectionStrategy.OnPush,
-                imports: [SlotDirective, UseMultiDirective, ContentAsSlotDirective],
-                template: ` <ng-template [auContentAsSlot]="defaultSlots">
+                imports: [SlotDirective, UseMultiDirective],
+                template: ` <ng-template #content>
 			<ng-content></ng-content>
 		</ng-template>
-		@if (!state().hidden) {
+		@if (!state.hidden()) {
 			<div
 				class="toast"
-				[class.d-flex]="!state().header"
-				[class.toast-dismissible]="state().dismissible"
-				[auUseMulti]="[widget.directives.autoHideDirective, widget.directives.transitionDirective, widget.directives.bodyDirective]"
+				[class.d-flex]="!state.header()"
+				[class.toast-dismissible]="state.dismissible()"
+				[auUseMulti]="[directives.autoHideDirective, directives.transitionDirective, directives.bodyDirective]"
 			>
-				<ng-template [auSlot]="state().structure" [auSlotProps]="{state: state(), widget}"></ng-template>
+				<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template>
 			</div>
 		}`,
             }]
-    }], null, { dismissible: [{
+    }], () => [], { dismissible: [{
             type: Input,
             args: [{ alias: 'auDismissible', transform: auBooleanAttribute }]
         }], transition: [{
@@ -3352,8 +3524,107 @@ class ToastComponent extends BaseWidgetDirective {
         }], 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: 105 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastComponent, { className: "ToastComponent", filePath: "components/toast/toast.component.ts", lineNumber: 117 }); })();
+
+/**
+ * Directive to control the collapse behavior of an element.
+ */
+class CollapseDirective extends BaseWidgetDirective {
+    constructor() {
+        super(callWidgetFactory({
+            factory: createCollapse,
+            widgetName: 'collapse',
+            events: {
+                onVisibleChange: (event) => this.visibleChange.emit(event),
+                onShown: () => this.shown.emit(),
+                onHidden: () => this.hidden.emit(),
+            },
+            afterInit: (widget) => {
+                useDirectiveForHost(widget.directives.collapseDirective);
+            },
+        }));
+        /**
+         * Callback called when the collapse visibility changed.
+         *
+         * @defaultValue
+         * ```ts
+         * () => {}
+         * ```
+         */
+        this.visibleChange = new EventEmitter();
+        /**
+         * Callback called when the collapse is hidden.
+         *
+         * @defaultValue
+         * ```ts
+         * () => {}
+         * ```
+         */
+        this.hidden = new EventEmitter();
+        /**
+         * Callback called when the collapse is shown.
+         *
+         * @defaultValue
+         * ```ts
+         * () => {}
+         * ```
+         */
+        this.shown = new EventEmitter();
+    }
+    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] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollapseDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[auCollapse]',
+                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']
+        }] }); })();
+
+/**
+ * Retrieve a shallow copy of the default collapse config
+ * @returns the default collapse config
+ */
+const export_getCollapseDefaultConfig = getCollapseDefaultConfig;
+/**
+ * Create an CollapseWidget with given config props
+ * @param config - an optional collapse config
+ * @returns an CollapseWidget
+ */
+const export_createCollapse = createCollapse;
 
 /* istanbul ignore next */
 const components = [
@@ -3394,13 +3665,15 @@ const components = [
     SliderStructureDirective,
     ProgressbarComponent,
     ProgressbarStructureDirective,
+    ProgressbarBodyDirective,
     ToastComponent,
     ToastStructureDirective,
     ToastBodyDirective,
     ToastHeaderDirective,
+    CollapseDirective,
 ];
 class AgnosUIAngularModule {
-    static { this.ɵfac = function AgnosUIAngularModule_Factory(t) { return new (t || AgnosUIAngularModule)(); }; }
+    static { this.ɵfac = function AgnosUIAngularModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AgnosUIAngularModule)(); }; }
     static { this.ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: AgnosUIAngularModule }); }
     static { this.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({}); }
 }
@@ -3449,10 +3722,12 @@ class AgnosUIAngularModule {
         SliderStructureDirective,
         ProgressbarComponent,
         ProgressbarStructureDirective,
+        ProgressbarBodyDirective,
         ToastComponent,
         ToastStructureDirective,
         ToastBodyDirective,
-        ToastHeaderDirective], exports: [SlotDirective,
+        ToastHeaderDirective,
+        CollapseDirective], exports: [SlotDirective,
         SelectComponent,
         SelectBadgeLabelDirective,
         SelectItemLabelDirective,
@@ -3489,11 +3764,16 @@ class AgnosUIAngularModule {
         SliderStructureDirective,
         ProgressbarComponent,
         ProgressbarStructureDirective,
+        ProgressbarBodyDirective,
         ToastComponent,
         ToastStructureDirective,
         ToastBodyDirective,
-        ToastHeaderDirective] }); })();
+        ToastHeaderDirective,
+        CollapseDirective] }); })();
 
+/**
+ * Service to handle the opening and management of modal components.
+ */
 class ModalService {
     constructor() {
         this._injector = inject(Injector);
@@ -3506,8 +3786,7 @@ class ModalService {
         });
         const subscriptions = [];
         try {
-            for (const prop of Object.keys(options)) {
-                const value = options[prop];
+            for (const [prop, value] of Object.entries(options)) {
                 if (prop.startsWith('on')) {
                     const eventName = `${prop[2].toLowerCase()}${prop.substring(3)}`;
                     const eventEmitter = component.instance[eventName];
@@ -3520,7 +3799,7 @@ class ModalService {
                 }
             }
             this._applicationRef.attachView(component.hostView);
-            await component.instance._widget.initialized;
+            await component.instance['_widget'].initialized;
             return await component.instance.api.open();
         }
         finally {
@@ -3530,7 +3809,7 @@ class ModalService {
             }
         }
     }
-    static { this.ɵfac = function ModalService_Factory(t) { return new (t || ModalService)(); }; }
+    static { this.ɵfac = function ModalService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ModalService)(); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ModalService, factory: ModalService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModalService, [{
@@ -3546,5 +3825,5 @@ class ModalService {
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionBodyDirective, AccordionDirective, AccordionHeaderDirective, AccordionItemComponent, AccordionItemDefaultSlotsComponent, AccordionItemStructureDirective, AgnosUIAngularModule, AlertBodyDirective, AlertComponent, AlertDefaultSlotsComponent, AlertStructureDirective, ModalBodyDirective, ModalComponent, ModalDefaultSlotsComponent, ModalFooterDirective, ModalHeaderDirective, ModalService, ModalStructureDirective, ModalTitleDirective, PaginationComponent, PaginationDefaultSlotsComponent, PaginationEllipsisDirective, PaginationFirstDirective, PaginationLastDirective, PaginationNextDirective, PaginationNumberDirective, PaginationPagesDirective, PaginationPreviousDirective, PaginationStructureDirective, ProgressbarComponent, ProgressbarDefaultSlotsComponent, ProgressbarStructureDirective, RatingComponent, RatingStarDirective, SelectBadgeLabelDirective, SelectComponent, SelectItemLabelDirective, SliderComponent, SliderDefaultHandleSlotComponent, SliderDefaultStructureSlotComponent, SliderHandleDirective, SliderLabelDirective, SliderStructureDirective, ToastBodyDirective, ToastComponent, ToastDefaultSlotsComponent, ToastHeaderDirective, ToastStructureDirective, accordionItemDefaultSlotItemStructure, alertDefaultSlotStructure, callWidgetFactory, export_createAccordion as createAccordion, export_createAccordionItem as createAccordionItem, export_createAlert as createAlert, export_createModal as createModal, export_createPagination as createPagination, export_createProgressbar as createProgressbar, export_createRating as createRating, export_createSelect as createSelect, export_createSlider as createSlider, export_createToast as createToast, export_factoryCreateAccordion as factoryCreateAccordion, export_getAccordionDefaultConfig as getAccordionDefaultConfig, export_getAlertDefaultConfig as getAlertDefaultConfig, export_getModalDefaultConfig as getModalDefaultConfig, export_getPaginationDefaultConfig as getPaginationDefaultConfig, export_getProgressbarDefaultConfig as getProgressbarDefaultConfig, export_getRatingDefaultConfig as getRatingDefaultConfig, export_getSelectDefaultConfig as getSelectDefaultConfig, export_getSliderDefaultConfig as getSliderDefaultConfig, export_getToastDefaultConfig as getToastDefaultConfig, injectWidgetConfig, injectWidgetsConfig, export_modalCloseButtonClick as modalCloseButtonClick, modalDefaultSlotHeader, modalDefaultSlotStructure, export_modalOutsideClick as modalOutsideClick, paginationDefaultSlotPages, paginationDefaultSlotStructure, progressbarDefaultSlotStructure, provideWidgetsConfig, sliderDefaultSlotHandle, sliderDefaultSlotStructure, toastDefaultSlotStructure, widgetsConfigInjectionToken };
+export { AccordionBodyDirective, AccordionDirective, AccordionHeaderDirective, AccordionItemComponent, AccordionItemStructureDirective, AgnosUIAngularModule, AlertBodyDirective, AlertComponent, AlertStructureDirective, CollapseDirective, ModalBodyDirective, ModalComponent, ModalFooterDirective, ModalHeaderDirective, ModalService, ModalStructureDirective, ModalTitleDirective, PaginationComponent, PaginationEllipsisDirective, PaginationFirstDirective, PaginationLastDirective, PaginationNextDirective, PaginationNumberDirective, PaginationPagesDirective, PaginationPreviousDirective, PaginationStructureDirective, ProgressbarBodyDirective, ProgressbarComponent, ProgressbarStructureDirective, RatingComponent, RatingStarDirective, SelectBadgeLabelDirective, SelectComponent, SelectItemLabelDirective, SliderComponent, SliderHandleDirective, SliderLabelDirective, SliderStructureDirective, ToastBodyDirective, ToastComponent, ToastHeaderDirective, ToastStructureDirective, accordionItemDefaultSlotStructure, alertDefaultSlotStructure, callWidgetFactory, export_createAccordion as createAccordion, export_createAccordionItem as createAccordionItem, export_createAlert as createAlert, export_createCollapse as createCollapse, export_createModal as createModal, export_createPagination as createPagination, export_createProgressbar as createProgressbar, export_createRating as createRating, export_createSelect as createSelect, export_createSlider as createSlider, export_createToast as createToast, export_factoryCreateAccordion as factoryCreateAccordion, export_getAccordionDefaultConfig as getAccordionDefaultConfig, export_getAlertDefaultConfig as getAlertDefaultConfig, export_getCollapseDefaultConfig as getCollapseDefaultConfig, export_getModalDefaultConfig as getModalDefaultConfig, export_getPaginationDefaultConfig as getPaginationDefaultConfig, export_getProgressbarDefaultConfig as getProgressbarDefaultConfig, export_getRatingDefaultConfig as getRatingDefaultConfig, export_getSelectDefaultConfig as getSelectDefaultConfig, export_getSliderDefaultConfig as getSliderDefaultConfig, export_getToastDefaultConfig as getToastDefaultConfig, injectWidgetConfig, injectWidgetsConfig, export_modalCloseButtonClick as modalCloseButtonClick, modalDefaultSlotHeader, modalDefaultSlotStructure, export_modalOutsideClick as modalOutsideClick, paginationDefaultSlotPages, paginationDefaultSlotStructure, progressbarDefaultSlotStructure, provideWidgetsConfig, sliderDefaultSlotHandle, sliderDefaultSlotStructure, toastDefaultSlotStructure, widgetsConfigInjectionToken };
 //# sourceMappingURL=agnos-ui-angular-bootstrap.mjs.map