@js-smart/ng-kit 20.5.0 → 20.6.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, signal, output, effect, Component, Pipe, Injectable, HostListener, ViewChild, forwardRef, Input, Optional, Directive, ElementRef, Renderer2, Inject, computed } from '@angular/core';
+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';
@@ -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,11 +1100,38 @@ 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.renderer = inject(Renderer2);
-        this.renderer.addClass(this.elementRef.nativeElement, 'secondary-button');
+        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 }); }
@@ -1097,6 +1201,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 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"/>
@@ -1107,11 +1228,15 @@ class EditSolidSvgComponent {
         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"></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.ɵ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"] }]
+            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 {
@@ -1164,6 +1289,41 @@ 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 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();
@@ -1211,6 +1371,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 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();
@@ -1260,6 +1437,43 @@ 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 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"] }] }); }
@@ -1269,6 +1483,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             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();
@@ -1312,6 +1551,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 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"] }] }); }
@@ -1321,6 +1577,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             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();
@@ -1380,6 +1660,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 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();
@@ -1438,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();
@@ -1554,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();
@@ -1594,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();
@@ -1641,6 +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 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;
@@ -2070,5 +2436,5 @@ const markError = (progressState, message) => {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, AutocompleteComponent, BsLinkButtonComponent, CloseButtonDirective, 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