@rlucan/ui 19.0.1 → 19.0.3

package/fesm2022/rlucan-ui.mjs

@@ -740,20 +740,18 @@ class SelectComponent extends UiSimpleComponent {
         this.translateService = translateService;
         this.multiple = false;
         this.options = [];
+        this.optionFormatter = (o) => this.displayAttribute ? o[this.displayAttribute] : o;
+        this.panelClass = '';
         this.allowEmptySelection = false;
         this.lastCount = -1;
-        this.overoption = false;
         this.optionToValue = (o) => this.valueAttribute ? o[this.valueAttribute] : o;
     }
     ngOnInit() {
         super.ngOnInit();
-        if (this.optionFormatter === undefined) {
-            this.optionFormatter = o => this.displayAttribute ? o[this.displayAttribute] : o;
-        }
         if (this.multiple && this.componentFormControl) {
             this.lastCount = this.componentFormControl.value.length;
             this.componentFormControl.valueChanges.subscribe(v => {
-                if (v.length === 1 && this.lastCount === 0 && this.overoption) {
+                if (v.length === 1 && this.lastCount === 0 && this.overoption !== undefined) {
                     this.select.selectionChange.emit(this.optionToValue(v));
                     this.select.close();
                 }
@@ -766,14 +764,14 @@ class SelectComponent extends UiSimpleComponent {
     }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
-        if (changes.options && this.componentFormControl && this.trackBy) {
+        if (changes['options'] && this.componentFormControl && this.trackBy) {
             this.componentFormControl.setValue(this.mapValues(this.componentFormControl.value), { emitEvent: false });
         }
     }
     mapValues(src) {
         if (src && this.trackBy && this.options) {
             if (this.multiple) {
-                return this.options.filter(o => src.find(v => v[this.trackBy] === o[this.trackBy]));
+                return this.options.filter(o => src.find((v) => v[this.trackBy] === o[this.trackBy]));
             }
             else {
                 return this.options.find(o => o[this.trackBy] === src[this.trackBy]);
@@ -793,7 +791,7 @@ class SelectComponent extends UiSimpleComponent {
     clearAll() {
         this.componentFormControl.setValue([]);
     }
-    setDisabledState(isDisabled) {
+    setDisabledState() {
     }
     writeValue(obj) {
         if (!this.ngControl) {
@@ -807,11 +805,11 @@ class SelectComponent extends UiSimpleComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: SelectComponent, isStandalone: false, selector: "ui-select", inputs: { multiple: "multiple", triggerFormatter: "triggerFormatter", valueAttribute: "valueAttribute", resetText: "resetText", displayAttribute: "displayAttribute", options: "options", optionFormatter: "optionFormatter", optionTemplateRef: "optionTemplateRef", triggerTemplateRef: "triggerTemplateRef", panelClass: "panelClass", allowEmptySelection: "allowEmptySelection", trackBy: "trackBy" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n  <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n    <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\" [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\" ></ng-template>\r\n  </mat-select-trigger>\r\n\r\n  <mat-select-trigger *ngIf=\"triggerFormatter\" [innerHTML]=\"componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''\"></mat-select-trigger>\r\n\r\n  <mat-option *ngIf=\"resetText\">{{resetText}}</mat-option>\r\n\r\n  <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\" >\r\n\r\n    <div class=\"option-container\" (mouseenter)=\"overoption = true;\" (mouseleave)=\"overoption = false\">\r\n\r\n      <ng-container *ngIf=\"optionTemplateRef\">\r\n        <ng-template [ngTemplateOutlet]=\"optionTemplateRef\" [ngTemplateOutletContext]=\"{option:o}\" ></ng-template>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!optionTemplateRef\">\r\n        {{optionFormatter(o)}}\r\n      </ng-container>\r\n\r\n      <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">north_west</mat-icon>\r\n    </div>\r\n\r\n  </mat-option>\r\n\r\n  <div class=\"buttons\" *ngIf=\"multiple\">\r\n    <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\" (click)=\"clearAll()\"></ui-button>\r\n    <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\" (click)=\"selectAll()\"></ui-button>\r\n    <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\" [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\" [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\" (click)=\"select.close()\"></ui-button>\r\n  </div>\r\n\r\n</mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-select-panel .select-one,::ng-deep .mat-mdc-select-panel .select-one{position:absolute;right:0;top:.3em;display:none}::ng-deep .mat-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-select-panel .mat-mdc-option:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover .select-one{display:block}::ng-deep .mat-select-panel .buttons,::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: SelectComponent, isStandalone: false, selector: "ui-select", inputs: { multiple: "multiple", triggerFormatter: "triggerFormatter", valueAttribute: "valueAttribute", resetText: "resetText", displayAttribute: "displayAttribute", options: "options", optionFormatter: "optionFormatter", optionTemplateRef: "optionTemplateRef", triggerTemplateRef: "triggerTemplateRef", panelClass: "panelClass", allowEmptySelection: "allowEmptySelection", trackBy: "trackBy" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n    <mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\"\r\n                [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n        <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n            <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\"\r\n                         [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\"></ng-template>\r\n        </mat-select-trigger>\r\n\r\n        <mat-select-trigger *ngIf=\"triggerFormatter\"\r\n                            [innerHTML]=\"componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''\"></mat-select-trigger>\r\n\r\n        <mat-option *ngIf=\"resetText\">{{ resetText }}</mat-option>\r\n\r\n        <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\">\r\n\r\n            <div class=\"over-container\" (mouseenter)=\"overoption = options.indexOf(o);\"\r\n                 (mouseleave)=\"overoption = undefined\">\r\n            </div>\r\n\r\n            <div class=\"option-container\" (mouseenter)=\"overoption = options.indexOf(o);\"\r\n                 (mouseleave)=\"overoption = undefined\">\r\n\r\n                <ng-container *ngIf=\"optionTemplateRef\">\r\n                    <ng-template [ngTemplateOutlet]=\"optionTemplateRef\"\r\n                                 [ngTemplateOutletContext]=\"{option:o}\"></ng-template>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!optionTemplateRef\">\r\n                    {{ optionFormatter(o) }}\r\n                </ng-container>\r\n\r\n                <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\"\r\n                          (click)=\"selectOption(o, select)\">north_west\r\n                </mat-icon>\r\n            </div>\r\n\r\n            <mat-icon class=\"select-one\" [ngClass]=\"{visible: overoption === options.indexOf(o)}\"\r\n                      *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">\r\n                north_west\r\n            </mat-icon>\r\n        </mat-option>\r\n\r\n        <div class=\"buttons\" *ngIf=\"multiple\">\r\n            <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\"\r\n                       [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\"\r\n                       (click)=\"clearAll()\"></ui-button>\r\n            <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\"\r\n                       (click)=\"selectAll()\"></ui-button>\r\n            <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\"\r\n                       [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\"\r\n                       [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\"\r\n                       (click)=\"select.close()\"></ui-button>\r\n        </div>\r\n\r\n    </mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-mdc-select-panel mat-option{position:relative}::ng-deep .mat-mdc-select-panel mat-option .select-one{position:absolute;right:0;display:none}::ng-deep .mat-mdc-select-panel mat-option .select-one.visible{display:block}::ng-deep .mat-mdc-select-panel .over-container{position:absolute;inset:0 0 0 3em}::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-select', standalone: false, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n  <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n    <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\" [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\" ></ng-template>\r\n  </mat-select-trigger>\r\n\r\n  <mat-select-trigger *ngIf=\"triggerFormatter\" [innerHTML]=\"componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''\"></mat-select-trigger>\r\n\r\n  <mat-option *ngIf=\"resetText\">{{resetText}}</mat-option>\r\n\r\n  <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\" >\r\n\r\n    <div class=\"option-container\" (mouseenter)=\"overoption = true;\" (mouseleave)=\"overoption = false\">\r\n\r\n      <ng-container *ngIf=\"optionTemplateRef\">\r\n        <ng-template [ngTemplateOutlet]=\"optionTemplateRef\" [ngTemplateOutletContext]=\"{option:o}\" ></ng-template>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!optionTemplateRef\">\r\n        {{optionFormatter(o)}}\r\n      </ng-container>\r\n\r\n      <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">north_west</mat-icon>\r\n    </div>\r\n\r\n  </mat-option>\r\n\r\n  <div class=\"buttons\" *ngIf=\"multiple\">\r\n    <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\" (click)=\"clearAll()\"></ui-button>\r\n    <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\" (click)=\"selectAll()\"></ui-button>\r\n    <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\" [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\" [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\" (click)=\"select.close()\"></ui-button>\r\n  </div>\r\n\r\n</mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-select-panel .select-one,::ng-deep .mat-mdc-select-panel .select-one{position:absolute;right:0;top:.3em;display:none}::ng-deep .mat-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-select-panel .mat-mdc-option:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-option-text:hover .select-one,::ng-deep .mat-mdc-select-panel .mat-mdc-option:hover .select-one{display:block}::ng-deep .mat-select-panel .buttons,::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"] }]
+            args: [{ selector: 'ui-select', standalone: false, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n    <mat-select class=\"control-container\" #select [panelClass]=\"panelClass\" [placeholder]=\"placeholder\"\r\n                [formControl]=\"componentFormControl\" [multiple]=\"multiple\">\r\n\r\n        <mat-select-trigger *ngIf=\"triggerTemplateRef\">\r\n            <ng-template [ngTemplateOutlet]=\"triggerTemplateRef\"\r\n                         [ngTemplateOutletContext]=\"{option:componentFormControl?.value}\"></ng-template>\r\n        </mat-select-trigger>\r\n\r\n        <mat-select-trigger *ngIf=\"triggerFormatter\"\r\n                            [innerHTML]=\"componentFormControl?.value ? triggerFormatter(componentFormControl?.value) : ''\"></mat-select-trigger>\r\n\r\n        <mat-option *ngIf=\"resetText\">{{ resetText }}</mat-option>\r\n\r\n        <mat-option *ngFor=\"let o of options\" [value]=\"optionToValue(o)\">\r\n\r\n            <div class=\"over-container\" (mouseenter)=\"overoption = options.indexOf(o);\"\r\n                 (mouseleave)=\"overoption = undefined\">\r\n            </div>\r\n\r\n            <div class=\"option-container\" (mouseenter)=\"overoption = options.indexOf(o);\"\r\n                 (mouseleave)=\"overoption = undefined\">\r\n\r\n                <ng-container *ngIf=\"optionTemplateRef\">\r\n                    <ng-template [ngTemplateOutlet]=\"optionTemplateRef\"\r\n                                 [ngTemplateOutletContext]=\"{option:o}\"></ng-template>\r\n                </ng-container>\r\n\r\n                <ng-container *ngIf=\"!optionTemplateRef\">\r\n                    {{ optionFormatter(o) }}\r\n                </ng-container>\r\n\r\n                <mat-icon class=\"select-one\" *ngIf=\"multiple && componentFormControl?.value?.length === 0\"\r\n                          (click)=\"selectOption(o, select)\">north_west\r\n                </mat-icon>\r\n            </div>\r\n\r\n            <mat-icon class=\"select-one\" [ngClass]=\"{visible: overoption === options.indexOf(o)}\"\r\n                      *ngIf=\"multiple && componentFormControl?.value?.length === 0\" (click)=\"selectOption(o, select)\">\r\n                north_west\r\n            </mat-icon>\r\n        </mat-option>\r\n\r\n        <div class=\"buttons\" *ngIf=\"multiple\">\r\n            <ui-button style=\"margin-right: auto;\" [kind]=\"'basic'\" [size]=\"'smaller'\"\r\n                       [label]=\"translateService.instant('ui.controls.ui-select.clear-selection')\"\r\n                       (click)=\"clearAll()\"></ui-button>\r\n            <ui-button [size]=\"'smaller'\" [label]=\"translateService.instant('ui.controls.ui-select.all')\"\r\n                       (click)=\"selectAll()\"></ui-button>\r\n            <ui-button [size]=\"'smaller'\" style=\"padding-left: 0.2em;\"\r\n                       [disabled]=\"componentFormControl?.value?.length === 0 && !allowEmptySelection\"\r\n                       [label]=\"translateService.instant('ui.controls.ui-select.apply-selection') + (componentFormControl?.value?.length > 0 ? ' (' + componentFormControl.value.length + ')' : '')\"\r\n                       (click)=\"select.close()\"></ui-button>\r\n        </div>\r\n\r\n    </mat-select>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex;flex-direction:column;width:100%}:host .control-container{width:100%;position:relative}:host .control-container.has-prefix ::ng-deep input,:host .control-container.has-prefix ::ng-deep textarea,:host .control-container.has-prefix ::ng-deep .mat-mdc-select-trigger{padding-left:1.8em}:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep input,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep textarea,:host .control-container.has-suffix:not(.has-clear-icon) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep input,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep textarea,:host .control-container.has-clear-icon:not(.has-suffix) ::ng-deep .mat-mdc-select-trigger{padding-right:1.8em}:host .control-container.has-suffix.has-clear-icon ::ng-deep input,:host .control-container.has-suffix.has-clear-icon ::ng-deep textarea,:host .control-container.has-suffix.has-clear-icon ::ng-deep .mat-mdc-select-trigger{padding-right:3.6em}:host .control-container.has-suffix.has-clear-icon ::ng-deep .clear-icon{right:1.4em!important}:host ::ng-deep [slot=suffix],:host ::ng-deep .clear-icon,:host ::ng-deep .suffix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);right:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=suffix]:not(.disabled),:host ::ng-deep .clear-icon:not(.disabled),:host ::ng-deep .suffix-icon:not(.disabled){cursor:pointer}:host ::ng-deep [slot=prefix],:host ::ng-deep .prefix-icon{position:absolute;-webkit-user-select:none;user-select:none;transition:color .25s;top:calc(50% - .5em);left:.2em;width:1em;height:1em;font-size:1.5em}:host ::ng-deep [slot=prefix]:not(.disabled),:host ::ng-deep .prefix-icon:not(.disabled){cursor:pointer}:host ::ng-deep input,:host ::ng-deep textarea,:host ::ng-deep .mat-mdc-select-trigger,:host ::ng-deep .editor-wrapper{resize:none;width:100%;line-height:1.2em;font-size:1em;outline:none;border-style:solid;transition:border-color 333ms}:host ::ng-deep textarea.autoresize{box-sizing:content-box;width:calc(100% - 1.4em)}:host ::ng-deep ::ng-deep .mat-select-trigger,:host ::ng-deep ::ng-deep .mat-mdc-select-trigger{height:100%}:host ::ng-deep ::ng-deep .mat-select-value,:host ::ng-deep ::ng-deep .mat-mdc-select-value{vertical-align:middle}::ng-deep ui-input{display:block}\n", "::ng-deep .mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-select-arrow-wrapper{height:1px!important}::ng-deep .mat-mdc-select-panel mat-option{position:relative}::ng-deep .mat-mdc-select-panel mat-option .select-one{position:absolute;right:0;display:none}::ng-deep .mat-mdc-select-panel mat-option .select-one.visible{display:block}::ng-deep .mat-mdc-select-panel .over-container{position:absolute;inset:0 0 0 3em}::ng-deep .mat-mdc-select-panel .buttons{padding:.2em;background-color:#fff;display:flex;position:sticky;bottom:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -1018,20 +1016,26 @@ class FileComponent {
         if (changes['srcData']) {
             this.nativeFileSizeRatio = -1;
             if (changes['srcData'].currentValue.nativeFile) {
-                this.src = this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(changes['srcData'].currentValue.nativeFile));
-                const img = new Image();
-                img.onload = () => {
-                    if (this.fitImageFileSize) {
-                        this.nativeFileSizeRatio = Math.max(img.width / this.uiFileSize.width, img.height / this.uiFileSize.height, 1);
-                    }
-                    else {
-                        this.nativeFileSizeRatio = 1;
-                    }
-                    this.nativeFileWidth = img.width / this.nativeFileSizeRatio;
-                    this.nativeFileHeight = img.height / this.nativeFileSizeRatio;
-                    URL.revokeObjectURL(img.src);
-                };
-                img.src = URL.createObjectURL(changes['srcData'].currentValue.nativeFile);
+                const nf = changes['srcData'].currentValue.nativeFile;
+                if (nf.type.startsWith('image/') || nf.type.startsWith('video/')) {
+                    this.src = this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(changes['srcData'].currentValue.nativeFile));
+                    const img = new Image();
+                    img.onload = () => {
+                        if (this.fitImageFileSize) {
+                            this.nativeFileSizeRatio = Math.max(img.width / this.uiFileSize.width, img.height / this.uiFileSize.height, 1);
+                        }
+                        else {
+                            this.nativeFileSizeRatio = 1;
+                        }
+                        this.nativeFileWidth = img.width / this.nativeFileSizeRatio;
+                        this.nativeFileHeight = img.height / this.nativeFileSizeRatio;
+                        URL.revokeObjectURL(img.src);
+                    };
+                    img.src = URL.createObjectURL(changes['srcData'].currentValue.nativeFile);
+                }
+                else {
+                    this.src = this.fileServiceConfig.getMediaSrc(this.uiFileSize, { name: nf.name, mimeType: nf.type }, this.srcOptions);
+                }
             }
             else {
                 this.src = this.fileServiceConfig.getMediaSrc(this.uiFileSize, changes['srcData'].currentValue, this.srcOptions);
@@ -1048,11 +1052,11 @@ class FileComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FileComponent, deps: [{ token: UI_FILESERVICE, optional: true }, { token: i1$1.DomSanitizer }, { token: UiFileService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: FileComponent, isStandalone: false, selector: "ui-file", inputs: { fileSize: "fileSize", srcOptions: "srcOptions", srcData: "srcData", srcUrl: "srcUrl" }, host: { properties: { "style.width": "this.width", "style.maxWidth": "this.maxWidth", "style.height": "this.height", "style.maxHeight": "this.maxHeight" } }, usesOnChanges: true, ngImport: i0, template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\" [ngStyle]=\"imgStyle\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: FileComponent, isStandalone: false, selector: "ui-file", inputs: { fileSize: "fileSize", srcOptions: "srcOptions", srcData: "srcData", srcUrl: "srcUrl" }, host: { properties: { "style.width": "this.width", "style.maxWidth": "this.maxWidth", "style.height": "this.height", "style.maxHeight": "this.maxHeight" } }, usesOnChanges: true, ngImport: i0, template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" />\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\" [ngStyle]=\"imgStyle\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-file', standalone: false, template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\" [ngStyle]=\"imgStyle\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"] }]
+            args: [{ selector: 'ui-file', standalone: false, template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" />\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\" [ngStyle]=\"imgStyle\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {