@stemy/ngx-utils 19.2.0 → 19.2.1
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.
|
@@ -5963,6 +5963,7 @@ class UploadComponent {
|
|
|
5963
5963
|
this.fileImageCache = [];
|
|
5964
5964
|
this.buttonText = "button.select-files";
|
|
5965
5965
|
this.onUploaded = new EventEmitter();
|
|
5966
|
+
this.onRemove = new EventEmitter();
|
|
5966
5967
|
this.onChange = () => {
|
|
5967
5968
|
};
|
|
5968
5969
|
this.onTouched = () => {
|
|
@@ -6050,14 +6051,6 @@ class UploadComponent {
|
|
|
6050
6051
|
});
|
|
6051
6052
|
input.value = "";
|
|
6052
6053
|
}
|
|
6053
|
-
delete(index) {
|
|
6054
|
-
if (this.multiple) {
|
|
6055
|
-
const current = Array.from(this.value || []);
|
|
6056
|
-
current.splice(index, 1);
|
|
6057
|
-
this.writeValue(current);
|
|
6058
|
-
}
|
|
6059
|
-
this.writeValue(null);
|
|
6060
|
-
}
|
|
6061
6054
|
getUrl(image) {
|
|
6062
6055
|
if (ObjectUtils.isBlob(image)) {
|
|
6063
6056
|
let cache = this.fileImageCache.find(t => t.file == image);
|
|
@@ -6132,11 +6125,11 @@ class UploadComponent {
|
|
|
6132
6125
|
return results.filter(r => r !== null);
|
|
6133
6126
|
}
|
|
6134
6127
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6135
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", accept: "accept", baseUrl: "baseUrl", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded" }, providers: [{
|
|
6128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", accept: "accept", baseUrl: "baseUrl", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [{
|
|
6136
6129
|
provide: NG_VALUE_ACCESSOR,
|
|
6137
6130
|
useExisting: forwardRef(() => UploadComponent),
|
|
6138
6131
|
multi: true,
|
|
6139
|
-
}], queries: [{ propertyName: "
|
|
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 i = index\">\r\n <a [href]=\"getUrl(file) | safe: 'url'\" [target]=\"'target_' + i\">\r\n <i class=\"fas fa-download\"></i>\r\n </a>\r\n <a class=\"btn btn-danger btn-delete\" (click)=\"remove(i)\">x</a>\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 }); }
|
|
6140
6133
|
}
|
|
6141
6134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: UploadComponent, decorators: [{
|
|
6142
6135
|
type: Component,
|
|
@@ -6144,7 +6137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
6144
6137
|
provide: NG_VALUE_ACCESSOR,
|
|
6145
6138
|
useExisting: forwardRef(() => UploadComponent),
|
|
6146
6139
|
multi: true,
|
|
6147
|
-
}], template: "<ng-template #
|
|
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 i = index\">\r\n <a [href]=\"getUrl(file) | safe: 'url'\" [target]=\"'target_' + i\">\r\n <i class=\"fas fa-download\"></i>\r\n </a>\r\n <a class=\"btn btn-danger btn-delete\" (click)=\"remove(i)\">x</a>\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"] }]
|
|
6148
6141
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
6149
6142
|
type: Inject,
|
|
6150
6143
|
args: [API_SERVICE]
|
|
@@ -6169,9 +6162,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
6169
6162
|
type: Input
|
|
6170
6163
|
}], onUploaded: [{
|
|
6171
6164
|
type: Output
|
|
6172
|
-
}],
|
|
6165
|
+
}], onRemove: [{
|
|
6166
|
+
type: Output
|
|
6167
|
+
}], uploadButton: [{
|
|
6168
|
+
type: ContentChild,
|
|
6169
|
+
args: ["uploadButton"]
|
|
6170
|
+
}], removeButton: [{
|
|
6173
6171
|
type: ContentChild,
|
|
6174
|
-
args: ["
|
|
6172
|
+
args: ["removeButton"]
|
|
6175
6173
|
}] } });
|
|
6176
6174
|
|
|
6177
6175
|
// --- Pipes ---
|