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

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

@@ -267,7 +267,7 @@ class ModalDefaultSlotsComponent {
                 template: `
 		<ng-template auModalHeader #header let-state="state" let-api="api" let-directives="directives">
 			<h5 class="modal-title">
-				<ng-template [auSlot]="state.title()" [auSlotProps]="{state, api, directives}"></ng-template>
+				<ng-template [auSlot]="state.title()" [auSlotProps]="{state, api, directives}" />
 			</h5>
 			@if (state.closeButton()) {
 				<button class="btn-close" [auUse]="directives.closeButtonDirective"></button>
@@ -276,15 +276,15 @@ class ModalDefaultSlotsComponent {
 		<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, api, directives}"></ng-template>
+					<ng-template [auSlot]="state.header()" [auSlotProps]="{state, api, directives}" />
 				</div>
 			}
 			<div class="modal-body">
-				<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}"></ng-template>
+				<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}" />
 			</div>
 			@if (state.footer()) {
 				<div class="modal-footer">
-					<ng-template [auSlot]="state.footer()" [auSlotProps]="{state, api, directives}"></ng-template>
+					<ng-template [auSlot]="state.footer()" [auSlotProps]="{state, api, directives}" />
 				</div>
 			}
 		</ng-template>
@@ -412,7 +412,7 @@ class ModalComponent extends BaseWidgetDirective {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [UseMultiDirective, SlotDirective],
                 template: `
-		<ng-template #content><ng-content></ng-content></ng-template>
+		<ng-template #content><ng-content /></ng-template>
 		@if (!state.backdropHidden()) {
 			<div class="modal-backdrop" [auUseMulti]="[directives.backdropPortalDirective, directives.backdropDirective]"></div>
 		}
@@ -420,7 +420,7 @@ class ModalComponent extends BaseWidgetDirective {
 			<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, api, directives}"></ng-template>
+						<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" />
 					</div>
 				</div>
 			</div>
@@ -854,12 +854,12 @@ class PaginationDefaultSlotsComponent {
 				<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, api, directives}"></ng-template>
+							<ng-template [auSlot]="state.ellipsisLabel()" [auSlotProps]="{state, api, directives}" />
 						</div>
 						<span class="visually-hidden">{{ state.ariaEllipsisLabel() }}</span>
 					} @else {
 						<a class="page-link" [auUse]="[directives.pageLink, {page}]">
-							<ng-template [auSlot]="state.numberLabel()" [auSlotProps]="{state, api, directives, displayedPage: page}"></ng-template>
+							<ng-template [auSlot]="state.numberLabel()" [auSlotProps]="{state, api, directives, displayedPage: page}" />
 							@if (state.page() === page) {
 								<span class="visually-hidden">{{ state.activeLabel() }}</span>
 							}
@@ -874,7 +874,7 @@ class PaginationDefaultSlotsComponent {
 					<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]="{state, api, directives}"></ng-template>
+								<ng-template [auSlot]="state.firstPageLabel()" [auSlotProps]="{state, api, directives}" />
 							</span>
 						</a>
 					</li>
@@ -883,17 +883,17 @@ class PaginationDefaultSlotsComponent {
 					<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]="{state, api, directives}"></ng-template>
+								<ng-template [auSlot]="state.previousPageLabel()" [auSlotProps]="{state, api, directives}" />
 							</span>
 						</a>
 					</li>
 				}
-				<ng-template [auSlot]="state.pagesDisplay()" [auSlotProps]="{state, api, directives}"></ng-template>
+				<ng-template [auSlot]="state.pagesDisplay()" [auSlotProps]="{state, api, directives}" />
 				@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]="{state, api, directives}"></ng-template>
+								<ng-template [auSlot]="state.nextPageLabel()" [auSlotProps]="{state, api, directives}" />
 							</span>
 						</a>
 					</li>
@@ -902,7 +902,7 @@ class PaginationDefaultSlotsComponent {
 					<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]="{state, api, directives}"></ng-template>
+								<ng-template [auSlot]="state.lastPageLabel()" [auSlotProps]="{state, api, directives}" />
 							</span>
 						</a>
 					</li>
@@ -1008,7 +1008,7 @@ class PaginationComponent extends BaseWidgetDirective {
                     '[attr.aria-label]': 'state.ariaLabel()',
                 },
                 encapsulation: ViewEncapsulation.None,
