@muziehdesign/components 18.2.0-beta.2334 → 18.2.0-beta.2345
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/esm2022/lib/alert/alert.component.mjs +4 -4
- package/esm2022/lib/button.directive.mjs +4 -4
- package/esm2022/lib/components.module.mjs +5 -5
- package/esm2022/lib/date-display/date-display.pipe.mjs +4 -4
- package/esm2022/lib/date-display/date.pipe.mjs +4 -4
- package/esm2022/lib/date-time/date-time.component.mjs +4 -4
- package/esm2022/lib/dialog/container/drawer-container.component.mjs +57 -0
- package/esm2022/lib/dialog/dialog-config.mjs +50 -0
- package/esm2022/lib/dialog/dialog-injectors.mjs +5 -0
- package/esm2022/lib/dialog/dialog-ref.mjs +57 -0
- package/esm2022/lib/dialog/dialog.module.mjs +25 -0
- package/esm2022/lib/dialog/mz-dialog.service.mjs +108 -0
- package/esm2022/lib/dropdown/dropdown-item.directive.mjs +5 -5
- package/esm2022/lib/dropdown/dropdown.component.mjs +5 -5
- package/esm2022/lib/dropdown/dropdown.module.mjs +5 -5
- package/esm2022/lib/enum-display/enum-display.pipe.mjs +4 -4
- package/esm2022/lib/filter/filter.component.mjs +5 -5
- package/esm2022/lib/guard-deactivate.mjs +14 -0
- package/esm2022/lib/infinite-scroll/infinite-scroll.component.mjs +4 -4
- package/esm2022/lib/inline-edit/inline-edit.component.mjs +4 -4
- package/esm2022/lib/options-filter/options-filter.component.mjs +5 -5
- package/esm2022/lib/page-header/page-header.component.mjs +4 -4
- package/esm2022/lib/page-loading-indicator/page-loading-indicator.component.mjs +8 -11
- package/esm2022/lib/pagination/pagination.component.mjs +4 -4
- package/esm2022/lib/phone-number/phone-number.pipe.mjs +4 -4
- package/esm2022/lib/result-table/result-table.component.mjs +4 -4
- package/esm2022/lib/sort-key.directive.mjs +4 -4
- package/esm2022/lib/sort.directive.mjs +4 -4
- package/esm2022/lib/spinner/spinner.component.mjs +4 -4
- package/esm2022/lib/subject-display/subject-display.pipe.mjs +4 -4
- package/esm2022/lib/svg-icon/svg-icon.component.mjs +4 -4
- package/esm2022/lib/time-value-accessor.directive.mjs +4 -4
- package/esm2022/lib/time-value-validator.directive.mjs +4 -4
- package/esm2022/lib/wizard-progress-tracker/wizard-progress-tracker.component.mjs +4 -6
- package/esm2022/public-api.mjs +11 -4
- package/fesm2022/muziehdesign-components.mjs +408 -143
- package/fesm2022/muziehdesign-components.mjs.map +1 -1
- package/lib/dialog/container/drawer-container.component.d.ts +25 -0
- package/lib/dialog/dialog-config.d.ts +93 -0
- package/lib/dialog/dialog-injectors.d.ts +5 -0
- package/lib/dialog/dialog-ref.d.ts +30 -0
- package/lib/dialog/dialog.module.d.ts +10 -0
- package/lib/dialog/mz-dialog.service.d.ts +39 -0
- package/lib/guard-deactivate.d.ts +11 -0
- package/lib/page-loading-indicator/page-loading-indicator.component.d.ts +2 -4
- package/lib/wizard-progress-tracker/wizard-progress-tracker.component.d.ts +0 -2
- package/package.json +2 -3
- package/public-api.d.ts +7 -2
- package/styles/design/_dialog.scss +2 -2
- package/styles/design/_utilities.scss +27 -0
- package/styles/mixins/_dialog.scss +5 -3
- package/styles/mixins/_icon.scss +0 -1
- package/styles/mixins/_layout.scss +0 -0
- package/esm2022/lib/drawer/drawer-container.component.mjs +0 -21
- package/lib/drawer/drawer-container.component.d.ts +0 -8
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { InjectionToken, Component, Inject, Input, HostBinding, Pipe, EventEmitter, Optional, Output, ContentChild, Directive, HostListener, forwardRef, ViewChild, NgModule, LOCALE_ID, ElementRef,
|
|
2
|
+
import { InjectionToken, Component, Inject, Input, HostBinding, Pipe, EventEmitter, Optional, Output, ContentChild, Directive, HostListener, forwardRef, ViewChild, NgModule, LOCALE_ID, ElementRef, Injectable, ViewEncapsulation, Host } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule, DatePipe } from '@angular/common';
|
|
4
|
+
import { CommonModule, DatePipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i1$1 from '@angular/router';
|
|
6
6
|
import { NavigationEnd, NavigationCancel, NavigationError, NavigationStart } from '@angular/router';
|
|
7
|
-
import { race, BehaviorSubject, Subscription, fromEvent } from 'rxjs';
|
|
7
|
+
import { race, BehaviorSubject, Subscription, fromEvent, merge, filter as filter$1, take as take$1 } from 'rxjs';
|
|
8
8
|
import { filter, delay, take, repeat } from 'rxjs/operators';
|
|
9
|
-
import { SubSink } from 'subsink';
|
|
10
9
|
import * as i1$2 from '@angular/platform-browser';
|
|
11
10
|
import { By } from '@angular/platform-browser';
|
|
12
11
|
import * as i1$4 from '@angular/forms';
|
|
13
12
|
import { NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, NgModel, NgForm } from '@angular/forms';
|
|
14
13
|
import * as i1$3 from '@angular/material/datepicker';
|
|
15
14
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
16
|
-
import { CdkDialogContainer } from '@angular/cdk/dialog';
|
|
17
|
-
import
|
|
15
|
+
import { CdkDialogContainer, Dialog, DialogConfig, DialogModule } from '@angular/cdk/dialog';
|
|
16
|
+
import * as i3 from '@angular/cdk/overlay';
|
|
17
|
+
import { OverlayModule, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
18
|
+
import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
|
|
19
|
+
import * as i1$5 from '@angular/cdk/a11y';
|
|
18
20
|
import { CdkTrapFocus } from '@angular/cdk/a11y';
|
|
19
|
-
import { CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
20
21
|
|
|
21
22
|
const SVG_ICON_DEFAULT_OPTIONS = new InjectionToken('MzSvgIconOptions', {
|
|
22
23
|
providedIn: 'root',
|
|
@@ -43,10 +44,10 @@ class SvgIconComponent {
|
|
|
43
44
|
get classes() {
|
|
44
45
|
return `icon icon-${this.type} icon-${this.size}`;
|
|
45
46
|
}
|
|
46
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
47
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
47
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SvgIconComponent, deps: [{ token: SVG_ICON_DEFAULT_OPTIONS }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
48
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: SvgIconComponent, isStandalone: true, selector: "mz-svg-icon", inputs: { key: "key", type: "type", size: "size" }, 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"] }); }
|
|
48
49
|
}
|
|
49
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
50
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SvgIconComponent, decorators: [{
|
|
50
51
|
type: Component,
|
|
51
52
|
args: [{ selector: 'mz-svg-icon', standalone: true, imports: [], template: "<svg xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <use [attr.href]=\"url\" />\n</svg>", styles: [":host.icon-medium{width:1.25rem;height:1.25rem}:host.icon{display:inline-block}svg{height:100%;width:100%}\n"] }]
|
|
52
53
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -98,10 +99,10 @@ class EnumDisplayPipe {
|
|
|
98
99
|
firstLetterToUppercase(value) {
|
|
99
100
|
return value.length > 1 ? `${value.substring(0, 1).toUpperCase()}${value.substring(1)}` : value.toUpperCase();
|
|
100
101
|
}
|
|
101
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
102
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.
|
|
102
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: EnumDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
103
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: EnumDisplayPipe, isStandalone: true, name: "mzEnumDisplay" }); }
|
|
103
104
|
}
|
|
104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
105
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: EnumDisplayPipe, decorators: [{
|
|
105
106
|
type: Pipe,
|
|
106
107
|
args: [{
|
|
107
108
|
name: 'mzEnumDisplay',
|
|
@@ -114,10 +115,10 @@ class SpinnerComponent {
|
|
|
114
115
|
this.size = 'medium';
|
|
115
116
|
this.type = 'primary';
|
|
116
117
|
}
|
|
117
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
118
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
118
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
119
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: SpinnerComponent, isStandalone: true, selector: "mz-spinner", inputs: { size: "size", type: "type" }, ngImport: i0, template: "<svg class=\"mz-spinner\" [ngClass]=\"{'large': size == 'large', 'medium': size == 'medium', 'text-primary': type == 'primary', 'text-secondary': type == 'secondary'}\" xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n</svg>\n", styles: [".mz-spinner{animation:spin 1s linear infinite;margin:auto}.mz-spinner.medium{height:1.25rem;width:1.25rem}.mz-spinner.large{height:4rem;width:4rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
119
120
|
}
|
|
120
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SpinnerComponent, decorators: [{
|
|
121
122
|
type: Component,
|
|
122
123
|
args: [{ selector: 'mz-spinner', standalone: true, imports: [CommonModule], template: "<svg class=\"mz-spinner\" [ngClass]=\"{'large': size == 'large', 'medium': size == 'medium', 'text-primary': type == 'primary', 'text-secondary': type == 'secondary'}\" xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\" viewBox=\"0 0 24 24\">\n <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n <path class=\"opacity-75\" fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\">\n </path>\n</svg>\n", styles: [".mz-spinner{animation:spin 1s linear infinite;margin:auto}.mz-spinner.medium{height:1.25rem;width:1.25rem}.mz-spinner.large{height:4rem;width:4rem}\n"] }]
|
|
123
124
|
}], ctorParameters: () => [], propDecorators: { size: [{
|
|
@@ -189,10 +190,10 @@ class PaginationComponent {
|
|
|
189
190
|
}
|
|
190
191
|
this.pages = pageNumbers;
|
|
191
192
|
}
|
|
192
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
193
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
193
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PaginationComponent, deps: [{ token: PAGINATION_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
194
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PaginationComponent, isStandalone: true, selector: "mz-pagination", inputs: { length: "length", page: "page", pageSize: "pageSize", pageSizeOptions: "pageSizeOptions" }, outputs: { changePage: "changePage" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link\" [ngClass]=\"{'disabled': page == 1}\" (click)=\"changePageNumber(page-1)\">\n <span class=\"sr-only\">Previous page</span>\n <mz-svg-icon key=\"chevron-left\"></mz-svg-icon>\n </button>\n <ng-container *ngFor=\"let p of pages\">\n <span class=\"page-ellipsis page-link disabled\" *ngIf=\"isEllipsis(p)\">...</span>\n <button class=\"page-link\" [ngClass]=\"{'active': p == page}\" (click)=\"changePageNumber(p)\"\n *ngIf=\"!isEllipsis(p)\">{{p}}</button>\n </ng-container>\n <button class=\"page-link\" [ngClass]=\"{'disabled': page == pageCount}\" (click)=\"changePageNumber(page+1)\">\n <span class=\"sr-only\">Next page</span>\n <mz-svg-icon key=\"chevron-right\"></mz-svg-icon>\n </button>\n </nav>\n <div class=\"pagination-size\">\n Show\n <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n <option *ngFor=\"let size of pageSizeOptions\" [attr.selected]=\"pageSize == size ? true : null\"\n [value]=\"size\">{{size}}</option>\n </select>\n per page\n </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
|
|
194
195
|
}
|
|
195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
196
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
196
197
|
type: Component,
|
|
197
198
|
args: [{ selector: 'mz-pagination', imports: [CommonModule, SvgIconComponent], standalone: true, template: "<div class=\"pagination-wrapper\">\n <nav class=\"pagination-nav\" aria-label=\"pagination\">\n <button class=\"page-link\" [ngClass]=\"{'disabled': page == 1}\" (click)=\"changePageNumber(page-1)\">\n <span class=\"sr-only\">Previous page</span>\n <mz-svg-icon key=\"chevron-left\"></mz-svg-icon>\n </button>\n <ng-container *ngFor=\"let p of pages\">\n <span class=\"page-ellipsis page-link disabled\" *ngIf=\"isEllipsis(p)\">...</span>\n <button class=\"page-link\" [ngClass]=\"{'active': p == page}\" (click)=\"changePageNumber(p)\"\n *ngIf=\"!isEllipsis(p)\">{{p}}</button>\n </ng-container>\n <button class=\"page-link\" [ngClass]=\"{'disabled': page == pageCount}\" (click)=\"changePageNumber(page+1)\">\n <span class=\"sr-only\">Next page</span>\n <mz-svg-icon key=\"chevron-right\"></mz-svg-icon>\n </button>\n </nav>\n <div class=\"pagination-size\">\n Show\n <select #c (change)=\"changePageSize(c.value)\" name=\"pageSizeControl\" class=\"page-size-control\">\n <option *ngFor=\"let size of pageSizeOptions\" [attr.selected]=\"pageSize == size ? true : null\"\n [value]=\"size\">{{size}}</option>\n </select>\n per page\n </div>\n</div>" }]
|
|
198
199
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
@@ -244,10 +245,10 @@ class ResultTableComponent {
|
|
|
244
245
|
get isEmpty() {
|
|
245
246
|
return !this.model || this.model.items.length === 0;
|
|
246
247
|
}
|
|
247
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
248
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
248
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ResultTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: ResultTableComponent, isStandalone: true, selector: "mz-result-table", inputs: { loading: "loading", error: "error", model: "model", pageSizeOptions: "pageSizeOptions", options: "options" }, outputs: { pageChange: "pageChange" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\n <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\n <mz-spinner size=\"large\" 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"] }] }); }
|
|
249
250
|
}
|
|
250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ResultTableComponent, decorators: [{
|
|
251
252
|
type: Component,
|
|
252
253
|
args: [{ selector: 'mz-result-table', imports: [CommonModule, PaginationComponent, SpinnerComponent, SvgIconComponent], standalone: true, template: "<div class=\"result-table\" [ngClass]=\"{'loading': state === 'loading', 'failed': state === 'failed'}\" #tableRef>\n <div class=\"loading-overlay-spinner\" *ngIf=\"state === 'loading'\">\n <mz-spinner size=\"large\" 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" }]
|
|
253
254
|
}], ctorParameters: () => [], propDecorators: { loading: [{
|
|
@@ -275,21 +276,19 @@ class PageLoadingIndicatorComponent {
|
|
|
275
276
|
this.router = router;
|
|
276
277
|
this.isLoading = false;
|
|
277
278
|
this.expectedMilisecondsDelay = 1000;
|
|
278
|
-
this.subs = new SubSink();
|
|
279
279
|
}
|
|
280
280
|
ngOnInit() {
|
|
281
281
|
const endObs$ = this.router.events.pipe(filter((e) => e instanceof NavigationEnd || e instanceof NavigationCancel || e instanceof NavigationError));
|
|
282
|
-
|
|
282
|
+
race(this.router.events.pipe(filter((e) => e instanceof NavigationStart), delay(this.expectedMilisecondsDelay)), endObs$)
|
|
283
|
+
.pipe(take(1), repeat())
|
|
284
|
+
.subscribe((x) => (this.isLoading = x instanceof NavigationStart));
|
|
283
285
|
// the flag need to be reset to false when the page finishes loading
|
|
284
|
-
|
|
286
|
+
endObs$.subscribe(() => (this.isLoading = false));
|
|
285
287
|
}
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
}
|
|
289
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PageLoadingIndicatorComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
290
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PageLoadingIndicatorComponent, isStandalone: true, selector: "mz-page-loading-indicator", inputs: { isLoading: "isLoading" }, ngImport: i0, template: "<div class=\"progress-bar-container\" *ngIf=\"isLoading\">\n <div class=\"progress-bar progress-bar-indeterminate\">\n <div class=\"progress-bar-value\"></div>\n </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PageLoadingIndicatorComponent, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
289
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PageLoadingIndicatorComponent, isStandalone: true, selector: "mz-page-loading-indicator", inputs: { isLoading: "isLoading" }, ngImport: i0, template: "<div class=\"progress-bar-container\" *ngIf=\"isLoading\">\n <div class=\"progress-bar progress-bar-indeterminate\">\n <div class=\"progress-bar-value\"></div>\n </div>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
291
290
|
}
|
|
292
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PageLoadingIndicatorComponent, decorators: [{
|
|
293
292
|
type: Component,
|
|
294
293
|
args: [{ selector: 'mz-page-loading-indicator', imports: [CommonModule], standalone: true, template: "<div class=\"progress-bar-container\" *ngIf=\"isLoading\">\n <div class=\"progress-bar progress-bar-indeterminate\">\n <div class=\"progress-bar-value\"></div>\n </div>\n</div>" }]
|
|
295
294
|
}], ctorParameters: () => [{ type: i1$1.Router }], propDecorators: { isLoading: [{
|
|
@@ -309,10 +308,10 @@ class PageHeaderComponent {
|
|
|
309
308
|
this.title.setTitle(newValue);
|
|
310
309
|
}
|
|
311
310
|
ngOnInit() { }
|
|
312
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
313
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
311
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PageHeaderComponent, deps: [{ token: i1$2.Title }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: PageHeaderComponent, isStandalone: true, selector: "mz-page-header", inputs: { pageTitle: "pageTitle" }, ngImport: i0, template: "<header class=\"page-header\">\n <h1>{{ pageTitle }}</h1>\n <ng-content></ng-content>\n</header>", styles: [""] }); }
|
|
314
313
|
}
|
|
315
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
314
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
316
315
|
type: Component,
|
|
317
316
|
args: [{ selector: 'mz-page-header', standalone: true, template: "<header class=\"page-header\">\n <h1>{{ pageTitle }}</h1>\n <ng-content></ng-content>\n</header>" }]
|
|
318
317
|
}], ctorParameters: () => [{ type: i1$2.Title }], propDecorators: { pageTitle: [{
|
|
@@ -350,14 +349,14 @@ class TimeValueAccessorDirective {
|
|
|
350
349
|
registerOnTouched(fn) {
|
|
351
350
|
this.onTouched = fn;
|
|
352
351
|
}
|
|
353
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
354
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
352
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TimeValueAccessorDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
353
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: TimeValueAccessorDirective, isStandalone: true, selector: "input[type=time]", host: { listeners: { "input": "onChange($event.target.value)" } }, providers: [{
|
|
355
354
|
provide: NG_VALUE_ACCESSOR,
|
|
356
355
|
useExisting: TimeValueAccessorDirective,
|
|
357
356
|
multi: true
|
|
358
357
|
}], ngImport: i0 }); }
|
|
359
358
|
}
|
|
360
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
359
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TimeValueAccessorDirective, decorators: [{
|
|
361
360
|
type: Directive,
|
|
362
361
|
args: [{
|
|
363
362
|
selector: 'input[type=time]',
|
|
@@ -398,10 +397,10 @@ class AlertComponent {
|
|
|
398
397
|
}
|
|
399
398
|
return icon;
|
|
400
399
|
}
|
|
401
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
400
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
401
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: AlertComponent, isStandalone: true, selector: "mz-alert", inputs: { title: "title", type: "type", body: "body", footer: "footer" }, ngImport: i0, template: "<div [className]=\"'alert alert-' + type\">\n\n <div>\n <div class=\"alert-icon\">\n <mz-svg-icon [key]=\"getAlertIcon()\" type=\"solid\"></mz-svg-icon>\n </div>\n\n <div class=\"alert-title\">\n <strong>{{ title }}</strong>\n </div>\n </div>\n\n <div class=\"alert-body\" *ngIf=\"body\">\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </div>\n\n <div class=\"alert-footer\" *ngIf=\"footer\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
|
|
403
402
|
}
|
|
404
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
403
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: AlertComponent, decorators: [{
|
|
405
404
|
type: Component,
|
|
406
405
|
args: [{ selector: 'mz-alert', imports: [CommonModule, SvgIconComponent], standalone: true, template: "<div [className]=\"'alert alert-' + type\">\n\n <div>\n <div class=\"alert-icon\">\n <mz-svg-icon [key]=\"getAlertIcon()\" type=\"solid\"></mz-svg-icon>\n </div>\n\n <div class=\"alert-title\">\n <strong>{{ title }}</strong>\n </div>\n </div>\n\n <div class=\"alert-body\" *ngIf=\"body\">\n <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n </div>\n\n <div class=\"alert-footer\" *ngIf=\"footer\">\n <ng-container *ngTemplateOutlet=\"footer\"></ng-container>\n </div>\n\n</div>" }]
|
|
407
406
|
}], ctorParameters: () => [], propDecorators: { title: [{
|
|
@@ -425,10 +424,10 @@ class PhoneNumberPipe {
|
|
|
425
424
|
}
|
|
426
425
|
return number;
|
|
427
426
|
}
|
|
428
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
429
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.
|
|
427
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PhoneNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
428
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: PhoneNumberPipe, isStandalone: true, name: "mzPhoneNumber" }); }
|
|
430
429
|
}
|
|
431
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: PhoneNumberPipe, decorators: [{
|
|
432
431
|
type: Pipe,
|
|
433
432
|
args: [{
|
|
434
433
|
name: 'mzPhoneNumber',
|
|
@@ -456,10 +455,10 @@ class DateDisplayPipe {
|
|
|
456
455
|
}
|
|
457
456
|
return redefinedDate;
|
|
458
457
|
}
|
|
459
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
460
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.
|
|
458
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DateDisplayPipe, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
459
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: DateDisplayPipe, isStandalone: true, name: "mzDateDisplay" }); }
|
|
461
460
|
}
|
|
462
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DateDisplayPipe, decorators: [{
|
|
463
462
|
type: Pipe,
|
|
464
463
|
args: [{
|
|
465
464
|
name: 'mzDateDisplay',
|
|
@@ -482,10 +481,10 @@ class SortDirective {
|
|
|
482
481
|
setActiveHeaderSort() {
|
|
483
482
|
this.active = this._mzSort.includes('-') ? this._mzSort.slice(1) : this._mzSort;
|
|
484
483
|
}
|
|
485
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
486
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
484
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SortDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
485
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: SortDirective, isStandalone: true, selector: "[mzSort]", inputs: { mzSort: "mzSort" }, outputs: { sort: "sort" }, usesOnChanges: true, ngImport: i0 }); }
|
|
487
486
|
}
|
|
488
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SortDirective, decorators: [{
|
|
489
488
|
type: Directive,
|
|
490
489
|
args: [{
|
|
491
490
|
selector: '[mzSort]',
|
|
@@ -567,10 +566,10 @@ class SortKeyDirective {
|
|
|
567
566
|
setOrder(sort) {
|
|
568
567
|
this.order = sort.includes('-') ? 'desc' : 'asc';
|
|
569
568
|
}
|
|
570
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
571
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
569
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SortKeyDirective, deps: [{ token: SortDirective }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
570
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: SortKeyDirective, isStandalone: true, selector: "[mzSortKey]", inputs: { mzSortKey: "mzSortKey" }, host: { attributes: { "role": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-sort": "getAriaSortAttribute()" } }, ngImport: i0 }); }
|
|
572
571
|
}
|
|
573
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
572
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SortKeyDirective, decorators: [{
|
|
574
573
|
type: Directive,
|
|
575
574
|
args: [{
|
|
576
575
|
selector: '[mzSortKey]',
|
|
@@ -592,10 +591,10 @@ class SubjectDisplayPipe {
|
|
|
592
591
|
}
|
|
593
592
|
return subject.givenName && subject.familyName ? `${subject.givenName} ${subject.familyName}` : subject.userPrincipalName;
|
|
594
593
|
}
|
|
595
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
596
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.
|
|
594
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SubjectDisplayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
595
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: SubjectDisplayPipe, isStandalone: true, name: "mzSubjectDisplay" }); }
|
|
597
596
|
}
|
|
598
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
597
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: SubjectDisplayPipe, decorators: [{
|
|
599
598
|
type: Pipe,
|
|
600
599
|
args: [{
|
|
601
600
|
name: 'mzSubjectDisplay',
|
|
@@ -662,10 +661,10 @@ class ButtonDirective {
|
|
|
662
661
|
getOverlayDiv() {
|
|
663
662
|
return this.getChildElement('.button-loading-overlay');
|
|
664
663
|
}
|
|
665
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
666
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
664
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
665
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", 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 }); }
|
|
667
666
|
}
|
|
668
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: ButtonDirective, decorators: [{
|
|
669
668
|
type: Directive,
|
|
670
669
|
args: [{
|
|
671
670
|
selector: '[mzButton]',
|
|
@@ -691,7 +690,6 @@ class WizardProgressTrackerComponent {
|
|
|
691
690
|
this.currentStep = 0;
|
|
692
691
|
this.stepChange = new EventEmitter();
|
|
693
692
|
this.toggled = true;
|
|
694
|
-
this.subs = new SubSink();
|
|
695
693
|
}
|
|
696
694
|
goToStep(step) {
|
|
697
695
|
this.stepChange.emit(step);
|
|
@@ -699,10 +697,10 @@ class WizardProgressTrackerComponent {
|
|
|
699
697
|
toggle() {
|
|
700
698
|
this.toggled = !this.toggled;
|
|
701
699
|
}
|
|
702
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
703
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
700
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: WizardProgressTrackerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
701
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: WizardProgressTrackerComponent, isStandalone: true, selector: "mz-wizard-progress-tracker", inputs: { steps: "steps", currentStep: "currentStep" }, outputs: { stepChange: "stepChange" }, ngImport: i0, template: "<div class=\"wizard-progress-tracker\">\n <div class=\"direction-container\">\n <span class=\"steps-count\">Step {{ currentStep + 1 }} of {{ steps.length }}</span>\n <div class=\"wizard-steps-container\" [ngClass]=\"{'toggled': toggled}\">\n <div *ngFor=\"let step of steps; index as i;\" class=\"wizard-step\"\n [ngClass]=\"{ 'previous': i < currentStep, 'current': i === currentStep, 'unvisited': i > currentStep }\">\n <ng-container>\n <div class=\"wizard-step-icon-container\">\n <div class=\"spacer left\">\n </div>\n <div *ngIf=\"i > 0\" class=\"step-line left\"></div>\n\n <div *ngIf=\"i < currentStep\" class=\"wizard-step-icon\">\n <mz-svg-icon key=\"check-circle\" type=\"solid\">\n </mz-svg-icon>\n </div>\n <div *ngIf=\"i === currentStep\" class=\"wizard-step-icon\">\n <div class=\"step-inner-circle\"></div>\n </div>\n <div *ngIf=\"i > currentStep\" class=\"wizard-step-icon\">\n </div>\n\n <div *ngIf=\"i < (steps.length - 1)\" class=\"step-line step-line-right\"></div>\n <div class=\"spacer right\"></div>\n </div>\n <a *ngIf=\"i < currentStep\" class=\"step-desc\" (click)=\"goToStep(step)\"> {{\n step.name\n }}</a>\n <div *ngIf=\" i === currentStep\" class=\"step-desc\"> {{ step.name }}\n </div>\n <div *ngIf=\" i > currentStep\" class=\"step-desc\"> {{ step.name }}\n </div>\n <div class=\"toggable-icon\">\n <button *ngIf=\"!toggled\" (click)=\"toggle()\">\n <mz-svg-icon key=\"chevron-down\"></mz-svg-icon>\n </button>\n <button *ngIf=\"toggled\" (click)=\"toggle()\">\n <mz-svg-icon key=\"chevron-up\"></mz-svg-icon>\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SvgIconComponent, selector: "mz-svg-icon", inputs: ["key", "type", "size"] }] }); }
|
|
704
702
|
}
|
|
705
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
703
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: WizardProgressTrackerComponent, decorators: [{
|
|
706
704
|
type: Component,
|
|
707
705
|
args: [{ selector: 'mz-wizard-progress-tracker', standalone: true, imports: [CommonModule, SvgIconComponent], template: "<div class=\"wizard-progress-tracker\">\n <div class=\"direction-container\">\n <span class=\"steps-count\">Step {{ currentStep + 1 }} of {{ steps.length }}</span>\n <div class=\"wizard-steps-container\" [ngClass]=\"{'toggled': toggled}\">\n <div *ngFor=\"let step of steps; index as i;\" class=\"wizard-step\"\n [ngClass]=\"{ 'previous': i < currentStep, 'current': i === currentStep, 'unvisited': i > currentStep }\">\n <ng-container>\n <div class=\"wizard-step-icon-container\">\n <div class=\"spacer left\">\n </div>\n <div *ngIf=\"i > 0\" class=\"step-line left\"></div>\n\n <div *ngIf=\"i < currentStep\" class=\"wizard-step-icon\">\n <mz-svg-icon key=\"check-circle\" type=\"solid\">\n </mz-svg-icon>\n </div>\n <div *ngIf=\"i === currentStep\" class=\"wizard-step-icon\">\n <div class=\"step-inner-circle\"></div>\n </div>\n <div *ngIf=\"i > currentStep\" class=\"wizard-step-icon\">\n </div>\n\n <div *ngIf=\"i < (steps.length - 1)\" class=\"step-line step-line-right\"></div>\n <div class=\"spacer right\"></div>\n </div>\n <a *ngIf=\"i < currentStep\" class=\"step-desc\" (click)=\"goToStep(step)\"> {{\n step.name\n }}</a>\n <div *ngIf=\" i === currentStep\" class=\"step-desc\"> {{ step.name }}\n </div>\n <div *ngIf=\" i > currentStep\" class=\"step-desc\"> {{ step.name }}\n </div>\n <div class=\"toggable-icon\">\n <button *ngIf=\"!toggled\" (click)=\"toggle()\">\n <mz-svg-icon key=\"chevron-down\"></mz-svg-icon>\n </button>\n <button *ngIf=\"toggled\" (click)=\"toggle()\">\n <mz-svg-icon key=\"chevron-up\"></mz-svg-icon>\n </button>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
708
706
|
}], propDecorators: { steps: [{
|
|
@@ -816,8 +814,8 @@ class DateTimeComponent {
|
|
|
816
814
|
this.onChange(undefined);
|
|
817
815
|
}
|
|
818
816
|
}
|
|
819
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
820
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
817
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DateTimeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
818
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: DateTimeComponent, isStandalone: true, selector: "mz-datetime", inputs: { min: "min", max: "max", disabled: "disabled" }, providers: [
|
|
821
819
|
{
|
|
822
820
|
provide: NG_VALUE_ACCESSOR,
|
|
823
821
|
useExisting: forwardRef(() => DateTimeComponent),
|
|
@@ -825,7 +823,7 @@ class DateTimeComponent {
|
|
|
825
823
|
},
|
|
826
824
|
], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datePicker"], descendants: true }], ngImport: i0, template: "<div class=\"flex\">\n <div class=\"field-control-combo\">\n <input class=\"field-control\" type=\"text\" [value]=\"date\" (change)=\"updateDate($event)\" [min]=\"min\" [max]=\"max\"\n [matDatepicker]=\"datePicker\" (dateChange)=\"updateDateEvent($event)\" [disabled]=\"disabled\" ngDefaultControl>\n <div class=\"field-control-addon\">\n <button class=\"button button-secondary button-icon\" type=\"button\" (click)=\"datePicker.open()\"\n [disabled]=\"disabled\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\n stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\"\n d=\"M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z\" />\n </svg>\n </button>\n <mat-datepicker #datePicker></mat-datepicker>\n </div>\n </div>\n <div class=\"field-control-group mt-1 ml-6\">\n <input class=\"field-control\" type=\"time\" [value]=\"time\" (change)=\"updateTime($event)\"\n ngDefaultControl [disabled]=\"disabled\">\n </div>\n</div>\n", styles: ["input:disabled,button:disabled{opacity:.6}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }] }); }
|
|
827
825
|
}
|
|
828
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
826
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DateTimeComponent, decorators: [{
|
|
829
827
|
type: Component,
|
|
830
828
|
args: [{ selector: 'mz-datetime', providers: [
|
|
831
829
|
{
|
|
@@ -859,14 +857,14 @@ class TimeValueValidatorDirective {
|
|
|
859
857
|
}*/
|
|
860
858
|
return null;
|
|
861
859
|
}
|
|
862
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
863
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
860
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TimeValueValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
861
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: TimeValueValidatorDirective, isStandalone: true, selector: "input[type=time]", providers: [{
|
|
864
862
|
provide: NG_VALIDATORS,
|
|
865
863
|
useExisting: TimeValueValidatorDirective,
|
|
866
864
|
multi: true
|
|
867
865
|
}], ngImport: i0 }); }
|
|
868
866
|
}
|
|
869
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: TimeValueValidatorDirective, decorators: [{
|
|
870
868
|
type: Directive,
|
|
871
869
|
args: [{
|
|
872
870
|
selector: 'input[type=time]',
|
|
@@ -898,10 +896,10 @@ class InfiniteScrollComponent {
|
|
|
898
896
|
this.selectedItem = item;
|
|
899
897
|
this.itemSelected.emit(item);
|
|
900
898
|
}
|
|
901
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
902
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
899
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InfiniteScrollComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
900
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.1", type: InfiniteScrollComponent, isStandalone: true, selector: "mz-infinite-scroll", inputs: { items: "items", isLoading: "isLoading", containerHeight: "containerHeight" }, outputs: { itemSelected: "itemSelected", loadMore: "loadMore" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"infinite-scroll-container overflow-auto\" [style.height]=\"containerHeight\" (scroll)=\"onContainerScroll($event)\">\n <ng-container *ngIf=\"itemTemplate; else defaultItems\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-template #defaultItems>\n <div *ngFor=\"let item of items\" class=\"scroll-item\" [ngClass]=\"{'scroll-item-selected': selectedItem === item}\" (click)=\"onItemClick(item)\">\n {{ item.label }}\n </div>\n </ng-template>\n\n <!-- Spinner -->\n <div *ngIf=\"isLoading\" class=\"scroll-spinner-container\">\n <mz-spinner size=\"medium\" type=\"secondary\"></mz-spinner>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "mz-spinner", inputs: ["size", "type"] }] }); }
|
|
903
901
|
}
|
|
904
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: InfiniteScrollComponent, decorators: [{
|
|
905
903
|
type: Component,
|
|
906
904
|
args: [{ selector: 'mz-infinite-scroll', standalone: true, imports: [CommonModule, SpinnerComponent], template: "<div class=\"infinite-scroll-container overflow-auto\" [style.height]=\"containerHeight\" (scroll)=\"onContainerScroll($event)\">\n <ng-container *ngIf=\"itemTemplate; else defaultItems\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\n </ng-container>\n </ng-container>\n <ng-template #defaultItems>\n <div *ngFor=\"let item of items\" class=\"scroll-item\" [ngClass]=\"{'scroll-item-selected': selectedItem === item}\" (click)=\"onItemClick(item)\">\n {{ item.label }}\n </div>\n </ng-template>\n\n <!-- Spinner -->\n <div *ngIf=\"isLoading\" class=\"scroll-spinner-container\">\n <mz-spinner size=\"medium\" type=\"secondary\"></mz-spinner>\n </div>\n</div>\n" }]
|
|
907
905
|
}], propDecorators: { items: [{
|
|
@@ -920,8 +918,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
920
918
|
}] } });
|
|
921
919
|
|
|
922
920
|
class MuziehComponentsModule {
|
|
923
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
924
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
921
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MuziehComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
922
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: MuziehComponentsModule, imports: [CommonModule,
|
|
925
923
|
FormsModule,
|
|
926
924
|
ButtonDirective,
|
|
927
925
|
SvgIconComponent,
|
|
@@ -960,7 +958,7 @@ class MuziehComponentsModule {
|
|
|
960
958
|
WizardProgressTrackerComponent,
|
|
961
959
|
DateTimeComponent,
|
|
962
960
|
TimeValueValidatorDirective] }); }
|
|
963
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
961
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MuziehComponentsModule, providers: [
|
|
964
962
|
DatePipe,
|
|
965
963
|
], imports: [CommonModule,
|
|
966
964
|
FormsModule,
|
|
@@ -973,7 +971,7 @@ class MuziehComponentsModule {
|
|
|
973
971
|
PageLoadingIndicatorComponent,
|
|
974
972
|
DateTimeComponent] }); }
|
|
975
973
|
}
|
|
976
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MuziehComponentsModule, decorators: [{
|
|
977
975
|
type: NgModule,
|
|
978
976
|
args: [{
|
|
979
977
|
imports: [
|
|
@@ -1055,10 +1053,10 @@ class MzDatePipe extends DatePipe {
|
|
|
1055
1053
|
}
|
|
1056
1054
|
return super.transform(value, translatedFormat, translatedTimezone, locale);
|
|
1057
1055
|
}
|
|
1058
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1059
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.
|
|
1056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDatePipe, deps: [{ token: LOCALE_ID }, { token: MZ_DATE_PIPE_DEFAULT_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
1057
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: MzDatePipe, isStandalone: true, name: "mzDate" }); }
|
|
1060
1058
|
}
|
|
1061
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDatePipe, decorators: [{
|
|
1062
1060
|
type: Pipe,
|
|
1063
1061
|
args: [{
|
|
1064
1062
|
name: 'mzDate',
|
|
@@ -1112,10 +1110,10 @@ class MzInlineEditComponent {
|
|
|
1112
1110
|
this.isEditing = false;
|
|
1113
1111
|
this.busy = false;
|
|
1114
1112
|
}
|
|
1115
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1116
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
1113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzInlineEditComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: MzInlineEditComponent, isStandalone: true, selector: "mz-inline-edit", inputs: { label: "label", layout: "layout" }, outputs: { save: "save" }, queries: [{ propertyName: "ngModel", first: true, predicate: NgModel, descendants: true }, { propertyName: "ngModelElement", first: true, predicate: NgModel, descendants: true, read: ElementRef }], ngImport: i0, template: "<form class=\"mz-inline-edit\" [ngClass]=\"{ 'horizontal': layout === 'horizontal', 'vertical': layout === 'vertical' }\">\n @if (isEditing || !label) {\n <ng-content></ng-content>\n } @else if (label && !isEditing) {\n <button type=\"button\" class=\"label-button\" (click)=\"activate()\">\n <span>\n {{ label }}\n </span>\n <span class=\"text-secondary label-button-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z\" />\n </svg>\n </span>\n </button>\n } @if (isEditing) {\n <div class=\"edit-buttons\">\n <button type=\"submit\" mzButton [busy]=\"busy\" (click)=\"submitForm()\">Save</button>\n <button type=\"button\" class=\"button button-tertiary\" (click)=\"cancelEdit()\">Cancel</button>\n <!--<button mzButton [busy]=\"busy\" type=\"submit\" (click)=\"submitForm()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n </svg>\n </button>\n <button type=\"button\" mzButton variant=\"tertiary\" (click)=\"cancelEdit()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\" />\n </svg>\n </button>-->\n </div>\n }\n</form>\n", styles: [".mz-inline-edit{display:flex}.mz-inline-edit.horizontal{flex-direction:row;gap:1rem}.mz-inline-edit.vertical{flex-direction:column;gap:.5rem}.label-button{display:flex;gap:1rem;cursor:pointer}.label-button-icon{width:1rem;height:1rem}.edit-buttons{display:flex;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: ButtonDirective, selector: "[mzButton]", inputs: ["variant", "busy"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
1117
1115
|
}
|
|
1118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzInlineEditComponent, decorators: [{
|
|
1119
1117
|
type: Component,
|
|
1120
1118
|
args: [{ selector: 'mz-inline-edit', standalone: true, imports: [ButtonDirective, FormsModule, CommonModule], template: "<form class=\"mz-inline-edit\" [ngClass]=\"{ 'horizontal': layout === 'horizontal', 'vertical': layout === 'vertical' }\">\n @if (isEditing || !label) {\n <ng-content></ng-content>\n } @else if (label && !isEditing) {\n <button type=\"button\" class=\"label-button\" (click)=\"activate()\">\n <span>\n {{ label }}\n </span>\n <span class=\"text-secondary label-button-icon\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-12.15 12.15a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32L19.513 8.2Z\" />\n </svg>\n </span>\n </button>\n } @if (isEditing) {\n <div class=\"edit-buttons\">\n <button type=\"submit\" mzButton [busy]=\"busy\" (click)=\"submitForm()\">Save</button>\n <button type=\"button\" class=\"button button-tertiary\" (click)=\"cancelEdit()\">Cancel</button>\n <!--<button mzButton [busy]=\"busy\" type=\"submit\" (click)=\"submitForm()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\" clip-rule=\"evenodd\" />\n </svg>\n </button>\n <button type=\"button\" mzButton variant=\"tertiary\" (click)=\"cancelEdit()\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\" />\n </svg>\n </button>-->\n </div>\n }\n</form>\n", styles: [".mz-inline-edit{display:flex}.mz-inline-edit.horizontal{flex-direction:row;gap:1rem}.mz-inline-edit.vertical{flex-direction:column;gap:.5rem}.label-button{display:flex;gap:1rem;cursor:pointer}.label-button-icon{width:1rem;height:1rem}.edit-buttons{display:flex;gap:.5rem}\n"] }]
|
|
1121
1119
|
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { label: [{
|
|
@@ -1198,21 +1196,288 @@ class ResultTableHarness extends MuziehComponentHarness {
|
|
|
1198
1196
|
}
|
|
1199
1197
|
}
|
|
1200
1198
|
|
|
1201
|
-
|
|
1199
|
+
/** Injection token that can be used to provide default options for the dialog module. */
|
|
1200
|
+
const DEFAULT_MZ_DIALOG_CONFIG = new InjectionToken('DefaultMzDialogConfig');
|
|
1201
|
+
const MZ_DIALOG_DATA = new InjectionToken('MzDialogData');
|
|
1202
|
+
|
|
1203
|
+
/**
|
|
1204
|
+
* Configuration opening a modal dialog with the MzDialog service. Properties here are exposes what's available in @angular/cdk DialogConfig
|
|
1205
|
+
* and with a few additional properties for MzDialog.
|
|
1206
|
+
* See https://material.angular.io/cdk/dialog/api#DialogConfig
|
|
1207
|
+
*/
|
|
1208
|
+
class MzDialogConfig {
|
|
1202
1209
|
constructor() {
|
|
1203
|
-
|
|
1210
|
+
this.size = 'md';
|
|
1211
|
+
/** The ARIA role of the dialog element. */
|
|
1212
|
+
this.role = 'dialog';
|
|
1213
|
+
/** Optional CSS class or classes applied to the overlay panel. */
|
|
1214
|
+
this.panelClass = '';
|
|
1215
|
+
/** Whether the dialog has a backdrop. */
|
|
1216
|
+
this.hasBackdrop = true;
|
|
1217
|
+
/** Optional CSS class or classes applied to the overlay backdrop. */
|
|
1218
|
+
this.backdropClass = '';
|
|
1219
|
+
/** Whether the dialog closes with the escape key or pointer events outside the panel element. */
|
|
1220
|
+
this.disableClose = false;
|
|
1221
|
+
/** Width of the dialog. */
|
|
1222
|
+
this.width = '';
|
|
1223
|
+
/** Height of the dialog. */
|
|
1224
|
+
this.height = '';
|
|
1225
|
+
/** Data being injected into the child component. */
|
|
1226
|
+
this.data = null;
|
|
1227
|
+
/** ID of the element that describes the dialog. */
|
|
1228
|
+
this.ariaDescribedBy = null;
|
|
1229
|
+
/** ID of the element that labels the dialog. */
|
|
1230
|
+
this.ariaLabelledBy = null;
|
|
1231
|
+
/** Dialog label applied via `aria-label` */
|
|
1232
|
+
this.ariaLabel = null;
|
|
1233
|
+
/** Whether this is a modal dialog. Used to set the `aria-modal` attribute. */
|
|
1234
|
+
this.ariaModal = true;
|
|
1235
|
+
/**
|
|
1236
|
+
* Where the dialog should focus on open.
|
|
1237
|
+
* @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
|
|
1238
|
+
* AutoFocusTarget instead.
|
|
1239
|
+
*/
|
|
1240
|
+
this.autoFocus = 'first-tabbable';
|
|
1241
|
+
/**
|
|
1242
|
+
* Whether the dialog should restore focus to the previously-focused element upon closing.
|
|
1243
|
+
* Has the following behavior based on the type that is passed in:
|
|
1244
|
+
* - `boolean` - when true, will return focus to the element that was focused before the dialog
|
|
1245
|
+
* was opened, otherwise won't restore focus at all.
|
|
1246
|
+
* - `string` - focus will be restored to the first element that matches the CSS selector.
|
|
1247
|
+
* - `HTMLElement` - focus will be restored to the specific element.
|
|
1248
|
+
*/
|
|
1249
|
+
this.restoreFocus = true;
|
|
1250
|
+
}
|
|
1251
|
+
}
|
|
1252
|
+
|
|
1253
|
+
class DrawerContainerComponent extends CdkDialogContainer {
|
|
1254
|
+
constructor(elementRef, focusTrapFactory, dialogConfig, interactivityChecker, ngZone, overlayRef, _document) {
|
|
1255
|
+
super(elementRef, focusTrapFactory, _document, dialogConfig, interactivityChecker, ngZone, overlayRef);
|
|
1256
|
+
this.dialogConfig = dialogConfig;
|
|
1257
|
+
this.interactivityChecker = interactivityChecker;
|
|
1258
|
+
this.ngZone = ngZone;
|
|
1259
|
+
this.overlayRef = overlayRef;
|
|
1204
1260
|
this.open = false;
|
|
1205
1261
|
}
|
|
1206
|
-
|
|
1207
|
-
|
|
1262
|
+
associateDialogRef(dialogRef) {
|
|
1263
|
+
this.dialogRef = dialogRef;
|
|
1264
|
+
}
|
|
1265
|
+
tryClose(e) {
|
|
1266
|
+
this.dialogRef?.tryClose(undefined, { focusOrigin: e.detail === 0 ? 'keyboard' : 'mouse' });
|
|
1267
|
+
}
|
|
1268
|
+
onBeforeUnload(event) {
|
|
1269
|
+
if (!this.dialogRef?.confirmDeactivation()) {
|
|
1270
|
+
event.preventDefault();
|
|
1271
|
+
event.returnValue = '';
|
|
1272
|
+
}
|
|
1273
|
+
}
|
|
1274
|
+
/**
|
|
1275
|
+
* Marks state of container for animation purposes.
|
|
1276
|
+
*/
|
|
1277
|
+
enter() {
|
|
1208
1278
|
this.open = true;
|
|
1209
1279
|
}
|
|
1210
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1280
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DrawerContainerComponent, deps: [{ token: i0.ElementRef }, { token: i1$5.FocusTrapFactory }, { token: MzDialogConfig }, { token: i1$5.InteractivityChecker }, { token: i0.NgZone }, { token: i3.OverlayRef }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1281
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: DrawerContainerComponent, isStandalone: true, selector: "mz-drawer-container", host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" }, properties: { "class.open": "open" }, classAttribute: "mz-dialog-container" }, usesInheritance: true, ngImport: i0, template: "<article class=\"mz-dialog\">\n <ng-template cdkPortalOutlet />\n\n @if(!dialogConfig.disableClose) {\n <button class=\"button-close\" (click)=\"tryClose($event)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n </svg>\n </button>\n }\n</article>\n", styles: [":host(.mz-dialog-container){background-color:var(--surface-bg);width:500px;max-width:90%;position:absolute;right:0;top:0;height:100vh;transition:translate .3s ease-out;translate:100%}:host(.mz-dialog-container).open{translate:0%}.button-close{height:1.5rem;width:1.5rem;display:inline-block;position:absolute;top:1rem;right:1.5rem;z-index:10}.mz-dialog{height:100%;position:relative;overflow:auto}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] }); }
|
|
1212
1282
|
}
|
|
1213
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1283
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
1214
1284
|
type: Component,
|
|
1215
|
-
args: [{ selector: 'mz-drawer-container', standalone: true, imports: [CdkPortalOutlet],
|
|
1285
|
+
args: [{ selector: 'mz-drawer-container', standalone: true, imports: [CdkPortalOutlet], host: {
|
|
1286
|
+
'class': 'mz-dialog-container',
|
|
1287
|
+
'[class.open]': 'open'
|
|
1288
|
+
}, template: "<article class=\"mz-dialog\">\n <ng-template cdkPortalOutlet />\n\n @if(!dialogConfig.disableClose) {\n <button class=\"button-close\" (click)=\"tryClose($event)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />\n </svg>\n </button>\n }\n</article>\n", styles: [":host(.mz-dialog-container){background-color:var(--surface-bg);width:500px;max-width:90%;position:absolute;right:0;top:0;height:100vh;transition:translate .3s ease-out;translate:100%}:host(.mz-dialog-container).open{translate:0%}.button-close{height:1.5rem;width:1.5rem;display:inline-block;position:absolute;top:1rem;right:1.5rem;z-index:10}.mz-dialog{height:100%;position:relative;overflow:auto}\n"] }]
|
|
1289
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$5.FocusTrapFactory }, { type: MzDialogConfig }, { type: i1$5.InteractivityChecker }, { type: i0.NgZone }, { type: i3.OverlayRef }, { type: undefined, decorators: [{
|
|
1290
|
+
type: Optional
|
|
1291
|
+
}, {
|
|
1292
|
+
type: Inject,
|
|
1293
|
+
args: [DOCUMENT]
|
|
1294
|
+
}] }], propDecorators: { onBeforeUnload: [{
|
|
1295
|
+
type: HostListener,
|
|
1296
|
+
args: ['window:beforeunload', ['$event']]
|
|
1297
|
+
}] } });
|
|
1298
|
+
|
|
1299
|
+
const hasImplementation = (obj, func) => {
|
|
1300
|
+
return obj && obj[func] !== undefined;
|
|
1301
|
+
};
|
|
1302
|
+
/**
|
|
1303
|
+
* Checks whether a modifier key is pressed.
|
|
1304
|
+
* @param event Event to be checked.
|
|
1305
|
+
*/
|
|
1306
|
+
function hasModifierKey(event, ...modifiers) {
|
|
1307
|
+
if (modifiers.length) {
|
|
1308
|
+
return modifiers.some(modifier => event[modifier]);
|
|
1309
|
+
}
|
|
1310
|
+
return event.altKey || event.shiftKey || event.ctrlKey || event.metaKey;
|
|
1311
|
+
}
|
|
1312
|
+
|
|
1313
|
+
class MzDialogRef {
|
|
1314
|
+
constructor(cdkRef, config, containerInstance) {
|
|
1315
|
+
this.cdkRef = cdkRef;
|
|
1316
|
+
this.config = config;
|
|
1317
|
+
this.containerInstance = containerInstance;
|
|
1318
|
+
this.disableClose = config.disableClose;
|
|
1319
|
+
this.id = cdkRef.id;
|
|
1320
|
+
merge(this.cdkRef.backdropClick, this.cdkRef.keydownEvents.pipe(filter$1((event) => !this.disableClose && event.code === 'Escape' && !event.getModifierState(event.key)))).subscribe((event) => {
|
|
1321
|
+
if (!this.disableClose) {
|
|
1322
|
+
event.preventDefault();
|
|
1323
|
+
this.tryClose(undefined, { focusOrigin: event.type === 'keydown' ? 'keyboard' : 'mouse' });
|
|
1324
|
+
}
|
|
1325
|
+
});
|
|
1326
|
+
}
|
|
1327
|
+
get componentInstance() {
|
|
1328
|
+
return this.cdkRef.componentInstance;
|
|
1329
|
+
}
|
|
1330
|
+
get closed() {
|
|
1331
|
+
return this.cdkRef.closed;
|
|
1332
|
+
}
|
|
1333
|
+
/**
|
|
1334
|
+
* Confirms the component's deactivation then closes the dialog.
|
|
1335
|
+
* @param result
|
|
1336
|
+
* @param options
|
|
1337
|
+
* @returns
|
|
1338
|
+
*/
|
|
1339
|
+
tryClose(result, options) {
|
|
1340
|
+
if (this.canDeactivate() || this.confirmDeactivation()) {
|
|
1341
|
+
this.cdkRef.close(result, options);
|
|
1342
|
+
return true;
|
|
1343
|
+
}
|
|
1344
|
+
return false;
|
|
1345
|
+
}
|
|
1346
|
+
/**
|
|
1347
|
+
* Closes the dialog without confirmation.
|
|
1348
|
+
* @param result
|
|
1349
|
+
* @param options
|
|
1350
|
+
*/
|
|
1351
|
+
close(result, options) {
|
|
1352
|
+
this.cdkRef.close(result, options);
|
|
1353
|
+
}
|
|
1354
|
+
confirmDeactivation() {
|
|
1355
|
+
if (hasImplementation(this.cdkRef.componentInstance, 'canDeactivate') && !this.cdkRef.componentInstance.canDeactivate()) {
|
|
1356
|
+
return this.cdkRef.componentInstance.confirmDeactivation();
|
|
1357
|
+
}
|
|
1358
|
+
return true;
|
|
1359
|
+
}
|
|
1360
|
+
canDeactivate() {
|
|
1361
|
+
if (hasImplementation(this.cdkRef.componentInstance, 'canDeactivate')) {
|
|
1362
|
+
return this.cdkRef.componentInstance.canDeactivate();
|
|
1363
|
+
}
|
|
1364
|
+
return true;
|
|
1365
|
+
}
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
class MzDialog {
|
|
1369
|
+
constructor(injector, overlay, configuredOptions, viewContainerRef) {
|
|
1370
|
+
this.injector = injector;
|
|
1371
|
+
this.overlay = overlay;
|
|
1372
|
+
this.configuredOptions = configuredOptions;
|
|
1373
|
+
this.viewContainerRef = viewContainerRef;
|
|
1374
|
+
this.openDialogs = [];
|
|
1375
|
+
this.cdkDialog = injector.get(Dialog);
|
|
1376
|
+
}
|
|
1377
|
+
open(componentOrTemplateRef, config) {
|
|
1378
|
+
const defaultOptions = new MzDialogConfig();
|
|
1379
|
+
const options = { ...(this.configuredOptions || defaultOptions), ...config };
|
|
1380
|
+
// compute closeOnNavigation if left undefined. dialogs need to be destroyed either via navigation or component destruction
|
|
1381
|
+
if (options.closeOnNavigation === undefined) {
|
|
1382
|
+
options.closeOnNavigation = options.viewContainerRef === undefined && (this.viewContainerRef === undefined || this.viewContainerRef === null);
|
|
1383
|
+
}
|
|
1384
|
+
let dialogRef;
|
|
1385
|
+
const cdkRef = this.cdkDialog.open(componentOrTemplateRef, {
|
|
1386
|
+
...options,
|
|
1387
|
+
injector: options.injector,
|
|
1388
|
+
viewContainerRef: options.viewContainerRef || this.viewContainerRef || undefined,
|
|
1389
|
+
// Disable closing because we want full control of closing behavior, such as animation and confirmation.
|
|
1390
|
+
disableClose: true,
|
|
1391
|
+
// Disable closing on destroy, because this service cleans up its open dialogs as well.
|
|
1392
|
+
closeOnDestroy: true,
|
|
1393
|
+
closeOnOverlayDetachments: false,
|
|
1394
|
+
closeOnNavigation: options.closeOnNavigation,
|
|
1395
|
+
container: {
|
|
1396
|
+
type: options.container || DrawerContainerComponent,
|
|
1397
|
+
providers: () => [
|
|
1398
|
+
{ provide: MzDialogConfig, useValue: options },
|
|
1399
|
+
{ provide: DialogConfig, useValue: options },
|
|
1400
|
+
],
|
|
1401
|
+
},
|
|
1402
|
+
templateContext: () => ({ dialogRef }),
|
|
1403
|
+
providers: (ref, cdkConfig, dialogContainer) => {
|
|
1404
|
+
dialogRef = new MzDialogRef(ref, options, dialogContainer);
|
|
1405
|
+
return [
|
|
1406
|
+
{ provide: MZ_DIALOG_DATA, useValue: cdkConfig.data },
|
|
1407
|
+
{ provide: MzDialogRef, useValue: dialogRef },
|
|
1408
|
+
];
|
|
1409
|
+
},
|
|
1410
|
+
});
|
|
1411
|
+
this.openDialogs.push(dialogRef);
|
|
1412
|
+
dialogRef.closed.pipe(take$1(1)).subscribe(() => {
|
|
1413
|
+
const i = this.openDialogs.indexOf(dialogRef);
|
|
1414
|
+
this.openDialogs.splice(i, 1);
|
|
1415
|
+
});
|
|
1416
|
+
if (cdkRef.containerInstance instanceof DrawerContainerComponent) {
|
|
1417
|
+
cdkRef.containerInstance.enter();
|
|
1418
|
+
cdkRef.containerInstance.associateDialogRef(dialogRef);
|
|
1419
|
+
}
|
|
1420
|
+
return dialogRef;
|
|
1421
|
+
}
|
|
1422
|
+
/**
|
|
1423
|
+
* Gets an array of currently opened dialogs that were opened with this instance of service.
|
|
1424
|
+
*/
|
|
1425
|
+
getDialogs() {
|
|
1426
|
+
return this.openDialogs;
|
|
1427
|
+
}
|
|
1428
|
+
confirmDeactivation() {
|
|
1429
|
+
// We assume all dialogs belong to the same component tree, so we can just check the first one/last opened
|
|
1430
|
+
const i = this.openDialogs.findLastIndex((ref) => !ref.canDeactivate());
|
|
1431
|
+
if (i > -1) {
|
|
1432
|
+
return this.openDialogs[i].confirmDeactivation();
|
|
1433
|
+
}
|
|
1434
|
+
return true;
|
|
1435
|
+
}
|
|
1436
|
+
closeAll() {
|
|
1437
|
+
this.closeDialogs(this.openDialogs);
|
|
1438
|
+
}
|
|
1439
|
+
ngOnDestroy() {
|
|
1440
|
+
this.closeDialogs(this.openDialogs);
|
|
1441
|
+
}
|
|
1442
|
+
closeDialogs(dialogs) {
|
|
1443
|
+
let i = dialogs.length;
|
|
1444
|
+
while (i--) {
|
|
1445
|
+
dialogs[i].close();
|
|
1446
|
+
}
|
|
1447
|
+
}
|
|
1448
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDialog, deps: [{ token: i0.Injector }, { token: i3.Overlay }, { token: DEFAULT_MZ_DIALOG_CONFIG, optional: true }, { token: i0.ViewContainerRef, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1449
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDialog, providedIn: 'root' }); }
|
|
1450
|
+
}
|
|
1451
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDialog, decorators: [{
|
|
1452
|
+
type: Injectable,
|
|
1453
|
+
args: [{
|
|
1454
|
+
providedIn: 'root',
|
|
1455
|
+
}]
|
|
1456
|
+
}], ctorParameters: () => [{ type: i0.Injector }, { type: i3.Overlay }, { type: MzDialogConfig, decorators: [{
|
|
1457
|
+
type: Optional
|
|
1458
|
+
}, {
|
|
1459
|
+
type: Inject,
|
|
1460
|
+
args: [DEFAULT_MZ_DIALOG_CONFIG]
|
|
1461
|
+
}] }, { type: i0.ViewContainerRef, decorators: [{
|
|
1462
|
+
type: Optional
|
|
1463
|
+
}] }] });
|
|
1464
|
+
|
|
1465
|
+
class MzDialogModule {
|
|
1466
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1467
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: MzDialogModule, imports: [DialogModule, OverlayModule, PortalModule, DrawerContainerComponent], exports: [DialogModule,
|
|
1468
|
+
DrawerContainerComponent] }); }
|
|
1469
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDialogModule, providers: [MzDialog], imports: [DialogModule, OverlayModule, PortalModule, DialogModule] }); }
|
|
1470
|
+
}
|
|
1471
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDialogModule, decorators: [{
|
|
1472
|
+
type: NgModule,
|
|
1473
|
+
args: [{
|
|
1474
|
+
imports: [DialogModule, OverlayModule, PortalModule, DrawerContainerComponent],
|
|
1475
|
+
exports: [
|
|
1476
|
+
DialogModule,
|
|
1477
|
+
DrawerContainerComponent
|
|
1478
|
+
],
|
|
1479
|
+
providers: [MzDialog]
|
|
1480
|
+
}]
|
|
1216
1481
|
}] });
|
|
1217
1482
|
|
|
1218
1483
|
class MzDropdownComponent {
|
|
@@ -1226,12 +1491,12 @@ class MzDropdownComponent {
|
|
|
1226
1491
|
collapse() {
|
|
1227
1492
|
this.open = false;
|
|
1228
1493
|
}
|
|
1229
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1230
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
1494
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1495
|
+
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=\"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}.mz-dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem}.mz-dropdown-item{display:block;width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem}.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 }); }
|
|
1231
1496
|
}
|
|
1232
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1497
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownComponent, decorators: [{
|
|
1233
1498
|
type: Component,
|
|
1234
|
-
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\" [cdkConnectedOverlayOpen]=\"open\" (overlayOutsideClick)=\"collapse()\">\n <div cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\" class=\"dropdown-body\">\n <ng-content></ng-content>\n </div>\n</ng-template
|
|
1499
|
+
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=\"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}.mz-dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem}.mz-dropdown-item{display:block;width:100%;padding:.5rem;font-size:.875rem;line-height:1.25rem}.mz-dropdown-item:hover{background-color:var(--color-neutral-200)}\n"] }]
|
|
1235
1500
|
}], propDecorators: { label: [{
|
|
1236
1501
|
type: Input
|
|
1237
1502
|
}], open: [{
|
|
@@ -1245,16 +1510,16 @@ class MzDropdownItemDirective {
|
|
|
1245
1510
|
close() {
|
|
1246
1511
|
this.dropdown.collapse();
|
|
1247
1512
|
}
|
|
1248
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1249
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
1513
|
+
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 }); }
|
|
1514
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.1", type: MzDropdownItemDirective, isStandalone: true, selector: "[mzDropdownItem]", host: { listeners: { "click": "close()" }, classAttribute: "mz-dropdown-item" }, ngImport: i0 }); }
|
|
1250
1515
|
}
|
|
1251
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1516
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownItemDirective, decorators: [{
|
|
1252
1517
|
type: Directive,
|
|
1253
1518
|
args: [{
|
|
1254
1519
|
selector: '[mzDropdownItem]',
|
|
1255
1520
|
standalone: true,
|
|
1256
1521
|
host: {
|
|
1257
|
-
'class': 'dropdown-item',
|
|
1522
|
+
'class': 'mz-dropdown-item',
|
|
1258
1523
|
'(click)': 'close()'
|
|
1259
1524
|
}
|
|
1260
1525
|
}]
|
|
@@ -1263,11 +1528,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1263
1528
|
}] }] });
|
|
1264
1529
|
|
|
1265
1530
|
class MzDropdownModule {
|
|
1266
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1267
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
1268
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
1531
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1532
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, imports: [MzDropdownComponent, MzDropdownItemDirective], exports: [MzDropdownComponent, MzDropdownItemDirective] }); }
|
|
1533
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule }); }
|
|
1269
1534
|
}
|
|
1270
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1535
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: MzDropdownModule, decorators: [{
|
|
1271
1536
|
type: NgModule,
|
|
1272
1537
|
args: [{
|
|
1273
1538
|
imports: [MzDropdownComponent, MzDropdownItemDirective],
|
|
@@ -1275,6 +1540,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1275
1540
|
}]
|
|
1276
1541
|
}] });
|
|
1277
1542
|
|
|
1543
|
+
class FilterComponent {
|
|
1544
|
+
constructor() {
|
|
1545
|
+
this.label = 'Filter';
|
|
1546
|
+
this.open = false;
|
|
1547
|
+
}
|
|
1548
|
+
ngAfterContentInit() {
|
|
1549
|
+
this.initialValues = this.menuForm.value;
|
|
1550
|
+
}
|
|
1551
|
+
toggleOverlay() {
|
|
1552
|
+
this.open = !this.open;
|
|
1553
|
+
}
|
|
1554
|
+
dismiss() {
|
|
1555
|
+
this.open = false;
|
|
1556
|
+
if (this.menuForm.options.updateOn === 'submit') {
|
|
1557
|
+
this.menuForm.resetForm(this.initialValues);
|
|
1558
|
+
}
|
|
1559
|
+
}
|
|
1560
|
+
clear() {
|
|
1561
|
+
this.open = false;
|
|
1562
|
+
}
|
|
1563
|
+
apply() {
|
|
1564
|
+
this.open = false;
|
|
1565
|
+
console.log('applied', this.menuForm.value);
|
|
1566
|
+
}
|
|
1567
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.1", type: FilterComponent, isStandalone: true, selector: "mz-filter", inputs: { label: "label" }, 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 {{ label }}\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</button>\n<ng-template \n cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n <div>\n <ng-content></ng-content>\n\n <div class=\"dropdown-buttons\">\n @if(menuForm.options.updateOn === 'submit') {\n <button type=\"button\" class=\"button button-primary\" (click)=\"apply()\">Apply</button>\n }\n <button type=\"button\" class=\"button button-tertiary\" (click)=\"clear()\">Clear</button>\n </div>\n </div>\n</ng-template>\n", styles: [".dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem;padding:.75rem}.dropdown-buttons{display:flex;margin-top:.25rem}.dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block}\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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1569
|
+
}
|
|
1570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: FilterComponent, decorators: [{
|
|
1571
|
+
type: Component,
|
|
1572
|
+
args: [{ selector: 'mz-filter', standalone: true, imports: [CdkOverlayOrigin, CdkConnectedOverlay, FormsModule, CommonModule], template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n {{ label }}\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</button>\n<ng-template \n cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n <div>\n <ng-content></ng-content>\n\n <div class=\"dropdown-buttons\">\n @if(menuForm.options.updateOn === 'submit') {\n <button type=\"button\" class=\"button button-primary\" (click)=\"apply()\">Apply</button>\n }\n <button type=\"button\" class=\"button button-tertiary\" (click)=\"clear()\">Clear</button>\n </div>\n </div>\n</ng-template>\n", styles: [".dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem;padding:.75rem}.dropdown-buttons{display:flex;margin-top:.25rem}.dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block}\n"] }]
|
|
1573
|
+
}], propDecorators: { label: [{
|
|
1574
|
+
type: Input
|
|
1575
|
+
}], menuForm: [{
|
|
1576
|
+
type: ContentChild,
|
|
1577
|
+
args: [NgForm]
|
|
1578
|
+
}] } });
|
|
1579
|
+
|
|
1278
1580
|
class OptionsFilterComponent {
|
|
1279
1581
|
constructor() {
|
|
1280
1582
|
this.values = [];
|
|
@@ -1314,12 +1616,12 @@ class OptionsFilterComponent {
|
|
|
1314
1616
|
dismiss() {
|
|
1315
1617
|
this.open = false;
|
|
1316
1618
|
}
|
|
1317
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1318
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
1619
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OptionsFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1620
|
+
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", 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);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 }); }
|
|
1319
1621
|
}
|
|
1320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1622
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.1", ngImport: i0, type: OptionsFilterComponent, decorators: [{
|
|
1321
1623
|
type: Component,
|
|
1322
|
-
args: [{ selector: 'mz-options-filter', standalone: true, 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
|
|
1624
|
+
args: [{ selector: 'mz-options-filter', standalone: true, 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);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"] }]
|
|
1323
1625
|
}], propDecorators: { options: [{
|
|
1324
1626
|
type: Input
|
|
1325
1627
|
}], values: [{
|
|
@@ -1335,43 +1637,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1335
1637
|
args: [NgForm]
|
|
1336
1638
|
}] } });
|
|
1337
1639
|
|
|
1338
|
-
class FilterComponent {
|
|
1339
|
-
constructor() {
|
|
1340
|
-
this.label = 'Filter';
|
|
1341
|
-
this.open = false;
|
|
1342
|
-
}
|
|
1343
|
-
ngAfterContentInit() {
|
|
1344
|
-
this.initialValues = this.menuForm.value;
|
|
1345
|
-
}
|
|
1346
|
-
toggleOverlay() {
|
|
1347
|
-
this.open = !this.open;
|
|
1348
|
-
}
|
|
1349
|
-
dismiss() {
|
|
1350
|
-
this.open = false;
|
|
1351
|
-
if (this.menuForm.options.updateOn === 'submit') {
|
|
1352
|
-
this.menuForm.resetForm(this.initialValues);
|
|
1353
|
-
}
|
|
1354
|
-
}
|
|
1355
|
-
clear() {
|
|
1356
|
-
this.open = false;
|
|
1357
|
-
}
|
|
1358
|
-
apply() {
|
|
1359
|
-
this.open = false;
|
|
1360
|
-
console.log('applied', this.menuForm.value);
|
|
1361
|
-
}
|
|
1362
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1363
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterComponent, isStandalone: true, selector: "mz-filter", inputs: { label: "label" }, 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 {{ label }}\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</button>\n<ng-template \n cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n <div>\n <ng-content></ng-content>\n\n <div class=\"dropdown-buttons\">\n @if(menuForm.options.updateOn === 'submit') {\n <button type=\"button\" class=\"button button-primary\" (click)=\"apply()\">Apply</button>\n }\n <button type=\"button\" class=\"button button-tertiary\" (click)=\"clear()\">Clear</button>\n </div>\n </div>\n</ng-template>\n\n", styles: [".dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem;padding:.75rem}.dropdown-buttons{display:flex;margin-top:.25rem}.dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}\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: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1364
|
-
}
|
|
1365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterComponent, decorators: [{
|
|
1366
|
-
type: Component,
|
|
1367
|
-
args: [{ selector: 'mz-filter', standalone: true, imports: [CdkOverlayOrigin, CdkConnectedOverlay, FormsModule, CommonModule], template: "<button cdkOverlayOrigin #trigger=\"cdkOverlayOrigin\" (click)=\"toggleOverlay()\" class=\"button button-secondary\" [class.active]=\"open\">\n {{ label }}\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</button>\n<ng-template \n cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"open\" [cdkConnectedOverlayPanelClass]=\"'dropdown-body'\" (overlayOutsideClick)=\"dismiss()\">\n <div>\n <ng-content></ng-content>\n\n <div class=\"dropdown-buttons\">\n @if(menuForm.options.updateOn === 'submit') {\n <button type=\"button\" class=\"button button-primary\" (click)=\"apply()\">Apply</button>\n }\n <button type=\"button\" class=\"button button-tertiary\" (click)=\"clear()\">Clear</button>\n </div>\n </div>\n</ng-template>\n\n", styles: [".dropdown-body{background-color:var(--surface-bg, white);min-width:5rem;margin-top:.25rem;padding:.75rem}.dropdown-buttons{display:flex;margin-top:.25rem}.dropdown-icon{height:1.5rem;width:1.5rem;display:inline-block;padding-left:.5rem}\n"] }]
|
|
1368
|
-
}], propDecorators: { label: [{
|
|
1369
|
-
type: Input
|
|
1370
|
-
}], menuForm: [{
|
|
1371
|
-
type: ContentChild,
|
|
1372
|
-
args: [NgForm]
|
|
1373
|
-
}] } });
|
|
1374
|
-
|
|
1375
1640
|
/*
|
|
1376
1641
|
* Public API Surface of components
|
|
1377
1642
|
*/
|
|
@@ -1380,5 +1645,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1380
1645
|
* Generated bundle index. Do not edit.
|
|
1381
1646
|
*/
|
|
1382
1647
|
|
|
1383
|
-
export { AlertComponent, ButtonDirective, DateDisplayPipe, DateTimeComponent, DrawerContainerComponent, EnumDisplayPipe, 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 };
|
|
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 };
|
|
1384
1649
|
//# sourceMappingURL=muziehdesign-components.mjs.map
|