zek 16.1.3 → 16.1.5

package/fesm2022/zek.mjs

@@ -2705,33 +2705,16 @@ class AgePipe {
         return Math.floor((timeDiff / (1000 * 3600 * 24)) / 365.25);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AgePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: AgePipe, name: "age" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: AgePipe, isStandalone: true, name: "age" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AgePipe, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: true,
                     name: 'age'
                 }]
         }] });
 
-class AgeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: AgeModule, declarations: [AgePipe], imports: [CommonModule], exports: [AgePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AgeModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AgeModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        AgePipe,
-                    ],
-                    exports: [AgePipe]
-                }]
-        }] });
-
 class ZekAlert extends CoreComponent {
     constructor() {
         super(...arguments);
@@ -2760,11 +2743,11 @@ class ZekAlert extends CoreComponent {
         this.cssIcon = BootstrapHelper.cssAlertIcon(this._type);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekAlert, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekAlert, selector: "zek-alert", inputs: { type: "type", showClose: "showClose", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div class=\"alert {{cssAlert}} alert-dismissible fade show\" role=\"alert\">\r\n    <button *ngIf=\"_showClose\" type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n    <div class=\"row\">\r\n        <div class=\"col-auto pe-1\" *ngIf=\"cssIcon\">\r\n            <span class=\"flex-shrink-0\"><i class=\"{{cssIcon}}\"></i></span>\r\n        </div>\r\n        <div class=\"col-auto\">\r\n            <div *ngIf=\"title\">\r\n                <h5 class=\"alert-heading\">{{title}}</h5>\r\n            </div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekAlert, isStandalone: true, selector: "zek-alert", inputs: { type: "type", showClose: "showClose", title: "title" }, usesInheritance: true, ngImport: i0, template: "<div class=\"alert {{cssAlert}} alert-dismissible fade show\" role=\"alert\">\r\n    <button *ngIf=\"_showClose\" type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n    <div class=\"row\">\r\n        <div class=\"col-auto pe-1\" *ngIf=\"cssIcon\">\r\n            <span class=\"flex-shrink-0\"><i class=\"{{cssIcon}}\"></i></span>\r\n        </div>\r\n        <div class=\"col-auto\">\r\n            <div *ngIf=\"title\">\r\n                <h5 class=\"alert-heading\">{{title}}</h5>\r\n            </div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekAlert, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-alert', template: "<div class=\"alert {{cssAlert}} alert-dismissible fade show\" role=\"alert\">\r\n    <button *ngIf=\"_showClose\" type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n    <div class=\"row\">\r\n        <div class=\"col-auto pe-1\" *ngIf=\"cssIcon\">\r\n            <span class=\"flex-shrink-0\"><i class=\"{{cssIcon}}\"></i></span>\r\n        </div>\r\n        <div class=\"col-auto\">\r\n            <div *ngIf=\"title\">\r\n                <h5 class=\"alert-heading\">{{title}}</h5>\r\n            </div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
+            args: [{ standalone: true, selector: 'zek-alert', imports: [CommonModule], template: "<div class=\"alert {{cssAlert}} alert-dismissible fade show\" role=\"alert\">\r\n    <button *ngIf=\"_showClose\" type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"></button>\r\n    <div class=\"row\">\r\n        <div class=\"col-auto pe-1\" *ngIf=\"cssIcon\">\r\n            <span class=\"flex-shrink-0\"><i class=\"{{cssIcon}}\"></i></span>\r\n        </div>\r\n        <div class=\"col-auto\">\r\n            <div *ngIf=\"title\">\r\n                <h5 class=\"alert-heading\">{{title}}</h5>\r\n            </div>\r\n            <ng-content></ng-content>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { type: [{
                 type: Input
             }], showClose: [{
@@ -2878,11 +2861,11 @@ class ZekToast {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekToast, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekToast, selector: "zek-toast", inputs: { delay: "delay", icon: "icon" }, ngImport: i0, template: "<div class=\"toast-container position-fixed top-0 end-0 p-3\">\r\n    <div *ngFor=\"let toast of toasts\" class=\"toast fade show border-0 {{ toast.css }}\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"3000\">\r\n        <div class=\"toast-header\">\r\n            <span class=\"me-1\" *ngIf=\"icon && toast.icon\"><i class=\"{{ toast.icon }}\"></i></span>\r\n            <strong class=\"me-auto\" *ngIf=\"toast.title\">{{ toast.title }}</strong>\r\n            <button type=\"button\" class=\"btn-close ms-auto me-2\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"remove(toast)\"></button>\r\n        </div>\r\n        <div class=\"toast-body\">\r\n            {{ toast.message }}\r\n        </div>\r\n    </div>\r\n    <!-- <div *ngFor=\"let toast of toasts\" class=\"toast fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"3000\">\r\n        <div class=\"toast-body\">\r\n            <div class=\"row\">\r\n                <div class=\"col-auto pe-1 border-start border-8 {{toast.borderColor}}\">\r\n                    <span *ngIf=\"toast.icon\" class=\"icon flex-shrink-0 {{toast.iconColor}}\"><i class=\"{{toast.icon}}\"></i></span>\r\n                </div>\r\n                <div class=\"col\">\r\n                    <div *ngIf=\"toast.title\"><h5>{{toast.title}}</h5></div>\r\n                    {{ toast.message }}\r\n                </div>\r\n                <div class=\"col-auto p-0\">\r\n                    <button type=\"button\" class=\"btn-close ms-auto me-2\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"remove(toast)\"></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n</div>", styles: [":host>.toast-container{z-index:999999;opacity:.9}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekToast, isStandalone: true, selector: "zek-toast", inputs: { delay: "delay", icon: "icon" }, ngImport: i0, template: "<div class=\"toast-container position-fixed top-0 end-0 p-3\">\r\n    <div *ngFor=\"let toast of toasts\" class=\"toast fade show border-0 {{ toast.css }}\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"3000\">\r\n        <div class=\"toast-header\">\r\n            <span class=\"me-1\" *ngIf=\"icon && toast.icon\"><i class=\"{{ toast.icon }}\"></i></span>\r\n            <strong class=\"me-auto\" *ngIf=\"toast.title\">{{ toast.title }}</strong>\r\n            <button type=\"button\" class=\"btn-close ms-auto me-2\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"remove(toast)\"></button>\r\n        </div>\r\n        <div class=\"toast-body\">\r\n            {{ toast.message }}\r\n        </div>\r\n    </div>\r\n    <!-- <div *ngFor=\"let toast of toasts\" class=\"toast fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"3000\">\r\n        <div class=\"toast-body\">\r\n            <div class=\"row\">\r\n                <div class=\"col-auto pe-1 border-start border-8 {{toast.borderColor}}\">\r\n                    <span *ngIf=\"toast.icon\" class=\"icon flex-shrink-0 {{toast.iconColor}}\"><i class=\"{{toast.icon}}\"></i></span>\r\n                </div>\r\n                <div class=\"col\">\r\n                    <div *ngIf=\"toast.title\"><h5>{{toast.title}}</h5></div>\r\n                    {{ toast.message }}\r\n                </div>\r\n                <div class=\"col-auto p-0\">\r\n                    <button type=\"button\" class=\"btn-close ms-auto me-2\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"remove(toast)\"></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n</div>", styles: [":host>.toast-container{z-index:999999;opacity:.9}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekToast, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-toast', template: "<div class=\"toast-container position-fixed top-0 end-0 p-3\">\r\n    <div *ngFor=\"let toast of toasts\" class=\"toast fade show border-0 {{ toast.css }}\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"3000\">\r\n        <div class=\"toast-header\">\r\n            <span class=\"me-1\" *ngIf=\"icon && toast.icon\"><i class=\"{{ toast.icon }}\"></i></span>\r\n            <strong class=\"me-auto\" *ngIf=\"toast.title\">{{ toast.title }}</strong>\r\n            <button type=\"button\" class=\"btn-close ms-auto me-2\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"remove(toast)\"></button>\r\n        </div>\r\n        <div class=\"toast-body\">\r\n            {{ toast.message }}\r\n        </div>\r\n    </div>\r\n    <!-- <div *ngFor=\"let toast of toasts\" class=\"toast fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"3000\">\r\n        <div class=\"toast-body\">\r\n            <div class=\"row\">\r\n                <div class=\"col-auto pe-1 border-start border-8 {{toast.borderColor}}\">\r\n                    <span *ngIf=\"toast.icon\" class=\"icon flex-shrink-0 {{toast.iconColor}}\"><i class=\"{{toast.icon}}\"></i></span>\r\n                </div>\r\n                <div class=\"col\">\r\n                    <div *ngIf=\"toast.title\"><h5>{{toast.title}}</h5></div>\r\n                    {{ toast.message }}\r\n                </div>\r\n                <div class=\"col-auto p-0\">\r\n                    <button type=\"button\" class=\"btn-close ms-auto me-2\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"remove(toast)\"></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n</div>", styles: [":host>.toast-container{z-index:999999;opacity:.9}\n"] }]
+            args: [{ standalone: true, selector: 'zek-toast', template: "<div class=\"toast-container position-fixed top-0 end-0 p-3\">\r\n    <div *ngFor=\"let toast of toasts\" class=\"toast fade show border-0 {{ toast.css }}\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"3000\">\r\n        <div class=\"toast-header\">\r\n            <span class=\"me-1\" *ngIf=\"icon && toast.icon\"><i class=\"{{ toast.icon }}\"></i></span>\r\n            <strong class=\"me-auto\" *ngIf=\"toast.title\">{{ toast.title }}</strong>\r\n            <button type=\"button\" class=\"btn-close ms-auto me-2\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"remove(toast)\"></button>\r\n        </div>\r\n        <div class=\"toast-body\">\r\n            {{ toast.message }}\r\n        </div>\r\n    </div>\r\n    <!-- <div *ngFor=\"let toast of toasts\" class=\"toast fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" data-bs-delay=\"3000\">\r\n        <div class=\"toast-body\">\r\n            <div class=\"row\">\r\n                <div class=\"col-auto pe-1 border-start border-8 {{toast.borderColor}}\">\r\n                    <span *ngIf=\"toast.icon\" class=\"icon flex-shrink-0 {{toast.iconColor}}\"><i class=\"{{toast.icon}}\"></i></span>\r\n                </div>\r\n                <div class=\"col\">\r\n                    <div *ngIf=\"toast.title\"><h5>{{toast.title}}</h5></div>\r\n                    {{ toast.message }}\r\n                </div>\r\n                <div class=\"col-auto p-0\">\r\n                    <button type=\"button\" class=\"btn-close ms-auto me-2\" data-bs-dismiss=\"toast\" aria-label=\"Close\" (click)=\"remove(toast)\"></button>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div> -->\r\n</div>", styles: [":host>.toast-container{z-index:999999;opacity:.9}\n"] }]
         }], ctorParameters: function () { return [{ type: AlertService }]; }, propDecorators: { delay: [{
                 type: Input
             }], icon: [{
@@ -2932,43 +2915,14 @@ class ZekValidation {
         return BootstrapHelper.cssAlert(alert.type);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekValidation, deps: [{ token: AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekValidation, selector: "zek-validation", ngImport: i0, template: "<div *ngFor=\"let alert of alerts\" class=\"alert {{ cssAlert(alert) }} alert-dismissible fade show mt-3\" role=\"alert\">\r\n    <button (click)=\"remove(alert)\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>\r\n    <div *ngFor=\"let message of alert.messages\">\r\n        <i *ngIf=\"cssIcon(alert)\" class=\"{{ cssIcon(alert) }}\"></i>\r\n        {{message}}\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekValidation, isStandalone: true, selector: "zek-validation", ngImport: i0, template: "<div *ngFor=\"let alert of alerts\" class=\"alert {{ cssAlert(alert) }} alert-dismissible fade show mt-3\" role=\"alert\">\r\n    <button (click)=\"remove(alert)\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>\r\n    <div *ngFor=\"let message of alert.messages\">\r\n        <i *ngIf=\"cssIcon(alert)\" class=\"{{ cssIcon(alert) }}\"></i>\r\n        {{message}}\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekValidation, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-validation', template: "<div *ngFor=\"let alert of alerts\" class=\"alert {{ cssAlert(alert) }} alert-dismissible fade show mt-3\" role=\"alert\">\r\n    <button (click)=\"remove(alert)\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>\r\n    <div *ngFor=\"let message of alert.messages\">\r\n        <i *ngIf=\"cssIcon(alert)\" class=\"{{ cssIcon(alert) }}\"></i>\r\n        {{message}}\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host{display:block}\n"] }]
+            args: [{ standalone: true, selector: 'zek-validation', imports: [CommonModule], template: "<div *ngFor=\"let alert of alerts\" class=\"alert {{ cssAlert(alert) }} alert-dismissible fade show mt-3\" role=\"alert\">\r\n    <button (click)=\"remove(alert)\" type=\"button\" class=\"btn-close\" aria-label=\"Close\"></button>\r\n    <div *ngFor=\"let message of alert.messages\">\r\n        <i *ngIf=\"cssIcon(alert)\" class=\"{{ cssIcon(alert) }}\"></i>\r\n        {{message}}\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: AlertService }]; } });
 
-class AlertModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: AlertModule, declarations: [ZekAlert,
-            ZekValidation,
-            ZekToast], imports: [CommonModule], exports: [ZekAlert,
-            ZekValidation,
-            ZekToast] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AlertModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AlertModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        ZekAlert,
-                        ZekValidation,
-                        ZekToast,
-                    ],
-                    providers: [],
-                    exports: [
-                        ZekAlert,
-                        ZekValidation,
-                        ZekToast,
-                    ]
-                }]
-        }] });
-
-class AutoCompleteDirective {
+class ZekAutoComplete {
     constructor(el, router) {
         this.el = el;
         this.router = router;
@@ -2979,34 +2933,17 @@ class AutoCompleteDirective {
         }
         this.el.nativeElement.setAttribute('autocomplete', 'off');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutoCompleteDirective, deps: [{ token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: AutoCompleteDirective, selector: "form", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekAutoComplete, deps: [{ token: i0.ElementRef }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: ZekAutoComplete, isStandalone: true, selector: "form", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutoCompleteDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekAutoComplete, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     selector: 'form'
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.Router }]; } });
 
-class AutoCompleteModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: AutoCompleteModule, declarations: [AutoCompleteDirective], imports: [CommonModule], exports: [AutoCompleteDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutoCompleteModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: AutoCompleteModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        AutoCompleteDirective,
-                    ],
-                    exports: [AutoCompleteDirective]
-                }]
-        }] });
-
 let uniqueId$2 = 0;
 /**
  * Provider Expression that allows bb to register as a ControlValueAccessor. This
@@ -3015,10 +2952,10 @@ let uniqueId$2 = 0;
  */
 const ZEK_BB_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => ButtonBrowseComponent),
+    useExisting: forwardRef(() => ZekButtonBrowse),
     multi: true,
 };
