@stemy/ngx-utils 19.2.1 → 19.2.3
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.
|
@@ -5968,6 +5968,16 @@ class UploadComponent {
|
|
|
5968
5968
|
};
|
|
5969
5969
|
this.onTouched = () => {
|
|
5970
5970
|
};
|
|
5971
|
+
this.remove = index => {
|
|
5972
|
+
if (this.multiple) {
|
|
5973
|
+
const current = Array.from(this.value || []);
|
|
5974
|
+
current.splice(index, 1);
|
|
5975
|
+
this.writeValue(current);
|
|
5976
|
+
this.onRemove.emit(current);
|
|
5977
|
+
}
|
|
5978
|
+
this.writeValue(null);
|
|
5979
|
+
this.onRemove.emit([]);
|
|
5980
|
+
};
|
|
5971
5981
|
}
|
|
5972
5982
|
onDragEnter(ev) {
|
|
5973
5983
|
const types = Array.from(ev.dataTransfer.items || [])
|
|
@@ -6129,7 +6139,7 @@ class UploadComponent {
|
|
|
6129
6139
|
provide: NG_VALUE_ACCESSOR,
|
|
6130
6140
|
useExisting: forwardRef(() => UploadComponent),
|
|
6131
6141
|
multi: true,
|
|
6132
|
-
}], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }, { propertyName: "removeButton", first: true, predicate: ["removeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ buttonText | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #defaultRemoveBtn let-remove=\"remove\" let-index=\"index\">\r\n <a class=\"btn btn-danger btn-delete\" (click)=\"remove(index)\">\r\n x\r\n </a>\r\n</ng-template>\r\n\r\n<div class=\"upload\">\r\n <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n <input type=\"file\"\r\n #input\r\n [multiple]=\"multiple\"\r\n [accept]=\"acceptAttr\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDrop()\"\r\n (drop)=\"onDrop()\"\r\n (click)=\"onInputClick($event)\"\r\n (blur)=\"onTouched($event)\"\r\n (change)=\"onInputChange($event)\"/>\r\n <div class=\"process-container\">\r\n <div class=\"upload-process\"\r\n [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\r\n *ngFor=\"let proc of processing\">\r\n <div class=\"upload-progress\">\r\n <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" (click)=\"input.click()\">\r\n <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\r\n [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #defaultTemplate>\r\n <ul class=\"files\" *ngIf=\"!multiple\">\r\n <li class=\"file\" *ngIf=\"value\">\r\n <a [href]=\"getUrl(value) | safe: 'url'\" target=\"target\">\r\n <i class=\"fas fa-download\">download</i>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <ul class=\"files\" *ngIf=\"multiple\">\r\n <li class=\"file\" *ngFor=\"let file of value; let
|
|
6142
|
+
}], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }, { propertyName: "removeButton", first: true, predicate: ["removeButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ buttonText | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #defaultRemoveBtn let-remove=\"remove\" let-index=\"index\">\r\n <a class=\"btn btn-danger btn-delete\" (click)=\"remove(index)\">\r\n x\r\n </a>\r\n</ng-template>\r\n\r\n<div class=\"upload\">\r\n <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n <input type=\"file\"\r\n #input\r\n [multiple]=\"multiple\"\r\n [accept]=\"acceptAttr\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDrop()\"\r\n (drop)=\"onDrop()\"\r\n (click)=\"onInputClick($event)\"\r\n (blur)=\"onTouched($event)\"\r\n (change)=\"onInputChange($event)\"/>\r\n <div class=\"process-container\">\r\n <div class=\"upload-process\"\r\n [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\r\n *ngFor=\"let proc of processing\">\r\n <div class=\"upload-progress\">\r\n <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" (click)=\"input.click()\">\r\n <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\r\n [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #defaultTemplate>\r\n <ul class=\"files\" *ngIf=\"!multiple\">\r\n <li class=\"file\" *ngIf=\"value\">\r\n <a [href]=\"getUrl(value) | safe: 'url'\" target=\"target\">\r\n <i class=\"fas fa-download\">download</i>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <ul class=\"files\" *ngIf=\"multiple\">\r\n <li class=\"file\" *ngFor=\"let file of value; let ix = index\">\r\n <a [href]=\"getUrl(file) | safe: 'url'\" [target]=\"'target_' + ix\">\r\n <i class=\"fas fa-download\"></i>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove, index: ix}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n <ng-container *ngIf=\"isImage; else defaultTemplate\">\r\n <ul class=\"images\" *ngIf=\"!multiple\">\r\n <li class=\"image\" *ngIf=\"value\">\r\n <img alt=\"file image\" [src]=\"getUrl(value) | safe: 'url'\"/>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <ul class=\"images\" *ngIf=\"multiple\">\r\n <li class=\"image\" *ngFor=\"let image of value; let ix = index\">\r\n <img alt=\"file image\" [src]=\"getUrl(image) | safe: 'url'\"/>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove, index: ix}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white))}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:0 10px 10px}.upload .upload-input.drop-allowed{background-color:#00000080;border-color:#a9a9a9}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.upload .upload-input .process-container{min-height:120px;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-process{margin-top:10px;width:120px;height:120px;background:#00000080 center center no-repeat;background-size:cover;display:flex;align-items:center;justify-content:center}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .images,.upload .files{list-style-type:none;margin:10px 0;padding:0;display:flex;gap:5px}.upload .images li,.upload .files li{position:relative}.upload .images li a,.upload .files li a{position:absolute;right:8px;top:8px}.upload .images img,.upload .files img{max-width:100%;max-height:200px;margin:2px;border-radius:5px}.upload .btn-select{display:inline-block;position:relative;cursor:pointer}.upload .btn-select button{display:inline-block;position:relative;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6133
6143
|
}
|
|
6134
6144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: UploadComponent, decorators: [{
|
|
6135
6145
|
type: Component,
|
|
@@ -6137,7 +6147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
6137
6147
|
provide: NG_VALUE_ACCESSOR,
|
|
6138
6148
|
useExisting: forwardRef(() => UploadComponent),
|
|
6139
6149
|
multi: true,
|
|
6140
|
-
}], template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ buttonText | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #defaultRemoveBtn let-remove=\"remove\" let-index=\"index\">\r\n <a class=\"btn btn-danger btn-delete\" (click)=\"remove(index)\">\r\n x\r\n </a>\r\n</ng-template>\r\n\r\n<div class=\"upload\">\r\n <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n <input type=\"file\"\r\n #input\r\n [multiple]=\"multiple\"\r\n [accept]=\"acceptAttr\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDrop()\"\r\n (drop)=\"onDrop()\"\r\n (click)=\"onInputClick($event)\"\r\n (blur)=\"onTouched($event)\"\r\n (change)=\"onInputChange($event)\"/>\r\n <div class=\"process-container\">\r\n <div class=\"upload-process\"\r\n [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\r\n *ngFor=\"let proc of processing\">\r\n <div class=\"upload-progress\">\r\n <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" (click)=\"input.click()\">\r\n <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\r\n [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #defaultTemplate>\r\n <ul class=\"files\" *ngIf=\"!multiple\">\r\n <li class=\"file\" *ngIf=\"value\">\r\n <a [href]=\"getUrl(value) | safe: 'url'\" target=\"target\">\r\n <i class=\"fas fa-download\">download</i>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <ul class=\"files\" *ngIf=\"multiple\">\r\n <li class=\"file\" *ngFor=\"let file of value; let
|
|
6150
|
+
}], template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ buttonText | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #defaultRemoveBtn let-remove=\"remove\" let-index=\"index\">\r\n <a class=\"btn btn-danger btn-delete\" (click)=\"remove(index)\">\r\n x\r\n </a>\r\n</ng-template>\r\n\r\n<div class=\"upload\">\r\n <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n <input type=\"file\"\r\n #input\r\n [multiple]=\"multiple\"\r\n [accept]=\"acceptAttr\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragleave)=\"onDrop()\"\r\n (drop)=\"onDrop()\"\r\n (click)=\"onInputClick($event)\"\r\n (blur)=\"onTouched($event)\"\r\n (change)=\"onInputChange($event)\"/>\r\n <div class=\"process-container\">\r\n <div class=\"upload-process\"\r\n [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\r\n *ngFor=\"let proc of processing\">\r\n <div class=\"upload-progress\">\r\n <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\r\n <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"btn-container\" (click)=\"input.click()\">\r\n <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\r\n [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-template #defaultTemplate>\r\n <ul class=\"files\" *ngIf=\"!multiple\">\r\n <li class=\"file\" *ngIf=\"value\">\r\n <a [href]=\"getUrl(value) | safe: 'url'\" target=\"target\">\r\n <i class=\"fas fa-download\">download</i>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <ul class=\"files\" *ngIf=\"multiple\">\r\n <li class=\"file\" *ngFor=\"let file of value; let ix = index\">\r\n <a [href]=\"getUrl(file) | safe: 'url'\" [target]=\"'target_' + ix\">\r\n <i class=\"fas fa-download\"></i>\r\n </a>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove, index: ix}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </ng-template>\r\n <ng-container *ngIf=\"isImage; else defaultTemplate\">\r\n <ul class=\"images\" *ngIf=\"!multiple\">\r\n <li class=\"image\" *ngIf=\"value\">\r\n <img alt=\"file image\" [src]=\"getUrl(value) | safe: 'url'\"/>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n <ul class=\"images\" *ngIf=\"multiple\">\r\n <li class=\"image\" *ngFor=\"let image of value; let ix = index\">\r\n <img alt=\"file image\" [src]=\"getUrl(image) | safe: 'url'\"/>\r\n <ng-container [ngTemplateOutlet]=\"removeButton || defaultRemoveBtn\"\r\n [ngTemplateOutletContext]=\"{remove: remove, index: ix}\">\r\n </ng-container>\r\n </li>\r\n </ul>\r\n </ng-container>\r\n</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white))}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:0 10px 10px}.upload .upload-input.drop-allowed{background-color:#00000080;border-color:#a9a9a9}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.upload .upload-input .process-container{min-height:120px;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-process{margin-top:10px;width:120px;height:120px;background:#00000080 center center no-repeat;background-size:cover;display:flex;align-items:center;justify-content:center}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--background);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--text)}.upload .images,.upload .files{list-style-type:none;margin:10px 0;padding:0;display:flex;gap:5px}.upload .images li,.upload .files li{position:relative}.upload .images li a,.upload .files li a{position:absolute;right:8px;top:8px}.upload .images img,.upload .files img{max-width:100%;max-height:200px;margin:2px;border-radius:5px}.upload .btn-select{display:inline-block;position:relative;cursor:pointer}.upload .btn-select button{display:inline-block;position:relative;z-index:1}\n"] }]
|
|
6141
6151
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
6142
6152
|
type: Inject,
|
|
6143
6153
|
args: [API_SERVICE]
|