-                template: `<ng-template [auSlotProps]="{state, api, directives}" [auSlot]="state.structure()"></ng-template>`,
+                template: `<ng-template [auSlotProps]="{state, api, directives}" [auSlot]="state.structure()" />`,
             }]
     }], () => [], { ariaPageLabel: [{
             type: Input,
@@ -1278,7 +1278,7 @@ class RatingComponent extends BaseWidgetDirective {
 		@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>
+				<ng-template [auSlot]="state.star()" [auSlotProps]="state.stars()[index]" />
 			</span>
 		}
 	`,
@@ -1531,7 +1531,7 @@ class SelectComponent extends BaseWidgetDirective {
 			@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>
+						<ng-template [auSlot]="state.badgeLabel()" [auSlotProps]="{state, api, directives, itemContext}" />
 					</div>
 				}
 			}
@@ -1545,7 +1545,7 @@ class SelectComponent extends BaseWidgetDirective {
 						[auUse]="[directives.itemAttributesDirective, itemContext]"
 						[class.text-bg-primary]="itemContext === state.highlighted()"
 					>
-						<ng-template [auSlot]="state.itemLabel()" [auSlotProps]="{state, api, directives, itemContext}"></ng-template>
+						<ng-template [auSlot]="state.itemLabel()" [auSlotProps]="{state, api, directives, itemContext}" />
 					</li>
 				}
 			</ul>
@@ -1734,7 +1734,7 @@ class AlertDefaultSlotsComponent {
                 imports: [SlotDirective, AlertStructureDirective],
                 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, api, directives}"></ng-template>
+			<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}" />
 		</div>
 		@if (state.dismissible()) {
 			<button type="button" class="btn-close" (click)="api.close()" [attr.aria-label]="state.ariaCloseButtonLabel()"></button>
@@ -1834,7 +1834,7 @@ class AlertComponent extends BaseWidgetDirective {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, UseDirective],
                 template: ` <ng-template #content>
-			<ng-content></ng-content>
+			<ng-content />
 		</ng-template>
 
 		@if (!state.hidden()) {
@@ -1843,7 +1843,7 @@ class AlertComponent extends BaseWidgetDirective {
 				class="au-alert alert alert-{{ state.type() }} {{ state.className() }} {{ state.dismissible() ? 'alert-dismissible' : '' }}"
 				role="alert"
 			>
-				<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template>
+				<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" />
 			</div>
 		}`,
             }]
@@ -2175,72 +2175,72 @@ class AccordionItemDefaultSlotsComponent {
 		<ng-template auAccordionItemStructure #structure let-state="state" let-api="api" let-directives="directives">
 			@switch (state.headingTag()) {
 				@case ('h1') {
-					<ng-container [ngTemplateOutlet]="h1"></ng-container>
+					<ng-container [ngTemplateOutlet]="h1" />
 				}
 				@case ('h2') {
-					<ng-container [ngTemplateOutlet]="h2"></ng-container>
+					<ng-container [ngTemplateOutlet]="h2" />
 				}
 				@case ('h3') {
-					<ng-container [ngTemplateOutlet]="h3"></ng-container>
+					<ng-container [ngTemplateOutlet]="h3" />
 				}
 				@case ('h4') {
-					<ng-container [ngTemplateOutlet]="h4"></ng-container>
+					<ng-container [ngTemplateOutlet]="h4" />
 				}
 				@case ('h5') {
-					<ng-container [ngTemplateOutlet]="h5"></ng-container>
+					<ng-container [ngTemplateOutlet]="h5" />
 				}
 				@case ('h6') {
-					<ng-container [ngTemplateOutlet]="h6"></ng-container>
+					<ng-container [ngTemplateOutlet]="h6" />
 				}
 				@default {
-					<ng-container [ngTemplateOutlet]="h2"></ng-container>
+					<ng-container [ngTemplateOutlet]="h2" />
 				}
 			}
 
 			<ng-template #h1>
 				<h1 class="accordion-header" [auUse]="directives.headerDirective">
-					<ng-template [ngTemplateOutlet]="button"></ng-template>
+					<ng-template [ngTemplateOutlet]="button" />
 				</h1>
 			</ng-template>
 
 			<ng-template #h2>
 				<h2 class="accordion-header" [auUse]="directives.headerDirective">
-					<ng-template [ngTemplateOutlet]="button"></ng-template>
+					<ng-template [ngTemplateOutlet]="button" />
 				</h2>
 			</ng-template>
 
 			<ng-template #h3>
 				<h3 class="accordion-header" [auUse]="directives.headerDirective">
-					<ng-template [ngTemplateOutlet]="button"></ng-template>
+					<ng-template [ngTemplateOutlet]="button" />
 				</h3>
 			</ng-template>
 
 			<ng-template #h4>
 				<h4 class="accordion-header" [auUse]="directives.headerDirective">
-					<ng-template [ngTemplateOutlet]="button"></ng-template>
+					<ng-template [ngTemplateOutlet]="button" />
 				</h4>
 			</ng-template>
 
 			<ng-template #h5>
 				<h5 class="accordion-header" [auUse]="directives.headerDirective">
-					<ng-template [ngTemplateOutlet]="button"></ng-template>
+					<ng-template [ngTemplateOutlet]="button" />
 				</h5>
 			</ng-template>
 			<ng-template #h6>
 				<h6 class="accordion-header" [auUse]="directives.headerDirective">
-					<ng-template [ngTemplateOutlet]="button"></ng-template>
+					<ng-template [ngTemplateOutlet]="button" />
 				</h6>
 			</ng-template>
 
 			<ng-template #button>
 				<button class="accordion-button " [auUse]="directives.buttonDirective">
-					<ng-template [auSlotProps]="{state, directives, api}" [auSlot]="state.header()"></ng-template>
+					<ng-template [auSlotProps]="{state, directives, api}" [auSlot]="state.header()" />
 				</button>
 			</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>
+						<ng-template [auSlotProps]="{state, directives, api}" [auSlot]="state.children()" />
 					</div>
 				</div>
 			}
@@ -2334,8 +2334,8 @@ class AccordionItemComponent extends BaseWidgetDirective {
                 },
                 imports: [SlotDirective, UseDirective],
                 template: `
-		<ng-template #content><ng-content></ng-content></ng-template>
-		<ng-template [auSlotProps]="{state, api, directives}" [auSlot]="state.structure()"></ng-template>
+		<ng-template #content><ng-content /></ng-template>
+		<ng-template [auSlotProps]="{state, api, directives}" [auSlot]="state.structure()" />
 	`,
             }]
     }], () => [], { header: [{
@@ -2770,28 +2770,28 @@ class SliderDefaultStructureSlotComponent {
 			<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>
+					<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.min()}" />
 				</div>
 				<div [auUse]="directives.maxLabelDirective">
-					<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.max()}"></ng-template>
+					<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.max()}" />
 				</div>
 			}
 			@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>
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.sortedValues()[1]}" /> -
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.sortedValues()[0]}" />
 					} @else {
-						<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>
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.sortedValues()[0]}" /> -
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.sortedValues()[1]}" />
 					}
 				</div>
 			}
 			@for (item of state.sortedHandles(); track item.id; let i = $index) {
-				<ng-template [auSlot]="state.handle()" [auSlotProps]="{state, api, directives, item}"></ng-template>
+				<ng-template [auSlot]="state.handle()" [auSlotProps]="{state, api, directives, item}" />
 				@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>
+						<ng-template [auSlot]="state.label()" [auSlotProps]="{state, api, directives, value: state.values()[i]}" />
 					</div>
 				}
 			}
@@ -2910,7 +2910,7 @@ class SliderComponent extends BaseWidgetDirective {
                 host: {
                     '(blur)': 'handleBlur()',
                 },
-                template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template> `,
+                template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" /> `,
             }]
     }], () => [], { className: [{
             type: Input,
@@ -3077,7 +3077,7 @@ class ProgressbarDefaultSlotsComponent {
 					[ngClass]="state.type() ? 'text-bg-' + state.type() : undefined"
 					[style.width.%]="state.percentage()"
 				>
-					<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}"></ng-template>
+					<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}" />
 				</div>
 			</div>
 		</ng-template>
@@ -3148,8 +3148,8 @@ class ProgressbarComponent extends BaseWidgetDirective {
                     '[class]': 'state.className()',
                 },
                 template: `
-		<ng-template #content><ng-content></ng-content></ng-template>
-		<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template>
+		<ng-template #content><ng-content /></ng-template>
+		<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" />
 	`,
             }]
     }], () => [], { ariaLabel: [{
@@ -3351,14 +3351,14 @@ class ToastDefaultSlotsComponent {
                 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, api, directives}"></ng-template>
+				<ng-template [auSlot]="state.header()" [auSlotProps]="{state, api, directives}" />
 				@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, api, directives}"></ng-template>
+			<ng-template [auSlot]="state.children()" [auSlotProps]="{state, api, directives}" />
 		</div>
 		@if (state.dismissible() && !state.header()) {
 			<button class="btn-close btn-close-white me-2 m-auto" [auUse]="directives.closeButtonDirective"></button>
@@ -3458,7 +3458,7 @@ class ToastComponent extends BaseWidgetDirective {
                 changeDetection: ChangeDetectionStrategy.OnPush,
                 imports: [SlotDirective, UseMultiDirective],
                 template: ` <ng-template #content>
-			<ng-content></ng-content>
+			<ng-content />
 		</ng-template>
 		@if (!state.hidden()) {
 			<div
@@ -3467,7 +3467,7 @@ class ToastComponent extends BaseWidgetDirective {
 				[class.toast-dismissible]="state.dismissible()"
 				[auUseMulti]="[directives.autoHideDirective, directives.transitionDirective, directives.bodyDirective]"
 			>
-				<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template>
+				<ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" />
 			</div>
 		}`,
             }]
@@ -3668,7 +3668,9 @@ const _c2 = ["toggle"];
 const _c3 = a0 => ({ item: a0 });
 const _c4 = (a0, a1) => [a0, a1];
 function TreeDefaultItemToggleSlotComponent_ng_template_0_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "button", 2);
+    i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵelement(1, "span", 4);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     const directives_r2 = ctx_r0.directives;
@@ -3679,7 +3681,7 @@ function TreeDefaultItemToggleSlotComponent_ng_template_0_Conditional_1_Template
     i0.ɵɵelement(0, "span", 3);
 } }
 function TreeDefaultItemToggleSlotComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, TreeDefaultItemToggleSlotComponent_ng_template_0_Conditional_0_Template, 1, 6, "button", 2)(1, TreeDefaultItemToggleSlotComponent_ng_template_0_Conditional_1_Template, 1, 0, "span", 3);