-class ButtonBrowseComponent extends CoreUiComponent {
+class ZekButtonBrowse extends CoreUiComponent {
     constructor() {
         super(...arguments);
         this._uniqueId = `zek-bb-${++uniqueId$2}`;
@@ -3157,10 +3094,10 @@ class ButtonBrowseComponent extends CoreUiComponent {
     bindText() {
         this.onBindText.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ButtonBrowseComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ButtonBrowseComponent, selector: "zek-bb", inputs: { id: "id", type: "type", text: "text", readOnly: "readOnly", hide: "hide", showInput: "showInput", multiSelect: "multiSelect" }, outputs: { onShowModal: "onShowModal", onChooseAll: "onChooseAll", onKeyPairChange: "onKeyPairChange", onBindText: "onBindText" }, providers: [ZEK_BB_CONTROL_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!hide && showInput\" class=\"input-group\">\r\n    <input type=\"text\" class=\"form-control\" [ngClass]=\"{ 'ng-valid required': !required || value, 'ng-invalid': required && !value }\" (keyup)=\"_onKey($event)\" title=\"ID = {{value}}\" [value]=\"text\" [attr.readonly]=\"true\">\r\n    <button type=\"button\" [disabled]=\"disabled || readOnly\" class=\"btn btn-outline-secondary\" (click)=\"showModal()\">\r\n        <i class=\"fa-solid fa-ellipsis\"></i>\r\n    </button>\r\n    <button type=\"button\" [disabled]=\"disabled || readOnly\" class=\"btn btn-outline-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n        <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n    </button>\r\n    <ul class=\"dropdown-menu\">\r\n        <li><a class=\"dropdown-item\" (click)=\"delete()\" href=\"javascript:void(0)\"> <i class=\"fa-solid fa-trash\"></i> Delete <kbd>delete</kbd> </a></li>\r\n    </ul>\r\n</div>\r\n<div *ngIf=\"!hide || disabled || readOnly\" class=\"modal fade\" [id]=\"modalId\" tabindex=\"-1\" aria-labelledby=\"bb-modal-label\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog {{_sizeCss}}\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title\" id=\"{{modalId}}-label\">{{'Action.Choose' | translate }}</h5>\r\n                <button type=\"button\" (click)=\"close()\" class=\"btn-close\" data-bs-dismiss2=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekButtonBrowse, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekButtonBrowse, selector: "zek-bb", inputs: { id: "id", type: "type", text: "text", readOnly: "readOnly", hide: "hide", showInput: "showInput", multiSelect: "multiSelect" }, outputs: { onShowModal: "onShowModal", onChooseAll: "onChooseAll", onKeyPairChange: "onKeyPairChange", onBindText: "onBindText" }, providers: [ZEK_BB_CONTROL_VALUE_ACCESSOR], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!hide && showInput\" class=\"input-group\">\r\n    <input type=\"text\" class=\"form-control\" [ngClass]=\"{ 'ng-valid required': !required || value, 'ng-invalid': required && !value }\" (keyup)=\"_onKey($event)\" title=\"ID = {{value}}\" [value]=\"text\" [attr.readonly]=\"true\">\r\n    <button type=\"button\" [disabled]=\"disabled || readOnly\" class=\"btn btn-outline-secondary\" (click)=\"showModal()\">\r\n        <i class=\"fa-solid fa-ellipsis\"></i>\r\n    </button>\r\n    <button type=\"button\" [disabled]=\"disabled || readOnly\" class=\"btn btn-outline-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n        <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n    </button>\r\n    <ul class=\"dropdown-menu\">\r\n        <li><a class=\"dropdown-item\" (click)=\"delete()\" href=\"javascript:void(0)\"> <i class=\"fa-solid fa-trash\"></i> Delete <kbd>delete</kbd> </a></li>\r\n    </ul>\r\n</div>\r\n<div *ngIf=\"!hide || disabled || readOnly\" class=\"modal fade\" [id]=\"modalId\" tabindex=\"-1\" aria-labelledby=\"bb-modal-label\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog {{_sizeCss}}\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title\" id=\"{{modalId}}-label\">{{'Action.Choose' | translate }}</h5>\r\n                <button type=\"button\" (click)=\"close()\" class=\"btn-close\" data-bs-dismiss2=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ButtonBrowseComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekButtonBrowse, decorators: [{
             type: Component,
             args: [{ selector: 'zek-bb', providers: [ZEK_BB_CONTROL_VALUE_ACCESSOR], template: "<div *ngIf=\"!hide && showInput\" class=\"input-group\">\r\n    <input type=\"text\" class=\"form-control\" [ngClass]=\"{ 'ng-valid required': !required || value, 'ng-invalid': required && !value }\" (keyup)=\"_onKey($event)\" title=\"ID = {{value}}\" [value]=\"text\" [attr.readonly]=\"true\">\r\n    <button type=\"button\" [disabled]=\"disabled || readOnly\" class=\"btn btn-outline-secondary\" (click)=\"showModal()\">\r\n        <i class=\"fa-solid fa-ellipsis\"></i>\r\n    </button>\r\n    <button type=\"button\" [disabled]=\"disabled || readOnly\" class=\"btn btn-outline-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n        <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n    </button>\r\n    <ul class=\"dropdown-menu\">\r\n        <li><a class=\"dropdown-item\" (click)=\"delete()\" href=\"javascript:void(0)\"> <i class=\"fa-solid fa-trash\"></i> Delete <kbd>delete</kbd> </a></li>\r\n    </ul>\r\n</div>\r\n<div *ngIf=\"!hide || disabled || readOnly\" class=\"modal fade\" [id]=\"modalId\" tabindex=\"-1\" aria-labelledby=\"bb-modal-label\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog {{_sizeCss}}\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\">\r\n                <h5 class=\"modal-title\" id=\"{{modalId}}-label\">{{'Action.Choose' | translate }}</h5>\r\n                <button type=\"button\" (click)=\"close()\" class=\"btn-close\" data-bs-dismiss2=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                <ng-content></ng-content>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], propDecorators: { id: [{
@@ -3187,7 +3124,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class ButtonBrowseModalToolbarComponent {
+class ZekButtonBrowseModalToolbar {
     constructor() {
         this.onSearch = new EventEmitter();
         this.onReset = new EventEmitter();
@@ -3211,10 +3148,10 @@ class ButtonBrowseModalToolbarComponent {
             return;
         this.onChooseAll.emit();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ButtonBrowseModalToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ButtonBrowseModalToolbarComponent, selector: "zek-bb-modal-toolbar", inputs: { multiSelect: "multiSelect" }, outputs: { onSearch: "onSearch", onReset: "onReset", onChooseAll: "onChooseAll" }, ngImport: i0, template: "<ng-content select=\"[left]\"></ng-content>\r\n<button type=\"button\" (click)=\"search()\" class=\"btn btn-primary me-2\" id=\"bb-filter-button\" title=\"Filter\">\r\n    <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\r\n</button>\r\n<button type=\"button\" (click)=\"reset()\" class=\"btn btn-secondary me-2\" title=\"Reset\">\r\n    <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\r\n</button>\r\n<button *ngIf=\"multiSelect\" type=\"button\" (click)=\"chooseAll()\" class=\"btn btn-secondary me-2\" title=\"Choose All\">\r\n    <i class=\"fa-solid fa-hand-point-up\" aria-hidden=\"true\"></i>\r\n</button>\r\n<ng-content></ng-content>", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekButtonBrowseModalToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekButtonBrowseModalToolbar, selector: "zek-bb-modal-toolbar", inputs: { multiSelect: "multiSelect" }, outputs: { onSearch: "onSearch", onReset: "onReset", onChooseAll: "onChooseAll" }, ngImport: i0, template: "<ng-content select=\"[left]\"></ng-content>\r\n<button type=\"button\" (click)=\"search()\" class=\"btn btn-primary me-2\" id=\"bb-filter-button\" title=\"Filter\">\r\n    <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\r\n</button>\r\n<button type=\"button\" (click)=\"reset()\" class=\"btn btn-secondary me-2\" title=\"Reset\">\r\n    <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\r\n</button>\r\n<button *ngIf=\"multiSelect\" type=\"button\" (click)=\"chooseAll()\" class=\"btn btn-secondary me-2\" title=\"Choose All\">\r\n    <i class=\"fa-solid fa-hand-point-up\" aria-hidden=\"true\"></i>\r\n</button>\r\n<ng-content></ng-content>", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ButtonBrowseModalToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekButtonBrowseModalToolbar, decorators: [{
             type: Component,
             args: [{ selector: 'zek-bb-modal-toolbar', template: "<ng-content select=\"[left]\"></ng-content>\r\n<button type=\"button\" (click)=\"search()\" class=\"btn btn-primary me-2\" id=\"bb-filter-button\" title=\"Filter\">\r\n    <i class=\"fa-solid fa-filter\" aria-hidden=\"true\"></i>\r\n</button>\r\n<button type=\"button\" (click)=\"reset()\" class=\"btn btn-secondary me-2\" title=\"Reset\">\r\n    <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\r\n</button>\r\n<button *ngIf=\"multiSelect\" type=\"button\" (click)=\"chooseAll()\" class=\"btn btn-secondary me-2\" title=\"Choose All\">\r\n    <i class=\"fa-solid fa-hand-point-up\" aria-hidden=\"true\"></i>\r\n</button>\r\n<ng-content></ng-content>" }]
         }], propDecorators: { onSearch: [{
@@ -3229,11 +3166,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class ButtonBrowseModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ButtonBrowseModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ButtonBrowseModule, declarations: [ButtonBrowseComponent,
-            ButtonBrowseModalToolbarComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ButtonBrowseModule, declarations: [ZekButtonBrowse,
+            ZekButtonBrowseModalToolbar], imports: [CommonModule,
             FormsModule,
-            TranslateModule], exports: [ButtonBrowseComponent,
-            ButtonBrowseModalToolbarComponent] }); }
+            TranslateModule], exports: [ZekButtonBrowse,
+            ZekButtonBrowseModalToolbar] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ButtonBrowseModule, imports: [CommonModule,
             FormsModule,
             TranslateModule] }); }
@@ -3247,12 +3184,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         TranslateModule,
                     ],
                     declarations: [
-                        ButtonBrowseComponent,
-                        ButtonBrowseModalToolbarComponent
+                        ZekButtonBrowse,
+                        ZekButtonBrowseModalToolbar
                     ],
                     exports: [
-                        ButtonBrowseComponent,
-                        ButtonBrowseModalToolbarComponent
+                        ZekButtonBrowse,
+                        ZekButtonBrowseModalToolbar
                     ]
                 }]
         }] });
@@ -3353,11 +3290,11 @@ class CardComponent {
         this.cdRef.detectChanges();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CardComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CardComponent, selector: "zek-card", inputs: { css: "css" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerRef"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyRef"], descendants: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true }], ngImport: i0, template: "<div class=\"card {{css}}\">\r\n    <div class=\"card-header\" #headerRef *ngIf=\"showHeader\">\r\n        <ng-content select=\"[card-header]\"></ng-content>\r\n    </div>\r\n    <div class=\"card-body\" #bodyRef *ngIf=\"showBody\">\r\n        <ng-content select=\"[card-body]\"></ng-content>\r\n    </div>\r\n    <ng-content></ng-content>\r\n    <div class=\"card-footer\" #footerRef *ngIf=\"showFooter\">\r\n        <ng-content select=\"[card-footer]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: CardComponent, isStandalone: true, selector: "zek-card", inputs: { css: "css" }, viewQueries: [{ propertyName: "headerWrapper", first: true, predicate: ["headerRef"], descendants: true }, { propertyName: "bodyRef", first: true, predicate: ["bodyRef"], descendants: true }, { propertyName: "footerRef", first: true, predicate: ["footerRef"], descendants: true }], ngImport: i0, template: "<div class=\"card {{css}}\">\r\n    <div class=\"card-header\" #headerRef *ngIf=\"showHeader\">\r\n        <ng-content select=\"[card-header]\"></ng-content>\r\n    </div>\r\n    <div class=\"card-body\" #bodyRef *ngIf=\"showBody\">\r\n        <ng-content select=\"[card-body]\"></ng-content>\r\n    </div>\r\n    <ng-content></ng-content>\r\n    <div class=\"card-footer\" #footerRef *ngIf=\"showFooter\">\r\n        <ng-content select=\"[card-footer]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-card', template: "<div class=\"card {{css}}\">\r\n    <div class=\"card-header\" #headerRef *ngIf=\"showHeader\">\r\n        <ng-content select=\"[card-header]\"></ng-content>\r\n    </div>\r\n    <div class=\"card-body\" #bodyRef *ngIf=\"showBody\">\r\n        <ng-content select=\"[card-body]\"></ng-content>\r\n    </div>\r\n    <ng-content></ng-content>\r\n    <div class=\"card-footer\" #footerRef *ngIf=\"showFooter\">\r\n        <ng-content select=\"[card-footer]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
+            args: [{ standalone: true, selector: 'zek-card', imports: [CommonModule], template: "<div class=\"card {{css}}\">\r\n    <div class=\"card-header\" #headerRef *ngIf=\"showHeader\">\r\n        <ng-content select=\"[card-header]\"></ng-content>\r\n    </div>\r\n    <div class=\"card-body\" #bodyRef *ngIf=\"showBody\">\r\n        <ng-content select=\"[card-body]\"></ng-content>\r\n    </div>\r\n    <ng-content></ng-content>\r\n    <div class=\"card-footer\" #footerRef *ngIf=\"showFooter\">\r\n        <ng-content select=\"[card-footer]\"></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { headerWrapper: [{
                 type: ViewChild,
                 args: ['headerRef']
@@ -3371,21 +3308,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class CardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: CardModule, declarations: [CardComponent], imports: [CommonModule], exports: [CardComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [CardComponent],
-                    exports: [CardComponent]
-                }]
-        }] });
-
-class CallbackPipe {
+class ZekCallbackPipe {
     transform(items, callback, filter) {
         if (!items || !callback) {
             return items;
@@ -3394,35 +3317,18 @@ class CallbackPipe {
             ? items.filter(item => callback(item, filter))
             : items.filter(item => callback(item));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CallbackPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: CallbackPipe, name: "callback", pure: false }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekCallbackPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ZekCallbackPipe, isStandalone: true, name: "callback", pure: false }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CallbackPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekCallbackPipe, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: true,
                     name: 'callback',
                     pure: false //this pure need because we are changing filter model and pure=false is handling
                 }]
         }] });
 
-class CallbackModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CallbackModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: CallbackModule, declarations: [CallbackPipe], imports: [CommonModule], exports: [CallbackPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CallbackModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: CallbackModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        CallbackPipe,
-                    ],
-                    exports: [CallbackPipe]
-                }]
-        }] });
-
 class DateAgoPipe {
     transform(value, args) {
         if (value === undefined || value === null || value === '' || value !== value)
@@ -3456,34 +3362,17 @@ class DateAgoPipe {
         return date;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateAgoPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: DateAgoPipe, name: "dateAgo" }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: DateAgoPipe, isStandalone: true, name: "dateAgo" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateAgoPipe, decorators: [{
             type: Pipe,
             args: [{
+                    standalone: true,
                     name: 'dateAgo',
                     pure: true
                 }]
         }] });
 
-class DateAgoModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateAgoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: DateAgoModule, declarations: [DateAgoPipe], imports: [CommonModule], exports: [DateAgoPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateAgoModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: DateAgoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        DateAgoPipe
-                    ],
-                    exports: [DateAgoPipe]
-                }]
-        }] });
-
 const DATE_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => DateValueAccessor),
