@js-smart/ng-kit 20.3.1 → 20.4.0

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

@@ -38,31 +38,31 @@ class AlertComponent {
         /**
          * Type of the BootStrap Alert. Following values are supported. See BootStrap docs for more information
          */
-        this.type = input('info');
+        this.type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
          *  Is alert visible or open
          */
-        this.isOpen = input(true);
+        this.isOpen = input(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
         /**
          *  Writable signal for isOpen
          */
-        this.open = signal(this.isOpen());
+        this.open = signal(this.isOpen(), ...(ngDevMode ? [{ debugName: "open" }] : []));
         /**
          * If set, displays an inline “Close” button
          */
-        this.dismissible = input(true);
+        this.dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
         /**
          * If set, dismisses the alert after Dismiss Timeout
          */
-        this.dismissOnTimeout = input(true);
+        this.dismissOnTimeout = input(true, ...(ngDevMode ? [{ debugName: "dismissOnTimeout" }] : []));
         /**
          * Number in milliseconds, after which alert will be closed. Default value is 5000 ms
          */
-        this.dismissTimeout = input(5000);
+        this.dismissTimeout = input(5000, ...(ngDevMode ? [{ debugName: "dismissTimeout" }] : []));
         /**
          * Additional classes to be added to the alert. This can be used to add custom styles to the alert
          */
-        this.class = input('');
+        this.class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
         /**
          * Emits when the alert is closed.
          */
@@ -109,10 +109,10 @@ class AlertComponent {
     openAlert() {
         this.open.set(true);
     }
-    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"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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: "20.0.0", ngImport: i0, type: AlertComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
             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: () => [] });
@@ -122,24 +122,24 @@ class SpinnerComponent {
         /**
          *  Use Boostrap Spinner. Default `true`
          */
-        this.bootstrapSpinner = input(true);
+        this.bootstrapSpinner = input(true, ...(ngDevMode ? [{ debugName: "bootstrapSpinner" }] : []));
         /**
          * Diameter of the Angular Material spinner
          */
-        this.diameter = input(50);
+        this.diameter = input(50, ...(ngDevMode ? [{ debugName: "diameter" }] : []));
         /**
          *  Color of the Angular Material spinner
          */
-        this.color = input('primary');
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
         /**
          *  Stroke Width of the Angular Material spinner
          */
-        this.strokeWidth = input(5);
+        this.strokeWidth = input(5, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
     }
-    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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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: "20.0.0", ngImport: i0, type: SpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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"] }]
         }] });
@@ -216,10 +216,10 @@ class NgxSpinnerService {
             }, debounce);
         });
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: NgxSpinnerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: NgxSpinnerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxSpinnerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: NgxSpinnerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -236,10 +236,10 @@ class SafeHtmlPipe {
         }
         return undefined;
     }
