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

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 } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/router';
@@ -16,14 +16,21 @@ 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 +38,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 +107,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 +141,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 +182,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 +207,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 +232,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 +278,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 +301,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 +390,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 +574,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 +597,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 +622,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 +688,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 +811,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 +821,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 +841,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 +865,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 +928,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: [{
@@ -1079,7 +1095,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,