@@ -3694,7 +3583,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class EditToolbarComponent {
+class ZekEditToolbar {
     constructor() {
         this.printType = PrintType;
         this._showExport = false;
@@ -3740,12 +3629,12 @@ class EditToolbarComponent {
     exportExcel() {
         this.onExport.emit(1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: EditToolbarComponent, selector: "zek-edit-toolbar", inputs: { showExport: "showExport", showPrint: "showPrint", readOnly: "readOnly" }, outputs: { onSave: "onSave", onCancel: "onCancel", onPrint: "onPrint", onExport: "onExport" }, ngImport: i0, template: "<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Action toolbar\">\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Save group\">\r\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"readOnly\"><i class=\"fa-solid fa-floppy-disk\"></i> {{ 'Action.Save' | translate }}</button>\r\n    </div>\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Cancel group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\"><i class=\"fa-solid fa-ban\"></i> {{ 'Action.Close' | translate }}</button>\r\n    </div>\r\n    <div *ngIf=\"showPrint\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Print group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n            </button>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Show)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button></li>\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-file-pdf\"></i> {{ 'Action.Print' | translate }} PDF</button></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showExport\" class=\"btn-group\" role=\"group\" aria-label=\"Filter / Export group\">\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button id=\"btnGroupExport\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fa-solid fa-download\"></i> {{ 'Action.Export' | translate }}</button>\r\n            <ul class=\"dropdown-menu\" aria-labelledby=\"btnGroupExport\">\r\n                <li><a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"exportExcel()\"><i class=\"fa-solid fa-file-excel\"></i> Excel</a></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekEditToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekEditToolbar, isStandalone: true, selector: "zek-edit-toolbar", inputs: { showExport: "showExport", showPrint: "showPrint", readOnly: "readOnly" }, outputs: { onSave: "onSave", onCancel: "onCancel", onPrint: "onPrint", onExport: "onExport" }, ngImport: i0, template: "<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Action toolbar\">\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Save group\">\r\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"readOnly\"><i class=\"fa-solid fa-floppy-disk\"></i> {{ 'Action.Save' | translate }}</button>\r\n    </div>\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Cancel group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\"><i class=\"fa-solid fa-ban\"></i> {{ 'Action.Close' | translate }}</button>\r\n    </div>\r\n    <div *ngIf=\"showPrint\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Print group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n            </button>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Show)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button></li>\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-file-pdf\"></i> {{ 'Action.Print' | translate }} PDF</button></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showExport\" class=\"btn-group\" role=\"group\" aria-label=\"Filter / Export group\">\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button id=\"btnGroupExport\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fa-solid fa-download\"></i> {{ 'Action.Export' | translate }}</button>\r\n            <ul class=\"dropdown-menu\" aria-labelledby=\"btnGroupExport\">\r\n                <li><a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"exportExcel()\"><i class=\"fa-solid fa-file-excel\"></i> Excel</a></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekEditToolbar, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-edit-toolbar', template: "<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Action toolbar\">\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Save group\">\r\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"readOnly\"><i class=\"fa-solid fa-floppy-disk\"></i> {{ 'Action.Save' | translate }}</button>\r\n    </div>\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Cancel group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\"><i class=\"fa-solid fa-ban\"></i> {{ 'Action.Close' | translate }}</button>\r\n    </div>\r\n    <div *ngIf=\"showPrint\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Print group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n            </button>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Show)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button></li>\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-file-pdf\"></i> {{ 'Action.Print' | translate }} PDF</button></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showExport\" class=\"btn-group\" role=\"group\" aria-label=\"Filter / Export group\">\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button id=\"btnGroupExport\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fa-solid fa-download\"></i> {{ 'Action.Export' | translate }}</button>\r\n            <ul class=\"dropdown-menu\" aria-labelledby=\"btnGroupExport\">\r\n                <li><a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"exportExcel()\"><i class=\"fa-solid fa-file-excel\"></i> Excel</a></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }]
+            args: [{ standalone: true, selector: 'zek-edit-toolbar', imports: [CommonModule, TranslateModule], template: "<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Action toolbar\">\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Save group\">\r\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"readOnly\"><i class=\"fa-solid fa-floppy-disk\"></i> {{ 'Action.Save' | translate }}</button>\r\n    </div>\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Cancel group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"cancel()\"><i class=\"fa-solid fa-ban\"></i> {{ 'Action.Close' | translate }}</button>\r\n    </div>\r\n    <div *ngIf=\"showPrint\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Print group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n            </button>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Show)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button></li>\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-file-pdf\"></i> {{ 'Action.Print' | translate }} PDF</button></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showExport\" class=\"btn-group\" role=\"group\" aria-label=\"Filter / Export group\">\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button id=\"btnGroupExport\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fa-solid fa-download\"></i> {{ 'Action.Export' | translate }}</button>\r\n            <ul class=\"dropdown-menu\" aria-labelledby=\"btnGroupExport\">\r\n                <li><a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"exportExcel()\"><i class=\"fa-solid fa-file-excel\"></i> Excel</a></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }]
         }], propDecorators: { showExport: [{
                 type: Input
             }], showPrint: [{
@@ -3762,27 +3651,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class EditToolbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: EditToolbarModule, declarations: [EditToolbarComponent], imports: [CommonModule,
-            TranslateModule], exports: [EditToolbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditToolbarModule, imports: [CommonModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: EditToolbarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule
-                    ],
-                    declarations: [
-                        EditToolbarComponent,
-                    ],
-                    exports: [EditToolbarComponent]
-                }]
-        }] });
-
 /*
  * Convert bytes into largest possible unit.
  * Takes an precision argument that defaults to 2.
@@ -3792,7 +3660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  *   {{ 1024 |  fileSize}}
  *   formats to: 1 KB
 */
-class FileSizePipe {
+class ZekFileSizePipe {
     constructor() {
         this.units = [
             'bytes',
@@ -3820,29 +3688,14 @@ class FileSizePipe {
         }
         return bytes.toFixed(+precision) + ' ' + this.units[unit];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FileSizePipe, name: "fileSize" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ZekFileSizePipe, isStandalone: true, name: "fileSize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FileSizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekFileSizePipe, decorators: [{
             type: Pipe,
-            args: [{ name: 'fileSize' }]
-        }] });
-
-class FileModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FileModule, declarations: [FileSizePipe], imports: [CommonModule], exports: [FileSizePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FileModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FileModule, decorators: [{
-            type: NgModule,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        FileSizePipe,
-                    ],
-                    exports: [FileSizePipe]
+                    standalone: true,
+                    name: 'fileSize'
                 }]
         }] });
 
@@ -4146,84 +3999,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
             args: [{ selector: 'zek-restore-modal', template: "<div (keydown.enter)=\"keyDown($event)\" class=\"modal fade\" data-bs-backdrop=\"static\" id=\"modal-{{elementId}}\" tabindex=\"-1\" attr.aria-labelledby=\"modal-lable-{{elementId}}\" aria-hidden=\"true\">\r\n    <div class=\"modal-dialog\" [class.modal-lg]=\"large\" [class.modal-xl]=\"xl\" [class.modal-dialog-scrollable]=\"scrollable\" [class.modal-fullscreen]=\"fullscreen\">\r\n        <div class=\"modal-content\">\r\n            <div class=\"modal-header\" *ngIf=\"showHeader\">\r\n                <ng-content select=\"header\"></ng-content>\r\n                <h5 class=\"modal-title\" id=\"modal-lable-{{elementId}}\">{{title}}</h5>\r\n                <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"modal\" aria-label=\"Close\"></button>\r\n            </div>\r\n            <div class=\"modal-body\">\r\n                {{text}}\r\n                <ng-content></ng-content>\r\n            </div>\r\n            <div class=\"modal-footer\" *ngIf=\"showFooter\">\r\n                <ng-content select=\"footer\"></ng-content>\r\n                <button [class.visually-hidden]=\"!showOk\" [disabled]=\"disabledOk\" type=\"button\" class=\"btn {{cssButton()}}\" id=\"modal-ok-button-{{elementId}}\" (click)=\"ok()\"><i *ngIf=\"icon\" class=\"{{ icon }}\"></i> {{ okButtonText }}</button>\r\n                <button [class.visually-hidden]=\"!showCancel\" type=\"button\" class=\"btn btn-secondary\" id=\"modal-cancel-button-{{elementId}}\" data-bs-dismiss=\"modal\"><i class=\"fa-solid fa-ban\"></i> {{ 'Action.Cancel' | translate }}</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1$1.TranslateService }]; } });
 
-class ZekSafePipe {
-    constructor(sanitizer) {
-        this.sanitizer = sanitizer;
-    }
-    /**
-     * Transform
-     *
-     * @param value: string
-     * @param type: string html, style, script, url, resourceUrl
-     */
-    transform(value, type) {
-        switch (type) {
-            case 'html':
-                return this.sanitizer.bypassSecurityTrustHtml(value);
-            case 'style':
-                return this.sanitizer.bypassSecurityTrustStyle(value);
-            case 'script':
-                return this.sanitizer.bypassSecurityTrustScript(value);
-            case 'url':
-                return this.sanitizer.bypassSecurityTrustUrl(value);
-            case 'resourceUrl':
-                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
-            default:
-                return this.sanitizer.bypassSecurityTrustHtml(value);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSafePipe, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ZekSafePipe, name: "safe" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSafePipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'safe' }]
-        }], ctorParameters: function () { return [{ type: i1$4.DomSanitizer }]; } });
-
-class ZekFileViewer extends CoreComponent {
-    show(url, extension) {
-        let ext = extension || FileHelper.getExtension(url);
-        switch (ext) {
-            case '.docx':
-            case '.doc':
-                this.src = 'https://docs.google.com/a/umd.edu/viewer?url=' + url + '&embedded=true';
-                break;
-            case '.xlsx':
-            case '.xls':
-                this.src = 'http://view.officeapps.live.com/op/view.aspx?src=' + url;
-                break;
-            // case '.jpg':
-            // case '.jpeg':
-            // case '.png':
-            // case '.pdf':
-            default:
-                this.src = url;
-                break;
-        }
-        // <!-- <iframe id="office" width="100%" height="99%" frameborder="0" marginheight="0" marginwidth="0" allowfullscreen="allowfullscreen"
-        // src="https://docs.google.com/spreadsheets/u/0/d/1Yv92dG0AOki6prNq5RwRSWTpdcidzFkakW9nMf0RaUQ/preview/sheet?gid=0"></iframe> -->
-        // <!-- <iframe id="office" width="100%" height="99%" frameborder="0" allowfullscreen="allowfullscreen" 
-        // src="https://docs.google.com/a/umd.edu/viewer?url=https://github.com/poychang/blog.poychang.net/raw/master/assets/post-files/THIS-IS-WORD.docx&amp;embedded=true">
-        // </iframe> -->
-        // <!-- <iframe id="office" width="100%" height="99%" frameborder="0" allowfullscreen="allowfullscreen" 
-        // src=" https://view.officeapps.live.com/op/embed.aspx?src=https://github.com/poychang/blog.poychang.net/raw/master/assets/post-files/THIS-IS-WORD.docx">
-        // </iframe> -->
-        // this.src = 'http://view.officeapps.live.com/op/view.aspx?src=https://sample-videos.com/xls/Sample-Spreadsheet-50000-rows.xls';
-        if (this.viewModal) {
-            this.viewModal.show();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekFileViewer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekFileViewer, selector: "zek-file-viewer", providers: [], viewQueries: [{ propertyName: "viewModal", first: true, predicate: ["viewModal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<zek-modal #viewModal [fullscreen]=\"true\" [showHeader]=\"true\" [showFooter]=\"false\">\r\n    <ng-container *ngIf=\"src\">\r\n        <iframe id=\"office\" width=\"100%\" height=\"99%\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"\r\n            [src]=\"src | safe:'resourceUrl'\">\r\n        </iframe>\r\n    </ng-container>\r\n</zek-modal>", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ZekModal, selector: "zek-modal", inputs: ["model", "showOk", "disabledOk", "showCancel", "autoHide", "title", "text", "icon", "okButtonText", "componentType", "large", "xl", "scrollable", "fullscreen", "showHeader", "showFooter"], outputs: ["onShown", "onHidden", "onOk", "onValidating"] }, { kind: "pipe", type: ZekSafePipe, name: "safe" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekFileViewer, decorators: [{
-            type: Component,
-            args: [{ selector: 'zek-file-viewer', providers: [], template: "<zek-modal #viewModal [fullscreen]=\"true\" [showHeader]=\"true\" [showFooter]=\"false\">\r\n    <ng-container *ngIf=\"src\">\r\n        <iframe id=\"office\" width=\"100%\" height=\"99%\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"\r\n            [src]=\"src | safe:'resourceUrl'\">\r\n        </iframe>\r\n    </ng-container>\r\n</zek-modal>" }]
-        }], propDecorators: { viewModal: [{
-                type: ViewChild,
-                args: ['viewModal', { static: true }]
-            }] } });
-
 class ZekFilterModal extends ZekModal {
     constructor() {
         super(...arguments);
@@ -4321,45 +4096,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class ZekSafeModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSafeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ZekSafeModule, declarations: [ZekSafePipe], imports: [CommonModule], exports: [ZekSafePipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSafeModule, imports: [CommonModule] }); }
+class ZekSafePipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    /**
+     * Transform
+     *
+     * @param value: string
+     * @param type: string html, style, script, url, resourceUrl
+     */
+    transform(value, type) {
+        switch (type) {
+            case 'html':
+                return this.sanitizer.bypassSecurityTrustHtml(value);
+            case 'style':
+                return this.sanitizer.bypassSecurityTrustStyle(value);
+            case 'script':
+                return this.sanitizer.bypassSecurityTrustScript(value);
+            case 'url':
+                return this.sanitizer.bypassSecurityTrustUrl(value);
+            case 'resourceUrl':
+                return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+            default:
+                return this.sanitizer.bypassSecurityTrustHtml(value);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSafePipe, deps: [{ token: i1$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ZekSafePipe, isStandalone: true, name: "safe" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSafeModule, decorators: [{
-            type: NgModule,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSafePipe, decorators: [{
+            type: Pipe,
             args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [ZekSafePipe],
-                    exports: [ZekSafePipe]
+                    standalone: true,
+                    name: 'safe'
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1$4.DomSanitizer }]; } });
 
-class FileViewerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: FileViewerModule, declarations: [ZekFileViewer], imports: [CommonModule,
-            ZekModalModule,
-            ZekSafeModule], exports: [ZekFileViewer] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FileViewerModule, imports: [CommonModule,
-            ZekModalModule,
-            ZekSafeModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: FileViewerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ZekModalModule,
-                        ZekSafeModule
-                    ],
-                    declarations: [
-                        ZekFileViewer
-                    ],
-                    exports: [ZekFileViewer]
-                }]
-        }] });
+class ZekFileViewer extends CoreComponent {
+    show(url, extension) {
+        let ext = extension || FileHelper.getExtension(url);
+        switch (ext) {
+            case '.docx':
+            case '.doc':
+                this.src = 'https://docs.google.com/a/umd.edu/viewer?url=' + url + '&embedded=true';
+                break;
+            case '.xlsx':
+            case '.xls':
+                this.src = 'http://view.officeapps.live.com/op/view.aspx?src=' + url;
+                break;
+            // case '.jpg':
+            // case '.jpeg':
+            // case '.png':
+            // case '.pdf':
+            default:
+                this.src = url;
+                break;
+        }
+        // <!-- <iframe id="office" width="100%" height="99%" frameborder="0" marginheight="0" marginwidth="0" allowfullscreen="allowfullscreen"
+        // src="https://docs.google.com/spreadsheets/u/0/d/1Yv92dG0AOki6prNq5RwRSWTpdcidzFkakW9nMf0RaUQ/preview/sheet?gid=0"></iframe> -->
+        // <!-- <iframe id="office" width="100%" height="99%" frameborder="0" allowfullscreen="allowfullscreen" 
+        // src="https://docs.google.com/a/umd.edu/viewer?url=https://github.com/poychang/blog.poychang.net/raw/master/assets/post-files/THIS-IS-WORD.docx&amp;embedded=true">
+        // </iframe> -->
+        // <!-- <iframe id="office" width="100%" height="99%" frameborder="0" allowfullscreen="allowfullscreen" 
+        // src=" https://view.officeapps.live.com/op/embed.aspx?src=https://github.com/poychang/blog.poychang.net/raw/master/assets/post-files/THIS-IS-WORD.docx">
+        // </iframe> -->
+        // this.src = 'http://view.officeapps.live.com/op/view.aspx?src=https://sample-videos.com/xls/Sample-Spreadsheet-50000-rows.xls';
+        if (this.viewModal) {
+            this.viewModal.show();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekFileViewer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekFileViewer, isStandalone: true, selector: "zek-file-viewer", providers: [], viewQueries: [{ propertyName: "viewModal", first: true, predicate: ["viewModal"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<zek-modal #viewModal [fullscreen]=\"true\" [showHeader]=\"true\" [showFooter]=\"false\">\r\n    <ng-container *ngIf=\"src\">\r\n        <iframe id=\"office\" width=\"100%\" height=\"99%\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"\r\n            [src]=\"src | safe:'resourceUrl'\">\r\n        </iframe>\r\n    </ng-container>\r\n</zek-modal>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ZekModalModule }, { kind: "component", type: ZekModal, selector: "zek-modal", inputs: ["model", "showOk", "disabledOk", "showCancel", "autoHide", "title", "text", "icon", "okButtonText", "componentType", "large", "xl", "scrollable", "fullscreen", "showHeader", "showFooter"], outputs: ["onShown", "onHidden", "onOk", "onValidating"] }, { kind: "pipe", type: ZekSafePipe, name: "safe" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekFileViewer, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'zek-file-viewer', imports: [CommonModule, ZekModalModule, ZekSafePipe], providers: [], template: "<zek-modal #viewModal [fullscreen]=\"true\" [showHeader]=\"true\" [showFooter]=\"false\">\r\n    <ng-container *ngIf=\"src\">\r\n        <iframe id=\"office\" width=\"100%\" height=\"99%\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"\r\n            [src]=\"src | safe:'resourceUrl'\">\r\n        </iframe>\r\n    </ng-container>\r\n</zek-modal>" }]
+        }], propDecorators: { viewModal: [{
+                type: ViewChild,
+                args: ['viewModal', { static: true }]
+            }] } });
 
 function loadScript$1(onLoaded, url, nonce) {
     window.onGoogleLibraryLoad = () => {
@@ -4536,7 +4352,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class GridToolbarComponent {
+class ZekGridToolbar {
     constructor() {
         this._showEdit = true;
         this._editEnabled = true;
@@ -4632,12 +4448,12 @@ class GridToolbarComponent {
     restore() {
         this.onRestore.emit(this.model);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GridToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: GridToolbarComponent, selector: "zek-grid-toolbar", inputs: { model: "model", showEdit: "showEdit", editEnabled: "editEnabled", showDelete: "showDelete", deleteEnabled: "deleteEnabled", showRestore: "showRestore", restoreEnabled: "restoreEnabled", approveText: "approveText", showApprove: "showApprove", approveEnabled: "approveEnabled", disapproveText: "disapproveText", showDisapprove: "showDisapprove", disapproveEnabled: "disapproveEnabled" }, outputs: { onEdit: "onEdit", onDelete: "onDelete", onApprove: "onApprove", onDisapprove: "onDisapprove", onRestore: "onRestore" }, ngImport: i0, template: "<div class=\"btn-group btn-group-sm\" role=\"group\" aria-label=\"Table action group\">\r\n    <button *ngIf=\"showEdit\" (click)=\"edit()\" type=\"button\" class=\"btn btn-secondary\" title=\"{{ 'Action.Edit' | translate }}\" [disabled]=\"!editEnabled\">\r\n        <i class=\"fa-solid fa-pencil\"></i>\r\n    </button>\r\n    <button *ngIf=\"showApprove\" (click)=\"approve()\" type=\"button\" class=\"btn btn-success\" title=\"{{ approveText | translate }}\" [disabled]=\"!approveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-up\"></i>\r\n    </button>\r\n    <button *ngIf=\"showDisapprove\" (click)=\"disapprove()\" type=\"button\" class=\"btn btn-danger\" title=\"{{ disapproveText | translate }}\" [disabled]=\"!disapproveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-down\"></i>\r\n    </button>\r\n    <button *ngIf=\"showDelete\" (click)=\"delete()\" type=\"button\" class=\"btn btn-danger\" title=\"{{ 'Action.Delete' | translate }}\" [disabled]=\"!deleteEnabled\">\r\n        <i class=\"fa-solid fa-trash\"></i>\r\n    </button>\r\n    <button *ngIf=\"showRestore\" (click)=\"restore()\" type=\"button\" class=\"btn btn-success\" title=\"{{ 'Action.Restore' | translate }}\" [disabled]=\"!restoreEnabled\">\r\n        <i class=\"fa-solid fa-clock-rotate-left\"></i>\r\n    </button>\r\n    <ng-content></ng-content>\r\n</div>", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekGridToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekGridToolbar, isStandalone: true, selector: "zek-grid-toolbar", inputs: { model: "model", showEdit: "showEdit", editEnabled: "editEnabled", showDelete: "showDelete", deleteEnabled: "deleteEnabled", showRestore: "showRestore", restoreEnabled: "restoreEnabled", approveText: "approveText", showApprove: "showApprove", approveEnabled: "approveEnabled", disapproveText: "disapproveText", showDisapprove: "showDisapprove", disapproveEnabled: "disapproveEnabled" }, outputs: { onEdit: "onEdit", onDelete: "onDelete", onApprove: "onApprove", onDisapprove: "onDisapprove", onRestore: "onRestore" }, ngImport: i0, template: "<div class=\"btn-group btn-group-sm\" role=\"group\" aria-label=\"Table action group\">\r\n    <button *ngIf=\"showEdit\" (click)=\"edit()\" type=\"button\" class=\"btn btn-secondary\" title=\"{{ 'Action.Edit' | translate }}\" [disabled]=\"!editEnabled\">\r\n        <i class=\"fa-solid fa-pencil\"></i>\r\n    </button>\r\n    <button *ngIf=\"showApprove\" (click)=\"approve()\" type=\"button\" class=\"btn btn-success\" title=\"{{ approveText | translate }}\" [disabled]=\"!approveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-up\"></i>\r\n    </button>\r\n    <button *ngIf=\"showDisapprove\" (click)=\"disapprove()\" type=\"button\" class=\"btn btn-danger\" title=\"{{ disapproveText | translate }}\" [disabled]=\"!disapproveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-down\"></i>\r\n    </button>\r\n    <button *ngIf=\"showDelete\" (click)=\"delete()\" type=\"button\" class=\"btn btn-danger\" title=\"{{ 'Action.Delete' | translate }}\" [disabled]=\"!deleteEnabled\">\r\n        <i class=\"fa-solid fa-trash\"></i>\r\n    </button>\r\n    <button *ngIf=\"showRestore\" (click)=\"restore()\" type=\"button\" class=\"btn btn-success\" title=\"{{ 'Action.Restore' | translate }}\" [disabled]=\"!restoreEnabled\">\r\n        <i class=\"fa-solid fa-clock-rotate-left\"></i>\r\n    </button>\r\n    <ng-content></ng-content>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GridToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekGridToolbar, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-grid-toolbar', template: "<div class=\"btn-group btn-group-sm\" role=\"group\" aria-label=\"Table action group\">\r\n    <button *ngIf=\"showEdit\" (click)=\"edit()\" type=\"button\" class=\"btn btn-secondary\" title=\"{{ 'Action.Edit' | translate }}\" [disabled]=\"!editEnabled\">\r\n        <i class=\"fa-solid fa-pencil\"></i>\r\n    </button>\r\n    <button *ngIf=\"showApprove\" (click)=\"approve()\" type=\"button\" class=\"btn btn-success\" title=\"{{ approveText | translate }}\" [disabled]=\"!approveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-up\"></i>\r\n    </button>\r\n    <button *ngIf=\"showDisapprove\" (click)=\"disapprove()\" type=\"button\" class=\"btn btn-danger\" title=\"{{ disapproveText | translate }}\" [disabled]=\"!disapproveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-down\"></i>\r\n    </button>\r\n    <button *ngIf=\"showDelete\" (click)=\"delete()\" type=\"button\" class=\"btn btn-danger\" title=\"{{ 'Action.Delete' | translate }}\" [disabled]=\"!deleteEnabled\">\r\n        <i class=\"fa-solid fa-trash\"></i>\r\n    </button>\r\n    <button *ngIf=\"showRestore\" (click)=\"restore()\" type=\"button\" class=\"btn btn-success\" title=\"{{ 'Action.Restore' | translate }}\" [disabled]=\"!restoreEnabled\">\r\n        <i class=\"fa-solid fa-clock-rotate-left\"></i>\r\n    </button>\r\n    <ng-content></ng-content>\r\n</div>" }]
+            args: [{ standalone: true, selector: 'zek-grid-toolbar', imports: [CommonModule, TranslateModule], template: "<div class=\"btn-group btn-group-sm\" role=\"group\" aria-label=\"Table action group\">\r\n    <button *ngIf=\"showEdit\" (click)=\"edit()\" type=\"button\" class=\"btn btn-secondary\" title=\"{{ 'Action.Edit' | translate }}\" [disabled]=\"!editEnabled\">\r\n        <i class=\"fa-solid fa-pencil\"></i>\r\n    </button>\r\n    <button *ngIf=\"showApprove\" (click)=\"approve()\" type=\"button\" class=\"btn btn-success\" title=\"{{ approveText | translate }}\" [disabled]=\"!approveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-up\"></i>\r\n    </button>\r\n    <button *ngIf=\"showDisapprove\" (click)=\"disapprove()\" type=\"button\" class=\"btn btn-danger\" title=\"{{ disapproveText | translate }}\" [disabled]=\"!disapproveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-down\"></i>\r\n    </button>\r\n    <button *ngIf=\"showDelete\" (click)=\"delete()\" type=\"button\" class=\"btn btn-danger\" title=\"{{ 'Action.Delete' | translate }}\" [disabled]=\"!deleteEnabled\">\r\n        <i class=\"fa-solid fa-trash\"></i>\r\n    </button>\r\n    <button *ngIf=\"showRestore\" (click)=\"restore()\" type=\"button\" class=\"btn btn-success\" title=\"{{ 'Action.Restore' | translate }}\" [disabled]=\"!restoreEnabled\">\r\n        <i class=\"fa-solid fa-clock-rotate-left\"></i>\r\n    </button>\r\n    <ng-content></ng-content>\r\n</div>" }]
         }], propDecorators: { model: [{
                 type: Input
             }], showEdit: [{
@@ -4676,43 +4492,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class GridToolbarBarComponent extends GridToolbarComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GridToolbarBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: GridToolbarBarComponent, selector: "zek-grid-toolbar-bar", usesInheritance: true, ngImport: i0, template: "<button type=\"button\" class=\"btn btn-light btn-sm\" data-bs-toggle=\"dropdown\">\r\n    <i class=\"fa-solid fa-ellipsis\"></i>\r\n</button>\r\n<ul class=\"dropdown-menu\">\r\n    <li><button *ngIf=\"showEdit\" (click)=\"edit()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!editEnabled\">\r\n        <i class=\"fa-solid fa-pencil\"></i> {{ 'Action.Edit' | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showApprove\" (click)=\"approve()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!approveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-up\"></i> {{ approveText | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showDisapprove\" (click)=\"disapprove()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!disapproveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-down\"></i> {{ disapproveText | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showDelete\" (click)=\"delete()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!deleteEnabled\">\r\n        <i class=\"fa-solid fa-trash\"></i> {{ 'Action.Delete' | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showRestore\" (click)=\"restore()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!restoreEnabled\">\r\n        <i class=\"fa-solid fa-clock-rotate-left\"></i> {{ 'Action.Restore' | translate }}\r\n    </button></li>\r\n    <ng-content></ng-content>\r\n</ul>", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+class ZekGridToolbarBar extends ZekGridToolbar {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekGridToolbarBar, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekGridToolbarBar, isStandalone: true, selector: "zek-grid-toolbar-bar", usesInheritance: true, ngImport: i0, template: "<button type=\"button\" class=\"btn btn-light btn-sm\" data-bs-toggle=\"dropdown\">\r\n    <i class=\"fa-solid fa-ellipsis\"></i>\r\n</button>\r\n<ul class=\"dropdown-menu\">\r\n    <li><button *ngIf=\"showEdit\" (click)=\"edit()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!editEnabled\">\r\n        <i class=\"fa-solid fa-pencil\"></i> {{ 'Action.Edit' | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showApprove\" (click)=\"approve()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!approveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-up\"></i> {{ approveText | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showDisapprove\" (click)=\"disapprove()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!disapproveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-down\"></i> {{ disapproveText | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showDelete\" (click)=\"delete()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!deleteEnabled\">\r\n        <i class=\"fa-solid fa-trash\"></i> {{ 'Action.Delete' | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showRestore\" (click)=\"restore()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!restoreEnabled\">\r\n        <i class=\"fa-solid fa-clock-rotate-left\"></i> {{ 'Action.Restore' | translate }}\r\n    </button></li>\r\n    <ng-content></ng-content>\r\n</ul>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GridToolbarBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekGridToolbarBar, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-grid-toolbar-bar', template: "<button type=\"button\" class=\"btn btn-light btn-sm\" data-bs-toggle=\"dropdown\">\r\n    <i class=\"fa-solid fa-ellipsis\"></i>\r\n</button>\r\n<ul class=\"dropdown-menu\">\r\n    <li><button *ngIf=\"showEdit\" (click)=\"edit()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!editEnabled\">\r\n        <i class=\"fa-solid fa-pencil\"></i> {{ 'Action.Edit' | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showApprove\" (click)=\"approve()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!approveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-up\"></i> {{ approveText | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showDisapprove\" (click)=\"disapprove()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!disapproveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-down\"></i> {{ disapproveText | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showDelete\" (click)=\"delete()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!deleteEnabled\">\r\n        <i class=\"fa-solid fa-trash\"></i> {{ 'Action.Delete' | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showRestore\" (click)=\"restore()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!restoreEnabled\">\r\n        <i class=\"fa-solid fa-clock-rotate-left\"></i> {{ 'Action.Restore' | translate }}\r\n    </button></li>\r\n    <ng-content></ng-content>\r\n</ul>" }]
-        }] });
-
-class GridToolbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GridToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: GridToolbarModule, declarations: [GridToolbarComponent,
-            GridToolbarBarComponent], imports: [CommonModule,
-            TranslateModule], exports: [GridToolbarComponent,
-            GridToolbarBarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GridToolbarModule, imports: [CommonModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: GridToolbarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule
-                    ],
-                    declarations: [
-                        GridToolbarComponent,
-                        GridToolbarBarComponent
-                    ],
-                    exports: [
-                        GridToolbarComponent,
-                        GridToolbarBarComponent
-                    ]
-                }]
+            args: [{ standalone: true, selector: 'zek-grid-toolbar-bar', imports: [CommonModule, TranslateModule], template: "<button type=\"button\" class=\"btn btn-light btn-sm\" data-bs-toggle=\"dropdown\">\r\n    <i class=\"fa-solid fa-ellipsis\"></i>\r\n</button>\r\n<ul class=\"dropdown-menu\">\r\n    <li><button *ngIf=\"showEdit\" (click)=\"edit()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!editEnabled\">\r\n        <i class=\"fa-solid fa-pencil\"></i> {{ 'Action.Edit' | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showApprove\" (click)=\"approve()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!approveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-up\"></i> {{ approveText | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showDisapprove\" (click)=\"disapprove()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!disapproveEnabled\">\r\n        <i class=\"fa-solid fa-thumbs-down\"></i> {{ disapproveText | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showDelete\" (click)=\"delete()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!deleteEnabled\">\r\n        <i class=\"fa-solid fa-trash\"></i> {{ 'Action.Delete' | translate }}\r\n    </button></li>\r\n    <li><button *ngIf=\"showRestore\" (click)=\"restore()\" type=\"button\" class=\"dropdown-item\" [disabled]=\"!restoreEnabled\">\r\n        <i class=\"fa-solid fa-clock-rotate-left\"></i> {{ 'Action.Restore' | translate }}\r\n    </button></li>\r\n    <ng-content></ng-content>\r\n</ul>" }]
         }] });
 
-class ListToolbarComponent {
+class ZekListToolbar {
     constructor(router) {
         this.router = router;
         this.printType = PrintType;
@@ -4784,12 +4573,12 @@ class ListToolbarComponent {
     exportExcel() {
         this.onExport.emit(1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ListToolbarComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ListToolbarComponent, selector: "zek-list-toolbar", inputs: { isFiltered: "isFiltered", showCreate: "showCreate", showFilter: "showFilter", showPrint: "showPrint", showSum: "showSum", showExport: "showExport" }, outputs: { onRefresh: "onRefresh", onFilter: "onFilter", onPrint: "onPrint", onSum: "onSum", onExport: "onExport" }, ngImport: i0, template: "<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar\">\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Action group\">\r\n        <button *ngIf=\"showCreate\" type=\"button\" class=\"btn btn-primary\" (click)=\"create()\"><i class=\"fa-solid fa-plus\"></i> {{ 'Action.Create' | translate }}</button>\r\n    </div>\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Filter group\">\r\n        <button *ngIf=\"showFilter\" type=\"button\" class=\"btn btn-secondary\" [ngClass]=\"{'btn-outline-success': isFiltered, 'btn-secondary': !isFiltered }\" (click)=\"filter()\" data-bs-toggle0=\"modal\" data-bs-backdrop0=\"static\" data-bs-target0=\"#filter-modal\"><i class=\"fa-solid fa-filter\"></i> {{ 'Action.Filter' | translate }}</button>\r\n        <button type=\"button\" class=\"btn btn-secondary\" title=\"{{ 'Action.Refresh' | translate }}\" (click)=\"refresh()\"><i class=\"fa-solid fa-rotate\"></i></button>\r\n    </div>\r\n    <div *ngIf=\"showPrint\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Print group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n            </button>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Show)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button></li>\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-file-pdf\"></i> {{ 'Action.Print' | translate }} PDF</button></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showSum\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Sum group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"sum()\"><i class=\"fa-solid fa-sigma\"></i> {{ 'Action.Sum' | translate }}</button>\r\n    </div>\r\n    <div *ngIf=\"showExport\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Export group\">\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button id=\"btn-group-export\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fa-solid fa-download\"></i> {{ 'Action.Export' | translate }}</button>\r\n            <ul class=\"dropdown-menu\" aria-labelledby=\"btn-group-export\">\r\n                <li><a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"exportExcel()\"><i class=\"fa-solid fa-file-excel\"></i> Excel</a></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekListToolbar, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekListToolbar, isStandalone: true, selector: "zek-list-toolbar", inputs: { isFiltered: "isFiltered", showCreate: "showCreate", showFilter: "showFilter", showPrint: "showPrint", showSum: "showSum", showExport: "showExport" }, outputs: { onRefresh: "onRefresh", onFilter: "onFilter", onPrint: "onPrint", onSum: "onSum", onExport: "onExport" }, ngImport: i0, template: "<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar\">\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Action group\">\r\n        <button *ngIf=\"showCreate\" type=\"button\" class=\"btn btn-primary\" (click)=\"create()\"><i class=\"fa-solid fa-plus\"></i> {{ 'Action.Create' | translate }}</button>\r\n    </div>\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Filter group\">\r\n        <button *ngIf=\"showFilter\" type=\"button\" class=\"btn btn-secondary\" [ngClass]=\"{'btn-outline-success': isFiltered, 'btn-secondary': !isFiltered }\" (click)=\"filter()\" data-bs-toggle0=\"modal\" data-bs-backdrop0=\"static\" data-bs-target0=\"#filter-modal\"><i class=\"fa-solid fa-filter\"></i> {{ 'Action.Filter' | translate }}</button>\r\n        <button type=\"button\" class=\"btn btn-secondary\" title=\"{{ 'Action.Refresh' | translate }}\" (click)=\"refresh()\"><i class=\"fa-solid fa-rotate\"></i></button>\r\n    </div>\r\n    <div *ngIf=\"showPrint\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Print group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n            </button>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Show)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button></li>\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-file-pdf\"></i> {{ 'Action.Print' | translate }} PDF</button></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showSum\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Sum group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"sum()\"><i class=\"fa-solid fa-sigma\"></i> {{ 'Action.Sum' | translate }}</button>\r\n    </div>\r\n    <div *ngIf=\"showExport\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Export group\">\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button id=\"btn-group-export\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fa-solid fa-download\"></i> {{ 'Action.Export' | translate }}</button>\r\n            <ul class=\"dropdown-menu\" aria-labelledby=\"btn-group-export\">\r\n                <li><a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"exportExcel()\"><i class=\"fa-solid fa-file-excel\"></i> Excel</a></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ListToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekListToolbar, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-list-toolbar', template: "<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar\">\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Action group\">\r\n        <button *ngIf=\"showCreate\" type=\"button\" class=\"btn btn-primary\" (click)=\"create()\"><i class=\"fa-solid fa-plus\"></i> {{ 'Action.Create' | translate }}</button>\r\n    </div>\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Filter group\">\r\n        <button *ngIf=\"showFilter\" type=\"button\" class=\"btn btn-secondary\" [ngClass]=\"{'btn-outline-success': isFiltered, 'btn-secondary': !isFiltered }\" (click)=\"filter()\" data-bs-toggle0=\"modal\" data-bs-backdrop0=\"static\" data-bs-target0=\"#filter-modal\"><i class=\"fa-solid fa-filter\"></i> {{ 'Action.Filter' | translate }}</button>\r\n        <button type=\"button\" class=\"btn btn-secondary\" title=\"{{ 'Action.Refresh' | translate }}\" (click)=\"refresh()\"><i class=\"fa-solid fa-rotate\"></i></button>\r\n    </div>\r\n    <div *ngIf=\"showPrint\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Print group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n            </button>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Show)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button></li>\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-file-pdf\"></i> {{ 'Action.Print' | translate }} PDF</button></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showSum\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Sum group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"sum()\"><i class=\"fa-solid fa-sigma\"></i> {{ 'Action.Sum' | translate }}</button>\r\n    </div>\r\n    <div *ngIf=\"showExport\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Export group\">\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button id=\"btn-group-export\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fa-solid fa-download\"></i> {{ 'Action.Export' | translate }}</button>\r\n            <ul class=\"dropdown-menu\" aria-labelledby=\"btn-group-export\">\r\n                <li><a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"exportExcel()\"><i class=\"fa-solid fa-file-excel\"></i> Excel</a></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }]
+            args: [{ standalone: true, selector: 'zek-list-toolbar', imports: [CommonModule, TranslateModule], template: "<div class=\"btn-toolbar\" role=\"toolbar\" aria-label=\"Toolbar\">\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Action group\">\r\n        <button *ngIf=\"showCreate\" type=\"button\" class=\"btn btn-primary\" (click)=\"create()\"><i class=\"fa-solid fa-plus\"></i> {{ 'Action.Create' | translate }}</button>\r\n    </div>\r\n    <div class=\"btn-group me-2\" role=\"group\" aria-label=\"Filter group\">\r\n        <button *ngIf=\"showFilter\" type=\"button\" class=\"btn btn-secondary\" [ngClass]=\"{'btn-outline-success': isFiltered, 'btn-secondary': !isFiltered }\" (click)=\"filter()\" data-bs-toggle0=\"modal\" data-bs-backdrop0=\"static\" data-bs-target0=\"#filter-modal\"><i class=\"fa-solid fa-filter\"></i> {{ 'Action.Filter' | translate }}</button>\r\n        <button type=\"button\" class=\"btn btn-secondary\" title=\"{{ 'Action.Refresh' | translate }}\" (click)=\"refresh()\"><i class=\"fa-solid fa-rotate\"></i></button>\r\n    </div>\r\n    <div *ngIf=\"showPrint\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Print group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button>\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button type=\"button\" class=\"btn btn-secondary dropdown-toggle dropdown-toggle-split\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                <span class=\"visually-hidden\">Toggle Dropdown</span>\r\n            </button>\r\n            <ul class=\"dropdown-menu\">\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Show)\"><i class=\"fa-solid fa-print\"></i> {{ 'Action.Print' | translate }}</button></li>\r\n                <li><button type=\"button\" class=\"dropdown-item\" (click)=\"print(printType.Pdf)\"><i class=\"fa-solid fa-file-pdf\"></i> {{ 'Action.Print' | translate }} PDF</button></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <div *ngIf=\"showSum\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Sum group\">\r\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"sum()\"><i class=\"fa-solid fa-sigma\"></i> {{ 'Action.Sum' | translate }}</button>\r\n    </div>\r\n    <div *ngIf=\"showExport\" class=\"btn-group me-2\" role=\"group\" aria-label=\"Export group\">\r\n        <div class=\"btn-group\" role=\"group\">\r\n            <button id=\"btn-group-export\" type=\"button\" class=\"btn btn-secondary dropdown-toggle\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\"><i class=\"fa-solid fa-download\"></i> {{ 'Action.Export' | translate }}</button>\r\n            <ul class=\"dropdown-menu\" aria-labelledby=\"btn-group-export\">\r\n                <li><a class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"exportExcel()\"><i class=\"fa-solid fa-file-excel\"></i> Excel</a></li>\r\n            </ul>\r\n        </div>\r\n    </div>\r\n    <ng-content></ng-content>\r\n</div>" }]
         }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { isFiltered: [{
                 type: Input
             }], showCreate: [{
@@ -4814,25 +4603,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class ListToolbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ListToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ListToolbarModule, declarations: [ListToolbarComponent], imports: [CommonModule,
-            TranslateModule], exports: [ListToolbarComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ListToolbarModule, imports: [CommonModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ListToolbarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule
-                    ],
-                    declarations: [ListToolbarComponent],
-                    exports: [ListToolbarComponent]
-                }]
-        }] });
-
 class LoadingInterceptor {
     constructor() {
         this.pendingRequests = 0;
@@ -4967,7 +4737,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 // export * from './loading-interceptor';
 
-class PageTitleComponent {
+class ZekPageTitle {
     constructor() {
         this._isEditPage = false;
     }
@@ -4977,12 +4747,12 @@ class PageTitleComponent {
     set isEditPage(v) {
         this._isEditPage = Convert.toBooleanProperty(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PageTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: PageTitleComponent, selector: "zek-page-title", inputs: { icon: "icon", title: "title", isEditPage: "isEditPage", modelId: "modelId" }, ngImport: i0, template: "<h1 class=\"h2 pt-3 pb-2 mb-3 border-bottom\">\r\n    <i *ngIf=\"icon\" class=\"{{icon}}\"></i><ng-container *ngIf=\"icon\">&nbsp;</ng-container>{{ title }}&nbsp;<ng-container *ngIf=\"isEditPage\">\r\n        <small class=\"text-muted\" *ngIf=\"modelId && modelId > 0 else elseBlock\">[<ng-container>{{ 'Action.Edit' | translate }}</ng-container>]</small>\r\n        <ng-template #elseBlock>\r\n            <small class=\"text-muted\">[<ng-container>{{ 'Action.Create' | translate }}</ng-container>]</small>\r\n        </ng-template>\r\n    </ng-container>\r\n</h1>", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPageTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekPageTitle, isStandalone: true, selector: "zek-page-title", inputs: { icon: "icon", title: "title", isEditPage: "isEditPage", modelId: "modelId" }, ngImport: i0, template: "<h1 class=\"h2 pt-3 pb-2 mb-3 border-bottom\">\r\n    <i *ngIf=\"icon\" class=\"{{icon}}\"></i><ng-container *ngIf=\"icon\">&nbsp;</ng-container>{{ title }}&nbsp;<ng-container *ngIf=\"isEditPage\">\r\n        <small class=\"text-muted\" *ngIf=\"modelId && modelId > 0 else elseBlock\">[<ng-container>{{ 'Action.Edit' | translate }}</ng-container>]</small>\r\n        <ng-template #elseBlock>\r\n            <small class=\"text-muted\">[<ng-container>{{ 'Action.Create' | translate }}</ng-container>]</small>\r\n        </ng-template>\r\n    </ng-container>\r\n</h1>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PageTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPageTitle, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-page-title', template: "<h1 class=\"h2 pt-3 pb-2 mb-3 border-bottom\">\r\n    <i *ngIf=\"icon\" class=\"{{icon}}\"></i><ng-container *ngIf=\"icon\">&nbsp;</ng-container>{{ title }}&nbsp;<ng-container *ngIf=\"isEditPage\">\r\n        <small class=\"text-muted\" *ngIf=\"modelId && modelId > 0 else elseBlock\">[<ng-container>{{ 'Action.Edit' | translate }}</ng-container>]</small>\r\n        <ng-template #elseBlock>\r\n            <small class=\"text-muted\">[<ng-container>{{ 'Action.Create' | translate }}</ng-container>]</small>\r\n        </ng-template>\r\n    </ng-container>\r\n</h1>" }]
+            args: [{ standalone: true, selector: 'zek-page-title', imports: [CommonModule, TranslateModule], template: "<h1 class=\"h2 pt-3 pb-2 mb-3 border-bottom\">\r\n    <i *ngIf=\"icon\" class=\"{{icon}}\"></i><ng-container *ngIf=\"icon\">&nbsp;</ng-container>{{ title }}&nbsp;<ng-container *ngIf=\"isEditPage\">\r\n        <small class=\"text-muted\" *ngIf=\"modelId && modelId > 0 else elseBlock\">[<ng-container>{{ 'Action.Edit' | translate }}</ng-container>]</small>\r\n        <ng-template #elseBlock>\r\n            <small class=\"text-muted\">[<ng-container>{{ 'Action.Create' | translate }}</ng-container>]</small>\r\n        </ng-template>\r\n    </ng-container>\r\n</h1>" }]
         }], propDecorators: { icon: [{
                 type: Input
             }], title: [{
@@ -4993,27 +4763,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class PageTitleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PageTitleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: PageTitleModule, declarations: [PageTitleComponent], imports: [CommonModule,
-            TranslateModule], exports: [PageTitleComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PageTitleModule, imports: [CommonModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PageTitleModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule
-                    ],
-                    declarations: [
-                        PageTitleComponent,
-                    ],
-                    exports: [PageTitleComponent]
-                }]
-        }] });
-
 class ZekPager {
     constructor() {
         this.pager = new Pager();
@@ -5041,11 +4790,11 @@ class ZekPager {
         this.onPageSizeChange.emit(pageSize);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPager, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekPager, selector: "zek-pager", inputs: { pager: "pager", showPageSize: "showPageSize", pagerAlign: "pagerAlign" }, outputs: { onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange" }, ngImport: i0, template: "<div *ngIf=\"pager\" class=\"row\">\r\n    <div [ngClass]=\"{ 'col-sm-8': showPageSize, 'col-sm-12': !showPageSize}\">\r\n        <nav aria-label=\"Pagination\">\r\n            <ul class=\"pagination\" [ngClass]=\"{ 'justify-content-center': pagerAlign === 'center', 'justify-content-end': pagerAlign === 'end'}\">\r\n                <li [class.disabled]=\"pager.isFirstPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"pager.isFirstPage ? 'true' : null\" aria-label=\"First\">\r\n                        <span aria-hidden=\"true\">&laquo;&laquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li [class.disabled]=\"!pager.hasPreviousPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageNumber - 1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"!pager.hasPreviousPage ? 'true' : null\" aria-label=\"Previous\">\r\n                        <span aria-hidden=\"true\">&laquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li *ngFor=\"let page of pager.pages\" [class.active]=\"page === pager.pageNumber\" class=\"page-item\"><a class=\"page-link\" (click)=\"setPage(page)\" href=\"javascript:void(0)\">{{page}}</a></li>\r\n                <li [class.disabled]=\"!pager.hasNextPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageNumber + 1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"!pager.hasNextPage ? 'true' : null\" aria-label=\"Next\">\r\n                        <span aria-hidden=\"true\">&raquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li [class.disabled]=\"pager.isLastPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageCount)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"pager.isLastPage ? 'true' : null\" aria-label=\"Last\">\r\n                        <span aria-hidden=\"true\">&raquo;&raquo;</span>\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </nav>\r\n    </div>\r\n    <div class=\"col-sm-4\" *ngIf=\"showPageSize\">\r\n        <div class=\"float-end\">\r\n            <div class=\"dropdown\">\r\n                <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"page-size-button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                    {{pager.pageSize}}\r\n                </button>\r\n                <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"page-size-button\">\r\n                    <li><h6 class=\"dropdown-header\">{{ 'Pagination.PageSize' | translate }}</h6></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 10\" (click)=\"setPageSize(10)\" href=\"javascript:void(0)\">10</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 20\" (click)=\"setPageSize(20)\" href=\"javascript:void(0)\">20</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 50\" (click)=\"setPageSize(50)\" href=\"javascript:void(0)\">50</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 100\" (click)=\"setPageSize(100)\" href=\"javascript:void(0)\">100</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 500\" (click)=\"setPageSize(500)\" href=\"javascript:void(0)\">500</a></li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n        <div class=\"float-end mt-2\">\r\n            {{pager.firstItemOnPage}} - {{pager.lastItemOnPage}} of {{pager.totalItemCount}} &nbsp;\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekPager, isStandalone: true, selector: "zek-pager", inputs: { pager: "pager", showPageSize: "showPageSize", pagerAlign: "pagerAlign" }, outputs: { onPageChange: "onPageChange", onPageSizeChange: "onPageSizeChange" }, ngImport: i0, template: "<div *ngIf=\"pager\" class=\"row\">\r\n    <div [ngClass]=\"{ 'col-sm-8': showPageSize, 'col-sm-12': !showPageSize}\">\r\n        <nav aria-label=\"Pagination\">\r\n            <ul class=\"pagination\" [ngClass]=\"{ 'justify-content-center': pagerAlign === 'center', 'justify-content-end': pagerAlign === 'end'}\">\r\n                <li [class.disabled]=\"pager.isFirstPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"pager.isFirstPage ? 'true' : null\" aria-label=\"First\">\r\n                        <span aria-hidden=\"true\">&laquo;&laquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li [class.disabled]=\"!pager.hasPreviousPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageNumber - 1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"!pager.hasPreviousPage ? 'true' : null\" aria-label=\"Previous\">\r\n                        <span aria-hidden=\"true\">&laquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li *ngFor=\"let page of pager.pages\" [class.active]=\"page === pager.pageNumber\" class=\"page-item\"><a class=\"page-link\" (click)=\"setPage(page)\" href=\"javascript:void(0)\">{{page}}</a></li>\r\n                <li [class.disabled]=\"!pager.hasNextPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageNumber + 1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"!pager.hasNextPage ? 'true' : null\" aria-label=\"Next\">\r\n                        <span aria-hidden=\"true\">&raquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li [class.disabled]=\"pager.isLastPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageCount)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"pager.isLastPage ? 'true' : null\" aria-label=\"Last\">\r\n                        <span aria-hidden=\"true\">&raquo;&raquo;</span>\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </nav>\r\n    </div>\r\n    <div class=\"col-sm-4\" *ngIf=\"showPageSize\">\r\n        <div class=\"float-end\">\r\n            <div class=\"dropdown\">\r\n                <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"page-size-button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                    {{pager.pageSize}}\r\n                </button>\r\n                <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"page-size-button\">\r\n                    <li><h6 class=\"dropdown-header\">{{ 'Pagination.PageSize' | translate }}</h6></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 10\" (click)=\"setPageSize(10)\" href=\"javascript:void(0)\">10</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 20\" (click)=\"setPageSize(20)\" href=\"javascript:void(0)\">20</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 50\" (click)=\"setPageSize(50)\" href=\"javascript:void(0)\">50</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 100\" (click)=\"setPageSize(100)\" href=\"javascript:void(0)\">100</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 500\" (click)=\"setPageSize(500)\" href=\"javascript:void(0)\">500</a></li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n        <div class=\"float-end mt-2\">\r\n            {{pager.firstItemOnPage}} - {{pager.lastItemOnPage}} of {{pager.totalItemCount}} &nbsp;\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPager, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-pager', template: "<div *ngIf=\"pager\" class=\"row\">\r\n    <div [ngClass]=\"{ 'col-sm-8': showPageSize, 'col-sm-12': !showPageSize}\">\r\n        <nav aria-label=\"Pagination\">\r\n            <ul class=\"pagination\" [ngClass]=\"{ 'justify-content-center': pagerAlign === 'center', 'justify-content-end': pagerAlign === 'end'}\">\r\n                <li [class.disabled]=\"pager.isFirstPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"pager.isFirstPage ? 'true' : null\" aria-label=\"First\">\r\n                        <span aria-hidden=\"true\">&laquo;&laquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li [class.disabled]=\"!pager.hasPreviousPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageNumber - 1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"!pager.hasPreviousPage ? 'true' : null\" aria-label=\"Previous\">\r\n                        <span aria-hidden=\"true\">&laquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li *ngFor=\"let page of pager.pages\" [class.active]=\"page === pager.pageNumber\" class=\"page-item\"><a class=\"page-link\" (click)=\"setPage(page)\" href=\"javascript:void(0)\">{{page}}</a></li>\r\n                <li [class.disabled]=\"!pager.hasNextPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageNumber + 1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"!pager.hasNextPage ? 'true' : null\" aria-label=\"Next\">\r\n                        <span aria-hidden=\"true\">&raquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li [class.disabled]=\"pager.isLastPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageCount)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"pager.isLastPage ? 'true' : null\" aria-label=\"Last\">\r\n                        <span aria-hidden=\"true\">&raquo;&raquo;</span>\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </nav>\r\n    </div>\r\n    <div class=\"col-sm-4\" *ngIf=\"showPageSize\">\r\n        <div class=\"float-end\">\r\n            <div class=\"dropdown\">\r\n                <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"page-size-button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                    {{pager.pageSize}}\r\n                </button>\r\n                <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"page-size-button\">\r\n                    <li><h6 class=\"dropdown-header\">{{ 'Pagination.PageSize' | translate }}</h6></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 10\" (click)=\"setPageSize(10)\" href=\"javascript:void(0)\">10</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 20\" (click)=\"setPageSize(20)\" href=\"javascript:void(0)\">20</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 50\" (click)=\"setPageSize(50)\" href=\"javascript:void(0)\">50</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 100\" (click)=\"setPageSize(100)\" href=\"javascript:void(0)\">100</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 500\" (click)=\"setPageSize(500)\" href=\"javascript:void(0)\">500</a></li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n        <div class=\"float-end mt-2\">\r\n            {{pager.firstItemOnPage}} - {{pager.lastItemOnPage}} of {{pager.totalItemCount}} &nbsp;\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
+            args: [{ standalone: true, selector: 'zek-pager', imports: [CommonModule, TranslateModule], template: "<div *ngIf=\"pager\" class=\"row\">\r\n    <div [ngClass]=\"{ 'col-sm-8': showPageSize, 'col-sm-12': !showPageSize}\">\r\n        <nav aria-label=\"Pagination\">\r\n            <ul class=\"pagination\" [ngClass]=\"{ 'justify-content-center': pagerAlign === 'center', 'justify-content-end': pagerAlign === 'end'}\">\r\n                <li [class.disabled]=\"pager.isFirstPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"pager.isFirstPage ? 'true' : null\" aria-label=\"First\">\r\n                        <span aria-hidden=\"true\">&laquo;&laquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li [class.disabled]=\"!pager.hasPreviousPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageNumber - 1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"!pager.hasPreviousPage ? 'true' : null\" aria-label=\"Previous\">\r\n                        <span aria-hidden=\"true\">&laquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li *ngFor=\"let page of pager.pages\" [class.active]=\"page === pager.pageNumber\" class=\"page-item\"><a class=\"page-link\" (click)=\"setPage(page)\" href=\"javascript:void(0)\">{{page}}</a></li>\r\n                <li [class.disabled]=\"!pager.hasNextPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageNumber + 1)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"!pager.hasNextPage ? 'true' : null\" aria-label=\"Next\">\r\n                        <span aria-hidden=\"true\">&raquo;</span>\r\n                    </a>\r\n                </li>\r\n                <li [class.disabled]=\"pager.isLastPage\" class=\"page-item\">\r\n                    <a class=\"page-link\" (click)=\"setPage(pager.pageCount)\" href=\"javascript:void(0)\" [attr.aria-disabled]=\"pager.isLastPage ? 'true' : null\" aria-label=\"Last\">\r\n                        <span aria-hidden=\"true\">&raquo;&raquo;</span>\r\n                    </a>\r\n                </li>\r\n            </ul>\r\n        </nav>\r\n    </div>\r\n    <div class=\"col-sm-4\" *ngIf=\"showPageSize\">\r\n        <div class=\"float-end\">\r\n            <div class=\"dropdown\">\r\n                <button class=\"btn btn-secondary dropdown-toggle\" type=\"button\" id=\"page-size-button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n                    {{pager.pageSize}}\r\n                </button>\r\n                <ul class=\"dropdown-menu dropdown-menu-end\" aria-labelledby=\"page-size-button\">\r\n                    <li><h6 class=\"dropdown-header\">{{ 'Pagination.PageSize' | translate }}</h6></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 10\" (click)=\"setPageSize(10)\" href=\"javascript:void(0)\">10</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 20\" (click)=\"setPageSize(20)\" href=\"javascript:void(0)\">20</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 50\" (click)=\"setPageSize(50)\" href=\"javascript:void(0)\">50</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 100\" (click)=\"setPageSize(100)\" href=\"javascript:void(0)\">100</a></li>\r\n                    <li><a class=\"dropdown-item\" [class.active]=\"pager.pageSize === 500\" (click)=\"setPageSize(500)\" href=\"javascript:void(0)\">500</a></li>\r\n                </ul>\r\n            </div>\r\n        </div>\r\n        <div class=\"float-end mt-2\">\r\n            {{pager.firstItemOnPage}} - {{pager.lastItemOnPage}} of {{pager.totalItemCount}} &nbsp;\r\n        </div>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { pager: [{
                 type: Input
             }], showPageSize: [{
@@ -5058,27 +4807,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Output
             }] } });
 
-class ZekPagerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPagerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ZekPagerModule, declarations: [ZekPager], imports: [CommonModule,
-            TranslateModule], exports: [ZekPager] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPagerModule, imports: [CommonModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPagerModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule
-                    ],
-                    declarations: [
-                        ZekPager,
-                    ],
-                    exports: [ZekPager]
-                }]
-        }] });
-
 class ZekFieldValidator {
     // @Input() field?: NgModel;
     constructor() {
@@ -5086,11 +4814,11 @@ class ZekFieldValidator {
             console.log(this.field.errors);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekFieldValidator, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekFieldValidator, selector: "zek-field-validator, [zek-field-validator]", inputs: { field: "field" }, host: { properties: { "class": "\"invalid-tooltip\"" } }, ngImport: i0, template: "<ng-container *ngIf=\"field\">\r\n    <ng-container *ngIf=\"field.invalid && (field.dirty || field.touched || field.formDirective?.submitted)\">\r\n        <ng-container *ngIf=\"field.errors\">\r\n            <ng-container *ngIf=\"field.errors.required\">{{ 'Validation.Required' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.minlength\">{{ 'Validation.MinLengthFormat' | translate:{ value: field.errors.minlength.requiredLength } }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.maxlength\">{{ 'Validation.MaxLengthFormat' | translate:{ value: field.errors.maxlength.requiredLength } }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.email\">{{ 'Validation.Pattern' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.pattern\">{{ 'Validation.Pattern' | translate }}</ng-container><!-- {{ field.errors.pattern.requiredPattern }} -->\r\n            <ng-container *ngIf=\"field.errors.mismatch\">{{ 'Validation.Mismatch' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.server\">{{field.errors.server}}</ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekFieldValidator, isStandalone: true, selector: "zek-field-validator, [zek-field-validator]", inputs: { field: "field" }, host: { properties: { "class": "\"invalid-tooltip\"" } }, ngImport: i0, template: "<ng-container *ngIf=\"field\">\r\n    <ng-container *ngIf=\"field.invalid && (field.dirty || field.touched || field.formDirective?.submitted)\">\r\n        <ng-container *ngIf=\"field.errors\">\r\n            <ng-container *ngIf=\"field.errors.required\">{{ 'Validation.Required' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.minlength\">{{ 'Validation.MinLengthFormat' | translate:{ value: field.errors.minlength.requiredLength } }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.maxlength\">{{ 'Validation.MaxLengthFormat' | translate:{ value: field.errors.maxlength.requiredLength } }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.email\">{{ 'Validation.Pattern' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.pattern\">{{ 'Validation.Pattern' | translate }}</ng-container><!-- {{ field.errors.pattern.requiredPattern }} -->\r\n            <ng-container *ngIf=\"field.errors.mismatch\">{{ 'Validation.Mismatch' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.server\">{{field.errors.server}}</ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekFieldValidator, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-field-validator, [zek-field-validator]', host: { '[class]': '"invalid-tooltip"' }, template: "<ng-container *ngIf=\"field\">\r\n    <ng-container *ngIf=\"field.invalid && (field.dirty || field.touched || field.formDirective?.submitted)\">\r\n        <ng-container *ngIf=\"field.errors\">\r\n            <ng-container *ngIf=\"field.errors.required\">{{ 'Validation.Required' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.minlength\">{{ 'Validation.MinLengthFormat' | translate:{ value: field.errors.minlength.requiredLength } }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.maxlength\">{{ 'Validation.MaxLengthFormat' | translate:{ value: field.errors.maxlength.requiredLength } }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.email\">{{ 'Validation.Pattern' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.pattern\">{{ 'Validation.Pattern' | translate }}</ng-container><!-- {{ field.errors.pattern.requiredPattern }} -->\r\n            <ng-container *ngIf=\"field.errors.mismatch\">{{ 'Validation.Mismatch' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.server\">{{field.errors.server}}</ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>" }]
