@bizy/core 20.2.8 → 20.3.1

package/fesm2022/bizy-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, ChangeDetectorRef, Output, Input, Inject, ChangeDetectionStrategy, Component, NgModule, inject, DOCUMENT, Renderer2, ElementRef, Injectable, Directive, ViewChild, ContentChildren, ContentChild, Pipe, ViewContainerRef, TemplateRef, RendererFactory2, HostListener, Host } from '@angular/core';
+import { inject, ChangeDetectorRef, ElementRef, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule, DOCUMENT, Renderer2, Injectable, Inject, Directive, ViewChild, ContentChildren, ContentChild, Pipe, ViewContainerRef, TemplateRef, RendererFactory2, HostListener, Host } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, registerLocaleData, DatePipe } from '@angular/common';
 import { Subject, Subscription, BehaviorSubject, filter, take, skip, auditTime, throttleTime, debounceTime as debounceTime$1, interval, fromEvent, merge } from 'rxjs';
@@ -40,34 +40,30 @@ import { DomSanitizer } from '@angular/platform-browser';
 import Fuse from 'fuse.js';
 
 class BizyAccordionComponent {
-    ref;
+    #ref = inject(ChangeDetectorRef);
+    #elementRef = inject(ElementRef);
     id = `bizy-accordion-${Math.random()}`;
     customClass;
     disabled = false;
     opened = false;
     openedChange = new EventEmitter();
     onSelect = new EventEmitter();
-    constructor(ref) {
-        this.ref = ref;
-    }
     _onSelect(event) {
         if (this.disabled) {
             return;
         }
         this.openedChange.emit(!this.opened);
         this.onSelect.emit(event);
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyAccordionComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyAccordionComponent, isStandalone: true, selector: "bizy-accordion", inputs: { id: "id", customClass: "customClass", disabled: "disabled", opened: "opened" }, outputs: { openedChange: "openedChange", onSelect: "onSelect" }, ngImport: i0, template: "<button \n  type=\"button\"\n  [id]=\"id\"\n  [ngClass]=\"{'bizy-accordion--disabled': disabled}\"\n  class=\"bizy-accordion {{customClass}}\"\n  (click)=\"_onSelect($event)\"\n  (keyup.enter)=\"_onSelect($event)\">\n\n  <span class=\"bizy-accordion__content\">\n    <ng-content></ng-content>\n  </span>\n\n  <svg \n    class=\"bizy-accordion__arrow\" \n    [ngClass]=\"{'bizy-accordion__arrow--opened': opened}\"\n    viewBox=\"0 0 96 96\" \n    xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M81.8457,25.3876a6.0239,6.0239,0,0,0-8.45.7676L48,56.6257l-25.396-30.47a5.999,5.999,0,1,0-9.2114,7.6879L43.3943,69.8452a5.9969,5.9969,0,0,0,9.2114,0L82.6074,33.8431A6.0076,6.0076,0,0,0,81.8457,25.3876Z\"/>\n  </svg>\n\n</button>\n\n<span class=\"bizy-accordion__options\" [ngClass]=\"{'bizy-accordion__options--opened': opened}\">\n\n  <ng-content select=\"[accordion-option]\"></ng-content>\n\n</span>\n", styles: [":host{font-size:1rem;width:100%}:host:has(>.bizy-accordion__options:empty) .bizy-accordion>.bizy-accordion__arrow{display:none!important}.bizy-accordion{background-color:var(--bizy-accordion-background-color);border:none;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;width:100%;cursor:pointer;position:relative;border-top-left-radius:.3rem;border-bottom:var(--bizy-accordion-border-bottom)}.bizy-accordion--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-accordion__content{background-color:inherit;width:100%;flex:1}.bizy-accordion__arrow{height:var(--bizy-accordion-arrow-height);pointer-events:none;display:block;transition:transform .1s ease;fill:var(--bizy-accordion-arrow-color);position:absolute;right:.5rem}.bizy-accordion__arrow--opened{transform:rotate(180deg);transition:transform .2s ease}.bizy-accordion__options{max-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:var(--bizy-accordion-padding-left);transition:max-height .1s ease;border-left:var(--bizy-accordion-border)}.bizy-accordion__options--opened{max-height:100vh;transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyAccordionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-accordion', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n  type=\"button\"\n  [id]=\"id\"\n  [ngClass]=\"{'bizy-accordion--disabled': disabled}\"\n  class=\"bizy-accordion {{customClass}}\"\n  (click)=\"_onSelect($event)\"\n  (keyup.enter)=\"_onSelect($event)\">\n\n  <span class=\"bizy-accordion__content\">\n    <ng-content></ng-content>\n  </span>\n\n  <svg \n    class=\"bizy-accordion__arrow\" \n    [ngClass]=\"{'bizy-accordion__arrow--opened': opened}\"\n    viewBox=\"0 0 96 96\" \n    xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M81.8457,25.3876a6.0239,6.0239,0,0,0-8.45.7676L48,56.6257l-25.396-30.47a5.999,5.999,0,1,0-9.2114,7.6879L43.3943,69.8452a5.9969,5.9969,0,0,0,9.2114,0L82.6074,33.8431A6.0076,6.0076,0,0,0,81.8457,25.3876Z\"/>\n  </svg>\n\n</button>\n\n<span class=\"bizy-accordion__options\" [ngClass]=\"{'bizy-accordion__options--opened': opened}\">\n\n  <ng-content select=\"[accordion-option]\"></ng-content>\n\n</span>\n", styles: [":host{font-size:1rem;width:100%}:host:has(>.bizy-accordion__options:empty) .bizy-accordion>.bizy-accordion__arrow{display:none!important}.bizy-accordion{background-color:var(--bizy-accordion-background-color);border:none;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;width:100%;cursor:pointer;position:relative;border-top-left-radius:.3rem;border-bottom:var(--bizy-accordion-border-bottom)}.bizy-accordion--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-accordion__content{background-color:inherit;width:100%;flex:1}.bizy-accordion__arrow{height:var(--bizy-accordion-arrow-height);pointer-events:none;display:block;transition:transform .1s ease;fill:var(--bizy-accordion-arrow-color);position:absolute;right:.5rem}.bizy-accordion__arrow--opened{transform:rotate(180deg);transition:transform .2s ease}.bizy-accordion__options{max-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:var(--bizy-accordion-padding-left);transition:max-height .1s ease;border-left:var(--bizy-accordion-border)}.bizy-accordion__options--opened{max-height:100vh;transition:transform .2s ease}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }], customClass: [{
                 type: Input
@@ -105,6 +101,7 @@ var MIME_TYPE;
 })(MIME_TYPE || (MIME_TYPE = {}));
 
 class BizyButtonComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-button-${Math.random()}`;
     disabled = false;
     type = 'button';
@@ -117,6 +114,7 @@ class BizyButtonComponent {
         }
         this.onSelect.emit(event);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyButtonComponent, isStandalone: true, selector: "bizy-button", inputs: { id: "id", disabled: "disabled", type: "type", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    [type]=\"type\"\n    [id]=\"id\"\n    (focus)=\"_focused = true\"\n    (blur)=\"_focused = false\"\n    class=\"bizy-button {{customClass}}\"\n    [ngClass]=\"{'bizy-button--disabled': disabled}\"\n    (click)=\"_focused = true; _onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\">\n    <span class=\"bizy-button__content\" (click)=\"_focused = true; _onSelect($event); $event.stopPropagation()\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n", styles: [":host{font-size:1rem;height:var(--bizy-button-height);width:var(--bizy-button-width);min-height:var(--bizy-button-min-height);min-width:var(--bizy-button-min-width);max-height:var(--bizy-button-max-height);max-width:var(--bizy-button-max-width)}.bizy-button{height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-height:inherit;max-width:inherit;display:flex;justify-content:space-between;align-items:center;column-gap:.5rem;padding:var(--bizy-button-padding);border-radius:var(--bizy-button-border-radius);border:var(--bizy-button-border);cursor:pointer;background-color:var(--bizy-button-background-color)}::ng-deep .bizy-button *{color:var(--bizy-button-color);text-wrap:nowrap}.bizy-button:hover{filter:brightness(95%)}.bizy-button__content{width:100%;height:100%;display:flex;justify-content:center;align-items:center;column-gap:.3rem}.bizy-button--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -154,6 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
 class BizyAudioPlayerComponent {
     #document = inject(DOCUMENT);
     #renderer = inject(Renderer2);
+    #elementRef = inject(ElementRef);
     id = `bizy-audio-player-${Math.random()}`;
     mimeType;
     audioPlayerError = 'Error';
@@ -262,6 +261,7 @@ class BizyAudioPlayerComponent {
         this.#renderer.removeChild(this.#document.body, downloadButton);
         this.onDownload.emit();
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
@@ -317,10 +317,10 @@ const MIN_CHART_SIZE$1 = 350; // px;
 const Y_AXIS_OFFSET = 80;
 const GRID_BOTTOM = 30;
 class BizyBarLineChartComponent {
-    elementRef;
-    document;
-    ref;
-    renderer;
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
+    #renderer = inject(Renderer2);
     resizeRef = null;
     tooltip = true;
     download = { hide: false, label: 'Descargar', name: 'Bizy' };
@@ -342,20 +342,14 @@ class BizyBarLineChartComponent {
     #leftYAxis = 0;
     #chartStacks = [];
     #chartNames = [];
-    constructor(elementRef, document, ref, renderer) {
-        this.elementRef = elementRef;
-        this.document = document;
-        this.ref = ref;
-        this.renderer = renderer;
-    }
     ngAfterViewInit() {
         this.#mutationObserver = new MutationObserver(() => {
-            if (this.elementRef && this.elementRef.nativeElement && (this.elementRef.nativeElement.offsetWidth || this.elementRef.nativeElement.offsetHeight)) {
+            if (this.#elementRef && this.#elementRef.nativeElement && (this.#elementRef.nativeElement.offsetWidth || this.#elementRef.nativeElement.offsetHeight)) {
                 this.#afterViewInit.next(true);
                 this.#mutationObserver.disconnect();
             }
         });
-        this.#mutationObserver.observe(this.document.body, { childList: true, subtree: true });
+        this.#mutationObserver.observe(this.#document.body, { childList: true, subtree: true });
     }
     set data(data) {
         if (!data) {
@@ -502,9 +496,9 @@ class BizyBarLineChartComponent {
                 bottom: 0,
                 data: legends
             };
-            const textColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
-            const textBackgroundColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
-            const borderColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
+            const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
+            const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
+            const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
             const toolbox = {
                 show: true,
                 feature: {
@@ -541,9 +535,9 @@ class BizyBarLineChartComponent {
                                     var link = document.createElement('a');
                                     link.href = canvas.toDataURL('image/png');
                                     link.download = `${this.download.name}.png`;
-                                    this.renderer.appendChild(this.document.body, link);
+                                    this.#renderer.appendChild(this.#document.body, link);
                                     link.click();
-                                    this.renderer.removeChild(this.document.body, link);
+                                    this.#renderer.removeChild(this.#document.body, link);
                                     restoreLegendType(this.#echarts);
                                     this.onDownload.emit();
                                 });
@@ -577,7 +571,7 @@ class BizyBarLineChartComponent {
                     this.onSelect.emit(params.name);
                 });
                 this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
-                const resizeRef = this.resizeRef ? this.resizeRef : this.renderer.parentNode(this.elementRef.nativeElement) ? this.renderer.parentNode(this.elementRef.nativeElement) : this.elementRef.nativeElement;
+                const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
                 this.#resizeObserver.observe(resizeRef);
                 this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
                     this.#deleteChartContainer();
@@ -595,15 +589,15 @@ class BizyBarLineChartComponent {
         }));
     }
     #createChartContainer = () => {
-        if (this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
+        if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
-        let elementWidth = this.elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE$1;
-        let elementHeight = this.elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE$1;
+        let elementWidth = this.#elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE$1;
+        let elementHeight = this.#elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE$1;
         let minWidth = MIN_CHART_SIZE$1;
         let minHeight = MIN_CHART_SIZE$1;
-        const barChartMinWidth = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-width');
-        const barChartMinHeight = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-height');
+        const barChartMinWidth = getComputedStyle(this.#document.body).getPropertyValue('--bizy-chart-min-width');
+        const barChartMinHeight = getComputedStyle(this.#document.body).getPropertyValue('--bizy-chart-min-height');
         if (Number(barChartMinWidth)) {
             minWidth = Number(barChartMinWidth);
         }
@@ -612,21 +606,22 @@ class BizyBarLineChartComponent {
         }
         const width = Math.max(elementWidth, minWidth);
         const height = Math.max(elementHeight, minHeight);
-        this.#chartContainer = this.renderer.createElement('div');
-        this.renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
-        this.renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
-        this.renderer.appendChild(this.elementRef.nativeElement, this.#chartContainer);
-        this.ref.detectChanges();
+        this.#chartContainer = this.#renderer.createElement('div');
+        this.#renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
+        this.#renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
+        this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
+        this.#ref.detectChanges();
     };
     #deleteChartContainer = () => {
-        if (!this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
+        if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
         this.#echarts.clear();
-        this.renderer.removeChild(this.elementRef.nativeElement, this.#chartContainer);
+        this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
         this.#chartContainer = null;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#subscription.unsubscribe();
         if (this.#mutationObserver) {
@@ -639,7 +634,7 @@ class BizyBarLineChartComponent {
             this.#echarts.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, deps: [{ token: ElementRef }, { token: DOCUMENT }, { token: ChangeDetectorRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyBarLineChartComponent, isStandalone: true, selector: "bizy-bar-line-chart", inputs: { resizeRef: "resizeRef", tooltip: "tooltip", download: "download", axisPointer: "axisPointer", xAxisLabels: "xAxisLabels", onTooltipFormatter: "onTooltipFormatter", onXAxisLabelFormatter: "onXAxisLabelFormatter", data: "data" }, outputs: { onDownload: "onDownload", onSelect: "onSelect" }, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBarLineChartComponent, decorators: [{
@@ -650,19 +645,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                     imports: [CommonModule],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { resizeRef: [{
+        }], propDecorators: { resizeRef: [{
                 type: Input
             }], tooltip: [{
                 type: Input
@@ -701,13 +684,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyBreadcrumbComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     onSelect = new EventEmitter();
     _breadcrumbs = [];
     showGoBack = false;
-    constructor(ref) {
-        this.ref = ref;
-    }
     set breadcrumbs(breadcrumbs) {
         if (breadcrumbs) {
             this._breadcrumbs = breadcrumbs;
@@ -719,7 +700,7 @@ class BizyBreadcrumbComponent {
                 }
                 if (counter > 1) {
                     this.showGoBack = true;
-                    this.ref.detectChanges();
+                    this.#ref.detectChanges();
                     break;
                 }
             }
@@ -742,16 +723,16 @@ class BizyBreadcrumbComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBreadcrumbComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    getNativeElement() {
+        return this.#elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyBreadcrumbComponent, isStandalone: true, selector: "bizy-breadcrumb", inputs: { breadcrumbs: "breadcrumbs" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<ul class=\"bizy-breadcrumb\">\n  <li *ngFor=\"let breadcrumb of _breadcrumbs; let last = last; let i = index\">\n    <button \n      class=\"bizy-breadcrumb__link\"\n      [ngClass]=\"{'bizy-breadcrumb__link--skip': breadcrumb.skip || last}\"\n      type=\"button\" \n      (click)=\"goTo(breadcrumb)\">\n      {{breadcrumb.label}}\n    </button>\n    <button\n      type=\"button\"\n      *ngIf=\"last && showGoBack\"\n      class=\"bizy-breadcrumb__go-back\"\n      (click)=\"goBack()\">\n      <svg \n        class=\"bizy-breadcrumb__go-back__icon\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"/>\n        <path d=\"M9 11l-4 4l4 4m-4 -4h11a4 4 0 0 0 0 -8h-1\"/>\n      </svg>\n    </button>\n  </li>\n</ul>\n  ", styles: [":host{font-size:1rem}.bizy-breadcrumb{list-style:none;margin:0;padding:0}.bizy-breadcrumb li{display:inline}.bizy-breadcrumb li:before{content:\"/\";margin:0 .3rem}.bizy-breadcrumb li:first-child:before{content:\"\";margin:0}.bizy-breadcrumb__link{cursor:pointer;border:none;background-color:transparent;color:var(--bizy-breadcrumb-link-color)}.bizy-breadcrumb__link:hover{filter:brightness(95%)}.bizy-breadcrumb__link--skip{cursor:default;color:var(--bizy-breadcrumb-path-color)}.bizy-breadcrumb__link--skip:hover{color:var(--bizy-breadcrumb-path-color)}.bizy-breadcrumb__go-back{cursor:pointer;margin-left:.4rem;position:relative;top:.5rem;background-color:transparent;border:none}.bizy-breadcrumb__go-back__icon{color:var(--bizy-breadcrumb-link-color);height:1rem;position:relative;bottom:.3rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-breadcrumb', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"bizy-breadcrumb\">\n  <li *ngFor=\"let breadcrumb of _breadcrumbs; let last = last; let i = index\">\n    <button \n      class=\"bizy-breadcrumb__link\"\n      [ngClass]=\"{'bizy-breadcrumb__link--skip': breadcrumb.skip || last}\"\n      type=\"button\" \n      (click)=\"goTo(breadcrumb)\">\n      {{breadcrumb.label}}\n    </button>\n    <button\n      type=\"button\"\n      *ngIf=\"last && showGoBack\"\n      class=\"bizy-breadcrumb__go-back\"\n      (click)=\"goBack()\">\n      <svg \n        class=\"bizy-breadcrumb__go-back__icon\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        viewBox=\"0 0 24 24\"\n        xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M0 0h24v24H0z\" fill=\"none\" stroke=\"none\"/>\n        <path d=\"M9 11l-4 4l4 4m-4 -4h11a4 4 0 0 0 0 -8h-1\"/>\n      </svg>\n    </button>\n  </li>\n</ul>\n  ", styles: [":host{font-size:1rem}.bizy-breadcrumb{list-style:none;margin:0;padding:0}.bizy-breadcrumb li{display:inline}.bizy-breadcrumb li:before{content:\"/\";margin:0 .3rem}.bizy-breadcrumb li:first-child:before{content:\"\";margin:0}.bizy-breadcrumb__link{cursor:pointer;border:none;background-color:transparent;color:var(--bizy-breadcrumb-link-color)}.bizy-breadcrumb__link:hover{filter:brightness(95%)}.bizy-breadcrumb__link--skip{cursor:default;color:var(--bizy-breadcrumb-path-color)}.bizy-breadcrumb__link--skip:hover{color:var(--bizy-breadcrumb-path-color)}.bizy-breadcrumb__go-back{cursor:pointer;margin-left:.4rem;position:relative;top:.5rem;background-color:transparent;border:none}.bizy-breadcrumb__go-back__icon{color:var(--bizy-breadcrumb-link-color);height:1rem;position:relative;bottom:.3rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { onSelect: [{
+        }], propDecorators: { onSelect: [{
                 type: Output
             }], breadcrumbs: [{
                 type: Input
@@ -815,6 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
 
 registerLocaleData(localeEs);
 class BizyCalendarComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-calendar-${Math.random()}`;
     hideHeaderDate = false;
     preventExpand = false;
@@ -970,6 +952,7 @@ class BizyCalendarComponent {
         }
         return actions;
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyCalendarComponent, isStandalone: true, selector: "bizy-calendar", inputs: { id: "id", hideHeaderDate: "hideHeaderDate", preventExpand: "preventExpand", dayStartHour: "dayStartHour", dayEndHour: "dayEndHour", hourMinutesDuration: "hourMinutesDuration", hourSegments: "hourSegments", language: "language", excludeDays: "excludeDays", weekendDays: "weekendDays", weekStartsOn: "weekStartsOn", mode: "mode", customCalendarWeekEventTemplate: "customCalendarWeekEventTemplate", viewDate: "viewDate", events: "events" }, outputs: { onEventSelect: "onEventSelect", onDateSelect: "onDateSelect", onEventDelete: "onEventDelete" }, providers: [
             CalendarUtils,
@@ -1055,6 +1038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyCardComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-card-${Math.random()}`;
     disabled = false;
     selected = false;
@@ -1066,6 +1050,7 @@ class BizyCardComponent {
         }
         this.onSelect.emit(event);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyCardComponent, isStandalone: true, selector: "bizy-card", inputs: { id: "id", disabled: "disabled", selected: "selected", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    type=\"button\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    class=\"bizy-card {{customClass}}\"\n    [ngClass]=\"{'bizy-card--disabled': disabled}\">\n\n    <span class=\"bizy-card__header\">\n\n        <span class=\"bizy-card__header__start bizy-card__slot\">\n            <ng-content select=\"[slot=header-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__header__end bizy-card__slot\">\n            <ng-content select=\"[slot=header-end]\"></ng-content>\n        </span>\n\n    </span>\n\n    <span class=\"bizy-card__content\">\n\n        <ng-content></ng-content>\n\n    </span>\n\n    <span class=\"bizy-card__footer\">\n\n        <span class=\"bizy-card__footer__start bizy-card__slot\">\n            <ng-content select=\"[slot=footer-start]\"></ng-content>\n        </span>\n\n        <span class=\"bizy-card__footer__end bizy-card__slot\">\n            <ng-content select=\"[slot=footer-end]\"></ng-content>\n        </span>\n\n    </span>\n\n</button>", styles: [":host{font-size:1rem;height:var(--bizy-card-height);min-height:var(--bizy-card-min-height);max-height:var(--bizy-card-max-height);width:var(--bizy-card-width);min-width:var(--bizy-card-min-width);max-width:var(--bizy-card-max-width)}.bizy-card{height:100%;width:100%;cursor:var(--bizy-card-cursor);border-top:var(--bizy-card-border-top, var(--bizy-card-border, none));border-right:var(--bizy-card-border-right, var(--bizy-card-border, none));border-bottom:var(--bizy-card-border-bottom, var(--bizy-card-border, none));border-left:var(--bizy-card-border-left, var(--bizy-card-border, none));border-radius:var(--bizy-card-border-radius);overflow:hidden;padding:var(--bizy-card-padding);display:flex;flex-direction:column;justify-content:space-between;row-gap:.3rem;background-color:var(--bizy-card-background-color);transition:transform .25s ease-in-out;box-shadow:var(--bizy-card-box-shadow)}.bizy-card:hover{transform:translateY(-1px);box-shadow:var(--bizy-card-hover-box-shadow)}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__content{display:none}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__header:not(:empty){height:100%!important}.bizy-card:has(>.bizy-card__content:empty)>.bizy-card__footer:not(:empty){height:100%!important}.bizy-card--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-card__content:not(:empty){display:flex;align-items:center;column-gap:.5rem;height:100%;width:100%;background-color:var(--bizy-card-content-background-color)}.bizy-card__header:has(>.bizy-card__header__start:empty):has(>.bizy-card__header__end:empty){display:none}.bizy-card__header:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.5rem;background-color:var(--bizy-card-header-background-color)}.bizy-card__header__start{justify-content:flex-start}.bizy-card__header__end{justify-content:flex-end}.bizy-card__slot{width:100%;display:flex;align-items:center;column-gap:.5rem;height:100%;overflow:hidden}.bizy-card__footer:has(>.bizy-card__footer__start:empty):has(>.bizy-card__footer__end:empty){display:none}.bizy-card__footer:not(:empty){width:100%;height:fit-content;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:.5rem;background-color:var(--bizy-card-footer-background-color)}.bizy-card__footer__start{justify-content:flex-start}.bizy-card__footer__end{justify-content:flex-end}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1101,6 +1086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyCheckboxComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-checkbox-${Math.random()}`;
     selected = false;
     disabled = false;
@@ -1114,6 +1100,7 @@ class BizyCheckboxComponent {
         this.selectedChange.emit(!this.selected);
         this.onSelect.emit(event);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyCheckboxComponent, isStandalone: true, selector: "bizy-checkbox", inputs: { id: "id", selected: "selected", disabled: "disabled" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, ngImport: i0, template: "<button type=\"button\" [id]=\"id\" (click)=\"_onSelect($event)\" (keyup.enter)=\"_onSelect($event)\" class=\"bizy-checkbox\" [ngClass]=\"{'bizy-checkbox--disabled': disabled}\">\n\n  <ng-content select=\"[slot=start]\"></ng-content>\n\n  <input class=\"bizy-checkbox__input\" type=\"checkbox\" [id]=\"_checkboxId\" [disabled]=\"disabled\" [ngModel]=\"selected\">\n\n  <ng-content select=\"[slot=end]\"></ng-content>\n\n</button>", styles: [":host{font-size:1rem}.bizy-checkbox{display:flex;column-gap:.5rem;align-items:center;border:none;cursor:pointer;background-color:transparent}.bizy-checkbox:hover .bizy-checkbox__input:not(:checked){background-color:var(--bizy-checkbox-hover-color)}.bizy-checkbox--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-checkbox__input{position:relative;min-width:1rem;min-height:1rem;width:1rem;height:1rem;color:var(--bizy-checkbox-border-color);border:.1rem solid var(--bizy-checkbox-border-color);border-radius:.3rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;cursor:pointer;transition:background-color 175ms cubic-bezier(.1,.1,.25,1)}.bizy-checkbox__input:before{position:absolute;content:\"\";display:block;top:0;left:.25rem;width:.4rem;height:.7rem;border-style:solid;border-color:#fff;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0}.bizy-checkbox__input:checked{color:#fff;border-color:var(--bizy-checkbox-color);background-color:var(--bizy-checkbox-color)}.bizy-checkbox__input:checked:before{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1149,12 +1136,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyContentComponent {
+    #elementRef = inject(ElementRef);
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyContentComponent, isStandalone: true, selector: "bizy-content", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);height:100%;width:100%;overflow:auto;display:flex;flex-direction:column;row-gap:var(--bizy-content-row-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyContentComponent, isStandalone: true, selector: "bizy-content", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);width:var(--bizy-content-width);height:var(--bizy-content-height);overflow:auto;display:flex;flex-direction:var(--bizy-content-flex-direction);row-gap:var(--bizy-content-row-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-content', imports: [CommonModule], template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);height:100%;width:100%;overflow:auto;display:flex;flex-direction:column;row-gap:var(--bizy-content-row-gap)}\n"] }]
+            args: [{ selector: 'bizy-content', imports: [CommonModule], template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);width:var(--bizy-content-width);height:var(--bizy-content-height);overflow:auto;display:flex;flex-direction:var(--bizy-content-flex-direction);row-gap:var(--bizy-content-row-gap)}\n"] }]
         }] });
 
 const COMPONENTS$n = [
@@ -1174,21 +1163,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyInputOptionComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     id = `bizy-input-${Math.random()}`;
     disabled = false;
     customClass = '';
     selected = false;
     onSelect = new EventEmitter();
-    constructor(ref) {
-        this.ref = ref;
-    }
     _onSelect(event) {
         if (this.disabled) {
             return;
         }
         this.onSelect.emit(event);
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     getId = () => {
         return this.id;
@@ -1196,16 +1183,14 @@ class BizyInputOptionComponent {
     getSelected = () => {
         return this.selected;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyInputOptionComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyInputOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyInputOptionComponent, isStandalone: true, selector: "bizy-input-option", inputs: { id: "id", disabled: "disabled", customClass: "customClass", selected: "selected" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    type=\"button\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    [ngClass]=\"{'bizy-input-option--selected': selected, 'bizy-input-option--disabled': disabled}\"\n    class=\"bizy-input-option {{customClass}}\">\n\n    <span class=\"bizy-input-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>", styles: [":host{font-size:1rem}.bizy-input-option{font-size:1rem;width:100%;border:none;background-color:var(--bizy-input-background-color);display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;color:var(--bizy-input-color);cursor:pointer}.bizy-input-option:hover{background-color:var(--bizy-input-option-hover-background-color)}.bizy-input-option--selected{background-color:var(--bizy-input-option-selected-background-color)!important}.bizy-input-option--selected ::ng-deep .bizy-input-option__content *{color:var(--bizy-input-option-selected-color)}.bizy-input-option--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-input-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;text-align:start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyInputOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-input-option', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    [ngClass]=\"{'bizy-input-option--selected': selected, 'bizy-input-option--disabled': disabled}\"\n    class=\"bizy-input-option {{customClass}}\">\n\n    <span class=\"bizy-input-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>", styles: [":host{font-size:1rem}.bizy-input-option{font-size:1rem;width:100%;border:none;background-color:var(--bizy-input-background-color);display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;color:var(--bizy-input-color);cursor:pointer}.bizy-input-option:hover{background-color:var(--bizy-input-option-hover-background-color)}.bizy-input-option--selected{background-color:var(--bizy-input-option-selected-background-color)!important}.bizy-input-option--selected ::ng-deep .bizy-input-option__content *{color:var(--bizy-input-option-selected-color)}.bizy-input-option--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-input-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;text-align:start}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -1264,7 +1249,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyInputComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     options;
     bizyInputWrapper;
     bizyInput;
@@ -1315,9 +1301,6 @@ class BizyInputComponent {
     #subscription = new Subscription();
     #optionSubscription = new Subscription();
     onChange$ = new Subject();
-    constructor(ref) {
-        this.ref = ref;
-    }
     getWidth() {
         return this.bizyInputWrapper && this.bizyInputWrapper.nativeElement && this.bizyInputWrapper.nativeElement.offsetWidth ? this.bizyInputWrapper.nativeElement.offsetWidth : 0;
     }
@@ -1349,7 +1332,7 @@ class BizyInputComponent {
         setTimeout(() => {
             this.focused = false;
             this.touched = true;
-            this.ref.detectChanges();
+            this.#ref.detectChanges();
             this.onBlur.emit(event);
         }, 250);
     }
@@ -1363,12 +1346,12 @@ class BizyInputComponent {
             return;
         }
         this.focused = true;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
         this.onFocus.emit(event);
     }
     setTouched(touched) {
         this.touched = touched;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     ngAfterViewInit() {
         if (this.type === 'currency' && this.bizyInput.nativeElement.setValue) {
@@ -1384,7 +1367,7 @@ class BizyInputComponent {
             return;
         }
         this.opened = !this.opened;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
         if (!this.options) {
             return;
         }
@@ -1393,7 +1376,7 @@ class BizyInputComponent {
         this.options.forEach(_option => {
             this.#optionSubscription.add(_option.onSelect.subscribe(() => {
                 this.close();
-                this.ref.detectChanges();
+                this.#ref.detectChanges();
                 this.#optionSubscription.unsubscribe();
             }));
         });
@@ -1413,7 +1396,7 @@ class BizyInputComponent {
                 }
                 finish$.next();
                 finish$.complete();
-                this.ref.detectChanges();
+                this.#ref.detectChanges();
             }
         }));
     }
@@ -1422,22 +1405,20 @@ class BizyInputComponent {
             return;
         }
         this.opened = false;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     ngOnDestroy() {
         this.#subscription.unsubscribe();
         this.#optionSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyInputComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyInputComponent, isStandalone: true, selector: "bizy-input", inputs: { id: "id", name: "name", type: "type", customClass: "customClass", placeholder: "placeholder", debounceTime: "debounceTime", rows: "rows", disabled: "disabled", readonly: "readonly", autofocus: "autofocus", value: "value" }, outputs: { valueChange: "valueChange", onChange: "onChange", onEnter: "onEnter", onBackspace: "onBackspace", onSelect: "onSelect", onBlur: "onBlur", onFocus: "onFocus" }, queries: [{ propertyName: "options", predicate: BizyInputOptionComponent }], viewQueries: [{ propertyName: "bizyInputWrapper", first: true, predicate: ["bizyInputWrapper"], descendants: true }, { propertyName: "bizyInput", first: true, predicate: ["bizyInput"], descendants: true }], ngImport: i0, template: "<button\n    #bizyInputWrapper\n    type=\"button\"\n    (click)=\"_onClick($event)\"\n    (keyup)=\"_onClick($event)\"\n    class=\"bizy-input {{customClass}}\"\n    (focus)=\"bizyInput.nativeElement.focus()\"\n    cdkOverlayOrigin\n    #bizyInputTrigger=\"cdkOverlayOrigin\"\n    [ngClass]=\"{'bizy-input--disabled': disabled, 'bizy-input--negative': type === 'currency' && _currencyValue < 0}\">\n\n    <span class=\"bizy-input__header\">\n        <ng-content select=\"[slot=header]\"></ng-content>\n    </span>\n\n    <span class=\"bizy-input__content\" [ngClass]=\"{'bizy-input__content--readonly': readonly}\">\n        \n        <span class=\"bizy-input__content__prefix\">\n            <ng-content select=\"[slot=prefix]\"></ng-content>\n        </span>\n        \n        <input\n            #bizyInput\n            *ngIf=\"type !== 'textarea'\"\n            [id]=\"id\"\n            class=\"bizy-input__content__input\"\n            [type]=\"type === 'currency' ? 'tel' : type\"\n            [placeholder]=\"placeholder\"\n            [readonly]=\"readonly\"\n            [bizyCurrencyFormat]=\"type === 'currency'\"\n            [bizyCurrencyOptions]=\"currencyOptions\"\n            [bizyOnlyPhoneDigits]=\"type === 'tel'\"\n            (blur)=\"_onBlur($event)\"\n            (focus)=\"_onFocus($event)\"\n            (keyup.enter)=\"_onEnter($event)\"\n            (keyup.backspace)=\"_onBackspace($event)\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onchange($event)\"/>\n        \n        <textarea\n            #bizyInput\n            *ngIf=\"type === 'textarea'\"\n            [id]=\"id\"\n            [rows]=\"rows\"\n            [placeholder]=\"placeholder\"\n            [readonly]=\"readonly\"\n            class=\"bizy-input__content__input\"\n            (blur)=\"_onBlur($event)\"\n            (focus)=\"_onFocus($event)\"\n            (keyup.enter)=\"_onEnter($event)\"\n            (keyup.backspace)=\"_onBackspace($event)\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onchange($event)\">\n        </textarea>\n\n        <span class=\"bizy-input__content__suffix\">\n            <ng-content select=\"[slot=suffix]\"></ng-content>\n        </span>\n\n    </span>\n\n    <span class=\"bizy-input__bottom-line\" [ngClass]=\"{'bizy-input__bottom-line--visible': focused}\"></span>\n\n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"bizyInputWrapper?.offsetWidth\"\n    [cdkConnectedOverlayOrigin]=\"bizyInputTrigger\"\n    (overlayOutsideClick)=\"close($event, bizyInputWrapper)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-input__options\">\n\n        <ng-content select=\"bizy-input-option\"></ng-content>\n    \n    </span>\n\n</ng-template>\n\n<span class=\"bizy-input__errors\" *ngIf=\"touched\">\n    <ng-content select=\"[slot=error]\"></ng-content>\n</span>\n", styles: [":host{width:var(--bizy-input-width);min-width:var(--bizy-input-min-width);max-width:var(--bizy-input-max-width);display:flex;flex-direction:column;row-gap:.3rem}:host:has(>.bizy-input__errors:not(:empty)) .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-input__errors:not(:empty)) .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-input{width:100%;background-color:var(--bizy-input-background-color);border:none;border-top-left-radius:.3rem;border-top-right-radius:.3rem;display:flex;padding:.3rem .3rem 0;flex-direction:column;cursor:var(--bizy-input-cursor)}.bizy-input--negative,.bizy-input--negative .bizy-input__header,.bizy-input--negative .bizy-input__content,.bizy-input--negative .bizy-input__content__input{background-color:var(--bizy-input-negative-background-color)}.bizy-input--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-input__header{background-color:var(--bizy-input-background-color);width:100%;display:flex;align-items:center;column-gap:.5rem;padding-bottom:.1rem}.bizy-input__header:empty{display:none!important}.bizy-input__content{background-color:var(--bizy-input-background-color);width:100%;display:flex;align-items:center;column-gap:.3rem}.bizy-input__content--readonly{pointer-events:none;cursor:default!important}.bizy-input__content__prefix{display:flex;align-items:center;column-gap:.3rem}.bizy-input__content__prefix:empty{display:none!important}.bizy-input__content__suffix{display:flex;align-items:center;column-gap:.3rem}.bizy-input__content__suffix:empty{display:none!important}.bizy-input__content__input{width:100%;background-color:var(--bizy-input-background-color);color:var(--bizy-input-color);flex:1;border:none;padding-block:0;padding-inline:0;padding:0 0 .2rem;font-size:var(--bizy-input-font-size)}.bizy-input__content__input:focus{outline:none;border:none}.bizy-input__content input[type=number]::-webkit-inner-spin-button,.bizy-input__content input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.bizy-input__bottom-line{width:calc(100% + .6rem);position:relative;right:.3rem;height:.1rem;visibility:hidden;pointer-events:none;background-color:var(--bizy-input-focus-color)}.bizy-input__bottom-line--visible{visibility:visible;animation-name:zoomIn;animation-duration:.2s;animation-fill-mode:both}.bizy-input__options{background-color:var(--bizy-input-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-input-options-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-input__errors:empty{display:none!important}::ng-deep .bizy-input__errors *{color:var(--bizy-input-invalid-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: BizyCurrencyFormatDirective, selector: "[bizyCurrencyFormat]", inputs: ["bizyCurrencyFormat", "bizyCurrencyOptions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-input', imports: [CommonModule, FormsModule, OverlayModule, BizyCurrencyFormatDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n    #bizyInputWrapper\n    type=\"button\"\n    (click)=\"_onClick($event)\"\n    (keyup)=\"_onClick($event)\"\n    class=\"bizy-input {{customClass}}\"\n    (focus)=\"bizyInput.nativeElement.focus()\"\n    cdkOverlayOrigin\n    #bizyInputTrigger=\"cdkOverlayOrigin\"\n    [ngClass]=\"{'bizy-input--disabled': disabled, 'bizy-input--negative': type === 'currency' && _currencyValue < 0}\">\n\n    <span class=\"bizy-input__header\">\n        <ng-content select=\"[slot=header]\"></ng-content>\n    </span>\n\n    <span class=\"bizy-input__content\" [ngClass]=\"{'bizy-input__content--readonly': readonly}\">\n        \n        <span class=\"bizy-input__content__prefix\">\n            <ng-content select=\"[slot=prefix]\"></ng-content>\n        </span>\n        \n        <input\n            #bizyInput\n            *ngIf=\"type !== 'textarea'\"\n            [id]=\"id\"\n            class=\"bizy-input__content__input\"\n            [type]=\"type === 'currency' ? 'tel' : type\"\n            [placeholder]=\"placeholder\"\n            [readonly]=\"readonly\"\n            [bizyCurrencyFormat]=\"type === 'currency'\"\n            [bizyCurrencyOptions]=\"currencyOptions\"\n            [bizyOnlyPhoneDigits]=\"type === 'tel'\"\n            (blur)=\"_onBlur($event)\"\n            (focus)=\"_onFocus($event)\"\n            (keyup.enter)=\"_onEnter($event)\"\n            (keyup.backspace)=\"_onBackspace($event)\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onchange($event)\"/>\n        \n        <textarea\n            #bizyInput\n            *ngIf=\"type === 'textarea'\"\n            [id]=\"id\"\n            [rows]=\"rows\"\n            [placeholder]=\"placeholder\"\n            [readonly]=\"readonly\"\n            class=\"bizy-input__content__input\"\n            (blur)=\"_onBlur($event)\"\n            (focus)=\"_onFocus($event)\"\n            (keyup.enter)=\"_onEnter($event)\"\n            (keyup.backspace)=\"_onBackspace($event)\"\n            [ngModel]=\"_value\"\n            (ngModelChange)=\"_onchange($event)\">\n        </textarea>\n\n        <span class=\"bizy-input__content__suffix\">\n            <ng-content select=\"[slot=suffix]\"></ng-content>\n        </span>\n\n    </span>\n\n    <span class=\"bizy-input__bottom-line\" [ngClass]=\"{'bizy-input__bottom-line--visible': focused}\"></span>\n\n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"bizyInputWrapper?.offsetWidth\"\n    [cdkConnectedOverlayOrigin]=\"bizyInputTrigger\"\n    (overlayOutsideClick)=\"close($event, bizyInputWrapper)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-input__options\">\n\n        <ng-content select=\"bizy-input-option\"></ng-content>\n    \n    </span>\n\n</ng-template>\n\n<span class=\"bizy-input__errors\" *ngIf=\"touched\">\n    <ng-content select=\"[slot=error]\"></ng-content>\n</span>\n", styles: [":host{width:var(--bizy-input-width);min-width:var(--bizy-input-min-width);max-width:var(--bizy-input-max-width);display:flex;flex-direction:column;row-gap:.3rem}:host:has(>.bizy-input__errors:not(:empty)) .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-input__errors:not(:empty)) .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-input{width:100%;background-color:var(--bizy-input-background-color);border:none;border-top-left-radius:.3rem;border-top-right-radius:.3rem;display:flex;padding:.3rem .3rem 0;flex-direction:column;cursor:var(--bizy-input-cursor)}.bizy-input--negative,.bizy-input--negative .bizy-input__header,.bizy-input--negative .bizy-input__content,.bizy-input--negative .bizy-input__content__input{background-color:var(--bizy-input-negative-background-color)}.bizy-input--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-input__header{background-color:var(--bizy-input-background-color);width:100%;display:flex;align-items:center;column-gap:.5rem;padding-bottom:.1rem}.bizy-input__header:empty{display:none!important}.bizy-input__content{background-color:var(--bizy-input-background-color);width:100%;display:flex;align-items:center;column-gap:.3rem}.bizy-input__content--readonly{pointer-events:none;cursor:default!important}.bizy-input__content__prefix{display:flex;align-items:center;column-gap:.3rem}.bizy-input__content__prefix:empty{display:none!important}.bizy-input__content__suffix{display:flex;align-items:center;column-gap:.3rem}.bizy-input__content__suffix:empty{display:none!important}.bizy-input__content__input{width:100%;background-color:var(--bizy-input-background-color);color:var(--bizy-input-color);flex:1;border:none;padding-block:0;padding-inline:0;padding:0 0 .2rem;font-size:var(--bizy-input-font-size)}.bizy-input__content__input:focus{outline:none;border:none}.bizy-input__content input[type=number]::-webkit-inner-spin-button,.bizy-input__content input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.bizy-input__bottom-line{width:calc(100% + .6rem);position:relative;right:.3rem;height:.1rem;visibility:hidden;pointer-events:none;background-color:var(--bizy-input-focus-color)}.bizy-input__bottom-line--visible{visibility:visible;animation-name:zoomIn;animation-duration:.2s;animation-fill-mode:both}.bizy-input__options{background-color:var(--bizy-input-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-input-options-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-input__errors:empty{display:none!important}::ng-deep .bizy-input__errors *{color:var(--bizy-input-invalid-color)!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { options: [{
+        }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [BizyInputOptionComponent]
             }], bizyInputWrapper: [{
@@ -1485,6 +1466,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyDatePickerComponent {
+    #elementRef = inject(ElementRef);
+    #datePipe = inject(DatePipe);
+    #ref = inject(ChangeDetectorRef);
     bizyDatePicker;
     id = `bizy-date-picker-${Math.random()}`;
     disabled = false;
@@ -1499,8 +1483,6 @@ class BizyDatePickerComponent {
     openedChange = new EventEmitter();
     onOpen = new EventEmitter();
     onSelect = new EventEmitter();
-    #datePipe = inject(DatePipe);
-    #ref = inject(ChangeDetectorRef);
     dateFormat = 'Y-m-d';
     datePipeFormat = 'yyyy-MM-dd';
     enableTime = false;
@@ -1632,6 +1614,7 @@ class BizyDatePickerComponent {
             this.#ref.detectChanges();
         }
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     #getHour(time) {
         const date = new Date(time);
         return date.getHours();
@@ -1895,6 +1878,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyFileUploaderComponent {
+    #elementRef = inject(ElementRef);
     #fileUploader = inject(BizyFileUploaderService);
     dragDropAreaWidth = '100%';
     dragDropAreaHeight = '16rem';
@@ -1980,6 +1964,7 @@ class BizyFileUploaderComponent {
             this.loadedFiles.emit(Array.from(this.#files));
         }));
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#fileUploader.cleanAllFiles();
         this.#subscription.unsubscribe();
@@ -2053,6 +2038,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyFilterSectionRangeOptionComponent {
+    #elementRef = inject(ElementRef);
     #fb = inject(FormBuilder);
     #ref = inject(ChangeDetectorRef);
     id = `bizy-filter-section-range-option-${Math.random()}`;
@@ -2160,6 +2146,7 @@ class BizyFilterSectionRangeOptionComponent {
     getId = () => {
         return this.id;
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     isActivated = () => {
         return this.#activated.value;
     };
@@ -2188,7 +2175,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyFilterSectionCheckboxOptionComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     id = `bizy-filter-section-checkbox-option-${Math.random()}`;
     disabled = false;
     customClass = '';
@@ -2201,33 +2189,28 @@ class BizyFilterSectionCheckboxOptionComponent {
         this.onSelect(selected);
     }
     _selected = true;
-    constructor(ref) {
-        this.ref = ref;
-    }
     onSelect = (selected) => {
         if (this.disabled) {
             return;
         }
         this._selected = selected;
         this.onChange.emit(selected);
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     getSelected = () => {
         return this._selected;
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     getId = () => {
         return this.id;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionCheckboxOptionComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionCheckboxOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyFilterSectionCheckboxOptionComponent, isStandalone: true, selector: "bizy-filter-section-checkbox-option", inputs: { id: "id", disabled: "disabled", customClass: "customClass", selected: "selected" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div \n    class=\"bizy-filter-section-checkbox-option {{customClass}}\"\n    [id]=\"id\"\n    (click)=\"onSelect(!_selected)\"\n    (keyup.enter)=\"onSelect(!_selected)\">\n\n    <ng-content></ng-content>\n\n    <bizy-checkbox \n        class=\"bizy-filter-section-checkbox-option__checkbox\"\n        [selected]=\"_selected\"\n        [disabled]=\"disabled\">\n    </bizy-checkbox>\n    \n</div>", styles: [":host{font-size:1rem}.bizy-filter-section-checkbox-option{display:flex;align-items:center;column-gap:.3rem;justify-content:space-between;cursor:pointer}.bizy-filter-section-checkbox-option__checkbox{pointer-events:none}\n"], dependencies: [{ kind: "component", type: BizyCheckboxComponent, selector: "bizy-checkbox", inputs: ["id", "selected", "disabled"], outputs: ["selectedChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionCheckboxOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-filter-section-checkbox-option', imports: [BizyCheckboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n    class=\"bizy-filter-section-checkbox-option {{customClass}}\"\n    [id]=\"id\"\n    (click)=\"onSelect(!_selected)\"\n    (keyup.enter)=\"onSelect(!_selected)\">\n\n    <ng-content></ng-content>\n\n    <bizy-checkbox \n        class=\"bizy-filter-section-checkbox-option__checkbox\"\n        [selected]=\"_selected\"\n        [disabled]=\"disabled\">\n    </bizy-checkbox>\n    \n</div>", styles: [":host{font-size:1rem}.bizy-filter-section-checkbox-option{display:flex;align-items:center;column-gap:.3rem;justify-content:space-between;cursor:pointer}.bizy-filter-section-checkbox-option__checkbox{pointer-events:none}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -2240,7 +2223,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyFilterSectionSearchOptionComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     id = `bizy-filter-section-search-option-${Math.random()}`;
     customClass = '';
     valueChange = new EventEmitter();
@@ -2259,16 +2243,13 @@ class BizyFilterSectionSearchOptionComponent {
         }
         this._value = value;
         this.#activated.next(Boolean(value));
-        this.ref.detectChanges();
-    }
-    constructor(ref) {
-        this.ref = ref;
+        this.#ref.detectChanges();
     }
     _onChange(value) {
         this.valueChange.emit(value);
         this.onChange.emit(value);
         this.#activated.next(Boolean(value));
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     getId = () => {
         return this.id;
@@ -2276,19 +2257,17 @@ class BizyFilterSectionSearchOptionComponent {
     getValue = () => {
         return this._value;
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     isActivated = () => {
         return this.#activated.value;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionSearchOptionComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionSearchOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyFilterSectionSearchOptionComponent, isStandalone: true, selector: "bizy-filter-section-search-option", inputs: { id: "id", customClass: "customClass", value: "value" }, outputs: { valueChange: "valueChange", onChange: "onChange" }, ngImport: i0, template: "<bizy-input\n    [id]=\"id\" \n    (onChange)=\"_onChange($event)\"\n    [value]=\"_value\"\n    class=\"bizy-filter-section-search-option {{customClass}}\">\n\n    <span slot=\"header\"></span>\n\n    <ng-container slot=\"prefix\">\n        <ng-content select=\"[slot=prefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container slot=\"suffix\">\n        <ng-content select=\"[slot=suffix]\"></ng-content>\n    </ng-container>\n\n</bizy-input>\n", styles: [":host{font-size:1rem;width:100%}.bizy-filter-section-search-option{--bizy-input-background-color: #f3f3f3 !important}\n"], dependencies: [{ kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "type", "customClass", "placeholder", "debounceTime", "rows", "disabled", "readonly", "autofocus", "value"], outputs: ["valueChange", "onChange", "onEnter", "onBackspace", "onSelect", "onBlur", "onFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionSearchOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-filter-section-search-option', imports: [BizyInputComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bizy-input\n    [id]=\"id\" \n    (onChange)=\"_onChange($event)\"\n    [value]=\"_value\"\n    class=\"bizy-filter-section-search-option {{customClass}}\">\n\n    <span slot=\"header\"></span>\n\n    <ng-container slot=\"prefix\">\n        <ng-content select=\"[slot=prefix]\"></ng-content>\n    </ng-container>\n\n    <ng-container slot=\"suffix\">\n        <ng-content select=\"[slot=suffix]\"></ng-content>\n    </ng-container>\n\n</bizy-input>\n", styles: [":host{font-size:1rem;width:100%}.bizy-filter-section-search-option{--bizy-input-background-color: #f3f3f3 !important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }], customClass: [{
                 type: Input
@@ -2301,8 +2280,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyFilterSectionComponent {
-    document;
-    ref;
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
     checkboxOptions;
     rangeOption;
     searchOption;
@@ -2314,10 +2294,6 @@ class BizyFilterSectionComponent {
     #mutationObserver;
     #checkboxOptions = [];
     _activated = false;
-    constructor(document, ref) {
-        this.document = document;
-        this.ref = ref;
-    }
     ngAfterViewInit() {
         this.#mutationObserver = new MutationObserver(() => {
             if (this.checkboxOptions && (this.#checkboxOptions.length !== 0 || this.checkboxOptions.length !== 0) && !this.#optionsAreEqual(this.#checkboxOptions, this.checkboxOptions.toArray())) {
@@ -2325,13 +2301,13 @@ class BizyFilterSectionComponent {
                 const selectedOptions = this.checkboxOptions.filter(_option => _option.getSelected() === true);
                 this._activated = selectedOptions.length !== this.checkboxOptions.length;
                 this.onSelect.emit(this._activated);
-                this.ref.detectChanges();
+                this.#ref.detectChanges();
                 this.checkboxOptions.forEach(_option => {
                     this.#subscription.add(_option.onChange.subscribe(() => {
                         const selectedOptions = this.checkboxOptions.filter(_option => _option.getSelected() === true);
                         this._activated = selectedOptions.length !== this.checkboxOptions.length;
                         this.onSelect.emit(this._activated);
-                        this.ref.detectChanges();
+                        this.#ref.detectChanges();
                     }));
                 });
             }
@@ -2340,7 +2316,7 @@ class BizyFilterSectionComponent {
                     setTimeout(() => {
                         this._activated = value;
                         this.onSelect.emit(value);
-                        this.ref.detectChanges();
+                        this.#ref.detectChanges();
                     });
                 }));
                 this.#mutationObserver.disconnect();
@@ -2350,13 +2326,13 @@ class BizyFilterSectionComponent {
                     setTimeout(() => {
                         this._activated = value;
                         this.onSelect.emit(value);
-                        this.ref.detectChanges();
+                        this.#ref.detectChanges();
                     });
                 }));
                 this.#mutationObserver.disconnect();
             }
         });
-        this.#mutationObserver.observe(this.document.body, { childList: true, subtree: true });
+        this.#mutationObserver.observe(this.#document.body, { childList: true, subtree: true });
     }
     _onSelect = (selected) => {
         if (this.disabled || this.rangeOption) {
@@ -2393,25 +2369,20 @@ class BizyFilterSectionComponent {
         }
         return true;
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#subscription.unsubscribe();
         if (this.#mutationObserver) {
             this.#mutationObserver.disconnect();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionComponent, deps: [{ token: DOCUMENT }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyFilterSectionComponent, isStandalone: true, selector: "bizy-filter-section", inputs: { id: "id", disabled: "disabled", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, queries: [{ propertyName: "rangeOption", first: true, predicate: BizyFilterSectionRangeOptionComponent, descendants: true }, { propertyName: "searchOption", first: true, predicate: BizyFilterSectionSearchOptionComponent, descendants: true }, { propertyName: "checkboxOptions", predicate: BizyFilterSectionCheckboxOptionComponent }], ngImport: i0, template: "<div class=\"bizy-filter-section {{customClass}}\" [id]=\"id\">\n\n    <span class=\"bizy-filter-section__header\">\n\n        <ng-content select=\"[slot=header]\"></ng-content>\n\n        <bizy-checkbox \n            class=\"bizy-filter-section__header__checkbox\"\n            (onSelect)=\"_onSelect(_activated)\"\n            [selected]=\"!_activated\"\n            [disabled]=\"disabled\">\n        </bizy-checkbox>\n\n        <button \n            type=\"button\"\n            class=\"bizy-filter-section__header__clear-button\"\n            (click)=\"onClean()\"\n            (keyup.enter)=\"onClean()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" class=\"bizy-filter-section__header__clear-icon\">\n                <path d=\"M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z\"/>\n            </svg>\n        </button>\n        \n    </span>\n\n    <span class=\"bizy-filter-section__options\">\n\n        <ng-content select=\"bizy-filter-section-checkbox-option\"></ng-content>\n\n        <ng-content select=\"bizy-filter-section-range-option\"></ng-content>\n\n        <ng-content select=\"bizy-filter-section-search-option\"></ng-content>\n\n    </span>\n\n</div>", styles: [":host{font-size:1rem;flex:1;min-width:var(--bizy-filter-section-min-width)}:host:has(.bizy-filter-section-range-option) .bizy-filter-section__header__checkbox{display:none!important}:host:has(.bizy-filter-section-search-option) .bizy-filter-section__header__checkbox{display:none!important}:host:has(.bizy-filter-section-checkbox-option) .bizy-filter-section__header__clear-button{display:none!important}:host:has(.bizy-filter-section-search-option) .bizy-filter-section__header__clear-button{display:none!important}:host:has(.bizy-filter-section-checkbox-option) .bizy-filter-section__options{overflow-y:auto!important}.bizy-filter-section{width:100%;background-color:transparent;display:flex;flex-direction:column;row-gap:.3rem}.bizy-filter-section__header{width:100%;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;border:none;background-color:transparent;text-align:start}.bizy-filter-section__options{width:100%;max-width:100%;display:flex;flex-direction:column;min-height:fit-content;max-height:15rem;overflow-y:hidden;overflow-x:hidden}.bizy-filter-section__header__clear-button{width:fit-content;height:fit-content;border:none;background-color:transparent;cursor:pointer}.bizy-filter-section__header__clear-icon{fill:var(--bizy-filter-section-clear-color);pointer-events:none;height:1rem}\n"], dependencies: [{ kind: "component", type: BizyCheckboxComponent, selector: "bizy-checkbox", inputs: ["id", "selected", "disabled"], outputs: ["selectedChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-filter-section', imports: [BizyCheckboxComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-filter-section {{customClass}}\" [id]=\"id\">\n\n    <span class=\"bizy-filter-section__header\">\n\n        <ng-content select=\"[slot=header]\"></ng-content>\n\n        <bizy-checkbox \n            class=\"bizy-filter-section__header__checkbox\"\n            (onSelect)=\"_onSelect(_activated)\"\n            [selected]=\"!_activated\"\n            [disabled]=\"disabled\">\n        </bizy-checkbox>\n\n        <button \n            type=\"button\"\n            class=\"bizy-filter-section__header__clear-button\"\n            (click)=\"onClean()\"\n            (keyup.enter)=\"onClean()\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" class=\"bizy-filter-section__header__clear-icon\">\n                <path d=\"M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z\"/>\n            </svg>\n        </button>\n        \n    </span>\n\n    <span class=\"bizy-filter-section__options\">\n\n        <ng-content select=\"bizy-filter-section-checkbox-option\"></ng-content>\n\n        <ng-content select=\"bizy-filter-section-range-option\"></ng-content>\n\n        <ng-content select=\"bizy-filter-section-search-option\"></ng-content>\n\n    </span>\n\n</div>", styles: [":host{font-size:1rem;flex:1;min-width:var(--bizy-filter-section-min-width)}:host:has(.bizy-filter-section-range-option) .bizy-filter-section__header__checkbox{display:none!important}:host:has(.bizy-filter-section-search-option) .bizy-filter-section__header__checkbox{display:none!important}:host:has(.bizy-filter-section-checkbox-option) .bizy-filter-section__header__clear-button{display:none!important}:host:has(.bizy-filter-section-search-option) .bizy-filter-section__header__clear-button{display:none!important}:host:has(.bizy-filter-section-checkbox-option) .bizy-filter-section__options{overflow-y:auto!important}.bizy-filter-section{width:100%;background-color:transparent;display:flex;flex-direction:column;row-gap:.3rem}.bizy-filter-section__header{width:100%;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;border:none;background-color:transparent;text-align:start}.bizy-filter-section__options{width:100%;max-width:100%;display:flex;flex-direction:column;min-height:fit-content;max-height:15rem;overflow-y:hidden;overflow-x:hidden}.bizy-filter-section__header__clear-button{width:fit-content;height:fit-content;border:none;background-color:transparent;cursor:pointer}.bizy-filter-section__header__clear-icon{fill:var(--bizy-filter-section-clear-color);pointer-events:none;height:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { checkboxOptions: [{
+        }], propDecorators: { checkboxOptions: [{
                 type: ContentChildren,
                 args: [BizyFilterSectionCheckboxOptionComponent]
             }], rangeOption: [{
@@ -2431,6 +2402,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyFilterSectionsComponent {
+    #elementRef = inject(ElementRef);
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyFilterSectionsComponent, isStandalone: true, selector: "bizy-filter-sections", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;background-color:inherit;width:fit-content;max-width:90vw;grid-template-columns:repeat(auto-fit,minmax(var(--bizy-filter-section-min-width),1fr));display:grid;gap:2rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -2440,8 +2413,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyFilterComponent {
-    document;
-    ref;
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
     sections;
     id = `bizy-filter-${Math.random()}`;
     disabled = false;
@@ -2452,10 +2426,6 @@ class BizyFilterComponent {
     _filterWidth;
     _activated = false;
     #subscription = new Subscription();
-    constructor(document, ref) {
-        this.document = document;
-        this.ref = ref;
-    }
     ngAfterViewInit() {
         const mutationObserver = new MutationObserver(() => {
             if (this.sections && this.sections.length > 0) {
@@ -2464,7 +2434,7 @@ class BizyFilterComponent {
                 if (this._activated !== activated) {
                     this._activated = activated;
                     this.onChange.emit(this._activated);
-                    this.ref.detectChanges();
+                    this.#ref.detectChanges();
                 }
                 this.sections.forEach(_section => {
                     this.#subscription.add(_section.onSelect.subscribe(() => {
@@ -2473,14 +2443,14 @@ class BizyFilterComponent {
                         if (this._activated !== activated) {
                             this._activated = activated;
                             this.onChange.emit(this._activated);
-                            this.ref.detectChanges();
+                            this.#ref.detectChanges();
                         }
                     }));
                 });
                 mutationObserver.disconnect();
             }
         });
-        mutationObserver.observe(this.document.body, { childList: true, subtree: true });
+        mutationObserver.observe(this.#document.body, { childList: true, subtree: true });
     }
     _onOpen = (event) => {
         if (this.disabled) {
@@ -2497,12 +2467,13 @@ class BizyFilterComponent {
             return;
         }
         this.opened = false;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterComponent, deps: [{ token: DOCUMENT }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyFilterComponent, isStandalone: true, selector: "bizy-filter", inputs: { id: "id", disabled: "disabled", customClass: "customClass", opened: "opened" }, outputs: { onOpen: "onOpen", onChange: "onChange" }, queries: [{ propertyName: "sections", predicate: BizyFilterSectionComponent, descendants: true }], ngImport: i0, template: "<button \n    type=\"button\"\n    class=\"bizy-filter {{customClass}}\"\n    [ngClass]=\"{'bizy-filter--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onOpen($event)\"\n    (keyup.enter)=\"_onOpen($event)\"\n    cdkOverlayOrigin \n    #bizyFilterTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-filter__content\">\n        <ng-content></ng-content>\n    </span>\n\n    <span class=\"bizy-filter__badge\" [ngClass]=\"{'bizy-filter__badge--visible': _activated}\"></span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"_filterWidth\"\n    [cdkConnectedOverlayOrigin]=\"bizyFilterTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-filter__sections-wrapper\">\n\n        <bizy-filter-sections>\n    \n            <ng-content select=\"bizy-filter-section\"></ng-content>\n    \n        </bizy-filter-sections>\n\n        <ng-content select=\"bizy-filter-content\"></ng-content>\n\n    </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem}.bizy-filter{font-size:1rem;width:100%;border:none;background-color:transparent;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;cursor:pointer;padding:var(--bizy-filter-padding);color:var(--bizy-filter-color);position:relative}.bizy-filter--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-filter__badge{position:absolute;top:-.2rem;right:-.2rem;height:.5rem;width:.5rem;border-radius:50%;background-color:var(--bizy-filter-badge-color);display:none}.bizy-filter__badge--visible{display:block!important}.bizy-filter__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-filter__sections-wrapper{background-color:var(--bizy-filter-background-color);display:flex;flex-direction:column;overflow-y:auto;max-height:30rem;max-width:90vw;padding:.5rem;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BizyFilterSectionsComponent, selector: "bizy-filter-sections" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterComponent, decorators: [{
@@ -2512,13 +2483,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                         OverlayModule,
                         BizyFilterSectionsComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    class=\"bizy-filter {{customClass}}\"\n    [ngClass]=\"{'bizy-filter--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onOpen($event)\"\n    (keyup.enter)=\"_onOpen($event)\"\n    cdkOverlayOrigin \n    #bizyFilterTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-filter__content\">\n        <ng-content></ng-content>\n    </span>\n\n    <span class=\"bizy-filter__badge\" [ngClass]=\"{'bizy-filter__badge--visible': _activated}\"></span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"_filterWidth\"\n    [cdkConnectedOverlayOrigin]=\"bizyFilterTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-filter__sections-wrapper\">\n\n        <bizy-filter-sections>\n    \n            <ng-content select=\"bizy-filter-section\"></ng-content>\n    \n        </bizy-filter-sections>\n\n        <ng-content select=\"bizy-filter-content\"></ng-content>\n\n    </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem}.bizy-filter{font-size:1rem;width:100%;border:none;background-color:transparent;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;cursor:pointer;padding:var(--bizy-filter-padding);color:var(--bizy-filter-color);position:relative}.bizy-filter--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-filter__badge{position:absolute;top:-.2rem;right:-.2rem;height:.5rem;width:.5rem;border-radius:50%;background-color:var(--bizy-filter-badge-color);display:none}.bizy-filter__badge--visible{display:block!important}.bizy-filter__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-filter__sections-wrapper{background-color:var(--bizy-filter-background-color);display:flex;flex-direction:column;overflow-y:auto;max-height:30rem;max-width:90vw;padding:.5rem;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"] }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { sections: [{
+        }], propDecorators: { sections: [{
                 type: ContentChildren,
                 args: [BizyFilterSectionComponent, { descendants: true }]
             }], id: [{
@@ -2536,6 +2501,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyFilterContentComponent {
+    #elementRef = inject(ElementRef);
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFilterContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyFilterContentComponent, isStandalone: true, selector: "bizy-filter-content", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -2716,8 +2683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizySelectOptionComponent {
-    elementRef;
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     id = `bizy-select-option-${Math.random()}`;
     disabled = false;
     customClass = '';
@@ -2732,16 +2699,12 @@ class BizySelectOptionComponent {
     get selected$() {
         return this.#selected.asObservable();
     }
-    constructor(elementRef, ref) {
-        this.elementRef = elementRef;
-        this.ref = ref;
-    }
     _onSelect() {
         if (this.disabled) {
             return;
         }
         this.onSelect.emit();
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     getId = () => {
         return this.id;
@@ -2749,23 +2712,18 @@ class BizySelectOptionComponent {
     getSelected = () => {
         return this.#selected.value;
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     getValue = () => {
-        const value = this.elementRef?.nativeElement?.firstChild?.children[0]?.innerText;
+        const value = this.#elementRef?.nativeElement?.firstChild?.children[0]?.innerText;
         return value ?? '';
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySelectOptionComponent, deps: [{ token: ElementRef }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySelectOptionComponent, isStandalone: true, selector: "bizy-select-option", inputs: { id: "id", disabled: "disabled", customClass: "customClass", selected: "selected" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    type=\"button\"\n    [id]=\"id\"\n    (click)=\"_onSelect()\"\n    (keyup.enter)=\"_onSelect()\"\n    [ngClass]=\"{'bizy-select-option--selected': (selected$ | async), 'bizy-select-option--disabled': disabled}\"\n    class=\"bizy-select-option {{customClass}}\">\n\n    <span class=\"bizy-select-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>", styles: [":host{font-size:1rem}.bizy-select-option{font-size:1rem;width:100%;border:none;background-color:var(--bizy-select-background-color);display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;color:var(--bizy-select-option-color);cursor:pointer}.bizy-select-option:hover{background-color:var(--bizy-select-option-hover-background-color)}.bizy-select-option--selected{background-color:var(--bizy-select-option-selected-background-color)!important}.bizy-select-option--selected ::ng-deep .bizy-select-option__content *{color:var(--bizy-select-option-selected-color)}.bizy-select-option--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-select-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;text-align:start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySelectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-select-option', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    [id]=\"id\"\n    (click)=\"_onSelect()\"\n    (keyup.enter)=\"_onSelect()\"\n    [ngClass]=\"{'bizy-select-option--selected': (selected$ | async), 'bizy-select-option--disabled': disabled}\"\n    class=\"bizy-select-option {{customClass}}\">\n\n    <span class=\"bizy-select-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>", styles: [":host{font-size:1rem}.bizy-select-option{font-size:1rem;width:100%;border:none;background-color:var(--bizy-select-background-color);display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;color:var(--bizy-select-option-color);cursor:pointer}.bizy-select-option:hover{background-color:var(--bizy-select-option-hover-background-color)}.bizy-select-option--selected{background-color:var(--bizy-select-option-selected-background-color)!important}.bizy-select-option--selected ::ng-deep .bizy-select-option__content *{color:var(--bizy-select-option-selected-color)}.bizy-select-option--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-select-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;text-align:start}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -2778,7 +2736,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizySelectComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     #viewContainerRef = inject(ViewContainerRef);
     templatePortalContent;
     options;
@@ -2797,9 +2756,6 @@ class BizySelectComponent {
     templatePortal = null;
     #subscription = new Subscription();
     #contentChildrenSubscription = new Subscription();
-    constructor(ref) {
-        this.ref = ref;
-    }
     get touched() {
         return this.bizyInput ? this.bizyInput.touched : false;
     }
@@ -2813,11 +2769,11 @@ class BizySelectComponent {
         this.options.forEach(_option => {
             this.#subscription.add(_option.onSelect.subscribe(() => {
                 this.close();
-                this.ref.detectChanges();
+                this.#ref.detectChanges();
             }));
             this.#subscription.add(_option.selected$.pipe(filter(_value => _value === true)).subscribe(() => {
                 this._optionValue = _option.getValue();
-                this.ref.detectChanges();
+                this.#ref.detectChanges();
             }));
         });
         this.#contentChildrenSubscription.add(this.options.changes.subscribe(() => {
@@ -2826,15 +2782,15 @@ class BizySelectComponent {
             this.options.forEach(_option => {
                 this.#subscription.add(_option.onSelect.subscribe(() => {
                     this.close();
-                    this.ref.detectChanges();
+                    this.#ref.detectChanges();
                 }));
                 this.#subscription.add(_option.selected$.pipe(filter(_value => _value === true)).subscribe(() => {
                     this._optionValue = _option.getValue();
-                    this.ref.detectChanges();
+                    this.#ref.detectChanges();
                 }));
             });
         }));
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     _onOpen(event) {
         if (this.disabled || this.readonly) {
@@ -2847,7 +2803,7 @@ class BizySelectComponent {
         if (this.bizyInput) {
             this.bizyInput.setFocus(true);
         }
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     close = (event, select) => {
         if (select && event && event.target && event.target === select.bizyInputWrapper.nativeElement) {
@@ -2856,28 +2812,26 @@ class BizySelectComponent {
         this.opened = false;
         this.openedChange.emit(this.opened);
         this.onOpen.emit(this.opened);
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     setTouched(touched) {
         if (this.bizyInput) {
             this.bizyInput.setTouched(touched);
-            this.ref.detectChanges();
+            this.#ref.detectChanges();
         }
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#subscription.unsubscribe();
         this.#contentChildrenSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySelectComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySelectComponent, isStandalone: true, selector: "bizy-select", inputs: { id: "id", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", customClass: "customClass", opened: "opened" }, outputs: { openedChange: "openedChange", onSelect: "onSelect", onOpen: "onOpen" }, queries: [{ propertyName: "options", predicate: BizySelectOptionComponent }], viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true }, { propertyName: "bizyInput", first: true, predicate: ["bizyInput"], descendants: true }], ngImport: i0, template: "<bizy-input\n    #bizyInput\n    [readonly]=\"true\"\n    [disabled]=\"disabled\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [value]=\"_optionValue\"\n    [ngClass]=\"{'bizy-select--readonly': readonly}\"\n    (onSelect)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n    (onEnter)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n    class=\"bizy-select {{customClass}}\"\n    cdkOverlayOrigin\n    #bizySelectTrigger=\"cdkOverlayOrigin\">\n\n    <svg \n        slot=\"suffix\"\n        id=\"bizy-select-arrow\"\n        *ngIf=\"!readonly\"\n        class=\"bizy-select__arrow\"\n        [ngClass]=\"{'bizy-select__arrow--opened': opened}\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\">\n        <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n    </svg>\n\n    <ng-container slot=\"header\">\n        <ng-content select=\"[slot=header]\"></ng-content>\n    </ng-container>\n\n    <ng-container slot=\"prefix\">\n        <ng-content select=\"[slot=prefix]\"></ng-content>\n    </ng-container>\n\n</bizy-input>\n\n<span class=\"bizy-select__errors\" *ngIf=\"touched\">\n    <ng-content select=\"[slot=error]\"></ng-content>\n</span>\n\n<ng-template #templatePortalContent>\n    <ng-content select=\"bizy-select-option\"></ng-content>\n</ng-template>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"bizyInput.getWidth()\"\n    [cdkConnectedOverlayOrigin]=\"bizySelectTrigger\"\n    (overlayOutsideClick)=\"close($event, bizyInput)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-select__options\">\n\n        <span class=\"bizy-select__options__search\">\n            <ng-content select=\"bizy-input\"></ng-content>\n        </span>\n\n        <ng-template [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n    \n    </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem;width:var(--bizy-select-width);min-width:var(--bizy-select-min-width);max-width:var(--bizy-select-max-width);display:flex;flex-direction:column;row-gap:.3rem;--bizy-input-focus-color: transparent}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-select{--bizy-input-cursor: pointer;--bizy-input-background-color: var(--bizy-select-background-color);--bizy-input-color: var(--bizy-select-color)}.bizy-select--readonly{--bizy-input-cursor: default}.bizy-select__arrow{height:var(--bizy-select-arrow-height);pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-select-color)}.bizy-select__arrow--opened{transform:rotate(180deg)}.bizy-select__options{background-color:var(--bizy-select-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-select-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-select__options::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-select__options::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-select-scroll-bar-color)}.bizy-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-select-scroll-bar-hover-color)}.bizy-select__options::-webkit-scrollbar-button{height:1rem}.bizy-select__options__search{position:sticky;z-index:1;top:0}::ng-deep .bizy-select__options__search{--bizy-input-width: auto;--bizy-input-background-color: #fff;--bizy-input-min-width: var(--bizy-select-min-width);--bizy-input-max-width: auto;margin-bottom:.3rem}.bizy-select__errors:empty{display:none!important}::ng-deep .bizy-select__errors *{color:var(--bizy-input-invalid-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BizyInputComponent, selector: "bizy-input", inputs: ["id", "name", "type", "customClass", "placeholder", "debounceTime", "rows", "disabled", "readonly", "autofocus", "value"], outputs: ["valueChange", "onChange", "onEnter", "onBackspace", "onSelect", "onBlur", "onFocus"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-select', imports: [CommonModule, BizyInputComponent, OverlayModule, PortalModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bizy-input\n    #bizyInput\n    [readonly]=\"true\"\n    [disabled]=\"disabled\"\n    [id]=\"id\"\n    [placeholder]=\"placeholder\"\n    [value]=\"_optionValue\"\n    [ngClass]=\"{'bizy-select--readonly': readonly}\"\n    (onSelect)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n    (onEnter)=\"_onOpen($event); bizyInput?.setTouched(true)\"\n    class=\"bizy-select {{customClass}}\"\n    cdkOverlayOrigin\n    #bizySelectTrigger=\"cdkOverlayOrigin\">\n\n    <svg \n        slot=\"suffix\"\n        id=\"bizy-select-arrow\"\n        *ngIf=\"!readonly\"\n        class=\"bizy-select__arrow\"\n        [ngClass]=\"{'bizy-select__arrow--opened': opened}\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 320 512\">\n        <path d=\"M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z\"/>\n    </svg>\n\n    <ng-container slot=\"header\">\n        <ng-content select=\"[slot=header]\"></ng-content>\n    </ng-container>\n\n    <ng-container slot=\"prefix\">\n        <ng-content select=\"[slot=prefix]\"></ng-content>\n    </ng-container>\n\n</bizy-input>\n\n<span class=\"bizy-select__errors\" *ngIf=\"touched\">\n    <ng-content select=\"[slot=error]\"></ng-content>\n</span>\n\n<ng-template #templatePortalContent>\n    <ng-content select=\"bizy-select-option\"></ng-content>\n</ng-template>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"bizyInput.getWidth()\"\n    [cdkConnectedOverlayOrigin]=\"bizySelectTrigger\"\n    (overlayOutsideClick)=\"close($event, bizyInput)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-select__options\">\n\n        <span class=\"bizy-select__options__search\">\n            <ng-content select=\"bizy-input\"></ng-content>\n        </span>\n\n        <ng-template [cdkPortalOutlet]=\"templatePortal\"></ng-template>\n    \n    </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem;width:var(--bizy-select-width);min-width:var(--bizy-select-min-width);max-width:var(--bizy-select-max-width);display:flex;flex-direction:column;row-gap:.3rem;--bizy-input-focus-color: transparent}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__bottom-line{background-color:var(--bizy-input-invalid-color)!important;visibility:visible!important}:host:has(>.bizy-select__errors:not(:empty)) ::ng-deep .bizy-input__content__input{color:var(--bizy-input-invalid-color)!important}.bizy-select{--bizy-input-cursor: pointer;--bizy-input-background-color: var(--bizy-select-background-color);--bizy-input-color: var(--bizy-select-color)}.bizy-select--readonly{--bizy-input-cursor: default}.bizy-select__arrow{height:var(--bizy-select-arrow-height);pointer-events:none;display:block;transition:transform .2s ease;fill:var(--bizy-select-color)}.bizy-select__arrow--opened{transform:rotate(180deg)}.bizy-select__options{background-color:var(--bizy-select-background-color);display:flex;min-width:fit-content;width:100%;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014;max-height:var(--bizy-select-height);overflow-y:auto;overflow-x:hidden;position:relative}.bizy-select__options::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-select__options::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-select-scroll-bar-color)}.bizy-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-select-scroll-bar-hover-color)}.bizy-select__options::-webkit-scrollbar-button{height:1rem}.bizy-select__options__search{position:sticky;z-index:1;top:0}::ng-deep .bizy-select__options__search{--bizy-input-width: auto;--bizy-input-background-color: #fff;--bizy-input-min-width: var(--bizy-select-min-width);--bizy-input-max-width: auto;margin-bottom:.3rem}.bizy-select__errors:empty{display:none!important}::ng-deep .bizy-select__errors *{color:var(--bizy-input-invalid-color)!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { templatePortalContent: [{
+        }], propDecorators: { templatePortalContent: [{
                 type: ViewChild,
                 args: ['templatePortalContent']
             }], options: [{
@@ -2907,6 +2861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyFormComponent {
+    #elementRef = inject(ElementRef);
     inputs;
     selects;
     datePickers;
@@ -2933,6 +2888,7 @@ class BizyFormComponent {
             });
         }
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyFormComponent, isStandalone: true, selector: "bizy-form", inputs: { id: "id", customClass: "customClass" }, queries: [{ propertyName: "inputs", predicate: BizyInputComponent, descendants: true }, { propertyName: "selects", predicate: BizySelectComponent, descendants: true }, { propertyName: "datePickers", predicate: BizyDatePickerComponent, descendants: true }], ngImport: i0, template: "<form class=\"bizy-form {{customClass}}\" [id]=\"id\" (ngSubmit)=\"onSubmit($event)\">\n    <ng-content></ng-content>\n</form>", styles: [":host{font-size:1rem;max-width:var(--bizy-form-max-width)}.bizy-form{max-width:inherit;display:flex;flex-direction:column;row-gap:var(--bizy-form-row-gap);--bizy-input-max-width: 100%;--bizy-select-max-width: 100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3009,6 +2965,7 @@ class BizyGridRowComponent {
         this.#renderer.setStyle(this.#elementRef.nativeElement, 'gridTemplateColumns', `repeat(${itemsPerRow}, minmax(0, 1fr)`);
         this.#ref.detectChanges();
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyGridRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyGridRowComponent, isStandalone: true, selector: "bizy-grid-row", inputs: { rowHeight: "rowHeight", itemsPerRow: "itemsPerRow" }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:grid;column-gap:var(--bizy-grid-gap);margin-bottom:var(--bizy-grid-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3022,10 +2979,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyGridComponent {
-    ref;
-    document;
-    renderer;
-    elementRef;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
+    #document = inject(DOCUMENT);
+    #renderer = inject(Renderer2);
     virtualScroll;
     content;
     gridDirective;
@@ -3040,12 +2997,6 @@ class BizyGridComponent {
     items = [];
     itemTemplate;
     itemsPerRow = 1;
-    constructor(ref, document, renderer, elementRef) {
-        this.ref = ref;
-        this.document = document;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-    }
     ngAfterContentInit() {
         if (this.gridDirective) {
             this.#initView();
@@ -3057,9 +3008,9 @@ class BizyGridComponent {
                 }
                 this.#initView();
                 this.#rowScrollingMutationObserver.disconnect();
-                this.ref.detectChanges();
+                this.#ref.detectChanges();
             });
-            this.#rowScrollingMutationObserver.observe(this.document.body, { childList: true, subtree: true });
+            this.#rowScrollingMutationObserver.observe(this.#document.body, { childList: true, subtree: true });
         }
     }
     #initView = () => {
@@ -3075,7 +3026,7 @@ class BizyGridComponent {
             this.#view.createEmbeddedView(this.content);
         }
         this.#resizeObserver = new ResizeObserver(() => this.notifier$.next());
-        const resizeRef = this.resizeRef ? this.resizeRef : this.renderer.parentNode(this.elementRef.nativeElement) ? this.renderer.parentNode(this.elementRef.nativeElement) : this.elementRef.nativeElement;
+        const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
         this.#resizeObserver.observe(resizeRef);
         this.#subscription.add(this.notifier$.pipe(debounceTime$1(50)).subscribe(() => {
             this.#updateView();
@@ -3083,10 +3034,10 @@ class BizyGridComponent {
     };
     #updateView = () => {
         this.itemTemplate = this.gridDirective.templateRef;
-        const rowWidth = this.elementRef.nativeElement.offsetWidth || this.elementRef.nativeElement.firstChild.offsetWidth;
+        const rowWidth = this.#elementRef.nativeElement.offsetWidth || this.#elementRef.nativeElement.firstChild.offsetWidth;
         let columnWidth = 100;
-        const fontSize = Number(getComputedStyle(this.elementRef.nativeElement).getPropertyValue('font-size').split('px')[0]);
-        const rowHeightParameter = getComputedStyle(this.elementRef.nativeElement).getPropertyValue('--bizy-grid-row-height');
+        const fontSize = Number(getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('font-size').split('px')[0]);
+        const rowHeightParameter = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-grid-row-height');
         if (rowHeightParameter && rowHeightParameter.includes('rem')) {
             this.rowHeight = fontSize * Number(rowHeightParameter.split('rem')[0]);
         }
@@ -3094,14 +3045,14 @@ class BizyGridComponent {
             this.rowHeight = Number(rowHeightParameter.split('px')[0]);
         }
         let gap = 10;
-        const gapParameter = getComputedStyle(this.elementRef.nativeElement).getPropertyValue('--bizy-grid-gap');
+        const gapParameter = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-grid-gap');
         if (gapParameter && gapParameter.includes('rem')) {
             gap = fontSize * Number(gapParameter.split('rem')[0]);
         }
         else if (gapParameter && gapParameter.includes('px')) {
             gap = Number(gapParameter.split('px')[0]);
         }
-        const columnWidthParameter = getComputedStyle(this.elementRef.nativeElement).getPropertyValue('--bizy-grid-column-width');
+        const columnWidthParameter = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-grid-column-width');
         if (columnWidthParameter && columnWidthParameter.includes('rem')) {
             columnWidth = fontSize * Number(columnWidthParameter.split('rem')[0]);
         }
@@ -3122,7 +3073,7 @@ class BizyGridComponent {
             itemRows.push(row);
         }
         this.itemRows = itemRows;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     trackById(index, item) {
         return item?.id ?? index;
@@ -3139,25 +3090,14 @@ class BizyGridComponent {
             this.#resizeObserver.disconnect();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyGridComponent, deps: [{ token: ChangeDetectorRef }, { token: DOCUMENT }, { token: Renderer2 }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyGridComponent, isStandalone: true, selector: "bizy-grid", inputs: { resizeRef: "resizeRef" }, queries: [{ propertyName: "gridDirective", first: true, predicate: BizyGridForDirective, descendants: true }], viewQueries: [{ propertyName: "virtualScroll", first: true, predicate: ["cdkVirtualScroll"], descendants: true }, { propertyName: "content", first: true, predicate: ["gridScrollingContent"], descendants: true }], ngImport: i0, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScroll \n        class=\"bizy-grid__rows\"\n        [itemSize]=\"rowHeight\"\n        [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n        [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n        <ng-content></ng-content>\n        \n        <ng-template #gridScrollingContent>\n            <ng-template \n                let-item\n                let-index=\"index\"\n                let-first=\"first\"\n                let-last=\"last\"\n                let-even=\"even\"\n                let-odd=\"odd\"\n                cdkVirtualFor\n                [cdkVirtualForOf]=\"itemRows\">\n                <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n                    <ng-container *ngFor=\"let it of item; trackBy: trackById; let i = index\">\n                        <ng-template \n                            *ngTemplateOutlet=\"itemTemplate;\n                            context: { \n                                $implicit: it,\n                                index: index * itemsPerRow + i,\n                                rowIndex: index,\n                                rowFirst: first,\n                                rowLast: last,\n                                rowEven: even,\n                                rowOdd: odd\n                            }\"></ng-template>\n                    </ng-container>\n                </bizy-grid-row>\n            </ng-template>\n        </ng-template>\n    </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BizyGridRowComponent, selector: "bizy-grid-row", inputs: ["rowHeight", "itemsPerRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-grid', imports: [CommonModule, ScrollingModule, BizyGridRowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n    <cdk-virtual-scroll-viewport\n        #cdkVirtualScroll \n        class=\"bizy-grid__rows\"\n        [itemSize]=\"rowHeight\"\n        [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n        [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n        <ng-content></ng-content>\n        \n        <ng-template #gridScrollingContent>\n            <ng-template \n                let-item\n                let-index=\"index\"\n                let-first=\"first\"\n                let-last=\"last\"\n                let-even=\"even\"\n                let-odd=\"odd\"\n                cdkVirtualFor\n                [cdkVirtualForOf]=\"itemRows\">\n                <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n                    <ng-container *ngFor=\"let it of item; trackBy: trackById; let i = index\">\n                        <ng-template \n                            *ngTemplateOutlet=\"itemTemplate;\n                            context: { \n                                $implicit: it,\n                                index: index * itemsPerRow + i,\n                                rowIndex: index,\n                                rowFirst: first,\n                                rowLast: last,\n                                rowEven: even,\n                                rowOdd: odd\n                            }\"></ng-template>\n                    </ng-container>\n                </bizy-grid-row>\n            </ng-template>\n        </ng-template>\n    </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }, { type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }], propDecorators: { virtualScroll: [{
+        }], propDecorators: { virtualScroll: [{
                 type: ViewChild,
                 args: ['cdkVirtualScroll']
             }], content: [{
@@ -3213,7 +3153,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyListComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-list-${Math.random()}`;
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyListComponent, isStandalone: true, selector: "bizy-list", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;height:var(--bizy-list-height);overflow:auto;width:var(--bizy-list-width);display:flex;flex-direction:var(--bizy-list-flex-direction);column-gap:var(--bizy-list-column-gap);row-gap:var(--bizy-list-row-gap);justify-content:var(--bizy-list-justify-content);align-items:var(--bizy-list-align-items)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3243,6 +3185,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyMenuOptionComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-menu-option-${Math.random()}`;
     disabled = false;
     customClass = '';
@@ -3254,6 +3197,7 @@ class BizyMenuOptionComponent {
         }
         this.onSelect.emit(event);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyMenuOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyMenuOptionComponent, isStandalone: true, selector: "bizy-menu-option", inputs: { id: "id", disabled: "disabled", customClass: "customClass", selected: "selected" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    type=\"button\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    [ngClass]=\"{'bizy-menu-option--selected': selected, 'bizy-menu-option--disabled': disabled}\"\n    class=\"bizy-menu-option {{customClass}}\">\n\n    <span class=\"bizy-menu-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n<span class=\"bizy-menu-option__menu\">\n    <ng-content select=\"bizy-menu\"></ng-content>\n</span>\n", styles: [":host{font-size:1rem}:host:has(>.bizy-menu-option__menu:not(:empty)) .bizy-menu-option{display:none!important}.bizy-menu-option{font-size:1rem;width:100%;border:none;background-color:var(--bizy-menu-option-background-color);display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;color:var(--bizy-menu-option-color);cursor:pointer}.bizy-menu-option:hover{background-color:var(--bizy-menu-option-hover-background-color)}.bizy-menu-option--selected{color:var(--bizy-menu-option-selected-color)!important;background-color:var(--bizy-menu-option-selected-background-color)!important}::ng-deep .bizy-menu-option--selected *{color:var(--bizy-menu-option-selected-color)!important}.bizy-menu-option--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}.bizy-menu-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;width:100%}::ng-deep .bizy-menu-option__menu *{color:var(--bizy-menu-option-color);fill:var(--bizy-menu-option-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3273,6 +3217,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyMenuComponent {
+    #elementRef = inject(ElementRef);
     #ref = inject(ChangeDetectorRef);
     options;
     id = `bizy-menu-${Math.random()}`;
@@ -3330,6 +3275,7 @@ class BizyMenuComponent {
         this.#subscription.unsubscribe();
         this.#ref.detectChanges();
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
@@ -3361,8 +3307,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyMenuTitleComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-menu-title-${Math.random()}`;
     customClass = '';
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyMenuTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyMenuTitleComponent, isStandalone: true, selector: "bizy-menu-title", inputs: { id: "id", customClass: "customClass" }, host: { properties: { "id": "id", "class": "customClass" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font-size:1rem;background-color:var(--bizy-menu-title-background-color);color:var(--bizy-menu-title-color);padding:.5rem;cursor:default;text-decoration:var(--bizy-menu-title-text-decoration);text-underline-offset:.3rem;display:flex;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -3404,10 +3352,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
 const EMPTY_CHART = [0];
 const MIN_CHART_SIZE = 350; // px;
 class BizyPieChartComponent {
-    elementRef;
-    document;
-    ref;
-    renderer;
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
+    #renderer = inject(Renderer2);
     resizeRef = null;
     tooltip = true;
     type = 'pie';
@@ -3424,21 +3372,16 @@ class BizyPieChartComponent {
     #afterViewInit = new BehaviorSubject(false);
     #resize$ = new Subject();
     #data = EMPTY_CHART;
-    constructor(elementRef, document, ref, renderer) {
-        this.elementRef = elementRef;
-        this.document = document;
-        this.ref = ref;
-        this.renderer = renderer;
-    }
     ngAfterViewInit() {
         this.#mutationObserver = new MutationObserver(() => {
-            if (this.elementRef && this.elementRef.nativeElement && (this.elementRef.nativeElement.offsetWidth || this.elementRef.nativeElement.offsetHeight)) {
+            if (this.#elementRef && this.#elementRef.nativeElement && (this.#elementRef.nativeElement.offsetWidth || this.#elementRef.nativeElement.offsetHeight)) {
                 this.#afterViewInit.next(true);
                 this.#mutationObserver.disconnect();
             }
         });
-        this.#mutationObserver.observe(this.document.body, { childList: true, subtree: true });
+        this.#mutationObserver.observe(this.#document.body, { childList: true, subtree: true });
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     set data(data) {
         if (!data) {
             return;
@@ -3507,9 +3450,9 @@ class BizyPieChartComponent {
                     itemStyle,
                     label
                 }];
-            const textColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
-            const textBackgroundColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
-            const borderColor = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
+            const textColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-color') ?? '#000';
+            const textBackgroundColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-background-color') ?? '#fff';
+            const borderColor = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-tooltip-border-color') ?? '#fff';
             const toolbox = {
                 show: true,
                 feature: {
@@ -3523,9 +3466,9 @@ class BizyPieChartComponent {
                                     var link = document.createElement('a');
                                     link.href = canvas.toDataURL('image/png');
                                     link.download = `${this.download.name}.png`;
-                                    this.renderer.appendChild(this.document.body, link);
+                                    this.#renderer.appendChild(this.#document.body, link);
                                     link.click();
-                                    this.renderer.removeChild(this.document.body, link);
+                                    this.#renderer.removeChild(this.#document.body, link);
                                     this.onDownload.emit();
                                 });
                             }, 500);
@@ -3562,7 +3505,7 @@ class BizyPieChartComponent {
                     this.onSelect.emit(params.name);
                 });
                 this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
-                const resizeRef = this.resizeRef ? this.resizeRef : this.renderer.parentNode(this.elementRef.nativeElement) ? this.renderer.parentNode(this.elementRef.nativeElement) : this.elementRef.nativeElement;
+                const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
                 this.#resizeObserver.observe(resizeRef);
                 this.#subscription.add(this.#resize$.pipe(skip(1), auditTime(300), throttleTime(500)).subscribe(() => {
                     this.#deleteChartContainer();
@@ -3580,15 +3523,15 @@ class BizyPieChartComponent {
         }));
     }
     #createChartContainer = () => {
-        if (this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
+        if (this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
-        let elementWidth = this.elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE;
-        let elementHeight = this.elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE;
+        let elementWidth = this.#elementRef.nativeElement.offsetWidth || MIN_CHART_SIZE;
+        let elementHeight = this.#elementRef.nativeElement.offsetHeight || MIN_CHART_SIZE;
         let minWidth = MIN_CHART_SIZE;
         let minHeight = MIN_CHART_SIZE;
-        const chartMinWidth = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-width');
-        const pieChartMinHeight = getComputedStyle(this.document.body).getPropertyValue('--bizy-chart-min-height');
+        const chartMinWidth = getComputedStyle(this.#document.body).getPropertyValue('--bizy-chart-min-width');
+        const pieChartMinHeight = getComputedStyle(this.#document.body).getPropertyValue('--bizy-chart-min-height');
         if (Number(chartMinWidth)) {
             minWidth = Number(chartMinWidth);
         }
@@ -3597,20 +3540,20 @@ class BizyPieChartComponent {
         }
         const width = Math.max(elementWidth, minWidth);
         const height = Math.max(elementHeight, minHeight);
-        this.#chartContainer = this.renderer.createElement('div');
-        this.renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
-        this.renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
-        this.renderer.appendChild(this.elementRef.nativeElement, this.#chartContainer);
-        this.ref.detectChanges();
+        this.#chartContainer = this.#renderer.createElement('div');
+        this.#renderer.setStyle(this.#chartContainer, 'width', `${width}px`);
+        this.#renderer.setStyle(this.#chartContainer, 'height', `${height}px`);
+        this.#renderer.appendChild(this.#elementRef.nativeElement, this.#chartContainer);
+        this.#ref.detectChanges();
     };
     #deleteChartContainer = () => {
-        if (!this.#chartContainer || !this.elementRef || !this.elementRef.nativeElement) {
+        if (!this.#chartContainer || !this.#elementRef || !this.#elementRef.nativeElement) {
             return;
         }
         this.#echarts.clear();
-        this.renderer.removeChild(this.elementRef.nativeElement, this.#chartContainer);
+        this.#renderer.removeChild(this.#elementRef.nativeElement, this.#chartContainer);
         this.#chartContainer = null;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     ngOnDestroy() {
         this.#subscription.unsubscribe();
@@ -3624,7 +3567,7 @@ class BizyPieChartComponent {
             this.#echarts.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [{ token: ElementRef }, { token: DOCUMENT }, { token: ChangeDetectorRef }, { token: Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyPieChartComponent, isStandalone: true, selector: "bizy-pie-chart", inputs: { resizeRef: "resizeRef", tooltip: "tooltip", type: "type", download: "download", onLabelFormatter: "onLabelFormatter", onTooltipFormatter: "onTooltipFormatter", data: "data" }, outputs: { onSelect: "onSelect", onDownload: "onDownload" }, ngImport: i0, template: '', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyPieChartComponent, decorators: [{
@@ -3635,19 +3578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                     imports: [CommonModule],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }], propDecorators: { resizeRef: [{
+        }], propDecorators: { resizeRef: [{
                 type: Input
             }], tooltip: [{
                 type: Input
@@ -3684,11 +3615,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyPopupWrapperComponent {
-    dynamicComponentContainer;
+    #elementRef = inject(ElementRef);
     #data = inject(DIALOG_DATA);
     #dialogRef = inject(DialogRef);
     #popup = inject(BizyPopupService);
     #ref = inject(ChangeDetectorRef);
+    dynamicComponentContainer;
     disabled = false;
     disableClose = false;
     disableDrag = false;
@@ -3709,6 +3641,7 @@ class BizyPopupWrapperComponent {
     ngAfterViewInit() {
         this.loadDynamicComponent();
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     loadDynamicComponent = () => {
         if (this.#data && this.#data.component) {
             this.dynamicComponentContainer.clear();
@@ -4973,11 +4906,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyFullScreenPopupWrapperComponent {
-    dynamicComponentContainer;
+    #elementRef = inject(ElementRef);
     #data = inject(DIALOG_DATA);
     #dialogRef = inject(DialogRef);
     #popup = inject(BizyPopupService);
     #ref = inject(ChangeDetectorRef);
+    dynamicComponentContainer;
     disabled = false;
     disableClose = false;
     disableDrag = false;
@@ -5001,6 +4935,7 @@ class BizyFullScreenPopupWrapperComponent {
             this.#ref.detectChanges();
         }
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     async close() {
         this.disabled = true;
         this.#popup.close({ id: this.#dialogRef.id });
@@ -5039,8 +4974,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyProgressBarComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-progress-bar-${Math.random()}`;
     progress = null;
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyProgressBarComponent, isStandalone: true, selector: "bizy-progress-bar", inputs: { id: "id", progress: "progress" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<div class=\"bizy-progress-bar\" [ngStyle]=\"{width: progress !== null ? progress + '%' : '0%'}\"></div>", styles: [":host{display:inline-block;width:100%;height:var(--bizy-progress-bar-height);background-color:var(--bizy-progress-bar-background-color);border-radius:var(--bizy-progress-bar-border-radius);overflow:hidden}.bizy-progress-bar{height:100%;width:0%;background-color:var(--bizy-progress-bar-progress-color);transition:width .5s ease-in-out}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5072,6 +5009,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyRadioComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-radio-${Math.random()}`;
     name;
     selected = false;
@@ -5085,6 +5023,7 @@ class BizyRadioComponent {
         this.selectedChange.emit(!this.selected);
         this.onSelect.emit(event);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyRadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyRadioComponent, isStandalone: true, selector: "bizy-radio", inputs: { id: "id", name: "name", selected: "selected", disabled: "disabled" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, ngImport: i0, template: "<button type=\"button\" (click)=\"_onSelect($event)\" (keyup.enter)=\"_onSelect($event)\" class=\"bizy-radio\" [ngClass]=\"{'bizy-radio--disabled': disabled}\">\n    <input \n        class=\"bizy-radio__input\"\n        [id]=\"id\"\n        [disabled]=\"disabled\"\n        type=\"radio\"\n        [name]=\"name\"\n        [checked]=\"selected\"/>\n\n    <ng-content select=\"[slot=start]\"></ng-content>\n\n    <span class=\"bizy-radio__radio\"></span>\n    \n    <ng-content select=\"[slot=end]\"></ng-content>\n</button>\n", styles: [":host{font-size:1rem}.bizy-radio{border:none;background-color:transparent;cursor:pointer;position:relative;width:fit-content;display:flex;column-gap:.5rem;align-items:center}.bizy-radio__input{position:absolute;visibility:hidden;pointer-events:none}.bizy-radio__input:checked+.bizy-radio__radio:before{box-shadow:inset 0 0 0 .3rem var(--bizy-radio-color)}.bizy-radio__radio{display:flex;align-items:center;transition:.25s ease}.bizy-radio__radio:before{display:flex;flex-shrink:0;content:\"\";background-color:#fff;min-width:1rem;min-height:1rem;border-radius:50%;transition:.25s ease;box-shadow:inset 0 0 0 .1rem var(--bizy-radio-color)}.bizy-radio__input--disabled{opacity:.5;pointer-events:none;cursor:not-allowed!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5122,7 +5061,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizySectionComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-section-${Math.random()}`;
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySectionComponent, isStandalone: true, selector: "bizy-section", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;height:var(--bizy-section-height);width:var(--bizy-section-width);background-color:var(--bizy-section-background-color);flex-direction:var(--bizy-section-flex-direction);column-gap:var(--bizy-section-column-gap);row-gap:var(--bizy-section-row-gap);justify-content:var(--bizy-section-justify-content);align-items:var(--bizy-section-align-items);flex-wrap:var(--bizy-section-flex-wrap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5136,7 +5077,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizySectionStartComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-section-start-${Math.random()}`;
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySectionStartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySectionStartComponent, isStandalone: true, selector: "bizy-section-start", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-start-flex);height:var(--bizy-section-start-height);width:var(--bizy-section-start-width);background-color:var(--bizy-section-start-background-color);justify-content:var(--bizy-section-start-justify-content);align-items:var(--bizy-section-start-align-items);column-gap:var(--bizy-section-start-column-gap);row-gap:var(--bizy-section-start-row-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5150,7 +5093,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizySectionCenterComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-center-start-${Math.random()}`;
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySectionCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySectionCenterComponent, isStandalone: true, selector: "bizy-section-center", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-center-flex);height:var(--bizy-section-center-height);width:var(--bizy-section-center-width);background-color:var(--bizy-section-center-background-color);justify-content:var(--bizy-section-center-justify-content);align-items:var(--bizy-section-center-align-items);column-gap:var(--bizy-section-center-column-gap);row-gap:var(--bizy-section-center-row-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5164,7 +5109,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizySectionEndComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-section-end-${Math.random()}`;
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySectionEndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySectionEndComponent, isStandalone: true, selector: "bizy-section-end", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-end-flex);height:var(--bizy-section-end-height);width:var(--bizy-section-end-width);background-color:var(--bizy-section-end-background-color);justify-content:var(--bizy-section-end-justify-content);align-items:var(--bizy-section-end-align-items);column-gap:var(--bizy-section-end-column-gap);row-gap:var(--bizy-section-end-row-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5222,7 +5169,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizySidebarOptionComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     options;
     id = `bizy-sidebar-option-${Math.random()}`;
     disabled = false;
@@ -5239,10 +5187,7 @@ class BizySidebarOptionComponent {
         const turnOn = selected && selected !== this._selected;
         this._turnOn$.next(turnOn);
         this._selected = selected;
-        this.ref.detectChanges();
-    }
-    constructor(ref) {
-        this.ref = ref;
+        this.#ref.detectChanges();
     }
     _onSelect(event) {
         if (this.disabled || !this.selectable) {
@@ -5257,19 +5202,17 @@ class BizySidebarOptionComponent {
     getId = () => {
         return this.id;
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     getSelected = () => {
         return this._selected;
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySidebarOptionComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySidebarOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySidebarOptionComponent, isStandalone: true, selector: "bizy-sidebar-option", inputs: { id: "id", disabled: "disabled", selectable: "selectable", customClass: "customClass", selected: "selected" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, queries: [{ propertyName: "options", predicate: BizySidebarOptionComponent }], ngImport: i0, template: "<bizy-accordion\n    class=\"{{customClass}}\"\n    [id]=\"id\"\n    customClass=\"bizy-sidebar-option {{_selected && (!options || options.length === 0) ? 'bizy-sidebar-option--selected' : ''}} {{!selectable ? 'bizy-sidebar-option--no-selectable' : ''}} {{disabled ? 'bizy-sidebar-option--disabled' : ''}}\"\n    [opened]=\"_selected\"\n    (onSelect)=\"_onSelect($event)\">\n\n    <ng-content></ng-content>\n\n    <ng-container accordion-option *ngIf=\"options && options.length > 0\">\n        <ng-content select=\"bizy-sidebar-option\"></ng-content>\n    </ng-container>\n\n</bizy-accordion>", styles: [":host{font-size:1rem;direction:ltr}:host:not(:has(.bizy-sidebar-option--disabled)) ::ng-deep .bizy-sidebar-option:hover{--bizy-accordion-background-color: var(--bizy-sidebar-option-hover-color) }::ng-deep .bizy-accordion__options{position:sticky}:host ::ng-deep .bizy-accordion__options:before{content:\"\";position:absolute;inset:0;background-color:#000;opacity:.3}::ng-deep .bizy-sidebar-option--selected{--bizy-accordion-background-color: var(--bizy-sidebar-option-selected-color) !important}::ng-deep .bizy-sidebar-option--no-selectable{pointer-events:none;cursor:default!important}::ng-deep .bizy-sidebar-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}::ng-deep .bizy-accordion__options--opened{max-height:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BizyAccordionComponent, selector: "bizy-accordion", inputs: ["id", "customClass", "disabled", "opened"], outputs: ["openedChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySidebarOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-sidebar-option', imports: [CommonModule, BizyAccordionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bizy-accordion\n    class=\"{{customClass}}\"\n    [id]=\"id\"\n    customClass=\"bizy-sidebar-option {{_selected && (!options || options.length === 0) ? 'bizy-sidebar-option--selected' : ''}} {{!selectable ? 'bizy-sidebar-option--no-selectable' : ''}} {{disabled ? 'bizy-sidebar-option--disabled' : ''}}\"\n    [opened]=\"_selected\"\n    (onSelect)=\"_onSelect($event)\">\n\n    <ng-content></ng-content>\n\n    <ng-container accordion-option *ngIf=\"options && options.length > 0\">\n        <ng-content select=\"bizy-sidebar-option\"></ng-content>\n    </ng-container>\n\n</bizy-accordion>", styles: [":host{font-size:1rem;direction:ltr}:host:not(:has(.bizy-sidebar-option--disabled)) ::ng-deep .bizy-sidebar-option:hover{--bizy-accordion-background-color: var(--bizy-sidebar-option-hover-color) }::ng-deep .bizy-accordion__options{position:sticky}:host ::ng-deep .bizy-accordion__options:before{content:\"\";position:absolute;inset:0;background-color:#000;opacity:.3}::ng-deep .bizy-sidebar-option--selected{--bizy-accordion-background-color: var(--bizy-sidebar-option-selected-color) !important}::ng-deep .bizy-sidebar-option--no-selectable{pointer-events:none;cursor:default!important}::ng-deep .bizy-sidebar-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}::ng-deep .bizy-accordion__options--opened{max-height:100%!important}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { options: [{
+        }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [BizySidebarOptionComponent]
             }], id: [{
@@ -5289,7 +5232,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizySidebarFloatingOptionComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     options;
     id = `bizy-sidebar-floating-option-${Math.random()}`;
     disabled = false;
@@ -5310,13 +5254,10 @@ class BizySidebarFloatingOptionComponent {
         this._turnOn$.next(turnOn);
         this._opened = turnOn;
         this._selected = selected;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     #subscription = new Subscription();
     #optionSubscription = new Subscription();
-    constructor(ref) {
-        this.ref = ref;
-    }
     ngAfterContentInit() {
         if (this.options && this.options.length > 0) {
             this.#listenOptionChanges(this.options.toArray());
@@ -5327,12 +5268,13 @@ class BizySidebarFloatingOptionComponent {
             }));
         }
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     _onSelect(event) {
         if (this.disabled || !this.selectable) {
             return;
         }
         this._opened = !this._opened;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
         this.selectedChange.emit(this._opened);
         this.onSelect.emit(event);
     }
@@ -5341,7 +5283,7 @@ class BizySidebarFloatingOptionComponent {
             return;
         }
         this._opened = false;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     getId = () => {
         return this.id;
@@ -5355,7 +5297,7 @@ class BizySidebarFloatingOptionComponent {
                 if (turnOn) {
                     if (!_option.options || _option.options.length === 0) {
                         this._opened = false;
-                        this.ref.detectChanges();
+                        this.#ref.detectChanges();
                     }
                     this.#selectParents(this.options.toArray(), _option);
                 }
@@ -5391,16 +5333,13 @@ class BizySidebarFloatingOptionComponent {
         this.#subscription.unsubscribe();
         this.#optionSubscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySidebarFloatingOptionComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySidebarFloatingOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySidebarFloatingOptionComponent, isStandalone: true, selector: "bizy-sidebar-floating-option", inputs: { id: "id", disabled: "disabled", selectable: "selectable", offsetX: "offsetX", offsetY: "offsetY", customClass: "customClass", selected: "selected" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, queries: [{ propertyName: "options", predicate: BizySidebarOptionComponent }], ngImport: i0, template: "<button \n    type=\"button\"\n    class=\"bizy-sidebar-floating-option {{customClass}}\"\n    [ngClass]=\"{'bizy-sidebar-floating-option--selected': _selected, 'bizy-sidebar-floating-option--no-selectable': !selectable, 'bizy-sidebar-floating-option--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    cdkOverlayOrigin \n    #bizySidebarFloatingOptionTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-sidebar-floating-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOffsetX]=\"offsetX\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOrigin]=\"bizySidebarFloatingOptionTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"_opened && options && options.length > 0\">\n\n    <span class=\"bizy-sidebar-floating-option__options\">\n\n        <ng-content select=\"bizy-sidebar-floating-option-title\"></ng-content>\n\n        <ng-content select=\"bizy-sidebar-option\"></ng-content>\n\n    </span>\n\n</ng-template>", styles: [":host{font-size:1rem;direction:ltr}.bizy-sidebar-floating-option{background-color:var(--bizy-sidebar-floating-option-background-color);color:var(--bizy-sidebar-floating-option-color);border:none;display:flex;align-items:center;justify-content:center;column-gap:.5rem;padding:1rem;width:100%;cursor:pointer;border-top-left-radius:.3rem}.bizy-sidebar-floating-option:hover{background-color:var(--bizy-sidebar-option-hover-color)}.bizy-sidebar-floating-option--selected{background-color:var(--bizy-sidebar-option-selected-color)!important}.bizy-sidebar-floating-option--no-selectable{pointer-events:none;cursor:default!important}.bizy-sidebar-floating-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-sidebar-floating-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-sidebar-floating-option__options{background-color:var(--bizy-sidebar-floating-option-background-color);min-width:calc(100% + 2rem);max-width:calc(100vw - 2rem);border-radius:.3rem;max-height:30rem;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySidebarFloatingOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-sidebar-floating-option', imports: [CommonModule, OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    class=\"bizy-sidebar-floating-option {{customClass}}\"\n    [ngClass]=\"{'bizy-sidebar-floating-option--selected': _selected, 'bizy-sidebar-floating-option--no-selectable': !selectable, 'bizy-sidebar-floating-option--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    cdkOverlayOrigin \n    #bizySidebarFloatingOptionTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-sidebar-floating-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOffsetX]=\"offsetX\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOrigin]=\"bizySidebarFloatingOptionTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"_opened && options && options.length > 0\">\n\n    <span class=\"bizy-sidebar-floating-option__options\">\n\n        <ng-content select=\"bizy-sidebar-floating-option-title\"></ng-content>\n\n        <ng-content select=\"bizy-sidebar-option\"></ng-content>\n\n    </span>\n\n</ng-template>", styles: [":host{font-size:1rem;direction:ltr}.bizy-sidebar-floating-option{background-color:var(--bizy-sidebar-floating-option-background-color);color:var(--bizy-sidebar-floating-option-color);border:none;display:flex;align-items:center;justify-content:center;column-gap:.5rem;padding:1rem;width:100%;cursor:pointer;border-top-left-radius:.3rem}.bizy-sidebar-floating-option:hover{background-color:var(--bizy-sidebar-option-hover-color)}.bizy-sidebar-floating-option--selected{background-color:var(--bizy-sidebar-option-selected-color)!important}.bizy-sidebar-floating-option--no-selectable{pointer-events:none;cursor:default!important}.bizy-sidebar-floating-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-sidebar-floating-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-sidebar-floating-option__options{background-color:var(--bizy-sidebar-floating-option-background-color);min-width:calc(100% + 2rem);max-width:calc(100vw - 2rem);border-radius:.3rem;max-height:30rem;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { options: [{
+        }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [BizySidebarOptionComponent]
             }], id: [{
@@ -5424,6 +5363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizySidebarComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-sidebar-${Math.random()}`;
     options;
     floatingOptions;
@@ -5527,6 +5467,7 @@ class BizySidebarComponent {
         this.#optionSubscription.unsubscribe();
         this.#floatingOptionSubscription.unsubscribe();
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     _onToggle(event) {
         this.toggleChange.emit(!this._toggle);
         this.onToggle.emit(event);
@@ -5560,8 +5501,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizySidebarFloatingOptionTitleComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-sidebar-floating-option-title-${Math.random()}`;
     customClass = '';
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySidebarFloatingOptionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySidebarFloatingOptionTitleComponent, isStandalone: true, selector: "bizy-sidebar-floating-option-title", inputs: { id: "id", customClass: "customClass" }, ngImport: i0, template: "<span class=\"bizy-sidebar-floating-option-title {{customClass}}\" [id]=\"id\">\n    <ng-content></ng-content>\n</span>\n", styles: [":host{font-size:1rem;background-color:var(--bizy-sidebar-floating-option-title-background-color);position:sticky;top:0;z-index:1}.bizy-sidebar-floating-option-title{background-color:inherit;color:var(--bizy-sidebar-floating-option-title-color);padding:.5rem;cursor:default;text-decoration:underline .1rem var(--bizy-sidebar-floating-option-title-underline-color);text-underline-offset:.2rem;display:flex;align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5608,12 +5551,14 @@ var BIZY_SKELETON_SHAPE;
 })(BIZY_SKELETON_SHAPE || (BIZY_SKELETON_SHAPE = {}));
 
 class BizySkeletonComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-skeleton-${Math.random()}`;
     shape = BIZY_SKELETON_SHAPE.SQUARE;
     height;
     width;
     customClass = '';
     BIZY_SKELETON_SHAPE = BIZY_SKELETON_SHAPE;
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizySkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizySkeletonComponent, isStandalone: true, selector: "bizy-skeleton", inputs: { id: "id", shape: "shape", height: "height", width: "width", customClass: "customClass" }, host: { properties: { "id": "id", "style.width": "width", "style.min-width": "width", "style.height": "height", "style.min-height": "height", "class": "customClass", "style.border-radius": "shape === BIZY_SKELETON_SHAPE.CIRCLE ? \"50%\" : \"0\"" } }, ngImport: i0, template: "", styles: [":host{font-size:1rem;height:var(--bizy-skeleton-height);width:var(--bizy-skeleton-width);display:inline-block;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:bizy-skeleton-animation 1.5s infinite linear}@keyframes bizy-skeleton-animation{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -5657,6 +5602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizySliderComponent {
+    #elementRef = inject(ElementRef);
     fromSlider;
     toSlider;
     minLimit = 0;
@@ -5688,6 +5634,7 @@ class BizySliderComponent {
         }
         this.onChange.emit({ min: this._min, max: this._max });
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     setToSlider(value) {
         if (value < this._min) {
             this._max = this._min;
@@ -5831,17 +5778,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTableColumnComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-table-column-${Math.random()}`;
     customClass = '';
     contextMenu = new EventEmitter();
     onSelect = new EventEmitter();
-    #elementRef = inject(ElementRef);
     onRightClick(event) {
         this.contextMenu.emit(event);
     }
     getId = () => {
         return this.id;
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     setMarginLeft(margin) {
         if (!this.#elementRef.nativeElement || !this.#elementRef.nativeElement.setMarginLeft) {
             return;
@@ -5868,8 +5816,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTableHeaderComponent {
-    ref;
-    elementRef;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     columns;
     id = `bizy-table-header-${Math.random()}`;
     customClass = '';
@@ -5878,13 +5826,10 @@ class BizyTableHeaderComponent {
     selectedChange = new EventEmitter();
     onSelect = new EventEmitter();
     marginRight = 0;
-    constructor(ref, elementRef) {
-        this.ref = ref;
-        this.elementRef = elementRef;
-    }
     getId = () => {
         return this.id;
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     getSelected = () => {
         return this.selected;
     };
@@ -5893,11 +5838,11 @@ class BizyTableHeaderComponent {
             return;
         }
         this.selectable = selectable;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     setMarginRight(margin) {
         this.marginRight = margin - 5;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     setMarginLeft(margin) {
         if (this.columns.length === 0) {
@@ -5905,22 +5850,16 @@ class BizyTableHeaderComponent {
         }
         this.columns.forEach(_column => {
             _column.setMarginLeft(margin);
-            this.ref.detectChanges();
+            this.#ref.detectChanges();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableHeaderComponent, deps: [{ token: ChangeDetectorRef }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTableHeaderComponent, isStandalone: true, selector: "bizy-table-header", inputs: { id: "id", customClass: "customClass", selected: "selected", selectable: "selectable" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, queries: [{ propertyName: "columns", predicate: BizyTableColumnComponent }], ngImport: i0, template: "<div \n    [id]=\"id\"\n    class=\"bizy-table-header {{customClass}}\">\n\n    <ng-content select=\"bizy-table-column\"></ng-content>\n\n    <span \n        *ngIf=\"selectable !== null\"\n        class=\"bizy-table-header__checkbox-wrapper\"\n        [ngStyle]=\"{right: marginRight + 'px'}\"\n        [ngClass]=\"{'bizy-table-footer__checkbox--shadow': marginRight > 0}\">\n        \n        <bizy-checkbox \n            [selected]=\"selected\"\n            (selectedChange)=\"selectedChange.emit($event)\"\n            (onSelect)=\"onSelect.emit($event)\"\n            [ngClass]=\"{'bizy-table-header__checkbox--hidden': selectable === false}\">\n        </bizy-checkbox>\n    </span>\n\n</div>", styles: [":host{font-size:1rem;width:fit-content;min-width:100%}.bizy-table-header{font-size:1rem;padding:0 .3rem;display:flex;align-items:center;height:var(--bizy-table-header-height);width:fit-content;min-width:var(--bizy-table-width);background-color:var(--bizy-table-header-background-color)}.bizy-table-header__checkbox-wrapper{z-index:1;background-color:inherit;padding:0 10px;display:grid;place-items:center;position:relative;height:100%}.bizy-table-header__checkbox--shadow{box-shadow:-19px 0 28px -9px #00000080}.bizy-table-header__checkbox--hidden{pointer-events:none;visibility:hidden;opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-table-header', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n    [id]=\"id\"\n    class=\"bizy-table-header {{customClass}}\">\n\n    <ng-content select=\"bizy-table-column\"></ng-content>\n\n    <span \n        *ngIf=\"selectable !== null\"\n        class=\"bizy-table-header__checkbox-wrapper\"\n        [ngStyle]=\"{right: marginRight + 'px'}\"\n        [ngClass]=\"{'bizy-table-footer__checkbox--shadow': marginRight > 0}\">\n        \n        <bizy-checkbox \n            [selected]=\"selected\"\n            (selectedChange)=\"selectedChange.emit($event)\"\n            (onSelect)=\"onSelect.emit($event)\"\n            [ngClass]=\"{'bizy-table-header__checkbox--hidden': selectable === false}\">\n        </bizy-checkbox>\n    </span>\n\n</div>", styles: [":host{font-size:1rem;width:fit-content;min-width:100%}.bizy-table-header{font-size:1rem;padding:0 .3rem;display:flex;align-items:center;height:var(--bizy-table-header-height);width:fit-content;min-width:var(--bizy-table-width);background-color:var(--bizy-table-header-background-color)}.bizy-table-header__checkbox-wrapper{z-index:1;background-color:inherit;padding:0 10px;display:grid;place-items:center;position:relative;height:100%}.bizy-table-header__checkbox--shadow{box-shadow:-19px 0 28px -9px #00000080}.bizy-table-header__checkbox--hidden{pointer-events:none;visibility:hidden;opacity:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }], propDecorators: { columns: [{
+        }], propDecorators: { columns: [{
                 type: ContentChildren,
                 args: [BizyTableColumnComponent]
             }], id: [{
@@ -5938,27 +5877,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTableFooterComponent {
-    ref;
-    elementRef;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     columns;
     id = `bizy-table-footer-${Math.random()}`;
     customClass = '';
     marginRight = 0;
     _selectable = false;
-    constructor(ref, elementRef) {
-        this.ref = ref;
-        this.elementRef = elementRef;
-    }
     getId = () => {
         return this.id;
     };
     setSelectable = (selectable) => {
         this._selectable = selectable;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
+    getNativeElement = () => this.#elementRef?.nativeElement;
     setMarginRight(margin) {
         this.marginRight = margin - 5;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     setMarginLeft(margin) {
         if (this.columns.length === 0) {
@@ -5966,22 +5902,16 @@ class BizyTableFooterComponent {
         }
         this.columns.forEach(_column => {
             _column.setMarginLeft(margin);
-            this.ref.detectChanges();
+            this.#ref.detectChanges();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableFooterComponent, deps: [{ token: ChangeDetectorRef }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTableFooterComponent, isStandalone: true, selector: "bizy-table-footer", inputs: { id: "id", customClass: "customClass" }, queries: [{ propertyName: "columns", predicate: BizyTableColumnComponent }], ngImport: i0, template: "<div \n    [id]=\"id\"\n    class=\"bizy-table-footer {{customClass}}\">\n\n    <ng-content select=\"bizy-table-column\"></ng-content>\n\n\n    <span \n        *ngIf=\"_selectable\"\n        class=\"bizy-table-footer__checkbox-wrapper\"\n        [ngStyle]=\"{right: marginRight + 'px'}\"\n        [ngClass]=\"{'bizy-table-footer__checkbox--shadow': marginRight > 0}\">\n        \n        <bizy-checkbox \n            class=\"bizy-table-footer__checkbox\">\n        </bizy-checkbox>\n    </span>\n    \n</div>", styles: [":host{font-size:1rem;width:fit-content;min-width:100%}.bizy-table-footer{font-size:1rem;padding:0 .3rem;display:flex;align-items:center;height:var(--bizy-table-footer-height);width:fit-content;min-width:var(--bizy-table-width);background-color:var(--bizy-table-footer-background-color)}.bizy-table-footer__checkbox-wrapper{z-index:1;background-color:inherit;padding:0 10px;display:grid;place-items:center;position:relative;height:100%}.bizy-table-footer__checkbox{visibility:hidden;pointer-events:none;opacity:0}.bizy-table-footer__checkbox--shadow{box-shadow:-19px 0 28px -9px #00000080}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-table-footer', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n    [id]=\"id\"\n    class=\"bizy-table-footer {{customClass}}\">\n\n    <ng-content select=\"bizy-table-column\"></ng-content>\n\n\n    <span \n        *ngIf=\"_selectable\"\n        class=\"bizy-table-footer__checkbox-wrapper\"\n        [ngStyle]=\"{right: marginRight + 'px'}\"\n        [ngClass]=\"{'bizy-table-footer__checkbox--shadow': marginRight > 0}\">\n        \n        <bizy-checkbox \n            class=\"bizy-table-footer__checkbox\">\n        </bizy-checkbox>\n    </span>\n    \n</div>", styles: [":host{font-size:1rem;width:fit-content;min-width:100%}.bizy-table-footer{font-size:1rem;padding:0 .3rem;display:flex;align-items:center;height:var(--bizy-table-footer-height);width:fit-content;min-width:var(--bizy-table-width);background-color:var(--bizy-table-footer-background-color)}.bizy-table-footer__checkbox-wrapper{z-index:1;background-color:inherit;padding:0 10px;display:grid;place-items:center;position:relative;height:100%}.bizy-table-footer__checkbox{visibility:hidden;pointer-events:none;opacity:0}.bizy-table-footer__checkbox--shadow{box-shadow:-19px 0 28px -9px #00000080}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }], propDecorators: { columns: [{
+        }], propDecorators: { columns: [{
                 type: ContentChildren,
                 args: [BizyTableColumnComponent]
             }], id: [{
@@ -5991,7 +5921,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTableRowComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     columns;
     id = `bizy-table-row-${Math.random()}`;
     customClass = '';
@@ -6004,9 +5935,7 @@ class BizyTableRowComponent {
     openedChange = new EventEmitter();
     onOpen = new EventEmitter();
     marginRight = 0;
-    constructor(ref) {
-        this.ref = ref;
-    }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     _onOpen(event) {
         if (this.disabled) {
             return;
@@ -6025,7 +5954,7 @@ class BizyTableRowComponent {
             return;
         }
         this.selectable = selectable;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     setSelected = (selected) => {
         if (this.selectable === false) {
@@ -6033,11 +5962,11 @@ class BizyTableRowComponent {
         }
         this.selected = selected;
         this.selectedChange.emit(selected);
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     };
     setMarginRight(margin) {
         this.marginRight = margin - 5;
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
     setMarginLeft(margin) {
         if (this.columns.length === 0) {
@@ -6045,19 +5974,16 @@ class BizyTableRowComponent {
         }
         this.columns.forEach(_column => {
             _column.setMarginLeft(margin);
-            this.ref.detectChanges();
+            this.#ref.detectChanges();
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableRowComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTableRowComponent, isStandalone: true, selector: "bizy-table-row", inputs: { id: "id", customClass: "customClass", disabled: "disabled", selected: "selected", opened: "opened", selectable: "selectable" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect", openedChange: "openedChange", onOpen: "onOpen" }, queries: [{ propertyName: "columns", predicate: BizyTableColumnComponent }], ngImport: i0, template: "<bizy-accordion \n    class=\"bizy-table-row__accordion\"\n    customClass=\"bizy-table-row__accordion {{disabled ? 'bizy-table-row--disabled' : ''}} {{selected ? 'bizy-table-row--selected' : ''}} {{opened ? 'bizy-table-row--opened' : ''}}\"\n    [(opened)]=\"opened\"\n    (onSelect)=\"_onOpen($event)\">\n\n    <button\n        type=\"button\"\n        [id]=\"id\"\n        class=\"bizy-table-row {{customClass}}\"\n        (click)=\"selectedChange.emit(!selected)\"\n        (keyup.enter)=\"selectedChange.emit(!selected)\"\n        [ngClass]=\"{'bizy-table-row--disabled': disabled, 'bizy-table-row--selected': selected}\">\n\n        <ng-content select=\"bizy-table-column\"></ng-content>\n\n        <bizy-checkbox \n            *ngIf=\"selectable !== null\"\n            class=\"bizy-table-row__checkbox\"\n            [ngStyle]=\"{right: marginRight + 'px'}\"\n            [ngClass]=\"{'bizy-table-row__checkbox--hidden': selectable === false, 'bizy-table-row__checkbox--shadow': marginRight > 0}\"\n            [selected]=\"selected\"\n            [disabled]=\"disabled\"\n            (selectedChange)=\"selectedChange.emit($event)\"\n            (onSelect)=\"onSelect.emit($event); $event.stopPropagation()\">\n        </bizy-checkbox>\n        \n    </button>\n\n    <ng-content accordion-option select=\"bizy-table-row-expand-content\"></ng-content>\n\n</bizy-accordion>", styles: [":host{font-size:1rem;width:100%;background-color:var(--bizy-table-row-background-color);display:flex;min-width:fit-content;margin-bottom:.1rem}:host:not(:has(.bizy-table-row--selected)) ::ng-deep .bizy-table-row__accordion:hover ::ng-deep .bizy-table-row:before{opacity:1}::ng-deep .bizy-table-row__accordion{padding:0!important;--bizy-accordion-background-color: var(--bizy-table-row-background-color);--bizy-accordion-padding-left: 0}::ng-deep .bizy-table-row__accordion .bizy-accordion__options{--bizy-accordion-padding-left: 0}.bizy-table-row{font-size:1rem;width:100%;display:flex;align-items:center;padding:0 .3rem;height:fit-content;border:none;min-height:var(--bizy-table-row-height);background-color:inherit;border-bottom:inherit}::ng-deep .bizy-table-row:before{content:\"\";position:absolute;inset:0;background-color:var(--bizy-table-row-hover-background-color);opacity:0;pointer-events:none;z-index:1}.bizy-table-row--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}::ng-deep .bizy-table-row--selected{background-color:var(--bizy-table-row-selected-background-color)!important}:host(:has(bizy-table-row-expand-content)) ::ng-deep .bizy-table-row--opened{background-color:var(--bizy-table-row-opened-background-color)!important}::ng-deep .bizy-table-row--selected *{font-weight:700!important;color:var(--bizy-table-row-selected-color)!important}.bizy-table-row__checkbox{z-index:1;background-color:inherit;padding:0 10px;display:grid;place-items:center;position:relative;min-height:var(--bizy-table-row-height);height:100%}.bizy-table-row__checkbox--shadow{box-shadow:-19px 0 28px -9px #00000080}.bizy-table-row__checkbox--hidden{visibility:hidden;pointer-events:none}::ng-deep .bizy-table-row:first-child{padding-left:.3rem}::ng-deep .bizy-table-row:last-child{padding-right:.3rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: BizyAccordionComponent, selector: "bizy-accordion", inputs: ["id", "customClass", "disabled", "opened"], outputs: ["openedChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-table-row', imports: [CommonModule, BizyAccordionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bizy-accordion \n    class=\"bizy-table-row__accordion\"\n    customClass=\"bizy-table-row__accordion {{disabled ? 'bizy-table-row--disabled' : ''}} {{selected ? 'bizy-table-row--selected' : ''}} {{opened ? 'bizy-table-row--opened' : ''}}\"\n    [(opened)]=\"opened\"\n    (onSelect)=\"_onOpen($event)\">\n\n    <button\n        type=\"button\"\n        [id]=\"id\"\n        class=\"bizy-table-row {{customClass}}\"\n        (click)=\"selectedChange.emit(!selected)\"\n        (keyup.enter)=\"selectedChange.emit(!selected)\"\n        [ngClass]=\"{'bizy-table-row--disabled': disabled, 'bizy-table-row--selected': selected}\">\n\n        <ng-content select=\"bizy-table-column\"></ng-content>\n\n        <bizy-checkbox \n            *ngIf=\"selectable !== null\"\n            class=\"bizy-table-row__checkbox\"\n            [ngStyle]=\"{right: marginRight + 'px'}\"\n            [ngClass]=\"{'bizy-table-row__checkbox--hidden': selectable === false, 'bizy-table-row__checkbox--shadow': marginRight > 0}\"\n            [selected]=\"selected\"\n            [disabled]=\"disabled\"\n            (selectedChange)=\"selectedChange.emit($event)\"\n            (onSelect)=\"onSelect.emit($event); $event.stopPropagation()\">\n        </bizy-checkbox>\n        \n    </button>\n\n    <ng-content accordion-option select=\"bizy-table-row-expand-content\"></ng-content>\n\n</bizy-accordion>", styles: [":host{font-size:1rem;width:100%;background-color:var(--bizy-table-row-background-color);display:flex;min-width:fit-content;margin-bottom:.1rem}:host:not(:has(.bizy-table-row--selected)) ::ng-deep .bizy-table-row__accordion:hover ::ng-deep .bizy-table-row:before{opacity:1}::ng-deep .bizy-table-row__accordion{padding:0!important;--bizy-accordion-background-color: var(--bizy-table-row-background-color);--bizy-accordion-padding-left: 0}::ng-deep .bizy-table-row__accordion .bizy-accordion__options{--bizy-accordion-padding-left: 0}.bizy-table-row{font-size:1rem;width:100%;display:flex;align-items:center;padding:0 .3rem;height:fit-content;border:none;min-height:var(--bizy-table-row-height);background-color:inherit;border-bottom:inherit}::ng-deep .bizy-table-row:before{content:\"\";position:absolute;inset:0;background-color:var(--bizy-table-row-hover-background-color);opacity:0;pointer-events:none;z-index:1}.bizy-table-row--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}::ng-deep .bizy-table-row--selected{background-color:var(--bizy-table-row-selected-background-color)!important}:host(:has(bizy-table-row-expand-content)) ::ng-deep .bizy-table-row--opened{background-color:var(--bizy-table-row-opened-background-color)!important}::ng-deep .bizy-table-row--selected *{font-weight:700!important;color:var(--bizy-table-row-selected-color)!important}.bizy-table-row__checkbox{z-index:1;background-color:inherit;padding:0 10px;display:grid;place-items:center;position:relative;min-height:var(--bizy-table-row-height);height:100%}.bizy-table-row__checkbox--shadow{box-shadow:-19px 0 28px -9px #00000080}.bizy-table-row__checkbox--hidden{visibility:hidden;pointer-events:none}::ng-deep .bizy-table-row:first-child{padding-left:.3rem}::ng-deep .bizy-table-row:last-child{padding-right:.3rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { columns: [{
+        }], propDecorators: { columns: [{
                 type: ContentChildren,
                 args: [BizyTableColumnComponent]
             }], id: [{
@@ -6085,9 +6011,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
 // FIX: This components fixes the bug with Angular CDK virtual scrolling not supporting content projection.
 // https://github.com/angular/components/issues/15277
 class BizyTableScrollingComponent {
-    document;
-    elementRef;
-    ref;
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
     viewport;
     content;
     #view;
@@ -6096,19 +6022,14 @@ class BizyTableScrollingComponent {
     itemSize;
     #subscription = new Subscription();
     #scrollTop = 0;
-    constructor(document, elementRef, ref) {
-        this.document = document;
-        this.elementRef = elementRef;
-        this.ref = ref;
-    }
     /** Called by the virtual-for directive inside of the viewport. */
     attachView(tableDirective) {
         if (this.#view) {
             return;
         }
         let itemSize = 30;
-        const rowHeight = getComputedStyle(this.document.documentElement).getPropertyValue('--bizy-table-row-height');
-        const fontSize = getComputedStyle(this.document.documentElement).getPropertyValue('font-size');
+        const rowHeight = getComputedStyle(this.#document.documentElement).getPropertyValue('--bizy-table-row-height');
+        const fontSize = getComputedStyle(this.#document.documentElement).getPropertyValue('font-size');
         const gap = Number(fontSize.split('px')[0]) * 0.1;
         if (rowHeight && rowHeight.includes('rem')) {
             itemSize = Number(fontSize.split('px')[0]) * Number(rowHeight.split('rem')[0]);
@@ -6121,36 +6042,28 @@ class BizyTableScrollingComponent {
         this.itemTemplate = tableDirective.template;
         this.#view = tableDirective.viewContainerRef;
         this.#view.createEmbeddedView(this.content);
-        this.ref.detectChanges();
-        this.#subscription.add(fromEvent(this.elementRef.nativeElement, 'scroll', { capture: true }).pipe(debounceTime$1(100)).subscribe(() => {
+        this.#ref.detectChanges();
+        this.#subscription.add(fromEvent(this.#elementRef.nativeElement, 'scroll', { capture: true }).pipe(debounceTime$1(100)).subscribe(() => {
             this.#scrollTop = this.viewport.measureScrollOffset();
         }));
         this.#subscription.add(this.items$.pipe(skip(1)).subscribe(() => {
             if (this.viewport) {
                 this.viewport.scrollToOffset(this.#scrollTop);
-                this.ref.detectChanges();
+                this.#ref.detectChanges();
             }
         }));
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableScrollingComponent, deps: [{ token: DOCUMENT }, { token: ElementRef }, { token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableScrollingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTableScrollingComponent, isStandalone: true, selector: "bizy-table-scrolling", viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "content", first: true, predicate: ["tableScrollingContent"], descendants: true }], ngImport: i0, template: "<cdk-virtual-scroll-viewport \n    [itemSize]=\"itemSize\"\n    [minBufferPx]=\"itemSize + (itemSize * 20)\"\n    [maxBufferPx]=\"itemSize + (itemSize * 40)\">\n    \n    <ng-content></ng-content>\n\n    <ng-template #tableScrollingContent>\n      <ng-template let-item cdkVirtualFor [cdkVirtualForOf]=\"items$ | async\">\n        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n      </ng-template>\n    </ng-template>\n</cdk-virtual-scroll-viewport>", styles: ["::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-table-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-table-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableScrollingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-table-scrolling', imports: [CommonModule, ScrollingModule], template: "<cdk-virtual-scroll-viewport \n    [itemSize]=\"itemSize\"\n    [minBufferPx]=\"itemSize + (itemSize * 20)\"\n    [maxBufferPx]=\"itemSize + (itemSize * 40)\">\n    \n    <ng-content></ng-content>\n\n    <ng-template #tableScrollingContent>\n      <ng-template let-item cdkVirtualFor [cdkVirtualForOf]=\"items$ | async\">\n        <ng-template *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-template>\n      </ng-template>\n    </ng-template>\n</cdk-virtual-scroll-viewport>", styles: ["::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-table-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-table-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"] }]
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }, { type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { viewport: [{
+        }], propDecorators: { viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
             }], content: [{
@@ -6159,10 +6072,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTableComponent {
-    ref;
-    document;
-    renderer;
-    elementRef;
+    #elementRef = inject(ElementRef);
+    #document = inject(DOCUMENT);
+    #ref = inject(ChangeDetectorRef);
+    #renderer = inject(Renderer2);
     viewport;
     virtualFor;
     rows;
@@ -6193,44 +6106,38 @@ class BizyTableComponent {
             this.footers.forEach(_footer => {
                 _footer.setSelectable(selectable);
             });
-            this.ref.detectChanges();
+            this.#ref.detectChanges();
         });
-        this.#selectableMutationObserver.observe(this.document.body, { childList: true, subtree: true });
+        this.#selectableMutationObserver.observe(this.#document.body, { childList: true, subtree: true });
     }
     ;
-    constructor(ref, document, renderer, elementRef) {
-        this.ref = ref;
-        this.document = document;
-        this.renderer = renderer;
-        this.elementRef = elementRef;
-    }
     ngAfterContentInit() {
         this.#rowScrollingMutationObserver = new MutationObserver(() => {
             if (!this.virtualFor || !this.viewport) {
                 return;
             }
-            if (this.elementRef.nativeElement.offsetHeight) {
-                const fontSize = getComputedStyle(this.document.documentElement).getPropertyValue('font-size');
+            if (this.#elementRef.nativeElement.offsetHeight) {
+                const fontSize = getComputedStyle(this.#document.documentElement).getPropertyValue('font-size');
                 const gap = Number(fontSize.split('px')[0]) * 0.3;
                 let headersHeight = 0;
                 this.headers.forEach(_header => {
-                    headersHeight += _header.elementRef.nativeElement.offsetHeight + gap;
+                    headersHeight += _header.getNativeElement().offsetHeight + gap;
                 });
                 let footersHeight = 0;
                 this.footers.forEach(_footer => {
-                    footersHeight += _footer.elementRef.nativeElement.offsetHeight + gap;
+                    footersHeight += _footer.getNativeElement().offsetHeight + gap;
                 });
-                this.renderer.setStyle(this.viewport.elementRef.nativeElement, 'height', `${this.elementRef.nativeElement.offsetHeight - headersHeight - footersHeight}px`);
+                this.#renderer.setStyle(this.viewport.getNativeElement(), 'height', `${this.#elementRef.nativeElement.offsetHeight - headersHeight - footersHeight}px`);
             }
             this.viewport.attachView(this.virtualFor);
             this.#rowScrollingMutationObserver.disconnect();
-            this.ref.detectChanges();
+            this.#ref.detectChanges();
             this.#afterContentInitObserver = new MutationObserver(() => {
-                if (!this.elementRef.nativeElement.offsetWidth) {
+                if (!this.#elementRef.nativeElement.offsetWidth) {
                     return;
                 }
-                this.marginRight = this.elementRef.nativeElement.scrollWidth ? (this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.offsetWidth) - this.elementRef.nativeElement.scrollLeft : 0;
-                this.marginLeft = this.elementRef.nativeElement.scrollLeft;
+                this.marginRight = this.#elementRef.nativeElement.scrollWidth ? (this.#elementRef.nativeElement.scrollWidth - this.#elementRef.nativeElement.offsetWidth) - this.#elementRef.nativeElement.scrollLeft : 0;
+                this.marginLeft = this.#elementRef.nativeElement.scrollLeft;
                 this.rows.forEach(_row => {
                     _row.setMarginRight(this.marginRight);
                     _row.setMarginLeft(this.marginLeft);
@@ -6243,9 +6150,9 @@ class BizyTableComponent {
                     _footer.setMarginRight(this.marginRight);
                     _footer.setMarginLeft(this.marginLeft);
                 });
-                this.#subscription.add(fromEvent(this.elementRef.nativeElement, 'scroll', { capture: true }).subscribe(() => {
-                    this.marginRight = this.elementRef.nativeElement.scrollWidth ? (this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.offsetWidth) - this.elementRef.nativeElement.scrollLeft : 0;
-                    this.marginLeft = this.elementRef.nativeElement.scrollLeft;
+                this.#subscription.add(fromEvent(this.#elementRef.nativeElement, 'scroll', { capture: true }).subscribe(() => {
+                    this.marginRight = this.#elementRef.nativeElement.scrollWidth ? (this.#elementRef.nativeElement.scrollWidth - this.#elementRef.nativeElement.offsetWidth) - this.#elementRef.nativeElement.scrollLeft : 0;
+                    this.marginLeft = this.#elementRef.nativeElement.scrollLeft;
                     this.rows.forEach(_row => {
                         _row.setMarginRight(this.marginRight);
                         _row.setMarginLeft(this.marginLeft);
@@ -6260,30 +6167,30 @@ class BizyTableComponent {
                     });
                 }));
                 this.#afterContentInitObserver.disconnect();
-                this.ref.detectChanges();
+                this.#ref.detectChanges();
             });
-            this.#afterContentInitObserver.observe(this.document.body, { childList: true, subtree: true });
+            this.#afterContentInitObserver.observe(this.#document.body, { childList: true, subtree: true });
         });
-        this.#rowScrollingMutationObserver.observe(this.document.body, { childList: true, subtree: true });
+        this.#rowScrollingMutationObserver.observe(this.#document.body, { childList: true, subtree: true });
         this.#resizeObserver = new ResizeObserver(() => this.notifier$.next());
-        const resizeRef = this.resizeRef ? this.resizeRef : this.renderer.parentNode(this.elementRef.nativeElement) ? this.renderer.parentNode(this.elementRef.nativeElement) : this.elementRef.nativeElement;
+        const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
         this.#resizeObserver.observe(resizeRef);
         this.#subscription.add(this.notifier$.pipe(skip(1), debounceTime$1(200)).subscribe(() => {
-            if (this.viewport && this.elementRef.nativeElement.offsetHeight) {
-                const fontSize = getComputedStyle(this.document.documentElement).getPropertyValue('font-size');
+            if (this.viewport && this.#elementRef.nativeElement.offsetHeight) {
+                const fontSize = getComputedStyle(this.#document.documentElement).getPropertyValue('font-size');
                 const gap = Number(fontSize.split('px')[0]) * 0.3;
                 let headersHeight = 0;
                 this.headers.forEach(_header => {
-                    headersHeight += _header.elementRef.nativeElement.offsetHeight + gap;
+                    headersHeight += _header.getNativeElement().offsetHeight + gap;
                 });
                 let footersHeight = 0;
                 this.footers.forEach(_footer => {
-                    footersHeight += _footer.elementRef.nativeElement.offsetHeight + gap;
+                    footersHeight += _footer.getNativeElement().offsetHeight + gap;
                 });
-                this.renderer.setStyle(this.viewport.elementRef.nativeElement, 'height', `${this.elementRef.nativeElement.offsetHeight - headersHeight - footersHeight}px`);
+                this.#renderer.setStyle(this.viewport.getNativeElement(), 'height', `${this.#elementRef.nativeElement.offsetHeight - headersHeight - footersHeight}px`);
             }
-            this.marginRight = this.elementRef.nativeElement.scrollWidth ? (this.elementRef.nativeElement.scrollWidth - this.elementRef.nativeElement.offsetWidth) - this.elementRef.nativeElement.scrollLeft : 0;
-            this.marginLeft = this.elementRef.nativeElement.scrollLeft;
+            this.marginRight = this.#elementRef.nativeElement.scrollWidth ? (this.#elementRef.nativeElement.scrollWidth - this.#elementRef.nativeElement.offsetWidth) - this.#elementRef.nativeElement.scrollLeft : 0;
+            this.marginLeft = this.#elementRef.nativeElement.scrollLeft;
             this.rows.forEach(_row => {
                 _row.setMarginRight(this.marginRight);
                 _row.setMarginLeft(this.marginLeft);
@@ -6314,7 +6221,8 @@ class BizyTableComponent {
             this.#resizeObserver.disconnect();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableComponent, deps: [{ token: ChangeDetectorRef }, { token: DOCUMENT }, { token: Renderer2 }, { token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTableComponent, isStandalone: true, selector: "bizy-table", inputs: { resizeRef: "resizeRef", selectable: "selectable" }, queries: [{ propertyName: "virtualFor", first: true, predicate: BizyTableScrollingDirective, descendants: true }, { propertyName: "rows", predicate: BizyTableRowComponent }, { propertyName: "headers", predicate: BizyTableHeaderComponent }, { propertyName: "footers", predicate: BizyTableFooterComponent }], viewQueries: [{ propertyName: "viewport", first: true, predicate: BizyTableScrollingComponent, descendants: true }], ngImport: i0, template: "<div class=\"bizy-table\">\n\n    <ng-content select=\"bizy-table-header\"></ng-content>\n\n    <bizy-table-scrolling class=\"bizy-table__rows\">\n\n        <ng-content select=\"bizy-table-row\"></ng-content>\n\n    </bizy-table-scrolling>\n\n    <ng-content select=\"bizy-table-footer\"></ng-content>\n\n</div>", styles: [":host{display:inline-block!important;min-height:var(--bizy-table-min-height);max-height:var(--bizy-table-max-height);height:var(--bizy-table-height);width:var(--bizy-table-width);flex:1;overflow-x:auto;overflow-y:hidden}.bizy-table{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-table-background-color)}.bizy-table__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: BizyTableScrollingComponent, selector: "bizy-table-scrolling" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableComponent, decorators: [{
@@ -6324,19 +6232,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                         ScrollingModule,
                         BizyTableScrollingComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-table\">\n\n    <ng-content select=\"bizy-table-header\"></ng-content>\n\n    <bizy-table-scrolling class=\"bizy-table__rows\">\n\n        <ng-content select=\"bizy-table-row\"></ng-content>\n\n    </bizy-table-scrolling>\n\n    <ng-content select=\"bizy-table-footer\"></ng-content>\n\n</div>", styles: [":host{display:inline-block!important;min-height:var(--bizy-table-min-height);max-height:var(--bizy-table-max-height);height:var(--bizy-table-height);width:var(--bizy-table-width);flex:1;overflow-x:auto;overflow-y:hidden}.bizy-table{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-table-background-color)}.bizy-table__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2, decorators: [{
-                    type: Inject,
-                    args: [Renderer2]
-                }] }, { type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }], propDecorators: { viewport: [{
+        }], propDecorators: { viewport: [{
                 type: ViewChild,
                 args: [BizyTableScrollingComponent]
             }], virtualFor: [{
@@ -6358,9 +6254,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTableColumnArrowsComponent {
+    #elementRef = inject(ElementRef);
     order = null;
     show = false;
     customClass = '';
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableColumnArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTableColumnArrowsComponent, isStandalone: true, selector: "bizy-table-column-arrows", inputs: { order: "order", show: "show", customClass: "customClass" }, ngImport: i0, template: "<svg \n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 448 512\"\n    *ngIf=\"order !== 'asc' && order !== 'desc'\"\n    name=\"bizy-table-column-arrows\"\n    class=\"bizy-table-column-arrows bizy-table-column-arrows__down-up animated fade-in {{customClass}}\">\n    <path d=\"M438.6 150.6c12.5-12.5 12.5-32.8 0-45.3l-96-96c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.7 96 32 96C14.3 96 0 110.3 0 128s14.3 32 32 32l306.7 0-41.4 41.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l96-96zm-333.3 352c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 416 416 416c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0 41.4-41.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3l96 96z\"/>\n</svg>\n\n<svg \n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 576 512\"\n    *ngIf=\"order === 'desc'\"\n    name=\"bizy-table-column-down-arrow\"\n    class=\"bizy-table-column-arrows animated fade-in {{customClass}}\"\n    [ngClass]=\"{'bizy-table-column-arrows--visible': show}\">\n    <path d=\"M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z\"/>\n</svg>\n\n\n<svg \n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 576 512\"\n    *ngIf=\"order === 'asc'\"\n    class=\"bizy-table-column-arrows animated fade-in {{customClass}}\"\n    [ngClass]=\"{'bizy-table-column-arrows--visible': show}\"\n    name=\"bizy-table-column-up-arrow\">\n    <path d=\"M151.6 42.4C145.5 35.8 137 32 128 32s-17.5 3.8-23.6 10.4l-88 96c-11.9 13-11.1 33.3 2 45.2s33.3 11.1 45.2-2L96 146.3V448c0 17.7 14.3 32 32 32s32-14.3 32-32V146.3l32.4 35.4c11.9 13 32.2 13.9 45.2 2s13.9-32.2 2-45.2l-88-96zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H320zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H320zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H320zm0 128c-17.7 0-32 14.3-32 32s14.3 32 32 32H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H320z\"/>\n</svg>\n", styles: [":host{font-size:1rem}.bizy-table-column-arrows__down-up{transform:rotate(90deg)}.bizy-table-column-arrows{display:none;font-size:1rem;height:1rem;fill:var(--bizy-table-column-arrows-color)}.bizy-table-column-arrows--visible{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -6376,6 +6274,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTableRowExpandContentComponent {
+    #elementRef = inject(ElementRef);
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTableRowExpandContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTableRowExpandContentComponent, isStandalone: true, selector: "bizy-table-row-expand-content", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;width:100%;background-color:var(--bizy-table-row-expand-content-background-color);border-bottom-left-radius:.3rem;border-bottom-right-radius:.3rem;padding:.5rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -6434,7 +6334,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyTabComponent {
-    elementRef;
+    #elementRef = inject(ElementRef);
     id = `bizy-tab-${Math.random()}`;
     disabled = false;
     selected = false;
@@ -6442,9 +6342,6 @@ class BizyTabComponent {
     customClass;
     selectedChange = new EventEmitter();
     onSelect = new EventEmitter();
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-    }
     _onSelect(event) {
         if (this.disabled) {
             return;
@@ -6452,16 +6349,14 @@ class BizyTabComponent {
         this.selectedChange.emit(true);
         this.onSelect.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTabComponent, deps: [{ token: ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    getNativeElement = () => this.#elementRef?.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTabComponent, isStandalone: true, selector: "bizy-tab", inputs: { id: "id", disabled: "disabled", selected: "selected", linePosition: "linePosition", customClass: "customClass" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, ngImport: i0, template: "<span class=\"bizy-tab__selected-line\" *ngIf=\"linePosition === 'top'\" [ngClass]=\"{'bizy-tab__selected-line--visible': selected}\"></span>\n\n<button \n  type=\"button\"\n  [id]=\"id\"\n  [ngClass]=\"{'bizy-tab--selected': selected, 'bizy-tab--disabled': disabled}\"\n  class=\"bizy-tab {{customClass}}\"\n  (click)=\"_onSelect($event)\"\n  (keyup.enter)=\"_onSelect($event)\">\n\n  <ng-content></ng-content>\n\n</button>\n\n<span class=\"bizy-tab__selected-line\" *ngIf=\"linePosition === 'bottom'\" [ngClass]=\"{'bizy-tab__selected-line--visible': selected}\"></span>\n", styles: [":host{font-size:1rem;height:100%;flex:var(--bizy-tab-flex);overflow:hidden;display:flex;flex-direction:column}.bizy-tab{width:100%;height:100%;min-width:fit-content;display:flex;flex-direction:column;row-gap:var(--bizy-tab-row-gap);align-items:center;text-wrap:nowrap;border-top:var(--bizy-tab-border-top);border-right:var(--bizy-tab-border-right);border-bottom:var(--bizy-tab-border-bottom);border-left:var(--bizy-tab-border-left);border-radius:var(--bizy-tab-border-radius);padding:var(--bizy-tab-padding);background-color:var(--bizy-tab-background-color);color:var(--bizy-tab-color);cursor:pointer}::ng-deep .bizy-tab *{color:var(--bizy-tab-color);background-color:var(--bizy-tab-background-color)}.bizy-tab--selected{color:var(--bizy-tab-selected-color);background-color:var(--bizy-tab-selected-background-color)}::ng-deep .bizy-tab--selected *{color:var(--bizy-tab-selected-color);background-color:var(--bizy-tab-selected-background-color)}.bizy-tab--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.bizy-tab__selected-line{width:100%;height:var(--bizy-tab-selected-bar-height);visibility:hidden;pointer-events:none;background-color:var(--bizy-tab-selected-bar-color)}.bizy-tab__selected-line--visible{visibility:visible;animation-name:zoomIn;animation-duration:.2s;animation-fill-mode:both}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTabComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-tab', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"bizy-tab__selected-line\" *ngIf=\"linePosition === 'top'\" [ngClass]=\"{'bizy-tab__selected-line--visible': selected}\"></span>\n\n<button \n  type=\"button\"\n  [id]=\"id\"\n  [ngClass]=\"{'bizy-tab--selected': selected, 'bizy-tab--disabled': disabled}\"\n  class=\"bizy-tab {{customClass}}\"\n  (click)=\"_onSelect($event)\"\n  (keyup.enter)=\"_onSelect($event)\">\n\n  <ng-content></ng-content>\n\n</button>\n\n<span class=\"bizy-tab__selected-line\" *ngIf=\"linePosition === 'bottom'\" [ngClass]=\"{'bizy-tab__selected-line--visible': selected}\"></span>\n", styles: [":host{font-size:1rem;height:100%;flex:var(--bizy-tab-flex);overflow:hidden;display:flex;flex-direction:column}.bizy-tab{width:100%;height:100%;min-width:fit-content;display:flex;flex-direction:column;row-gap:var(--bizy-tab-row-gap);align-items:center;text-wrap:nowrap;border-top:var(--bizy-tab-border-top);border-right:var(--bizy-tab-border-right);border-bottom:var(--bizy-tab-border-bottom);border-left:var(--bizy-tab-border-left);border-radius:var(--bizy-tab-border-radius);padding:var(--bizy-tab-padding);background-color:var(--bizy-tab-background-color);color:var(--bizy-tab-color);cursor:pointer}::ng-deep .bizy-tab *{color:var(--bizy-tab-color);background-color:var(--bizy-tab-background-color)}.bizy-tab--selected{color:var(--bizy-tab-selected-color);background-color:var(--bizy-tab-selected-background-color)}::ng-deep .bizy-tab--selected *{color:var(--bizy-tab-selected-color);background-color:var(--bizy-tab-selected-background-color)}.bizy-tab--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.bizy-tab__selected-line{width:100%;height:var(--bizy-tab-selected-bar-height);visibility:hidden;pointer-events:none;background-color:var(--bizy-tab-selected-bar-color)}.bizy-tab__selected-line--visible{visibility:visible;animation-name:zoomIn;animation-duration:.2s;animation-fill-mode:both}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef, decorators: [{
-                    type: Inject,
-                    args: [ElementRef]
-                }] }], propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -6478,7 +6373,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTabsComponent {
-    ref;
+    #elementRef = inject(ElementRef);
+    #ref = inject(ChangeDetectorRef);
     tabs;
     bizyTabs;
     bizyTabsWrapper;
@@ -6490,9 +6386,6 @@ class BizyTabsComponent {
     #subscription = new Subscription();
     #resize$ = new Subject();
     #initialScroll = 0;
-    constructor(ref) {
-        this.ref = ref;
-    }
     ngAfterViewInit() {
         this.bizyTabsWrapper.nativeElement.scrollLeft = this.#initialScroll;
         this.#resizeObserver = new ResizeObserver(() => this.#resize$.next());
@@ -6504,7 +6397,7 @@ class BizyTabsComponent {
     ngAfterContentInit() {
         for (let i = 0; i < this.tabs.length; i++) {
             if (this.tabs.get(i).selected) {
-                this.#initialScroll = this.tabs.get(i).elementRef.nativeElement.offsetLeft;
+                this.#initialScroll = this.tabs.get(i).getNativeElement().offsetLeft;
                 break;
             }
         }
@@ -6520,22 +6413,20 @@ class BizyTabsComponent {
     #checkButtons() {
         this.showLeftButton = this.bizyTabsWrapper.nativeElement.scrollLeft > 0;
         this.showRightButton = (this.bizyTabsWrapper.nativeElement.scrollWidth - this.bizyTabs.nativeElement.offsetWidth) > 0 && (this.bizyTabsWrapper.nativeElement.scrollLeft < (this.bizyTabsWrapper.nativeElement.scrollWidth - this.bizyTabs.nativeElement.offsetWidth));
-        this.ref.detectChanges();
+        this.#ref.detectChanges();
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     ngOnDestroy() {
         this.#subscription.unsubscribe();
         this.#resizeObserver.disconnect();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTabsComponent, deps: [{ token: ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTabsComponent, isStandalone: true, selector: "bizy-tabs", inputs: { customClass: "customClass" }, queries: [{ propertyName: "tabs", predicate: BizyTabComponent }], viewQueries: [{ propertyName: "bizyTabs", first: true, predicate: ["bizyTabs"], descendants: true }, { propertyName: "bizyTabsWrapper", first: true, predicate: ["bizyTabsWrapper"], descendants: true }], ngImport: i0, template: "<div #bizyTabs class=\"bizy-tabs {{customClass}}\">\n\n    <button \n        type=\"button\"\n        class=\"bizy-tabs__scroll-button bizy-tabs__scroll-button--left\"\n        *ngIf=\"showLeftButton\"\n        (click)=\"onScrollLeft()\"\n        (keyup.enter)=\"onScrollLeft()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" class=\"bizy-tabs__scroll-button__arrow\">\n            <path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"/>\n        </svg>\n    </button>\n\n    <span class=\"bizy-tabs__wrapper\" #bizyTabsWrapper>\n\n        <ng-content select=\"bizy-tab\"></ng-content>\n\n    </span>\n\n    <button \n        type=\"button\"\n        class=\"bizy-tabs__scroll-button bizy-tabs__scroll-button--right\"\n        *ngIf=\"showRightButton\"\n        (click)=\"onScrollRight()\"\n        (keyup.enter)=\"onScrollRight()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" class=\"bizy-tabs__scroll-button__arrow\">\n            <path d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"/>\n        </svg>\n    </button>\n\n</div>", styles: [":host{font-size:1rem}.bizy-tabs{display:flex;width:100%;height:100%;overflow:hidden;background-color:transparent}.bizy-tabs__wrapper{display:flex;align-items:center;width:100%;height:100%;position:relative;overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;column-gap:var(--bizy-tabs-column-gap);background-color:var(--bizy-tabs-background-color)}.bizy-tabs__wrapper::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-tabs__wrapper::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-tabs-scroll-bar-color)}.bizy-tabs__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-tabs-scroll-bar-hover-color)}.bizy-tabs__wrapper::-webkit-scrollbar-button{height:1rem}.bizy-tabs__scroll-button{width:2rem;border:none;background-color:var(--bizy-tabs-arrow-button-background-color);display:flex;align-items:center;padding:.3rem;justify-content:center;box-shadow:0 0 47px -5px #000;-webkit-box-shadow:0px 0px 47px -5px rgba(0,0,0,1);-moz-box-shadow:0px 0px 47px -5px rgba(0,0,0,1)}.bizy-tabs__scroll-button--left{border-right:.1rem solid #6666}.bizy-tabs__scroll-button--right{border-left:.1rem solid #6666}.bizy-tabs__scroll-button__arrow{height:1rem;fill:var(--bizy-tabs-arrow-button-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-tabs', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #bizyTabs class=\"bizy-tabs {{customClass}}\">\n\n    <button \n        type=\"button\"\n        class=\"bizy-tabs__scroll-button bizy-tabs__scroll-button--left\"\n        *ngIf=\"showLeftButton\"\n        (click)=\"onScrollLeft()\"\n        (keyup.enter)=\"onScrollLeft()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" class=\"bizy-tabs__scroll-button__arrow\">\n            <path d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\"/>\n        </svg>\n    </button>\n\n    <span class=\"bizy-tabs__wrapper\" #bizyTabsWrapper>\n\n        <ng-content select=\"bizy-tab\"></ng-content>\n\n    </span>\n\n    <button \n        type=\"button\"\n        class=\"bizy-tabs__scroll-button bizy-tabs__scroll-button--right\"\n        *ngIf=\"showRightButton\"\n        (click)=\"onScrollRight()\"\n        (keyup.enter)=\"onScrollRight()\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 320 512\" class=\"bizy-tabs__scroll-button__arrow\">\n            <path d=\"M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"/>\n        </svg>\n    </button>\n\n</div>", styles: [":host{font-size:1rem}.bizy-tabs{display:flex;width:100%;height:100%;overflow:hidden;background-color:transparent}.bizy-tabs__wrapper{display:flex;align-items:center;width:100%;height:100%;position:relative;overflow-y:hidden;overflow-x:auto;scroll-behavior:smooth;column-gap:var(--bizy-tabs-column-gap);background-color:var(--bizy-tabs-background-color)}.bizy-tabs__wrapper::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-tabs__wrapper::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-tabs-scroll-bar-color)}.bizy-tabs__wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-tabs-scroll-bar-hover-color)}.bizy-tabs__wrapper::-webkit-scrollbar-button{height:1rem}.bizy-tabs__scroll-button{width:2rem;border:none;background-color:var(--bizy-tabs-arrow-button-background-color);display:flex;align-items:center;padding:.3rem;justify-content:center;box-shadow:0 0 47px -5px #000;-webkit-box-shadow:0px 0px 47px -5px rgba(0,0,0,1);-moz-box-shadow:0px 0px 47px -5px rgba(0,0,0,1)}.bizy-tabs__scroll-button--left{border-right:.1rem solid #6666}.bizy-tabs__scroll-button--right{border-left:.1rem solid #6666}.bizy-tabs__scroll-button__arrow{height:1rem;fill:var(--bizy-tabs-arrow-button-color)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
-                    type: Inject,
-                    args: [ChangeDetectorRef]
-                }] }], propDecorators: { tabs: [{
+        }], propDecorators: { tabs: [{
                 type: ContentChildren,
                 args: [BizyTabComponent]
             }], bizyTabs: [{
@@ -6578,6 +6469,7 @@ var BIZY_TAG_TYPE;
 ;
 
 class BizyTagComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-tag-${Math.random()}`;
     customClass = '';
     disabled = false;
@@ -6590,6 +6482,7 @@ class BizyTagComponent {
         }
         this.onSelect.emit(event);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTagComponent, isStandalone: true, selector: "bizy-tag", inputs: { id: "id", customClass: "customClass", disabled: "disabled", type: "type" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    type=\"button\"\n    [id]=\"id\"\n    (focus)=\"_focused = true\"\n    (blur)=\"_focused = false\"\n    [ngClass]=\"{'bizy-tag--disabled': disabled}\"\n    class=\"bizy-tag bizy-tag--{{type}} {{customClass}}\"\n    (click)=\"_focused = true; _onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\">\n\n    <ng-content></ng-content>\n\n</button>", styles: [":host{font-size:1rem}.bizy-tag{border:none;padding:var(--bizy-tag-padding);border-radius:.3rem;display:flex;justify-content:center;cursor:pointer;column-gap:.5rem;align-items:center;text-wrap:nowrap;width:fit-content}.bizy-tag--default{background-color:var(--bizy-tag-default-background-color)}::ng-deep .bizy-tag--default *{color:var(--bizy-tag-default-color)!important}.bizy-tag--info{background-color:var(--bizy-tag-info-background-color)}::ng-deep .bizy-tag--info *{color:var(--bizy-tag-info-color)!important}.bizy-tag--success{background-color:var(--bizy-tag-success-background-color)}::ng-deep .bizy-tag--success *{color:var(--bizy-tag-success-color)!important}.bizy-tag--warning{background-color:var(--bizy-tag-warning-background-color)}::ng-deep .bizy-tag--warning *{color:var(--bizy-tag-warning-color)!important}.bizy-tag--danger{background-color:var(--bizy-tag-danger-background-color)}::ng-deep .bizy-tag--danger *{color:var(--bizy-tag-danger-color)!important}.bizy-tag--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -6625,8 +6518,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyTimelineComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-timeline-${Math.random()}`;
     customClass = '';
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTimelineComponent, isStandalone: true, selector: "bizy-timeline", inputs: { id: "id", customClass: "customClass" }, host: { properties: { "id": "id", "class": "customClass" } }, ngImport: i0, template: "<ng-content select=\"bizy-timeline-event\"></ng-content>\n", styles: [":host{font-size:1rem;display:flex;flex-direction:column;align-items:center;row-gap:var(--bizy-timeline-row-gap);height:100%;width:100%}:host:not(:has(.bizy-timeline-event--start:not(:empty))) ::ng-deep bizy-timeline-event{grid-template-columns:fit-content(100%) 1fr!important}:host:not(:has(.bizy-timeline-event--start:not(:empty))) ::ng-deep .bizy-timeline-event--start{display:none}:host:not(:has(.bizy-timeline-event--end:not(:empty))) ::ng-deep bizy-timeline-event{grid-template-columns:1fr fit-content(100%)!important}:host:not(:has(.bizy-timeline-event--end:not(:empty))) ::ng-deep .bizy-timeline-event--end{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -6643,6 +6538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
             }] } });
 
 class BizyTimelineEventComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-timeline-event-${Math.random()}`;
     customClass = '';
     showLine = true;
@@ -6655,6 +6551,7 @@ class BizyTimelineEventComponent {
         }
         this.onSelect.emit(event);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyTimelineEventComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyTimelineEventComponent, isStandalone: true, selector: "bizy-timeline-event", inputs: { id: "id", customClass: "customClass", showLine: "showLine", disabled: "disabled" }, outputs: { onSelect: "onSelect" }, host: { properties: { "id": "id", "class": "customClass" } }, ngImport: i0, template: "\n<span class=\"bizy-timeline-event--start\">\n  <ng-content select=\"[slot=start]\"></ng-content>\n</span>\n\n<span class=\"bizy-timeline-event-content\" [ngClass]=\"{'bizy-timeline-event--disabled': disabled}\">\n\n  <button \n      type=\"button\"\n      (focus)=\"_focused = true\"\n      (blur)=\"_focused = false\"\n      class=\"bizy-timeline-event-bullet\"\n      (click)=\"_focused = true; _onSelect($event)\"\n      (keyup.enter)=\"_onSelect($event)\">\n\n      <ng-content select=\"[slot=bullet]\"></ng-content>\n      \n  </button>\n\n  <span class=\"bizy-timeline-event-line\" *ngIf=\"showLine\"></span>\n\n</span>\n\n<span class=\"bizy-timeline-event--end\">\n  <ng-content select=\"[slot=end]\"></ng-content>\n</span>", styles: [":host{font-size:1rem;display:grid;grid-template-columns:1fr fit-content(100%) 1fr;column-gap:var(--bizy-timeline-event-column-gap);min-height:fit-content;width:100%}.bizy-timeline-event--start,.bizy-timeline-event--end{width:100%}.bizy-timeline-event-content{justify-self:center;display:flex;flex-direction:column;align-items:center;min-width:var(--bizy-timeline-bullet-section-min-width)}.bizy-timeline-event-bullet{min-width:var(--bizy-timeline-bullet-min-width);min-height:var(--bizy-timeline-bullet-min-height);display:grid;place-items:center;border-radius:50%;border:var(--bizy-timeline-bullet-border);background-color:var(--bizy-timeline-bullet-background-color);cursor:pointer;padding:var(--bizy-timeline-bullet-padding)}.bizy-timeline-event--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}.bizy-timeline-event-line{height:100%;min-height:var(--bizy-timeline-line-min-height);width:var(--bizy-timeline-line-width);background-color:var(--bizy-timeline-line-background-color);display:inline-block;border-radius:.3rem;margin-top:var(--bizy-timeline-row-gap)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -6821,39 +6718,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyToastWrapperComponent {
-    data;
-    toast;
+    #elementRef = inject(ElementRef);
+    #data = inject(DIALOG_DATA);
+    #toast = inject(BizyToastService);
     type = TOAST.INFO;
     title = '';
     msg = '';
     id;
-    constructor(data, toast) {
-        this.data = data;
-        this.toast = toast;
-        this.type = this.data.type;
-        this.title = this.data.title;
-        this.msg = this.data.msg;
-        this.id = this.data.id;
+    ngOnInit() {
+        if (!this.#data) {
+            this.close();
+            return;
+        }
+        this.type = this.#data.type;
+        this.title = this.#data.title;
+        this.msg = this.#data.msg;
+        this.id = this.#data.id;
         setTimeout(() => {
             this.close();
-        }, this.data.duration || 3000);
+        }, this.#data.duration || 3000);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     close() {
-        this.toast.close(this.id);
+        this.#toast.close(this.id);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyToastWrapperComponent, deps: [{ token: DIALOG_DATA }, { token: BizyToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyToastWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyToastWrapperComponent, isStandalone: true, selector: "bizy-toast-wrapper", providers: [BizyToastService], ngImport: i0, template: "<div class=\"bizy-toast-wrapper bizy-toast-wrapper--{{type}}\">\n\n    <span class=\"bizy-toast-wrapper__content\">\n\n        <h4 class=\"bizy-toast-wrapper__title--{{type}}\" *ngIf=\"title\">{{title}}</h4>\n    \n        <h6 *ngIf=\"msg\">{{msg}}</h6>\n\n    </span>\n\n    <button (click)=\"close()\" (keyup.enter)=\"close()\" class=\"bizy-toast-wrapper__close-button\">\n\n        <svg \n            data-name=\"Cancel button\"\n            id=\"bizy-toast-wrapper-close-svg\" \n            viewBox=\"0 0 200 200\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path id=\"bizy-toast-wrapper-close-svg-content\" d=\"M114,100l49-49a9.9,9.9,0,0,0-14-14L100,86,51,37A9.9,9.9,0,0,0,37,51l49,49L37,149a9.9,9.9,0,0,0,14,14l49-49,49,49a9.9,9.9,0,0,0,14-14Z\"/>\n        </svg>\n\n    </button>\n\n    <span class=\"bizy-toast__progress bizy-toast__progress--{{type}}\"></span>\n    \n</div>", styles: [":host{font-size:1rem}.bizy-toast-wrapper{position:relative;width:100%;min-width:20rem;max-width:min(30rem,80dvw);height:fit-content;min-height:3rem;max-height:95dvh;overflow-y:auto;border-top-width:var(--bizy-toast-border-top-width);border-right-width:var(--bizy-toast-border-right-width);border-bottom-width:var(--bizy-toast-border-bottom-width);border-left-width:var(--bizy-toast-border-left-width);border-top-style:var(--bizy-toast-border-top-style);border-right-style:var(--bizy-toast-border-right-style);border-bottom-style:var(--bizy-toast-border-bottom-style);border-left-style:var(--bizy-toast-border-left-style);border-top-left-radius:var(--bizy-toast-border-top-left-radius);border-top-right-radius:var(--bizy-toast-border-top-right-radius);border-bottom-left-radius:var(--bizy-toast-border-bottom-left-radius);border-bottom-right-radius:var(--bizy-toast-border-bottom-right-radius);display:flex;align-items:center;column-gap:.5rem;padding:.5rem;box-shadow:0 18px 25px #32325d40,0 3px 6px #0000001a}.bizy-toast-wrapper::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-toast-wrapper::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-toast-scroll-bar-color)}.bizy-toast-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-toast-scroll-bar-hover-color)}.bizy-toast-wrapper__content{flex:1;display:flex;flex-direction:column;row-gap:.1rem}.bizy-toast-wrapper--debug{background-color:var(--bizy-toast-debug-background-color, );border-top-color:var(--bizy-toast-debug-color);border-right-color:var(--bizy-toast-debug-color);border-bottom-color:var(--bizy-toast-debug-color);border-left-color:var(--bizy-toast-debug-color)}.bizy-toast-wrapper__title--debug{color:var(--bizy-toast-debug-color)}.bizy-toast-wrapper--info{background-color:var(--bizy-toast-info-background-color, );border-top-color:var(--bizy-toast-info-color);border-right-color:var(--bizy-toast-info-color);border-bottom-color:var(--bizy-toast-info-color);border-left-color:var(--bizy-toast-info-color)}.bizy-toast-wrapper__title--info{color:var(--bizy-toast-info-color)}.bizy-toast-wrapper--success{background-color:var(--bizy-toast-success-background-color);border-top-color:var(--bizy-toast-success-color);border-right-color:var(--bizy-toast-success-color);border-bottom-color:var(--bizy-toast-success-color);border-left-color:var(--bizy-toast-success-color)}.bizy-toast-wrapper__title--success{color:var(--bizy-toast-success-color)}.bizy-toast-wrapper--warning{background-color:var(--bizy-toast-warning-background-color);border-top-color:var(--bizy-toast-warning-color);border-right-color:var(--bizy-toast-warning-color);border-bottom-color:var(--bizy-toast-warning-color);border-left-color:var(--bizy-toast-warning-color)}.bizy-toast-wrapper__title--warning{color:var(--bizy-toast-warning-color)}.bizy-toast-wrapper--danger{background-color:var(--bizy-toast-danger-background-color);border-top-color:var(--bizy-toast-danger-color);border-right-color:var(--bizy-toast-danger-color);border-bottom-color:var(--bizy-toast-danger-color);border-left-color:var(--bizy-toast-danger-color)}.bizy-toast-wrapper__title--danger{color:var(--bizy-toast-danger-color)}.bizy-toast-wrapper__close-button{border:none;cursor:pointer;align-self:flex-start;background-color:transparent;transition:color .2s;justify-self:flex-start}.bizy-toast-wrapper__close-button #bizy-toast-wrapper-close-svg{height:1rem}.bizy-toast-wrapper__close-button #bizy-toast-wrapper-close-svg-content{fill:var(--bizy-toast-close-button-color)}.bizy-toast-wrapper__close-button:hover #bizy-toast-wrapper-close-svg-content{fill:var(--bizy-toast-close-button-hover-color)}.bizy-toast__progress{width:100%;height:var(--bizy-toast-progress-bar-height);display:inline-block;position:fixed;bottom:0;left:0;right:0;overflow:hidden}.bizy-toast__progress--debug{background-color:var(--bizy-toast-debug-color)}.bizy-toast__progress--info{background-color:var(--bizy-toast-info-color)}.bizy-toast__progress--success{background-color:var(--bizy-toast-success-color)}.bizy-toast__progress--warning{background-color:var(--bizy-toast-warning-color)}.bizy-toast__progress--danger{background-color:var(--bizy-toast-danger-color)}.bizy-toast__progress:after{content:\"\";box-sizing:border-box;width:0;height:var(--bizy-toast-progress-bar-height);background-color:#fff;position:absolute;top:0;left:0;animation:progress var(--bizy-toast-duration) linear infinite}@keyframes progress{0%{width:0}to{width:100%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: DialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyToastWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-toast-wrapper', imports: [CommonModule, DialogModule], providers: [BizyToastService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-toast-wrapper bizy-toast-wrapper--{{type}}\">\n\n    <span class=\"bizy-toast-wrapper__content\">\n\n        <h4 class=\"bizy-toast-wrapper__title--{{type}}\" *ngIf=\"title\">{{title}}</h4>\n    \n        <h6 *ngIf=\"msg\">{{msg}}</h6>\n\n    </span>\n\n    <button (click)=\"close()\" (keyup.enter)=\"close()\" class=\"bizy-toast-wrapper__close-button\">\n\n        <svg \n            data-name=\"Cancel button\"\n            id=\"bizy-toast-wrapper-close-svg\" \n            viewBox=\"0 0 200 200\"\n            xmlns=\"http://www.w3.org/2000/svg\">\n            <path id=\"bizy-toast-wrapper-close-svg-content\" d=\"M114,100l49-49a9.9,9.9,0,0,0-14-14L100,86,51,37A9.9,9.9,0,0,0,37,51l49,49L37,149a9.9,9.9,0,0,0,14,14l49-49,49,49a9.9,9.9,0,0,0,14-14Z\"/>\n        </svg>\n\n    </button>\n\n    <span class=\"bizy-toast__progress bizy-toast__progress--{{type}}\"></span>\n    \n</div>", styles: [":host{font-size:1rem}.bizy-toast-wrapper{position:relative;width:100%;min-width:20rem;max-width:min(30rem,80dvw);height:fit-content;min-height:3rem;max-height:95dvh;overflow-y:auto;border-top-width:var(--bizy-toast-border-top-width);border-right-width:var(--bizy-toast-border-right-width);border-bottom-width:var(--bizy-toast-border-bottom-width);border-left-width:var(--bizy-toast-border-left-width);border-top-style:var(--bizy-toast-border-top-style);border-right-style:var(--bizy-toast-border-right-style);border-bottom-style:var(--bizy-toast-border-bottom-style);border-left-style:var(--bizy-toast-border-left-style);border-top-left-radius:var(--bizy-toast-border-top-left-radius);border-top-right-radius:var(--bizy-toast-border-top-right-radius);border-bottom-left-radius:var(--bizy-toast-border-bottom-left-radius);border-bottom-right-radius:var(--bizy-toast-border-bottom-right-radius);display:flex;align-items:center;column-gap:.5rem;padding:.5rem;box-shadow:0 18px 25px #32325d40,0 3px 6px #0000001a}.bizy-toast-wrapper::-webkit-scrollbar{width:.5rem;height:.5rem}.bizy-toast-wrapper::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-toast-scroll-bar-color)}.bizy-toast-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-toast-scroll-bar-hover-color)}.bizy-toast-wrapper__content{flex:1;display:flex;flex-direction:column;row-gap:.1rem}.bizy-toast-wrapper--debug{background-color:var(--bizy-toast-debug-background-color, );border-top-color:var(--bizy-toast-debug-color);border-right-color:var(--bizy-toast-debug-color);border-bottom-color:var(--bizy-toast-debug-color);border-left-color:var(--bizy-toast-debug-color)}.bizy-toast-wrapper__title--debug{color:var(--bizy-toast-debug-color)}.bizy-toast-wrapper--info{background-color:var(--bizy-toast-info-background-color, );border-top-color:var(--bizy-toast-info-color);border-right-color:var(--bizy-toast-info-color);border-bottom-color:var(--bizy-toast-info-color);border-left-color:var(--bizy-toast-info-color)}.bizy-toast-wrapper__title--info{color:var(--bizy-toast-info-color)}.bizy-toast-wrapper--success{background-color:var(--bizy-toast-success-background-color);border-top-color:var(--bizy-toast-success-color);border-right-color:var(--bizy-toast-success-color);border-bottom-color:var(--bizy-toast-success-color);border-left-color:var(--bizy-toast-success-color)}.bizy-toast-wrapper__title--success{color:var(--bizy-toast-success-color)}.bizy-toast-wrapper--warning{background-color:var(--bizy-toast-warning-background-color);border-top-color:var(--bizy-toast-warning-color);border-right-color:var(--bizy-toast-warning-color);border-bottom-color:var(--bizy-toast-warning-color);border-left-color:var(--bizy-toast-warning-color)}.bizy-toast-wrapper__title--warning{color:var(--bizy-toast-warning-color)}.bizy-toast-wrapper--danger{background-color:var(--bizy-toast-danger-background-color);border-top-color:var(--bizy-toast-danger-color);border-right-color:var(--bizy-toast-danger-color);border-bottom-color:var(--bizy-toast-danger-color);border-left-color:var(--bizy-toast-danger-color)}.bizy-toast-wrapper__title--danger{color:var(--bizy-toast-danger-color)}.bizy-toast-wrapper__close-button{border:none;cursor:pointer;align-self:flex-start;background-color:transparent;transition:color .2s;justify-self:flex-start}.bizy-toast-wrapper__close-button #bizy-toast-wrapper-close-svg{height:1rem}.bizy-toast-wrapper__close-button #bizy-toast-wrapper-close-svg-content{fill:var(--bizy-toast-close-button-color)}.bizy-toast-wrapper__close-button:hover #bizy-toast-wrapper-close-svg-content{fill:var(--bizy-toast-close-button-hover-color)}.bizy-toast__progress{width:100%;height:var(--bizy-toast-progress-bar-height);display:inline-block;position:fixed;bottom:0;left:0;right:0;overflow:hidden}.bizy-toast__progress--debug{background-color:var(--bizy-toast-debug-color)}.bizy-toast__progress--info{background-color:var(--bizy-toast-info-color)}.bizy-toast__progress--success{background-color:var(--bizy-toast-success-color)}.bizy-toast__progress--warning{background-color:var(--bizy-toast-warning-color)}.bizy-toast__progress--danger{background-color:var(--bizy-toast-danger-color)}.bizy-toast__progress:after{content:\"\";box-sizing:border-box;width:0;height:var(--bizy-toast-progress-bar-height);background-color:#fff;position:absolute;top:0;left:0;animation:progress var(--bizy-toast-duration) linear infinite}@keyframes progress{0%{width:0}to{width:100%}}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DIALOG_DATA]
-                }] }, { type: BizyToastService, decorators: [{
-                    type: Inject,
-                    args: [BizyToastService]
-                }] }] });
+        }] });
 
 class BizyToastModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyToastModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -6870,6 +6765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyToggleComponent {
+    #elementRef = inject(ElementRef);
     id = `bizy-toggle-${Math.random()}`;
     disabled = false;
     selected = false;
@@ -6882,6 +6778,7 @@ class BizyToggleComponent {
         this.selectedChange.emit(!this.selected);
         this.onSelect.emit(event);
     }
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyToggleComponent, isStandalone: true, selector: "bizy-toggle", inputs: { id: "id", disabled: "disabled", selected: "selected" }, outputs: { onSelect: "onSelect", selectedChange: "selectedChange" }, ngImport: i0, template: "<button type=\"button\" class=\"bizy-toggle\" [ngClass]=\"{'bizy-toggle--disabled': disabled}\" (click)=\"_onSelect($event)\" (keyup.enter)=\"_onSelect($event)\">\n\n    <ng-content select=\"[slot=start]\"></ng-content>\n\n    <input \n        class=\"bizy-toggle__toggle\"\n        type=\"checkbox\"\n        [id]=\"id\"\n        [disabled]=\"disabled\"\n        [checked]=\"selected\"\n        readonly\n        [ngClass]=\"{'bizy-toggle__toggle--disabled': disabled}\">\n\n    <ng-content select=\"[slot=end]\"></ng-content>\n\n</button>", styles: [".bizy-toggle{width:fit-content;min-height:1.3rem;display:flex;column-gap:.5rem;align-items:center;border:none;cursor:pointer;background-color:transparent}.bizy-toggle--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-toggle__toggle{position:relative;pointer-events:none;height:.8rem;width:2.2rem;min-width:2.2rem;cursor:pointer;appearance:none;-webkit-appearance:none;border-radius:9999px;background-color:var(--bizy-toggle-background-color);transition:all .3s ease}.bizy-toggle__toggle:before{position:absolute;pointer-events:none;content:\"\";left:-.2rem;top:-.2rem;display:block;height:1.2rem;width:1.2rem;cursor:pointer;background-color:var(--bizy-toggle-color);border-radius:9999px;transition:all .3s ease}.bizy-toggle__toggle:checked{background-color:var(--bizy-toggle-selected-background-color)}.bizy-toggle__toggle:checked:before{background-color:var(--bizy-toggle-selected-color);transform:translate(100%)}.bizy-toggle__toggle--disabled{pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -6917,6 +6814,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
         }] });
 
 class BizyToolbarComponent {
+    #elementRef = inject(ElementRef);
+    getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: BizyToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: BizyToolbarComponent, isStandalone: true, selector: "bizy-toolbar", ngImport: i0, template: "<div class=\"bizy-toolbar\">\n\n    <span class=\"bizy-toolbar__start\">\n        \n        <ng-content select=\"[slot=start]\"></ng-content>\n\n    </span>\n\n    <span class=\"bizy-toolbar__end\">\n\n        <ng-content select=\"[slot=end]\"></ng-content>\n\n    </span>\n\n</div>\n", styles: [":host{font-size:1rem}.bizy-toolbar{min-height:var(--bizy-toolbar-min-height);height:var(--bizy-toolbar-height);width:100%;background-color:var(--bizy-toolbar-background-color);display:flex;align-items:center;justify-content:space-between;column-gap:var(--bizy-toolbar-column-gap);padding:var(--bizy-toolbar-padding)}.bizy-toolbar__start{height:100%;display:flex;align-items:center;column-gap:var(--bizy-toolbar-column-gap)}.bizy-toolbar__end{height:100%;display:flex;align-items:center;justify-content:flex-end;column-gap:var(--bizy-toolbar-column-gap)}::ng-deep .bizy-toolbar *[toolbar-option]{height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }