@rlucan/ui 17.1.3 → 17.1.5

package/fesm2022/rlucan-ui.mjs

@@ -11,9 +11,9 @@ 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 * as i4$4 from '@angular/material/checkbox';
 import { MatCheckboxModule, MAT_CHECKBOX_DEFAULT_OPTIONS } from '@angular/material/checkbox';
-import * as i4$5 from '@angular/material/datepicker';
+import * as i4$6 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';
@@ -21,9 +21,9 @@ 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 * as i3$4 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
-import * as i4$6 from '@angular/material/sort';
+import * as i4$7 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';
@@ -40,11 +40,11 @@ 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 * as i3$3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i4$4 from '@angular/cdk/text-field';
+import * as i4$5 from '@angular/cdk/text-field';
 import { debounceTime } from 'rxjs/operators';
-import * as i3$6 from '@angular/material/radio';
+import * as i3$5 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';
@@ -1013,10 +1013,10 @@ class FileComponent {
         this.nativeFileSizeRatio = -1;
     }
     ngOnChanges(changes) {
-        if (changes.srcData) {
+        if (changes['srcData']) {
             this.nativeFileSizeRatio = -1;
-            if (changes.srcData.currentValue.nativeFile) {
-                this.src = this.domSanitizer.bypassSecurityTrustUrl(URL.createObjectURL(changes.srcData.currentValue.nativeFile));
+            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) {
@@ -1029,16 +1029,16 @@ class FileComponent {
                     this.nativeFileHeight = img.height / this.nativeFileSizeRatio;
                     URL.revokeObjectURL(img.src);
                 };
-                img.src = URL.createObjectURL(changes.srcData.currentValue.nativeFile);
+                img.src = URL.createObjectURL(changes['srcData'].currentValue.nativeFile);
             }
             else {
-                this.src = this.fileServiceConfig.getMediaSrc(this.uiFileSize, changes.srcData.currentValue, this.srcOptions);
+                this.src = this.fileServiceConfig.getMediaSrc(this.uiFileSize, changes['srcData'].currentValue, this.srcOptions);
             }
         }
-        if (changes.srcUrl) {
-            this.src = changes.srcUrl.currentValue?.src;
+        if (changes['srcUrl']) {
+            this.src = changes['srcUrl'].currentValue?.src;
             if (this.src) {
-                this.srcUrlMimeType = changes.srcUrl.currentValue?.mimeType || 'image/png';
+                this.srcUrlMimeType = changes['srcUrl'].currentValue?.mimeType || 'image/png';
             }
             else {
                 this.srcUrlMimeType = undefined;
@@ -1046,11 +1046,11 @@ class FileComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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: "17.1.2", 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\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls playsinline [ngStyle]=\"imgStyle\">\r\n    <source [src]=\"src\" [type]=\"mime\" />\r\n</video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i4$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: FileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-file', template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls [src]=\"src\"></video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"] }]
+            args: [{ selector: 'ui-file', template: "<mat-spinner *ngIf=\"visible\"></mat-spinner>\r\n<img *ngIf=\"!isVideo && useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\" [srcset]=\"src + ' 2x'\"/>\r\n<img *ngIf=\"!isVideo && !useRetinaSrc\" [ngStyle]=\"imgStyle\" [src]=\"src\"/>\r\n<video *ngIf=\"isVideo\" muted controls playsinline [ngStyle]=\"imgStyle\">\r\n    <source [src]=\"src\" [type]=\"mime\" />\r\n</video>\r\n\r\n", styles: [":host{display:flex;align-items:center;justify-content:center;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1461,8 +1461,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 }, {
                     type: SkipSelf
                 }] }, { type: UiFileService }], propDecorators: { fileSize: [{
-                type: Input,
-                args: [{ required: true }]
+                type: Input
             }], maxFiles: [{
                 type: Input
             }], multiple: [{
@@ -1946,7 +1945,7 @@ class CheckboxComponent extends UiSimpleComponent {
     setDisabledState(isDisabled) {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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: "17.1.2", 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: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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: i4$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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: "17.1.2", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
@@ -2074,7 +2073,7 @@ class TextAreaComponent extends UiSimpleComponent {
         this.focusChanged.emit(focus);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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: "17.1.2", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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$3.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$5.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: "17.1.2", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
@@ -2135,7 +2134,7 @@ class DateComponent extends UiSimpleComponent {
     registerOnTouched(fn) { }
     setDisabledState(isDisabled) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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: "17.1.2", 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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$6.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4$6.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: "17.1.2", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
@@ -2216,7 +2215,7 @@ class TableComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$6.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i3$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4$7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4$7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2604,7 +2603,7 @@ class AutocompleteComponent extends UiBaseComponent {
                 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: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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", "cdkConnectedOverlayDisposeOnNavigation"], 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"] }] }); }
+            }], 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: i4$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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", "cdkConnectedOverlayDisposeOnNavigation"], 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: "17.1.2", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -2738,7 +2737,7 @@ class RadioComponent {
         this.color = 'primary';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", 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$5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
@@ -2839,7 +2838,9 @@ class RadioGroupComponent extends UiSimpleComponent {
         super(control);
         this.control = control;
         this.id = Math.round(Math.random() * 999999);
+        this.options = [];
         this.displayAttribute = 'name';
+        this.hintAttribute = 'hint';
         this.groupName = 'radio-' + this.id;
         this.optionEnabled = (option) => true;
     }
@@ -2848,22 +2849,23 @@ class RadioGroupComponent extends UiSimpleComponent {
     // }
     ngOnChanges(changes) {
         super.ngOnChanges(changes);
-        if (changes.options) {
+        if (changes['options']) {
             this.cbxs = [];
-            changes.options.currentValue.forEach(cv => {
+            changes['options'].currentValue.forEach((cv) => {
                 this.cbxs.push({
                     value: this.valueAttribute ? cv[this.valueAttribute] : cv,
-                    label: cv[this.displayAttribute]
+                    label: cv[this.displayAttribute],
+                    hint: cv[this.hintAttribute]
                 });
             });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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: "17.1.2", 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", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$6.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.2", type: RadioGroupComponent, selector: "ui-radio-group", inputs: { options: "options", displayAttribute: "displayAttribute", hintAttribute: "hintAttribute", 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        <ng-container *ngFor=\"let cbx of cbxs\">\r\n            <mat-radio-button  [value]=\"cbx.value\">{{ cbx.label }}</mat-radio-button>\r\n            <div *ngIf=\"cbx.hint\" class=\"hint\">{{ cbx.hint }}</div>\r\n        </ng-container>\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-group .hint{font-size:.8em;margin-left:2.5em;margin-top:-2px;margin-bottom:4px}: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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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$5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i3$5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: UiSimpleLayoutComponent, selector: "ui-simple-layout", inputs: ["ctx"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", 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"] }]
+            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        <ng-container *ngFor=\"let cbx of cbxs\">\r\n            <mat-radio-button  [value]=\"cbx.value\">{{ cbx.label }}</mat-radio-button>\r\n            <div *ngIf=\"cbx.hint\" class=\"hint\">{{ cbx.hint }}</div>\r\n        </ng-container>\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-group .hint{font-size:.8em;margin-left:2.5em;margin-top:-2px;margin-bottom:4px}:host mat-radio-button{margin-top:.2em;margin-bottom:.2em}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
                     type: Optional
                 }, {
@@ -2872,6 +2874,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Input
             }], displayAttribute: [{
                 type: Input
+            }], hintAttribute: [{
+                type: Input
             }], valueAttribute: [{
                 type: Input
             }], groupName: [{
@@ -3196,7 +3200,7 @@ class InputAutocompleteComponent extends UiSimpleComponent {
                 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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], 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: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], 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"] }] }); }
+        ], 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]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i3$3.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: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i7.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], 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: "17.1.2", ngImport: i0, type: InputAutocompleteComponent, decorators: [{
             type: Component,
@@ -3254,6 +3258,393 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                 type: Output
             }] } });
 
+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.templates = {};
+        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));
+    }
+    ngOnChanges(changes) {
+        if (changes['options']) {
+            this.searchableOptions = this.buildSearchableOptions();
+            this.inputControl.setValue('');
+        }
+    }
+    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: "17.1.2", 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: "17.0.0", version: "17.1.2", type: AutoCompleteComponent, selector: "ui-auto-complete", inputs: { templates: "templates", 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, usesOnChanges: 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\r\n              (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\"\r\n              [useInputMessages]=\"'never'\" [label]=\"label\">\r\n        <div slot=\"prefix\">\r\n            <ng-content select=\"[slot=acprefix]\"></ng-content>\r\n        </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\"\r\n             [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\"\r\n                         [ngClass]=\"{selected: focusedOption === option}\">\r\n                        @if (multiple) {\r\n                            <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\"\r\n                                          [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\"\r\n                                         [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\"\r\n                                         [ngClass]=\"{unselectable: option.unselectable}\">\r\n                                        {{ optionFormatter(option) }}\r\n                                    </div>\r\n                                    <div class=\"option-option\" *ngIf=\"focusedOption !== option\"\r\n                                         [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                        } @else {\r\n                            <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n                                <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\"\r\n                                     [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\"\r\n                                     [ngClass]=\"{unselectable: option.unselectable}\">\r\n                                    @if (templates?.optionTemplate) {\r\n                                        <ng-template [ngTemplateOutlet]=\"templates?.optionTemplate\"\r\n                                                     [ngTemplateOutletContext]=\"{option: option}\"></ng-template>\r\n                                    } @else {\r\n                                        {{ optionFormatter(option) }}\r\n                                    }\r\n                                </div>\r\n                                <div class=\"option-option\" *ngIf=\"focusedOption !== option\"\r\n                                     [ngClass]=\"{unselectable: option.unselectable}\">\r\n                                    @if (templates?.optionTemplate) {\r\n                                        <ng-template [ngTemplateOutlet]=\"templates?.optionTemplate\"\r\n                                                     [ngTemplateOutletContext]=\"{option: option}\"></ng-template>\r\n                                    } @else {\r\n                                        {{ optionFormatter(option) }}\r\n                                    }\r\n                                </div>\r\n                                <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility\r\n                     [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                    @if (templates?.notFound) {\r\n                        <ng-template [ngTemplateOutlet]=\"templates?.notFound\"\r\n                                     [ngTemplateOutletContext]=\"{searchText: inputControl.value}\"></ng-template>\r\n                    } @else {\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\r\n                                <strong>{{ inputControl.value }}</strong> nezn\u00E1me\r\n                            </div>\r\n                            <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\"\r\n                                       (click)=\"newOption()\"></ui-button>\r\n                        </ng-container>\r\n                    }\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'\"\r\n                           (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n                <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\"\r\n                           (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.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: "component", type: i4$4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], 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", "cdkConnectedOverlayDisposeOnNavigation"], 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: "17.1.2", ngImport: i0, type: AutoCompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-auto-complete', 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\r\n              (focusChanged)=\"inputFocusChanged($event)\" (keyPressed)=\"keyPressed($event)\" [placeholder]=\"placeholder\"\r\n              [useInputMessages]=\"'never'\" [label]=\"label\">\r\n        <div slot=\"prefix\">\r\n            <ng-content select=\"[slot=acprefix]\"></ng-content>\r\n        </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\"\r\n             [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\"\r\n                         [ngClass]=\"{selected: focusedOption === option}\">\r\n                        @if (multiple) {\r\n                            <mat-checkbox [checked]=\"optionChecked(option) || option.unselectable\"\r\n                                          [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\"\r\n                                         [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\"\r\n                                         [ngClass]=\"{unselectable: option.unselectable}\">\r\n                                        {{ optionFormatter(option) }}\r\n                                    </div>\r\n                                    <div class=\"option-option\" *ngIf=\"focusedOption !== option\"\r\n                                         [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                        } @else {\r\n                            <div class=\"option-container-inner\" (click)=\"select(option)\">\r\n                                <div class=\"option-option\" uiForceVisibility [visibilityWithin]=\"options\"\r\n                                     [visibilityPadding]=\"4\" *ngIf=\"focusedOption === option\"\r\n                                     [ngClass]=\"{unselectable: option.unselectable}\">\r\n                                    @if (templates?.optionTemplate) {\r\n                                        <ng-template [ngTemplateOutlet]=\"templates?.optionTemplate\"\r\n                                                     [ngTemplateOutletContext]=\"{option: option}\"></ng-template>\r\n                                    } @else {\r\n                                        {{ optionFormatter(option) }}\r\n                                    }\r\n                                </div>\r\n                                <div class=\"option-option\" *ngIf=\"focusedOption !== option\"\r\n                                     [ngClass]=\"{unselectable: option.unselectable}\">\r\n                                    @if (templates?.optionTemplate) {\r\n                                        <ng-template [ngTemplateOutlet]=\"templates?.optionTemplate\"\r\n                                                     [ngTemplateOutletContext]=\"{option: option}\"></ng-template>\r\n                                    } @else {\r\n                                        {{ optionFormatter(option) }}\r\n                                    }\r\n                                </div>\r\n                                <mat-icon *ngIf=\"!hasCheckboxSelected && !option.unselectable\">north_west</mat-icon>\r\n                            </div>\r\n                        }\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <div *ngIf=\"filteredOptions.length >= filteredMaxItemsShown\" class=\"option-container\" uiForceVisibility\r\n                     [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                    @if (templates?.notFound) {\r\n                        <ng-template [ngTemplateOutlet]=\"templates?.notFound\"\r\n                                     [ngTemplateOutletContext]=\"{searchText: inputControl.value}\"></ng-template>\r\n                    } @else {\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\r\n                                <strong>{{ inputControl.value }}</strong> nezn\u00E1me\r\n                            </div>\r\n                            <ui-button *ngIf=\"allowNew\" style=\"margin-top: 6px;\" [size]=\"'small'\" [label]=\"'P\u0159idat jej?'\"\r\n                                       (click)=\"newOption()\"></ui-button>\r\n                        </ng-container>\r\n                    }\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'\"\r\n                           (click)=\"cancelCheckboxSelection()\"></ui-button>\r\n                <ui-button [size]=\"'small'\" [label]=\"'Pou\u017E\u00EDt v\u00FDb\u011Br (' + checkboxSelection.size + ')'\"\r\n                           (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: () => [{ type: i1.ControlContainer, decorators: [{
+                    type: Optional
+                }, {
+                    type: Host
+                }, {
+                    type: SkipSelf
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { templates: [{
+                type: Input
+            }], 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 UiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: UiModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", ngImport: i0, type: UiModule, declarations: [ButtonComponent,
@@ -3275,6 +3666,7 @@ class UiModule {
             TableComponent,
             BurgerComponent,
             AutocompleteComponent,
+            AutoCompleteComponent,
             ActionButtonComponent,
             UiBaseLayoutComponent,
             UiSimpleLayoutComponent,
@@ -3311,6 +3703,7 @@ class UiModule {
             MatAutocompleteModule], exports: [ActionButtonComponent,
             ActionIconComponent,
             AutocompleteComponent,
+            AutoCompleteComponent,
             AvatarComponent,
             BurgerComponent,
             ButtonComponent,
@@ -3390,6 +3783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         TableComponent,
                         BurgerComponent,
                         AutocompleteComponent,
+                        AutoCompleteComponent,
                         ActionButtonComponent,
                         UiBaseLayoutComponent,
                         UiSimpleLayoutComponent,
@@ -3404,6 +3798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
                         ActionButtonComponent,
                         ActionIconComponent,
                         AutocompleteComponent,
+                        AutoCompleteComponent,
                         AvatarComponent,
                         BurgerComponent,
                         ButtonComponent,
@@ -3496,5 +3891,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.2", ngImpor
  * 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 };
+export { ActionButtonComponent, ActionIconComponent, AutoCompleteComponent, 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