+            args: [{ standalone: true, selector: 'zek-field-validator, [zek-field-validator]', host: { '[class]': '"invalid-tooltip"' }, imports: [CommonModule, TranslateModule], template: "<ng-container *ngIf=\"field\">\r\n    <ng-container *ngIf=\"field.invalid && (field.dirty || field.touched || field.formDirective?.submitted)\">\r\n        <ng-container *ngIf=\"field.errors\">\r\n            <ng-container *ngIf=\"field.errors.required\">{{ 'Validation.Required' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.minlength\">{{ 'Validation.MinLengthFormat' | translate:{ value: field.errors.minlength.requiredLength } }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.maxlength\">{{ 'Validation.MaxLengthFormat' | translate:{ value: field.errors.maxlength.requiredLength } }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.email\">{{ 'Validation.Pattern' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.pattern\">{{ 'Validation.Pattern' | translate }}</ng-container><!-- {{ field.errors.pattern.requiredPattern }} -->\r\n            <ng-container *ngIf=\"field.errors.mismatch\">{{ 'Validation.Mismatch' | translate }}</ng-container>\r\n            <ng-container *ngIf=\"field.errors.server\">{{field.errors.server}}</ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { field: [{
                 type: Input
             }] } });
@@ -5117,11 +4845,11 @@ class ZekPassword {
         this._type = this._type === 'password' ? 'text' : 'password';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPassword, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekPassword, selector: "zek-password", inputs: { name: "name", required: "required", minlength: "minlength", maxlength: "maxlength", model: "model" }, outputs: { onChange: "modelChange" }, ngImport: i0, template: "<div class=\"input-group has-validation\">\r\n    <input type=\"{{type}}\" class=\"form-control\" name=\"{{name}}\" id=\"{{name}}\" [attr.aria-describedby]=\"name+'-show'\"\r\n    [required]=\"required\" [minlength]=\"minlength\" [maxlength]=\"maxlength\"\r\n    [ngModel]=\"model\" (ngModelChange)=\"onChange.emit($event)\"\r\n    #password=\"ngModel\"\r\n    >\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" id=\"{{name}}-show\" (click)=\"showHide()\"><i class=\"fa-solid fa-eye\"></i></button>\r\n    <div zek-field-validator [field]=\"password\"></div>\r\n</div>", dependencies: [{ kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZekFieldValidator, selector: "zek-field-validator, [zek-field-validator]", inputs: ["field"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekPassword, isStandalone: true, selector: "zek-password", inputs: { name: "name", required: "required", minlength: "minlength", maxlength: "maxlength", model: "model" }, outputs: { onChange: "modelChange" }, ngImport: i0, template: "<div class=\"input-group has-validation\">\r\n    <input type=\"{{type}}\" class=\"form-control\" name=\"{{name}}\" id=\"{{name}}\" [attr.aria-describedby]=\"name+'-show'\"\r\n    [required]=\"required\" [minlength]=\"minlength\" [maxlength]=\"maxlength\"\r\n    [ngModel]=\"model\" (ngModelChange)=\"onChange.emit($event)\"\r\n    #password=\"ngModel\"\r\n    >\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" id=\"{{name}}-show\" (click)=\"showHide()\"><i class=\"fa-solid fa-eye\"></i></button>\r\n    <div zek-field-validator [field]=\"password\"></div>\r\n</div>", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$5.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$5.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZekFieldValidator, selector: "zek-field-validator, [zek-field-validator]", inputs: ["field"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekPassword, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-password', template: "<div class=\"input-group has-validation\">\r\n    <input type=\"{{type}}\" class=\"form-control\" name=\"{{name}}\" id=\"{{name}}\" [attr.aria-describedby]=\"name+'-show'\"\r\n    [required]=\"required\" [minlength]=\"minlength\" [maxlength]=\"maxlength\"\r\n    [ngModel]=\"model\" (ngModelChange)=\"onChange.emit($event)\"\r\n    #password=\"ngModel\"\r\n    >\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" id=\"{{name}}-show\" (click)=\"showHide()\"><i class=\"fa-solid fa-eye\"></i></button>\r\n    <div zek-field-validator [field]=\"password\"></div>\r\n</div>" }]
+            args: [{ standalone: true, selector: 'zek-password', imports: [FormsModule, ZekFieldValidator], template: "<div class=\"input-group has-validation\">\r\n    <input type=\"{{type}}\" class=\"form-control\" name=\"{{name}}\" id=\"{{name}}\" [attr.aria-describedby]=\"name+'-show'\"\r\n    [required]=\"required\" [minlength]=\"minlength\" [maxlength]=\"maxlength\"\r\n    [ngModel]=\"model\" (ngModelChange)=\"onChange.emit($event)\"\r\n    #password=\"ngModel\"\r\n    >\r\n    <button class=\"btn btn-outline-secondary\" type=\"button\" id=\"{{name}}-show\" (click)=\"showHide()\"><i class=\"fa-solid fa-eye\"></i></button>\r\n    <div zek-field-validator [field]=\"password\"></div>\r\n</div>" }]
         }], propDecorators: { name: [{
                 type: Input
             }], required: [{
@@ -5137,51 +4865,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 args: ['modelChange']
             }] } });
 
-class ValidatorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ValidatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ValidatorModule, declarations: [ZekFieldValidator], imports: [CommonModule,
-            TranslateModule], exports: [ZekFieldValidator] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ValidatorModule, imports: [CommonModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ValidatorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule,
-                    ],
-                    declarations: [
-                        ZekFieldValidator,
-                    ],
-                    exports: [ZekFieldValidator]
-                }]
-        }] });
-
-class PasswordModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: PasswordModule, declarations: [ZekPassword], imports: [CommonModule,
-            FormsModule,
-            ValidatorModule], exports: [ZekPassword] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PasswordModule, imports: [CommonModule,
-            FormsModule,
-            ValidatorModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: PasswordModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ValidatorModule
-                    ],
-                    declarations: [
-                        ZekPassword,
-                    ],
-                    exports: [ZekPassword]
-                }]
-        }] });
-
 function clamp(v, min = 0, max = 100) {
     return Math.max(min, Math.min(max, v));
 }
