@bizdoc/core 3.2.3 → 3.2.4

package/fesm2022/bizdoc-core.mjs

@@ -150,7 +150,7 @@ import duration from 'dayjs/plugin/duration';
 import calendar from 'dayjs/plugin/calendar';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import updateLocale from 'dayjs/plugin/updateLocale';
-import { CircularGauge as CircularGauge$1, Legend as Legend$2 } from '@syncfusion/ej2-circulargauge';
+import { CircularGauge as CircularGauge$1 } from '@syncfusion/ej2-circulargauge';
 import { Gantt as Gantt$1 } from '@syncfusion/ej2-gantt';
 import { DIALOG_DATA } from '@angular/cdk/dialog';
 
@@ -9385,7 +9385,7 @@ class BrowseItemsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: BrowseItemsComponent, deps: [{ token: MailboxService }, { token: AccountService }, { token: CubeService }, { token: SessionService }, { token: PromptService }, { token: TranslateService }, { token: i0.ChangeDetectorRef }, { token: RouterImpl }, { token: HubService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: { folderId: "folderId", filterType: "filterType", filters: "filters" }, outputs: { onopen: "open", onInsights: "insights" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amCalendar\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n            <span>\r\n              {{item.model[c.name] | amCalendar }}\r\n            </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.document-flag]=\"item.flag\">{{item.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$2.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.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: CheckboxComponent, selector: "bizdoc-checkbox", inputs: ["checked", "color", "icon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: BrowseItemsComponent, selector: "bizdoc-browse-items", inputs: { folderId: "folderId", filterType: "filterType", filters: "filters" }, outputs: { onopen: "open", onInsights: "insights" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amCalendar\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n            <span>\r\n              {{item.model[c.name] | amCalendar }}\r\n            </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$6.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$6.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$6.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i2$6.CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$2.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.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i7$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: CheckboxComponent, selector: "bizdoc-checkbox", inputs: ["checked", "color", "icon"] }, { kind: "directive", type: StateDirective, selector: "bizdoc-status", inputs: ["stateId"] }, { kind: "component", type: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "component", type: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: ExpandedItemComponent, selector: "bizdoc-expanded-item", inputs: ["model"], outputs: ["sent"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "pipe", type: i5.CurrencyPipe, name: "currency" }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             listAnimation,
             itemAnimation,
             expandListItemAnimation,
@@ -9399,7 +9399,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         itemAnimation,
                         expandListItemAnimation,
                         listItemUpdatedAnimation
-                    ], template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amCalendar\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n            <span>\r\n              {{item.model[c.name] | amCalendar }}\r\n            </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.document-flag]=\"item.flag\">{{item.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"] }]
+                    ], template: "<mat-progress-bar mode=\"query\" [style.visibility]=\"loading ? 'visible':'hidden'\"></mat-progress-bar>\r\n@if (dataSource?.data.length === 0) {\r\n  <bizdoc-none title=\"NoMessages\" [subtitle]=\"!isMobile && folderId === DRAFT ? 'AltN' : null\" icon=\"mail_outline\"></bizdoc-none>\r\n}\r\n<mat-table cdkDropList class=\"data-table\"\r\n  [cdkDropListDisabled]=\"isMobile\"\r\n  [cdkDropListData]=\"dataSource?.data\"\r\n  cdkDropListConnectedTo=\"folders\"\r\n  cdkDropListSortingDisabled\r\n  [dataSource]=\"dataSource\" matSort multiTemplateDataRows (matSortChange)=\"sortData()\"\r\n  id=\"browse-table\" [@list]=\"dataSource\" [style.display]=\"dataSource?.data.length ?'':'none'\">\r\n  <ng-container matColumnDef=\"select\">\r\n    <mat-header-cell *matHeaderCellDef>\r\n      <div class=\"\"></div>\r\n      <mat-checkbox (change)=\"$event ? masterToggle() : null\" [aria-label]=\"'Check'|translate\"\r\n        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n      </mat-checkbox>\r\n    </mat-header-cell>\r\n    <mat-cell *matCellDef=\"let item\">\r\n      <mat-checkbox (click)=\"$event.stopPropagation()\" [aria-label]=\"'Check'|translate\"\r\n        (change)=\"$event ? selection.toggle(item) : null\"\r\n        [checked]=\"selection.isSelected(item)\">\r\n      </mat-checkbox>\r\n      <!-- drag -->\r\n      <!--<button mat-icon-button cdkDragHandle\r\n      (mousedown)=\"dragDisabled = false\"\r\n      (mouseup)=\"dragDisabled = true\"\r\n      (touchstart)=\"dragDisabled = false\"\r\n      (touchend)=\"dragDisabled = true\"\r\n      class=\"drag hide-xs\" aria-disabled=\"true\">\r\n      <mat-icon>drag_indicator</mat-icon>\r\n    </button>-->\r\n    <button mat-icon-button (click)=\"toggleExpanded(item, $event)\" [bizdocTooltip]=\"'Details' | translate\" [attr.aria-label]=\"'Details' | translate\" class=\"tool\"><mat-icon>{{item == expandedElement ? 'unfold_less' : 'unfold_more'}}</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Number column -->\r\n<ng-container matColumnDef=\"number\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Number' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.number}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- Subject column -->\r\n<ng-container matColumnDef=\"subject\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Subject' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.subject}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"owner\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Owner' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.ownerId) {\r\n      <bizdoc-identity-name [identity]=\"item.ownerId\" [by]=\"item.ownerById\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n<ng-container matColumnDef=\"sender\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Sender' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    @if (item.senderId) {\r\n      <bizdoc-identity-name [identity]=\"item.senderId\" [by]=\"item.byId\"></bizdoc-identity-name>\r\n    }\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"received\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.received | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"receivedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"received\">{{'Received' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.received | amCalendar\">{{item.received | amTimeAgo}}</mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"replied\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Replied' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.replied | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issued\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.issued | amCalendar}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"issuedAgo\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"issued\">{{'Issued' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\" [bizdocTooltip]=\"item.issued | amCalendar\"> {{item.issued | amTimeAgo}} </mat-cell>\r\n</ng-container>\r\n\r\n<ng-container matColumnDef=\"state\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header=\"stateId\">{{'Status' | translate }}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <bizdoc-status [stateId]=\"item.stateId\"></bizdoc-status>\r\n  </mat-cell>\r\n</ng-container>\r\n\r\n@if (customColumns) {\r\n  @for (c of customColumns; track c) {\r\n    <ng-container [matColumnDef]=\"c.name\">\r\n      <mat-header-cell *matHeaderCellDef mat-sort-header> {{c.title}} </mat-header-cell>\r\n      <mat-cell *matCellDef=\"let item\">\r\n        @switch (c.type) {\r\n          @case ('Date') {\r\n            <span>\r\n              {{item.model[c.name] | amCalendar }}\r\n            </span>\r\n          }\r\n          @case ('Decimal') {\r\n            <span>\r\n              {{item.model[c.name] | number }}\r\n            </span>\r\n          }\r\n          @case ('Boolean') {\r\n            <span>\r\n              <bizdoc-checkbox [checked]=\"item.model[c.name]\"></bizdoc-checkbox>\r\n            </span>\r\n          }\r\n          @default {\r\n            <span>\r\n              {{item.model[c.name]}}z\r\n            </span>\r\n          }\r\n        }\r\n      </mat-cell>\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<!-- Value column -->\r\n<ng-container matColumnDef=\"value\">\r\n  <mat-header-cell *matHeaderCellDef mat-sort-header>{{'Amount' | translate}}</mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\"> {{item.value | currency : item.currencyCode : 'symbol' : currencyFormat}} </mat-cell>\r\n</ng-container>\r\n\r\n<!-- options column -->\r\n<ng-container matColumnDef=\"options\">\r\n  <mat-header-cell *matHeaderCellDef></mat-header-cell>\r\n  <mat-cell *matCellDef=\"let item\">\r\n    <button mat-icon-button (click)=\"flag(item, $event)\" [bizdocTooltip]=\"'Flagged'| translate\" [attr.aria-label]=\"'ToggleFlagged' | translate\" class=\"tool\"><mat-icon [class.filled]=\"item.flag\">star</mat-icon></button>\r\n    @if (enableViews) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n    }\r\n    <button mat-icon-button (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"menu\" [matMenuTriggerData]=\"{item: item}\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\" class=\"tool hide-xs\"><mat-icon>more_vert</mat-icon></button>\r\n  </mat-cell>\r\n</ng-container>\r\n<!-- Expanded Content Column -->\r\n<ng-container matColumnDef=\"expandedDetail\">\r\n  <mat-cell *matCellDef=\"let item\" [attr.colspan]=\"displayedColumns.length\" [@updated]=\"item == updatedElement\"\r\n    [class.read-row]=\"item.read\">\r\n    <div [@detailExpand]=\"item == expandedElement ? 'expanded' : 'collapsed'\" style=\"width: 100%\">\r\n      @if (item == expandedElement) {\r\n        <bizdoc-expanded-item [model]=\"item\"></bizdoc-expanded-item>\r\n      }\r\n    </div>\r\n  </mat-cell>\r\n</ng-container>\r\n<mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></mat-header-row>\r\n<mat-row @item [@updated]=\"item == updatedElement\"\r\n  *matRowDef=\"let item; let dataIndex = dataIndex; columns: displayedColumns;\" class=\"element-row\"\r\n  cdkDrag [cdkDragData]=\"item\"\r\n  [cdkDragDisabled]=\"dragDisabled\"\r\n  (cdkDragReleased)=\"dragDisabled = true\"\r\n           [ngClass]=\"{'selected-row': selectedElement === item,\r\n      'expanded-row': expandedElement === item,\r\n           'odd-row': dataIndex % 2,\r\n      'read-row': item.read}\" matRipple\r\n  (click)=\"open(item, $event)\">\r\n  <div *cdkDragPreview>\r\n    <button mat-icon-button aria-disabled=\"true\"><mat-icon>drag_indicator</mat-icon></button> <span>#{{item.number}}</span>\r\n  </div>\r\n  <div *cdkDragPlaceholder>\r\n    <!-- none -->\r\n  </div>\r\n</mat-row>\r\n<mat-row *matRowDef=\"let item; ; let dataIndex = dataIndex; columns: ['expandedDetail']\"\r\n  class=\"detail-row\" matRipple\r\n           [ngClass]=\"{ 'selected-row': selectedElement === item,\r\n           'odd-row': dataIndex % 2\r\n           }\"></mat-row>\r\n</mat-table>\r\n<mat-paginator #paginator [hidePageSize]=\"true\" [pageSize]=\"PAGE_SIZE\" [style.display]=\"!isMobile && dataSource?.data.length>PAGE_SIZE ? '':'none'\"></mat-paginator>\r\n<mat-menu #menu=\"matMenu\">\r\n  <ng-template matMenuContent let-item=\"item\">\r\n    <button mat-menu-item (click)=\"open(item, $event)\">{{'Open'|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"toggleRead(item)\">{{(item.read ?'MarkAsUnread':'MarkAsRead')|translate}}</button>\r\n    <mat-divider></mat-divider>\r\n    <button mat-menu-item (click)=\"copy(item)\">{{'Copy'| translate}}</button>\r\n  </ng-template>\r\n</mat-menu>\r\n", styles: ["#browse-table{width:100%}#browse-table .detail-row{min-height:0}#browse-table .element-row{cursor:pointer}#browse-table .element-row .drag{cursor:move}#browse-table .read-row{font-weight:100}@media screen and (min-width: 600px){.mat-mdc-row .tool{opacity:.05}.mat-mdc-row:hover .tool{opacity:1}}::ng-deep .mat-column-options{justify-content:end;padding-inline-end:8px}::ng-deep .mat-column-value{justify-content:right}::ng-deep .mat-column-select{white-space:nowrap}::ng-deep .mat-column-number{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: MailboxService }, { type: AccountService }, { type: CubeService }, { type: SessionService }, { type: PromptService }, { type: TranslateService }, { type: i0.ChangeDetectorRef }, { type: RouterImpl }, { type: HubService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -10176,11 +10176,11 @@ class ComposePaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ComposePaneComponent, deps: [{ token: SessionService }, { token: MailboxService }, { token: PaneRef }, { token: PanesRouter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ComposePaneComponent, selector: "bizdoc-compose-pane", host: { listeners: { "document:drop": "handleDocumentDrop($event)", "drop": "handleDrop($event)", "dragenter": "handleEnter($event)", "dragleave": "handleLeave($event)", "dragover": "handleOver($event)", "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "dropableElement", first: true, predicate: ["dropable"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  &nbsp;\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon class=\"filled\">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && model.pending && !model.completed) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  @if (expendable) {\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n  <bizdoc-form [model]=model [page]=\"page\" #form\r\n               (modelChange)=\"change()\"\r\n               (saved)=\"saved()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6.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: "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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "page", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange", "saved"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ComposePaneComponent, selector: "bizdoc-compose-pane", host: { listeners: { "document:drop": "handleDocumentDrop($event)", "drop": "handleDrop($event)", "dragenter": "handleEnter($event)", "dragleave": "handleLeave($event)", "dragover": "handleOver($event)", "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "dropableElement", first: true, predicate: ["dropable"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  &nbsp;\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"model.tags && model.tags.length\">bookmark</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && model.pending && !model.completed) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  @if (expendable) {\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n  <bizdoc-form [model]=model [page]=\"page\" #form\r\n               (modelChange)=\"change()\"\r\n               (saved)=\"saved()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}\n"], dependencies: [{ kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6.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: "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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "page", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange", "saved"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ComposePaneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-compose-pane', template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  &nbsp;\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon class=\"filled\">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.document-flag]=\"model.flag\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && model.pending && !model.completed) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  @if (expendable) {\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n  <bizdoc-form [model]=model [page]=\"page\" #form\r\n               (modelChange)=\"change()\"\r\n               (saved)=\"saved()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}\n"] }]
+            args: [{ selector: 'bizdoc-compose-pane', template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  &nbsp;\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-stroked-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\">\r\n    <span>{{'Submit' | translate}}</span>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-stroked-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\">\r\n    <span>{{form.actions[0].title}}</span>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-stroked-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionMenu\" [disabled]=\"!valid||working\">\r\n    <span>{{'Send' | translate}}</span>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionMenu>\r\n    <ng-template matMenuContent>\r\n      @for (a of form.actions; track a; let i = $index) {\r\n      @if (i > 0 && form.actions[i - 1].group !== a.group) {\r\n      <mat-divider></mat-divider>\r\n      }\r\n      <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"save()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"'Save'|translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"model.tags && model.tags.length\">bookmark</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && model.pending && !model.completed) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"navTrace()\" [bizdocTooltip]=\"'Trace' | translate\" tabindex=\"1\"><mat-icon>timeline</mat-icon></button>\r\n  <button mat-icon-button (click)=\"navComments()\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon [class.filled]=\"model.comments.length > 0\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"insights()\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  @if (expendable) {\r\n  <button mat-icon-button (click)=\"expand()\" [bizdocTooltip]=\"'Expand' | translate\" [attr.aria-label]=\"'Expand' | translate\"><mat-icon>open_in_new</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"close()\"><!--<mat-icon></mat-icon>--><span>{{'Close'| translate}}</span></button>\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<div class=\"file-dropable form-container\" #dropable>\r\n  <bizdoc-form [model]=model [page]=\"page\" #form\r\n               (modelChange)=\"change()\"\r\n               (saved)=\"saved()\"\r\n               (validChange)=\"valid=$event\"\r\n               (workingChange)=\"working=$event\"\r\n               (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%}.form-container{-ms-flex:1;-webkit-flex:1;flex:1;overflow:auto}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: MailboxService }, { type: PaneRef }, { type: PanesRouter }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [ComposeFormComponent, { static: true }]
@@ -14696,11 +14696,11 @@ class WorkflowComponent {
     getSymbolDefaults(symbol) {
         symbol.width = symbol.height = 40;
     }
-    pan() {
+    panMode() {
         this.diagram.constraints = this.diagram.constraints | DiagramConstraints.Pan;
         this.diagram.tool = DiagramTools.ZoomPan;
     }
-    cursor() {
+    cursorMode() {
         this.diagram.constraints = this.diagram.constraints & ~DiagramConstraints.Pan;
         this.diagram.tool = DiagramTools.Default;
     }
@@ -14925,11 +14925,11 @@ class WorkflowComponent {
         this._nodedestroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: WorkflowComponent, deps: [{ token: PromptService }, { token: SystemService }, { token: PaneRef }, { token: PanesRouter }, { token: SessionService }, { token: TranslateService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPaletteEl"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagramEl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><mat-icon>pan_tool</mat-icon></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons e-mouse-pointer\"></span></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-diagram-icon\" [ngClass]=\"{'e-straight-line': connectorType === 'Straight',\r\n          'e-orthogonal-line': connectorType === 'Orthogonal',\r\n          'e-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-diagram-icon e-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-diagram-icon e-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-diagram-icon e-beizer-line\"></span>\r\n    </button>\r\n    <!--@if(connectors.length){\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n      @if(nodes[0].annotations.length){\r\n        < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\r\n     }\r\n        < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n    }-->\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'e-border-top': alignment === 'Top',\r\n          'e-border-left': alignment === 'Left',\r\n          'e-border-center': alignment === 'Center',\r\n          'e-border-bottom': alignment === 'Bottom',\r\n          'e-border-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons e-border-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons e-border-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons e-border-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons e-border-right\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons e-border-bottom\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\r\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\r\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\r\n          [bizdocTooltip]=\"'FontSize'|translate\">\r\n    <mat-icon>format_size</mat-icon>\r\n  </button>\r\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\r\n    @for (size of fontSizes; track size) {\r\n    <button mat-menu-item (click)=\"fontSizeChange(size)\">\r\n      {{size}}\r\n    </button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPaletteEl>\r\n    </div>\r\n  </div>\r\n  <div #diagramEl id=\"diagram\" class=\"flex\" dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}.container{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto}#diagram{-webkit-flex-grow:1;flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}::ng-deep .mat-mdc-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: "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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: WorkflowComponent, selector: "bizdoc-workflow", host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "symbolPaletteEl", first: true, predicate: ["symbolPaletteEl"], descendants: true, static: true }, { propertyName: "diagramEl", first: true, predicate: ["diagramEl"], descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-icon-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\" [bizdocTooltip]=\"'SaveChanges' | translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>content_copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>content_paste</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-diagram-icon\" [ngClass]=\"{'e-straight-line': connectorType === 'Straight',\r\n          'e-orthogonal-line': connectorType === 'Orthogonal',\r\n          'e-beizer-line': connectorType === 'Bezier'}\"></span>\r\n  </button>\r\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-diagram-icon e-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-diagram-icon e-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-diagram-icon e-beizer-line\"></span>\r\n    </button>\r\n    <!--@if(connectors.length){\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n      @if(nodes[0].annotations.length){\r\n        < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\r\n     }\r\n        < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n    }-->\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-icon-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'e-border-top': alignment === 'Top',\r\n          'e-border-left': alignment === 'Left',\r\n          'e-border-center': alignment === 'Center',\r\n          'e-border-bottom': alignment === 'Bottom',\r\n          'e-border-right': alignment === 'Right'}\"></span>\r\n  </button>\r\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons e-border-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons e-border-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons e-border-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons e-border-right\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons e-border-bottom\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\r\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\r\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\r\n          [bizdocTooltip]=\"'FontSize'|translate\">\r\n    <mat-icon>format_size</mat-icon>\r\n  </button>\r\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\r\n    @for (size of fontSizes; track size) {\r\n    <button mat-menu-item (click)=\"fontSizeChange(size)\">\r\n      {{size}}\r\n    </button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"cursorMode()\" [bizdocTooltip]=\"'Cursor' | translate\"><mat-icon>arrow_selector_tool</mat-icon></button>\r\n  <button mat-icon-button (click)=\"panMode()\" [bizdocTooltip]=\"'Pan' | translate\"><mat-icon>pan_tool</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPaletteEl>\r\n    </div>\r\n  </div>\r\n  <div #diagramEl id=\"diagram\" class=\"flex\" dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}.container{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto}#diagram{-webkit-flex-grow:1;flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}::ng-deep .mat-mdc-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}.e-icons{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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: "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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: WorkflowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-workflow', template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\">{{'SaveChanges' | translate}}</button>\r\n  <button mat-icon-button (click)=\"pan()\" [bizdocTooltip]=\"'Pan' | translate\"><mat-icon>pan_tool</mat-icon></button>\r\n  <button mat-icon-button (click)=\"cursor()\" [bizdocTooltip]=\"'Cursor' | translate\"><span class=\"e-icons e-mouse-pointer\"></span></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>paste</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-diagram-icon\" [ngClass]=\"{'e-straight-line': connectorType === 'Straight',\r\n          'e-orthogonal-line': connectorType === 'Orthogonal',\r\n          'e-beizer-line': connectorType === 'Bezier'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-diagram-icon e-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-diagram-icon e-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-diagram-icon e-beizer-line\"></span>\r\n    </button>\r\n    <!--@if(connectors.length){\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n      @if(nodes[0].annotations.length){\r\n        < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\r\n     }\r\n        < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n    }-->\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'e-border-top': alignment === 'Top',\r\n          'e-border-left': alignment === 'Left',\r\n          'e-border-center': alignment === 'Center',\r\n          'e-border-bottom': alignment === 'Bottom',\r\n          'e-border-right': alignment === 'Right'}\"></span>\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons e-border-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons e-border-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons e-border-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons e-border-right\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons e-border-bottom\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\r\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\r\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\r\n          [bizdocTooltip]=\"'FontSize'|translate\">\r\n    <mat-icon>format_size</mat-icon>\r\n  </button>\r\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\r\n    @for (size of fontSizes; track size) {\r\n    <button mat-menu-item (click)=\"fontSizeChange(size)\">\r\n      {{size}}\r\n    </button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPaletteEl>\r\n    </div>\r\n  </div>\r\n  <div #diagramEl id=\"diagram\" class=\"flex\" dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}.container{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto}#diagram{-webkit-flex-grow:1;flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}::ng-deep .mat-mdc-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}\n"] }]
+            args: [{ selector: 'bizdoc-workflow', template: "<mat-toolbar>\r\n  <button mat-icon-button (click)=\"tools = !tools\" [bizdocTooltip]=\"'Collapse' | translate\"><mat-icon>view_sidebar</mat-icon></button>\r\n  <button mat-icon-button (click)=\"save()\" color=\"primary\" [disabled]=\"!dirty || saving\" [bizdocTooltip]=\"'SaveChanges' | translate\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.undo()\" [bizdocTooltip]=\"'Undo' | translate\" [disabled]=\"!diagram.historyManager?.canUndo\"><mat-icon>undo</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.redo()\" [bizdocTooltip]=\"'Redo' | translate\" [disabled]=\"!diagram.historyManager?.canRedo\"><mat-icon>redo</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button (click)=\"diagram.copy()\" [bizdocTooltip]=\"'Copy' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>content_copy</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.paste()\" [bizdocTooltip]=\"'Paste' | translate\"><mat-icon>content_paste</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.remove()\" [bizdocTooltip]=\"'Remove' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>delete</mat-icon></button>\r\n  <span class=\"tools-divider\"></span>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"lineMenu\" [disabled]=\"diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'ConnectorMode'|translate\">\r\n    <span class=\"e-diagram-icon\" [ngClass]=\"{'e-straight-line': connectorType === 'Straight',\r\n          'e-orthogonal-line': connectorType === 'Orthogonal',\r\n          'e-beizer-line': connectorType === 'Bezier'}\"></span>\r\n  </button>\r\n  <mat-menu #lineMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Straight')\">\r\n      <span class=\"e-diagram-icon e-straight-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Orthogonal')\">\r\n      <span class=\"e-diagram-icon e-orthogonal-line\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"connectorTypeChange('Bezier')\">\r\n      <span class=\"e-diagram-icon e-beizer-line\"></span>\r\n    </button>\r\n    <!--@if(connectors.length){\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n      @if(nodes[0].annotations.length){\r\n        < bizdoc-color-picker (valueChanges)='colorChange($event)' [label]=\"'Color'|translate\"></ bizdoc-color-picker>\r\n     }\r\n        < bizdoc-color-picker (valueChanges)='bgChange($event)' [label]=\"'Background'|translate\"></ bizdoc-color-picker>\r\n      < bizdoc-color-picker (valueChanges)='strokeChange($event)' [label]=\"'Stroke'|translate\"></ bizdoc-color-picker>\r\n    }-->\r\n  </mat-menu>\r\n  &nbsp;\r\n  <button mat-icon-button [matMenuTriggerFor]=\"alignMenu\" [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\" [bizdocTooltip]=\"'Align'|translate\">\r\n    <span class=\"e-icons\" [ngClass]=\"{'e-border-top': alignment === 'Top',\r\n          'e-border-left': alignment === 'Left',\r\n          'e-border-center': alignment === 'Center',\r\n          'e-border-bottom': alignment === 'Bottom',\r\n          'e-border-right': alignment === 'Right'}\"></span>\r\n  </button>\r\n  <mat-menu #alignMenu overlayPanelClass=\"icon-menu-panel\">\r\n    <button mat-menu-item (click)=\"align('Top')\">\r\n      <span class=\"e-icons e-border-top\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Left')\">\r\n      <span class=\"e-icons e-border-left\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Center')\">\r\n      <span class=\"e-icons e-border-center\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Right')\">\r\n      <span class=\"e-icons e-border-right\"></span>\r\n    </button>\r\n    <button mat-menu-item (click)=\"align('Bottom')\">\r\n      <span class=\"e-icons e-border-bottom\"></span>\r\n    </button>\r\n  </mat-menu>\r\n  <button mat-icon-button (click)=\"boldChange()\" [bizdocTooltip]=\"'Bold' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_bold</mat-icon></button>\r\n  <button mat-icon-button (click)=\"italicChange()\" [bizdocTooltip]=\"'Italic' | translate\" [disabled]=\"diagram.selectedItems?.connectors.length === 0 && diagram.selectedItems?.nodes.length === 0\"><mat-icon>format_italic</mat-icon></button>\r\n  <button mat-icon-button [matMenuTriggerFor]=\"sizeMenu\"\r\n          [disabled]=\"diagram.selectedItems?.nodes.length === 0 && diagram.selectedItems?.connectors.length === 0\"\r\n          [bizdocTooltip]=\"'FontSize'|translate\">\r\n    <mat-icon>format_size</mat-icon>\r\n  </button>\r\n  <mat-menu #sizeMenu overlayPanelClass=\"icon-menu-panel\">\r\n    @for (size of fontSizes; track size) {\r\n    <button mat-menu-item (click)=\"fontSizeChange(size)\">\r\n      {{size}}\r\n    </button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"cursorMode()\" [bizdocTooltip]=\"'Cursor' | translate\"><mat-icon>arrow_selector_tool</mat-icon></button>\r\n  <button mat-icon-button (click)=\"panMode()\" [bizdocTooltip]=\"'Pan' | translate\"><mat-icon>pan_tool</mat-icon></button>\r\n  <button mat-icon-button (click)=\"diagram.fitToPage()\" [bizdocTooltip]=\"'FitToPage' | translate\"><mat-icon>fullscreen_exit</mat-icon></button>\r\n</mat-toolbar>\r\n<div class=\"row container\">\r\n  <div id=\"symbolpalette\" [style.display]=\"tools?'':'none'\">\r\n    <div dir=\"ltr\" #symbolPaletteEl>\r\n    </div>\r\n  </div>\r\n  <div #diagramEl id=\"diagram\" class=\"flex\" dir=\"ltr\">\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;flex-grow:1;height:100%}.container{-webkit-flex-grow:1;flex-grow:1;overflow-y:auto}#diagram{-webkit-flex-grow:1;flex-grow:1}#symbolpalette{width:210px}::ng-deep .e-rtl{direction:ltr}::ng-deep .mat-toolbar .mat-button-toggle{background:transparent!important}::ng-deep .mat-mdc-menu-panel{min-width:0!important}.tools-divider:after{content:\"|\";opacity:.6;margin:0 2px}.e-icons{font-size:16px}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: SystemService }, { type: PaneRef }, { type: PanesRouter }, { type: SessionService }, { type: TranslateService }], propDecorators: { symbolPaletteEl: [{
                 type: ViewChild,
                 args: ['symbolPaletteEl', { static: true }]
@@ -21728,11 +21728,11 @@ class ComposeMobileComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ComposeMobileComponent, deps: [{ token: WindowTitleService }, { token: SessionService }, { token: i1$2.Router }, { token: i1$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ComposeMobileComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "comments", first: true, predicate: CommentsComponent, descendants: true }, { propertyName: "drawer", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-icon-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Submit' | translate\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-icon-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"form.actions[0].title\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">{{form.actions[0].icon || 'send'}}</mat-icon>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-icon-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionmenu\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Send' | translate\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionmenu>\r\n    @for (a of form.actions | sort : 'group'; track a; let i = $index) {\r\n    @if (i > 0 && form.actions[i-1].group !== a.group) {\r\n    <mat-divider></mat-divider>\r\n    }\r\n    <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"form.save().subscribe()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"(model.draft ? 'SaveDraft' : 'Save') | translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon class=\"filled\">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon class=\"filled\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && !model.completed && model.pending) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"toggle('comments')\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon class=\"filled\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"toggle('insights')\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\">\r\n  <mat-sidenav-content>\r\n    <bizdoc-form [model]=model #form (validChange)=\"valid=$event\"\r\n                 (workingChange)=\"working=$event\" [page]=\"page\"\r\n                 (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n  </mat-sidenav-content>\r\n  <mat-sidenav mode=\"over\" position=\"end\" [opened]=\"false\" #drawer autoFocus=\"false\" class=\"side-nav\">\r\n    @switch (viewMode) {\r\n    @case ('insights') {\r\n    <bizdoc-document-insights [model]=\"model\"></bizdoc-document-insights>\r\n    }\r\n    @default {\r\n    <bizdoc-comments [model]=\"model\"></bizdoc-comments>\r\n    }\r\n    }\r\n  </mat-sidenav>\r\n</mat-sidenav-container>\r\n", styles: [".page-container ::ng-deep form{padding:6px}.side-nav{min-width:280px}\n"], dependencies: [{ kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: "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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: DocumentViewsComponent, selector: "bizdoc-document-insights", inputs: ["model"] }, { kind: "component", type: CommentsComponent, selector: "bizdoc-comments", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "page", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange", "saved"] }, { 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" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: ComposeMobileComponent, selector: "ng-component", viewQueries: [{ propertyName: "form", first: true, predicate: ComposeFormComponent, descendants: true, static: true }, { propertyName: "comments", first: true, predicate: CommentsComponent, descendants: true }, { propertyName: "drawer", first: true, predicate: MatSidenav, descendants: true, static: true }], ngImport: i0, template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-icon-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Submit' | translate\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-icon-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"form.actions[0].title\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">{{form.actions[0].icon || 'send'}}</mat-icon>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-icon-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionmenu\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Send' | translate\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionmenu>\r\n    @for (a of form.actions | sort : 'group'; track a; let i = $index) {\r\n    @if (i > 0 && form.actions[i-1].group !== a.group) {\r\n    <mat-divider></mat-divider>\r\n    }\r\n    <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"form.save().subscribe()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"(model.draft ? 'SaveDraft' : 'Save') | translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"model.tags && model.tags.length\">bookmark</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && !model.completed && model.pending) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"toggle('comments')\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon class=\"filled\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"toggle('insights')\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\">\r\n  <mat-sidenav-content>\r\n    <bizdoc-form [model]=model #form (validChange)=\"valid=$event\"\r\n                 (workingChange)=\"working=$event\" [page]=\"page\"\r\n                 (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n  </mat-sidenav-content>\r\n  <mat-sidenav mode=\"over\" position=\"end\" [opened]=\"false\" #drawer autoFocus=\"false\" class=\"side-nav\">\r\n    @switch (viewMode) {\r\n    @case ('insights') {\r\n    <bizdoc-document-insights [model]=\"model\"></bizdoc-document-insights>\r\n    }\r\n    @default {\r\n    <bizdoc-comments [model]=\"model\"></bizdoc-comments>\r\n    }\r\n    }\r\n  </mat-sidenav>\r\n</mat-sidenav-container>\r\n", styles: [".page-container ::ng-deep form{padding:6px}.side-nav{min-width:280px}\n"], dependencies: [{ kind: "directive", type: i11.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { 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: "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.MatMenuContent, selector: "ng-template[matMenuContent]" }, { 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: DocumentViewsComponent, selector: "bizdoc-document-insights", inputs: ["model"] }, { kind: "component", type: CommentsComponent, selector: "bizdoc-comments", inputs: ["model"], outputs: ["change"] }, { kind: "component", type: ComposeFormComponent, selector: "bizdoc-form", inputs: ["model", "working", "dirty", "valid", "page", "mode", "contacts"], outputs: ["modelChange", "workingChange", "dirtyChange", "validChange", "saved"] }, { 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: ComposeMobileComponent, decorators: [{
             type: Component,
-            args: [{ template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-icon-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Submit' | translate\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-icon-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"form.actions[0].title\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">{{form.actions[0].icon || 'send'}}</mat-icon>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-icon-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionmenu\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Send' | translate\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionmenu>\r\n    @for (a of form.actions | sort : 'group'; track a; let i = $index) {\r\n    @if (i > 0 && form.actions[i-1].group !== a.group) {\r\n    <mat-divider></mat-divider>\r\n    }\r\n    <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"form.save().subscribe()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"(model.draft ? 'SaveDraft' : 'Save') | translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon class=\"filled\">{{model.tags && model.tags.length ?'bookmark':'bookmark_border'}}</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon class=\"filled\">{{model.flag ? 'star' : 'star_border'}}</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && !model.completed && model.pending) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"toggle('comments')\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon class=\"filled\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"toggle('insights')\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\">\r\n  <mat-sidenav-content>\r\n    <bizdoc-form [model]=model #form (validChange)=\"valid=$event\"\r\n                 (workingChange)=\"working=$event\" [page]=\"page\"\r\n                 (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n  </mat-sidenav-content>\r\n  <mat-sidenav mode=\"over\" position=\"end\" [opened]=\"false\" #drawer autoFocus=\"false\" class=\"side-nav\">\r\n    @switch (viewMode) {\r\n    @case ('insights') {\r\n    <bizdoc-document-insights [model]=\"model\"></bizdoc-document-insights>\r\n    }\r\n    @default {\r\n    <bizdoc-comments [model]=\"model\"></bizdoc-comments>\r\n    }\r\n    }\r\n  </mat-sidenav>\r\n</mat-sidenav-container>\r\n", styles: [".page-container ::ng-deep form{padding:6px}.side-nav{min-width:280px}\n"] }]
+            args: [{ template: "<mat-toolbar class=\"nav-toolbar\">\r\n  @if (page !== undefined) {\r\n  <button mat-icon-button (click)=\"form.back()\" [bizdocTooltip]=\"'Back'|translate\" tabindex=\"1\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon>\r\n  </button>\r\n  }\r\n  @if (model.draft) {\r\n  <button mat-icon-button color=\"primary\" data-help=\"submit\"\r\n          (click)=\"submit()\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Submit' | translate\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n  </button>\r\n  }\r\n  @if (form.actions.length === 1) {\r\n  <button mat-icon-button color=\"primary\" [attr.data-help]=\"'action-'+form.actions[0].name\" (click)=\"send(model.actions[0])\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"form.actions[0].title\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">{{form.actions[0].icon || 'send'}}</mat-icon>\r\n  </button>\r\n  }\r\n  @else if (form.actions.length > 1) {\r\n  <button mat-icon-button data-help=\"send\" color=\"primary\" [matMenuTriggerFor]=\"actionmenu\" [disabled]=\"!valid||working\" [bizdocTooltip]=\"'Send' | translate\">\r\n    <mat-icon class=\"mat-icon-rtl-mirror\">send</mat-icon>\r\n  </button>\r\n  }\r\n  <!-- action -->\r\n  <mat-menu #actionmenu>\r\n    @for (a of form.actions | sort : 'group'; track a; let i = $index) {\r\n    @if (i > 0 && form.actions[i-1].group !== a.group) {\r\n    <mat-divider></mat-divider>\r\n    }\r\n    <button mat-menu-item (click)=\"send(a.name)\">{{a.title}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (mode === 'compose') {\r\n  <button mat-icon-button (click)=\"form.save().subscribe()\" data-help=\"save\" [disabled]=\"!dirty||working\" [bizdocTooltip]=\"(model.draft ? 'SaveDraft' : 'Save') | translate\">\r\n    <mat-icon>save</mat-icon>\r\n  </button>\r\n  }\r\n  <button mat-icon-button data-help=\"tag\" (click)=\"form.tag($event)\" [bizdocTooltip]=\"'Tags' | translate\" [disabled]=\"working\"><mat-icon [class.filled]=\"model.tags && model.tags.length\">bookmark</mat-icon></button>\r\n  <button mat-icon-button data-help=\"flag\" [bizdocTooltip]=\"'Flagged'| translate\" [disabled]=\"working\" (click)=\"form.flag()\"><mat-icon [class.filled]=\"model.flag\">star</mat-icon></button>\r\n  <button mat-icon-button (click)=\"form.attach()\" data-help=\"attach\" [bizdocTooltip]=\"'AttachFile' | translate\" [disabled]=\"working\"><mat-icon>attach_file</mat-icon></button>\r\n  @if (mode !== 'compose' && !model.completed && model.pending) {\r\n  <button mat-icon-button [disabled]=\"working\" data-help=\"edit\" (click)=\"edit()\" [bizdocTooltip]=\"'Edit' | translate\"><mat-icon>create</mat-icon></button>\r\n  }\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"toggle('comments')\" data-help=\"comments\" [bizdocTooltip]=\"'Comments' | translate\" [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\">\r\n    <mat-icon class=\"filled\">format_quote</mat-icon>\r\n  </button>\r\n  @if (enableInsights) {\r\n  <button mat-icon-button (click)=\"toggle('insights')\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insight' | translate\" class=\"tool\"><mat-icon>data_usage</mat-icon></button>\r\n  }\r\n  <button mat-icon-button [matMenuTriggerFor]=\"optionsMenu\" [bizdocTooltip]=\"'Options' | translate\" [attr.aria-label]=\"'Options' | translate\"><mat-icon>more_vert</mat-icon></button>\r\n  <mat-menu #optionsMenu=\"matMenu\">\r\n    <ng-template matMenuContent>\r\n      <button mat-menu-item (click)=\"form.copy()\" [disabled]=\"working\">\r\n        <!--<mat-icon>content_copy</mat-icon>-->\r\n        <span>{{'Copy' | translate}}</span>\r\n      </button>\r\n      @if (model.draft && !model.issued) {\r\n      <button mat-menu-item (click)=\"discard()\" [disabled]=\"working\">\r\n        <!--<mat-icon>delete_outlined</mat-icon>-->\r\n        <span>{{'Discard' | translate}}</span>\r\n      </button>\r\n      }\r\n      @if (form.help) {\r\n      <mat-divider></mat-divider>\r\n      <button mat-menu-item (click)=\"form.guide(form.help)\">\r\n        <!--<mat-icon>help_outline</mat-icon>-->\r\n        <span>{{'Help' | translate}}</span>\r\n      </button>\r\n      }\r\n    </ng-template>\r\n  </mat-menu>\r\n</mat-toolbar>\r\n<mat-sidenav-container class=\"page-container\">\r\n  <mat-sidenav-content>\r\n    <bizdoc-form [model]=model #form (validChange)=\"valid=$event\"\r\n                 (workingChange)=\"working=$event\" [page]=\"page\"\r\n                 (dirtyChange)=\"dirty=$event\" [mode]=\"mode\"></bizdoc-form>\r\n  </mat-sidenav-content>\r\n  <mat-sidenav mode=\"over\" position=\"end\" [opened]=\"false\" #drawer autoFocus=\"false\" class=\"side-nav\">\r\n    @switch (viewMode) {\r\n    @case ('insights') {\r\n    <bizdoc-document-insights [model]=\"model\"></bizdoc-document-insights>\r\n    }\r\n    @default {\r\n    <bizdoc-comments [model]=\"model\"></bizdoc-comments>\r\n    }\r\n    }\r\n  </mat-sidenav>\r\n</mat-sidenav-container>\r\n", styles: [".page-container ::ng-deep form{padding:6px}.side-nav{min-width:280px}\n"] }]
         }], ctorParameters: () => [{ type: WindowTitleService }, { type: SessionService }, { type: i1$2.Router }, { type: i1$2.ActivatedRoute }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [ComposeFormComponent, { static: true }]
@@ -22366,9 +22366,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+CircularGauge.Inject(Annotations, GaugeTooltip, Legend$1);
 class SyncfusionCircularGaugeModule {
     constructor() {
-        CircularGauge.Inject(Annotations, GaugeTooltip, Legend$1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SyncfusionCircularGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.5", ngImport: i0, type: SyncfusionCircularGaugeModule, imports: [CircularGaugeModule], exports: [CircularGaugeModule] }); }
@@ -24536,7 +24536,7 @@ let CubeDocumentsWidget = class CubeDocumentsWidget {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CubeDocumentsWidget, deps: [{ token: RouterImpl }, { token: MailboxService }, { token: PromptService }, { token: WidgetRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: CubeDocumentsWidget, selector: "ng-component", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z0\" matSort @list>\r\n  <ng-container matColumnDef=\"number\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Number' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <a (click)=\"open(element)\">#{{element.number}}</a></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"subject\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\" class=\"text\"> {{element.subject}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Status' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.state | state }} </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row @item *matRowDef=\"let row; columns: columns;\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n"], dependencies: [{ kind: "component", type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$2.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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: StatePipe, name: "state" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.5", type: CubeDocumentsWidget, selector: "ng-component", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z0\" matSort @list>\r\n  <ng-container matColumnDef=\"number\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Number' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <a (click)=\"open(element)\">#{{element.number}}</a></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"subject\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\" class=\"text\"> {{element.subject}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Status' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.state | state }} </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row @item *matRowDef=\"let row; columns: columns;\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}padd :host:hover{overflow-y:auto!important}\n"], dependencies: [{ kind: "component", type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$2.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: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: StatePipe, name: "state" }], animations: [
             listAnimation,
             itemAnimation
         ] }); }
@@ -24552,7 +24552,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             args: [{ animations: [
                         listAnimation,
                         itemAnimation
-                    ], template: "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z0\" matSort @list>\r\n  <ng-container matColumnDef=\"number\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Number' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <a (click)=\"open(element)\">#{{element.number}}</a></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"subject\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\" class=\"text\"> {{element.subject}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Status' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.state | state }} </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row @item *matRowDef=\"let row; columns: columns;\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n"] }]
+                    ], template: "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z0\" matSort @list>\r\n  <ng-container matColumnDef=\"number\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Number' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <a (click)=\"open(element)\">#{{element.number}}</a></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"subject\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\" class=\"text\"> {{element.subject}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Status' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> {{element.state | state }} </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row @item *matRowDef=\"let row; columns: columns;\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}padd :host:hover{overflow-y:auto!important}\n"] }]
         }], ctorParameters: () => [{ type: RouterImpl }, { type: MailboxService }, { type: PromptService }, { type: WidgetRef }], propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -24664,7 +24664,7 @@ let RecentsWidget = class RecentsWidget {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: RecentsWidget, deps: [{ token: RouterImpl }, { token: MailboxService }, { token: PromptService }, { token: WidgetRef }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: RecentsWidget, selector: "ng-component", host: { properties: { "style.height": "this.height" } }, ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"number\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Number' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\"> <a (click)=\"open(item)\">#{{item.number}}</a> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"subject\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\" class=\"text\"> {{item.subject}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Status' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\"> {{item.stateId | state }} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"option\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let item\">\r\n      @if (!item.loading) {\r\n      @if (enableInsights) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insights' | translate\" class=\"tool\" matAnimate=\"rotate\"><mat-icon>data_usage</mat-icon></button>\r\n      }\r\n      <button mat-icon-button (click)=\"open(item)\" [bizdocTooltip]=\"'Open' | translate\" [attr.aria-label]=\"'Open' | translate\" class=\"tool\"><mat-icon>more_horiz</mat-icon></button>\r\n      } @else {\r\n      <mat-spinner diameter=\"26\"></mat-spinner>\r\n      }\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row @item *matRowDef=\"let row; columns: columns;\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", ":host ::ng-deep tr .tool{opacity:.1}:host ::ng-deep tr:hover .tool{opacity:1}\n"], dependencies: [{ kind: "component", type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: StatePipe, name: "state" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: RecentsWidget, selector: "ng-component", host: { properties: { "style.height": "this.height" } }, ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"number\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Number' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\"> <a (click)=\"open(item)\">#{{item.number}}</a> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"subject\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\" class=\"text\"> {{item.subject}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Status' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\"> {{item.stateId | state }} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"option\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let item\">\r\n      @if (!item.loading) {\r\n      @if (enableInsights) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insights' | translate\" class=\"tool\" matAnimate=\"rotate\"><mat-icon>data_usage</mat-icon></button>\r\n      }\r\n      <button mat-icon-button (click)=\"open(item)\" [bizdocTooltip]=\"'Open' | translate\" [attr.aria-label]=\"'Open' | translate\" class=\"tool\"><mat-icon>more_horiz</mat-icon></button>\r\n      } @else {\r\n      <mat-spinner diameter=\"26\"></mat-spinner>\r\n      }\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row @item *matRowDef=\"let row; columns: columns;\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}padd :host:hover{overflow-y:auto!important}\n", ":host ::ng-deep tr .tool{opacity:.1}:host ::ng-deep tr:hover .tool{opacity:1}\n"], dependencies: [{ kind: "component", type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: MatIconAnimate, selector: "[matAnimate]" }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: StatePipe, name: "state" }], animations: [
             listAnimation,
             itemAnimation
         ] }); }
@@ -24680,7 +24680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             args: [{ animations: [
                         listAnimation,
                         itemAnimation
-                    ], template: "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"number\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Number' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\"> <a (click)=\"open(item)\">#{{item.number}}</a> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"subject\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\" class=\"text\"> {{item.subject}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Status' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\"> {{item.stateId | state }} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"option\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let item\">\r\n      @if (!item.loading) {\r\n      @if (enableInsights) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insights' | translate\" class=\"tool\" matAnimate=\"rotate\"><mat-icon>data_usage</mat-icon></button>\r\n      }\r\n      <button mat-icon-button (click)=\"open(item)\" [bizdocTooltip]=\"'Open' | translate\" [attr.aria-label]=\"'Open' | translate\" class=\"tool\"><mat-icon>more_horiz</mat-icon></button>\r\n      } @else {\r\n      <mat-spinner diameter=\"26\"></mat-spinner>\r\n      }\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row @item *matRowDef=\"let row; columns: columns;\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", ":host ::ng-deep tr .tool{opacity:.1}:host ::ng-deep tr:hover .tool{opacity:1}\n"] }]
+                    ], template: "<table mat-table [dataSource]=\"dataSource\" class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"number\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Number' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\"> <a (click)=\"open(item)\">#{{item.number}}</a> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"subject\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Subject' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\" class=\"text\"> {{item.subject}} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"state\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Status' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let item\"> {{item.stateId | state }} </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"option\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let item\">\r\n      @if (!item.loading) {\r\n      @if (enableInsights) {\r\n      <button mat-icon-button (click)=\"insights(item, $event)\" [bizdocTooltip]=\"'Insights' | translate\" [attr.aria-label]=\"'Insights' | translate\" class=\"tool\" matAnimate=\"rotate\"><mat-icon>data_usage</mat-icon></button>\r\n      }\r\n      <button mat-icon-button (click)=\"open(item)\" [bizdocTooltip]=\"'Open' | translate\" [attr.aria-label]=\"'Open' | translate\" class=\"tool\"><mat-icon>more_horiz</mat-icon></button>\r\n      } @else {\r\n      <mat-spinner diameter=\"26\"></mat-spinner>\r\n      }\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row @item *matRowDef=\"let row; columns: columns;\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}padd :host:hover{overflow-y:auto!important}\n", ":host ::ng-deep tr .tool{opacity:.1}:host ::ng-deep tr:hover .tool{opacity:1}\n"] }]
         }], ctorParameters: () => [{ type: RouterImpl }, { type: MailboxService }, { type: PromptService }, { type: WidgetRef }, { type: SessionService }], propDecorators: { height: [{
                 type: HostBinding,
                 args: ['style.height']
@@ -24925,7 +24925,7 @@ let CompareGroupsWidget = class CompareGroupsWidget {
                 size: '0px'
             },
             titleStyle: {
-                //fontWeight: '500',
+                fontWeight: '400',
                 //size: '14px',
                 fontFamily: FONT_FAMILY,
             },
@@ -25303,7 +25303,7 @@ let PendingResultsWidget = class PendingResultsWidget {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: PendingResultsWidget, deps: [{ token: WidgetRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: PendingResultsWidget, selector: "bizdoc-pending-results", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> @if (element.standard) {\r\n      <span [bizdocTooltip]=\"element.standard|amDurationFormat\">{{ element.standard | amDuration: 's' }}</span>\r\n    } </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>\r\n  .range {\r\n  white-space: nowrap;\r\n}\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", "\n  .range {\n  white-space: nowrap;\n}\n"], dependencies: [{ kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$2.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: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: DurationFormatPipe, name: "amDurationFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: PendingResultsWidget, selector: "bizdoc-pending-results", host: { properties: { "style.height": "this.height" } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> @if (element.standard) {\r\n      <span [bizdocTooltip]=\"element.standard|amDurationFormat\">{{ element.standard | amDuration: 's' }}</span>\r\n    } </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>\r\n  .range {\r\n  white-space: nowrap;\r\n}\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}padd :host:hover{overflow-y:auto!important}\n", "\n  .range {\n  white-space: nowrap;\n}\n"], dependencies: [{ kind: "directive", type: i7.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "component", type: i5$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5$2.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: IdentityName, selector: "bizdoc-identity-name", inputs: ["identity", "by", "chating"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: DurationPipe, name: "amDuration" }, { kind: "pipe", type: DurationFormatPipe, name: "amDurationFormat" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
             listAnimation,
             itemAnimation
         ] }); }
@@ -25318,7 +25318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             args: [{ selector: 'bizdoc-pending-results', animations: [
                         listAnimation,
                         itemAnimation
-                    ], template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> @if (element.standard) {\r\n      <span [bizdocTooltip]=\"element.standard|amDurationFormat\">{{ element.standard | amDuration: 's' }}</span>\r\n    } </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>\r\n  .range {\r\n  white-space: nowrap;\r\n}\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}:host:hover{overflow-y:auto!important}\n", "\n  .range {\n  white-space: nowrap;\n}\n"] }]
+                    ], template: "<table mat-table [dataSource]=\"dataSource\" matSort class=\"mat-elevation-z0\" @list>\r\n  <ng-container matColumnDef=\"name\">\r\n    <th mat-header-cell *matHeaderCellDef> {{'Name' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <bizdoc-identity-name [identity]='element.userId' chating=\"room\"></bizdoc-identity-name></td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"duration\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Duration' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> <span [bizdocTooltip]='element.duration|amDurationFormat'>{{ element.duration | amDuration : 's' }}</span> </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"standard\">\r\n    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'Standard' | translate}} </th>\r\n    <td mat-cell *matCellDef=\"let element\"> @if (element.standard) {\r\n      <span [bizdocTooltip]=\"element.standard|amDurationFormat\">{{ element.standard | amDuration: 's' }}</span>\r\n    } </td>\r\n  </ng-container>\r\n\r\n  <ng-container matColumnDef=\"count\">\r\n    <th mat-header-cell *matHeaderCellDef> </th>\r\n    <td mat-cell *matCellDef=\"let element\" dir=\"ltr\">\r\n      <span class=\"range\">{{ element.processed }} / {{element.pending + element.processed}}</span>\r\n    </td>\r\n  </ng-container>\r\n\r\n  <tr mat-header-row *matHeaderRowDef=\"columns; sticky: true\"></tr>\r\n  <tr mat-row *matRowDef=\"let row; columns: columns;\" @item></tr>\r\n</table>\r\n<style scoped>\r\n  .range {\r\n  white-space: nowrap;\r\n}\r\n</style>\r\n", styles: ["table{width:100%}td.text{text-overflow:ellipsis;max-width:100px;white-space:nowrap;overflow:hidden}:host{overflow:hidden;display:block}padd :host:hover{overflow-y:auto!important}\n", "\n  .range {\n  white-space: nowrap;\n}\n"] }]
         }], ctorParameters: () => [{ type: WidgetRef }], propDecorators: { sort: [{
                 type: ViewChild,
                 args: [MatSort]
@@ -25327,7 +25327,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 args: ['style.height']
             }] } });
 
-CircularGauge$1.Inject(Annotations, GaugeTooltip, Legend$2);
 let PersonalScoreWidget = class PersonalScoreWidget {
     constructor(ref, _session, _duration, _elementRef, _translate) {
         this._session = _session;
@@ -28198,7 +28197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                 args: [CubeMatrixComponent, { static: true }]
             }] } });
 
-let CubeDocumentViewComponent = class CubeDocumentViewComponent extends CubeBase {
+let CubeInsightComponent = class CubeInsightComponent extends CubeBase {
     constructor(session, viewRef, service, _popup, _router, _guide) {
         super(viewRef, service, session, true);
         this._popup = _popup;
@@ -28260,15 +28259,15 @@ let CubeDocumentViewComponent = class CubeDocumentViewComponent extends CubeBase
             evt && evt.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CubeDocumentViewComponent, deps: [{ token: SessionService }, { token: DocumentViewRef }, { token: CubeService }, { token: Popup }, { token: RouterImpl }, { token: GuideService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: CubeDocumentViewComponent, selector: "ng-component", viewQueries: [{ propertyName: "viewPane", first: true, predicate: CubeViewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (hasdata) {\r\n  <div class=\"nav-toolbar\">\r\n    @if (view.guide) {\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    }\r\n    @if (alternate) {\r\n      <button mat-button [matMenuTriggerFor]=\"cmenu\">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #cmenu>\r\n        @for (a of alternate; track a) {\r\n          <button mat-menu-item\r\n            (click)=\"switchTo(a)\">\r\n            {{a.title}}\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\r\n    <mat-menu #pmenu>\r\n      @for (p of patterns; track p) {\r\n        <button mat-menu-item (click)=\"patternChange(p)\">\r\n          {{p.title}}\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n    <button mat-icon-button (click)=\"filterToggle($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\"><mat-icon>filter_list</mat-icon></button>\r\n  </div>\r\n  @if (loading) {\r\n    <div class=\"loading-view\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n  <bizdoc-cube-view [filters]=\"axes\" #vp\r\n    (explore)=\"explore($event)\"\r\n    [cube]=\"cube\"\r\n    [view]=\"view\"\r\n  (loading)=\"loading = $event\"></bizdoc-cube-view>\r\n} @else {\r\n  <bizdoc-none icon=\"equalizer\" subtitle=\"NothingHere\"></bizdoc-none>\r\n}\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%;min-height:220px}:host ::ng-deep .cube-view{flex:1 auto}\n"], dependencies: [{ kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "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: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: CubeViewComponent, selector: "bizdoc-cube-view", inputs: ["filters", "cube", "view", "loading"], outputs: ["explore", "loadingChange"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CubeInsightComponent, deps: [{ token: SessionService }, { token: DocumentViewRef }, { token: CubeService }, { token: Popup }, { token: RouterImpl }, { token: GuideService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: CubeInsightComponent, selector: "ng-component", viewQueries: [{ propertyName: "viewPane", first: true, predicate: CubeViewComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (hasdata) {\r\n  <div class=\"nav-toolbar\">\r\n    @if (view.guide) {\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    }\r\n    @if (alternate) {\r\n      <button mat-button [matMenuTriggerFor]=\"cmenu\">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #cmenu>\r\n        @for (a of alternate; track a) {\r\n          <button mat-menu-item\r\n            (click)=\"switchTo(a)\">\r\n            {{a.title}}\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\r\n    <mat-menu #pmenu>\r\n      @for (p of patterns; track p) {\r\n        <button mat-menu-item (click)=\"patternChange(p)\">\r\n          {{p.title}}\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n    <button mat-icon-button (click)=\"filterToggle($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\"><mat-icon>filter_list</mat-icon></button>\r\n  </div>\r\n  @if (loading) {\r\n    <div class=\"loading-view\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n  <bizdoc-cube-view [filters]=\"axes\" #vp\r\n    (explore)=\"explore($event)\"\r\n    [cube]=\"cube\"\r\n    [view]=\"view\"\r\n  (loading)=\"loading = $event\"></bizdoc-cube-view>\r\n} @else {\r\n  <bizdoc-none icon=\"equalizer\" subtitle=\"NothingHere\"></bizdoc-none>\r\n}\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%;min-height:220px}:host ::ng-deep .cube-view{flex:1 auto}\n"], dependencies: [{ kind: "component", type: i7$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: "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: NoneComponent, selector: "bizdoc-none", inputs: ["title", "subtitle", "icon"] }, { kind: "component", type: CubeViewComponent, selector: "bizdoc-cube-view", inputs: ["filters", "cube", "view", "loading"], outputs: ["explore", "loadingChange"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
-CubeDocumentViewComponent = __decorate([
+CubeInsightComponent = __decorate([
     BizDoc({
         selector: 'bizdoc-cube-view'
     })
-], CubeDocumentViewComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CubeDocumentViewComponent, decorators: [{
+], CubeInsightComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: CubeInsightComponent, decorators: [{
             type: Component,
             args: [{ template: "@if (hasdata) {\r\n  <div class=\"nav-toolbar\">\r\n    @if (view.guide) {\r\n      <button mat-icon-button (click)=\"guide()\" [bizdocTooltip]=\"'Help' | translate\"><mat-icon>help_outline</mat-icon></button>\r\n    }\r\n    @if (alternate) {\r\n      <button mat-button [matMenuTriggerFor]=\"cmenu\">{{cube.title}} <mat-icon>arrow_drop_down</mat-icon></button>\r\n      <mat-menu #cmenu>\r\n        @for (a of alternate; track a) {\r\n          <button mat-menu-item\r\n            (click)=\"switchTo(a)\">\r\n            {{a.title}}\r\n          </button>\r\n        }\r\n      </mat-menu>\r\n    }\r\n    <span class=\"divider\"></span>\r\n    <button mat-icon-button [matMenuTriggerFor]=\"pmenu\" [bizdocTooltip]=\"'Patterns' | translate\" [disabled]=\"!patterns?.length\" data-help=\"pattern\"><mat-icon [class.filled]=\"pattern\">filter_alt</mat-icon></button>\r\n    <mat-menu #pmenu>\r\n      @for (p of patterns; track p) {\r\n        <button mat-menu-item (click)=\"patternChange(p)\">\r\n          {{p.title}}\r\n        </button>\r\n      }\r\n    </mat-menu>\r\n    <button mat-icon-button (click)=\"clearFilter()\" [bizdocTooltip]=\"'Clear' | translate\" [disabled]=\"!anyFilters\"><mat-icon>clear_all</mat-icon></button>\r\n    <button mat-icon-button (click)=\"filterToggle($event)\" [bizdocTooltip]=\"'Filter' | translate\" [disabled]=\"!anyAxes\" data-help=\"filter\"><mat-icon>filter_list</mat-icon></button>\r\n  </div>\r\n  @if (loading) {\r\n    <div class=\"loading-view\">\r\n      <mat-spinner color=\"accent\"></mat-spinner>\r\n    </div>\r\n  }\r\n  <bizdoc-cube-view [filters]=\"axes\" #vp\r\n    (explore)=\"explore($event)\"\r\n    [cube]=\"cube\"\r\n    [view]=\"view\"\r\n  (loading)=\"loading = $event\"></bizdoc-cube-view>\r\n} @else {\r\n  <bizdoc-none icon=\"equalizer\" subtitle=\"NothingHere\"></bizdoc-none>\r\n}\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;height:100%;min-height:220px}:host ::ng-deep .cube-view{flex:1 auto}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: DocumentViewRef }, { type: CubeService }, { type: Popup }, { type: RouterImpl }, { type: GuideService }], propDecorators: { viewPane: [{
@@ -29562,7 +29561,8 @@ let CubePerformanceWidget = class CubePerformanceWidget {
             },
             labelFormat: '',
             titleStyle: {
-                fontFamily: FONT_FAMILY
+                fontFamily: FONT_FAMILY,
+                //fontWeight: '400'
             },
             title: this._translate.get('Duration'),
             //lineStyle: { width: 0 },
@@ -30711,7 +30711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
             }] } });
 
 /** configuration componenets */
-const CORE_COMPONENTS = [PerformanceWindComponent, PerformanceHiloComponent, CubePerformanceWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeDocumentViewComponent, CubePivotViewComponent, TimelineViewComponent,
+const CORE_COMPONENTS = [PerformanceWindComponent, PerformanceHiloComponent, CubePerformanceWidget, CubeParallelViewComponent, CubeExploreViewComponent, CubeChartViewComponent, CubeDocumentSumComponent, CubeDocumentMatrixComponent, CubeInsightComponent, CubePivotViewComponent, TimelineViewComponent,
     SubstitutionComponent, MoveToActionComponent, AssignActionComponent, ReturnActionComponent, ExploreDocumentComponent,
     ActionsWidget, CubeAnalysisWidget, CubeDocumentsWidget, RecentsWidget, PersonalActivityWidget,
     CompareGroupsWidget, PeersPerformanceWidget, PendingResultsWidget, PersonalScoreWidget, CubeWidgetFilterComponent,
@@ -30759,7 +30759,7 @@ class SharedModule {
             CubeParallelComponent, CubeSumComponent,
             CubeParallelViewComponent, CubeChartViewComponent, CubeExploreViewComponent, CubeDocumentSumComponent,
             ExploreItemImplComponent, DocumentInfoComponent, DocumentViewsComponent, ViewItemComponent, CubeDocumentMatrixComponent,
-            CubeDocumentViewComponent, CubePivotViewComponent, ActionPicker,
+            CubeInsightComponent, CubePivotViewComponent, ActionPicker,
             QuickCommentComponent,
             DurationFormatPipe, CombinationPicker, CombinationPickerBody, CombinationPool, TimelineViewComponent,
             MatIconAnimate, DateRangePipe, AgoPipe, StateDirective,
@@ -30938,7 +30938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImpor
                         CubeParallelComponent, CubeSumComponent,
                         CubeParallelViewComponent, CubeChartViewComponent, CubeExploreViewComponent, CubeDocumentSumComponent,
                         ExploreItemImplComponent, DocumentInfoComponent, DocumentViewsComponent, ViewItemComponent, CubeDocumentMatrixComponent,
-                        CubeDocumentViewComponent, CubePivotViewComponent, ActionPicker,
+                        CubeInsightComponent, CubePivotViewComponent, ActionPicker,
                         QuickCommentComponent,
                         DurationFormatPipe, CombinationPicker, CombinationPickerBody, CombinationPool, TimelineViewComponent,
                         MatIconAnimate, DateRangePipe, AgoPipe, StateDirective,
@@ -33863,11 +33863,11 @@ class IconPickerComponent {
         this._destroy.next();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconPickerComponent, deps: [{ token: i1$3.NgControl, optional: true, self: true }, { token: i1$1.Overlay }, { token: i1.HttpClient }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i7.Directionality }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: { value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\" type=\"button\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" autocomplete=\"off\"/>\r\n    <cdk-virtual-scroll-viewport itemSize=\"100\" class=\"categories\" templateCacheSize=\"0\">\r\n      @for (i of items; track i.name) {\r\n      <mat-icon (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      }\r\n      <!--<div *cdkVirtualFor=\"let c of categories; track: _trackBy\">\r\n    @for(i of c.items; track: _trackBy)){<mat-icon (click)=\"_pick(i)\">{{i.name}}</mat-icon>}\r\n  </div>-->\r\n    </cdk-virtual-scroll-viewport>\r\n</div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}.categories{height:300px;width:300px}\n"], dependencies: [{ kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i5$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: { value: "value", required: "required", disabled: "disabled" }, outputs: { valueChanges: "valueChanges" }, host: { properties: { "id": "this.id", "class.floating": "this.shouldLabelFloat", "attr.aria-describedby": "this.describedBy" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\" type=\"button\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" autocomplete=\"off\"/>\r\n    <cdk-virtual-scroll-viewport itemSize=\"100\" class=\"categories\" templateCacheSize=\"0\">\r\n      @for (i of items; track i.name) {\r\n      <i (click)=\"_pick(i)\" class=\"material-icons\">{{i.name}}</i>\r\n      }\r\n      <!--<div *cdkVirtualFor=\"let c of categories; track: _trackBy\">\r\n    @for(i of c.items; track: _trackBy)){<mat-icon (click)=\"_pick(i)\">{{i.name}}</mat-icon>}\r\n  </div>-->\r\n    </cdk-virtual-scroll-viewport>\r\n</div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}.categories{height:300px;width:300px}i{width:24px;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "component", type: i5$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: i8.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: IconPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizdoc-icon-picker', template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\" type=\"button\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" autocomplete=\"off\"/>\r\n    <cdk-virtual-scroll-viewport itemSize=\"100\" class=\"categories\" templateCacheSize=\"0\">\r\n      @for (i of items; track i.name) {\r\n      <mat-icon (click)=\"_pick(i)\">{{i.name}}</mat-icon>\r\n      }\r\n      <!--<div *cdkVirtualFor=\"let c of categories; track: _trackBy\">\r\n    @for(i of c.items; track: _trackBy)){<mat-icon (click)=\"_pick(i)\">{{i.name}}</mat-icon>}\r\n  </div>-->\r\n    </cdk-virtual-scroll-viewport>\r\n</div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}.categories{height:300px;width:300px}\n"] }]
+            args: [{ selector: 'bizdoc-icon-picker', template: "<button mat-button (click)=\"open()\" [disabled]=\"disabled\" type=\"button\">\r\n  <mat-icon>{{value}}</mat-icon>\r\n  <mat-icon>arrow_drop_down</mat-icon>\r\n</button>\r\n<ng-template>\r\n  <div class=\"icon-palette\">\r\n    <input matInput [formControl]=\"filter\" (keydown.escape)=\"_clear()\" autocomplete=\"off\"/>\r\n    <cdk-virtual-scroll-viewport itemSize=\"100\" class=\"categories\" templateCacheSize=\"0\">\r\n      @for (i of items; track i.name) {\r\n      <i (click)=\"_pick(i)\" class=\"material-icons\">{{i.name}}</i>\r\n      }\r\n      <!--<div *cdkVirtualFor=\"let c of categories; track: _trackBy\">\r\n    @for(i of c.items; track: _trackBy)){<mat-icon (click)=\"_pick(i)\">{{i.name}}</mat-icon>}\r\n  </div>-->\r\n    </cdk-virtual-scroll-viewport>\r\n</div>\r\n</ng-template>\r\n", styles: [".icon-palette{max-height:400px;overflow-y:auto;max-width:450px}.categories{height:300px;width:300px}i{width:24px;cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1$3.NgControl, decorators: [{
                     type: Optional
                 }, {