@muziehdesign/components 19.2.8-beta.2421 → 19.2.8-beta.2428
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/icons/chevron-down-solid.svg +3 -1
- package/assets/icons/chevron-up-solid.svg +3 -1
- package/assets/icons/icondefinitions.svg +0 -0
- package/fesm2022/muziehdesign-components.mjs +79 -24
- package/fesm2022/muziehdesign-components.mjs.map +1 -1
- package/lib/dropdown/dropdown-item.directive.d.ts +9 -0
- package/lib/dropdown/dropdown.component.d.ts +9 -0
- package/lib/dropdown/dropdown.module.d.ts +8 -0
- package/lib/svg-icon/svg-icon.component.d.ts +0 -3
- package/package.json +1 -1
- package/public-api.d.ts +3 -0
- package/styles/design/_button.scss +4 -8
- package/styles/design/_components.scss +0 -0
- package/styles/design/_dl.scss +1 -5
- package/styles/design/_dropdown-menu.scss +16 -17
- package/styles/design/_muzieh.scss +19 -0
- package/styles/mixins/_dropdown.scss +0 -1
- package/assets/icondefinitions.svg +0 -1
- package/assets/icons/at-symbol-outline.svg +0 -1
- package/assets/icons/check-circle-solid.svg +0 -1
- package/assets/icons/check-solid.svg +0 -1
- package/assets/icons/chevron-down-control.svg +0 -1
- package/assets/icons/dots-horizontal-outline.svg +0 -1
- package/assets/icons/exclamation-triangle-solid.svg +0 -1
- package/assets/icons/information-circle-solid.svg +0 -1
- package/assets/icons/menu-outline.svg +0 -1
- package/assets/icons/pencil-solid.svg +0 -1
- package/assets/icons/x-circle-solid.svg +0 -1
- package/assets/sprite.symbol.html +0 -303
|
@@ -1 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
|
|
2
|
+
<path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" />
|
|
3
|
+
</svg>
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
|
|
2
|
+
<path fill-rule="evenodd" d="M11.47 7.72a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06L12 9.31l-6.97 6.97a.75.75 0 0 1-1.06-1.06l7.5-7.5Z" clip-rule="evenodd" />
|
|
3
|
+
</svg>
|
|
Binary file
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, HostBinding, Input, Inject, Component, Pipe, EventEmitter, Output, Optional, ContentChild, HostListener, Directive, forwardRef, ViewChild, NgModule, LOCALE_ID, ElementRef, Injectable, ViewEncapsulation } from '@angular/core';
|
|
2
|
+
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';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
@@ -17,6 +17,7 @@ import * as i3 from '@angular/cdk/overlay';
|
|
|
17
17
|
import { OverlayModule, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
18
18
|
import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
|
|
19
19
|
import * as i1$5 from '@angular/cdk/a11y';
|
|
20
|
+
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
20
21
|
|
|
21
22
|
const SVG_ICON_DEFAULT_OPTIONS = new InjectionToken('MzSvgIconOptions', {
|
|
22
23
|
providedIn: 'root',
|
|
@@ -30,10 +31,7 @@ const SVG_ICON_DEFAULT_OPTIONS = new InjectionToken('MzSvgIconOptions', {
|
|
|
30
31
|
class SvgIconComponent {
|
|
31
32
|
constructor(config) {
|
|
32
33
|
this.config = config;
|
|
33
|
-
|
|
34
|
-
* @deprecated Pass in whole key instead.
|
|
35
|
-
*/
|
|
36
|
-
this.type = '';
|
|
34
|
+
this.type = 'outline';
|
|
37
35
|
this.size = 'medium';
|
|
38
36
|
this.fileUrl = config.svgIconDefinitionUrl;
|
|
39
37
|
}
|
|
@@ -44,10 +42,7 @@ class SvgIconComponent {
|
|
|
44
42
|
return this.fileUrl + '#' + this.key;
|
|
45
43
|
}
|
|
46
44
|
get classes() {
|
|
47
|
-
|
|
48
|
-
return `icon icon-${this.type} icon-${this.size}`;
|
|
49
|
-
}
|
|
50
|
-
return `icon icon-${this.size}`;
|
|
45
|
+
return `icon icon-${this.type} icon-${this.size}`;
|
|
51
46
|
}
|
|
52
47
|
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 }); }
|
|
53
48
|
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"] }); }
|
|
@@ -251,11 +246,11 @@ class ResultTableComponent {
|
|
|
251
246
|
return !this.model || this.model.items.length === 0;
|
|
252
247
|
}
|
|
253
248
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ResultTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
254
|
-
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
|
|
249
|
+
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"] }] }); }
|
|
255
250
|
}
|
|
256
251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ResultTableComponent, decorators: [{
|
|
257
252
|
type: Component,
|
|
258
|
-
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
|
|
253
|
+
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" }]
|
|
259
254
|
}], ctorParameters: () => [], propDecorators: { loading: [{
|
|
260
255
|
type: Input
|
|
261
256
|
}], error: [{
|
|
@@ -389,25 +384,25 @@ class AlertComponent {
|
|
|
389
384
|
getAlertIcon() {
|
|
390
385
|
let icon = '';
|
|
391
386
|
if (this.type === 'info') {
|
|
392
|
-
icon = 'information-circle
|
|
387
|
+
icon = 'information-circle';
|
|
393
388
|
}
|
|
394
389
|
else if (this.type === 'success') {
|
|
395
|
-
icon = 'check-circle
|
|
390
|
+
icon = 'check-circle';
|
|
396
391
|
}
|
|
397
392
|
else if (this.type === 'error') {
|
|
398
|
-
icon = 'x-circle
|
|
393
|
+
icon = 'x-circle';
|
|
399
394
|
}
|
|
400
395
|
else if (this.type === 'warning') {
|
|
401
|
-
icon = 'exclamation
|
|
396
|
+
icon = 'exclamation';
|
|
402
397
|
}
|
|
403
398
|
return icon;
|
|
404
399
|
}
|
|
405
400
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
406
|
-
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"] }] }); }
|
|
401
|
+
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"] }] }); }
|
|
407
402
|
}
|
|
408
403
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: AlertComponent, decorators: [{
|
|
409
404
|
type: Component,
|
|
410
|
-
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>" }]
|
|
405
|
+
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>" }]
|
|
411
406
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
412
407
|
type: Input
|
|
413
408
|
}], type: [{
|
|
@@ -667,7 +662,7 @@ class ButtonDirective {
|
|
|
667
662
|
return this.getChildElement('.button-loading-overlay');
|
|
668
663
|
}
|
|
669
664
|
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 }); }
|
|
670
|
-
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-
|
|
665
|
+
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 }); }
|
|
671
666
|
}
|
|
672
667
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
673
668
|
type: Directive,
|
|
@@ -677,7 +672,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
677
672
|
host: {
|
|
678
673
|
role: 'button',
|
|
679
674
|
'[attr.tabindex]': '0',
|
|
680
|
-
'[attr.aria-
|
|
675
|
+
'[attr.aria-disabled]': 'busy',
|
|
681
676
|
},
|
|
682
677
|
}]
|
|
683
678
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { variant: [{
|
|
@@ -703,11 +698,11 @@ class WizardProgressTrackerComponent {
|
|
|
703
698
|
this.toggled = !this.toggled;
|
|
704
699
|
}
|
|
705
700
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: WizardProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
706
|
-
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
|
|
701
|
+
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"] }] }); }
|
|
707
702
|
}
|
|
708
703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: WizardProgressTrackerComponent, decorators: [{
|
|
709
704
|
type: Component,
|
|
710
|
-
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
|
|
705
|
+
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" }]
|
|
711
706
|
}], propDecorators: { steps: [{
|
|
712
707
|
type: Input
|
|
713
708
|
}], currentStep: [{
|
|
@@ -1485,6 +1480,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
1485
1480
|
}]
|
|
1486
1481
|
}] });
|
|
1487
1482
|
|
|
1483
|
+
class MzDropdownComponent {
|
|
1484
|
+
constructor() {
|
|
1485
|
+
this.label = '';
|
|
1486
|
+
this.open = false;
|
|
1487
|
+
}
|
|
1488
|
+
toggle() {
|
|
1489
|
+
this.open = !this.open;
|
|
1490
|
+
}
|
|
1491
|
+
collapse() {
|
|
1492
|
+
this.open = false;
|
|
1493
|
+
}
|
|
1494
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1495
|
+
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 }); }
|
|
1496
|
+
}
|
|
1497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownComponent, decorators: [{
|
|
1498
|
+
type: Component,
|
|
1499
|
+
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"] }]
|
|
1500
|
+
}], propDecorators: { label: [{
|
|
1501
|
+
type: Input
|
|
1502
|
+
}], open: [{
|
|
1503
|
+
type: Input
|
|
1504
|
+
}] } });
|
|
1505
|
+
|
|
1506
|
+
class MzDropdownItemDirective {
|
|
1507
|
+
constructor(dropdown) {
|
|
1508
|
+
this.dropdown = dropdown;
|
|
1509
|
+
}
|
|
1510
|
+
close() {
|
|
1511
|
+
this.dropdown.collapse();
|
|
1512
|
+
}
|
|
1513
|
+
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 }); }
|
|
1514
|
+
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 }); }
|
|
1515
|
+
}
|
|
1516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownItemDirective, decorators: [{
|
|
1517
|
+
type: Directive,
|
|
1518
|
+
args: [{
|
|
1519
|
+
selector: '[mzDropdownItem]',
|
|
1520
|
+
standalone: true,
|
|
1521
|
+
host: {
|
|
1522
|
+
'class': 'mz-dropdown-item',
|
|
1523
|
+
'(click)': 'close()'
|
|
1524
|
+
}
|
|
1525
|
+
}]
|
|
1526
|
+
}], ctorParameters: () => [{ type: MzDropdownComponent, decorators: [{
|
|
1527
|
+
type: Host
|
|
1528
|
+
}] }] });
|
|
1529
|
+
|
|
1530
|
+
class MzDropdownModule {
|
|
1531
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1532
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownModule, imports: [MzDropdownComponent, MzDropdownItemDirective], exports: [MzDropdownComponent, MzDropdownItemDirective] }); }
|
|
1533
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownModule }); }
|
|
1534
|
+
}
|
|
1535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: MzDropdownModule, decorators: [{
|
|
1536
|
+
type: NgModule,
|
|
1537
|
+
args: [{
|
|
1538
|
+
imports: [MzDropdownComponent, MzDropdownItemDirective],
|
|
1539
|
+
exports: [MzDropdownComponent, MzDropdownItemDirective]
|
|
1540
|
+
}]
|
|
1541
|
+
}] });
|
|
1542
|
+
|
|
1488
1543
|
class FilterComponent {
|
|
1489
1544
|
constructor() {
|
|
1490
1545
|
this.label = 'Filter';
|
|
@@ -1562,11 +1617,11 @@ class OptionsFilterComponent {
|
|
|
1562
1617
|
this.open = false;
|
|
1563
1618
|
}
|
|
1564
1619
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OptionsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1565
|
-
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
|
|
1620
|
+
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 }); }
|
|
1566
1621
|
}
|
|
1567
1622
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: OptionsFilterComponent, decorators: [{
|
|
1568
1623
|
type: Component,
|
|
1569
|
-
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
|
|
1624
|
+
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"] }]
|
|
1570
1625
|
}], propDecorators: { options: [{
|
|
1571
1626
|
type: Input
|
|
1572
1627
|
}], values: [{
|
|
@@ -1590,5 +1645,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
|
|
|
1590
1645
|
* Generated bundle index. Do not edit.
|
|
1591
1646
|
*/
|
|
1592
1647
|
|
|
1593
|
-
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 };
|
|
1648
|
+
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 };
|
|
1594
1649
|
//# sourceMappingURL=muziehdesign-components.mjs.map
|