@muziehdesign/components 18.2.0-beta.2193 → 18.2.0-beta.2213

package/design/_button.scss

@@ -4,11 +4,15 @@
 }
 
 .button-primary {
-    @apply text-white shadow-sm bg-blue-600 hover:bg-blue-700 active:bg-blue-700;
+    @apply text-white shadow-sm bg-blue-600 hover:bg-blue-700 active:bg-blue-800/95;
 }
 
 .button-secondary {
-    @apply text-secondary shadow-sm bg-gray-200 hover:bg-gray-300 active:bg-gray-300;
+    @apply text-secondary shadow-sm bg-gray-200 hover:bg-gray-300 active:bg-gray-400/65;
+}
+
+.button-secondary.active {
+    @apply bg-gray-400/65;
 }
 
 .button-danger {

package/design/_dropdown-menu.scss

@@ -14,4 +14,8 @@
 .dropdown-item {
     display: block;
     padding: 0.5rem;
+
+    &:hover {
+        @apply bg-neutral-200;
+    }
 }

package/design/_form.scss

@@ -1,3 +1,4 @@
+@forward 'theme';
 @use "mixins" as *;
 
 

package/design/_mixins.scss

@@ -1,6 +1,6 @@
 @mixin field-control() {
     border-radius: var(--input-border-radius, 0px);
-    border: 1px solid var(--input-border-color, --color-neutral-500);
+    border: 1px solid var(--input-border-color, var(--color-neutral-500));
 }
 
 @mixin field-control-focused() {

package/esm2022/lib/dropdown/dropdown-item.directive.mjs

@@ -0,0 +1,28 @@
+import { Directive, Host } from '@angular/core';
+import { MzDropdownComponent } from './dropdown.component';
+import * as i0 from "@angular/core";
+import * as i1 from "./dropdown.component";
+export class MzDropdownItemDirective {
+    constructor(dropdown) {
+        this.dropdown = dropdown;
+    }
+    close() {
+        this.dropdown.collapse();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownItemDirective, deps: [{ token: i1.MzDropdownComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: MzDropdownItemDirective, isStandalone: true, selector: "[mzDropdownItem]", host: { listeners: { "click": "close()" }, classAttribute: "dropdown-item" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mzDropdownItem]',
+                    standalone: true,
+                    host: {
+                        'class': 'dropdown-item',
+                        '(click)': 'close()'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i1.MzDropdownComponent, decorators: [{
+                    type: Host
+                }] }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24taXRlbS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvZHJvcGRvd24vZHJvcGRvd24taXRlbS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxJQUFJLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7OztBQVUzRCxNQUFNLE9BQU8sdUJBQXVCO0lBRWxDLFlBQTRCLFFBQTZCO1FBQTdCLGFBQVEsR0FBUixRQUFRLENBQXFCO0lBQUksQ0FBQztJQUU5RCxLQUFLO1FBQ0gsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUMzQixDQUFDOzhHQU5VLHVCQUF1QjtrR0FBdkIsdUJBQXVCOzsyRkFBdkIsdUJBQXVCO2tCQVJuQyxTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLFVBQVUsRUFBRSxJQUFJO29CQUNoQixJQUFJLEVBQUU7d0JBQ0osT0FBTyxFQUFFLGVBQWU7d0JBQ3hCLFNBQVMsRUFBRSxTQUFTO3FCQUNyQjtpQkFDRjs7MEJBR2MsSUFBSSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgSG9zdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTXpEcm9wZG93bkNvbXBvbmVudCB9IGZyb20gJy4vZHJvcGRvd24uY29tcG9uZW50JztcblxuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW216RHJvcGRvd25JdGVtXScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGhvc3Q6IHtcbiAgICAnY2xhc3MnOiAnZHJvcGRvd24taXRlbScsXG4gICAgJyhjbGljayknOiAnY2xvc2UoKSdcbiAgfVxufSlcbmV4cG9ydCBjbGFzcyBNekRyb3Bkb3duSXRlbURpcmVjdGl2ZSB7XG5cbiAgY29uc3RydWN0b3IoQEhvc3QoKSBwcml2YXRlIGRyb3Bkb3duOiBNekRyb3Bkb3duQ29tcG9uZW50KSB7IH1cblxuICBjbG9zZSgpIHtcbiAgICB0aGlzLmRyb3Bkb3duLmNvbGxhcHNlKCk7XG4gIH1cbn1cbiJdfQ==

package/esm2022/lib/dropdown/dropdown.component.mjs

@@ -0,0 +1,27 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+export 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: "18.1.1", ngImport: i0, type: MzDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" (overlayOutsideClick)=\"collapse()\">\n    <div cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" class=\"dropdown-body\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [".icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem}.dropdown-item{display:block;width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem}.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: "18.1.1", ngImport: i0, type: MzDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mz-dropdown', standalone: true, 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=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" (overlayOutsideClick)=\"collapse()\">\n    <div cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" class=\"dropdown-body\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [".icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem}.dropdown-item{display:block;width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem}.dropdown-item:hover{background-color:var(--color-neutral-200)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], open: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy9zcmMvbGliL2Ryb3Bkb3duL2Ryb3Bkb3duLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL2xpYi9kcm9wZG93bi9kcm9wZG93bi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDakQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLGdCQUFnQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDN0UsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBVXBFLE1BQU0sT0FBTyxtQkFBbUI7SUFSaEM7UUFTYSxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBQ25CLFNBQUksR0FBRyxLQUFLLENBQUM7S0FTekI7SUFQRyxNQUFNO1FBQ0osSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDekIsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztJQUN0QixDQUFDOzhHQVZRLG1CQUFtQjtrR0FBbkIsbUJBQW1CLGlIQ1poQyxndUJBYUEsMFhETmMsZ0JBQWdCLHVJQUFFLG1CQUFtQiw0K0JBQUUsWUFBWTs7MkZBS3BELG1CQUFtQjtrQkFSL0IsU0FBUzsrQkFDSSxhQUFhLGNBQ1gsSUFBSSxXQUNQLENBQUMsZ0JBQWdCLEVBQUUsbUJBQW1CLEVBQUUsWUFBWSxDQUFDLGlCQUcvQyxpQkFBaUIsQ0FBQyxJQUFJOzhCQUc1QixLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2RrVHJhcEZvY3VzIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL2ExMXknO1xuaW1wb3J0IHsgQ2RrQ29ubmVjdGVkT3ZlcmxheSwgQ2RrT3ZlcmxheU9yaWdpbiB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9vdmVybGF5JztcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIFZpZXdFbmNhcHN1bGF0aW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbXotZHJvcGRvd24nLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgaW1wb3J0czogW0Nka092ZXJsYXlPcmlnaW4sIENka0Nvbm5lY3RlZE92ZXJsYXksIENka1RyYXBGb2N1c10sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2Ryb3Bkb3duLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybDogJy4vZHJvcGRvd24uY29tcG9uZW50LnNjc3MnLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmVcbn0pXG5leHBvcnQgY2xhc3MgTXpEcm9wZG93bkNvbXBvbmVudCB7XG4gICAgQElucHV0KCkgbGFiZWw6IHN0cmluZyA9ICcnO1xuICAgIEBJbnB1dCgpIG9wZW4gPSBmYWxzZTtcblxuICAgIHRvZ2dsZSgpIHtcbiAgICAgIHRoaXMub3BlbiA9ICF0aGlzLm9wZW47XG4gICAgfVxuXG4gICAgY29sbGFwc2UoKSB7XG4gICAgICAgIHRoaXMub3BlbiA9IGZhbHNlO1xuICAgIH1cbn1cbiIsIjxidXR0b24gY2RrT3ZlcmxheU9yaWdpbiAjdHJpZ2dlcj1cImNka092ZXJsYXlPcmlnaW5cIiAoY2xpY2spPVwidG9nZ2xlKClcIiBjbGFzcz1cImJ1dHRvbiBidXR0b24tc2Vjb25kYXJ5XCIgW2NsYXNzLmFjdGl2ZV09XCJvcGVuXCI+XG4gICAge3sgbGFiZWwgfX1cblxuICAgIDxzdmcgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiIGZpbGw9XCJub25lXCIgdmlld0JveD1cIjAgMCAyNCAyNFwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiIHN0cm9rZS13aWR0aD1cIjJcIiBjbGFzcz1cImljb25cIj5cbiAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgZD1cIk0xOSA5bC03IDctNy03XCIgLz5cbiAgICA8L3N2Zz5cbjwvYnV0dG9uPlxuPG5nLXRlbXBsYXRlIFxuICAgIGNka0Nvbm5lY3RlZE92ZXJsYXkgW2Nka0Nvbm5lY3RlZE92ZXJsYXlPcmlnaW5dPVwidHJpZ2dlclwiIFtjZGtjb25uZWN0ZWRvdmVybGF5ZGVzXSBbY2RrQ29ubmVjdGVkT3ZlcmxheU9wZW5dPVwib3BlblwiIChvdmVybGF5T3V0c2lkZUNsaWNrKT1cImNvbGxhcHNlKClcIj5cbiAgICA8ZGl2IGNka1RyYXBGb2N1cyBbY2RrVHJhcEZvY3VzQXV0b0NhcHR1cmVdPVwidHJ1ZVwiIGNsYXNzPVwiZHJvcGRvd24tYm9keVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19

package/esm2022/lib/dropdown/dropdown.module.mjs

@@ -0,0 +1,17 @@
+import { NgModule } from "@angular/core";
+import { MzDropdownComponent } from "./dropdown.component";
+import { MzDropdownItemDirective } from "./dropdown-item.directive";
+import * as i0 from "@angular/core";
+export class MzDropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, imports: [MzDropdownComponent, MzDropdownItemDirective], exports: [MzDropdownComponent, MzDropdownItemDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MzDropdownComponent, MzDropdownItemDirective],
+                    exports: [MzDropdownComponent, MzDropdownItemDirective]
+                }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZHJvcGRvd24ubW9kdWxlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy9zcmMvbGliL2Ryb3Bkb3duL2Ryb3Bkb3duLm1vZHVsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3pDLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzNELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDJCQUEyQixDQUFDOztBQU1wRSxNQUFNLE9BQU8sZ0JBQWdCOzhHQUFoQixnQkFBZ0I7K0dBQWhCLGdCQUFnQixZQUhmLG1CQUFtQixFQUFFLHVCQUF1QixhQUM1QyxtQkFBbUIsRUFBRSx1QkFBdUI7K0dBRTdDLGdCQUFnQjs7MkZBQWhCLGdCQUFnQjtrQkFKNUIsUUFBUTttQkFBQztvQkFDTixPQUFPLEVBQUUsQ0FBQyxtQkFBbUIsRUFBRSx1QkFBdUIsQ0FBQztvQkFDdkQsT0FBTyxFQUFFLENBQUMsbUJBQW1CLEVBQUUsdUJBQXVCLENBQUM7aUJBQzFEIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgTXpEcm9wZG93bkNvbXBvbmVudCB9IGZyb20gXCIuL2Ryb3Bkb3duLmNvbXBvbmVudFwiO1xuaW1wb3J0IHsgTXpEcm9wZG93bkl0ZW1EaXJlY3RpdmUgfSBmcm9tIFwiLi9kcm9wZG93bi1pdGVtLmRpcmVjdGl2ZVwiO1xuXG5ATmdNb2R1bGUoe1xuICAgIGltcG9ydHM6IFtNekRyb3Bkb3duQ29tcG9uZW50LCBNekRyb3Bkb3duSXRlbURpcmVjdGl2ZV0sXG4gICAgZXhwb3J0czogW016RHJvcGRvd25Db21wb25lbnQsIE16RHJvcGRvd25JdGVtRGlyZWN0aXZlXVxufSlcbmV4cG9ydCBjbGFzcyBNekRyb3Bkb3duTW9kdWxlIHt9Il19

package/esm2022/lib/filter/filter2/filter2.component.mjs

@@ -0,0 +1,39 @@
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { CommonModule, JsonPipe } from '@angular/common';
+import { Component, ContentChild } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
+import * as i0 from "@angular/core";
+export class Filter2Component {
+    constructor() {
+        this.open = false;
+    }
+    ngAfterContentInit() {
+        this.initialValues = this.menuForm.value;
+    }
+    toggleOverlay() {
+        this.open = !this.open;
+    }
+    dismiss() {
+        this.open = false;
+        if (this.menuForm.options.updateOn === 'submit') {
+            this.menuForm.resetForm(this.initialValues);
+        }
+    }
+    clear() {
+        this.open = false;
+    }
+    apply() {
+        this.open = false;
+        console.log('applied', this.menuForm.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: Filter2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: Filter2Component, isStandalone: true, selector: "mz-filter2", queries: [{ propertyName: "menuForm", first: true, predicate: NgForm, descendants: true }], ngImport: i0, template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n    Some label\n\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <ng-content></ng-content>\n\n        <div class=\"flex\">\n            @if(menuForm.options.updateOn === 'submit') {\n                <button type=\"button\" class=\"button button-primary\" (click)=\"apply()\">Apply</button>\n            }\n            <button type=\"button\" (click)=\"clear()\">Clear</button>\n        </div>\n    </div>\n</ng-template>\n\n", styles: [""], 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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: Filter2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'mz-filter2', standalone: true, imports: [JsonPipe, CdkOverlayOrigin, CdkConnectedOverlay, FormsModule, CommonModule], template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n    Some label\n\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <ng-content></ng-content>\n\n        <div class=\"flex\">\n            @if(menuForm.options.updateOn === 'submit') {\n                <button type=\"button\" class=\"button button-primary\" (click)=\"apply()\">Apply</button>\n            }\n            <button type=\"button\" (click)=\"clear()\">Clear</button>\n        </div>\n    </div>\n</ng-template>\n\n" }]
+        }], propDecorators: { menuForm: [{
+                type: ContentChild,
+                args: [NgForm]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmlsdGVyMi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvZmlsdGVyL2ZpbHRlcjIvZmlsdGVyMi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvZmlsdGVyL2ZpbHRlcjIvZmlsdGVyMi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUM3RSxPQUFPLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3pELE9BQU8sRUFBb0IsU0FBUyxFQUFFLFlBQVksRUFBc0QsTUFBTSxlQUFlLENBQUM7QUFDOUgsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLEVBQVcsTUFBTSxnQkFBZ0IsQ0FBQzs7QUFTOUQsTUFBTSxPQUFPLGdCQUFnQjtJQVA3QjtRQVFjLFNBQUksR0FBRyxLQUFLLENBQUM7S0EyQjFCO0lBdkJHLGtCQUFrQjtRQUNoQixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDO0lBQzNDLENBQUM7SUFFRCxhQUFhO1FBQ1QsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDM0IsQ0FBQztJQUVELE9BQU87UUFDSCxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztRQUNsQixJQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLFFBQVEsS0FBSyxRQUFRLEVBQUUsQ0FBQztZQUMvQyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDOUMsQ0FBQztJQUNMLENBQUM7SUFFRCxLQUFLO1FBQ0gsSUFBSSxDQUFDLElBQUksR0FBRyxLQUFLLENBQUM7SUFDcEIsQ0FBQztJQUVELEtBQUs7UUFDSCxJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztRQUNsQixPQUFPLENBQUMsR0FBRyxDQUFDLFNBQVMsRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlDLENBQUM7OEdBM0JRLGdCQUFnQjtrR0FBaEIsZ0JBQWdCLDRHQUVYLE1BQU0sZ0RDZHhCLGlnQ0FxQkEsMEREYndCLGdCQUFnQix1SUFBRSxtQkFBbUIsMitCQUFFLFdBQVcsOEJBQUUsWUFBWTs7MkZBSTNFLGdCQUFnQjtrQkFQNUIsU0FBUzsrQkFDSSxZQUFZLGNBQ1YsSUFBSSxXQUNQLENBQUMsUUFBUSxFQUFFLGdCQUFnQixFQUFFLG1CQUFtQixFQUFFLFdBQVcsRUFBRSxZQUFZLENBQUM7OEJBTS9ELFFBQVE7c0JBQTdCLFlBQVk7dUJBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENka0Nvbm5lY3RlZE92ZXJsYXksIENka092ZXJsYXlPcmlnaW4gfSBmcm9tICdAYW5ndWxhci9jZGsvb3ZlcmxheSc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUsIEpzb25QaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IEFmdGVyQ29udGVudEluaXQsIENvbXBvbmVudCwgQ29udGVudENoaWxkLCBDb250ZW50Q2hpbGRyZW4sIFF1ZXJ5TGlzdCwgVGVtcGxhdGVSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUsIE5nRm9ybSwgTmdNb2RlbCB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdtei1maWx0ZXIyJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtKc29uUGlwZSwgQ2RrT3ZlcmxheU9yaWdpbiwgQ2RrQ29ubmVjdGVkT3ZlcmxheSwgRm9ybXNNb2R1bGUsIENvbW1vbk1vZHVsZV0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2ZpbHRlcjIuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsOiAnLi9maWx0ZXIyLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgRmlsdGVyMkNvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyQ29udGVudEluaXQge1xuICAgIHByb3RlY3RlZCBvcGVuID0gZmFsc2U7XG4gICAgQENvbnRlbnRDaGlsZChOZ0Zvcm0pIG1lbnVGb3JtITogTmdGb3JtO1xuICAgIHByaXZhdGUgaW5pdGlhbFZhbHVlczogYW55O1xuXG4gICAgbmdBZnRlckNvbnRlbnRJbml0KCk6IHZvaWQge1xuICAgICAgdGhpcy5pbml0aWFsVmFsdWVzID0gdGhpcy5tZW51Rm9ybS52YWx1ZTtcbiAgICB9XG5cbiAgICB0b2dnbGVPdmVybGF5KCkge1xuICAgICAgICB0aGlzLm9wZW4gPSAhdGhpcy5vcGVuO1xuICAgIH1cblxuICAgIGRpc21pc3MoKSB7XG4gICAgICAgIHRoaXMub3BlbiA9IGZhbHNlO1xuICAgICAgICBpZih0aGlzLm1lbnVGb3JtLm9wdGlvbnMudXBkYXRlT24gPT09ICdzdWJtaXQnKSB7XG4gICAgICAgICAgdGhpcy5tZW51Rm9ybS5yZXNldEZvcm0odGhpcy5pbml0aWFsVmFsdWVzKTtcbiAgICAgICAgfVxuICAgIH1cblxuICAgIGNsZWFyKCkge1xuICAgICAgdGhpcy5vcGVuID0gZmFsc2U7XG4gICAgfVxuXG4gICAgYXBwbHkoKSB7XG4gICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICAgIGNvbnNvbGUubG9nKCdhcHBsaWVkJywgdGhpcy5tZW51Rm9ybS52YWx1ZSk7XG4gICAgfVxufVxuIiwiPGJ1dHRvbiBjZGtPdmVybGF5T3JpZ2luICN0cmlnZ2VyPVwiY2RrT3ZlcmxheU9yaWdpblwiIChjbGljayk9XCJ0b2dnbGVPdmVybGF5KClcIiBjbGFzcz1cImJ1dHRvbiBidXR0b24tc2Vjb25kYXJ5XCIgW2NsYXNzLmFjdGl2ZV09XCJvcGVuXCI+XG4gICAgU29tZSBsYWJlbFxuXG4gICAgPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgZmlsbD1cIm5vbmVcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCIgc3Ryb2tlPVwiY3VycmVudENvbG9yXCIgc3Ryb2tlLXdpZHRoPVwiMlwiIGNsYXNzPVwiaWNvblwiPlxuICAgICAgICA8cGF0aCBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIiBkPVwiTTE5IDlsLTcgNy03LTdcIiAvPlxuICAgIDwvc3ZnPlxuPC9idXR0b24+XG48bmctdGVtcGxhdGUgXG4gICAgY2RrQ29ubmVjdGVkT3ZlcmxheSBbY2RrQ29ubmVjdGVkT3ZlcmxheU9yaWdpbl09XCJ0cmlnZ2VyXCIgW2Nka2Nvbm5lY3RlZG92ZXJsYXlkZXNdIFtjZGtDb25uZWN0ZWRPdmVybGF5T3Blbl09XCJvcGVuXCIgW2Nka0Nvbm5lY3RlZE92ZXJsYXlQYW5lbENsYXNzXT1cIidkcm9wZG93bi1ib2R5J1wiIChvdmVybGF5T3V0c2lkZUNsaWNrKT1cImRpc21pc3MoKVwiPlxuICAgIDxkaXY+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleFwiPlxuICAgICAgICAgICAgQGlmKG1lbnVGb3JtLm9wdGlvbnMudXBkYXRlT24gPT09ICdzdWJtaXQnKSB7XG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJidXR0b24gYnV0dG9uLXByaW1hcnlcIiAoY2xpY2spPVwiYXBwbHkoKVwiPkFwcGx5PC9idXR0b24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICA8YnV0dG9uIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwiY2xlYXIoKVwiPkNsZWFyPC9idXR0b24+XG4gICAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuIl19

package/esm2022/lib/filter/options-filter/options-filter.component.mjs

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { JsonPipe } from '@angular/common';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/forms";
+export class OptionsFilterComponent {
+    constructor() {
+        this.values = [];
+        this.multiselect = false;
+        this.label = 'Filter';
+        this.change = new EventEmitter();
+        this.open = false;
+        console.log('options filter');
+    }
+    apply() {
+        const newValues = this.options?.filter((o) => o.selected).map((o) => o.value) || [];
+        this.change.emit(newValues);
+        this.open = false;
+    }
+    clear() {
+        this.open = false;
+    }
+    toggleOption(option) {
+        option.selected = !option.selected;
+    }
+    toggleOverlay() {
+        this.open = !this.open;
+    }
+    dismiss() {
+        this.open = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OptionsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: OptionsFilterComponent, isStandalone: true, selector: "mz-options-filter", inputs: { options: "options", values: "values", multiselect: "multiselect", label: "label" }, 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    {{ label }}\n\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <form #myForm=\"ngForm\" (submit)=\"apply()\" [ngFormOptions]=\"{updateOn: 'submit'}\"> \n            <div>\n                @for(option of options; track option.value) {\n                    <label class=\"field-option\">\n                        <input class=\"form-checkbox\" type=\"checkbox\" [ngModel]=\"option.selected\" (ngModelChange)=\"toggleOption(option)\" name=\"{{option.value}}\" />\n                        <span class=\"checkbox-label\">{{ option.label }}</span>\n                    </label>\n                }\n            </div>\n            <div class=\"flex\">\n                <button type=\"submit\" class=\"button button-primary\">Apply</button>\n                <button type=\"button\" (click)=\"clear()\">Clear</button>\n            </div>\n        </form>\n\n        {{myForm.value|json}}\n    </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.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: "pipe", type: JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OptionsFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mz-options-filter', standalone: true, imports: [FormsModule, CdkOverlayOrigin, CdkConnectedOverlay, JsonPipe], template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" 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=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <form #myForm=\"ngForm\" (submit)=\"apply()\" [ngFormOptions]=\"{updateOn: 'submit'}\"> \n            <div>\n                @for(option of options; track option.value) {\n                    <label class=\"field-option\">\n                        <input class=\"form-checkbox\" type=\"checkbox\" [ngModel]=\"option.selected\" (ngModelChange)=\"toggleOption(option)\" name=\"{{option.value}}\" />\n                        <span class=\"checkbox-label\">{{ option.label }}</span>\n                    </label>\n                }\n            </div>\n            <div class=\"flex\">\n                <button type=\"submit\" class=\"button button-primary\">Apply</button>\n                <button type=\"button\" (click)=\"clear()\">Clear</button>\n            </div>\n        </form>\n\n        {{myForm.value|json}}\n    </div>\n</ng-template>\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: Input
+            }], values: [{
+                type: Input
+            }], multiselect: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], form: [{
+                type: ViewChild,
+                args: [NgForm]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3B0aW9ucy1maWx0ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50cy9zcmMvbGliL2ZpbHRlci9vcHRpb25zLWZpbHRlci9vcHRpb25zLWZpbHRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnRzL3NyYy9saWIvZmlsdGVyL29wdGlvbnMtZmlsdGVyL29wdGlvbnMtZmlsdGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBb0IsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVwRyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ3JELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzdFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7O0FBUzNDLE1BQU0sT0FBTyxzQkFBc0I7SUFTL0I7UUFQUyxXQUFNLEdBQWEsRUFBRSxDQUFDO1FBQ3RCLGdCQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ3BCLFVBQUssR0FBRyxRQUFRLENBQUM7UUFDaEIsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7UUFDdEMsU0FBSSxHQUFHLEtBQUssQ0FBQztRQUluQixPQUFPLENBQUMsR0FBRyxDQUFDLGdCQUFnQixDQUFDLENBQUM7SUFDbEMsQ0FBQztJQUVELEtBQUs7UUFDRCxNQUFNLFNBQVMsR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztRQUNwRixJQUFJLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsQ0FBQztRQUM1QixJQUFJLENBQUMsSUFBSSxHQUFHLEtBQUssQ0FBQztJQUN0QixDQUFDO0lBRUQsS0FBSztRQUNELElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7SUFFRCxZQUFZLENBQUMsTUFBaUM7UUFDMUMsTUFBTSxDQUFDLFFBQVEsR0FBRyxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUM7SUFDdkMsQ0FBQztJQUVELGFBQWE7UUFDVCxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztJQUMzQixDQUFDO0lBRUQsT0FBTztRQUNILElBQUksQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDO0lBQ3RCLENBQUM7OEdBakNRLHNCQUFzQjtrR0FBdEIsc0JBQXNCLGdQQU9wQixNQUFNLGdEQ3BCckIsMCtDQTZCQSx5RERwQmMsV0FBVyx5OEJBQUUsZ0JBQWdCLHVJQUFFLG1CQUFtQix1K0JBQUUsUUFBUTs7MkZBSTdELHNCQUFzQjtrQkFQbEMsU0FBUzsrQkFDSSxtQkFBbUIsY0FDakIsSUFBSSxXQUNQLENBQUMsV0FBVyxFQUFFLGdCQUFnQixFQUFFLG1CQUFtQixFQUFFLFFBQVEsQ0FBQzt3REFLOUQsT0FBTztzQkFBZixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDSSxNQUFNO3NCQUFmLE1BQU07Z0JBRVksSUFBSTtzQkFBdEIsU0FBUzt1QkFBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQWZ0ZXJDb250ZW50SW5pdCwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRmlsdGVyT3B0aW9uTW9kZWwgfSBmcm9tICcuLi9maWx0ZXItb3B0aW9uLm1vZGVsJztcbmltcG9ydCB7IEZvcm1zTW9kdWxlLCBOZ0Zvcm0gfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBDZGtDb25uZWN0ZWRPdmVybGF5LCBDZGtPdmVybGF5T3JpZ2luIH0gZnJvbSAnQGFuZ3VsYXIvY2RrL292ZXJsYXknO1xuaW1wb3J0IHsgSnNvblBpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ216LW9wdGlvbnMtZmlsdGVyJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtGb3Jtc01vZHVsZSwgQ2RrT3ZlcmxheU9yaWdpbiwgQ2RrQ29ubmVjdGVkT3ZlcmxheSwgSnNvblBpcGVdLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9vcHRpb25zLWZpbHRlci5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmw6ICcuL29wdGlvbnMtZmlsdGVyLmNvbXBvbmVudC5zY3NzJyxcbn0pXG5leHBvcnQgY2xhc3MgT3B0aW9uc0ZpbHRlckNvbXBvbmVudCB7XG4gICAgQElucHV0KCkgb3B0aW9ucz86IEZpbHRlck9wdGlvbk1vZGVsPHN0cmluZz5bXTtcbiAgICBASW5wdXQoKSB2YWx1ZXM6IHN0cmluZ1tdID0gW107XG4gICAgQElucHV0KCkgbXVsdGlzZWxlY3QgPSBmYWxzZTtcbiAgICBASW5wdXQoKSBsYWJlbCA9ICdGaWx0ZXInO1xuICAgIEBPdXRwdXQoKSBjaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZ1tdPigpO1xuICAgIHByb3RlY3RlZCBvcGVuID0gZmFsc2U7XG4gICAgQFZpZXdDaGlsZChOZ0Zvcm0pIGZvcm0hOiBOZ0Zvcm07XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgY29uc29sZS5sb2coJ29wdGlvbnMgZmlsdGVyJyk7XG4gICAgfVxuXG4gICAgYXBwbHkoKSB7XG4gICAgICAgIGNvbnN0IG5ld1ZhbHVlcyA9IHRoaXMub3B0aW9ucz8uZmlsdGVyKChvKSA9PiBvLnNlbGVjdGVkKS5tYXAoKG8pID0+IG8udmFsdWUpIHx8IFtdO1xuICAgICAgICB0aGlzLmNoYW5nZS5lbWl0KG5ld1ZhbHVlcyk7XG4gICAgICAgIHRoaXMub3BlbiA9IGZhbHNlO1xuICAgIH1cblxuICAgIGNsZWFyKCkge1xuICAgICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICB9XG5cbiAgICB0b2dnbGVPcHRpb24ob3B0aW9uOiBGaWx0ZXJPcHRpb25Nb2RlbDxzdHJpbmc+KSB7XG4gICAgICAgIG9wdGlvbi5zZWxlY3RlZCA9ICFvcHRpb24uc2VsZWN0ZWQ7XG4gICAgfVxuXG4gICAgdG9nZ2xlT3ZlcmxheSgpIHtcbiAgICAgICAgdGhpcy5vcGVuID0gIXRoaXMub3BlbjtcbiAgICB9XG5cbiAgICBkaXNtaXNzKCkge1xuICAgICAgICB0aGlzLm9wZW4gPSBmYWxzZTtcbiAgICB9XG59XG5cbmV4cG9ydCB0eXBlIE9wdGlvblZhbHVlVHlwZSA9IHN0cmluZyB8IG51bWJlciB8IHN0cmluZ1tdIHwgbnVtYmVyW107XG5leHBvcnQgdHlwZSBTZWxlY3RPcHRpb24gPSB7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIHZhbHVlOiBPcHRpb25WYWx1ZVR5cGU7XG59OyIsIjxidXR0b24gY2RrT3ZlcmxheU9yaWdpbiAjdHJpZ2dlcj1cImNka092ZXJsYXlPcmlnaW5cIiAoY2xpY2spPVwidG9nZ2xlT3ZlcmxheSgpXCIgY2xhc3M9XCJidXR0b24gYnV0dG9uLXNlY29uZGFyeVwiIFtjbGFzcy5hY3RpdmVdPVwib3BlblwiPlxuICAgIHt7IGxhYmVsIH19XG5cbiAgICA8c3ZnIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIiBmaWxsPVwibm9uZVwiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIiBzdHJva2U9XCJjdXJyZW50Q29sb3JcIiBzdHJva2Utd2lkdGg9XCIyXCIgY2xhc3M9XCJpY29uXCI+XG4gICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIiBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiIGQ9XCJNMTkgOWwtNyA3LTctN1wiIC8+XG4gICAgPC9zdmc+XG48L2J1dHRvbj5cbjxuZy10ZW1wbGF0ZSBcbiAgICBjZGtDb25uZWN0ZWRPdmVybGF5IFtjZGtDb25uZWN0ZWRPdmVybGF5T3JpZ2luXT1cInRyaWdnZXJcIiBbY2RrY29ubmVjdGVkb3ZlcmxheWRlc10gW2Nka0Nvbm5lY3RlZE92ZXJsYXlPcGVuXT1cIm9wZW5cIiBbY2RrQ29ubmVjdGVkT3ZlcmxheVBhbmVsQ2xhc3NdPVwiJ2Ryb3Bkb3duLWJvZHknXCIgKG92ZXJsYXlPdXRzaWRlQ2xpY2spPVwiZGlzbWlzcygpXCI+XG4gICAgPGRpdj5cbiAgICAgICAgPGZvcm0gI215Rm9ybT1cIm5nRm9ybVwiIChzdWJtaXQpPVwiYXBwbHkoKVwiIFtuZ0Zvcm1PcHRpb25zXT1cInt1cGRhdGVPbjogJ3N1Ym1pdCd9XCI+IFxuICAgICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgICAgICBAZm9yKG9wdGlvbiBvZiBvcHRpb25zOyB0cmFjayBvcHRpb24udmFsdWUpIHtcbiAgICAgICAgICAgICAgICAgICAgPGxhYmVsIGNsYXNzPVwiZmllbGQtb3B0aW9uXCI+XG4gICAgICAgICAgICAgICAgICAgICAgICA8aW5wdXQgY2xhc3M9XCJmb3JtLWNoZWNrYm94XCIgdHlwZT1cImNoZWNrYm94XCIgW25nTW9kZWxdPVwib3B0aW9uLnNlbGVjdGVkXCIgKG5nTW9kZWxDaGFuZ2UpPVwidG9nZ2xlT3B0aW9uKG9wdGlvbilcIiBuYW1lPVwie3tvcHRpb24udmFsdWV9fVwiIC8+XG4gICAgICAgICAgICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cImNoZWNrYm94LWxhYmVsXCI+e3sgb3B0aW9uLmxhYmVsIH19PC9zcGFuPlxuICAgICAgICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXhcIj5cbiAgICAgICAgICAgICAgICA8YnV0dG9uIHR5cGU9XCJzdWJtaXRcIiBjbGFzcz1cImJ1dHRvbiBidXR0b24tcHJpbWFyeVwiPkFwcGx5PC9idXR0b24+XG4gICAgICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgKGNsaWNrKT1cImNsZWFyKClcIj5DbGVhcjwvYnV0dG9uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZm9ybT5cblxuICAgICAgICB7e215Rm9ybS52YWx1ZXxqc29ufX1cbiAgICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbiJdfQ==

package/esm2022/public-api.mjs

@@ -37,6 +37,12 @@ export { ButtonDirective } from './lib/button.directive';
 export { WizardProgressTrackerComponent } from './lib/wizard-progress-tracker/wizard-progress-tracker.component';
 // drawer
 export { DrawerContainerComponent } from './lib/drawer/drawer-container.component';
+// dropdown
+export { MzDropdownComponent } from './lib/dropdown/dropdown.component';
+export { MzDropdownItemDirective } from './lib/dropdown/dropdown-item.directive';
+export { MzDropdownModule } from './lib/dropdown/dropdown.module';
 // filter
 export { FilterComponent } from './lib/filter/filter.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNyRSxPQUFPLEVBQWtCLHdCQUF3QixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFMUYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRW5FLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ2pFLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLCtEQUErRCxDQUFDO0FBQzlHLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUN2RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzFELE9BQU8sRUFBb0IsNEJBQTRCLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUV4RyxjQUFjO0FBQ2QsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFFaEYsVUFBVTtBQUNWLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBR2hGLFFBQVE7QUFDUixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUNqRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUs1RSxrQkFBa0I7QUFDbEIsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0saURBQWlELENBQUM7QUFFMUYsV0FBVztBQUNYLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRXhFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ2pGLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBRW5GLGdCQUFnQjtBQUNoQixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUNoRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUV4RSxRQUFRO0FBQ1IsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTdELE9BQU87QUFDUCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBSXpELE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLGlFQUFpRSxDQUFDO0FBRWpILFNBQVM7QUFDVCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUVuRixTQUFTO0FBQ1QsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLCtCQUErQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBjb21wb25lbnRzXG4gKi9cblxuZXhwb3J0IHsgU3ZnSWNvbkNvbXBvbmVudCB9IGZyb20gJy4vbGliL3N2Zy1pY29uL3N2Zy1pY29uLmNvbXBvbmVudCc7XG5leHBvcnQgeyBTdmdJY29uT3B0aW9ucywgU1ZHX0lDT05fREVGQVVMVF9PUFRJT05TIH0gZnJvbSAnLi9saWIvc3ZnLWljb24vc3ZnLWljb24tY29uZmlnJztcblxuZXhwb3J0IHsgRW51bURpc3BsYXlQaXBlIH0gZnJvbSAnLi9saWIvZW51bS1kaXNwbGF5L2VudW0tZGlzcGxheS5waXBlJztcbmV4cG9ydCB7IFNwaW5uZXJDb21wb25lbnQgfSBmcm9tICcuL2xpYi9zcGlubmVyL3NwaW5uZXIuY29tcG9uZW50JztcblxuZXhwb3J0IHsgTXV6aWVoQ29tcG9uZW50c01vZHVsZSB9IGZyb20gJy4vbGliL2NvbXBvbmVudHMubW9kdWxlJztcbmV4cG9ydCB7IFBhZ2VMb2FkaW5nSW5kaWNhdG9yQ29tcG9uZW50IH0gZnJvbSAnLi9saWIvcGFnZS1sb2FkaW5nLWluZGljYXRvci9wYWdlLWxvYWRpbmctaW5kaWNhdG9yLmNvbXBvbmVudCc7XG5leHBvcnQgeyBQYWdlSGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi9saWIvcGFnZS1oZWFkZXIvcGFnZS1oZWFkZXIuY29tcG9uZW50JztcbmV4cG9ydCB7IFBob25lTnVtYmVyUGlwZSB9IGZyb20gJy4vbGliL3Bob25lLW51bWJlci9waG9uZS1udW1iZXIucGlwZSc7XG5leHBvcnQgeyBEYXRlRGlzcGxheVBpcGUgfSBmcm9tICcuL2xpYi9kYXRlLWRpc3BsYXkvZGF0ZS1kaXNwbGF5LnBpcGUnO1xuZXhwb3J0IHsgTXpEYXRlUGlwZSB9IGZyb20gJy4vbGliL2RhdGUtZGlzcGxheS9kYXRlLnBpcGUnO1xuZXhwb3J0IHsgTXpEYXRlUGlwZUNvbmZpZywgTVpfREFURV9QSVBFX0RFRkFVTFRfT1BUSU9OUyB9IGZyb20gJy4vbGliL2RhdGUtZGlzcGxheS9kYXRlLWRpc3BsYXktY29uZmlnJztcblxuLy8gaW5saW5lIGVkaXRcbmV4cG9ydCB7IE16SW5saW5lRWRpdENvbXBvbmVudCB9IGZyb20gJy4vbGliL2lubGluZS1lZGl0L2lubGluZS1lZGl0LmNvbXBvbmVudCc7XG5cbi8vIHN1YmplY3RcbmV4cG9ydCB7IFN1YmplY3REaXNwbGF5UGlwZSB9IGZyb20gJy4vbGliL3N1YmplY3QtZGlzcGxheS9zdWJqZWN0LWRpc3BsYXkucGlwZSc7XG5leHBvcnQgeyBTdWJqZWN0IH0gZnJvbSAnLi9saWIvbW9kZWxzL3N1YmplY3QnO1xuXG4vLyB0YWJsZVxuZXhwb3J0IHsgUmVzdWx0VGFibGVDb21wb25lbnQgfSBmcm9tICcuL2xpYi9yZXN1bHQtdGFibGUvcmVzdWx0LXRhYmxlLmNvbXBvbmVudCc7XG5leHBvcnQgeyBQYWdpbmF0aW9uQ29tcG9uZW50IH0gZnJvbSAnLi9saWIvcGFnaW5hdGlvbi9wYWdpbmF0aW9uLmNvbXBvbmVudCc7XG5leHBvcnQgeyBQYWdlRXZlbnQgfSBmcm9tICcuL2xpYi9tb2RlbHMvcGFnZS1ldmVudCc7XG5leHBvcnQgeyBMb2FkaW5nU3RhdGUgfSBmcm9tICcuL2xpYi9tb2RlbHMvbG9hZGluZy1zdGF0ZSc7XG5leHBvcnQgeyBSZXN1bHRUYWJsZU1vZGVsIH0gZnJvbSAnLi9saWIvcmVzdWx0LXRhYmxlL3Jlc3VsdC10YWJsZS5tb2RlbCc7XG5cbi8vIGluZmluaXRlIHNjcm9sbFxuZXhwb3J0IHsgSW5maW5pdGVTY3JvbGxDb21wb25lbnQgfSBmcm9tICcuL2xpYi9pbmZpbml0ZS1zY3JvbGwvaW5maW5pdGUtc2Nyb2xsLmNvbXBvbmVudCc7XG5cbi8vIERhdGV0aW1lXG5leHBvcnQgeyBEYXRlVGltZUNvbXBvbmVudCB9IGZyb20gJy4vbGliL2RhdGUtdGltZS9kYXRlLXRpbWUuY29tcG9uZW50JztcbmV4cG9ydCB7IFRpbWVWYWx1ZSB9IGZyb20gJy4vbGliL2RhdGUtdGltZS90aW1lLXZhbHVlJztcbmV4cG9ydCB7IFRpbWVWYWx1ZUFjY2Vzc29yRGlyZWN0aXZlIH0gZnJvbSAnLi9saWIvdGltZS12YWx1ZS1hY2Nlc3Nvci5kaXJlY3RpdmUnO1xuZXhwb3J0IHsgVGltZVZhbHVlVmFsaWRhdG9yRGlyZWN0aXZlIH0gZnJvbSAnLi9saWIvdGltZS12YWx1ZS12YWxpZGF0b3IuZGlyZWN0aXZlJztcblxuLy8gdGVzdGluZyBmaWxlc1xuZXhwb3J0IHsgTXV6aWVoQ29tcG9uZW50SGFybmVzcyB9IGZyb20gJy4vbGliL3Rlc3RpbmcvbXV6aWVoLWNvbXBvbmVudC1oYXJuZXNzJztcbmV4cG9ydCB7IFJlc3VsdFRhYmxlSGFybmVzcyB9IGZyb20gJy4vbGliL3Rlc3RpbmcvcmVzdWx0LXRhYmxlLWhhcm5lc3MnO1xuXG4vLyBhbGVydFxuZXhwb3J0IHsgQWxlcnRDb21wb25lbnQgfSBmcm9tICcuL2xpYi9hbGVydC9hbGVydC5jb21wb25lbnQnO1xuXG4vLyBzb3J0XG5leHBvcnQgeyBTb3J0S2V5RGlyZWN0aXZlIH0gZnJvbSAnLi9saWIvc29ydC1rZXkuZGlyZWN0aXZlJztcbmV4cG9ydCB7IFNvcnREaXJlY3RpdmUgfSBmcm9tICcuL2xpYi9zb3J0LmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBCdXR0b25EaXJlY3RpdmUgfSBmcm9tICcuL2xpYi9idXR0b24uZGlyZWN0aXZlJztcbmV4cG9ydCB7IFNvcnRFdmVudCB9IGZyb20gJy4vbGliL21vZGVscy9zb3J0LWV2ZW50JztcblxuZXhwb3J0IHsgV2l6YXJkU3RlcExpbmsgfSBmcm9tICcuL2xpYi9tb2RlbHMvd2l6YXJkLXN0ZXAtbGluayc7XG5leHBvcnQgeyBXaXphcmRQcm9ncmVzc1RyYWNrZXJDb21wb25lbnQgfSBmcm9tICcuL2xpYi93aXphcmQtcHJvZ3Jlc3MtdHJhY2tlci93aXphcmQtcHJvZ3Jlc3MtdHJhY2tlci5jb21wb25lbnQnO1xuXG4vLyBkcmF3ZXJcbmV4cG9ydCB7IERyYXdlckNvbnRhaW5lckNvbXBvbmVudCB9IGZyb20gJy4vbGliL2RyYXdlci9kcmF3ZXItY29udGFpbmVyLmNvbXBvbmVudCc7XG5cbi8vIGZpbHRlclxuZXhwb3J0IHsgRmlsdGVyQ29tcG9uZW50IH0gZnJvbSAnLi9saWIvZmlsdGVyL2ZpbHRlci5jb21wb25lbnQnO1xuZXhwb3J0IHsgRmlsdGVyT3B0aW9uTW9kZWwgfSBmcm9tICcuL2xpYi9maWx0ZXIvZmlsdGVyLW9wdGlvbi5tb2RlbCc7XG4iXX0=
+export { OptionsFilterComponent } from './lib/filter/options-filter/options-filter.component';
+export { Filter2Component } from './lib/filter/filter2/filter2.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvc3JjL3B1YmxpYy1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNyRSxPQUFPLEVBQWtCLHdCQUF3QixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFMUYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBQ3ZFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBRW5FLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ2pFLE9BQU8sRUFBRSw2QkFBNkIsRUFBRSxNQUFNLCtEQUErRCxDQUFDO0FBQzlHLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlDQUF5QyxDQUFDO0FBQzlFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQUN2RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sc0NBQXNDLENBQUM7QUFDdkUsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBQzFELE9BQU8sRUFBb0IsNEJBQTRCLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUV4RyxjQUFjO0FBQ2QsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0seUNBQXlDLENBQUM7QUFFaEYsVUFBVTtBQUNWLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBR2hGLFFBQVE7QUFDUixPQUFPLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSwyQ0FBMkMsQ0FBQztBQUNqRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSx1Q0FBdUMsQ0FBQztBQUs1RSxrQkFBa0I7QUFDbEIsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0saURBQWlELENBQUM7QUFFMUYsV0FBVztBQUNYLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBRXhFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ2pGLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLHNDQUFzQyxDQUFDO0FBRW5GLGdCQUFnQjtBQUNoQixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQztBQUNoRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUV4RSxRQUFRO0FBQ1IsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBRTdELE9BQU87QUFDUCxPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUM1RCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDckQsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBSXpELE9BQU8sRUFBRSw4QkFBOEIsRUFBRSxNQUFNLGlFQUFpRSxDQUFDO0FBRWpILFNBQVM7QUFDVCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUVuRixXQUFXO0FBQ1gsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDeEUsT0FBTyxFQUFFLHVCQUF1QixFQUFFLE1BQU0sd0NBQXdDLENBQUM7QUFDakYsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sZ0NBQWdDLENBQUM7QUFFbEUsU0FBUztBQUNULE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUVoRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxzREFBc0QsQ0FBQztBQUM5RixPQUFPLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSx3Q0FBd0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qXG4gKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2YgY29tcG9uZW50c1xuICovXG5cbmV4cG9ydCB7IFN2Z0ljb25Db21wb25lbnQgfSBmcm9tICcuL2xpYi9zdmctaWNvbi9zdmctaWNvbi5jb21wb25lbnQnO1xuZXhwb3J0IHsgU3ZnSWNvbk9wdGlvbnMsIFNWR19JQ09OX0RFRkFVTFRfT1BUSU9OUyB9IGZyb20gJy4vbGliL3N2Zy1pY29uL3N2Zy1pY29uLWNvbmZpZyc7XG5cbmV4cG9ydCB7IEVudW1EaXNwbGF5UGlwZSB9IGZyb20gJy4vbGliL2VudW0tZGlzcGxheS9lbnVtLWRpc3BsYXkucGlwZSc7XG5leHBvcnQgeyBTcGlubmVyQ29tcG9uZW50IH0gZnJvbSAnLi9saWIvc3Bpbm5lci9zcGlubmVyLmNvbXBvbmVudCc7XG5cbmV4cG9ydCB7IE11emllaENvbXBvbmVudHNNb2R1bGUgfSBmcm9tICcuL2xpYi9jb21wb25lbnRzLm1vZHVsZSc7XG5leHBvcnQgeyBQYWdlTG9hZGluZ0luZGljYXRvckNvbXBvbmVudCB9IGZyb20gJy4vbGliL3BhZ2UtbG9hZGluZy1pbmRpY2F0b3IvcGFnZS1sb2FkaW5nLWluZGljYXRvci5jb21wb25lbnQnO1xuZXhwb3J0IHsgUGFnZUhlYWRlckNvbXBvbmVudCB9IGZyb20gJy4vbGliL3BhZ2UtaGVhZGVyL3BhZ2UtaGVhZGVyLmNvbXBvbmVudCc7XG5leHBvcnQgeyBQaG9uZU51bWJlclBpcGUgfSBmcm9tICcuL2xpYi9waG9uZS1udW1iZXIvcGhvbmUtbnVtYmVyLnBpcGUnO1xuZXhwb3J0IHsgRGF0ZURpc3BsYXlQaXBlIH0gZnJvbSAnLi9saWIvZGF0ZS1kaXNwbGF5L2RhdGUtZGlzcGxheS5waXBlJztcbmV4cG9ydCB7IE16RGF0ZVBpcGUgfSBmcm9tICcuL2xpYi9kYXRlLWRpc3BsYXkvZGF0ZS5waXBlJztcbmV4cG9ydCB7IE16RGF0ZVBpcGVDb25maWcsIE1aX0RBVEVfUElQRV9ERUZBVUxUX09QVElPTlMgfSBmcm9tICcuL2xpYi9kYXRlLWRpc3BsYXkvZGF0ZS1kaXNwbGF5LWNvbmZpZyc7XG5cbi8vIGlubGluZSBlZGl0XG5leHBvcnQgeyBNeklubGluZUVkaXRDb21wb25lbnQgfSBmcm9tICcuL2xpYi9pbmxpbmUtZWRpdC9pbmxpbmUtZWRpdC5jb21wb25lbnQnO1xuXG4vLyBzdWJqZWN0XG5leHBvcnQgeyBTdWJqZWN0RGlzcGxheVBpcGUgfSBmcm9tICcuL2xpYi9zdWJqZWN0LWRpc3BsYXkvc3ViamVjdC1kaXNwbGF5LnBpcGUnO1xuZXhwb3J0IHsgU3ViamVjdCB9IGZyb20gJy4vbGliL21vZGVscy9zdWJqZWN0JztcblxuLy8gdGFibGVcbmV4cG9ydCB7IFJlc3VsdFRhYmxlQ29tcG9uZW50IH0gZnJvbSAnLi9saWIvcmVzdWx0LXRhYmxlL3Jlc3VsdC10YWJsZS5jb21wb25lbnQnO1xuZXhwb3J0IHsgUGFnaW5hdGlvbkNvbXBvbmVudCB9IGZyb20gJy4vbGliL3BhZ2luYXRpb24vcGFnaW5hdGlvbi5jb21wb25lbnQnO1xuZXhwb3J0IHsgUGFnZUV2ZW50IH0gZnJvbSAnLi9saWIvbW9kZWxzL3BhZ2UtZXZlbnQnO1xuZXhwb3J0IHsgTG9hZGluZ1N0YXRlIH0gZnJvbSAnLi9saWIvbW9kZWxzL2xvYWRpbmctc3RhdGUnO1xuZXhwb3J0IHsgUmVzdWx0VGFibGVNb2RlbCB9IGZyb20gJy4vbGliL3Jlc3VsdC10YWJsZS9yZXN1bHQtdGFibGUubW9kZWwnO1xuXG4vLyBpbmZpbml0ZSBzY3JvbGxcbmV4cG9ydCB7IEluZmluaXRlU2Nyb2xsQ29tcG9uZW50IH0gZnJvbSAnLi9saWIvaW5maW5pdGUtc2Nyb2xsL2luZmluaXRlLXNjcm9sbC5jb21wb25lbnQnO1xuXG4vLyBEYXRldGltZVxuZXhwb3J0IHsgRGF0ZVRpbWVDb21wb25lbnQgfSBmcm9tICcuL2xpYi9kYXRlLXRpbWUvZGF0ZS10aW1lLmNvbXBvbmVudCc7XG5leHBvcnQgeyBUaW1lVmFsdWUgfSBmcm9tICcuL2xpYi9kYXRlLXRpbWUvdGltZS12YWx1ZSc7XG5leHBvcnQgeyBUaW1lVmFsdWVBY2Nlc3NvckRpcmVjdGl2ZSB9IGZyb20gJy4vbGliL3RpbWUtdmFsdWUtYWNjZXNzb3IuZGlyZWN0aXZlJztcbmV4cG9ydCB7IFRpbWVWYWx1ZVZhbGlkYXRvckRpcmVjdGl2ZSB9IGZyb20gJy4vbGliL3RpbWUtdmFsdWUtdmFsaWRhdG9yLmRpcmVjdGl2ZSc7XG5cbi8vIHRlc3RpbmcgZmlsZXNcbmV4cG9ydCB7IE11emllaENvbXBvbmVudEhhcm5lc3MgfSBmcm9tICcuL2xpYi90ZXN0aW5nL211emllaC1jb21wb25lbnQtaGFybmVzcyc7XG5leHBvcnQgeyBSZXN1bHRUYWJsZUhhcm5lc3MgfSBmcm9tICcuL2xpYi90ZXN0aW5nL3Jlc3VsdC10YWJsZS1oYXJuZXNzJztcblxuLy8gYWxlcnRcbmV4cG9ydCB7IEFsZXJ0Q29tcG9uZW50IH0gZnJvbSAnLi9saWIvYWxlcnQvYWxlcnQuY29tcG9uZW50JztcblxuLy8gc29ydFxuZXhwb3J0IHsgU29ydEtleURpcmVjdGl2ZSB9IGZyb20gJy4vbGliL3NvcnQta2V5LmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBTb3J0RGlyZWN0aXZlIH0gZnJvbSAnLi9saWIvc29ydC5kaXJlY3RpdmUnO1xuZXhwb3J0IHsgQnV0dG9uRGlyZWN0aXZlIH0gZnJvbSAnLi9saWIvYnV0dG9uLmRpcmVjdGl2ZSc7XG5leHBvcnQgeyBTb3J0RXZlbnQgfSBmcm9tICcuL2xpYi9tb2RlbHMvc29ydC1ldmVudCc7XG5cbmV4cG9ydCB7IFdpemFyZFN0ZXBMaW5rIH0gZnJvbSAnLi9saWIvbW9kZWxzL3dpemFyZC1zdGVwLWxpbmsnO1xuZXhwb3J0IHsgV2l6YXJkUHJvZ3Jlc3NUcmFja2VyQ29tcG9uZW50IH0gZnJvbSAnLi9saWIvd2l6YXJkLXByb2dyZXNzLXRyYWNrZXIvd2l6YXJkLXByb2dyZXNzLXRyYWNrZXIuY29tcG9uZW50JztcblxuLy8gZHJhd2VyXG5leHBvcnQgeyBEcmF3ZXJDb250YWluZXJDb21wb25lbnQgfSBmcm9tICcuL2xpYi9kcmF3ZXIvZHJhd2VyLWNvbnRhaW5lci5jb21wb25lbnQnO1xuXG4vLyBkcm9wZG93blxuZXhwb3J0IHsgTXpEcm9wZG93bkNvbXBvbmVudCB9IGZyb20gJy4vbGliL2Ryb3Bkb3duL2Ryb3Bkb3duLmNvbXBvbmVudCc7XG5leHBvcnQgeyBNekRyb3Bkb3duSXRlbURpcmVjdGl2ZSB9IGZyb20gJy4vbGliL2Ryb3Bkb3duL2Ryb3Bkb3duLWl0ZW0uZGlyZWN0aXZlJztcbmV4cG9ydCB7IE16RHJvcGRvd25Nb2R1bGUgfSBmcm9tICcuL2xpYi9kcm9wZG93bi9kcm9wZG93bi5tb2R1bGUnO1xuXG4vLyBmaWx0ZXJcbmV4cG9ydCB7IEZpbHRlckNvbXBvbmVudCB9IGZyb20gJy4vbGliL2ZpbHRlci9maWx0ZXIuY29tcG9uZW50JztcbmV4cG9ydCB7IEZpbHRlck9wdGlvbk1vZGVsIH0gZnJvbSAnLi9saWIvZmlsdGVyL2ZpbHRlci1vcHRpb24ubW9kZWwnO1xuZXhwb3J0IHsgT3B0aW9uc0ZpbHRlckNvbXBvbmVudCB9IGZyb20gJy4vbGliL2ZpbHRlci9vcHRpb25zLWZpbHRlci9vcHRpb25zLWZpbHRlci5jb21wb25lbnQnO1xuZXhwb3J0IHsgRmlsdGVyMkNvbXBvbmVudCB9IGZyb20gJy4vbGliL2ZpbHRlci9maWx0ZXIyL2ZpbHRlcjIuY29tcG9uZW50JztcbiJdfQ==

package/fesm2022/muziehdesign-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Component, Inject, Input, HostBinding, Pipe, EventEmitter, Optional, Output, ContentChild, Directive, HostListener, forwardRef, ViewChild, NgModule, LOCALE_ID, ElementRef, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, Component, Inject, Input, HostBinding, Pipe, EventEmitter, Optional, Output, ContentChild, Directive, HostListener, forwardRef, ViewChild, NgModule, LOCALE_ID, ElementRef, ViewEncapsulation, ChangeDetectionStrategy, Host } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule, DatePipe, JsonPipe } from '@angular/common';
 import * as i1$1 from '@angular/router';
 import { NavigationEnd, NavigationCancel, NavigationError, NavigationStart } from '@angular/router';
 import { race, BehaviorSubject, Subscription, fromEvent } from 'rxjs';
@@ -10,13 +10,14 @@ import { SubSink } from 'subsink';
 import * as i1$2 from '@angular/platform-browser';
 import { By } from '@angular/platform-browser';
 import * as i1$4 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgModel } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgModel, NgForm } from '@angular/forms';
 import * as i1$3 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
+import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, CdkConnectedOverlay, OverlayModule } from '@angular/cdk/overlay';
 
 const SVG_ICON_DEFAULT_OPTIONS = new InjectionToken('MzSvgIconOptions', {
     providedIn: 'root',
@@ -1215,6 +1216,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
             args: [{ selector: 'mz-drawer-container', standalone: true, imports: [CdkPortalOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, template: "<div class=\"drawer-container\" [class.open]=\"open\">\n    <ng-template cdkPortalOutlet />\n</div>", styles: [".drawer-container{background-color:#fff;min-width:500px;max-width:90%;padding:.5rem 1rem;overflow:auto;height:100vh;position:absolute;right:0;top:0;transition:translate .3s ease-out;translate:100%}.drawer-container.open{translate:0%}\n"] }]
         }] });
 
+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: "18.1.1", ngImport: i0, type: MzDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", 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=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" (overlayOutsideClick)=\"collapse()\">\n    <div cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" class=\"dropdown-body\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [".icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem}.dropdown-item{display:block;width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem}.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: "18.1.1", ngImport: i0, type: MzDropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mz-dropdown', standalone: true, 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=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" (overlayOutsideClick)=\"collapse()\">\n    <div cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" class=\"dropdown-body\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n", styles: [".icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}.dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem}.dropdown-item{display:block;width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem}.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: "18.1.1", ngImport: i0, type: MzDropdownItemDirective, deps: [{ token: MzDropdownComponent, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: MzDropdownItemDirective, isStandalone: true, selector: "[mzDropdownItem]", host: { listeners: { "click": "close()" }, classAttribute: "dropdown-item" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mzDropdownItem]',
+                    standalone: true,
+                    host: {
+                        'class': 'dropdown-item',
+                        '(click)': 'close()'
+                    }
+                }]
+        }], ctorParameters: () => [{ type: MzDropdownComponent, decorators: [{
+                    type: Host
+                }] }] });
+
+class MzDropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, imports: [MzDropdownComponent, MzDropdownItemDirective], exports: [MzDropdownComponent, MzDropdownItemDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MzDropdownComponent, MzDropdownItemDirective],
+                    exports: [MzDropdownComponent, MzDropdownItemDirective]
+                }]
+        }] });
+
 class FilterComponent {
     constructor() {
         this.isOpen = false;
@@ -1284,6 +1345,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
                 args: ['filterDropdownTemplate', { static: true }]
             }] } });
 
