@muziehdesign/components 18.2.0-next.0 → 18.2.0-next.1998

package/fesm2022/muziehdesign-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, Optional, Inject, Input, Pipe, EventEmitter, Output, Directive, HostListener, HostBinding, forwardRef, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { InjectionToken, Component, Inject, Input, Pipe, EventEmitter, Optional, Output, ContentChild, Directive, HostListener, HostBinding, forwardRef, ViewChild, NgModule, ElementRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/router';
@@ -9,21 +9,29 @@ import { filter, delay, take, repeat } from 'rxjs/operators';
 import { SubSink } from 'subsink';
 import * as i1$2 from '@angular/platform-browser';
 import { By } from '@angular/platform-browser';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule } from '@angular/forms';
+import * as i1$5 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgModel } from '@angular/forms';
 import * as i1$3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$4 from '@angular/cdk/dialog';
 import { DIALOG_DATA, DialogModule } from '@angular/cdk/dialog';
 import { MatCommonModule } from '@angular/material/core';
 
-const SVG_ICON_DEFAULT_OPTIONS = new InjectionToken('MzSvgIconOptions');
+const SVG_ICON_DEFAULT_OPTIONS = new InjectionToken('MzSvgIconOptions', {
+    providedIn: 'root',
+    factory: () => {
+        return {
+            svgIconDefinitionUrl: './assets/icondefinitions.svg'
+        };
+    }
+});
 
 class SvgIconComponent {
     constructor(config) {
         this.config = config;
         this.type = 'outline';
         this.size = 'medium';
-        this.fileUrl = config?.svgIconDefinitionUrl || './assets/icondefinitions.svg';
+        this.fileUrl = config.svgIconDefinitionUrl;
     }
     get url() {
         if (this.type) {
@@ -31,15 +39,13 @@ class SvgIconComponent {
         }
         return this.fileUrl + '#' + this.key;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SvgIconComponent, deps: [{ token: SVG_ICON_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: SvgIconComponent, isStandalone: true, selector: "mz-svg-icon", inputs: { key: "key", type: "type", size: "size" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-{{type}} icon-size-{{size}}\" aria-hidden=\"true\">\r\n    <use [attr.href]=\"url\" />\r\n</svg>", styles: [".icon{display:inline-block}.icon-size-medium{width:1.25rem;height:1.25rem}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SvgIconComponent, deps: [{ token: SVG_ICON_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: SvgIconComponent, isStandalone: true, selector: "mz-svg-icon", inputs: { key: "key", type: "type", size: "size" }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-{{type}} icon-size-{{size}}\" aria-hidden=\"true\">\n    <use [attr.href]=\"url\" />\n</svg>", styles: [".icon{display:inline-block}.icon-size-medium{width:1.25rem;height:1.25rem}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SvgIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-svg-icon', standalone: true, imports: [], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-{{type}} icon-size-{{size}}\" aria-hidden=\"true\">\r\n    <use [attr.href]=\"url\" />\r\n</svg>", styles: [".icon{display:inline-block}.icon-size-medium{width:1.25rem;height:1.25rem}\n"] }]
+            args: [{ selector: 'mz-svg-icon', standalone: true, imports: [], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" class=\"icon icon-{{type}} icon-size-{{size}}\" aria-hidden=\"true\">\n    <use [attr.href]=\"url\" />\n</svg>", styles: [".icon{display:inline-block}.icon-size-medium{width:1.25rem;height:1.25rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
                     type: Inject,
                     args: [SVG_ICON_DEFAULT_OPTIONS]
                 }] }], propDecorators: { key: [{
@@ -102,11 +108,11 @@ class SpinnerComponent {
         this.type = 'default'; // TODO: inverse will not exist one day
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: SpinnerComponent, isStandalone: true, selector: "mz-spinner", inputs: { size: "size", type: "type" }, ngImport: i0, template: "<div class=\"w-full\" [ngClass]=\"{'text-primary': type == 'default', 'text-white': type == 'inverse'}\">\r\n    <svg class=\"animate-spin m-auto\" [ngClass]=\"{'w-16 h-16': size == 'large', 'w-5 h-5': size == 'medium'}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n        fill=\"none\" viewBox=\"0 0 24 24\">\r\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n        <path class=\"opacity-75\" fill=\"currentColor\"\r\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\r\n        </path>\r\n    </svg>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: SpinnerComponent, isStandalone: true, selector: "mz-spinner", inputs: { size: "size", type: "type" }, ngImport: i0, template: "<div class=\"w-full\" [ngClass]=\"{'text-primary': type == 'default', 'text-white': type == 'inverse'}\">\n    <svg class=\"animate-spin m-auto\" [ngClass]=\"{'w-16 h-16': size == 'large', 'w-5 h-5': size == 'medium'}\" xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path class=\"opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n        </path>\n    </svg>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpinnerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-spinner', standalone: true, imports: [CommonModule], template: "<div class=\"w-full\" [ngClass]=\"{'text-primary': type == 'default', 'text-white': type == 'inverse'}\">\r\n    <svg class=\"animate-spin m-auto\" [ngClass]=\"{'w-16 h-16': size == 'large', 'w-5 h-5': size == 'medium'}\" xmlns=\"http://www.w3.org/2000/svg\"\r\n        fill=\"none\" viewBox=\"0 0 24 24\">\r\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\r\n        <path class=\"opacity-75\" fill=\"currentColor\"\r\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\r\n        </path>\r\n    </svg>\r\n</div>" }]
+            args: [{ selector: 'mz-spinner', standalone: true, imports: [CommonModule], template: "<div class=\"w-full\" [ngClass]=\"{'text-primary': type == 'default', 'text-white': type == 'inverse'}\">\n    <svg class=\"animate-spin m-auto\" [ngClass]=\"{'w-16 h-16': size == 'large', 'w-5 h-5': size == 'medium'}\" xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\" viewBox=\"0 0 24 24\">\n        <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n        <path class=\"opacity-75\" fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n        </path>\n    </svg>\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { size: [{
                 type: Input
             }], type: [{
@@ -136,13 +142,13 @@ class PaginationComponent {
         if (newValue == this.page || newValue < 1 || newValue > this.pageCount) {
             return;
         }
-        this.changePage.emit({ page: newValue, pageSize: this.pageSize });
+        this.changePage.emit({ pageNumber: newValue, pageSize: this.pageSize });
     }
     changePageSize(newValue) {
         if (Number(newValue) == this.pageSize) {
             return;
         }
-        this.changePage.emit({ page: 1, pageSize: Number(newValue) });
+        this.changePage.emit({ pageNumber: 1, pageSize: Number(newValue) });
     }
     updatePages(currentPage, lengthOfItems, currentPageSize) {
         const pageCount = Math.ceil(lengthOfItems / currentPageSize);
@@ -177,11 +183,11 @@ class PaginationComponent {
         this.pages = pageNumbers;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PaginationComponent, deps: [{ token: PAGINATION_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PaginationComponent, isStandalone: true, selector: "mz-pagination", inputs: { length: "length", page: "page", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\">\r\n    <nav class=\"pagination-nav\" aria-label=\"pagination\">\r\n        <button class=\"page-link\" [ngClass]=\"{'disabled': page == 1}\" (click)=\"changePageNumber(page-1)\">\r\n            <span class=\"sr-only\">Previous page</span>\r\n            <mz-svg-icon key=\"chevron-left\"></mz-svg-icon>\r\n        </button>\r\n        <ng-container *ngFor=\"let p of pages\">\r\n            <span class=\"page-ellipsis page-link disabled\" *ngIf=\"isEllipsis(p)\">...</span>\r\n            <button class=\"page-link\" [ngClass]=\"{'active': p == page}\" (click)=\"changePageNumber(p)\"\r\n                *ngIf=\"!isEllipsis(p)\">{{p}}</button>\r\n        </ng-container>\r\n        <button class=\"page-link\" [ngClass]=\"{'disabled': page == pageCount}\" (click)=\"changePageNumber(page+1)\">\r\n            <span class=\"sr-only\">Next page</span>\r\n            <mz-svg-icon key=\"chevron-right\"></mz-svg-icon>\r\n        </button>\r\n    </nav>\r\n    <div class=\"pagination-size\">\r\n        Show\r\n        <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\r\n            <option *ngFor=\"let size of pageSizeOptions\" [attr.selected]=\"pageSize == size ? true : null\"\r\n                [value]=\"size\">{{size}}</option>\r\n        </select>\r\n        per page\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PaginationComponent, isStandalone: true, selector: "mz-pagination", inputs: { length: "length", page: "page", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\">\n    <nav class=\"pagination-nav\" aria-label=\"pagination\">\n        <button class=\"page-link\" [ngClass]=\"{'disabled': page == 1}\" (click)=\"changePageNumber(page-1)\">\n            <span class=\"sr-only\">Previous page</span>\n            <mz-svg-icon key=\"chevron-left\"></mz-svg-icon>\n        </button>\n        <ng-container *ngFor=\"let p of pages\">\n            <span class=\"page-ellipsis page-link disabled\" *ngIf=\"isEllipsis(p)\">...</span>\n            <button class=\"page-link\" [ngClass]=\"{'active': p == page}\" (click)=\"changePageNumber(p)\"\n                *ngIf=\"!isEllipsis(p)\">{{p}}</button>\n        </ng-container>\n        <button class=\"page-link\" [ngClass]=\"{'disabled': page == pageCount}\" (click)=\"changePageNumber(page+1)\">\n            <span class=\"sr-only\">Next page</span>\n            <mz-svg-icon key=\"chevron-right\"></mz-svg-icon>\n        </button>\n    </nav>\n    <div class=\"pagination-size\">\n        Show\n        <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n            <option *ngFor=\"let size of pageSizeOptions\" [attr.selected]=\"pageSize == size ? true : null\"\n                [value]=\"size\">{{size}}</option>\n        </select>\n        per page\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-pagination', imports: [CommonModule, SvgIconComponent], standalone: true, template: "<div class=\"pagination-wrapper\">\r\n    <nav class=\"pagination-nav\" aria-label=\"pagination\">\r\n        <button class=\"page-link\" [ngClass]=\"{'disabled': page == 1}\" (click)=\"changePageNumber(page-1)\">\r\n            <span class=\"sr-only\">Previous page</span>\r\n            <mz-svg-icon key=\"chevron-left\"></mz-svg-icon>\r\n        </button>\r\n        <ng-container *ngFor=\"let p of pages\">\r\n            <span class=\"page-ellipsis page-link disabled\" *ngIf=\"isEllipsis(p)\">...</span>\r\n            <button class=\"page-link\" [ngClass]=\"{'active': p == page}\" (click)=\"changePageNumber(p)\"\r\n                *ngIf=\"!isEllipsis(p)\">{{p}}</button>\r\n        </ng-container>\r\n        <button class=\"page-link\" [ngClass]=\"{'disabled': page == pageCount}\" (click)=\"changePageNumber(page+1)\">\r\n            <span class=\"sr-only\">Next page</span>\r\n            <mz-svg-icon key=\"chevron-right\"></mz-svg-icon>\r\n        </button>\r\n    </nav>\r\n    <div class=\"pagination-size\">\r\n        Show\r\n        <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\r\n            <option *ngFor=\"let size of pageSizeOptions\" [attr.selected]=\"pageSize == size ? true : null\"\r\n                [value]=\"size\">{{size}}</option>\r\n        </select>\r\n        per page\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'mz-pagination', imports: [CommonModule, SvgIconComponent], standalone: true, template: "<div class=\"pagination-wrapper\">\n    <nav class=\"pagination-nav\" aria-label=\"pagination\">\n        <button class=\"page-link\" [ngClass]=\"{'disabled': page == 1}\" (click)=\"changePageNumber(page-1)\">\n            <span class=\"sr-only\">Previous page</span>\n            <mz-svg-icon key=\"chevron-left\"></mz-svg-icon>\n        </button>\n        <ng-container *ngFor=\"let p of pages\">\n            <span class=\"page-ellipsis page-link disabled\" *ngIf=\"isEllipsis(p)\">...</span>\n            <button class=\"page-link\" [ngClass]=\"{'active': p == page}\" (click)=\"changePageNumber(p)\"\n                *ngIf=\"!isEllipsis(p)\">{{p}}</button>\n        </ng-container>\n        <button class=\"page-link\" [ngClass]=\"{'disabled': page == pageCount}\" (click)=\"changePageNumber(page+1)\">\n            <span class=\"sr-only\">Next page</span>\n            <mz-svg-icon key=\"chevron-right\"></mz-svg-icon>\n        </button>\n    </nav>\n    <div class=\"pagination-size\">\n        Show\n        <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n            <option *ngFor=\"let size of pageSizeOptions\" [attr.selected]=\"pageSize == size ? true : null\"\n                [value]=\"size\">{{size}}</option>\n        </select>\n        per page\n    </div>\n</div>" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -202,17 +208,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
 class ResultTableComponent {
     constructor() {
         this.loading = false;
-        this.options = { hidePagination: false };
         this.pageChange = new EventEmitter();
+        this.options = { hidePagination: false, skipScrolling: false };
+    }
+    ngAfterViewInit() {
     }
     changePage(page, table) {
         this.pageChange.emit(page);
-        setTimeout(() => {
-            table.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        });
+        if (!this.options.skipScrolling) {
+            setTimeout(() => {
+                table.scrollIntoView({ behavior: 'smooth', block: 'start' });
+            });
+        }
     }
     searchAgain() {
-        this.pageChange.emit({ page: this.model?.page || 1, pageSize: this.model?.pageSize || 20 }); // TODO
+        this.pageChange.emit({ pageNumber: this.model?.pageNumber || 1, pageSize: this.model?.pageSize || 20 }); // TODO
     }
     get state() {
         if (this.loading) {
@@ -223,26 +233,33 @@ class ResultTableComponent {
         }
         return 'succeeded';
     }
+    get isEmpty() {
+        return !this.model || this.model.items.length === 0;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ResultTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: ResultTableComponent, isStandalone: true, selector: "mz-result-table", inputs: { loading: "loading", error: "error", model: "model", header: "header", body: "body", options: "options" }, outputs: { pageChange: "pageChange" }, ngImport: i0, template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\r\n    <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\r\n        <mz-spinner size=\"large\"></mz-spinner>\r\n    </div>\r\n    <table class=\"table\" [ngClass]=\"{'has-overlay' : state === 'loading'}\">\r\n        <caption *ngIf=\"state === 'succeeded' && model && model.results.length > 0\">\r\n            {{(model.page-1) * model.pageSize + 1}} - {{((model.page-1) * model.pageSize) + model.results.length}} of {{ model.totalResults }} results\r\n        </caption>\r\n        <thead>\r\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\r\n        </thead>\r\n        <tbody>\r\n            <ng-container *ngIf=\"state == 'succeeded' && model\">\r\n                <ng-container *ngFor=\"let result of model.results\">\r\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: result }\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"table-pagination\" *ngIf=\"state === 'succeeded' && model && model.results.length > 0 && !options?.hidePagination\">\r\n        <mz-pagination [length]=\"model.totalResults\" [page]=\"model.page\" [pageSize]=\"model.pageSize\"\r\n            (changePage)=\"changePage($event, tableRef)\"></mz-pagination>\r\n    </div>\r\n    <div class=\"state-message\" *ngIf=\"state == 'succeeded' && model?.results?.length === 0\">\r\n        <div class=\"title\">No results found</div>\r\n    </div>\r\n    <div class=\"state-message\" *ngIf=\"state == 'failed'\">\r\n        <div class=\"title\">\r\n            <mz-svg-icon key=\"x-circle\" type=\"solid\" class=\"text-danger\"></mz-svg-icon>\r\n            Something went wrong\r\n        </div>\r\n        <div>Unexpected error, <a (click)=\"searchAgain()\" class=\"link-action\">try searching again</a>.</div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "mz-pagination", inputs: ["length", "page", "pageSize", "pageSizeOptions"], outputs: ["changePage"] }, { kind: "component", type: SpinnerComponent, selector: "mz-spinner", inputs: ["size", "type"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: ResultTableComponent, isStandalone: true, selector: "mz-result-table", inputs: { loading: "loading", error: "error", model: "model", pageSizeOptions: "pageSizeOptions", options: "options" }, outputs: { pageChange: "pageChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\n    <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\n        <mz-spinner size=\"large\"></mz-spinner>\n    </div>\n    <table class=\"table\" [ngClass]=\"{'has-overlay' : state === 'loading'}\">\n        <caption *ngIf=\"state === 'succeeded' && model && model.items.length > 0\">\n            {{(model.pageNumber-1) * model.pageSize + 1}} - {{(model.pageNumber-1) * model.pageSize + model.items.length}} of {{ model.totalItems }} results\n        </caption>\n        <thead>\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        </thead>\n        <tbody>\n            @if(state === 'succeeded' && !isEmpty) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n            }\n        </tbody>\n    </table>\n    <div class=\"table-pagination\" *ngIf=\"state === 'succeeded' && !options?.hidePagination && !isEmpty\">\n        <mz-pagination [length]=\"model!.totalItems\" [page]=\"model!.pageNumber\" [pageSize]=\"model!.pageSize\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            (changePage)=\"changePage($event, tableRef)\"></mz-pagination>\n    </div>\n    <div class=\"state-message\" *ngIf=\"state == 'succeeded' && isEmpty\">\n        <div class=\"title\">No results found</div>\n    </div>\n    <div class=\"state-message\" *ngIf=\"state == 'failed'\">\n        <div class=\"title\">\n            <mz-svg-icon key=\"x-circle\" type=\"solid\" class=\"text-danger\"></mz-svg-icon>\n            Something went wrong\n        </div>\n        <div>Unexpected error, <a (click)=\"searchAgain()\" class=\"link-action\">try searching again</a>.</div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PaginationComponent, selector: "mz-pagination", inputs: ["length", "page", "pageSize", "pageSizeOptions"], outputs: ["changePage"] }, { kind: "component", type: SpinnerComponent, selector: "mz-spinner", inputs: ["size", "type"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ResultTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-result-table', imports: [CommonModule, PaginationComponent, SpinnerComponent, SvgIconComponent], standalone: true, template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\r\n    <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\r\n        <mz-spinner size=\"large\"></mz-spinner>\r\n    </div>\r\n    <table class=\"table\" [ngClass]=\"{'has-overlay' : state === 'loading'}\">\r\n        <caption *ngIf=\"state === 'succeeded' && model && model.results.length > 0\">\r\n            {{(model.page-1) * model.pageSize + 1}} - {{((model.page-1) * model.pageSize) + model.results.length}} of {{ model.totalResults }} results\r\n        </caption>\r\n        <thead>\r\n            <ng-container *ngTemplateOutlet=\"header\"></ng-container>\r\n        </thead>\r\n        <tbody>\r\n            <ng-container *ngIf=\"state == 'succeeded' && model\">\r\n                <ng-container *ngFor=\"let result of model.results\">\r\n                    <ng-container *ngTemplateOutlet=\"body; context: { $implicit: result }\"></ng-container>\r\n                </ng-container>\r\n            </ng-container>\r\n        </tbody>\r\n    </table>\r\n    <div class=\"table-pagination\" *ngIf=\"state === 'succeeded' && model && model.results.length > 0 && !options?.hidePagination\">\r\n        <mz-pagination [length]=\"model.totalResults\" [page]=\"model.page\" [pageSize]=\"model.pageSize\"\r\n            (changePage)=\"changePage($event, tableRef)\"></mz-pagination>\r\n    </div>\r\n    <div class=\"state-message\" *ngIf=\"state == 'succeeded' && model?.results?.length === 0\">\r\n        <div class=\"title\">No results found</div>\r\n    </div>\r\n    <div class=\"state-message\" *ngIf=\"state == 'failed'\">\r\n        <div class=\"title\">\r\n            <mz-svg-icon key=\"x-circle\" type=\"solid\" class=\"text-danger\"></mz-svg-icon>\r\n            Something went wrong\r\n        </div>\r\n        <div>Unexpected error, <a (click)=\"searchAgain()\" class=\"link-action\">try searching again</a>.</div>\r\n    </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'mz-result-table', imports: [CommonModule, PaginationComponent, SpinnerComponent, SvgIconComponent], standalone: true, template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\n    <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\n        <mz-spinner size=\"large\"></mz-spinner>\n    </div>\n    <table class=\"table\" [ngClass]=\"{'has-overlay' : state === 'loading'}\">\n        <caption *ngIf=\"state === 'succeeded' && model && model.items.length > 0\">\n            {{(model.pageNumber-1) * model.pageSize + 1}} - {{(model.pageNumber-1) * model.pageSize + model.items.length}} of {{ model.totalItems }} results\n        </caption>\n        <thead>\n            <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n        </thead>\n        <tbody>\n            @if(state === 'succeeded' && !isEmpty) {\n                <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\n            }\n        </tbody>\n    </table>\n    <div class=\"table-pagination\" *ngIf=\"state === 'succeeded' && !options?.hidePagination && !isEmpty\">\n        <mz-pagination [length]=\"model!.totalItems\" [page]=\"model!.pageNumber\" [pageSize]=\"model!.pageSize\"\n            [pageSizeOptions]=\"pageSizeOptions\"\n            (changePage)=\"changePage($event, tableRef)\"></mz-pagination>\n    </div>\n    <div class=\"state-message\" *ngIf=\"state == 'succeeded' && isEmpty\">\n        <div class=\"title\">No results found</div>\n    </div>\n    <div class=\"state-message\" *ngIf=\"state == 'failed'\">\n        <div class=\"title\">\n            <mz-svg-icon key=\"x-circle\" type=\"solid\" class=\"text-danger\"></mz-svg-icon>\n            Something went wrong\n        </div>\n        <div>Unexpected error, <a (click)=\"searchAgain()\" class=\"link-action\">try searching again</a>.</div>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { loading: [{
                 type: Input
             }], error: [{
                 type: Input
             }], model: [{
                 type: Input
-            }], header: [{
-                type: Input
-            }], body: [{
-                type: Input
-            }], options: [{
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['headerTemplate']
+            }], bodyTemplate: [{
+                type: ContentChild,
+                args: ['bodyTemplate']
+            }], pageSizeOptions: [{
                 type: Input
             }], pageChange: [{
                 type: Output
+            }], options: [{
+                type: Input
             }] } });
 
 class PageLoadingIndicatorComponent {
@@ -262,11 +279,11 @@ class PageLoadingIndicatorComponent {
         this.subs.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PageLoadingIndicatorComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PageLoadingIndicatorComponent, isStandalone: true, selector: "mz-page-loading-indicator", inputs: { isLoading: "isLoading" }, ngImport: i0, template: "<div class=\"progress-bar-container\" *ngIf=\"isLoading\">\r\n    <div class=\"progress-bar progress-bar-indeterminate\">\r\n        <div class=\"progress-bar-value\"></div>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PageLoadingIndicatorComponent, isStandalone: true, selector: "mz-page-loading-indicator", inputs: { isLoading: "isLoading" }, ngImport: i0, template: "<div class=\"progress-bar-container\" *ngIf=\"isLoading\">\n    <div class=\"progress-bar progress-bar-indeterminate\">\n        <div class=\"progress-bar-value\"></div>\n    </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PageLoadingIndicatorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-page-loading-indicator', imports: [CommonModule], standalone: true, template: "<div class=\"progress-bar-container\" *ngIf=\"isLoading\">\r\n    <div class=\"progress-bar progress-bar-indeterminate\">\r\n        <div class=\"progress-bar-value\"></div>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'mz-page-loading-indicator', imports: [CommonModule], standalone: true, template: "<div class=\"progress-bar-container\" *ngIf=\"isLoading\">\n    <div class=\"progress-bar progress-bar-indeterminate\">\n        <div class=\"progress-bar-value\"></div>\n    </div>\n</div>" }]
         }], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { isLoading: [{
                 type: Input
             }] } });
@@ -285,11 +302,11 @@ class PageHeaderComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PageHeaderComponent, deps: [{ token: i1$2.Title }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PageHeaderComponent, isStandalone: true, selector: "mz-page-header", inputs: { pageTitle: "pageTitle" }, ngImport: i0, template: "<header class=\"page-header\">\r\n    <h1>{{ pageTitle }}</h1>\r\n    <ng-content></ng-content>\r\n</header>", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PageHeaderComponent, isStandalone: true, selector: "mz-page-header", inputs: { pageTitle: "pageTitle" }, ngImport: i0, template: "<header class=\"page-header\">\n    <h1>{{ pageTitle }}</h1>\n    <ng-content></ng-content>\n</header>", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-page-header', standalone: true, template: "<header class=\"page-header\">\r\n    <h1>{{ pageTitle }}</h1>\r\n    <ng-content></ng-content>\r\n</header>" }]
+            args: [{ selector: 'mz-page-header', standalone: true, template: "<header class=\"page-header\">\n    <h1>{{ pageTitle }}</h1>\n    <ng-content></ng-content>\n</header>" }]
         }], ctorParameters: () => [{ type: i1$2.Title }], propDecorators: { pageTitle: [{
                 type: Input
             }] } });
@@ -374,11 +391,11 @@ class AlertComponent {
         return icon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: AlertComponent, isStandalone: true, selector: "mz-alert", inputs: { title: "title", type: "type", body: "body", footer: "footer" }, ngImport: i0, template: "<div [className]=\"'alert alert-' + type\">\r\n\r\n  <div>\r\n    <div class=\"alert-icon\">\r\n      <mz-svg-icon [key]=\"getAlertIcon()\" type=\"solid\"></mz-svg-icon>\r\n    </div>\r\n\r\n    <div class=\"alert-title\">\r\n      <strong>{{ title }}</strong>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"alert-body\" *ngIf=\"body\">\r\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"alert-footer\" *ngIf=\"footer\">\r\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n  </div>\r\n\r\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: AlertComponent, isStandalone: true, selector: "mz-alert", inputs: { title: "title", type: "type", body: "body", footer: "footer" }, ngImport: i0, template: "<div [className]=\"'alert alert-' + type\">\n\n  <div>\n    <div class=\"alert-icon\">\n      <mz-svg-icon [key]=\"getAlertIcon()\" type=\"solid\"></mz-svg-icon>\n    </div>\n\n    <div class=\"alert-title\">\n      <strong>{{ title }}</strong>\n    </div>\n  </div>\n\n  <div class=\"alert-body\" *ngIf=\"body\">\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n\n  <div class=\"alert-footer\" *ngIf=\"footer\">\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-alert', imports: [CommonModule, SvgIconComponent], standalone: true, template: "<div [className]=\"'alert alert-' + type\">\r\n\r\n  <div>\r\n    <div class=\"alert-icon\">\r\n      <mz-svg-icon [key]=\"getAlertIcon()\" type=\"solid\"></mz-svg-icon>\r\n    </div>\r\n\r\n    <div class=\"alert-title\">\r\n      <strong>{{ title }}</strong>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"alert-body\" *ngIf=\"body\">\r\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"alert-footer\" *ngIf=\"footer\">\r\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\r\n  </div>\r\n\r\n</div>" }]
+            args: [{ selector: 'mz-alert', imports: [CommonModule, SvgIconComponent], standalone: true, template: "<div [className]=\"'alert alert-' + type\">\n\n  <div>\n    <div class=\"alert-icon\">\n      <mz-svg-icon [key]=\"getAlertIcon()\" type=\"solid\"></mz-svg-icon>\n    </div>\n\n    <div class=\"alert-title\">\n      <strong>{{ title }}</strong>\n    </div>\n  </div>\n\n  <div class=\"alert-body\" *ngIf=\"body\">\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </div>\n\n  <div class=\"alert-footer\" *ngIf=\"footer\">\n    <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n  </div>\n\n</div>" }]
         }], ctorParameters: () => [], propDecorators: { title: [{
                 type: Input
             }], type: [{
@@ -558,9 +575,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
             }] } });
 
 class SubjectDisplayPipe {
-    transform(subject) {
+    transform(subject, defaultValue) {
         if (!subject) {
-            return '';
+            return defaultValue || null;
         }
         return subject.givenName && subject.familyName ? `${subject.givenName} ${subject.familyName}` : subject.userPrincipalName;
     }
@@ -581,15 +598,15 @@ class ButtonDirective {
         this.hostElement = hostElement;
         this.variant = 'secondary';
         this.busy = false;
-        this.svgContent = `
-    <svg class="button-loading-spinner" xmlns="http://www.w3.org/2000/svg" fill="none"
-        viewBox="0 0 24 24">
-        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
-        </circle>
-        <path class="opacity-75" fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
-        </path>
-    </svg>
+        this.svgContent = `
+    <svg class="button-loading-spinner" xmlns="http://www.w3.org/2000/svg" fill="none"
+        viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+        </circle>
+        <path class="opacity-75" fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+        </path>
+    </svg>
     `;
         this.subscription = new Subscription();
     }
@@ -606,7 +623,7 @@ class ButtonDirective {
     }
     attachOrDeattachSpinner() {
         if (this.busy) {
-            const loadingElement = this.renderer.createElement('div');
+            const loadingElement = this.renderer.createElement('span');
             loadingElement.innerHTML = this.svgContent;
             this.renderer.addClass(loadingElement, 'button-loading-overlay');
             this.renderer.appendChild(this.hostElement.nativeElement, loadingElement);
@@ -672,11 +689,11 @@ class WizardProgressTrackerComponent {
         this.toggled = !this.toggled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: WizardProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: WizardProgressTrackerComponent, isStandalone: true, selector: "mz-wizard-progress-tracker", inputs: { steps: "steps", currentStep: "currentStep" }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"wizard-progress-tracker\">\r\n    <div class=\"direction-container\">\r\n        <span class=\"steps-count\">Step {{ currentStep + 1 }} of {{ steps.length }}</span>\r\n        <div class=\"wizard-steps-container\" [ngClass]=\"{'toggled': toggled}\">\r\n            <div *ngFor=\"let step of steps; index as i;\" class=\"wizard-step\"\r\n                [ngClass]=\"{ 'previous': i < currentStep, 'current': i === currentStep, 'unvisited': i > currentStep }\">\r\n                <ng-container>\r\n                    <div class=\"wizard-step-icon-container\">\r\n                        <div class=\"spacer left\">\r\n                        </div>\r\n                        <div *ngIf=\"i > 0\" class=\"step-line left\"></div>\r\n\r\n                        <div *ngIf=\"i < currentStep\" class=\"wizard-step-icon\">\r\n                            <mz-svg-icon key=\"check-circle\" type=\"solid\">\r\n                            </mz-svg-icon>\r\n                        </div>\r\n                        <div *ngIf=\"i === currentStep\" class=\"wizard-step-icon\">\r\n                            <div class=\"step-inner-circle\"></div>\r\n                        </div>\r\n                        <div *ngIf=\"i > currentStep\" class=\"wizard-step-icon\">\r\n                        </div>\r\n\r\n                        <div *ngIf=\"i < (steps.length - 1)\" class=\"step-line step-line-right\"></div>\r\n                        <div class=\"spacer right\"></div>\r\n                    </div>\r\n                    <a *ngIf=\"i < currentStep\" class=\"step-desc\" (click)=\"goToStep(step)\"> {{\r\n                        step.name\r\n                        }}</a>\r\n                    <div *ngIf=\" i === currentStep\" class=\"step-desc\"> {{ step.name }}\r\n                    </div>\r\n                    <div *ngIf=\" i > currentStep\" class=\"step-desc\"> {{ step.name }}\r\n                    </div>\r\n                    <div class=\"toggable-icon\">\r\n                        <button *ngIf=\"!toggled\" (click)=\"toggle()\">\r\n                            <mz-svg-icon key=\"chevron-down\"></mz-svg-icon>\r\n                        </button>\r\n                        <button *ngIf=\"toggled\" (click)=\"toggle()\">\r\n                            <mz-svg-icon key=\"chevron-up\"></mz-svg-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: WizardProgressTrackerComponent, isStandalone: true, selector: "mz-wizard-progress-tracker", inputs: { steps: "steps", currentStep: "currentStep" }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"wizard-progress-tracker\">\n    <div class=\"direction-container\">\n        <span class=\"steps-count\">Step {{ currentStep + 1 }} of {{ steps.length }}</span>\n        <div class=\"wizard-steps-container\" [ngClass]=\"{'toggled': toggled}\">\n            <div *ngFor=\"let step of steps; index as i;\" class=\"wizard-step\"\n                [ngClass]=\"{ 'previous': i < currentStep, 'current': i === currentStep, 'unvisited': i > currentStep }\">\n                <ng-container>\n                    <div class=\"wizard-step-icon-container\">\n                        <div class=\"spacer left\">\n                        </div>\n                        <div *ngIf=\"i > 0\" class=\"step-line left\"></div>\n\n                        <div *ngIf=\"i < currentStep\" class=\"wizard-step-icon\">\n                            <mz-svg-icon key=\"check-circle\" type=\"solid\">\n                            </mz-svg-icon>\n                        </div>\n                        <div *ngIf=\"i === currentStep\" class=\"wizard-step-icon\">\n                            <div class=\"step-inner-circle\"></div>\n                        </div>\n                        <div *ngIf=\"i > currentStep\" class=\"wizard-step-icon\">\n                        </div>\n\n                        <div *ngIf=\"i < (steps.length - 1)\" class=\"step-line step-line-right\"></div>\n                        <div class=\"spacer right\"></div>\n                    </div>\n                    <a *ngIf=\"i < currentStep\" class=\"step-desc\" (click)=\"goToStep(step)\"> {{\n                        step.name\n                        }}</a>\n                    <div *ngIf=\" i === currentStep\" class=\"step-desc\"> {{ step.name }}\n                    </div>\n                    <div *ngIf=\" i > currentStep\" class=\"step-desc\"> {{ step.name }}\n                    </div>\n                    <div class=\"toggable-icon\">\n                        <button *ngIf=\"!toggled\" (click)=\"toggle()\">\n                            <mz-svg-icon key=\"chevron-down\"></mz-svg-icon>\n                        </button>\n                        <button *ngIf=\"toggled\" (click)=\"toggle()\">\n                            <mz-svg-icon key=\"chevron-up\"></mz-svg-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: WizardProgressTrackerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-wizard-progress-tracker', standalone: true, imports: [CommonModule, SvgIconComponent], template: "<div class=\"wizard-progress-tracker\">\r\n    <div class=\"direction-container\">\r\n        <span class=\"steps-count\">Step {{ currentStep + 1 }} of {{ steps.length }}</span>\r\n        <div class=\"wizard-steps-container\" [ngClass]=\"{'toggled': toggled}\">\r\n            <div *ngFor=\"let step of steps; index as i;\" class=\"wizard-step\"\r\n                [ngClass]=\"{ 'previous': i < currentStep, 'current': i === currentStep, 'unvisited': i > currentStep }\">\r\n                <ng-container>\r\n                    <div class=\"wizard-step-icon-container\">\r\n                        <div class=\"spacer left\">\r\n                        </div>\r\n                        <div *ngIf=\"i > 0\" class=\"step-line left\"></div>\r\n\r\n                        <div *ngIf=\"i < currentStep\" class=\"wizard-step-icon\">\r\n                            <mz-svg-icon key=\"check-circle\" type=\"solid\">\r\n                            </mz-svg-icon>\r\n                        </div>\r\n                        <div *ngIf=\"i === currentStep\" class=\"wizard-step-icon\">\r\n                            <div class=\"step-inner-circle\"></div>\r\n                        </div>\r\n                        <div *ngIf=\"i > currentStep\" class=\"wizard-step-icon\">\r\n                        </div>\r\n\r\n                        <div *ngIf=\"i < (steps.length - 1)\" class=\"step-line step-line-right\"></div>\r\n                        <div class=\"spacer right\"></div>\r\n                    </div>\r\n                    <a *ngIf=\"i < currentStep\" class=\"step-desc\" (click)=\"goToStep(step)\"> {{\r\n                        step.name\r\n                        }}</a>\r\n                    <div *ngIf=\" i === currentStep\" class=\"step-desc\"> {{ step.name }}\r\n                    </div>\r\n                    <div *ngIf=\" i > currentStep\" class=\"step-desc\"> {{ step.name }}\r\n                    </div>\r\n                    <div class=\"toggable-icon\">\r\n                        <button *ngIf=\"!toggled\" (click)=\"toggle()\">\r\n                            <mz-svg-icon key=\"chevron-down\"></mz-svg-icon>\r\n                        </button>\r\n                        <button *ngIf=\"toggled\" (click)=\"toggle()\">\r\n                            <mz-svg-icon key=\"chevron-up\"></mz-svg-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'mz-wizard-progress-tracker', standalone: true, imports: [CommonModule, SvgIconComponent], template: "<div class=\"wizard-progress-tracker\">\n    <div class=\"direction-container\">\n        <span class=\"steps-count\">Step {{ currentStep + 1 }} of {{ steps.length }}</span>\n        <div class=\"wizard-steps-container\" [ngClass]=\"{'toggled': toggled}\">\n            <div *ngFor=\"let step of steps; index as i;\" class=\"wizard-step\"\n                [ngClass]=\"{ 'previous': i < currentStep, 'current': i === currentStep, 'unvisited': i > currentStep }\">\n                <ng-container>\n                    <div class=\"wizard-step-icon-container\">\n                        <div class=\"spacer left\">\n                        </div>\n                        <div *ngIf=\"i > 0\" class=\"step-line left\"></div>\n\n                        <div *ngIf=\"i < currentStep\" class=\"wizard-step-icon\">\n                            <mz-svg-icon key=\"check-circle\" type=\"solid\">\n                            </mz-svg-icon>\n                        </div>\n                        <div *ngIf=\"i === currentStep\" class=\"wizard-step-icon\">\n                            <div class=\"step-inner-circle\"></div>\n                        </div>\n                        <div *ngIf=\"i > currentStep\" class=\"wizard-step-icon\">\n                        </div>\n\n                        <div *ngIf=\"i < (steps.length - 1)\" class=\"step-line step-line-right\"></div>\n                        <div class=\"spacer right\"></div>\n                    </div>\n                    <a *ngIf=\"i < currentStep\" class=\"step-desc\" (click)=\"goToStep(step)\"> {{\n                        step.name\n                        }}</a>\n                    <div *ngIf=\" i === currentStep\" class=\"step-desc\"> {{ step.name }}\n                    </div>\n                    <div *ngIf=\" i > currentStep\" class=\"step-desc\"> {{ step.name }}\n                    </div>\n                    <div class=\"toggable-icon\">\n                        <button *ngIf=\"!toggled\" (click)=\"toggle()\">\n                            <mz-svg-icon key=\"chevron-down\"></mz-svg-icon>\n                        </button>\n                        <button *ngIf=\"toggled\" (click)=\"toggle()\">\n                            <mz-svg-icon key=\"chevron-up\"></mz-svg-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { steps: [{
                 type: Input
             }], currentStep: [{
@@ -795,7 +812,7 @@ class DateTimeComponent {
                 useExisting: forwardRef(() => DateTimeComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"flex\">\r\n  <div class=\"field-control-combo\">\r\n    <input class=\"field-control\" type=\"text\" [value]=\"date\" (change)=\"updateDate($event)\" [min]=\"min\" [max]=\"max\"\r\n      [matDatepicker]=\"datePicker\" (dateChange)=\"updateDateEvent($event)\" [disabled]=\"disabled\" ngDefaultControl>\r\n    <div class=\"field-control-addon\">\r\n      <button class=\"button button-secondary button-icon\" type=\"button\" (click)=\"datePicker.open()\"\r\n        [disabled]=\"disabled\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\r\n          stroke-width=\"2\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\r\n        </svg>\r\n      </button>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n    </div>\r\n  </div>\r\n  <div class=\"field-control-group mt-1 ml-6\">\r\n    <input class=\"field-control\" type=\"time\" [value]=\"time\" (change)=\"updateTime($event)\"\r\n      ngDefaultControl [disabled]=\"disabled\">\r\n  </div>\r\n</div>\r\n", styles: ["input:disabled,button:disabled{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] }); }
+        ], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"flex\">\n  <div class=\"field-control-combo\">\n    <input class=\"field-control\" type=\"text\" [value]=\"date\" (change)=\"updateDate($event)\" [min]=\"min\" [max]=\"max\"\n      [matDatepicker]=\"datePicker\" (dateChange)=\"updateDateEvent($event)\" [disabled]=\"disabled\" ngDefaultControl>\n    <div class=\"field-control-addon\">\n      <button class=\"button button-secondary button-icon\" type=\"button\" (click)=\"datePicker.open()\"\n        [disabled]=\"disabled\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\n          stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n        </svg>\n      </button>\n      <mat-datepicker #datePicker></mat-datepicker>\n    </div>\n  </div>\n  <div class=\"field-control-group mt-1 ml-6\">\n    <input class=\"field-control\" type=\"time\" [value]=\"time\" (change)=\"updateTime($event)\"\n      ngDefaultControl [disabled]=\"disabled\">\n  </div>\n</div>\n", styles: ["input:disabled,button:disabled{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DateTimeComponent, decorators: [{
             type: Component,
@@ -805,7 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                             useExisting: forwardRef(() => DateTimeComponent),
                             multi: true,
                         },
-                    ], imports: [CommonModule, MatDatepickerModule], standalone: true, template: "<div class=\"flex\">\r\n  <div class=\"field-control-combo\">\r\n    <input class=\"field-control\" type=\"text\" [value]=\"date\" (change)=\"updateDate($event)\" [min]=\"min\" [max]=\"max\"\r\n      [matDatepicker]=\"datePicker\" (dateChange)=\"updateDateEvent($event)\" [disabled]=\"disabled\" ngDefaultControl>\r\n    <div class=\"field-control-addon\">\r\n      <button class=\"button button-secondary button-icon\" type=\"button\" (click)=\"datePicker.open()\"\r\n        [disabled]=\"disabled\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\r\n          stroke-width=\"2\">\r\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\r\n            d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\r\n        </svg>\r\n      </button>\r\n      <mat-datepicker #datePicker></mat-datepicker>\r\n    </div>\r\n  </div>\r\n  <div class=\"field-control-group mt-1 ml-6\">\r\n    <input class=\"field-control\" type=\"time\" [value]=\"time\" (change)=\"updateTime($event)\"\r\n      ngDefaultControl [disabled]=\"disabled\">\r\n  </div>\r\n</div>\r\n", styles: ["input:disabled,button:disabled{opacity:.6}\n"] }]
+                    ], imports: [CommonModule, MatDatepickerModule], standalone: true, template: "<div class=\"flex\">\n  <div class=\"field-control-combo\">\n    <input class=\"field-control\" type=\"text\" [value]=\"date\" (change)=\"updateDate($event)\" [min]=\"min\" [max]=\"max\"\n      [matDatepicker]=\"datePicker\" (dateChange)=\"updateDateEvent($event)\" [disabled]=\"disabled\" ngDefaultControl>\n    <div class=\"field-control-addon\">\n      <button class=\"button button-secondary button-icon\" type=\"button\" (click)=\"datePicker.open()\"\n        [disabled]=\"disabled\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\n          stroke-width=\"2\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n            d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n        </svg>\n      </button>\n      <mat-datepicker #datePicker></mat-datepicker>\n    </div>\n  </div>\n  <div class=\"field-control-group mt-1 ml-6\">\n    <input class=\"field-control\" type=\"time\" [value]=\"time\" (change)=\"updateTime($event)\"\n      ngDefaultControl [disabled]=\"disabled\">\n  </div>\n</div>\n", styles: ["input:disabled,button:disabled{opacity:.6}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { datepicker: [{
                 type: ViewChild,
                 args: ['datePicker']
@@ -825,11 +842,11 @@ class InlineMessageDialogComponent {
         this.body = this.data.body;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InlineMessageDialogComponent, deps: [{ token: DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: InlineMessageDialogComponent, isStandalone: true, selector: "mz-inline-message-dialog", ngImport: i0, template: "<div class=\"body\" *ngIf=\"body\">\r\n    <ng-content *ngTemplateOutlet=\"body\"></ng-content>\r\n</div>", styles: [":host{display:block;background:#fff;border-radius:8px;padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCommonModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DialogModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: InlineMessageDialogComponent, isStandalone: true, selector: "mz-inline-message-dialog", ngImport: i0, template: "<div class=\"body\" *ngIf=\"body\">\n    <ng-content *ngTemplateOutlet=\"body\"></ng-content>\n</div>", styles: [":host{display:block;background:#fff;border-radius:8px;padding:8px 16px}\n"], dependencies: [{ kind: "ngmodule", type: MatCommonModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InlineMessageDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-inline-message-dialog', imports: [MatCommonModule, CommonModule, RouterModule, DialogModule], standalone: true, template: "<div class=\"body\" *ngIf=\"body\">\r\n    <ng-content *ngTemplateOutlet=\"body\"></ng-content>\r\n</div>", styles: [":host{display:block;background:#fff;border-radius:8px;padding:8px 16px}\n"] }]
+            args: [{ selector: 'mz-inline-message-dialog', imports: [MatCommonModule, CommonModule, RouterModule, DialogModule], standalone: true, template: "<div class=\"body\" *ngIf=\"body\">\n    <ng-content *ngTemplateOutlet=\"body\"></ng-content>\n</div>", styles: [":host{display:block;background:#fff;border-radius:8px;padding:8px 16px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [DIALOG_DATA]
@@ -849,11 +866,11 @@ class InlineMessageComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InlineMessageComponent, deps: [{ token: i1$4.Dialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: InlineMessageComponent, isStandalone: true, selector: "mz-inline-message", inputs: { body: "body" }, ngImport: i0, template: "<div class=\"wrapper\">\r\n    <button type=\"button\" (click)=\"openDialog()\" class=\"inline-message-btn\">i</button>\r\n</div>", styles: [".wrapper,.title{display:inline}.inline-message-btn{cursor:pointer;border-radius:50%;color:#fff;background-color:#4b5563;width:20px;height:20px;text-align:center;margin:0 5px}\n"], dependencies: [{ kind: "ngmodule", type: MatCommonModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DialogModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: InlineMessageComponent, isStandalone: true, selector: "mz-inline-message", inputs: { body: "body" }, ngImport: i0, template: "<div class=\"wrapper\">\n    <button type=\"button\" (click)=\"openDialog()\" class=\"inline-message-btn\">i</button>\n</div>", styles: [".wrapper,.title{display:inline}.inline-message-btn{cursor:pointer;border-radius:50%;color:#fff;background-color:#4b5563;width:20px;height:20px;text-align:center;margin:0 5px}\n"], dependencies: [{ kind: "ngmodule", type: MatCommonModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: DialogModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InlineMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-inline-message', imports: [MatCommonModule, CommonModule, RouterModule, DialogModule], standalone: true, template: "<div class=\"wrapper\">\r\n    <button type=\"button\" (click)=\"openDialog()\" class=\"inline-message-btn\">i</button>\r\n</div>", styles: [".wrapper,.title{display:inline}.inline-message-btn{cursor:pointer;border-radius:50%;color:#fff;background-color:#4b5563;width:20px;height:20px;text-align:center;margin:0 5px}\n"] }]
+            args: [{ selector: 'mz-inline-message', imports: [MatCommonModule, CommonModule, RouterModule, DialogModule], standalone: true, template: "<div class=\"wrapper\">\n    <button type=\"button\" (click)=\"openDialog()\" class=\"inline-message-btn\">i</button>\n</div>", styles: [".wrapper,.title{display:inline}.inline-message-btn{cursor:pointer;border-radius:50%;color:#fff;background-color:#4b5563;width:20px;height:20px;text-align:center;margin:0 5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$4.Dialog }], propDecorators: { body: [{
                 type: Input
             }] } });
@@ -912,11 +929,11 @@ class InfiniteScrollComponent {
         this.itemSelected.emit(item);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: InfiniteScrollComponent, isStandalone: true, selector: "mz-infinite-scroll", inputs: { items: "items", isLoading: "isLoading", containerHeight: "containerHeight" }, outputs: { itemSelected: "itemSelected", loadMore: "loadMore" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"infinite-scroll-container overflow-auto\" [style.height]=\"containerHeight\" (scroll)=\"onContainerScroll($event)\">\r\n    <ng-container *ngIf=\"itemTemplate; else defaultItems\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-template #defaultItems>\r\n        <div *ngFor=\"let item of items\" class=\"scroll-item\" [ngClass]=\"{'scroll-item-selected': selectedItem === item}\" (click)=\"onItemClick(item)\">\r\n            {{ item.label }}\r\n        </div>\r\n    </ng-template>\r\n\r\n    <!-- Spinner -->\r\n    <div *ngIf=\"isLoading\" class=\"scroll-spinner-container\">\r\n        <mz-spinner size=\"medium\"></mz-spinner>\r\n    </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "mz-spinner", inputs: ["size", "type"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: InfiniteScrollComponent, isStandalone: true, selector: "mz-infinite-scroll", inputs: { items: "items", isLoading: "isLoading", containerHeight: "containerHeight" }, outputs: { itemSelected: "itemSelected", loadMore: "loadMore" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"infinite-scroll-container overflow-auto\" [style.height]=\"containerHeight\" (scroll)=\"onContainerScroll($event)\">\n    <ng-container *ngIf=\"itemTemplate; else defaultItems\">\n        <ng-container *ngFor=\"let item of items\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-template #defaultItems>\n        <div *ngFor=\"let item of items\" class=\"scroll-item\" [ngClass]=\"{'scroll-item-selected': selectedItem === item}\" (click)=\"onItemClick(item)\">\n            {{ item.label }}\n        </div>\n    </ng-template>\n\n    <!-- Spinner -->\n    <div *ngIf=\"isLoading\" class=\"scroll-spinner-container\">\n        <mz-spinner size=\"medium\"></mz-spinner>\n    </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "mz-spinner", inputs: ["size", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-infinite-scroll', standalone: true, imports: [CommonModule, SpinnerComponent], template: "<div class=\"infinite-scroll-container overflow-auto\" [style.height]=\"containerHeight\" (scroll)=\"onContainerScroll($event)\">\r\n    <ng-container *ngIf=\"itemTemplate; else defaultItems\">\r\n        <ng-container *ngFor=\"let item of items\">\r\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n        </ng-container>\r\n    </ng-container>\r\n    <ng-template #defaultItems>\r\n        <div *ngFor=\"let item of items\" class=\"scroll-item\" [ngClass]=\"{'scroll-item-selected': selectedItem === item}\" (click)=\"onItemClick(item)\">\r\n            {{ item.label }}\r\n        </div>\r\n    </ng-template>\r\n\r\n    <!-- Spinner -->\r\n    <div *ngIf=\"isLoading\" class=\"scroll-spinner-container\">\r\n        <mz-spinner size=\"medium\"></mz-spinner>\r\n    </div>\r\n</div>\r\n" }]
+            args: [{ selector: 'mz-infinite-scroll', standalone: true, imports: [CommonModule, SpinnerComponent], template: "<div class=\"infinite-scroll-container overflow-auto\" [style.height]=\"containerHeight\" (scroll)=\"onContainerScroll($event)\">\n    <ng-container *ngIf=\"itemTemplate; else defaultItems\">\n        <ng-container *ngFor=\"let item of items\">\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n        </ng-container>\n    </ng-container>\n    <ng-template #defaultItems>\n        <div *ngFor=\"let item of items\" class=\"scroll-item\" [ngClass]=\"{'scroll-item-selected': selectedItem === item}\" (click)=\"onItemClick(item)\">\n            {{ item.label }}\n        </div>\n    </ng-template>\n\n    <!-- Spinner -->\n    <div *ngIf=\"isLoading\" class=\"scroll-spinner-container\">\n        <mz-spinner size=\"medium\"></mz-spinner>\n    </div>\n</div>\n" }]
         }], propDecorators: { items: [{
                 type: Input
             }], isLoading: [{
@@ -1049,6 +1066,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                 }]
         }] });
 
+class InlineEditComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.isEditing = false;
+        this.busy = false;
+        this.layout = 'field';
+        this.save = new EventEmitter();
+    }
+    ngAfterViewInit() {
+        this.renderer.listen(this.ngModelElement?.nativeElement, 'focus', () => {
+            if (!this.isEditing) {
+                this.activate();
+            }
+        });
+    }
+    activate() {
+        this.isEditing = true;
+        this.ngModel.control.markAsTouched();
+        this.originalValue = this.ngModel.value;
+        setTimeout(() => {
+            this.ngModelElement?.nativeElement.focus();
+        });
+    }
+    submitForm() {
+        this.busy = true;
+        this.save.emit(this.ngModel.value);
+    }
+    cancelEdit() {
+        if (this.busy) {
+            return;
+        }
+        this.ngModel.reset(this.originalValue);
+        this.isEditing = false;
+    }
+    exitEdit() {
+        this.isEditing = false;
+        this.busy = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InlineEditComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: InlineEditComponent, isStandalone: true, selector: "mz-inline-edit", inputs: { label: "label", layout: "layout" }, outputs: { save: "save" }, queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "ngModelElement", first: true, predicate: NgModel, descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"inline-edit\">\n    <form class=\"flex gap-4\" [ngClass]=\"{ 'flex-col': layout === 'form', 'flex-row': layout === 'field' }\">\n        @if (isEditing || !label) {\n            <ng-content></ng-content>\n        } @else if (label && !isEditing) {\n            <button type=\"button\" class=\"flex gap-4 cursor-pointer\" (click)=\"activate()\">\n                <span>\n                    {{ label }}\n                </span>\n                <span class=\"text-secondary\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\">\n                        <path d=\"M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z\" />\n                    </svg>\n                </span>\n            </button>\n        }\n\n        @if (isEditing) {\n            <div class=\"flex gap-2\">\n                <!--<button type=\"submit\" mzButton [busy]=\"busy\" (click)=\"submitForm()\">Save</button>\n                <button type=\"button\" class=\"button button-tertiary\" (click)=\"cancelEdit()\">Cancel</button>-->\n                <button mzButton [busy]=\"busy\" type=\"submit\" (click)=\"submitForm()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                    </svg>\n                </button>\n                <button type=\"button\" mzButton variant=\"tertiary\" (click)=\"cancelEdit()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\" />\n                    </svg>\n                </button>\n            </div>\n        }\n    </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[mzButton]", inputs: ["variant", "busy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InlineEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mz-inline-edit', standalone: true, imports: [ButtonDirective, FormsModule, CommonModule], template: "<div class=\"inline-edit\">\n    <form class=\"flex gap-4\" [ngClass]=\"{ 'flex-col': layout === 'form', 'flex-row': layout === 'field' }\">\n        @if (isEditing || !label) {\n            <ng-content></ng-content>\n        } @else if (label && !isEditing) {\n            <button type=\"button\" class=\"flex gap-4 cursor-pointer\" (click)=\"activate()\">\n                <span>\n                    {{ label }}\n                </span>\n                <span class=\"text-secondary\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" class=\"size-4\">\n                        <path d=\"M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z\" />\n                    </svg>\n                </span>\n            </button>\n        }\n\n        @if (isEditing) {\n            <div class=\"flex gap-2\">\n                <!--<button type=\"submit\" mzButton [busy]=\"busy\" (click)=\"submitForm()\">Save</button>\n                <button type=\"button\" class=\"button button-tertiary\" (click)=\"cancelEdit()\">Cancel</button>-->\n                <button mzButton [busy]=\"busy\" type=\"submit\" (click)=\"submitForm()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n                    </svg>\n                </button>\n                <button type=\"button\" mzButton variant=\"tertiary\" (click)=\"cancelEdit()\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                        <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\" />\n                    </svg>\n                </button>\n            </div>\n        }\n    </form>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { label: [{
+                type: Input
+            }], layout: [{
+                type: Input
+            }], save: [{
+                type: Output
+            }], ngModel: [{
+                type: ContentChild,
+                args: [NgModel]
+            }], ngModelElement: [{
+                type: ContentChild,
+                args: [NgModel, { read: ElementRef }]
+            }] } });
+
 class MuziehComponentHarness {
 }
 
@@ -1079,7 +1154,7 @@ class ResultTableHarness extends MuziehComponentHarness {
         const contentDebugElement = this.resultTableDebugElement;
         const componentInstance = this.evaluateComponentInstance(contentDebugElement);
         const results = contentDebugElement.queryAll(By.css('tbody tr')).map((el) => el.queryAll(By.css('td')).map((td) => td.nativeElement.textContent?.trim()));
-        const { page, pageSize, totalResults: total } = componentInstance.model;
+        const { pageNumber: page, pageSize, totalItems: total } = componentInstance.model;
         return {
             results,
             page,
@@ -1123,5 +1198,5 @@ class ResultTableHarness extends MuziehComponentHarness {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, ButtonDirective, DateDisplayPipe, DateTimeComponent, EnumDisplayPipe, InfiniteScrollComponent, InlineMessageComponent, InlineMessageDialogComponent, MuziehComponentHarness, MuziehComponentsModule, PageHeaderComponent, PageLoadingIndicatorComponent, PaginationComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SpinnerComponent, SubjectDisplayPipe, SvgIconComponent, TimeValueAccessorDirective, TimeValueValidatorDirective, WizardProgressTrackerComponent };
+export { AlertComponent, ButtonDirective, DateDisplayPipe, DateTimeComponent, EnumDisplayPipe, InfiniteScrollComponent, InlineEditComponent, InlineMessageComponent, InlineMessageDialogComponent, MuziehComponentHarness, MuziehComponentsModule, PageHeaderComponent, PageLoadingIndicatorComponent, PaginationComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SpinnerComponent, SubjectDisplayPipe, SvgIconComponent, TimeValueAccessorDirective, TimeValueValidatorDirective, WizardProgressTrackerComponent };
 //# sourceMappingURL=muziehdesign-components.mjs.map