@muziehdesign/components 19.2.8-next.2413 → 19.2.8-next.2448

package/fesm2022/muziehdesign-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, HostBinding, Input, Inject, Component, Pipe, EventEmitter, Output, Optional, ContentChild, HostListener, Directive, forwardRef, ViewChild, NgModule, LOCALE_ID, ElementRef, Injectable, ViewEncapsulation, Host } from '@angular/core';
+import { InjectionToken, HostBinding, Input, Inject, Component, Pipe, EventEmitter, Output, Optional, ContentChild, HostListener, Directive, forwardRef, ViewChild, NgModule, LOCALE_ID, ElementRef, Injectable, ViewEncapsulation } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
 import * as i1$1 from '@angular/router';
@@ -17,7 +17,6 @@ import * as i3 from '@angular/cdk/overlay';
 import { OverlayModule, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
 import * as i1$5 from '@angular/cdk/a11y';
-import { CdkTrapFocus } from '@angular/cdk/a11y';
 
 const SVG_ICON_DEFAULT_OPTIONS = new InjectionToken('MzSvgIconOptions', {
     providedIn: 'root',
@@ -31,7 +30,10 @@ const SVG_ICON_DEFAULT_OPTIONS = new InjectionToken('MzSvgIconOptions', {
 class SvgIconComponent {
     constructor(config) {
         this.config = config;
-        this.type = 'outline';
+        /**
+         * @deprecated Pass in whole key instead.
+         */
+        this.type = '';
         this.size = 'medium';
         this.fileUrl = config.svgIconDefinitionUrl;
     }
@@ -42,14 +44,20 @@ class SvgIconComponent {
         return this.fileUrl + '#' + this.key;
     }
     get classes() {
-        return `icon icon-${this.type} icon-${this.size}`;
+        if (this.type) {
+            return `icon icon-${this.type} icon-${this.size}`;
+        }
+        return `icon icon-${this.size}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SvgIconComponent, deps: [{ token: SVG_ICON_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: SvgIconComponent, isStandalone: true, selector: "mz-svg-icon", inputs: { key: "key", type: "type", size: "size" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100%}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: SvgIconComponent, isStandalone: true, selector: "mz-svg-icon", inputs: { key: "key", type: "type", size: "size" }, host: { attributes: { "role": "img" }, properties: { "attr.data-icon-name": "key", "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100%}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: SvgIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-svg-icon', imports: [], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100%}\n"] }]
+            args: [{ selector: 'mz-svg-icon', host: {
+                        'role': 'img',
+                        '[attr.data-icon-name]': 'key',
+                    }, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n    <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SVG_ICON_DEFAULT_OPTIONS]
@@ -191,11 +199,11 @@ class PaginationComponent {
         this.pages = pageNumbers;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", 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: "19.2.8", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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-solid\"></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-solid\"></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: "19.2.8", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-pagination', imports: [CommonModule, SvgIconComponent], 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>" }]
+            args: [{ selector: 'mz-pagination', imports: [CommonModule, SvgIconComponent], 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-solid\"></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-solid\"></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
                 }, {
@@ -246,11 +254,11 @@ class ResultTableComponent {
         return !this.model || this.model.items.length === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ResultTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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\" type=\"primary\"></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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", 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\" type=\"primary\"></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-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: "19.2.8", ngImport: i0, type: ResultTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-result-table', imports: [CommonModule, PaginationComponent, SpinnerComponent, SvgIconComponent], 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\" type=\"primary\"></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" }]
+            args: [{ selector: 'mz-result-table', imports: [CommonModule, PaginationComponent, SpinnerComponent, SvgIconComponent], 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\" type=\"primary\"></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-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: [{
@@ -384,25 +392,25 @@ class AlertComponent {
     getAlertIcon() {
         let icon = '';
         if (this.type === 'info') {
-            icon = 'information-circle';
+            icon = 'information-circle-solid';
         }
         else if (this.type === 'success') {
-            icon = 'check-circle';
+            icon = 'check-circle-solid';
         }
         else if (this.type === 'error') {
-            icon = 'x-circle';
+            icon = 'x-circle-solid';
         }
         else if (this.type === 'warning') {
-            icon = 'exclamation';
+            icon = 'exclamation-triangle-solid';
         }
         return icon;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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()\"></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: "19.2.8", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-alert', imports: [CommonModule, SvgIconComponent], 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>" }]
+            args: [{ selector: 'mz-alert', imports: [CommonModule, SvgIconComponent], template: "<div [className]=\"'alert alert-' + type\">\n\n  <div>\n    <div class=\"alert-icon\">\n      <mz-svg-icon [key]=\"getAlertIcon()\"></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: [{
@@ -662,7 +670,7 @@ class ButtonDirective {
         return this.getChildElement('.button-loading-overlay');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ButtonDirective, isStandalone: true, selector: "[mzButton]", inputs: { variant: "variant", busy: "busy" }, host: { attributes: { "role": "button" }, properties: { "attr.tabindex": "0", "attr.aria-disabled": "busy", "class": "this.elementClass" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: ButtonDirective, isStandalone: true, selector: "[mzButton]", inputs: { variant: "variant", busy: "busy" }, host: { attributes: { "role": "button" }, properties: { "attr.tabindex": "0", "attr.aria-busy": "busy", "class": "this.elementClass" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonDirective, decorators: [{
             type: Directive,
@@ -672,7 +680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     host: {
                         role: 'button',
                         '[attr.tabindex]': '0',
-                        '[attr.aria-disabled]': 'busy',
+                        '[attr.aria-busy]': 'busy',
                     },
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { variant: [{
@@ -698,11 +706,11 @@ class WizardProgressTrackerComponent {
         this.toggled = !this.toggled;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: WizardProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", 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-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-solid\"></mz-svg-icon>\n                        </button>\n                        <button *ngIf=\"toggled\" (click)=\"toggle()\">\n                            <mz-svg-icon key=\"chevron-up-solid\"></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: "19.2.8", ngImport: i0, type: WizardProgressTrackerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-wizard-progress-tracker', 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" }]
+            args: [{ selector: 'mz-wizard-progress-tracker', 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-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-solid\"></mz-svg-icon>\n                        </button>\n                        <button *ngIf=\"toggled\" (click)=\"toggle()\">\n                            <mz-svg-icon key=\"chevron-up-solid\"></mz-svg-icon>\n                        </button>\n                    </div>\n                </ng-container>\n            </div>\n        </div>\n    </div>\n</div>\n" }]
         }], propDecorators: { steps: [{
                 type: Input
             }], currentStep: [{
@@ -1480,66 +1488,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                 }]
         }] });
 
-class MzDropdownComponent {
-    constructor() {
-        this.label = '';
-        this.open = false;
-    }
-    toggle() {
-        this.open = !this.open;
-    }
-    collapse() {
-        this.open = false;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: MzDropdownComponent, isStandalone: true, selector: "mz-dropdown", inputs: { label: "label", open: "open" }, ngImport: i0, template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggle()\" class=\"button button-secondary\" [class.active]=\"open\">\n    {{ label }}\n\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"mz-dropdown-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n    </svg>\n</button>\n<ng-template \n    cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" (overlayOutsideClick)=\"collapse()\" (detach)=\"collapse()\">\n    <div cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" class=\"mz-dropdown-body\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>", styles: [".mz-dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.mz-dropdown-body{background-color:var(--surface-bg);min-width:5rem;margin-top:.25rem;padding:.75rem;border-radius:var(--surface-border-radius);--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)!important}.mz-dropdown-item{display:block;width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem;text-align:left;border-radius:var(--button-border-radius)}.mz-dropdown-item:hover{background-color:var(--color-neutral-200)}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'mz-dropdown', imports: [CdkOverlayOrigin, CdkConnectedOverlay, CdkTrapFocus], encapsulation: ViewEncapsulation.None, template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggle()\" class=\"button button-secondary\" [class.active]=\"open\">\n    {{ label }}\n\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"mz-dropdown-icon\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n    </svg>\n</button>\n<ng-template \n    cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" (overlayOutsideClick)=\"collapse()\" (detach)=\"collapse()\">\n    <div cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" class=\"mz-dropdown-body\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>", styles: [".mz-dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.mz-dropdown-body{background-color:var(--surface-bg);min-width:5rem;margin-top:.25rem;padding:.75rem;border-radius:var(--surface-border-radius);--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)!important}.mz-dropdown-item{display:block;width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem;text-align:left;border-radius:var(--button-border-radius)}.mz-dropdown-item:hover{background-color:var(--color-neutral-200)}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], open: [{
-                type: Input
-            }] } });
-
-class MzDropdownItemDirective {
-    constructor(dropdown) {
-        this.dropdown = dropdown;
-    }
-    close() {
-        this.dropdown.collapse();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownItemDirective, deps: [{ token: MzDropdownComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.8", type: MzDropdownItemDirective, isStandalone: true, selector: "[mzDropdownItem]", host: { listeners: { "click": "close()" }, classAttribute: "mz-dropdown-item" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mzDropdownItem]',
-                    standalone: true,
-                    host: {
-                        'class': 'mz-dropdown-item',
-                        '(click)': 'close()'
-                    }
-                }]
-        }], ctorParameters: () => [{ type: MzDropdownComponent, decorators: [{
-                    type: Host
-                }] }] });
-
-class MzDropdownModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownModule, imports: [MzDropdownComponent, MzDropdownItemDirective], exports: [MzDropdownComponent, MzDropdownItemDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [MzDropdownComponent, MzDropdownItemDirective],
-                    exports: [MzDropdownComponent, MzDropdownItemDirective]
-                }]
-        }] });
-
 class FilterComponent {
     constructor() {
         this.label = 'Filter';
@@ -1617,11 +1565,11 @@ class OptionsFilterComponent {
         this.open = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OptionsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: OptionsFilterComponent, isStandalone: true, selector: "mz-options-filter", inputs: { options: "options", values: "values", label: "label", selected: "selected" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "form", first: true, predicate: NgForm, descendants: true }], ngImport: i0, template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n    @if (options) {\n        {{ filterLabel }}\n        <span class=\"dropdown-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"dropdown-icon\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n            </svg>\n        </span>\n    } @else {\n        <mz-spinner></mz-spinner>\n    }\n</button>\n<ng-template \n    cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <form #myForm=\"ngForm\" > \n            <div>\n                <label class=\"field\">\n                    <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search...\" name=\"search\" class=\"form-input\" autocomplete=\"off\" />\n                </label>\n                <div class=\"dropdown-options\">\n                    @for(option of filteredOptions; track option.value) {\n                        <label class=\"field-option\" [class.active]=\"selected === option.value\">\n                            <input class=\"form-radio\" type=\"radio\" [(ngModel)]=\"selected\" name=\"option\" [value]=\"option.value\" (ngModelChange)=\"apply()\"/>\n                            <span class=\"radio-label\">{{ option.label }}</span>\n                        </label>\n                    }\n                </div>\n            </div>\n            <div class=\"dropdown-buttons\">\n                <button type=\"button\" class=\"button button-tertiary\"  (click)=\"clear()\">Clear</button>\n            </div>\n        </form>\n    </div>\n</ng-template>\n", styles: [".dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.dropdown-body{background-color:var(--surface-bg);min-width:5rem;margin-top:.25rem;padding:.75rem;border-radius:var(--surface-border-radius);--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)!important}.dropdown-buttons{display:flex;margin-top:.25rem}.dropdown-options{max-height:15rem;overflow-y:auto}.dropdown-options{display:inline-flex;flex-direction:column;width:100%;gap:.25rem}.dropdown-options .field-option{display:inline-flex;position:relative;padding-top:.625rem;padding-bottom:.625rem;gap:.25rem;align-items:center;font-size:.875rem;line-height:1.25rem;font-weight:500;background-color:transparent;border-radius:var(--button-border-radius);cursor:pointer}.dropdown-options .field-option:hover{background-color:var(--color-neutral-200)}.dropdown-options .field-option.active{background-color:color-mix(in srgb,var(--color-neutral-400, #000) 65%,transparent)}.dropdown-options .field-option input[type=radio]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: SpinnerComponent, selector: "mz-spinner", inputs: ["size", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: OptionsFilterComponent, isStandalone: true, selector: "mz-options-filter", inputs: { options: "options", values: "values", label: "label", selected: "selected" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "form", first: true, predicate: NgForm, descendants: true }], ngImport: i0, template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n    @if (options) {\n        {{ filterLabel }}\n        <span class=\"dropdown-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"dropdown-icon\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n            </svg>\n        </span>\n    } @else {\n        <mz-spinner></mz-spinner>\n    }\n</button>\n<ng-template \n    cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <form #myForm=\"ngForm\" > \n            <div>\n                <label class=\"field\">\n                    <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search...\" name=\"search\" class=\"form-input\" autocomplete=\"off\" />\n                </label>\n                <div class=\"dropdown-options\">\n                    @for(option of filteredOptions; track option.value) {\n                        <label class=\"field-option\" [class.active]=\"selected === option.value\">\n                            <input class=\"form-radio\" type=\"radio\" [(ngModel)]=\"selected\" name=\"option\" [value]=\"option.value\" (ngModelChange)=\"apply()\"/>\n                            <span class=\"radio-label\">{{ option.label }}</span>\n                        </label>\n                    }\n                </div>\n            </div>\n            <div class=\"dropdown-buttons\">\n                <button type=\"button\" class=\"button button-tertiary\"  (click)=\"clear()\">Clear</button>\n            </div>\n        </form>\n    </div>\n</ng-template>\n", styles: [".dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.dropdown-body{background-color:var(--surface-bg);min-width:5rem;margin-top:.25rem;padding:.75rem;border-radius:var(--surface-border-radius);--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)!important;font-size:.875rem}.dropdown-buttons{display:flex;margin-top:.25rem}.dropdown-options{max-height:15rem;overflow-y:auto}.dropdown-options{display:inline-flex;flex-direction:column;width:100%;gap:.25rem}.dropdown-options .field-option{display:inline-flex;position:relative;padding-top:.625rem;padding-bottom:.625rem;gap:.25rem;align-items:center;font-size:.875rem;line-height:1.25rem;font-weight:500;background-color:transparent;border-radius:var(--button-border-radius);cursor:pointer}.dropdown-options .field-option:hover{background-color:var(--color-neutral-200)}.dropdown-options .field-option.active{background-color:color-mix(in srgb,var(--color-neutral-400, #000) 65%,transparent)}.dropdown-options .field-option input[type=radio]{display:none}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: SpinnerComponent, selector: "mz-spinner", inputs: ["size", "type"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OptionsFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mz-options-filter', imports: [FormsModule, CdkOverlayOrigin, CdkConnectedOverlay, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n    @if (options) {\n        {{ filterLabel }}\n        <span class=\"dropdown-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"dropdown-icon\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n            </svg>\n        </span>\n    } @else {\n        <mz-spinner></mz-spinner>\n    }\n</button>\n<ng-template \n    cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <form #myForm=\"ngForm\" > \n            <div>\n                <label class=\"field\">\n                    <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search...\" name=\"search\" class=\"form-input\" autocomplete=\"off\" />\n                </label>\n                <div class=\"dropdown-options\">\n                    @for(option of filteredOptions; track option.value) {\n                        <label class=\"field-option\" [class.active]=\"selected === option.value\">\n                            <input class=\"form-radio\" type=\"radio\" [(ngModel)]=\"selected\" name=\"option\" [value]=\"option.value\" (ngModelChange)=\"apply()\"/>\n                            <span class=\"radio-label\">{{ option.label }}</span>\n                        </label>\n                    }\n                </div>\n            </div>\n            <div class=\"dropdown-buttons\">\n                <button type=\"button\" class=\"button button-tertiary\"  (click)=\"clear()\">Clear</button>\n            </div>\n        </form>\n    </div>\n</ng-template>\n", styles: [".dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.dropdown-body{background-color:var(--surface-bg);min-width:5rem;margin-top:.25rem;padding:.75rem;border-radius:var(--surface-border-radius);--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)!important}.dropdown-buttons{display:flex;margin-top:.25rem}.dropdown-options{max-height:15rem;overflow-y:auto}.dropdown-options{display:inline-flex;flex-direction:column;width:100%;gap:.25rem}.dropdown-options .field-option{display:inline-flex;position:relative;padding-top:.625rem;padding-bottom:.625rem;gap:.25rem;align-items:center;font-size:.875rem;line-height:1.25rem;font-weight:500;background-color:transparent;border-radius:var(--button-border-radius);cursor:pointer}.dropdown-options .field-option:hover{background-color:var(--color-neutral-200)}.dropdown-options .field-option.active{background-color:color-mix(in srgb,var(--color-neutral-400, #000) 65%,transparent)}.dropdown-options .field-option input[type=radio]{display:none}\n"] }]
+            args: [{ selector: 'mz-options-filter', imports: [FormsModule, CdkOverlayOrigin, CdkConnectedOverlay, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n    @if (options) {\n        {{ filterLabel }}\n        <span class=\"dropdown-icon\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"dropdown-icon\">\n                <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n            </svg>\n        </span>\n    } @else {\n        <mz-spinner></mz-spinner>\n    }\n</button>\n<ng-template \n    cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <form #myForm=\"ngForm\" > \n            <div>\n                <label class=\"field\">\n                    <input type=\"text\" [(ngModel)]=\"search\" placeholder=\"Search...\" name=\"search\" class=\"form-input\" autocomplete=\"off\" />\n                </label>\n                <div class=\"dropdown-options\">\n                    @for(option of filteredOptions; track option.value) {\n                        <label class=\"field-option\" [class.active]=\"selected === option.value\">\n                            <input class=\"form-radio\" type=\"radio\" [(ngModel)]=\"selected\" name=\"option\" [value]=\"option.value\" (ngModelChange)=\"apply()\"/>\n                            <span class=\"radio-label\">{{ option.label }}</span>\n                        </label>\n                    }\n                </div>\n            </div>\n            <div class=\"dropdown-buttons\">\n                <button type=\"button\" class=\"button button-tertiary\"  (click)=\"clear()\">Clear</button>\n            </div>\n        </form>\n    </div>\n</ng-template>\n", styles: [".dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.dropdown-body{background-color:var(--surface-bg);min-width:5rem;margin-top:.25rem;padding:.75rem;border-radius:var(--surface-border-radius);--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1) !important;--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)!important;font-size:.875rem}.dropdown-buttons{display:flex;margin-top:.25rem}.dropdown-options{max-height:15rem;overflow-y:auto}.dropdown-options{display:inline-flex;flex-direction:column;width:100%;gap:.25rem}.dropdown-options .field-option{display:inline-flex;position:relative;padding-top:.625rem;padding-bottom:.625rem;gap:.25rem;align-items:center;font-size:.875rem;line-height:1.25rem;font-weight:500;background-color:transparent;border-radius:var(--button-border-radius);cursor:pointer}.dropdown-options .field-option:hover{background-color:var(--color-neutral-200)}.dropdown-options .field-option.active{background-color:color-mix(in srgb,var(--color-neutral-400, #000) 65%,transparent)}.dropdown-options .field-option input[type=radio]{display:none}\n"] }]
         }], propDecorators: { options: [{
                 type: Input
             }], values: [{
@@ -1645,5 +1593,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, ButtonDirective, DateDisplayPipe, DateTimeComponent, DrawerContainerComponent, EnumDisplayPipe, FilterComponent, InfiniteScrollComponent, MZ_DATE_PIPE_DEFAULT_OPTIONS, MuziehComponentHarness, MuziehComponentsModule, MzDatePipe, MzDialog, MzDialogConfig, MzDialogModule, MzDialogRef, MzDropdownComponent, MzDropdownItemDirective, MzDropdownModule, MzInlineEditComponent, OptionsFilterComponent, PageHeaderComponent, PageLoadingIndicatorComponent, PaginationComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SpinnerComponent, SubjectDisplayPipe, SvgIconComponent, TimeValueAccessorDirective, TimeValueValidatorDirective, WizardProgressTrackerComponent, hasImplementation };
+export { AlertComponent, ButtonDirective, DateDisplayPipe, DateTimeComponent, DrawerContainerComponent, EnumDisplayPipe, FilterComponent, InfiniteScrollComponent, MZ_DATE_PIPE_DEFAULT_OPTIONS, MuziehComponentHarness, MuziehComponentsModule, MzDatePipe, MzDialog, MzDialogConfig, MzDialogModule, MzDialogRef, MzInlineEditComponent, OptionsFilterComponent, PageHeaderComponent, PageLoadingIndicatorComponent, PaginationComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SpinnerComponent, SubjectDisplayPipe, SvgIconComponent, TimeValueAccessorDirective, TimeValueValidatorDirective, WizardProgressTrackerComponent, hasImplementation };
 //# sourceMappingURL=muziehdesign-components.mjs.map