+    i0.ɵɵtemplate(0, TreeDefaultItemToggleSlotComponent_ng_template_0_Conditional_0_Template, 2, 6, "button", 2)(1, TreeDefaultItemToggleSlotComponent_ng_template_0_Conditional_1_Template, 1, 0, "span", 3);
 } if (rf & 2) {
     const item_r3 = ctx.item;
     i0.ɵɵconditional(item_r3.children.length > 0 ? 0 : 1);
@@ -3784,7 +3786,7 @@ class TreeDefaultStructureSlotComponent {
 		<ng-template auTreeStructure #structure let-state="state" let-directives="directives" let-api="api">
 			<ul role="tree" class="au-tree {{ state.className() }}" [auUse]="directives.navigationDirective">
 				@for (node of state.normalizedNodes(); track trackNode($index, node)) {
-					<ng-template [auSlot]="state.item()" [auSlotProps]="{state, api, directives, item: node}"></ng-template>
+					<ng-template [auSlot]="state.item()" [auSlotProps]="{state, api, directives, item: node}" />
 				}
 			</ul>
 		</ng-template>
@@ -3825,7 +3827,7 @@ class TreeDefaultItemToggleSlotComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.toggle = _t.first);
-        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["toggle", ""], ["auTreeItemToggle", ""], [3, "auUse"], [1, "au-tree-expand-icon-placeholder"]], template: function TreeDefaultItemToggleSlotComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 2, vars: 0, consts: [["toggle", ""], ["auTreeItemToggle", ""], [3, "auUse"], [1, "au-tree-expand-icon-placeholder"], [1, "au-tree-expand-icon-svg"]], template: function TreeDefaultItemToggleSlotComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, TreeDefaultItemToggleSlotComponent_ng_template_0_Template, 2, 1, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [UseDirective, TreeItemToggleDirective], encapsulation: 2, changeDetection: 0 }); }
 }