@@ -5252,11 +4935,11 @@ class ZekProgress {
         this._background = v;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekProgress, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekProgress, selector: "zek-progress", inputs: { value: "value", showValue: "showValue", showTitle: "showTitle", striped: "striped", animated: "animated", label: "label", height: "height", background: "background" }, ngImport: i0, template: "<div class=\"progress\" [style.height.px]=\"height\" [title]=\"_title\" >\r\n    <div class=\"progress-bar bg-{{background}}\" role=\"progressbar\"\r\n        [class.progress-bar-striped]=\"striped || animated\"\r\n        [class.progress-bar-animated]=\"animated\"\r\n        [style.width.%]=\"value\"\r\n        [attr.aria-valuenow]=\"value\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\">\r\n        <ng-container *ngIf=\"showValue\">{{value}}%</ng-container>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekProgress, isStandalone: true, selector: "zek-progress", inputs: { value: "value", showValue: "showValue", showTitle: "showTitle", striped: "striped", animated: "animated", label: "label", height: "height", background: "background" }, ngImport: i0, template: "<div class=\"progress\" [style.height.px]=\"height\" [title]=\"_title\" >\r\n    <div class=\"progress-bar bg-{{background}}\" role=\"progressbar\"\r\n        [class.progress-bar-striped]=\"striped || animated\"\r\n        [class.progress-bar-animated]=\"animated\"\r\n        [style.width.%]=\"value\"\r\n        [attr.aria-valuenow]=\"value\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\">\r\n        <ng-container *ngIf=\"showValue\">{{value}}%</ng-container>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekProgress, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-progress', template: "<div class=\"progress\" [style.height.px]=\"height\" [title]=\"_title\" >\r\n    <div class=\"progress-bar bg-{{background}}\" role=\"progressbar\"\r\n        [class.progress-bar-striped]=\"striped || animated\"\r\n        [class.progress-bar-animated]=\"animated\"\r\n        [style.width.%]=\"value\"\r\n        [attr.aria-valuenow]=\"value\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\">\r\n        <ng-container *ngIf=\"showValue\">{{value}}%</ng-container>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
+            args: [{ standalone: true, selector: 'zek-progress', template: "<div class=\"progress\" [style.height.px]=\"height\" [title]=\"_title\" >\r\n    <div class=\"progress-bar bg-{{background}}\" role=\"progressbar\"\r\n        [class.progress-bar-striped]=\"striped || animated\"\r\n        [class.progress-bar-animated]=\"animated\"\r\n        [style.width.%]=\"value\"\r\n        [attr.aria-valuenow]=\"value\"\r\n        aria-valuemin=\"0\"\r\n        aria-valuemax=\"100\">\r\n        <ng-container *ngIf=\"showValue\">{{value}}%</ng-container>\r\n        <ng-content></ng-content>\r\n    </div>\r\n</div>", styles: [":host{display:block}\n"] }]
         }], propDecorators: { value: [{
                 type: Input
             }], showValue: [{
@@ -5275,27 +4958,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class ProgressModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ProgressModule, declarations: [ZekProgress], imports: [CommonModule,
-            TranslateModule], exports: [ZekProgress] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ProgressModule, imports: [CommonModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ProgressModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule
-                    ],
-                    declarations: [
-                        ZekProgress,
-                    ],
-                    exports: [ZekProgress]
-                }]
-        }] });
-
 let uniqueId$1 = 0;
 /**
  * Provider Expression that allows zek-radio to register as a ControlValueAccessor. This
@@ -5304,10 +4966,10 @@ let uniqueId$1 = 0;
  */
 const ZEK_RADIO_CONTROL_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => RadioComponent),
+    useExisting: forwardRef(() => ZekRadio),
     multi: true,
 };
-class RadioComponent extends CoreUiComponent {
+class ZekRadio extends CoreUiComponent {
     constructor(_changeDetector, _renderer, _elementRef) {
         super(_renderer, _elementRef);
         this._changeDetector = _changeDetector;
@@ -5389,12 +5051,12 @@ class RadioComponent extends CoreUiComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RadioComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: RadioComponent, selector: "zek-radio", inputs: { id: "id", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], inline: "inline", checked: "checked" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, providers: [ZEK_RADIO_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-check\" [class.form-check-inline]=\"inline\">\r\n    <input #input class=\"form-check-input\" type=\"radio\"\r\n    [id]=\"inputId\"\r\n    [checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    [attr.name]=\"name\"\r\n    [attr.value]=\"value\"\r\n    [required]=\"required\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    (change)=\"_onInputInteraction($event)\">\r\n    <label [for]=\"inputId\">\r\n        <ng-content></ng-content>\r\n    </label>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekRadio, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekRadio, isStandalone: true, selector: "zek-radio", inputs: { id: "id", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], inline: "inline", checked: "checked" }, host: { listeners: { "focus": "_inputElement.nativeElement.focus()" }, properties: { "attr.id": "id", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null", "attr.aria-describedby": "null" } }, providers: [ZEK_RADIO_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"form-check\" [class.form-check-inline]=\"inline\">\r\n    <input #input class=\"form-check-input\" type=\"radio\"\r\n    [id]=\"inputId\"\r\n    [checked]=\"checked\"\r\n    [disabled]=\"disabled\"\r\n    [attr.name]=\"name\"\r\n    [attr.value]=\"value\"\r\n    [required]=\"required\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-labelledby]=\"ariaLabelledby\"\r\n    [attr.aria-describedby]=\"ariaDescribedby\"\r\n    (change)=\"_onInputInteraction($event)\">\r\n    <label [for]=\"inputId\">\r\n        <ng-content></ng-content>\r\n    </label>\r\n</div>", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekRadio, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-radio', host: {
+            args: [{ standalone: true, selector: 'zek-radio', host: {
                         '[attr.id]': 'id',
                         '[attr.tabindex]': 'null',
                         '[attr.aria-label]': 'null',
@@ -5425,37 +5087,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class RadioModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RadioModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: RadioModule, declarations: [RadioComponent], imports: [CommonModule], exports: [RadioComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RadioModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: RadioModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                    ],
-                    declarations: [
-                        RadioComponent,
-                    ],
-                    exports: [RadioComponent]
-                }]
-        }] });
-
-class ReadOnlyDirective {
+class ZekReadOnlyDirective {
     constructor() {
         this._readonly = false;
     }
     readonly(v) {
         this._readonly = Convert.toBooleanProperty(v);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ReadOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: ReadOnlyDirective, selector: "[readonly],[readOnly]", inputs: { readonly: "readonly" }, host: { properties: { "attr.readonly": "_readonly ? \"\" : null" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekReadOnlyDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: ZekReadOnlyDirective, isStandalone: true, selector: "[readonly],[readOnly]", inputs: { readonly: "readonly" }, host: { properties: { "attr.readonly": "_readonly ? \"\" : null" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ReadOnlyDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekReadOnlyDirective, decorators: [{
             type: Directive,
             args: [{
+                    standalone: true,
                     selector: '[readonly],[readOnly]',
                     host: {
                         '[attr.readonly]': '_readonly ? "" : null'
@@ -5465,24 +5110,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class ReadOnlyModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ReadOnlyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ReadOnlyModule, declarations: [ReadOnlyDirective], imports: [CommonModule], exports: [ReadOnlyDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ReadOnlyModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ReadOnlyModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule
-                    ],
-                    declarations: [
-                        ReadOnlyDirective,
-                    ],
-                    exports: [ReadOnlyDirective]
-                }]
-        }] });
-
 function loadScript(siteKey, onLoaded, //ReCaptchaV2.ReCaptcha
 urlParams, url, nonce) {
     window.recaptchaloaded = () => {
@@ -5852,7 +5479,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class Select2Component {
+class ZekSelect2 {
     constructor() {
         this.elementId = RandomHelper.randomHex();
         this._data = [];
@@ -5995,10 +5622,10 @@ class Select2Component {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Select2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: Select2Component, selector: "zek-select2,[zek-select2]", inputs: { data: "data", textField: "textField", valueField: "valueField", placeholder: "placeholder", value: "value" }, outputs: { selectedItemChange: "selectedItemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-group position-relative\" id=\"dropdown-menu-container-{{elementId}}\">\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"{{placeholder}}\" data-bs-toggle=\"dropdown\" id=\"input-{{elementId}}\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange($event)\" (focus)=\"onFocus($event)\" (blur)=\"inputUnfocused()\">\r\n  <button class=\"btn btn-outline-secondary dropdown-toggle\" id=\"btn-{{elementId}}\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-reference=\"parent\"></button>\r\n  <ul class=\"dropdown-menu dropdown-menu-start w-100 scrollable-menu\" id=\"dropdown-menu-{{elementId}}\">\r\n    <ng-container *ngIf=\"textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{entry[textField]}}</a>\r\n      </li>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{textField}}</a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n<!-- <kendo-autocomplete\r\n  [data]=\"data\"\r\n  [filterable]=\"true\"\r\n  (valueChange)=\"valueChange($event)\"\r\n  (filterChange)=\"filterChange($event)\"\r\n  (open)=\"open()\"\r\n  (close)=\"close()\"\r\n  (focus)=\"focus()\"\r\n  (blur)=\"blur()\">\r\n</kendo-autocomplete> -->", styles: [".scrollable-menu{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSelect2, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekSelect2, selector: "zek-select2,[zek-select2]", inputs: { data: "data", textField: "textField", valueField: "valueField", placeholder: "placeholder", value: "value" }, outputs: { selectedItemChange: "selectedItemChange", valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"input-group position-relative\" id=\"dropdown-menu-container-{{elementId}}\">\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"{{placeholder}}\" data-bs-toggle=\"dropdown\" id=\"input-{{elementId}}\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange($event)\" (focus)=\"onFocus($event)\" (blur)=\"inputUnfocused()\">\r\n  <button class=\"btn btn-outline-secondary dropdown-toggle\" id=\"btn-{{elementId}}\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-reference=\"parent\"></button>\r\n  <ul class=\"dropdown-menu dropdown-menu-start w-100 scrollable-menu\" id=\"dropdown-menu-{{elementId}}\">\r\n    <ng-container *ngIf=\"textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{entry[textField]}}</a>\r\n      </li>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{textField}}</a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n<!-- <kendo-autocomplete\r\n  [data]=\"data\"\r\n  [filterable]=\"true\"\r\n  (valueChange)=\"valueChange($event)\"\r\n  (filterChange)=\"filterChange($event)\"\r\n  (open)=\"open()\"\r\n  (close)=\"close()\"\r\n  (focus)=\"focus()\"\r\n  (blur)=\"blur()\">\r\n</kendo-autocomplete> -->", styles: [".scrollable-menu{max-height:400px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Select2Component, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSelect2, decorators: [{
             type: Component,
             args: [{ selector: 'zek-select2,[zek-select2]', template: "<div class=\"input-group position-relative\" id=\"dropdown-menu-container-{{elementId}}\">\r\n  <input type=\"text\" class=\"form-control\" placeholder=\"{{placeholder}}\" data-bs-toggle=\"dropdown\" id=\"input-{{elementId}}\" [(ngModel)]=\"text\" (ngModelChange)=\"onTextChange($event)\" (focus)=\"onFocus($event)\" (blur)=\"inputUnfocused()\">\r\n  <button class=\"btn btn-outline-secondary dropdown-toggle\" id=\"btn-{{elementId}}\" type=\"button\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\" data-bs-reference=\"parent\"></button>\r\n  <ul class=\"dropdown-menu dropdown-menu-start w-100 scrollable-menu\" id=\"dropdown-menu-{{elementId}}\">\r\n    <ng-container *ngIf=\"textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{entry[textField]}}</a>\r\n      </li>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!textField\">\r\n      <li *ngFor=\"let entry of filteredData\">\r\n        <a href=\"javascript:void(0)\" (click)=\"selectItem(entry)\" class=\"dropdown-item\">{{textField}}</a>\r\n      </li>\r\n    </ng-container>\r\n  </ul>\r\n</div>\r\n<!-- <kendo-autocomplete\r\n  [data]=\"data\"\r\n  [filterable]=\"true\"\r\n  (valueChange)=\"valueChange($event)\"\r\n  (filterChange)=\"filterChange($event)\"\r\n  (open)=\"open()\"\r\n  (close)=\"close()\"\r\n  (focus)=\"focus()\"\r\n  (blur)=\"blur()\">\r\n</kendo-autocomplete> -->", styles: [".scrollable-menu{max-height:400px;overflow-y:auto}\n"] }]
         }], propDecorators: { data: [{
@@ -6019,8 +5646,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
 
 class Select2Module {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Select2Module, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: Select2Module, declarations: [Select2Component], imports: [CommonModule,
-            FormsModule], exports: [Select2Component] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: Select2Module, declarations: [ZekSelect2], imports: [CommonModule,
+            FormsModule], exports: [ZekSelect2] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: Select2Module, imports: [CommonModule,
             FormsModule] }); }
 }
@@ -6032,10 +5659,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                         FormsModule
                     ],
                     declarations: [
-                        Select2Component
+                        ZekSelect2
                     ],
                     exports: [
-                        Select2Component
+                        ZekSelect2
                     ],
                 }]
         }] });
@@ -6283,11 +5910,14 @@ class ZekSort {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSort, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: ZekSort, selector: "[zek-sort]", inputs: { header: "header", sort: "sort", asc: "asc" }, outputs: { sortChange: "sortChange", ascChange: "ascChange", onChange: "onChange" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.7", type: ZekSort, isStandalone: true, selector: "[zek-sort]", inputs: { header: "header", sort: "sort", asc: "asc" }, outputs: { sortChange: "sortChange", ascChange: "ascChange", onChange: "onChange" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSort, decorators: [{
             type: Directive,
-            args: [{ selector: '[zek-sort]' }]
+            args: [{
+                    standalone: true,
+                    selector: '[zek-sort]'
+                }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { header: [{
                 type: Input
             }], sortChange: [{
@@ -6360,11 +5990,11 @@ class ZekSortButtonGroup {
         this.onChange.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSortButtonGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekSortButtonGroup, selector: "zek-sort-button-group", inputs: { sort: "sort", asc: "asc", sortFields: "sortFields" }, outputs: { sortChange: "sortChange", ascChange: "ascChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"btn-group me-3\" role=\"group\" aria-label=\"Sort group\">\r\n    <button type=\"button\" class=\"btn btn-light\" (click)=\"ascDescClick()\">\r\n        <span *ngIf=\"asc === undefined || asc === null\"><i class=\"fa-solid fa-sort fa-fw\"></i></span>\r\n        <span *ngIf=\"asc === true\"><i class=\"fa-solid fa-arrow-down-z-a fa-fw\"></i></span>\r\n        <span *ngIf=\"asc === false\"><i class=\"fa-solid fa-arrow-up-z-a fa-fw\"></i></span>\r\n    </button>\r\n    <button *ngIf=\"sortFields && sortFields.length > 0\" class=\"btn btn-light dropdown-toggle\" type=\"button\" id=\"{{elementName}}\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n        <ng-container *ngIf=\"sortField; else elseFieldBlock\">{{ sortField.value | translate }}</ng-container>\r\n        <ng-template #elseFieldBlock>{{ 'Action.Sort' | translate }}</ng-template>\r\n    </button>\r\n    <ul *ngIf=\"sortFields && sortFields.length > 0\" class=\"dropdown-menu\" [attr.aria-labelledby]=\"elementName\">\r\n        <li><a *ngFor=\"let item of sortFields\" class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"sortFieldClick(item)\">{{ (item.value) | translate }}</a></li>\r\n    </ul>\r\n</div><i class=\"\"></i>", dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekSortButtonGroup, isStandalone: true, selector: "zek-sort-button-group", inputs: { sort: "sort", asc: "asc", sortFields: "sortFields" }, outputs: { sortChange: "sortChange", ascChange: "ascChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"btn-group me-3\" role=\"group\" aria-label=\"Sort group\">\r\n    <button type=\"button\" class=\"btn btn-light\" (click)=\"ascDescClick()\">\r\n        <span *ngIf=\"asc === undefined || asc === null\"><i class=\"fa-solid fa-sort fa-fw\"></i></span>\r\n        <span *ngIf=\"asc === true\"><i class=\"fa-solid fa-arrow-down-z-a fa-fw\"></i></span>\r\n        <span *ngIf=\"asc === false\"><i class=\"fa-solid fa-arrow-up-z-a fa-fw\"></i></span>\r\n    </button>\r\n    <button *ngIf=\"sortFields && sortFields.length > 0\" class=\"btn btn-light dropdown-toggle\" type=\"button\" id=\"{{elementName}}\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n        <ng-container *ngIf=\"sortField; else elseFieldBlock\">{{ sortField.value | translate }}</ng-container>\r\n        <ng-template #elseFieldBlock>{{ 'Action.Sort' | translate }}</ng-template>\r\n    </button>\r\n    <ul *ngIf=\"sortFields && sortFields.length > 0\" class=\"dropdown-menu\" [attr.aria-labelledby]=\"elementName\">\r\n        <li><a *ngFor=\"let item of sortFields\" class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"sortFieldClick(item)\">{{ (item.value) | translate }}</a></li>\r\n    </ul>\r\n</div><i class=\"\"></i>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSortButtonGroup, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-sort-button-group', template: "<div class=\"btn-group me-3\" role=\"group\" aria-label=\"Sort group\">\r\n    <button type=\"button\" class=\"btn btn-light\" (click)=\"ascDescClick()\">\r\n        <span *ngIf=\"asc === undefined || asc === null\"><i class=\"fa-solid fa-sort fa-fw\"></i></span>\r\n        <span *ngIf=\"asc === true\"><i class=\"fa-solid fa-arrow-down-z-a fa-fw\"></i></span>\r\n        <span *ngIf=\"asc === false\"><i class=\"fa-solid fa-arrow-up-z-a fa-fw\"></i></span>\r\n    </button>\r\n    <button *ngIf=\"sortFields && sortFields.length > 0\" class=\"btn btn-light dropdown-toggle\" type=\"button\" id=\"{{elementName}}\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n        <ng-container *ngIf=\"sortField; else elseFieldBlock\">{{ sortField.value | translate }}</ng-container>\r\n        <ng-template #elseFieldBlock>{{ 'Action.Sort' | translate }}</ng-template>\r\n    </button>\r\n    <ul *ngIf=\"sortFields && sortFields.length > 0\" class=\"dropdown-menu\" [attr.aria-labelledby]=\"elementName\">\r\n        <li><a *ngFor=\"let item of sortFields\" class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"sortFieldClick(item)\">{{ (item.value) | translate }}</a></li>\r\n    </ul>\r\n</div><i class=\"\"></i>" }]
+            args: [{ standalone: true, selector: 'zek-sort-button-group', imports: [CommonModule, TranslateModule], template: "<div class=\"btn-group me-3\" role=\"group\" aria-label=\"Sort group\">\r\n    <button type=\"button\" class=\"btn btn-light\" (click)=\"ascDescClick()\">\r\n        <span *ngIf=\"asc === undefined || asc === null\"><i class=\"fa-solid fa-sort fa-fw\"></i></span>\r\n        <span *ngIf=\"asc === true\"><i class=\"fa-solid fa-arrow-down-z-a fa-fw\"></i></span>\r\n        <span *ngIf=\"asc === false\"><i class=\"fa-solid fa-arrow-up-z-a fa-fw\"></i></span>\r\n    </button>\r\n    <button *ngIf=\"sortFields && sortFields.length > 0\" class=\"btn btn-light dropdown-toggle\" type=\"button\" id=\"{{elementName}}\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\r\n        <ng-container *ngIf=\"sortField; else elseFieldBlock\">{{ sortField.value | translate }}</ng-container>\r\n        <ng-template #elseFieldBlock>{{ 'Action.Sort' | translate }}</ng-template>\r\n    </button>\r\n    <ul *ngIf=\"sortFields && sortFields.length > 0\" class=\"dropdown-menu\" [attr.aria-labelledby]=\"elementName\">\r\n        <li><a *ngFor=\"let item of sortFields\" class=\"dropdown-item\" href=\"javascript:void(0)\" (click)=\"sortFieldClick(item)\">{{ (item.value) | translate }}</a></li>\r\n    </ul>\r\n</div><i class=\"\"></i>" }]
         }], ctorParameters: function () { return []; }, propDecorators: { sortChange: [{
                 type: Output
             }], ascChange: [{
@@ -6379,33 +6009,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 type: Input
             }] } });
 
-class ZekSortModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSortModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: ZekSortModule, declarations: [ZekSort,
-            ZekSortButtonGroup], imports: [CommonModule,
-            TranslateModule], exports: [ZekSort,
-            ZekSortButtonGroup] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSortModule, imports: [CommonModule,
-            TranslateModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekSortModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        TranslateModule
-                    ],
-                    declarations: [
-                        ZekSort,
-                        ZekSortButtonGroup
-                    ],
-                    exports: [
-                        ZekSort,
-                        ZekSortButtonGroup
-                    ]
-                }]
-        }] });
-
 //import { toDate } from '../../extensions';
 class TimePipe {
     constructor(datePipe) {
@@ -6796,7 +6399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
                 }]
         }] });
 
