@bizdoc/core 2.3.35 → 2.3.39

package/fesm2022/bizdoc-core.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Component, Pipe, Directive, Injector, TemplateRef, ViewContainerRef, ViewChild, Input, Optional, Self, Output, HostBinding, EventEmitter, ElementRef, HostListener, NgModule, ViewChildren, Host, SkipSelf, ViewEncapsulation, APP_INITIALIZER, ContentChild, ContentChildren } from '@angular/core';
+import { InjectionToken, Injectable, Inject, Component, Pipe, Directive, Injector, TemplateRef, ViewContainerRef, ViewChild, Input, Optional, Self, Output, HostBinding, EventEmitter, ElementRef, HostListener, NgModule, ViewChildren, Host, SkipSelf, ViewEncapsulation, ContentChild, ContentChildren, APP_INITIALIZER } from '@angular/core';
 import { Subject, forkJoin, Observable, firstValueFrom, of, fromEvent, BehaviorSubject, merge, takeUntil as takeUntil$1, shareReplay as shareReplay$1, map as map$1, takeWhile, interval, filter as filter$1, from, switchMap as switchMap$1, isObservable, catchError as catchError$1, startWith as startWith$1, EMPTY, debounceTime as debounceTime$1 } from 'rxjs';
 import { shareReplay, map, tap, filter, takeUntil, debounceTime, switchMap, startWith, catchError, first, take, finalize } from 'rxjs/operators';
 import * as i4 from '@angular/material/chips';
@@ -141,7 +141,7 @@ import * as i3$4 from '@syncfusion/ej2-angular-inputs';
 import { SignatureModule } from '@syncfusion/ej2-angular-inputs';
 import { LinearGaugeModule, AnnotationsService, GaugeTooltipService } from '@syncfusion/ej2-angular-lineargauge';
 import * as i11$2 from '@syncfusion/ej2-angular-charts';
-import { ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule, RangeTooltipService, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService, SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService, StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService, BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService, CrosshairService, CategoryService, DateTimeService, LogarithmicService, LegendService, ZoomService, DataLabelService, SelectionService, ChartAnnotationService, WaterfallSeriesService, RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService, MultiLevelLabelService, ParetoSeriesService, TooltipRenderService, SparklineTooltipService, SplineRangeAreaSeriesService, AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService, AreaSeries, LineSeries, DateTime, RangeTooltip, RangeNavigator, SparklineTooltip, Sparkline, PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection, AccumulationChart as AccumulationChart$1, Category, Tooltip as Tooltip$1, Legend, Selection, Zoom, Crosshair, DataLabel, BarSeries, BubbleSeries, ColumnSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, Chart as Chart$1, ChartComponent } from '@syncfusion/ej2-angular-charts';
+import { ChartModule, AccumulationChartModule, SparklineModule, RangeNavigatorModule, RangeTooltipService, AccumulationDistributionIndicatorService, FunnelSeriesService, StackingStepAreaSeriesService, PieSeriesService, PyramidSeriesService, LineSeriesService, ScatterSeriesService, ColumnSeriesService, SplineSeriesService, SplineAreaSeriesService, StripLineService, AreaSeriesService, ScrollBarService, StepLineSeriesService, StepAreaSeriesService, StackingColumnSeriesService, StackingLineSeriesService, StackingAreaSeriesService, BarSeriesService, StackingBarSeriesService, RangeColumnSeriesService, BubbleSeriesService, TooltipService, CrosshairService, CategoryService, DateTimeService, LogarithmicService, LegendService, ZoomService, DataLabelService, SelectionService, ChartAnnotationService, WaterfallSeriesService, RangeAreaSeriesService, PolarSeriesService, RadarSeriesService, DateTimeCategoryService, MultiLevelLabelService, ParetoSeriesService, TooltipRenderService, SparklineTooltipService, SplineRangeAreaSeriesService, AccumulationAnnotationService, AccumulationDataLabelService, AccumulationLegendService, AccumulationSelectionService, AccumulationTooltipService, AreaSeries, LineSeries, DateTime, RangeTooltip, RangeNavigator, SparklineTooltip, Sparkline, PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection, AccumulationChart as AccumulationChart$1, StripLine, BoxAndWhiskerSeries, Category, Tooltip as Tooltip$1, Legend, Selection, Zoom, Crosshair, DataLabel, BarSeries, BubbleSeries, ColumnSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, ChartAnnotation, Chart as Chart$1, ChartComponent } from '@syncfusion/ej2-angular-charts';
 import * as i8$3 from '@syncfusion/ej2-angular-grids';
 import { GridModule, PagerModule, ExcelExportService, AggregateService, FreezeService, GroupService, PageService, ResizeService, SortService, SelectionService as SelectionService$1, ExcelExport, Sort, Group, Page, Freeze, Selection as Selection$1, Aggregate, Grid as Grid$1, GridComponent } from '@syncfusion/ej2-angular-grids';
 import { Annotations, GaugeTooltip, Legend as Legend$1, CircularGauge, CircularGaugeModule, AnnotationsService as AnnotationsService$1, GaugeTooltipService as GaugeTooltipService$1, LegendService as LegendService$1 } from '@syncfusion/ej2-angular-circulargauge';
