@stemy/ngx-utils 19.6.3 → 19.6.5

package/fesm2022/stemy-ngx-utils.mjs

@@ -2017,6 +2017,17 @@ class MathUtils {
 function isBrowser() {
     return typeof window !== "undefined";
 }
+/**
+ * Returns an elements root
+ * @param {HTMLElement} elem The element which root we need
+ * @return {DocumentOrShadowRoot} The document or the elements shadow root
+ */
+function getRoot(elem) {
+    if (!isBrowser())
+        return null;
+    const root = elem?.getRootNode();
+    return root || document;
+}
 /**
  * Returns a hash code from anything
  * @param  {string} obj The object to hash.
@@ -6685,6 +6696,7 @@ class BtnComponent {
         this.type = input("primary");
         this.size = input("normal");
         this.buttonType = inject(BUTTON_TYPE);
+        this.element = inject(ElementRef);
         this.buttonProps = computed(() => {
             return {
                 label: this.label(),
@@ -6696,12 +6708,15 @@ class BtnComponent {
             };
         });
     }
+    contains(target) {
+        return !(target instanceof HTMLElement) || this.element.nativeElement?.contains(target);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BtnComponent, isStandalone: false, selector: "btn", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"buttonType\"\n              [ngComponentOutletInputs]=\"buttonProps()\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.14", type: BtnComponent, isStandalone: false, selector: "btn", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container [ngComponentOutlet]=\"buttonType\"\n              [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\n", dependencies: [{ kind: "directive", type: i1$3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BtnComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "btn", template: "<ng-container [ngComponentOutlet]=\"buttonType\"\n              [ngComponentOutletInputs]=\"buttonProps()\"></ng-container>\n" }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, selector: "btn", template: "<ng-container [ngComponentOutlet]=\"buttonType\"\n              [ngComponentOutletInputs]=\"$any(buttonProps())\"></ng-container>\n" }]
         }] });
 
 class IconComponent {
@@ -6725,12 +6740,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
         }] });
 
 class BtnDefaultComponent {
+    get bsSize() {
+        return this.size === "small" ? "btn-sm" : "btn-md";
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BtnDefaultComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BtnDefaultComponent, isStandalone: false, selector: "btn-default", inputs: { label: "label", tooltip: "tooltip", icon: "icon", disabled: "disabled", type: "type", size: "size" }, ngImport: i0, template: "<div class=\"default-btn btn\"\n     async-method-target\n     [title]=\"!tooltip ? '' : tooltip | translate\"\n     [ngClass]=\"['btn-' + type, 'btn-' + size]\">\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</div>\n", styles: [".default-btn{display:flex;gap:5px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AsyncMethodTargetDirective, selector: "[async-method-target]" }, { kind: "component", type: IconComponent, selector: "icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: BtnDefaultComponent, isStandalone: false, selector: "btn-default", inputs: { label: "label", tooltip: "tooltip", icon: "icon", disabled: "disabled", type: "type", size: "size" }, ngImport: i0, template: "<button class=\"default-btn btn\"\n        type=\"button\"\n        async-method-target\n        [title]=\"!tooltip ? '' : tooltip | translate\"\n        [ngClass]=\"['btn-' + type, bsSize]\">\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</button>\n", styles: [".default-btn{display:flex;gap:5px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: AsyncMethodTargetDirective, selector: "[async-method-target]" }, { kind: "component", type: IconComponent, selector: "icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: BtnDefaultComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "btn-default", template: "<div class=\"default-btn btn\"\n     async-method-target\n     [title]=\"!tooltip ? '' : tooltip | translate\"\n     [ngClass]=\"['btn-' + type, 'btn-' + size]\">\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</div>\n", styles: [".default-btn{display:flex;gap:5px}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "btn-default", template: "<button class=\"default-btn btn\"\n        type=\"button\"\n        async-method-target\n        [title]=\"!tooltip ? '' : tooltip | translate\"\n        [ngClass]=\"['btn-' + type, bsSize]\">\n    <icon [name]=\"icon\" *ngIf=\"icon\"></icon>\n    <span *ngIf=\"label\">{{ label | translate }}</span>\n</button>\n", styles: [".default-btn{display:flex;gap:5px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
@@ -6745,6 +6763,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Input
             }] } });
 
+class CloseBtnComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CloseBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: CloseBtnComponent, isStandalone: false, selector: "close-btn", ngImport: i0, template: "", isInline: true, styles: ["close-btn{--close-bg: var(--primary-color, rgba(0, 0, 0, .3));--close-color: #ffffff;--close-size: 18px;--close-distance: 4px;--close-spacing: 8px;position:relative;display:block;width:var(--close-size);height:var(--close-size);cursor:pointer;transition:.2s ease;background-color:var(--close-bg);border-radius:50%}close-btn:before,close-btn:after{--rotation: 45deg;content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--close-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--close-color);transition:.2s ease}close-btn:after{--rotation: -45deg}\n"], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: CloseBtnComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, selector: "close-btn", template: "", encapsulation: ViewEncapsulation.None, styles: ["close-btn{--close-bg: var(--primary-color, rgba(0, 0, 0, .3));--close-color: #ffffff;--close-size: 18px;--close-distance: 4px;--close-spacing: 8px;position:relative;display:block;width:var(--close-size);height:var(--close-size);cursor:pointer;transition:.2s ease;background-color:var(--close-bg);border-radius:50%}close-btn:before,close-btn:after{--rotation: 45deg;content:\"\";position:absolute;top:50%;left:50%;width:calc(100% - var(--close-spacing));transform:translate(-50%,-50%) rotate(var(--rotation));height:1px;background:var(--close-color);transition:.2s ease}close-btn:after{--rotation: -45deg}\n"] }]
+        }] });
+
 class ChipsComponent {
     constructor(cdr) {
         this.cdr = cdr;
@@ -6935,13 +6962,13 @@ class ChipsComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChipsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ChipsComponent, isStandalone: false, selector: "chips", inputs: { value: "value", multiple: "multiple", disabled: "disabled", type: "type", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", step: "step", placeholder: "placeholder", unique: "unique", options: "options" }, outputs: { valueChange: "valueChange" }, providers: [
             { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-        ], viewQueries: [{ propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chips\" [ngClass]=\"{disabled: disabled}\" #chipContainer>\n    <input class=\"chips-input\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                <span *ngIf=\"item.picture\" class=\"chip-picture\">\n                    <img [src]=\"item.picture | safe:'url'\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n                </span>\n                <span class=\"chips-label\">{{ item.label }} </span>\n                <span class=\"chips-remove\" (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></span>\n            </a>\n        </ng-container>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";.chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips.disabled{opacity:.75}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips .chips-picture{width:28px;height:28px;overflow:hidden;margin-right:5px}.chips .chips-picture img{max-height:100%}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips .chips-remove{position:relative;background:#0003;margin-right:calc(var(--chips-btn-gap) * -1);width:1.2rem;height:1.2rem;font-size:12px;cursor:pointer;border-radius:5px}.chips .chips-remove:after{content:\"\\2716\";position:absolute;top:50%;left:50%;translate:-50% -50%}.select-option{display:flex;gap:8px;align-items:center;justify-content:center}.select-option .select-option-picture{width:32px;height:32px;overflow:hidden}.select-option .select-option-picture img{max-height:100%}.select-option .select-option-label{flex: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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "chipContainer", first: true, predicate: ["chipContainer"], descendants: true }, { propertyName: "chipButtons", first: true, predicate: ["chipButtons"], descendants: true }, { propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"chips\" [ngClass]=\"{disabled: disabled}\" #chipContainer>\n    <input class=\"chips-input\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                <span *ngIf=\"item.picture\" class=\"chip-picture\">\n                    <img [src]=\"item.picture | safe:'url'\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n                </span>\n                <span class=\"chips-label\">{{ item.label }} </span>\n                <close-btn class=\"chips-remove\" (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\n            </a>\n        </ng-container>\n    </div>\n</div>\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips .chips-picture{width:28px;height:28px;overflow:hidden;margin-right:5px}.chips .chips-picture img{max-height:100%}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.select-option{display:flex;gap:8px;align-items:center;justify-content:center}.select-option .select-option-picture{width:32px;height:32px;overflow:hidden}.select-option .select-option-picture img{max-height:100%}.select-option .select-option-label{flex: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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CloseBtnComponent, selector: "close-btn" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ChipsComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "chips", providers: [
                         { provide: NG_VALUE_ACCESSOR, useExisting: ChipsComponent, multi: true }
-                    ], template: "<div class=\"chips\" [ngClass]=\"{disabled: disabled}\" #chipContainer>\n    <input class=\"chips-input\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                <span *ngIf=\"item.picture\" class=\"chip-picture\">\n                    <img [src]=\"item.picture | safe:'url'\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n                </span>\n                <span class=\"chips-label\">{{ item.label }} </span>\n                <span class=\"chips-remove\" (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></span>\n            </a>\n        </ng-container>\n    </div>\n</div>\n", styles: ["@charset \"UTF-8\";.chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips.disabled{opacity:.75}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips .chips-picture{width:28px;height:28px;overflow:hidden;margin-right:5px}.chips .chips-picture img{max-height:100%}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips .chips-remove{position:relative;background:#0003;margin-right:calc(var(--chips-btn-gap) * -1);width:1.2rem;height:1.2rem;font-size:12px;cursor:pointer;border-radius:5px}.chips .chips-remove:after{content:\"\\2716\";position:absolute;top:50%;left:50%;translate:-50% -50%}.select-option{display:flex;gap:8px;align-items:center;justify-content:center}.select-option .select-option-picture{width:32px;height:32px;overflow:hidden}.select-option .select-option-picture img{max-height:100%}.select-option .select-option-label{flex:1}\n"] }]
+                    ], template: "<div class=\"chips\" [ngClass]=\"{disabled: disabled}\" #chipContainer>\n    <input class=\"chips-input\"\n           [type]=\"type == 'number' ? 'number': 'text'\"\n           [min]=\"min\"\n           [max]=\"max\"\n           [step]=\"step\"\n           [disabled]=\"disabled\"\n           [placeholder]=\"valueOptions.length == 0 && placeholder | translate\"\n           [ngStyle]=\"inputStyles\"\n           (blur)=\"onBlur($event)\"\n           (keyup)=\"onInput($event)\"\n           #chipInput/>\n    <div class=\"chips-buttons\" #chipButtons [ngClass]=\"{disabled: disabled}\" (resize)=\"onResize()\">\n        <ng-container *ngFor=\"let item of valueOptions; let ix = index; trackBy:trackBy\">\n            <a class=\"chips-button\" [ngClass]=\"'chips-' + statuses[ix]\" (dblclick)=\"removeItem($event, ix)\">\n                <span *ngIf=\"item.picture\" class=\"chip-picture\">\n                    <img [src]=\"item.picture | safe:'url'\"\n                         referrerpolicy=\"no-referrer\" [attr.alt]=\"item.label\">\n                </span>\n                <span class=\"chips-label\">{{ item.label }} </span>\n                <close-btn class=\"chips-remove\" (click)=\"removeItem($event, ix)\" *ngIf=\"!disabled\"></close-btn>\n            </a>\n        </ng-container>\n    </div>\n</div>\n", styles: [".chips{--chips-border-size: var(--border-size, 1px);--chips-border-radius: var(--border-radius, 5px);--chips-bg-color: var(--bg-color, #ffffff);--chips-border-color: var(--border-color, #ced4da);--chips-text-color: var(--text-color, #151515);--chips-text-size: var(--text-size, 16px);--chips-padding-vertical: 6px;--chips-padding-horizontal: 12px;--chips-padding: var(--chips-padding-vertical) var(--chips-padding-horizontal);--chips-btn-padding: 12px;--chips-btn-gap: calc(var(--chips-btn-padding) / 2);--chips-btn-color: white;--chips-btn-valid-color: rgba(200, 255, 200, .7);--chips-btn-invalid-color: rgba(255, 200, 200, .7);position:relative;margin:5px 0;font-size:var(--chips-text-size);padding:var(--chips-padding);background:var(--chips-bg-color);color:var(--chips-text-color);border:var(--chips-border-size) solid var(--chips-border-color);border-radius:var(--chips-border-radius)}.chips *{box-sizing:border-box}.chips .chips-input{background:var(--chips-bg-color);padding:var(--chips-padding);font-size:var(--chips-text-size);outline:none;border:none;width:100%;-webkit-user-select:none;user-select:none;font-weight:400}.chips .chips-buttons{position:absolute;top:var(--chips-padding-vertical);left:var(--chips-padding-horizontal);max-width:calc(100% - var(--chips-padding-horizontal) * 2);display:flex;gap:5px;overflow:auto;border-radius:var(--chips-border-radius)}.chips .chips-button{background:var(--chipd-btn-color);color:var(--chips-text-color);border:var(--chips-border-size) solid rgba(0,0,0,.2);border-radius:var(--chips-border-radius);padding:var(--chips-padding-vertical) var(--chips-btn-gap) var(--chips-padding-vertical) var(--chips-btn-padding);-webkit-user-select:none;user-select:none;font-weight:400;outline:none;display:flex;gap:var(--chips-btn-gap);justify-content:center;align-items:center;line-height:1.2rem;text-decoration:none}.chips .chips-button.chips-valid{--chipd-btn-color: var(--chips-btn-valid-color) }.chips .chips-button.chips-invalid{--chipd-btn-color: var(--chips-btn-invalid-color) }.chips .chips-picture{width:28px;height:28px;overflow:hidden;margin-right:5px}.chips .chips-picture img{max-height:100%}.chips .chips-label{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips.disabled{opacity:.75}.chips.disabled .chips-button{padding-right:var(--chips-btn-padding)}.select-option{display:flex;gap:8px;align-items:center;justify-content:center}.select-option .select-option-picture{width:32px;height:32px;overflow:hidden}.select-option .select-option-picture img{max-height:100%}.select-option .select-option-label{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { value: [{
                 type: Input
             }], multiple: [{
@@ -7071,7 +7098,7 @@ class DropListComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => DropListComponent),
                 multi: true,
-            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <div class=\"drop-list-message\"\n         [ngClass]=\"{'has-value': value?.length}\"\n         [innerHTML]=\"message | translate | safe:'html'\"\n         *ngIf=\"message\">\n    </div>\n    <ng-container *ngFor=\"let id of value; let ix = index\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{--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);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-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}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list 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%}.drop-list a.remove-item-btn:before,.drop-list 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}.drop-list 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: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+            }], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <div class=\"drop-list-message\"\n         [ngClass]=\"{'has-value': value?.length}\"\n         [innerHTML]=\"message | translate | safe:'html'\"\n         *ngIf=\"message\">\n    </div>\n    <ng-container *ngFor=\"let id of value; let ix = index\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{--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;--btn-distance: 4px;--remove-spacing: 8px;--btn-top-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-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}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.drop-list a.remove-item-btn:before,.drop-list 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}.drop-list 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: "pipe", type: GetValuePipe, name: "getValue" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DropListComponent, decorators: [{
             type: Component,
@@ -7079,7 +7106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DropListComponent),
                             multi: true,
-                        }], template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <div class=\"drop-list-message\"\n         [ngClass]=\"{'has-value': value?.length}\"\n         [innerHTML]=\"message | translate | safe:'html'\"\n         *ngIf=\"message\">\n    </div>\n    <ng-container *ngFor=\"let id of value; let ix = index\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{--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);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-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}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list 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%}.drop-list a.remove-item-btn:before,.drop-list 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}.drop-list a.remove-item-btn:after{--rotation: -45deg}\n"] }]
+                        }], template: "<ng-template #defaultTemplate let-item=\"item\">\n    <div class=\"drop-list-item-label\">\n        {{ item | getValue:labelField }}\n    </div>\n</ng-template>\n<div class=\"drop-list\"\n     #list\n     (dragenter)=\"onDragEnter($event, list, this)\"\n     (dragleave)=\"onDragLeave($event, list)\"\n     (drop)=\"onDrop($event, list)\">\n    <div class=\"drop-list-message\"\n         [ngClass]=\"{'has-value': value?.length}\"\n         [innerHTML]=\"message | translate | safe:'html'\"\n         *ngIf=\"message\">\n    </div>\n    <ng-container *ngFor=\"let id of value; let ix = index\">\n        <div class=\"drop-list-item\">\n            <ng-template #noItemTemplate>\n                <div class=\"drop-list-item-label just-id\">\n                    {{ id }}\n                </div>\n            </ng-template>\n            <ng-container [ngTemplateOutlet]=\"itemTemplate || defaultTemplate\"\n                          [ngTemplateOutletContext]=\"{item: valueMap[id], id: id, remove: remove}\"\n                          *ngIf=\"valueMap[id]; else noItemTemplate\"></ng-container>\n            <a class=\"remove-item-btn\" (click)=\"remove(ix)\"></a>\n        </div>\n    </ng-container>\n</div>\n", styles: [".drop-list{--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;--btn-distance: 4px;--remove-spacing: 8px;--btn-top-distance: var(--btn-distance);--btn-right-distance: var(--btn-distance);min-height:100px;border:2px #bfbfbf dashed;border-radius:10px;padding:10px;position:relative;display:flex;align-items:flex-start;justify-content:left;gap:10px;background-color:#0000000d;transition:.2s;flex-wrap:wrap}.drop-list .drop-list-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}.drop-list .drop-list-message.has-value{display:none}.drop-list .drop-list-item{position:relative;background:#0003;padding:7px 23px 7px 10px;border-radius:5px;-webkit-user-select:none;user-select:none}.drop-list .drop-list-item-label:not(.just-id){min-width:50px;text-align:center}.drop-list .drop-list-item-label.just-id{max-width:100px;overflow:hidden;text-overflow:ellipsis;color:gray}.drop-list .drop-list-item-delete{font-size:14px;line-height:14px;text-align:center;cursor:pointer;background:#fff;border-radius:2px;height:14px;width:15px;position:absolute;top:4px;right:4px}.drop-list.drop-allowed{background-color:#0003;border-color:gray}.drop-list.drop-allowed .drop-list-message{color:var(--message-drop-color)}.drop-list a.remove-item-btn{--rotation: 45deg;position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance);width:var(--remove-size);height:var(--remove-size);cursor:pointer;transition:.2s ease;background-color:var(--remove-bg);border-radius:50%}.drop-list a.remove-item-btn:before,.drop-list 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}.drop-list a.remove-item-btn:after{--rotation: -45deg}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { disabled: [{
                 type: Input
             }], unique: [{
@@ -7214,11 +7241,11 @@ class PaginationMenuComponent {
         this.pages = pages;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginationMenuComponent, deps: [{ token: StateService }, { token: PaginationDirective }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PaginationMenuComponent, isStandalone: false, selector: "pagination-menu", inputs: { maxSize: "maxSize", urlParam: "urlParam", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\n        </li>\n    </ul>\n</div>\n", styles: [".pagination-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-border-radius: var(--border-radius, 5px);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-content: \"\";--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pagination-menu *{box-sizing:border-box}.pagination-menu ul{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:var(--pg-border-radius);overflow:hidden;min-width:fit-content;display:flex}.pagination-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pagination-menu li:last-child{border-right:none}.pagination-menu li:not(.disabled):hover,.pagination-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pagination-menu li.disabled a{cursor:default}.pagination-menu a{display:block;min-width:36px;min-height:36px;height:auto;line-height:24px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pagination-menu a.boundary-link,.pagination-menu a.direction-link{position:relative}.pagination-menu a.boundary-link:before,.pagination-menu a.boundary-link:after,.pagination-menu a.direction-link:before,.pagination-menu a.direction-link:after{content:var(--pg-arrow-content);position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pagination-menu a.direction-link:before{display:none}.pagination-menu a.direction-link:after{translate:-50% 0}.pagination-menu a.boundary-link:before{translate:-100% 0}.pagination-menu a.boundary-link.previous:before,.pagination-menu a.boundary-link.previous:after,.pagination-menu a.direction-link.previous:before,.pagination-menu a.direction-link.previous:after{rotate:180deg}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: PaginationMenuComponent, isStandalone: false, selector: "pagination-menu", inputs: { maxSize: "maxSize", urlParam: "urlParam", directionLinks: "directionLinks", boundaryLinks: "boundaryLinks" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"pg-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pg-list\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\n        </li>\n    </ul>\n</div>\n", styles: [".pg-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-border-radius: var(--border-radius, 5px);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-content: \"\";--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pg-menu *{box-sizing:border-box}.pg-menu ul.pg-list{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:var(--pg-border-radius);overflow:hidden;min-width:fit-content;display:flex}.pg-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pg-menu li:last-child{border-right:none}.pg-menu li:not(.disabled):hover,.pg-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pg-menu li.disabled a{cursor:default}.pg-menu a{display:block;min-width:36px;min-height:36px;height:auto;line-height:24px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pg-menu a.boundary-link,.pg-menu a.direction-link{position:relative}.pg-menu a.boundary-link:before,.pg-menu a.boundary-link:after,.pg-menu a.direction-link:before,.pg-menu a.direction-link:after{content:var(--pg-arrow-content);position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pg-menu a.direction-link:before{display:none}.pg-menu a.direction-link:after{translate:-50% 0}.pg-menu a.boundary-link:before{translate:-100% 0}.pg-menu a.boundary-link.previous:before,.pg-menu a.boundary-link.previous:after,.pg-menu a.direction-link.previous:before,.pg-menu a.direction-link.previous:after{rotate:180deg}\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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: PaginationMenuComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "pagination-menu", template: "<div class=\"pagination-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pagination\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\n        </li>\n    </ul>\n</div>\n", styles: [".pagination-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-border-radius: var(--border-radius, 5px);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-content: \"\";--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pagination-menu *{box-sizing:border-box}.pagination-menu ul{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:var(--pg-border-radius);overflow:hidden;min-width:fit-content;display:flex}.pagination-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pagination-menu li:last-child{border-right:none}.pagination-menu li:not(.disabled):hover,.pagination-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pagination-menu li.disabled a{cursor:default}.pagination-menu a{display:block;min-width:36px;min-height:36px;height:auto;line-height:24px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pagination-menu a.boundary-link,.pagination-menu a.direction-link{position:relative}.pagination-menu a.boundary-link:before,.pagination-menu a.boundary-link:after,.pagination-menu a.direction-link:before,.pagination-menu a.direction-link:after{content:var(--pg-arrow-content);position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pagination-menu a.direction-link:before{display:none}.pagination-menu a.direction-link:after{translate:-50% 0}.pagination-menu a.boundary-link:before{translate:-100% 0}.pagination-menu a.boundary-link.previous:before,.pagination-menu a.boundary-link.previous:after,.pagination-menu a.direction-link.previous:before,.pagination-menu a.direction-link.previous:after{rotate:180deg}\n"] }]
+            args: [{ standalone: false, encapsulation: ViewEncapsulation.None, selector: "pagination-menu", template: "<div class=\"pg-menu\" *ngIf=\"pagination.total > pagination.itemsPerPage\">\n    <ul class=\"pg-list\">\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link previous\" (click)=\"paginate(1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasPrev}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link previous\" (click)=\"paginate(pagination.page - 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{active: pagination.page == page}\" *ngFor=\"let page of pages\">\n            <a class=\"page-link\" [ngClass]=\"{active: pagination.page == page}\" (click)=\"paginate(page)\">{{ page }}</a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"directionLinks\">\n            <a class=\"page-link direction-link\" (click)=\"paginate(pagination.page + 1)\"></a>\n        </li>\n        <li class=\"page-item\" [ngClass]=\"{disabled: !hasNext}\" *ngIf=\"boundaryLinks\">\n            <a class=\"page-link boundary-link\" (click)=\"paginate(pagination.maxPage)\"></a>\n        </li>\n    </ul>\n</div>\n", styles: [".pg-menu{--pg-border-size: var(--border-size, 1px);--pg-bg-color: var(--bg-color, #ffffff);--pg-border-color: var(--border-color, #ced4da);--pg-border-radius: var(--border-radius, 5px);--pg-highlight-color: var(--highlight-color, var(--primary-color, #888888));--pg-highlight-text-color: var(--highlight-text-color, #ffffff);--pg-text-color: var(--text-color, #151515);--pg-arrow-content: \"\";--pg-arrow-size: var(--arrow-size, 6px);--pg-arrow-space: calc(var(--pg-arrow-size) * .5 + 1px);--pg-arrow-color: currentColor;display:flex;align-items:center;justify-content:center;min-width:fit-content;margin:10px}.pg-menu *{box-sizing:border-box}.pg-menu ul.pg-list{margin:0;padding:0;list-style:none;border:var(--pg-border-size) solid var(--pg-border-color);background:var(--pg-bg-color);border-radius:var(--pg-border-radius);overflow:hidden;min-width:fit-content;display:flex}.pg-menu li{color:var(--pg-text-color);font-weight:400;text-align:left;min-width:fit-content;cursor:pointer;border-right:var(--pg-border-size) solid var(--pg-border-color);display:flex;align-items:center}.pg-menu li:last-child{border-right:none}.pg-menu li:not(.disabled):hover,.pg-menu li.active{background-color:var(--pg-highlight-color);color:var(--pg-highlight-text-color)}.pg-menu li.disabled a{cursor:default}.pg-menu a{display:block;min-width:36px;min-height:36px;height:auto;line-height:24px;text-align:center;vertical-align:top;padding:6px 12px;color:inherit}.pg-menu a.boundary-link,.pg-menu a.direction-link{position:relative}.pg-menu a.boundary-link:before,.pg-menu a.boundary-link:after,.pg-menu a.direction-link:before,.pg-menu a.direction-link:after{content:var(--pg-arrow-content);position:absolute;left:50%;top:calc(50% - var(--pg-arrow-size));border-top:var(--pg-arrow-size) solid transparent;border-bottom:var(--pg-arrow-size) solid transparent;border-left:var(--pg-arrow-size) solid var(--pg-arrow-color)}.pg-menu a.direction-link:before{display:none}.pg-menu a.direction-link:after{translate:-50% 0}.pg-menu a.boundary-link:before{translate:-100% 0}.pg-menu a.boundary-link.previous:before,.pg-menu a.boundary-link.previous:after,.pg-menu a.direction-link.previous:before,.pg-menu a.direction-link.previous:after{rotate:180deg}\n"] }]
         }], ctorParameters: () => [{ type: StateService }, { type: PaginationDirective }], propDecorators: { maxSize: [{
                 type: Input
             }], urlParam: [{
@@ -8164,8 +8191,13 @@ class UploadComponent {
     get http() {
         return this.api.client;
     }
-    constructor(cdr, api, toaster) {
+    get root() {
+        this.rootElem = this.rootElem || getRoot(this.element.nativeElement);
+        return this.rootElem;
+    }
+    constructor(cdr, element, api, toaster) {
         this.cdr = cdr;
+        this.element = element;
         this.api = api;
         this.toaster = toaster;
         this.value = null;
@@ -8179,40 +8211,46 @@ class UploadComponent {
         };
         this.onTouched = () => {
         };
-        this.remove = index => {
-            if (this.multiple) {
-                const current = Array.from(this.value || []);
-                current.splice(index, 1);
-                this.writeValue(current);
-                this.onRemove.emit(current);
-            }
-            this.writeValue(null);
-            this.onRemove.emit([]);
-        };
     }
     onDragEnter(ev) {
-        const types = Array.from(ev.dataTransfer.items || [])
-            .filter(t => t.kind == "file")
-            .map(t => t.type.toLowerCase());
-        types.push(...Array.from(ev.dataTransfer.files || []).map(f => f.type.toLowerCase()));
-        if (!types.some(type => ArrayUtils.has(this.acceptTypes, type))) {
+        if (this.disabled) {
             ev.preventDefault();
             return;
         }
-        ev.dataTransfer.effectAllowed = "copy";
-        ev.dataTransfer.dropEffect = "copy";
-        this.dropAllowed = true;
+        const transfer = ev.dataTransfer;
+        let length = transfer.items?.length ?? 0;
+        for (let i = 0; i < length; i++) {
+            const item = transfer.items[i];
+            if (this.checkType(item.type)) {
+                ev.dataTransfer.effectAllowed = "copy";
+                ev.dataTransfer.dropEffect = "copy";
+                this.dropAllowed = true;
+                return;
+            }
+        }
+        length = transfer.files?.length ?? 0;
+        for (let i = 0; i < length; i++) {
+            const file = transfer.files[i];
+            if (this.checkType(file.type)) {
+                ev.dataTransfer.effectAllowed = "copy";
+                ev.dataTransfer.dropEffect = "copy";
+                this.dropAllowed = true;
+                return;
+            }
+        }
+        ev.preventDefault();
     }
     onDrop() {
         this.dropAllowed = false;
     }
     ngOnChanges() {
         this.accept = this.accept || "";
-        this.acceptTypes = ObjectUtils.isString(this.accept) && this.accept.length > 0
-            ? this.accept.toLowerCase().split(",")
+        this.acceptTypes = ObjectUtils.isStringWithValue(this.accept)
+            ? this.accept.split(",")
             : (ObjectUtils.isArray(this.accept) ? this.accept : []);
-        this.acceptAttr = this.acceptTypes.join(",");
-        this.isImage = /(png|jpg|jpeg|webp|gif)/gi.test(this.acceptAttr);
+        this.acceptTypes = this.acceptTypes.map(t => t.split("/").pop().replace(/\./, ""));
+        this.acceptAttr = this.acceptTypes.map(t => `.${t}`).join(",");
+        this.isImage = ArrayUtils.has(this.acceptTypes, "png", "jpg", "jpeg", "webp", "gif");
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
@@ -8231,9 +8269,19 @@ class UploadComponent {
         this.disabled = val === true;
         this.cdr.markForCheck();
     }
+    removeItem(index) {
+        if (this.multiple) {
+            const current = Array.from(this.value || []);
+            current.splice(index, 1);
+            this.writeValue(current);
+            this.onRemove.emit(current);
+            return;
+        }
+        this.writeValue(null);
+        this.onRemove.emit([]);
+    }
     onInputClick(ev) {
-        const top = document.elementFromPoint(ev.clientX, ev.clientY);
-        if (ev.target !== top && !this.processing)
+        if (this.uploadBtn.contains(this.root.activeElement) && !this.processing)
             return;
         ev.preventDefault();
     }
@@ -8251,15 +8299,9 @@ class UploadComponent {
         const files = [];
         for (let i = 0; i < length; i++) {
             const file = input.files.item(i);
-            if (this.acceptTypes.length == 0) {
+            if (this.checkType(file.type)) {
                 files.push(file);
-                continue;
             }
-            const type = file.type.toLowerCase();
-            const ext = FileUtils.getExtension(file);
-            if (!ArrayUtils.has(this.acceptTypes, type, ext))
-                continue;
-            files.push(file);
         }
         if (files.length == 0) {
             this.toaster.error("message.invalid-files.error");
@@ -8267,7 +8309,9 @@ class UploadComponent {
         }
         this.processFiles(this.multiple ? files : files.slice(0, 1)).then(results => {
             const ids = results.map(t => t.file || t._id || t.id);
-            this.writeValue(this.multiple ? ids : (ids[0] || null));
+            this.writeValue(this.multiple
+                ? Array.from(this.value).concat(ids)
+                : (ids[0] || this.value));
             this.onUploaded.emit(results);
         });
         input.value = "";
@@ -8284,16 +8328,10 @@ class UploadComponent {
             return null;
         if (url.startsWith("data:"))
             return url;
-        const baseUrl = this.baseUrl;
+        const baseUrl = this.baseUrl || this.api.url("assets");
         const query = this.isImage ? `?type=preview` : ``;
-        if (!baseUrl) {
-            return `${url}${query}`;
-        }
         return `${baseUrl}/${url}${query}`;
     }
-    getBgUrl(image) {
-        return `url('${this.getUrl(image)}')`;
-    }
     async processFiles(files) {
         if (this.processing)
             return null;
@@ -8312,7 +8350,7 @@ class UploadComponent {
                 progress: 0
             };
             process.promise = FileUtils.getFilePreview(file).then(preview => {
-                process.preview = `url('${preview}')`;
+                process.preview = preview;
                 this.fileImageCache.set(file, preview);
                 this.cdr.detectChanges();
             });
@@ -8353,12 +8391,18 @@ class UploadComponent {
         this.cdr.detectChanges();
         return results.filter(r => r !== null);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", 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: [{
+    checkType(type) {
+        if (this.acceptTypes.length == 0)
+            return true;
+        type = type.split("/").pop().replace(/\./g, "");
+        return this.acceptTypes.includes(type);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UploadComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: API_SERVICE }, { token: TOASTER_SERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", 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: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => UploadComponent),
                 multi: true,
-            }], queries: [{ propertyName: "uploadButton", first: true, predicate: ["uploadButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ buttonText | translate }}\n    </a>\n</ng-template>\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ 'button.download' | translate }}\n    </a>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\" [ngStyle]=\"isImage || (item | isType: 'file') ? {backgroundImage: getBgUrl(item)} : {}\">\n        <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\n    </div>\n</ng-template>\n\n<div class=\"upload\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\n               [multiple]=\"multiple\"\n               [accept]=\"acceptAttr\"\n               (dragenter)=\"onDragEnter($event)\"\n               (dragleave)=\"onDrop()\"\n               (drop)=\"onDrop()\"\n               (click)=\"onInputClick($event)\"\n               (blur)=\"onTouched($event)\"\n               (change)=\"onInputChange($event)\"/>\n        <div class=\"upload-message\"\n             [ngClass]=\"{'has-value': value?.length}\"\n             [innerHTML]=\"message | translate | safe:'html'\"\n             *ngIf=\"message\">\n        </div>\n        <div class=\"upload-container\">\n\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\n                          *ngIf=\"!multiple && value\">\n            </ng-container>\n            <ng-container *ngIf=\"multiple\">\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                              [ngTemplateOutletContext]=\"{item: image, index: ix}\"\n                              *ngFor=\"let image of value; let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\"\n                 [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\n                 *ngFor=\"let proc of processing\">\n                <div class=\"upload-progress\">\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\n\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"upload-btn\" (click)=\"input.click()\">\n            <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\n                          [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\n            </ng-container>\n        </div>\n    </div>\n</div>\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: IsTypePipe, name: "isType" }, { kind: "pipe", type: SafeHtmlPipe, name: "safe" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+            }], viewQueries: [{ propertyName: "uploadBtn", first: true, predicate: ["uploadBtn"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #itemBgTemplate let-bg=\"bg\">\n    @if (bg) {\n        <div class=\"upload-item-bg\" [ngStyle]=\"{backgroundImage: `url('${bg}')`}\">\n            <div>\n                <img alt=\"item image\" [src]=\"bg | safe: 'url'\" />\n            </div>\n        </div>\n    }\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\">\n        <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\n                      [ngTemplateOutletContext]=\"{bg: isImage || (item | isType: 'file') ? getUrl(item) : null}\">\n        </ng-container>\n        @if (!disabled) {\n            <close-btn class=\"remove-item-btn\" (click)=\"removeItem(index)\"></close-btn>\n        }\n<!--        <btn size=\"small\" class=\"download-item-btn\" icon=\"download\"></btn>-->\n    </div>\n</ng-template>\n\n<div class=\"upload\" [ngClass]=\"{disabled: disabled}\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\n               [disabled]=\"disabled\"\n               [multiple]=\"multiple\"\n               [accept]=\"acceptAttr\"\n               (dragenter)=\"onDragEnter($event)\"\n               (dragleave)=\"onDrop()\"\n               (drop)=\"onDrop()\"\n               (click)=\"onInputClick($event)\"\n               (blur)=\"onTouched($event)\"\n               (change)=\"onInputChange($event)\"/>\n        @if (message) {\n            <div class=\"upload-message\"\n                 [ngClass]=\"{'has-value': $any(value)?.length}\"\n                 [innerHTML]=\"message | translate | safe:'html'\">\n            </div>\n        }\n        <div class=\"upload-container\">\n\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\n                          *ngIf=\"!multiple && value\">\n            </ng-container>\n            <ng-container *ngIf=\"multiple\">\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                              [ngTemplateOutletContext]=\"{item: item, index: ix}\"\n                              *ngFor=\"let item of $any(value); let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\" *ngFor=\"let proc of processing\">\n                <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\n                              [ngTemplateOutletContext]=\"{bg: proc.preview}\">\n                </ng-container>\n                <div class=\"upload-progress\">\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\n\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        @if (!disabled) {\n            <btn class=\"upload-btn\" #uploadBtn [label]=\"buttonText\" (click)=\"input.click()\"></btn>\n        }\n    </div>\n</div>\n", styles: [".upload{--progress-bg: var(--primary-color, var(--mat-sys-primary, black));--progress-text: var(--text-color, var(--mat-sys-on-primary, white));--bg-lightness: 85%;--item-size: 120px;--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}.upload.disabled{--bg-lightness: 75%}.upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.upload input[type=file]::file-selector-button{width:100%;height:100%}.upload .upload-input{width:100%;border:2px rgba(0,0,0,.25) dashed;border-radius:var(--item-radius);background-color:hsl(0,0%,var(--bg-lightness));transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.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);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.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(--progress-bg);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--progress-text)}.upload .upload-input.drop-allowed{--bg-lightness: 95%}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.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", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
@@ -8366,8 +8410,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => UploadComponent),
                             multi: true,
-                        }], template: "<ng-template #defaultUploadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ buttonText | translate }}\n    </a>\n</ng-template>\n<ng-template #defaultDownloadBtn let-loading=\"loading\">\n    <a class=\"btn btn-primary\" [ngClass]=\"{loading: loading}\">\n        {{ 'button.download' | translate }}\n    </a>\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\" [ngStyle]=\"isImage || (item | isType: 'file') ? {backgroundImage: getBgUrl(item)} : {}\">\n        <a class=\"remove-item-btn\" (click)=\"remove(index)\"></a>\n    </div>\n</ng-template>\n\n<div class=\"upload\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\n               [multiple]=\"multiple\"\n               [accept]=\"acceptAttr\"\n               (dragenter)=\"onDragEnter($event)\"\n               (dragleave)=\"onDrop()\"\n               (drop)=\"onDrop()\"\n               (click)=\"onInputClick($event)\"\n               (blur)=\"onTouched($event)\"\n               (change)=\"onInputChange($event)\"/>\n        <div class=\"upload-message\"\n             [ngClass]=\"{'has-value': value?.length}\"\n             [innerHTML]=\"message | translate | safe:'html'\"\n             *ngIf=\"message\">\n        </div>\n        <div class=\"upload-container\">\n\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\n                          *ngIf=\"!multiple && value\">\n            </ng-container>\n            <ng-container *ngIf=\"multiple\">\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                              [ngTemplateOutletContext]=\"{item: image, index: ix}\"\n                              *ngFor=\"let image of value; let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\"\n                 [ngStyle]=\"!proc.preview ? {} : {backgroundImage: proc.preview}\"\n                 *ngFor=\"let proc of processing\">\n                <div class=\"upload-progress\">\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\n\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"upload-btn\" (click)=\"input.click()\">\n            <ng-container [ngTemplateOutlet]=\"uploadButton || defaultUploadBtn\"\n                          [ngTemplateOutletContext]=\"{loading: !!processing, buttonText: buttonText}\">\n            </ng-container>\n        </div>\n    </div>\n</div>\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"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                        }], template: "<ng-template #itemBgTemplate let-bg=\"bg\">\n    @if (bg) {\n        <div class=\"upload-item-bg\" [ngStyle]=\"{backgroundImage: `url('${bg}')`}\">\n            <div>\n                <img alt=\"item image\" [src]=\"bg | safe: 'url'\" />\n            </div>\n        </div>\n    }\n</ng-template>\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\">\n    <div class=\"upload-item\">\n        <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\n                      [ngTemplateOutletContext]=\"{bg: isImage || (item | isType: 'file') ? getUrl(item) : null}\">\n        </ng-container>\n        @if (!disabled) {\n            <close-btn class=\"remove-item-btn\" (click)=\"removeItem(index)\"></close-btn>\n        }\n<!--        <btn size=\"small\" class=\"download-item-btn\" icon=\"download\"></btn>-->\n    </div>\n</ng-template>\n\n<div class=\"upload\" [ngClass]=\"{disabled: disabled}\">\n    <div class=\"upload-input\" [ngClass]=\"{'drop-allowed': dropAllowed}\">\n        <input type=\"file\"\n               #input\n               [disabled]=\"disabled\"\n               [multiple]=\"multiple\"\n               [accept]=\"acceptAttr\"\n               (dragenter)=\"onDragEnter($event)\"\n               (dragleave)=\"onDrop()\"\n               (drop)=\"onDrop()\"\n               (click)=\"onInputClick($event)\"\n               (blur)=\"onTouched($event)\"\n               (change)=\"onInputChange($event)\"/>\n        @if (message) {\n            <div class=\"upload-message\"\n                 [ngClass]=\"{'has-value': $any(value)?.length}\"\n                 [innerHTML]=\"message | translate | safe:'html'\">\n            </div>\n        }\n        <div class=\"upload-container\">\n\n            <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                          [ngTemplateOutletContext]=\"{item: value, index: 0}\"\n                          *ngIf=\"!multiple && value\">\n            </ng-container>\n            <ng-container *ngIf=\"multiple\">\n                <ng-container [ngTemplateOutlet]=\"itemTemplate\"\n                              [ngTemplateOutletContext]=\"{item: item, index: ix}\"\n                              *ngFor=\"let item of $any(value); let ix = index\">\n                </ng-container>\n            </ng-container>\n\n            <div class=\"upload-item\" *ngFor=\"let proc of processing\">\n                <ng-container [ngTemplateOutlet]=\"itemBgTemplate\"\n                              [ngTemplateOutletContext]=\"{bg: proc.preview}\">\n                </ng-container>\n                <div class=\"upload-progress\">\n                    <div class=\"upload-progress-num\">{{ proc.progress }}%</div>\n                    <div class=\"upload-progress-bar\" [ngStyle]=\"{width: proc.progress + '%'}\">\n\n                    </div>\n                </div>\n            </div>\n\n        </div>\n        @if (!disabled) {\n            <btn class=\"upload-btn\" #uploadBtn [label]=\"buttonText\" (click)=\"input.click()\"></btn>\n        }\n    </div>\n</div>\n", styles: [".upload{--progress-bg: var(--primary-color, var(--mat-sys-primary, black));--progress-text: var(--text-color, var(--mat-sys-on-primary, white));--bg-lightness: 85%;--item-size: 120px;--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}.upload.disabled{--bg-lightness: 75%}.upload input[type=file]{display:block;position:absolute;inset:0;opacity:0}.upload input[type=file]::file-selector-button{width:100%;height:100%}.upload .upload-input{width:100%;border:2px rgba(0,0,0,.25) dashed;border-radius:var(--item-radius);background-color:hsl(0,0%,var(--bg-lightness));transition:.2s;flex-wrap:wrap;position:relative;padding:5px}.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);border:2px solid white;overflow:hidden;display:flex;align-items:center;justify-content:center}.upload .upload-input .upload-item-bg{background:#fff center center no-repeat;background-size:cover;position:absolute;inset:0}.upload .upload-input .upload-item-bg div{width:100%;height:100%;display:flex;justify-content:center;align-items:center;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.upload .upload-input .upload-item-bg img{max-width:100%;max-height:100%;object-fit:contain;background:#ffffffbf}.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(--progress-bg);top:0}.upload .upload-input .upload-progress-num{position:relative;z-index:1;font-size:12px;line-height:15px;text-align:center;color:var(--progress-text)}.upload .upload-input.drop-allowed{--bg-lightness: 95%}.upload .upload-input.drop-allowed .upload-message{color:var(--message-drop-color)}.upload .upload-btn{position:relative;margin-top:5px;width:fit-content;display:block}.upload .remove-item-btn{position:absolute;top:var(--btn-top-distance);right:var(--btn-right-distance)}.upload .download-item-btn{position:absolute;top:var(--btn-top-distance);left:var(--btn-left-distance)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [API_SERVICE]
                 }] }, { type: undefined, decorators: [{
@@ -8397,9 +8441,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                 type: Output
             }], onRemove: [{
                 type: Output
-            }], uploadButton: [{
-                type: ContentChild,
-                args: ["uploadButton"]
+            }], uploadBtn: [{
+                type: ViewChild,
+                args: ["uploadBtn"]
             }] } });
 
 // --- Pipes ---
@@ -8463,6 +8507,7 @@ const components = [
     BtnComponent,
     BtnDefaultComponent,
     ChipsComponent,
+    CloseBtnComponent,
     DropListComponent,
     DropdownBoxComponent,
     DynamicTableComponent,
@@ -8861,8 +8906,8 @@ class NgxUtilsModule {
     constructor() {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, TabsTemplateDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
-            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, TabsTemplateDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, declarations: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, TabsTemplateDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, CloseBtnComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent], imports: [CommonModule,
+            FormsModule], exports: [ChunkPipe, EntriesPipe, ExtraItemPropertiesPipe, FilterPipe, FindPipe, FormatNumberPipe, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplatePipe, GroupByPipe, IncludesPipe, IsTypePipe, JoinPipe, KeysPipe, MapPipe, MaxPipe, MinPipe, PopPipe, ReducePipe, RemapPipe, ReplacePipe, ReversePipe, RoundPipe, SafeHtmlPipe, ShiftPipe, SplitPipe, TranslatePipe, ValuesPipe, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, BackgroundDirective, ComponentLoaderDirective, DynamicTableTemplateDirective, GlobalTemplateDirective, IconDirective, NgxTemplateOutletDirective, PaginationDirective, PaginationItemDirective, ResourceIfDirective, StickyDirective, StickyClassDirective, DropdownDirective, DropdownContentDirective, DropdownToggleDirective, TabsItemDirective, TabsTemplateDirective, UnorderedListItemDirective, UnorderedListTemplateDirective, BtnComponent, BtnDefaultComponent, ChipsComponent, CloseBtnComponent, DropListComponent, DropdownBoxComponent, DynamicTableComponent, FakeModuleComponent, PaginationMenuComponent, IconComponent, IconDefaultComponent, InteractiveCanvasComponent, InteractiveItemComponent, InteractiveCircleComponent, InteractiveRectComponent, TabsComponent, UnorderedListComponent, UploadComponent, FormsModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgxUtilsModule, providers: pipes, imports: [CommonModule,
             FormsModule, FormsModule] }); }
 }
@@ -8892,5 +8937,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, computedPrevious, cssStyles, cssVariables, getComponentDef, getCssVariables, hashCode, impatientPromise, isBrowser, parseSelector, provideEntryComponents, provideWithOptions, selectorMatchesList, switchClass };
+export { API_SERVICE, APP_BASE_URL, AUTH_SERVICE, AclService, AjaxRequestHandler, ApiService, ArrayUtils, AsyncMethodBase, AsyncMethodDirective, AsyncMethodTargetDirective, AuthGuard, BASE_CONFIG, BUTTON_TYPE, BackgroundDirective, BaseDialogService, BaseHttpClient, BaseHttpService, BaseToasterService, BtnComponent, BtnDefaultComponent, CONFIG_SERVICE, CacheService, CanvasColor, CanvasUtils, ChipsComponent, ChunkPipe, Circle, CloseBtnComponent, ComponentLoaderDirective, ComponentLoaderService, ConfigService, DIALOG_SERVICE, DateUtils, DragDropEventPlugin, DropListComponent, DropdownBoxComponent, DropdownContentDirective, DropdownDirective, DropdownToggleDirective, DynamicTableComponent, DynamicTableTemplateDirective, ERROR_HANDLER, EXPRESS_REQUEST, EntriesPipe, ErrorHandlerService, EventsService, ExtraItemPropertiesPipe, FactoryDependencies, FakeModuleComponent, FileSystemEntry, FileUtils, FilterPipe, FindPipe, ForbiddenZone, FormatNumberPipe, FormatterService, GenericValue, GetOffsetPipe, GetTypePipe, GetValuePipe, GlobalTemplateDirective, GlobalTemplatePipe, GlobalTemplateService, GroupByPipe, ICON_MAP, ICON_SERVICE, ICON_TYPE, IConfiguration, IconComponent, IconDefaultComponent, IconDirective, IconService, IncludesPipe, Initializer, InteractiveCanvasComponent, InteractiveCircleComponent, InteractiveItemComponent, InteractiveRectComponent, IsTypePipe, JSONfn, JoinPipe, KeysPipe, LANGUAGE_SERVICE, LanguageService, LoaderUtils, LocalHttpService, MapPipe, MathUtils, MaxPipe, MinPipe, NgxTemplateOutletDirective, NgxUtilsModule, OPTIONS_TOKEN, ObjectType, ObjectUtils, ObservableUtils, OpenApiService, PROMISE_SERVICE, PaginationDirective, PaginationItemContext, PaginationItemDirective, PaginationMenuComponent, Point, PopPipe, PromiseService, RESIZE_DELAY, RESIZE_STRATEGY, ROOT_ELEMENT, Rect, ReducePipe, ReflectUtils, RemapPipe, ReplacePipe, ResizeEventPlugin, ResourceIfContext, ResourceIfDirective, ReversePipe, RoundPipe, SCRIPT_PARAMS, SafeHtmlPipe, ScrollEventPlugin, SetUtils, ShiftPipe, SocketClient, SocketService, SplitPipe, StateService, StaticAuthService, StaticLanguageService, StickyClassDirective, StickyDirective, StorageMode, StorageService, StringUtils, TOASTER_SERVICE, TabsComponent, TabsItemDirective, TabsTemplateDirective, TimerUtils, TranslatePipe, TranslatedUrlSerializer, UniqueUtils, UniversalService, UnorderedListComponent, UnorderedListItemDirective, UnorderedListTemplateDirective, UploadComponent, ValuedPromise, ValuesPipe, Vector, WASI_IMPLEMENTATION, WasmService, cachedFactory, cancelablePromise, checkTransitions, computedPrevious, cssStyles, cssVariables, getComponentDef, getCssVariables, getRoot, hashCode, impatientPromise, isBrowser, parseSelector, provideEntryComponents, provideWithOptions, selectorMatchesList, switchClass };
 //# sourceMappingURL=stemy-ngx-utils.mjs.map