@stemy/ngx-utils 19.2.23 → 19.2.24
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.
|
@@ -6868,7 +6868,7 @@ class UploadComponent {
|
|
|
6868
6868
|
provide: NG_VALUE_ACCESSOR,
|
|
6869
6869
|
useExisting: forwardRef(() => UploadComponent),
|
|
6870
6870
|
multi: true,
|
|
6871
|
-
}], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], 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 #defaultDownloadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ 'button.download' | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n <div class=\"upload-item\" [ngStyle]=\"!isImage ? {} : {backgroundImage: getBgUrl(item)}\">\r\n <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\r\n </div>\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=\"upload-message\"\r\n [ngClass]=\"{'has-value': value?.length}\"\r\n [innerHTML]=\"message | translate | safe:'html'\"\r\n *ngIf=\"message\">\r\n </div>\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: image, index: ix}\"\r\n *ngFor=\"let image of value; let ix = index\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"upload-item\"\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=\"upload-btn\" (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</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.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}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#
|
|
6871
|
+
}], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], 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 #defaultDownloadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ 'button.download' | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n <div class=\"upload-item\" [ngStyle]=\"!isImage ? {} : {backgroundImage: getBgUrl(item)}\">\r\n <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\r\n </div>\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=\"upload-message\"\r\n [ngClass]=\"{'has-value': value?.length}\"\r\n [innerHTML]=\"message | translate | safe:'html'\"\r\n *ngIf=\"message\">\r\n </div>\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: image, index: ix}\"\r\n *ngFor=\"let image of value; let ix = index\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"upload-item\"\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=\"upload-btn\" (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</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.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}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#ffffffbf center center no-repeat;background-size:cover;display:flex;overflow:hidden}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;align-self:center;justify-self:center;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 .upload-input.drop-allowed{background-color:#0003;border-color:gray}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.upload a.remove-item-btn:before,.upload a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.upload a.remove-item-btn:after{--rotation: -45deg}\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 }); }
|
|
6872
6872
|
}
|
|
6873
6873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: UploadComponent, decorators: [{
|
|
6874
6874
|
type: Component,
|
|
@@ -6876,7 +6876,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
6876
6876
|
provide: NG_VALUE_ACCESSOR,
|
|
6877
6877
|
useExisting: forwardRef(() => UploadComponent),
|
|
6878
6878
|
multi: true,
|
|
6879
|
-
}], 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 #defaultDownloadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ 'button.download' | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n <div class=\"upload-item\" [ngStyle]=\"!isImage ? {} : {backgroundImage: getBgUrl(item)}\">\r\n <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\r\n </div>\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=\"upload-message\"\r\n [ngClass]=\"{'has-value': value?.length}\"\r\n [innerHTML]=\"message | translate | safe:'html'\"\r\n *ngIf=\"message\">\r\n </div>\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: image, index: ix}\"\r\n *ngFor=\"let image of value; let ix = index\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"upload-item\"\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=\"upload-btn\" (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</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.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}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#
|
|
6879
|
+
}], 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 #defaultDownloadBtn let-loading=\"loading\">\r\n <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\r\n {{ 'button.download' | translate }}\r\n </a>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\r\n <div class=\"upload-item\" [ngStyle]=\"!isImage ? {} : {backgroundImage: getBgUrl(item)}\">\r\n <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\r\n </div>\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=\"upload-message\"\r\n [ngClass]=\"{'has-value': value?.length}\"\r\n [innerHTML]=\"message | translate | safe:'html'\"\r\n *ngIf=\"message\">\r\n </div>\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: image, index: ix}\"\r\n *ngFor=\"let image of value; let ix = index\">\r\n </ng-container>\r\n </ng-container>\r\n\r\n <div class=\"upload-item\"\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=\"upload-btn\" (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</div>\r\n", styles: [".upload{--background: var(--primary-color, var(--mat-sys-primary, black));--text: var(--text-color, var(--mat-sys-on-primary, white));--item-size: 120px;--item-radius: 5px;--message-size: 20px;--message-color: #7e7e7e;--message-drop-color: #efefef;--remove-bg: var(--primary-color, rgba(0, 0, 0, .2));--remove-color: #ffffff;--remove-size: 18px;--remove-distance: 4px;--remove-spacing: 8px;--remove-top-distance: var(--remove-distance);--remove-right-distance: var(--remove-distance)}.upload .upload-input{width:100%;border:2px #bfbfbf dashed;border-radius:var(--item-radius);background-color:#0000000d;transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.upload .upload-input input{display:block;position:absolute;inset:0;opacity:0}.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}.upload .upload-input .upload-message.has-value{display:none}.upload .upload-input .upload-container{position:relative;pointer-events:none;min-height:var(--item-size);display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}.upload .upload-input .upload-item{position:relative;pointer-events:auto;width:var(--item-size);height:var(--item-size);border-radius:var(--item-radius);background:#ffffffbf center center no-repeat;background-size:cover;display:flex;overflow:hidden}.upload .upload-input .upload-progress{position:relative;width:90%;height:15px;border:1px solid darkgrey;align-self:center;justify-self:center;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 .upload-input.drop-allowed{background-color:#0003;border-color:gray}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--remove-top-distance);right:var(--remove-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.upload a.remove-item-btn:before,.upload a.remove-item-btn:after{content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--remove-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--remove-color);transition:.2s ease}.upload a.remove-item-btn:after{--rotation: -45deg}\n"] }]
|
|
6880
6880
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
|
|
6881
6881
|
type: Inject,
|
|
6882
6882
|
args: [API_SERVICE]
|