@js-smart/ng-kit 19.6.0 → 19.8.0

package/fesm2022/js-smart-ng-kit.mjs

@@ -1,31 +1,30 @@
 import * as i0 from '@angular/core';
-import { input, signal, Component, Injectable, Pipe, Input, ViewChild, HostListener, output, Optional, Directive, EventEmitter, Output, Inject, computed } from '@angular/core';
-import { CommonModule, AsyncPipe } from '@angular/common';
+import { inject, ChangeDetectorRef, input, signal, output, effect, Component, Injectable, Pipe, HostListener, ViewChild, forwardRef, Input, Optional, Directive, Inject, computed } from '@angular/core';
 import * as i1 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { BehaviorSubject, Subject, throttleTime } from 'rxjs';
 import { filter, takeUntil, startWith, map } from 'rxjs/operators';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 import * as i1$1 from '@angular/platform-browser';
+import { AsyncPipe } from '@angular/common';
 import * as i1$2 from '@angular/forms';
-import { ReactiveFormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
 import * as i1$3 from '@angular/material/button';
 import { MatButtonModule, MatAnchor, MatButton } from '@angular/material/button';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i1$4 from '@angular/material/icon';
 import { MatIconModule, MatIcon } from '@angular/material/icon';
-import * as i4 from '@angular/material/core';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
 import * as i1$5 from '@angular/material/dialog';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import * as i3$1 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i1$6 from '@angular/material/snack-bar';
-import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
 
 /**
  * Boostrap Alert component that can be used to alert messages to the user
@@ -34,20 +33,10 @@ import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
  * @since 12.0.0
  */
 class AlertComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
         /**
          * Type of the BootStrap Alert. Following values are supported. See BootStrap docs for more information
-         * <pre>
-         *   1. info
-         *   2. primary
-         *   3. secondary
-         *   4. success
-         *   5. warning
-         *   6. danger
-         *   7. dark
-         *   8. light
-         * </pre>
          */
         this.type = input('info');
         /**
@@ -74,6 +63,14 @@ class AlertComponent {
          * Additional classes to be added to the alert. This can be used to add custom styles to the alert
          */
         this.class = input('');
+        /**
+         * Emits when the alert is closed.
+         */
+        this.closed = output();
+        // React to isOpen input changes
+        effect(() => {
+            this.open.set(this.isOpen());
+        });
     }
     /**
      * Initialize the component and settings
@@ -101,6 +98,7 @@ class AlertComponent {
             return;
         }
         this.open.set(false);
+        this.closed.emit();
     }
     /**
      * Opens Bootstrap Alert
@@ -111,13 +109,13 @@ class AlertComponent {
     openAlert() {
         this.open.set(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: AlertComponent, isStandalone: true, selector: "lib-alert, alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissOnTimeout: { classPropertyName: "dismissOnTimeout", publicName: "dismissOnTimeout", isSignal: true, isRequired: false, transformFunction: null }, dismissTimeout: { classPropertyName: "dismissTimeout", publicName: "dismissTimeout", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (open()) {\n\t<div class=\"row {{ class() }}\">\n\t\t<div class=\"col-xs-12 col-sm-12 col-md-auto mx-auto\">\n\t\t\t<div class=\"alert alert-{{ type() }} alert-dismissible alert_div\" role=\"alert\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (dismissible()) {\n\t\t\t\t\t<button (click)=\"closeAlert()\" aria-label=\"Close\" class=\"btn-close\" data-bs-dismiss=\"alert\" type=\"button\"></button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n}\n", styles: [".alert_div{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AlertComponent, isStandalone: true, selector: "lib-alert, alert", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, dismissOnTimeout: { classPropertyName: "dismissOnTimeout", publicName: "dismissOnTimeout", isSignal: true, isRequired: false, transformFunction: null }, dismissTimeout: { classPropertyName: "dismissTimeout", publicName: "dismissTimeout", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (open()) {\n\t<div class=\"row {{ class() }}\">\n\t\t<div class=\"col-xs-12 col-sm-12 col-md-auto mx-auto\">\n\t\t\t<div class=\"alert alert-{{ type() }} alert-dismissible alert_div\" role=\"alert\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (dismissible()) {\n\t\t\t\t\t<button (click)=\"closeAlert()\" aria-label=\"Close\" class=\"btn-close\" data-bs-dismiss=\"alert\" type=\"button\"></button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n}\n", styles: [".alert_div{display:flex;align-items:center;justify-content:center}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-alert, alert', imports: [CommonModule], template: "@if (open()) {\n\t<div class=\"row {{ class() }}\">\n\t\t<div class=\"col-xs-12 col-sm-12 col-md-auto mx-auto\">\n\t\t\t<div class=\"alert alert-{{ type() }} alert-dismissible alert_div\" role=\"alert\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (dismissible()) {\n\t\t\t\t\t<button (click)=\"closeAlert()\" aria-label=\"Close\" class=\"btn-close\" data-bs-dismiss=\"alert\" type=\"button\"></button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n}\n", styles: [".alert_div{display:flex;align-items:center;justify-content:center}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+            args: [{ selector: 'lib-alert, alert', template: "@if (open()) {\n\t<div class=\"row {{ class() }}\">\n\t\t<div class=\"col-xs-12 col-sm-12 col-md-auto mx-auto\">\n\t\t\t<div class=\"alert alert-{{ type() }} alert-dismissible alert_div\" role=\"alert\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (dismissible()) {\n\t\t\t\t\t<button (click)=\"closeAlert()\" aria-label=\"Close\" class=\"btn-close\" data-bs-dismiss=\"alert\" type=\"button\"></button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n}\n", styles: [".alert_div{display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [] });
 
 class SpinnerComponent {
     constructor() {
@@ -138,10 +136,10 @@ class SpinnerComponent {
          */
         this.strokeWidth = input(5);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: SpinnerComponent, isStandalone: true, selector: "spinner,lib-spinner", inputs: { bootstrapSpinner: { classPropertyName: "bootstrapSpinner", publicName: "bootstrapSpinner", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Angular Material Spinner -->\n@if (!bootstrapSpinner()) {\n\t<mat-spinner [color]=\"color()\" [diameter]=\"diameter()\" [strokeWidth]=\"strokeWidth()\" class=\"mx-auto\"> </mat-spinner>\n}\n\n<!-- Bootstrap Spinner -->\n@if (bootstrapSpinner()) {\n\t<div class=\"d-flex justify-content-center\">\n\t\t<div class=\"spinner-border bs-spinner\" role=\"status\"></div>\n\t</div>\n}\n", styles: [".bs-spinner-sm{color:#3f51b5;margin-bottom:20px}.bs-spinner{color:#3f51b5;width:3rem;height:3rem;margin-bottom:20px}.bs-spinner-lg{color:#3f51b5;width:5rem;height:5rem;margin-bottom:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SpinnerComponent, isStandalone: true, selector: "spinner,lib-spinner", inputs: { bootstrapSpinner: { classPropertyName: "bootstrapSpinner", publicName: "bootstrapSpinner", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Angular Material Spinner -->\n@if (!bootstrapSpinner()) {\n\t<mat-spinner [color]=\"color()\" [diameter]=\"diameter()\" [strokeWidth]=\"strokeWidth()\" class=\"mx-auto\"> </mat-spinner>\n}\n\n<!-- Bootstrap Spinner -->\n@if (bootstrapSpinner()) {\n\t<div class=\"d-flex justify-content-center\">\n\t\t<div class=\"spinner-border bs-spinner\" role=\"status\"></div>\n\t</div>\n}\n", styles: [".bs-spinner-sm{color:#3f51b5;margin-bottom:20px}.bs-spinner{color:#3f51b5;width:3rem;height:3rem;margin-bottom:20px}.bs-spinner-lg{color:#3f51b5;width:5rem;height:5rem;margin-bottom:20px}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spinner,lib-spinner', imports: [MatProgressSpinnerModule], template: "<!-- Angular Material Spinner -->\n@if (!bootstrapSpinner()) {\n\t<mat-spinner [color]=\"color()\" [diameter]=\"diameter()\" [strokeWidth]=\"strokeWidth()\" class=\"mx-auto\"> </mat-spinner>\n}\n\n<!-- Bootstrap Spinner -->\n@if (bootstrapSpinner()) {\n\t<div class=\"d-flex justify-content-center\">\n\t\t<div class=\"spinner-border bs-spinner\" role=\"status\"></div>\n\t</div>\n}\n", styles: [".bs-spinner-sm{color:#3f51b5;margin-bottom:20px}.bs-spinner{color:#3f51b5;width:3rem;height:3rem;margin-bottom:20px}.bs-spinner-lg{color:#3f51b5;width:5rem;height:5rem;margin-bottom:20px}\n"] }]
         }] });