-    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" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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.1.0", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'safeHtml',
@@ -258,43 +258,43 @@ class NgxSpinnerComponent {
          * To set backdrop color
          * Only supports RGBA color format
          */
-        this.bdColor = input(DEFAULTS.BD_COLOR);
+        this.bdColor = input(DEFAULTS.BD_COLOR, ...(ngDevMode ? [{ debugName: "bdColor" }] : []));
         /**
          * To set spinner size
          */
-        this.size = input('large');
+        this.size = input('large', ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * To set spinner color(DEFAULTS.SPINNER_COLOR)
          */
-        this.color = input(DEFAULTS.SPINNER_COLOR);
+        this.color = input(DEFAULTS.SPINNER_COLOR, ...(ngDevMode ? [{ debugName: "color" }] : []));
         /**
          * To set type of spinner
          */
-        this.type = input(DEFAULTS.SPINNER_TYPE);
+        this.type = input(DEFAULTS.SPINNER_TYPE, ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
          * To toggle fullscreen mode
          */
-        this.fullScreen = input(true);
+        this.fullScreen = input(true, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
         /**
          * Spinner name
          */
-        this.name = input(PRIMARY_SPINNER);
+        this.name = input(PRIMARY_SPINNER, ...(ngDevMode ? [{ debugName: "name" }] : []));
         /**
          * z-index value
          */
-        this.zIndex = input(DEFAULTS.Z_INDEX);
+        this.zIndex = input(DEFAULTS.Z_INDEX, ...(ngDevMode ? [{ debugName: "zIndex" }] : []));
         /**
          * Custom template for spinner/loader
          */
-        this.template = input('');
+        this.template = input('', ...(ngDevMode ? [{ debugName: "template" }] : []));
         /**
          * Show/Hide the spinner
          */
-        this.showSpinner = input(false);
+        this.showSpinner = input(false, ...(ngDevMode ? [{ debugName: "showSpinner" }] : []));
         /**
          * To enable/disable animation
          */
-        this.disableAnimation = input(false);
+        this.disableAnimation = input(false, ...(ngDevMode ? [{ debugName: "disableAnimation" }] : []));
         /**
          * Spinner Object
          */
@@ -396,8 +396,8 @@ class NgxSpinnerComponent {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
-    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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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.1.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)]),
@@ -405,7 +405,7 @@ class NgxSpinnerComponent {
             ]),
         ] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: NgxSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: NgxSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ngx-spinner', imports: [SafeHtmlPipe], animations: [
                         trigger('fadeIn', [
@@ -438,27 +438,27 @@ class AutocompleteComponent {
         /**
          * Label of the AutoComplete
          */
-        this.label = input('');
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
         /**
          * Placeholder of the AutoComplete
          */
-        this.placeHolder = input('');
+        this.placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
         /**
          * Appearance of the AutoComplete, defaults to `fill`
          */
-        this.appearance = input('fill');
+        this.appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
         /**
          * List of CSS classes that need to applied to autocomplete
          */
-        this.classes = input('');
+        this.classes = input('', ...(ngDevMode ? [{ debugName: "classes" }] : []));
         /**
          * Attribute of the Object whose value would be shown when searching for data. Defaults to `ID`
          */
-        this.bindLabel = input('');
+        this.bindLabel = input('', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
         /**
          * Attribute of the Object whose value would be used for search
          */
-        this.bindValue = input('id');
+        this.bindValue = input('id', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
         /**
          * Function that maps an option's control value to its display value in the trigger.
          */
@@ -466,15 +466,15 @@ class AutocompleteComponent {
         /**
          * Specifies if the autocomplete is required. Default is not required.
          */
-        this.required = input(false);
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
         /**
          * Specifies if the autocomplete is disabled. Default is not required.
          */
-        this.disabled = input(false);
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         /**
          * List of Objects that need to be bind and searched for
          */
-        this.data = input();
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
         /**
          * Emit selected value on selection changes
          */
@@ -551,8 +551,8 @@ class AutocompleteComponent {
         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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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),
@@ -560,7 +560,7 @@ class AutocompleteComponent {
             },
         ], 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: "20.0.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
             args: [{ selector: 'autocomplete, lib-autocomplete', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatButtonModule, MatIconModule, AsyncPipe], providers: [
                         {
@@ -817,10 +817,10 @@ class NgxPrintDirective {
     returnStyleValues() {
         return `<style> ${this.printStyleArray.join(' ').replace(/,/g, ';')} </style>`;
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: NgxPrintDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.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: "20.0.0", ngImport: i0, type: NgxPrintDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: NgxPrintDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'button[ngxPrint], button[print]',
@@ -859,7 +859,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 
 class PreventMultipleClicksDirective {
     constructor() {
-        this.throttleTime = input(2000);
+        this.throttleTime = input(2000, ...(ngDevMode ? [{ debugName: "throttleTime" }] : []));
         this.throttleClick = output();
         this.clicks = new Subject();
     }
@@ -882,10 +882,10 @@ class PreventMultipleClicksDirective {
     ngOnDestroy() {
         this.subscription?.unsubscribe();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PreventMultipleClicksDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.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: "20.0.0", ngImport: i0, type: PreventMultipleClicksDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PreventMultipleClicksDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[preventMultipleClicks]',
@@ -901,11 +901,11 @@ class BaseButtonComponent {
         /**
          *  Is search in progress and loading the data
          */
-        this.loading = input(false, { transform: (value) => value ?? false });
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: (value) => value ?? false }] : [{ transform: (value) => value ?? false }]));
         /**
          *  Is button disabled
          */
-        this.disabled = input(false);
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         /**
          * Type of the button. Following values are supported. See BootStrap docs for more information
          * <pre>
@@ -913,35 +913,35 @@ class BaseButtonComponent {
          *   2. submit
          * </pre>
          */
-        this.type = input('button');
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
         /**
          * If set, shows when action in Progress
          */
-        this.loadingLabel = input('Saving...');
+        this.loadingLabel = input('Saving...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
         /**
          * If set, shows when Delete is not in progress
          */
-        this.label = input('Save');
+        this.label = input('Save', ...(ngDevMode ? [{ debugName: "label" }] : []));
         /**
          * If set, shows the icon. Otherwise, shows delete icon
          */
-        this.icon = input('save');
+        this.icon = input('save', ...(ngDevMode ? [{ debugName: "icon" }] : []));
         /**
          * If set, shows material icon otherwise hides the icons
          */
-        this.showIcon = input(true);
+        this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
         /**
          * If set, sets the style of the button
          */
-        this.style = input();
+        this.style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
         /**
          * If set, sets the class of the button
          */
-        this.classes = input('btn');
+        this.classes = input('btn', ...(ngDevMode ? [{ debugName: "classes" }] : []));
         /**
          * If set, sets the data-cy attribute for the button
          */
-        this.dataCy = input('save-button');
+        this.dataCy = input('save-button', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
         /**
          *  Output event when button is clicked
          */
@@ -963,10 +963,10 @@ class BaseButtonComponent {
          */
         this.onKeyUp = output();
     }
-    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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BaseButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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: "20.0.0", ngImport: i0, type: BaseButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BaseButtonComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
@@ -977,12 +977,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class BsLinkButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.label = input('Edit');
-        this.icon = input('search');
-        this.classes = input('btn text-primary');
+        this.label = input('Edit', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('search', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('btn text-primary', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BsLinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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() }}"
@@ -1001,7 +1001,7 @@ class BsLinkButtonComponent extends BaseButtonComponent {
 		</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: "    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: "20.0.0", ngImport: i0, type: BsLinkButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BsLinkButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bs-link-button', imports: [MatIcon, MatAnchor], template: `
 		<a
@@ -1026,13 +1026,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class DeleteButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.loadingLabel = input('Deleting...');
-        this.label = input('Delete');
-        this.icon = input('delete');
-        this.classes = input('delete-button');
+        this.loadingLabel = input('Deleting...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.label = input('Delete', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('delete', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('delete-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: DeleteButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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,7 +1055,7 @@ class DeleteButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: DeleteButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: DeleteButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'delete-button', imports: [MatButtonModule, MatIconModule], template: `
 		<button
@@ -1084,12 +1084,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class EditButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.label = input('Edit');
-        this.icon = input('edit');
-        this.classes = input('primary-button');
+        this.label = input('Edit', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('edit', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('primary-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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,7 +1107,7 @@ class EditButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: EditButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'edit-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1137,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: "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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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.1.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: "20.0.0", ngImport: i0, type: EditSolidSvgComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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 }] });
@@ -1148,11 +1148,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class EditBsButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.label = input('Edit');
-        this.classes = input('text-primary');
+        this.label = input('Edit', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.classes = input('text-primary', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditBsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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,7 +1172,7 @@ class EditBsButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: EditBsButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditBsButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'edit-bs-button', imports: [MatButtonModule, MatIconModule, EditSolidSvgComponent], template: `
 		<button
@@ -1198,12 +1198,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class EditSvgIconButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.label = input('Edit');
-        this.icon = input('edit');
-        this.classes = input('primary-button');
+        this.label = input('Edit', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('edit', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('primary-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditSvgIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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,7 +1222,7 @@ class EditSvgIconButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: EditSvgIconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditSvgIconButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'edit-svg-icon-button', imports: [MatButton, EditSolidSvgComponent], template: `
 		<button
@@ -1247,12 +1247,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class ManageButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.label = input('Manage');
-        this.icon = input('settings');
-        this.classes = input('mr-3 btn btn-secondary secondary-button');
+        this.label = input('Manage', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('settings', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('mr-3 btn btn-secondary secondary-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ManageButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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,7 +1268,7 @@ class ManageButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: ManageButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ManageButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'manage-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1290,13 +1290,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class SavePrimaryButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.loadingLabel = input('Saving...');
-        this.label = input('Save');
-        this.icon = input('save');
-        this.classes = input('btn-primary primary-button');
+        this.loadingLabel = input('Saving...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.label = input('Save', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('save', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('btn-primary primary-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SavePrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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,7 +1319,7 @@ class SavePrimaryButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: SavePrimaryButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SavePrimaryButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'save-primary-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1348,13 +1348,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class SearchButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.loadingLabel = input('Searching...');
-        this.label = input('Search');
-        this.icon = input('search');
-        this.classes = input('btn-primary primary-button');
+        this.loadingLabel = input('Searching...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.label = input('Search', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('search', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('btn-primary primary-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SearchButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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,7 +1375,7 @@ class SearchButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: SearchButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SearchButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'search-button', imports: [MatButtonModule, MatIconModule], template: `
 		<button
@@ -1402,13 +1402,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class SuccessButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.loadingLabel = input('Updating...');
-        this.label = input('Update');
-        this.icon = input('save');
-        this.classes = input('success-button');
+        this.loadingLabel = input('Updating...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.label = input('Update', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('save', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('success-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SuccessButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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,7 +1431,7 @@ class SuccessButtonComponent extends BaseButtonComponent {
 		</button>
 	`, 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: "20.0.0", ngImport: i0, type: SuccessButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SuccessButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'success-button',
@@ -1464,11 +1464,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class ViewButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.label = input('View');
-        this.icon = input('visibility');
+        this.label = input('View', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('visibility', ...(ngDevMode ? [{ debugName: "icon" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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,7 +1483,7 @@ class ViewButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: ViewButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1504,12 +1504,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class ViewPrimaryButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.label = input('View');
-        this.icon = input('visibility');
-        this.classes = input('btn-primary primary-button');
+        this.label = input('View', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('visibility', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.classes = input('btn-primary primary-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewPrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.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,7 +1527,7 @@ class ViewPrimaryButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: ViewPrimaryButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewPrimaryButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'view-primary-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1551,14 +1551,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
 class PrimaryButtonComponent extends BaseButtonComponent {
     constructor() {
         super();
-        this.loadingLabel = input('Saving...');
-        this.label = input('Save');
-        this.icon = input('save');
-        this.showIcon = input(false);
-        this.classes = input('btn-primary primary-button');
-    }
-    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: `
+        this.loadingLabel = input('Saving...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.label = input('Save', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.icon = input('save', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.showIcon = input(false, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+        this.classes = input('btn-primary primary-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PrimaryButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.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,7 +1581,7 @@ class PrimaryButtonComponent extends BaseButtonComponent {
 		</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[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: "20.0.0", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'primary-button', imports: [MatButton, MatIcon], template: `
 		<button
@@ -1608,19 +1608,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
         }], ctorParameters: () => [] });
 
 class PdfExportButtonComponent {
-    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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PdfExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.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: "20.0.0", ngImport: i0, type: PdfExportButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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: "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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ExcelExportButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.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: "20.0.0", ngImport: i0, type: ExcelExportButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ExcelExportButtonComponent, decorators: [{
             type: Component,
             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"] }]
         }] });
@@ -1641,8 +1641,8 @@ class ConfirmDialogComponent {
         // Close the dialog, return true
         this.dialogRef.close(true);
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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.1.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,7 +1658,7 @@ class ConfirmDialogComponent {
 		</div>
 	`, 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: "20.0.0", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.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">
@@ -1694,8 +1694,8 @@ class ErrorSnackBarComponent {
     close() {
         this.msb.dismissWithAction();
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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.1.0", type: ErrorSnackBarComponent, isStandalone: true, selector: "app-error-snack-bar", ngImport: i0, template: `
 		<div class="app-flex-center error-snackbar">
 			<mat-icon style="font-size:1.3rem">error</mat-icon>
 			<label>{{ data.message }}</label>
@@ -1705,7 +1705,7 @@ class ErrorSnackBarComponent {
 		</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{--mdc-snackbar-container-color: var(--success-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.success-snackbar .mdc-snackbar__surface{background-color:var(--success-color)!important;color:#fff!important}.success-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.error-snackbar{--mdc-snackbar-container-color: var(--delete-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.error-snackbar .mdc-snackbar__surface{background-color:var(--delete-color)!important;color:#fff!important}.error-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.light-success-snackbar{--mdc-snackbar-container-color: #d4edda !important;--mat-mdc-snack-bar-button-color: darkgreen !important}.light-success-snackbar .mdc-snackbar__surface{background-color:#d4edda!important;color:#155724!important}.light-success-snackbar .mat-mdc-snack-bar-action{color:#006400!important}.light-error-snackbar{--mdc-snackbar-container-color: #f8d7da !important;--mat-mdc-snack-bar-button-color: darkred !important}.light-error-snackbar .mdc-snackbar__surface{background-color:#f8d7da!important;color:#721c24!important;border:1px solid #f5c6cb}.info-snackbar{--mdc-snackbar-container-color: #0dcaf0 !important;--mat-mdc-snack-bar-button-color: white !important}.info-snackbar .mdc-snackbar__surface{background-color:#0dcaf0!important;color:#fff!important}.warning-snackbar{--mdc-snackbar-container-color: #ffc107 !important;--mat-mdc-snack-bar-button-color: #000 !important}.warning-snackbar .mdc-snackbar__surface{background-color:#ffc107!important;color:#000!important}.primary-snackbar{--mdc-snackbar-container-color: var(--primary-color) !important;--mat-mdc-snack-bar-button-color: white !important}.primary-snackbar .mdc-snackbar__surface{background-color:var(--primary-color)!important;color:#fff!important}\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: "20.0.0", ngImport: i0, type: ErrorSnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ErrorSnackBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-error-snack-bar', imports: [MatIconModule, MatButtonModule], template: `
 		<div class="app-flex-center error-snackbar">
@@ -1735,8 +1735,8 @@ class SuccessSnackBarComponent {
     close() {
         this.msb.dismissWithAction();
     }
-    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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.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.1.0", type: SuccessSnackBarComponent, isStandalone: true, selector: "app-success-snack-bar", ngImport: i0, template: `
 		<div class="app-flex-center success-snackbar">
 			<mat-icon style="font-size:1.3rem">check_circle</mat-icon>
 			<label>{{ data.message }}</label>
@@ -1746,7 +1746,7 @@ class SuccessSnackBarComponent {
 		</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{--mdc-snackbar-container-color: var(--success-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.success-snackbar .mdc-snackbar__surface{background-color:var(--success-color)!important;color:#fff!important}.success-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.error-snackbar{--mdc-snackbar-container-color: var(--delete-color) !important;--mat-mdc-snack-bar-button-color: var(--white-color) !important}.error-snackbar .mdc-snackbar__surface{background-color:var(--delete-color)!important;color:#fff!important}.error-snackbar .mat-mdc-snack-bar-action{color:var(--white-color)!important}.light-success-snackbar{--mdc-snackbar-container-color: #d4edda !important;--mat-mdc-snack-bar-button-color: darkgreen !important}.light-success-snackbar .mdc-snackbar__surface{background-color:#d4edda!important;color:#155724!important}.light-success-snackbar .mat-mdc-snack-bar-action{color:#006400!important}.light-error-snackbar{--mdc-snackbar-container-color: #f8d7da !important;--mat-mdc-snack-bar-button-color: darkred !important}.light-error-snackbar .mdc-snackbar__surface{background-color:#f8d7da!important;color:#721c24!important;border:1px solid #f5c6cb}.info-snackbar{--mdc-snackbar-container-color: #0dcaf0 !important;--mat-mdc-snack-bar-button-color: white !important}.info-snackbar .mdc-snackbar__surface{background-color:#0dcaf0!important;color:#fff!important}.warning-snackbar{--mdc-snackbar-container-color: #ffc107 !important;--mat-mdc-snack-bar-button-color: #000 !important}.warning-snackbar .mdc-snackbar__surface{background-color:#ffc107!important;color:#000!important}.primary-snackbar{--mdc-snackbar-container-color: var(--primary-color) !important;--mat-mdc-snack-bar-button-color: white !important}.primary-snackbar .mdc-snackbar__surface{background-color:var(--primary-color)!important;color:#fff!important}\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: "20.0.0", ngImport: i0, type: SuccessSnackBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SuccessSnackBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-success-snack-bar', imports: [MatButtonModule, MatIconModule], template: `
 		<div class="app-flex-center success-snackbar">
@@ -1829,10 +1829,10 @@ class MatSnackBarService {
             verticalPosition: this.verticalPosition,
         });
     }
-    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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MatSnackBarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MatSnackBarService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: MatSnackBarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MatSnackBarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1847,9 +1847,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  */
 class Store {
     constructor() {
-        this._data = signal(undefined);
+        this._data = signal(null, ...(ngDevMode ? [{ debugName: "_data" }] : []));
         // The data property is a computed property that returns the value of the _data signal
-        this.data = computed(() => this._data());
+        this.data = computed(() => this._data(), ...(ngDevMode ? [{ debugName: "data" }] : []));
+    }
+    // Add initialization method
+    initialize(initialData) {
+        this._data.set(initialData);
     }
     /**
      * Update the data in the store with the new data
@@ -1862,10 +1866,18 @@ class Store {
     update(newData) {
         this._data.set(newData);
     }
-    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' }); }
+    // Add clear method
+    clear() {
+        this._data.set(null);
+    }
+    // Add getter with null check
+    getData() {
+        return this._data();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: Store, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: Store, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: Store, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: Store, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -1880,9 +1892,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImpor
  */
 class EntityStore {
     constructor() {
-        this._data = signal([]);
+        this._data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
         // The data property is a computed property that returns the value of the _data signal
-        this.data = computed(() => this._data());
+        this.data = computed(() => this._data(), ...(ngDevMode ? [{ debugName: "data" }] : []));
     }
     /**
      * Find an item in the store by id
@@ -1949,10 +1961,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: "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' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EntityStore, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EntityStore, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: EntityStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EntityStore, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',