+class OptionsFilterComponent {
+    constructor() {
+        this.values = [];
+        this.multiselect = false;
+        this.label = 'Filter';
+        this.change = new EventEmitter();
+        this.open = false;
+        console.log('options filter');
+    }
+    apply() {
+        const newValues = this.options?.filter((o) => o.selected).map((o) => o.value) || [];
+        this.change.emit(newValues);
+        this.open = false;
+    }
+    clear() {
+        this.open = false;
+    }
+    toggleOption(option) {
+        option.selected = !option.selected;
+    }
+    toggleOverlay() {
+        this.open = !this.open;
+    }
+    dismiss() {
+        this.open = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OptionsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: OptionsFilterComponent, isStandalone: true, selector: "mz-options-filter", inputs: { options: "options", values: "values", multiselect: "multiselect", label: "label" }, 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    {{ label }}\n\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <form #myForm=\"ngForm\" (submit)=\"apply()\" [ngFormOptions]=\"{updateOn: 'submit'}\"> \n            <div>\n                @for(option of options; track option.value) {\n                    <label class=\"field-option\">\n                        <input class=\"form-checkbox\" type=\"checkbox\" [ngModel]=\"option.selected\" (ngModelChange)=\"toggleOption(option)\" name=\"{{option.value}}\" />\n                        <span class=\"checkbox-label\">{{ option.label }}</span>\n                    </label>\n                }\n            </div>\n            <div class=\"flex\">\n                <button type=\"submit\" class=\"button button-primary\">Apply</button>\n                <button type=\"button\" (click)=\"clear()\">Clear</button>\n            </div>\n        </form>\n\n        {{myForm.value|json}}\n    </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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: "pipe", type: JsonPipe, name: "json" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OptionsFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mz-options-filter', standalone: true, imports: [FormsModule, CdkOverlayOrigin, CdkConnectedOverlay, JsonPipe], template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" 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=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <form #myForm=\"ngForm\" (submit)=\"apply()\" [ngFormOptions]=\"{updateOn: 'submit'}\"> \n            <div>\n                @for(option of options; track option.value) {\n                    <label class=\"field-option\">\n                        <input class=\"form-checkbox\" type=\"checkbox\" [ngModel]=\"option.selected\" (ngModelChange)=\"toggleOption(option)\" name=\"{{option.value}}\" />\n                        <span class=\"checkbox-label\">{{ option.label }}</span>\n                    </label>\n                }\n            </div>\n            <div class=\"flex\">\n                <button type=\"submit\" class=\"button button-primary\">Apply</button>\n                <button type=\"button\" (click)=\"clear()\">Clear</button>\n            </div>\n        </form>\n\n        {{myForm.value|json}}\n    </div>\n</ng-template>\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { options: [{
+                type: Input
+            }], values: [{
+                type: Input
+            }], multiselect: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], form: [{
+                type: ViewChild,
+                args: [NgForm]
+            }] } });
+
+class Filter2Component {
+    constructor() {
+        this.open = false;
+    }
+    ngAfterContentInit() {
+        this.initialValues = this.menuForm.value;
+    }
+    toggleOverlay() {
+        this.open = !this.open;
+    }
+    dismiss() {
+        this.open = false;
+        if (this.menuForm.options.updateOn === 'submit') {
+            this.menuForm.resetForm(this.initialValues);
+        }
+    }
+    clear() {
+        this.open = false;
+    }
+    apply() {
+        this.open = false;
+        console.log('applied', this.menuForm.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: Filter2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: Filter2Component, isStandalone: true, selector: "mz-filter2", queries: [{ propertyName: "menuForm", first: true, predicate: NgForm, descendants: true }], ngImport: i0, template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n    Some label\n\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <ng-content></ng-content>\n\n        <div class=\"flex\">\n            @if(menuForm.options.updateOn === 'submit') {\n                <button type=\"button\" class=\"button button-primary\" (click)=\"apply()\">Apply</button>\n            }\n            <button type=\"button\" (click)=\"clear()\">Clear</button>\n        </div>\n    </div>\n</ng-template>\n\n", styles: [""], 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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: Filter2Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'mz-filter2', standalone: true, imports: [JsonPipe, CdkOverlayOrigin, CdkConnectedOverlay, FormsModule, CommonModule], template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n    Some label\n\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\" class=\"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\" [cdkconnectedoverlaydes] [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n    <div>\n        <ng-content></ng-content>\n\n        <div class=\"flex\">\n            @if(menuForm.options.updateOn === 'submit') {\n                <button type=\"button\" class=\"button button-primary\" (click)=\"apply()\">Apply</button>\n            }\n            <button type=\"button\" (click)=\"clear()\">Clear</button>\n        </div>\n    </div>\n</ng-template>\n\n" }]
+        }], propDecorators: { menuForm: [{
+                type: ContentChild,
+                args: [NgForm]
+            }] } });
+
 /*
  * Public API Surface of components
  */