-class WizardComponent {
+class ZekWizard {
     constructor() {
         this.progress = 0;
         this.stepsArray = [
@@ -6845,52 +6448,25 @@ class WizardComponent {
     next() {
         this.step++;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: WizardComponent, selector: "zek-wizard", inputs: { steps: "steps", step: "step" }, ngImport: i0, template: "<div class=\"position-relative m-4\">\r\n  <div class=\"progress\" style=\"height: 1px;\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progress\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n  </div>\r\n  <!-- left: 33%!important -->\r\n  <!-- [style.left.%]=\"item.progress\" -->\r\n  <button *ngFor=\"let item of stepsArray\" [attr.style]=\"('width:2rem; height:2rem; left:' + item.progress + '%!important') | safe:'style'\" type=\"button\" class=\"position-absolute top-0 translate-middle btn btn-sm btn-primary rounded-pill\">{{ item.step }}</button>\r\n</div>", dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: ZekSafePipe, name: "safe" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekWizard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekWizard, isStandalone: true, selector: "zek-wizard", inputs: { steps: "steps", step: "step" }, ngImport: i0, template: "<div class=\"position-relative m-4\">\r\n  <div class=\"progress\" style=\"height: 1px;\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progress\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n  </div>\r\n  <!-- left: 33%!important -->\r\n  <!-- [style.left.%]=\"item.progress\" -->\r\n  <button *ngFor=\"let item of stepsArray\" [attr.style]=\"('width:2rem; height:2rem; left:' + item.progress + '%!important') | safe:'style'\" type=\"button\" class=\"position-absolute top-0 translate-middle btn btn-sm btn-primary rounded-pill\">{{ item.step }}</button>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: ZekSafePipe, name: "safe" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekWizard, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-wizard', template: "<div class=\"position-relative m-4\">\r\n  <div class=\"progress\" style=\"height: 1px;\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progress\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n  </div>\r\n  <!-- left: 33%!important -->\r\n  <!-- [style.left.%]=\"item.progress\" -->\r\n  <button *ngFor=\"let item of stepsArray\" [attr.style]=\"('width:2rem; height:2rem; left:' + item.progress + '%!important') | safe:'style'\" type=\"button\" class=\"position-absolute top-0 translate-middle btn btn-sm btn-primary rounded-pill\">{{ item.step }}</button>\r\n</div>" }]
+            args: [{ standalone: true, selector: 'zek-wizard', imports: [CommonModule, ZekSafePipe], template: "<div class=\"position-relative m-4\">\r\n  <div class=\"progress\" style=\"height: 1px;\">\r\n    <div class=\"progress-bar\" role=\"progressbar\" [style.width.%]=\"progress\" [attr.aria-valuenow]=\"progress\" aria-valuemin=\"0\" aria-valuemax=\"100\"></div>\r\n  </div>\r\n  <!-- left: 33%!important -->\r\n  <!-- [style.left.%]=\"item.progress\" -->\r\n  <button *ngFor=\"let item of stepsArray\" [attr.style]=\"('width:2rem; height:2rem; left:' + item.progress + '%!important') | safe:'style'\" type=\"button\" class=\"position-absolute top-0 translate-middle btn btn-sm btn-primary rounded-pill\">{{ item.step }}</button>\r\n</div>" }]
         }], propDecorators: { steps: [{
                 type: Input
             }], step: [{
                 type: Input
             }] } });
 
-class WizardComponent2 extends WizardComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardComponent2, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: WizardComponent2, selector: "zek-wizard2", usesInheritance: true, ngImport: i0, template: "<div class=\"m-2\">\r\n  <button *ngFor=\"let item of stepsArray\"\r\n    [class.btn-outline-secondary]=\"item.step >= steps\"\r\n    [class.btn-primary]=\"item.step < steps\"\r\n    type=\"button\"\r\n    class=\"btn btn-sm mr me-2\"></button>\r\n</div>", dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
+class ZekWizard2 extends ZekWizard {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekWizard2, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", type: ZekWizard2, isStandalone: true, selector: "zek-wizard2", usesInheritance: true, ngImport: i0, template: "<div class=\"m-2\">\r\n  <button *ngFor=\"let item of stepsArray\"\r\n    [class.btn-outline-secondary]=\"item.step >= steps\"\r\n    [class.btn-primary]=\"item.step < steps\"\r\n    type=\"button\"\r\n    class=\"btn btn-sm mr me-2\"></button>\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardComponent2, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: ZekWizard2, decorators: [{
             type: Component,
-            args: [{ selector: 'zek-wizard2', template: "<div class=\"m-2\">\r\n  <button *ngFor=\"let item of stepsArray\"\r\n    [class.btn-outline-secondary]=\"item.step >= steps\"\r\n    [class.btn-primary]=\"item.step < steps\"\r\n    type=\"button\"\r\n    class=\"btn btn-sm mr me-2\"></button>\r\n</div>" }]
-        }] });
-
-class WizardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.7", ngImport: i0, type: WizardModule, declarations: [WizardComponent,
-            WizardComponent2], imports: [CommonModule,
-            ZekSafeModule], exports: [WizardComponent,
-            WizardComponent2] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardModule, imports: [CommonModule,
-            ZekSafeModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: WizardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        ZekSafeModule
-                    ],
-                    declarations: [
-                        WizardComponent,
-                        WizardComponent2
-                    ],
-                    exports: [
-                        WizardComponent,
-                        WizardComponent2
-                    ]
-                }]
+            args: [{ standalone: true, selector: 'zek-wizard2', imports: [CommonModule], template: "<div class=\"m-2\">\r\n  <button *ngFor=\"let item of stepsArray\"\r\n    [class.btn-outline-secondary]=\"item.step >= steps\"\r\n    [class.btn-primary]=\"item.step < steps\"\r\n    type=\"button\"\r\n    class=\"btn btn-sm mr me-2\"></button>\r\n</div>" }]
         }] });
 
 // export * from './'
@@ -6903,5 +6479,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { API_BASE_URL, AgeModule, AgePipe, Alert, AlertModule, AlertService, AppBaseModule, ArrayHelper, AuthGuardService, AuthService, AutoCompleteDirective, AutoCompleteModule, Base64Helper, BaseAlert, BaseComponent, BaseService, BitwiseHelper, BootstrapHelper, ButtonBrowseComponent, ButtonBrowseModalBaseComponent, ButtonBrowseModalToolbarComponent, ButtonBrowseModule, CallbackModule, CallbackPipe, CardComponent, CardModule, Color, ComponentType, Convert, CoreComponent, CoreUiComponent, CrudService, CssHelper, CustomHttpParamEncoder, DATE_FORMAT, DateAgoModule, DateAgoPipe, DateHelper, DateValueAccessor, DatepickerModule, EditBase, EditBaseComponent, EditComponent, EditFormComponent, EditToolbarComponent, EditToolbarModule, FileBase, FileBytes, FileHelper, FileModule, FileSizePipe, FileString, FileViewerModule, FilterBase, FilterHelper, GOOGLE_CLIENT_ID, Gender, GridToolbarBarComponent, GridToolbarComponent, GridToolbarModule, HtmlHelper, HttpErrorHandler, JwtHelper, KeyPair, KeyPairChecked, KeyPairEx, KeyPairRequired, LANGUAGE, ListBase, ListBaseComponent, ListToolbarComponent, ListToolbarModule, MATCH_VALIDATOR, MatchValidator, MathHelper, Month, ObjectHelper, OverlapHelper, PageTitleComponent, PageTitleModule, PagedList, PagedListBase, Pager, PagerBase, PagerHelper, PasswordModule, PeriodRelation, PrintType, ProgressModule, RANGE_VALIDATOR, RECAPTCHA_SITE_KEY, RadioComponent, RadioModule, RandomHelper, RangeValidator, ReCaptchaService, ReadOnlyDirective, ReadOnlyModule, RecaptchaModule, Select2Component, Select2Module, StorageHelper, StringHelper, TimeHelper, TimeModule, TimePipe, TimerService, Toast, Tree, UrlHelper, ValidEventArgs, ValidationHelper, ValidatorModule, Validators, ValidatorsModule, WebApiClient, WebApiModule, WizardComponent, WizardComponent2, WizardModule, ZekAlert, ZekApproveModal, ZekDeleteModal, ZekDisapproveModal, ZekFieldValidator, ZekFileViewer, ZekFilterModal, ZekGoogleLoginButton, ZekGoogleLoginModule, ZekLoading, ZekLoadingModule, ZekModal, ZekModalModule, ZekPager, ZekPagerModule, ZekPassword, ZekProgress, ZekRestoreModal, ZekSafeModule, ZekSafePipe, ZekSelect2Multiple, ZekSelect2MultipleModule, ZekSelectModule, ZekSelectMultiple, ZekSort, ZekSortButtonGroup, ZekSortModule, ZekSubmitModal, ZekSumModal, ZekToast, ZekValidation, firstBy, handler, matchValidator, nullValidator, rangeValidator };
+export { API_BASE_URL, AgePipe, Alert, AlertService, AppBaseModule, ArrayHelper, AuthGuardService, AuthService, Base64Helper, BaseAlert, BaseComponent, BaseService, BitwiseHelper, BootstrapHelper, ButtonBrowseModalBaseComponent, ButtonBrowseModule, CardComponent, Color, ComponentType, Convert, CoreComponent, CoreUiComponent, CrudService, CssHelper, CustomHttpParamEncoder, DATE_FORMAT, DateAgoPipe, DateHelper, DateValueAccessor, DatepickerModule, EditBase, EditBaseComponent, EditComponent, EditFormComponent, FileBase, FileBytes, FileHelper, FileString, FilterBase, FilterHelper, GOOGLE_CLIENT_ID, Gender, HtmlHelper, HttpErrorHandler, JwtHelper, KeyPair, KeyPairChecked, KeyPairEx, KeyPairRequired, LANGUAGE, ListBase, ListBaseComponent, MATCH_VALIDATOR, MatchValidator, MathHelper, Month, ObjectHelper, OverlapHelper, PagedList, PagedListBase, Pager, PagerBase, PagerHelper, PeriodRelation, PrintType, RANGE_VALIDATOR, RECAPTCHA_SITE_KEY, RandomHelper, RangeValidator, ReCaptchaService, RecaptchaModule, Select2Module, StorageHelper, StringHelper, TimeHelper, TimeModule, TimePipe, TimerService, Toast, Tree, UrlHelper, ValidEventArgs, ValidationHelper, Validators, ValidatorsModule, WebApiClient, WebApiModule, ZekAlert, ZekApproveModal, ZekAutoComplete, ZekButtonBrowse, ZekButtonBrowseModalToolbar, ZekCallbackPipe, ZekDeleteModal, ZekDisapproveModal, ZekEditToolbar, ZekFieldValidator, ZekFileSizePipe, ZekFileViewer, ZekFilterModal, ZekGoogleLoginButton, ZekGoogleLoginModule, ZekGridToolbar, ZekGridToolbarBar, ZekListToolbar, ZekLoading, ZekLoadingModule, ZekModal, ZekModalModule, ZekPageTitle, ZekPager, ZekPassword, ZekProgress, ZekRadio, ZekReadOnlyDirective, ZekRestoreModal, ZekSafePipe, ZekSelect2, ZekSelect2Multiple, ZekSelect2MultipleModule, ZekSelectModule, ZekSelectMultiple, ZekSort, ZekSortButtonGroup, ZekSubmitModal, ZekSumModal, ZekToast, ZekValidation, ZekWizard, ZekWizard2, firstBy, handler, matchValidator, nullValidator, rangeValidator };
 //# sourceMappingURL=zek.mjs.map