@tapsellorg/angular-material-library
Version:
Angular library for Tapsell
518 lines (510 loc) • 44.8 kB
JavaScript
import * as i0 from '@angular/core';
import { signal, output, HostListener, HostBinding, Directive, input, model, ViewChild, ViewEncapsulation, Component, NgModule, Optional, Self, Inject, ChangeDetectionStrategy } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i3$1 from '@angular/forms';
import { UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
import * as i5 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { MatRippleModule } from '@angular/material/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import * as i2 from '@tapsellorg/angular-material-library/src/lib/loader';
import { PghLoaderModule } from '@tapsellorg/angular-material-library/src/lib/loader';
import { FileUtils, withDestroy } from '@tapsellorg/angular-material-library/src/lib/common';
import { PghAnimations } from '@tapsellorg/angular-material-library/src/lib/animations';
import { PghFileValidators, PghInputModule } from '@tapsellorg/angular-material-library/src/lib/input';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i8 from '@angular/material/form-field';
import { MAT_FORM_FIELD, MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
import { Subject } from 'rxjs';
import { PghConfirmDialogComponent } from '@tapsellorg/angular-material-library/confirm-dialog';
import { filter } from 'rxjs/operators';
import { outputFromObservable } from '@angular/core/rxjs-interop';
import * as i1$1 from '@angular/material/dialog';
import * as i2$1 from '@angular/cdk/a11y';
import * as i7 from '@tapsellorg/angular-material-library/src/lib/translate';
import { TranslateModule } from '@tapsellorg/angular-material-library/src/lib/translate';
import { MatInputModule } from '@angular/material/input';
import { MatTooltipModule } from '@angular/material/tooltip';
class PghDropTargetDirective {
constructor() {
this.fileSizeLimit = signal(-1); // -1 for infinite
this.fileDrop = output();
this._tabIndex = '0';
this.fileDragged = false;
this.dragEnteredCounter = 0;
}
onDragOver(event) {
event.preventDefault();
event.stopPropagation();
}
onDragEnter(event) {
event.preventDefault();
event.stopPropagation();
this.dragEnteredCounter++;
this.fileDragged = true;
}
onDragLeave(event) {
event.preventDefault();
event.stopPropagation();
this.dragEnteredCounter--;
if (this.dragEnteredCounter === 0)
this.fileDragged = false;
}
ondrop(event) {
event.preventDefault();
event.stopPropagation();
this.dragEnteredCounter = 0;
this.fileDragged = false;
if (event.dataTransfer) {
this.fileDrop.emit(event.dataTransfer.files);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDropTargetDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.13", type: PghDropTargetDirective, isStandalone: false, selector: "[pghDropTarget]", outputs: { fileDrop: "fileDrop" }, host: { listeners: { "dragover": "onDragOver($event)", "dragenter": "onDragEnter($event)", "dragleave": "onDragLeave($event)", "drop": "ondrop($event)" }, properties: { "attr.tabindex": "this._tabIndex" } }, exportAs: ["pghDropTarget"], ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDropTargetDirective, decorators: [{
type: Directive,
args: [{
selector: '[pghDropTarget]',
exportAs: 'pghDropTarget',
standalone: false,
}]
}], ctorParameters: () => [], propDecorators: { _tabIndex: [{
type: HostBinding,
args: ['attr.tabindex']
}], onDragOver: [{
type: HostListener,
args: ['dragover', ['$event']]
}], onDragEnter: [{
type: HostListener,
args: ['dragenter', ['$event']]
}], onDragLeave: [{
type: HostListener,
args: ['dragleave', ['$event']]
}], ondrop: [{
type: HostListener,
args: ['drop', ['$event']]
}] } });
class PghDragDropFileComponent {
constructor() {
this._display = 'block';
this.filesControl = input();
this.color = input();
this.loader = input(undefined);
/** default value: ```false``` */
this.canChooseMultipleFiles = input(false);
this.showSelectedFilesInfo = input(false);
this.filesChange = output();
this.validation = input({});
this.messageErrorField = model([]);
this.selectedFiles = signal([]);
}
get filesControlValue() {
const control = this.filesControl();
return control instanceof UntypedFormControl ? control : null;
}
onFileDrop(files) {
this.handleAddFiles(files);
}
onFileInput({ target: _target }) {
const target = _target;
const { files } = target;
this.messageErrorField.set([]);
this.checkValidation(files);
if (this.messageErrorField().length > 0)
return;
if (files) {
this.handleAddFiles(files);
}
target.value = '';
}
removeFile(selectedFile) {
this.selectedFiles.set(this.selectedFiles().filter(f => f.size !== selectedFile.size));
}
openFilePicker() {
if (!this.fileInput)
return;
this.fileInput.nativeElement.click();
}
handleAddFiles(files) {
if (this.canChooseMultipleFiles()) {
const newFiles = FileUtils.convertFileListToArray(files);
newFiles.forEach(newFile => {
const alreadySelectedFile = this.selectedFiles().find(selectedFile => selectedFile.size === newFile.size);
if (!alreadySelectedFile)
this.selectedFiles().push(newFile);
});
}
else
this.selectedFiles.set([files[0]]);
this.updateFiles();
}
updateFiles() {
const filesControl = this.filesControl();
if (filesControl) {
filesControl.setValue(this.selectedFiles());
}
this.filesChange.emit(this.selectedFiles());
}
checkValidation(files) {
if (Object.keys(this.validation()).length === 0 || files.length === 0)
return;
if (this.validation()?.checkNameValidation) {
const fileNameWithoutFormatPart = files[0].name.split('.').slice(0, -1).join('.');
this.messageErrorField().push(PghFileValidators.checkNameValidator(fileNameWithoutFormatPart));
}
if (this.validation()?.contentType)
this.messageErrorField().push(PghFileValidators.checkAllowedTypes(this.validation().contentType, files[0].type));
if (this.validation()?.maxSize)
this.messageErrorField().push(PghFileValidators.checkSizeValidation(this.validation().maxSize, files[0].size));
this.messageErrorField.set(this.messageErrorField().filter(element => element !== null));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDragDropFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghDragDropFileComponent, isStandalone: false, selector: "pgh-drag-drop-file", inputs: { filesControl: { classPropertyName: "filesControl", publicName: "filesControl", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, canChooseMultipleFiles: { classPropertyName: "canChooseMultipleFiles", publicName: "canChooseMultipleFiles", isSignal: true, isRequired: false, transformFunction: null }, showSelectedFilesInfo: { classPropertyName: "showSelectedFilesInfo", publicName: "showSelectedFilesInfo", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, messageErrorField: { classPropertyName: "messageErrorField", publicName: "messageErrorField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filesChange: "filesChange", messageErrorField: "messageErrorFieldChange" }, host: { properties: { "style.display": "this._display" } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n class=\"pgh-drop-file-container\"\n [ngClass]=\"{\n 'pgh-drop-file-primary': color() === 'primary',\n 'pgh-drop-file-accent': color() === 'accent',\n 'pgh-drop-file-warn': color() === 'warn'\n }\"\n (click)=\"fileInput.click(); $event.stopPropagation()\"\n pghDropTarget\n #dropTarget=\"pghDropTarget\"\n (fileDrop)=\"onFileDrop($event)\"\n [class.pgh-file-dragged]=\"dropTarget.fileDragged\"\n [pghLoader]=\"loader()\"\n>\n <input\n hidden\n type=\"file\"\n [multiple]=\"canChooseMultipleFiles()\"\n #fileInput\n (change)=\"onFileInput($event)\"\n [accept]=\"validation().contentType\"\n />\n <div #dropPlaceholderRef>\n <ng-content select=\"[pgh-drop-placeholder]\"></ng-content>\n </div>\n @if (!dropPlaceholderRef.innerHTML.trim()) {\n <div class=\"pgh-upload-icon\">\n <mat-icon svgIcon=\"cloud_upload\" class=\"w-100 h-100\"></mat-icon>\n </div>\n <div class=\"pgh-drop-file-text\">\n <span>\u0641\u0627\u06CC\u0644\u200C\u0647\u0627 \u0631\u0627 \u0628\u06A9\u0634\u06CC\u062F \u0648 \u0631\u0647\u0627 \u06A9\u0646\u06CC\u062F \u06CC\u0627</span>\n <span class=\"pgh-choose-file-btn\">\u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F</span>\n </div>\n }\n</div>\n@if (selectedFiles().length > 0 && showSelectedFilesInfo()) {\n<div class=\"box p-2 mt-2\">\n @for (file of selectedFiles(); track file) {\n <div class=\"d-flex justify-content-between py-1\">\n {{ file.name }}\n <mat-icon\n svgIcon=\"delete\"\n color=\"warn\"\n (click)=\"removeFile(file)\"\n class=\"cursor-pointer\"\n ></mat-icon>\n </div>\n }\n</div>\n} @for (message of messageErrorField(); track message) {\n<div>\n <span class=\"text-danger pgh-drop-file-error\">{{ message }}</span>\n</div>\n}\n", styles: [".font-monospaced-numbers{font-feature-settings:\"ss03\"!important}.font-english-numbers{font-feature-settings:normal!important}.font-weight-light{font-weight:300}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:600}.black-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-0),50%)!important}.white-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-1000),50%)!important}.pgh-drop-file-container{margin-block:0;margin-inline:auto;border-radius:var(--box-radius);padding:.5rem;display:flex;place-content:center center;align-items:center;font-size:1rem;transition:all .2s ease-in-out;cursor:pointer;border:2px dashed var(--ddd);background-color:var(--f9f9f9);color:var(--666);flex-wrap:wrap;flex:1 1 0;height:100%}.pgh-drop-file-container:hover{border-color:var(--aaa)}.pgh-drop-file-container.pgh-file-dragged{border-style:solid;box-shadow:inset 0 2px 40px -25px currentcolor}.pgh-drop-file-container .pgh-upload-icon{flex:0 1 5rem;display:flex;justify-content:center;align-items:center;min-width:2.5rem;height:4rem;max-height:100%;max-width:3.4375rem;margin-block:0;margin-inline:.5rem}.pgh-drop-file-container .pgh-upload-icon>svg{height:100%;width:100%}.pgh-drop-file-container .pgh-drop-file-text{text-align:center;flex:0 1 auto;min-width:6.875rem}.pgh-drop-file-container .pgh-choose-file-btn{cursor:pointer;text-decoration:underline;margin-inline-start:.5rem;font-weight:600}.pgh-drop-file-error{font-size:75%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.PghLoaderDirective, selector: "[pghLoader]", inputs: ["pghLoader", "color", "pghDisabledWhileLoading", "pghLoaderType"], exportAs: ["pghLoader"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: PghDropTargetDirective, selector: "[pghDropTarget]", outputs: ["fileDrop"], exportAs: ["pghDropTarget"] }], animations: [PghAnimations.childrenEnterPopIn], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDragDropFileComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-drag-drop-file', encapsulation: ViewEncapsulation.None, animations: [PghAnimations.childrenEnterPopIn], standalone: false, template: "<div\n class=\"pgh-drop-file-container\"\n [ngClass]=\"{\n 'pgh-drop-file-primary': color() === 'primary',\n 'pgh-drop-file-accent': color() === 'accent',\n 'pgh-drop-file-warn': color() === 'warn'\n }\"\n (click)=\"fileInput.click(); $event.stopPropagation()\"\n pghDropTarget\n #dropTarget=\"pghDropTarget\"\n (fileDrop)=\"onFileDrop($event)\"\n [class.pgh-file-dragged]=\"dropTarget.fileDragged\"\n [pghLoader]=\"loader()\"\n>\n <input\n hidden\n type=\"file\"\n [multiple]=\"canChooseMultipleFiles()\"\n #fileInput\n (change)=\"onFileInput($event)\"\n [accept]=\"validation().contentType\"\n />\n <div #dropPlaceholderRef>\n <ng-content select=\"[pgh-drop-placeholder]\"></ng-content>\n </div>\n @if (!dropPlaceholderRef.innerHTML.trim()) {\n <div class=\"pgh-upload-icon\">\n <mat-icon svgIcon=\"cloud_upload\" class=\"w-100 h-100\"></mat-icon>\n </div>\n <div class=\"pgh-drop-file-text\">\n <span>\u0641\u0627\u06CC\u0644\u200C\u0647\u0627 \u0631\u0627 \u0628\u06A9\u0634\u06CC\u062F \u0648 \u0631\u0647\u0627 \u06A9\u0646\u06CC\u062F \u06CC\u0627</span>\n <span class=\"pgh-choose-file-btn\">\u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F</span>\n </div>\n }\n</div>\n@if (selectedFiles().length > 0 && showSelectedFilesInfo()) {\n<div class=\"box p-2 mt-2\">\n @for (file of selectedFiles(); track file) {\n <div class=\"d-flex justify-content-between py-1\">\n {{ file.name }}\n <mat-icon\n svgIcon=\"delete\"\n color=\"warn\"\n (click)=\"removeFile(file)\"\n class=\"cursor-pointer\"\n ></mat-icon>\n </div>\n }\n</div>\n} @for (message of messageErrorField(); track message) {\n<div>\n <span class=\"text-danger pgh-drop-file-error\">{{ message }}</span>\n</div>\n}\n", styles: [".font-monospaced-numbers{font-feature-settings:\"ss03\"!important}.font-english-numbers{font-feature-settings:normal!important}.font-weight-light{font-weight:300}.font-weight-normal{font-weight:400}.font-weight-bold{font-weight:600}.black-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-0),50%)!important}.white-50{background-color:hsl(var(--_body-hue),var(--_body-saturation),var(--lightness-1000),50%)!important}.pgh-drop-file-container{margin-block:0;margin-inline:auto;border-radius:var(--box-radius);padding:.5rem;display:flex;place-content:center center;align-items:center;font-size:1rem;transition:all .2s ease-in-out;cursor:pointer;border:2px dashed var(--ddd);background-color:var(--f9f9f9);color:var(--666);flex-wrap:wrap;flex:1 1 0;height:100%}.pgh-drop-file-container:hover{border-color:var(--aaa)}.pgh-drop-file-container.pgh-file-dragged{border-style:solid;box-shadow:inset 0 2px 40px -25px currentcolor}.pgh-drop-file-container .pgh-upload-icon{flex:0 1 5rem;display:flex;justify-content:center;align-items:center;min-width:2.5rem;height:4rem;max-height:100%;max-width:3.4375rem;margin-block:0;margin-inline:.5rem}.pgh-drop-file-container .pgh-upload-icon>svg{height:100%;width:100%}.pgh-drop-file-container .pgh-drop-file-text{text-align:center;flex:0 1 auto;min-width:6.875rem}.pgh-drop-file-container .pgh-choose-file-btn{cursor:pointer;text-decoration:underline;margin-inline-start:.5rem;font-weight:600}.pgh-drop-file-error{font-size:75%}\n"] }]
}], propDecorators: { _display: [{
type: HostBinding,
args: ['style.display']
}], fileInput: [{
type: ViewChild,
args: ['fileInput']
}] } });
class PghDragDropModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDragDropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghDragDropModule, declarations: [PghDragDropFileComponent, PghDropTargetDirective], imports: [CommonModule,
MatButtonModule,
MatRippleModule,
MatProgressBarModule,
ReactiveFormsModule,
PghLoaderModule,
MatIconModule], exports: [PghDragDropFileComponent, PghDropTargetDirective] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDragDropModule, imports: [CommonModule,
MatButtonModule,
MatRippleModule,
MatProgressBarModule,
ReactiveFormsModule,
PghLoaderModule,
MatIconModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghDragDropModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghDragDropFileComponent, PghDropTargetDirective],
imports: [
CommonModule,
MatButtonModule,
MatRippleModule,
MatProgressBarModule,
ReactiveFormsModule,
PghLoaderModule,
MatIconModule,
],
exports: [PghDragDropFileComponent, PghDropTargetDirective],
}]
}] });
class PghFileInputComponent extends withDestroy() {
static { this.nextId = 0; }
constructor(confirmDialog, changeDetectorRef, _elementRef, cdkFocusMonitor, ngControl, _formField) {
super();
this.confirmDialog = confirmDialog;
this.changeDetectorRef = changeDetectorRef;
this._elementRef = _elementRef;
this.cdkFocusMonitor = cdkFocusMonitor;
this.ngControl = ngControl;
this._formField = _formField;
this.id = `pgh-file-input-${PghFileInputComponent.nextId++}`;
this.placeholder = input('');
this.color = input();
this.hasPreviewPicture = input(true);
this.loader = input();
this.disableDeleteButton = input(false);
this.showDeleteConfirmDialog = input(true);
this.deleteFileDialogConfig = input({
title: 'تایید حذف فایل',
message: 'از حذف کردن این فایل مطمئن هستید؟',
acceptBtnText: 'حذف',
rejectBtnText: 'انصراف',
uiOptions: {
acceptBtnColor: 'warn',
},
});
this.filename = input(FileUtils.defaultFilename);
this.canReUploadFile = input(true);
this.afterFileRemovedEmitter = new Subject();
this.afterFileRemoved = outputFromObservable(this.afterFileRemovedEmitter);
this.afterFileChangedEmitter = new Subject();
this.afterFileChanged = outputFromObservable(this.afterFileChangedEmitter);
// @Input() label: string = 'آپلود عکس';
// @Input() placeholder: string = 'برای انتخاب عکس کلیک کنید';
// @Input() maintainAspectRatio: boolean = false;
// @Input() aspectRatio: number = 6 / 4;
this.validation = input({});
this.controlOnTouch = signal(() => { });
this.stateChanges = new Subject();
this.focused = false;
this.shouldLabelFloat = true;
this.controlType = 'pgh-file-input';
this._value = null;
this.describedBy = '';
if (_formField) {
_formField.appearance = 'outline';
}
if (this.ngControl) {
// Setting the value accessor directly (instead of using the providers) to avoid running into a circular import.
this.ngControl.valueAccessor = this;
}
cdkFocusMonitor.monitor(_elementRef.nativeElement, true).subscribe(origin => {
this.focused = !!origin;
this.stateChanges.next();
});
}
fileChange(files) {
const reader = new FileReader();
reader.readAsDataURL(files[0]);
reader.onload = (e) => {
if (this.afterFileChangedEmitter.observed) {
this.afterFileChangedEmitter.next({ fileUrl: e.target?.result, file: files[0] });
}
else {
this.value = { fileUrl: e.target?.result, file: files[0] };
this.changeDetectorRef.detectChanges();
}
};
}
// getImageFromUrl() {
// this.linkLoader.activate();
// fetch(this.form.value.fileLink)
// .then(res => {
// if (res.status !== 200) this.notifService.error('خطا در دریافت عکس.');
// else {
// this.value = this.form.value.fileLink;
// }
// this.linkLoader.deactivate();
// })
// .catch(_ => {
// this.notifService.error('خطا در دریافت عکس.');
// this.linkLoader.deactivate();
// });
// }
deleteFileConfirmDialog() {
this.setConfigOfDeleteFileConfirmDialog()
.afterClosed()
.pipe(filter(data => !!data))
.subscribe(() => {
this.deleteFile();
});
}
deleteFile() {
this.focused = false;
if (this.afterFileRemovedEmitter.observed) {
this.afterFileRemovedEmitter.next();
}
else {
this.value = null;
}
}
setConfigOfDeleteFileConfirmDialog() {
return this.confirmDialog.open(PghConfirmDialogComponent, {
maxWidth: '500px',
data: this.deleteFileDialogConfig(),
maxHeight: '600px',
width: '100%',
});
}
downloadFile() {
if (!this.value)
return;
if (this.valueIsUrl(this.value.fileUrl)) {
FileUtils.urlToFile(this.value.fileUrl, this.filename()).then(file => {
this.value = {
fileUrl: this.value?.fileUrl ?? '',
file: file,
};
FileUtils.downloadFile(this.value.file);
});
}
else {
if (!this.value?.file)
return;
FileUtils.downloadFile(this.value.file);
}
}
/** This method makes sure that the contents of the variable (in here it's this.value)
* which gets filled by selecting a file or patching/setting the formControl
* will always have both **fileUrl (Base64)** and **file (File)**. In other words, if a field is missing, it will be computed based on the other field.
*/
writeValue(newValue) {
if (!newValue) {
this.value = null;
return;
}
if (typeof newValue === 'string' && this.valueIsUrl(newValue))
FileUtils.urlToFile(newValue, this.filename()).then(file => {
this.value = {
fileUrl: newValue,
file: file,
};
});
else if (typeof newValue === 'string')
this.value = {
fileUrl: newValue,
file: FileUtils.base64ToFile(newValue, this.filename()),
};
else {
if (typeof newValue === 'object' &&
!this.valueIsPartialPghFile(newValue) &&
!('arrayBuffer' in newValue)) {
this.value = null;
console.error('make sure you are using correct property names. if you want to remove the content, do it like this: \n this.form.patchValue(null).');
return;
}
this.writeValueFromObject(newValue);
}
}
writeValueFromObject(newValue) {
const file = this.valueIsPartialPghFile(newValue) ? newValue.file : newValue;
if (file)
FileUtils.fileOrBlobToBase64(file)?.then(fileUrl => {
this.value = {
fileUrl,
file: file.name ? file : FileUtils.blobToFile(file),
};
});
else if (this.valueIsPartialPghFile(newValue) && newValue.fileUrl) {
if (this.valueIsUrl(newValue.fileUrl)) {
this.value = {};
this.value.fileUrl = newValue.fileUrl;
this.changeDetectorRef.detectChanges();
}
else
this.value = {
fileUrl: newValue.fileUrl,
file: FileUtils.base64ToFile(newValue.fileUrl),
};
}
else
console.error(`file or fileUrl is null/undefined. to make it simpler, don\'t patch with {key: value} pairs (ex: {fileUrl: foo}),
do it like: \n this.form.patchValue(File) or this.form.patchValue(Base64 / Link)`);
}
valueIsPartialPghFile(value) {
return value?.file !== undefined || value?.fileUrl !== undefined;
}
valueIsUrl(value) {
return value.startsWith('https://') || value.startsWith('http://');
}
registerOnChange(fn) {
this.controlOnChange = fn;
}
registerOnTouched(fn) {
this.controlOnTouch.set(fn);
}
get value() {
return this._value;
}
set value(value) {
this._value = value;
this.controlOnChange?.(value);
this.stateChanges.next();
this.changeDetectorRef.detectChanges();
}
ngOnDestroy() {
super.ngOnDestroy();
this.stateChanges.complete();
this.cdkFocusMonitor.stopMonitoring(this._elementRef.nativeElement);
}
get empty() {
return !this.value;
}
get errorState() {
return !!(this.ngControl?.invalid && this.ngControl?.touched);
}
setDescribedByIds(ids) {
this.describedBy = ids.join(' ');
}
onContainerClick(_event) {
if (!this.dragDropFileComponent)
return;
this.dragDropFileComponent.openFilePicker();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFileInputComponent, deps: [{ token: i1$1.MatDialog }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2$1.FocusMonitor }, { token: i3$1.NgControl, optional: true, self: true }, { token: MAT_FORM_FIELD, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: PghFileInputComponent, isStandalone: false, selector: "pgh-file-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hasPreviewPicture: { classPropertyName: "hasPreviewPicture", publicName: "hasPreviewPicture", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, disableDeleteButton: { classPropertyName: "disableDeleteButton", publicName: "disableDeleteButton", isSignal: true, isRequired: false, transformFunction: null }, showDeleteConfirmDialog: { classPropertyName: "showDeleteConfirmDialog", publicName: "showDeleteConfirmDialog", isSignal: true, isRequired: false, transformFunction: null }, deleteFileDialogConfig: { classPropertyName: "deleteFileDialogConfig", publicName: "deleteFileDialogConfig", isSignal: true, isRequired: false, transformFunction: null }, filename: { classPropertyName: "filename", publicName: "filename", isSignal: true, isRequired: false, transformFunction: null }, canReUploadFile: { classPropertyName: "canReUploadFile", publicName: "canReUploadFile", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { afterFileRemoved: "afterFileRemoved", afterFileChanged: "afterFileChanged" }, host: { properties: { "id": "this.id", "attr.aria-describedby": "this.describedBy" } }, providers: [{ provide: MatFormFieldControl, useExisting: PghFileInputComponent }], viewQueries: [{ propertyName: "dragDropFileComponent", first: true, predicate: PghDragDropFileComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!--<div class=\"mb-2\">{{ label }}</div>-->\n\n@if (!value) {\n<pgh-drag-drop-file\n (filesChange)=\"fileChange($event)\"\n [color]=\"errorState ? 'warn' : color()\"\n style=\"height: 4rem\"\n (blur)=\"controlOnTouch() && controlOnTouch()\"\n [loader]=\"loader()\"\n [validation]=\"validation()\"\n>\n <div pgh-drop-placeholder class=\"d-flex align-items-center text-right\">\n <mat-icon svgIcon=\"upload_file\" class=\"me-2\"></mat-icon>\n <span>{{ placeholder() }}</span>\n </div>\n</pgh-drag-drop-file>\n} @else {\n<div #hasPreviewTpl>\n <ng-content select=\"[pgh-file-preview]\"></ng-content>\n</div>\n@if (!hasPreviewTpl.innerHTML.trim()) { @if (hasPreviewPicture()) {\n<div class=\"pgh-file-image-preview mb-2\">\n <img [src]=\"value?.fileUrl\" alt=\"picture-preview\" />\n</div>\n} @if (canReUploadFile()) {\n<pgh-drag-drop-file color=\"accent\" (filesChange)=\"fileChange($event)\" [validation]=\"validation()\">\n <div pgh-drop-placeholder class=\"d-flex align-items-center text-right\">\n <mat-icon svgIcon=\"upload_file\" class=\"me-2\"></mat-icon>\n <span>{{ value?.file?.name ?? filename() }}</span>\n </div>\n</pgh-drag-drop-file>\n}\n<div class=\"d-flex justify-content-center\">\n <button\n mat-button\n color=\"warn\"\n type=\"button\"\n (click)=\"\n showDeleteConfirmDialog() ? deleteFileConfirmDialog() : deleteFile(); $event.stopPropagation()\n \"\n [disabled]=\"disableDeleteButton()\"\n >\n <mat-icon svgIcon=\"delete\" class=\"me-2\"></mat-icon>\n <span>{{ 'DRAG_AND_DROP_DELETE_BUTTON' | translate }}</span>\n </button>\n <button\n mat-button\n color=\"accent\"\n type=\"button\"\n (click)=\"downloadFile(); $event.stopPropagation()\"\n >\n <mat-icon svgIcon=\"cloud_download\" class=\"me-2\"></mat-icon>\n <span>{{ 'DRAG_AND_DROP_DOWNLOAD_BUTTON' | translate }}</span>\n </button>\n</div>\n} }\n<!-- <mat-tab-group *ngIf=\"editable\" dynamicHeight>-->\n<!-- <mat-tab label=\"\u0622\u067E\u0644\u0648\u062F \u0641\u0627\u06CC\u0644 \u062A\u0635\u0648\u06CC\u0631\">-->\n<!-- <pgh-drag-drop-file (filesChange)=\"fileChange($event)\"></pgh-drag-drop-file>-->\n<!-- </mat-tab>-->\n<!-- <mat-tab label=\"\u062F\u0631\u06CC\u0627\u0641\u062A \u0627\u0632 \u0644\u06CC\u0646\u06A9\">-->\n<!-- <form [formGroup]=\"form\" (ngSubmit)=\"getImageFromUrl()\" class=\"d-flex\">-->\n<!-- <mat-form-field class=\"flex-grow-1\">-->\n<!-- <mat-label>\u0644\u06CC\u0646\u06A9 \u062A\u0635\u0648\u06CC\u0631</mat-label>-->\n<!-- <input matInput formControlName=\"fileLink\" class=\"link-input\" />-->\n<!-- <mat-error *pghFieldError=\"let message\">{{ message }}</mat-error>-->\n<!-- </mat-form-field>-->\n<!-- <button-->\n<!-- [pghLoader]=\"linkLoader\"-->\n<!-- [disabled]=\"!form.value.fileLink\"-->\n<!-- class=\"mb-4 mt-1 ms-2\"-->\n<!-- mat-stroked-button-->\n<!-- color=\"primary\"-->\n<!-- type=\"submit\"-->\n<!-- >-->\n<!-- \u062F\u0631\u06CC\u0627\u0641\u062A \u0639\u06A9\u0633-->\n<!-- </button>-->\n<!-- </form>-->\n<!-- </mat-tab>-->\n<!-- </mat-tab-group>-->\n<!-- <div *ngIf=\"!editable\" class=\"image-editor\">-->\n<!-- <small class=\"mb-1 ms-2\">{{ label }}</small>-->\n<!-- <div class=\"image-preview\">-->\n<!-- <p *ngIf=\"!editable && !value\">\u062A\u0635\u0648\u06CC\u0631 \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F</p>-->\n<!-- </div>-->\n<!-- </div>-->\n<ng-template #hasPreviewTpl>\n <div #hasPreviewTpl>\n <ng-content select=\"[pgh-file-preview]\"></ng-content>\n </div>\n @if (!hasPreviewTpl.innerHTML.trim()) { @if (hasPreviewPicture()) {\n <div class=\"pgh-file-image-preview mb-2\">\n <img [src]=\"value?.fileUrl\" alt=\"picture-preview\" />\n </div>\n } @if (canReUploadFile()) {\n <pgh-drag-drop-file color=\"accent\" (filesChange)=\"fileChange($event)\" [validation]=\"validation()\">\n <div pgh-drop-placeholder class=\"d-flex align-items-center text-right\">\n <mat-icon svgIcon=\"upload_file\" class=\"me-2\"></mat-icon>\n <span>{{ value?.file?.name ?? filename() }}</span>\n </div>\n </pgh-drag-drop-file>\n }\n <div class=\"d-flex justify-content-center\">\n <button\n mat-button\n color=\"warn\"\n type=\"button\"\n (click)=\"\n showDeleteConfirmDialog() ? deleteFileConfirmDialog() : deleteFile();\n $event.stopPropagation()\n \"\n [disabled]=\"disableDeleteButton()\"\n >\n <mat-icon svgIcon=\"delete\" class=\"me-2\"></mat-icon>\n <span>{{ 'DRAG_AND_DROP_DELETE_BUTTON' | translate }}</span>\n </button>\n <button\n mat-button\n color=\"accent\"\n type=\"button\"\n (click)=\"downloadFile(); $event.stopPropagation()\"\n >\n <mat-icon svgIcon=\"cloud_download\" class=\"me-2\"></mat-icon>\n <span>{{ 'DRAG_AND_DROP_DOWNLOAD_BUTTON' | translate }}</span>\n </button>\n </div>\n }\n</ng-template>\n", styles: [".pgh-file-image-preview{border-radius:var(--box-radius);background-color:var(--color-grey95);border:1px solid var(--color-grey85)}.pgh-file-image-preview>img{max-width:100%;max-height:200px;margin-block:0;margin-inline:auto;display:block;object-fit:contain}\n"], dependencies: [{ kind: "component", type: PghDragDropFileComponent, selector: "pgh-drag-drop-file", inputs: ["filesControl", "color", "loader", "canChooseMultipleFiles", "showSelectedFilesInfo", "validation", "messageErrorField"], outputs: ["filesChange", "messageErrorFieldChange"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFileInputComponent, decorators: [{
type: Component,
args: [{ selector: 'pgh-file-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: MatFormFieldControl, useExisting: PghFileInputComponent }], standalone: false, template: "<!--<div class=\"mb-2\">{{ label }}</div>-->\n\n@if (!value) {\n<pgh-drag-drop-file\n (filesChange)=\"fileChange($event)\"\n [color]=\"errorState ? 'warn' : color()\"\n style=\"height: 4rem\"\n (blur)=\"controlOnTouch() && controlOnTouch()\"\n [loader]=\"loader()\"\n [validation]=\"validation()\"\n>\n <div pgh-drop-placeholder class=\"d-flex align-items-center text-right\">\n <mat-icon svgIcon=\"upload_file\" class=\"me-2\"></mat-icon>\n <span>{{ placeholder() }}</span>\n </div>\n</pgh-drag-drop-file>\n} @else {\n<div #hasPreviewTpl>\n <ng-content select=\"[pgh-file-preview]\"></ng-content>\n</div>\n@if (!hasPreviewTpl.innerHTML.trim()) { @if (hasPreviewPicture()) {\n<div class=\"pgh-file-image-preview mb-2\">\n <img [src]=\"value?.fileUrl\" alt=\"picture-preview\" />\n</div>\n} @if (canReUploadFile()) {\n<pgh-drag-drop-file color=\"accent\" (filesChange)=\"fileChange($event)\" [validation]=\"validation()\">\n <div pgh-drop-placeholder class=\"d-flex align-items-center text-right\">\n <mat-icon svgIcon=\"upload_file\" class=\"me-2\"></mat-icon>\n <span>{{ value?.file?.name ?? filename() }}</span>\n </div>\n</pgh-drag-drop-file>\n}\n<div class=\"d-flex justify-content-center\">\n <button\n mat-button\n color=\"warn\"\n type=\"button\"\n (click)=\"\n showDeleteConfirmDialog() ? deleteFileConfirmDialog() : deleteFile(); $event.stopPropagation()\n \"\n [disabled]=\"disableDeleteButton()\"\n >\n <mat-icon svgIcon=\"delete\" class=\"me-2\"></mat-icon>\n <span>{{ 'DRAG_AND_DROP_DELETE_BUTTON' | translate }}</span>\n </button>\n <button\n mat-button\n color=\"accent\"\n type=\"button\"\n (click)=\"downloadFile(); $event.stopPropagation()\"\n >\n <mat-icon svgIcon=\"cloud_download\" class=\"me-2\"></mat-icon>\n <span>{{ 'DRAG_AND_DROP_DOWNLOAD_BUTTON' | translate }}</span>\n </button>\n</div>\n} }\n<!-- <mat-tab-group *ngIf=\"editable\" dynamicHeight>-->\n<!-- <mat-tab label=\"\u0622\u067E\u0644\u0648\u062F \u0641\u0627\u06CC\u0644 \u062A\u0635\u0648\u06CC\u0631\">-->\n<!-- <pgh-drag-drop-file (filesChange)=\"fileChange($event)\"></pgh-drag-drop-file>-->\n<!-- </mat-tab>-->\n<!-- <mat-tab label=\"\u062F\u0631\u06CC\u0627\u0641\u062A \u0627\u0632 \u0644\u06CC\u0646\u06A9\">-->\n<!-- <form [formGroup]=\"form\" (ngSubmit)=\"getImageFromUrl()\" class=\"d-flex\">-->\n<!-- <mat-form-field class=\"flex-grow-1\">-->\n<!-- <mat-label>\u0644\u06CC\u0646\u06A9 \u062A\u0635\u0648\u06CC\u0631</mat-label>-->\n<!-- <input matInput formControlName=\"fileLink\" class=\"link-input\" />-->\n<!-- <mat-error *pghFieldError=\"let message\">{{ message }}</mat-error>-->\n<!-- </mat-form-field>-->\n<!-- <button-->\n<!-- [pghLoader]=\"linkLoader\"-->\n<!-- [disabled]=\"!form.value.fileLink\"-->\n<!-- class=\"mb-4 mt-1 ms-2\"-->\n<!-- mat-stroked-button-->\n<!-- color=\"primary\"-->\n<!-- type=\"submit\"-->\n<!-- >-->\n<!-- \u062F\u0631\u06CC\u0627\u0641\u062A \u0639\u06A9\u0633-->\n<!-- </button>-->\n<!-- </form>-->\n<!-- </mat-tab>-->\n<!-- </mat-tab-group>-->\n<!-- <div *ngIf=\"!editable\" class=\"image-editor\">-->\n<!-- <small class=\"mb-1 ms-2\">{{ label }}</small>-->\n<!-- <div class=\"image-preview\">-->\n<!-- <p *ngIf=\"!editable && !value\">\u062A\u0635\u0648\u06CC\u0631 \u0648\u062C\u0648\u062F \u0646\u062F\u0627\u0631\u062F</p>-->\n<!-- </div>-->\n<!-- </div>-->\n<ng-template #hasPreviewTpl>\n <div #hasPreviewTpl>\n <ng-content select=\"[pgh-file-preview]\"></ng-content>\n </div>\n @if (!hasPreviewTpl.innerHTML.trim()) { @if (hasPreviewPicture()) {\n <div class=\"pgh-file-image-preview mb-2\">\n <img [src]=\"value?.fileUrl\" alt=\"picture-preview\" />\n </div>\n } @if (canReUploadFile()) {\n <pgh-drag-drop-file color=\"accent\" (filesChange)=\"fileChange($event)\" [validation]=\"validation()\">\n <div pgh-drop-placeholder class=\"d-flex align-items-center text-right\">\n <mat-icon svgIcon=\"upload_file\" class=\"me-2\"></mat-icon>\n <span>{{ value?.file?.name ?? filename() }}</span>\n </div>\n </pgh-drag-drop-file>\n }\n <div class=\"d-flex justify-content-center\">\n <button\n mat-button\n color=\"warn\"\n type=\"button\"\n (click)=\"\n showDeleteConfirmDialog() ? deleteFileConfirmDialog() : deleteFile();\n $event.stopPropagation()\n \"\n [disabled]=\"disableDeleteButton()\"\n >\n <mat-icon svgIcon=\"delete\" class=\"me-2\"></mat-icon>\n <span>{{ 'DRAG_AND_DROP_DELETE_BUTTON' | translate }}</span>\n </button>\n <button\n mat-button\n color=\"accent\"\n type=\"button\"\n (click)=\"downloadFile(); $event.stopPropagation()\"\n >\n <mat-icon svgIcon=\"cloud_download\" class=\"me-2\"></mat-icon>\n <span>{{ 'DRAG_AND_DROP_DOWNLOAD_BUTTON' | translate }}</span>\n </button>\n </div>\n }\n</ng-template>\n", styles: [".pgh-file-image-preview{border-radius:var(--box-radius);background-color:var(--color-grey95);border:1px solid var(--color-grey85)}.pgh-file-image-preview>img{max-width:100%;max-height:200px;margin-block:0;margin-inline:auto;display:block;object-fit:contain}\n"] }]
}], ctorParameters: () => [{ type: i1$1.MatDialog }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2$1.FocusMonitor }, { type: i3$1.NgControl, decorators: [{
type: Optional
}, {
type: Self
}] }, { type: i8.MatFormField, decorators: [{
type: Optional
}, {
type: Inject,
args: [MAT_FORM_FIELD]
}] }], propDecorators: { id: [{
type: HostBinding
}], dragDropFileComponent: [{
type: ViewChild,
args: [PghDragDropFileComponent]
}], describedBy: [{
type: HostBinding,
args: ['attr.aria-describedby']
}] } });
class PghFileInputModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFileInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.13", ngImport: i0, type: PghFileInputModule, declarations: [PghFileInputComponent], imports: [CommonModule,
PghDragDropModule,
FormsModule,
MatFormFieldModule,
MatInputModule,
ReactiveFormsModule,
PghInputModule,
MatButtonModule,
MatTooltipModule,
MatIconModule,
PghLoaderModule,
TranslateModule], exports: [PghFileInputComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFileInputModule, imports: [CommonModule,
PghDragDropModule,
FormsModule,
MatFormFieldModule,
MatInputModule,
ReactiveFormsModule,
PghInputModule,
MatButtonModule,
MatTooltipModule,
MatIconModule,
PghLoaderModule,
TranslateModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: PghFileInputModule, decorators: [{
type: NgModule,
args: [{
declarations: [PghFileInputComponent],
imports: [
CommonModule,
PghDragDropModule,
FormsModule,
MatFormFieldModule,
MatInputModule,
ReactiveFormsModule,
PghInputModule,
MatButtonModule,
MatTooltipModule,
MatIconModule,
PghLoaderModule,
TranslateModule,
],
exports: [PghFileInputComponent],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { PghDragDropFileComponent, PghDragDropModule, PghDropTargetDirective, PghFileInputComponent, PghFileInputModule };
//# sourceMappingURL=tapsellorg-angular-material-library-src-lib-drag-drop.mjs.map