@js-smart/ng-kit 20.4.0 → 20.6.0

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

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, signal, output, effect, Component, Injectable, Pipe, HostListener, ViewChild, forwardRef, Input, Optional, Directive, Inject, computed } from '@angular/core';
-import * as i1 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { inject, ChangeDetectorRef, input, signal, output, effect, Component, Pipe, Injectable, HostListener, ViewChild, forwardRef, Input, Optional, 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 { trigger, state, transition, style, animate } from '@angular/animations';
-import * as i1$1 from '@angular/platform-browser';
+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';
@@ -117,33 +117,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             args: [{ selector: 'lib-alert, alert', template: "@if (open()) {\n\t<div class=\"row {{ class() }}\">\n\t\t<div class=\"col-xs-12 col-sm-12 col-md-auto mx-auto\">\n\t\t\t<div class=\"alert alert-{{ type() }} alert-dismissible alert_div\" role=\"alert\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t\t@if (dismissible()) {\n\t\t\t\t\t<button (click)=\"closeAlert()\" aria-label=\"Close\" class=\"btn-close\" data-bs-dismiss=\"alert\" type=\"button\"></button>\n\t\t\t\t}\n\t\t\t</div>\n\t\t</div>\n\t</div>\n}\n", styles: [".alert_div{display:flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [] });
 
-class SpinnerComponent {
-    constructor() {
-        /**
-         *  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.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"] }]
-        }] });
-
 const LOADERS = {
     'ball-clip-rotate': 1,
 };
@@ -160,6 +133,27 @@ class NgxSpinner {
     }
 }
 
+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() {
         /**
@@ -226,27 +220,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                 }]
         }] });
 
-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$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.0", ngImport: i0, type: SafeHtmlPipe, isStandalone: true, name: "safeHtml" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: SafeHtmlPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'safeHtml',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
-
 class NgxSpinnerComponent {
     /**
      * Creates an instance of NgxSpinnerComponent.
@@ -422,6 +395,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                 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
  *
@@ -896,6 +896,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                 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.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 = 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 = 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(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(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() {
         /**
@@ -1023,6 +1100,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 	`, 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.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 = 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();
@@ -1081,51 +1201,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 	`, 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 EditButtonComponent extends BaseButtonComponent {
+class DeleteButtonDirective extends BaseButtonDirective {
     constructor() {
         super();
-        this.label = input('Edit', ...(ngDevMode ? [{ debugName: "label" }] : []));
-        this.icon = input('edit', ...(ngDevMode ? [{ debugName: "icon" }] : []));
-        this.classes = input('primary-button', ...(ngDevMode ? [{ debugName: "classes" }] : []));
+        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: 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"] }] }); }
+    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: 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"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: DeleteButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[deleteButton]',
+                }]
         }], ctorParameters: () => [] });
 
 const EDIT_ICON = `
@@ -1137,13 +1227,17 @@ 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$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: EditSolidSvgComponent, isStandalone: true, selector: "edit-solid-svg", ngImport: i0, template: ` <mat-icon aria-hidden="false" aria-label="Edit" svgIcon="edit-solid"></mat-icon> `, isInline: true, styles: [".mat-icon{vertical-align:bottom;padding-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+    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"></mat-icon> `, styles: [".mat-icon{vertical-align:bottom;padding-left:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.MatIconRegistry }, { type: i1$1.DomSanitizer }] });
+            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() {
@@ -1195,17 +1289,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 	`, 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 EditSvgIconButtonComponent extends BaseButtonComponent {
+class EditBsButtonDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.viewContainerRef = inject(ViewContainerRef);
+        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(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: 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: `
+    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
-			type="{{ type() }}"
 			class="{{ classes() }}"
 			(click)="onClick.emit($event)"
 			(focus)="onFocus.emit($event)"
@@ -1215,18 +1343,17 @@ class EditSvgIconButtonComponent extends BaseButtonComponent {
 			[disabled]="disabled()"
 			[type]="type()"
 			[style]="style()"
-			[attr.data-cy]="'edit-svg-icon-button'"
+			[attr.data-cy]="'edit-button'"
 			mat-raised-button>
-			<edit-solid-svg></edit-solid-svg>
+			<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: EditSolidSvgComponent, selector: "edit-solid-svg" }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: EditSvgIconButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'edit-svg-icon-button', imports: [MatButton, EditSolidSvgComponent], template: `
+            args: [{ selector: 'edit-button', imports: [MatButton, MatIcon], template: `
 		<button
-			type="{{ type() }}"
 			class="{{ classes() }}"
 			(click)="onClick.emit($event)"
 			(focus)="onFocus.emit($event)"
@@ -1236,41 +1363,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 			[disabled]="disabled()"
 			[type]="type()"
 			[style]="style()"
-			[attr.data-cy]="'edit-svg-icon-button'"
+			[attr.data-cy]="'edit-button'"
 			mat-raised-button>
-			<edit-solid-svg></edit-solid-svg>
+			<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 ManageButtonComponent extends BaseButtonComponent {
+class EditButtonDirective extends BaseButtonDirective {
     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" }] : []));
+        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: 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: `
+    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
-			mat-raised-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]="'manage-button'">
-			<mat-icon>{{ icon() }}</mat-icon>
+			[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: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+	`, isInline: true, styles: [".primary-button,.primary-button:hover,.primary-button:active,.primary-button:visited{color:#fff!important;background-color:var(--primary-color)!important}.secondary-button,.secondary-button:hover,.secondary-button:active,.secondary-button:visited{color:#fff!important;background-color:var(--secondary-color)!important}.success-button,.success-button:hover,.success-button:active,.success-button:visited{color:#fff!important;background-color:var(--success-color)!important}.delete-button,.delete-button:hover,.delete-button:active,.success-button:visited{color:#fff!important;background-color:var(--delete-color)!important}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: EditSolidSvgComponent, selector: "edit-solid-svg" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ManageButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: EditSvgIconButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'manage-button', imports: [MatButton, MatIcon], template: `
+            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.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);
+        // Add text after the icon
+        this.elementRef.nativeElement.appendChild(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() }}"
@@ -1287,6 +1551,133 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 	`, 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();
@@ -1345,6 +1736,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 	`, 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();
@@ -1461,6 +1870,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                 }]
         }], 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();
@@ -1501,6 +1927,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 	`, 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();
@@ -1548,83 +1990,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
 	`, 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 PrimaryButtonComponent extends BaseButtonComponent {
+class ViewPrimaryButtonDirective extends BaseButtonDirective {
     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" }] : []));
+        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: 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"] }] }); }
+    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: 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"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ViewPrimaryButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[viewPrimaryButton]',
+                }]
         }], 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 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 ConfirmDialogComponent {
     constructor(data, dialogRef) {
         this.data = data;
@@ -1839,51 +2221,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                 }]
         }] });
 
-/**
- * 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',
-                }]
-        }] });
-
 /**
  * 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.
  *
@@ -1971,6 +2308,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
                 }]
         }] });
 
+/**
+ * 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
  *
@@ -2054,5 +2436,5 @@ const markError = (progressState, message) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AutocompleteComponent, BsLinkButtonComponent, ConfirmDialogComponent, DeleteButtonComponent, EditBsButtonComponent, EditButtonComponent, EditSolidSvgComponent, EditSvgIconButtonComponent, EntityStore, ExcelExportButtonComponent, ManageButtonComponent, MatSnackBarService, NgxPrintDirective, NgxSpinnerComponent, NgxSpinnerService, PdfExportButtonComponent, PreventMultipleClicksDirective, PrimaryButtonComponent, SavePrimaryButtonComponent, SearchButtonComponent, SpinnerComponent, Store, SuccessButtonComponent, ViewButtonComponent, ViewPrimaryButtonComponent, initializeState, markError, markLoading, markSuccess };
+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