@rlucan/ui 14.2.5 → 16.2.2

package/fesm2022/rlucan-ui.mjs

@@ -0,0 +1,3453 @@
+import * as i0 from '@angular/core';
+import { Component, Input, HostBinding, InjectionToken, Injectable, Inject, EventEmitter, Optional, Host, SkipSelf, ViewChild, Output, Self, Directive, HostListener, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i3$1 from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i4 from '@angular/material/core';
+import { MatRippleModule, MAT_DATE_LOCALE } from '@angular/material/core';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import * as i3$3 from '@angular/material/checkbox';
+import { MatCheckboxModule, MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
+import * as i4$5 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i3$2 from '@angular/cdk/drag-drop';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import * as i1 from '@angular/forms';
+import { FormControl, Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS, UntypedFormGroup, UntypedFormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import * as i4$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3$5 from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i4$6 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i4$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i4$3 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i8 from 'ngx-image-cropper';
+import { ImageCropperModule } from 'ngx-image-cropper';
+import { RouterModule } from '@angular/router';
+import * as i5 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import * as i6 from 'ngx-uploader';
+import { NgxUploaderModule } from 'ngx-uploader';
+import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
+import { Subscription, Subject } from 'rxjs';
+import * as i1$1 from '@angular/platform-browser';
+import * as i3$4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i4$4 from '@angular/cdk/text-field';
+import { debounceTime } from 'rxjs/operators';
+import * as i3$6 from '@angular/material/radio';
+import { MatRadioModule, MAT_RADIO_DEFAULT_OPTIONS } from '@angular/material/radio';
+import * as i1$3 from '@angular/material/snack-bar';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import EditorJS from '@editorjs/editorjs';
+import List from '@editorjs/list';
+import Header from '@editorjs/header';
+import * as i7 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+
+class ButtonComponent {
+    get class() {
+        return this.kind +
+            (this.color ? ' ' + this.color : '') +
+            (this.size ? ' ' + this.size : '') +
+            ((this.disabled || this.busy) ? ' disabled' : '');
+    }
+    constructor() {
+        this.type = 'button';
+        this.disabled = false;
+        this.busy = false;
+        this.kind = 'flat';
+        this.color = 'primary';
+        this.size = 'normal';
+        this.formInvalid = false;
+    }
+    get isDisabled() {
+        return this.disabled || this.busy;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ButtonComponent, selector: "ui-button", inputs: { type: "type", matIconPrefix: "matIconPrefix", label: "label", disabled: "disabled", busy: "busy", kind: "kind", color: "color", size: "size", formInvalid: "formInvalid" }, host: { properties: { "class": "this.class", "class.formInvalid": "this.formInvalid" } }, ngImport: i0, template: "<button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\">\r\n  <mat-icon *ngIf=\"matIconPrefix\">{{matIconPrefix}}</mat-icon>\r\n  {{label}}\r\n  <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n</button>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-button', template: "<button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\">\r\n  <mat-icon *ngIf=\"matIconPrefix\">{{matIconPrefix}}</mat-icon>\r\n  {{label}}\r\n  <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n</button>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { type: [{
+                type: Input
+            }], matIconPrefix: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], kind: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], formInvalid: [{
+                type: HostBinding,
+                args: ['class.formInvalid']
+            }, {
+                type: Input
+            }] } });
+
+class UiBaseComponent {
+    // get control() {
+    //   return this.controlFormGroup.get('text');
+    // }
+    constructor() {
+        this.placeholder = '';
+        this.useInputMessages = 'always';
+        this.inputMessagesPosition = 'relative';
+        this.size = 'normal';
+        // control = new FormControl();
+        // controlFormGroup;
+        this.required = false;
+        // this.ngControl.valueAccessor = this;
+    }
+    ngOnInit() {
+        // console.log(this.controlContainer);
+        // this.controlFormGroup.valueChanges.subscribe(v => {
+        //   this.onChange(v);
+        // });
+        // this.ngControl.control.statusChanges.subscribe(v => console.log(v));
+        //
+        // this.ngControl.control.markAsTouched = (opts?: {
+        //   onlySelf?: boolean;
+        // }) => {
+        //   if (!this.control.touched) {
+        //     console.log('marking as touched');
+        //     this.control.markAsTouched(opts);
+        //   }
+        //   this.control.updateValueAndValidity({onlySelf: opts?.onlySelf, emitEvent: false});
+        // }
+        // setTimeout(() => {
+        //   this.applyValidators(this.validators);
+        // });
+    }
+    // bindValidators(validators: ValidatorFn[]): void {
+    //   this.control.setValidators(validators);
+    // }
+    get validationErrors() {
+        return null;
+    }
+    get validationMessage() {
+        return 'obsolete...';
+    }
+    get isInvalid() {
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: UiBaseComponent, selector: "ui-abstract-base-component", inputs: { placeholder: "placeholder", label: "label", useInputMessages: "useInputMessages", inputMessagesPosition: "inputMessagesPosition", hint: "hint", size: "size" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: '** abstract **', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiBaseComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-abstract-base-component',
+                    template: '** abstract **'
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], useInputMessages: [{
+                type: Input
+            }], inputMessagesPosition: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], size: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }] } });
+
+class UiSimpleComponent extends UiBaseComponent {
+    constructor(ngControl, // <-- obsolete
+    controlContainer = null) {
+        super();
+        this.ngControl = ngControl;
+        this.controlContainer = controlContainer;
+        this.sub = new Subscription();
+        this.onChange = (val) => { };
+        this.onTouched = () => { };
+        this.onValidatorChange = () => { };
+        if (ngControl) {
+            ngControl.valueAccessor = this;
+        }
+        else {
+            this.componentFormControl = new FormControl();
+            //      this.componentFormControl.markAsUntouched();
+            this.sub.add(this.componentFormControl.valueChanges.subscribe(v => {
+                try {
+                    // console.log(v, this.componentFormControl.value);
+                    this.onChange(v);
+                }
+                catch (e) { /*console.error(e);*/
+                }
+            }));
+        }
+        // this.ngControl.valueAccessor = this;
+    }
+    get maxLenRequired() {
+        return this.componentFormControl.value && (this.componentFormControl.value.length > (this.validators?.maxLength || 0));
+    }
+    get isInvalid() {
+        // console.log(this.label, this.componentFormControl.touched);
+        return this.componentFormControl.touched && !!this.componentFormControl.errors;
+    }
+    get validationErrors() {
+        return this.componentFormControl?.errors;
+    }
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    ngOnInit() {
+        if (this.ngControl) {
+            if (this.formControl) {
+                this.componentFormControl = this.formControl;
+            }
+            else {
+                this.componentFormControl = this.ngControl.control;
+            }
+            setTimeout(() => this.applyTemplateValidators());
+        }
+        else {
+            this.parentFormControl = this.formControlName ?
+                this.controlContainer.control.get(this.formControlName) : this.formControl;
+            if (this.parentFormControl) {
+                this.componentFormControl.setValidators(this.parentFormControl.validator);
+                this.parentFormControl._componentFormControl = this.componentFormControl;
+                if (this.parentFormControl._markAsTouched === undefined) {
+                    this.parentFormControl._markAsTouched = this.parentFormControl.markAsTouched;
+                    this.parentFormControl._setErrors = this.parentFormControl.setErrors;
+                    this.parentFormControl.markAsTouched = ({ onlySelf } = {}) => {
+                        this.parentFormControl._markAsTouched({ onlySelf });
+                        this.parentFormControl._componentFormControl.markAsTouched({ onlySelf });
+                        this.componentFormControl.setErrors(this.parentFormControl.errors);
+                    };
+                    this.parentFormControl.setErrors = (errors) => {
+                        this.parentFormControl._setErrors(errors);
+                        this.parentFormControl._componentFormControl.setErrors(errors);
+                    };
+                }
+                setTimeout(() => this.applyTemplateValidators());
+            }
+        }
+    }
+    applyTemplateValidators() {
+        const inputValidators = this.validators;
+        if (inputValidators) {
+            const validators = [];
+            Object.keys(inputValidators).forEach(v => {
+                switch (v) {
+                    case 'required':
+                        validators.push(Validators.required);
+                        this.required = true;
+                        break;
+                    case 'maxLength':
+                        validators.push((c) => {
+                            const requiredLength = inputValidators.maxLength || 0;
+                            if (this.inputLength() > requiredLength) {
+                                return { maxlength: { requiredLength } };
+                            }
+                            else {
+                                return null;
+                            }
+                        }); // Validators.maxLength(inputValidators.maxLength || 0));
+                        break;
+                }
+            });
+            if (this.parentFormControl) {
+                this.parentFormControl.setValidators(validators);
+                this.parentFormControl.updateValueAndValidity({ emitEvent: false });
+                this.componentFormControl.setValidators(this.parentFormControl.validator);
+            }
+            else {
+                this.componentFormControl.addValidators(validators);
+                this.componentFormControl.updateValueAndValidity();
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.validators && this.componentFormControl) {
+            this.applyTemplateValidators(); // changes.validators.currentValue as UiValidators);
+        }
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.componentFormControl) {
+            isDisabled ? this.componentFormControl.disable({ emitEvent: false }) : this.componentFormControl.enable({ emitEvent: false });
+        }
+    }
+    writeValue(obj) {
+        if (!this.ngControl) {
+            if (obj && obj.error) {
+                console.log('setting error', obj, obj.error);
+                this.componentFormControl.setErrors(obj.error === 'clear' ? null : { custom: obj.error }, { emitEvent: false });
+            }
+            else {
+                this.componentFormControl.setValue(obj);
+            }
+        }
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidatorChange = fn;
+    }
+    validate(control) {
+        return null;
+    }
+    inputLength() {
+        return this.componentFormControl.value ? this.componentFormControl.value.length : 0;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiSimpleComponent, deps: [{ token: i1.NgControl }, { token: i1.ControlContainer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: UiSimpleComponent, selector: "ui-abstract-simple-component", inputs: { validators: "validators", formControl: "formControl", formControlName: "formControlName" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: '** abstract **', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiSimpleComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-abstract-simple-component',
+                    template: '** abstract **'
+                }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl }, { type: i1.ControlContainer }]; }, propDecorators: { validators: [{
+                type: Input
+            }], formControl: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }] } });
+
+const UI_TRANSLATESERVICE = new InjectionToken('IUiTranslateService');
+class UiTranslateService {
+    instant(code, data) {
+        switch (code) {
+            case 'ui.controls.ui-file-uploader.menu.change': return 'Změnit';
+            case 'ui.controls.ui-file-uploader.menu.delete': return 'Smazat';
+            case 'ui.controls.ui-file-uploader.uploadError': return 'Chyba při ukládání souboru';
+            case 'ui.controls.validation.required': return 'Povinná položka';
+            case 'ui.controls.validation.email': return 'Neplatný email';
+            case 'ui.controls.validation.matDatepickerParse': return 'Neplatné datum';
+            case 'ui.controls.validation.maxlength': return 'Zadej maximálně ' + data.requiredLength + ' znaků';
+            case 'ui.controls.validation.minlength': return 'Zadej minimálně ' + data.requiredLength + ' znaků';
+            case 'ui.controls.validation.invalidNumber': return 'Neplatné číslo';
+            case 'ui.controls.validation.positive': return 'Musí být větší než 0';
+            case 'ui.controls.validation.cbGroupRequired': return 'Zaškrtni alespoň jednu položku';
+            case 'ui.controls.ui-select.clear-selection': return 'Zrušit výběr';
+            case 'ui.controls.ui-select.all': return 'Vše';
+            case 'ui.controls.ui-select.apply-selection': return 'Použít výběr';
+            case 'ui.messagebox.button.cancel': return 'Zrušit';
+            case 'ui.messagebox.button.delete': return 'Smazat';
+            default: return code;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiTranslateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiTranslateService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiTranslateService, decorators: [{
+            type: Injectable
+        }] });
+
+class ValidationMessageComponent {
+    constructor(translateService) {
+        this.translateService = translateService;
+    }
+    ngOnInit() {
+    }
+    get errorMessage() {
+        let e = { code: 'Neznámá chyba' };
+        const errors = this.validationErrors;
+        if (errors) {
+            Object.keys(errors).find(a => {
+                e = { code: a, data: errors[a] };
+                return true;
+            });
+            switch (e.code) {
+                case 'required':
+                case 'cbGroupRequired':
+                case 'email':
+                case 'matDatepickerParse':
+                case 'maxlength':
+                case 'minlength':
+                    return this.translateService.instant('ui.controls.validation.' + e.code, e.data);
+                case 'positive':
+                    return this.translateService.instant(isNaN(Number(e.data)) ? 'ui.controls.validation.invalidNumber' : 'ui.controls.validation.positive');
+                case 'custom':
+                    return this.translateService.instant(e.data);
+                default:
+                    return this.translateService.instant(e.code);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ValidationMessageComponent, deps: [{ token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ValidationMessageComponent, selector: "ui-validation-message", inputs: { validationErrors: "validationErrors" }, ngImport: i0, template: "{{ errorMessage }}\r\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ValidationMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-validation-message', template: "{{ errorMessage }}\r\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [UI_TRANSLATESERVICE]
+                }] }]; }, propDecorators: { validationErrors: [{
+                type: Input
+            }] } });
+
+class UiBaseLayoutComponent {
+    get class() {
+        return `${this.ctx.isInvalid ? 'invalid ' : ''} ${this.ctx.inputMessagesPosition}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiBaseLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: { ctx: "ctx" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<div class=\"label\" *ngIf=\"ctx.label\">\r\n  <div class=\"text-container\" [matTooltip]=\"false && ctx.required ? 'Povinn\u00E1 polo\u017Eka' : undefined\" [matTooltipPosition]=\"'above'\">\r\n    <div class=\"text\" >{{ctx.label}}</div>\r\n    <div *ngIf=\"false && ctx.required\" class=\"required\">*</div>\r\n  </div>\r\n  <ng-content select=\".counter-top\"></ng-content>\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"hint-container\" *ngIf=\"ctx.useInputMessages === 'always' || (ctx.useInputMessages === 'ondemand' && (ctx.isInvalid || ctx.hint))\">\r\n  <ui-validation-message class=\"invalid\" *ngIf=\"ctx.isInvalid\" [validationErrors]=\"ctx.validationErrors\"></ui-validation-message>\r\n  <div class=\"hint\" *ngIf=\"!ctx.isInvalid && ctx.hint\" [innerHTML]=\"ctx.hint\"></div>\r\n  <ng-container *ngIf=\"!ctx.label\">\r\n    <ng-content select=\".counter-bottom\"></ng-content>\r\n  </ng-container>\r\n</div>\r\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .label{display:flex;align-items:center}:host .label .text-container{display:flex;align-items:center}:host .label .text-container .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .label .text-container .required{align-self:baseline;padding:0 4px;font-size:1.2em}:host ::ng-deep .counter{margin-left:auto;padding-right:.4em}:host ::ng-deep .counter.counter-top{font-size:.8em}:host.absolute{position:relative}:host.absolute .hint-container{position:absolute;bottom:-1.2em;width:100vw}:host .hint-container{display:flex;height:1.2em;text-align:left;font-size:.8em;margin-top:.1em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: ValidationMessageComponent, selector: "ui-validation-message", inputs: ["validationErrors"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiBaseLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-base-layout', template: "<div class=\"label\" *ngIf=\"ctx.label\">\r\n  <div class=\"text-container\" [matTooltip]=\"false && ctx.required ? 'Povinn\u00E1 polo\u017Eka' : undefined\" [matTooltipPosition]=\"'above'\">\r\n    <div class=\"text\" >{{ctx.label}}</div>\r\n    <div *ngIf=\"false && ctx.required\" class=\"required\">*</div>\r\n  </div>\r\n  <ng-content select=\".counter-top\"></ng-content>\r\n</div>\r\n\r\n<ng-content></ng-content>\r\n\r\n<div class=\"hint-container\" *ngIf=\"ctx.useInputMessages === 'always' || (ctx.useInputMessages === 'ondemand' && (ctx.isInvalid || ctx.hint))\">\r\n  <ui-validation-message class=\"invalid\" *ngIf=\"ctx.isInvalid\" [validationErrors]=\"ctx.validationErrors\"></ui-validation-message>\r\n  <div class=\"hint\" *ngIf=\"!ctx.isInvalid && ctx.hint\" [innerHTML]=\"ctx.hint\"></div>\r\n  <ng-container *ngIf=\"!ctx.label\">\r\n    <ng-content select=\".counter-bottom\"></ng-content>\r\n  </ng-container>\r\n</div>\r\n", styles: [":host{width:100%;display:flex;flex-direction:column}:host .label{display:flex;align-items:center}:host .label .text-container{display:flex;align-items:center}:host .label .text-container .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .label .text-container .required{align-self:baseline;padding:0 4px;font-size:1.2em}:host ::ng-deep .counter{margin-left:auto;padding-right:.4em}:host ::ng-deep .counter.counter-top{font-size:.8em}:host.absolute{position:relative}:host.absolute .hint-container{position:absolute;bottom:-1.2em;width:100vw}:host .hint-container{display:flex;height:1.2em;text-align:left;font-size:.8em;margin-top:.1em}\n"] }]
+        }], propDecorators: { ctx: [{
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class UiSimpleLayoutComponent {
+    length() {
+        return this.ctx.inputLength();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiSimpleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: { ctx: "ctx" }, ngImport: i0, template: "<ui-base-layout [ctx]=\"ctx\">\r\n\r\n  <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-top\">\r\n    {{ length() }} / {{ ctx.validators?.maxLength }}\r\n  </div>\r\n\r\n  <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-bottom\">\r\n    {{ length() }} / {{ ctx.validators?.maxLength }}\r\n  </div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n</ui-base-layout>\r\n", dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: ["ctx"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiSimpleLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-simple-layout', template: "<ui-base-layout [ctx]=\"ctx\">\r\n\r\n  <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-top\">\r\n    {{ length() }} / {{ ctx.validators?.maxLength }}\r\n  </div>\r\n\r\n  <div *ngIf=\"ctx.validators?.maxLength\" class=\"counter counter-bottom\">\r\n    {{ length() }} / {{ ctx.validators?.maxLength }}\r\n  </div>\r\n\r\n  <ng-content></ng-content>\r\n\r\n</ui-base-layout>\r\n" }]
+        }], propDecorators: { ctx: [{
+                type: Input
+            }] } });
+
+class ActionIconComponent {
+    get class() {
+        return `${this.size} ${this.color}${this.disabled ? ' disabled' : ''}${this.busy ? ' busy' : ''}`;
+    }
+    constructor() {
+        this.size = 'normal';
+        this.color = 'primary';
+        this.disabled = false;
+        this.busy = false;
+        this.matIcon = 'close';
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ActionIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ActionIconComponent, selector: "ui-action-icon", inputs: { size: "size", color: "color", disabled: "disabled", busy: "busy", matIcon: "matIcon" }, host: { properties: { "class": "this.class" } }, ngImport: i0, template: "<mat-icon>{{matIcon}}</mat-icon>\r\n", styles: [":host{display:flex}:host:not(.disabled){cursor:pointer}:host mat-icon{width:1em;height:1em;transition:color .25s}:host.small mat-icon{font-size:1em}:host.smaller mat-icon{font-size:1.25em}:host.normal mat-icon{font-size:1.5em}:host.larger mat-icon{font-size:1.75em}:host.large mat-icon{font-size:2em}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ActionIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-action-icon', template: "<mat-icon>{{matIcon}}</mat-icon>\r\n", styles: [":host{display:flex}:host:not(.disabled){cursor:pointer}:host mat-icon{width:1em;height:1em;transition:color .25s}:host.small mat-icon{font-size:1em}:host.smaller mat-icon{font-size:1.25em}:host.normal mat-icon{font-size:1.5em}:host.larger mat-icon{font-size:1.75em}:host.large mat-icon{font-size:2em}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { size: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], matIcon: [{
+                type: Input
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class InputComponent extends UiSimpleComponent {
+    get textAlignClass() {
+        return `text-align-${this.textAlign}`;
+    }
+    get hasPrefix() {
+        return (this.prefixIcon && this.prefixIcon.icon !== '') || this.prefix?.nativeElement?.innerText !== '' || this.forceHasPrefix;
+    }
+    get hasSuffix() {
+        return (this.suffixIcon && this.suffixIcon.icon !== '') || this.suffix?.nativeElement?.innerText !== '' || this.forceHasSuffix;
+    }
+    // control;
+    // onTouched = () => {};
+    // onChange = (value) => {};
+    // get showInvalid(): boolean {
+    //   return true;
+    //   // return this.control.touched && !!this.control.errors;
+    // }
+    // get validationMessage(): string {
+    //   // console.log(this.control?.errors);
+    //   let e: any = {code: 'Neznámá chyba'};
+    //   const errors = this.control?.errors || {};
+    //   Object.keys(errors).find(a => {
+    //     e = {code: a, data: errors[a]};
+    //     return true;
+    //   });
+    //   switch (e.code) {
+    //     case 'required':
+    //       return this.translateService.instant('ui.controls.validation.required');
+    //     case 'email':
+    //       return this.translateService.instant('ui.controls.validation.email');
+    //     case 'matDatepickerParse':
+    //       return this.translateService.instant('ui.controls.validation.matDatepickerParse');
+    //     case 'maxlength':
+    //       return this.translateService.instant('ui.controls.validation.maxlength', e.data);
+    //     case 'minlength':
+    //       return this.translateService.instant('ui.controls.validation.minlength', e.data);
+    //     case 'positive':
+    //       return this.translateService.instant(isNaN(Number(e.data)) ? 'ui.controls.validation.invalidNumber' : 'ui.controls.validation.positive');
+    //     case 'custom':
+    //       return this.translateService.instant(e.data);
+    //     default:
+    //       return this.translateService.instant(e.code);
+    //   }
+    // }
+    get maxLenRequired() {
+        return true;
+        // return this.control.value && (this.control.value.length > (this.validators?.maxLength || 0));
+    }
+    constructor(controlContainer) {
+        super(null, controlContainer);
+        this.controlContainer = controlContainer;
+        this.type = 'text';
+        this.clearButton = false;
+        this.activeIcons = true;
+        this.forceHasPrefix = false;
+        this.forceHasSuffix = false;
+        this.textAlign = 'left';
+        this.focusChanged = new EventEmitter();
+        this.keyPressed = new EventEmitter();
+        // control = new FormControl();
+        this.required = false;
+        this.hasFocus = false;
+        // this.componentFormControl = new FormControl();
+        // super();
+        //  super(undefined, /*ngControl*/ translateService);
+        // super(control);
+        // console.log(control);
+        // if (control) {
+        //   control.valueAccessor = this;
+        // }
+        // if (ngControl != null) {
+        //   // Setting the value accessor directly (instead of using
+        //   // the providers) to avoid running into a circular import.
+        //   ngControl.valueAccessor = this;
+        // }
+    }
+    get showClearButton() {
+        return this.clearButton && this.componentFormControl?.value !== '';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // console.log('probiha vubec oninit?');
+        // if (this.ngControl) {
+        //   console.log('from ngControl....??');
+        //   if (this.formControl) {
+        //     this.componentFormControl = this.formControl;
+        //   } else {
+        //     this.componentFormControl = this.ngControl.control as UntypedFormControl;
+        //   }
+        //   setTimeout(() => {
+        //     this.applyValidators();
+        //   });
+        // } else {
+        //   const control = this.formControlName ?
+        //     (this.controlContainer as FormGroupDirective).control.get(this.formControlName) : this.formControl;
+        //   this.componentFormControl.setValidators(control.validator);
+        //   this.componentFormControl.valueChanges.subscribe(v => console.log('onitin sub', v));
+        //   control._componentFormControl = this.componentFormControl;
+        //   if (control._markAsTouched === undefined) {
+        //     // control._componentFormControl = this.componentFormControl;
+        //     console.log('overriding markAsTouched for', this.formControlName);
+        //     control._markAsTouched = control.markAsTouched;
+        //     control.markAsTouched = ({onlySelf}: { onlySelf?: boolean } = {}): void => {
+        //       console.log('marking as touched', this.componentFormControl.value, control.value, this.xxx.value, control._componentFormControl.value);
+        //       control._markAsTouched({onlySelf});
+        //       setTimeout(() => control._componentFormControl.markAsTouched(), 1000);
+        //     }
+        //   }
+        // }
+    }
+    clearValue() {
+        this.componentFormControl?.setValue('');
+        this.input?.nativeElement.focus();
+    }
+    focus() {
+        this.input?.nativeElement.focus();
+    }
+    onFocus(focus) {
+        setTimeout(() => {
+            this.hasFocus = focus;
+            this.focusChanged.emit(focus);
+        });
+    }
+    onKeypressed($event) {
+        this.keyPressed.emit($event);
+    }
+    // registerOnChange(onChange: any): void {
+    //   this.onChange = onChange;
+    // }
+    //
+    // registerOnTouched(onTouched: any): void {
+    //   this.onTouched = onTouched;
+    // }
+    // registerOnValidatorChange(fn: () => void): void {
+    // }
+    // setDisabledState(isDisabled: boolean): void {
+    //   // isDisabled ? this.control.disable() : this.control.enable();
+    // }
+    // validate(control: AbstractControl): ValidationErrors | null {
+    //   // this.control = control;
+    //   // console.log(control, control.value, control.errors);
+    //   if (this.value === 'error') {
+    //     return { customError: 'muj error'}
+    //   } else {
+    //     return null;
+    //   }
+    //   // console.log('custom validate');
+    //   // return null;
+    // }
+    //
+    // writeValue(obj: any): void {
+    //   console.log('writevalue: ', obj);
+    //   this.componentFormControl.setValue(obj);
+    //   // this.value = obj;
+    //   // this.control.setValue(obj);
+    // }
+    //
+    // registerOnChange(fn: any): void {
+    // }
+    //
+    // registerOnTouched(fn: any): void {
+    // }
+    //
+    // setDisabledState(isDisabled: boolean): void {
+    // }
+    // modelChange($event: any) {
+    //   console.log($event);
+    //   this.onTouched();
+    //   this.onChange($event)
+    // }
+    // validate(control: AbstractControl): ValidationErrors | null {
+    //   console.log(this.label, 'validate');
+    //   return this.componentFormControl.errors;
+    //   // return undefined;
+    // }
+    validate(control) {
+        if (this.parentFormControl) {
+            return this.parentFormControl._componentFormControl.errors;
+        }
+        // console.log('validate', this.componentFormControl.errors);
+        // // this.componentFormControl.setErrors( { custom: 'xxx' });
+        // this.componentFormControl.setErrors( this.componentFormControl.errors);
+        // console.log('validate 2', this.componentFormControl.errors);
+        // return this.componentFormControl.errors;
+        // console.log(this.componentFormControl.errors, control.errors, this.parentFormControl.errors, this);
+        // return this.componentFormControl.errors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: InputComponent, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: InputComponent, selector: "ui-input", inputs: { prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", type: "type", clearButton: "clearButton", activeIcons: "activeIcons", forceHasPrefix: "forceHasPrefix", forceHasSuffix: "forceHasSuffix", textAlign: "textAlign" }, outputs: { focusChanged: "focusChanged", keyPressed: "keyPressed" }, host: { properties: { "class": "this.textAlignClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: InputComponent
+            },
+            {
+                provide: NG_VALIDATORS,
+                multi: true,
+                useExisting: InputComponent
+            }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "prefix", first: true, predicate: ["prefix"], descendants: true, static: true }, { propertyName: "suffix", first: true, predicate: ["suffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n  <input #input [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" />\r\n  <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n  <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n  <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n  <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n  <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\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", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-input', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: InputComponent
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: InputComponent
+                        }
+                    ], template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n  <input #input [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" />\r\n  <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n  <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n  <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n  <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n  <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\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", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { prefixIcon: [{
+                type: Input
+            }], suffixIcon: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], activeIcons: [{
+                type: Input
+            }], forceHasPrefix: [{
+                type: Input
+            }], forceHasSuffix: [{
+                type: Input
+            }], textAlignClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], textAlign: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], prefix: [{
+                type: ViewChild,
+                args: ['prefix', { static: true }]
+            }], suffix: [{
+                type: ViewChild,
+                args: ['suffix', { static: true }]
+            }], focusChanged: [{
+                type: Output
+            }], keyPressed: [{
+                type: Output
+            }] } });
+
+class SelectComponent extends UiSimpleComponent {
+    constructor(ngControl, translateService) {
+        super(ngControl);
+        this.ngControl = ngControl;
+        this.translateService = translateService;
+        this.multiple = false;
+        this.options = [];
+        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) {
+                    this.select.selectionChange.emit(this.optionToValue(v));
+                    this.select.close();
+                }
+                this.lastCount = v.length;
+            });
+        }
+        if (this.trackBy && this.componentFormControl && this.componentFormControl.value) {
+            this.componentFormControl.setValue(this.mapValues(this.componentFormControl.value), { emitEvent: false });
+        }
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        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]));
+            }
+            else {
+                return this.options.find(o => o[this.trackBy] === src[this.trackBy]);
+            }
+        }
+        else {
+            return src;
+        }
+    }
+    selectOption(o, select) {
+        select.selectionChange.emit(this.optionToValue(o));
+        select.close();
+    }
+    selectAll() {
+        this.componentFormControl.setValue(this.options.map(o => this.optionToValue(o)));
+    }
+    clearAll() {
+        this.componentFormControl.setValue([]);
+    }
+    setDisabledState(isDisabled) {
+    }
+    writeValue(obj) {
+        if (!this.ngControl) {
+            if (obj && obj.error) {
+                console.log('setting error', obj, obj.error);
+                this.componentFormControl.setErrors(obj.error === 'clear' ? null : { custom: obj.error }, { emitEvent: false });
+            }
+            else {
+                this.componentFormControl.setValue(this.mapValues(obj));
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", 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: "16.2.11", type: SelectComponent, 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: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4.MatOption, selector: "mat-option", 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: "16.2.11", ngImport: i0, type: SelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-select', 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"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [UI_TRANSLATESERVICE]
+                }] }]; }, propDecorators: { multiple: [{
+                type: Input
+            }], triggerFormatter: [{
+                type: Input
+            }], valueAttribute: [{
+                type: Input
+            }], resetText: [{
+                type: Input
+            }], displayAttribute: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionFormatter: [{
+                type: Input
+            }], optionTemplateRef: [{
+                type: Input
+            }], triggerTemplateRef: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], allowEmptySelection: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], select: [{
+                type: ViewChild,
+                args: ['select']
+            }] } });
+
+const UI_FILESERVICE = new InjectionToken('IUiFileService');
+// export const FileServiceConfigService = new InjectionToken<FileServiceConfig>('FileServiceConfig');
+class UiFileService {
+    constructor(fileServiceConfig) {
+        this.fileServiceConfig = fileServiceConfig;
+        this.uploadInput = new EventEmitter();
+        this.uploadSubscription = new Subject();
+        this.filesToRemove = [];
+        this.controls = new Set();
+        this.uploadSubscription.subscribe((v) => {
+            switch (v.action) {
+                case 'register':
+                    this.controls.add(v.data);
+                    return;
+                case 'destroy':
+                    this.controls.delete(v.data);
+                    return;
+                case 'uploadStarted':
+                    let cnt = 0;
+                    this.controls.forEach(c => cnt += c.hasFilesToUpload ? 1 : 0);
+                    if (cnt === 0) {
+                        this.uploadSubscription.next({ action: 'uploadSuccess' });
+                    }
+                    break;
+                case 'uploadControlFailed':
+                case 'uploadControlSuccess':
+                    let cnt2 = 0;
+                    this.controls.forEach(c => cnt2 += c.hasFilesToUpload ? 1 : 0);
+                    if (cnt2 === 0) {
+                        this.uploadSubscription.next({ action: v.action === 'uploadControlFailed' ? 'uploadFailed' : 'uploadSuccess' });
+                    }
+                    break;
+            }
+        });
+    }
+    upload() {
+        const promises = [];
+        this.controls.forEach(c => promises.push(c.beforeSave()));
+        return new Promise((res, rej) => {
+            this.uploadSubscription.subscribe((v) => {
+                if (v.action === 'uploadSuccess' || v.action === 'uploadFailed') {
+                    res(v.action);
+                }
+            });
+            this.uploadSubscription.next({ action: 'uploadStarted' });
+            Promise.all(promises).then((r) => {
+                const event = {
+                    type: 'uploadAll',
+                    url: this.fileServiceConfig.uploadUrl,
+                    method: 'POST',
+                    headers: this.fileServiceConfig.getAuthHeader()
+                };
+                this.uploadInput.emit(event);
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiFileService, deps: [{ token: UI_FILESERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiFileService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiFileService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [UI_FILESERVICE]
+                }] }]; } });
+
+class FileComponent {
+    get fitImageFileSize() {
+        if (!this.fileServiceConfig.imageSizes[this.fileSize]) {
+            console.error('Missing filesize for ' + this.fileSize);
+        }
+        return this.fileServiceConfig.imageSizes[this.fileSize][0] < 0 || this.fileServiceConfig.imageSizes[this.fileSize][1] < 0;
+    }
+    get width() {
+        if (this.fitImageFileSize) {
+            if (this.nativeFileSizeRatio === -1) {
+                return '100%';
+            }
+            else {
+                return this.nativeFileWidth + 'px';
+            }
+        }
+        else {
+            return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][0] + 'px' : undefined;
+        }
+    }
+    get maxWidth() {
+        if (this.fileServiceConfig.imageSizes[this.fileSize][0] < 0) {
+            return this.width;
+        }
+        return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][0] + 'px' : undefined;
+    }
+    get height() {
+        if (this.fitImageFileSize) {
+            if (this.nativeFileSizeRatio === -1) {
+                return '100%';
+            }
+            else {
+                return this.nativeFileHeight + 'px';
+            }
+        }
+        else {
+            return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][1] + 'px' : undefined;
+        }
+    }
+    get maxHeight() {
+        if (this.fileServiceConfig.imageSizes[this.fileSize][1] < 0) {
+            return this.height;
+        }
+        return this.fileServiceConfig.imageSizes[this.fileSize] ? this.fileServiceConfig.imageSizes[this.fileSize][1] + 'px' : undefined;
+    }
+    get isVideo() {
+        return this.mime.startsWith('video/');
+    }
+    get mime() {
+        if (this.srcUrlMimeType) {
+            return this.srcUrlMimeType;
+        }
+        else {
+            if (this.srcData.nativeFile) {
+                return this.srcData.nativeFile.type;
+            }
+            return this.fileServiceConfig.getMimeType(this.srcData);
+        }
+    }
+    get useRetinaSrc() {
+        return this.fileServiceConfig.useRetinaSrc;
+    }
+    constructor(fileServiceConfig, domSanitizer, fileService) {
+        this.fileServiceConfig = fileServiceConfig;
+        this.domSanitizer = domSanitizer;
+        this.fileService = fileService;
+        this.fileSize = 'default';
+        this.visible = false;
+        this.nativeFileSizeRatio = -1;
+    }
+    ngOnInit() {
+    }
+    ngOnChanges(changes) {
+        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.fileServiceConfig.imageSizes[this.fileSize][0], img.height / this.fileServiceConfig.imageSizes[this.fileSize][1], 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.fileSize, changes.srcData.currentValue, this.srcOptions);
+            }
+        }
+        if (changes.srcUrl) {
+            this.src = changes.srcUrl.currentValue?.src;
+            if (this.src) {
+                this.srcUrlMimeType = changes.srcUrl.currentValue?.mimeType || 'image/png';
+            }
+            else {
+                this.srcUrlMimeType = undefined;
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", 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: "16.2.11", type: FileComponent, 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\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}:host img,:host video{max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "16.2.11", ngImport: i0, type: FileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-file', template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}:host img,:host video{max-width:100%;max-height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [UI_FILESERVICE]
+                }] }, { type: i1$1.DomSanitizer }, { type: UiFileService }]; }, propDecorators: { fileSize: [{
+                type: Input
+            }], srcOptions: [{
+                type: Input
+            }], srcData: [{
+                type: Input
+            }], srcUrl: [{
+                type: Input
+            }], width: [{
+                type: HostBinding,
+                args: ['style.width']
+            }], maxWidth: [{
+                type: HostBinding,
+                args: ['style.maxWidth']
+            }], height: [{
+                type: HostBinding,
+                args: ['style.height']
+            }], maxHeight: [{
+                type: HostBinding,
+                args: ['style.maxHeight']
+            }] } });
+
+class UiFileUploaderComponent extends UiSimpleComponent {
+    get menuTemplate() {
+        return this.templates?.menuTemplate;
+    }
+    get addFileTemplate() {
+        return this.templates?.addFileTemplate;
+    }
+    get fileTemplate() {
+        return this.templates?.fileTemplate;
+    }
+    constructor(fileServiceConfig, translateService, controlContainer, fileService) {
+        super(null, controlContainer);
+        this.fileServiceConfig = fileServiceConfig;
+        this.translateService = translateService;
+        this.controlContainer = controlContainer;
+        this.fileService = fileService;
+        this.maxFiles = 1;
+        this.multiple = true;
+        this.crop = false;
+        this.cropRounded = false;
+        this.fileSize = 'default';
+        this.customFileMenu = false;
+        this.newFilePosition = 'last';
+        this.templates = {};
+        this.previewPosition = 'bottom';
+        this.imageCropped = new EventEmitter();
+        this.fileEvent = new EventEmitter();
+        this.uploadOptions = {
+            concurrency: this.fileServiceConfig.concurrentUploads
+        };
+        this.uploading = false;
+        this.showCropper = false;
+        this.showCropPreview = {};
+        this.cropPreviewTimeouts = {};
+        this.cropSourceImages = {};
+        this.cropperImageLoaded = {};
+        this.imagesDone = {};
+        this.transform = {};
+        this.canvasRotation = {};
+        this.refreshAddInput = false;
+        this.patchingValues = false;
+        this.inputArray = false;
+        this.dragging = false;
+        this.uploaderId = Math.round(Math.random() * 1000000);
+        this.croppedImages = {};
+        this.fileService.uploadSubscription.next({ action: 'register', data: this });
+        this.fileService.uploadSubscription.subscribe((v) => {
+            switch (v.action) {
+                case 'uploadStarted':
+                    this.uploading = true;
+                    break;
+                case 'uploadFailed':
+                case 'uploadSuccess':
+                    setTimeout(() => {
+                        this.uploading = false;
+                    });
+                    this.patchValues();
+            }
+        });
+    }
+    get uploadInput() {
+        return this.fileService.uploadInput;
+    }
+    get editable() {
+        return this.componentFormControl.enabled;
+    }
+    get ngAddStyle() {
+        return {
+            width: Math.abs(this.fileServiceConfig.imageSizes[this.fileSize][0]) + 'px',
+            height: Math.abs(this.fileServiceConfig.imageSizes[this.fileSize][1]) + 'px',
+        };
+    }
+    get aspectRatio() {
+        return this.fileServiceConfig.imageSizes[this.fileSize][0] / this.fileServiceConfig.imageSizes[this.fileSize][1];
+    }
+    get addFileImgSrc() {
+        return this.fileServiceConfig.addFileImgSrc;
+    }
+    cropDone(f) {
+        return !f.$newFile || this.imagesDone[f.$newFile.id];
+    }
+    // ngOnInit(): void {
+    //   super.ngOnInit();
+    // }
+    ngOnDestroy() {
+        this.fileService.uploadSubscription.next({ action: 'destroy', data: this });
+    }
+    remove(f) {
+        if (f.$newFile) {
+            this.uploadInput.emit({ type: 'remove', id: f.$newFile.id });
+        }
+        this.files.splice(this.files.indexOf(f), 1);
+        this.prepareResponse();
+        // this.onChange(this.inputArray ? this.files : (this.files.length > 0 ? this.files[0] : null));
+        this.fileEvent.emit({ message: 'fileRemoved', data: f });
+        //     this.patchValues();
+    }
+    patchValues() {
+        this.patchingValues = true;
+        // if (this.inputArray) {
+        //   this.componentFormControl.setValue(this.files.map(f => f.custom));
+        // } else {
+        //   this.componentFormControl.setValue(this.files.length === 0 ? null : this.files[0].custom);
+        // }
+        this.patchingValues = false;
+    }
+    get hasFilesToUpload() {
+        return !!this.files.find(f => f.$newFile && f.$newFile.progress.status !== 2);
+    }
+    canImagePreview(type) {
+        return type.startsWith('image/') || type.startsWith('video/');
+    }
+    onUploadOutput($event, skipCustomValidation = false) {
+        // console.log($event);
+        switch ($event.type) {
+            case 'start':
+                break;
+            case 'dragOver':
+                this.dragging = true;
+                break;
+            case 'dragOut':
+            case 'drop':
+                this.dragging = false;
+                break;
+            case 'addedToQueue':
+                if (this.crop && !$event.file.type.startsWith('image/')) {
+                    this.uploadInput.emit({ type: 'remove', id: $event.file.id });
+                    this.fileEvent.emit({ message: 'cropInvalidFileType', data: $event.file });
+                    return;
+                }
+                if (!skipCustomValidation && this.fileServiceConfig.fileValidation) {
+                    this.fileServiceConfig.fileValidation(this.fileSize, $event.file).then(valid => {
+                        if (valid) {
+                            this.onUploadOutput($event, true);
+                        }
+                        else {
+                            this.uploadInput.emit({ type: 'remove', id: $event.file.id });
+                            // this.fileEvent.emit({ message: 'cropInvalidFileType', data: $event.file });
+                        }
+                    });
+                }
+                else {
+                    let f;
+                    if (this.changeFileIndex !== undefined) {
+                        f = this.files[this.changeFileIndex];
+                        if (f.$newFile) {
+                            this.uploadInput.emit({ type: 'remove', id: f.$newFile.id });
+                        }
+                        f.$newFile = $event.file;
+                        f.custom = $event.file;
+                        this.changeFileIndex = undefined;
+                    }
+                    else {
+                        f = { custom: $event.file, $newFile: $event.file };
+                        if (this.newFilePosition === 'last') {
+                            this.files.push(f);
+                        }
+                        else {
+                            this.files.unshift(f);
+                        }
+                    }
+                    if (this.canImagePreview($event.file.type)) {
+                        if (this.crop) {
+                            this.canvasRotation[$event.file.id] = 0;
+                            this.cropSourceImages[$event.file.id] = $event.file.nativeFile;
+                            this.cropperImageLoaded[$event.file.id] = false;
+                        }
+                    }
+                    this.prepareResponse();
+                    this.fileEvent.emit({ message: 'fileAdded', data: f });
+                }
+                break;
+            case 'done':
+                const df = this.files.find(f => f.$newFile === $event.file);
+                if (df) {
+                    if (df.$newFile.responseStatus === 200) {
+                        this.files[this.files.indexOf(df)].custom = df.$newFile.response;
+                        df.$newFile = null;
+                    }
+                    else {
+                        // console.log('error on upload', df.$event);
+                    }
+                }
+                if (!this.hasFilesToUpload) {
+                    this.prepareResponse(false);
+                    this.fileService.uploadSubscription.next({
+                        action: this.files.find(f => !!f.$newFile) ? 'uploadControlFailed' : 'uploadControlSuccess'
+                    });
+                }
+                break;
+        }
+    }
+    prepareResponse(doemit = true) {
+        if (this.inputArray) {
+            if (!this.responseFiles) {
+                this.responseFiles = [];
+            }
+            this.responseFiles.length = 0;
+            this.files.forEach(f => this.responseFiles.push({ ...f.custom, $newFile: f.$newFile }));
+        }
+        else {
+            if (this.files.length === 0) {
+                this.responseFiles = null;
+            }
+            else {
+                if (!this.responseFiles) {
+                    this.responseFiles = {};
+                }
+                Object.keys(this.files[0].custom).forEach(k => {
+                    this.responseFiles[k] = this.files[0].custom[k];
+                });
+                this.responseFiles.$newFile = this.files[0].$newFile;
+            }
+        }
+        if (doemit) {
+            this.onChange(this.responseFiles);
+        }
+        // console.log('emit', this.files[1], { ...this.files[1].custom, $newFile: this.files[1].$newFile });
+        // this.onChange(this.inputArray ?
+        //   this.files.map(f => ({ ...f.custom, $newFile: f.$newFile})) :
+        //   (this.files.length > 0 ? { ...this.files[0].custom, $newFile: this.files[0].$newFile } : null));
+        // this.onChange(this.inputArray ?
+        //   this.files :
+        //   (this.files.length > 0 ? this.files[0] : null));
+    }
+    beforeSave() {
+        return new Promise((res, rej) => {
+            this.files.forEach(f => {
+                if (f.$newFile && f.$newFile.progress.status === 2) {
+                    f.$newFile.progress.status = 0;
+                }
+                if (this.crop && f.$newFile && !this.imagesDone[f.$newFile.id]) {
+                    this.cropperDone(f.$newFile.id);
+                }
+            });
+            setTimeout(() => {
+                res('done');
+            }, 250);
+        });
+    }
+    fileChangeEvent(event, f) {
+        this.changeFileIndex = this.files.indexOf(f);
+    }
+    startCropPreview(id) {
+        clearTimeout(this.cropPreviewTimeouts[id]);
+        this.showCropPreview[id] = !!this.cropSourceImages[id];
+    }
+    stopCropPreview(id) {
+        this.cropPreviewTimeouts[id] = setTimeout(() => {
+            this.showCropPreview[id] = false;
+        }, 250);
+    }
+    zoomCroppedImage(dir, id) {
+        let scale = this.transform[id].scale;
+        scale += dir;
+        if (scale < 0.1) {
+            scale = 0.1;
+        }
+        this.transform[id] = {
+            ...this.transform[id],
+            scale
+        };
+    }
+    rotateCroppedImage(dir, id) {
+        this.canvasRotation[id] += dir;
+        const flippedH = this.transform[id].flipH;
+        const flippedV = this.transform[id].flipV;
+        this.transform[id] = {
+            ...this.transform[id],
+            flipH: flippedV,
+            flipV: flippedH
+        };
+    }
+    onImageCropped(event, id) {
+        this.croppedImages[id] = event;
+        this.imageCropped.emit(event);
+    }
+    imageLoaded(id) {
+        this.showCropper = true;
+        setTimeout(() => {
+            this.transform[id] = {
+                scale: 1
+            };
+        });
+    }
+    cropperReady(sourceImageDimensions, id) {
+        this.cropperImageLoaded[id] = true;
+    }
+    loadImageFailed() {
+    }
+    toggleMenuVisibility(f) {
+        this.fileMenuOpened = f;
+    }
+    menuClick() {
+        this.fileMenuOpened = undefined;
+    }
+    writeValue(obj) {
+        this.inputArray = obj instanceof Array;
+        if (this.inputArray) {
+            this.files = obj.map(f => ({ custom: f, $newFile: null }));
+        }
+        else {
+            this.files = obj ? [{ custom: obj, $newFile: null }] : [];
+        }
+        this.cropSourceImages = {};
+    }
+    cropperDone(id) {
+        const f = this.files.find(fx => fx.$newFile && fx.$newFile.id === id);
+        if (f) {
+            // const url = this.croppedImages[id];
+            // console.log(url);
+            // fetch(url)
+            //   .then(res => res.blob())
+            //   .then(blob => {
+            //     f.$newFile.nativeFile = new File([ blob ], 'crop.png', {
+            //       type: 'image/png'
+            //     });
+            //     f.$newFile.name = 'crop.png';
+            //     f.$newFile.size = f.$newFile.nativeFile.size;
+            //     f.$newFile.type = f.$newFile.nativeFile.type;
+            //     this.imagesDone[id] = true;
+            //     console.log(f);
+            //   })
+            const croppedImage = this.croppedImages[id];
+            f.$newFile.nativeFile = new File([croppedImage.blob], 'crop.png', {
+                type: 'image/png'
+            });
+            f.$newFile.name = 'crop.png';
+            f.$newFile.size = f.$newFile.nativeFile.size;
+            f.$newFile.type = f.$newFile.nativeFile.type;
+            this.imagesDone[id] = true;
+            console.log(f);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiFileUploaderComponent, deps: [{ token: UI_FILESERVICE, optional: true }, { token: UI_TRANSLATESERVICE }, { token: i1.ControlContainer, host: true, optional: true, skipSelf: true }, { token: UiFileService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: UiFileUploaderComponent, selector: "ui-file-uploader", inputs: { maxFiles: "maxFiles", multiple: "multiple", crop: "crop", cropRounded: "cropRounded", cropMaxWidth: "cropMaxWidth", fileSize: "fileSize", customFileMenu: "customFileMenu", addHint: "addHint", newFilePosition: "newFilePosition", templates: "templates", previewPosition: "previewPosition" }, outputs: { imageCropped: "imageCropped", fileEvent: "fileEvent" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: UiFileUploaderComponent,
+            }], usesInheritance: true, ngImport: i0, template: "<div class=\"label\" *ngIf=\"label\">\r\n  <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n    <div class=\"text\">{{label}}</div>\r\n    <div *ngIf=\"required\" class=\"required\">*</div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n  <div class=\"existing-files\">\r\n\r\n    <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n      <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n        <mat-icon>menu</mat-icon>\r\n      </div>\r\n      <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n        <ng-container *ngIf=\"!menuTemplate\">\r\n          <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n            <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </label>\r\n          <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"menuTemplate\">\r\n          <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n          <ng-template #fileInput>\r\n          <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                 (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n        <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n          <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n          <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n          <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n                         [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n                         [maintainAspectRatio]=\"true\"\r\n                         [containWithinAspectRatio]=\"false\"\r\n                         [aspectRatio]=\"aspectRatio\"\r\n                         [resizeToWidth]=\"cropMaxWidth\"\r\n                         [onlyScaleDown]=\"false\"\r\n                         [roundCropper]=\"cropRounded\"\r\n                         [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n                         [transform]=\"transform[f.$newFile.id]\"\r\n                         [alignImage]=\"'center'\"\r\n                         [style.display]=\"showCropper ? null : 'none'\"\r\n                         [format]=\"'png'\"\r\n                         (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n                         (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n                         (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n                         (loadImageFailed)=\"loadImageFailed()\"\r\n          ></image-cropper>\r\n\r\n          <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n            <div class=\"crop-menu\">\r\n              <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n              <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n              <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n              <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n              <div style=\"flex: 1 1 100%\"></div>\r\n              <label class=\"menu-item\">\r\n                <mat-icon>upload_file</mat-icon>\r\n                <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                       (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n              </label>\r\n              <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n              <div style=\"flex: 1 1 100%\"></div>\r\n              <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n            </div>\r\n            <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n          </div>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n        <ng-container *ngIf=\"fileTemplate\">\r\n          <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n          <ng-template #fileInput2>\r\n            <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n        <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n        </ui-file>\r\n\r\n        <ng-container *ngIf=\"f.$newFile\">\r\n          <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n            {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n          </div>\r\n          <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n            <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"file-container add\" ngFileDrop  [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n    <label>\r\n      <ng-container *ngIf=\"addFileTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!addFileTemplate\">\r\n        <div class=\"upload-image-container\"></div>\r\n        <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n        <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n      </ng-container>\r\n      <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n    </label>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i6.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i6.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i8.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "component", type: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiFileUploaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-file-uploader', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: UiFileUploaderComponent,
+                        }], template: "<div class=\"label\" *ngIf=\"label\">\r\n  <div class=\"text-container\" [matTooltip]=\"required ? translateService.instant('ui.controls.validation.required') : undefined\" [matTooltipPosition]=\"'above'\">\r\n    <div class=\"text\">{{label}}</div>\r\n    <div *ngIf=\"required\" class=\"required\">*</div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"files-container\" [ngClass]=\"{dragging: dragging, disabled: uploading || !editable}\">\r\n\r\n  <div class=\"existing-files\">\r\n\r\n    <div class=\"file-container\" *ngFor=\"let f of files\">\r\n\r\n      <div class=\"file-menu\" (click)=\"toggleMenuVisibility(f)\" *ngIf=\"!customFileMenu && editable && !uploading\">\r\n        <mat-icon>menu</mat-icon>\r\n      </div>\r\n      <div class=\"file-menu-container mat-elevation-z2\" [ngClass]=\"{visible: f === fileMenuOpened}\" (click)=\"menuClick()\" (mouseleave)=\"menuClick()\">\r\n        <ng-container *ngIf=\"!menuTemplate\">\r\n          <label class=\"menu-item\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.change') }}\r\n            <input *ngIf=\"!refreshAddInput\" style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </label>\r\n          <div class=\"menu-item\" (click)=\"remove(f)\">{{ translateService.instant('ui.controls.ui-file-uploader.menu.delete') }}</div>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"menuTemplate\">\r\n          <ng-template [ngTemplateOutlet]=\"menuTemplate\" [ngTemplateOutletContext]=\"{fileInput: fileInput}\"></ng-template>\r\n          <ng-template #fileInput>\r\n          <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                 (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </ng-template>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <div *ngIf=\"crop && !cropDone(f)\" (mouseenter)=\"startCropPreview(f.$newFile.id)\" (mouseleave)=\"stopCropPreview(f.$newFile.id)\">\r\n        <div class=\"crop-container\" [ngStyle]=\"ngAddStyle\">\r\n\r\n          <ui-file *ngIf=\"false && files.length > 0 && !cropSourceImages\" [fileSize]=\"fileSize\" [srcData]=\"files[0].custom\" [ngClass]=\"{rounded: cropRounded}\"></ui-file>\r\n\r\n          <mat-spinner *ngIf=\"!cropperImageLoaded[f.$newFile.id] && cropSourceImages[f.$newFile.id]\" [diameter]=\"75\"></mat-spinner>\r\n\r\n          <image-cropper *ngIf=\"cropSourceImages[f.$newFile.id]\"\r\n                         [imageFile]=\"cropSourceImages[f.$newFile.id]\"\r\n                         [maintainAspectRatio]=\"true\"\r\n                         [containWithinAspectRatio]=\"false\"\r\n                         [aspectRatio]=\"aspectRatio\"\r\n                         [resizeToWidth]=\"cropMaxWidth\"\r\n                         [onlyScaleDown]=\"false\"\r\n                         [roundCropper]=\"cropRounded\"\r\n                         [canvasRotation]=\"canvasRotation[f.$newFile.id]\"\r\n                         [transform]=\"transform[f.$newFile.id]\"\r\n                         [alignImage]=\"'center'\"\r\n                         [style.display]=\"showCropper ? null : 'none'\"\r\n                         [format]=\"'png'\"\r\n                         (imageCropped)=\"onImageCropped($event, f.$newFile.id)\"\r\n                         (imageLoaded)=\"imageLoaded(f.$newFile.id)\"\r\n                         (cropperReady)=\"cropperReady($event, f.$newFile.id)\"\r\n                         (loadImageFailed)=\"loadImageFailed()\"\r\n          ></image-cropper>\r\n\r\n          <div class=\"crop-preview mat-elevation-z2\" [class]=\"previewPosition\" *ngIf=\"true || (showCropPreview[f.$newFile.id] && cropperImageLoaded[f.$newFile.id])\">\r\n            <div class=\"crop-menu\">\r\n              <mat-icon (click)=\"zoomCroppedImage(.1, f.$newFile.id)\">zoom_in</mat-icon>\r\n              <mat-icon (click)=\"zoomCroppedImage(- .1, f.$newFile.id)\">zoom_out</mat-icon>\r\n              <mat-icon (click)=\"rotateCroppedImage(-1, f.$newFile.id)\">rotate_left</mat-icon>\r\n              <mat-icon (click)=\"rotateCroppedImage(1, f.$newFile.id)\">rotate_right</mat-icon>\r\n              <div style=\"flex: 1 1 100%\"></div>\r\n              <label class=\"menu-item\">\r\n                <mat-icon>upload_file</mat-icon>\r\n                <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                       (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n              </label>\r\n              <mat-icon (click)=\"remove(f)\">delete_outline</mat-icon>\r\n              <div style=\"flex: 1 1 100%\"></div>\r\n              <mat-icon (click)=\"cropperDone(f.$newFile.id)\">done</mat-icon>\r\n            </div>\r\n            <img *ngIf=\"croppedImages[f.$newFile.id]\" [src]=\"croppedImages[f.$newFile.id].objectUrl\" [ngClass]=\"{rounded: cropRounded}\"/>\r\n          </div>\r\n\r\n        </div>\r\n\r\n\r\n\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"!crop || cropDone(f)\">\r\n        <ng-container *ngIf=\"fileTemplate\">\r\n          <ng-template [ngTemplateOutlet]=\"fileTemplate\" [ngTemplateOutletContext]=\"{file: f, fileInput: fileInput2}\"></ng-template>\r\n          <ng-template #fileInput2>\r\n            <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (change)=\"fileChangeEvent($event, f)\"\r\n                   (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\">\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n        <ui-file *ngIf=\"!fileTemplate\" [fileSize]=\"fileSize\" [srcData]=\"f.$newFile ? f.$newFile: f.custom\" [ngClass]=\"{rounded: crop && cropRounded}\">\r\n        </ui-file>\r\n\r\n        <ng-container *ngIf=\"f.$newFile\">\r\n          <div *ngIf=\"f.$newFile.responseStatus && f.$newFile.responseStatus !== 200\" class=\"progress-container error\">\r\n            {{ translateService.instant('ui.controls.ui-file-uploader.uploadError', f.$newFile.response) }}\r\n          </div>\r\n          <div *ngIf=\"!f.$newFile.responseStatus && f.$newFile.progress.status === 1\" class=\"progress-container\">\r\n            <div class=\"progress\" [ngStyle]=\"{width: f.$newFile.progress.data.percentage + '%'}\"></div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </div>\r\n\r\n  </div>\r\n\r\n  <div class=\"file-container add\" ngFileDrop  [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [ngClass]=\"{visible: files.length < maxFiles || maxFiles === 0}\" [ngStyle]=\"addFileTemplate ? {} : ngAddStyle\">\r\n    <label>\r\n      <ng-container *ngIf=\"addFileTemplate\">\r\n        <ng-template [ngTemplateOutlet]=\"addFileTemplate\"></ng-template>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"!addFileTemplate\">\r\n        <div class=\"upload-image-container\"></div>\r\n        <img [src]=\"addFileImgSrc\" [ngClass]=\"{'with-hint': addHint}\" />\r\n        <div *ngIf=\"addHint\" class=\"add-hint\">{{addHint}}</div>\r\n      </ng-container>\r\n      <input style=\"display: none;\" type=\"file\" ngFileSelect [options]=\"uploadOptions\" (uploadOutput)=\"onUploadOutput($event)\" [uploadInput]=\"uploadInput\" [multiple]=\"maxFiles === 0 && multiple\">\r\n    </label>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap}:host .label .text{font-size:.9em;line-height:1em;padding:6px 0 4px}:host .files-container{display:flex;flex-wrap:wrap;border-style:solid}:host .files-container .existing-files{display:flex;flex-wrap:wrap}:host .files-container.dragging .add label{border:2px dashed grey;background-color:#0000001a}:host .files-container.disabled .add{opacity:.5;pointer-events:none}:host .file-container{max-width:100%;max-height:100%;position:relative;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container{position:absolute;bottom:0;left:1px;right:1px;height:20%;max-height:20px;background-color:#0000001a}:host .file-container .progress-container.error{background-color:red;color:#fff;display:flex;align-items:center;justify-content:center}:host .file-container .progress-container .progress{background-color:#0000004d;height:100%}:host .file-container.add{display:flex;align-items:center;flex-direction:column;transition:opacity .25s;cursor:pointer}:host .file-container.add:not(.visible){display:none}:host .file-container.add img{max-width:100%;max-height:100%}:host .file-container.add img.with-hint{max-height:75%}:host .file-container.add .add-hint{margin-top:8px;font-size:80%;text-align:center}:host .file-container.add label{position:absolute;inset:0;cursor:pointer;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}:host .file-container.add .upload-image-container{display:none}:host .file-container .file-menu-container{display:none;position:absolute;left:calc(100% - 45px);top:27px;z-index:1000}:host .file-container .file-menu-container ::ng-deep .menu-item{position:relative;padding:12px 24px;cursor:pointer;display:block}:host .file-container .file-menu-container.visible{display:block}:host .file-container .file-menu{display:flex;position:absolute;flex-direction:column;align-items:center;justify-content:center;padding:12px;right:10px;top:10px;background-color:#fff9;border-radius:50%;cursor:pointer;transition:all .25s;z-index:999}:host .file-container:hover .file-menu{background-color:#fff;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}:host .file-container mat-progress-bar{position:absolute;bottom:0;height:6px;left:0;right:0;z-index:1000}:host image-cropper{padding:0}:host ui-file.rounded ::ng-deep img{border-radius:50%}:host .crop-container{display:flex;align-items:center;justify-content:center;position:relative}:host .crop-container mat-spinner{position:absolute;z-index:1}:host .crop-container .crop-preview{position:absolute;top:100%;left:0;right:0;padding:6px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;max-width:350px;margin-right:auto;margin-left:auto}:host .crop-container .crop-preview.left{right:calc(100% + 6px);left:unset;top:0}:host .crop-container .crop-preview.above{bottom:100%;top:unset}:host .crop-container .crop-preview .crop-menu{width:100%;flex:0 0 auto;display:flex}:host .crop-container .crop-preview .crop-menu mat-icon{margin:0 3px;width:calc(1em + 6px);height:1em;font-size:2em;cursor:pointer;-webkit-user-select:none;user-select:none;flex:1 1 100%}:host .crop-container .crop-preview img{margin:16px 0;max-width:256px;max-height:256px}:host .crop-container .crop-preview img.rounded{border-radius:50%}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [UI_FILESERVICE]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [UI_TRANSLATESERVICE]
+                }] }, { type: i1.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }, { type: UiFileService }]; }, propDecorators: { maxFiles: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], crop: [{
+                type: Input
+            }], cropRounded: [{
+                type: Input
+            }], cropMaxWidth: [{
+                type: Input
+            }], fileSize: [{
+                type: Input
+            }], customFileMenu: [{
+                type: Input
+            }], addHint: [{
+                type: Input
+            }], newFilePosition: [{
+                type: Input
+            }], templates: [{
+                type: Input
+            }], previewPosition: [{
+                type: Input
+            }], imageCropped: [{
+                type: Output
+            }], fileEvent: [{
+                type: Output
+            }] } });
+
+class ExpanderComponent {
+    constructor() {
+        this.expanded = false;
+        this.direction = 'right-down';
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ExpanderComponent, selector: "ui-expander", inputs: { expanded: "expanded", direction: "direction" }, host: { properties: { "class.expanded": "this.expanded", "class": "this.direction" } }, ngImport: i0, template: "<mat-icon>keyboard_arrow_up</mat-icon>\r\n", styles: [":host{display:inline-block;transition:transform .25s}:host.right-down{transform:rotate(90deg)}:host.expanded.up-down{transform:scaleY(-1)}:host.expanded.right-down{transform:rotate(180deg)}\n"], dependencies: [{ kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ExpanderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-expander', template: "<mat-icon>keyboard_arrow_up</mat-icon>\r\n", styles: [":host{display:inline-block;transition:transform .25s}:host.right-down{transform:rotate(90deg)}:host.expanded.up-down{transform:scaleY(-1)}:host.expanded.right-down{transform:rotate(180deg)}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { expanded: [{
+                type: HostBinding,
+                args: ['class.expanded']
+            }, {
+                type: Input
+            }], direction: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }] } });
+
+class ForceVisibilityDirective {
+    static { this.disabled = false; }
+    constructor(el) {
+        this.el = el;
+        this.visibilityPadding = 15;
+        this.visibilityOnRequestOnly = false;
+        this.visibilityEmitChange = false;
+        this.visibilityFromTop = 0;
+        this.visibilityCheckEnabled = true;
+        this.visibilityChanged = new EventEmitter();
+    }
+    static disableFor(timeoutMs) {
+        this.disabled = true;
+        setTimeout(() => this.disabled = false, timeoutMs);
+    }
+    ngOnInit() {
+        if (!this.visibilityOnRequestOnly && !this.visibilityEmitChange) {
+            setTimeout(() => {
+                this.forceVisibility();
+            }, 125);
+        }
+        if (this.visibilityEmitChange) {
+            if (!this.visibilityWithin) {
+                throw Error('traceVisibilityChanged requires visibilityWithin');
+            }
+            else {
+                this.visible = this.isVisible();
+                this.visibilityWithin.onscroll = () => {
+                    const v = this.isVisible();
+                    if (v !== this.visible) {
+                        this.visible = v;
+                        this.visibilityChanged.emit(v);
+                    }
+                };
+            }
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes.visibilityCheckEnabled && changes.visibilityCheckEnabled.currentValue !== changes.visibilityCheckEnabled.previousValue) {
+            this.forceVisibility();
+        }
+    }
+    isVisible() {
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        const rectIn = this.visibilityWithin.getBoundingClientRect();
+        return rect.top + +this.visibilityPadding - rectIn.bottom < 0;
+    }
+    forceVisibility() {
+        if (ForceVisibilityDirective.disabled || !this.visibilityCheckEnabled) {
+            return;
+        }
+        const rect = this.el.nativeElement.getBoundingClientRect();
+        const padding = +this.visibilityPadding;
+        if (this.visibilityWithin) {
+            const rectIn = this.visibilityWithin.getBoundingClientRect();
+            let diff = rect.top + rect.height + padding - rectIn.bottom;
+            if (diff > 0) {
+                this.visibilityWithin.scrollBy(0, diff);
+            }
+            else {
+                diff = rect.top - rectIn.top - padding;
+                if (diff < 0) {
+                    this.visibilityWithin.scrollBy(0, diff);
+                }
+            }
+        }
+        else {
+            if (this.visibilityFromTop !== 0) {
+                document.getElementsByTagName('app-root')[0].scrollTo(0, rect.top - +this.visibilityFromTop);
+            }
+            else {
+                if (rect.bottom > window.innerHeight) {
+                    document.getElementsByTagName('app-root')[0].scrollBy(0, rect.bottom - window.innerHeight + 15);
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ForceVisibilityDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.11", type: ForceVisibilityDirective, selector: "[uiForceVisibility]", inputs: { visibilityWithin: "visibilityWithin", visibilityPadding: "visibilityPadding", visibilityOnRequestOnly: "visibilityOnRequestOnly", visibilityEmitChange: "visibilityEmitChange", visibilityFromTop: "visibilityFromTop", visibilityCheckEnabled: "visibilityCheckEnabled" }, outputs: { visibilityChanged: "visibilityChanged" }, exportAs: ["ForceVisibilityDirective"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ForceVisibilityDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[uiForceVisibility]',
+                    exportAs: 'ForceVisibilityDirective'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { visibilityWithin: [{
+                type: Input
+            }], visibilityPadding: [{
+                type: Input
+            }], visibilityOnRequestOnly: [{
+                type: Input
+            }], visibilityEmitChange: [{
+                type: Input
+            }], visibilityFromTop: [{
+                type: Input
+            }], visibilityCheckEnabled: [{
+                type: Input
+            }], visibilityChanged: [{
+                type: Output
+            }] } });
+
+class DialogComponent {
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+        this.title = '';
+        this.draggable = false; // true;
+        this.hideCloseButton = false;
+    }
+    clickClose() {
+        if (!this.close) {
+            this.dialogRef.close();
+        }
+        else {
+            this.close();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: DialogComponent, deps: [{ token: i1$2.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: DialogComponent, selector: "ui-dialog", inputs: { title: "title", draggable: "draggable", hideCloseButton: "hideCloseButton", close: "close" }, ngImport: i0, template: "<ui-action-icon *ngIf=\"title && !hideCloseButton\" (click)=\"clickClose()\" class=\"close-icon\" [matIcon]=\"'close'\" [color]=\"'warn'\"></ui-action-icon>\r\n\r\n<ng-container *ngIf=\"title\">\r\n  <h1 class=\"draggable\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle mat-dialog-title *ngIf=\"draggable\">\r\n    {{title}}\r\n  </h1>\r\n  <h1 mat-dialog-title *ngIf=\"!draggable\">\r\n    {{title}}\r\n  </h1>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}::ng-deep .mat-mdc-dialog-container{position:relative;overflow:visible!important}::ng-deep .mat-mdc-dialog-container .mdc-dialog__content{line-height:unset!important;letter-spacing:unset!important;color:unset!important}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title{font-size:24px;margin:0 0 5px;padding:12px 16px;border-bottom:1px solid transparent}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title.draggable{cursor:move}::ng-deep .mat-mdc-dialog-container h1{display:flex;align-items:center}::ng-deep .mat-mdc-dialog-container .close-icon{position:absolute;right:16px;top:16px;z-index:1}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions{display:flex;flex-direction:column;border-top:1px solid transparent;margin-top:5px;padding:0}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions.mat-dialog-actions{margin:0 -12px -16px}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions .buttons{display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;width:100%;padding:8px}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions .message{flex:1 1 auto;display:flex;flex-wrap:wrap;font-weight:500;font-size:90%;width:100%;padding:6px 8px}::ng-deep .mat-mdc-dialog-container [mat-dialog-content]{position:relative;max-height:calc(100vh - 150px);overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column;padding:0 6px;outline:none;flex:1}::ng-deep .mat-mdc-dialog-container [mat-dialog-content].mat-dialog-content{margin:0 -12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: DialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dialog', template: "<ui-action-icon *ngIf=\"title && !hideCloseButton\" (click)=\"clickClose()\" class=\"close-icon\" [matIcon]=\"'close'\" [color]=\"'warn'\"></ui-action-icon>\r\n\r\n<ng-container *ngIf=\"title\">\r\n  <h1 class=\"draggable\" cdkDrag cdkDragRootElement=\".cdk-overlay-pane\" cdkDragHandle mat-dialog-title *ngIf=\"draggable\">\r\n    {{title}}\r\n  </h1>\r\n  <h1 mat-dialog-title *ngIf=\"!draggable\">\r\n    {{title}}\r\n  </h1>\r\n</ng-container>\r\n\r\n<ng-content></ng-content>\r\n", styles: [":host{height:100%;display:flex;flex-direction:column}::ng-deep .mat-mdc-dialog-container{position:relative;overflow:visible!important}::ng-deep .mat-mdc-dialog-container .mdc-dialog__content{line-height:unset!important;letter-spacing:unset!important;color:unset!important}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title{font-size:24px;margin:0 0 5px;padding:12px 16px;border-bottom:1px solid transparent}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-title.draggable{cursor:move}::ng-deep .mat-mdc-dialog-container h1{display:flex;align-items:center}::ng-deep .mat-mdc-dialog-container .close-icon{position:absolute;right:16px;top:16px;z-index:1}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions{display:flex;flex-direction:column;border-top:1px solid transparent;margin-top:5px;padding:0}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions.mat-dialog-actions{margin:0 -12px -16px}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions .buttons{display:flex;flex:1 1 auto;justify-content:flex-end;align-items:center;width:100%;padding:8px}::ng-deep .mat-mdc-dialog-container .mat-mdc-dialog-actions .message{flex:1 1 auto;display:flex;flex-wrap:wrap;font-weight:500;font-size:90%;width:100%;padding:6px 8px}::ng-deep .mat-mdc-dialog-container [mat-dialog-content]{position:relative;max-height:calc(100vh - 150px);overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column;padding:0 6px;outline:none;flex:1}::ng-deep .mat-mdc-dialog-container [mat-dialog-content].mat-dialog-content{margin:0 -12px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }]; }, propDecorators: { title: [{
+                type: Input
+            }], draggable: [{
+                type: Input
+            }], hideCloseButton: [{
+                type: Input
+            }], close: [{
+                type: Input
+            }] } });
+
+class MessageBoxModalComponent {
+    constructor(dialogRef, sanitizer, data) {
+        this.dialogRef = dialogRef;
+        this.sanitizer = sanitizer;
+        this.data = data;
+        this.buttons = [];
+        this.hideCloseButton = false;
+        this.processing = null;
+        if (data.message) {
+            this.message = this.sanitizer.bypassSecurityTrustHtml(data.message);
+        }
+        if (this.data.options.template) {
+            this.template = this.data.options.template;
+        }
+        if (this.data.options.errorMessage) {
+            this.errorMessage = this.sanitizer.bypassSecurityTrustHtml(data.options.errorMessage);
+        }
+        if (this.data.options.errorDetail) {
+            this.errorDetail = this.sanitizer.bypassSecurityTrustHtml(data.options.errorDetail);
+        }
+        if (this.data.options.hideCloseButton !== undefined) {
+            this.hideCloseButton = this.data.options.hideCloseButton;
+        }
+        this.buttons = data.options.buttons ? data.options.buttons : [{ id: 'close', text: 'Close' }];
+        this.title = data.options.title;
+    }
+    close(result) {
+        this.dialogRef.close(result);
+    }
+    buttonClick(b) {
+        if (b.process) {
+            this.processing = b;
+            b.process().then(r => {
+                this.close(r);
+            }).catch(e => {
+                this.processing = null;
+            });
+        }
+        else {
+            this.close(b.id);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MessageBoxModalComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i1$1.DomSanitizer }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: MessageBoxModalComponent, selector: "ui-message-box-modal", ngImport: i0, template: `
+    <ui-dialog [title]="title" [hideCloseButton]="hideCloseButton">
+      <div mat-dialog-content *ngIf="message" style="padding: 7px 16px 12px 16px;">
+        <div [innerHTML]="message" style="line-height: 24px;"></div>
+        <pre *ngIf="errorMessage" [innerHTML]="errorMessage"></pre>
+        <pre *ngIf="errorDetail" [innerHTML]="errorDetail"></pre>
+      </div>
+      
+      <div mat-dialog-content *ngIf="template" style="padding: 7px 16px 12px 16px;">
+        <ng-template [ngTemplateOutlet]="template"></ng-template>
+      </div>
+
+      <div mat-dialog-actions>
+        <div class="buttons">
+          <ui-button *ngFor="let b of buttons" [color]="b.color || 'primary'" [tabIndex]="-1"
+                      [kind]="b.kind || 'stroked'" [busy]="processing === b" [disabled]="!!processing || (b.disabled && b.disabled())" (click)="buttonClick(b)" [label]="b.text"></ui-button>
+        </div>
+      </div>
+    </ui-dialog>
+  `, isInline: true, 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: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: DialogComponent, selector: "ui-dialog", inputs: ["title", "draggable", "hideCloseButton", "close"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MessageBoxModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-message-box-modal',
+                    template: `
+    <ui-dialog [title]="title" [hideCloseButton]="hideCloseButton">
+      <div mat-dialog-content *ngIf="message" style="padding: 7px 16px 12px 16px;">
+        <div [innerHTML]="message" style="line-height: 24px;"></div>
+        <pre *ngIf="errorMessage" [innerHTML]="errorMessage"></pre>
+        <pre *ngIf="errorDetail" [innerHTML]="errorDetail"></pre>
+      </div>
+      
+      <div mat-dialog-content *ngIf="template" style="padding: 7px 16px 12px 16px;">
+        <ng-template [ngTemplateOutlet]="template"></ng-template>
+      </div>
+
+      <div mat-dialog-actions>
+        <div class="buttons">
+          <ui-button *ngFor="let b of buttons" [color]="b.color || 'primary'" [tabIndex]="-1"
+                      [kind]="b.kind || 'stroked'" [busy]="processing === b" [disabled]="!!processing || (b.disabled && b.disabled())" (click)="buttonClick(b)" [label]="b.text"></ui-button>
+        </div>
+      </div>
+    </ui-dialog>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: i1$1.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+class MessageBoxService {
+    constructor(dialog, translateService) {
+        this.dialog = dialog;
+        this.translateService = translateService;
+    }
+    confirm(message, options = {}) {
+        const config = new MatDialogConfig();
+        config.disableClose = false;
+        config.minWidth = '340px';
+        config.maxWidth = options.maxWidth || '600px';
+        config.width = '40vw';
+        config.data = { message, options };
+        return this.dialog.open(MessageBoxModalComponent, config).afterClosed();
+    }
+    open(options = {}) {
+        const config = new MatDialogConfig();
+        config.disableClose = true;
+        config.minWidth = '340px';
+        config.maxWidth = options.maxWidth || '600px';
+        config.width = '40vw';
+        config.data = { message: options.message, options };
+        return this.dialog.open(MessageBoxModalComponent, config).afterClosed();
+    }
+    confirmDelete(title, message) {
+        const options = {
+            title,
+            buttons: [
+                { id: 'cancel', text: this.translateService.instant('ui.messagebox.button.cancel') },
+                { id: 'delete', text: this.translateService.instant('ui.messagebox.button.delete'), color: 'warn', kind: 'flat' }
+            ]
+        };
+        // @ts-ignore
+        return this.confirm(message, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MessageBoxService, deps: [{ token: i1$2.MatDialog }, { token: UI_TRANSLATESERVICE }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MessageBoxService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: MessageBoxService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [UI_TRANSLATESERVICE]
+                }] }]; } });
+
+class CurrencyComponent extends UiBaseComponent {
+    // @HostBinding('class')
+    // get sizeClass(): string {
+    //   return this.size;
+    // }
+    constructor(controlContainer) {
+        super();
+        this.controlContainer = controlContainer;
+        this.currencies = [];
+        this.currencyDisabled = false;
+        this.panelClass = 'ui-currency';
+        this.amountHidden = false;
+        this.formGroup = new UntypedFormGroup({
+            amount: new UntypedFormControl(),
+            currency: new UntypedFormControl()
+        });
+        this.hasFocus = false;
+        this.onChange = (value) => { };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.formGroup.valueChanges.subscribe(v => this.onChange(v));
+        // this.formGroup = new FormGroup({
+        //   amount: new FormControl(this.control?.value.amount),
+        //   currency: new FormControl(this.currencies.find(c => c.code === this.control?.value.currency.code))
+        // });
+        // this.formGroup.valueChanges.subscribe(v => {
+        //   this.onChange(this.formGroup?.getRawValue());
+        // });
+        if (this.currencyDisabled) {
+            this.formGroup.get('currency')?.disable();
+        }
+        // this.ngControl.control.statusChanges.subscribe(s => {
+        //   if (s === 'INVALID') {
+        //     // this.formGroup?.get('amount')?.setErrors(this.control?.errors || null);
+        //     this.formGroup?.get('currency')?.markAsTouched();
+        //     // this.formGroup?.get('currency')?.setErrors(this.control?.errors || null);
+        //   }
+        //   if (s === 'DISABLED') {
+        //     this.formGroup?.disable({emitEvent: false});
+        //   }
+        //   if (s === 'VALID') {
+        //     this.formGroup?.enable({emitEvent: false});
+        //     if (this.currencyDisabled) {
+        //       this.formGroup?.get('currency')?.disable({emitEvent: false});
+        //     }
+        //   }
+        // });
+        this.parentFormControl = this.controlContainer.control.get(this.formControlName);
+    }
+    // bindValidators(validators) {
+    //   console.log('binding validators', validators);
+    //   if (this.formGroup) {
+    //     this.formGroup.get('amount').setValidators(validators);
+    //     this.formGroup.get('currency').markAsTouched();
+    //     this.formGroup.get('currency').setErrors(validators);
+    //   }
+    // }
+    get isInvalid() {
+        return this.parentFormControl.invalid;
+    }
+    get validationErrors() {
+        return this.parentFormControl.errors;
+    }
+    focusChanged(hasFocus) {
+        this.hasFocus = hasFocus;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+    }
+    registerOnValidatorChange(fn) {
+    }
+    setDisabledState(isDisabled) {
+        if (isDisabled) {
+            this.formGroup.get('amount').disable();
+            if (!this.currencyDisabled) {
+                this.formGroup.get('currency').disable();
+            }
+        }
+        else {
+            this.formGroup.get('amount').enable();
+            if (!this.currencyDisabled) {
+                this.formGroup.get('currency').enable();
+            }
+        }
+    }
+    validate(control) {
+        return undefined;
+    }
+    writeValue(obj) {
+        this.formGroup.setValue(obj);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CurrencyComponent, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: CurrencyComponent, selector: "ui-currency", inputs: { currencies: "currencies", currencyDisabled: "currencyDisabled", formControlName: "formControlName", panelClass: "panelClass", amountHidden: "amountHidden" }, host: { properties: { "class.amount-hidden": "this.amountHidden", "class.focus": "this.hasFocus" } }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: CurrencyComponent
+            }, {
+                provide: NG_VALIDATORS,
+                multi: true,
+                useExisting: CurrencyComponent
+            }
+        ], usesInheritance: true, ngImport: i0, template: "<ui-base-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [formGroup]=\"formGroup\">\r\n  <ui-input *ngIf=\"!amountHidden\" [textAlign]=\"'right'\" [formControlName]=\"'amount'\" [placeholder]=\"placeholder\" #input [useInputMessages]=\"'never'\" (focusChanged)=\"focusChanged($event)\"></ui-input>\r\n  <ui-select [panelClass]=\"panelClass\" [formControlName]=\"'currency'\" [displayAttribute]=\"'symbol'\" [options]=\"currencies\" [useInputMessages]=\"'never'\"></ui-select>\r\n</div>\r\n\r\n</ui-base-layout>\r\n\r\n", styles: [":host{display:block}:host.amount-hidden ui-select{padding-left:.7em}:host .control-container{display:flex;border-style:solid}:host .control-container ui-input{flex:1 1 100%}:host .control-container ui-select{flex-grow:0;flex-shrink:1}:host ::ng-deep .mat-mdc-select-trigger{padding-left:.2em}:host ::ng-deep input{text-align:right;padding-right:.2em}:host ::ng-deep input,:host ::ng-deep .mat-mdc-select-trigger{border-width:0}:host.large ui-select{flex-basis:4.5em}:host.larger ui-select{flex-basis:5em}:host.normal ui-select{flex-basis:5.5em}:host.smaller ui-select{flex-basis:6em}:host.small ui-select{flex-basis:6em}:host.amount-hidden.large ui-select{flex-basis:5.2em}:host.amount-hidden.larger ui-select{flex-basis:4.7em}:host.amount-hidden.normal ui-select{flex-basis:4.2em}:host.amount-hidden.smaller ui-select{flex-basis:3.8em}:host.amount-hidden.smaller ui-select ::ng-deep .mat-mdc-select-trigger{width:3.2em}:host.amount-hidden.small ui-select{flex-basis:3.5em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "ui-input", inputs: ["prefixIcon", "suffixIcon", "type", "clearButton", "activeIcons", "forceHasPrefix", "forceHasSuffix", "textAlign"], outputs: ["focusChanged", "keyPressed"] }, { kind: "component", type: SelectComponent, selector: "ui-select", inputs: ["multiple", "triggerFormatter", "valueAttribute", "resetText", "displayAttribute", "options", "optionFormatter", "optionTemplateRef", "triggerTemplateRef", "panelClass", "allowEmptySelection", "trackBy"] }, { kind: "component", type: UiBaseLayoutComponent, selector: "ui-base-layout", inputs: ["ctx"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CurrencyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-currency', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: CurrencyComponent
+                        }, {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: CurrencyComponent
+                        }
+                    ], template: "<ui-base-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [formGroup]=\"formGroup\">\r\n  <ui-input *ngIf=\"!amountHidden\" [textAlign]=\"'right'\" [formControlName]=\"'amount'\" [placeholder]=\"placeholder\" #input [useInputMessages]=\"'never'\" (focusChanged)=\"focusChanged($event)\"></ui-input>\r\n  <ui-select [panelClass]=\"panelClass\" [formControlName]=\"'currency'\" [displayAttribute]=\"'symbol'\" [options]=\"currencies\" [useInputMessages]=\"'never'\"></ui-select>\r\n</div>\r\n\r\n</ui-base-layout>\r\n\r\n", styles: [":host{display:block}:host.amount-hidden ui-select{padding-left:.7em}:host .control-container{display:flex;border-style:solid}:host .control-container ui-input{flex:1 1 100%}:host .control-container ui-select{flex-grow:0;flex-shrink:1}:host ::ng-deep .mat-mdc-select-trigger{padding-left:.2em}:host ::ng-deep input{text-align:right;padding-right:.2em}:host ::ng-deep input,:host ::ng-deep .mat-mdc-select-trigger{border-width:0}:host.large ui-select{flex-basis:4.5em}:host.larger ui-select{flex-basis:5em}:host.normal ui-select{flex-basis:5.5em}:host.smaller ui-select{flex-basis:6em}:host.small ui-select{flex-basis:6em}:host.amount-hidden.large ui-select{flex-basis:5.2em}:host.amount-hidden.larger ui-select{flex-basis:4.7em}:host.amount-hidden.normal ui-select{flex-basis:4.2em}:host.amount-hidden.smaller ui-select{flex-basis:3.8em}:host.amount-hidden.smaller ui-select ::ng-deep .mat-mdc-select-trigger{width:3.2em}:host.amount-hidden.small ui-select{flex-basis:3.5em}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { currencies: [{
+                type: Input
+            }], currencyDisabled: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }], panelClass: [{
+                type: Input
+            }], amountHidden: [{
+                type: HostBinding,
+                args: ['class.amount-hidden']
+            }, {
+                type: Input
+            }], hasFocus: [{
+                type: HostBinding,
+                args: ['class.focus']
+            }] } });
+
+class CheckboxComponent extends UiSimpleComponent {
+    constructor(ngControl) {
+        super(ngControl);
+        this.ngControl = ngControl;
+        this.color = 'primary';
+        this.useInputMessages = 'never';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.label) {
+            this.text = this.label;
+            this.label = undefined;
+        }
+    }
+    setDisabledState(isDisabled) {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: CheckboxComponent, selector: "ui-checkbox", inputs: { color: "color", useInputMessages: "useInputMessages" }, usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n  <div class=\"control-container\">\r\n    <mat-checkbox [formControl]=\"componentFormControl\" [color]=\"color\" [class]=\"size\">\r\n      <div *ngIf=\"!text\"><ng-content></ng-content></div>\r\n      <div *ngIf=\"text\" [innerHTML]=\"text\"></div>\r\n    </mat-checkbox>\r\n    <div *ngIf=\"hint\" class=\"hint\" [innerHTML]=\"hint\"></div>\r\n  </div>\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex}:host ::ng-deep .mat-checkbox{display:flex}:host ::ng-deep .hint{font-size:.8em;padding-top:.1em;padding-left:2.05em}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { 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: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-checkbox', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n  <div class=\"control-container\">\r\n    <mat-checkbox [formControl]=\"componentFormControl\" [color]=\"color\" [class]=\"size\">\r\n      <div *ngIf=\"!text\"><ng-content></ng-content></div>\r\n      <div *ngIf=\"text\" [innerHTML]=\"text\"></div>\r\n    </mat-checkbox>\r\n    <div *ngIf=\"hint\" class=\"hint\" [innerHTML]=\"hint\"></div>\r\n  </div>\r\n</ui-simple-layout>\r\n", styles: [":host{display:flex}:host ::ng-deep .mat-checkbox{display:flex}:host ::ng-deep .hint{font-size:.8em;padding-top:.1em;padding-left:2.05em}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { color: [{
+                type: Input
+            }], useInputMessages: [{
+                type: Input
+            }] } });
+
+class AvatarComponent {
+    get contrast() {
+        const hexCode = this.user.shortColour.substring(1, 7);
+        const hexR = parseInt(hexCode.substring(0, 2), 16);
+        const hexG = parseInt(hexCode.substring(2, 4), 16);
+        const hexB = parseInt(hexCode.substring(4, 6), 16);
+        const contrastRatio = hexR * 0.299 + hexG * 0.587 + hexB * 0.114;
+        return contrastRatio >= 200 ? 'black' : 'white';
+    }
+    constructor() {
+        this.user = {};
+        this.size = 'normal';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: AvatarComponent, selector: "ui-avatar", inputs: { user: "user", srcOptions: "srcOptions", size: "size" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: "<ui-file *ngIf=\"user.avatar || (!user.avatar && !user.shortName)\" [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n<div *ngIf=\"!user.avatar && user.shortName\" [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast}\">\r\n  {{ user.shortName }}\r\n</div>\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:16px;width:16px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\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: FileComponent, selector: "ui-file", inputs: ["fileSize", "srcOptions", "srcData", "srcUrl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-avatar', template: "<ui-file *ngIf=\"user.avatar || (!user.avatar && !user.shortName)\" [fileSize]=\"'avatar-' + size\" [srcData]=\"user.avatar || { mimeType: 'image/png'}\" [srcOptions]=\"srcOptions\" ></ui-file>\r\n<div *ngIf=\"!user.avatar && user.shortName\" [ngStyle]=\"{backgroundColor: user.shortColour, color: contrast}\">\r\n  {{ user.shortName }}\r\n</div>\r\n", styles: [":host{display:block;flex:0 0 auto}:host.mini{height:16px;width:16px}:host.mini div{font-size:10px}:host.small{height:24px;width:24px}:host.small div{font-size:13px}:host.smaller{height:50px;width:50px}:host.smaller div{font-size:1.5em}:host.normal{height:74px;width:74px}:host.normal div{font-size:37px}:host.bigger{height:100px;width:100px}:host.bigger div{font-size:50px}:host.big{height:150px;width:150px}:host.big div{font-size:75px}:host ui-file ::ng-deep img{border-radius:50%}:host div{display:flex;align-items:center;justify-content:center;width:100%;font-weight:700;color:#fff;background-size:cover;height:100%;border-radius:50%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { user: [{
+                type: Input
+            }], srcOptions: [{
+                type: Input
+            }], size: [{
+                type: HostBinding,
+                args: ['class']
+            }, {
+                type: Input
+            }] } });
+
+class SubmitButtonComponent {
+    constructor(dialogRef, controlContainer) {
+        this.dialogRef = dialogRef;
+        this.controlContainer = controlContainer;
+        this.busy = false;
+        this.disabled = false;
+        this.formGroups = [];
+        this.label = 'Save';
+        this.prependCloseButton = true;
+    }
+    ngOnInit() {
+        if (this.formInvalid === undefined) {
+            if (this.formGroups === undefined && this.controlContainer && this.controlContainer.control instanceof UntypedFormGroup) {
+                this.formGroups = this.controlContainer.control;
+            }
+            if (!Array.isArray(this.formGroups)) {
+                this.formGroups = [this.formGroups];
+            }
+        }
+    }
+    get formsValid() {
+        if (this.formInvalid !== undefined) {
+            return !this.formInvalid;
+        }
+        else {
+            return !this.formGroups.find(f => f.invalid);
+        }
+    }
+    doSubmit() {
+        this.formGroups.forEach(f => f.markAllAsTouched());
+        if (this.formsValid && this.submit) {
+            this.submit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: SubmitButtonComponent, deps: [{ token: i1$2.MatDialogRef }, { token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: SubmitButtonComponent, selector: "ui-submit-button", inputs: { busy: "busy", disabled: "disabled", formGroups: "formGroups", label: "label", submit: "submit", formInvalid: "formInvalid", prependCloseButton: "prependCloseButton" }, host: { properties: { "class.with-close": "this.prependCloseButton" } }, ngImport: i0, template: "<ui-button *ngIf=\"prependCloseButton\" [label]=\"'Close'\" (click)=\"dialogRef.close()\"></ui-button>\r\n\r\n<ui-button [busy]=\"busy\"\r\n            [disabled]=\"disabled || busy\" [type]=\"'submit'\"\r\n            [formInvalid]=\"!formsValid\"\r\n            [label]=\"label\" (click)=\"doSubmit()\"></ui-button>\r\n", styles: [":host.with-close{display:flex;justify-content:flex-end;width:100%;margin-left:0!important}:host.with-close ui-button{margin-left:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: SubmitButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-submit-button', template: "<ui-button *ngIf=\"prependCloseButton\" [label]=\"'Close'\" (click)=\"dialogRef.close()\"></ui-button>\r\n\r\n<ui-button [busy]=\"busy\"\r\n            [disabled]=\"disabled || busy\" [type]=\"'submit'\"\r\n            [formInvalid]=\"!formsValid\"\r\n            [label]=\"label\" (click)=\"doSubmit()\"></ui-button>\r\n", styles: [":host.with-close{display:flex;justify-content:flex-end;width:100%;margin-left:0!important}:host.with-close ui-button{margin-left:12px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: i1.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { busy: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], formGroups: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], submit: [{
+                type: Input
+            }], formInvalid: [{
+                type: Input
+            }], prependCloseButton: [{
+                type: HostBinding,
+                args: ['class.with-close']
+            }, {
+                type: Input
+            }] } });
+
+class TextAreaComponent extends UiSimpleComponent {
+    constructor(ngControl /*, private _ngZone: NgZone, private cdr: ChangeDetectorRef*/) {
+        super(ngControl);
+        this.ngControl = ngControl;
+        this.rows = 5;
+        this.autoResize = false;
+        this.lastClientHeight = -1;
+        this.focusChanged = new EventEmitter();
+    }
+    focus() {
+        this.textarea.nativeElement.focus();
+    }
+    setDisabledState(isDisabled) {
+    }
+    onFocus(focus) {
+        this.focusChanged.emit(focus);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TextAreaComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: TextAreaComponent, selector: "ui-text-area", inputs: { rows: "rows", autoResize: "autoResize" }, outputs: { focusChanged: "focusChanged" }, viewQueries: [{ propertyName: "textarea", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"input-wrapper\">\r\n  <ng-container *ngIf=\"componentFormControl\">\r\n  <textarea *ngIf=\"autoResize \"#textarea matInput\r\n            cdkTextareaAutosize cdkAutosizeMinRows=\"rows\"\r\n            class=\"autoresize\"\r\n            [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n  <textarea *ngIf=\"!autoResize \"#textarea matInput\r\n            [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n  </ng-container>\r\n</div>\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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: i3$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i4$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TextAreaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-text-area', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"input-wrapper\">\r\n  <ng-container *ngIf=\"componentFormControl\">\r\n  <textarea *ngIf=\"autoResize \"#textarea matInput\r\n            cdkTextareaAutosize cdkAutosizeMinRows=\"rows\"\r\n            class=\"autoresize\"\r\n            [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n  <textarea *ngIf=\"!autoResize \"#textarea matInput\r\n            [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" [rows]=\"rows\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\"></textarea>\r\n  </ng-container>\r\n</div>\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"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { rows: [{
+                type: Input
+            }], autoResize: [{
+                type: Input
+            }], textarea: [{
+                type: ViewChild,
+                args: ['textarea']
+            }], focusChanged: [{
+                type: Output
+            }] } });
+
+class DateComponent extends UiSimpleComponent {
+    constructor(ngControl) {
+        super(ngControl);
+        this.ngControl = ngControl;
+        // @Input() placeholder: string | undefined;
+        // @Input() control;
+        // // @Input() controlName;
+        // @Input() label;
+        // @Input() type;
+        // @Input() floatLabel;
+        this.doKeyup = new EventEmitter();
+        this.hasFocus = false;
+        this.controlTypeName = 'date';
+        this.opening = false;
+    }
+    open() {
+        this.hasFocus = true;
+        // this.opening = true;
+        // this.picker.open();
+        // setTimeout(() => {
+        //   this.input.nativeElement.focus();
+        //   this.opening = false;
+        // }); // , 150);
+    }
+    close() {
+        this.hasFocus = false;
+        // if (!this.opening) {
+        //   this.picker.close();h
+        // }
+    }
+    keyup() {
+        this.doKeyup.emit();
+        // this.onChange(this.control.value);
+    }
+    writeValue(obj) { }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) { }
+    setDisabledState(isDisabled) { }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: DateComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: DateComponent, selector: "ui-date", outputs: { doKeyup: "doKeyup" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container has-suffix active-icons\" [ngClass]=\"{'has-focus': hasFocus}\">\r\n  <input #input (blur)=\"close()\" (focus)=\"open()\" [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" (keyup)=\"keyup()\">\r\n  <mat-icon slot=\"suffix\" (click)=\"picker.open()\" [ngClass]=\"{disabled: componentFormControl.disabled}\">today</mat-icon>\r\n  <mat-datepicker #picker></mat-datepicker>\r\n</div>\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"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: DateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-date', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container has-suffix active-icons\" [ngClass]=\"{'has-focus': hasFocus}\">\r\n  <input #input (blur)=\"close()\" (focus)=\"open()\" [matDatepicker]=\"picker\" [placeholder]=\"placeholder\" [formControl]=\"componentFormControl\" (keyup)=\"keyup()\">\r\n  <mat-icon slot=\"suffix\" (click)=\"picker.open()\" [ngClass]=\"{disabled: componentFormControl.disabled}\">today</mat-icon>\r\n  <mat-datepicker #picker></mat-datepicker>\r\n</div>\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"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { doKeyup: [{
+                type: Output
+            }], picker: [{
+                type: ViewChild,
+                args: ['picker']
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }] } });
+
+class TableComponent {
+    get columnList() {
+        return this.columns.map(c => c.name);
+    }
+    constructor(/*private persistService: PersistService, */ domSanitizer) {
+        this.domSanitizer = domSanitizer;
+        this.columns = [];
+        this.rowTemplates = {};
+        this.headerTemplates = {};
+        this.stateStoreKey = '';
+    }
+    ngOnInit() {
+        this.options = { ...{ sticky: false }, ...this.options };
+        if (this.dataSource) {
+            // if (this.stateStoreKey !== '') {
+            //   const storeKey = this.stateStoreKey + '.sort';
+            //   const ms = this.persistService.get(storeKey, { active: '', direction: ''});
+            //   this.matSort.active = ms.active;
+            //   this.matSort.direction = ms.direction;
+            //   this.matSort.sortChange.subscribe(sc => {
+            //     this.persistService.set(storeKey, sc.direction === '' ? { active: '', direction: ''} : sc);
+            //   });
+            // }
+            if (this.columns.find(c => c.sortable !== undefined)) {
+                this.dataSource.sortData = (rows, sort) => {
+                    if (sort.direction) {
+                        const sortColumn = this.columns.find(c => c.name === sort.active);
+                        if (sortColumn) {
+                            const res = sort.direction === 'asc' ? 1 : -1;
+                            return rows.sort((r1, r2) => {
+                                if (sortColumn.sortable === true) {
+                                    return r1[sortColumn.name] < r2[sortColumn.name] ? -res : res;
+                                }
+                                if (typeof sortColumn.sortable === 'function') {
+                                    return sortColumn.sortable(r1, sort.direction) < sortColumn.sortable(r2, sort.direction) ? -res : res;
+                                }
+                                return 0;
+                            });
+                        }
+                    }
+                    return rows;
+                };
+            }
+        }
+    }
+    ngAfterViewInit() {
+        this.dataSource.sort = this.matSort;
+    }
+    display(row, col) {
+        if (col.formatter) {
+            return this.domSanitizer.bypassSecurityTrustHtml(col.formatter(row));
+        }
+        else {
+            return row[col.name];
+        }
+    }
+    rowClicked(row) {
+        if (this.rowAction) {
+            this.rowAction(row);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: TableComponent, selector: "ui-table", inputs: { columns: "columns", dataSource: "dataSource", options: "options", rowTemplates: "rowTemplates", headerTemplates: "headerTemplates", stateStoreKey: "stateStoreKey", rowAction: "rowAction", matSortActive: "matSortActive", matSortDirection: "matSortDirection" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table matSort [dataSource]=\"dataSource\" style=\"width: 100%\" [matSortActive]=\"matSortActive\" [matSortDirection]=\"matSortDirection\">\r\n\r\n  <ng-container *ngFor=\"let c of columns\" [matColumnDef]=\"c.name\">\r\n\r\n    <ng-container *ngIf=\"c.sortable\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label}}</th>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!c.sortable\">\r\n      <ng-container *ngIf=\"!headerTemplates[c.name]\">\r\n        <th mat-header-cell *matHeaderCellDef>{{c.label}}</th>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"headerTemplates[c.name]\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <ng-template [ngTemplateOutlet]=\"headerTemplates[c.name]\"></ng-template>\r\n        </th>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <td mat-cell *matCellDef=\"let element\" [colSpan]=\"c.colSpan ? c.colSpan(element) : 1\" [class]=\"c.cellClass ? c.cellClass(element) : ''\">\r\n      <ng-container *ngIf=\"!c.colSpan || c.colSpan(element) > 0\">\r\n        <ng-container *ngIf=\"rowTemplates[c.name]\">\r\n          <ng-template [ngTemplateOutlet]=\"rowTemplates[c.name]\" [ngTemplateOutletContext]=\"{row:element}\" ></ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"!rowTemplates[c.name]\">\r\n          <span [innerHTML]=\"display(element, c)\"></span>\r\n        </ng-container>\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columnList; sticky: options?.sticky\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columnList;\" (click)=\"rowClicked(row)\"></tr>\r\n</table>\r\n", styles: [":host table{width:100%}:host td[colspan=\"0\"]{display:none}:host .mat-header-cell{font-weight:400;font-size:14px}:host.inverse .mat-header-row{background-color:#fff}\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$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$6.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-table', template: "<table mat-table matSort [dataSource]=\"dataSource\" style=\"width: 100%\" [matSortActive]=\"matSortActive\" [matSortDirection]=\"matSortDirection\">\r\n\r\n  <ng-container *ngFor=\"let c of columns\" [matColumnDef]=\"c.name\">\r\n\r\n    <ng-container *ngIf=\"c.sortable\">\r\n      <th mat-header-cell *matHeaderCellDef mat-sort-header>{{c.label}}</th>\r\n    </ng-container>\r\n\r\n    <ng-container *ngIf=\"!c.sortable\">\r\n      <ng-container *ngIf=\"!headerTemplates[c.name]\">\r\n        <th mat-header-cell *matHeaderCellDef>{{c.label}}</th>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"headerTemplates[c.name]\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <ng-template [ngTemplateOutlet]=\"headerTemplates[c.name]\"></ng-template>\r\n        </th>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <td mat-cell *matCellDef=\"let element\" [colSpan]=\"c.colSpan ? c.colSpan(element) : 1\" [class]=\"c.cellClass ? c.cellClass(element) : ''\">\r\n      <ng-container *ngIf=\"!c.colSpan || c.colSpan(element) > 0\">\r\n        <ng-container *ngIf=\"rowTemplates[c.name]\">\r\n          <ng-template [ngTemplateOutlet]=\"rowTemplates[c.name]\" [ngTemplateOutletContext]=\"{row:element}\" ></ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"!rowTemplates[c.name]\">\r\n          <span [innerHTML]=\"display(element, c)\"></span>\r\n        </ng-container>\r\n      </ng-container>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columnList; sticky: options?.sticky\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columnList;\" (click)=\"rowClicked(row)\"></tr>\r\n</table>\r\n", styles: [":host table{width:100%}:host td[colspan=\"0\"]{display:none}:host .mat-header-cell{font-weight:400;font-size:14px}:host.inverse .mat-header-row{background-color:#fff}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { columns: [{
+                type: Input
+            }], dataSource: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], rowTemplates: [{
+                type: Input
+            }], headerTemplates: [{
+                type: Input
+            }], stateStoreKey: [{
+                type: Input
+            }], rowAction: [{
+                type: Input
+            }], matSortActive: [{
+                type: Input
+            }], matSortDirection: [{
+                type: Input
+            }], matSort: [{
+                type: ViewChild,
+                args: [MatSort]
+            }] } });
+
+class BurgerComponent {
+    constructor() {
+        this.open = false;
+    }
+    ngOnInit() {
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BurgerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: BurgerComponent, selector: "ui-burger", inputs: { open: "open" }, host: { properties: { "class.open": "this.open" } }, ngImport: i0, template: "  <span></span>\r\n  <span></span>\r\n  <span></span>\r\n  <span></span>\r\n", styles: [":host{width:40px;height:35px;position:relative;margin:10px auto 0;transform:rotate(0);transition:.5s ease-in-out;cursor:pointer;display:block}:host span{display:block;position:absolute;height:4px;width:100%;border-radius:9px;opacity:1;left:0;transform:rotate(0);transition:.25s ease-in-out}:host span:nth-child(1){top:0}:host span:nth-child(2),:host span:nth-child(3){top:12px}:host span:nth-child(4){top:24px}:host.open span:nth-child(1){top:12px;width:0%;left:50%}:host.open span:nth-child(2){transform:rotate(45deg)}:host.open span:nth-child(3){transform:rotate(-45deg)}:host.open span:nth-child(4){top:18px;width:0;left:50%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: BurgerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-burger', template: "  <span></span>\r\n  <span></span>\r\n  <span></span>\r\n  <span></span>\r\n", styles: [":host{width:40px;height:35px;position:relative;margin:10px auto 0;transform:rotate(0);transition:.5s ease-in-out;cursor:pointer;display:block}:host span{display:block;position:absolute;height:4px;width:100%;border-radius:9px;opacity:1;left:0;transform:rotate(0);transition:.25s ease-in-out}:host span:nth-child(1){top:0}:host span:nth-child(2),:host span:nth-child(3){top:12px}:host span:nth-child(4){top:24px}:host.open span:nth-child(1){top:12px;width:0%;left:50%}:host.open span:nth-child(2){transform:rotate(45deg)}:host.open span:nth-child(3){transform:rotate(-45deg)}:host.open span:nth-child(4){top:18px;width:0;left:50%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { open: [{
+                type: HostBinding,
+                args: ['class.open']
+            }, {
+                type: Input
+            }] } });
+
+class AutocompleteComponent extends UiBaseComponent {
+    constructor(controlContainer, 
+    // @Optional() @Self() public ngControl: NgControl,
+    cdr) {
+        super();
+        this.controlContainer = controlContainer;
+        this.cdr = cdr;
+        this.SHOWN_USERS_DELTA = 10;
+        this.multiple = true;
+        this.allowNew = false;
+        this.displayAttribute = 'name';
+        this.idAttribute = 'id';
+        this.filteredOptions = [];
+        this.filteredMaxItemsShown = this.SHOWN_USERS_DELTA;
+        // skipBlur = false;
+        // typingStarted = false;
+        this.messageShown = false;
+        this.alreadyAdded = false;
+        this.optionsVisible = false;
+        this.inputFocused = false;
+        this.inputControl = new UntypedFormControl('');
+        this.checkboxSelection = new Set();
+        this.optionDisabled = () => false;
+        this.optionFormatter = (o) => o[this.displayAttribute];
+    }
+    buildSearchableOptions() {
+        return this.options.map(o => ({
+            ...o,
+            unselectable: this.optionDisabled(o),
+            searchString: `${this.optionFormatter(o)}`.toLowerCase()
+        }));
+    }
+    filterOptions(text) {
+        this.filteredMaxItemsShown = this.SHOWN_USERS_DELTA;
+        return this.searchableOptions.filter(u => u.searchString.includes(text));
+    }
+    ngOnInit() {
+        // console.log('ngoninit');
+        super.ngOnInit();
+        // if (this.formControlName && this.controlContainer.control) {
+        //   this.control = this.controlContainer.control.get(this.formControlName) as FormControl;
+        // }
+        //
+        // this.user = this.control.value;
+        // this.value = this.control.value;
+        this.searchableOptions = this.buildSearchableOptions();
+        // if (this.control.disabled) {
+        //   this.inputControl.disable();
+        // }
+        // this.control.statusChanges.subscribe(v => {
+        //   if (v === 'DISABLED') {
+        //     this.inputControl.disable();
+        //   }
+        //   if (v === 'VALID') {
+        //     this.inputControl.enable();
+        //   }
+        // });
+        this.inputControl.valueChanges.pipe(debounceTime(200)).subscribe(v => {
+            const lcv = v.toLowerCase();
+            this.filteredOptions = this.filterOptions(lcv);
+            if (this.filteredOptions.length > 0) {
+                this.focusedOption = this.filteredOptions[0];
+            }
+            else {
+                this.focusedOption = undefined;
+            }
+            if (v === '') {
+                this.focusedOption = undefined;
+                this.selectedOption = undefined;
+            }
+            // if (v !== '') {
+            //   if (this.newUsername === v) {
+            //     this.selectedUser = {id: null, fullName: v};
+            //     this.initialUser = this.selectedUser;
+            //   } else {
+            //     if (this.filteredGroupsAndUsers.length > 0) {
+            //       this.focusedGroup = this.filteredGroupsAndUsers[0];
+            //       this.focusedUser = this.focusedGroup.filteredUsers[0];
+            //     } else {
+            //       this.focusedGroup = null;
+            //       this.focusedUser = null;
+            //     }
+            //     if ((this.focusedUser && !this.focusedUser.unselectable) || this.focusedUser === this.initialUser) {
+            //       this.selectedUser = this.focusedUser;
+            //     } else {
+            //       this.selectedUser = null;
+            //     }
+            //   }
+            // } else {
+            //   this.selectedUser = null;
+            //   this.focusedUser = null;
+            //   this.focusedGroup = null;
+            // }
+            // this.onChange(v);
+        });
+        //   if (this.user !== null) {
+        //     let selectedUser = null;
+        //     this.groupsAndUsers.find(g => g.users.find(u => {
+        //       if (u.id === this.user.id) {
+        //         selectedUser = u;
+        //         return true;
+        //       } else {
+        //         return false;
+        //       }
+        //     }));
+        //
+        //     if (selectedUser) {
+        //       this.inputControl.setValue(selectedUser.fullName);
+        //       this.selectedUser = selectedUser;
+        //     } else {
+        //       this.newUsername = this.user.fullName;
+        //       this.inputControl.setValue(this.user.fullName);
+        //       this.selectedUser = { id: null, fullName: this.newUsername };
+        //     }
+        //   } else {
+        //     this.selectedUser = null;
+        //     this.inputControl.setValue('');
+        //   }
+        //   this.initialUser = this.selectedUser;
+        // }
+    }
+    inputFocusChanged(focused) {
+        if (focused) {
+            this.optionsVisible = true;
+        }
+    }
+    //   setTimeout(() => {
+    //     if (!focused && this.skipBlur) {
+    //       this.skipBlur = false;
+    //       return;
+    //     }
+    //     if (!this.typingStarted && focused) {
+    //       this.inputControl.setValue(this.inputControl.value);
+    //       this.typingStarted = true;
+    //     }
+    //     if (!this.messageShown) {
+    //       this.inputFocused = focused;
+    //       if (!focused) {
+    //         this.emitSelection('focus lost');
+    //       }
+    //     }
+    //   }, 250);
+    // }
+    get hasCheckboxSelected() {
+        return this.checkboxSelection.size > 0;
+    }
+    optionChecked(u) {
+        return this.checkboxSelection.has(u[this.idAttribute]);
+    }
+    select(u) {
+        if (this.hasCheckboxSelected || u.unselectable) {
+            return;
+        }
+        if (!u.unselectable) {
+            this.selectedOption = u;
+            this.initialOption = u;
+            this.toggleDropdown();
+        }
+    }
+    toggleOptionCheckboxed(u) {
+        if (!u.unselectable) {
+            this.checkboxSelection.has(u[this.idAttribute]) ?
+                this.checkboxSelection.delete(u[this.idAttribute]) : this.checkboxSelection.add(u[this.idAttribute]);
+        }
+        this.input?.focus();
+    }
+    // get optionsVisible(): boolean {
+    //   return this.inputFocused && this.typingStarted;
+    // }
+    keyPressed(keyEvent) {
+        this.lastEmittedId = -1;
+        this.optionsVisible = true;
+        // this.typingStarted = keyEvent.key !== 'Tab' && keyEvent.key !== 'Escape';
+        if (keyEvent.key === 'Escape') {
+            keyEvent.stopPropagation();
+            keyEvent.preventDefault();
+            this.optionsVisible = false;
+            return;
+        }
+        if (keyEvent.key === 'Enter' && this.hasCheckboxSelected) {
+            if (this.focusedOption && !this.focusedOption.unselectable) {
+                this.toggleOptionCheckboxed(this.focusedOption);
+            }
+            keyEvent.stopPropagation();
+            keyEvent.preventDefault();
+            return;
+        }
+        // if (keyEvent.key === 'Enter' && this.filteredGroupsAndUsers.length === 0 && this.focusedUser === null && !this.alreadyAdded) {
+        //   this.newUser();
+        //   keyEvent.stopPropagation();
+        //   keyEvent.preventDefault();
+        //   return;
+        // }
+        if (keyEvent.key === 'Enter') {
+            this.selectedOption = this.focusedOption;
+            keyEvent.stopPropagation();
+            keyEvent.preventDefault();
+            this.toggleDropdown();
+            return;
+        }
+        if ((keyEvent.key === 'ArrowDown' || keyEvent.key === 'ArrowUp') && !this.focusedOption) {
+            if (this.filteredOptions.length > 0) {
+                this.focusedOption = this.filteredOptions[0];
+                // if (!this.focusedUser.unselectable || this.focusedUser === this.initialUser) {
+                //   this.selectedUser = this.focusedUser;
+                // }
+                this.selectedOption = this.focusedOption;
+                return;
+            }
+        }
+        if (keyEvent.key === 'ArrowDown' && this.focusedOption) {
+            const idx = this.filteredOptions.indexOf(this.focusedOption);
+            if (idx === this.filteredMaxItemsShown - 1) {
+                this.filteredMaxItemsShown += this.SHOWN_USERS_DELTA;
+            }
+            if (idx < this.filteredOptions.length - 1) {
+                this.focusedOption = this.filteredOptions[idx + 1];
+                this.selectedOption = this.focusedOption;
+            }
+        }
+        if (keyEvent.key === 'ArrowUp' && this.focusedOption) {
+            const idx = this.filteredOptions.indexOf(this.focusedOption);
+            if (idx > 0) {
+                this.focusedOption = this.filteredOptions[idx - 1];
+                this.selectedOption = this.focusedOption;
+            }
+        }
+        this.cdr.detectChanges();
+    }
+    toggleDropdown() {
+        this.optionsVisible = false;
+        this.emitSelection('toggle');
+    }
+    emitSelection(src) {
+        this.initialOption = this.selectedOption;
+        if (this.selectedOption) {
+            const checkId = this.selectedOption.id === null ? 0 : this.selectedOption.id;
+            if (this.lastEmittedId !== checkId) {
+                this.lastEmittedId = checkId;
+                this.onChange(this.options.find(o => o[this.idAttribute] === this.selectedOption[this.idAttribute]));
+                this.inputControl.setValue(this.selectedOption[this.displayAttribute]);
+            }
+        }
+        else {
+            // this.control.setValue(null);
+            this.onChange(null);
+            this.inputControl.setValue('', { emitEvent: false });
+        }
+        // if (this.selectedOption) {
+        //   const checkId = this.selectedUser.id === null ? 0 : this.selectedUser.id;
+        //   if (this.lastEmittedId !== checkId) {
+        //     this.inputControl.setValue(this.selectedUser.fullName, {emitEvent: false});
+        //     if (this.selectedUser.id) {
+        //       this.groupsAndUsers.find(g => g.users.find(u => {
+        //         if (u.id === this.selectedUser.id) {
+        //           this.control.setValue(u);
+        //           return true;
+        //         } else {
+        //           return false;
+        //         }
+        //       }));
+        //     } else {
+        //       this.control.setValue(this.selectedUser);
+        //     }
+        //     this.lastEmittedId = checkId;
+        //   }
+        // } else {
+        //   if (this.lastEmittedId !== null || this.lastEmittedId === -1/* || this.selectedUser?.unselectable*/) {
+        //     this.control?.setValue(null);
+        //     this.inputControl.setValue('', {emitEvent: false});
+        //     this.lastEmittedId = null;
+        //   }
+        // }
+        // this.typingStarted = false;
+    }
+    cancelCheckboxSelection() {
+        this.checkboxSelection.clear();
+        // this.skipBlur = true;
+        // this.input?.focus();
+    }
+    useCheckboxSelection() {
+        // this.newUsername = '';
+        // const users = [];
+        // this.groupsAndUsers.forEach(g => g.users.forEach(u => {
+        //   if (!users.includes(u) && this.checkboxSelection.has(u.id)) {
+        //     users.push(u);
+        //   }
+        // }));
+        const outputOptions = this.options.filter(o => this.checkboxSelection.has(o[this.idAttribute]) && !this.optionDisabled(o));
+        if (outputOptions.length > 0) {
+            this.selectedOption = outputOptions[0];
+            this.inputControl.setValue(this.selectedOption[this.displayAttribute], { emitEvent: false });
+            this.onChange(outputOptions);
+            this.toggleDropdown();
+            // this.control?.setValue(outputOptions);
+            // this.typingStarted = false;
+            // this.skipBlur = true;
+        }
+        this.checkboxSelection.clear();
+    }
+    newOption() {
+    }
+    loadMore(visible) {
+        if (visible) {
+            this.filteredMaxItemsShown += this.SHOWN_USERS_DELTA;
+        }
+    }
+    focus() {
+        this.input?.focus();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+    }
+    setDisabledState(isDisabled) {
+        isDisabled ? this.inputControl.disable() : this.inputControl.enable();
+    }
+    writeValue(obj) {
+        if (obj) {
+            if (obj.id) {
+                this.filteredOptions = this.searchableOptions.filter(so => so.id === obj.id);
+            }
+            else {
+                this.filteredOptions = this.filterOptions(obj[this.displayAttribute].toLowerCase());
+            }
+            if (this.filteredOptions.length === 1) {
+                this.selectedOption = this.filteredOptions[0];
+                this.focusedOption = this.filteredOptions[0];
+            }
+            this.inputControl.setValue(obj[this.displayAttribute]);
+        }
+        else {
+            this.filteredOptions = this.filterOptions('');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: AutocompleteComponent, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { options: "options", multiple: "multiple", allowNew: "allowNew", displayAttribute: "displayAttribute", idAttribute: "idAttribute", optionDisabled: "optionDisabled", optionFormatter: "optionFormatter" }, providers: [{
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: AutocompleteComponent
+            }], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "optionsTrigger", first: true, predicate: ["trigger"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"wrapper\" #wrapper>\r\n  <div *ngIf=\"optionsVisible\" (click)=\"toggleDropdown()\" class=\"overlay\"></div>\r\n  <ui-input [formControl]=\"inputControl\" #input #trigger=\"cdkOverlayOrigin\" cdkOverlayOrigin (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\" [useInputMessages]=\"'never'\">\r\n    <div slot=\"prefix\"><ng-content select=\"[slot=acprefix]\"></ng-content></div>\r\n  </ui-input>\r\n\r\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"optionsVisible\">\r\n    <div class=\"options-box\" style=\"display: flex; flex-direction: column\" [ngStyle]=\"{width: wrapper.offsetWidth + 'px'}\">\r\n      <div class=\"options\" #options>\r\n\r\n        <ng-container *ngFor=\"let option of filteredOptions; index as i\">\r\n          <div *ngIf=\"i < filteredMaxItemsShown\" class=\"option-container\" [ngClass]=\"{selected: focusedOption === option}\">\r\n            <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\" [disabled]=\"option.unselectable\" (change)=\"toggleOptionCheckboxed(option)\">\r\n              <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n                <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n                  {{optionFormatter(option)}}\r\n                </div>\r\n                <div class=\"option-option\" *ngIf=\"focusedOption !== option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n                  {{optionFormatter(option)}}\r\n                </div>\r\n                <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n              </div>\r\n            </mat-checkbox>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityEmitChange]=\"true\" (visibilityChanged)=\"loadMore($event)\">\r\n          &nbsp;\r\n        </div>\r\n\r\n\r\n        <div *ngIf=\"filteredOptions.length === 0 && !focusedOption\" class=\"new-user\">\r\n          <ng-container *ngIf=\"alreadyAdded\">\r\n            <div style=\"text-align: center\">U\u017Eivatel {{inputControl.value}} u\u017E je mezi dlu\u017En\u00EDky</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!alreadyAdded\">\r\n            <div style=\"text-align: center; padding: 1em 0\">U\u017Eivatele <strong>{{inputControl.value}}</strong> nezn\u00E1me</div>\r\n            <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\" (click)=\"newOption()\"></ui-button>\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"filteredOptions.length === 0 && focusedOption\" class=\"new-user\">\r\n          <div style=\"text-align: center\">Nezn\u00E1m\u00FD u\u017Eivatel {{inputControl.value}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"hasCheckboxSelected && filteredOptions.length > 0\" class=\"checkbox-buttons\">\r\n        <ui-button [size]=\"'small'\" [kind]=\"'basic'\" [label]=\"'Zru\u0161it v\u00FDb\u011Br'\" (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n        <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\" (click)=\"useCheckboxSelection()\"></ui-button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n", styles: [":host .wrapper{position:relative;outline:none;display:flex}:host .overlay{position:fixed;inset:0}.options-box{max-height:248px;min-width:310px;box-shadow:0 2px 4px -1px #07254833,0 4px 5px #07254824,0 1px 10px #0725481f}.options-box .checkbox-buttons{display:flex;padding:8px 4px 4px;justify-content:space-between}.options-box .options{padding:4px;overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column}.options-box .options .option-container{padding:0 0 0 12px;display:flex;align-items:center}.options-box .options .option-container:hover{cursor:pointer}.options-box .options .option-container mat-checkbox{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field label{display:flex;width:100%}.options-box .options .option-container-inner{flex:1 1 100%;display:flex;align-items:center}.options-box .options .option-container-inner .option-option{flex:1 1 100%;padding:10px 0 10px 8px}.options-box .options .option-container-inner mat-icon{display:none;font-size:20px;height:20px;margin-right:8px}.options-box .options .option-container-inner:hover mat-icon{display:block}\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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$3.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { 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: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["type", "matIconPrefix", "label", "disabled", "busy", "kind", "color", "size", "formInvalid"] }, { kind: "component", type: InputComponent, selector: "ui-input", inputs: ["prefixIcon", "suffixIcon", "type", "clearButton", "activeIcons", "forceHasPrefix", "forceHasSuffix", "textAlign"], outputs: ["focusChanged", "keyPressed"] }, { kind: "directive", type: ForceVisibilityDirective, selector: "[uiForceVisibility]", inputs: ["visibilityWithin", "visibilityPadding", "visibilityOnRequestOnly", "visibilityEmitChange", "visibilityFromTop", "visibilityCheckEnabled"], outputs: ["visibilityChanged"], exportAs: ["ForceVisibilityDirective"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: AutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-autocomplete', providers: [{
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: AutocompleteComponent
+                        }], template: "<div class=\"wrapper\" #wrapper>\r\n  <div *ngIf=\"optionsVisible\" (click)=\"toggleDropdown()\" class=\"overlay\"></div>\r\n  <ui-input [formControl]=\"inputControl\" #input #trigger=\"cdkOverlayOrigin\" cdkOverlayOrigin (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\" [useInputMessages]=\"'never'\">\r\n    <div slot=\"prefix\"><ng-content select=\"[slot=acprefix]\"></ng-content></div>\r\n  </ui-input>\r\n\r\n  <ng-template cdkConnectedOverlay [cdkConnectedOverlayOrigin]=\"trigger\" [cdkConnectedOverlayOpen]=\"optionsVisible\">\r\n    <div class=\"options-box\" style=\"display: flex; flex-direction: column\" [ngStyle]=\"{width: wrapper.offsetWidth + 'px'}\">\r\n      <div class=\"options\" #options>\r\n\r\n        <ng-container *ngFor=\"let option of filteredOptions; index as i\">\r\n          <div *ngIf=\"i < filteredMaxItemsShown\" class=\"option-container\" [ngClass]=\"{selected: focusedOption === option}\">\r\n            <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\" [disabled]=\"option.unselectable\" (change)=\"toggleOptionCheckboxed(option)\">\r\n              <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n                <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n                  {{optionFormatter(option)}}\r\n                </div>\r\n                <div class=\"option-option\" *ngIf=\"focusedOption !== option\" [ngClass]=\"{unselectable: option.unselectable}\">\r\n                  {{optionFormatter(option)}}\r\n                </div>\r\n                <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n              </div>\r\n            </mat-checkbox>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility [visibilityWithin]=\"options\" [visibilityEmitChange]=\"true\" (visibilityChanged)=\"loadMore($event)\">\r\n          &nbsp;\r\n        </div>\r\n\r\n\r\n        <div *ngIf=\"filteredOptions.length === 0 && !focusedOption\" class=\"new-user\">\r\n          <ng-container *ngIf=\"alreadyAdded\">\r\n            <div style=\"text-align: center\">U\u017Eivatel {{inputControl.value}} u\u017E je mezi dlu\u017En\u00EDky</div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"!alreadyAdded\">\r\n            <div style=\"text-align: center; padding: 1em 0\">U\u017Eivatele <strong>{{inputControl.value}}</strong> nezn\u00E1me</div>\r\n            <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\" (click)=\"newOption()\"></ui-button>\r\n          </ng-container>\r\n        </div>\r\n        <div *ngIf=\"filteredOptions.length === 0 && focusedOption\" class=\"new-user\">\r\n          <div style=\"text-align: center\">Nezn\u00E1m\u00FD u\u017Eivatel {{inputControl.value}}</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"hasCheckboxSelected && filteredOptions.length > 0\" class=\"checkbox-buttons\">\r\n        <ui-button [size]=\"'small'\" [kind]=\"'basic'\" [label]=\"'Zru\u0161it v\u00FDb\u011Br'\" (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n        <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\" (click)=\"useCheckboxSelection()\"></ui-button>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</div>\r\n\r\n", styles: [":host .wrapper{position:relative;outline:none;display:flex}:host .overlay{position:fixed;inset:0}.options-box{max-height:248px;min-width:310px;box-shadow:0 2px 4px -1px #07254833,0 4px 5px #07254824,0 1px 10px #0725481f}.options-box .checkbox-buttons{display:flex;padding:8px 4px 4px;justify-content:space-between}.options-box .options{padding:4px;overflow:auto;scroll-behavior:smooth;display:flex;flex-direction:column}.options-box .options .option-container{padding:0 0 0 12px;display:flex;align-items:center}.options-box .options .option-container:hover{cursor:pointer}.options-box .options .option-container mat-checkbox{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field{width:100%}.options-box .options .option-container mat-checkbox ::ng-deep .mdc-form-field label{display:flex;width:100%}.options-box .options .option-container-inner{flex:1 1 100%;display:flex;align-items:center}.options-box .options .option-container-inner .option-option{flex:1 1 100%;padding:10px 0 10px 8px}.options-box .options .option-container-inner mat-icon{display:none;font-size:20px;height:20px;margin-right:8px}.options-box .options .option-container-inner:hover mat-icon{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], allowNew: [{
+                type: Input
+            }], displayAttribute: [{
+                type: Input
+            }], idAttribute: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], optionsTrigger: [{
+                type: ViewChild,
+                args: ['trigger']
+            }], optionDisabled: [{
+                type: Input
+            }], optionFormatter: [{
+                type: Input
+            }] } });
+
+class ActionButtonComponent extends ButtonComponent {
+    constructor() {
+        super(...arguments);
+        this.withPrimary = false;
+        this.overlayAlignment = 'left';
+        this.hasBackdrop = false;
+        this.autoClose = true;
+        this.primaryClick = new EventEmitter();
+        this.overlayToggled = new EventEmitter();
+        this.deferredRender = false;
+        this.iconHover = false;
+        this.rightPositions = [
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' }
+        ];
+        this.leftPositions = [
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' },
+            { originX: 'end', originY: 'top', overlayX: 'end', overlayY: 'bottom' },
+            { originX: 'end', originY: 'bottom', overlayX: 'end', overlayY: 'top' }
+        ];
+        this.openOverlay = false;
+    }
+    get class() {
+        return super.class + (this.withPrimary ? ' with-primary' : '');
+    }
+    onKeydownHandler(evt) {
+        if (this.openOverlay) {
+            this.toggleOverlay(false);
+        }
+    }
+    // constructor() {
+    //   super();
+    // }
+    get positions() {
+        switch (this.overlayAlignment) {
+            case 'left': return this.leftPositions;
+            default: return this.rightPositions;
+        }
+    }
+    ngOnInit() {
+        setTimeout(() => {
+            this.deferredRender = true;
+        });
+    }
+    toggleOverlay(status) {
+        if (status || this.autoClose) {
+            this.openOverlay = status;
+            this.overlayToggled.emit(status);
+        }
+    }
+    closeOverlay() {
+        this.openOverlay = false;
+    }
+    togglePrimaryOverlay(status, $event) {
+        this.toggleOverlay(status);
+        $event.stopPropagation();
+        $event.preventDefault();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ActionButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: ActionButtonComponent, selector: "ui-action-button", inputs: { withPrimary: "withPrimary", overlayAlignment: "overlayAlignment", hasBackdrop: "hasBackdrop", triggerTpl: "triggerTpl", autoClose: "autoClose" }, outputs: { primaryClick: "primaryClick", overlayToggled: "overlayToggled" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" }, properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "trigger1", first: true, predicate: ["trigger1"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTpl\">\r\n  <div style=\"display: flex;\" (click)=\"toggleOverlay(true)\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\">\r\n    <ng-template [ngTemplateOutlet]=\"triggerTpl\"></ng-template>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && withPrimary\">\r\n  <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy, 'icon-hover': iconHover}\" [class]=\"class\" (click)=\"primaryClick.emit()\">\r\n    <div class=\"hover-container\"></div>\r\n    {{label}}\r\n    <div class=\"mat-icon-container\" (mouseenter)=\"iconHover = true\" (mouseleave)=\"iconHover = false\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"togglePrimaryOverlay(true, $event)\">\r\n      \u25BC\r\n    </div>\r\n    <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && !withPrimary\">\r\n  <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"toggleOverlay(true)\">\r\n    {{label}}\r\n    <div class=\"mat-icon-container\">\r\n      \u25BC\r\n    </div>\r\n    <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template *ngIf=\"deferredRender\" cdkConnectedOverlay [cdkConnectedOverlayPositions]=\"positions\" [cdkConnectedOverlayOrigin]=\"trigger1\" [cdkConnectedOverlayOpen]=\"openOverlay\" [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\" [cdkConnectedOverlayDisableClose]=\"!autoClose\" (overlayOutsideClick)=\"toggleOverlay(false)\">\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n", ":host .mat-icon-container{margin-left:.25em}:host button{font-size:1em}:host.small.with-primary button{padding-right:2.9em!important}:host.small.with-primary button .mat-icon-container{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;border-left:1px solid transparent;padding-right:.6em;padding-left:.6em}:host.small.with-primary button .hover-container{position:absolute;inset:0 2.2em 0 0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: i4.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ActionButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-action-button', template: "<ng-container *ngIf=\"triggerTpl\">\r\n  <div style=\"display: flex;\" (click)=\"toggleOverlay(true)\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\">\r\n    <ng-template [ngTemplateOutlet]=\"triggerTpl\"></ng-template>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && withPrimary\">\r\n  <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy, 'icon-hover': iconHover}\" [class]=\"class\" (click)=\"primaryClick.emit()\">\r\n    <div class=\"hover-container\"></div>\r\n    {{label}}\r\n    <div class=\"mat-icon-container\" (mouseenter)=\"iconHover = true\" (mouseleave)=\"iconHover = false\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"togglePrimaryOverlay(true, $event)\">\r\n      \u25BC\r\n    </div>\r\n    <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-container *ngIf=\"!triggerTpl && !withPrimary\">\r\n  <button matRipple [type]=\"type\" [disabled]=\"isDisabled || busy\" [ngClass]=\"{busy: busy}\" [class]=\"class\" cdkOverlayOrigin #trigger1=\"cdkOverlayOrigin\" (click)=\"toggleOverlay(true)\">\r\n    {{label}}\r\n    <div class=\"mat-icon-container\">\r\n      \u25BC\r\n    </div>\r\n    <mat-progress-bar *ngIf=\"busy\" mode=\"indeterminate\" [color]=\"color\"></mat-progress-bar>\r\n  </button>\r\n</ng-container>\r\n\r\n<ng-template *ngIf=\"deferredRender\" cdkConnectedOverlay [cdkConnectedOverlayPositions]=\"positions\" [cdkConnectedOverlayOrigin]=\"trigger1\" [cdkConnectedOverlayOpen]=\"openOverlay\" [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\" [cdkConnectedOverlayDisableClose]=\"!autoClose\" (overlayOutsideClick)=\"toggleOverlay(false)\">\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n", styles: [":host{display:flex;align-items:center}:host button{font-size:1em;width:100%;cursor:pointer;outline:none;position:relative;display:flex;align-items:center;justify-content:center;border:1px solid transparent;transition:all .15s ease-in-out}:host button mat-progress-bar{position:absolute;bottom:1px;height:2px;border-bottom-left-radius:10px;border-bottom-right-radius:10px}:host button mat-icon{margin-right:4px;height:16px;width:16px;font-size:16px}:host.small button mat-icon{width:14px;height:14px;font-size:14px;margin-right:2px}\n", ":host .mat-icon-container{margin-left:.25em}:host button{font-size:1em}:host.small.with-primary button{padding-right:2.9em!important}:host.small.with-primary button .mat-icon-container{position:absolute;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;border-left:1px solid transparent;padding-right:.6em;padding-left:.6em}:host.small.with-primary button .hover-container{position:absolute;inset:0 2.2em 0 0}\n"] }]
+        }], propDecorators: { withPrimary: [{
+                type: Input
+            }], overlayAlignment: [{
+                type: Input
+            }], hasBackdrop: [{
+                type: Input
+            }], triggerTpl: [{
+                type: Input
+            }], autoClose: [{
+                type: Input
+            }], primaryClick: [{
+                type: Output
+            }], overlayToggled: [{
+                type: Output
+            }], trigger1: [{
+                type: ViewChild,
+                args: ['trigger1', { static: false }]
+            }], class: [{
+                type: HostBinding,
+                args: ['class']
+            }], onKeydownHandler: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+class RadioComponent {
+    constructor() {
+        this.color = 'primary';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: RadioComponent, selector: "ui-radio", inputs: { value: "value", label: "label", color: "color" }, ngImport: i0, template: "<mat-radio-button [value]=\"value\" [color]=\"color\">\r\n  {{label}}\r\n</mat-radio-button>\r\n", styles: [""], dependencies: [{ kind: "component", type: i3$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: RadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-radio', template: "<mat-radio-button [value]=\"value\" [color]=\"color\">\r\n  {{label}}\r\n</mat-radio-button>\r\n" }]
+        }], propDecorators: { value: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }] } });
+
+// export interface CheckboxGroupOption {
+//   value: any,
+//   label: string,
+//   hint?: string
+// }
+class CheckboxGroupComponent extends UiSimpleComponent {
+    constructor(control) {
+        super(control);
+        this.control = control;
+        this.displayAttribute = 'label';
+        this.hintAttribute = 'hint';
+        this.optionEnabled = (option) => true;
+    }
+    // ngOnInit(): void {
+    //   super.ngOnInit();
+    // }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (changes.options) {
+            this.cbxs = [];
+            this.valueMode = Array.isArray(this.control.value) ? 'array' : 'object';
+            Object.keys(changes.options.currentValue).forEach(k => {
+                const v = changes.options.currentValue[k];
+                const ct = new UntypedFormControl(this.valueMode === 'array' ? this.control.value.includes(v) : this.control.value[k] === true);
+                if (!this.optionEnabled(v)) {
+                    ct.disable();
+                }
+                ct.valueChanges.subscribe(() => {
+                    const value = this.valueMode === 'array' ? [] : {};
+                    let hasChecked = false;
+                    this.cbxs.forEach((cbx) => {
+                        const checked = cbx.control.value;
+                        hasChecked = hasChecked || checked;
+                        if (this.valueMode === 'array') {
+                            if (checked) {
+                                value.push(cbx.value.value);
+                            }
+                        }
+                        else {
+                            value[cbx.key] = checked;
+                        }
+                    });
+                    this.componentFormControl.markAsTouched();
+                    this.componentFormControl.setValue(value);
+                    if (this.componentFormControl.hasValidator(Validators.required) && !hasChecked) {
+                        this.componentFormControl.setErrors({ cbGroupRequired: true });
+                    }
+                    else {
+                        this.componentFormControl.setErrors(null);
+                    }
+                });
+                this.cbxs.push({
+                    control: ct,
+                    value: this.valueAttribute ? v[this.valueAttribute] : v,
+                    label: this.displayAttribute ? v[this.displayAttribute] : v,
+                    hint: this.hintAttribute ? v[this.hintAttribute] : undefined,
+                    key: this.valueMode === 'object' ? k : undefined
+                });
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: CheckboxGroupComponent, selector: "ui-checkbox-group", inputs: { valueAttribute: "valueAttribute", displayAttribute: "displayAttribute", hintAttribute: "hintAttribute", options: "options", optionEnabled: "optionEnabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<ui-checkbox *ngFor=\"let cbx of cbxs\" [formControl]=\"cbx.control\" [label]=\"cbx.label\" [hint]=\"cbx.hint\"></ui-checkbox>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host ui-checkbox{margin-top:.2em;margin-bottom:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: CheckboxComponent, selector: "ui-checkbox", inputs: ["color", "useInputMessages"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-checkbox-group', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<ui-checkbox *ngFor=\"let cbx of cbxs\" [formControl]=\"cbx.control\" [label]=\"cbx.label\" [hint]=\"cbx.hint\"></ui-checkbox>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host ui-checkbox{margin-top:.2em;margin-bottom:.2em}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { valueAttribute: [{
+                type: Input
+            }], displayAttribute: [{
+                type: Input
+            }], hintAttribute: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], optionEnabled: [{
+                type: Input
+            }] } });
+
+class RadioGroupComponent extends UiSimpleComponent {
+    constructor(control) {
+        super(control);
+        this.control = control;
+        this.id = Math.round(Math.random() * 999999);
+        this.displayAttribute = 'name';
+        this.groupName = 'radio-' + this.id;
+        this.optionEnabled = (option) => true;
+    }
+    // ngOnInit(): void {
+    //   super.ngOnInit();
+    // }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        if (changes.options) {
+            this.cbxs = [];
+            changes.options.currentValue.forEach(cv => {
+                this.cbxs.push({
+                    value: this.valueAttribute ? cv[this.valueAttribute] : cv,
+                    label: cv[this.displayAttribute]
+                });
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: RadioGroupComponent, selector: "ui-radio-group", inputs: { options: "options", displayAttribute: "displayAttribute", valueAttribute: "valueAttribute", groupName: "groupName", optionEnabled: "optionEnabled" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n  <mat-radio-group [formControl]=\"componentFormControl\" [name]=\"groupName\" [class]=\"size\">\r\n\r\n    <mat-radio-button *ngFor=\"let cbx of cbxs\" [value]=\"cbx.value\" >{{cbx.label}}</mat-radio-button>\r\n\r\n  </mat-radio-group>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host mat-radio-group{display:flex;flex-direction:column}:host mat-radio-button{margin-top:.2em;margin-bottom:.2em}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "directive", type: i3$6.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$6.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: RadioGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-radio-group', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n  <mat-radio-group [formControl]=\"componentFormControl\" [name]=\"groupName\" [class]=\"size\">\r\n\r\n    <mat-radio-button *ngFor=\"let cbx of cbxs\" [value]=\"cbx.value\" >{{cbx.label}}</mat-radio-button>\r\n\r\n  </mat-radio-group>\r\n\r\n</ui-simple-layout>\r\n", styles: [":host mat-radio-group{display:flex;flex-direction:column}:host mat-radio-button{margin-top:.2em;margin-bottom:.2em}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }]; }, propDecorators: { options: [{
+                type: Input
+            }], displayAttribute: [{
+                type: Input
+            }], valueAttribute: [{
+                type: Input
+            }], groupName: [{
+                type: Input
+            }], optionEnabled: [{
+                type: Input
+            }] } });
+
+class EditorComponent extends UiSimpleComponent {
+    clickout(event) {
+        const cr = this.el.nativeElement.getBoundingClientRect();
+        const outside = event.x < cr.x || event.x > cr.x + cr.width || event.y < cr.y || event.y > cr.y + cr.height;
+        this.focused = !outside;
+        if (!this.focused) {
+            this.componentFormControl.markAsTouched();
+        }
+    }
+    constructor(ngControl /*, private _ngZone: NgZone, private cdr: ChangeDetectorRef*/, el) {
+        super(ngControl);
+        this.ngControl = ngControl;
+        this.el = el;
+        this.rows = 5;
+        this.autoResize = false;
+        this.focused = false;
+        this.editorId = `editorJs${Math.round(Math.random() * 10000000)}`;
+    }
+    focus() {
+        this.focused = true;
+        this.editor.focus();
+    }
+    setDisabledState(isDisabled) {
+    }
+    ngAfterViewInit() {
+        this.editor = new EditorJS({
+            holder: this.editorId,
+            inlineToolbar: ['bold', 'italic'],
+            tools: {
+                header: {
+                    class: Header,
+                    inlineToolbar: true,
+                    config: {
+                        levels: [1, 2],
+                        defaultLevel: 1
+                    }
+                },
+                list: {
+                    class: List,
+                    inlineToolbar: true,
+                    config: {
+                        defaultStyle: 'unordered'
+                    },
+                },
+            },
+            i18n: {
+                messages: {
+                    ui: {
+                        "inlineToolbar": {
+                            "converter": {
+                                "Convert to": "Odstavec změnit na"
+                            }
+                        }
+                    },
+                    toolNames: {
+                        "Heading": "Nadpis",
+                        "List": "Seznam"
+                    }
+                }
+            },
+            minHeight: 90,
+            placeholder: 'Něco napiš...',
+            onChange: () => { this.focused = true; this.editor.save().then((r) => this.onChange(r)); },
+            onReady: () => {
+                const editorElement = document.getElementById(this.editorId); // your "holder" ID
+                editorElement.addEventListener('focusin', () => {
+                    this.focused = true;
+                });
+            },
+            data: this.data
+        });
+    }
+    inputLength() {
+        let len = 0;
+        if (this.componentFormControl && this.componentFormControl.value && this.componentFormControl.value.blocks) {
+            this.componentFormControl.value.blocks.forEach(b => {
+                if (b.type === 'paragraph' || b.type === 'header') {
+                    len += b.data.text.replace(/<\/?[^>]+(>|$)/g, '').replace(/&nbsp;/, '').length;
+                }
+                if (b.type === 'list') {
+                    b.data.items.forEach(i => {
+                        len += i.replace(/<\/?[^>]+(>|$)/g, '').replace(/&nbsp;/, '').length;
+                    });
+                }
+            });
+        }
+        return len;
+    }
+    writeValue(obj) {
+        this.data = obj;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: EditorComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: EditorComponent, selector: "ui-editor", inputs: { rows: "rows", autoResize: "autoResize" }, host: { listeners: { "document:click": "clickout($event)" } }, usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"editor-wrapper\" [ngClass]=\"{focus: focused}\">\r\n  <ng-container *ngIf=\"componentFormControl\">\r\n\r\n    <p [id]=editorId></p>\r\n\r\n  </ng-container>\r\n</div>\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", ".editor-wrapper{max-height:140px;min-height:140px;overflow-y:auto;overflow-x:hidden}.editor-wrapper.focus{max-height:unset}.editor-wrapper ::ng-deep .codex-editor__redactor{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions{background-color:#fff;margin:0 4px;border-radius:6px;padding:3px;right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover-item__icon{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened{width:unset;min-width:unset}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened .ce-popover__items{display:flex}.editor-wrapper ::ng-deep .ce-popover--opened{margin-right:12px}.editor-wrapper ::ng-deep .cdx-search-field,.editor-wrapper ::ng-deep .ce-popover-item__title{display:none}.editor-wrapper ::ng-deep .ce-popover--open-top{top:calc(-1 * (var(--offset-from-target) + 48px))!important}.editor-wrapper ::ng-deep .ce-conversion-toolbar__tools{display:flex}.editor-wrapper ::ng-deep .ce-conversion-toolbar{width:210px}.editor-wrapper ::ng-deep h1.ce-header{font-size:1.3em;line-height:1.2em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep h2.ce-header{font-size:1.15em;line-height:1.1em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep .ce-paragraph{line-height:1.5em;font-size:1em;padding:0;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list{padding:0 0 0 2em;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list li{padding:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: EditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-editor', template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"editor-wrapper\" [ngClass]=\"{focus: focused}\">\r\n  <ng-container *ngIf=\"componentFormControl\">\r\n\r\n    <p [id]=editorId></p>\r\n\r\n  </ng-container>\r\n</div>\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", ".editor-wrapper{max-height:140px;min-height:140px;overflow-y:auto;overflow-x:hidden}.editor-wrapper.focus{max-height:unset}.editor-wrapper ::ng-deep .codex-editor__redactor{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions{background-color:#fff;margin:0 4px;border-radius:6px;padding:3px;right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover-item__icon{margin-right:0}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened{width:unset;min-width:unset}.editor-wrapper ::ng-deep .ce-toolbar__actions .ce-popover--opened .ce-popover__items{display:flex}.editor-wrapper ::ng-deep .ce-popover--opened{margin-right:12px}.editor-wrapper ::ng-deep .cdx-search-field,.editor-wrapper ::ng-deep .ce-popover-item__title{display:none}.editor-wrapper ::ng-deep .ce-popover--open-top{top:calc(-1 * (var(--offset-from-target) + 48px))!important}.editor-wrapper ::ng-deep .ce-conversion-toolbar__tools{display:flex}.editor-wrapper ::ng-deep .ce-conversion-toolbar{width:210px}.editor-wrapper ::ng-deep h1.ce-header{font-size:1.3em;line-height:1.2em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep h2.ce-header{font-size:1.15em;line-height:1.1em;margin:0 0 .4em;padding:0;letter-spacing:0;font-weight:700}.editor-wrapper ::ng-deep .ce-paragraph{line-height:1.5em;font-size:1em;padding:0;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list{padding:0 0 0 2em;margin:0 0 .5em}.editor-wrapper ::ng-deep .cdx-list li{padding:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.ElementRef }]; }, propDecorators: { rows: [{
+                type: Input
+            }], autoResize: [{
+                type: Input
+            }], clickout: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+class InputAutocompleteComponent extends UiSimpleComponent {
+    get textAlignClass() {
+        return `text-align-${this.textAlign}`;
+    }
+    get hasPrefix() {
+        return (this.prefixIcon && this.prefixIcon.icon !== '') || this.prefix?.nativeElement?.innerText !== '' || this.forceHasPrefix;
+    }
+    get hasSuffix() {
+        return (this.suffixIcon && this.suffixIcon.icon !== '') || this.suffix?.nativeElement?.innerText !== '' || this.forceHasSuffix;
+    }
+    // control;
+    // onTouched = () => {};
+    // onChange = (value) => {};
+    // get showInvalid(): boolean {
+    //   return true;
+    //   // return this.control.touched && !!this.control.errors;
+    // }
+    // get validationMessage(): string {
+    //   // console.log(this.control?.errors);
+    //   let e: any = {code: 'Neznámá chyba'};
+    //   const errors = this.control?.errors || {};
+    //   Object.keys(errors).find(a => {
+    //     e = {code: a, data: errors[a]};
+    //     return true;
+    //   });
+    //   switch (e.code) {
+    //     case 'required':
+    //       return this.translateService.instant('ui.controls.validation.required');
+    //     case 'email':
+    //       return this.translateService.instant('ui.controls.validation.email');
+    //     case 'matDatepickerParse':
+    //       return this.translateService.instant('ui.controls.validation.matDatepickerParse');
+    //     case 'maxlength':
+    //       return this.translateService.instant('ui.controls.validation.maxlength', e.data);
+    //     case 'minlength':
+    //       return this.translateService.instant('ui.controls.validation.minlength', e.data);
+    //     case 'positive':
+    //       return this.translateService.instant(isNaN(Number(e.data)) ? 'ui.controls.validation.invalidNumber' : 'ui.controls.validation.positive');
+    //     case 'custom':
+    //       return this.translateService.instant(e.data);
+    //     default:
+    //       return this.translateService.instant(e.code);
+    //   }
+    // }
+    get maxLenRequired() {
+        return true;
+        // return this.control.value && (this.control.value.length > (this.validators?.maxLength || 0));
+    }
+    constructor(controlContainer) {
+        super(null, controlContainer);
+        this.controlContainer = controlContainer;
+        this.type = 'text';
+        this.clearButton = false;
+        this.activeIcons = true;
+        this.forceHasPrefix = false;
+        this.forceHasSuffix = false;
+        this.options = [];
+        this.textAlign = 'left';
+        this.focusChanged = new EventEmitter();
+        this.keyPressed = new EventEmitter();
+        this.filteredOptions = [];
+        // control = new FormControl();
+        this.required = false;
+        this.hasFocus = false;
+        // this.componentFormControl = new FormControl();
+        // super();
+        //  super(undefined, /*ngControl*/ translateService);
+        // super(control);
+        // console.log(control);
+        // if (control) {
+        //   control.valueAccessor = this;
+        // }
+        // if (ngControl != null) {
+        //   // Setting the value accessor directly (instead of using
+        //   // the providers) to avoid running into a circular import.
+        //   ngControl.valueAccessor = this;
+        // }
+    }
+    get showClearButton() {
+        return this.clearButton && this.componentFormControl?.value !== '';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.filteredOptions = this.options;
+        this.componentFormControl?.valueChanges.subscribe((v) => {
+            const vl = v.toLowerCase();
+            this.filteredOptions = this.options.filter(o => vl === '' || o.toLowerCase().includes(vl));
+        });
+        // console.log('probiha vubec oninit?');
+        // if (this.ngControl) {
+        //   console.log('from ngControl....??');
+        //   if (this.formControl) {
+        //     this.componentFormControl = this.formControl;
+        //   } else {
+        //     this.componentFormControl = this.ngControl.control as UntypedFormControl;
+        //   }
+        //   setTimeout(() => {
+        //     this.applyValidators();
+        //   });
+        // } else {
+        //   const control = this.formControlName ?
+        //     (this.controlContainer as FormGroupDirective).control.get(this.formControlName) : this.formControl;
+        //   this.componentFormControl.setValidators(control.validator);
+        //   this.componentFormControl.valueChanges.subscribe(v => console.log('onitin sub', v));
+        //   control._componentFormControl = this.componentFormControl;
+        //   if (control._markAsTouched === undefined) {
+        //     // control._componentFormControl = this.componentFormControl;
+        //     console.log('overriding markAsTouched for', this.formControlName);
+        //     control._markAsTouched = control.markAsTouched;
+        //     control.markAsTouched = ({onlySelf}: { onlySelf?: boolean } = {}): void => {
+        //       console.log('marking as touched', this.componentFormControl.value, control.value, this.xxx.value, control._componentFormControl.value);
+        //       control._markAsTouched({onlySelf});
+        //       setTimeout(() => control._componentFormControl.markAsTouched(), 1000);
+        //     }
+        //   }
+        // }
+    }
+    clearValue() {
+        this.componentFormControl?.setValue('');
+        this.input?.nativeElement.focus();
+    }
+    focus() {
+        this.input?.nativeElement.focus();
+    }
+    onFocus(focus) {
+        setTimeout(() => {
+            this.hasFocus = focus;
+            this.focusChanged.emit(focus);
+        });
+    }
+    onKeypressed($event) {
+        this.keyPressed.emit($event);
+    }
+    // registerOnChange(onChange: any): void {
+    //   this.onChange = onChange;
+    // }
+    //
+    // registerOnTouched(onTouched: any): void {
+    //   this.onTouched = onTouched;
+    // }
+    // registerOnValidatorChange(fn: () => void): void {
+    // }
+    // setDisabledState(isDisabled: boolean): void {
+    //   // isDisabled ? this.control.disable() : this.control.enable();
+    // }
+    // validate(control: AbstractControl): ValidationErrors | null {
+    //   // this.control = control;
+    //   // console.log(control, control.value, control.errors);
+    //   if (this.value === 'error') {
+    //     return { customError: 'muj error'}
+    //   } else {
+    //     return null;
+    //   }
+    //   // console.log('custom validate');
+    //   // return null;
+    // }
+    //
+    // writeValue(obj: any): void {
+    //   console.log('writevalue: ', obj);
+    //   this.componentFormControl.setValue(obj);
+    //   // this.value = obj;
+    //   // this.control.setValue(obj);
+    // }
+    //
+    // registerOnChange(fn: any): void {
+    // }
+    //
+    // registerOnTouched(fn: any): void {
+    // }
+    //
+    // setDisabledState(isDisabled: boolean): void {
+    // }
+    // modelChange($event: any) {
+    //   console.log($event);
+    //   this.onTouched();
+    //   this.onChange($event)
+    // }
+    // validate(control: AbstractControl): ValidationErrors | null {
+    //   console.log(this.label, 'validate');
+    //   return this.componentFormControl.errors;
+    //   // return undefined;
+    // }
+    validate(control) {
+        if (this.parentFormControl) {
+            return this.parentFormControl._componentFormControl.errors;
+        }
+        // console.log('validate', this.componentFormControl.errors);
+        // // this.componentFormControl.setErrors( { custom: 'xxx' });
+        // this.componentFormControl.setErrors( this.componentFormControl.errors);
+        // console.log('validate 2', this.componentFormControl.errors);
+        // return this.componentFormControl.errors;
+        // console.log(this.componentFormControl.errors, control.errors, this.parentFormControl.errors, this);
+        // return this.componentFormControl.errors;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: InputAutocompleteComponent, deps: [{ token: i1.ControlContainer, host: true, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.11", type: InputAutocompleteComponent, selector: "ui-input-autocomplete", inputs: { prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", type: "type", clearButton: "clearButton", activeIcons: "activeIcons", forceHasPrefix: "forceHasPrefix", forceHasSuffix: "forceHasSuffix", options: "options", textAlign: "textAlign" }, outputs: { focusChanged: "focusChanged", keyPressed: "keyPressed" }, host: { properties: { "class": "this.textAlignClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: InputAutocompleteComponent
+            },
+            {
+                provide: NG_VALIDATORS,
+                multi: true,
+                useExisting: InputAutocompleteComponent
+            }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "prefix", first: true, predicate: ["prefix"], descendants: true, static: true }, { propertyName: "suffix", first: true, predicate: ["suffix"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n  <input #input matInput [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" [matAutocomplete]=\"auto\"/>\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">{{option}}</mat-option>\r\n    </mat-autocomplete>\r\n  <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n  <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n  <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n  <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n  <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\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", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\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: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "directive", type: i3$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple", "hideSingleSelectionIndicator"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }, { kind: "component", type: ActionIconComponent, selector: "ui-action-icon", inputs: ["size", "color", "disabled", "busy", "matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: InputAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-input-autocomplete', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: InputAutocompleteComponent
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            multi: true,
+                            useExisting: InputAutocompleteComponent
+                        }
+                    ], template: "<ui-simple-layout [ctx]=\"this\">\r\n\r\n<div class=\"control-container\" [ngClass]=\"{'has-suffix': hasSuffix, 'has-prefix': hasPrefix, 'has-clear-icon': showClearButton, 'active-icons': activeIcons, 'has-focus': hasFocus}\">\r\n  <input #input matInput [type]=\"type\" [formControl]=\"componentFormControl\" [placeholder]=\"placeholder\" (keydown)=\"onKeypressed($event)\" (focus)=\"onFocus(true)\" (blur)=\"onFocus(false)\" [matAutocomplete]=\"auto\"/>\r\n\r\n    <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\">\r\n        <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">{{option}}</mat-option>\r\n    </mat-autocomplete>\r\n  <div #prefix><ng-content select=\"[slot=prefix]\"></ng-content></div>\r\n  <div #suffix><ng-content select=\"[slot=suffix]\"></ng-content></div>\r\n  <mat-icon *ngIf=\"prefixIcon\" class=\"prefix-icon\" [matTooltip]=\"prefixIcon.tooltip\">{{ prefixIcon.icon }}</mat-icon>\r\n  <mat-icon *ngIf=\"suffixIcon\" class=\"suffix-icon\" [matTooltip]=\"suffixIcon.tooltip\">{{ suffixIcon.icon }}</mat-icon>\r\n  <ui-action-icon [size]=\"'small'\" [color]=\"'warn'\" *ngIf=\"showClearButton\" (click)=\"clearValue()\" [matIcon]=\"'clear'\" class=\"clear-icon\"></ui-action-icon>\r\n</div>\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", ":host.text-align-left ::ng-deep input{text-align:left}:host.text-align-right ::ng-deep input{text-align:right}:host.text-align-center ::ng-deep input{text-align:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }]; }, propDecorators: { prefixIcon: [{
+                type: Input
+            }], suffixIcon: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], clearButton: [{
+                type: Input
+            }], activeIcons: [{
+                type: Input
+            }], forceHasPrefix: [{
+                type: Input
+            }], forceHasSuffix: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], textAlignClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], textAlign: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], prefix: [{
+                type: ViewChild,
+                args: ['prefix', { static: true }]
+            }], suffix: [{
+                type: ViewChild,
+                args: ['suffix', { static: true }]
+            }], focusChanged: [{
+                type: Output
+            }], keyPressed: [{
+                type: Output
+            }] } });
+
+class UiModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.11", ngImport: i0, type: UiModule, declarations: [ButtonComponent,
+            InputComponent,
+            InputAutocompleteComponent,
+            SelectComponent,
+            FileComponent,
+            UiFileUploaderComponent,
+            ExpanderComponent,
+            ForceVisibilityDirective,
+            MessageBoxModalComponent,
+            DialogComponent,
+            CurrencyComponent,
+            CheckboxComponent,
+            AvatarComponent,
+            SubmitButtonComponent,
+            TextAreaComponent,
+            DateComponent,
+            TableComponent,
+            BurgerComponent,
+            AutocompleteComponent,
+            ActionButtonComponent,
+            UiBaseLayoutComponent,
+            UiSimpleLayoutComponent,
+            ValidationMessageComponent,
+            RadioComponent,
+            CheckboxGroupComponent,
+            RadioGroupComponent,
+            ActionIconComponent,
+            EditorComponent], imports: [CommonModule,
+            MatButtonModule,
+            MatIconModule,
+            MatDialogModule,
+            MatCheckboxModule,
+            MatDatepickerModule,
+            MatMomentDateModule,
+            DragDropModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatTooltipModule,
+            MatProgressBarModule,
+            MatTableModule,
+            MatSortModule,
+            MatSelectModule,
+            NgxUploaderModule,
+            MatProgressSpinnerModule,
+            MatMenuModule,
+            ImageCropperModule,
+            RouterModule,
+            OverlayModule,
+            MatRippleModule,
+            MatInputModule,
+            MatRadioModule,
+            MatSnackBarModule,
+            MatAutocompleteModule], exports: [ActionButtonComponent,
+            ActionIconComponent,
+            AutocompleteComponent,
+            AvatarComponent,
+            BurgerComponent,
+            ButtonComponent,
+            CheckboxComponent,
+            CheckboxGroupComponent,
+            CurrencyComponent,
+            DateComponent,
+            DialogComponent,
+            ExpanderComponent,
+            FileComponent,
+            ForceVisibilityDirective,
+            InputComponent,
+            InputAutocompleteComponent,
+            MessageBoxModalComponent,
+            RadioComponent,
+            RadioGroupComponent,
+            SelectComponent,
+            SubmitButtonComponent,
+            TableComponent,
+            TextAreaComponent,
+            UiFileUploaderComponent,
+            EditorComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiModule, providers: [
+            UiFileService,
+            { provide: UI_TRANSLATESERVICE, useClass: UiTranslateService },
+            { provide: MAT_DATE_LOCALE, useValue: 'cs-CZ' },
+            { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } },
+            { provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'primary' } },
+            { provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { color: 'primary' } }
+        ], imports: [CommonModule,
+            MatButtonModule,
+            MatIconModule,
+            MatDialogModule,
+            MatCheckboxModule,
+            MatDatepickerModule,
+            MatMomentDateModule,
+            DragDropModule,
+            ReactiveFormsModule,
+            FormsModule,
+            MatTooltipModule,
+            MatProgressBarModule,
+            MatTableModule,
+            MatSortModule,
+            MatSelectModule,
+            NgxUploaderModule,
+            MatProgressSpinnerModule,
+            MatMenuModule,
+            ImageCropperModule,
+            RouterModule,
+            OverlayModule,
+            MatRippleModule,
+            MatInputModule,
+            MatRadioModule,
+            MatSnackBarModule,
+            MatAutocompleteModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: UiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ButtonComponent,
+                        InputComponent,
+                        InputAutocompleteComponent,
+                        SelectComponent,
+                        FileComponent,
+                        UiFileUploaderComponent,
+                        ExpanderComponent,
+                        ForceVisibilityDirective,
+                        MessageBoxModalComponent,
+                        DialogComponent,
+                        CurrencyComponent,
+                        CheckboxComponent,
+                        AvatarComponent,
+                        SubmitButtonComponent,
+                        TextAreaComponent,
+                        DateComponent,
+                        TableComponent,
+                        BurgerComponent,
+                        AutocompleteComponent,
+                        ActionButtonComponent,
+                        UiBaseLayoutComponent,
+                        UiSimpleLayoutComponent,
+                        ValidationMessageComponent,
+                        RadioComponent,
+                        CheckboxGroupComponent,
+                        RadioGroupComponent,
+                        ActionIconComponent,
+                        EditorComponent
+                    ],
+                    exports: [
+                        ActionButtonComponent,
+                        ActionIconComponent,
+                        AutocompleteComponent,
+                        AvatarComponent,
+                        BurgerComponent,
+                        ButtonComponent,
+                        CheckboxComponent,
+                        CheckboxGroupComponent,
+                        CurrencyComponent,
+                        DateComponent,
+                        DialogComponent,
+                        ExpanderComponent,
+                        FileComponent,
+                        ForceVisibilityDirective,
+                        InputComponent,
+                        InputAutocompleteComponent,
+                        MessageBoxModalComponent,
+                        RadioComponent,
+                        RadioGroupComponent,
+                        SelectComponent,
+                        SubmitButtonComponent,
+                        TableComponent,
+                        TextAreaComponent,
+                        UiFileUploaderComponent,
+                        EditorComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatDialogModule,
+                        MatCheckboxModule,
+                        MatDatepickerModule,
+                        MatMomentDateModule,
+                        DragDropModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        MatTooltipModule,
+                        MatProgressBarModule,
+                        MatTableModule,
+                        MatSortModule,
+                        MatSelectModule,
+                        NgxUploaderModule,
+                        MatProgressSpinnerModule,
+                        MatMenuModule,
+                        ImageCropperModule,
+                        RouterModule,
+                        OverlayModule,
+                        MatRippleModule,
+                        MatInputModule,
+                        MatRadioModule,
+                        MatSnackBarModule,
+                        MatAutocompleteModule
+                    ],
+                    providers: [
+                        UiFileService,
+                        { provide: UI_TRANSLATESERVICE, useClass: UiTranslateService },
+                        { provide: MAT_DATE_LOCALE, useValue: 'cs-CZ' },
+                        { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: false } },
+                        { provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'primary' } },
+                        { provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: { color: 'primary' } }
+                    ]
+                }]
+        }] });
+
+class ToastService {
+    constructor(snackService) {
+        this.snackService = snackService;
+    }
+    open(message, options = { duration: 2500, type: 'info' }) {
+        this.snackService.open(message, null, {
+            duration: options.duration || 2500,
+            panelClass: [options.type || 'message']
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ToastService, deps: [{ token: i1$3.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ToastService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.11", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatSnackBar }]; } });
+
+/*
+ * Public API Surface of ui
+ */
+// export * from './lib/ui.service';
+// export * from './lib/ui.component';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ActionButtonComponent, ActionIconComponent, AutocompleteComponent, AvatarComponent, BurgerComponent, ButtonComponent, CheckboxComponent, CheckboxGroupComponent, CurrencyComponent, DateComponent, DialogComponent, EditorComponent, ExpanderComponent, FileComponent, ForceVisibilityDirective, InputAutocompleteComponent, InputComponent, MessageBoxModalComponent, MessageBoxService, RadioComponent, RadioGroupComponent, SelectComponent, SubmitButtonComponent, TableComponent, TextAreaComponent, ToastService, UI_FILESERVICE, UI_TRANSLATESERVICE, UiFileService, UiFileUploaderComponent, UiModule, UiTranslateService };
+//# sourceMappingURL=rlucan-ui.mjs.map