@bizdoc/core 3.6.1 → 3.6.3

package/fesm2022/bizdoc-core.mjs

@@ -3886,11 +3886,11 @@ class OptionsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OptionsComponent, deps: [{ token: PromptService }, { token: GuideService }, { token: HubService }, { token: i2$2.MatDialog }, { token: i1$2.FormBuilder }, { token: AccountService }, { token: PromptService }, { token: SessionService }, { token: Popup }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: OptionsComponent, isStandalone: false, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, host: { listeners: { "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "keyboard", first: true, predicate: ["keyboardTmpl"], descendants: true }, { propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n              @for (tag of form.value.tags; track tag.name) {\r\n              <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n                {{tag.name}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n              }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\" class=\"column\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    <span>{{u.name}}</span>\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"dates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                    @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                    }\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: OptionsComponent, isStandalone: false, selector: "bizdoc-options", inputs: { sectionName: ["section", "sectionName"] }, host: { listeners: { "document:keydown.escape": "close()" } }, viewQueries: [{ propertyName: "keyboard", first: true, predicate: ["keyboardTmpl"], descendants: true }, { propertyName: "substitueInput", first: true, predicate: ["substitueInput"], descendants: true, read: MatInput }, { propertyName: "grantInput", first: true, predicate: ["grantInput"], descendants: true, read: MatChipInput }, { propertyName: "oooTmpl", first: true, predicate: ["oooTmpl"], descendants: true, static: true }, { propertyName: "notificationsTmpl", first: true, predicate: ["notificationsTmpl"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n              @for (tag of form.value.tags; track tag.name) {\r\n              <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n                {{tag.name}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n              }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\" class=\"column\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    {{u.name}}\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"oooDates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                    @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                    }\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"], dependencies: [{ kind: "directive", type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i4.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$5.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$5.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i2$5.MatListSubheaderCssMatStyler, selector: "[mat-subheader], [matSubheader]" }, { kind: "component", type: i2$5.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i2$5.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i8.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.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: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: UserNamePipe, name: "userName" }], animations: [verticalSwapAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: OptionsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n              @for (tag of form.value.tags; track tag.name) {\r\n              <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n                {{tag.name}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n              }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\" class=\"column\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    <span>{{u.name}}</span>\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"dates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"dates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #dates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                    @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                    }\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-options', animations: [verticalSwapAnimation], template: "<div class=\"column\">\r\n    <div class=\"profile-name\">\r\n        <span class=\"mat-headline-6\">\r\n            @if (profile.byName) {\r\n            {{profile.byName}} \\\r\n            }\r\n            {{profile.name}}\r\n        </span>\r\n    </div>\r\n\r\n    <mat-divider />\r\n\r\n    <div class=\"row\">\r\n        <mat-nav-list class=\"nav-list\">\r\n            <mat-list-item (click)=\"nav('notifications', notificationsTmpl, 0)\" [class.active]=\"sectionName === 'notifications'\">\r\n                <span matListItemTitle>{{'Notifications' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('emails', emailsTmpl, 1)\" [class.active]=\"sectionName === 'emails'\">\r\n                <span matListItemTitle>{{'Emails' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('out_of_office', oooTmpl, 2)\" [class.active]=\"sectionName === 'out_of_office'\">\r\n                <span matListItemTitle>{{'OutOfOffice' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('grant_access', grantAccessTmpl, 3)\" [class.active]=\"sectionName === 'grant_access'\">\r\n                <span matListItemTitle>{{'GrantAccess' | translate}}</span>\r\n            </mat-list-item>\r\n            <mat-list-item (click)=\"nav('preferences', preferencesTmpl, 4)\" [class.active]=\"sectionName === 'preferences'\">\r\n                <span matListItemTitle>{{'Preferences' | translate}}</span>\r\n            </mat-list-item>\r\n        </mat-nav-list>\r\n        <div class=\"separator\"></div>\r\n        <form autocomplete=\"off\" [@v-swape]=\"sectionIndex\">\r\n            <ng-container *ngTemplateOutlet=\"sectionTmpl\"></ng-container>\r\n        </form>\r\n    </div>\r\n    <mat-divider />\r\n    <!--themes-->\r\n    @if (themes.length > 1) {\r\n    <div class=\"row center\">\r\n        @for (t of themes; track t) {\r\n        <button (click)=\"changeTheme(t)\" mat-icon-button class=\"theme\" [style.background]=\"t.color\" [class.active]=\"t.name === theme\" [class.dark]=\"t.dark\" [bizdocTooltip]=\"'Theme'|translate\"></button>\r\n        }\r\n    </div>\r\n    }\r\n</div>\r\n<!--guide-->\r\n<mat-nav-list role=\"list\">\r\n    <mat-divider></mat-divider>\r\n    <h3 mat-subheader [matBadge]=\"guidesCount\" matBadgeColor=\"accent\" matBadgeOverlap=\"false\" matBadgeSize=\"small\">{{'Help'|translate}}</h3>\r\n    @for (g of guides; track g) {\r\n    <button mat-menu-item (click)=\"guide(g.name)\">{{g.title}}</button>\r\n    }\r\n</mat-nav-list>\r\n<mat-divider></mat-divider>\r\n<!--footer-->\r\n<div class=\"row footer\">\r\n  <!--keys-->\r\n  @if(!isMobile) {\r\n  <button mat-button role=\"listitem\" (click)=\"showKeyboard($event)\">\r\n    {{'Keyboard' | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  }\r\n  <button mat-button role=\"listitem\" [matMenuTriggerFor]=\"language\">\r\n    {{currentLanguage | translate}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n    <!--'ChangeLanguage'-->\r\n  </button>\r\n  <mat-menu #language>\r\n    @for (l of languages; track l) {\r\n    <button mat-menu-item (click)=\"changeLanguage(l)\">{{l | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  @if (online) {\r\n  <button mat-button [matMenuTriggerFor]=\"availability\">\r\n    {{'ShowAs' | translate : (available | translate | lowercase)}}\r\n    <mat-icon>arrow_drop_down</mat-icon>\r\n  </button>\r\n  }\r\n  <mat-menu #availability>\r\n    @for (m of modes; track m) {\r\n    <button mat-menu-item (click)=\"setAvailable(m)\">{{m | translate}}</button>\r\n    }\r\n  </mat-menu>\r\n  <span class=\"divider\"></span>\r\n  <button mat-button role=\"listitem\" (click)=\"about()\">{{ 'About' | translate}}</button>\r\n  @if (!online) {\r\n  <button mat-icon-button (click)=\"revive()\" [bizdocTooltip]=\"'Connect'|translate\">\r\n    <mat-icon>wifi_off</mat-icon>\r\n  </button>\r\n  }\r\n</div>\r\n<!--preferences-->\r\n<ng-template #preferencesTmpl>\r\n    <div class=\"column\">\r\n        <mat-form-field>\r\n            <mat-label>{{'Tags'|translate}}</mat-label>\r\n            <mat-chip-grid #chips>\r\n              @for (tag of form.value.tags; track tag.name) {\r\n              <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(tag)\">\r\n                {{tag.name}}\r\n                <mat-icon matChipRemove>cancel</mat-icon>\r\n              </mat-chip-row>\r\n              }\r\n            </mat-chip-grid>\r\n            <input [matChipInputFor]=\"chips\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n                   [matChipInputAddOnBlur]=\"true\"\r\n                   (matChipInputTokenEnd)=\"addTag($event)\">\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!---->\r\n<ng-template #keyboardTmpl>\r\n  <dl class=\"keys mat-body-2\">\r\n    <dt>Alt+n</dt>\r\n    <dd>{{'AltNHelp'|translate}}</dd>\r\n    <dt>Ctrl+s</dt>\r\n    <dd>{{'CtrlSHelp'|translate}}</dd>\r\n    <dt>Alt+s</dt>\r\n    <dd>{{'AltSHelp'|translate}}</dd>\r\n    <dt>Alt+q</dt>\r\n    <dd>{{'AltQHelp'|translate}}</dd>\r\n    <dt>Alt+a</dt>\r\n    <dd>{{'AltAHelp'|translate}}</dd>\r\n    <dt>Alt+h</dt>\r\n    <dd>{{'AltHHelp'|translate}}</dd>\r\n    <dt>Ctrl+.</dt>\r\n    <dd>{{'CtrlDotHelp'|translate}}</dd>\r\n  </dl>\r\n</ng-template>\r\n<!--notifications-->\r\n<ng-template #notificationsTmpl>\r\n    <div [formGroup]=\"form.controls.notifications\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"myDocumentStateChange\">{{'MyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"anyDocumentStateChange\">{{'AnyStateChange' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentMyDocument\">{{'CommentMyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"commentAnyDocument\">{{'CommentAnyDocument' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"likes\" [style.display]=\"voting?'':'none'\">{{'LikedComment' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"tagged\">{{'TaggedInComments' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"upcomingEvents\">{{'UpcomingEvents' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"cubeAnomaly\">{{'CubeAnomaly' | translate}}</mat-checkbox>\r\n        <div formGroupName=\"extra\" class=\"column\"> \r\n            @for(n of profile.notifications; track n.name) {\r\n            <mat-checkbox [formControlName]=\"n.name\">{{n.title}}</mat-checkbox>\r\n            }\r\n        </div>\r\n        <div class=\"row\">\r\n            <span class=\"divider\"></span>\r\n            <button mat-icon-button type=\"button\" (click)=\"toggleSound()\" [disabled]=\"!form.value.notifications.active\" [bizdocTooltip]=\"(form.value.notifications.sound ? 'SoundOn': 'SoundOff')|translate\"><mat-icon>{{form.value.notifications.sound ? 'volume_up' : 'volume_off'}}</mat-icon></button>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<!--emails-->\r\n<ng-template #emailsTmpl>\r\n    <div [formGroup]=\"form.controls.emails\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-checkbox formControlName=\"mail\">{{'Mails' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"chat\">{{'Conversations' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"notifications\">{{'EmailNotifications' | translate}}</mat-checkbox>\r\n        <mat-checkbox formControlName=\"events\">{{'AlarmEvents' | translate}}</mat-checkbox>\r\n    </div>\r\n</ng-template>\r\n<!--ooo-->\r\n<ng-template #oooTmpl>\r\n    <div [formGroup]=\"form.controls.outOfOffice\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field class=\"flex\">\r\n            <input matInput [formControl]=\"oooId\" type=\"search\" [matAutocomplete]=\"sauto\" #substitueInput\r\n                   [placeholder]=\"'Associate' | translate\" [required]=\"form.value.outOfOffice.active\" />\r\n            <mat-autocomplete #sauto=\"matAutocomplete\" [displayWith]=\"display\"\r\n                              (optionSelected)=\"oooSelected($event)\">\r\n                @for (u of susers$ | async; track u.id) {\r\n                <mat-option [value]=\"u\">\r\n                    {{u.name}}\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'OutOfOfficeTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n        <mat-form-field>\r\n            <mat-label>{{'Dates'|translate}}</mat-label>\r\n            <mat-date-range-input [rangePicker]=\"oooDates\">\r\n                <input matStartDate formControlName=\"from\" [placeholder]=\"'From'|translate\" [min]=\"today\">\r\n                <input matEndDate formControlName=\"to\" [placeholder]=\"'To'|translate\">\r\n            </mat-date-range-input>\r\n            <mat-datepicker-toggle matSuffix [for]=\"oooDates\"></mat-datepicker-toggle>\r\n            <mat-date-range-picker #oooDates [touchUi]=\"isMobile\"></mat-date-range-picker>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n<!--grantAccess-->\r\n<ng-template #grantAccessTmpl>\r\n    <div [formGroup]=\"form.controls.grantAccess\" class=\"column\">\r\n        <mat-slide-toggle formControlName=\"active\">{{'Active' | translate}}</mat-slide-toggle>\r\n        <br />\r\n        <mat-form-field>\r\n            <mat-label>{{'Associates'| translate}}</mat-label>\r\n            <mat-chip-grid #grantList [attr.aria-label]=\"\" [disabled]=\"!form.value.grantAccess.active\">\r\n                @for (u of form.value.grantAccess.users || []; track u.id) {\r\n                <mat-chip-row (removed)=\"removeGrant(u)\">\r\n                    {{u | userName | async}}\r\n                    <mat-icon matChipRemove>cancel</mat-icon>\r\n                </mat-chip-row>\r\n                }\r\n            </mat-chip-grid>\r\n            <input [formControl]=\"grantUserIds\"\r\n                   #grantInput\r\n                   [matAutocomplete]=\"grantAuto\"\r\n                   [matChipInputFor]=\"grantList\"\r\n                   [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\r\n            <mat-autocomplete #grantAuto=\"matAutocomplete\" (optionSelected)=\"addGrant(grantInput, $event)\">\r\n                @for (u of gusers$ | async; track u.id) {\r\n                <mat-option [value]=\"u.id\">\r\n                    {{u.name}}\r\n                    @if (u.email) {\r\n                    <span>&nbsp; - {{u.email}}</span>\r\n                    }\r\n                </mat-option>\r\n                }\r\n            </mat-autocomplete>\r\n            <mat-hint>{{'GrantTip' | translate}}</mat-hint>\r\n        </mat-form-field>\r\n    </div>\r\n</ng-template>\r\n", styles: [":host{max-width:80vw;min-width:420px}.footer{align-items:center}.profile-name{margin:8px}.theme{height:22px!important;width:22px!important;-moz-border-radius:13px 13px!important;-webkit-border-radius:13px 13px!important;border-radius:13px!important;margin:4px!important}.theme.active.dark{border:2px solid #f4f4f4}.keys{padding:8px}.keys dt{width:72px;float:inline-start;clear:both;font-variant-caps:all-small-caps}.keys dd{float:inline-end;font-size:small;margin:0}.separator{height:280px;width:1px;background-color:var(--mat-sys-outline)}form{padding:20px 8px 0;min-width:320px}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: GuideService }, { type: HubService }, { type: i2$2.MatDialog }, { type: i1$2.FormBuilder }, { type: AccountService }, { type: PromptService }, { type: SessionService }, { type: Popup }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -9714,13 +9714,15 @@ class TagsComponent {
         this.control = new FormControl(null);
         this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
         this._destroy = new Subject();
-        this._options = session.tags.filter(t => !t.system);
+        this._options = session.tags.
+            filter(t => !t.system);
         if (!_data.tags)
             _data.tags = [];
         this.tags = _data.tags;
     }
     ngOnInit() {
-        this.options = this.control.valueChanges.pipe(takeUntil(this._destroy), startWith(''), map(v => v ? v.toLowerCase() : ''), map(v => this._options.filter(t => (t.title || t.name).toLowerCase().indexOf(v) > -1 &&
+        this.options = this.control.valueChanges.pipe(takeUntil(this._destroy), startWith(''), map(v => v ? v.toLowerCase() : ''), map(v => this._options.
+            filter(t => (t.title || t.name).toLowerCase().indexOf(v) > -1 &&
             !this.tags.find(t => t.name === v))));
     }
     ngAfterViewInit() {
@@ -9736,7 +9738,7 @@ class TagsComponent {
             if (val && val.length) {
                 let tag = this._options.find(t => t.name === val);
                 if (!tag) {
-                    tag = { name: val, title: val };
+                    tag = { name: val, title: val, system: false };
                     this._options.push(tag);
                 }
                 this.tags.push(tag);
@@ -9746,6 +9748,9 @@ class TagsComponent {
             this.control.setValue(null);
         }
     }
+    get filteredTags() {
+        return this.tags.filter(t => !t.system);
+    }
     selected(evt) {
         const tag = evt.option.value;
         if (!this._data.tags.find(t => t.name === tag.name)) {
@@ -9764,11 +9769,11 @@ class TagsComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TagsComponent, deps: [{ token: POPUP_DATA }, { token: MailboxService }, { token: SessionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TagsComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\r\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\r\n    @for (tag of tags | filterBy: 'system': false; track tag.name) {\r\n    <mat-chip [removable]=\"true\" (removed)=\"remove(tag)\">\r\n <!--     [ngStyle]=\"{'background-color': tag.backgroundColor, 'color': tag.color}\"-->\r\n      {{tag.title || tag.name}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-grid>\r\n  <input [placeholder]=\"'TagsHint'|translate\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [formControl]=\"control\"\r\n    #input autocomplete=\"off\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    [matChipInputAddOnBlur]=\"true\"\r\n    (matChipInputTokenEnd)=\"add($event)\">\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n    @for (tag of options | async; track tag.name) {\r\n    <mat-option [value]=\"tag\">\r\n      {{tag.title || tag.name}}\r\n    </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n  </mat-form-field>\r\n", styles: [":host{min-width:260px;padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FilterPipe, name: "filterBy" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: TagsComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, static: true }, { propertyName: "auto", first: true, predicate: ["auto"], descendants: true, static: true }], ngImport: i0, template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\r\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\r\n    @for (tag of filteredTags; track tag.name) {\r\n    <mat-chip [removable]=\"true\" (removed)=\"remove(tag)\">\r\n <!--     [ngStyle]=\"{'background-color': tag.backgroundColor, 'color': tag.color}\"-->\r\n      {{tag.title || tag.name}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-grid>\r\n  <input [placeholder]=\"'TagsHint'|translate\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [formControl]=\"control\"\r\n    #input autocomplete=\"off\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    [matChipInputAddOnBlur]=\"true\"\r\n    (matChipInputTokenEnd)=\"add($event)\">\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n    @for (tag of options | async; track tag.name) {\r\n    <mat-option [value]=\"tag\">\r\n      {{tag.title || tag.name}}\r\n    </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n  </mat-form-field>\r\n", styles: [":host{min-width:260px;padding:8px}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i4.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i4.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TagsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\r\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\r\n    @for (tag of tags | filterBy: 'system': false; track tag.name) {\r\n    <mat-chip [removable]=\"true\" (removed)=\"remove(tag)\">\r\n <!--     [ngStyle]=\"{'background-color': tag.backgroundColor, 'color': tag.color}\"-->\r\n      {{tag.title || tag.name}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-grid>\r\n  <input [placeholder]=\"'TagsHint'|translate\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [formControl]=\"control\"\r\n    #input autocomplete=\"off\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    [matChipInputAddOnBlur]=\"true\"\r\n    (matChipInputTokenEnd)=\"add($event)\">\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n    @for (tag of options | async; track tag.name) {\r\n    <mat-option [value]=\"tag\">\r\n      {{tag.title || tag.name}}\r\n    </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n  </mat-form-field>\r\n", styles: [":host{min-width:260px;padding:8px}\n"] }]
+            args: [{ standalone: false, template: "<mat-form-field floatLabel=\"never\" subscriptSizing=\"dynamic\">\r\n  <mat-chip-grid #chipList [attr.aria-label]=\"'Tags'|translate\">\r\n    @for (tag of filteredTags; track tag.name) {\r\n    <mat-chip [removable]=\"true\" (removed)=\"remove(tag)\">\r\n <!--     [ngStyle]=\"{'background-color': tag.backgroundColor, 'color': tag.color}\"-->\r\n      {{tag.title || tag.name}}\r\n      <mat-icon matChipRemove>cancel</mat-icon>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-grid>\r\n  <input [placeholder]=\"'TagsHint'|translate\"\r\n    [matAutocomplete]=\"auto\"\r\n    [matChipInputFor]=\"chipList\"\r\n    [formControl]=\"control\"\r\n    #input autocomplete=\"off\"\r\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n    [matChipInputAddOnBlur]=\"true\"\r\n    (matChipInputTokenEnd)=\"add($event)\">\r\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\r\n    @for (tag of options | async; track tag.name) {\r\n    <mat-option [value]=\"tag\">\r\n      {{tag.title || tag.name}}\r\n    </mat-option>\r\n    }\r\n  </mat-autocomplete>\r\n  </mat-form-field>\r\n", styles: [":host{min-width:260px;padding:8px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [POPUP_DATA]
@@ -9810,10 +9815,13 @@ class ComposeFormComponent {
         this.actions = [];
         this._destroy = new Subject();
     }
+    get userTags() {
+        return this.tags && this.tags.findIndex(t => !t.system) > -1;
+    }
     /** */
     ngOnInit() {
         this.tags = this.model.tags?.map(v => this._session.tags.find(t => t.name === v)).
-            filter(e => e !== undefined);
+            filter(e => e !== undefined) || [];
         this._fileElement.nativeElement.addEventListener('change', this._fileChangeListener.bind(this));
         this._messaging.callback$.pipe(takeUntil(this._destroy)).subscribe(e => this._instance.onMessage && this._instance.onMessage(e.message));
         this._messaging.editing$.pipe(takeUntil(this._destroy)).subscribe(e => e.id === this.model.id &&
@@ -10330,8 +10338,6 @@ class ComposePaneComponent {
             else
                 this.mode = 'preview';
             this.newCommentsCount = this.model.unreadComments;
-            this.userTags = this.model.tags &&
-                this.model.tags.some(e => !this._session.tags.find(t => t.name === e));
             this._pane.title = this._pane.group = `#${this.model.number}`;
             this.page = undefined;
         });
@@ -10459,11 +10465,11 @@ class ComposePaneComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", 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: "20.0.6", type: ComposePaneComponent, isStandalone: false, 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    }\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]=\"!model.draft ? 'primary' : null\" [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        @if (form.actions[0].icon) {\r\n        <mat-icon>{{form.actions[0].icon}}</mat-icon>\r\n        }\r\n    </button>\r\n    }\r\n    @else if (form.actions.length > 1) {\r\n    <button mat-stroked-button data-help=\"send\" [color]=\"!model.draft ? 'primary' : null\" [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    <!--<ng-template #actionsPane>\r\n      <mat-list>\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        <mat-list-item (click)=\"send(a.name)\">\r\n          @if(a.icon) {\r\n          <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n          }\r\n          <span matListItemTitle>{{a.title}}</span>\r\n          <span matListItemLine>{{a.note}}</span>\r\n        </mat-list-item>\r\n        }\r\n      </mat-list>\r\n    </ng-template>-->\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\">\r\n        <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [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}button{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$5.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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.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: "20.0.6", type: ComposePaneComponent, isStandalone: false, 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    }\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]=\"!model.draft ? 'primary' : null\" [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        @if (form.actions[0].icon) {\r\n        <mat-icon>{{form.actions[0].icon}}</mat-icon>\r\n        }\r\n    </button>\r\n    }\r\n    @else if (form.actions.length > 1) {\r\n    <button mat-stroked-button data-help=\"send\" [color]=\"!model.draft ? 'primary' : null\" [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    <!--<ng-template #actionsPane>\r\n      <mat-list>\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        <mat-list-item (click)=\"send(a.name)\">\r\n          @if(a.icon) {\r\n          <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n          }\r\n          <span matListItemTitle>{{a.title}}</span>\r\n          <span matListItemLine>{{a.note}}</span>\r\n        </mat-list-item>\r\n        }\r\n      </mat-list>\r\n    </ng-template>-->\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]=\"form.userTags\">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\">\r\n        <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [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}button{margin-inline-end:6px}\n"], dependencies: [{ kind: "directive", type: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$5.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[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.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: "20.0.6", ngImport: i0, type: ComposePaneComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, 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    }\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]=\"!model.draft ? 'primary' : null\" [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        @if (form.actions[0].icon) {\r\n        <mat-icon>{{form.actions[0].icon}}</mat-icon>\r\n        }\r\n    </button>\r\n    }\r\n    @else if (form.actions.length > 1) {\r\n    <button mat-stroked-button data-help=\"send\" [color]=\"!model.draft ? 'primary' : null\" [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    <!--<ng-template #actionsPane>\r\n      <mat-list>\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        <mat-list-item (click)=\"send(a.name)\">\r\n          @if(a.icon) {\r\n          <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n          }\r\n          <span matListItemTitle>{{a.title}}</span>\r\n          <span matListItemLine>{{a.note}}</span>\r\n        </mat-list-item>\r\n        }\r\n      </mat-list>\r\n    </ng-template>-->\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\">\r\n        <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [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}button{margin-inline-end:6px}\n"] }]
+            args: [{ standalone: false, 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    }\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]=\"!model.draft ? 'primary' : null\" [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        @if (form.actions[0].icon) {\r\n        <mat-icon>{{form.actions[0].icon}}</mat-icon>\r\n        }\r\n    </button>\r\n    }\r\n    @else if (form.actions.length > 1) {\r\n    <button mat-stroked-button data-help=\"send\" [color]=\"!model.draft ? 'primary' : null\" [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    <!--<ng-template #actionsPane>\r\n      <mat-list>\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        <mat-list-item (click)=\"send(a.name)\">\r\n          @if(a.icon) {\r\n          <mat-icon matListItemIcon>{{a.icon}}</mat-icon>\r\n          }\r\n          <span matListItemTitle>{{a.title}}</span>\r\n          <span matListItemLine>{{a.note}}</span>\r\n        </mat-list-item>\r\n        }\r\n      </mat-list>\r\n    </ng-template>-->\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]=\"form.userTags\">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\">\r\n        <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [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}button{margin-inline-end:6px}\n"] }]
         }], ctorParameters: () => [{ type: SessionService }, { type: MailboxService }, { type: PaneRef }, { type: PanesRouter }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [ComposeFormComponent, { static: true }]
@@ -22168,8 +22174,6 @@ class ComposeMobileComponent {
             this.newCommentsCount = this.model.unreadComments;
             const form = this._session.profile.forms.find(f => f.name === this.model.formId);
             this._title.set(this.model.number ? `#${this.model.number}` : form.title);
-            this.userTags = this.model.tags &&
-                this.model.tags.some(e => !this._session.tags.find(t => t.name === e));
             this.page = undefined;
             this.newCommentsCount &&
                 this.drawer.open();
@@ -22228,11 +22232,11 @@ class ComposeMobileComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ComposeMobileComponent, deps: [{ token: WindowTitleService }, { token: SessionService }, { token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ComposeMobileComponent, isStandalone: false, 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]=\"userTags\">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\">\r\n    <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [class.filled]=\"model.comments.length > 0\">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: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$5.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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.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: "20.0.6", type: ComposeMobileComponent, isStandalone: false, 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]=\"form.userTags\">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\">\r\n    <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [class.filled]=\"model.comments.length > 0\">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: i7$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i2$5.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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.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.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i10.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: "20.0.6", ngImport: i0, type: ComposeMobileComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, 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]=\"userTags\">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\">\r\n    <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [class.filled]=\"model.comments.length > 0\">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: [{ standalone: false, 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]=\"form.userTags\">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\">\r\n    <mat-icon [matBadge]=\"newCommentsCount\" [matBadgeHidden]=\"!newCommentsCount\" matBadgeColor=\"accent\" [class.filled]=\"model.comments.length > 0\">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$1.Router }, { type: i1$1.ActivatedRoute }], propDecorators: { form: [{
                 type: ViewChild,
                 args: [ComposeFormComponent, { static: true }]
@@ -23320,7 +23324,7 @@ let AssignActionComponent = class AssignActionComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AssignActionComponent, deps: [{ token: i1$2.FormBuilder }, { token: SessionService }, { token: AccountService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AssignActionComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "nameInput", first: true, predicate: ["nameInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userId\r\n           cdkFocusInitial matInput\r\n           [matAutocomplete]=\"auto\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected($event)\" [displayWith]=\"displayWith\">\r\n      @for (u of users$ | async; track u) {\r\n      <mat-option [value]=\"u\">\r\n        {{u.name}}\r\n        @if (u.email) {\r\n        <span>&nbsp; - {{u.email}}</span>\r\n        }\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (form.controls.userIds.hasError('required')) {\r\n    <mat-error>{{'RequiredErr'|translate:('AssignTo'|translate)}}</mat-error>\r\n    }\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>\r\n    &nbsp;\r\n    <mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>\r\n  </div>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n      </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: AssignActionComponent, isStandalone: false, selector: "ng-component", viewQueries: [{ propertyName: "nameInput", first: true, predicate: ["nameInput"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userId\r\n           cdkFocusInitial matInput\r\n           [matAutocomplete]=\"auto\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected($event)\" [displayWith]=\"displayWith\">\r\n      @for (u of users$ | async; track u) {\r\n      <mat-option [value]=\"u\">\r\n        {{u.name}}\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (form.controls.userIds.hasError('required')) {\r\n    <mat-error [innerHTML]=\"'RequiredErr'|translate:('AssignTo'|translate)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>\r\n    &nbsp;\r\n    <mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>\r\n  </div>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n      </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", styles: [":host{min-width:350px;display:block}\n"], dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2$6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i2$7.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i6.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "pipe", type: i9.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 };
 AssignActionComponent = __decorate([
     BizDoc({
@@ -23329,7 +23333,7 @@ AssignActionComponent = __decorate([
 ], AssignActionComponent);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: AssignActionComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userId\r\n           cdkFocusInitial matInput\r\n           [matAutocomplete]=\"auto\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected($event)\" [displayWith]=\"displayWith\">\r\n      @for (u of users$ | async; track u) {\r\n      <mat-option [value]=\"u\">\r\n        {{u.name}}\r\n        @if (u.email) {\r\n        <span>&nbsp; - {{u.email}}</span>\r\n        }\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (form.controls.userIds.hasError('required')) {\r\n    <mat-error>{{'RequiredErr'|translate:('AssignTo'|translate)}}</mat-error>\r\n    }\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>\r\n    &nbsp;\r\n    <mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>\r\n  </div>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n      </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n" }]
+            args: [{ standalone: false, template: "<form autocomplete=\"off\" class=\"column\" [formGroup]=\"form\">\r\n  <mat-form-field>\r\n    <input required [placeholder]=\"'AssignTo'|translate\"\r\n           [formControl]=userId\r\n           cdkFocusInitial matInput\r\n           [matAutocomplete]=\"auto\">\r\n    <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"userSelected($event)\" [displayWith]=\"displayWith\">\r\n      @for (u of users$ | async; track u) {\r\n      <mat-option [value]=\"u\">\r\n        {{u.name}}\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (form.controls.userIds.hasError('required')) {\r\n    <mat-error [innerHTML]=\"'RequiredErr'|translate:('AssignTo'|translate)\"></mat-error>\r\n    }\r\n  </mat-form-field>\r\n  <div>\r\n    <mat-checkbox formControlName=fyi> {{ 'AssignFYI' | translate }}</mat-checkbox>\r\n    &nbsp;\r\n    <mat-checkbox formControlName=roundtrip> {{ 'AssignRoundtrip' | translate }}</mat-checkbox>\r\n  </div>\r\n  <mat-form-field>\r\n    <textarea matInput cdkTextareaAutosize formControlName=\"note\" [placeholder]=\"'Note'|translate\" maxlength=\"200\">\r\n      </textarea>\r\n    <mat-hint align=\"end\">{{form.controls.note.value?.length || 0}} / {{200}}</mat-hint>\r\n    <mat-hint>{{'AssignNoteHint'| translate}}</mat-hint>\r\n  </mat-form-field>\r\n</form>\r\n", styles: [":host{min-width:350px;display:block}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: SessionService }, { type: AccountService }], propDecorators: { nameInput: [{
                 type: ViewChild,
                 args: ['nameInput', { static: true, read: ElementRef }]