myrta-ui 1.0.21 → 1.0.23
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/esm2020/lib/components/form/input-datepicker/input-datepicker.component.mjs +8 -5
- package/esm2020/lib/components/form/input-file/input-file.component.mjs +6 -2
- package/fesm2015/myrta-ui.mjs +12 -5
- package/fesm2015/myrta-ui.mjs.map +1 -1
- package/fesm2020/myrta-ui.mjs +12 -5
- package/fesm2020/myrta-ui.mjs.map +1 -1
- package/lib/components/form/input-datepicker/input-datepicker.component.d.ts +2 -1
- package/lib/components/form/input-file/input-file.component.d.ts +2 -1
- package/package.json +1 -1
package/fesm2015/myrta-ui.mjs
CHANGED
|
@@ -8433,7 +8433,8 @@ class InputDatepickerComponent {
|
|
|
8433
8433
|
this.customClasses = '';
|
|
8434
8434
|
this.dateLabel = '';
|
|
8435
8435
|
this.timeLabel = '';
|
|
8436
|
-
this.datePlaceholder = 'дд.мм.гггг';
|
|
8436
|
+
this.datePlaceholder = 'дд.мм.гггг'; // deprecated
|
|
8437
|
+
this.placeholder = 'дд.мм.гггг';
|
|
8437
8438
|
this.disabled = false;
|
|
8438
8439
|
this.readonly = false;
|
|
8439
8440
|
this.required = false;
|
|
@@ -8681,14 +8682,14 @@ class InputDatepickerComponent {
|
|
|
8681
8682
|
}
|
|
8682
8683
|
}
|
|
8683
8684
|
InputDatepickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8684
|
-
InputDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: { fields: "fields", size: "size", format: "format", locale: "locale", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", minDate: "minDate", maxDate: "maxDate", inline: "inline", closable: "closable", leadZeroDateTime: "leadZeroDateTime", mask: "mask", container: "container", validationType: "validationType", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", isShowMessages: "isShowMessages" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
|
|
8685
|
+
InputDatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputDatepickerComponent, selector: "mrx-input-datepicker", inputs: { fields: "fields", size: "size", format: "format", locale: "locale", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", minDate: "minDate", maxDate: "maxDate", inline: "inline", closable: "closable", leadZeroDateTime: "leadZeroDateTime", mask: "mask", container: "container", validationType: "validationType", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", isShowMessages: "isShowMessages" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
|
|
8685
8686
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }
|
|
8686
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"
|
|
8687
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"placeholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"mask\"\r\n [leadZeroDateTime]=\"leadZeroDateTime\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled || readonly\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon && !(disabled || readonly)\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-input-date.mrx-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-input-date.mrx-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}.mrx-input-date.mrx-input-date.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-date.mrx-input-date.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"], components: [{ type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeCheckboxValue", "clickedLink"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }, { type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$7.MaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "triggerOnMaskChange"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
8687
8688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDatepickerComponent, decorators: [{
|
|
8688
8689
|
type: Component,
|
|
8689
8690
|
args: [{ selector: 'mrx-input-datepicker', providers: [
|
|
8690
8691
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDatepickerComponent), multi: true }
|
|
8691
|
-
], template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"
|
|
8692
|
+
], template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"placeholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"mask\"\r\n [leadZeroDateTime]=\"leadZeroDateTime\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled || readonly\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon && !(disabled || readonly)\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date.mrx-input-date{width:100%;position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-input-date.mrx-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-input-date.mrx-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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)}.mrx-input-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}.mrx-input-date.mrx-input-date.-disabled input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}.mrx-input-date.mrx-input-date.-readonly input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626)}\n"] }]
|
|
8692
8693
|
}], ctorParameters: function () { return []; }, propDecorators: { fields: [{
|
|
8693
8694
|
type: Input
|
|
8694
8695
|
}], size: [{
|
|
@@ -8705,6 +8706,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
8705
8706
|
type: Input
|
|
8706
8707
|
}], datePlaceholder: [{
|
|
8707
8708
|
type: Input
|
|
8709
|
+
}], placeholder: [{
|
|
8710
|
+
type: Input
|
|
8708
8711
|
}], disabled: [{
|
|
8709
8712
|
type: Input
|
|
8710
8713
|
}], readonly: [{
|
|
@@ -10354,6 +10357,7 @@ class InputFileComponent {
|
|
|
10354
10357
|
this.placeholderFileMaxSize = 'Размер файла: не больше';
|
|
10355
10358
|
this.placeholderFileFormat = 'Формат файла:';
|
|
10356
10359
|
this.filesChanged = new EventEmitter();
|
|
10360
|
+
this.checkDroppedFile = new EventEmitter();
|
|
10357
10361
|
}
|
|
10358
10362
|
set initFiles(data) {
|
|
10359
10363
|
if (data) {
|
|
@@ -10555,6 +10559,7 @@ class InputFileComponent {
|
|
|
10555
10559
|
}
|
|
10556
10560
|
}
|
|
10557
10561
|
checkForUpload(data) {
|
|
10562
|
+
this.checkDroppedFile.emit(data);
|
|
10558
10563
|
if (!this.canAdd) {
|
|
10559
10564
|
data.error = this.messageTooManyFiles;
|
|
10560
10565
|
data.uploading = false;
|
|
@@ -10581,7 +10586,7 @@ class InputFileComponent {
|
|
|
10581
10586
|
}
|
|
10582
10587
|
}
|
|
10583
10588
|
InputFileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileComponent, deps: [{ token: FileUploadService }], target: i0.ɵɵFactoryTarget.Component });
|
|
10584
|
-
InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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" }, 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 <span class=\"file-link absent\">\r\n <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n <defs/>\r\n <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n clip-rule=\"evenodd\"/>\r\n </svg>\r\n \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n </span>\r\n </div>\r\n\r\n <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n <defs/>\r\n <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n clip-rule=\"evenodd\"/>\r\n </svg>\r\n {{ file.name }}\r\n </a>\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 (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 <ng-container *ngIf=\"autoUpload\">\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n <span\r\n *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n (click)=\"delete(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 <button\r\n type=\"button\"\r\n class=\"ng-custom-file-input-btn-stop ml-2\"\r\n *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n >\r\n <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n </button>\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)!important}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"], components: [{ type: i2$3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
10589
|
+
InputFileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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 <span class=\"file-link absent\">\r\n <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n <defs/>\r\n <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n clip-rule=\"evenodd\"/>\r\n </svg>\r\n \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n </span>\r\n </div>\r\n\r\n <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n <defs/>\r\n <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n clip-rule=\"evenodd\"/>\r\n </svg>\r\n {{ file.name }}\r\n </a>\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 (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 <ng-container *ngIf=\"autoUpload\">\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n <span\r\n *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n (click)=\"delete(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 <button\r\n type=\"button\"\r\n class=\"ng-custom-file-input-btn-stop ml-2\"\r\n *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n >\r\n <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n </button>\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)!important}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"], components: [{ type: i2$3.NgxFileDropComponent, selector: "ngx-file-drop", inputs: ["accept", "directory", "multiple", "dropZoneLabel", "dropZoneClassName", "useDragEnter", "contentClassName", "showBrowseBtn", "browseBtnClassName", "browseBtnLabel", "disabled"], outputs: ["onFileDrop", "onFileOver", "onFileLeave"] }, { type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalidMessage", "customClasses"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$3.NgxFileDropContentTemplateDirective, selector: "[ngx-file-drop-content-tmp]" }, { type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
10585
10590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputFileComponent, decorators: [{
|
|
10586
10591
|
type: Component,
|
|
10587
10592
|
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 <span class=\"file-link absent\">\r\n <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n <defs/>\r\n <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n clip-rule=\"evenodd\"/>\r\n </svg>\r\n \u0414\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u043E\u0432 \u043D\u0435\u0442\r\n </span>\r\n </div>\r\n\r\n <div *ngFor=\"let file of files; index as i; trackBy: trackByFn\"\r\n [ngClass]=\"{'col-12 col-md': files.length === 1, 'col-12 col-md-6': files.length > 1}\">\r\n <a class=\"file-link\" [href]=\"downloadUrl(file)\">\r\n <svg class=\"fill\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" width='16' viewBox=\"0 0 16 20\">\r\n <defs/>\r\n <path fill=\"#B79B7E\" fill-rule=\"evenodd\"\r\n d=\"M2 0C.896 0 0 .896 0 2v16c0 1.104.896 2 2 2h12c1.104 0 2-.896 2-2V6l-6-6H2zm8 7H9V2l5 5h-4z\"\r\n clip-rule=\"evenodd\"/>\r\n </svg>\r\n {{ file.name }}\r\n </a>\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 (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 <ng-container *ngIf=\"autoUpload\">\r\n <a class=\"qq-download-link\" [target]=\"getTarget\" [href]=\"downloadUrl(file)\" *ngIf=\"file.uuid && isDownloadingFile\"></a>\r\n </ng-container>\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\">{{formatBytes(file.size)}}</span>\r\n <span\r\n *ngIf=\"!disabled && file.uuid && showDeleteButton && !viewOnly\"\r\n (click)=\"delete(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 <button\r\n type=\"button\"\r\n class=\"ng-custom-file-input-btn-stop ml-2\"\r\n *ngIf=\"(file.error && !file.uuid) || canCancelUploading(file) && !viewOnly\"\r\n (click)=\"clear(file)\"\r\n >\r\n <span class=\"mrx-icon icon-close icon-font-24 cursor-pointer\"></span>\r\n </button>\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)!important}::ng-deep .new-custom-file-input__item.file-error{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-custom-file-input-error{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{border-color:var(--system-bg-controls-negative-default)}::ng-deep .ng-form-file-input.mrx-input-checked-error .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}::ng-deep .ng-form-file-input.mrx-input-checked-success .ng-custom-file-input .ngx-file-drop__drop-zone{border-color:var(--system-bg-controls-positive-default);background-color:var(--system-bg-positive-secondary)}.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__item .qq-file-info .qq-upload-file-selector{margin:0;-webkit-line-clamp:1;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.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)}.new-custom-file-input .qq-file-info .info{position:relative;z-index:2}\n"] }]
|
|
@@ -10659,6 +10664,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
10659
10664
|
args: ['allowedExtensions']
|
|
10660
10665
|
}], filesChanged: [{
|
|
10661
10666
|
type: Output
|
|
10667
|
+
}], checkDroppedFile: [{
|
|
10668
|
+
type: Output
|
|
10662
10669
|
}] } });
|
|
10663
10670
|
|
|
10664
10671
|
class InputFileModule {
|