@@ -3838,7 +3840,9 @@ class TreeDefaultItemToggleSlotComponent {
                 template: `
 		<ng-template auTreeItemToggle #toggle let-directives="directives" let-item="item">
 			@if (item.children.length > 0) {
-				<button [auUse]="[directives.itemToggleDirective, {item}]"></button>
+				<button [auUse]="[directives.itemToggleDirective, {item}]">
+					<span class="au-tree-expand-icon-svg"></span>
+				</button>
 			} @else {
 				<span class="au-tree-expand-icon-placeholder"></span>
 			}
@@ -3849,7 +3853,7 @@ class TreeDefaultItemToggleSlotComponent {
             type: ViewChild,
             args: ['toggle', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemToggleSlotComponent, { className: "TreeDefaultItemToggleSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 85 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemToggleSlotComponent, { className: "TreeDefaultItemToggleSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 87 }); })();
 /**
  * A constant representing the default slot for tree item toggle.
  */
@@ -3893,7 +3897,7 @@ class TreeDefaultItemContentSlotComponent {
                 template: `
 		<ng-template auTreeItem #treeItemContent let-state="state" let-directives="directives" let-item="item" let-api="api">
 			<span class="au-tree-item">
-				<ng-template [auSlot]="state.itemToggle()" [auSlotProps]="{state, api, directives, item}"></ng-template>
+				<ng-template [auSlot]="state.itemToggle()" [auSlotProps]="{state, api, directives, item}" />
 				{{ item.label }}
 			</span>
 		</ng-template>
@@ -3903,7 +3907,7 @@ class TreeDefaultItemContentSlotComponent {
             type: ViewChild,
             args: ['treeItemContent', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemContentSlotComponent, { className: "TreeDefaultItemContentSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 120 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemContentSlotComponent, { className: "TreeDefaultItemContentSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 122 }); })();
 /**
  * A constant representing the default slot for tree item.
  */
