myrta-ui 17.0.49 → 17.0.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/alert/alert.component.mjs +4 -5
- package/esm2022/lib/components/alert/alert.enum.mjs +13 -5
- package/esm2022/lib/components/form/input-file/input-file.component.mjs +2 -2
- package/esm2022/lib/components/form/input-file-image/components/file-image-edit-modal/file-image-edit-modal.component.mjs +1 -1
- package/esm2022/lib/components/form/input-tel/input-tel.component.mjs +2 -2
- package/esm2022/lib/components/gallery/components/gallery-confirm-modal/gallery-confirm-modal.component.mjs +1 -1
- package/esm2022/lib/components/modal/modal.component.mjs +7 -3
- package/esm2022/lib/components/modal/modal.emun.mjs +1 -1
- package/esm2022/lib/components/modal/modal.module.mjs +6 -5
- package/esm2022/lib/directives/truncate/truncate.module.mjs +1 -1
- package/esm2022/lib/services/modal-service/components/alert-modal/alert-modal.component.mjs +5 -6
- package/esm2022/lib/services/modal-service/components/confirm-modal/confirm-modal.component.mjs +5 -6
- package/fesm2022/myrta-ui.mjs +63 -52
- package/fesm2022/myrta-ui.mjs.map +1 -1
- package/lib/components/alert/alert.enum.d.ts +13 -5
- package/lib/components/modal/modal.component.d.ts +3 -2
- package/lib/components/modal/modal.emun.d.ts +6 -0
- package/lib/components/modal/modal.module.d.ts +2 -1
- package/lib/services/modal-service/components/alert-modal/alert-modal.component.d.ts +3 -2
- package/lib/services/modal-service/components/confirm-modal/confirm-modal.component.d.ts +4 -3
- package/package.json +1 -1
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
2
2
|
import { AlertColorClasses, AlertIconClasses } from './alert.enum';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
|
-
import * as i1 from "@angular/common";
|
|
5
4
|
export class AlertComponent {
|
|
6
5
|
customClasses = '';
|
|
7
|
-
color = '
|
|
6
|
+
color = 'default';
|
|
8
7
|
customColor = '';
|
|
9
8
|
message = '';
|
|
10
9
|
title = '';
|
|
@@ -20,11 +19,11 @@ export class AlertComponent {
|
|
|
20
19
|
this.close.emit(null);
|
|
21
20
|
}
|
|
22
21
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
22
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AlertComponent, selector: "mrx-alert", inputs: { customClasses: "customClasses", color: "color", customColor: "customColor", message: "message", title: "title", closable: "closable" }, outputs: { close: "close" }, ngImport: i0, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-negative,.mrx-alert.mrx-alert.mrx-alert-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-danger .mrx-icon{color:var(--system-icon-negative)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24
23
|
}
|
|
25
24
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlertComponent, decorators: [{
|
|
26
25
|
type: Component,
|
|
27
|
-
args: [{ selector: 'mrx-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n
|
|
26
|
+
args: [{ selector: 'mrx-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mrx-alert\" [class]=\"getClasses\" [style]=\"{backgroundColor: customColor}\">\r\n @if (closable) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onCloseClick()\"></span>\r\n }\r\n\r\n @if (title || message) {\r\n <span [class]=\"getIconClass\" style=\"margin-top: 1px\" class=\"mrx-icon icon-alert icon-font-16 mr-2\"></span>\r\n }\r\n\r\n @if (title) {\r\n <div class=\"mrx-alert-title mb-1\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"title\"></div>\r\n }\r\n\r\n @if (message) {\r\n <div class=\"mrx-alert-message\" [class.ml-4]=\"getIconClass\" [innerHTML]=\"message\"></div>\r\n }\r\n\r\n <ng-content></ng-content>\r\n</div>\r\n", styles: [".mrx-alert.mrx-alert{border-radius:var(--border-radius-1);padding:var(--spacing-3) var(--spacing-4);position:relative;color:var(--neutral-text-primary);font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-alert.mrx-alert .mrx-alert-title{display:flex;align-items:center;font-family:var(--body-lg-bold-font-family);font-size:var(--body-lg-bold-font-size);font-weight:var(--body-lg-bold-font-weight);line-height:var(--body-lg-bold-line-height)}.mrx-alert.mrx-alert .icon-close{position:absolute;top:calc(var(--spacing-module) * 2);right:calc(var(--spacing-module) * 2);cursor:pointer}.mrx-alert.mrx-alert .icon-alert{position:absolute;top:13px;left:16px}.mrx-alert.mrx-alert.mrx-alert-color-info{background-color:var(--brand-bg-secondary-default)}.mrx-alert.mrx-alert.mrx-alert-color-positive,.mrx-alert.mrx-alert.mrx-alert-color-success{background-color:var(--system-bg-positive-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-positive .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-color-success .mrx-icon{color:var(--system-icon-positive)}.mrx-alert.mrx-alert.mrx-alert-color-attention,.mrx-alert.mrx-alert.mrx-alert-warning{background-color:var(--system-bg-attention-secondary)}.mrx-alert.mrx-alert.mrx-alert-color-attention .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-warning .mrx-icon{color:var(--system-icon-attention)}.mrx-alert.mrx-alert.mrx-alert-negative,.mrx-alert.mrx-alert.mrx-alert-danger{background-color:var(--system-bg-negative-secondary)}.mrx-alert.mrx-alert.mrx-alert-negative .mrx-icon,.mrx-alert.mrx-alert.mrx-alert-danger .mrx-icon{color:var(--system-icon-negative)}\n"] }]
|
|
28
27
|
}], propDecorators: { customClasses: [{
|
|
29
28
|
type: Input
|
|
30
29
|
}], color: [{
|
|
@@ -40,4 +39,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
40
39
|
}], close: [{
|
|
41
40
|
type: Output
|
|
42
41
|
}] } });
|
|
43
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
42
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbXlydGEtdWkvc3JjL2xpYi9jb21wb25lbnRzL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL215cnRhLXVpL3NyYy9saWIvY29tcG9uZW50cy9hbGVydC9hbGVydC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2hHLE9BQU8sRUFBRSxpQkFBaUIsRUFBZSxnQkFBZ0IsRUFBRSxNQUFNLGNBQWMsQ0FBQzs7QUFRaEYsTUFBTSxPQUFPLGNBQWM7SUFDaEIsYUFBYSxHQUFXLEVBQUUsQ0FBQztJQUMzQixLQUFLLEdBQWdCLFNBQVMsQ0FBQztJQUMvQixXQUFXLEdBQVcsRUFBRSxDQUFDO0lBQ3pCLE9BQU8sR0FBRyxFQUFFLENBQUM7SUFDYixLQUFLLEdBQUcsRUFBRSxDQUFDO0lBQ1gsUUFBUSxHQUFHLEtBQUssQ0FBQztJQUNoQixLQUFLLEdBQTBCLElBQUksWUFBWSxFQUFFLENBQUM7SUFFNUQsSUFBVyxVQUFVO1FBQ25CLE9BQU8sR0FBRyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUUsQ0FBQztJQUN4RSxDQUFDO0lBRUQsSUFBVyxZQUFZO1FBQ3JCLE9BQU8sR0FBRyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQztJQUMzQyxDQUFDO0lBRU0sWUFBWTtRQUNqQixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN4QixDQUFDO3dHQW5CVSxjQUFjOzRGQUFkLGNBQWMsZ09DVDNCLGdyQkFtQkE7OzRGRFZhLGNBQWM7a0JBTjFCLFNBQVM7K0JBQ0UsV0FBVyxtQkFHSix1QkFBdUIsQ0FBQyxNQUFNOzhCQUd0QyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDSSxLQUFLO3NCQUFkLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQWxlcnRDb2xvckNsYXNzZXMsIEFsZXJ0Q29sb3JzLCBBbGVydEljb25DbGFzc2VzIH0gZnJvbSAnLi9hbGVydC5lbnVtJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbXJ4LWFsZXJ0JyxcclxuICB0ZW1wbGF0ZVVybDogJ2FsZXJ0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9hbGVydC5jb21wb25lbnQubGVzcyddLFxyXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQWxlcnRDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGN1c3RvbUNsYXNzZXM6IHN0cmluZyA9ICcnO1xyXG4gIEBJbnB1dCgpIGNvbG9yOiBBbGVydENvbG9ycyA9ICdkZWZhdWx0JztcclxuICBASW5wdXQoKSBjdXN0b21Db2xvcjogc3RyaW5nID0gJyc7XHJcbiAgQElucHV0KCkgbWVzc2FnZSA9ICcnO1xyXG4gIEBJbnB1dCgpIHRpdGxlID0gJyc7XHJcbiAgQElucHV0KCkgY2xvc2FibGUgPSBmYWxzZTtcclxuICBAT3V0cHV0KCkgY2xvc2U6IEV2ZW50RW1pdHRlcjx1bmtub3duPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcclxuXHJcbiAgcHVibGljIGdldCBnZXRDbGFzc2VzKCkge1xyXG4gICAgcmV0dXJuIGAke0FsZXJ0Q29sb3JDbGFzc2VzW3RoaXMuY29sb3JdID8/ICcnfSAke3RoaXMuY3VzdG9tQ2xhc3Nlc31gO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIGdldCBnZXRJY29uQ2xhc3MoKSB7XHJcbiAgICByZXR1cm4gYCR7QWxlcnRJY29uQ2xhc3Nlc1t0aGlzLmNvbG9yXX1gO1xyXG4gIH1cclxuXHJcbiAgcHVibGljIG9uQ2xvc2VDbGljaygpOiB2b2lkIHtcclxuICAgIHRoaXMuY2xvc2UuZW1pdChudWxsKTtcclxuICB9XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cIm1yeC1hbGVydFwiIFtjbGFzc109XCJnZXRDbGFzc2VzXCIgW3N0eWxlXT1cIntiYWNrZ3JvdW5kQ29sb3I6IGN1c3RvbUNvbG9yfVwiPlxyXG4gIEBpZiAoY2xvc2FibGUpIHtcclxuICAgIDxzcGFuIGNsYXNzPVwibXJ4LWljb24gaWNvbi1jbG9zZSBpY29uLWZvbnQtMTZcIiAoY2xpY2spPVwib25DbG9zZUNsaWNrKClcIj48L3NwYW4+XHJcbiAgfVxyXG5cclxuICBAaWYgKHRpdGxlIHx8IG1lc3NhZ2UpIHtcclxuICAgIDxzcGFuIFtjbGFzc109XCJnZXRJY29uQ2xhc3NcIiBzdHlsZT1cIm1hcmdpbi10b3A6IDFweFwiIGNsYXNzPVwibXJ4LWljb24gaWNvbi1hbGVydCBpY29uLWZvbnQtMTYgbXItMlwiPjwvc3Bhbj5cclxuICB9XHJcblxyXG4gIEBpZiAodGl0bGUpIHtcclxuICAgIDxkaXYgY2xhc3M9XCJtcngtYWxlcnQtdGl0bGUgbWItMVwiIFtjbGFzcy5tbC00XT1cImdldEljb25DbGFzc1wiIFtpbm5lckhUTUxdPVwidGl0bGVcIj48L2Rpdj5cclxuICB9XHJcblxyXG4gIEBpZiAobWVzc2FnZSkge1xyXG4gICAgPGRpdiBjbGFzcz1cIm1yeC1hbGVydC1tZXNzYWdlXCIgW2NsYXNzLm1sLTRdPVwiZ2V0SWNvbkNsYXNzXCIgW2lubmVySFRNTF09XCJtZXNzYWdlXCI+PC9kaXY+XHJcbiAgfVxyXG5cclxuICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XHJcbjwvZGl2PlxyXG4iXX0=
|
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
export var AlertColorClasses;
|
|
2
2
|
(function (AlertColorClasses) {
|
|
3
|
-
AlertColorClasses["
|
|
4
|
-
AlertColorClasses["
|
|
5
|
-
AlertColorClasses["
|
|
6
|
-
AlertColorClasses["
|
|
3
|
+
AlertColorClasses["default"] = "mrx-alert-color-info";
|
|
4
|
+
AlertColorClasses["info"] = "mrx-alert-color-info";
|
|
5
|
+
AlertColorClasses["positive"] = "mrx-alert-color-positive";
|
|
6
|
+
AlertColorClasses["attention"] = "mrx-alert-color-attention";
|
|
7
|
+
AlertColorClasses["negative"] = "mrx-alert-color-negative";
|
|
8
|
+
AlertColorClasses["success"] = "mrx-alert-color-success";
|
|
9
|
+
AlertColorClasses["warning"] = "mrx-alert-color-warning";
|
|
10
|
+
AlertColorClasses["danger"] = "mrx-alert-color-danger";
|
|
7
11
|
})(AlertColorClasses || (AlertColorClasses = {}));
|
|
8
12
|
export var AlertIconClasses;
|
|
9
13
|
(function (AlertIconClasses) {
|
|
14
|
+
AlertIconClasses["default"] = "icon-info";
|
|
10
15
|
AlertIconClasses["info"] = "icon-info";
|
|
16
|
+
AlertIconClasses["positive"] = "icon-check-task";
|
|
17
|
+
AlertIconClasses["attention"] = "icon-attention";
|
|
18
|
+
AlertIconClasses["negative"] = "icon-attention";
|
|
11
19
|
AlertIconClasses["success"] = "icon-check-task";
|
|
12
20
|
AlertIconClasses["warning"] = "icon-attention";
|
|
13
21
|
AlertIconClasses["danger"] = "icon-attention";
|
|
14
22
|
})(AlertIconClasses || (AlertIconClasses = {}));
|
|
15
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
23
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL215cnRhLXVpL3NyYy9saWIvY29tcG9uZW50cy9hbGVydC9hbGVydC5lbnVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUdBLE1BQU0sQ0FBTixJQUFZLGlCQVNYO0FBVEQsV0FBWSxpQkFBaUI7SUFDM0IscURBQWtDLENBQUE7SUFDbEMsa0RBQStCLENBQUE7SUFDL0IsMERBQXVDLENBQUE7SUFDdkMsNERBQXlDLENBQUE7SUFDekMsMERBQXVDLENBQUE7SUFDdkMsd0RBQXFDLENBQUE7SUFDckMsd0RBQXFDLENBQUE7SUFDckMsc0RBQW1DLENBQUE7QUFDckMsQ0FBQyxFQVRXLGlCQUFpQixLQUFqQixpQkFBaUIsUUFTNUI7QUFFRCxNQUFNLENBQU4sSUFBWSxnQkFTWDtBQVRELFdBQVksZ0JBQWdCO0lBQzFCLHlDQUF1QixDQUFBO0lBQ3ZCLHNDQUFvQixDQUFBO0lBQ3BCLGdEQUE4QixDQUFBO0lBQzlCLGdEQUE4QixDQUFBO0lBQzlCLCtDQUE2QixDQUFBO0lBQzdCLCtDQUE2QixDQUFBO0lBQzdCLDhDQUE0QixDQUFBO0lBQzVCLDZDQUEyQixDQUFBO0FBQzdCLENBQUMsRUFUVyxnQkFBZ0IsS0FBaEIsZ0JBQWdCLFFBUzNCIiwic291cmNlc0NvbnRlbnQiOlsiLy8gVE9ETyDQv9C+0YHRgtC10L/QtdC90L3QviDQstGL0YDQtdC30LDRgtGMINGC0LjQv9GLICdkYW5nZXInIHwgJ3dhcm5pbmcnIHwgJ3N1Y2Nlc3MnXHJcbmV4cG9ydCB0eXBlIEFsZXJ0Q29sb3JzID0gJ2RlZmF1bHQnIHwgJ2luZm8nIHwgJ2F0dGVudGlvbicgfCAncG9zaXRpdmUnIHwgJ25lZ2F0aXZlJyB8ICdkYW5nZXInIHwgJ3dhcm5pbmcnIHwgJ3N1Y2Nlc3MnO1xyXG5cclxuZXhwb3J0IGVudW0gQWxlcnRDb2xvckNsYXNzZXMge1xyXG4gICdkZWZhdWx0JyA9ICdtcngtYWxlcnQtY29sb3ItaW5mbycsXHJcbiAgJ2luZm8nID0gJ21yeC1hbGVydC1jb2xvci1pbmZvJyxcclxuICAncG9zaXRpdmUnID0gJ21yeC1hbGVydC1jb2xvci1wb3NpdGl2ZScsXHJcbiAgJ2F0dGVudGlvbicgPSAnbXJ4LWFsZXJ0LWNvbG9yLWF0dGVudGlvbicsXHJcbiAgJ25lZ2F0aXZlJyA9ICdtcngtYWxlcnQtY29sb3ItbmVnYXRpdmUnLFxyXG4gICdzdWNjZXNzJyA9ICdtcngtYWxlcnQtY29sb3Itc3VjY2VzcycsXHJcbiAgJ3dhcm5pbmcnID0gJ21yeC1hbGVydC1jb2xvci13YXJuaW5nJyxcclxuICAnZGFuZ2VyJyA9ICdtcngtYWxlcnQtY29sb3ItZGFuZ2VyJyxcclxufVxyXG5cclxuZXhwb3J0IGVudW0gQWxlcnRJY29uQ2xhc3NlcyB7XHJcbiAgJ2RlZmF1bHQnID0gJ2ljb24taW5mbycsXHJcbiAgJ2luZm8nID0gJ2ljb24taW5mbycsXHJcbiAgJ3Bvc2l0aXZlJyA9ICdpY29uLWNoZWNrLXRhc2snLFxyXG4gICdhdHRlbnRpb24nID0gJ2ljb24tYXR0ZW50aW9uJyxcclxuICAnbmVnYXRpdmUnID0gJ2ljb24tYXR0ZW50aW9uJyxcclxuICAnc3VjY2VzcycgPSAnaWNvbi1jaGVjay10YXNrJyxcclxuICAnd2FybmluZycgPSAnaWNvbi1hdHRlbnRpb24nLFxyXG4gICdkYW5nZXInID0gJ2ljb24tYXR0ZW50aW9uJyxcclxufVxyXG4iXX0=
|
|
@@ -281,11 +281,11 @@ export class InputFileComponent {
|
|
|
281
281
|
return true;
|
|
282
282
|
}
|
|
283
283
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, deps: [{ token: i1.FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
|
|
284
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n class=\"ng-form-file-input\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n <div *ngIf=\"!files || files.length == 0\"\r\n class=\"col-sm-12 col-md-6\"\r\n >\r\n <div class=\"d-flex align-items-center color-tertiary\">\r\n <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n >\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <a\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [target]=\"getTarget\"\r\n [href]=\"downloadUrl(file)\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </div>\r\n\r\n <ng-template #notDisabled>\r\n <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n\r\n <ngx-file-drop\r\n *ngIf=\"canAdd\"\r\n [className]=\"'ng-custom-file-input'\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"lightDisabled\"\r\n [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n (onFileDrop)=\"dropped($event)\"\r\n >\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n {{placeholder}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--size\">\r\n {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n {{placeholderFileFormat}} {{extensions}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n [ngClass]=\"{'file-error': file.error}\"\r\n [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n [tooltipPosition]=\"'top-start'\"\r\n >\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <span\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n {{formatBytes(file.length)}}\r\n </span>\r\n <span\r\n *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n (click)=\"delete($event, file)\"\r\n class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n ></span>\r\n\r\n <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n <span class=\"color-negative\">{{file.error}}</span>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n ></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
|
|
284
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputFileComponent, selector: "mrx-input-file", inputs: { autoUpload: "autoUpload", required: "required", disabled: "disabled", viewOnly: "viewOnly", lightDisabled: "lightDisabled", bottomFiles: "bottomFiles", maxSize: "maxSize", maxFiles: "maxFiles", minFiles: "minFiles", formData: "formData", uploadEndPoint: "uploadEndPoint", deleteEndPoint: "deleteEndPoint", downloadEndPoint: "downloadEndPoint", fileNamePlaceholder: "fileNamePlaceholder", showInputWithError: "showInputWithError", showDeleteButton: "showDeleteButton", isTooltipValue: "isTooltipValue", isDownloadingFile: "isDownloadingFile", isHideListFiles: "isHideListFiles", target: "target", deleteConfirm: "deleteConfirm", innerTemplate: "innerTemplate", uploadAdditionalData: "uploadAdditionalData", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", messageTooManyFiles: "messageTooManyFiles", messageFileTooBig: "messageFileTooBig", messageEmptyFile: "messageEmptyFile", messageInvalidFileFormat: "messageInvalidFileFormat", placeholder: "placeholder", placeholderFileMaxSize: "placeholderFileMaxSize", placeholderFileFormat: "placeholderFileFormat", initFiles: ["files", "initFiles"], initAllowedExtensions: ["allowedExtensions", "initAllowedExtensions"] }, outputs: { filesChanged: "filesChanged", checkDroppedFile: "checkDroppedFile" }, ngImport: i0, template: "<div\r\n class=\"ng-form-file-input\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n <div *ngIf=\"!files || files.length == 0\"\r\n class=\"col-sm-12 col-md-6\"\r\n >\r\n <div class=\"d-flex align-items-center color-tertiary\">\r\n <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n >\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <a\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [target]=\"getTarget\"\r\n [href]=\"downloadUrl(file)\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </div>\r\n\r\n <ng-template #notDisabled>\r\n <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n\r\n <ngx-file-drop\r\n *ngIf=\"canAdd\"\r\n [className]=\"'ng-custom-file-input'\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"lightDisabled\"\r\n [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n (onFileDrop)=\"dropped($event)\"\r\n >\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n {{placeholder}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--size\">\r\n {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n {{placeholderFileFormat}} {{extensions}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n [ngClass]=\"{'file-error': file.error}\"\r\n [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n [tooltipPosition]=\"'top-start'\"\r\n >\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <span\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n {{formatBytes(file.length)}}\r\n </span>\r\n <span\r\n *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n (click)=\"delete($event, file)\"\r\n class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n ></span>\r\n\r\n <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n <span class=\"color-negative\">{{file.error}}</span>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n ></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { kind: "directive", type: i3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { kind: "component", type: i4.ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "directive", type: i5.CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }] });
|
|
285
285
|
}
|
|
286
286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputFileComponent, decorators: [{
|
|
287
287
|
type: Component,
|
|
288
|
-
args: [{ selector: 'mrx-input-file', template: "<div\r\n class=\"ng-form-file-input\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n <div *ngIf=\"!files || files.length == 0\"\r\n class=\"col-sm-12 col-md-6\"\r\n >\r\n <div class=\"d-flex align-items-center color-tertiary\">\r\n <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n >\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <a\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [target]=\"getTarget\"\r\n [href]=\"downloadUrl(file)\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </div>\r\n\r\n <ng-template #notDisabled>\r\n <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n\r\n <ngx-file-drop\r\n *ngIf=\"canAdd\"\r\n [className]=\"'ng-custom-file-input'\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"lightDisabled\"\r\n [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n (onFileDrop)=\"dropped($event)\"\r\n >\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n {{placeholder}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--size\">\r\n {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n {{placeholderFileFormat}} {{extensions}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n [ngClass]=\"{'file-error': file.error}\"\r\n [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n [tooltipPosition]=\"'top-start'\"\r\n >\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <span\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n {{formatBytes(file.length)}}\r\n </span>\r\n <span\r\n *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n (click)=\"delete($event, file)\"\r\n class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n ></span>\r\n\r\n <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n <span class=\"color-negative\">{{file.error}}</span>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n ></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"] }]
|
|
288
|
+
args: [{ selector: 'mrx-input-file', template: "<div\r\n class=\"ng-form-file-input\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\">\r\n <div class=\"form-row\" *ngIf=\"disabled; else notDisabled\">\r\n <div *ngIf=\"!files || files.length == 0\"\r\n class=\"col-sm-12 col-md-6\"\r\n >\r\n <div class=\"d-flex align-items-center color-tertiary\">\r\n <div class=\"mrx-icon icon-file icon-font-24 mr-2\"></div>\r\n <span>\u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-12\">\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n >\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <a\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [target]=\"getTarget\"\r\n [href]=\"downloadUrl(file)\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</a>\r\n </div>\r\n <div class=\"info\">\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">{{formatBytes(file.length)}}</span>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n </div>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </div>\r\n\r\n <ng-template #notDisabled>\r\n <ng-container *ngIf=\"!bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n\r\n <ngx-file-drop\r\n *ngIf=\"canAdd\"\r\n [className]=\"'ng-custom-file-input'\"\r\n [accept]=\"extensions || ''\"\r\n [disabled]=\"lightDisabled\"\r\n [ngClass]=\"{'ng-custom-file-input--disabled': lightDisabled}\"\r\n (onFileDrop)=\"dropped($event)\"\r\n >\r\n <ng-template ngx-file-drop-content-tmp let-openFileSelector=\"openFileSelector\">\r\n <div\r\n class=\"ng-custom-file-input-content\"\r\n (click)=\"!lightDisabled ? openFileSelector() : undefined\"\r\n >\r\n <div class=\"text-center\">\r\n <div class=\"ng-custom-file-input-content--placeholder mb-2\">\r\n {{placeholder}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--size\">\r\n {{placeholderFileMaxSize}} {{formatBytes(maxSize)}}\r\n </div>\r\n <div class=\"ng-custom-file-input-content--extensions\" *ngIf=\"extensions\">\r\n {{placeholderFileFormat}} {{extensions}}\r\n </div>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ngx-file-drop>\r\n\r\n <ng-container *ngIf=\"bottomFiles && !isHideListFiles\">\r\n <ng-container *ngTemplateOutlet=\"fileListTemplate\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"innerTemplate; context:{}\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n</div>\r\n\r\n<mrx-error-message\r\n *ngIf=\"(!isValid || invalid) && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n></mrx-error-message>\r\n\r\n<ng-template #fileListTemplate>\r\n <ul class=\"new-custom-file-input\" *ngIf=\"files.length\">\r\n <li\r\n class=\"new-custom-file-input__item\"\r\n *ngFor=\"let file of files; trackBy: trackByFn\"\r\n [ngClass]=\"{'file-error': file.error}\"\r\n [mrxCdkTooltip]=\"getTooltipValue(fileNamePlaceholder ? fileNamePlaceholder : file.name || '')\"\r\n [tooltipPosition]=\"'top-start'\"\r\n >\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.id && isDownloadingFile\"></a>\r\n\r\n <div class=\"qq-file-info\">\r\n <div class=\"d-flex align-items-center\">\r\n <span class=\"mrx-icon icon-file icon-font-24 mr-2\"></span>\r\n <span\r\n class=\"qq-upload-file-selector qq-upload-file\"\r\n [title]=\"fileNamePlaceholder ? fileNamePlaceholder : file.name\"\r\n >{{fileNamePlaceholder ? fileNamePlaceholder : file.name}}</span>\r\n </div>\r\n <div class=\"info\">\r\n <div class=\"ng-custom-file-input_progress\" *ngIf=\"file.uploading\">\r\n <span [ngStyle]=\"{width: file.percentage + '%'}\"></span>\r\n </div>\r\n\r\n <span class=\"qq-upload-size-selector qq-upload-size\" *ngIf=\"!file.error\">\r\n {{formatBytes(file.length)}}\r\n </span>\r\n <span\r\n *ngIf=\"!disabled && showDeleteButton && !viewOnly && !file.error\"\r\n (click)=\"delete($event, file)\"\r\n class=\"mrx-icon icon-delete icon-font-24 cursor-pointer\"\r\n aria-label=\"\u0423\u0434\u0430\u043B\u0438\u0442\u044C\"\r\n ></span>\r\n\r\n <div class=\"ng-custom-file-input-error\" *ngIf=\"file.error\">\r\n <span class=\"mrx-icon icon-attention icon-color-red icon-font-16 mr-1\"></span>\r\n <span class=\"color-negative\">{{file.error}}</span>\r\n </div>\r\n\r\n <div\r\n class=\"mrx-icon icon-close icon-font-24 cursor-pointer ml-2\"\r\n *ngIf=\"(file.error && !file.id) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n ></div>\r\n </div>\r\n </div>\r\n </li>\r\n </ul>\r\n</ng-template>\r\n", styles: ["mrx-input-file .new-custom-file-input__item .qq-upload-size-selector{color:var(--neutral-text-tertiary, #71767E)!important}:host::ng-deep .ng-form-file-input{display:flex;flex-direction:column;gap:12px}:host::ng-deep .ng-form-file-input .color-tertiary,:host::ng-deep .ng-form-file-input .color-tertiary *{color:var(--neutral-text-tertiary, #71767E)}.ng-custom-file-input-content{width:100%;height:100%;padding:var(--spacing-4);color:var(--neutral-text-secondary, #636363);cursor:pointer}.ng-custom-file-input-content--placeholder{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363)}.ng-custom-file-input-content--size,.ng-custom-file-input-content--extensions{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height);color:var(--neutral-text-secondary, #636363)}.new-custom-file-input{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}.new-custom-file-input__item{border:1px solid var(--neutral-bg-stroke-default, #DAD5CE);border-radius:var(--border-radius-1);padding:var(--spacing-3);background-color:var(--brand-bg-tertiary-default, #FFF);position:relative}.new-custom-file-input__item:hover .qq-upload-file-selector{color:var(--brand-text-nav-link)!important}.new-custom-file-input__item .qq-download-link{position:absolute;inset:0;border-radius:var(--border-radius-1)}.new-custom-file-input__item .qq-file-info{display:flex;justify-content:space-between;align-items:center}.new-custom-file-input__item .qq-file-info .info{display:flex;align-items:center}.new-custom-file-input__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--neutral-text-primary);transition:color .3s}.new-custom-file-input__item .qq-file-info .qq-upload-size-selector{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);color:var(--neutral-text-secondary, #636363);padding-left:var(--spacing-2);margin-right:var(--spacing-2);white-space:nowrap}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone{background:var(--brand-bg-tertiary-default, #FFF);border-radius:var(--border-radius-1)!important;border:none;background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-default, #DAD5CE),var(--neutral-bg-stroke-default, #DAD5CE) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-default, #DAD5CE) 10px);background-size:1px 100%,100% 1px,1px 100%,100% 1px;background-position:0 0,0 0,100% 0,0 100%;background-repeat:no-repeat}:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:hover,:host::ng-deep .ng-form-file-input .ng-custom-file-input .ngx-file-drop__drop-zone:focus{background-image:repeating-linear-gradient(0deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(90deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(180deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px),repeating-linear-gradient(270deg,var(--neutral-bg-stroke-hover, #BCB5AC),var(--neutral-bg-stroke-hover, #BCB5AC) 6px,transparent 6px,transparent 10px,var(--neutral-bg-stroke-hover, #BCB5AC) 10px)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone{background-color:var(--neutral-bg-disabled, #F4F4F4)}:host::ng-deep .ng-form-file-input .ng-custom-file-input.ng-custom-file-input--disabled .ngx-file-drop__drop-zone .ng-custom-file-input-content{cursor:default}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default, #B83B15)}::ng-deep .ng-custom-file-input-error{display:flex;align-items:center;white-space:nowrap;font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}::ng-deep .ng-form-file-input.mrx-input-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-negative-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-negative-default, #B83B15),var(--system-bg-controls-negative-default, #B83B15) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-negative-default, #B83B15) 10px)!important}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{background-color:var(--system-bg-positive-secondary);background-image:repeating-linear-gradient(0deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(90deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(180deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px),repeating-linear-gradient(270deg,var(--system-bg-controls-positive-default, #108E3A),var(--system-bg-controls-positive-default, #108E3A) 6px,transparent 6px,transparent 10px,var(--system-bg-controls-positive-default, #108E3A) 10px)!important}\n"] }]
|
|
289
289
|
}], ctorParameters: () => [{ type: i1.FileUploadService }], propDecorators: { autoUpload: [{
|
|
290
290
|
type: Input
|
|
291
291
|
}], required: [{
|
|
@@ -77,7 +77,7 @@ export class FileImageEditModalComponent extends ModalServiceComponent {
|
|
|
77
77
|
this.dialogRef.close(this.result);
|
|
78
78
|
}
|
|
79
79
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileImageEditModalComponent, deps: [{ token: i1.ModalRef }, { token: MODAL_DATA }], target: i0.ɵɵFactoryTarget.Component });
|
|
80
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileImageEditModalComponent, selector: "mrx-file-image-edit-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n [size]=\"'medium'\"\r\n (close)=\"close()\"\r\n>\r\n <div class=\"row\">\r\n <div class=\"col col-12\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n </div>\r\n\r\n <div class=\"col col-12\">\r\n <div class=\"mrx-input-image-cropper__wrapper\">\r\n <image-cropper\r\n format=\"png\"\r\n output=\"base64\"\r\n [alignImage]=\"'center'\"\r\n [imageFile]=\"fileImage\"\r\n [maintainAspectRatio]=\"maintainAspectRatio\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [backgroundColor]=\"'#000000'\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [transform]=\"transform\"\r\n [cropperMaxWidth]=\"cropperMaxWidth\"\r\n [cropperMaxHeight]=\"cropperMaxHeight\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded($event)\"\r\n (cropperReady)=\"cropperReady()\"\r\n ></image-cropper>\r\n\r\n <div class=\"mrx-input-image-cropper__controls\">\r\n <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n\r\n <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"close()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"ok()\"\r\n >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"], dependencies: [{ kind: "component", type: i2.ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "component", type: i3.ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] });
|
|
80
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FileImageEditModalComponent, selector: "mrx-file-image-edit-modal", usesInheritance: true, ngImport: i0, template: "<mrx-modal\r\n [title]=\"title\"\r\n [size]=\"'medium'\"\r\n (close)=\"close()\"\r\n>\r\n <div class=\"row\">\r\n <div class=\"col col-12\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043D\u0430\u044F \u043E\u0431\u043B\u0430\u0441\u0442\u044C \u0431\u0443\u0434\u0435\u0442 \u043F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C\u0441\u044F \u043D\u0430 \u043E\u0431\u043B\u043E\u0436\u043A\u0435 \u0441\u0442\u0440\u0430\u043D\u0438\u0446\u044B</p>\r\n </div>\r\n\r\n <div class=\"col col-12\">\r\n <div class=\"mrx-input-image-cropper__wrapper\">\r\n <image-cropper\r\n format=\"png\"\r\n output=\"base64\"\r\n [alignImage]=\"'center'\"\r\n [imageFile]=\"fileImage\"\r\n [maintainAspectRatio]=\"maintainAspectRatio\"\r\n [aspectRatio]=\"aspectRatio\"\r\n [backgroundColor]=\"'#000000'\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [transform]=\"transform\"\r\n [cropperMaxWidth]=\"cropperMaxWidth\"\r\n [cropperMaxHeight]=\"cropperMaxHeight\"\r\n (loadImageFailed)=\"loadImageFailed()\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded($event)\"\r\n (cropperReady)=\"cropperReady()\"\r\n ></image-cropper>\r\n\r\n <div class=\"mrx-input-image-cropper__controls\">\r\n <svg (click)=\"rotateLeft()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"2\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.5 18.5C5.05228 18.5 5.5 18.0523 5.5 17.5C5.5 16.9477 5.05228 16.5 4.5 16.5C3.94772 16.5 3.5 16.9477 3.5 17.5C3.5 18.0523 3.94772 18.5 4.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M9.99978 20.3333L7.77756 18.1111L2.88867 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M13.1575 21.6842C18.5932 21.6842 22.9996 17.2777 22.9996 11.8421C22.9996 6.40646 18.5932 2 13.1575 2C7.72189 2 3.31543 6.40646 3.31543 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M1.00026 10.1052L3.31605 12.421L5.63184 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n\r\n <svg (click)=\"rotateRight()\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"14\" y=\"15\" width=\"8\" height=\"8\" rx=\"0.888889\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.5 18.5C17.0523 18.5 17.5 18.0523 17.5 17.5C17.5 16.9477 17.0523 16.5 16.5 16.5C15.9477 16.5 15.5 16.9477 15.5 17.5C15.5 18.0523 15.9477 18.5 16.5 18.5Z\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M21.9998 20.3333L19.7776 18.1111L14.8887 23\" stroke=\"white\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n <path d=\"M10.8425 21.6842C5.40682 21.6842 1.00036 17.2777 1.00036 11.8421C1.00036 6.40646 5.40682 2 10.8425 2C16.2781 2 20.6846 6.40646 20.6846 11.8421\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\r\n <path d=\"M22.9997 10.1052L20.684 12.421L18.3682 10.1052\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <ng-template #footerContent>\r\n <mrx-button\r\n [customClasses]=\"'mr-3'\"\r\n [type]=\"'secondary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"close()\"\r\n >\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C\r\n </mrx-button>\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n (click)=\"ok()\"\r\n >\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C\r\n </mrx-button>\r\n </ng-template>\r\n</mrx-modal>\r\n\r\n\r\n", styles: [":host::ng-deep .mrx-input-image-cropper__wrapper{position:relative}:host::ng-deep .mrx-input-image-cropper__controls{padding:8px;background:#1f222680;border-radius:4px;position:absolute;left:50%;bottom:24px;transform:translate(-50%)}:host::ng-deep .mrx-input-image-cropper__controls svg{cursor:pointer}:host::ng-deep .mrx-input-image-cropper__controls svg:not(:last-child){margin-right:16px}\n"], dependencies: [{ kind: "component", type: i2.ModalComponent, selector: "mrx-modal", inputs: ["title", "message", "alert", "okText", "closeText", "size", "color", "customClasses", "expandable", "isEmbed", "isClose", "isBack", "backText", "enableFooter", "alignButtons", "isLoading", "iconPosition"], outputs: ["ok", "close", "back"] }, { kind: "component", type: i3.ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType"], outputs: ["mrxClick"] }, { kind: "component", type: i4.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }] });
|
|
81
81
|
}
|
|
82
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FileImageEditModalComponent, decorators: [{
|
|
83
83
|
type: Component,
|