@flywheel-io/vision 2.7.7 → 2.7.9
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/components/dialog/dialog-confirm.component.d.ts +3 -3
- package/components/tooltip/tooltip-panel/tooltip-panel.component.d.ts +1 -1
- package/esm2022/components/dialog/dialog-confirm.component.mjs +10 -5
- package/fesm2022/flywheel-io-vision.mjs +9 -3
- package/fesm2022/flywheel-io-vision.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { DialogRef } from '@angular/cdk/dialog';
|
|
2
2
|
import { ElementRef, EventEmitter } from '@angular/core';
|
|
3
3
|
import { IconType } from '../icon/icon.types';
|
|
4
|
-
import { DialogWidth } from './dialog.component';
|
|
5
4
|
import * as i0 from "@angular/core";
|
|
6
5
|
export declare class FwDialogConfirmComponent {
|
|
7
6
|
dialogRef: DialogRef;
|
|
@@ -10,6 +9,7 @@ export declare class FwDialogConfirmComponent {
|
|
|
10
9
|
icon?: IconType;
|
|
11
10
|
iconColor?: 'primary' | 'secondary' | 'red' | 'orange' | 'green' | 'slate';
|
|
12
11
|
confirmColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'warning' | 'success';
|
|
12
|
+
cancelColor?: 'primary' | 'secondary' | 'danger' | 'slate' | 'warning' | 'success';
|
|
13
13
|
confirmButtonText?: string;
|
|
14
14
|
confirmButtonIcon?: IconType;
|
|
15
15
|
cancelButtonText?: string;
|
|
@@ -24,7 +24,6 @@ export declare class FwDialogConfirmComponent {
|
|
|
24
24
|
};
|
|
25
25
|
close: EventEmitter<void>;
|
|
26
26
|
confirm: EventEmitter<void>;
|
|
27
|
-
protected readonly DialogWidth: typeof DialogWidth;
|
|
28
27
|
private isClosing;
|
|
29
28
|
constructor(dialogRef: DialogRef, elementRef: ElementRef);
|
|
30
29
|
get classes(): {
|
|
@@ -32,7 +31,8 @@ export declare class FwDialogConfirmComponent {
|
|
|
32
31
|
};
|
|
33
32
|
get dialogClasses(): string;
|
|
34
33
|
handleCloseButton(): void;
|
|
34
|
+
protected handleConfirm(): void;
|
|
35
35
|
private closeWithAnimation;
|
|
36
36
|
static ɵfac: i0.ɵɵFactoryDeclaration<FwDialogConfirmComponent, [{ optional: true; }, null]>;
|
|
37
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogConfirmComponent, "fw-dialog-confirm", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "confirmColor": { "alias": "confirmColor"; "required": false; }; "confirmButtonText": { "alias": "confirmButtonText"; "required": false; }; "confirmButtonIcon": { "alias": "confirmButtonIcon"; "required": false; }; "cancelButtonText": { "alias": "cancelButtonText"; "required": false; }; "contentIcon": { "alias": "contentIcon"; "required": false; }; "contentTitle": { "alias": "contentTitle"; "required": false; }; "contentText": { "alias": "contentText"; "required": false; }; "showConfirmButtonIcon": { "alias": "showConfirmButtonIcon"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; "width": { "alias": "width"; "required": false; }; "externalClasses": { "alias": "class"; "required": false; }; }, { "close": "close"; "confirm": "confirm"; }, never, never, false, never>;
|
|
37
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<FwDialogConfirmComponent, "fw-dialog-confirm", never, { "title": { "alias": "title"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "confirmColor": { "alias": "confirmColor"; "required": false; }; "cancelColor": { "alias": "cancelColor"; "required": false; }; "confirmButtonText": { "alias": "confirmButtonText"; "required": false; }; "confirmButtonIcon": { "alias": "confirmButtonIcon"; "required": false; }; "cancelButtonText": { "alias": "cancelButtonText"; "required": false; }; "contentIcon": { "alias": "contentIcon"; "required": false; }; "contentTitle": { "alias": "contentTitle"; "required": false; }; "contentText": { "alias": "contentText"; "required": false; }; "showConfirmButtonIcon": { "alias": "showConfirmButtonIcon"; "required": false; }; "showClose": { "alias": "showClose"; "required": false; }; "width": { "alias": "width"; "required": false; }; "externalClasses": { "alias": "class"; "required": false; }; }, { "close": "close"; "confirm": "confirm"; }, never, never, false, never>;
|
|
38
38
|
}
|
|
@@ -5,7 +5,7 @@ export type DelayLength = 'none' | 'short' | 'long';
|
|
|
5
5
|
export type SimplePosition = 'above' | 'below' | 'left' | 'right';
|
|
6
6
|
export declare class FwTooltipPanelComponent {
|
|
7
7
|
animation: any;
|
|
8
|
-
trigger: import("@angular/core").InputSignalWithTransform<CdkOverlayOrigin,
|
|
8
|
+
trigger: import("@angular/core").InputSignalWithTransform<CdkOverlayOrigin, ElementRef<HTMLElement> | CdkOverlayOrigin>;
|
|
9
9
|
title: string;
|
|
10
10
|
isOpen: import("@angular/core").InputSignal<boolean>;
|
|
11
11
|
position: import("@angular/core").InputSignal<SimplePosition>;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { Component, EventEmitter, HostBinding, Input, Optional, Output } from '@angular/core';
|
|
2
|
-
import { DialogWidth } from './dialog.component';
|
|
3
2
|
import * as i0 from "@angular/core";
|
|
4
3
|
import * as i1 from "@angular/cdk/dialog";
|
|
5
4
|
import * as i2 from "@angular/common";
|
|
@@ -15,6 +14,7 @@ export class FwDialogConfirmComponent {
|
|
|
15
14
|
this.title = 'Confirm';
|
|
16
15
|
this.iconColor = 'primary';
|
|
17
16
|
this.confirmColor = 'primary';
|
|
17
|
+
this.cancelColor = 'slate';
|
|
18
18
|
this.confirmButtonText = 'Confirm';
|
|
19
19
|
this.confirmButtonIcon = 'done-check';
|
|
20
20
|
this.cancelButtonText = 'Cancel';
|
|
@@ -25,7 +25,6 @@ export class FwDialogConfirmComponent {
|
|
|
25
25
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
26
26
|
this.close = new EventEmitter();
|
|
27
27
|
this.confirm = new EventEmitter();
|
|
28
|
-
this.DialogWidth = DialogWidth;
|
|
29
28
|
this.isClosing = false;
|
|
30
29
|
}
|
|
31
30
|
get classes() {
|
|
@@ -57,6 +56,10 @@ export class FwDialogConfirmComponent {
|
|
|
57
56
|
handleCloseButton() {
|
|
58
57
|
this.closeWithAnimation();
|
|
59
58
|
}
|
|
59
|
+
handleConfirm() {
|
|
60
|
+
this.dialogRef.close(true);
|
|
61
|
+
this.confirm.emit();
|
|
62
|
+
}
|
|
60
63
|
closeWithAnimation() {
|
|
61
64
|
if (this.isClosing) {
|
|
62
65
|
return;
|
|
@@ -68,11 +71,11 @@ export class FwDialogConfirmComponent {
|
|
|
68
71
|
}, 300);
|
|
69
72
|
}
|
|
70
73
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, deps: [{ token: i1.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
71
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
74
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", cancelColor: "cancelColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText", showConfirmButtonIcon: "showConfirmButtonIcon", showClose: "showClose", width: "width", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n @if (contentIcon) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\">\n {{ contentIcon }}\n </fw-icon>\n }\n\n @if (contentTitle) {\n <p class=\"vision-p2 content-title\">\n {{ contentTitle }}\n </p>\n }\n\n @if (contentText) {\n <p class=\"vision-p2 content-text\">\n {{ contentText }}\n </p>\n }\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (cancelButtonText) {\n <fw-button\n variant=\"outline\"\n [color]=\"cancelColor\"\n (click)=\"handleCloseButton()\">\n {{ cancelButtonText }}\n </fw-button>\n }\n\n @if (confirmButtonText) {\n <fw-button\n variant=\"solid\"\n [color]=\"confirmColor\"\n [leftIcon]=\"showConfirmButtonIcon ? confirmButtonIcon : null\"\n (click)=\"handleConfirm()\">\n {{ confirmButtonText }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: i4.FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: i5.FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: i6.FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "component", type: i7.FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
|
|
72
75
|
}
|
|
73
76
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, decorators: [{
|
|
74
77
|
type: Component,
|
|
75
|
-
args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\"
|
|
78
|
+
args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n @if (contentIcon) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\">\n {{ contentIcon }}\n </fw-icon>\n }\n\n @if (contentTitle) {\n <p class=\"vision-p2 content-title\">\n {{ contentTitle }}\n </p>\n }\n\n @if (contentText) {\n <p class=\"vision-p2 content-text\">\n {{ contentText }}\n </p>\n }\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (cancelButtonText) {\n <fw-button\n variant=\"outline\"\n [color]=\"cancelColor\"\n (click)=\"handleCloseButton()\">\n {{ cancelButtonText }}\n </fw-button>\n }\n\n @if (confirmButtonText) {\n <fw-button\n variant=\"solid\"\n [color]=\"confirmColor\"\n [leftIcon]=\"showConfirmButtonIcon ? confirmButtonIcon : null\"\n (click)=\"handleConfirm()\">\n {{ confirmButtonText }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
|
|
76
79
|
}], ctorParameters: () => [{ type: i1.DialogRef, decorators: [{
|
|
77
80
|
type: Optional
|
|
78
81
|
}] }, { type: i0.ElementRef }], propDecorators: { title: [{
|
|
@@ -83,6 +86,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
83
86
|
type: Input
|
|
84
87
|
}], confirmColor: [{
|
|
85
88
|
type: Input
|
|
89
|
+
}], cancelColor: [{
|
|
90
|
+
type: Input
|
|
86
91
|
}], confirmButtonText: [{
|
|
87
92
|
type: Input
|
|
88
93
|
}], confirmButtonIcon: [{
|
|
@@ -112,4 +117,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
112
117
|
type: HostBinding,
|
|
113
118
|
args: ['class']
|
|
114
119
|
}] } });
|
|
115
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
120
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLWNvbmZpcm0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZGlhbG9nL2RpYWxvZy1jb25maXJtLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2RpYWxvZy9kaWFsb2ctY29uZmlybS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBRSxXQUFXLEVBQUUsS0FBSyxFQUFFLFFBQVEsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7Ozs7OztBQVMxRyxNQUFNLE9BQU8sd0JBQXdCO0lBdUJuQyxZQUErQixTQUFvQixFQUFVLFVBQXNCO1FBQXBELGNBQVMsR0FBVCxTQUFTLENBQVc7UUFBVSxlQUFVLEdBQVYsVUFBVSxDQUFZO1FBdEIxRSxVQUFLLEdBQVksU0FBUyxDQUFDO1FBRTNCLGNBQVMsR0FBb0UsU0FBUyxDQUFDO1FBQ3ZGLGlCQUFZLEdBQTBFLFNBQVMsQ0FBQztRQUNoRyxnQkFBVyxHQUEwRSxPQUFPLENBQUM7UUFDN0Ysc0JBQWlCLEdBQVksU0FBUyxDQUFDO1FBQ3ZDLHNCQUFpQixHQUFjLFlBQVksQ0FBQztRQUM1QyxxQkFBZ0IsR0FBWSxRQUFRLENBQUM7UUFFckMsaUJBQVksR0FBWSxlQUFlLENBQUM7UUFFeEMsMEJBQXFCLEdBQUcsSUFBSSxDQUFDO1FBQzdCLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsVUFBSyxHQUFnRixhQUFhLENBQUM7UUFHNUcsNERBQTREO1FBQ2xELFVBQUssR0FBdUIsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUNyRCxZQUFPLEdBQXVCLElBQUksWUFBWSxFQUFRLENBQUM7UUFFekQsY0FBUyxHQUFHLEtBQUssQ0FBQztJQUcxQixDQUFDO0lBRUQsSUFBMEIsT0FBTztRQUMvQixNQUFNLE9BQU8sR0FB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ZWYgfSBmcm9tICdAYW5ndWxhci9jZGsvZGlhbG9nJztcbmltcG9ydCB7IENvbXBvbmVudCwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZywgSW5wdXQsIE9wdGlvbmFsLCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgSWNvblR5cGUgfSBmcm9tICcuLi9pY29uL2ljb24udHlwZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdmdy1kaWFsb2ctY29uZmlybScsXG4gIHRlbXBsYXRlVXJsOiAnLi9kaWFsb2ctY29uZmlybS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2RpYWxvZy1jb25maXJtLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEZ3RGlhbG9nQ29uZmlybUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHRpdGxlPzogc3RyaW5nID0gJ0NvbmZpcm0nO1xuICBASW5wdXQoKSBpY29uPzogSWNvblR5cGU7XG4gIEBJbnB1dCgpIGljb25Db2xvcj86ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknIHwgJ3JlZCcgfCAnb3JhbmdlJyB8ICdncmVlbicgfCAnc2xhdGUnID0gJ3ByaW1hcnknO1xuICBASW5wdXQoKSBjb25maXJtQ29sb3I/OiAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdkYW5nZXInIHwgJ3NsYXRlJyB8ICd3YXJuaW5nJyB8ICdzdWNjZXNzJyA9ICdwcmltYXJ5JztcbiAgQElucHV0KCkgY2FuY2VsQ29sb3I/OiAncHJpbWFyeScgfCAnc2Vjb25kYXJ5JyB8ICdkYW5nZXInIHwgJ3NsYXRlJyB8ICd3YXJuaW5nJyB8ICdzdWNjZXNzJyA9ICdzbGF0ZSc7XG4gIEBJbnB1dCgpIGNvbmZpcm1CdXR0b25UZXh0Pzogc3RyaW5nID0gJ0NvbmZpcm0nO1xuICBASW5wdXQoKSBjb25maXJtQnV0dG9uSWNvbj86IEljb25UeXBlID0gJ2RvbmUtY2hlY2snO1xuICBASW5wdXQoKSBjYW5jZWxCdXR0b25UZXh0Pzogc3RyaW5nID0gJ0NhbmNlbCc7XG4gIEBJbnB1dCgpIGNvbnRlbnRJY29uPzogc3RyaW5nO1xuICBASW5wdXQoKSBjb250ZW50VGl0bGU/OiBzdHJpbmcgPSAnQXJlIHlvdSBzdXJlPyc7XG4gIEBJbnB1dCgpIGNvbnRlbnRUZXh0Pzogc3RyaW5nO1xuICBASW5wdXQoKSBzaG93Q29uZmlybUJ1dHRvbkljb24gPSB0cnVlO1xuICBASW5wdXQoKSBzaG93Q2xvc2UgPSBmYWxzZTtcbiAgQElucHV0KCkgd2lkdGg6ICdleHRyYS1zbWFsbCcgfCAnc21hbGwnIHwgJ21lZGl1bScgfCAnbGFyZ2UnIHwgJ2V4dHJhLWxhcmdlJyB8ICdyZXNwb25zaXZlJyA9ICdleHRyYS1zbWFsbCc7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvbm8taW5wdXQtcmVuYW1lXG4gIEBJbnB1dCgnY2xhc3MnKSBleHRlcm5hbENsYXNzZXM/OiBzdHJpbmcgfCBzdHJpbmdbXSB8IHsgW2tleTogc3RyaW5nXTogYm9vbGVhbiB9O1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L25vLW91dHB1dC1uYXRpdmVcbiAgQE91dHB1dCgpIGNsb3NlOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG4gIEBPdXRwdXQoKSBjb25maXJtOiBFdmVudEVtaXR0ZXI8dm9pZD4gPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgcHJpdmF0ZSBpc0Nsb3NpbmcgPSBmYWxzZTtcblxuICBjb25zdHJ1Y3RvcihAT3B0aW9uYWwoKSBwdWJsaWMgZGlhbG9nUmVmOiBEaWFsb2dSZWYsIHByaXZhdGUgZWxlbWVudFJlZjogRWxlbWVudFJlZikge1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGdldCBjbGFzc2VzKCk6IHsgW2tleTogc3RyaW5nXTogYm9vbGVhbiB9IHtcbiAgICBjb25zdCBjbGFzc2VzOiB7IFtrZXk6IHN0cmluZ106IGJvb2xlYW4gfSA9IHt9O1xuXG4gICAgaWYgKHRoaXMuZXh0ZXJuYWxDbGFzc2VzKSB7XG4gICAgICBpZiAodHlwZW9mIHRoaXMuZXh0ZXJuYWxDbGFzc2VzID09PSAnc3RyaW5nJykge1xuICAgICAgICB0aGlzLmV4dGVybmFsQ2xhc3Nlcy5zcGxpdCgnICcpLmZvckVhY2goKGNsczogc3RyaW5nKSA9PiB7XG4gICAgICAgICAgaWYgKGNscy50cmltKCkpIHtcbiAgICAgICAgICAgIGNsYXNzZXNbY2xzLnRyaW0oKV0gPSB0cnVlO1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICB9IGVsc2UgaWYgKEFycmF5LmlzQXJyYXkodGhpcy5leHRlcm5hbENsYXNzZXMpKSB7XG4gICAgICAgIHRoaXMuZXh0ZXJuYWxDbGFzc2VzLmZvckVhY2goKGNsczogc3RyaW5nKSA9PiB7XG4gICAgICAgICAgaWYgKGNscy50cmltKCkpIHtcbiAgICAgICAgICAgIGNsYXNzZXNbY2xzLnRyaW0oKV0gPSB0cnVlO1xuICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICBPYmplY3QuYXNzaWduKGNsYXNzZXMsIHRoaXMuZXh0ZXJuYWxDbGFzc2VzKTtcbiAgICAgIH1cbiAgICB9XG5cbiAgICByZXR1cm4gY2xhc3NlcztcbiAgfVxuXG4gIGdldCBkaWFsb2dDbGFzc2VzKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIHRoaXMuaXNDbG9zaW5nID8gJ2RpYWxvZy1jbG9zaW5nJyA6ICcnO1xuICB9XG5cbiAgaGFuZGxlQ2xvc2VCdXR0b24oKTogdm9pZCB7XG4gICAgdGhpcy5jbG9zZVdpdGhBbmltYXRpb24oKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVDb25maXJtKCk6IHZvaWQge1xuICAgIHRoaXMuZGlhbG9nUmVmLmNsb3NlKHRydWUpO1xuICAgIHRoaXMuY29uZmlybS5lbWl0KCk7XG4gIH1cblxuICBwcml2YXRlIGNsb3NlV2l0aEFuaW1hdGlvbigpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5pc0Nsb3NpbmcpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICB0aGlzLmlzQ2xvc2luZyA9IHRydWU7XG5cbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMuZGlhbG9nUmVmLmNsb3NlKCk7XG4gICAgICB0aGlzLmNsb3NlLmVtaXQoKTtcbiAgICB9LCAzMDApO1xuICB9XG59XG4iLCI8ZnctZGlhbG9nXG4gIFt3aWR0aF09XCJ3aWR0aFwiXG4gIFt0aXRsZV09XCJ0aXRsZVwiXG4gIFtpY29uXT1cImljb25cIlxuICBbaWNvbkNvbG9yXT1cImljb25Db2xvclwiXG4gIFtzaG93Q2xvc2VdPVwic2hvd0Nsb3NlXCJcbiAgW25nQ2xhc3NdPVwiZGlhbG9nQ2xhc3Nlc1wiPlxuICA8ZnctZGlhbG9nLWNvbnRlbnQ+XG4gICAgPGRpdiBjbGFzcz1cImRpYWxvZy1jb250ZW50LWNvbmZpcm1cIj5cbiAgICAgIEBpZiAoY29udGVudEljb24pIHtcbiAgICAgICAgPGZ3LWljb24gY2xhc3M9XCJjb250ZW50LWljb25cIiBbbmdDbGFzc109XCJjb25maXJtQ29sb3JcIj5cbiAgICAgICAgICB7eyBjb250ZW50SWNvbiB9fVxuICAgICAgICA8L2Z3LWljb24+XG4gICAgICB9XG5cbiAgICAgIEBpZiAoY29udGVudFRpdGxlKSB7XG4gICAgICAgIDxwIGNsYXNzPVwidmlzaW9uLXAyIGNvbnRlbnQtdGl0bGVcIj5cbiAgICAgICAgICB7eyBjb250ZW50VGl0bGUgfX1cbiAgICAgICAgPC9wPlxuICAgICAgfVxuXG4gICAgICBAaWYgKGNvbnRlbnRUZXh0KSB7XG4gICAgICAgIDxwIGNsYXNzPVwidmlzaW9uLXAyIGNvbnRlbnQtdGV4dFwiPlxuICAgICAgICAgIHt7IGNvbnRlbnRUZXh0IH19XG4gICAgICAgIDwvcD5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgPC9mdy1kaWFsb2ctY29udGVudD5cbiAgPGZ3LWRpYWxvZy1hY3Rpb25zPlxuICAgIEBpZiAoY2FuY2VsQnV0dG9uVGV4dCkge1xuICAgICAgPGZ3LWJ1dHRvblxuICAgICAgICB2YXJpYW50PVwib3V0bGluZVwiXG4gICAgICAgIFtjb2xvcl09XCJjYW5jZWxDb2xvclwiXG4gICAgICAgIChjbGljayk9XCJoYW5kbGVDbG9zZUJ1dHRvbigpXCI+XG4gICAgICAgIHt7IGNhbmNlbEJ1dHRvblRleHQgfX1cbiAgICAgIDwvZnctYnV0dG9uPlxuICAgIH1cblxuICAgIEBpZiAoY29uZmlybUJ1dHRvblRleHQpIHtcbiAgICAgIDxmdy1idXR0b25cbiAgICAgICAgdmFyaWFudD1cInNvbGlkXCJcbiAgICAgICAgW2NvbG9yXT1cImNvbmZpcm1Db2xvclwiXG4gICAgICAgIFtsZWZ0SWNvbl09XCJzaG93Q29uZmlybUJ1dHRvbkljb24gPyBjb25maXJtQnV0dG9uSWNvbiA6IG51bGxcIlxuICAgICAgICAoY2xpY2spPVwiaGFuZGxlQ29uZmlybSgpXCI+XG4gICAgICAgIHt7IGNvbmZpcm1CdXR0b25UZXh0IH19XG4gICAgICA8L2Z3LWJ1dHRvbj5cbiAgICB9XG4gIDwvZnctZGlhbG9nLWFjdGlvbnM+XG48L2Z3LWRpYWxvZz5cbiJdfQ==
|
|
@@ -3223,6 +3223,7 @@ class FwDialogConfirmComponent {
|
|
|
3223
3223
|
this.title = 'Confirm';
|
|
3224
3224
|
this.iconColor = 'primary';
|
|
3225
3225
|
this.confirmColor = 'primary';
|
|
3226
|
+
this.cancelColor = 'slate';
|
|
3226
3227
|
this.confirmButtonText = 'Confirm';
|
|
3227
3228
|
this.confirmButtonIcon = 'done-check';
|
|
3228
3229
|
this.cancelButtonText = 'Cancel';
|
|
@@ -3233,7 +3234,6 @@ class FwDialogConfirmComponent {
|
|
|
3233
3234
|
// eslint-disable-next-line @angular-eslint/no-output-native
|
|
3234
3235
|
this.close = new EventEmitter();
|
|
3235
3236
|
this.confirm = new EventEmitter();
|
|
3236
|
-
this.DialogWidth = DialogWidth;
|
|
3237
3237
|
this.isClosing = false;
|
|
3238
3238
|
}
|
|
3239
3239
|
get classes() {
|
|
@@ -3265,6 +3265,10 @@ class FwDialogConfirmComponent {
|
|
|
3265
3265
|
handleCloseButton() {
|
|
3266
3266
|
this.closeWithAnimation();
|
|
3267
3267
|
}
|
|
3268
|
+
handleConfirm() {
|
|
3269
|
+
this.dialogRef.close(true);
|
|
3270
|
+
this.confirm.emit();
|
|
3271
|
+
}
|
|
3268
3272
|
closeWithAnimation() {
|
|
3269
3273
|
if (this.isClosing) {
|
|
3270
3274
|
return;
|
|
@@ -3276,11 +3280,11 @@ class FwDialogConfirmComponent {
|
|
|
3276
3280
|
}, 300);
|
|
3277
3281
|
}
|
|
3278
3282
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, deps: [{ token: i1$3.DialogRef, optional: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
3283
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: FwDialogConfirmComponent, selector: "fw-dialog-confirm", inputs: { title: "title", icon: "icon", iconColor: "iconColor", confirmColor: "confirmColor", cancelColor: "cancelColor", confirmButtonText: "confirmButtonText", confirmButtonIcon: "confirmButtonIcon", cancelButtonText: "cancelButtonText", contentIcon: "contentIcon", contentTitle: "contentTitle", contentText: "contentText", showConfirmButtonIcon: "showConfirmButtonIcon", showClose: "showClose", width: "width", externalClasses: ["class", "externalClasses"] }, outputs: { close: "close", confirm: "confirm" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n @if (contentIcon) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\">\n {{ contentIcon }}\n </fw-icon>\n }\n\n @if (contentTitle) {\n <p class=\"vision-p2 content-title\">\n {{ contentTitle }}\n </p>\n }\n\n @if (contentText) {\n <p class=\"vision-p2 content-text\">\n {{ contentText }}\n </p>\n }\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (cancelButtonText) {\n <fw-button\n variant=\"outline\"\n [color]=\"cancelColor\"\n (click)=\"handleCloseButton()\">\n {{ cancelButtonText }}\n </fw-button>\n }\n\n @if (confirmButtonText) {\n <fw-button\n variant=\"solid\"\n [color]=\"confirmColor\"\n [leftIcon]=\"showConfirmButtonIcon ? confirmButtonIcon : null\"\n (click)=\"handleConfirm()\">\n {{ confirmButtonText }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FwButtonComponent, selector: "fw-button", inputs: ["color", "size", "variant", "type", "disabled", "fullWidth", "leftIcon", "rightIcon"] }, { kind: "component", type: FwIconComponent, selector: "fw-icon", inputs: ["size", "color"] }, { kind: "component", type: FwDialogActionsComponent, selector: "fw-dialog-actions" }, { kind: "component", type: FwDialogComponent, selector: "fw-dialog", inputs: ["width", "title", "icon", "iconColor", "showClose", "class"], outputs: ["close"] }, { kind: "component", type: FwDialogContentComponent, selector: "fw-dialog-content", inputs: ["padded"] }] }); }
|
|
3280
3284
|
}
|
|
3281
3285
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FwDialogConfirmComponent, decorators: [{
|
|
3282
3286
|
type: Component,
|
|
3283
|
-
args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\"
|
|
3287
|
+
args: [{ selector: 'fw-dialog-confirm', template: "<fw-dialog\n [width]=\"width\"\n [title]=\"title\"\n [icon]=\"icon\"\n [iconColor]=\"iconColor\"\n [showClose]=\"showClose\"\n [ngClass]=\"dialogClasses\">\n <fw-dialog-content>\n <div class=\"dialog-content-confirm\">\n @if (contentIcon) {\n <fw-icon class=\"content-icon\" [ngClass]=\"confirmColor\">\n {{ contentIcon }}\n </fw-icon>\n }\n\n @if (contentTitle) {\n <p class=\"vision-p2 content-title\">\n {{ contentTitle }}\n </p>\n }\n\n @if (contentText) {\n <p class=\"vision-p2 content-text\">\n {{ contentText }}\n </p>\n }\n </div>\n </fw-dialog-content>\n <fw-dialog-actions>\n @if (cancelButtonText) {\n <fw-button\n variant=\"outline\"\n [color]=\"cancelColor\"\n (click)=\"handleCloseButton()\">\n {{ cancelButtonText }}\n </fw-button>\n }\n\n @if (confirmButtonText) {\n <fw-button\n variant=\"solid\"\n [color]=\"confirmColor\"\n [leftIcon]=\"showConfirmButtonIcon ? confirmButtonIcon : null\"\n (click)=\"handleConfirm()\">\n {{ confirmButtonText }}\n </fw-button>\n }\n </fw-dialog-actions>\n</fw-dialog>\n", styles: ["@keyframes slide-in-from-bottom{0%{opacity:0;transform:translateY(100vh)}to{opacity:1;transform:translateY(0)}}@keyframes slide-out-to-bottom{0%{opacity:1;transform:translateY(0)}99%{opacity:0;transform:translateY(100vh)}to{opacity:0;transform:translateY(100vh)}}:host{box-sizing:border-box;animation:slide-in-from-bottom .3s ease-out}:host.dialog-closing{animation:slide-out-to-bottom .3s ease-in forwards}:host .fw-dialog-confirm{position:relative}.dialog-content-confirm{display:flex;flex-direction:column;padding:50px;align-items:center;justify-content:center}.dialog-content-confirm .content-title{margin-bottom:5px;font-weight:500}.dialog-content-confirm .content-text{margin:0;color:var(--typography-muted)}.dialog-content-confirm .content-icon{font-size:50px}.dialog-content-confirm .content-icon.primary{color:var(--primary-base)}.dialog-content-confirm .content-icon.secondary{color:var(--secondary-base)}.dialog-content-confirm .content-icon.slate{color:var(--slate-base)}.dialog-content-confirm .content-icon.success{color:var(--green-base)}.dialog-content-confirm .content-icon.warning{color:var(--orange-base)}.dialog-content-confirm .content-icon.danger{color:var(--red-base)}\n"] }]
|
|
3284
3288
|
}], ctorParameters: () => [{ type: i1$3.DialogRef, decorators: [{
|
|
3285
3289
|
type: Optional
|
|
3286
3290
|
}] }, { type: i0.ElementRef }], propDecorators: { title: [{
|
|
@@ -3291,6 +3295,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
3291
3295
|
type: Input
|
|
3292
3296
|
}], confirmColor: [{
|
|
3293
3297
|
type: Input
|
|
3298
|
+
}], cancelColor: [{
|
|
3299
|
+
type: Input
|
|
3294
3300
|
}], confirmButtonText: [{
|
|
3295
3301
|
type: Input
|
|
3296
3302
|
}], confirmButtonIcon: [{
|