@stemy/ngx-utils 19.9.37 → 19.9.38
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.
|
@@ -9630,7 +9630,7 @@ class UploadComponent {
|
|
|
9630
9630
|
});
|
|
9631
9631
|
return process;
|
|
9632
9632
|
});
|
|
9633
|
-
const baseUrl = this.baseUrl || this.api.url("assets");
|
|
9633
|
+
const baseUrl = this.uploadUrl || this.baseUrl || this.api.url("assets");
|
|
9634
9634
|
const requests = this.processing.map(async (p) => {
|
|
9635
9635
|
await p.promise;
|
|
9636
9636
|
if (this.inline) {
|
|
@@ -9673,7 +9673,7 @@ class UploadComponent {
|
|
|
9673
9673
|
return this.acceptTypes.includes(type);
|
|
9674
9674
|
}
|
|
9675
9675
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.22", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9676
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", inline: "inline", accept: "accept", baseUrl: "baseUrl", message: "message", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [
|
|
9676
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.22", type: UploadComponent, isStandalone: false, selector: "upload", inputs: { value: "value", disabled: "disabled", inline: "inline", accept: "accept", baseUrl: "baseUrl", uploadUrl: "uploadUrl", message: "message", multiple: "multiple", buttonText: "buttonText", makeUpload: "makeUpload", preProcess: "preProcess" }, outputs: { onUploaded: "onUploaded", onRemove: "onRemove" }, providers: [
|
|
9677
9677
|
{ provide: NG_VALUE_ACCESSOR, useExisting: UploadComponent, multi: true }
|
|
9678
9678
|
], viewQueries: [{ propertyName: "uploadBtn", first: true, predicate: ["uploadBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemBgTemplate let-bg=\"bg\">\r\n @if (bg) {\r\n <div class=\"upload-item-bg\" [ngStyle]=\"{backgroundImage: `url('${bg}')`}\">\r\n <div>\r\n <img alt=\"item image\" [src]=\"bg | safe: 'url'\" />\r\n </div>\r\n </div>\r\n }\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n <div class=\"upload-item\">\r\n <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\r\n [ngTemplateOutletContext]=\"{bg: isImage || (item | isType: 'file') ? getUrl(item) : null}\">\r\n </ng-container>\r\n @if (!disabled) {\r\n <close-btn class=\"remove-item-btn\" (click)=\"removeItem(index)\"></close-btn>\r\n }\r\n<!-- <btn size=\"small\" class=\"download-item-btn\" icon=\"download\"></btn>-->\r\n </div>\r\n</ng-template>\r\n\r\n<div class=\"file-upload\" [ngClass]=\"{disabled: disabled}\">\r\n <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\r\n <input type=\"file\"\r\n #input\r\n [disabled]=\"disabled\"\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 @if (message) {\r\n <div class=\"upload-message\"\r\n [ngClass]=\"{'has-value': $any(value)?.length}\"\r\n [innerHTML]=\"message | translate | safe:'html'\">\r\n </div>\r\n }\r\n <div class=\"upload-container\">\r\n\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{item: value, index: 0}\"\r\n *ngIf=\"!multiple && value\">\r\n </ng-container>\r\n <ng-container *ngIf=\"multiple\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{item: item, index: ix}\"\r\n *ngFor=\"let item of $any(value); let ix = index\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"upload-item\" *ngFor=\"let proc of processing\">\r\n <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\r\n [ngTemplateOutletContext]=\"{bg: proc.preview}\">\r\n </ng-container>\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\r\n </div>\r\n @if (!disabled) {\r\n <btn class=\"upload-btn\" #uploadBtn [label]=\"buttonText\" (click)=\"input.click()\"></btn>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".file-upload{--upload-bg-lightness: 85%;--upload-bg-opacity: 1;--upload-padding: 5px;--upload-border-width: 2px;--upload-border-color: rgba(0, 0, 0, .25);--upload-progress-bg: var(--primary-color, var(--mat-sys-primary, black));--upload-progress-text: var(--text-color, var(--mat-sys-on-primary, white));--upload-item-size: 120px;--upload-item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #474747;--btn-distance: 3px;--btn-top-distance: var(--btn-distance);--btn-left-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);margin:5px 0}.file-upload *{box-sizing:border-box}.file-upload.disabled{--upload-bg-lightness: 75%}.file-upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.file-upload input[type=file]::file-selector-button{width:100%;height:100%}.file-upload .upload-input{width:100%;border:var(--upload-border-width) var(--upload-border-color) dashed;border-radius:var(--upload-item-radius);background-color:hsl(0,0%,var(--upload-bg-lightness),var(--upload-bg-opacity));transition:.2s;flex-wrap:wrap;position:relative;padding:var(--upload-padding)}.file-upload .upload-input .upload-message{position:absolute;display:flex;align-items:center;justify-content:center;width:100%;height:100%;top:0;left:0;pointer-events:none;font-size:var(--message-size);color:var(--message-color);transition:.2s}.file-upload .upload-input .upload-message.has-value{display:none}.file-upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--upload-item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.file-upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--upload-item-size);height:var(--upload-item-size);border-radius:var(--upload-item-radius);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.file-upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.file-upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;backdrop-filter:blur(15px)}.file-upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.file-upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;background:#ffffff80}.file-upload .upload-input .upload-progress-bar{position:absolute;height:15px;background:var(--upload-progress-bg);top:0}.file-upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--upload-progress-text)}.file-upload .upload-input.drop-allowed{--upload-bg-lightness: 95%}.file-upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.file-upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.file-upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.file-upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\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: "component", type: BtnComponent, selector: "btn", inputs: ["label", "tooltip", "icon", "disabled", "path", "type", "size"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: IsTypePipe, name: "isType" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
9679
9679
|
}
|
|
@@ -9698,6 +9698,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.22", ngImpo
|
|
|
9698
9698
|
type: Input
|
|
9699
9699
|
}], baseUrl: [{
|
|
9700
9700
|
type: Input
|
|
9701
|
+
}], uploadUrl: [{
|
|
9702
|
+
type: Input
|
|
9701
9703
|
}], message: [{
|
|
9702
9704
|
type: Input
|
|
9703
9705
|
}], multiple: [{
|