@@ -218,10 +216,10 @@ class NgxSpinnerService {
             }, debounce);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxSpinnerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxSpinnerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxSpinnerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxSpinnerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxSpinnerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxSpinnerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -238,10 +236,10 @@ class SafeHtmlPipe {
         }
         return undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.0.0", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml',
@@ -256,14 +254,63 @@ class NgxSpinnerComponent {
     constructor(spinnerService, changeDetector) {
         this.spinnerService = spinnerService;
         this.changeDetector = changeDetector;
+        /**
+         * To set backdrop color
+         * Only supports RGBA color format
+         */
+        this.bdColor = input(DEFAULTS.BD_COLOR);
+        /**
+         * To set spinner size
+         */
+        this.size = input('large');
+        /**
+         * To set spinner color(DEFAULTS.SPINNER_COLOR)
+         */
+        this.color = input(DEFAULTS.SPINNER_COLOR);
+        /**
+         * To set type of spinner
+         */
+        this.type = input(DEFAULTS.SPINNER_TYPE);
+        /**
+         * To toggle fullscreen mode
+         */
+        this.fullScreen = input(true);
+        /**
+         * Spinner name
+         */
+        this.name = input(PRIMARY_SPINNER);
+        /**
+         * z-index value
+         */
+        this.zIndex = input(DEFAULTS.Z_INDEX);
+        /**
+         * Custom template for spinner/loader
+         */
+        this.template = input('');
+        /**
+         * Show/Hide the spinner
+         */
+        this.showSpinner = input(false);
         /**
          * To enable/disable animation
          */
-        this.disableAnimation = false;
+        this.disableAnimation = input(false);
         /**
          * Spinner Object
          */
         this.spinner = new NgxSpinner();
+        /**
+         * Array for spinner's div
+         */
+        this.divArray = [];
+        /**
+         * Counter for div
+         */
+        this.divCount = 0;
+        /**
+         * Show spinner
+         **/
+        this.show = false;
         /**
          * Unsubscribe from spinner's observable
          **/
@@ -273,48 +320,34 @@ class NgxSpinnerComponent {
          */
         this.setDefaultOptions = () => {
             this.spinner = new NgxSpinner({
-                name: this.name,
-                bdColor: this.bdColor,
-                size: this.size,
-                color: this.color,
-                type: this.type,
-                fullScreen: this.fullScreen,
+                name: this.name(),
+                bdColor: this.bdColor(),
+                size: this.size(),
+                color: this.color(),
+                type: this.type(),
+                fullScreen: this.fullScreen(),
                 divArray: this.divArray,
                 divCount: this.divCount,
                 show: this.show,
-                zIndex: this.zIndex,
-                template: this.template,
-                showSpinner: this.showSpinner,
+                zIndex: this.zIndex(),
+                template: this.template(),
+                showSpinner: this.showSpinner(),
             });
         };
-        this.bdColor = DEFAULTS.BD_COLOR;
-        this.zIndex = DEFAULTS.Z_INDEX;
-        this.color = DEFAULTS.SPINNER_COLOR;
-        this.type = DEFAULTS.SPINNER_TYPE;
-        this.size = 'large';
-        this.fullScreen = true;
-        this.name = PRIMARY_SPINNER;
-        // @ts-ignore
-        this.template = null;
-        this.showSpinner = false;
-        this.divArray = [];
-        this.divCount = 0;
-        this.show = false;
     }
     handleKeyboardEvent(event) {
-        if (this.spinnerDOM && this.spinnerDOM.nativeElement) {
+        if (this.spinnerDOM?.nativeElement) {
             event.returnValue = false;
             event.preventDefault();
         }
     }
     /**
-   * Initialization method
-
-   */
+     * Initialization method
+     */
     ngOnInit() {
         this.setDefaultOptions();
         this.spinnerService
-            .getSpinner(this.name)
+            .getSpinner(this.name())
             .pipe(takeUntil(this.ngUnsubscribe))
             .subscribe((spinner) => {
             this.setDefaultOptions();
@@ -325,33 +358,6 @@ class NgxSpinnerComponent {
             this.changeDetector.detectChanges();
         });
     }
-    /**
-     * On changes event for input variables
-     */
-    ngOnChanges(changes) {
-        for (const propName in changes) {
-            if (propName) {
-                const changedProp = changes[propName];
-                if (changedProp.isFirstChange()) {
-                    return;
-                }
-                else if (typeof changedProp.currentValue !== 'undefined' && changedProp.currentValue !== changedProp.previousValue) {
-                    if (changedProp.currentValue !== '') {
-                        // @ts-ignore
-                        this.spinner[propName] = changedProp.currentValue;
-                        if (propName === 'showSpinner') {
-                            if (changedProp.currentValue) {
-                                this.spinnerService.show(this.spinner.name, this.spinner);
-                            }
-                            else {
-                                this.spinnerService.hide(this.spinner.name);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
     /**
      * To get class for spinner
      */
@@ -360,7 +366,7 @@ class NgxSpinnerComponent {
         this.spinner.divCount = LOADERS[type];
         this.spinner.divArray = Array(this.spinner.divCount)
             .fill(0)
-            .map((x, i) => i);
+            .map((_x, i) => i);
         let sizeClass = '';
         switch (size.toLowerCase()) {
             case 'small':
@@ -390,8 +396,8 @@ class NgxSpinnerComponent {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxSpinnerComponent, deps: [{ token: NgxSpinnerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: NgxSpinnerComponent, isStandalone: true, selector: "ngx-spinner", inputs: { bdColor: "bdColor", size: "size", color: "color", type: "type", fullScreen: "fullScreen", name: "name", zIndex: "zIndex", template: "template", showSpinner: "showSpinner", disableAnimation: "disableAnimation" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "spinnerDOM", first: true, predicate: ["overlay"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (spinner.show) {\n\t<div\n\t\t#overlay\n\t\t[@.disabled]=\"disableAnimation\"\n\t\t[@fadeIn]=\"'in'\"\n\t\t[style.background-color]=\"spinner.bdColor\"\n\t\t[style.position]=\"spinner.fullScreen ? 'fixed' : 'absolute'\"\n\t\t[style.z-index]=\"spinner.zIndex\"\n\t\tclass=\"ngx-spinner-overlay\">\n\t\t@if (spinner.show) {\n\t\t\t<div [class]=\"spinner.class\" [style.color]=\"spinner.color\">\n\t\t\t\t@for (index of spinner.divArray; track index) {\n\t\t\t\t\t<div></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (template) {\n\t\t\t<div [innerHTML]=\"template | safeHtml\"></div>\n\t\t}\n\t\t<div [style.z-index]=\"spinner.zIndex\" class=\"loading-text\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n}\n", styles: [".la-ball-clip-rotate,.la-ball-clip-rotate>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-clip-rotate{display:block;font-size:0;color:#fff}.la-ball-clip-rotate.la-dark{color:#333}.la-ball-clip-rotate>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-clip-rotate{width:32px;height:32px}.la-ball-clip-rotate>div{width:32px;height:32px;background:transparent;border-width:2px;border-bottom-color:transparent;border-radius:100%;-webkit-animation:ball-clip-rotate .75s linear infinite;-moz-animation:ball-clip-rotate .75s linear infinite;-o-animation:ball-clip-rotate .75s linear infinite;animation:ball-clip-rotate .75s linear infinite}.la-ball-clip-rotate.la-sm{width:16px;height:16px}.la-ball-clip-rotate.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-clip-rotate.la-2x{width:64px;height:64px}.la-ball-clip-rotate.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-clip-rotate.la-3x{width:96px;height:96px}.la-ball-clip-rotate.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes ball-clip-rotate{0%{-moz-transform:rotate(0deg);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}to{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes ball-clip-rotate{0%{-o-transform:rotate(0deg);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}to{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.ngx-spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ngx-spinner-overlay>div:not(.loading-text){top:50%;left:50%;margin:0;position:absolute;transform:translate(-50%,-50%)}.loading-text{position:absolute;top:60%;left:50%;transform:translate(-50%,-60%)}\n/*!\n * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)\n * Copyright 2015 Daniel Cardoso <@DanielCardoso>\n * Licensed under MIT\n */\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxSpinnerComponent, deps: [{ token: NgxSpinnerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: NgxSpinnerComponent, isStandalone: true, selector: "ngx-spinner", inputs: { bdColor: { classPropertyName: "bdColor", publicName: "bdColor", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, showSpinner: { classPropertyName: "showSpinner", publicName: "showSpinner", isSignal: true, isRequired: false, transformFunction: null }, disableAnimation: { classPropertyName: "disableAnimation", publicName: "disableAnimation", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "spinnerDOM", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: "@if (spinner.show) {\n\t<div\n\t\t#overlay\n\t\t[@.disabled]=\"disableAnimation()\"\n\t\t[@fadeIn]=\"'in'\"\n\t\t[style.background-color]=\"spinner.bdColor\"\n\t\t[style.position]=\"spinner.fullScreen ? 'fixed' : 'absolute'\"\n\t\t[style.z-index]=\"spinner.zIndex\"\n\t\tclass=\"ngx-spinner-overlay\">\n\t\t@if (spinner.show) {\n\t\t\t<div [class]=\"spinner.class\" [style.color]=\"spinner.color\">\n\t\t\t\t@for (index of spinner.divArray; track index) {\n\t\t\t\t\t<div></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (template()) {\n\t\t\t<div [innerHTML]=\"template() | safeHtml\"></div>\n\t\t}\n\t\t<div [style.z-index]=\"spinner.zIndex\" class=\"loading-text\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n}\n", styles: [".la-ball-clip-rotate,.la-ball-clip-rotate>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-clip-rotate{display:block;font-size:0;color:#fff}.la-ball-clip-rotate.la-dark{color:#333}.la-ball-clip-rotate>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-clip-rotate{width:32px;height:32px}.la-ball-clip-rotate>div{width:32px;height:32px;background:transparent;border-width:2px;border-bottom-color:transparent;border-radius:100%;-webkit-animation:ball-clip-rotate .75s linear infinite;-moz-animation:ball-clip-rotate .75s linear infinite;-o-animation:ball-clip-rotate .75s linear infinite;animation:ball-clip-rotate .75s linear infinite}.la-ball-clip-rotate.la-sm{width:16px;height:16px}.la-ball-clip-rotate.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-clip-rotate.la-2x{width:64px;height:64px}.la-ball-clip-rotate.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-clip-rotate.la-3x{width:96px;height:96px}.la-ball-clip-rotate.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes ball-clip-rotate{0%{-moz-transform:rotate(0deg);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}to{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes ball-clip-rotate{0%{-o-transform:rotate(0deg);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}to{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.ngx-spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ngx-spinner-overlay>div:not(.loading-text){top:50%;left:50%;margin:0;position:absolute;transform:translate(-50%,-50%)}.loading-text{position:absolute;top:60%;left:50%;transform:translate(-50%,-60%)}\n/*!\n * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)\n * Copyright 2015 Daniel Cardoso <@DanielCardoso>\n * Licensed under MIT\n */\n"], dependencies: [{ kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }], animations: [
             trigger('fadeIn', [
                 state('in', style({ opacity: 1 })),
                 transition(':enter', [style({ opacity: 0 }), animate(300)]),
@@ -399,7 +405,7 @@ class NgxSpinnerComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-spinner', imports: [SafeHtmlPipe], animations: [
                         trigger('fadeIn', [
@@ -407,28 +413,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                             transition(':enter', [style({ opacity: 0 }), animate(300)]),
                             transition(':leave', animate(200, style({ opacity: 0 }))),
                         ]),
-                    ], template: "@if (spinner.show) {\n\t<div\n\t\t#overlay\n\t\t[@.disabled]=\"disableAnimation\"\n\t\t[@fadeIn]=\"'in'\"\n\t\t[style.background-color]=\"spinner.bdColor\"\n\t\t[style.position]=\"spinner.fullScreen ? 'fixed' : 'absolute'\"\n\t\t[style.z-index]=\"spinner.zIndex\"\n\t\tclass=\"ngx-spinner-overlay\">\n\t\t@if (spinner.show) {\n\t\t\t<div [class]=\"spinner.class\" [style.color]=\"spinner.color\">\n\t\t\t\t@for (index of spinner.divArray; track index) {\n\t\t\t\t\t<div></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (template) {\n\t\t\t<div [innerHTML]=\"template | safeHtml\"></div>\n\t\t}\n\t\t<div [style.z-index]=\"spinner.zIndex\" class=\"loading-text\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n}\n", styles: [".la-ball-clip-rotate,.la-ball-clip-rotate>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-clip-rotate{display:block;font-size:0;color:#fff}.la-ball-clip-rotate.la-dark{color:#333}.la-ball-clip-rotate>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-clip-rotate{width:32px;height:32px}.la-ball-clip-rotate>div{width:32px;height:32px;background:transparent;border-width:2px;border-bottom-color:transparent;border-radius:100%;-webkit-animation:ball-clip-rotate .75s linear infinite;-moz-animation:ball-clip-rotate .75s linear infinite;-o-animation:ball-clip-rotate .75s linear infinite;animation:ball-clip-rotate .75s linear infinite}.la-ball-clip-rotate.la-sm{width:16px;height:16px}.la-ball-clip-rotate.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-clip-rotate.la-2x{width:64px;height:64px}.la-ball-clip-rotate.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-clip-rotate.la-3x{width:96px;height:96px}.la-ball-clip-rotate.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes ball-clip-rotate{0%{-moz-transform:rotate(0deg);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}to{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes ball-clip-rotate{0%{-o-transform:rotate(0deg);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}to{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.ngx-spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ngx-spinner-overlay>div:not(.loading-text){top:50%;left:50%;margin:0;position:absolute;transform:translate(-50%,-50%)}.loading-text{position:absolute;top:60%;left:50%;transform:translate(-50%,-60%)}\n/*!\n * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)\n * Copyright 2015 Daniel Cardoso <@DanielCardoso>\n * Licensed under MIT\n */\n"] }]
-        }], ctorParameters: () => [{ type: NgxSpinnerService }, { type: i0.ChangeDetectorRef }], propDecorators: { bdColor: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], fullScreen: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], zIndex: [{
-                type: Input
-            }], template: [{
-                type: Input
-            }], showSpinner: [{
-                type: Input
-            }], disableAnimation: [{
-                type: Input
-            }], spinnerDOM: [{
+                    ], template: "@if (spinner.show) {\n\t<div\n\t\t#overlay\n\t\t[@.disabled]=\"disableAnimation()\"\n\t\t[@fadeIn]=\"'in'\"\n\t\t[style.background-color]=\"spinner.bdColor\"\n\t\t[style.position]=\"spinner.fullScreen ? 'fixed' : 'absolute'\"\n\t\t[style.z-index]=\"spinner.zIndex\"\n\t\tclass=\"ngx-spinner-overlay\">\n\t\t@if (spinner.show) {\n\t\t\t<div [class]=\"spinner.class\" [style.color]=\"spinner.color\">\n\t\t\t\t@for (index of spinner.divArray; track index) {\n\t\t\t\t\t<div></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (template()) {\n\t\t\t<div [innerHTML]=\"template() | safeHtml\"></div>\n\t\t}\n\t\t<div [style.z-index]=\"spinner.zIndex\" class=\"loading-text\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n}\n", styles: [".la-ball-clip-rotate,.la-ball-clip-rotate>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-clip-rotate{display:block;font-size:0;color:#fff}.la-ball-clip-rotate.la-dark{color:#333}.la-ball-clip-rotate>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-clip-rotate{width:32px;height:32px}.la-ball-clip-rotate>div{width:32px;height:32px;background:transparent;border-width:2px;border-bottom-color:transparent;border-radius:100%;-webkit-animation:ball-clip-rotate .75s linear infinite;-moz-animation:ball-clip-rotate .75s linear infinite;-o-animation:ball-clip-rotate .75s linear infinite;animation:ball-clip-rotate .75s linear infinite}.la-ball-clip-rotate.la-sm{width:16px;height:16px}.la-ball-clip-rotate.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-clip-rotate.la-2x{width:64px;height:64px}.la-ball-clip-rotate.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-clip-rotate.la-3x{width:96px;height:96px}.la-ball-clip-rotate.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes ball-clip-rotate{0%{-moz-transform:rotate(0deg);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}to{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes ball-clip-rotate{0%{-o-transform:rotate(0deg);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}to{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.ngx-spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ngx-spinner-overlay>div:not(.loading-text){top:50%;left:50%;margin:0;position:absolute;transform:translate(-50%,-50%)}.loading-text{position:absolute;top:60%;left:50%;transform:translate(-50%,-60%)}\n/*!\n * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)\n * Copyright 2015 Daniel Cardoso <@DanielCardoso>\n * Licensed under MIT\n */\n"] }]
+        }], ctorParameters: () => [{ type: NgxSpinnerService }, { type: i0.ChangeDetectorRef }], propDecorators: { spinnerDOM: [{
                 type: ViewChild,
                 args: ['overlay']
             }], handleKeyboardEvent: [{
@@ -436,21 +422,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                 args: ['document:keydown', ['$event']]
             }] } });
 
-class TypeOfPipe {
-    transform(value) {
-        return typeof value;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TypeOfPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.0", ngImport: i0, type: TypeOfPipe, isStandalone: true, name: "typeOf" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: TypeOfPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'typeOf',
-                    standalone: true,
-                }]
-        }] });
-
 /**
  * Reusable Auto Complete component that extends MatAutoComplete to show Clear icon and Arrow buttons
  *
@@ -458,8 +429,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
  * @since 12.0.0
  */
 class AutocompleteComponent {
-    constructor(cdRef) {
-        this.cdRef = cdRef;
+    constructor() {
+        this.cdRef = inject(ChangeDetectorRef);
+        /**
+         * Internal form control for the autocomplete
+         */
+        this.control = new FormControl('');
         /**
          * Label of the AutoComplete
          */
@@ -492,118 +467,133 @@ class AutocompleteComponent {
          * Specifies if the autocomplete is required. Default is not required.
          */
         this.required = input(false);
+        /**
+         * Specifies if the autocomplete is disabled. Default is not required.
+         */
+        this.disabled = input(false);
         /**
          * List of Objects that need to be bind and searched for
          */
         this.data = input();
         /**
          * Emit selected value on selection changes
-         *
-         * @author Pavan Kumar Jadda
-         * @since 13.0.3
          */
         this.onSelectionChange = output();
         /**
          * BehaviorSubject that shows the current active arrow icon
          */
         this.arrowIconSubject = new BehaviorSubject('arrow_drop_down');
+        // ControlValueAccessor implementation
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.control.setValue(value, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+        // Forward value changes from internal control to parent form
+        this.control.valueChanges.subscribe((value) => fn(value));
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.control.disable();
+        }
+        else {
+            this.control.enable();
+        }
     }
     ngAfterContentChecked() {
         this.cdRef.detectChanges();
     }
-    /**
-     * Define autocomplete search filter on search text changes
-     *
-     * @author Pavan Kumar Jadda
-     * @since 12.0.0
-     */
     ngOnInit() {
-        this.filteredOptions = this.inputFormGroup?.get('autocomplete')?.valueChanges.pipe(startWith(''), map((value) => (typeof value === 'string' ? value : value !== null ? value[this.bindLabel()] : '')), map((propertyName) => this.data()?.filter((option) => {
+        this.filteredOptions = this.control.valueChanges.pipe(startWith(''), map((value) => (typeof value === 'string' ? value : value !== null ? value[this.bindLabel()] : '')), map((propertyName) => this.data()?.filter((option) => {
             return typeof option === 'string'
-                ? option?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0
+                ? option?.toLowerCase().startsWith(propertyName.toLowerCase())
                 : option[this.bindLabel()]?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0;
         }) ?? this.data()?.slice()));
     }
     ngOnChanges(_changes) {
         this.displayFn = this.displayFn.bind(this);
     }
-    /**
-     * Clear input and Reset autocomplete form control
-     *
-     * @author Pavan Kumar Jadda
-     * @since 12.0.0
-     */
     clearInput(evt) {
         evt.stopPropagation();
-        this.inputFormGroup.get('autocomplete')?.reset();
+        this.control.reset();
+        this.onChange(null);
         this.inputAutoComplete?.nativeElement.focus();
     }
-    /**
-     * Open or Close panel
-     *
-     * @author Pavan Kumar Jadda
-     * @since 12.0.0
-     */
     openOrClosePanel(evt, trigger) {
         evt.stopPropagation();
-        if (trigger.panelOpen)
+        if (trigger.panelOpen) {
             trigger.closePanel();
-        else
+        }
+        else {
             trigger.openPanel();
+        }
     }
-    /**
-     * Display function that is used to show the values
-     *
-     * @author Pavan Kumar Jadda
-     * @since 12.0.0
-     */
     displayFn(object) {
         if (this.displayWith !== undefined && this.displayWith !== null && typeof this.displayWith === 'function') {
             this.displayFn = this.displayWith.bind(this);
             return this.displayWith(object);
         }
         else {
-            if (typeof object === 'string')
+            if (typeof object === 'string') {
                 return object;
-            return object && object[this.bindLabel()] ? object[this.bindLabel()] : '';
+            }
+            return object?.[this.bindLabel()] ? object[this.bindLabel()] : '';
         }
     }
-    /**
-     * Emit selected value
-     * @param $event - Event emitted by autocomplete
-     *
-     * @author Pavan Kumar Jadda
-     * @since 13.0.3
-     */
     emitSelectedValue($event) {
         this.onSelectionChange.emit($event.source.value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: AutocompleteComponent, isStandalone: true, selector: "autocomplete, lib-autocomplete", inputs: { inputFormGroup: { classPropertyName: "inputFormGroup", publicName: "inputFormGroup", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, viewQueries: [{ propertyName: "inputAutoComplete", first: true, predicate: ["inputAutoComplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"inputFormGroup\">\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tformControlName=\"autocomplete\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (!!inputFormGroup.get('autocomplete')?.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if ((option | typeOf) === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if ((option | typeOf) === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: TypeOfPipe, name: "typeOf" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+        this.onChange($event.source.value);
+        this.onTouched();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: AutocompleteComponent, isStandalone: true, selector: "autocomplete, lib-autocomplete", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeHolder: { classPropertyName: "placeHolder", publicName: "placeHolder", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, displayWith: { classPropertyName: "displayWith", publicName: "displayWith", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelectionChange: "onSelectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => AutocompleteComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputAutoComplete", first: true, predicate: ["inputAutoComplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'autocomplete, lib-autocomplete', imports: [
-                        ReactiveFormsModule,
-                        TypeOfPipe,
-                        MatFormFieldModule,
-                        MatAutocompleteModule,
-                        MatInputModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        AsyncPipe,
-                    ], template: "<div [formGroup]=\"inputFormGroup\">\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tformControlName=\"autocomplete\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (!!inputFormGroup.get('autocomplete')?.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if ((option | typeOf) === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if ((option | typeOf) === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputAutoComplete: [{
+            args: [{ selector: 'autocomplete, lib-autocomplete', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatButtonModule, MatIconModule, AsyncPipe], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AutocompleteComponent),
+                            multi: true,
+                        },
+                    ], template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n" }]
+        }], propDecorators: { inputAutoComplete: [{
                 type: ViewChild,
                 args: ['inputAutoComplete']
-            }], inputFormGroup: [{
-                type: Input
             }], displayWith: [{
                 type: Input
             }, {
                 type: Optional
             }] } });
 
+class PrintOptions {
+    constructor(options) {
+        this.printSectionId = '';
+        this.printTitle = '';
+        this.useExistingCss = false;
+        this.bodyClass = '';
+        this.openNewTab = false;
+        this.previewOnly = false;
+        this.closeWindow = true;
+        this.printDelay = 0;
+        if (options) {
+            Object.assign(this, options);
+        }
+    }
+}
+
 /**
  * Reusable Angular directory that prints given contents of HTML element
  *
@@ -655,6 +645,7 @@ class NgxPrintDirective {
          */
         this.hideMatTablePaginator = false;
         this.printStyleArray = [];
+        this.printOptions = new PrintOptions();
         /**
          * List of Style sheet files
          *
@@ -663,6 +654,14 @@ class NgxPrintDirective {
          */
         this.styleSheetFileArray = '';
     }
+    /**
+     * Prevents the print dialog from opening on the window
+     *
+     * @memberof NgxPrintDirective
+     */
+    set previewOnly(value) {
+        this.printOptions = { ...this.printOptions, previewOnly: value };
+    }
     /**
      * List of CSS properties that needs to be applied while printing the document
      *
@@ -818,13 +817,12 @@ class NgxPrintDirective {
     returnStyleValues() {
         return `<style> ${this.printStyleArray.join(' ').replace(/,/g, ';')} </style>`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxPrintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: NgxPrintDirective, isStandalone: true, selector: "button[ngxPrint], button[print]", inputs: { printSectionId: "printSectionId", printTitle: "printTitle", useExistingCss: "useExistingCss", printDelay: "printDelay", matTableDataSource: "matTableDataSource", paginator: "paginator", paginatorId: "paginatorId", inputFilterId: "inputFilterId", isMatTable: "isMatTable", hideMatTablePaginator: "hideMatTablePaginator", printStyle: "printStyle", styleSheetFile: "styleSheetFile" }, host: { listeners: { "click": "print()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxPrintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.0", type: NgxPrintDirective, isStandalone: true, selector: "button[ngxPrint], button[print]", inputs: { printSectionId: "printSectionId", printTitle: "printTitle", useExistingCss: "useExistingCss", printDelay: "printDelay", matTableDataSource: "matTableDataSource", paginator: "paginator", paginatorId: "paginatorId", inputFilterId: "inputFilterId", isMatTable: "isMatTable", hideMatTablePaginator: "hideMatTablePaginator", previewOnly: "previewOnly", printStyle: "printStyle", styleSheetFile: "styleSheetFile" }, host: { listeners: { "click": "print()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: NgxPrintDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxPrintDirective, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
                     selector: 'button[ngxPrint], button[print]',
                     standalone: true,
                 }]
@@ -848,6 +846,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                 type: Input
             }], hideMatTablePaginator: [{
                 type: Input
+            }], previewOnly: [{
+                type: Input
             }], printStyle: [{
                 type: Input
             }], styleSheetFile: [{
@@ -860,7 +860,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
 class PreventMultipleClicksDirective {
     constructor() {
         this.throttleTime = input(2000);
-        this.throttleClick = new EventEmitter();
+        this.throttleClick = output();
         this.clicks = new Subject();
     }
     /**
@@ -882,18 +882,16 @@ class PreventMultipleClicksDirective {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PreventMultipleClicksDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.0", type: PreventMultipleClicksDirective, isStandalone: true, selector: "[preventMultipleClicks]", inputs: { throttleTime: { classPropertyName: "throttleTime", publicName: "throttleTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { throttleClick: "throttleClick" }, host: { listeners: { "click": "clickEvent($event)" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PreventMultipleClicksDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.0", type: PreventMultipleClicksDirective, isStandalone: true, selector: "[preventMultipleClicks]", inputs: { throttleTime: { classPropertyName: "throttleTime", publicName: "throttleTime", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { throttleClick: "throttleClick" }, host: { listeners: { "click": "clickEvent($event)" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PreventMultipleClicksDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PreventMultipleClicksDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[preventMultipleClicks]',
                     standalone: true,
                 }]
-        }], propDecorators: { throttleClick: [{
-                type: Output
-            }], clickEvent: [{
+        }], propDecorators: { clickEvent: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -965,10 +963,10 @@ class BaseButtonComponent {
          */
         this.onKeyUp = output();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: BaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: BaseButtonComponent, isStandalone: true, selector: "ng-component", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp" }, ngImport: i0, template: ``, isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: BaseButtonComponent, isStandalone: true, selector: "ng-component", inputs: { loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null }, dataCy: { classPropertyName: "dataCy", publicName: "dataCy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", onKeyDown: "onKeyDown", onKeyUp: "onKeyUp" }, ngImport: i0, template: ``, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: BaseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BaseButtonComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -983,8 +981,8 @@ class BsLinkButtonComponent extends BaseButtonComponent {
         this.icon = input('search');
         this.classes = input('btn text-primary');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: BsLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: BsLinkButtonComponent, isStandalone: true, selector: "bs-link-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BsLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: BsLinkButtonComponent, isStandalone: true, selector: "bs-link-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<a
 			type="{{ type() }}"
 			class="{{ classes() }}"
@@ -996,14 +994,14 @@ class BsLinkButtonComponent extends BaseButtonComponent {
 			[disabled]="disabled()"
 			[type]="type()"
 			[style]="style()"
-			[attr.data-cy]="'edit-link-button'"
+			[attr.data-cy]="'bs-link-button'"
 			mat-button>
 			<mat-icon>{{ icon() }}</mat-icon>
 			{{ label() }}
 		</a>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAnchor, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: BsLinkButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: BsLinkButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-link-button', imports: [MatIcon, MatAnchor], template: `
 		<a
@@ -1017,7 +1015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
 			[disabled]="disabled()"
 			[type]="type()"
 			[style]="style()"
-			[attr.data-cy]="'edit-link-button'"
+			[attr.data-cy]="'bs-link-button'"
 			mat-button>
 			<mat-icon>{{ icon() }}</mat-icon>
 			{{ label() }}
@@ -1033,8 +1031,8 @@ class DeleteButtonComponent extends BaseButtonComponent {
         this.icon = input('delete');
         this.classes = input('delete-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DeleteButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: DeleteButtonComponent, isStandalone: true, selector: "delete-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DeleteButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: DeleteButtonComponent, isStandalone: true, selector: "delete-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			mat-raised-button
 			class="btn {{ classes() }}"
@@ -1055,9 +1053,9 @@ class DeleteButtonComponent extends BaseButtonComponent {
 			}
 			{{ loading() ? loadingLabel() : label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DeleteButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: DeleteButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'delete-button', imports: [MatButtonModule, MatIconModule], template: `
 		<button
@@ -1090,8 +1088,8 @@ class EditButtonComponent extends BaseButtonComponent {
         this.icon = input('edit');
         this.classes = input('primary-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EditButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: EditButtonComponent, isStandalone: true, selector: "edit-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: EditButtonComponent, isStandalone: true, selector: "edit-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			class="{{ classes() }}"
 			(click)="onClick.emit($event)"
@@ -1107,9 +1105,9 @@ class EditButtonComponent extends BaseButtonComponent {
 			<mat-icon>{{ icon() }}</mat-icon>
 			{{ label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EditButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'edit-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1139,10 +1137,10 @@ class EditSolidSvgComponent {
     constructor(iconRegistry, sanitizer) {
         iconRegistry.addSvgIconLiteral('edit-solid', sanitizer.bypassSecurityTrustHtml(EDIT_ICON));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EditSolidSvgComponent, deps: [{ token: i1$4.MatIconRegistry }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: EditSolidSvgComponent, isStandalone: true, selector: "edit-solid-svg", ngImport: i0, template: ` <mat-icon aria-hidden="false" aria-label="Edit" svgIcon="edit-solid"></mat-icon> `, isInline: true, styles: [".mat-icon{vertical-align:bottom;padding-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditSolidSvgComponent, deps: [{ token: i1$4.MatIconRegistry }, { token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: EditSolidSvgComponent, isStandalone: true, selector: "edit-solid-svg", ngImport: i0, template: ` <mat-icon aria-hidden="false" aria-label="Edit" svgIcon="edit-solid"></mat-icon> `, isInline: true, styles: [".mat-icon{vertical-align:bottom;padding-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EditSolidSvgComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditSolidSvgComponent, decorators: [{
             type: Component,
             args: [{ selector: 'edit-solid-svg', imports: [MatIconModule], template: ` <mat-icon aria-hidden="false" aria-label="Edit" svgIcon="edit-solid"></mat-icon> `, styles: [".mat-icon{vertical-align:bottom;padding-left:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.MatIconRegistry }, { type: i1$1.DomSanitizer }] });
@@ -1153,8 +1151,8 @@ class EditBsButtonComponent extends BaseButtonComponent {
         this.label = input('Edit');
         this.classes = input('text-primary');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EditBsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: EditBsButtonComponent, isStandalone: true, selector: "edit-bs-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditBsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: EditBsButtonComponent, isStandalone: true, selector: "edit-bs-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			color="primary"
 			type="{{ type() }}"
@@ -1172,11 +1170,11 @@ class EditBsButtonComponent extends BaseButtonComponent {
 			<edit-solid-svg></edit-solid-svg>
 			{{ label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: EditSolidSvgComponent, selector: "edit-solid-svg" }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: EditSolidSvgComponent, selector: "edit-solid-svg" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EditBsButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditBsButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'edit-bs-button', imports: [CommonModule, MatButtonModule, MatIconModule, EditSolidSvgComponent], template: `
+            args: [{ selector: 'edit-bs-button', imports: [MatButtonModule, MatIconModule, EditSolidSvgComponent], template: `
 		<button
 			color="primary"
 			type="{{ type() }}"
@@ -1204,8 +1202,8 @@ class EditSvgIconButtonComponent extends BaseButtonComponent {
         this.icon = input('edit');
         this.classes = input('primary-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EditSvgIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: EditSvgIconButtonComponent, isStandalone: true, selector: "edit-svg-icon-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditSvgIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: EditSvgIconButtonComponent, isStandalone: true, selector: "edit-svg-icon-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			type="{{ type() }}"
 			class="{{ classes() }}"
@@ -1222,9 +1220,9 @@ class EditSvgIconButtonComponent extends BaseButtonComponent {
 			<edit-solid-svg></edit-solid-svg>
 			{{ label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: EditSolidSvgComponent, selector: "edit-solid-svg" }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: EditSolidSvgComponent, selector: "edit-solid-svg" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EditSvgIconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EditSvgIconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'edit-svg-icon-button', imports: [MatButton, EditSolidSvgComponent], template: `
 		<button
@@ -1253,8 +1251,8 @@ class ManageButtonComponent extends BaseButtonComponent {
         this.icon = input('settings');
         this.classes = input('mr-3 btn btn-secondary secondary-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ManageButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ManageButtonComponent, isStandalone: true, selector: "manage-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ManageButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: ManageButtonComponent, isStandalone: true, selector: "manage-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			mat-raised-button
 			class="{{ classes() }}"
@@ -1268,9 +1266,9 @@ class ManageButtonComponent extends BaseButtonComponent {
 			<mat-icon>{{ icon() }}</mat-icon>
 			{{ label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ManageButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ManageButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'manage-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1297,8 +1295,8 @@ class SavePrimaryButtonComponent extends BaseButtonComponent {
         this.icon = input('save');
         this.classes = input('btn-primary primary-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SavePrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: SavePrimaryButtonComponent, isStandalone: true, selector: "save-primary-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SavePrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SavePrimaryButtonComponent, isStandalone: true, selector: "save-primary-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			mat-raised-button
 			class="btn {{ classes() }}"
@@ -1319,9 +1317,9 @@ class SavePrimaryButtonComponent extends BaseButtonComponent {
 			}
 			{{ loading() ? loadingLabel() : label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SavePrimaryButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SavePrimaryButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'save-primary-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1355,8 +1353,8 @@ class SearchButtonComponent extends BaseButtonComponent {
         this.icon = input('search');
         this.classes = input('btn-primary primary-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: SearchButtonComponent, isStandalone: true, selector: "search-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SearchButtonComponent, isStandalone: true, selector: "search-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			class="btn btn-primary primary-button {{ loading() || disabled() ? 'disabled' : '' }}"
 			(click)="onClick.emit($event)"
@@ -1375,11 +1373,11 @@ class SearchButtonComponent extends BaseButtonComponent {
 			}
 			{{ loading() ? loadingLabel() : label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SearchButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SearchButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'search-button', imports: [CommonModule, MatButtonModule, MatIconModule], template: `
+            args: [{ selector: 'search-button', imports: [MatButtonModule, MatIconModule], template: `
 		<button
 			class="btn btn-primary primary-button {{ loading() || disabled() ? 'disabled' : '' }}"
 			(click)="onClick.emit($event)"
@@ -1409,8 +1407,8 @@ class SuccessButtonComponent extends BaseButtonComponent {
         this.icon = input('save');
         this.classes = input('success-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SuccessButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: SuccessButtonComponent, isStandalone: true, selector: "success-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SuccessButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: SuccessButtonComponent, isStandalone: true, selector: "success-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			mat-raised-button
 			class="btn {{ classes() }}"
@@ -1431,9 +1429,9 @@ class SuccessButtonComponent extends BaseButtonComponent {
 			}
 			{{ loading() ? loadingLabel() : label() }}
 		</button>
-	`, isInline: true, dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SuccessButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SuccessButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'success-button',
@@ -1469,8 +1467,8 @@ class ViewButtonComponent extends BaseButtonComponent {
         this.label = input('View');
         this.icon = input('visibility');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ViewButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ViewButtonComponent, isStandalone: true, selector: "view-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: ViewButtonComponent, isStandalone: true, selector: "view-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			color="primary"
 			(click)="onClick.emit($event)"
@@ -1483,9 +1481,9 @@ class ViewButtonComponent extends BaseButtonComponent {
 			<mat-icon>{{ icon() }}</mat-icon>
 			{{ label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ViewButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1510,8 +1508,8 @@ class ViewPrimaryButtonComponent extends BaseButtonComponent {
         this.icon = input('visibility');
         this.classes = input('btn-primary primary-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ViewPrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.0", type: ViewPrimaryButtonComponent, isStandalone: true, selector: "view-primary-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewPrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.0", type: ViewPrimaryButtonComponent, isStandalone: true, selector: "view-primary-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			mat-raised-button
 			class="btn {{ classes() }}"
@@ -1527,9 +1525,9 @@ class ViewPrimaryButtonComponent extends BaseButtonComponent {
 			<mat-icon>{{ icon() }}</mat-icon>
 			{{ label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ViewPrimaryButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ViewPrimaryButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-primary-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1559,8 +1557,8 @@ class PrimaryButtonComponent extends BaseButtonComponent {
         this.showIcon = input(false);
         this.classes = input('btn-primary primary-button');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: PrimaryButtonComponent, isStandalone: true, selector: "primary-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: PrimaryButtonComponent, isStandalone: true, selector: "primary-button", inputs: { loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, classes: { classPropertyName: "classes", publicName: "classes", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
 		<button
 			mat-raised-button
 			class="btn {{ classes() }}"
@@ -1581,9 +1579,9 @@ class PrimaryButtonComponent extends BaseButtonComponent {
 			}
 			{{ loading() ? loadingLabel() : label() }}
 		</button>
-	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'primary-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1610,21 +1608,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
         }], ctorParameters: () => [] });
 
 class PdfExportButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PdfExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: PdfExportButtonComponent, isStandalone: true, selector: "pdf-export-button", ngImport: i0, template: ` <button class="pdf-export-button" mat-raised-button type="button" data-cy="pdf-export-button">PDF</button> `, isInline: true, styles: [".pdf-export-button{margin-left:20px!important;width:100px;color:#fff!important;background-color:#a3071b!important;border-radius:24px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: PdfExportButtonComponent, isStandalone: true, selector: "pdf-export-button", ngImport: i0, template: ` <button class="pdf-export-button" mat-raised-button type="button" data-cy="pdf-export-button">PDF</button> `, isInline: true, styles: [".pdf-export-button{margin-left:20px!important;width:100px;color:#fff!important;background-color:#a3071b!important;border-radius:24px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: PdfExportButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PdfExportButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdf-export-button', imports: [MatButtonModule], template: ` <button class="pdf-export-button" mat-raised-button type="button" data-cy="pdf-export-button">PDF</button> `, styles: [".pdf-export-button{margin-left:20px!important;width:100px;color:#fff!important;background-color:#a3071b!important;border-radius:24px!important}\n"] }]
         }] });
 
 class ExcelExportButtonComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ExcelExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: ExcelExportButtonComponent, isStandalone: true, selector: "excel-export-button", ngImport: i0, template: ` <button class="excel-export-button" mat-raised-button type="button" data-cy="excel-export-button">Excel</button> `, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n", ".excel-export-button{margin-left:20px!important;margin-right:20px!important;width:100px;color:#fff!important;background-color:#006400!important;border-radius:24px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ExcelExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ExcelExportButtonComponent, isStandalone: true, selector: "excel-export-button", ngImport: i0, template: ` <button class="excel-export-button" mat-raised-button type="button" data-cy="excel-export-button">Excel</button> `, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n", ".excel-export-button{margin-left:20px!important;margin-right:20px!important;width:100px;color:#fff!important;background-color:#006400!important;border-radius:24px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ExcelExportButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ExcelExportButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'excel-export-button', imports: [CommonModule, MatButtonModule], template: ` <button class="excel-export-button" mat-raised-button type="button" data-cy="excel-export-button">Excel</button> `, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n", ".excel-export-button{margin-left:20px!important;margin-right:20px!important;width:100px;color:#fff!important;background-color:#006400!important;border-radius:24px!important}\n"] }]
+            args: [{ selector: 'excel-export-button', imports: [MatButtonModule], template: ` <button class="excel-export-button" mat-raised-button type="button" data-cy="excel-export-button">Excel</button> `, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n", ".excel-export-button{margin-left:20px!important;margin-right:20px!important;width:100px;color:#fff!important;background-color:#006400!important;border-radius:24px!important}\n"] }]
         }] });
 
 class ConfirmDialogComponent {
@@ -1643,8 +1641,8 @@ class ConfirmDialogComponent {
         // Close the dialog, return true
         this.dialogRef.close(true);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ConfirmDialogComponent, isStandalone: true, selector: "app-confirm-dialog", ngImport: i0, template: `
 		<div class="mat-dialog-title" style="text-align: center">
 			<h3 class="m-3 mat-headline-5	">{{ title }}</h3>
 		</div>
@@ -1658,9 +1656,9 @@ class ConfirmDialogComponent {
 			<button (click)="onDismiss()" mat-raised-button>No</button>
 			<button (click)="onConfirm()" class="primary-button" mat-raised-button>Yes</button>
 		</div>
-	`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$5.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$5.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-confirm-dialog', imports: [MatButtonModule, MatDividerModule, MatDialogModule], template: `
 		<div class="mat-dialog-title" style="text-align: center">
@@ -1696,8 +1694,8 @@ class ErrorSnackBarComponent {
     close() {
         this.msb.dismissWithAction();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ErrorSnackBarComponent, deps: [{ token: i1$6.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: ErrorSnackBarComponent, isStandalone: true, selector: "app-error-snack-bar", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ErrorSnackBarComponent, deps: [{ token: i1$6.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: ErrorSnackBarComponent, isStandalone: true, selector: "app-error-snack-bar", ngImport: i0, template: `
 		<div class="custom-flex-center error-snackbar">
 			<mat-icon>error</mat-icon>
 			<label>{{ data.message }}</label>
@@ -1705,11 +1703,11 @@ class ErrorSnackBarComponent {
 				<mat-icon>close</mat-icon>
 			</button>
 		</div>
-	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{color:#fff;--mdc-snackbar-container-color: var(--success-color);--mat-mdc-snack-bar-button-color: var(--white-color)}.error-snackbar{color:#fff;--mdc-snackbar-container-color: var(--delete-color);--mat-mdc-snack-bar-button-color: var(--white-color)}.light-success-snackbar{color:#155724;background-color:#d4edda;--mdc-snackbar-container-color: #d4edda;--mat-mdc-snack-bar-button-color: darkgreen}.light-error-snackbar{color:#721c24;--mdc-snackbar-container-color: var(--success-color);--mat-mdc-snack-bar-button-color: darkred;border-color:#f5c6cb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{color:#fff;--mdc-snackbar-container-color: var(--success-color);--mat-mdc-snack-bar-button-color: var(--white-color)}.error-snackbar{color:#fff;--mdc-snackbar-container-color: var(--delete-color);--mat-mdc-snack-bar-button-color: var(--white-color)}.light-success-snackbar{color:#155724;background-color:#d4edda;--mdc-snackbar-container-color: #d4edda;--mat-mdc-snack-bar-button-color: darkgreen}.light-error-snackbar{color:#721c24;--mdc-snackbar-container-color: var(--success-color);--mat-mdc-snack-bar-button-color: darkred;border-color:#f5c6cb}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ErrorSnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: ErrorSnackBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-error-snack-bar', imports: [CommonModule, MatIconModule, MatButtonModule], template: `
+            args: [{ selector: 'app-error-snack-bar', imports: [MatIconModule, MatButtonModule], template: `
 		<div class="custom-flex-center error-snackbar">
 			<mat-icon>error</mat-icon>
 			<label>{{ data.message }}</label>
@@ -1737,8 +1735,8 @@ class SuccessSnackBarComponent {
     close() {
         this.msb.dismissWithAction();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SuccessSnackBarComponent, deps: [{ token: i1$6.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: SuccessSnackBarComponent, isStandalone: true, selector: "app-success-snack-bar", ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SuccessSnackBarComponent, deps: [{ token: i1$6.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.0", type: SuccessSnackBarComponent, isStandalone: true, selector: "app-success-snack-bar", ngImport: i0, template: `
 		<div class="custom-flex-center success-snackbar">
 			<mat-icon>check_circle</mat-icon>
 			<label>{{ data.message }}</label>
@@ -1746,11 +1744,11 @@ class SuccessSnackBarComponent {
 				<mat-icon>close</mat-icon>
 			</button>
 		</div>
-	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{color:#fff;--mdc-snackbar-container-color: var(--success-color);--mat-mdc-snack-bar-button-color: var(--white-color)}.error-snackbar{color:#fff;--mdc-snackbar-container-color: var(--delete-color);--mat-mdc-snack-bar-button-color: var(--white-color)}.light-success-snackbar{color:#155724;background-color:#d4edda;--mdc-snackbar-container-color: #d4edda;--mat-mdc-snack-bar-button-color: darkgreen}.light-error-snackbar{color:#721c24;--mdc-snackbar-container-color: var(--success-color);--mat-mdc-snack-bar-button-color: darkred;border-color:#f5c6cb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{color:#fff;--mdc-snackbar-container-color: var(--success-color);--mat-mdc-snack-bar-button-color: var(--white-color)}.error-snackbar{color:#fff;--mdc-snackbar-container-color: var(--delete-color);--mat-mdc-snack-bar-button-color: var(--white-color)}.light-success-snackbar{color:#155724;background-color:#d4edda;--mdc-snackbar-container-color: #d4edda;--mat-mdc-snack-bar-button-color: darkgreen}.light-error-snackbar{color:#721c24;--mdc-snackbar-container-color: var(--success-color);--mat-mdc-snack-bar-button-color: darkred;border-color:#f5c6cb}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: SuccessSnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SuccessSnackBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-success-snack-bar', imports: [CommonModule, MatButtonModule, MatIconModule], template: `
+            args: [{ selector: 'app-success-snack-bar', imports: [MatButtonModule, MatIconModule], template: `
 		<div class="custom-flex-center success-snackbar">
 			<mat-icon>check_circle</mat-icon>
 			<label>{{ data.message }}</label>
@@ -1765,18 +1763,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImpor
                 }] }] });
 
 class MatSnackBarService {
-    constructor(snackBar) {
-        this.snackBar = snackBar;
+    constructor() {
+        this.snackBar = inject(MatSnackBar);
         /**
-         * Duration (in milliseconds) of the Snack Bar to be open. Defaults to 5 seconds(5000 milliseconds)
+         * Duration (in milliseconds) of the Snack Bar to be open. Defaults to 5 seconds (5000 milliseconds)
          */
-        this.duration = 500000;
+        this.duration = 5000;
         /**
-         * Horizontal Position of the MatSnackBar. Defaults to left side
+         * Horizontal Position of the MatSnackBar. Defaults to right side
          */
         this.horizontalPosition = 'right';
         /**
-         * Vertical Position of the MatSnackBar. Defaults to page bottom
+         * Vertical Position of the MatSnackBar. Defaults to top of the page
          */
         this.verticalPosition = 'top';
     }
@@ -1810,7 +1808,7 @@ class MatSnackBarService {
     error(message, options) {
         this.snackBar.openFromComponent(ErrorSnackBarComponent, {
             data: { message },
-            duration: options?.duration ?? 10000,
+            duration: options?.duration ?? this.duration,
             panelClass: options?.panelClass ?? 'error-snackbar',
             horizontalPosition: options?.horizontalPosition ?? this.horizontalPosition,
             verticalPosition: options?.verticalPosition ?? this.verticalPosition,
@@ -1831,15 +1829,15 @@ class MatSnackBarService {
             verticalPosition: this.verticalPosition,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarService, deps: [{ token: i1$6.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatSnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatSnackBarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: MatSnackBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatSnackBarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$6.MatSnackBar }] });
+        }] });
 
 /**
  * A core store class that can be used to store any object
@@ -1864,10 +1862,10 @@ class Store {
     update(newData) {
         this._data.set(newData);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: Store, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: Store, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Store, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Store, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: Store, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Store, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1951,10 +1949,10 @@ class EntityStore {
     remove(id) {
         this._data.update((currentData) => currentData.filter((item) => item.id !== id));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EntityStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EntityStore, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EntityStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EntityStore, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: EntityStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EntityStore, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',