@@ -1292,5 +1434,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AlertComponent, ButtonDirective, DateDisplayPipe, DateTimeComponent, DrawerContainerComponent, EnumDisplayPipe, FilterComponent, InfiniteScrollComponent, MZ_DATE_PIPE_DEFAULT_OPTIONS, MuziehComponentHarness, MuziehComponentsModule, MzDatePipe, MzInlineEditComponent, PageHeaderComponent, PageLoadingIndicatorComponent, PaginationComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SpinnerComponent, SubjectDisplayPipe, SvgIconComponent, TimeValueAccessorDirective, TimeValueValidatorDirective, WizardProgressTrackerComponent };
+export { AlertComponent, ButtonDirective, DateDisplayPipe, DateTimeComponent, DrawerContainerComponent, EnumDisplayPipe, Filter2Component, FilterComponent, InfiniteScrollComponent, MZ_DATE_PIPE_DEFAULT_OPTIONS, MuziehComponentHarness, MuziehComponentsModule, MzDatePipe, MzDropdownComponent, MzDropdownItemDirective, MzDropdownModule, MzInlineEditComponent, OptionsFilterComponent, PageHeaderComponent, PageLoadingIndicatorComponent, PaginationComponent, PhoneNumberPipe, ResultTableComponent, ResultTableHarness, SVG_ICON_DEFAULT_OPTIONS, SortDirective, SortKeyDirective, SpinnerComponent, SubjectDisplayPipe, SvgIconComponent, TimeValueAccessorDirective, TimeValueValidatorDirective, WizardProgressTrackerComponent };
 //# sourceMappingURL=muziehdesign-components.mjs.map