@@ -3950,11 +3954,11 @@ class TreeDefaultItemSlotComponent {
                 template: `
 		<ng-template auTreeItem #treeItem let-state="state" let-directives="directives" let-item="item" let-api="api">
 			<li [auUse]="[directives.itemAttributesDirective, {item}]">
-				<ng-template [auSlot]="state.itemContent()" [auSlotProps]="{state, api, directives, item}"></ng-template>
+				<ng-template [auSlot]="state.itemContent()" [auSlotProps]="{state, api, directives, item}" />
 				@if (state.expandedMap().get(item)) {
 					<ul role="group">
 						@for (child of item.children; track trackNode($index, child)) {
-							<ng-template [auSlot]="state.item()" [auSlotProps]="{state, api, directives, item: child}"></ng-template>
+							<ng-template [auSlot]="state.item()" [auSlotProps]="{state, api, directives, item: child}" />
 						}
 					</ul>
 				}
@@ -3966,7 +3970,7 @@ class TreeDefaultItemSlotComponent {
             type: ViewChild,
             args: ['treeItem', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemSlotComponent, { className: "TreeDefaultItemSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 164 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeDefaultItemSlotComponent, { className: "TreeDefaultItemSlotComponent", filePath: "components/tree/tree.component.ts", lineNumber: 166 }); })();
 /**
  * A constant representing the default slot for tree item.
  */
@@ -4025,15 +4029,16 @@ class TreeComponent extends BaseWidgetDirective {
             i0.ɵɵtemplate(0, TreeComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("auSlot", ctx.state.structure())("auSlotProps", i0.ɵɵpureFunction3(2, _c8, ctx.state, ctx.api, ctx.directives));
-        } }, dependencies: [SlotDirective], encapsulation: 2 }); }
+        } }, dependencies: [SlotDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TreeComponent, [{
         type: Component,
         args: [{
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 selector: '[auTree]',
                 standalone: true,
                 imports: [SlotDirective],
-                template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}"></ng-template> `,
+                template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" /> `,
             }]
     }], () => [], { ariaLabel: [{
             type: Input,
@@ -4078,7 +4083,7 @@ class TreeComponent extends BaseWidgetDirective {
             type: ContentChild,
             args: [TreeItemDirective, { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeComponent, { className: "TreeComponent", filePath: "components/tree/tree.component.ts", lineNumber: 188 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TreeComponent, { className: "TreeComponent", filePath: "components/tree/tree.component.ts", lineNumber: 191 }); })();
 
 /* istanbul ignore next */
 const components = [