@bizdoc/core 2.3.14 → 2.3.16

package/fesm2022/bizdoc-core.mjs

@@ -7094,8 +7094,7 @@ class BrowseFilterComponent {
         this.valuesChange.emit(value);
     }
     toggleTag(evt) {
-        const control = this.form.controls['tag'];
-        control.setValue(control.value !== evt.value ? evt.value : null);
+        this.form.controls.tag.setValue(this.form.controls.tag.value !== evt.value ? evt.value : null);
     }
     displayFn(item) {
         return item ? item.name : undefined;
@@ -7119,11 +7118,11 @@ class BrowseFilterComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: BrowseFilterComponent, deps: [{ token: i1.FormBuilder }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: MailboxService }, { token: AccountService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: BrowseFilterComponent, selector: "bizdoc-browse-filter", inputs: { values: "values", folderId: "folderId", exclude: "exclude" }, outputs: { valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "chips", first: true, predicate: MatChipListbox, descendants: true, static: true }, { propertyName: "contains", first: true, predicate: ["contains"], descendants: true, read: ElementRef, static: true }, { propertyName: "sender", first: true, predicate: ["sender"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"!exclude || exclude.indexOf('contains') < 0\">\r\n    <input matInput formControlName=\"contains\" autocomplete=\"off\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    <button *ngIf=\"form.value.contains\" matSuffix mat-icon-button aria-label=\"\" (click)=\"form.get('contains').setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"senderId\" #sender/>\r\n    <mat-autocomplete #senders [displayWith]=\"displayFn\" (optionSelected)=\"senderSelected($event)\">\r\n      <!--<mat-option [value]=\"null\">\r\n        {{ 'All' | translate }}\r\n      </mat-option>-->\r\n      <mat-option *ngFor=\"let u of senders$ | async\" [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button matSuffix mat-icon-button *ngIf=\"senderId.value\" (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      <mat-option *ngFor=\"let s of states\" [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      <mat-option *ngFor=\"let f of forms\" [value]=\"f.name\">{{f.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-chip-set id=\"tags\" (change)=\"toggleTag($event)\">\r\n      <mat-chip color=\"accent\" *ngFor=\"let tag of tags\">\r\n        {{tag}}\r\n      </mat-chip>\r\n    </mat-chip-set>\r\n  </div>\r\n  <bizdoc-cube-filter *ngIf=\"filters\" class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n</form>\r\n", styles: ["form{padding:8px}.cube-filter ::ng-deep form{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: BrowseFilterComponent, selector: "bizdoc-browse-filter", inputs: { values: "values", folderId: "folderId", exclude: "exclude" }, outputs: { valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "chips", first: true, predicate: MatChipListbox, descendants: true, static: true }, { propertyName: "contains", first: true, predicate: ["contains"], descendants: true, read: ElementRef, static: true }, { propertyName: "sender", first: true, predicate: ["sender"], descendants: true, read: ElementRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"!exclude || exclude.indexOf('contains') < 0\">\r\n    <input matInput formControlName=\"contains\" autocomplete=\"off\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    <button *ngIf=\"form.value.contains\" matSuffix mat-icon-button aria-label=\"\" (click)=\"form.get('contains').setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"senderId\" #sender/>\r\n    <mat-autocomplete #senders [displayWith]=\"displayFn\" (optionSelected)=\"senderSelected($event)\">\r\n      <!--<mat-option [value]=\"null\">\r\n        {{ 'All' | translate }}\r\n      </mat-option>-->\r\n      <mat-option *ngFor=\"let u of senders$ | async\" [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button matSuffix mat-icon-button *ngIf=\"senderId.value\" (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      <mat-option *ngFor=\"let s of states\" [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      <mat-option *ngFor=\"let f of forms\" [value]=\"f.name\">{{f.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-chip-set id=\"tags\" (change)=\"toggleTag($event)\">\r\n      <mat-chip color=\"accent\" *ngFor=\"let tag of tags\">\r\n        {{tag}}\r\n      </mat-chip>\r\n    </mat-chip-set>\r\n  </div>\r\n  <bizdoc-cube-filter *ngIf=\"filters\" class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled", "tabIndex"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i5$2.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes"], outputs: ["axesChange"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: BrowseFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-browse-filter', template: "<form [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"!exclude || exclude.indexOf('contains') < 0\">\r\n    <input matInput formControlName=\"contains\" autocomplete=\"off\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    <button *ngIf=\"form.value.contains\" matSuffix mat-icon-button aria-label=\"\" (click)=\"form.get('contains').setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"senderId\" #sender/>\r\n    <mat-autocomplete #senders [displayWith]=\"displayFn\" (optionSelected)=\"senderSelected($event)\">\r\n      <!--<mat-option [value]=\"null\">\r\n        {{ 'All' | translate }}\r\n      </mat-option>-->\r\n      <mat-option *ngFor=\"let u of senders$ | async\" [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button matSuffix mat-icon-button *ngIf=\"senderId.value\" (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      <mat-option *ngFor=\"let s of states\" [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      <mat-option *ngFor=\"let f of forms\" [value]=\"f.name\">{{f.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-chip-set id=\"tags\" (change)=\"toggleTag($event)\">\r\n      <mat-chip color=\"accent\" *ngFor=\"let tag of tags\">\r\n        {{tag}}\r\n      </mat-chip>\r\n    </mat-chip-set>\r\n  </div>\r\n  <bizdoc-cube-filter *ngIf=\"filters\" class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n</form>\r\n", styles: ["form{padding:8px}.cube-filter ::ng-deep form{padding:0}\n"] }]
+            args: [{ selector: 'bizdoc-browse-filter', template: "<form [formGroup]=\"form\" class=\"column\">\r\n  <mat-form-field *ngIf=\"!exclude || exclude.indexOf('contains') < 0\">\r\n    <input matInput formControlName=\"contains\" autocomplete=\"off\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    <button *ngIf=\"form.value.contains\" matSuffix mat-icon-button aria-label=\"\" (click)=\"form.get('contains').setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"senderId\" #sender/>\r\n    <mat-autocomplete #senders [displayWith]=\"displayFn\" (optionSelected)=\"senderSelected($event)\">\r\n      <!--<mat-option [value]=\"null\">\r\n        {{ 'All' | translate }}\r\n      </mat-option>-->\r\n      <mat-option *ngFor=\"let u of senders$ | async\" [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <button matSuffix mat-icon-button *ngIf=\"senderId.value\" (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      <mat-option *ngFor=\"let s of states\" [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      <mat-option *ngFor=\"let f of forms\" [value]=\"f.name\">{{f.title}}</mat-option>\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-chip-set id=\"tags\" (change)=\"toggleTag($event)\">\r\n      <mat-chip color=\"accent\" *ngFor=\"let tag of tags\">\r\n        {{tag}}\r\n      </mat-chip>\r\n    </mat-chip-set>\r\n  </div>\r\n  <bizdoc-cube-filter *ngIf=\"filters\" class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: SessionService }, { type: i0.ChangeDetectorRef }, { type: MailboxService }, { type: AccountService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -9582,13 +9581,13 @@ class BrowsePaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: BrowsePaneComponent, deps: [{ token: PaneRef }, { token: SessionService }, { token: Popup }, { token: PanesRouter }, { token: i3.Directionality }, { token: TranslateService }, { token: i2$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: BrowsePaneComponent, selector: "bizdoc-browse.pane", host: { listeners: { "document:keydown": "handleKeydown($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "search", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\" >\r\n  <ng-container *ngIf=\"!items.selection.isEmpty(); else search\">\r\n    <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n    <button mat-icon-button *ngIf=\"items.isAllDraft()\" (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n    <button mat-button color=\"primary\" class=\"hide-xs\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n    <button mat-icon-button color=\"primary\" class=\"show-xs\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\" [bizdocTooltip]=\"'Submit' | translate\" [attr.aria-label]=\"'Submit' | translate\"><mat-icon>send</mat-icon></button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length === 1\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\"><mat-icon *ngIf=\"items.sharedActions[0].icon\">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length > 1\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n      {{'SendSelected'| translate : items.selection.selected.length }}\r\n    </button>\r\n    <mat-menu #action>\r\n      <ng-container *ngFor=\"let a of items.sharedActions | sort : 'group'; let i = index\">\r\n        <mat-divider *ngIf=\"i>0 && items.sharedActions[i-1].group !== a.group\">\r\n        </mat-divider>\r\n        <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n          {{ a.title }}\r\n        </button>\r\n      </ng-container>\r\n    </mat-menu>\r\n    <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  </ng-container>\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\r\n<ng-template #search>\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n          [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'Search' | translate}}\"\r\n         class=\"search-box\"\r\n         #searchInput\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  <mat-icon *ngIf=\"contains.value\" (click)=\"clearSearch()\">close</mat-icon>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\"><mat-icon>filter_list</mat-icon></button>\r\n</ng-template>\r\n", styles: [":host{min-width:540px;display:contents!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.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: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: ["folderId", "filterType", "filters"], outputs: ["open", "view"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [searchAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: BrowsePaneComponent, selector: "bizdoc-browse.pane", host: { listeners: { "document:keydown": "handleKeydown($event)" }, classAttribute: "pane" }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "search", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\" >\r\n  <ng-container *ngIf=\"!items.selection.isEmpty(); else search\">\r\n    <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n    <button mat-icon-button *ngIf=\"items.isAllDraft()\" (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n    <button mat-button color=\"primary\" class=\"hide-xs\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n    <button mat-icon-button color=\"primary\" class=\"show-xs\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\" [bizdocTooltip]=\"'Submit' | translate\" [attr.aria-label]=\"'Submit' | translate\"><mat-icon>send</mat-icon></button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length === 1\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\"><mat-icon *ngIf=\"items.sharedActions[0].icon\">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length > 1\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n      {{'SendSelected'| translate : items.selection.selected.length }}\r\n    </button>\r\n    <mat-menu #action>\r\n      <ng-container *ngFor=\"let a of items.sharedActions | sort : 'group'; let i = index\">\r\n        <mat-divider *ngIf=\"i>0 && items.sharedActions[i-1].group !== a.group\">\r\n        </mat-divider>\r\n        <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n          {{ a.title }}\r\n        </button>\r\n      </ng-container>\r\n    </mat-menu>\r\n    <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  </ng-container>\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\r\n<ng-template #search>\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n          [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'Search' | translate}}\"\r\n         class=\"mat-body search-box\"\r\n         #searchInput\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  <mat-icon *ngIf=\"contains.value\" (click)=\"clearSearch()\">close</mat-icon>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\"><mat-icon>filter_list</mat-icon></button>\r\n</ng-template>\r\n", styles: [":host{min-width:540px;display:contents!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.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: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: ["folderId", "filterType", "filters"], outputs: ["open", "view"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: ArraySortPipe, name: "sort" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [searchAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: BrowsePaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizdoc-browse.pane', animations: [searchAnimation], host: {
                         class: 'pane'
-                    }, template: "<mat-toolbar class=\"nav-toolbar\" >\r\n  <ng-container *ngIf=\"!items.selection.isEmpty(); else search\">\r\n    <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n    <button mat-icon-button *ngIf=\"items.isAllDraft()\" (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n    <button mat-button color=\"primary\" class=\"hide-xs\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n    <button mat-icon-button color=\"primary\" class=\"show-xs\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\" [bizdocTooltip]=\"'Submit' | translate\" [attr.aria-label]=\"'Submit' | translate\"><mat-icon>send</mat-icon></button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length === 1\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\"><mat-icon *ngIf=\"items.sharedActions[0].icon\">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length > 1\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n      {{'SendSelected'| translate : items.selection.selected.length }}\r\n    </button>\r\n    <mat-menu #action>\r\n      <ng-container *ngFor=\"let a of items.sharedActions | sort : 'group'; let i = index\">\r\n        <mat-divider *ngIf=\"i>0 && items.sharedActions[i-1].group !== a.group\">\r\n        </mat-divider>\r\n        <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n          {{ a.title }}\r\n        </button>\r\n      </ng-container>\r\n    </mat-menu>\r\n    <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  </ng-container>\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\r\n<ng-template #search>\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n          [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'Search' | translate}}\"\r\n         class=\"search-box\"\r\n         #searchInput\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  <mat-icon *ngIf=\"contains.value\" (click)=\"clearSearch()\">close</mat-icon>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\"><mat-icon>filter_list</mat-icon></button>\r\n</ng-template>\r\n", styles: [":host{min-width:540px;display:contents!important}\n"] }]
+                    }, template: "<mat-toolbar class=\"nav-toolbar\" >\r\n  <ng-container *ngIf=\"!items.selection.isEmpty(); else search\">\r\n    <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\r\n    <button mat-icon-button *ngIf=\"items.isAllDraft()\" (click)=\"items.discardAll()\" [bizdocTooltip]=\"'DiscardSelected' | translate : items.selection.selected.length\" [attr.aria-label]=\"'DiscardSelected' | translate : items.selection.selected.length\"><mat-icon>delete_sweep</mat-icon></button>\r\n    <button mat-button color=\"primary\" class=\"hide-xs\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\r\n    <button mat-icon-button color=\"primary\" class=\"show-xs\" *ngIf=\"items.isAllDraft()\" (click)=\"items.submitAll()\" [bizdocTooltip]=\"'Submit' | translate\" [attr.aria-label]=\"'Submit' | translate\"><mat-icon>send</mat-icon></button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length === 1\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\"><mat-icon *ngIf=\"items.sharedActions[0].icon\">{{items.sharedActions[0].icon}}</mat-icon>{{'SendSelected' | translate : items.selection.selected.length}}</button>\r\n    <button mat-button color=\"primary\" *ngIf=\"items.sharedActions.length > 1\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\r\n      {{'SendSelected'| translate : items.selection.selected.length }}\r\n    </button>\r\n    <mat-menu #action>\r\n      <ng-container *ngFor=\"let a of items.sharedActions | sort : 'group'; let i = index\">\r\n        <mat-divider *ngIf=\"i>0 && items.sharedActions[i-1].group !== a.group\">\r\n        </mat-divider>\r\n        <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\r\n          {{ a.title }}\r\n        </button>\r\n      </ng-container>\r\n    </mat-menu>\r\n    <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  </ng-container>\r\n</mat-toolbar>\r\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\r\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\r\n<ng-template #search>\r\n  <!--<button mat-icon-button (click)=\"openSearch()\"\r\n          [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\r\n    <mat-icon>search</mat-icon>\r\n  </button>\r\n  [@search]=\"searching\"\r\n  (@search.done)=\"searching && focus()\"-->\r\n  <input matInput\r\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'Search' | translate}}\"\r\n         class=\"mat-body search-box\"\r\n         #searchInput\r\n         (keydown.escape)=\"clearSearch($event)\">\r\n  <mat-icon *ngIf=\"contains.value\" (click)=\"clearSearch()\">close</mat-icon>\r\n  <span class=\"divider\"></span>\r\n  <!--<button mat-icon-button (click)=\"items.paginator.previousPage()\" [bizdocTooltip]=\"'PrevPage' | translate\" [attr.aria-label]=\"'PrevPage' | translate\" [disabled]=\"!items.paginator.hasPreviousPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_left</mat-icon></button>\r\n  <button mat-icon-button (click)=\"items.paginator.nextPage()\" [bizdocTooltip]=\"'NextPage' | translate\" [attr.aria-label]=\"'NextPage' | translate\" [disabled]=\"!items.paginator.hasNextPage()\"><mat-icon class=\"mat-icon-rtl-mirror\">keyboard_arrow_right</mat-icon></button>-->\r\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\"><mat-icon>filter_list</mat-icon></button>\r\n</ng-template>\r\n", styles: [":host{min-width:540px;display:contents!important}\n"] }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: SessionService }, { type: Popup }, { type: PanesRouter }, { type: i3.Directionality }, { type: TranslateService }, { type: i2$4.MatDialog }], propDecorators: { items: [{
                 type: ViewChild,
                 args: [BrowseItemsComponent, { static: true }]
@@ -13528,7 +13527,7 @@ class WorkflowNodeComponent {
         return instance;
     }
     connectorCaseChange(evt) {
-        this.connector.controls['case'].setValue(evt.value);
+        this.connector.controls.case.setValue(evt.value);
         this.change.emit();
     }
     ngOnDestroy() {
@@ -13536,11 +13535,11 @@ class WorkflowNodeComponent {
         this._elementDestroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: WorkflowNodeComponent, deps: [{ token: SessionService }, { token: BizDocComponentFactoryResolver }, { token: i0.Injector }, { token: TranslateService }, { token: i1.FormBuilder }, { token: PaneRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: WorkflowNodeComponent, selector: "ng-component", outputs: { change: "change" }, viewQueries: [{ propertyName: "argumentstemplate", first: true, predicate: ["arguments"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "connectorargs", first: true, predicate: ["connectorargs"], descendants: true, static: true }], ngImport: i0, template: "<ng-container #arguments>\r\n</ng-container>\r\n<ng-template #connectorargs>\r\n  <form [formGroup]=\"connector\" class=\"column\" autocomplete=\"off\">\r\n    <mat-form-field>\r\n      <mat-select [placeholder]=\"'Action' | translate\" formControlName=\"action\">\r\n        <mat-option *ngFor=\"let action of actions\" [value]=\"action.name\">{{action.title}}</mat-option>\r\n        <mat-option>{{'None' | translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-button-toggle-group [value]=\"connector.controls['case'].value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange($event)\">\r\n      <mat-button-toggle value=\"true\">{{'True' | translate}}</mat-button-toggle>\r\n      <mat-button-toggle value=\"false\">{{'False' | translate}}</mat-button-toggle>\r\n      <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n    <mat-form-field [style.display]=\"connector.controls['case'].value==='true'||connector.controls['case'].value==='false'?'none':''\">\r\n      <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", styles: [":host{min-width:280px;padding:4px;display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.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: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: WorkflowNodeComponent, selector: "ng-component", outputs: { change: "change" }, viewQueries: [{ propertyName: "argumentstemplate", first: true, predicate: ["arguments"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "connectorargs", first: true, predicate: ["connectorargs"], descendants: true, static: true }], ngImport: i0, template: "<ng-container #arguments>\r\n</ng-container>\r\n<ng-template #connectorargs>\r\n  <form [formGroup]=\"connector\" class=\"column\" autocomplete=\"off\">\r\n    <mat-form-field>\r\n      <mat-select [placeholder]=\"'Action' | translate\" formControlName=\"action\">\r\n        <mat-option *ngFor=\"let action of actions\" [value]=\"action.name\">{{action.title}}</mat-option>\r\n        <mat-option>{{'None' | translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-button-toggle-group [value]=\"connector.controls.case.value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange($event)\">\r\n      <mat-button-toggle value=\"true\">{{'True' | translate}}</mat-button-toggle>\r\n      <mat-button-toggle value=\"false\">{{'False' | translate}}</mat-button-toggle>\r\n      <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n    <mat-form-field [style.display]=\"connector.controls.case.value==='true'||connector.controls.case.value==='false'?'none':''\">\r\n      <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", styles: [":host{min-width:280px;padding:4px;display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7$2.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i7$2.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.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: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: WorkflowNodeComponent, decorators: [{
             type: Component,
-            args: [{ template: "<ng-container #arguments>\r\n</ng-container>\r\n<ng-template #connectorargs>\r\n  <form [formGroup]=\"connector\" class=\"column\" autocomplete=\"off\">\r\n    <mat-form-field>\r\n      <mat-select [placeholder]=\"'Action' | translate\" formControlName=\"action\">\r\n        <mat-option *ngFor=\"let action of actions\" [value]=\"action.name\">{{action.title}}</mat-option>\r\n        <mat-option>{{'None' | translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-button-toggle-group [value]=\"connector.controls['case'].value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange($event)\">\r\n      <mat-button-toggle value=\"true\">{{'True' | translate}}</mat-button-toggle>\r\n      <mat-button-toggle value=\"false\">{{'False' | translate}}</mat-button-toggle>\r\n      <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n    <mat-form-field [style.display]=\"connector.controls['case'].value==='true'||connector.controls['case'].value==='false'?'none':''\">\r\n      <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", styles: [":host{min-width:280px;padding:4px;display:block}\n"] }]
+            args: [{ template: "<ng-container #arguments>\r\n</ng-container>\r\n<ng-template #connectorargs>\r\n  <form [formGroup]=\"connector\" class=\"column\" autocomplete=\"off\">\r\n    <mat-form-field>\r\n      <mat-select [placeholder]=\"'Action' | translate\" formControlName=\"action\">\r\n        <mat-option *ngFor=\"let action of actions\" [value]=\"action.name\">{{action.title}}</mat-option>\r\n        <mat-option>{{'None' | translate}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <mat-button-toggle-group [value]=\"connector.controls.case.value\" #acase=\"matButtonToggleGroup\" (change)=\"connectorCaseChange($event)\">\r\n      <mat-button-toggle value=\"true\">{{'True' | translate}}</mat-button-toggle>\r\n      <mat-button-toggle value=\"false\">{{'False' | translate}}</mat-button-toggle>\r\n      <mat-button-toggle>{{'Case' | translate}}</mat-button-toggle>\r\n    </mat-button-toggle-group>\r\n    <mat-form-field [style.display]=\"connector.controls.case.value==='true'||connector.controls.case.value==='false'?'none':''\">\r\n      <input matInput [placeholder]=\"'Case' | translate\" formControlName=\"case\" />\r\n    </mat-form-field>\r\n  </form>\r\n</ng-template>\r\n", styles: [":host{min-width:280px;padding:4px;display:block}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: BizDocComponentFactoryResolver }, { type: i0.Injector }, { type: TranslateService }, { type: i1.FormBuilder }, { type: PaneRef }], propDecorators: { change: [{
                 type: Output
             }], argumentstemplate: [{
@@ -15866,7 +15865,7 @@ class CubeMatrixBase {
         this.axes = axes;
         this._listen().subscribe(() => {
             const combination = this._combine(axes);
-            this.title = combination.join(ACCOUNT_DELIMITER);
+            this.title = combination.join(' ');
         });
     }
     /**
@@ -17920,9 +17919,11 @@ class OptionsComponent {
         this._sb = _sb;
         this._session = _session;
         this._destroy = new Subject();
+        this.today = new Date();
+        this.isMobile = isMobile();
         this._requiredValidator = (control) => {
             const parent = control.parent;
-            if (parent && parent.controls['active'].value && !control.value)
+            if (parent && parent.controls.active.value && !control.value)
                 return {
                     required: true
                 };
@@ -17976,10 +17977,10 @@ class OptionsComponent {
         this.aRIA.valueChanges.pipe(takeUntil$1(this._destroy)).
             subscribe(v => this._session.aria = v);
         this.language.valueChanges.subscribe(v => this._session.language = v);
-        const outOfOffice = this.form.controls['outOfOffice'];
-        const grantAccess = this.form.controls['grantAccess'];
-        const notifications = this.form.controls['notifications'];
-        const emails = this.form.controls['emails'];
+        const outOfOffice = this.form.controls.outOfOffice;
+        const grantAccess = this.form.controls.grantAccess;
+        const notifications = this.form.controls.notifications;
+        const emails = this.form.controls.emails;
         const options = this.options = this._session.profile.options;
         this.form.patchValue(options, { emitEvent: false });
         if (!options.notifications.active)
@@ -17995,11 +17996,11 @@ class OptionsComponent {
         else if (!options.outOfOffice.from)
             this._toggle(outOfOffice, false, 'to');
         // change
-        notifications.controls['active'].valueChanges.pipe(takeUntil$1(this._destroy)).
+        notifications.controls.active.valueChanges.pipe(takeUntil$1(this._destroy)).
             subscribe(active => this._toggle(notifications, active, 'likes', 'commentMyDocument', 'commentAnyDocument', 'upcomingEvents', 'tagged', 'anyDocumentStateChange', 'myDocumentStateChange', 'cubeAnomaly'));
-        emails.controls['active'].valueChanges.pipe(takeUntil$1(this._destroy)).
+        emails.controls.active.valueChanges.pipe(takeUntil$1(this._destroy)).
             subscribe(active => this._toggle(emails, active, 'mail', 'chat', 'notifications', 'events'));
-        grantAccess.controls['active'].valueChanges.pipe(takeUntil$1(this._destroy)).
+        grantAccess.controls.active.valueChanges.pipe(takeUntil$1(this._destroy)).
             subscribe(active => {
             if (active) {
                 this.gusers.enable();
@@ -18008,7 +18009,7 @@ class OptionsComponent {
             else
                 this.gusers.enable();
         });
-        outOfOffice.controls['active'].valueChanges.pipe(takeUntil$1(this._destroy)).
+        outOfOffice.controls.active.valueChanges.pipe(takeUntil$1(this._destroy)).
             subscribe(active => {
             if (active) {
                 this.substitueId.enable();
@@ -18017,16 +18018,16 @@ class OptionsComponent {
             else
                 this.substitueId.disable();
             this._toggle(outOfOffice, active, 'from');
-            this._toggle(outOfOffice, active && outOfOffice.controls['from'].value, 'to');
+            this._toggle(outOfOffice, active && outOfOffice.controls.from.value, 'to');
         });
-        outOfOffice.controls['from'].valueChanges.pipe(takeUntil$1(this._destroy)).
+        outOfOffice.controls.from.valueChanges.pipe(takeUntil$1(this._destroy)).
             subscribe(from => this._toggle(outOfOffice, from !== null, 'to'));
         this.gusers$ = this.gusers.valueChanges.pipe(takeUntil$1(this._destroy), filter(v => isString(v)), debounceTime(100), switchMap(v => this._accounts.findAll(v)), map(r => {
             const exclude = grantAccess.value.users?.slice() || [];
             exclude.push(this._session.profile.userId);
             return r.filter(u => exclude.indexOf(u.id) < 0);
         }));
-        this.susers$ = this.substitueId.valueChanges.pipe(takeUntil$1(this._destroy), tap(v => !v && outOfOffice.controls['substitueId'].setValue(null)), filter(v => isString(v)), switchMap(v => this._accounts.findAll(v)), map(r => r.filter(u => u.id !== this._session.profile.userId)));
+        this.susers$ = this.substitueId.valueChanges.pipe(takeUntil$1(this._destroy), tap(v => !v && outOfOffice.controls.substitueId.setValue(null)), filter(v => isString(v)), switchMap(v => this._accounts.findAll(v)), map(r => r.filter(u => u.id !== this._session.profile.userId)));
         if (options.outOfOffice.substitueId)
             this._accounts.get(options.outOfOffice.substitueId).subscribe(u => this.substitueId.setValue(u, { emitEvent: false }));
         if (this._option)
@@ -18049,7 +18050,7 @@ class OptionsComponent {
         });
     }
     toggleSound() {
-        this.form.controls['notifications'].controls['sound'].setValue(!this.options.notifications.sound);
+        this.form.controls.notifications.controls.sound.setValue(!this.options.notifications.sound);
     }
     addTag(event) {
         const { chipInput, value } = event;
@@ -18085,25 +18086,25 @@ class OptionsComponent {
         const users = this.form.value.grantAccess.users;
         const id = event.option.value;
         if (!users)
-            this.form.controls['grantAccess'].controls['users'].setValue([id]);
+            (this.form.controls.grantAccess).controls.users.setValue([id]);
         else
             users.push(id);
         inp.value = '';
         this.form.patchValue({});
     }
     setSubstitute(event) {
-        this.form.controls['outOfOffice'].controls['substitueId'].setValue(event.option.value.id);
+        (this.form.controls.outOfOffice).controls.substitueId.setValue(event.option.value.id);
     }
     ngOnDestroy() {
         this._destroy.next();
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: OptionsComponent, deps: [{ token: OPTION_PANEL }, { token: i1$1.OverlayRef }, { token: i1.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: SessionService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: OptionsComponent, selector: "bizdoc-options", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "outOfOffice", first: true, predicate: ["outOfOffice"], descendants: true, read: MatExpansionPanel, static: true }, { propertyName: "notifications", first: true, predicate: ["notifications"], descendants: true, read: MatExpansionPanel, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel #notifications>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Notifications' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>notifications</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"notifications\" class=\"column\">\r\n        <div class=\"row\">\r\n          <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"toggleSound()\" [bizdocTooltip]=\"'Sound'|translate\"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #emails>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Emails' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>alternate_email</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #outOfOffice>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'OutOfOffice' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>trending_flat</mat-icon>-->\r\n          <!--{{'OutOfOfficeTip' | translate}}-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n          <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                            (optionSelected)=\"setSubstitute($event)\">\r\n            <mat-option *ngFor=\"let u of susers$ | async\" [value]=\"u\">\r\n              <span>{{u.name}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <div>\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #from></mat-datepicker>\r\n          </mat-form-field>\r\n          &nbsp;\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value.outOfOffice?.from\" placeholder=\"{{'To'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #to></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #grantAccess>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'GrantAccess' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>account_circle</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"grantAccess\" class=\"grant-section\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n            <mat-chip-row *ngFor=\"let u of form.value.grantAccess.users || []\"\r\n                          (removed)=\"removeGrant(u)\">\r\n              {{u | userName | async}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip-row>\r\n          </mat-chip-grid>\r\n          <input [formControl]=\"gusers\" placeholder=\"{{'Users'| translate}}\"\r\n                 #grantInput\r\n                 [matAutocomplete]=\"grantAuto\"\r\n                 [matChipInputFor]=\"grantList\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n            <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n              {{u.name}}\r\n              <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #preferences>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Preferences' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon></mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div class=\"column\">\r\n        <mat-form-field>\r\n          <mat-chip-grid #chips>\r\n            <mat-chip-row *ngFor=\"let item of form.value.tags\"\r\n                          [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n              {{item}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip-row>\r\n          </mat-chip-grid>\r\n          <input [placeholder]=\"'Tags'|translate\"\r\n                 [matChipInputFor]=\"chips\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                 [matChipInputAddOnBlur]=\"true\"\r\n                 (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n        <mat-slide-toggle [formControl]=\"aRIA\">{{'ARIA' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </mat-accordion>\r\n</form>\r\n", styles: [":host{max-width:80vw}.grant-section{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i8$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i3$7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: OptionsComponent, selector: "bizdoc-options", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "outOfOffice", first: true, predicate: ["outOfOffice"], descendants: true, read: MatExpansionPanel, static: true }, { propertyName: "notifications", first: true, predicate: ["notifications"], descendants: true, read: MatExpansionPanel, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel #notifications>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Notifications' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>notifications</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"notifications\" class=\"column\">\r\n        <div class=\"row\">\r\n          <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"toggleSound()\" [bizdocTooltip]=\"'Sound'|translate\"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #emails>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Emails' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>alternate_email</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #outOfOffice>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'OutOfOffice' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>trending_flat</mat-icon>-->\r\n          <!--{{'OutOfOfficeTip' | translate}}-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n          <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                            (optionSelected)=\"setSubstitute($event)\">\r\n            <mat-option *ngFor=\"let u of susers$ | async\" [value]=\"u\">\r\n              <span>{{u.name}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Dates'|translate}}</mat-label>\r\n          <mat-date-range-input [rangePicker]=\"dates\" required>\r\n            <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n            <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n          </mat-date-range-input>\r\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #grantAccess>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'GrantAccess' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>account_circle</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"grantAccess\" class=\"grant-section\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n            <mat-chip-row *ngFor=\"let u of form.value.grantAccess.users || []\"\r\n                          (removed)=\"removeGrant(u)\">\r\n              {{u | userName | async}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip-row>\r\n          </mat-chip-grid>\r\n          <input [formControl]=\"gusers\" placeholder=\"{{'Users'| translate}}\"\r\n                 #grantInput\r\n                 [matAutocomplete]=\"grantAuto\"\r\n                 [matChipInputFor]=\"grantList\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n            <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n              {{u.name}}\r\n              <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #preferences>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Preferences' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon></mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div class=\"column\">\r\n        <mat-form-field>\r\n          <mat-chip-grid #chips>\r\n            <mat-chip-row *ngFor=\"let item of form.value.tags\"\r\n                          [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n              {{item}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip-row>\r\n          </mat-chip-grid>\r\n          <input [placeholder]=\"'Tags'|translate\"\r\n                 [matChipInputFor]=\"chips\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                 [matChipInputAddOnBlur]=\"true\"\r\n                 (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n        <mat-slide-toggle [formControl]=\"aRIA\">{{'ARIA' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </mat-accordion>\r\n</form>\r\n", styles: [":host{max-width:80vw}.grant-section{display:flex;flex-direction:column}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: i8$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i8$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i8$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i8$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8$4.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i3$7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$7.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$7.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: OptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-options', template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel #notifications>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Notifications' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>notifications</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"notifications\" class=\"column\">\r\n        <div class=\"row\">\r\n          <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"toggleSound()\" [bizdocTooltip]=\"'Sound'|translate\"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #emails>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Emails' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>alternate_email</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #outOfOffice>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'OutOfOffice' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>trending_flat</mat-icon>-->\r\n          <!--{{'OutOfOfficeTip' | translate}}-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n          <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                            (optionSelected)=\"setSubstitute($event)\">\r\n            <mat-option *ngFor=\"let u of susers$ | async\" [value]=\"u\">\r\n              <span>{{u.name}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <div>\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #from></mat-datepicker>\r\n          </mat-form-field>\r\n          &nbsp;\r\n          <mat-form-field>\r\n            <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"form.value.outOfOffice?.from\" placeholder=\"{{'To'| translate}}\" />\r\n            <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n            <mat-datepicker #to></mat-datepicker>\r\n          </mat-form-field>\r\n        </div>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #grantAccess>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'GrantAccess' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>account_circle</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"grantAccess\" class=\"grant-section\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n            <mat-chip-row *ngFor=\"let u of form.value.grantAccess.users || []\"\r\n                          (removed)=\"removeGrant(u)\">\r\n              {{u | userName | async}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip-row>\r\n          </mat-chip-grid>\r\n          <input [formControl]=\"gusers\" placeholder=\"{{'Users'| translate}}\"\r\n                 #grantInput\r\n                 [matAutocomplete]=\"grantAuto\"\r\n                 [matChipInputFor]=\"grantList\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n            <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n              {{u.name}}\r\n              <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #preferences>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Preferences' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon></mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div class=\"column\">\r\n        <mat-form-field>\r\n          <mat-chip-grid #chips>\r\n            <mat-chip-row *ngFor=\"let item of form.value.tags\"\r\n                          [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n              {{item}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip-row>\r\n          </mat-chip-grid>\r\n          <input [placeholder]=\"'Tags'|translate\"\r\n                 [matChipInputFor]=\"chips\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                 [matChipInputAddOnBlur]=\"true\"\r\n                 (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n        <mat-slide-toggle [formControl]=\"aRIA\">{{'ARIA' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </mat-accordion>\r\n</form>\r\n", styles: [":host{max-width:80vw}.grant-section{display:flex;flex-direction:column}\n"] }]
+            args: [{ selector: 'bizdoc-options', template: "<form [formGroup]=\"form\" autocomplete=\"off\">\r\n  <mat-accordion>\r\n    <mat-expansion-panel #notifications>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Notifications' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>notifications</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"notifications\" class=\"column\">\r\n        <div class=\"row\">\r\n          <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"toggleSound()\" [bizdocTooltip]=\"'Sound'|translate\"><mat-icon>{{options.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #emails>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Emails' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>alternate_email</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\r\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #outOfOffice>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'OutOfOffice' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>trending_flat</mat-icon>-->\r\n          <!--{{'OutOfOfficeTip' | translate}}-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n          <input matInput [formControl]=\"substitueId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                            (optionSelected)=\"setSubstitute($event)\">\r\n            <mat-option *ngFor=\"let u of susers$ | async\" [value]=\"u\">\r\n              <span>{{u.name}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n          <mat-label>{{'Dates'|translate}}</mat-label>\r\n          <mat-date-range-input [rangePicker]=\"dates\" required>\r\n            <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n            <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n          </mat-date-range-input>\r\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #grantAccess>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'GrantAccess' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon>account_circle</mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div formGroupName=\"grantAccess\" class=\"grant-section\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <mat-form-field>\r\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n            <mat-chip-row *ngFor=\"let u of form.value.grantAccess.users || []\"\r\n                          (removed)=\"removeGrant(u)\">\r\n              {{u | userName | async}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip-row>\r\n          </mat-chip-grid>\r\n          <input [formControl]=\"gusers\" placeholder=\"{{'Users'| translate}}\"\r\n                 #grantInput\r\n                 [matAutocomplete]=\"grantAuto\"\r\n                 [matChipInputFor]=\"grantList\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n            <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n              {{u.name}}\r\n              <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n            </mat-option>\r\n          </mat-autocomplete>\r\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n      </div>\r\n    </mat-expansion-panel>\r\n    <mat-expansion-panel #preferences>\r\n      <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n          {{'Preferences' | translate}}\r\n        </mat-panel-title>\r\n        <mat-panel-description>\r\n          <!--<mat-icon></mat-icon>-->\r\n        </mat-panel-description>\r\n      </mat-expansion-panel-header>\r\n      <div class=\"column\">\r\n        <mat-form-field>\r\n          <mat-chip-grid #chips>\r\n            <mat-chip-row *ngFor=\"let item of form.value.tags\"\r\n                          [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n              {{item}}\r\n              <mat-icon matChipRemove>cancel</mat-icon>\r\n            </mat-chip-row>\r\n          </mat-chip-grid>\r\n          <input [placeholder]=\"'Tags'|translate\"\r\n                 [matChipInputFor]=\"chips\"\r\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                 [matChipInputAddOnBlur]=\"true\"\r\n                 (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n        <mat-slide-toggle [formControl]=\"aRIA\">{{'ARIA' | translate}}</mat-slide-toggle>\r\n      </div>\r\n    </mat-expansion-panel>\r\n  </mat-accordion>\r\n</form>\r\n", styles: [":host{max-width:80vw}.grant-section{display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [OPTION_PANEL]
@@ -18386,11 +18387,11 @@ class QuickOptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: QuickOptionsComponent, deps: [{ token: PromptService }, { token: GuideService }, { token: OptionsService }, { token: i4$4.MatBottomSheetRef, optional: true }, { token: PopupRef, optional: true }, { token: HubService }, { token: SessionService }, { token: i2$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: QuickOptionsComponent, selector: "bizdoc-quick-options", ngImport: i0, template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-h2\">\r\n    <ng-container *ngIf=\"by\">{{by}} \\ </ng-container>\r\n    {{name}}</span>\r\n  </div>\r\n  <div class=\"center center\" *ngIf=\"themes.length > 1\">\r\n    <button *ngFor=\"let t of themes\" (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\"></button>\r\n  </div>\r\n</div>\r\n<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" *ngIf=\"!online\" (click)=\"revive()\">\r\n    <mat-icon [bizdocTooltip]=\"'Connect'|translate\">wifi_off</mat-icon>\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" *ngIf=\"online\" [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n  </mat-list-item>\r\n  <mat-menu #availability>\r\n    <button mat-menu-item *ngFor=\"let m of modes\" (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"options()\">\r\n    {{'Options' | translate}}\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{'ChangeLanguage' | translate}}\r\n  </mat-list-item>\r\n  <mat-menu #language>\r\n    <button mat-menu-item *ngFor=\"let l of languages\" (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"help\">\r\n    {{'Help' | translate}}\r\n    <span [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\"></span>\r\n  </mat-list-item>\r\n  <mat-menu #help>\r\n    <button mat-menu-item *ngFor=\"let g of guides\" (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</mat-list-item>\r\n</mat-nav-list>\r\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;-moz-border-radius:13px 13px;-webkit-border-radius:13px 13px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i3$6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1$2.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: QuickOptionsComponent, selector: "bizdoc-quick-options", ngImport: i0, template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-headline-6\">\r\n    <ng-container *ngIf=\"by\">{{by}} \\ </ng-container>\r\n    {{name}}</span>\r\n  </div>\r\n  <div class=\"center center\" *ngIf=\"themes.length > 1\">\r\n    <button *ngFor=\"let t of themes\" (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\"></button>\r\n  </div>\r\n</div>\r\n<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" *ngIf=\"!online\" (click)=\"revive()\">\r\n    <mat-icon [bizdocTooltip]=\"'Connect'|translate\">wifi_off</mat-icon>\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" *ngIf=\"online\" [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n  </mat-list-item>\r\n  <mat-menu #availability>\r\n    <button mat-menu-item *ngFor=\"let m of modes\" (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"options()\">\r\n    {{'Options' | translate}}\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{'ChangeLanguage' | translate}}\r\n  </mat-list-item>\r\n  <mat-menu #language>\r\n    <button mat-menu-item *ngFor=\"let l of languages\" (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"help\">\r\n    {{'Help' | translate}}\r\n    <span [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\"></span>\r\n  </mat-list-item>\r\n  <mat-menu #help>\r\n    <button mat-menu-item *ngFor=\"let g of guides\" (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</mat-list-item>\r\n</mat-nav-list>\r\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;-moz-border-radius:13px 13px;-webkit-border-radius:13px 13px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i3$6.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$6.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i7$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i1$2.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: QuickOptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-quick-options', template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-h2\">\r\n    <ng-container *ngIf=\"by\">{{by}} \\ </ng-container>\r\n    {{name}}</span>\r\n  </div>\r\n  <div class=\"center center\" *ngIf=\"themes.length > 1\">\r\n    <button *ngFor=\"let t of themes\" (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\"></button>\r\n  </div>\r\n</div>\r\n<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" *ngIf=\"!online\" (click)=\"revive()\">\r\n    <mat-icon [bizdocTooltip]=\"'Connect'|translate\">wifi_off</mat-icon>\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" *ngIf=\"online\" [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n  </mat-list-item>\r\n  <mat-menu #availability>\r\n    <button mat-menu-item *ngFor=\"let m of modes\" (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"options()\">\r\n    {{'Options' | translate}}\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{'ChangeLanguage' | translate}}\r\n  </mat-list-item>\r\n  <mat-menu #language>\r\n    <button mat-menu-item *ngFor=\"let l of languages\" (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"help\">\r\n    {{'Help' | translate}}\r\n    <span [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\"></span>\r\n  </mat-list-item>\r\n  <mat-menu #help>\r\n    <button mat-menu-item *ngFor=\"let g of guides\" (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</mat-list-item>\r\n</mat-nav-list>\r\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;-moz-border-radius:13px 13px;-webkit-border-radius:13px 13px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}\n"] }]
+            args: [{ selector: 'bizdoc-quick-options', template: "<div class=\"column\">\r\n  <div class=\"profile-name\">\r\n    <span class=\"mat-headline-6\">\r\n    <ng-container *ngIf=\"by\">{{by}} \\ </ng-container>\r\n    {{name}}</span>\r\n  </div>\r\n  <div class=\"center center\" *ngIf=\"themes.length > 1\">\r\n    <button *ngFor=\"let t of themes\" (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\"></button>\r\n  </div>\r\n</div>\r\n<mat-nav-list role=\"list\">\r\n  <mat-list-item role=\"listitem\" *ngIf=\"!online\" (click)=\"revive()\">\r\n    <mat-icon [bizdocTooltip]=\"'Connect'|translate\">wifi_off</mat-icon>\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" *ngIf=\"online\" [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n  </mat-list-item>\r\n  <mat-menu #availability>\r\n    <button mat-menu-item *ngFor=\"let m of modes\" (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"options()\">\r\n    {{'Options' | translate}}\r\n  </mat-list-item>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{'ChangeLanguage' | translate}}\r\n  </mat-list-item>\r\n  <mat-menu #language>\r\n    <button mat-menu-item *ngFor=\"let l of languages\" (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" [matMenuTriggerFor]=\"help\">\r\n    {{'Help' | translate}}\r\n    <span [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\"></span>\r\n  </mat-list-item>\r\n  <mat-menu #help>\r\n    <button mat-menu-item *ngFor=\"let g of guides\" (click)=\"guide(g.name)\">{{g.title}}</button>\r\n  </mat-menu>\r\n  <mat-divider></mat-divider>\r\n  <mat-list-item role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</mat-list-item>\r\n</mat-nav-list>\r\n", styles: [".profile-name{margin:8px}.theme{height:22px;width:22px;-moz-border-radius:13px 13px;-webkit-border-radius:13px 13px;border-radius:13px;margin:4px}.theme.active.dark{border:2px solid #f4f4f4}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: GuideService }, { type: OptionsService }, { type: i4$4.MatBottomSheetRef, decorators: [{
                     type: Optional
                 }] }, { type: PopupRef, decorators: [{
@@ -18640,23 +18641,21 @@ let DocumentListingComponent = class DocumentListingComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DocumentListingComponent, deps: [{ token: SessionService }, { token: RouterImpl }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: DocumentListingComponent, selector: "ng-component", ngImport: i0, template: `
-    {{form?.title}}
+    {{form?.title | localizedString}}
     <mat-icon class="mat-icon-rtl-mirror" style="margin: 0;">chevron_right</mat-icon>
     #{{model?.number}}
-`, isInline: true, dependencies: [{ kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+`, isInline: true, styles: [":host{display:flex;align-items:unset}\n"], dependencies: [{ kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }] }); }
 };
 DocumentListingComponent = __decorate([
     BizDoc({ selector: 'bizdoc-document-listing' })
 ], DocumentListingComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: DocumentListingComponent, decorators: [{
             type: Component,
-            args: [{
-                    template: `
-    {{form?.title}}
+            args: [{ template: `
+    {{form?.title | localizedString}}
     <mat-icon class="mat-icon-rtl-mirror" style="margin: 0;">chevron_right</mat-icon>
     #{{model?.number}}
-`
-                }]
+`, styles: [":host{display:flex;align-items:unset}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: RouterImpl }] });
 
 let PathListingComponent = class PathListingComponent {
@@ -22073,14 +22072,14 @@ let AssignActionComponent = class AssignActionComponent {
      */
     userSelected(event) {
         const { id } = event.option.value;
-        this.form.controls['userIds'].setValue([id]);
+        this.form.controls.userIds.setValue([id]);
     }
     ngOnDestroy() {
         this._destroy.next();
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AssignActionComponent, deps: [{ token: i1.FormBuilder }, { token: SessionService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AssignActionComponent, selector: "ng-component", viewQueries: [{ propertyName: "nameInput", first: true, predicate: ["nameInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userId\r\n           cdkFocusInitial matInput\r\n           [matAutocomplete]=\"auto\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected($event)\" [displayWith]=\"displayWith\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n        {{u.name}}\r\n        <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.controls.userIds.hasError('required')\">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>\r\n    &nbsp;\r\n<!--    <mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>-->\r\n  </div>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i2$2.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: i9$1.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: AssignActionComponent, selector: "ng-component", viewQueries: [{ propertyName: "nameInput", first: true, predicate: ["nameInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userId\r\n           cdkFocusInitial matInput\r\n           [matAutocomplete]=\"auto\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected($event)\" [displayWith]=\"displayWith\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n        {{u.name}}\r\n        <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.controls.userIds.hasError('required')\">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>\r\n    &nbsp;\r\n<!--    <mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>-->\r\n  </div>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i2$2.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: i9$1.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 AssignActionComponent = __decorate([
     BizDoc({
@@ -22089,7 +22088,7 @@ AssignActionComponent = __decorate([
 ], AssignActionComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: AssignActionComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userId\r\n           cdkFocusInitial matInput\r\n           [matAutocomplete]=\"auto\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected($event)\" [displayWith]=\"displayWith\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n        {{u.name}}\r\n        <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.controls.userIds.hasError('required')\">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>\r\n    &nbsp;\r\n<!--    <mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>-->\r\n  </div>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userId\r\n           cdkFocusInitial matInput\r\n           [matAutocomplete]=\"auto\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected($event)\" [displayWith]=\"displayWith\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u\">\r\n        {{u.name}}\r\n        <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.controls.userIds.hasError('required')\">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>\r\n    &nbsp;\r\n<!--    <mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>-->\r\n  </div>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: SessionService }, { type: AccountService }], propDecorators: { nameInput: [{
                 type: ViewChild,
                 args: ['nameInput', { static: true, read: ElementRef }]
@@ -22117,7 +22116,7 @@ let ReturnActionComponent = class ReturnActionComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ReturnActionComponent, deps: [{ token: i1.FormBuilder }, { token: ActionRef }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ReturnActionComponent, selector: "ng-component", ngImport: i0, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-select formControlName=\"recipientId\" cdkFocusInitial [placeholder]=\"'User'|translate\" required>\r\n      <mat-option *ngFor=\"let r of recipients\" [value]=\"r.id\">{{r.userId | userName | async }}</mat-option>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.controls.recipientId.hasError('required')\">{{'Required'|translate:('User'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ReturnActionComponent, selector: "ng-component", ngImport: i0, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-select formControlName=\"recipientId\" cdkFocusInitial [placeholder]=\"'User'|translate\" required>\r\n      <mat-option *ngFor=\"let r of recipients\" [value]=\"r.id\">{{r.userId | userName | async }}</mat-option>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.controls.recipientId.hasError('required')\">{{'Required'|translate:('User'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i9$1.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }] }); }
 };
 ReturnActionComponent = __decorate([
     BizDoc({
@@ -22126,7 +22125,7 @@ ReturnActionComponent = __decorate([
 ], ReturnActionComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ReturnActionComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-select formControlName=\"recipientId\" cdkFocusInitial [placeholder]=\"'User'|translate\" required>\r\n      <mat-option *ngFor=\"let r of recipients\" [value]=\"r.id\">{{r.userId | userName | async }}</mat-option>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.controls.recipientId.hasError('required')\">{{'Required'|translate:('User'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-select formControlName=\"recipientId\" cdkFocusInitial [placeholder]=\"'User'|translate\" required>\r\n      <mat-option *ngFor=\"let r of recipients\" [value]=\"r.id\">{{r.userId | userName | async }}</mat-option>\r\n    </mat-select>\r\n    <mat-error *ngIf=\"form.controls.recipientId.hasError('required')\">{{'Required'|translate:('User'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: ActionRef }, { type: SessionService }] });
 
 /** component */
@@ -28907,7 +28906,7 @@ let MoveToActionComponent = class MoveToActionComponent {
         this.users$ = this.userIds.valueChanges.
             pipe(debounceTime(200), takeUntil$1(this._destroy), switchMap(v => this._accounts.findAll(v, { take: 20 }).
             pipe(map(r => {
-            const userIds = this.form.controls['userIds'].value || [];
+            const userIds = this.form.controls.userIds.value || [];
             return r.filter(u => u.id !== me && userIds.indexOf(u.id) < 0);
         }))));
     }
@@ -28917,9 +28916,9 @@ let MoveToActionComponent = class MoveToActionComponent {
      * @param event
      */
     userSelected(inp, event) {
-        const userIds = this.form.controls['userIds'].value || [];
+        const userIds = this.form.controls.userIds.value || [];
         userIds.push(event.option.value);
-        this.form.controls['userIds'].setValue(userIds);
+        this.form.controls.userIds.setValue(userIds);
         inp.value = '';
     }
     /**
@@ -28927,7 +28926,7 @@ let MoveToActionComponent = class MoveToActionComponent {
      * @param id
      */
     removed(id) {
-        const userIds = this.form.controls['userIds'].value;
+        const userIds = this.form.controls.userIds.value;
         const index = userIds.indexOf(id);
         if (userIds.length > 1) {
             index >= 0 &&
@@ -28935,14 +28934,14 @@ let MoveToActionComponent = class MoveToActionComponent {
             this.form.updateValueAndValidity();
         }
         else
-            this.form.controls['userIds'].setValue(null);
+            this.form.controls.userIds.setValue(null);
     }
     ngOnDestroy() {
         this._destroy.next();
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MoveToActionComponent, deps: [{ token: i1.FormBuilder }, { token: SessionService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MoveToActionComponent, selector: "ng-component", viewQueries: [{ propertyName: "nameInput", first: true, predicate: ["nameInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-chip-grid #chipList [attr.aria-label]=\"'AssignTo'|translate\">\r\n      <mat-chip-row *ngFor=\"let u of form.value.userIds\"\r\n                    [selectable]=\"true\"\r\n                    [removable]=\"true\"\r\n                    (removed)=\"removed(u)\">\r\n        {{u | userName | async }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip-row>\r\n    </mat-chip-grid>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userIds\r\n           cdkFocusInitial\r\n           #nameInput\r\n           [matAutocomplete]=\"auto\"\r\n           [matChipInputFor]=\"chipList\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected(nameInput, $event)\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u.id\">\r\n        {{u.name}}\r\n        <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.controls.userIds.hasError('required')\">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: MoveToActionComponent, selector: "ng-component", viewQueries: [{ propertyName: "nameInput", first: true, predicate: ["nameInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-chip-grid #chipList [attr.aria-label]=\"'AssignTo'|translate\">\r\n      <mat-chip-row *ngFor=\"let u of form.value.userIds\"\r\n                    [selectable]=\"true\"\r\n                    [removable]=\"true\"\r\n                    (removed)=\"removed(u)\">\r\n        {{u | userName | async }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip-row>\r\n    </mat-chip-grid>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userIds\r\n           cdkFocusInitial\r\n           #nameInput\r\n           [matAutocomplete]=\"auto\"\r\n           [matChipInputFor]=\"chipList\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected(nameInput, $event)\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u.id\">\r\n        {{u.name}}\r\n        <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.controls.userIds.hasError('required')\">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i5$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i4.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i9$1.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }] }); }
 };
 MoveToActionComponent = __decorate([
     BizDoc({
@@ -28951,7 +28950,7 @@ MoveToActionComponent = __decorate([
 ], MoveToActionComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: MoveToActionComponent, decorators: [{
             type: Component,
-            args: [{ template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-chip-grid #chipList [attr.aria-label]=\"'AssignTo'|translate\">\r\n      <mat-chip-row *ngFor=\"let u of form.value.userIds\"\r\n                    [selectable]=\"true\"\r\n                    [removable]=\"true\"\r\n                    (removed)=\"removed(u)\">\r\n        {{u | userName | async }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip-row>\r\n    </mat-chip-grid>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userIds\r\n           cdkFocusInitial\r\n           #nameInput\r\n           [matAutocomplete]=\"auto\"\r\n           [matChipInputFor]=\"chipList\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected(nameInput, $event)\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u.id\">\r\n        {{u.name}}\r\n        <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.controls.userIds.hasError('required')\">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n" }]
+            args: [{ template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <mat-chip-grid #chipList [attr.aria-label]=\"'AssignTo'|translate\">\r\n      <mat-chip-row *ngFor=\"let u of form.value.userIds\"\r\n                    [selectable]=\"true\"\r\n                    [removable]=\"true\"\r\n                    (removed)=\"removed(u)\">\r\n        {{u | userName | async }}\r\n        <mat-icon matChipRemove>cancel</mat-icon>\r\n      </mat-chip-row>\r\n    </mat-chip-grid>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userIds\r\n           cdkFocusInitial\r\n           #nameInput\r\n           [matAutocomplete]=\"auto\"\r\n           [matChipInputFor]=\"chipList\"\r\n           [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected(nameInput, $event)\">\r\n      <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u.id\">\r\n        {{u.name}}\r\n        <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n      </mat-option>\r\n    </mat-autocomplete>\r\n    <mat-error *ngIf=\"form.controls.userIds.hasError('required')\">{{'Required'|translate:('AssignTo'|translate)}}</mat-error>\r\n  </mat-form-field>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n    </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n" }]
         }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: SessionService }, { type: AccountService }], propDecorators: { nameInput: [{
                 type: ViewChild,
                 args: ['nameInput', { static: true, read: ElementRef }]
@@ -29690,11 +29689,11 @@ class ReassignDialog {
             pipe(map(r => r.filter(u => this._data.exclude.indexOf(u.id) < 0)));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ReassignDialog, deps: [{ token: MAT_DIALOG_DATA }, { token: SessionService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ReassignDialog, selector: "ng-component", ngImport: i0, template: "<h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-select placeholder=\"{{'Who' | translate}}\" formControlName=\"userId\" required>\r\n        <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!--<mat-form-field>\r\n      <mat-select placeholder=\"{{'Role' | translate}}\" formControlName=\"role\">\r\n        <mat-option>{{'None'| translate}}</mat-option>\r\n        <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>-->\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" placeholder=\"{{'Note'| translate}}\" maxlength=\"200\"></textarea>\r\n    <mat-hint align=\"end\">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>\r\n  </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ReassignDialog, selector: "ng-component", ngImport: i0, template: "<h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-select placeholder=\"{{'Who' | translate}}\" formControlName=\"userId\" required>\r\n        <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!--<mat-form-field>\r\n      <mat-select placeholder=\"{{'Role' | translate}}\" formControlName=\"role\">\r\n        <mat-option>{{'None'| translate}}</mat-option>\r\n        <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>-->\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" placeholder=\"{{'Note'| translate}}\" maxlength=\"200\"></textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n  </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ReassignDialog, decorators: [{
             type: Component,
-            args: [{ template: "<h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-select placeholder=\"{{'Who' | translate}}\" formControlName=\"userId\" required>\r\n        <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!--<mat-form-field>\r\n      <mat-select placeholder=\"{{'Role' | translate}}\" formControlName=\"role\">\r\n        <mat-option>{{'None'| translate}}</mat-option>\r\n        <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>-->\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" placeholder=\"{{'Note'| translate}}\" maxlength=\"200\"></textarea>\r\n    <mat-hint align=\"end\">{{form.controls['note'].value?.length || 0}} / {{200}}</mat-hint>\r\n  </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
+            args: [{ template: "<h2 mat-dialog-title>{{'Reassign' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form [formGroup]=\"form\" autocomplete=\"off\" class=\"column\">\r\n    <mat-form-field>\r\n      <mat-select placeholder=\"{{'Who' | translate}}\" formControlName=\"userId\" required>\r\n        <mat-option *ngFor=\"let u of users$ | async\" [value]=\"u.id\">{{u.name}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>\r\n    <!--<mat-form-field>\r\n      <mat-select placeholder=\"{{'Role' | translate}}\" formControlName=\"role\">\r\n        <mat-option>{{'None'| translate}}</mat-option>\r\n        <mat-option *ngFor=\"let r of roles\" [value]=\"r.name\">{{r.title}}</mat-option>\r\n      </mat-select>\r\n    </mat-form-field>-->\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" placeholder=\"{{'Note'| translate}}\" maxlength=\"200\"></textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n  </mat-form-field>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -29893,7 +29892,7 @@ let ManageCubeIndexUtility = class ManageCubeIndexUtility {
                     const row = this._find(axes);
                     if (row) {
                         this._row = row;
-                        this.form.controls['value'].setValue(this._row.value, { emitEvent: false });
+                        this.form.controls.value.setValue(this._row.value, { emitEvent: false });
                     }
                     else
                         this._row.axes = axes;
@@ -31215,8 +31214,8 @@ let RoleNodeComponent = class RoleNodeComponent {
         this.input.focus();
     }
     ngOnInit() {
-        this.form.controls['condition'].valueChanges.pipe(takeUntil$1(this._destroy)).subscribe(v => {
-            const ctrl = this.form.controls['minimum'];
+        this.form.controls.condition.valueChanges.pipe(takeUntil$1(this._destroy)).subscribe(v => {
+            const ctrl = this.form.controls.minimum;
             switch (v) {
                 case 'Count':
                     ctrl.setValidators([Validators.min(1), Validators.required]);
@@ -31827,6 +31826,8 @@ class ProfileSettingsDialog {
         this._fb = _fb;
         this.model = model;
         this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
+        this.today = new Date();
+        this.isMobile = isMobile();
         this.substitute = this._fb.control(null);
         this.grants = this._fb.control([]);
         this.outOfOffice = this._fb.group({
@@ -31889,7 +31890,7 @@ class ProfileSettingsDialog {
         if (!this.model.grantAccess || !this.model.grantAccess.active) {
             this.grants.disable({ emitEvent: false });
         }
-        this.grantAccess.controls['active'].valueChanges.pipe(takeUntil(this._dialogRef.afterClosed())).
+        this.grantAccess.controls.active.valueChanges.pipe(takeUntil(this._dialogRef.afterClosed())).
             subscribe(v => {
             if (v) {
                 this.grants.enable();
@@ -31904,7 +31905,7 @@ class ProfileSettingsDialog {
     }
     setId(event) {
         const { id } = event.option.value;
-        this.outOfOffice.controls['substitueId'].setValue(id);
+        this.outOfOffice.controls.substitueId.setValue(id);
     }
     /**
      *
@@ -31926,18 +31927,18 @@ class ProfileSettingsDialog {
         const users = this.form.value.grantAccess?.users;
         const id = event.option.value;
         if (!users)
-            this.grantAccess.controls['users'].setValue([id]);
+            this.grantAccess.controls.users.setValue([id]);
         else
             users.push(id);
         inp.value = '';
         this.form.patchValue({});
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ProfileSettingsDialog, deps: [{ token: AccountService }, { token: i2$4.MatDialogRef }, { token: i1.FormBuilder }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ProfileSettingsDialog, selector: "ng-component", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }], ngImport: i0, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          <mat-option *ngFor=\"let u of ousers$ | async\" [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <div>\r\n        <mat-form-field>\r\n          <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n          <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #from></mat-datepicker>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field> \r\n          <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"outOfOffice.controls['from'].value\" placeholder=\"{{'To'| translate}}\" />\r\n          <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #to></mat-datepicker>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <mat-form-field>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          <mat-chip-row *ngFor=\"let u of grantAccess.value.users || []\"\r\n                        [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" placeholder=\"{{'Users'| translate}}\"\r\n               [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n            {{u.name}}\r\n            <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i3$7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ProfileSettingsDialog, selector: "ng-component", viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }], ngImport: i0, template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          <mat-option *ngFor=\"let u of ousers$ | async\" [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Dates'|translate}}</mat-label>\r\n        <mat-date-range-input [rangePicker]=\"dates\" required>\r\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n        </mat-date-range-input>\r\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n      </mat-form-field>\r\n      </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <mat-form-field>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          <mat-chip-row *ngFor=\"let u of grantAccess.value.users || []\"\r\n                        [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" placeholder=\"{{'Users'| translate}}\"\r\n               [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n            {{u.name}}\r\n            <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i5$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i3$7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i3$7.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i3$7.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i3$7.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i3$7.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i2$4.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5$1.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: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$5.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i9.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "directive", type: i9$1.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: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ProfileSettingsDialog, decorators: [{
             type: Component,
-            args: [{ template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          <mat-option *ngFor=\"let u of ousers$ | async\" [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <div>\r\n        <mat-form-field>\r\n          <input matInput [matDatepicker]=\"from\" formControlName=\"from\" placeholder=\"{{'From'| translate}}\" />\r\n          <mat-datepicker-toggle [for]=\"from\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #from></mat-datepicker>\r\n        </mat-form-field>\r\n        &nbsp;\r\n        <mat-form-field> \r\n          <input matInput [matDatepicker]=\"to\" formControlName=\"to\" [min]=\"outOfOffice.controls['from'].value\" placeholder=\"{{'To'| translate}}\" />\r\n          <mat-datepicker-toggle [for]=\"to\" matSuffix></mat-datepicker-toggle>\r\n          <mat-datepicker #to></mat-datepicker>\r\n        </mat-form-field>\r\n      </div>\r\n    </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <mat-form-field>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          <mat-chip-row *ngFor=\"let u of grantAccess.value.users || []\"\r\n                        [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" placeholder=\"{{'Users'| translate}}\"\r\n               [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n            {{u.name}}\r\n            <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
+            args: [{ template: "<h2 mat-dialog-title>{{'Settings' | translate }}</h2>\r\n<mat-dialog-content>\r\n  <form autocomplete=\"off\" [formGroup]=\"form\">\r\n    <div class=\"column gap\" formGroupName=\"outOfOffice\">\r\n      <h4 class=\"\">{{'OutOfOffice'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <br />\r\n      <mat-form-field class=\"flex\">\r\n        <input matInput [formControl]=\"substitute\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n               [placeholder]=\"'Associate' | translate\" [required]=\"outOfOffice.value.active\" />\r\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"userDisplay\"\r\n                          (optionSelected)=\"setId($event)\">\r\n          <mat-option *ngFor=\"let u of ousers$ | async\" [value]=\"u\">\r\n            <span>{{u.name}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n      <mat-form-field>\r\n        <mat-label>{{'Dates'|translate}}</mat-label>\r\n        <mat-date-range-input [rangePicker]=\"dates\" required>\r\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n        </mat-date-range-input>\r\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n      </mat-form-field>\r\n      </div>\r\n    <!--<hr />-->\r\n    <div class=\"column\" formGroupName=\"grantAccess\">\r\n      <h4 class=\"\">{{'GrantAccess'|translate}}</h4>\r\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n      <mat-form-field>\r\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!grantAccess.value.active\">\r\n          <mat-chip-row *ngFor=\"let u of grantAccess.value.users || []\"\r\n                        [removable]=\"grantAccess.value.active\"\r\n                        (removed)=\"removeGrant(u)\">\r\n            {{u | userName | async}}\r\n            <mat-icon matChipRemove>cancel</mat-icon>\r\n          </mat-chip-row>\r\n        </mat-chip-grid>\r\n        <input [formControl]=\"grants\" placeholder=\"{{'Users'| translate}}\"\r\n               [required]=\"grantAccess.value.active\"\r\n               [matAutocomplete]=\"grantAuto\"\r\n               #grantInput\r\n               [matChipInputFor]=\"grantList\"\r\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n          <mat-option *ngFor=\"let u of gusers$ | async\" [value]=\"u.id\">\r\n            {{u.name}}\r\n            <span *ngIf=\"u.email\">&nbsp; - {{u.email}}</span>\r\n          </mat-option>\r\n        </mat-autocomplete>\r\n      </mat-form-field>\r\n    </div>\r\n  </form>\r\n</mat-dialog-content>\r\n<mat-dialog-actions>\r\n  <button mat-button [mat-dialog-close]=\"form.value\" color=\"primary\" [disabled]=\"!form.valid\">{{'OK' | translate}}</button>\r\n  <button mat-button mat-dialog-close>{{'Cancel' | translate}}</button>\r\n</mat-dialog-actions>\r\n" }]
         }], ctorParameters: () => [{ type: AccountService }, { type: i2$4.MatDialogRef }, { type: i1.FormBuilder }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
@@ -34021,14 +34022,14 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ConfigurationDesignerComponent, deps: [{ token: PanesRouter }, { token: TranslateService }, { token: PromptService }, { token: SessionService }, { token: i0.ElementRef }, { token: i0.Injector }, { token: UtilityRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ConfigurationDesignerComponent, selector: "ng-component", host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<section *ngFor=\"let s of sections | filterBy:'hide': false: searchBy\">\r\n  <h2 class=\"mat-h2\">{{s.title}}</h2>\r\n  <!--<hr />-->\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements | filterBy:'hide': false: searchBy\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{e.title|localizedString}}\r\n          <span class=\"divider\"></span>\r\n          <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n        </mat-card-title>\r\n        <mat-card-subtitle>\r\n          {{e.name}}\r\n        </mat-card-subtitle>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(s, e)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span *ngIf=\"t.family\">\r\n            {{t.family}}\r\n            &nbsp;-&nbsp;\r\n          </span>\r\n          <span>\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [":host{outline:none}section h2{margin:10px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i8$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: FilterPipe, name: "filterBy" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: ConfigurationDesignerComponent, selector: "ng-component", host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "handleKeyboardEvent($event)" } }, ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<div>\r\n  <section *ngFor=\"let s of sections | filterBy:'hide': false: searchBy\">\r\n    <h2 class=\"mat-h2\">{{s.title}}</h2>\r\n    <!--<hr />-->\r\n    <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n      <mat-card *ngFor=\"let e of s.elements | filterBy:'hide': false: searchBy\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n        <!-- @item-->\r\n        <mat-card-header>\r\n          <mat-card-title>\r\n            {{e.title|localizedString}}\r\n            <span class=\"divider\"></span>\r\n            <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n          </mat-card-title>\r\n          <mat-card-subtitle>\r\n            {{e.name}}\r\n          </mat-card-subtitle>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(s, e)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n      </mat-card>\r\n      <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n        <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n        <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n        <mat-menu #templateMenu>\r\n          <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n            <span *ngIf=\"t.family\">\r\n              {{t.family}}\r\n              &nbsp;-&nbsp;\r\n            </span>\r\n            <span>\r\n              {{t.title}}\r\n            </span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</div>\r\n", styles: [":host{outline:none}section h2{margin:10px;top:0;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"], dependencies: [{ kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i8$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8$3.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "directive", type: i8$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i8$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i8$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i9$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i11.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i11.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: FilterPipe, name: "filterBy" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [itemAnimation] }); }
 };
 ConfigurationDesignerComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-designer' })
 ], ConfigurationDesignerComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: ConfigurationDesignerComponent, decorators: [{
             type: Component,
-            args: [{ animations: [itemAnimation], host: { tabindex: '0' }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<section *ngFor=\"let s of sections | filterBy:'hide': false: searchBy\">\r\n  <h2 class=\"mat-h2\">{{s.title}}</h2>\r\n  <!--<hr />-->\r\n  <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n    <mat-card *ngFor=\"let e of s.elements | filterBy:'hide': false: searchBy\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n      <!-- @item-->\r\n      <mat-card-header>\r\n        <mat-card-title>\r\n          {{e.title|localizedString}}\r\n          <span class=\"divider\"></span>\r\n          <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n        </mat-card-title>\r\n        <mat-card-subtitle>\r\n          {{e.name}}\r\n        </mat-card-subtitle>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(s, e)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n    </mat-card>\r\n    <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n      <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n      <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n      <mat-menu #templateMenu>\r\n        <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n          <span *ngIf=\"t.family\">\r\n            {{t.family}}\r\n            &nbsp;-&nbsp;\r\n          </span>\r\n          <span>\r\n            {{t.title}}\r\n          </span>\r\n        </button>\r\n      </mat-menu>\r\n    </div>\r\n  </div>\r\n</section>\r\n", styles: [":host{outline:none}section h2{margin:10px;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"] }]
+            args: [{ animations: [itemAnimation], host: { tabindex: '0' }, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"!dirty || loading || saving\" [bizdocTooltip]=\"'Save'|translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"clearSearch()\" [disabled]=\"!searchBy\" [bizdocTooltip]=\"'Clear'|translate\"><mat-icon>search_off</mat-icon></button>\r\n</mat-toolbar>\r\n<mat-progress-bar [mode]=\"loading ? 'buffer' : 'indeterminate'\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n<bizdoc-none *ngIf=\"loading\" title=\"SettingThingsUp\" [subtitle]=\"PleaseWait\" icon=\"architecture\"></bizdoc-none>\r\n<div>\r\n  <section *ngFor=\"let s of sections | filterBy:'hide': false: searchBy\">\r\n    <h2 class=\"mat-h2\">{{s.title}}</h2>\r\n    <!--<hr />-->\r\n    <div class=\"elements\" cdkDropList cdkDropListOrientation=\"horizontal\" [cdkDropListData]=\"s.elements\" (cdkDropListDropped)=\"drop($event)\">\r\n      <mat-card *ngFor=\"let e of s.elements | filterBy:'hide': false: searchBy\" [class.disabled]=\"e.disabled\" cdkDrag cdkDragRootElement=\".mat-mdc-card-title\">\r\n        <!-- @item-->\r\n        <mat-card-header>\r\n          <mat-card-title>\r\n            {{e.title|localizedString}}\r\n            <span class=\"divider\"></span>\r\n            <mat-icon [bizdocTooltip]=\"e.help\" [bizdocTooltipDuration]=\"6000\" *ngIf=\"e.help\">help_outline</mat-icon>\r\n          </mat-card-title>\r\n          <mat-card-subtitle>\r\n            {{e.name}}\r\n          </mat-card-subtitle>\r\n        </mat-card-header>\r\n        <mat-card-content>\r\n          <ng-container *ngComponentOutlet=\"s.comp; injector: e.injector\"></ng-container>\r\n        </mat-card-content>\r\n        <mat-card-actions class=\"row\">\r\n          <button mat-icon-button (click)=\"copy(s, e)\" *ngIf=\"!e.copyOf\" [bizdocTooltip]=\"'Copy'|translate\"><mat-icon>file_copy</mat-icon></button>\r\n          <button mat-icon-button (click)=\"remove(s, e)\" *ngIf=\"e.draft || e.empty\" [bizdocTooltip]=\"'Discard'|translate\"><mat-icon>delete</mat-icon></button>\r\n          <button mat-icon-button (click)=\"toggleDisabled(e)\" [bizdocTooltip]=\"(e.disabled ? 'Enable' : 'Disable')|translate\"><mat-icon>{{e.disabled ? 'visibility' : 'visibility_off'}}</mat-icon></button>\r\n          <span class=\"divider\"></span>\r\n          <button mat-icon-button (click)=\"edit(s, e)\" [bizdocTooltip]=\"'Settings'|translate\"><mat-icon>settings</mat-icon></button>\r\n        </mat-card-actions>\r\n      </mat-card>\r\n      <div class=\"add-element\" matRipple (click)=\"add(s, menuTrigger, $event)\" *ngIf=\"s.templates?.length\">\r\n        <span [matMenuTriggerFor]=\"templateMenu\" #menuTrigger=\"matMenuTrigger\"></span>\r\n        <button mat-icon-button><mat-icon [bizdocTooltip]=\"'New'|translate\" disableRipple=\"true\">add</mat-icon></button>\r\n        <mat-menu #templateMenu>\r\n          <button mat-menu-item *ngFor=\"let t of s.templates\" (click)=\"create(s, t)\">\r\n            <span *ngIf=\"t.family\">\r\n              {{t.family}}\r\n              &nbsp;-&nbsp;\r\n            </span>\r\n            <span>\r\n              {{t.title}}\r\n            </span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</div>\r\n", styles: [":host{outline:none}section h2{margin:10px;top:0;position:sticky}section .elements{display:flex;flex-wrap:wrap}section .elements .disabled{opacity:.5;background-color:transparent}section .add-element{border:2px dashed gray;min-width:126px;min-height:126px;border-radius:3px;margin:1px 0 6px;text-align:center}section .add-element button{top:50%;transform:translateY(-50%)}:host ::ng-deep .mat-mdc-card{margin:6px;display:flex;flex-direction:column}:host ::ng-deep .mat-mdc-card button{opacity:.1}:host ::ng-deep .mat-mdc-card:hover button{opacity:1}:host ::ng-deep .mat-mdc-card-header-text{width:100%}:host ::ng-deep .mat-mdc-card-title{display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;align-items:center}.divider{min-width:3px}:host ::ng-deep .mat-mdc-card-content{flex:1}\n"] }]
         }], ctorParameters: () => [{ type: PanesRouter }, { type: TranslateService }, { type: PromptService }, { type: SessionService }, { type: i0.ElementRef }, { type: i0.Injector }, { type: UtilityRef }], propDecorators: { handleKeyboardEvent: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]