@ptsecurity/mosaic 13.6.2 → 13.7.1
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/_theming.scss +103 -6
- package/_visual.scss +30 -1
- package/design-tokens/legacy-2017/tokens/components/loader-overlay.json5 +23 -0
- package/design-tokens/legacy-2017/tokens/properties/globals.json5 +18 -18
- package/design-tokens/legacy-2017/tokens.d.ts +29 -0
- package/design-tokens/pt-2022/tokens/components/badge.json5 +1 -1
- package/design-tokens/pt-2022/tokens/components/loader-overlay.json5 +23 -0
- package/design-tokens/pt-2022/tokens/properties/globals.json5 +18 -18
- package/design-tokens/pt-2022/tokens.d.ts +30 -1
- package/design-tokens/style-dictionary/build.js +13 -0
- package/design-tokens/style-dictionary/configs/figma.js +11 -0
- package/design-tokens/style-dictionary/configs/index.js +3 -3
- package/design-tokens/style-dictionary/formats/figma.js +104 -0
- package/design-tokens/style-dictionary/transformGroups/figma.js +21 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-border.js +18 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-color.js +25 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-default.js +10 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-font.js +31 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-group.js +17 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-opacity.js +10 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-shadow.js +66 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-sizing.js +16 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-spacing.js +15 -0
- package/design-tokens/style-dictionary/transforms/attribute/figma-typography.js +24 -0
- package/design-tokens/style-dictionary/transforms/value/figma-values.js +7 -0
- package/esm2020/design-tokens/legacy-2017/tokens.mjs +30 -1
- package/esm2020/design-tokens/pt-2022/tokens.mjs +31 -2
- package/esm2020/form-field/hint.mjs +18 -7
- package/esm2020/list/list-selection.component.mjs +4 -1
- package/esm2020/loader-overlay/index.mjs +2 -0
- package/esm2020/loader-overlay/loader-overlay.component.mjs +99 -0
- package/esm2020/loader-overlay/loader-overlay.module.mjs +50 -0
- package/esm2020/loader-overlay/ptsecurity-mosaic-loader-overlay.mjs +5 -0
- package/esm2020/loader-overlay/public-api.mjs +3 -0
- package/esm2020/modal/modal.component.mjs +11 -3
- package/esm2020/modal/modal.type.mjs +1 -1
- package/esm2020/navbar/navbar.component.mjs +6 -4
- package/esm2020/navbar/vertical-navbar.component.mjs +3 -3
- package/esm2020/progress-spinner/progress-spinner.component.mjs +2 -2
- package/esm2020/select/select.component.mjs +3 -3
- package/esm2020/tree/tree-selection.component.mjs +2 -1
- package/esm2020/tree-select/tree-select.component.mjs +3 -3
- package/fesm2015/ptsecurity-mosaic-design-tokens.mjs +89 -2
- package/fesm2015/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-form-field.mjs +16 -6
- package/fesm2015/ptsecurity-mosaic-form-field.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-list.mjs +3 -0
- package/fesm2015/ptsecurity-mosaic-list.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-loader-overlay.mjs +155 -0
- package/fesm2015/ptsecurity-mosaic-loader-overlay.mjs.map +1 -0
- package/fesm2015/ptsecurity-mosaic-modal.mjs +11 -2
- package/fesm2015/ptsecurity-mosaic-modal.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-navbar.mjs +6 -4
- package/fesm2015/ptsecurity-mosaic-navbar.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-progress-spinner.mjs +2 -2
- package/fesm2015/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-select.mjs +2 -2
- package/fesm2015/ptsecurity-mosaic-select.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-tree-select.mjs +2 -2
- package/fesm2015/ptsecurity-mosaic-tree-select.mjs.map +1 -1
- package/fesm2015/ptsecurity-mosaic-tree.mjs +1 -0
- package/fesm2015/ptsecurity-mosaic-tree.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-design-tokens.mjs +89 -2
- package/fesm2020/ptsecurity-mosaic-design-tokens.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-form-field.mjs +16 -6
- package/fesm2020/ptsecurity-mosaic-form-field.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-list.mjs +3 -0
- package/fesm2020/ptsecurity-mosaic-list.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-loader-overlay.mjs +153 -0
- package/fesm2020/ptsecurity-mosaic-loader-overlay.mjs.map +1 -0
- package/fesm2020/ptsecurity-mosaic-modal.mjs +10 -2
- package/fesm2020/ptsecurity-mosaic-modal.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-navbar.mjs +6 -4
- package/fesm2020/ptsecurity-mosaic-navbar.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-progress-spinner.mjs +2 -2
- package/fesm2020/ptsecurity-mosaic-progress-spinner.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-select.mjs +2 -2
- package/fesm2020/ptsecurity-mosaic-select.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-tree-select.mjs +2 -2
- package/fesm2020/ptsecurity-mosaic-tree-select.mjs.map +1 -1
- package/fesm2020/ptsecurity-mosaic-tree.mjs +1 -0
- package/fesm2020/ptsecurity-mosaic-tree.mjs.map +1 -1
- package/form-field/hint.d.ts +10 -2
- package/loader-overlay/README.md +0 -0
- package/loader-overlay/index.d.ts +1 -0
- package/loader-overlay/loader-overlay.component.d.ts +33 -0
- package/loader-overlay/loader-overlay.module.d.ts +11 -0
- package/loader-overlay/package.json +10 -0
- package/loader-overlay/ptsecurity-mosaic-loader-overlay.d.ts +5 -0
- package/loader-overlay/public-api.d.ts +2 -0
- package/modal/modal.component.d.ts +3 -1
- package/modal/modal.type.d.ts +1 -0
- package/package.json +12 -4
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/default-theme.css +1 -1
- package/schematics/collection.json +0 -4
- package/schematics/migration.json +0 -10
- package/schematics/ng-update/data/attribute-selectors.d.ts +0 -2
- package/schematics/ng-update/data/attribute-selectors.js +0 -5
- package/schematics/ng-update/data/attribute-selectors.js.map +0 -1
- package/schematics/ng-update/data/class-names.d.ts +0 -2
- package/schematics/ng-update/data/class-names.js +0 -5
- package/schematics/ng-update/data/class-names.js.map +0 -1
- package/schematics/ng-update/data/constructor-checks.d.ts +0 -2
- package/schematics/ng-update/data/constructor-checks.js +0 -5
- package/schematics/ng-update/data/constructor-checks.js.map +0 -1
- package/schematics/ng-update/data/css-selectors.d.ts +0 -2
- package/schematics/ng-update/data/css-selectors.js +0 -5
- package/schematics/ng-update/data/css-selectors.js.map +0 -1
- package/schematics/ng-update/data/element-selectors.d.ts +0 -2
- package/schematics/ng-update/data/element-selectors.js +0 -5
- package/schematics/ng-update/data/element-selectors.js.map +0 -1
- package/schematics/ng-update/data/index.d.ts +0 -10
- package/schematics/ng-update/data/index.js +0 -14
- package/schematics/ng-update/data/index.js.map +0 -1
- package/schematics/ng-update/data/input-names.d.ts +0 -2
- package/schematics/ng-update/data/input-names.js +0 -35
- package/schematics/ng-update/data/input-names.js.map +0 -1
- package/schematics/ng-update/data/method-call-checks.d.ts +0 -2
- package/schematics/ng-update/data/method-call-checks.js +0 -5
- package/schematics/ng-update/data/method-call-checks.js.map +0 -1
- package/schematics/ng-update/data/output-names.d.ts +0 -2
- package/schematics/ng-update/data/output-names.js +0 -5
- package/schematics/ng-update/data/output-names.js.map +0 -1
- package/schematics/ng-update/data/property-names.d.ts +0 -2
- package/schematics/ng-update/data/property-names.js +0 -5
- package/schematics/ng-update/data/property-names.js.map +0 -1
- package/schematics/ng-update/data/symbol-removal.d.ts +0 -2
- package/schematics/ng-update/data/symbol-removal.js +0 -5
- package/schematics/ng-update/data/symbol-removal.js.map +0 -1
- package/schematics/ng-update/index.d.ts +0 -2
- package/schematics/ng-update/index.js +0 -23
- package/schematics/ng-update/index.js.map +0 -1
- package/schematics/ng-update/update-9.0.0/mosaic-symbols.json +0 -255
- package/schematics/ng-update/update-9.0.0/secondary-entry-points-migration.d.ts +0 -7
- package/schematics/ng-update/update-9.0.0/secondary-entry-points-migration.js +0 -154
- package/schematics/ng-update/update-9.0.0/secondary-entry-points-migration.js.map +0 -1
- package/schematics/ng-update/upgrade-data.d.ts +0 -2
- package/schematics/ng-update/upgrade-data.js +0 -17
- package/schematics/ng-update/upgrade-data.js.map +0 -1
- package/schematics/tsconfig.json +0 -29
- package/schematics/tsconfig.lib-test.json +0 -8
- package/schematics/tsconfig.lib.json +0 -17
@@ -0,0 +1,153 @@
|
|
1
|
+
import { A11yModule } from '@angular/cdk/a11y';
|
2
|
+
import { PlatformModule } from '@angular/cdk/platform';
|
3
|
+
import * as i2 from '@angular/common';
|
4
|
+
import { CommonModule } from '@angular/common';
|
5
|
+
import * as i0 from '@angular/core';
|
6
|
+
import { Directive, Component, ChangeDetectionStrategy, ViewEncapsulation, Optional, Attribute, Input, ContentChild, NgModule } from '@angular/core';
|
7
|
+
import * as i1 from '@ptsecurity/mosaic/progress-spinner';
|
8
|
+
import { McProgressSpinnerModule } from '@ptsecurity/mosaic/progress-spinner';
|
9
|
+
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
10
|
+
|
11
|
+
const mcLoaderOverlayParent = 'mc-loader-overlay_parent';
|
12
|
+
class McLoaderOverlayIndicator {
|
13
|
+
}
|
14
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayIndicator.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
15
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayIndicator.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McLoaderOverlayIndicator, selector: "[mc-loader-overlay-indicator]", host: { classAttribute: "mc-loader-overlay-indicator" }, ngImport: i0 });
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayIndicator, decorators: [{
|
17
|
+
type: Directive,
|
18
|
+
args: [{
|
19
|
+
selector: '[mc-loader-overlay-indicator]',
|
20
|
+
host: {
|
21
|
+
class: 'mc-loader-overlay-indicator'
|
22
|
+
}
|
23
|
+
}]
|
24
|
+
}] });
|
25
|
+
class McLoaderOverlayText {
|
26
|
+
}
|
27
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayText.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayText, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
28
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayText.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McLoaderOverlayText, selector: "[mc-loader-overlay-text]", host: { classAttribute: "mc-loader-overlay-text" }, ngImport: i0 });
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayText, decorators: [{
|
30
|
+
type: Directive,
|
31
|
+
args: [{
|
32
|
+
selector: '[mc-loader-overlay-text]',
|
33
|
+
host: {
|
34
|
+
class: 'mc-loader-overlay-text'
|
35
|
+
}
|
36
|
+
}]
|
37
|
+
}] });
|
38
|
+
class McLoaderOverlayCaption {
|
39
|
+
}
|
40
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayCaption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayCaption, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
41
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayCaption.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: McLoaderOverlayCaption, selector: "[mc-loader-overlay-caption]", host: { classAttribute: "mc-loader-overlay-caption" }, ngImport: i0 });
|
42
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayCaption, decorators: [{
|
43
|
+
type: Directive,
|
44
|
+
args: [{
|
45
|
+
selector: '[mc-loader-overlay-caption]',
|
46
|
+
host: {
|
47
|
+
class: 'mc-loader-overlay-caption'
|
48
|
+
}
|
49
|
+
}]
|
50
|
+
}] });
|
51
|
+
class McLoaderOverlay {
|
52
|
+
constructor(elementRef, renderer, fixedTop) {
|
53
|
+
this.elementRef = elementRef;
|
54
|
+
this.renderer = renderer;
|
55
|
+
this.fixedTop = fixedTop;
|
56
|
+
}
|
57
|
+
get isExternalIndicator() {
|
58
|
+
return !!this.externalIndicator;
|
59
|
+
}
|
60
|
+
get isExternalText() {
|
61
|
+
return !!this.externalText;
|
62
|
+
}
|
63
|
+
get isExternalCaption() {
|
64
|
+
return !!this.externalCaption;
|
65
|
+
}
|
66
|
+
get isFixedTop() {
|
67
|
+
return coerceBooleanProperty(this.fixedTop);
|
68
|
+
}
|
69
|
+
ngOnInit() {
|
70
|
+
this.renderer.addClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);
|
71
|
+
}
|
72
|
+
ngOnDestroy() {
|
73
|
+
this.renderer.removeClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);
|
74
|
+
}
|
75
|
+
}
|
76
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlay.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlay, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: 'fixed-top', attribute: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
77
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlay.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McLoaderOverlay, selector: "mc-loader-overlay", inputs: { text: "text", caption: "caption" }, host: { properties: { "class.mc-loader-overlay_center": "!isFixedTop", "class.mc-loader-overlay_fixed-top": "isFixedTop" }, classAttribute: "mc-loader-overlay" }, queries: [{ propertyName: "externalIndicator", first: true, predicate: McLoaderOverlayIndicator, descendants: true }, { propertyName: "externalText", first: true, predicate: McLoaderOverlayText, descendants: true }, { propertyName: "externalCaption", first: true, predicate: McLoaderOverlayCaption, descendants: true }], ngImport: i0, template: "<div class=\"mc-loader-overlay__container\">\n <ng-container [ngSwitch]=\"isExternalIndicator\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-indicator]\"></ng-content>\n <mc-progress-spinner *ngSwitchDefault [mode]=\"'indeterminate'\"></mc-progress-spinner>\n </ng-container>\n\n <ng-container [ngSwitch]=\"isExternalText\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-text]\"></ng-content>\n <div *ngSwitchDefault class=\"mc-loader-overlay-text\">{{ text }}</div>\n </ng-container>\n\n <ng-container [ngSwitch]=\"isExternalCaption\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-caption]\"></ng-content>\n <div *ngSwitchDefault class=\"mc-loader-overlay-caption\">{{ caption }}</div>\n </ng-container>\n</div>\n", styles: [".mc-loader-overlay_parent{position:relative}.mc-loader-overlay{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:0;right:0;bottom:0;left:0}.mc-loader-overlay .mc-loader-overlay__container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:80%;max-width:80%}.mc-loader-overlay.mc-loader-overlay_center .mc-loader-overlay__container{transform:translateY(-40%)}.mc-loader-overlay.mc-loader-overlay_fixed-top{justify-content:unset}.mc-loader-overlay.mc-loader-overlay_fixed-top .mc-loader-overlay__container{margin-top:72px}.mc-loader-overlay-text{margin-top:8px;max-width:480px;text-align:center}.mc-loader-overlay-caption{margin-top:2px;max-width:480px;text-align:center}\n"], components: [{ type: i1.McProgressSpinner, selector: "mc-progress-spinner", inputs: ["color", "id", "value", "mode"] }], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlay, decorators: [{
|
79
|
+
type: Component,
|
80
|
+
args: [{ selector: 'mc-loader-overlay', host: {
|
81
|
+
class: 'mc-loader-overlay',
|
82
|
+
'[class.mc-loader-overlay_center]': '!isFixedTop',
|
83
|
+
'[class.mc-loader-overlay_fixed-top]': 'isFixedTop'
|
84
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-loader-overlay__container\">\n <ng-container [ngSwitch]=\"isExternalIndicator\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-indicator]\"></ng-content>\n <mc-progress-spinner *ngSwitchDefault [mode]=\"'indeterminate'\"></mc-progress-spinner>\n </ng-container>\n\n <ng-container [ngSwitch]=\"isExternalText\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-text]\"></ng-content>\n <div *ngSwitchDefault class=\"mc-loader-overlay-text\">{{ text }}</div>\n </ng-container>\n\n <ng-container [ngSwitch]=\"isExternalCaption\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-caption]\"></ng-content>\n <div *ngSwitchDefault class=\"mc-loader-overlay-caption\">{{ caption }}</div>\n </ng-container>\n</div>\n", styles: [".mc-loader-overlay_parent{position:relative}.mc-loader-overlay{position:absolute;display:flex;flex-direction:column;justify-content:center;align-items:center;top:0;right:0;bottom:0;left:0}.mc-loader-overlay .mc-loader-overlay__container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:80%;max-width:80%}.mc-loader-overlay.mc-loader-overlay_center .mc-loader-overlay__container{transform:translateY(-40%)}.mc-loader-overlay.mc-loader-overlay_fixed-top{justify-content:unset}.mc-loader-overlay.mc-loader-overlay_fixed-top .mc-loader-overlay__container{margin-top:72px}.mc-loader-overlay-text{margin-top:8px;max-width:480px;text-align:center}.mc-loader-overlay-caption{margin-top:2px;max-width:480px;text-align:center}\n"] }]
|
85
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: undefined, decorators: [{
|
86
|
+
type: Optional
|
87
|
+
}, {
|
88
|
+
type: Attribute,
|
89
|
+
args: ['fixed-top']
|
90
|
+
}] }]; }, propDecorators: { text: [{
|
91
|
+
type: Input
|
92
|
+
}], caption: [{
|
93
|
+
type: Input
|
94
|
+
}], externalIndicator: [{
|
95
|
+
type: ContentChild,
|
96
|
+
args: [McLoaderOverlayIndicator]
|
97
|
+
}], externalText: [{
|
98
|
+
type: ContentChild,
|
99
|
+
args: [McLoaderOverlayText]
|
100
|
+
}], externalCaption: [{
|
101
|
+
type: ContentChild,
|
102
|
+
args: [McLoaderOverlayCaption]
|
103
|
+
}] } });
|
104
|
+
|
105
|
+
class McLoaderOverlayModule {
|
106
|
+
}
|
107
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
108
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayModule, declarations: [McLoaderOverlay,
|
109
|
+
McLoaderOverlayIndicator,
|
110
|
+
McLoaderOverlayText,
|
111
|
+
McLoaderOverlayCaption], imports: [CommonModule,
|
112
|
+
A11yModule,
|
113
|
+
PlatformModule,
|
114
|
+
McProgressSpinnerModule], exports: [McLoaderOverlay,
|
115
|
+
McLoaderOverlayIndicator,
|
116
|
+
McLoaderOverlayText,
|
117
|
+
McLoaderOverlayCaption] });
|
118
|
+
/** @nocollapse */ /** @nocollapse */ McLoaderOverlayModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayModule, imports: [[
|
119
|
+
CommonModule,
|
120
|
+
A11yModule,
|
121
|
+
PlatformModule,
|
122
|
+
McProgressSpinnerModule
|
123
|
+
]] });
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McLoaderOverlayModule, decorators: [{
|
125
|
+
type: NgModule,
|
126
|
+
args: [{
|
127
|
+
imports: [
|
128
|
+
CommonModule,
|
129
|
+
A11yModule,
|
130
|
+
PlatformModule,
|
131
|
+
McProgressSpinnerModule
|
132
|
+
],
|
133
|
+
declarations: [
|
134
|
+
McLoaderOverlay,
|
135
|
+
McLoaderOverlayIndicator,
|
136
|
+
McLoaderOverlayText,
|
137
|
+
McLoaderOverlayCaption
|
138
|
+
],
|
139
|
+
exports: [
|
140
|
+
McLoaderOverlay,
|
141
|
+
McLoaderOverlayIndicator,
|
142
|
+
McLoaderOverlayText,
|
143
|
+
McLoaderOverlayCaption
|
144
|
+
]
|
145
|
+
}]
|
146
|
+
}] });
|
147
|
+
|
148
|
+
/**
|
149
|
+
* Generated bundle index. Do not edit.
|
150
|
+
*/
|
151
|
+
|
152
|
+
export { McLoaderOverlay, McLoaderOverlayCaption, McLoaderOverlayIndicator, McLoaderOverlayModule, McLoaderOverlayText };
|
153
|
+
//# sourceMappingURL=ptsecurity-mosaic-loader-overlay.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"ptsecurity-mosaic-loader-overlay.mjs","sources":["../../../packages/mosaic/loader-overlay/loader-overlay.component.ts","../../../packages/mosaic/loader-overlay/loader-overlay.component.html","../../../packages/mosaic/loader-overlay/loader-overlay.module.ts","../../../packages/mosaic/loader-overlay/ptsecurity-mosaic-loader-overlay.ts"],"sourcesContent":["import { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n Attribute,\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n Directive,\n ElementRef,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Renderer2,\n ViewEncapsulation\n} from '@angular/core';\n\n\nconst mcLoaderOverlayParent = 'mc-loader-overlay_parent';\n\n\n@Directive({\n selector: '[mc-loader-overlay-indicator]',\n host: {\n class: 'mc-loader-overlay-indicator'\n }\n})\nexport class McLoaderOverlayIndicator {}\n\n\n@Directive({\n selector: '[mc-loader-overlay-text]',\n host: {\n class: 'mc-loader-overlay-text'\n }\n})\nexport class McLoaderOverlayText {}\n\n\n@Directive({\n selector: '[mc-loader-overlay-caption]',\n host: {\n class: 'mc-loader-overlay-caption'\n }\n})\nexport class McLoaderOverlayCaption {}\n\n\n@Component({\n selector: 'mc-loader-overlay',\n templateUrl: './loader-overlay.component.html',\n styleUrls: ['./loader-overlay.scss'],\n host: {\n class: 'mc-loader-overlay',\n '[class.mc-loader-overlay_center]': '!isFixedTop',\n '[class.mc-loader-overlay_fixed-top]': 'isFixedTop'\n },\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None\n})\nexport class McLoaderOverlay implements OnInit, OnDestroy {\n @Input() text: string;\n\n @Input() caption: string;\n\n get isExternalIndicator(): boolean {\n return !!this.externalIndicator;\n }\n\n get isExternalText(): boolean {\n return !!this.externalText;\n }\n\n get isExternalCaption(): boolean {\n return !!this.externalCaption;\n }\n\n get isFixedTop(): boolean {\n return coerceBooleanProperty(this.fixedTop);\n }\n\n @ContentChild(McLoaderOverlayIndicator) externalIndicator: McLoaderOverlayIndicator | null;\n @ContentChild(McLoaderOverlayText) externalText: McLoaderOverlayText | null;\n @ContentChild(McLoaderOverlayCaption) externalCaption: McLoaderOverlayCaption | null;\n\n constructor(\n private elementRef: ElementRef,\n private renderer: Renderer2,\n @Optional() @Attribute('fixed-top') private fixedTop: string | null\n ) {}\n\n ngOnInit(): void {\n this.renderer.addClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);\n }\n\n ngOnDestroy(): void {\n this.renderer.removeClass(this.elementRef.nativeElement.parentElement, mcLoaderOverlayParent);\n }\n}\n\n","<div class=\"mc-loader-overlay__container\">\n <ng-container [ngSwitch]=\"isExternalIndicator\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-indicator]\"></ng-content>\n <mc-progress-spinner *ngSwitchDefault [mode]=\"'indeterminate'\"></mc-progress-spinner>\n </ng-container>\n\n <ng-container [ngSwitch]=\"isExternalText\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-text]\"></ng-content>\n <div *ngSwitchDefault class=\"mc-loader-overlay-text\">{{ text }}</div>\n </ng-container>\n\n <ng-container [ngSwitch]=\"isExternalCaption\">\n <ng-content *ngSwitchCase=\"true\" select=\"[mc-loader-overlay-caption]\"></ng-content>\n <div *ngSwitchDefault class=\"mc-loader-overlay-caption\">{{ caption }}</div>\n </ng-container>\n</div>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { PlatformModule } from '@angular/cdk/platform';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { McProgressSpinnerModule } from '@ptsecurity/mosaic/progress-spinner';\n\nimport {\n McLoaderOverlay,\n McLoaderOverlayCaption,\n McLoaderOverlayIndicator,\n McLoaderOverlayText\n} from './loader-overlay.component';\n\n\n@NgModule({\n imports: [\n CommonModule,\n A11yModule,\n PlatformModule,\n McProgressSpinnerModule\n ],\n declarations: [\n McLoaderOverlay,\n McLoaderOverlayIndicator,\n McLoaderOverlayText,\n McLoaderOverlayCaption\n ],\n exports: [\n McLoaderOverlay,\n McLoaderOverlayIndicator,\n McLoaderOverlayText,\n McLoaderOverlayCaption\n ]\n})\nexport class McLoaderOverlayModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
@@ -223,6 +223,7 @@ class McModalComponent extends McModalRef {
|
|
223
223
|
// Trigger when modal leave-animation over
|
224
224
|
this.mcAfterClose = new EventEmitter();
|
225
225
|
this.mcOkType = 'primary';
|
226
|
+
this.mcRestoreFocus = true;
|
226
227
|
this._mcOkLoading = false;
|
227
228
|
this.mcOnOk = new EventEmitter();
|
228
229
|
this._mcCancelLoading = false;
|
@@ -329,10 +330,15 @@ class McModalComponent extends McModalRef {
|
|
329
330
|
this.isBottomOverflow = scrollTop + offsetHeight < scrollHeight;
|
330
331
|
}
|
331
332
|
open() {
|
333
|
+
this.focusedElementBeforeOpen = this.document.activeElement;
|
332
334
|
this.changeVisibleFromInside(true);
|
333
335
|
}
|
334
336
|
close(result) {
|
337
|
+
if (this.mcRestoreFocus) {
|
338
|
+
this.focusedElementBeforeOpen?.focus();
|
339
|
+
}
|
335
340
|
this.changeVisibleFromInside(false, result);
|
341
|
+
this.focusedElementBeforeOpen = null;
|
336
342
|
}
|
337
343
|
// Destroy equals Close
|
338
344
|
destroy(result) {
|
@@ -583,12 +589,12 @@ class McModalComponent extends McModalRef {
|
|
583
589
|
}
|
584
590
|
}
|
585
591
|
/** @nocollapse */ /** @nocollapse */ McModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalComponent, deps: [{ token: i1.Overlay }, { token: i0.Renderer2 }, { token: i0.ComponentFactoryResolver }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: McModalControlService }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
|
586
|
-
/** @nocollapse */ /** @nocollapse */ McModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McModalComponent, selector: "mc-modal", inputs: { mcModalType: "mcModalType", mcComponent: "mcComponent", mcContent: "mcContent", mcComponentParams: "mcComponentParams", mcFooter: "mcFooter", mcVisible: "mcVisible", mcZIndex: "mcZIndex", mcWidth: "mcWidth", mcSize: "mcSize", mcWrapClassName: "mcWrapClassName", mcClassName: "mcClassName", mcStyle: "mcStyle", mcTitle: "mcTitle", mcCloseByESC: "mcCloseByESC", mcClosable: "mcClosable", mcMask: "mcMask", mcMaskClosable: "mcMaskClosable", mcMaskStyle: "mcMaskStyle", mcBodyStyle: "mcBodyStyle", mcOkText: "mcOkText", mcOkType: "mcOkType", mcOkLoading: "mcOkLoading", mcOnOk: "mcOnOk", mcCancelText: "mcCancelText", mcCancelLoading: "mcCancelLoading", mcOnCancel: "mcOnCancel", mcGetContainer: "mcGetContainer" }, outputs: { mcVisibleChange: "mcVisibleChange", mcAfterOpen: "mcAfterOpen", mcAfterClose: "mcAfterClose", mcOnOk: "mcOnOk", mcOnCancel: "mcOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n <ng-content></ng-content>\n</ng-template>\n\n<div>\n <div *ngIf=\"mcMask\"\n class=\"mc-modal-mask\"\n [ngClass]=\"maskAnimationClassMap\"\n [class.mc-modal-mask-hidden]=\"hidden\"\n [ngStyle]=\"mcMaskStyle\"\n [style.zIndex]=\"mcZIndex\"\n ></div>\n <div (mousedown)=\"onClickMask($event)\"\n class=\"mc-modal-wrap {{ mcWrapClassName }}\"\n [style.zIndex]=\"mcZIndex\"\n [style.display]=\"hidden ? 'none' : ''\"\n tabindex=\"-1\">\n\n <div #modalContainer\n class=\"mc-modal {{ mcClassName }} mc-modal_{{ mcSize }}\"\n [ngClass]=\"modalAnimationClassMap\"\n [ngStyle]=\"mcStyle\"\n [style.width]=\"mcWidth | toCssUnit\"\n [style.transform-origin]=\"transformOrigin\">\n\n <div class=\"mc-modal-content\" cdkTrapFocus>\n <button *ngIf=\"mcClosable\"\n mc-button\n (click)=\"onClickCloseBtn()\"\n class=\"mc-modal-close mc-button_transparent\">\n <i mc-icon=\"mc-close-L_16\" class=\"mc-icon mc-icon_light\" [color]=\"themePalette.Second\"></i>\n </button>\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isModalType('default')\"\n [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('custom')\"\n [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tplContentCustom>\n <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n <div *ngIf=\"mcTitle\" class=\"mc-modal-header\" [class.mc-modal-body_top-overflow]=\"isTopOverflow\">\n <div class=\"mc-modal-title\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n <div [innerHTML]=\"mcTitle\"></div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"mc-modal-body\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n <div [innerHTML]=\"mcContent\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"mc-modal-footer\" [class.mc-modal-body_bottom-overflow]=\"isBottomOverflow\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n <div [innerHTML]=\"mcFooter\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n <ng-container *ngFor=\"let button of $any(mcFooter)\">\n <button\n mc-button\n #autoFocusedButton\n [attr.autofocus]=\"button.autoFocus\"\n [attr.mc-modal-main-action]=\"button.mcModalMainAction\"\n *ngIf=\"getButtonCallableProp(button, 'show')\"\n [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n [class.mc-progress]=\"getButtonCallableProp(button, 'loading')\"\n (click)=\"onButtonClick(button)\"\n [color]=\"button.type\">\n {{ button.label }}\n </button>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button\n #autoFocusedButton\n [attr.autofocus]=\"true\"\n *ngIf=\"mcOkText\"\n mc-button\n [color]=\"themePalette.Primary\"\n (click)=\"onClickOkCancel('ok')\">\n\n {{ okText }}\n </button>\n <button *ngIf=\"mcCancelText\" mc-button (click)=\"onClickOkCancel('cancel')\">\n {{ cancelText }}\n </button>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n <div class=\"mc-modal-body\" [ngStyle]=\"mcBodyStyle\">\n <div class=\"mc-confirm-body-wrapper\">\n <div class=\"mc-confirm-body\">\n <div class=\"mc-confirm-content\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n [ngTemplateOutlet]=\"$any(mcContent)\">\n </ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n <div [innerHTML]=\"mcContent\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div> <!-- /.mc-confirm-body-wrapper -->\n </div>\n <div class=\"mc-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n <button\n mc-button\n #autoFocusedButton\n [color]=\"mcOkType\"\n [attr.autofocus]=\"true\"\n *ngIf=\"mcOkText\"\n (click)=\"onClickOkCancel('ok')\">\n\n {{ okText }}\n </button>\n\n <button mc-button [color]=\"themePalette.Second\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n {{ cancelText }}\n </button>\n </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".mc-confirm .mc-modal-header,.mc-confirm .mc-modal-close{display:none}.mc-confirm .mc-modal-body{padding:var(--mc-modal-confirm-size-padding, 24px)}.mc-confirm-body-wrapper{zoom:1}.mc-confirm-body-wrapper:before,.mc-confirm-body-wrapper:after{content:\"\";display:table}.mc-confirm-body-wrapper:after{clear:both}.mc-confirm-body .mc-confirm-title{display:block;overflow:auto}.mc-confirm .mc-confirm-btns{border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);text-align:right}.mc-confirm .mc-confirm-btns button+button{margin:16px}.mc-modal{box-sizing:border-box;position:relative;top:var(--mc-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.mc-modal.zoom-enter,.mc-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.mc-modal.mc-modal_small{width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--mc-modal-size-close-width, 56px);height:var(--mc-modal-size-close-width, 56px)}.mc-modal-wrap{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.mc-modal-title{margin:0}.mc-modal-content{position:relative;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:flex;align-items:center;height:var(--mc-modal-header-size-height, 56px);border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:var(--mc-modal-header-size-padding, 0 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:flex;align-items:center;justify-content:right;height:var(--mc-modal-footer-size-height, 64px);border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:var(--mc-modal-footer-size-padding, 0 16px)}.mc-modal-footer button+button{margin-left:16px;margin-bottom:0}.mc-modal-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;height:100%}.mc-modal-mask.mc-modal-mask-hidden{display:none}.mc-modal-open{overflow:hidden}\n"], components: [{ type: i3.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.McButtonCssStyler, selector: "[mc-button]" }, { type: i4.McIconCSSStyler, selector: "[mc-icon]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: McModalMainAction, selector: "[mc-modal-main-action]" }], pipes: { "toCssUnit": CssUnitPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
592
|
+
/** @nocollapse */ /** @nocollapse */ McModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McModalComponent, selector: "mc-modal", inputs: { mcModalType: "mcModalType", mcComponent: "mcComponent", mcContent: "mcContent", mcComponentParams: "mcComponentParams", mcFooter: "mcFooter", mcVisible: "mcVisible", mcZIndex: "mcZIndex", mcWidth: "mcWidth", mcSize: "mcSize", mcWrapClassName: "mcWrapClassName", mcClassName: "mcClassName", mcStyle: "mcStyle", mcTitle: "mcTitle", mcCloseByESC: "mcCloseByESC", mcClosable: "mcClosable", mcMask: "mcMask", mcMaskClosable: "mcMaskClosable", mcMaskStyle: "mcMaskStyle", mcBodyStyle: "mcBodyStyle", mcOkText: "mcOkText", mcOkType: "mcOkType", mcRestoreFocus: "mcRestoreFocus", mcOkLoading: "mcOkLoading", mcOnOk: "mcOnOk", mcCancelText: "mcCancelText", mcCancelLoading: "mcCancelLoading", mcOnCancel: "mcOnCancel", mcGetContainer: "mcGetContainer" }, outputs: { mcVisibleChange: "mcVisibleChange", mcAfterOpen: "mcAfterOpen", mcAfterClose: "mcAfterClose", mcOnOk: "mcOnOk", mcOnCancel: "mcOnCancel" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, viewQueries: [{ propertyName: "modalContainer", first: true, predicate: ["modalContainer"], descendants: true, static: true }, { propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "modalBody", first: true, predicate: ["modalBody"], descendants: true }, { propertyName: "autoFocusedButtons", predicate: ["autoFocusedButton"], descendants: true, read: ElementRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n <ng-content></ng-content>\n</ng-template>\n\n<div>\n <div *ngIf=\"mcMask\"\n class=\"mc-modal-mask\"\n [ngClass]=\"maskAnimationClassMap\"\n [class.mc-modal-mask-hidden]=\"hidden\"\n [ngStyle]=\"mcMaskStyle\"\n [style.zIndex]=\"mcZIndex\"\n ></div>\n <div (mousedown)=\"onClickMask($event)\"\n class=\"mc-modal-wrap {{ mcWrapClassName }}\"\n [style.zIndex]=\"mcZIndex\"\n [style.display]=\"hidden ? 'none' : ''\"\n tabindex=\"-1\">\n\n <div #modalContainer\n class=\"mc-modal {{ mcClassName }} mc-modal_{{ mcSize }}\"\n [ngClass]=\"modalAnimationClassMap\"\n [ngStyle]=\"mcStyle\"\n [style.width]=\"mcWidth | toCssUnit\"\n [style.transform-origin]=\"transformOrigin\">\n\n <div class=\"mc-modal-content\" cdkTrapFocus>\n <button *ngIf=\"mcClosable\"\n mc-button\n (click)=\"onClickCloseBtn()\"\n class=\"mc-modal-close mc-button_transparent\">\n <i mc-icon=\"mc-close-L_16\" class=\"mc-icon mc-icon_light\" [color]=\"themePalette.Second\"></i>\n </button>\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isModalType('default')\"\n [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('custom')\"\n [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tplContentCustom>\n <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n <div *ngIf=\"mcTitle\" class=\"mc-modal-header\" [class.mc-modal-body_top-overflow]=\"isTopOverflow\">\n <div class=\"mc-modal-title\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n <div [innerHTML]=\"mcTitle\"></div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"mc-modal-body\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n <div [innerHTML]=\"mcContent\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"mc-modal-footer\" [class.mc-modal-body_bottom-overflow]=\"isBottomOverflow\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n <div [innerHTML]=\"mcFooter\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n <ng-container *ngFor=\"let button of $any(mcFooter)\">\n <button\n mc-button\n #autoFocusedButton\n [attr.autofocus]=\"button.autoFocus\"\n [attr.mc-modal-main-action]=\"button.mcModalMainAction\"\n *ngIf=\"getButtonCallableProp(button, 'show')\"\n [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n [class.mc-progress]=\"getButtonCallableProp(button, 'loading')\"\n (click)=\"onButtonClick(button)\"\n [color]=\"button.type\">\n {{ button.label }}\n </button>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button\n #autoFocusedButton\n [attr.autofocus]=\"true\"\n *ngIf=\"mcOkText\"\n mc-button\n [color]=\"themePalette.Primary\"\n (click)=\"onClickOkCancel('ok')\">\n\n {{ okText }}\n </button>\n <button *ngIf=\"mcCancelText\" mc-button (click)=\"onClickOkCancel('cancel')\">\n {{ cancelText }}\n </button>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n <div class=\"mc-modal-body\" [ngStyle]=\"mcBodyStyle\">\n <div class=\"mc-confirm-body-wrapper\">\n <div class=\"mc-confirm-body\">\n <div class=\"mc-confirm-content\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n [ngTemplateOutlet]=\"$any(mcContent)\">\n </ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n <div [innerHTML]=\"mcContent\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div> <!-- /.mc-confirm-body-wrapper -->\n </div>\n <div class=\"mc-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n <button\n mc-button\n #autoFocusedButton\n [color]=\"mcOkType\"\n [attr.autofocus]=\"true\"\n *ngIf=\"mcOkText\"\n (click)=\"onClickOkCancel('ok')\">\n\n {{ okText }}\n </button>\n\n <button mc-button [color]=\"themePalette.Second\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n {{ cancelText }}\n </button>\n </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".mc-confirm .mc-modal-header,.mc-confirm .mc-modal-close{display:none}.mc-confirm .mc-modal-body{padding:var(--mc-modal-confirm-size-padding, 24px)}.mc-confirm-body-wrapper{zoom:1}.mc-confirm-body-wrapper:before,.mc-confirm-body-wrapper:after{content:\"\";display:table}.mc-confirm-body-wrapper:after{clear:both}.mc-confirm-body .mc-confirm-title{display:block;overflow:auto}.mc-confirm .mc-confirm-btns{border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);text-align:right}.mc-confirm .mc-confirm-btns button{margin:16px}.mc-modal{box-sizing:border-box;position:relative;top:var(--mc-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.mc-modal.zoom-enter,.mc-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.mc-modal.mc-modal_small{width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--mc-modal-size-close-width, 56px);height:var(--mc-modal-size-close-width, 56px)}.mc-modal-wrap{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.mc-modal-title{margin:0}.mc-modal-content{position:relative;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:flex;align-items:center;height:var(--mc-modal-header-size-height, 56px);border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:var(--mc-modal-header-size-padding, 0 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:flex;align-items:center;justify-content:right;height:var(--mc-modal-footer-size-height, 64px);border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:var(--mc-modal-footer-size-padding, 0 16px)}.mc-modal-footer button+button{margin-left:16px;margin-bottom:0}.mc-modal-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;height:100%}.mc-modal-mask.mc-modal-mask-hidden{display:none}.mc-modal-open{overflow:hidden}\n"], components: [{ type: i3.McButton, selector: "[mc-button]", inputs: ["color", "tabIndex", "disabled"] }, { type: i4.McIcon, selector: "[mc-icon]", inputs: ["color"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { type: i3.McButtonCssStyler, selector: "[mc-button]" }, { type: i4.McIconCSSStyler, selector: "[mc-icon]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: McModalMainAction, selector: "[mc-modal-main-action]" }], pipes: { "toCssUnit": CssUnitPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
587
593
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McModalComponent, decorators: [{
|
588
594
|
type: Component,
|
589
595
|
args: [{ selector: 'mc-modal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
590
596
|
'(keydown)': 'onKeyDown($event)'
|
591
|
-
}, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n <ng-content></ng-content>\n</ng-template>\n\n<div>\n <div *ngIf=\"mcMask\"\n class=\"mc-modal-mask\"\n [ngClass]=\"maskAnimationClassMap\"\n [class.mc-modal-mask-hidden]=\"hidden\"\n [ngStyle]=\"mcMaskStyle\"\n [style.zIndex]=\"mcZIndex\"\n ></div>\n <div (mousedown)=\"onClickMask($event)\"\n class=\"mc-modal-wrap {{ mcWrapClassName }}\"\n [style.zIndex]=\"mcZIndex\"\n [style.display]=\"hidden ? 'none' : ''\"\n tabindex=\"-1\">\n\n <div #modalContainer\n class=\"mc-modal {{ mcClassName }} mc-modal_{{ mcSize }}\"\n [ngClass]=\"modalAnimationClassMap\"\n [ngStyle]=\"mcStyle\"\n [style.width]=\"mcWidth | toCssUnit\"\n [style.transform-origin]=\"transformOrigin\">\n\n <div class=\"mc-modal-content\" cdkTrapFocus>\n <button *ngIf=\"mcClosable\"\n mc-button\n (click)=\"onClickCloseBtn()\"\n class=\"mc-modal-close mc-button_transparent\">\n <i mc-icon=\"mc-close-L_16\" class=\"mc-icon mc-icon_light\" [color]=\"themePalette.Second\"></i>\n </button>\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isModalType('default')\"\n [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('custom')\"\n [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tplContentCustom>\n <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n <div *ngIf=\"mcTitle\" class=\"mc-modal-header\" [class.mc-modal-body_top-overflow]=\"isTopOverflow\">\n <div class=\"mc-modal-title\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n <div [innerHTML]=\"mcTitle\"></div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"mc-modal-body\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n <div [innerHTML]=\"mcContent\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"mc-modal-footer\" [class.mc-modal-body_bottom-overflow]=\"isBottomOverflow\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n <div [innerHTML]=\"mcFooter\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n <ng-container *ngFor=\"let button of $any(mcFooter)\">\n <button\n mc-button\n #autoFocusedButton\n [attr.autofocus]=\"button.autoFocus\"\n [attr.mc-modal-main-action]=\"button.mcModalMainAction\"\n *ngIf=\"getButtonCallableProp(button, 'show')\"\n [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n [class.mc-progress]=\"getButtonCallableProp(button, 'loading')\"\n (click)=\"onButtonClick(button)\"\n [color]=\"button.type\">\n {{ button.label }}\n </button>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button\n #autoFocusedButton\n [attr.autofocus]=\"true\"\n *ngIf=\"mcOkText\"\n mc-button\n [color]=\"themePalette.Primary\"\n (click)=\"onClickOkCancel('ok')\">\n\n {{ okText }}\n </button>\n <button *ngIf=\"mcCancelText\" mc-button (click)=\"onClickOkCancel('cancel')\">\n {{ cancelText }}\n </button>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n <div class=\"mc-modal-body\" [ngStyle]=\"mcBodyStyle\">\n <div class=\"mc-confirm-body-wrapper\">\n <div class=\"mc-confirm-body\">\n <div class=\"mc-confirm-content\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n [ngTemplateOutlet]=\"$any(mcContent)\">\n </ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n <div [innerHTML]=\"mcContent\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div> <!-- /.mc-confirm-body-wrapper -->\n </div>\n <div class=\"mc-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n <button\n mc-button\n #autoFocusedButton\n [color]=\"mcOkType\"\n [attr.autofocus]=\"true\"\n *ngIf=\"mcOkText\"\n (click)=\"onClickOkCancel('ok')\">\n\n {{ okText }}\n </button>\n\n <button mc-button [color]=\"themePalette.Second\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n {{ cancelText }}\n </button>\n </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".mc-confirm .mc-modal-header,.mc-confirm .mc-modal-close{display:none}.mc-confirm .mc-modal-body{padding:var(--mc-modal-confirm-size-padding, 24px)}.mc-confirm-body-wrapper{zoom:1}.mc-confirm-body-wrapper:before,.mc-confirm-body-wrapper:after{content:\"\";display:table}.mc-confirm-body-wrapper:after{clear:both}.mc-confirm-body .mc-confirm-title{display:block;overflow:auto}.mc-confirm .mc-confirm-btns{border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);text-align:right}.mc-confirm .mc-confirm-btns button
|
597
|
+
}, template: "<!-- Compatible: the <ng-content> can appear only once -->\n<ng-template #tplOriginContent>\n <ng-content></ng-content>\n</ng-template>\n\n<div>\n <div *ngIf=\"mcMask\"\n class=\"mc-modal-mask\"\n [ngClass]=\"maskAnimationClassMap\"\n [class.mc-modal-mask-hidden]=\"hidden\"\n [ngStyle]=\"mcMaskStyle\"\n [style.zIndex]=\"mcZIndex\"\n ></div>\n <div (mousedown)=\"onClickMask($event)\"\n class=\"mc-modal-wrap {{ mcWrapClassName }}\"\n [style.zIndex]=\"mcZIndex\"\n [style.display]=\"hidden ? 'none' : ''\"\n tabindex=\"-1\">\n\n <div #modalContainer\n class=\"mc-modal {{ mcClassName }} mc-modal_{{ mcSize }}\"\n [ngClass]=\"modalAnimationClassMap\"\n [ngStyle]=\"mcStyle\"\n [style.width]=\"mcWidth | toCssUnit\"\n [style.transform-origin]=\"transformOrigin\">\n\n <div class=\"mc-modal-content\" cdkTrapFocus>\n <button *ngIf=\"mcClosable\"\n mc-button\n (click)=\"onClickCloseBtn()\"\n class=\"mc-modal-close mc-button_transparent\">\n <i mc-icon=\"mc-close-L_16\" class=\"mc-icon mc-icon_light\" [color]=\"themePalette.Second\"></i>\n </button>\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isModalType('default')\"\n [ngTemplateOutlet]=\"tplContentDefault\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('confirm')\"\n [ngTemplateOutlet]=\"tplContentConfirm\"></ng-container>\n <ng-container *ngSwitchCase=\"isModalType('custom')\"\n [ngTemplateOutlet]=\"tplContentCustom\"></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #tplContentCustom>\n <ng-container #bodyContainer></ng-container>\n</ng-template>\n\n\n<!-- [Predefined] Default Modal Content -->\n<ng-template #tplContentDefault>\n <div *ngIf=\"mcTitle\" class=\"mc-modal-header\" [class.mc-modal-body_top-overflow]=\"isTopOverflow\">\n <div class=\"mc-modal-title\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcTitle)\" [ngTemplateOutlet]=\"$any(mcTitle)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcTitle)\">\n <div [innerHTML]=\"mcTitle\"></div>\n </ng-container>\n </ng-container>\n </div>\n </div>\n <div class=\"mc-modal-body\" #modalBody [ngStyle]=\"mcBodyStyle\" (scroll)=\"checkOverflow()\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\" [ngTemplateOutlet]=\"$any(mcContent)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n <div [innerHTML]=\"mcContent\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n <div *ngIf=\"mcFooter || mcOkText || mcCancelText\" class=\"mc-modal-footer\" [class.mc-modal-body_bottom-overflow]=\"isBottomOverflow\">\n <ng-container [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcFooter)\" [ngTemplateOutlet]=\"$any(mcFooter)\"></ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcFooter)\">\n <div [innerHTML]=\"mcFooter\"></div>\n </ng-container>\n <ng-container *ngSwitchCase=\"isModalButtons(mcFooter)\">\n <ng-container *ngFor=\"let button of $any(mcFooter)\">\n <button\n mc-button\n #autoFocusedButton\n [attr.autofocus]=\"button.autoFocus\"\n [attr.mc-modal-main-action]=\"button.mcModalMainAction\"\n *ngIf=\"getButtonCallableProp(button, 'show')\"\n [disabled]=\"getButtonCallableProp(button, 'disabled')\"\n [class.mc-progress]=\"getButtonCallableProp(button, 'loading')\"\n (click)=\"onButtonClick(button)\"\n [color]=\"button.type\">\n {{ button.label }}\n </button>\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n <button\n #autoFocusedButton\n [attr.autofocus]=\"true\"\n *ngIf=\"mcOkText\"\n mc-button\n [color]=\"themePalette.Primary\"\n (click)=\"onClickOkCancel('ok')\">\n\n {{ okText }}\n </button>\n <button *ngIf=\"mcCancelText\" mc-button (click)=\"onClickOkCancel('cancel')\">\n {{ cancelText }}\n </button>\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n<!-- /[Predefined] Default Modal Content -->\n\n<!-- [Predefined] Confirm Modal Content -->\n<ng-template #tplContentConfirm>\n <div class=\"mc-modal-body\" [ngStyle]=\"mcBodyStyle\">\n <div class=\"mc-confirm-body-wrapper\">\n <div class=\"mc-confirm-body\">\n <div class=\"mc-confirm-content\">\n <ng-container #bodyContainer>\n <ng-container *ngIf=\"!isComponent(mcContent)\" [ngSwitch]=\"true\">\n <ng-container *ngSwitchCase=\"isTemplateRef(mcContent)\"\n [ngTemplateOutlet]=\"$any(mcContent)\">\n </ng-container>\n <ng-container *ngSwitchCase=\"isNonEmptyString(mcContent)\">\n <div [innerHTML]=\"mcContent\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault [ngTemplateOutlet]=\"tplOriginContent\"></ng-container>\n </ng-container>\n </ng-container>\n </div>\n </div>\n </div> <!-- /.mc-confirm-body-wrapper -->\n </div>\n <div class=\"mc-confirm-btns\" *ngIf=\"mcOkText || mcCancelText\">\n <button\n mc-button\n #autoFocusedButton\n [color]=\"mcOkType\"\n [attr.autofocus]=\"true\"\n *ngIf=\"mcOkText\"\n (click)=\"onClickOkCancel('ok')\">\n\n {{ okText }}\n </button>\n\n <button mc-button [color]=\"themePalette.Second\" *ngIf=\"mcCancelText\" (click)=\"onClickOkCancel('cancel')\">\n {{ cancelText }}\n </button>\n </div>\n</ng-template>\n<!-- /[Predefined] Confirm Modal Content -->\n", styles: [".mc-confirm .mc-modal-header,.mc-confirm .mc-modal-close{display:none}.mc-confirm .mc-modal-body{padding:var(--mc-modal-confirm-size-padding, 24px)}.mc-confirm-body-wrapper{zoom:1}.mc-confirm-body-wrapper:before,.mc-confirm-body-wrapper:after{content:\"\";display:table}.mc-confirm-body-wrapper:after{clear:both}.mc-confirm-body .mc-confirm-title{display:block;overflow:auto}.mc-confirm .mc-confirm-btns{border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);text-align:right}.mc-confirm .mc-confirm-btns button{margin:16px}.mc-modal{box-sizing:border-box;position:relative;top:var(--mc-modal-size-top, 48px);width:auto;margin:0 auto;list-style:none}.mc-modal.zoom-enter,.mc-modal.zoom-appear{animation-duration:.3s;transform:none;opacity:0}.mc-modal.mc-modal_small{width:var(--mc-modal-size-small, 400px)}.mc-modal.mc-modal_normal{width:var(--mc-modal-size-normal, 640px)}.mc-modal.mc-modal_large{width:var(--mc-modal-size-large, 960px)}.mc-modal .mc-modal-close{position:absolute;z-index:10;top:0;right:0;width:var(--mc-modal-size-close-width, 56px);height:var(--mc-modal-size-close-width, 56px)}.mc-modal-wrap{position:fixed;z-index:1000;top:0;right:0;bottom:0;left:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:0}.mc-modal-title{margin:0}.mc-modal-content{position:relative;border-radius:var(--mc-modal-size-border-radius, 4px);background-clip:padding-box;background-color:#fff}.mc-modal-header{display:flex;align-items:center;height:var(--mc-modal-header-size-height, 56px);border-radius:var(--mc-modal-header-size-border-radius, 4px 4px 0 0);padding:var(--mc-modal-header-size-padding, 0 16px)}.mc-modal-body{display:block;overflow-y:auto;max-height:var(--mc-modal-body-size-max-height, calc(100vh - 260px));padding:var(--mc-modal-body-size-padding, 16px 24px 24px);word-wrap:break-word}.mc-modal-footer{display:flex;align-items:center;justify-content:right;height:var(--mc-modal-footer-size-height, 64px);border-radius:var(--mc-modal-footer-size-border-radius, 0 0 4px 4px);padding:var(--mc-modal-footer-size-padding, 0 16px)}.mc-modal-footer button+button{margin-left:16px;margin-bottom:0}.mc-modal-mask{position:fixed;z-index:1000;top:0;right:0;left:0;bottom:0;height:100%}.mc-modal-mask.mc-modal-mask-hidden{display:none}.mc-modal-open{overflow:hidden}\n"] }]
|
592
598
|
}], ctorParameters: function () { return [{ type: i1.Overlay }, { type: i0.Renderer2 }, { type: i0.ComponentFactoryResolver }, { type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: McModalControlService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
593
599
|
type: Inject,
|
594
600
|
args: [DOCUMENT]
|
@@ -640,6 +646,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
640
646
|
type: Input
|
641
647
|
}], mcOkType: [{
|
642
648
|
type: Input
|
649
|
+
}], mcRestoreFocus: [{
|
650
|
+
type: Input
|
643
651
|
}], mcOkLoading: [{
|
644
652
|
type: Input
|
645
653
|
}], mcOnOk: [{
|