@@ -794,7 +794,10 @@ const SwapAnimation = [
     transition(':decrement', [style({ transform: 'translateX(-100px)' }), animate('200ms', style({ transform: 'translateX(0)' }))])
 ];
 const VerticalSwapAnimation = [
-    transition(':increment', [style({ transform: 'translateY(50px)' }), animate('200ms', style({ transform: 'translateY(0)' }))]),
+    transition(':increment', [style({
+            transform: 'translateY(50px)',
+            overflow: 'hidden'
+        }), animate('200ms', style({ transform: 'translateY(0)' }))]),
     transition(':decrement', [style({ transform: 'translateY(-50px)' }), animate('200ms', style({ transform: 'translateY(0)' }))])
 ];
 const matrixAnimation = trigger('table', [transition('void=>*', [
@@ -1274,7 +1277,7 @@ const STRINGS = {
         DeleteFileAsk: 'Are you sure you want to delete this attachment?',
         DeleteCommentAsk: 'Are you sure you want to delete this comment?',
         GrantAccess: 'Grant Access',
-        GrantTip: 'User(s) may view and take actions on your behalf.',
+        GrantTip: 'May view and take actions on your behalf.',
         OutOfOfficeTip: 'Redirect mail to another user on your absence.',
         Timeline: 'Timeline',
         Theme: 'Theme',
@@ -1436,7 +1439,9 @@ const STRINGS = {
         Duration: 'Duration',
         DurationTime: 'In {0} duration',
         Standard: 'Standard',
+        StandardValue: 'Standard: {0}',
         Average: 'Average',
+        AverageValue: 'Average: {0}',
         Open: 'Open',
         SoundOn: 'Sound on',
         SoundOff: 'Sound off',
@@ -1911,6 +1916,8 @@ const STRINGS = {
         Duration: 'משך',
         DurationTime: 'משך {0}',
         Standard: 'תקן',
+        StandardValue: 'תקן: {0}',
+        AverageValue: 'ממוצע: {0}',
         Average: 'ממוצע',
         Awaiting: 'ממתין ל{0}',
         Escalated: 'הועבר',
@@ -3134,11 +3141,11 @@ class OptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: OptionsComponent, deps: [{ token: OPTION_PANEL, optional: true }, { token: i1$1.OverlayRef, optional: true }, { token: i1$2.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: SessionService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: OptionsComponent, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<!--<bizdov-v-tabs [initialName]=\"sectionName\">\n  <tab name=\"notifications\" title=\"Notifications\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n        <div class=\"row\">\n          <span class=\"divider\"></span>\n          <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\n        </div>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"emails\" title=\"Emails\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.emails\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"out_of_office\" title=\"OutOfOffice\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-form-field class=\"flex\">\n          <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                            (optionSelected)=\"oooSelected($event)\">\n            @for (u of susers$ | async; track u) {\n            <mat-option [value]=\"u\">\n              <span>{{u.name}}</span>\n            </mat-option>\n            }\n          </mat-autocomplete>\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{'Dates'|translate}}</mat-label>\n          <mat-date-range-input [rangePicker]=\"dates\">\n            <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n            <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n          </mat-date-range-input>\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"grant_access\" title=\"GrantAccess\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <mat-form-field>\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n            @for (u of form.value.grantAccess.users || []; track u) {\n            <mat-chip-row (removed)=\"removeGrant(u)\">\n              {{u | userName | async}}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n            }\n          </mat-chip-grid>\n          <input [formControl]=\"grantUsers\" placeholder=\"{{'Users'| translate}}\"\n                 #grantInput\n                 [matAutocomplete]=\"grantAuto\"\n                 [matChipInputFor]=\"grantList\"\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n            @for (u of gusers$ | async; track u) {\n            <mat-option [value]=\"u.id\">\n              {{u.name}}\n              @if (u.email) {\n              <span>&nbsp; - {{u.email}}</span>\n              }\n            </mat-option>\n            }\n          </mat-autocomplete>\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"preferences\" title=\"Preferences\">\n    <ng-template>\n      <div class=\"column\">\n        <mat-form-field>\n          <mat-chip-grid #chips>\n            @for (item of form.value.tags; track item) {\n            <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n              {{item}}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n            }\n          </mat-chip-grid>\n          <input [placeholder]=\"'Tags'|translate\"\n                 [matChipInputFor]=\"chips\"\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                 [matChipInputAddOnBlur]=\"true\"\n                 (matChipInputTokenEnd)=\"addTag($event)\">\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n</bizdov-v-tabs>-->\n<div class=\"row\">\n  <mat-nav-list class=\"nav-list\">\n    <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\n      <span matListItemTitle>{{'Notifications' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\n      <span matListItemTitle>{{'Emails' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\n      <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\n      <span matListItemTitle>{{'GrantAccess' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\n      <span matListItemTitle>{{'Preferences' | translate}}</span>\n    </mat-list-item>\n  </mat-nav-list>\n  <div class=\"separator\"></div>\n  <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\n    <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\n  </form>\n</div>\n<!--preferences-->\n<ng-template #preferencesTmpl>\n  <div class=\"column\">\n    <mat-form-field>\n      <mat-chip-grid #chips>\n        @for (item of form.value.tags; track item) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n          {{item}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [placeholder]=\"'Tags'|translate\"\n             [matChipInputFor]=\"chips\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n             [matChipInputAddOnBlur]=\"true\"\n             (matChipInputTokenEnd)=\"addTag($event)\">\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--notifications-->\n<ng-template #notificationsTmpl>\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n    <div class=\"row\">\n      <span class=\"divider\"></span>\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\n    </div>\n  </div>\n</ng-template>\n<!--emails-->\n<ng-template #emailsTmpl>\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n  </div>\n</ng-template>\n<!--ooo-->\n<ng-template #oooTmpl>\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field class=\"flex\">\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                        (optionSelected)=\"oooSelected($event)\">\n        @for (u of susers$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{'Dates'|translate}}</mat-label>\n      <mat-date-range-input [rangePicker]=\"dates\">\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--grantAccess-->\n<ng-template #grantAccessTmpl>\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <mat-form-field>\n      <mat-label>{{'Associates'| translate}}</mat-label>\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n        @for (u of form.value.grantAccess.users || []; track u) {\n        <mat-chip-row (removed)=\"removeGrant(u)\">\n          {{u | userName | async}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [formControl]=\"grantUserIds\"\n             #grantInput\n             [matAutocomplete]=\"grantAuto\"\n             [matChipInputFor]=\"grantList\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n        @for (u of gusers$ | async; track u.id) {\n        <mat-option [value]=\"u.id\">\n          {{u.name}}\n          @if (u.email) {\n          <span>&nbsp; - {{u.email}}</span>\n          }\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [":host{max-width:80vw;min-width:420px}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i4$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: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.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: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: 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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: OptionsComponent, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, viewQueries: [{ propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<!--<bizdoc-v-tabs [initialName]=\"sectionName\">\n  <tab name=\"notifications\" title=\"Notifications\">\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n      <br />\n      <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n      <div class=\"row\">\n        <span class=\"divider\"></span>\n        <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\n      </div>\n    </div>\n  </tab>\n  <tab name=\"emails\" title=\"Emails\">\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n      <br />\n      <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n    </div>\n  </tab>\n  <tab name=\"out_of_office\" title=\"OutOfOffice\">\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n      <br />\n      <mat-form-field class=\"flex\">\n        <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n               [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                          (optionSelected)=\"oooSelected($event)\">\n          @for (u of susers$ | async; track u.id) {\n          <mat-option [value]=\"u\">\n            <span>{{u.name}}</span>\n          </mat-option>\n          }\n        </mat-autocomplete>\n        <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>{{'Dates'|translate}}</mat-label>\n        <mat-date-range-input [rangePicker]=\"dates\">\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n        </mat-date-range-input>\n        <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n        <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n      </mat-form-field>\n    </div>\n  </tab>\n  <tab name=\"grant_access\" title=\"GrantAccess\">\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n      <mat-form-field>\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n          @for (u of form.value.grantAccess.users || []; track u.id) {\n          <mat-chip-row (removed)=\"removeGrant(u)\">\n            {{u | userName | async}}\n            <mat-icon matChipRemove>cancel</mat-icon>\n          </mat-chip-row>\n          }\n        </mat-chip-grid>\n        <input [formControl]=\"grantUserIds\" placeholder=\"{{'Users'| translate}}\"\n               #grantInput\n               [matAutocomplete]=\"grantAuto\"\n               [matChipInputFor]=\"grantList\"\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n          @for (u of gusers$ | async; track u.id) {\n          <mat-option [value]=\"u.id\">\n            {{u.name}}\n            @if (u.email) {\n            <span>&nbsp; - {{u.email}}</span>\n            }\n          </mat-option>\n          }\n        </mat-autocomplete>\n        <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n      </mat-form-field>\n    </div>\n  </tab>\n  <tab name=\"preferences\" title=\"Preferences\">\n    <div class=\"column\">\n      <mat-form-field>\n        <mat-chip-grid #chips>\n          @for (item of form.value.tags; track item) {\n          <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n            {{item}}\n            <mat-icon matChipRemove>cancel</mat-icon>\n          </mat-chip-row>\n          }\n        </mat-chip-grid>\n        <input [placeholder]=\"'Tags'|translate\"\n               [matChipInputFor]=\"chips\"\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n               [matChipInputAddOnBlur]=\"true\"\n               (matChipInputTokenEnd)=\"addTag($event)\">\n      </mat-form-field>\n    </div>\n  </tab>\n</bizdoc-v-tabs>-->\n<div class=\"row\">\n  <mat-nav-list class=\"nav-list\">\n    <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\n      <span matListItemTitle>{{'Notifications' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\n      <span matListItemTitle>{{'Emails' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\n      <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\n      <span matListItemTitle>{{'GrantAccess' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\n      <span matListItemTitle>{{'Preferences' | translate}}</span>\n    </mat-list-item>\n  </mat-nav-list>\n  <div class=\"separator\"></div>\n  <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\n    <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\n  </form>\n</div>\n<!--preferences-->\n<ng-template #preferencesTmpl>\n  <div class=\"column\">\n    <mat-form-field>\n      <mat-label>{{'Tags'|translate}}</mat-label>\n      <mat-chip-grid #chips>\n        @for (item of form.value.tags; track item) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n          {{item}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [matChipInputFor]=\"chips\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n             [matChipInputAddOnBlur]=\"true\"\n             (matChipInputTokenEnd)=\"addTag($event)\">\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--notifications-->\n<ng-template #notificationsTmpl>\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n    <div class=\"row\">\n      <span class=\"divider\"></span>\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\n    </div>\n  </div>\n</ng-template>\n<!--emails-->\n<ng-template #emailsTmpl>\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n  </div>\n</ng-template>\n<!--ooo-->\n<ng-template #oooTmpl>\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field class=\"flex\">\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                        (optionSelected)=\"oooSelected($event)\">\n        @for (u of susers$ | async; track u.id) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{'Dates'|translate}}</mat-label>\n      <mat-date-range-input [rangePicker]=\"dates\">\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--grantAccess-->\n<ng-template #grantAccessTmpl>\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field>\n      <mat-label>{{'Associates'| translate}}</mat-label>\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n        @for (u of form.value.grantAccess.users || []; track u.id) {\n        <mat-chip-row (removed)=\"removeGrant(u)\">\n          {{u | userName | async}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [formControl]=\"grantUserIds\"\n             #grantInput\n             [matAutocomplete]=\"grantAuto\"\n             [matChipInputFor]=\"grantList\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n        @for (u of gusers$ | async; track u.id) {\n        <mat-option [value]=\"u.id\">\n          {{u.name}}\n          @if (u.email) {\n          <span>&nbsp; - {{u.email}}</span>\n          }\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [":host{max-width:80vw;min-width:420px}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$3.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$3.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$3.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$3.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i4$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: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.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: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: 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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: OptionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<!--<bizdov-v-tabs [initialName]=\"sectionName\">\n  <tab name=\"notifications\" title=\"Notifications\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n        <div class=\"row\">\n          <span class=\"divider\"></span>\n          <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\n        </div>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"emails\" title=\"Emails\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.emails\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n        <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"out_of_office\" title=\"OutOfOffice\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <br />\n        <mat-form-field class=\"flex\">\n          <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n                 [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n          <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                            (optionSelected)=\"oooSelected($event)\">\n            @for (u of susers$ | async; track u) {\n            <mat-option [value]=\"u\">\n              <span>{{u.name}}</span>\n            </mat-option>\n            }\n          </mat-autocomplete>\n          <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n        </mat-form-field>\n        <mat-form-field>\n          <mat-label>{{'Dates'|translate}}</mat-label>\n          <mat-date-range-input [rangePicker]=\"dates\">\n            <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n            <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n          </mat-date-range-input>\n          <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n          <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"grant_access\" title=\"GrantAccess\">\n    <ng-template>\n      <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n        <mat-form-field>\n          <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n            @for (u of form.value.grantAccess.users || []; track u) {\n            <mat-chip-row (removed)=\"removeGrant(u)\">\n              {{u | userName | async}}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n            }\n          </mat-chip-grid>\n          <input [formControl]=\"grantUsers\" placeholder=\"{{'Users'| translate}}\"\n                 #grantInput\n                 [matAutocomplete]=\"grantAuto\"\n                 [matChipInputFor]=\"grantList\"\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n          <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n            @for (u of gusers$ | async; track u) {\n            <mat-option [value]=\"u.id\">\n              {{u.name}}\n              @if (u.email) {\n              <span>&nbsp; - {{u.email}}</span>\n              }\n            </mat-option>\n            }\n          </mat-autocomplete>\n          <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n  <tab name=\"preferences\" title=\"Preferences\">\n    <ng-template>\n      <div class=\"column\">\n        <mat-form-field>\n          <mat-chip-grid #chips>\n            @for (item of form.value.tags; track item) {\n            <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n              {{item}}\n              <mat-icon matChipRemove>cancel</mat-icon>\n            </mat-chip-row>\n            }\n          </mat-chip-grid>\n          <input [placeholder]=\"'Tags'|translate\"\n                 [matChipInputFor]=\"chips\"\n                 [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                 [matChipInputAddOnBlur]=\"true\"\n                 (matChipInputTokenEnd)=\"addTag($event)\">\n        </mat-form-field>\n      </div>\n    </ng-template>\n  </tab>\n</bizdov-v-tabs>-->\n<div class=\"row\">\n  <mat-nav-list class=\"nav-list\">\n    <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\n      <span matListItemTitle>{{'Notifications' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\n      <span matListItemTitle>{{'Emails' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\n      <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\n      <span matListItemTitle>{{'GrantAccess' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\n      <span matListItemTitle>{{'Preferences' | translate}}</span>\n    </mat-list-item>\n  </mat-nav-list>\n  <div class=\"separator\"></div>\n  <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\n    <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\n  </form>\n</div>\n<!--preferences-->\n<ng-template #preferencesTmpl>\n  <div class=\"column\">\n    <mat-form-field>\n      <mat-chip-grid #chips>\n        @for (item of form.value.tags; track item) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n          {{item}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [placeholder]=\"'Tags'|translate\"\n             [matChipInputFor]=\"chips\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n             [matChipInputAddOnBlur]=\"true\"\n             (matChipInputTokenEnd)=\"addTag($event)\">\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--notifications-->\n<ng-template #notificationsTmpl>\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n    <div class=\"row\">\n      <span class=\"divider\"></span>\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\n    </div>\n  </div>\n</ng-template>\n<!--emails-->\n<ng-template #emailsTmpl>\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n  </div>\n</ng-template>\n<!--ooo-->\n<ng-template #oooTmpl>\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field class=\"flex\">\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                        (optionSelected)=\"oooSelected($event)\">\n        @for (u of susers$ | async; track u) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{'Dates'|translate}}</mat-label>\n      <mat-date-range-input [rangePicker]=\"dates\">\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--grantAccess-->\n<ng-template #grantAccessTmpl>\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <mat-form-field>\n      <mat-label>{{'Associates'| translate}}</mat-label>\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n        @for (u of form.value.grantAccess.users || []; track u) {\n        <mat-chip-row (removed)=\"removeGrant(u)\">\n          {{u | userName | async}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [formControl]=\"grantUserIds\"\n             #grantInput\n             [matAutocomplete]=\"grantAuto\"\n             [matChipInputFor]=\"grantList\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n        @for (u of gusers$ | async; track u.id) {\n        <mat-option [value]=\"u.id\">\n          {{u.name}}\n          @if (u.email) {\n          <span>&nbsp; - {{u.email}}</span>\n          }\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [":host{max-width:80vw;min-width:420px}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"] }]
+            args: [{ selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<!--<bizdoc-v-tabs [initialName]=\"sectionName\">\n  <tab name=\"notifications\" title=\"Notifications\">\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n      <br />\n      <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n      <div class=\"row\">\n        <span class=\"divider\"></span>\n        <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\n      </div>\n    </div>\n  </tab>\n  <tab name=\"emails\" title=\"Emails\">\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n      <br />\n      <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n      <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n    </div>\n  </tab>\n  <tab name=\"out_of_office\" title=\"OutOfOffice\">\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n      <br />\n      <mat-form-field class=\"flex\">\n        <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n               [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n        <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                          (optionSelected)=\"oooSelected($event)\">\n          @for (u of susers$ | async; track u.id) {\n          <mat-option [value]=\"u\">\n            <span>{{u.name}}</span>\n          </mat-option>\n          }\n        </mat-autocomplete>\n        <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n      </mat-form-field>\n      <mat-form-field>\n        <mat-label>{{'Dates'|translate}}</mat-label>\n        <mat-date-range-input [rangePicker]=\"dates\">\n          <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n          <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n        </mat-date-range-input>\n        <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n        <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n      </mat-form-field>\n    </div>\n  </tab>\n  <tab name=\"grant_access\" title=\"GrantAccess\">\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n      <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n      <mat-form-field>\n        <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n          @for (u of form.value.grantAccess.users || []; track u.id) {\n          <mat-chip-row (removed)=\"removeGrant(u)\">\n            {{u | userName | async}}\n            <mat-icon matChipRemove>cancel</mat-icon>\n          </mat-chip-row>\n          }\n        </mat-chip-grid>\n        <input [formControl]=\"grantUserIds\" placeholder=\"{{'Users'| translate}}\"\n               #grantInput\n               [matAutocomplete]=\"grantAuto\"\n               [matChipInputFor]=\"grantList\"\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n        <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n          @for (u of gusers$ | async; track u.id) {\n          <mat-option [value]=\"u.id\">\n            {{u.name}}\n            @if (u.email) {\n            <span>&nbsp; - {{u.email}}</span>\n            }\n          </mat-option>\n          }\n        </mat-autocomplete>\n        <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n      </mat-form-field>\n    </div>\n  </tab>\n  <tab name=\"preferences\" title=\"Preferences\">\n    <div class=\"column\">\n      <mat-form-field>\n        <mat-chip-grid #chips>\n          @for (item of form.value.tags; track item) {\n          <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n            {{item}}\n            <mat-icon matChipRemove>cancel</mat-icon>\n          </mat-chip-row>\n          }\n        </mat-chip-grid>\n        <input [placeholder]=\"'Tags'|translate\"\n               [matChipInputFor]=\"chips\"\n               [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n               [matChipInputAddOnBlur]=\"true\"\n               (matChipInputTokenEnd)=\"addTag($event)\">\n      </mat-form-field>\n    </div>\n  </tab>\n</bizdoc-v-tabs>-->\n<div class=\"row\">\n  <mat-nav-list class=\"nav-list\">\n    <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\n      <span matListItemTitle>{{'Notifications' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\n      <span matListItemTitle>{{'Emails' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\n      <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\n      <span matListItemTitle>{{'GrantAccess' | translate}}</span>\n    </mat-list-item>\n    <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\n      <span matListItemTitle>{{'Preferences' | translate}}</span>\n    </mat-list-item>\n  </mat-nav-list>\n  <div class=\"separator\"></div>\n  <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\n    <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\n  </form>\n</div>\n<!--preferences-->\n<ng-template #preferencesTmpl>\n  <div class=\"column\">\n    <mat-form-field>\n      <mat-label>{{'Tags'|translate}}</mat-label>\n      <mat-chip-grid #chips>\n        @for (item of form.value.tags; track item) {\n        <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\n          {{item}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [matChipInputFor]=\"chips\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n             [matChipInputAddOnBlur]=\"true\"\n             (matChipInputTokenEnd)=\"addTag($event)\">\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--notifications-->\n<ng-template #notificationsTmpl>\n  <div [formGroup]=\"form.controls.notifications\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"likes\" [style.display]=\"voating?'':'none'\">{{'LikedComment' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-slide-toggle>\n    <div class=\"row\">\n      <span class=\"divider\"></span>\n      <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\n    </div>\n  </div>\n</ng-template>\n<!--emails-->\n<ng-template #emailsTmpl>\n  <div [formGroup]=\"form.controls.emails\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-slide-toggle formControlName=\"mail\">{{'Mails' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"chat\">{{'Conversations' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-slide-toggle>\n    <mat-slide-toggle formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-slide-toggle>\n  </div>\n</ng-template>\n<!--ooo-->\n<ng-template #oooTmpl>\n  <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field class=\"flex\">\n      <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\n             [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\n      <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\n                        (optionSelected)=\"oooSelected($event)\">\n        @for (u of susers$ | async; track u.id) {\n        <mat-option [value]=\"u\">\n          <span>{{u.name}}</span>\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\n    </mat-form-field>\n    <mat-form-field>\n      <mat-label>{{'Dates'|translate}}</mat-label>\n      <mat-date-range-input [rangePicker]=\"dates\">\n        <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\n        <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\n      </mat-date-range-input>\n      <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\n      <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\n    </mat-form-field>\n  </div>\n</ng-template>\n<!--grantAccess-->\n<ng-template #grantAccessTmpl>\n  <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\n    <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\n    <br />\n    <mat-form-field>\n      <mat-label>{{'Associates'| translate}}</mat-label>\n      <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\n        @for (u of form.value.grantAccess.users || []; track u.id) {\n        <mat-chip-row (removed)=\"removeGrant(u)\">\n          {{u | userName | async}}\n          <mat-icon matChipRemove>cancel</mat-icon>\n        </mat-chip-row>\n        }\n      </mat-chip-grid>\n      <input [formControl]=\"grantUserIds\"\n             #grantInput\n             [matAutocomplete]=\"grantAuto\"\n             [matChipInputFor]=\"grantList\"\n             [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n      <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\n        @for (u of gusers$ | async; track u.id) {\n        <mat-option [value]=\"u.id\">\n          {{u.name}}\n          @if (u.email) {\n          <span>&nbsp; - {{u.email}}</span>\n          }\n        </mat-option>\n        }\n      </mat-autocomplete>\n      <mat-hint>{{'GrantTip' | translate}}</mat-hint>\n    </mat-form-field>\n  </div>\n</ng-template>\n", styles: [":host{max-width:80vw;min-width:420px}.separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [OPTION_PANEL]
@@ -7598,11 +7605,11 @@ class CubeFilterComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CubeFilterComponent, deps: [{ token: CubeService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: { cube: "cube", exclude: "exclude", include: "include", axes: "axes" }, outputs: { axesChange: "axesChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column\">\n  @for (a of visibleAxes; track a) {\n    <mat-form-field [attr.data-help]=\"'axis-'+a.name\">\n      @switch (a.selectionMode) {\n        @case ('Pattern') {\n          <input matInput autocomplete=\"off\"\n            [pattern]=\"pattern\" autofocus\n            [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\n            @if (form.controls[a.name].invalid) {\n              <mat-error>{{'AxisPatternErr' |translate}}</mat-error>\n            }\n          }\n          @case ('Search') {\n            <input matInput autocomplete=\"off\" type=\"search\"\n              [matAutocomplete]=\"segment\" #inp\n              [placeholder]=\"a.title||a.name\" />\n              <mat-autocomplete #segment [displayWith]=\"display\"\n                (optionSelected)=\"change(a.name, $event)\">\n                @for (r of sources[a.name] | async | filterBy : 'value' : inp.value | slice:0:50; track r) {\n                  <mat-option [value]=\"r\">{{r.value}}</mat-option>\n                }\n              </mat-autocomplete>\n              @if (inp.value) {\n                <button mat-icon-button matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\n              }\n              @if (form.controls[a.name].invalid) {\n                <mat-error>{{'AxisPatternErr' |translate}}</mat-error>\n              }\n            }\n            @default {\n              <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\">\n                @if (a.selectionMode !== 'Multiple') {\n                  <mat-option>{{'All' | translate}}</mat-option>\n                }\n                @for (r of sources[a.name] | async; track r) {\n                  <mat-option [value]=\"r.key\">{{r.value}}</mat-option>\n                }\n              </mat-select>\n            }\n          }\n        </mat-form-field>\n      }\n    </form>\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$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: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterPipe, name: "filterBy" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: { cube: "cube", exclude: "exclude", include: "include", axes: "axes" }, outputs: { axesChange: "axesChange" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column gap\">\n  @for (a of visibleAxes; track a) {\n  <mat-form-field [attr.data-help]=\"'axis-'+a.name\" subscriptSizing=\"dynamic\">\n    @switch (a.selectionMode) {\n    @case ('Pattern') {\n    <input matInput autocomplete=\"off\"\n           [pattern]=\"pattern\" autofocus\n           [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\n    @if (form.controls[a.name].invalid) {\n    <mat-error>{{'AxisPatternErr' |translate}}</mat-error>\n    }\n    }\n    @case ('Search') {\n    <input matInput autocomplete=\"off\" type=\"search\"\n           [matAutocomplete]=\"segment\" #inp\n           [placeholder]=\"a.title||a.name\" />\n    <mat-autocomplete #segment [displayWith]=\"display\"\n                      (optionSelected)=\"change(a.name, $event)\">\n      @for (r of sources[a.name] | async | filterBy : 'value' : inp.value | slice:0:50; track r) {\n      <mat-option [value]=\"r\">{{r.value}}</mat-option>\n      }\n    </mat-autocomplete>\n    @if (inp.value) {\n    <button mat-icon-button matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\n    }\n    @if (form.controls[a.name].invalid) {\n    <mat-error>{{'AxisPatternErr' |translate}}</mat-error>\n    }\n    }\n    @default {\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\">\n      @if (a.selectionMode !== 'Multiple') {\n      <mat-option>{{'All' | translate}}</mat-option>\n      }\n      @for (r of sources[a.name] | async; track r) {\n      <mat-option [value]=\"r.key\">{{r.value}}</mat-option>\n      }\n    </mat-select>\n    }\n    }\n  </mat-form-field>\n  }\n</form>\n", styles: ["form{padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4$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: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.SlicePipe, name: "slice" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterPipe, name: "filterBy" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: CubeFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-cube-filter', template: "<form [formGroup]=\"form\" class=\"column\">\n  @for (a of visibleAxes; track a) {\n    <mat-form-field [attr.data-help]=\"'axis-'+a.name\">\n      @switch (a.selectionMode) {\n        @case ('Pattern') {\n          <input matInput autocomplete=\"off\"\n            [pattern]=\"pattern\" autofocus\n            [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\n            @if (form.controls[a.name].invalid) {\n              <mat-error>{{'AxisPatternErr' |translate}}</mat-error>\n            }\n          }\n          @case ('Search') {\n            <input matInput autocomplete=\"off\" type=\"search\"\n              [matAutocomplete]=\"segment\" #inp\n              [placeholder]=\"a.title||a.name\" />\n              <mat-autocomplete #segment [displayWith]=\"display\"\n                (optionSelected)=\"change(a.name, $event)\">\n                @for (r of sources[a.name] | async | filterBy : 'value' : inp.value | slice:0:50; track r) {\n                  <mat-option [value]=\"r\">{{r.value}}</mat-option>\n                }\n              </mat-autocomplete>\n              @if (inp.value) {\n                <button mat-icon-button matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\n              }\n              @if (form.controls[a.name].invalid) {\n                <mat-error>{{'AxisPatternErr' |translate}}</mat-error>\n              }\n            }\n            @default {\n              <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\">\n                @if (a.selectionMode !== 'Multiple') {\n                  <mat-option>{{'All' | translate}}</mat-option>\n                }\n                @for (r of sources[a.name] | async; track r) {\n                  <mat-option [value]=\"r.key\">{{r.value}}</mat-option>\n                }\n              </mat-select>\n            }\n          }\n        </mat-form-field>\n      }\n    </form>\n", styles: ["form{padding:8px}\n"] }]
+            args: [{ selector: 'bizdoc-cube-filter', template: "<form [formGroup]=\"form\" class=\"column gap\">\n  @for (a of visibleAxes; track a) {\n  <mat-form-field [attr.data-help]=\"'axis-'+a.name\" subscriptSizing=\"dynamic\">\n    @switch (a.selectionMode) {\n    @case ('Pattern') {\n    <input matInput autocomplete=\"off\"\n           [pattern]=\"pattern\" autofocus\n           [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" />\n    @if (form.controls[a.name].invalid) {\n    <mat-error>{{'AxisPatternErr' |translate}}</mat-error>\n    }\n    }\n    @case ('Search') {\n    <input matInput autocomplete=\"off\" type=\"search\"\n           [matAutocomplete]=\"segment\" #inp\n           [placeholder]=\"a.title||a.name\" />\n    <mat-autocomplete #segment [displayWith]=\"display\"\n                      (optionSelected)=\"change(a.name, $event)\">\n      @for (r of sources[a.name] | async | filterBy : 'value' : inp.value | slice:0:50; track r) {\n      <mat-option [value]=\"r\">{{r.value}}</mat-option>\n      }\n    </mat-autocomplete>\n    @if (inp.value) {\n    <button mat-icon-button matSuffix aria-label=\"\" (click)=\"inp.value = ''; form.controls[a.name].setValue(null)\"><mat-icon>close</mat-icon></button>\n    }\n    @if (form.controls[a.name].invalid) {\n    <mat-error>{{'AxisPatternErr' |translate}}</mat-error>\n    }\n    }\n    @default {\n    <mat-select [formControlName]=\"a.name\" [placeholder]=\"a.title||a.name\" [multiple]=\"a.selectionMode === 'Multiple'\">\n      @if (a.selectionMode !== 'Multiple') {\n      <mat-option>{{'All' | translate}}</mat-option>\n      }\n      @for (r of sources[a.name] | async; track r) {\n      <mat-option [value]=\"r.key\">{{r.value}}</mat-option>\n      }\n    </mat-select>\n    }\n    }\n  </mat-form-field>\n  }\n</form>\n", styles: ["form{padding:8px}\n"] }]
         }], ctorParameters: () => [{ type: CubeService }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.FormBuilder }, { type: SessionService }], propDecorators: { cube: [{
                 type: Input
             }], exclude: [{
@@ -8832,11 +8839,11 @@ class ExpandedItemComponent {
         this._typingTask && clearTimeout(this._typingTask);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExpandedItemComponent, deps: [{ token: PromptService }, { token: ChatInfo }, { token: AccountService }, { token: MailboxService }, { token: SessionService }, { token: i1$3.Directionality }, { token: i2$2.MatDialog }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: { model: "model" }, outputs: { sent: "sent" }, ngImport: i0, template: "@if (model.summary) {\n  <div class=\"summary\" [innerHTML]=\"model.summary\">\n  </div>\n}\n<div>\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\n</div>\n<div class=\"row\">\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\n  <span class=\"divider\"></span>\n  @for (a of actions; track a) {\n    @if (a.icon) {\n      <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\n        <mat-icon>{{a.icon}}</mat-icon>\n      </button>\n    }\n  }\n</div>\n<div class=\"row\">\n  <div class=\"mat-small row\">\n    <span>{{model.stateId | state : 'past' }}</span>\n    &nbsp;\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\n    &nbsp;\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\n  </div>\n  <span class=\"divider\"></span>\n  <div class=\"center center\">\n    @if (typing) {\n      <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\n    }\n    @if (model.comments.length) {\n      <div class=\"mat-small\">\n        @if (!newComments) {\n          <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\n        } @else {\n          <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\n        }\n      </div>\n    }\n  </div>\n  @if (model.tags) {\n    <mat-chip-set>\n      @for (tag of model.tags; track tag) {\n        <mat-chip [highlighted]=\"true\" [disableRipple]=\"true\">{{tag}}</mat-chip>\n      }\n    </mat-chip-set>\n  }\n</div>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"], dependencies: [{ kind: "component", type: i4.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: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i8.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: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { kind: "component", type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: StatePipe, name: "state" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: { model: "model" }, outputs: { sent: "sent" }, ngImport: i0, template: "@if (model.summary) {\n  <div class=\"summary\" [innerHTML]=\"model.summary\">\n  </div>\n}\n<div>\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\n</div>\n<div class=\"row\">\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\n  <span class=\"divider\"></span>\n  @for (a of actions; track a) {\n    @if (a.icon) {\n      <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\n        <mat-icon>{{a.icon}}</mat-icon>\n      </button>\n    }\n  }\n</div>\n<div class=\"row\">\n  <div class=\"mat-small row\">\n    <span>{{model.stateId | state : 'past' }}</span>\n    &nbsp;\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\n    &nbsp;\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\n  </div>\n  <span class=\"divider\"></span>\n  <div class=\"center center\">\n    @if (typing) {\n      <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\n    }\n    @if (model.comments.length) {\n      <div class=\"mat-small\">\n        @if (!newComments) {\n          <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\n        } @else {\n          <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\n        }\n      </div>\n    }\n  </div>\n  @if (model.tags) {\n    <mat-chip-set>\n      @for (tag of model.tags; track tag) {\n        <mat-chip [disabled]=\"true\">{{tag}}</mat-chip>\n      }\n    </mat-chip-set>\n  }\n</div>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"], dependencies: [{ kind: "component", type: i4.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: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i8.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: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { kind: "component", type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: StatePipe, name: "state" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: ExpandedItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-expanded-item', template: "@if (model.summary) {\n  <div class=\"summary\" [innerHTML]=\"model.summary\">\n  </div>\n}\n<div>\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\n</div>\n<div class=\"row\">\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\n  <span class=\"divider\"></span>\n  @for (a of actions; track a) {\n    @if (a.icon) {\n      <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\n        <mat-icon>{{a.icon}}</mat-icon>\n      </button>\n    }\n  }\n</div>\n<div class=\"row\">\n  <div class=\"mat-small row\">\n    <span>{{model.stateId | state : 'past' }}</span>\n    &nbsp;\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\n    &nbsp;\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\n  </div>\n  <span class=\"divider\"></span>\n  <div class=\"center center\">\n    @if (typing) {\n      <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\n    }\n    @if (model.comments.length) {\n      <div class=\"mat-small\">\n        @if (!newComments) {\n          <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\n        } @else {\n          <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\n        }\n      </div>\n    }\n  </div>\n  @if (model.tags) {\n    <mat-chip-set>\n      @for (tag of model.tags; track tag) {\n        <mat-chip [highlighted]=\"true\" [disableRipple]=\"true\">{{tag}}</mat-chip>\n      }\n    </mat-chip-set>\n  }\n</div>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"] }]
+            args: [{ selector: 'bizdoc-expanded-item', template: "@if (model.summary) {\n  <div class=\"summary\" [innerHTML]=\"model.summary\">\n  </div>\n}\n<div>\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\n</div>\n<div class=\"row\">\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\n  <span class=\"divider\"></span>\n  @for (a of actions; track a) {\n    @if (a.icon) {\n      <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\n        <mat-icon>{{a.icon}}</mat-icon>\n      </button>\n    }\n  }\n</div>\n<div class=\"row\">\n  <div class=\"mat-small row\">\n    <span>{{model.stateId | state : 'past' }}</span>\n    &nbsp;\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\n    &nbsp;\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\n  </div>\n  <span class=\"divider\"></span>\n  <div class=\"center center\">\n    @if (typing) {\n      <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\n    }\n    @if (model.comments.length) {\n      <div class=\"mat-small\">\n        @if (!newComments) {\n          <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\n        } @else {\n          <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\n        }\n      </div>\n    }\n  </div>\n  @if (model.tags) {\n    <mat-chip-set>\n      @for (tag of model.tags; track tag) {\n        <mat-chip [disabled]=\"true\">{{tag}}</mat-chip>\n      }\n    </mat-chip-set>\n  }\n</div>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: ChatInfo }, { type: AccountService }, { type: MailboxService }, { type: SessionService }, { type: i1$3.Directionality }, { type: i2$2.MatDialog }, { type: TranslateService }, { type: HubService }], propDecorators: { model: [{
                 type: Input
             }], sent: [{
@@ -10157,11 +10164,11 @@ class BrowsePaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BrowsePaneComponent, deps: [{ token: PaneRef }, { token: SessionService }, { token: Popup }, { token: PanesRouter }, { token: i1$3.Directionality }, { token: TranslateService }, { token: i2$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: BrowsePaneComponent, selector: "bizdoc-browse.pane", host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }, { propertyName: "search", first: true, predicate: ["searchEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (!items.selection.isEmpty()) {\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\n  @if (items.isAllDraft()) {\n  <button mat-icon-button (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>\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\n  }\n  @if (items.sharedActions.length === 1) {\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\n    @if (items.sharedActions[0].icon) {\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\n    }{{'SendSelected' | translate : items.selection.selected.length}}\n  </button>\n  }\n  @else if (items.sharedActions.length > 1) {\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\n    {{'SendSelected'| translate : items.selection.selected.length }}\n  </button>\n  <mat-menu #action>\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\n    <mat-divider>\n    </mat-divider>\n    }\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\n      {{ a.title }}\n    </button>\n    }\n  </mat-menu>\n  }\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>\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>-->\n  } @else {\n  <!--<button mat-icon-button (click)=\"openSearch()\"\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\n    <mat-icon>search</mat-icon>\n  </button>\n  [@search]=\"searching\"\n  (@search.done)=\"searching && focus()\"-->\n  <input matInput\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\n         class=\"mat-body search-box\"\n         #searchEl\n         (keydown.escape)=\"clearSearch($event)\">\n  @if (contains.value) {\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\n  }\n  <span class=\"divider\"></span>\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>\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>-->\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\n", styles: [":host{min-width:540px;display:contents!important}\n"], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.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: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.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: "17.0.0", version: "17.2.1", type: BrowsePaneComponent, selector: "bizdoc-browse.pane", host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "items", first: true, predicate: BrowseItemsComponent, descendants: true, static: true }, { propertyName: "filterEl", first: true, predicate: ["filterEl"], descendants: true, read: ElementRef }, { propertyName: "search", first: true, predicate: ["searchEl"], descendants: true, read: ElementRef }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (!items.selection.isEmpty()) {\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\n  @if (items.isAllDraft()) {\n  <button mat-icon-button (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>\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\n  }\n  @if (items.sharedActions.length === 1) {\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\n    @if (items.sharedActions[0].icon) {\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\n    }{{'SendSelected' | translate : items.selection.selected.length}}\n  </button>\n  }\n  @else if (items.sharedActions.length > 1) {\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\n    {{'SendSelected'| translate : items.selection.selected.length }}\n  </button>\n  <mat-menu #action>\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\n    <mat-divider>\n    </mat-divider>\n    }\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\n      {{ a.title }}\n    </button>\n    }\n  </mat-menu>\n  }\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>\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>-->\n  } @else {\n  <!--<button mat-icon-button (click)=\"openSearch()\"\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\n    <mat-icon>search</mat-icon>\n  </button>\n  [@search]=\"searching\"\n  (@search.done)=\"searching && focus()\"-->\n  <input matInput\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\n         class=\"mat-body search-box\"\n         #searchEl\n         (keydown.escape)=\"clearSearch($event)\">\n  @if (contains.value) {\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\n  }\n  <span class=\"divider\"></span>\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>\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>-->\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10$1.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: i10$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10$1.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.2.1", ngImport: i0, type: BrowsePaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-browse.pane', animations: [searchAnimation], template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (!items.selection.isEmpty()) {\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\n  @if (items.isAllDraft()) {\n  <button mat-icon-button (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>\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\n  }\n  @if (items.sharedActions.length === 1) {\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\n    @if (items.sharedActions[0].icon) {\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\n    }{{'SendSelected' | translate : items.selection.selected.length}}\n  </button>\n  }\n  @else if (items.sharedActions.length > 1) {\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\n    {{'SendSelected'| translate : items.selection.selected.length }}\n  </button>\n  <mat-menu #action>\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\n    <mat-divider>\n    </mat-divider>\n    }\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\n      {{ a.title }}\n    </button>\n    }\n  </mat-menu>\n  }\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>\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>-->\n  } @else {\n  <!--<button mat-icon-button (click)=\"openSearch()\"\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\n    <mat-icon>search</mat-icon>\n  </button>\n  [@search]=\"searching\"\n  (@search.done)=\"searching && focus()\"-->\n  <input matInput\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\n         class=\"mat-body search-box\"\n         #searchEl\n         (keydown.escape)=\"clearSearch($event)\">\n  @if (contains.value) {\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\n  }\n  <span class=\"divider\"></span>\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>\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>-->\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\n", styles: [":host{min-width:540px;display:contents!important}\n"] }]
+            args: [{ selector: 'bizdoc-browse.pane', animations: [searchAnimation], template: "<mat-toolbar class=\"nav-toolbar\">\n  @if (!items.selection.isEmpty()) {\n  <!--<button mat-icon-button (click)=\"items.refresh()\" [bizdocTooltip]=\"'Refresh' | translate\" [attr.aria-label]=\"'Refresh' | translate\"><mat-icon matAnimate=\"rotate\">autorenew</mat-icon></button>-->\n  @if (items.isAllDraft()) {\n  <button mat-icon-button (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>\n  <button mat-button color=\"primary\" (click)=\"items.submitAll()\">{{'SubmitSelected' | translate : items.selection.selected.length }}</button>\n  }\n  @if (items.sharedActions.length === 1) {\n  <button mat-button color=\"primary\" (click)=\"sendAll(items.sharedActions[0].name)\" [bizdocTooltip]=\"items.sharedActions[0].title\">\n    @if (items.sharedActions[0].icon) {\n    <mat-icon>{{items.sharedActions[0].icon}}</mat-icon>\n    }{{'SendSelected' | translate : items.selection.selected.length}}\n  </button>\n  }\n  @else if (items.sharedActions.length > 1) {\n  <button mat-button color=\"primary\" [matMenuTriggerFor]=\"action\" [bizdocTooltip]=\"'Send' | translate\" [attr.aria-label]=\"'Send' | translate\">\n    {{'SendSelected'| translate : items.selection.selected.length }}\n  </button>\n  <mat-menu #action>\n    @for (a of items.sharedActions | sort : 'group'; track a; let i = $index) {\n    @if (i > 0 && items.sharedActions[i-1].group !== a.group) {\n    <mat-divider>\n    </mat-divider>\n    }\n    <button mat-menu-item (click)=\"sendAll(a.name)\" [attr.aria-label]=\"a.title\">\n      {{ a.title }}\n    </button>\n    }\n  </mat-menu>\n  }\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>\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>-->\n  } @else {\n  <!--<button mat-icon-button (click)=\"openSearch()\"\n    [bizdocTooltip]=\"'Search'|translate\" class=\"tool\">\n    <mat-icon>search</mat-icon>\n  </button>\n  [@search]=\"searching\"\n  (@search.done)=\"searching && focus()\"-->\n  <input matInput\n         [formControl]=\"contains\" autocomplete=\"off\" placeholder=\"{{'SearchFolders' | translate}}\"\n         class=\"mat-body search-box\"\n         #searchEl\n         (keydown.escape)=\"clearSearch($event)\">\n  @if (contains.value) {\n  <mat-icon (click)=\"clearSearch()\">close</mat-icon>\n  }\n  <span class=\"divider\"></span>\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>\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>-->\n  <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter' | translate\" [attr.aria-label]=\"'Filter' | translate\" #filterEl><mat-icon>filter_list</mat-icon></button>\n  }\n</mat-toolbar>\n<bizdoc-browse-items [filters]=\"filters\" [folderId]=\"folderId\" [filterType]=\"filterType\"\n                     (open)=\"open($event)\" (view)=\"view($event) \" #items></bizdoc-browse-items>\n" }]
         }], ctorParameters: () => [{ type: PaneRef }, { type: SessionService }, { type: Popup }, { type: PanesRouter }, { type: i1$3.Directionality }, { type: TranslateService }, { type: i2$2.MatDialog }], propDecorators: { items: [{
                 type: ViewChild,
                 args: [BrowseItemsComponent, { static: true }]
@@ -13340,11 +13347,11 @@ class FilterTagsComponent {
         this.axesChange.emit(this.axes);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FilterTagsComponent, deps: [{ token: SessionService }, { token: DatasourceService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FilterTagsComponent, selector: "bizdoc-cube-tags", inputs: { axes: "axes", cube: "cube", interactive: "interactive" }, outputs: { axesChange: "axesChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-chip-set [attr.aria-label]=\"'Filters'|l18n\">\n  @for (t of tags; track t) {\n    <mat-chip\n      [removable]=\"true\"\n      (removed)=\"remove(t)\">\n      {{t.value}}\n      @if (interactive) {\n        <mat-icon matChipRemove>cancel</mat-icon>\n      }\n    </mat-chip>\n  }\n</mat-chip-set>\n", styles: [":host{padding:0 8px}\n"], dependencies: [{ kind: "component", type: i4.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: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: L18nPipe, name: "l18n" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FilterTagsComponent, selector: "bizdoc-cube-tags", inputs: { axes: "axes", cube: "cube", interactive: "interactive" }, outputs: { axesChange: "axesChange" }, usesOnChanges: true, ngImport: i0, template: "<mat-chip-set [attr.aria-label]=\"'Filters'|translate\">\n  @for (t of tags; track t) {\n    <mat-chip\n      [removable]=\"true\"\n      (removed)=\"remove(t)\">\n      {{t.value}}\n      @if (interactive) {\n        <mat-icon matChipRemove>cancel</mat-icon>\n      }\n    </mat-chip>\n  }\n</mat-chip-set>\n", styles: [":host{padding:0 8px}\n"], dependencies: [{ kind: "component", type: i4.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: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FilterTagsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-cube-tags', template: "<mat-chip-set [attr.aria-label]=\"'Filters'|l18n\">\n  @for (t of tags; track t) {\n    <mat-chip\n      [removable]=\"true\"\n      (removed)=\"remove(t)\">\n      {{t.value}}\n      @if (interactive) {\n        <mat-icon matChipRemove>cancel</mat-icon>\n      }\n    </mat-chip>\n  }\n</mat-chip-set>\n", styles: [":host{padding:0 8px}\n"] }]
+            args: [{ selector: 'bizdoc-cube-tags', template: "<mat-chip-set [attr.aria-label]=\"'Filters'|translate\">\n  @for (t of tags; track t) {\n    <mat-chip\n      [removable]=\"true\"\n      (removed)=\"remove(t)\">\n      {{t.value}}\n      @if (interactive) {\n        <mat-icon matChipRemove>cancel</mat-icon>\n      }\n    </mat-chip>\n  }\n</mat-chip-set>\n", styles: [":host{padding:0 8px}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: DatasourceService }], propDecorators: { axes: [{
                 type: Input
             }], cube: [{
@@ -13723,14 +13730,18 @@ class ReportViewerComponent {
     /** */
     execute() {
         this.progress = 0;
-        return firstValueFrom(this._http.post(`/api/report/${encodeURIComponent(this.report.name)}`, this.args).
-            pipe(tap({
+        return new Promise((resolve, reject) => this._http.post(`/api/report/${encodeURIComponent(this.report.name)}`, this.args).
+            subscribe({
             next: r => {
                 this._instance.onBind(r, this.args);
                 this._data = r;
-            }, error: () => this._sb.error(),
+                resolve();
+            }, error: () => {
+                this._sb.error();
+                reject();
+            },
             complete: () => this.progress = -1
-        })));
+        }));
     }
     explore(item) {
         const args = {};
@@ -13934,7 +13945,7 @@ class ReportPaneComponent {
         }, () => this._sb.error());
     }
     /**
-   * Alt-f
+   * Alt-q
    * @param event
    */
     handleKeydown(event) {
@@ -14751,13 +14762,14 @@ class UtilityRef {
 /** utility-wrapper component*/
 class UtilityPaneComponent {
     /** ctor */
-    constructor(_session, _pane, _http, _sb, _messaging, _cf, _injector) {
+    constructor(_session, _pane, _http, _sb, _messaging, _cf, _vc, _injector) {
         this._session = _session;
         this._pane = _pane;
         this._http = _http;
         this._sb = _sb;
         this._messaging = _messaging;
         this._cf = _cf;
+        this._vc = _vc;
         this._injector = _injector;
     }
     ngOnInit() {
@@ -14766,28 +14778,25 @@ class UtilityPaneComponent {
             this._utility = this._session.profile.utilities.find(u => u.name === id);
             this._pane.title = this._utility.title;
             const comp = this._cf.component(this._utility.template);
-            this.vc.clear();
+            this._vc.clear();
             const uRef = new UtilityRef(this._utility, this._messaging, this._sb, this._http);
             const injector = Injector.create({
                 providers: [{
                         provide: UtilityRef, useValue: uRef
                     }], parent: this._injector
             });
-            this.vc.createComponent(comp, { injector });
+            this._vc.createComponent(comp, { injector });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilityPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: i1.HttpClient }, { token: PromptService }, { token: HubService }, { token: BizDocComponentFactoryResolver }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UtilityPaneComponent, selector: "ng-component", viewQueries: [{ propertyName: "vc", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: '<ng-container #container></ng-container>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilityPaneComponent, deps: [{ token: SessionService }, { token: PaneRef }, { token: i1.HttpClient }, { token: PromptService }, { token: HubService }, { token: BizDocComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: UtilityPaneComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: UtilityPaneComponent, decorators: [{
             type: Component,
             args: [{
-                    template: '<ng-container #container></ng-container>'
+                    template: ''
                 }]
-        }], ctorParameters: () => [{ type: SessionService }, { type: PaneRef }, { type: i1.HttpClient }, { type: PromptService }, { type: HubService }, { type: BizDocComponentFactoryResolver }, { type: i0.Injector }], propDecorators: { vc: [{
-                type: ViewChild,
-                args: ['container', { static: true, read: ViewContainerRef }]
-            }] } });
+        }], ctorParameters: () => [{ type: SessionService }, { type: PaneRef }, { type: i1.HttpClient }, { type: PromptService }, { type: HubService }, { type: BizDocComponentFactoryResolver }, { type: i0.ViewContainerRef }, { type: i0.Injector }] });
 
 const START_NODE = 'start';
 const You = 'you';
@@ -19945,7 +19954,7 @@ class SlotsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\n     cdkScrollable\n     @panes\n     (scroll)=\"enableNavigationArrows($event)\">\n  <!---->\n  @if (prev) {\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n    <i class=\"material-icons mat-icon-rtl-mirror\">\n      arrow_back_ios\n    </i>\n  </div>\n  }\n  <!--panes-->\n  @for (p of panes; track p; let i = $index) {\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n       (click)=\"select(i)\"\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n  </div>\n  @if (i < panes.length - 1) {\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n  }\n  }\n  <!--dialog-->\n  @if (dialog) {\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n  }\n  <!--next-->\n  @if (next) {\n  <div class=\"scroll-arrow forward\">\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n       (click)=\"scrollBy(400)\">\n      arrow_forward_ios\n    </i>\n  </div>\n  }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n  <!--title-->\n  <div class=\"row tabs-title\">\n    @if (swapTab) {\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    }\n    <h2>{{group}}</h2>\n    @if (!dialog) {\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\n    }\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n  </div>\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n    @for (t of tabs; track t; let i = $index) {\n    <a mat-tab-link class=\"mat-tab-link\"\n       (click)=\"selectedTabIndex = i\"\n       [active]=\"selectedTabIndex === i\">\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n      {{t.title}}\n      @if (t.dismissable) {\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n      }\n      <!--inline=\"true\"-->\n    </a>\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\n    @for (t of tabs; track t; let i = $index) {\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n    </div>\n    }\n  </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i5$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\n     cdkScrollable\n     @panes\n     (scroll)=\"enableNavigationArrows($event)\">\n  <!---->\n  @if (prev) {\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n    <i class=\"material-icons mat-icon-rtl-mirror\">\n      arrow_back_ios\n    </i>\n  </div>\n  }\n  <!--panes-->\n  @for (p of panes; track p; let i = $index) {\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n       (click)=\"select(i)\"\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n  </div>\n  @if (i < panes.length - 1) {\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n  }\n  }\n  <!--dialog-->\n  @if (dialog) {\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n  }\n  <!--next-->\n  @if (next) {\n  <div class=\"scroll-arrow forward\">\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n       (click)=\"scrollBy(400)\">\n      arrow_forward_ios\n    </i>\n  </div>\n  }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n  <!--title-->\n  <div class=\"row tabs-title\">\n    @if (swapTab) {\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    }\n    <h2>{{group}}</h2>\n    @if (!dialog) {\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\n    }\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n  </div>\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n    @for (t of tabs; track t; let i = $index) {\n    <a mat-tab-link class=\"mat-tab-link\"\n       (click)=\"selectedTabIndex = i\"\n       [active]=\"selectedTabIndex === i\">\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n      {{t.title}}\n      @if (t.dismissable) {\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n      }\n      <!--inline=\"true\"-->\n    </a>\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\n    @for (t of tabs; track t; let i = $index) {\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n    </div>\n    }\n  </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i5$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             panesAnimation,
             paneAnimation,
             paramAnimation,
@@ -19963,7 +19972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         queryAnimation,
                         tabsAnimation,
                         tabAnimation
-                    ], template: "<div #panesEl class=\"panes\"\n     cdkScrollable\n     @panes\n     (scroll)=\"enableNavigationArrows($event)\">\n  <!---->\n  @if (prev) {\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n    <i class=\"material-icons mat-icon-rtl-mirror\">\n      arrow_back_ios\n    </i>\n  </div>\n  }\n  <!--panes-->\n  @for (p of panes; track p; let i = $index) {\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n       (click)=\"select(i)\"\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n  </div>\n  @if (i < panes.length - 1) {\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n  }\n  }\n  <!--dialog-->\n  @if (dialog) {\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n  }\n  <!--next-->\n  @if (next) {\n  <div class=\"scroll-arrow forward\">\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n       (click)=\"scrollBy(400)\">\n      arrow_forward_ios\n    </i>\n  </div>\n  }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n  <!--title-->\n  <div class=\"row tabs-title\">\n    @if (swapTab) {\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    }\n    <h2>{{group}}</h2>\n    @if (!dialog) {\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\n    }\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n  </div>\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n    @for (t of tabs; track t; let i = $index) {\n    <a mat-tab-link class=\"mat-tab-link\"\n       (click)=\"selectedTabIndex = i\"\n       [active]=\"selectedTabIndex === i\">\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n      {{t.title}}\n      @if (t.dismissable) {\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n      }\n      <!--inline=\"true\"-->\n    </a>\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\n    @for (t of tabs; track t; let i = $index) {\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n    </div>\n    }\n  </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
+                    ], template: "<div #panesEl class=\"panes\"\n     cdkScrollable\n     @panes\n     (scroll)=\"enableNavigationArrows($event)\">\n  <!---->\n  @if (prev) {\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n    <i class=\"material-icons mat-icon-rtl-mirror\">\n      arrow_back_ios\n    </i>\n  </div>\n  }\n  <!--panes-->\n  @for (p of panes; track p; let i = $index) {\n  <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n       (click)=\"select(i)\"\n       [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n    <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n  </div>\n  @if (i < panes.length - 1) {\n  <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n  }\n  }\n  <!--dialog-->\n  @if (dialog) {\n  <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n  }\n  <!--next-->\n  @if (next) {\n  <div class=\"scroll-arrow forward\">\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n       (click)=\"scrollBy(400)\">\n      arrow_forward_ios\n    </i>\n  </div>\n  }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n  <!--title-->\n  <div class=\"row tabs-title\">\n    @if (swapTab) {\n    <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    }\n    <h2>{{group}}</h2>\n    @if (!dialog) {\n    <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\n    }\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n  </div>\n  <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n    @for (t of tabs; track t; let i = $index) {\n    <a mat-tab-link class=\"mat-tab-link\"\n       (click)=\"selectedTabIndex = i\"\n       [active]=\"selectedTabIndex === i\">\n      <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n      {{t.title}}\n      @if (t.dismissable) {\n      <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n      }\n      <!--inline=\"true\"-->\n    </a>\n    }\n  </nav>\n  <mat-tab-nav-panel #tabPanel class=\"flex\">\n    @for (t of tabs; track t; let i = $index) {\n    <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n      <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n    </div>\n    }\n  </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PANES_DATA]
@@ -22009,7 +22018,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
 RangeNavigator.Inject(AreaSeries, LineSeries, DateTime, RangeTooltip);
 Sparkline.Inject(SparklineTooltip);
 AccumulationChart$1.Inject(PieSeries, PyramidSeries, FunnelSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationAnnotation, AccumulationLegend, AccumulationSelection);
-Chart$1.Inject(Category, DateTime, Tooltip$1, Legend, Selection, Zoom, Crosshair, DataLabel, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries);
+Chart$1.Inject(StripLine /*, Trendlines*/, BoxAndWhiskerSeries, Category, DateTime, Tooltip$1, Legend, Selection, Zoom, Crosshair, DataLabel, BarSeries, AreaSeries, BubbleSeries, ColumnSeries, LineSeries, PolarSeries, RadarSeries, SplineSeries, SplineAreaSeries, ScatterSeries, StackingStepAreaSeries, StackingLineSeries, StackingAreaSeries, StackingColumnSeries, StackingBarSeries, StepAreaSeries, StepLineSeries, ChartAnnotation);
 
 class SyncfusionDiagramModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SyncfusionDiagramModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -29486,43 +29495,160 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: FormRef }] });
 
 let RolesPerformanceComponent = class RolesPerformanceComponent {
-    constructor(_elementRef, _router, _session, _translate, _reportRef) {
+    constructor(_elementRef, _router, _accounts, _session, _translate) {
         this._elementRef = _elementRef;
         this._router = _router;
+        this._accounts = _accounts;
         this._session = _session;
         this._translate = _translate;
-        this._reportRef = _reportRef;
-        this.legendSettings = {};
-        const { cube: name } = _reportRef.options;
-        this._cube = name ? this._session.profile.cubes.find(c => c.name === name) : this._session.profile.cubes[0];
+        this.legendSettings = {
+            position: 'Left',
+            isInversed: this._session.inverse,
+            //toggleVisibility: false,
+            enablePages: true,
+            enableHighlight: true,
+        };
+        this.tooltip = {
+            enable: true,
+            textStyle: {
+                fontFamily: FONT_FAMILY
+            }
+        };
+        this.titleStyle = {
+            fontFamily: FONT_FAMILY
+        };
+        this.primaryXAxis = { valueType: 'Double' };
+        this.primaryYAxis = {};
+        this.actions = {};
+        this._destroy = new Subject();
+        _session.profile.actions.forEach(a => this.actions[a.name] = a);
+        _session.themeChange.pipe(takeUntil$1(this._destroy), startWith$1(_session.theme)).subscribe(t => {
+            this.theme = t.dark ? 'Material3Dark' : 'Material3';
+            this.chart && this._draw();
+        });
     }
-    onBind(data, args) {
-        const roles = [];
-        data.forEach(d => { });
-        const series = [{}];
-        new Chart({
-            series,
+    onBind(data) {
+        this.chart?.destroy();
+        if (!data.length)
+            return;
+        let accumStd = 0, countStd = 0, accumDuration = 0, maxStd = 0, maxDuration = 0, standards = [], map = {};
+        data.forEach(e => {
+            let accumStd1 = 0, countStd1 = 0, accumDuration1 = 0;
+            e.items.forEach(e => {
+                if (e.standardTime) {
+                    if (e.standardTime > maxStd)
+                        maxStd = e.standardTime;
+                    countStd++;
+                    countStd1++;
+                    accumStd += e.standardTime;
+                    accumStd1 += e.standardTime;
+                    standards.push(e);
+                }
+                if (e.duration > maxDuration)
+                    maxDuration = e.duration;
+                accumDuration += e.duration;
+                accumDuration1 += e.duration;
+            });
+            map[e.userId] = {
+                items: e.items,
+                stdAvg: countStd1 ? accumStd1 / countStd1 : 0,
+                durationAvg: accumDuration1 / data.length,
+            };
+        });
+        this.stdAvg = countStd ? accumStd / countStd : 0,
+            this.durationAvg = accumDuration / data.length;
+        this._accounts.getAll(data.map(e => e.userId)).
+            subscribe(users => {
+            this.series = [{
+                    name: this._translate.get('Standard'),
+                    xName: 'date',
+                    yName: 'standardTime',
+                    type: 'Polar',
+                    drawType: 'Line',
+                    marker: {
+                        visible: true,
+                        shape: 'Triangle',
+                        width: 5,
+                        height: 5
+                    },
+                    dataSource: standards.
+                        sort((e1, e2) => e1.standardTime < e2.standardTime ? -1 : 1),
+                },
+                ...users.map(u => ({
+                    dataSource: map[u.id].items,
+                    name: u.name,
+                    type: 'Polar',
+                    drawType: 'Line',
+                    marker: {
+                        visible: true,
+                        width: 5, height: 5,
+                        shape: 'Pentagon',
+                    },
+                    xName: 'date',
+                    yName: 'duration',
+                }))];
+            this._draw();
+        });
+    }
+    _draw() {
+        this.chart?.destroy();
+        const colors = this._session.accentPalette;
+        let palettes = [this._session.getPrimery(),
+            ...colors
+        ];
+        while (this.series.length < palettes.length) {
+            palettes.push(...colors);
+        }
+        this.chart = new Chart({
+            theme: this.theme,
+            selectionMode: 'Series',
+            title: this._translate.get('AverageValue', dayjs.duration(this.durationAvg, 'seconds').format('DD:HH:mm')),
+            titleStyle: this.titleStyle,
+            subTitle: this.stdAvg ?
+                this._translate.get('StandardValue', dayjs.duration(this.stdAvg, 'seconds').format('DD:HH:mm')) : null,
+            subTitleStyle: this.titleStyle,
+            series: this.series,
+            tooltip: this.tooltip,
+            tooltipRender: this.tooltipRender.bind(this),
             legendSettings: this.legendSettings,
+            legendRender: this.legendRender.bind(this),
             axisLabelRender: this.labelRender.bind(this),
-            palettes: this._session.accentPalette,
+            palettes,
             enableRtl: this._session.inverse,
+            height: '100%',
+            highlightMode: 'Series',
             pointClick: this.explore.bind(this)
         }, this._elementRef.nativeElement);
     }
-    labelRender(evt) { }
+    legendRender(evt) {
+        //evt.text
+    }
+    tooltipRender(evt) {
+        evt.text = dayjs.duration(evt.data.pointY, 's').humanize(); // 'DD:HH:ss'
+    }
+    labelRender(evt) {
+        switch (evt.axis.name) {
+            case 'primaryYAxis':
+                evt.text = dayjs.duration(evt.value, 's').format('DD:HH:mm');
+                break;
+            case 'primaryXAxis':
+                evt.text = dayjs(evt.value).format('MMM YYYY');
+                break;
+        }
+    }
     explore(evt) {
-        const { point: { x, yValue }, series: { name: title } } = evt;
-        const { cube, series } = this._reportRef.options;
-        const axes = {};
-        axes[series] = x;
-        this._router.navigate(['cube', cube, 'explore'], {
-            queryParams: axes,
-        });
+        const { pointIndex, seriesIndex } = evt;
+        if (seriesIndex === 0)
+            return;
+        const { documentId } = this.chart.series[seriesIndex].dataSource[pointIndex];
+        this._router.navigate(['mailbox', 'd', documentId.encodeId()]);
     }
-    ngOnInit() {
+    ngOnDestroy() {
+        this.chart?.destroy();
+        this._destroy.next();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent, deps: [{ token: i0.ElementRef }, { token: RouterImpl }, { token: SessionService }, { token: TranslateService }, { token: ReportRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: RolesPerformanceComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent, deps: [{ token: i0.ElementRef }, { token: RouterImpl }, { token: AccountService }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: RolesPerformanceComponent, selector: "ng-component", ngImport: i0, template: '', isInline: true, styles: [":host{flex:1}\n"] }); }
 };
 RolesPerformanceComponent = __decorate([
     BizDoc({
@@ -29531,10 +29657,8 @@ RolesPerformanceComponent = __decorate([
 ], RolesPerformanceComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent, decorators: [{
             type: Component,
-            args: [{
-                    template: ''
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: RouterImpl }, { type: SessionService }, { type: TranslateService }, { type: ReportRef }] });
+            args: [{ template: '', styles: [":host{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: RouterImpl }, { type: AccountService }, { type: SessionService }, { type: TranslateService }] });
 
 var DocumentStateWidgetComponent_1;
 let DocumentStateWidgetComponent = class DocumentStateWidgetComponent {
@@ -29738,6 +29862,83 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             args: [{ selector: 'bizdoc-sticky' }]
         }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 
+/** */
+class Tab {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: Tab, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.1", type: Tab, selector: "tab", inputs: { name: "name", title: "title" }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: Tab, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'tab',
+                }]
+        }], propDecorators: { name: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], template: [{
+                type: ContentChild,
+                args: [(TemplateRef)]
+            }] } });
+/** */
+class VirtualTabs {
+    constructor() {
+        this.selectedIndex = 0;
+    }
+    ngOnInit() {
+        //  if (!this.tabs.length) throw 'no tabs in bizdoc-v-tabs.';
+        //  const tab = this.tabs.find(t => t.name === this.initialName);
+        //  this.change(tab || this.tabs[0]);
+    }
+    change(tab) {
+        this.tabs.forEach((t, i) => {
+            t.active = t == tab;
+            if (t.active)
+                this.selectedIndex = i;
+        });
+        this.activeTab = tab;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VirtualTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: VirtualTabs, selector: "bizdoc-v-tabs", inputs: { initialName: "initialName" }, queries: [{ propertyName: "tabs", predicate: Tab }], ngImport: i0, template: `
+  <div class="row">
+    <mat-nav-list class="nav-list">
+    @for (t of tabs || []; track t) {
+      <mat-list-item (click)="change(t)" [class.active]="activeTab?.name === t.name">
+        <span matListItemTitle>{{t.title | translate}}</span>
+      </mat-list-item>
+    }
+    </mat-nav-list>
+    <div class="separator"></div>
+    <form autocomplete="off" [@v-swape]="selectedIndex">
+      <ng-container *ngTemplateOutlet="activeTab?.template"></ng-container>
+    </form>
+  </div>
+  `, isInline: true, styles: [".separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [verticalSwapAnimation] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VirtualTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'bizdoc-v-tabs', template: `
+  <div class="row">
+    <mat-nav-list class="nav-list">
+    @for (t of tabs || []; track t) {
+      <mat-list-item (click)="change(t)" [class.active]="activeTab?.name === t.name">
+        <span matListItemTitle>{{t.title | translate}}</span>
+      </mat-list-item>
+    }
+    </mat-nav-list>
+    <div class="separator"></div>
+    <form autocomplete="off" [@v-swape]="selectedIndex">
+      <ng-container *ngTemplateOutlet="activeTab?.template"></ng-container>
+    </form>
+  </div>
+  `, animations: [verticalSwapAnimation], styles: [".separator{height:280px;width:1px;background-color:#0003}form{padding:20px 8px 0;min-width:320px}\n"] }]
+        }], propDecorators: { initialName: [{
+                type: Input
+            }], tabs: [{
+                type: ContentChildren,
+                args: [Tab]
+            }] } });
+
 class SpContainer {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SpContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: SpContainer, isStandalone: true, selector: "bizdoc-sp-container", ngImport: i0, template: `<ejs-spreadsheet/>`, isInline: true, dependencies: [{ kind: "ngmodule", type: SyncfusionSpreadsheetModule }, { kind: "component", type: i9$1.SpreadsheetComponent, selector: "ejs-spreadsheet", inputs: ["activeSheetIndex", "allowAutoFill", "allowCellFormatting", "allowChart", "allowConditionalFormat", "allowDataValidation", "allowDelete", "allowEditing", "allowFiltering", "allowFindAndReplace", "allowFreezePane", "allowHyperlink", "allowImage", "allowInsert", "allowMerge", "allowNumberFormatting", "allowOpen", "allowResizing", "allowSave", "allowScrolling", "allowSorting", "allowUndoRedo", "allowWrap", "autoFillSettings", "cellStyle", "cssClass", "currencyCode", "definedNames", "enableClipboard", "enableContextMenu", "enableKeyboardNavigation", "enableKeyboardShortcut", "enablePersistence", "enableRtl", "height", "isProtected", "locale", "openUrl", "password", "saveUrl", "scrollSettings", "selectionSettings", "sheets", "showAggregate", "showFormulaBar", "showRibbon", "showSheetTabs", "width"], outputs: ["actionBegin", "actionComplete", "afterHyperlinkClick", "afterHyperlinkCreate", "beforeCellFormat", "beforeCellRender", "beforeCellSave", "beforeCellUpdate", "beforeConditionalFormat", "beforeDataBound", "beforeHyperlinkClick", "beforeHyperlinkCreate", "beforeOpen", "beforeSave", "beforeSelect", "beforeSort", "cellEdit", "cellEdited", "cellEditing", "cellSave", "contextMenuBeforeClose", "contextMenuBeforeOpen", "contextMenuItemSelect", "created", "dataBound", "dataSourceChanged", "dialogBeforeOpen", "fileMenuBeforeClose", "fileMenuBeforeOpen", "fileMenuItemSelect", "openComplete", "openFailure", "queryCellInfo", "saveComplete", "select", "sortComplete"] }] }); }
@@ -29753,8 +29954,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                 }]
         }] });
 
+let RolesPerformanceComponent1 = class RolesPerformanceComponent1 {
+    constructor(_elementRef, _accounts, _session, _translate) {
+        this._elementRef = _elementRef;
+        this._accounts = _accounts;
+        this._session = _session;
+        this._translate = _translate;
+        this.titleStyle = {
+            fontFamily: FONT_FAMILY
+        };
+        this._destroy = new Subject();
+        _session.themeChange.pipe(takeUntil$1(this._destroy), startWith$1(_session.theme)).subscribe(t => {
+            //this.theme = t.dark ? 'Material3Dark' : 'Material3';
+            //this.gauge && this._draw();
+            this.chart && this._draw();
+        });
+    }
+    onBind(data) {
+        //this.gauge?.destroy();
+        this.chart?.destroy();
+        if (!data.length)
+            return;
+        let accumStd = 0, countStd = 0, accumDuration = 0;
+        this.maxStd = 0, this.minStd = 0, this.maxDuration = 0, this.minDuration = data[0].durationLow;
+        data.forEach(e => {
+            if (e.standardAvg) {
+                if (e.standardHigh > this.maxStd)
+                    this.maxStd = e.standardHigh;
+                if (e.standardLow < this.minStd || this.minStd === 0)
+                    this.minStd = e.standardLow;
+                countStd++;
+                accumStd += e.standardAvg;
+            }
+            accumDuration += e.durationAvg;
+            if (e.durationHigh > this.maxDuration)
+                this.maxDuration = e.durationHigh;
+            if (e.durationLow < this.minDuration)
+                this.minDuration = e.durationLow;
+        });
+        this.stdAvg = countStd ? accumStd / countStd : 0,
+            this.durationAvg = accumDuration / data.length;
+        this._accounts.getAll(data.map(e => e.userId)).
+            subscribe(users => {
+            this.data = data.map((d, i) => {
+                const durationDev = d.durationAvg / this.durationAvg, standardDev = this.stdAvg ? d.durationAvg / this.stdAvg : 0;
+                return ({
+                    durationDev,
+                    standardDev,
+                    ...d,
+                    name: users[i].name,
+                    values: [d.standardHigh, d.durationHigh, d.durationAvg, d.durationLow, d.standardLow]
+                });
+            });
+            this._draw();
+        });
+    }
+    _draw() {
+        this.chart?.destroy();
+        //const colors = this._session.accentPalette;
+        //this.gauge?.destroy();
+        //this.gauge = new CircularGauge({
+        //  theme: this.theme,
+        //  title: this._translate.get('AverageValue', dayjs.duration(this.durationAvg, 'seconds').format('DD:HH:mm')),
+        //  titleStyle: this.titleStyle,
+        //  tooltip: this.tooltip,
+        //  axes: [{
+        //    startAngle: 270,
+        //    endAngle: 90,
+        //    pointers: [{
+        //      text: this._translate.get('Standard'),
+        //      color: this._session.getPrimery(),
+        //      value: this.stdAvg
+        //    }],
+        //    ranges: this.data.map((e, i) => ({
+        //      legendText: e.name,
+        //      radius: `${100 - i * 5}%`,
+        //      startWidth: 3,
+        //      endWidth: 3,
+        //      start: this.minDuration,
+        //      end: this.stdAvg ? Math.floor(e.durationAvg / this.stdAvg) : Math.floor(e.durationAvg / this.durationAvg),
+        //      color: colors[Math.floor((i + 9) / i)]
+        //    } as RangeModel))
+        //  }],
+        //  tooltipRender: this.tooltipRender.bind(this),
+        //  legendSettings: this.legendSettings,
+        //  enableRtl: this._session.inverse,
+        //  height: '100%',
+        //},
+        //  this._elementRef.nativeElement);
+        this.chart = new Chart$1({
+            primaryYAxis: {
+                stripLines: [{
+                        text: this._translate.get('Standard'),
+                        textStyle: {
+                            fontFamily: FONT_FAMILY,
+                        },
+                        opacity: .8,
+                        start: this.minStd,
+                        end: this.maxStd,
+                    }]
+            },
+            primaryXAxis: {
+                valueType: 'Category'
+            },
+            tooltip: { enable: true },
+            tooltipRender: this.tooltipRender.bind(this),
+            series: [{
+                    type: 'BoxAndWhisker',
+                    dataSource: this.data,
+                    boxPlotMode: 'Normal',
+                    enableTooltip: true,
+                    xName: 'name',
+                    yName: 'values'
+                }, {
+                    type: 'Spline',
+                    dataSource: this.data,
+                    xName: 'name',
+                    width: 3,
+                    dashArray: '3 2',
+                    yName: 'durationAvg',
+                }],
+            height: '100%',
+            axisLabelRender: this.axisLabelRender.bind(this),
+            palettes: [
+                this._session.getAccent(), this._session.getPrimery()
+            ]
+        }, this._elementRef.nativeElement);
+    }
+    axisLabelRender(evt) {
+        if (evt.axis.name === 'primaryYAxis')
+            evt.text = dayjs.duration(evt.value, 's').humanize(); // 'DD:HH:mm'
+    }
+    tooltipRender(evt) {
+        //evt.content = dayjs.duration(evt.range.end, 's').humanize();// 'DD:HH:mm'
+        if (evt.data.seriesIndex === 0) {
+            const [standardHigh, durationHigh, durationAvg, durationLow, standardLow] = evt.point.y;
+            evt.text = dayjs.duration(durationHigh, 's').format('DD:HH:mm');
+            if (standardHigh) {
+                const deviation = Math.round(this.data[evt.data.pointIndex].standardDev);
+                evt.text += ` ${deviation}%`;
+            }
+        }
+        else {
+            evt.headerText = this._translate.get('Average');
+            evt.text = dayjs.duration(evt.data.pointY, 's').format('DD:HH:mm');
+        }
+    }
+    ngOnDestroy() {
+        //this.gauge?.destroy();
+        this.chart?.destroy();
+        this._destroy.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent1, deps: [{ token: i0.ElementRef }, { token: AccountService }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.1", type: RolesPerformanceComponent1, selector: "ng-component", ngImport: i0, template: '', isInline: true, styles: [":host{flex:1}\n"] }); }
+};
+RolesPerformanceComponent1 = __decorate([
+    BizDoc({
+        selector: 'bizdoc-role-performance1'
+    })
+], RolesPerformanceComponent1);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: RolesPerformanceComponent1, decorators: [{
+            type: Component,
+            args: [{ template: '', styles: [":host{flex:1}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AccountService }, { type: SessionService }, { type: TranslateService }] });
+
 /** configuration componenets */
-const CORE_COMPONENTS = [RolesPerformanceComponent, CubePerformanceWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
+const CORE_COMPONENTS = [RolesPerformanceComponent, RolesPerformanceComponent1, CubePerformanceWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
     SubstitutionComponent, MoveToActionComponent, AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
     ActionsWidget, CubeAnalysisWidget, CubeDocumentsWidget, RecentsWidget, PersonalActivityWidget,
     CompareGroupsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
@@ -29794,7 +30159,7 @@ class SharedModule {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.1", ngImport: i0, type: SharedModule, declarations: [LocalizedStringPipe, HelpTipComponent, BoxFormComponent, BoxFormRowComponent, BoxFormControlComponent,
-            RolesPerformanceComponent,
+            RolesPerformanceComponent, RolesPerformanceComponent1,
             CubeUsageComponent,
             CubeDocumentsComponent,
             DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe, ToNowPipe,
@@ -29816,7 +30181,7 @@ class SharedModule {
             AceInput, TimespanInput, AddressInput,
             FileInput,
             TimePicker,
-            LayoutComponent, StickyToolbar,
+            LayoutComponent, StickyToolbar, VirtualTabs, Tab,
             TimeField, SignatureField, AddressField, RadioButtonField, ChecklistField, YesNoField, HtmlField, FileField, NumericField, AutocompleteField, CheckboxField, DateField, DateRangeField, ExpressionField,
             InputField, SelectField, SwitchField, TextareaField, ChipsField, TimespanField,
             ReturnActionComponent, AssignActionComponent, MoveToActionComponent,
@@ -29896,7 +30261,7 @@ class SharedModule {
             TagsComponent, QuickCommentComponent,
             CommentsComponent,
             LayoutComponent,
-            ActionDialog, StickyToolbar,
+            ActionDialog, StickyToolbar, VirtualTabs, Tab,
             BrowseFilterComponent, CubeFilterComponent, ScheduleViewComponent, ReportViewerComponent, WidgetItemComponent, CubeViewComponent,
             ExploreItemsComponent, ComposeFormComponent, BrowseItemsComponent, NotificationsTableComponent,
             ActionPicker, ConversationComponent,
@@ -29974,7 +30339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
             type: NgModule,
             args: [{
                     declarations: [LocalizedStringPipe, HelpTipComponent, BoxFormComponent, BoxFormRowComponent, BoxFormControlComponent,
-                        RolesPerformanceComponent,
+                        RolesPerformanceComponent, RolesPerformanceComponent1,
                         CubeUsageComponent,
                         CubeDocumentsComponent,
                         DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe, ToNowPipe,
@@ -29996,7 +30361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         AceInput, TimespanInput, AddressInput,
                         FileInput,
                         TimePicker,
-                        LayoutComponent, StickyToolbar,
+                        LayoutComponent, StickyToolbar, VirtualTabs, Tab,
                         TimeField, SignatureField, AddressField, RadioButtonField, ChecklistField, YesNoField, HtmlField, FileField, NumericField, AutocompleteField, CheckboxField, DateField, DateRangeField, ExpressionField,
                         InputField, SelectField, SwitchField, TextareaField, ChipsField, TimespanField,
                         ReturnActionComponent, AssignActionComponent, MoveToActionComponent,
@@ -30097,7 +30462,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
                         TagsComponent, QuickCommentComponent,
                         CommentsComponent,
                         LayoutComponent,
-                        ActionDialog, StickyToolbar,
+                        ActionDialog, StickyToolbar, VirtualTabs, Tab,
                         BrowseFilterComponent, CubeFilterComponent, ScheduleViewComponent, ReportViewerComponent, WidgetItemComponent, CubeViewComponent,
                         ExploreItemsComponent, ComposeFormComponent, BrowseItemsComponent, NotificationsTableComponent,
                         ActionPicker, ConversationComponent,
@@ -30698,7 +31063,8 @@ let SystemDiffComponent = class SystemDiffComponent {
      * @param index
      */
     compare(index) {
-        const { time: date1, file } = this.versions[index], version = this.versions.slice(index + 1).find(v => v.file === file);
+        const { time: date1, file } = this.versions[index], version = this.versions.slice(index + 1).
+            find(v => v.file === file);
         if (!version)
             return;
         const { time: date2 } = version;
@@ -31170,7 +31536,7 @@ let SystemDiffComponent = class SystemDiffComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SystemDiffComponent, deps: [{ token: PromptService }, { token: UtilityRef }, { token: TranslateService }, { token: DatasourceService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SystemDiffComponent, selector: "ng-component", viewQueries: [{ propertyName: "contents", first: true, predicate: ["contents"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{flex:1 1 auto}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i6$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SystemDiffComponent, selector: "ng-component", viewQueries: [{ propertyName: "contents", first: true, predicate: ["contents"], descendants: true }], ngImport: i0, template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"], dependencies: [{ kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i2$4.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$4.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$4.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i6$4.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i6$4.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i6$4.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 SystemDiffComponent = __decorate([
     BizDoc({ selector: 'bizdoc-configuration-diff' })
@@ -31178,7 +31544,7 @@ SystemDiffComponent = __decorate([
 ], SystemDiffComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SystemDiffComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{flex:1 1 auto}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"] }]
+            args: [{ template: "<mat-toolbar>\n  <button mat-icon-button (click)=\"properties.toggle()\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\n  <span class=\"divider\"></span>\n</mat-toolbar>\n<mat-sidenav-container autosize class=\"flex\">\n  <mat-sidenav-content>\n    <mat-progress-bar mode=\"buffer\" [value]=progress [bufferValue]=0 [style.visibility]=\"progress > 0 && progress < 100 ? 'visible':'hidden'\"></mat-progress-bar>\n    <div [innerHTML]=\"html | sanitizeHtml\" (mouseleave)=\"focusOut()\" (mousemove)=\"focusIn($event)\" class=\"configuration-diff\" (click)=\"collapse($event)\" #contents></div>\n  </mat-sidenav-content>\n  <mat-sidenav mode=\"side\" opened #properties class=\"timeline\">\n    @if (versions) {\n      <mat-nav-list class=\"nav-list\">\n        @for (v of versions; track v; let index = $index; let last = $last) {\n          @if (!last) {\n            <mat-list-item (click)=\"compare(index)\" [class.active]=\"v.time === activeDate\">\n              <h3 matListItemTitle>\n                {{(v.author || 'System') | userName | async }}\n              </h3>\n              <p class=\"time\" matListItemLine>\n                {{v.time | amCalendar: null: CALENDAR_SPEC }}\n              </p>\n            </mat-list-item>\n          }\n        }\n      </mat-nav-list>\n    }\n  </mat-sidenav>\n</mat-sidenav-container>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.timeline{border:none;width:150px}.timeline .time{font-size:12px!important}:host ::ng-deep .mat-drawer-inner-container{overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
@@ -31655,7 +32021,7 @@ let DocumentTraceComponent = class DocumentTraceComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DocumentTraceComponent, deps: [{ token: UtilityRef }, { token: SystemService }, { token: SessionService }, { token: PaneRef }, { token: PanesRouter }, { token: PromptService }, { token: TranslateService }, { token: Popup }, { token: GuideService }, { token: i0.ChangeDetectorRef }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" } }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator$1, descendants: true }], ngImport: i0, template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\n    <mat-form-field>\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i11$2.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPlacement", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: DocumentTraceComponent, selector: "ng-component", host: { listeners: { "window:keydown.f1": "guide($event)" } }, viewQueries: [{ propertyName: "diagramElement", first: true, predicate: ["diagram"], descendants: true }, { propertyName: "filterArgs", first: true, predicate: ["args"], descendants: true }, { propertyName: "searchInput", first: true, predicate: ["search"], descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "rangeNavigator", first: true, predicate: RangeNavigator$1, descendants: true }], ngImport: i0, template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column gap\">\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$3.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i11$2.RangeNavigatorComponent, selector: "ejs-rangenavigator", inputs: ["allowIntervalData", "allowSnapping", "animationDuration", "background", "dataSource", "disableRangeSelector", "enableDeferredUpdate", "enableGrouping", "enablePersistence", "enableRtl", "groupBy", "height", "interval", "intervalType", "labelFormat", "labelIntersectAction", "labelPlacement", "labelPosition", "labelStyle", "locale", "logBase", "majorGridLines", "majorTickLines", "margin", "maximum", "minimum", "navigatorBorder", "navigatorStyleSettings", "periodSelectorSettings", "query", "secondaryLabelAlignment", "series", "skeleton", "skeletonType", "theme", "tickPosition", "tooltip", "useGroupingSeparator", "value", "valueType", "width", "xName", "yName"], outputs: ["beforePrint", "beforeResize", "changed", "labelRender", "load", "loaded", "resized", "selectorRender", "tooltipRender", "dataSourceChange"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesDirective, selector: "e-rangenavigator-series-collection>e-rangenavigator-series", inputs: ["animation", "border", "dashArray", "dataSource", "fill", "opacity", "query", "type", "width", "xName", "yName"] }, { kind: "directive", type: i11$2.RangenavigatorSeriesCollectionDirective, selector: "ej-rangenavigator>e-rangenavigator-series-collection" }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i5$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i6$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i7$2.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i3$3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: TypeSelect, selector: "bizdoc-select", inputs: ["type", "scope", "multiple", "placeholder", "required", "disabled", "text", "value"], outputs: ["selectionChange", "textChange"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: DateFormatPipe, name: "amDateFormat" }, { kind: "pipe", type: UserNamePipe, name: "userName" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [trigger('element', EnterExitRight)] }); }
 };
 DocumentTraceComponent = __decorate([
     BizDoc({ selector: 'bizdoc-trace-utility' })
@@ -31663,7 +32029,7 @@ DocumentTraceComponent = __decorate([
 ], DocumentTraceComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: DocumentTraceComponent, decorators: [{
             type: Component,
-            args: [{ animations: [trigger('element', EnterExitRight)], template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column\">\n    <mat-form-field>\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field>\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"] }]
+            args: [{ animations: [trigger('element', EnterExitRight)], template: "@switch (mode) {\n<!-- diagram -->\n  @case ('diagram') {\n<div class=\"column flex\">\n  <mat-toolbar>\n    <button mat-icon-button (click)=\"browse()\" [bizdocTooltip]=\"'Back' | translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n    |\n    <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><span class=\"e-icons sf-icon-pan\"></span></button>\n    <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons sf-icon-cursor\"></span></button>\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\n  </mat-toolbar>\n  <div class=\"row flex\">\n    <!-- timeline -->\n    @if (timeline?.items.length > 1) {\n    <div class=\"timeline\" data-help=\"timeline\">\n      @for (date of timeline.items; track date; let last = $last) {\n      <div class=\"item\"\n           [class.active]=\"date.time === timeline.date\"\n           (click)=\"highlightTime(date.time)\" matRipple>\n        <div class=\"title\">\n          @if (!last || !timeline.estimate) {\n          @if (date.userId) {\n          <span class=\"who\">\n            {{date.userId | userName | async }}\n          </span>\n          }\n          <br />\n          <span class=\"time\">\n            {{date.time | amDateFormat: 'MMM Do H:mm' }}\n          </span>\n          } @else {\n          {{'Estimate' | translate}}\n          }\n        </div>\n        <div class=\"indicator-container\">\n          <div class=\"indicator\"></div>\n        </div>\n      </div>\n      }\n    </div>\n    }\n    <div class=\"flex\" #diagram dir=\"ltr\">\n    </div>\n  </div>\n</div>\n  }\n<!-- browse -->\n  @default {\n<div class=\"flex column fill\">\n  <mat-toolbar class=\"row\">\n    <span class=\"divider\"></span>\n    <button mat-icon-button (click)=\"openFilter($event)\" [bizdocTooltip]=\"'Filter'|translate\"><mat-icon>filter_list</mat-icon></button>\n  </mat-toolbar>\n  <mat-progress-bar [mode]=\"loading\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\n  <!-- table -->\n  <mat-table class=\"flex\" [dataSource]=\"dataSource\" matSort>\n    <!-- Number column -->\n    <ng-container matColumnDef=\"number\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.number}} </mat-cell>\n    </ng-container>\n    <!-- Subject column -->\n    <ng-container matColumnDef=\"subject\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\"> {{item.subject}} </mat-cell>\n    </ng-container>\n    <!-- StateId column -->\n    <ng-container matColumnDef=\"stateId\">\n      <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\n      <mat-cell *matCellDef=\"let item\" class=\"data-column\">\n        <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\n      </mat-cell>\n    </ng-container>\n    <mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\n    <mat-row *matRowDef=\"let item; columns: displayedColumns;\"\n             (click)=\"open(item)\">\n    </mat-row>\n  </mat-table>\n  <!-- range -->\n  <ejs-rangenavigator valueType='DateTime' [value]=range labelFormat='MMM' background=\"transparent\"\n                      [theme]=\"theme\" labelIntersectAction='Hide' enableGrouping=\"false\"\n                      groupBy=\"Years\" intervalType='Months'\n                      (changed)='rangeChanged($event)'>\n    <e-rangenavigator-series-collection>\n      <e-rangenavigator-series [dataSource]='rangeData' [fill]=\"accent\" type='Area' xName='date' yName='count' width=2>\n      </e-rangenavigator-series>\n    </e-rangenavigator-series-collection>\n  </ejs-rangenavigator>\n</div>\n  }\n}\n<!-- args -->\n<ng-template #args>\n  <form autocomplete=\"off\" [formGroup]=\"form\" class=\"column gap\">\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <input matInput type=\"search\" #search formControlName=\"search\" data-help=\"search\" [placeholder]=\"'Number'|translate\" />\n      <mat-icon matSuffix class=\"mat-icon-rtl-mirror\">search</mat-icon>\n    </mat-form-field>\n    <mat-form-field subscriptSizing=\"dynamic\">\n      <bizdoc-select type=\"forms\" [placeholder]=\"'Form'|translate\" formControlName=\"formId\"></bizdoc-select>\n    </mat-form-field>\n  </form>\n</ng-template>\n<ng-template #estimate>\n  {{'Estimate' | translate}}\n</ng-template>\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}:host ::ng-deep .mat-mdc-row{cursor:pointer}form{margin:8px}\n"] }]
         }], ctorParameters: () => [{ type: UtilityRef, decorators: [{
                     type: Inject,
                     args: [UtilityRef]
@@ -35452,19 +35818,18 @@ let PerformanceReportDesignComponent = class PerformanceReportDesignComponent ex
         super(...arguments);
         this.form = this._fb.group({
             cube: null,
-            series: null,
             filters: this._fb.group({}),
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PerformanceReportDesignComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: PerformanceReportDesignComponent, selector: "ng-component", host: { classAttribute: "column" }, usesInheritance: true, ngImport: i0, template: "@if (mode !== 'widget') {\n<ng-container [formGroup]=\"form\">\n  @if (cubes.length > 1) {\n  <mat-form-field>\n    <mat-label>{{'Cube'|translate}}</mat-label>\n    <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\n      @for (c of cubes; track c) {\n      <mat-option [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <mat-form-field>\n    <mat-label>{{'Series'|translate}}</mat-label>\n    <mat-select formControlName=\"series\" required>\n      @for (x of cube?.axes; track x) {\n      <mat-option [value]=\"x.name\">{{x.title||x.name}}</mat-option>\n      }\n    </mat-select>\n    @if (form.controls.series.hasError('required')) {\n    <mat-error [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\n    }\n  </mat-form-field>\n  @if (cube) {\n  <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.controls.filters\"></bizdoc-designer-cube-filter>\n  }\n</ng-container>\n}\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: PerformanceReportDesignComponent, selector: "ng-component", host: { classAttribute: "column" }, usesInheritance: true, ngImport: i0, template: "@if (mode !== 'widget') {\n<ng-container [formGroup]=\"form\">\n  @if (cubes.length > 1) {\n  <mat-form-field>\n    <mat-label>{{'Cube'|translate}}</mat-label>\n    <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\n      @for (c of cubes; track c) {\n      <mat-option [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  @if (cube) {\n  <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.controls.filters\"></bizdoc-designer-cube-filter>\n  }\n</ng-container>\n}\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: DesignerCubeFilterComponent, selector: "bizdoc-designer-cube-filter", inputs: ["cube", "form"] }, { kind: "pipe", type: LocalizedStringPipe, name: "localizedString" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 PerformanceReportDesignComponent = __decorate([
     BizDoc({ selector: 'performance-report-designer' })
 ], PerformanceReportDesignComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: PerformanceReportDesignComponent, decorators: [{
             type: Component,
-            args: [{ host: { class: 'column' }, template: "@if (mode !== 'widget') {\n<ng-container [formGroup]=\"form\">\n  @if (cubes.length > 1) {\n  <mat-form-field>\n    <mat-label>{{'Cube'|translate}}</mat-label>\n    <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\n      @for (c of cubes; track c) {\n      <mat-option [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  <mat-form-field>\n    <mat-label>{{'Series'|translate}}</mat-label>\n    <mat-select formControlName=\"series\" required>\n      @for (x of cube?.axes; track x) {\n      <mat-option [value]=\"x.name\">{{x.title||x.name}}</mat-option>\n      }\n    </mat-select>\n    @if (form.controls.series.hasError('required')) {\n    <mat-error [innerHTML]=\"'RequiredErr'|translate:('Series'|translate)\"></mat-error>\n    }\n  </mat-form-field>\n  @if (cube) {\n  <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.controls.filters\"></bizdoc-designer-cube-filter>\n  }\n</ng-container>\n}\n" }]
+            args: [{ host: { class: 'column' }, template: "@if (mode !== 'widget') {\n<ng-container [formGroup]=\"form\">\n  @if (cubes.length > 1) {\n  <mat-form-field>\n    <mat-label>{{'Cube'|translate}}</mat-label>\n    <mat-select required formControlName=\"cube\" (selectionChange)=\"cubeSelected($event)\">\n      @for (c of cubes; track c) {\n      <mat-option [value]=\"c.name\">{{c.title|localizedString}}</mat-option>\n      }\n    </mat-select>\n  </mat-form-field>\n  }\n  @if (cube) {\n  <bizdoc-designer-cube-filter [cube]=\"cube\" [form]=\"form.controls.filters\"></bizdoc-designer-cube-filter>\n  }\n</ng-container>\n}\n" }]
         }] });
 
 let DocumentStateWidgetDesignComponent = class DocumentStateWidgetDesignComponent extends DesignerCubeElementComponent {
@@ -36303,5 +36668,5 @@ function withRoute(routes) {
  * Generated bundle index. Do not edit.
  */
 
-export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressControlDesigner, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AutocompleteControlDesigner, AvatarComponent, BIZDOC_CONFIG, BackNavigation, BizDoc, BizDocApp, BizDocComponentFactoryResolver, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, CheckboxControlDesigner, ChecklistControlDesigner, CollapseNavigation, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeItemResolveService, CubeMatrixComponent, CubeParallelComponent, CubePerformanceWidget, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateControlDesigner, DateFormatPipe, DateRangeControlDesigner, DateRangePipe, DesignerCubeFilterComponent, DesignerModule, DesignerRef, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, ExpressionFieldDesigner, FONT_FAMILY, FadeSlideInOut, FieldKind, FileControlDesigner, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideRef, GuideService, HelpTipComponent, HtmlFieldDesigner, INBOX, IdentityName, InputFieldDesigner, JoinPipe, JsonPipe, L18nPipe, LayoutComponent, ListingRef, LocalizedStringComponent, LocalizedStringControlDesigner, LocalizedStringPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationBase, NavigationClose, NavigationEnd, NavigationExpand, NavigationFocus, NavigationMode, NavigationPaneBase, NavigationResize, NavigationStart, NodeRef, NoneComponent, NotificationsTableComponent, NumberControlDesigner, OpenPolicy, OptionsComponent, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RadioButtonControlDesigner, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SelectControlDesigner, SessionService, ShakeAnimation, SharedModule, SignatureControlDesigner, SlotRouterDirective, SpContainer, StateDirective, StatePipe, StickyToolbar, SubstitutionComponent, SwapAnimation, TagsComponent, TagsControlDesigner, TasksComponent, TextAreaFieldDesigner, TimeAgoPipe, TimeControlDesigner, TimePicker, TimespanControlDesigner, TimespanInput, ToNowPipe, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, WidgetItemComponent, WidgetRef, YesNoControlDesigner, cleanup, getMonthList, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, programName, registerComponents };
+export { AccountService, AceInput, ActionDialog, ActionPicker, ActionPipe, ActionRef, ActionsWidget, AddressControlDesigner, AddressInput, AgoPipe, ArraySortPipe, AssignActionComponent, AttachmentInfo, AttachmentPreview, AuthenticationImpl, AutocompleteControlDesigner, AvatarComponent, BIZDOC_CONFIG, BackNavigation, BizDoc, BizDocApp, BizDocComponentFactoryResolver, BizDocModule, BrokenPage, BrowseFilterComponent, BrowseItemsComponent, CalendarPipe, ChatInfo, CheckboxComponent, CheckboxControlDesigner, ChecklistControlDesigner, CollapseNavigation, ColorPicker, CombinationPicker, CombinationPickerBody, CombinationPool, CommentsComponent, CompareContextDirective, CompareGroupDirective, CompareGroupsWidget, CompareNameDirective, ComposeFormComponent, ContactsComponent, ConversationComponent, CubeAccumAnalysisWidget, CubeAccumulationChartComponent, CubeAnalysisWidget, CubeChartAnalysisWidget, CubeChartComponent, CubeDocumentsGridComponent, CubeDocumentsTableComponent, CubeDocumentsWidget, CubeFilterComponent, CubeGridComponent, CubeInfo, CubeItemResolveService, CubeMatrixComponent, CubeParallelComponent, CubePerformanceWidget, CubePivotComponent, CubeService, CubeSpreadsheetComponent, CubeSumComponent, CubeViewComponent, CubeWidgetFilterComponent, DEFAULT_POLICY, DRAFT, DashboardComponent, DatasourceService, DateControlDesigner, DateFormatPipe, DateRangeControlDesigner, DateRangePipe, DesignerCubeFilterComponent, DesignerModule, DesignerRef, DifferencePipe, DocumentInfo, DocumentInfoComponent, DocumentResolveService, DocumentViewRef, DocumentViewsComponent, DurationFormatPipe, DurationPipe, EnterExitLeft, EnterExitRight, EnterExitTop, ExploreDocumentComponent, ExploreItemImplComponent, ExploreItemsComponent, ExpressionFieldDesigner, FONT_FAMILY, FadeSlideInOut, FieldKind, FileControlDesigner, FileInput, FilterPipe, FilterTagsComponent, FlowViewComponent, FormPipe, FormRef, GuideRef, GuideService, HelpTipComponent, HtmlFieldDesigner, INBOX, IdentityName, InputFieldDesigner, JoinPipe, JsonPipe, L18nPipe, LayoutComponent, ListingRef, LocalizedStringComponent, LocalizedStringControlDesigner, LocalizedStringPipe, LottieAnimation, MailboxService, MapInfo, MatIconAnimate, MaterialModule, NavigationBase, NavigationClose, NavigationEnd, NavigationExpand, NavigationFocus, NavigationMode, NavigationPaneBase, NavigationResize, NavigationStart, NodeRef, NoneComponent, NotificationsTableComponent, NumberControlDesigner, OpenPolicy, OptionsComponent, POPUP_DATA, PaneRef, PanesRouter, ParamNavigation, PeersPerformanceWidget, PendingResultsWidget, PersonalActivityWidget, PersonalScoreWidget, Popup, PopupRef, PrivilegeDisabledDirective, PrivilegeHiddenDirective, PulseAnimation, QueryParamNavigation, QuickCommentComponent, RadioButtonControlDesigner, RecentsWidget, RecipientResolveService, ReportArgumentsComponent, ReportRef, ReportViewerComponent, ReturnActionComponent, RolePipe, RouterImpl, SanitizeHtmlPipe, SaveChangesDialog, ScheduleViewComponent, SearchInput, SelectControlDesigner, SessionService, ShakeAnimation, SharedModule, SignatureControlDesigner, SlotRouterDirective, SpContainer, StateDirective, StatePipe, StickyToolbar, SubstitutionComponent, SwapAnimation, Tab, TagsComponent, TagsControlDesigner, TasksComponent, TextAreaFieldDesigner, TimeAgoPipe, TimeControlDesigner, TimePicker, TimespanControlDesigner, TimespanInput, ToNowPipe, TooltipDirective, TraceViewComponent, TranslatePipe, TranslateService, TypeAutocomplete, TypeSelect, TypeValuePipe, UsageChartComponent, UsagePivotComponent, UsageReportArgs, UserNamePipe, UtilityRef, VersionCompareComponent, VirtualTabs, WidgetItemComponent, WidgetRef, YesNoControlDesigner, cleanup, getMonthList, isArray, isBoolean, isDate, isFunction, isImage, isMobile, isObject, isPrimitive, isPromise, isString, modelize, programName, registerComponents };
 //# sourceMappingURL=bizdoc-core.mjs.map