@js-smart/ng-kit 20.6.2-beta.1 → 20.6.3

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

@@ -0,0 +1,2443 @@
+import * as i0 from '@angular/core';
+import { inject, ChangeDetectorRef, input, signal, output, effect, Component, Pipe, Injectable, HostListener, ViewChild, forwardRef, Input, Optional, DOCUMENT, Directive, ElementRef, ViewContainerRef, Inject, computed } from '@angular/core';
+import { trigger, state, transition, style, animate } from '@angular/animations';
+import { BehaviorSubject, Subject, throttleTime } from 'rxjs';
+import { filter, takeUntil, startWith, map } from 'rxjs/operators';
+import * as i1 from '@angular/platform-browser';
+import * as i1$1 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { AsyncPipe } from '@angular/common';
+import * as i1$2 from '@angular/forms';
+import { FormControl, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i3 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i1$3 from '@angular/material/button';
+import { MatButtonModule, MatAnchor, MatButton } from '@angular/material/button';
+import * as i2 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i1$4 from '@angular/material/icon';
+import { MatIconModule, MatIcon } from '@angular/material/icon';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1$5 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i3$1 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i1$6 from '@angular/material/snack-bar';
+import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material/snack-bar';
+
+/**
+ * Boostrap Alert component that can be used to alert messages to the user
+ *
+ * @author Pavan Kumar Jadda
+ * @since 12.0.0
+ */
+class AlertComponent {
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
+        /**
+         * Type of the BootStrap Alert. Following values are supported. See BootStrap docs for more information
+         */
+        this.type = input('info', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /**
+         *  Is alert visible or open
+         */
+        this.isOpen = input(true, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        /**
+         *  Writable signal for isOpen
+         */
+        this.open = signal(this.isOpen(), ...(ngDevMode ? [{ debugName: "open" }] : []));
+        /**
+         * If set, displays an inline “Close” button
+         */
+        this.dismissible = input(true, ...(ngDevMode ? [{ debugName: "dismissible" }] : []));
+        /**
+         * If set, dismisses the alert after Dismiss Timeout
+         */
+        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, ...(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('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+        /**
+         * Emits when the alert is closed.
+         */
+        this.closed = output();
+        // React to isOpen input changes
+        effect(() => {
+            this.open.set(this.isOpen());
+        });
+    }
+    /**
+     * Initialize the component and settings
+     *
+     * @author Pavan Kumar Jadda
+     * @since 12.0.0
+     */
+    ngOnInit() {
+        this.openAlert();
+        if (this.dismissOnTimeout()) {
+            setTimeout(() => {
+                this.closeAlert();
+                this.cdr.markForCheck();
+            }, this.dismissTimeout());
+        }
+    }
+    /**
+     * Closes BootStrap Alert if not open
+     *
+     * @author Pavan Kumar Jadda
+     * @since 12.0.0
+     */
+    closeAlert() {
+        if (!this.isOpen()) {
+            return;
+        }
+        this.open.set(false);
+        this.closed.emit();
+    }
+    /**
+     * Opens Bootstrap Alert
+     *
+     * @author Pavan Kumar Jadda
+     * @since 12.0.0
+     */
+    openAlert() {
+        this.open.set(true);
+    }
+    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.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: () => [] });
+
+const LOADERS = {
+    'ball-clip-rotate': 1,
+};
+const DEFAULTS = {
+    BD_COLOR: 'rgba(51,51,51,0.8)',
+    SPINNER_COLOR: '#fff',
+    SPINNER_TYPE: 'ball-clip-rotate',
+    Z_INDEX: 99999,
+};
+const PRIMARY_SPINNER = 'primary';
+class NgxSpinner {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
+class SafeHtmlPipe {
+    constructor(_sanitizer) {
+        this._sanitizer = _sanitizer;
+    }
+    transform(v) {
+        if (v) {
+            return this._sanitizer.bypassSecurityTrustHtml(v);
+        }
+        return undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1.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.1.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeHtml',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }] });
+
+class NgxSpinnerService {
+    constructor() {
+        /**
+         * Spinner observable
+         *
+         * @memberof NgxSpinnerService
+         */
+        // private spinnerObservable = new ReplaySubject<NgxSpinner>(1);
+        this.spinnerObservable = new BehaviorSubject(undefined);
+    }
+    /**
+     * Creates an instance of NgxSpinnerService.
+     * @memberof NgxSpinnerService
+     */
+    /**
+     * Get subscription of desired spinner
+     * @memberof NgxSpinnerService
+     **/
+    getSpinner(name) {
+        // @ts-ignore
+        return this.spinnerObservable.asObservable().pipe(filter((x) => x?.name === name));
+    }
+    /**
+     * To show spinner
+     *
+     * @memberof NgxSpinnerService
+     */
+    show(name = PRIMARY_SPINNER, spinner) {
+        return new Promise((resolve, _reject) => {
+            setTimeout(() => {
+                if (spinner && Object.keys(spinner).length) {
+                    // @ts-ignore
+                    spinner['name'] = name;
+                    this.spinnerObservable.next(new NgxSpinner({ ...spinner, show: true }));
+                    resolve(true);
+                }
+                else {
+                    this.spinnerObservable.next(new NgxSpinner({ name, show: true }));
+                    resolve(true);
+                }
+            }, 10);
+        });
+    }
+    /**
+     * To hide spinner
+     *
+     * @memberof NgxSpinnerService
+     */
+    hide(name = PRIMARY_SPINNER, debounce = 10) {
+        return new Promise((resolve, _reject) => {
+            setTimeout(() => {
+                this.spinnerObservable.next(new NgxSpinner({ name, show: false }));
+                resolve(true);
+            }, debounce);
+        });
+    }
+    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.1.0", ngImport: i0, type: NgxSpinnerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class NgxSpinnerComponent {
+    /**
+     * Creates an instance of NgxSpinnerComponent.
+     */
+    constructor(spinnerService, changeDetector) {
+        this.spinnerService = spinnerService;
+        this.changeDetector = changeDetector;
+        /**
+         * To set backdrop color
+         * Only supports RGBA color format
+         */
+        this.bdColor = input(DEFAULTS.BD_COLOR, ...(ngDevMode ? [{ debugName: "bdColor" }] : []));
+        /**
+         * To set spinner size
+         */
+        this.size = input('large', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        /**
+         * To set spinner color(DEFAULTS.SPINNER_COLOR)
+         */
+        this.color = input(DEFAULTS.SPINNER_COLOR, ...(ngDevMode ? [{ debugName: "color" }] : []));
+        /**
+         * To set type of spinner
+         */
+        this.type = input(DEFAULTS.SPINNER_TYPE, ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /**
+         * To toggle fullscreen mode
+         */
+        this.fullScreen = input(true, ...(ngDevMode ? [{ debugName: "fullScreen" }] : []));
+        /**
+         * Spinner name
+         */
+        this.name = input(PRIMARY_SPINNER, ...(ngDevMode ? [{ debugName: "name" }] : []));
+        /**
+         * z-index value
+         */
+        this.zIndex = input(DEFAULTS.Z_INDEX, ...(ngDevMode ? [{ debugName: "zIndex" }] : []));
+        /**
+         * Custom template for spinner/loader
+         */
+        this.template = input('', ...(ngDevMode ? [{ debugName: "template" }] : []));
+        /**
+         * Show/Hide the spinner
+         */
+        this.showSpinner = input(false, ...(ngDevMode ? [{ debugName: "showSpinner" }] : []));
+        /**
+         * To enable/disable animation
+         */
+        this.disableAnimation = input(false, ...(ngDevMode ? [{ debugName: "disableAnimation" }] : []));
+        /**
+         * Spinner Object
+         */
+        this.spinner = new NgxSpinner();
+        /**
+         * Array for spinner's div
+         */
+        this.divArray = [];
+        /**
+         * Counter for div
+         */
+        this.divCount = 0;
+        /**
+         * Show spinner
+         **/
+        this.show = false;
+        /**
+         * Unsubscribe from spinner's observable
+         **/
+        this.ngUnsubscribe = new Subject();
+        /**
+         * To set default ngx-spinner options
+         */
+        this.setDefaultOptions = () => {
+            this.spinner = new NgxSpinner({
+                name: this.name(),
+                bdColor: this.bdColor(),
+                size: this.size(),
+                color: this.color(),
+                type: this.type(),
+                fullScreen: this.fullScreen(),
+                divArray: this.divArray,
+                divCount: this.divCount,
+                show: this.show,
+                zIndex: this.zIndex(),
+                template: this.template(),
+                showSpinner: this.showSpinner(),
+            });
+        };
+    }
+    handleKeyboardEvent(event) {
+        if (this.spinnerDOM?.nativeElement) {
+            event.returnValue = false;
+            event.preventDefault();
+        }
+    }
+    /**
+     * Initialization method
+     */
+    ngOnInit() {
+        this.setDefaultOptions();
+        this.spinnerService
+            .getSpinner(this.name())
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe((spinner) => {
+            this.setDefaultOptions();
+            Object.assign(this.spinner, spinner);
+            if (spinner.show) {
+                this.onInputChange();
+            }
+            this.changeDetector.detectChanges();
+        });
+    }
+    /**
+     * To get class for spinner
+     */
+    getClass(type, size) {
+        // @ts-ignore
+        this.spinner.divCount = LOADERS[type];
+        this.spinner.divArray = Array(this.spinner.divCount)
+            .fill(0)
+            .map((_x, i) => i);
+        let sizeClass = '';
+        switch (size.toLowerCase()) {
+            case 'small':
+                sizeClass = 'la-sm';
+                break;
+            case 'medium':
+                sizeClass = 'la-2x';
+                break;
+            case 'large':
+                sizeClass = 'la-3x';
+                break;
+            default:
+                break;
+        }
+        return 'la-' + type + ' ' + sizeClass;
+    }
+    /**
+     * Check if input variables have changed
+     */
+    onInputChange() {
+        this.spinner.class = this.getClass(this.spinner.type ?? DEFAULTS.SPINNER_TYPE, this.spinner.size ?? 'default');
+    }
+    /**
+     * Component destroy event
+     */
+    ngOnDestroy() {
+        this.ngUnsubscribe.next();
+        this.ngUnsubscribe.complete();
+    }
+    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)]),
+                transition(':leave', animate(200, style({ opacity: 0 }))),
+            ]),
+        ] }); }
+}
+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', [
+                            state('in', style({ opacity: 1 })),
+                            transition(':enter', [style({ opacity: 0 }), animate(300)]),
+                            transition(':leave', animate(200, style({ opacity: 0 }))),
+                        ]),
+                    ], template: "@if (spinner.show) {\n\t<div\n\t\t#overlay\n\t\t[@.disabled]=\"disableAnimation()\"\n\t\t[@fadeIn]=\"'in'\"\n\t\t[style.background-color]=\"spinner.bdColor\"\n\t\t[style.position]=\"spinner.fullScreen ? 'fixed' : 'absolute'\"\n\t\t[style.z-index]=\"spinner.zIndex\"\n\t\tclass=\"ngx-spinner-overlay\">\n\t\t@if (spinner.show) {\n\t\t\t<div [class]=\"spinner.class\" [style.color]=\"spinner.color\">\n\t\t\t\t@for (index of spinner.divArray; track index) {\n\t\t\t\t\t<div></div>\n\t\t\t\t}\n\t\t\t</div>\n\t\t}\n\t\t@if (template()) {\n\t\t\t<div [innerHTML]=\"template() | safeHtml\"></div>\n\t\t}\n\t\t<div [style.z-index]=\"spinner.zIndex\" class=\"loading-text\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t</div>\n}\n", styles: [".la-ball-clip-rotate,.la-ball-clip-rotate>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-clip-rotate{display:block;font-size:0;color:#fff}.la-ball-clip-rotate.la-dark{color:#333}.la-ball-clip-rotate>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-clip-rotate{width:32px;height:32px}.la-ball-clip-rotate>div{width:32px;height:32px;background:transparent;border-width:2px;border-bottom-color:transparent;border-radius:100%;-webkit-animation:ball-clip-rotate .75s linear infinite;-moz-animation:ball-clip-rotate .75s linear infinite;-o-animation:ball-clip-rotate .75s linear infinite;animation:ball-clip-rotate .75s linear infinite}.la-ball-clip-rotate.la-sm{width:16px;height:16px}.la-ball-clip-rotate.la-sm>div{width:16px;height:16px;border-width:1px}.la-ball-clip-rotate.la-2x{width:64px;height:64px}.la-ball-clip-rotate.la-2x>div{width:64px;height:64px;border-width:4px}.la-ball-clip-rotate.la-3x{width:96px;height:96px}.la-ball-clip-rotate.la-3x>div{width:96px;height:96px;border-width:6px}@-webkit-keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes ball-clip-rotate{0%{-moz-transform:rotate(0deg);transform:rotate(0)}50%{-moz-transform:rotate(180deg);transform:rotate(180deg)}to{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes ball-clip-rotate{0%{-o-transform:rotate(0deg);transform:rotate(0)}50%{-o-transform:rotate(180deg);transform:rotate(180deg)}to{-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes ball-clip-rotate{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}.ngx-spinner-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ngx-spinner-overlay>div:not(.loading-text){top:50%;left:50%;margin:0;position:absolute;transform:translate(-50%,-50%)}.loading-text{position:absolute;top:60%;left:50%;transform:translate(-50%,-60%)}\n/*!\n * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)\n * Copyright 2015 Daniel Cardoso <@DanielCardoso>\n * Licensed under MIT\n */\n"] }]
+        }], ctorParameters: () => [{ type: NgxSpinnerService }, { type: i0.ChangeDetectorRef }], propDecorators: { spinnerDOM: [{
+                type: ViewChild,
+                args: ['overlay']
+            }], handleKeyboardEvent: [{
+                type: HostListener,
+                args: ['document:keydown', ['$event']]
+            }] } });
+
+class SpinnerComponent {
+    constructor() {
+        /**
+         *  Use Boostrap Spinner. Default `true`
+         */
+        this.bootstrapSpinner = input(true, ...(ngDevMode ? [{ debugName: "bootstrapSpinner" }] : []));
+        /**
+         * Diameter of the Angular Material spinner
+         */
+        this.diameter = input(50, ...(ngDevMode ? [{ debugName: "diameter" }] : []));
+        /**
+         *  Color of the Angular Material spinner
+         */
+        this.color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        /**
+         *  Stroke Width of the Angular Material spinner
+         */
+        this.strokeWidth = input(5, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
+    }
+    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$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+}
+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"] }]
+        }] });
+
+/**
+ * Reusable Auto Complete component that extends MatAutoComplete to show Clear icon and Arrow buttons
+ *
+ * @author Pavan Kumar Jadda
+ * @since 12.0.0
+ */
+class AutocompleteComponent {
+    constructor() {
+        this.cdRef = inject(ChangeDetectorRef);
+        /**
+         * Internal form control for the autocomplete
+         */
+        this.control = new FormControl('');
+        /**
+         * Label of the AutoComplete
+         */
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * Placeholder of the AutoComplete
+         */
+        this.placeHolder = input('', ...(ngDevMode ? [{ debugName: "placeHolder" }] : []));
+        /**
+         * Appearance of the AutoComplete, defaults to `fill`
+         */
+        this.appearance = input('fill', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+        /**
+         * List of CSS classes that need to applied to autocomplete
+         */
+        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('', ...(ngDevMode ? [{ debugName: "bindLabel" }] : []));
+        /**
+         * Attribute of the Object whose value would be used for search
+         */
+        this.bindValue = input('id', ...(ngDevMode ? [{ debugName: "bindValue" }] : []));
+        /**
+         * Function that maps an option's control value to its display value in the trigger.
+         */
+        this.displayWith = null;
+        /**
+         * Specifies if the autocomplete is required. Default is not required.
+         */
+        this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+        /**
+         * Specifies if the autocomplete is disabled. Default is not required.
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * List of Objects that need to be bind and searched for
+         */
+        this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
+        /**
+         * Emit selected value on selection changes
+         */
+        this.onSelectionChange = output();
+        /**
+         * BehaviorSubject that shows the current active arrow icon
+         */
+        this.arrowIconSubject = new BehaviorSubject('arrow_drop_down');
+        // ControlValueAccessor implementation
+        this.onChange = () => { };
+        this.onTouched = () => { };
+    }
+    writeValue(value) {
+        this.control.setValue(value, { emitEvent: false });
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+        // Forward value changes from internal control to parent form
+        this.control.valueChanges.subscribe((value) => fn(value));
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.control.disable();
+        }
+        else {
+            this.control.enable();
+        }
+    }
+    ngAfterContentChecked() {
+        this.cdRef.detectChanges();
+    }
+    ngOnInit() {
+        this.filteredOptions = this.control.valueChanges.pipe(startWith(''), map((value) => (typeof value === 'string' ? value : value !== null ? value[this.bindLabel()] : '')), map((propertyName) => this.data()?.filter((option) => {
+            return typeof option === 'string'
+                ? option?.toLowerCase().startsWith(propertyName.toLowerCase())
+                : option[this.bindLabel()]?.toLowerCase().indexOf(propertyName.toLowerCase()) === 0;
+        }) ?? this.data()?.slice()));
+    }
+    ngOnChanges(_changes) {
+        this.displayFn = this.displayFn.bind(this);
+    }
+    clearInput(evt) {
+        evt.stopPropagation();
+        this.control.reset();
+        this.onChange(null);
+        this.inputAutoComplete?.nativeElement.focus();
+    }
+    openOrClosePanel(evt, trigger) {
+        evt.stopPropagation();
+        if (trigger.panelOpen) {
+            trigger.closePanel();
+        }
+        else {
+            trigger.openPanel();
+        }
+    }
+    displayFn(object) {
+        if (this.displayWith !== undefined && this.displayWith !== null && typeof this.displayWith === 'function') {
+            this.displayFn = this.displayWith.bind(this);
+            return this.displayWith(object);
+        }
+        else {
+            if (typeof object === 'string') {
+                return object;
+            }
+            return object?.[this.bindLabel()] ? object[this.bindLabel()] : '';
+        }
+    }
+    emitSelectedValue($event) {
+        this.onSelectionChange.emit($event.source.value);
+        this.onChange($event.source.value);
+        this.onTouched();
+    }
+    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),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputAutoComplete", first: true, predicate: ["inputAutoComplete"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'autocomplete, lib-autocomplete', imports: [ReactiveFormsModule, MatFormFieldModule, MatAutocompleteModule, MatInputModule, MatButtonModule, MatIconModule, AsyncPipe], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => AutocompleteComponent),
+                            multi: true,
+                        },
+                    ], template: "<div>\n\t<mat-form-field appearance=\"fill\" class=\"{{ classes() }}\">\n\t\t<mat-label>{{ label() }}</mat-label>\n\t\t<input\n\t\t\t#inputAutoComplete\n\t\t\t#trigger=\"matAutocompleteTrigger\"\n\t\t\t[formControl]=\"control\"\n\t\t\t[matAutocomplete]=\"auto\"\n\t\t\t[placeholder]=\"placeHolder()\"\n\t\t\t[required]=\"required()\"\n\t\t\tmatInput\n\t\t\ttype=\"text\" />\n\n\t\t<div matSuffix style=\"display: flex\">\n\t\t\t@if (control.value) {\n\t\t\t\t<button (click)=\"clearInput($event)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t\t<mat-icon>clear</mat-icon>\n\t\t\t\t</button>\n\t\t\t}\n\t\t\t<button (click)=\"openOrClosePanel($event, trigger)\" aria-label=\"Clear\" mat-icon-button type=\"button\">\n\t\t\t\t<mat-icon>{{ arrowIconSubject.getValue() }}</mat-icon>\n\t\t\t</button>\n\t\t</div>\n\n\t\t<mat-autocomplete\n\t\t\t#auto=\"matAutocomplete\"\n\t\t\t(closed)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t(opened)=\"arrowIconSubject.next('arrow_drop_up')\"\n\t\t\t(optionSelected)=\"arrowIconSubject.next('arrow_drop_down')\"\n\t\t\t[displayWith]=\"displayFn\">\n\t\t\t@for (option of filteredOptions | async; track option[bindValue()]) {\n\t\t\t\t<mat-option (onSelectionChange)=\"emitSelectedValue($event)\" [value]=\"option\">\n\t\t\t\t\t@if (typeof option === 'string') {\n\t\t\t\t\t\t<ng-container>{{ option }}</ng-container>\n\t\t\t\t\t} @else if (typeof option === 'object') {\n\t\t\t\t\t\t<ng-container>{{ option[bindLabel()] }}</ng-container>\n\t\t\t\t\t}\n\t\t\t\t</mat-option>\n\t\t\t}\n\t\t</mat-autocomplete>\n\t</mat-form-field>\n</div>\n" }]
+        }], propDecorators: { inputAutoComplete: [{
+                type: ViewChild,
+                args: ['inputAutoComplete']
+            }], displayWith: [{
+                type: Input
+            }, {
+                type: Optional
+            }] } });
+
+class PrintOptions {
+    constructor(options) {
+        this.printSectionId = '';
+        this.printTitle = '';
+        this.useExistingCss = false;
+        this.bodyClass = '';
+        this.openNewTab = false;
+        this.previewOnly = false;
+        this.closeWindow = true;
+        this.printDelay = 0;
+        if (options) {
+            Object.assign(this, options);
+        }
+    }
+}
+
+/**
+ * Reusable Angular directory that prints given contents of HTML element
+ *
+ * @since 12.0.0
+ * @author Pavan Kumar Jadda
+ */
+class NgxPrintDirective {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        /**
+         * If `true`, uses CSS of HTMl element, otherwise no CSS applied
+         *
+         * @since 12.0.0
+         * @author Pavan Kumar Jadda
+         */
+        this.useExistingCss = false;
+        /**
+         * A delay in milliseconds to force the print dialog to wait before opened. Default: 0
+         *
+         * @since 12.0.0
+         * @author Pavan Kumar Jadda
+         */
+        this.printDelay = 0;
+        /**
+         * ID of the Mat Paginator
+         *
+         * @since 12.0.0
+         * @author Pavan Kumar Jadda
+         */
+        this.paginatorId = '';
+        /**
+         * HTML tag ID of the Mat-Table Input Filter
+         *
+         * @since 12.0.0
+         * @author Pavan Kumar Jadda
+         */
+        this.inputFilterId = '';
+        /**
+         * If `true`, referenced table is Mat-Table
+         *
+         * @since 12.0.0
+         * @author Pavan Kumar Jadda
+         */
+        this.isMatTable = false;
+        /**
+         * If `true` Mat-Table paginator will be hidden
+         *
+         * @since 12.0.0
+         * @author Pavan Kumar Jadda
+         */
+        this.hideMatTablePaginator = false;
+        this.printStyleArray = [];
+        this.printOptions = new PrintOptions();
+        /**
+         * List of Style sheet files
+         *
+         * @since 12.0.0
+         * @author Pavan Kumar Jadda
+         */
+        this.styleSheetFileArray = '';
+    }
+    /**
+     * Prevents the print dialog from opening on the window
+     *
+     * @memberof NgxPrintDirective
+     */
+    set previewOnly(value) {
+        this.printOptions = { ...this.printOptions, previewOnly: value };
+    }
+    /**
+     * List of CSS properties that needs to be applied while printing the document
+     *
+     * @since 12.0.0
+     * @author Pavan Kumar Jadda
+     */
+    set printStyle({ values }) {
+        for (const key in values) {
+            if (Object.prototype.hasOwnProperty.call(values, key)) {
+                this.printStyleArray.push((key + JSON.stringify(values[key])).replace(/['"]+/g, ''));
+            }
+        }
+        this.returnStyleValues();
+    }
+    /**
+     * Sets given style sheet files to print document
+     *
+     * @param cssList Comma separated value of CSS file names
+     *
+     * @since 12.0.0
+     * @author Pavan Kumar Jadda
+     */
+    set styleSheetFile(cssList) {
+        if (cssList.indexOf(',') !== -1) {
+            const cssFileArray = cssList.split(',');
+            for (const cssFileName of cssFileArray) {
+                this.styleSheetFileArray = this.styleSheetFileArray + NgxPrintDirective.linkTagFn(cssFileName);
+            }
+        }
+        else {
+            this.styleSheetFileArray = NgxPrintDirective.linkTagFn(cssList);
+        }
+    }
+    /**
+     * Build link HTMl tag based on given file name
+     *
+     * @since 12.0.0
+     * @author Pavan Kumar Jadda
+     */
+    static linkTagFn(cssFileName) {
+        return `<link rel="stylesheet" type="text/css" href="${cssFileName}">`;
+    }
+    /**
+     * Gets HTML element by tag name
+     *
+     * @since 12.0.0
+     * @author Pavan Kumar Jadda
+     */
+    static getElementTag(tag) {
+        const html = [];
+        const elements = document.getElementsByTagName(tag);
+        // @ts-ignore
+        for (const element of elements) {
+            html.push(element.outerHTML);
+        }
+        return html.join('\r\n');
+    }
+    /**
+     * Print the element upon clicking the button
+     *
+     * @since 12.0.0
+     * @author Pavan Kumar Jadda
+     */
+    print() {
+        //Hide paginator for Material table
+        if (this.isMatTable && this.hideMatTablePaginator && this.matTableDataSource) {
+            this.matTableDataSource.paginator = null;
+        }
+        setTimeout(() => {
+            if (this.isMatTable) {
+                this.hideMatPaginatorBeforePrinting();
+            }
+            // Do something after
+            let printContents;
+            let popupWin;
+            let styles = '';
+            let links = '';
+            if (this.useExistingCss) {
+                styles = NgxPrintDirective.getElementTag('style');
+                links = NgxPrintDirective.getElementTag('link');
+            }
+            if (this.printSectionId) {
+                printContents = this.document.getElementById(this.printSectionId)?.innerHTML;
+                popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
+                popupWin?.document.open();
+                popupWin?.document.write(`
+      <html lang="en-us">
+        <head>
+          <title>${this.printTitle ? this.printTitle : ''}</title>
+          ${this.returnStyleValues()}
+          ${this.styleSheetFileArray}
+          ${styles}
+          ${links}
+        </head>
+        <body>
+          ${printContents}
+          <script defer>
+            function triggerPrint() {
+              window.removeEventListener('load', triggerPrint, false);
+              setTimeout(() => {
+                window.print();
+                setTimeout(function() { window.close(); }, 0);
+              }, ${this.printDelay});
+            }
+            window.addEventListener('load', triggerPrint, false);
+          </script>
+        </body>
+      </html>`);
+                popupWin?.document.close();
+                //Revert back the mat-paginator after printing
+                if (this.isMatTable) {
+                    this.showMatPaginatorAfterPrinting();
+                }
+            }
+        }, 1000); //1 second timeout to hide paginator
+    }
+    /**
+     * Hide Mat Paginator before Printing
+     *
+     * @since 12.0.1
+     * @author Pavan Kumar Jadda
+     */
+    hideMatPaginatorBeforePrinting() {
+        // @ts-ignore
+        this.document.getElementById(this.paginatorId).style.display = 'none';
+        if (this.document.getElementById(this.inputFilterId) != null) {
+            // @ts-ignore
+            this.document.getElementById(this.inputFilterId).style.display = 'none';
+        }
+    }
+    /**
+     * Show Mat Paginator after Printing
+     *
+     * @since 12.0.1
+     * @author Pavan Kumar Jadda
+     */
+    showMatPaginatorAfterPrinting() {
+        this.matTableDataSource.paginator = this.paginator;
+        // @ts-ignore
+        this.document.getElementById(this.paginatorId).style.display = 'block';
+        if (this.document.getElementById(this.inputFilterId) != null) {
+            // @ts-ignore
+            this.document.getElementById(this.inputFilterId).style.display = 'block';
+        }
+    }
+    /**
+     * @returns the string that create the stylesheet which will be injected later within <style></style> tag. Join/replace to transform an array objects to css-styled string
+     *
+     * @since 12.0.0
+     * @author Pavan Kumar Jadda
+     */
+    returnStyleValues() {
+        return `<style> ${this.printStyleArray.join(' ').replace(/,/g, ';')} </style>`;
+    }
+    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.1.0", ngImport: i0, type: NgxPrintDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ngxPrint], button[print]',
+                    standalone: true,
+                }]
+        }], propDecorators: { printSectionId: [{
+                type: Input
+            }], printTitle: [{
+                type: Input
+            }], useExistingCss: [{
+                type: Input
+            }], printDelay: [{
+                type: Input
+            }], matTableDataSource: [{
+                type: Input
+            }], paginator: [{
+                type: Input
+            }], paginatorId: [{
+                type: Input
+            }], inputFilterId: [{
+                type: Input
+            }], isMatTable: [{
+                type: Input
+            }], hideMatTablePaginator: [{
+                type: Input
+            }], previewOnly: [{
+                type: Input
+            }], printStyle: [{
+                type: Input
+            }], styleSheetFile: [{
+                type: Input
+            }], print: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class PreventMultipleClicksDirective {
+    constructor() {
+        this.throttleTime = input(2000, ...(ngDevMode ? [{ debugName: "throttleTime" }] : []));
+        this.throttleClick = output();
+        this.clicks = new Subject();
+    }
+    /**
+     * Intercepts click event and stops default navigation. After first click set {@link throttleTime} to 2000 to prevent duplicate clicks
+     *
+     * @param event DOM event
+     *
+     * @author Pavan Kumar Jadda
+     * @since 2.3.27
+     */
+    clickEvent(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.clicks.next(event);
+    }
+    ngOnInit() {
+        this.subscription = this.clicks.pipe(throttleTime(this.throttleTime())).subscribe((e) => this.throttleClick.emit(e));
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+    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.1.0", ngImport: i0, type: PreventMultipleClicksDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[preventMultipleClicks]',
+                    standalone: true,
+                }]
+        }], propDecorators: { clickEvent: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }] } });
+
+class BaseButtonDirective {
+    constructor() {
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.loadingLabel = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.elementRef = inject(ElementRef);
+        this.document = inject(DOCUMENT);
+        this.originalText = signal('', ...(ngDevMode ? [{ debugName: "originalText" }] : []));
+        this.iconSpan = signal(null, ...(ngDevMode ? [{ debugName: "iconSpan" }] : []));
+        this.elementRef.nativeElement.classList.add('btn');
+        effect(() => {
+            this.updateContent();
+        });
+    }
+    ngOnInit() {
+        // Capture original text before creating icon
+        this.originalText.set(this.elementRef.nativeElement.textContent?.trim() || 'Button');
+        // Create icon after capturing text
+        this.createIcon();
+    }
+    /**
+     * Create icon element if icon name is provided
+     */
+    createIcon() {
+        if (this.icon()) {
+            const iconElement = this.document.createElement('mat-icon');
+            iconElement.classList.add('mat-icon', 'material-icons', 'pe-2');
+            iconElement.textContent = this.icon();
+            this.iconSpan.set(iconElement);
+        }
+    }
+    /**
+     * Update content of the button
+     */
+    updateContent() {
+        const element = this.elementRef.nativeElement;
+        element.innerHTML = '';
+        if (this.loading()) {
+            this.showLoadingState(element);
+        }
+        else {
+            this.showNormalState(element);
+        }
+    }
+    /**
+     * Show loading state. Add spinner and loadingLabel text
+     */
+    showLoadingState(element) {
+        // Create a new span element
+        const newSpan = this.document.createElement('span');
+        // Set its text content
+        newSpan.classList.add('spinner-border', 'spinner-border-sm', 'me-2');
+        newSpan.setAttribute('role', 'status');
+        // Append the new element to the host element
+        element.appendChild(newSpan);
+        element.appendChild(this.document.createTextNode(this.loadingLabel()));
+        element.setAttribute('disabled', 'true');
+    }
+    /**
+     * Show normal state. Add icon and original text
+     */
+    showNormalState(element) {
+        // Add icon and original text
+        const iconElement = this.iconSpan();
+        if (iconElement) {
+            element.appendChild(iconElement);
+        }
+        // Append text node instead of setting textContent (which overwrites the icon)
+        element.appendChild(this.document.createTextNode(this.originalText()));
+        element.removeAttribute('disabled');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BaseButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: BaseButtonDirective, isStandalone: true, inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BaseButtonDirective, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+class BaseButtonComponent {
+    constructor() {
+        /**
+         *  Is search in progress and loading the data
+         */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading", transform: (value) => value ?? false }] : [{ transform: (value) => value ?? false }]));
+        /**
+         *  Is button disabled
+         */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        /**
+         * Type of the button. Following values are supported. See BootStrap docs for more information
+         * <pre>
+         *   1. button
+         *   2. submit
+         * </pre>
+         */
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
+        /**
+         * If set, shows when action in Progress
+         */
+        this.loadingLabel = input('Saving...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        /**
+         * If set, shows when Delete is not in progress
+         */
+        this.label = input('Save', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        /**
+         * If set, shows the icon. Otherwise, shows delete icon
+         */
+        this.icon = input('save', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        /**
+         * If set, shows material icon otherwise hides the icons
+         */
+        this.showIcon = input(true, ...(ngDevMode ? [{ debugName: "showIcon" }] : []));
+        /**
+         * If set, sets the style of the button
+         */
+        this.style = input(...(ngDevMode ? [undefined, { debugName: "style" }] : []));
+        /**
+         * If set, sets the class of the button
+         */
+        this.classes = input('btn', ...(ngDevMode ? [{ debugName: "classes" }] : []));
+        /**
+         * If set, sets the data-cy attribute for the button
+         */
+        this.dataCy = input('save-button', ...(ngDevMode ? [{ debugName: "dataCy" }] : []));
+        /**
+         *  Output event when button is clicked
+         */
+        this.onClick = output();
+        /**
+         *  Output event when button is focused
+         */
+        this.onFocus = output();
+        /**
+         * Output event when button is blurred
+         */
+        this.onBlur = output();
+        /**
+         *  Output event when key is pressed
+         */
+        this.onKeyDown = output();
+        /**
+         *  Output event when key is up
+         */
+        this.onKeyUp = output();
+    }
+    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.1.0", ngImport: i0, type: BaseButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    template: ``,
+                }]
+        }] });
+
+class BsLinkButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'bs-link-button'"
+			mat-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</a>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAnchor, selector: "    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.1.0", ngImport: i0, type: BsLinkButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'bs-link-button', imports: [MatIcon, MatAnchor], template: `
+		<a
+			type="{{ type() }}"
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'bs-link-button'"
+			mat-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</a>
+	`, 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"] }]
+        }], ctorParameters: () => [] });
+
+class BsLinkButtonDirective {
+    constructor() {
+        this.icon = input('search', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.elementRef = inject(ElementRef);
+        this.document = inject(DOCUMENT);
+        this.elementRef.nativeElement.classList.add('btn', 'text-primary');
+        effect(() => {
+            this.updateContent();
+        });
+    }
+    updateContent() {
+        // if icon present, add material-icons class and set text content
+        if (this.icon()) {
+            const iconSpan = this.document.createElement('span');
+            iconSpan.classList.add('material-icons', 'pe-2');
+            iconSpan.textContent = this.icon();
+            this.elementRef.nativeElement.appendChild(iconSpan);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BsLinkButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: BsLinkButtonDirective, isStandalone: true, selector: "[bsLinkButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BsLinkButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[bsLinkButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class CloseButtonDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.elementRef.nativeElement.classList.add('secondary-button');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CloseButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.0", type: CloseButtonDirective, isStandalone: true, selector: "[closeButton]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CloseButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[closeButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class DeleteButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'delete-button'">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[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.1.0", ngImport: i0, type: DeleteButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'delete-button', imports: [MatButtonModule, MatIconModule], template: `
+		<button
+			mat-raised-button
+			class="btn {{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'delete-button'">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class DeleteButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        this.icon = input('delete', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.loadingLabel = input('Deleting...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.elementRef.nativeElement.classList.add('delete-button');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: DeleteButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: DeleteButtonDirective, isStandalone: true, selector: "[deleteButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: DeleteButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[deleteButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+const EDIT_ICON = `
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
+  <path d="M490.3 40.4C512.2 62.27 512.2 97.73 490.3 119.6L460.3 149.7L362.3 51.72L392.4 21.66C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7L339.7 74.34L437.7 172.3L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2L159.6 382.8C150.1 385.6 141.5 383.4 135 376.1C128.6 370.5 126.4 361 129.2 352.4L158.8 263.6C161.6 255.3 166.2 247.8 172.4 241.7V241.7zM192 63.1C209.7 63.1 224 78.33 224 95.1C224 113.7 209.7 127.1 192 127.1H96C78.33 127.1 64 142.3 64 159.1V416C64 433.7 78.33 448 96 448H352C369.7 448 384 433.7 384 416V319.1C384 302.3 398.3 287.1 416 287.1C433.7 287.1 448 302.3 448 319.1V416C448 469 405 512 352 512H96C42.98 512 0 469 0 416V159.1C0 106.1 42.98 63.1 96 63.1H192z"/>
+</svg>
+`;
+class EditSolidSvgComponent {
+    constructor(iconRegistry, sanitizer) {
+        iconRegistry.addSvgIconLiteral('edit-solid', sanitizer.bypassSecurityTrustHtml(EDIT_ICON));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditSolidSvgComponent, deps: [{ token: i1$4.MatIconRegistry }, { token: i1.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" class="pe-2 align-bottom"></mat-icon> `, isInline: true, 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.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" class="pe-2 align-bottom"></mat-icon> `,
+                }]
+        }], ctorParameters: () => [{ type: i1$4.MatIconRegistry }, { type: i1.DomSanitizer }] });
+
+class EditBsButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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() }}"
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-bs-button'"
+			mat-button>
+			<edit-solid-svg></edit-solid-svg>
+			{{ label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: 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.1.0", ngImport: i0, type: EditBsButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edit-bs-button', imports: [MatButtonModule, MatIconModule, EditSolidSvgComponent], template: `
+		<button
+			color="primary"
+			type="{{ type() }}"
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-bs-button'"
+			mat-button>
+			<edit-solid-svg></edit-solid-svg>
+			{{ label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class EditBsButtonDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.document = inject(DOCUMENT);
+        this.originalText = signal('', ...(ngDevMode ? [{ debugName: "originalText" }] : []));
+        this.iconComponentRef = signal(null, ...(ngDevMode ? [{ debugName: "iconComponentRef" }] : []));
+    }
+    ngOnInit() {
+        // Add the btn class first
+        this.elementRef.nativeElement.classList.add('btn', 'text-primary');
+        // Capture original text before creating icon
+        this.originalText.set(this.elementRef.nativeElement.textContent?.trim() || 'Edit');
+        // Update content to show icon and text
+        this.updateContent();
+    }
+    updateContent() {
+        // Create the EditSolidSvgComponent properly using Angular's component system
+        const componentRef = this.viewContainerRef.createComponent(EditSolidSvgComponent);
+        this.iconComponentRef.set(componentRef);
+        // Clear the original content and append the icon component
+        this.elementRef.nativeElement.textContent = '';
+        this.elementRef.nativeElement.appendChild(componentRef.location.nativeElement);
+        // Add text after the icon
+        this.elementRef.nativeElement.appendChild(this.document.createTextNode(' ' + this.originalText()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditBsButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.0", type: EditBsButtonDirective, isStandalone: true, selector: "[editBsButton]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditBsButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[editBsButton]',
+                }]
+        }] });
+
+class EditButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-button'"
+			mat-raised-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[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.1.0", ngImport: i0, type: EditButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edit-button', imports: [MatButton, MatIcon], template: `
+		<button
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-button'"
+			mat-raised-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class EditButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        this.icon = input('edit', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.loadingLabel = input('Editing...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.elementRef.nativeElement.classList.add('primary-button');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: EditButtonDirective, isStandalone: true, selector: "[editButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[editButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class EditSvgIconButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-svg-icon-button'"
+			mat-raised-button>
+			<edit-solid-svg></edit-solid-svg>
+			{{ label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[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.1.0", ngImport: i0, type: EditSvgIconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'edit-svg-icon-button', imports: [MatButton, EditSolidSvgComponent], template: `
+		<button
+			type="{{ type() }}"
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'edit-svg-icon-button'"
+			mat-raised-button>
+			<edit-solid-svg></edit-solid-svg>
+			{{ label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class EditSvgIconButtonDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.document = inject(DOCUMENT);
+        this.originalText = signal('', ...(ngDevMode ? [{ debugName: "originalText" }] : []));
+        this.iconComponentRef = signal(null, ...(ngDevMode ? [{ debugName: "iconComponentRef" }] : []));
+    }
+    ngOnInit() {
+        // Add Material Design button classes
+        this.elementRef.nativeElement.classList.add('mat-raised-button', 'primary-button');
+        // Capture original text before creating icon
+        this.originalText.set(this.elementRef.nativeElement.textContent?.trim() || 'Edit');
+        // Set data-cy attribute for testing
+        this.elementRef.nativeElement.setAttribute('data-cy', 'edit-svg-icon-button');
+        // Update content to show icon and text
+        this.updateContent();
+    }
+    updateContent() {
+        // Create the EditSolidSvgComponent properly using Angular's component system
+        const componentRef = this.viewContainerRef.createComponent(EditSolidSvgComponent);
+        this.iconComponentRef.set(componentRef);
+        // Clear the original content and append the icon component
+        this.elementRef.nativeElement.textContent = '';
+        this.elementRef.nativeElement.appendChild(componentRef.location.nativeElement);
+        this.elementRef.nativeElement.appendChild(this.document.createTextNode(' ' + this.originalText()));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditSvgIconButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.0", type: EditSvgIconButtonDirective, isStandalone: true, selector: "[editSvgIconButton]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditSvgIconButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[editSvgIconButton]',
+                }]
+        }] });
+
+class ExcelExportButtonComponent {
+    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.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"] }]
+        }] });
+
+class ExcelExportButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        const styles = [
+            { property: 'margin-left', value: '20px' },
+            { property: 'margin-right', value: '20px' },
+            { property: 'width', value: '100px' },
+            { property: 'color', value: 'white' },
+            { property: 'background-color', value: 'darkgreen' },
+            { property: 'border-radius', value: '24px' },
+        ];
+        styles.forEach((style) => {
+            this.elementRef.nativeElement.style[style.property] = style.value;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ExcelExportButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.0", type: ExcelExportButtonDirective, isStandalone: true, selector: "[excelExportButton]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ExcelExportButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[excelExportButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class ManageButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'manage-button'">
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[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.1.0", ngImport: i0, type: ManageButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'manage-button', imports: [MatButton, MatIcon], template: `
+		<button
+			mat-raised-button
+			class="{{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'manage-button'">
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class ManageButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        this.icon = input('settings', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.elementRef.nativeElement.classList.add('mr-3');
+        this.elementRef.nativeElement.classList.add('secondary-button');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ManageButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: ManageButtonDirective, isStandalone: true, selector: "[manageButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ManageButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[manageButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class PdfExportButtonComponent {
+    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.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 PdfExportButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        const styles = [
+            { property: 'margin-left', value: '20px' },
+            { property: 'width', value: '100px' },
+            { property: 'color', value: 'white' },
+            { property: 'background-color', value: '#a3071b' },
+            { property: 'border-radius', value: '24px' },
+        ];
+        styles.forEach((style) => {
+            this.elementRef.nativeElement.style[style.property] = style.value;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PdfExportButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.0", type: PdfExportButtonDirective, isStandalone: true, selector: "[pdfExportButton]", usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PdfExportButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pdfExportButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class PrimaryButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'primary-button'">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading() && showIcon()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[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.1.0", ngImport: i0, type: PrimaryButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'primary-button', imports: [MatButton, MatIcon], template: `
+		<button
+			mat-raised-button
+			class="btn {{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'primary-button'">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading() && showIcon()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class PrimaryButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        this.icon = input('save', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.loadingLabel = input('Saving...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.elementRef.nativeElement.classList.add('btn-primary');
+        this.elementRef.nativeElement.classList.add('primary-button');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PrimaryButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: PrimaryButtonDirective, isStandalone: true, selector: "[primaryButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PrimaryButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[primaryButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class SavePrimaryButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'save-primary-button'">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[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.1.0", ngImport: i0, type: SavePrimaryButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'save-primary-button', imports: [MatButton, MatIcon], template: `
+		<button
+			mat-raised-button
+			class="btn {{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'save-primary-button'">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class SavePrimaryButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        this.icon = input('save', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.loadingLabel = input('Saving...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.elementRef.nativeElement.classList.add('btn-primary');
+        this.elementRef.nativeElement.classList.add('primary-button');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SavePrimaryButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: SavePrimaryButtonDirective, isStandalone: true, selector: "[savePrimaryButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SavePrimaryButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[savePrimaryButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class SearchButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			mat-raised-button
+			type="{{ type() }}"
+			data-cy="primary-button">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[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.1.0", ngImport: i0, type: SearchButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'search-button', imports: [MatButtonModule, MatIconModule], template: `
+		<button
+			class="btn btn-primary primary-button {{ loading() || disabled() ? 'disabled' : '' }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			mat-raised-button
+			type="{{ type() }}"
+			data-cy="primary-button">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class SuccessButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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() }}"
+			(click)="onClick.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'success-button'">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</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.1.0", ngImport: i0, type: SuccessButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'success-button',
+                    imports: [MatButton, MatIcon],
+                    template: `
+		<button
+			mat-raised-button
+			class="btn {{ classes() }}"
+			(click)="onClick.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			[disabled]="disabled() || loading()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'success-button'">
+			@if (loading()) {
+				<span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			}
+			@if (!loading()) {
+				<mat-icon>{{ icon() }}</mat-icon>
+			}
+			{{ loading() ? loadingLabel() : label() }}
+		</button>
+	`,
+                }]
+        }], ctorParameters: () => [] });
+
+class SuccessButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        this.icon = input('save', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.loadingLabel = input('Updating...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+        this.elementRef.nativeElement.classList.add('success-button');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SuccessButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: SuccessButtonDirective, isStandalone: true, selector: "[successButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SuccessButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[successButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class ViewButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			mat-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[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.1.0", ngImport: i0, type: ViewButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'view-button', imports: [MatButton, MatIcon], template: `
+		<button
+			color="primary"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			mat-button>
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class ViewButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        this.icon = input('visibility', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.loadingLabel = input('Loading...', ...(ngDevMode ? [{ debugName: "loadingLabel" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: ViewButtonDirective, isStandalone: true, selector: "[viewButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, loadingLabel: { classPropertyName: "loadingLabel", publicName: "loadingLabel", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[viewButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class ViewPrimaryButtonComponent extends BaseButtonComponent {
+    constructor() {
+        super();
+        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.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() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'view-button'">
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</button>
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[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.1.0", ngImport: i0, type: ViewPrimaryButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'view-primary-button', imports: [MatButton, MatIcon], template: `
+		<button
+			mat-raised-button
+			class="btn {{ classes() }}"
+			(click)="onClick.emit($event)"
+			(focus)="onFocus.emit($event)"
+			(blur)="onBlur.emit($event)"
+			(keydown)="onKeyDown.emit($event)"
+			(keyup)="onKeyUp.emit($event)"
+			[disabled]="disabled()"
+			[type]="type()"
+			[style]="style()"
+			[attr.data-cy]="'view-button'">
+			<mat-icon>{{ icon() }}</mat-icon>
+			{{ label() }}
+		</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"] }]
+        }], ctorParameters: () => [] });
+
+class ViewPrimaryButtonDirective extends BaseButtonDirective {
+    constructor() {
+        super();
+        this.icon = input('visibility', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.elementRef.nativeElement.classList.add('btn-primary');
+        this.elementRef.nativeElement.classList.add('primary-button');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewPrimaryButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", type: ViewPrimaryButtonDirective, isStandalone: true, selector: "[viewPrimaryButton]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewPrimaryButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[viewPrimaryButton]',
+                }]
+        }], ctorParameters: () => [] });
+
+class ConfirmDialogComponent {
+    constructor(data, dialogRef) {
+        this.data = data;
+        this.dialogRef = dialogRef;
+        // Update view with given values
+        this.title = data.title;
+        this.message = data.message;
+    }
+    onDismiss() {
+        // Close the dialog, return true
+        this.dialogRef.close(false);
+    }
+    onConfirm() {
+        // Close the dialog, return true
+        this.dialogRef.close(true);
+    }
+    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>
+
+		<mat-divider></mat-divider>
+		<div mat-dialog-content style="margin: 20px">
+			<p>{{ message }}</p>
+		</div>
+
+		<div align="end" class="modal-footer" mat-dialog-actions>
+			<button (click)="onDismiss()" mat-raised-button>No</button>
+			<button (click)="onConfirm()" class="primary-button" mat-raised-button>Yes</button>
+		</div>
+	`, isInline: true, dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[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.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">
+			<h3 class="m-3 mat-headline-5	">{{ title }}</h3>
+		</div>
+
+		<mat-divider></mat-divider>
+		<div mat-dialog-content style="margin: 20px">
+			<p>{{ message }}</p>
+		</div>
+
+		<div align="end" class="modal-footer" mat-dialog-actions>
+			<button (click)="onDismiss()" mat-raised-button>No</button>
+			<button (click)="onConfirm()" class="primary-button" mat-raised-button>Yes</button>
+		</div>
+	` }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1$5.MatDialogRef }] });
+
+class ErrorSnackBarComponent {
+    constructor(msb, data) {
+        this.msb = msb;
+        this.data = data;
+    }
+    /**
+     * Close the Snack Bar
+     *
+     * @author Pavan Kumar Jadda
+     * @since 2.7.18
+     */
+    close() {
+        this.msb.dismissWithAction();
+    }
+    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>
+			<button style="margin-left: auto" (click)="close()" mat-icon-button>
+				<mat-icon>close</mat-icon>
+			</button>
+		</div>
+	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{--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.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">
+			<mat-icon style="font-size:1.3rem">error</mat-icon>
+			<label>{{ data.message }}</label>
+			<button style="margin-left: auto" (click)="close()" mat-icon-button>
+				<mat-icon>close</mat-icon>
+			</button>
+		</div>
+	`, 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"] }]
+        }], ctorParameters: () => [{ type: i1$6.MatSnackBarRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }] });
+
+class SuccessSnackBarComponent {
+    constructor(msb, data) {
+        this.msb = msb;
+        this.data = data;
+    }
+    /**
+     * Close the Snack Bar
+     *
+     * @author Pavan Kumar Jadda
+     * @since 2.7.18
+     */
+    close() {
+        this.msb.dismissWithAction();
+    }
+    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>
+			<button style="margin-left: auto" (click)="close()" mat-icon-button>
+				<mat-icon>close</mat-icon>
+			</button>
+		</div>
+	`, isInline: true, styles: [":root{--primary-color: #153d77;--secondary-color: #6c757d;--white-color: #fff;--success-color: #198754;--delete-color: #dc3545;--background-color: #f2f2f2}.success-snackbar{--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.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">
+			<mat-icon style="font-size:1.3rem">check_circle</mat-icon>
+			<label>{{ data.message }}</label>
+			<button style="margin-left: auto" (click)="close()" mat-icon-button>
+				<mat-icon>close</mat-icon>
+			</button>
+		</div>
+	`, 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"] }]
+        }], ctorParameters: () => [{ type: i1$6.MatSnackBarRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_SNACK_BAR_DATA]
+                }] }] });
+
+class MatSnackBarService {
+    constructor() {
+        this.snackBar = inject(MatSnackBar);
+        /**
+         * Duration (in milliseconds) of the Snack Bar to be open. Defaults to 5 seconds (5000 milliseconds)
+         */
+        this.duration = 5000;
+        /**
+         * Horizontal Position of the MatSnackBar. Defaults to right side
+         */
+        this.horizontalPosition = 'right';
+        /**
+         * Vertical Position of the MatSnackBar. Defaults to top of the page
+         */
+        this.verticalPosition = 'top';
+    }
+    /**
+     * Opens Success Snack Bar
+     *
+     * @param message Message to display on Snack Bar
+     * @param options Options of the Snack Bar
+     *
+     * @author Pavan Kumar Jadda
+     * @since 2.2.3
+     */
+    success(message, options) {
+        this.snackBar.openFromComponent(SuccessSnackBarComponent, {
+            data: { message },
+            duration: options?.duration ?? this.duration,
+            panelClass: options?.panelClass ?? 'success-snackbar',
+            horizontalPosition: options?.horizontalPosition ?? this.horizontalPosition,
+            verticalPosition: options?.verticalPosition ?? this.verticalPosition,
+        });
+    }
+    /**
+     * Opens Error Snack Bar
+     *
+     * @param message Message to display on Snack Bar
+     * @param options Options of the Snack Bar
+     *
+     * @author Pavan Kumar Jadda
+     * @since 2.2.3
+     */
+    error(message, options) {
+        this.snackBar.openFromComponent(ErrorSnackBarComponent, {
+            data: { message },
+            duration: options?.duration ?? this.duration,
+            panelClass: options?.panelClass ?? 'error-snackbar',
+            horizontalPosition: options?.horizontalPosition ?? this.horizontalPosition,
+            verticalPosition: options?.verticalPosition ?? this.verticalPosition,
+        });
+    }
+    /**
+     * Opens Generic Snack Bar
+     *
+     * @param message Message to display on Snack Bar
+     *
+     * @author Pavan Kumar Jadda
+     * @since 2.2.3
+     */
+    open(message) {
+        this.snackBar.open(message, 'Close', {
+            duration: this.duration,
+            horizontalPosition: this.horizontalPosition,
+            verticalPosition: this.verticalPosition,
+        });
+    }
+    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.1.0", ngImport: i0, type: MatSnackBarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * A core entity store class that stores a list of objects. This has list of methods to perform CRUD operations on the list of objects.
+ *
+ * @author Pavan Kumar Jadda
+ * @since 17.1.0
+ */
+class EntityStore {
+    constructor() {
+        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(), ...(ngDevMode ? [{ debugName: "data" }] : []));
+    }
+    /**
+     * Find an item in the store by id
+     *
+     * @param id The id of the item to be found
+     *
+     * @returns The item if found, undefined otherwise
+     *
+     * @author Pavan Kumar Jadda
+     * @since 17.1.0
+     */
+    findById(id) {
+        return this._data().find((item) => item.id === id);
+    }
+    /**
+     * Set the list of items in the store with the new data
+     *
+     * @param data The new list of items to be stored
+     *
+     * @author Pavan Kumar Jadda
+     * @since 17.1.0
+     */
+    setData(data) {
+        this._data.set(data);
+    }
+    /**
+     * Update an item in the store. If the item does not exist in new list, add it. Otherwise, update it.
+     *
+     * @param data The item to added or updated
+     *
+     * @author Pavan Kumar Jadda
+     * @since 17.1.0
+     */
+    upsert(data) {
+        this._data.update((currentData) => {
+            const dataMap = new Map(currentData.map((item) => [item.id, item]));
+            dataMap.set(data.id, data);
+            return Array.from(dataMap.values());
+        });
+    }
+    /**
+     * Update or insert the given list of items in the store
+     *
+     * @param newData The list of items to be updated or inserted
+     *
+     * @author Pavan Kumar Jadda
+     * @since 17.1.0
+     */
+    upsertMulti(newData) {
+        this._data.update((currentData) => {
+            const dataMap = new Map(currentData.map((item) => [item.id, item]));
+            newData.forEach((newItem) => dataMap.set(newItem.id, newItem));
+            return Array.from(dataMap.values());
+        });
+    }
+    /**
+     * Remove an item from the store
+     *
+     * @param id The id of the item to be removed
+     *
+     * @author Pavan Kumar Jadda
+     * @since 17.1.0
+     */
+    remove(id) {
+        this._data.update((currentData) => currentData.filter((item) => item.id !== id));
+    }
+    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.1.0", ngImport: i0, type: EntityStore, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * A core store class that can be used to store any object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 17.1.0
+ */
+class Store {
+    constructor() {
+        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(), ...(ngDevMode ? [{ debugName: "data" }] : []));
+    }
+    // Add initialization method
+    initialize(initialData) {
+        this._data.set(initialData);
+    }
+    /**
+     * Update the data in the store with the new data
+     *
+     * @param newData The new data to be stored/updated
+     *
+     * @author Pavan Kumar Jadda
+     * @since 17.1.0
+     */
+    update(newData) {
+        this._data.set(newData);
+    }
+    // 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.1.0", ngImport: i0, type: Store, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Initialize Loading or Update ProgressState
+ *
+ * @return Updated State Object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 2.7.16
+ */
+const initializeState = () => {
+    return signal({
+        isLoading: false,
+        isSuccess: false,
+        isError: false,
+        isComplete: false,
+        message: '',
+    });
+};
+/**
+ * Initialize Loading or Update ProgressState
+ *
+ * @param progressState Object to initialize
+ * @return ProgressState Updated State Object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 2.7.16
+ */
+const markLoading = (progressState) => {
+    progressState.update((state) => {
+        return {
+            ...state,
+            isLoading: true,
+            isSuccess: false,
+            isError: false,
+            isComplete: false,
+            message: '',
+        };
+    });
+};
+/**
+ * Update state as isSuccess
+ *
+ * @return ProgressState Updated State Object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 2.7.16
+ */
+const markSuccess = (progressState, message) => {
+    progressState.update((state) => {
+        return {
+            ...state,
+            isLoading: false,
+            isSuccess: true,
+            isError: false,
+            isComplete: true,
+            message: message || '',
+        };
+    });
+};
+/**
+ * Update state as failure or isError
+ *
+ * @return ProgressState Updated State Object
+ *
+ * @author Pavan Kumar Jadda
+ * @since 2.7.16
+ */
+const markError = (progressState, message) => {
+    progressState.update((state) => {
+        return {
+            ...state,
+            isLoading: false,
+            isSuccess: false,
+            isError: true,
+            isComplete: true,
+            message: message || '',
+        };
+    });
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AlertComponent, AutocompleteComponent, BaseButtonDirective, BsLinkButtonComponent, BsLinkButtonDirective, CloseButtonDirective, ConfirmDialogComponent, DeleteButtonComponent, DeleteButtonDirective, EditBsButtonComponent, EditBsButtonDirective, EditButtonComponent, EditButtonDirective, EditSolidSvgComponent, EditSvgIconButtonComponent, EditSvgIconButtonDirective, EntityStore, ExcelExportButtonComponent, ExcelExportButtonDirective, ManageButtonComponent, ManageButtonDirective, MatSnackBarService, NgxPrintDirective, NgxSpinnerComponent, NgxSpinnerService, PdfExportButtonComponent, PdfExportButtonDirective, PreventMultipleClicksDirective, PrimaryButtonComponent, PrimaryButtonDirective, SavePrimaryButtonComponent, SavePrimaryButtonDirective, SearchButtonComponent, SpinnerComponent, Store, SuccessButtonComponent, SuccessButtonDirective, ViewButtonComponent, ViewButtonDirective, ViewPrimaryButtonComponent, ViewPrimaryButtonDirective, initializeState, markError, markLoading, markSuccess };
+//# sourceMappingURL=js-smart-ng-kit.mjs.map