@bizdoc/core 3.5.7 → 3.6.0

package/fesm2022/bizdoc-core.mjs

@@ -7,8 +7,8 @@ import { MatChipInput, MatChipsModule, MatChipListbox } from '@angular/material/
 import { ENTER, COMMA, SEMICOLON } from '@angular/cdk/keycodes';
 import * as i3$3 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
-import { trigger, transition, style, animate, state, query, stagger, animateChild, keyframes } from '@angular/animations';
 import { HubConnectionBuilder, HubConnectionState } from '@microsoft/signalr';
+import { trigger, transition, style, animate, state, query, stagger, animateChild, keyframes } from '@angular/animations';
 import dayjs from 'dayjs';
 import { Loader } from '@googlemaps/js-api-loader';
 import * as firebase from 'firebase/app';
@@ -724,7 +724,7 @@ function getParameterByName(name, url = window.location.href) {
 }
 
 const INBOX = 'ib', DRAFT = 'df';
-const AvailableMode = ['Offline', 'Online', 'OutOfOffice', 'Vacation', 'WorkingHome'];
+const AvailableMode = ['Offline', 'Online', 'OutOfOffice', 'OnVacation', 'WorkingHome'];
 var ValidationType;
 (function (ValidationType) {
     ValidationType["Required"] = "Required";
@@ -1127,6 +1127,13 @@ class SessionService {
         iconRegistry.addSvgIconLiteral('powerpoint', sanitizer.bypassSecurityTrustHtml(POWERPOINT_ICON));
         iconRegistry.addSvgIconLiteral('pdf', sanitizer.bypassSecurityTrustHtml(PDF_ICON));
     }
+    get tags() {
+        return this._tags || (this._tags =
+            this.profile.tags.
+                concat(this.profile.options.tags?.
+                filter(v => !this.profile.tags.find(t => t.name === v.name)) // Filter out duplicates
+                || []));
+    }
     get profile() { return this._profile; }
     get gender() { return this.profile.byId ? this._profile.byGender : this._profile.gender; }
     get accentPalette() {
@@ -1892,7 +1899,7 @@ const STRINGS = {
         SignOut: 'Sign out',
         SignOutAsk: 'Are you sure you want to sign out?',
         Goodbye: 'Goodbye',
-        Vacation: 'On Vacation',
+        OnVacation: 'On Vacation',
         OutOfOffice: 'Out of office',
         Online: 'Online',
         Offline: 'Offline',
@@ -2608,7 +2615,7 @@ const STRINGS = {
         SignOutAsk: 'האם את/ה בטוח שברצונך לצאת?',
         SignOutAskMale: 'האם אתה בטוח שברצונך לצאת?',
         SignOutAskFemale: 'האם את בטוחה שברצונך לצאת?',
-        Vacation: 'נמצא בחופשה',
+        OnVacation: 'נמצא בחופשה',
         OutOfOffice: 'מחוץ למשרד',
         Online: 'פעיל',
         Offline: 'לא זמין',
@@ -3630,7 +3637,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 const OPTION_PANEL = new InjectionToken('options');
 /** options component*/
 class OptionsComponent {
-    constructor(_ps, _guide, _hub, _dialog, _fb, _accounts, _sb, _session, config) {
+    constructor(_ps, _guide, _hub, _dialog, _fb, _accounts, _sb, _session, _popup, config) {
         this._ps = _ps;
         this._guide = _guide;
         this._hub = _hub;
@@ -3639,6 +3646,7 @@ class OptionsComponent {
         this._accounts = _accounts;
         this._sb = _sb;
         this._session = _session;
+        this._popup = _popup;
         this.languages = this._session.languages;
         this.themes = this._session.Themes;
         this.modes = AvailableMode;
@@ -3735,6 +3743,9 @@ class OptionsComponent {
         this._ps.mask('Refreshing');
         location.reload();
     }
+    showKeyboard(evt) {
+        this._popup.open(this.keyboard, evt.target);
+    }
     ngOnInit() {
         this._hub.state$.pipe(startWith(this._hub.state), takeUntil(this._destroy)).subscribe(s => this.online = s === HubConnectionState.Connected);
         const { outOfOffice, grantAccess, notifications, emails } = this.form.controls;
@@ -3825,9 +3836,10 @@ class OptionsComponent {
     }
     addTag(event) {
         const { chipInput, value } = event;
+        const val = value?.trim();
         // Add our fruit
-        if ((value || '').trim()) {
-            this.options.tags.push(value.trim());
+        if (val && val.length) {
+            this.options.tags.push({ name: val });
             this.form.patchValue({});
         }
         // Reset the input value 
@@ -3871,16 +3883,19 @@ class OptionsComponent {
         this._destroy.next();
         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: 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: "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    <!--keys-->\r\n    @if(!isMobile) {\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    }\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    <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 (item of form.value.tags; track item) {\r\n                <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n                    {{item}}\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<!--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.ɵ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] }); }
 }
 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    <!--keys-->\r\n    @if(!isMobile) {\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    }\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    <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 (item of form.value.tags; track item) {\r\n                <mat-chip-row [removable]=\"true\" (removed)=\"removeTag(item)\">\r\n                    {{item}}\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<!--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"] }]
-        }], ctorParameters: () => [{ type: PromptService }, { type: GuideService }, { type: HubService }, { type: i2$2.MatDialog }, { type: i1$2.FormBuilder }, { type: AccountService }, { type: PromptService }, { type: SessionService }, { type: undefined, decorators: [{
+            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"] }]
+        }], 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]
-                }] }], propDecorators: { substitueInput: [{
+                }] }], propDecorators: { keyboard: [{
+                type: ViewChild,
+                args: ['keyboardTmpl']
+            }], substitueInput: [{
                 type: ViewChild,
                 args: ['substitueInput', { read: MatInput }]
             }], grantInput: [{
@@ -7001,7 +7016,7 @@ class MailboxService {
             reportProgress: true
         });
     }
-    removeattachment(recipientId, fileId) {
+    removeAttachment(recipientId, fileId) {
         return this._http.delete(`/api/attachments/${recipientId}/${fileId}`);
     }
     read(id, read, folderId, received) {
@@ -7080,7 +7095,7 @@ class MailboxService {
             };
         });
     }
-    upload(recipientId, formId, version, files, options) {
+    uploadAttachment(recipientId, formId, version, files, options) {
         const fd = new FormData();
         if (isArray(files))
             files.forEach(f => fd.append(f.name, f));
@@ -8079,7 +8094,7 @@ class BrowseFilterComponent {
         this._destroy = new Subject();
         this.states = _session.profile.states;
         this.forms = _session.profile.forms;
-        this.tags = _session.profile.options.tags;
+        this.tags = _session.tags;
     }
     ngOnInit() {
         if (this.folderId) {
@@ -8120,7 +8135,8 @@ class BrowseFilterComponent {
         this.valuesChange.emit(value);
     }
     toggleTag(evt) {
-        this.form.controls.tag.setValue(this.form.controls.tag.value !== evt.value ? evt.value : null);
+        const tag = evt.value?.name;
+        this.form.controls.tag.setValue(this.form.controls.tag.value !== tag ? tag : null);
     }
     displayFn(item) {
         return item ? item.name : undefined;
@@ -8144,11 +8160,11 @@ class BrowseFilterComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BrowseFilterComponent, deps: [{ token: i1$2.FormBuilder }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: MailboxService }, { token: AccountService }, { token: BIZDOC_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: BrowseFilterComponent, isStandalone: false, selector: "bizdoc-browse-filter", inputs: { values: "values", folderId: "folderId", exclude: "exclude" }, outputs: { valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "chips", first: true, predicate: MatChipListbox, descendants: true, static: true }, { propertyName: "containsEl", first: true, predicate: ["contains"], descendants: true, read: ElementRef, static: true }, { propertyName: "senderEl", first: true, predicate: ["sender"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  @if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    @if (form.value.contains) {\r\n    <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayValue\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" (change)=\"toggleTag($event)\">\r\n    @for (tag of tags; track tag) {\r\n    <mat-chip-option color=\"accent\">\r\n      {{tag}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes", "autofocus"], outputs: ["axesChange"] }, { 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: BrowseFilterComponent, isStandalone: false, selector: "bizdoc-browse-filter", inputs: { values: "values", folderId: "folderId", exclude: "exclude" }, outputs: { valuesChange: "valuesChange" }, viewQueries: [{ propertyName: "chips", first: true, predicate: MatChipListbox, descendants: true, static: true }, { propertyName: "containsEl", first: true, predicate: ["contains"], descendants: true, read: ElementRef, static: true }, { propertyName: "senderEl", first: true, predicate: ["sender"], descendants: true, read: ElementRef, static: true }], ngImport: i0, template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  @if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    @if (form.value.contains) {\r\n    <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayValue\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" (change)=\"toggleTag($event)\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\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.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: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i4.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: CubeFilterComponent, selector: "bizdoc-cube-filter", inputs: ["cube", "exclude", "include", "axes", "autofocus"], outputs: ["axesChange"] }, { 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: BrowseFilterComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-browse-filter', template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  @if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    @if (form.value.contains) {\r\n    <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayValue\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" (change)=\"toggleTag($event)\">\r\n    @for (tag of tags; track tag) {\r\n    <mat-chip-option color=\"accent\">\r\n      {{tag}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-browse-filter', template: "<form [formGroup]=\"form\" class=\"column gap\" autocomplete=\"off\">\r\n  @if (!exclude || exclude.indexOf('contains') < 0) {\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput formControlName=\"contains\" placeholder=\"{{'Contains' | translate}}\" #contains>\r\n    @if (form.value.contains) {\r\n    <button matSuffix mat-icon-button aria-label=\"\" (click)=\"form.controls.contains.setValue(null)\">\r\n      <mat-icon>close</mat-icon>\r\n    </button>\r\n    }\r\n  </mat-form-field>\r\n  }\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <input matInput [matAutocomplete]=\"senders\" [placeholder]=\"'Sender' | translate\" [formControl]=\"sendername\" #sender />\r\n    <mat-autocomplete #senders [displayWith]=\"displayValue\" (optionSelected)=\"senderSelected($event)\">\r\n      @for (u of senders$ | async; track u) {\r\n      <mat-option [value]=\"u\">\r\n        <span>{{u.name}}</span>\r\n      </mat-option>\r\n      }\r\n    </mat-autocomplete>\r\n    @if (sendername.value) {\r\n    <button matSuffix mat-icon-button (click)=\"clearSender()\"><mat-icon>clear</mat-icon></button>\r\n    }\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Status'|translate\" formControlName=\"state\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (s of states; track s) {\r\n      <mat-option [value]=\"s.name\">\r\n        {{s.title}}\r\n      </mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-form-field subscriptSizing=\"dynamic\">\r\n    <mat-select [placeholder]=\"'Form' | translate\" formControlName=\"form\">\r\n      <mat-option>\r\n        {{ 'All' | translate }}\r\n      </mat-option>\r\n      @for (f of forms; track f) {\r\n      <mat-option [value]=\"f.name\">{{f.title}}</mat-option>\r\n      }\r\n    </mat-select>\r\n  </mat-form-field>\r\n  <mat-chip-listbox id=\"tags\" (change)=\"toggleTag($event)\">\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip-option [value]=\"tag\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar>{{tag.icon}}</mat-icon>\r\n      }\r\n      {{tag.title || tag.name}}\r\n    </mat-chip-option>\r\n    }\r\n  </mat-chip-listbox>\r\n  @if (filters) {\r\n  <bizdoc-cube-filter class=\"cube-filter\"\r\n                      [cube]=\"filters.cube\"\r\n                      [include]=\"filters.axes\"\r\n                      [axes]=\"values\"\r\n                      [autofocus]=\"false\"\r\n                      (axesChange)=\"axesChange($event)\"></bizdoc-cube-filter>\r\n  }\r\n</form>\r\n", styles: [".cube-filter ::ng-deep form{padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: SessionService }, { type: i0.ChangeDetectorRef }, { type: MailboxService }, { type: AccountService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [BIZDOC_CONFIG]
@@ -8813,9 +8829,8 @@ class AttachmentsComponent {
         this.ngOnChanges();
     }
     discard(item) {
-        const task = () => this._mailbox.removeattachment(this.model.id, item.id).subscribe({
+        const task = () => this._mailbox.removeAttachment(this.model.id, item.id).subscribe({
             next: () => {
-                //item.deleted = true;
                 this.model.attachments.remove(item);
                 this.ngOnChanges();
             }, error: () => this._sb.error()
@@ -8902,6 +8917,8 @@ class ExpandedItemComponent {
         this._destroy = new Subject();
     }
     ngOnInit() {
+        this.tags = this.model.tags?.map(v => this._session.tags.find(t => t.name === v)).
+            filter(e => e !== undefined);
         this._messaging.comment$.pipe(takeUntil(this._destroy)).
             subscribe(e => {
             if (e.id === this.model.id && (e.model.byId || e.model.userId) !== this._session.userId) {
@@ -9170,11 +9187,11 @@ class ExpandedItemComponent {
         this._typingTask && clearTimeout(this._typingTask);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ExpandedItemComponent, deps: [{ token: PromptService }, { token: ChatInfo }, { token: AccountService }, { token: MailboxService }, { token: SessionService }, { token: i7$2.Directionality }, { token: i2$2.MatDialog }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ExpandedItemComponent, isStandalone: false, selector: "bizdoc-expanded-item", inputs: { model: "model" }, outputs: { sent: "sent" }, ngImport: i0, template: "@if (model.summary) {\r\n  <div class=\"summary\" [innerHTML]=\"model.summary\">\r\n  </div>\r\n}\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  @for (a of actions; track a) {\r\n    @if (a.icon) {\r\n      <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\r\n        <mat-icon>{{a.icon}}</mat-icon>\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div class=\"center center\">\r\n    @if (typing) {\r\n      <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\r\n    }\r\n    @if (model.comments.length) {\r\n      <div class=\"mat-small\">\r\n        @if (!newComments) {\r\n          <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n        } @else {\r\n          <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (model.tags) {\r\n    <mat-chip-set>\r\n      @for (tag of model.tags; track tag) {\r\n        <mat-chip [disabled]=\"true\">{{tag}}</mat-chip>\r\n      }\r\n    </mat-chip-set>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"], dependencies: [{ kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button], 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: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { kind: "component", type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: StatePipe, name: "state" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ExpandedItemComponent, isStandalone: false, selector: "bizdoc-expanded-item", inputs: { model: "model" }, outputs: { sent: "sent" }, ngImport: i0, template: "@if (model.summary) {\r\n<div class=\"summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n}\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  @for (a of actions; track a) {\r\n  @if (a.icon) {\r\n  <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\r\n    <mat-icon>{{a.icon}}</mat-icon>\r\n  </button>\r\n  }\r\n  }\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div class=\"center center\">\r\n    @if (typing) {\r\n    <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\r\n    }\r\n    @if (model.comments.length) {\r\n    <div class=\"mat-small\">\r\n      @if (!newComments) {\r\n      <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n      } @else {\r\n      <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (tags) {\r\n  <mat-chip-set>\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n      }\r\n      <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"], dependencies: [{ kind: "component", type: i4.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }, { kind: "component", type: DocumentEventsComponent, selector: "bizdoc-events", inputs: ["model"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: CalendarPipe, name: "amCalendar" }, { kind: "pipe", type: TimeAgoPipe, name: "amTimeAgo" }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: SanitizeHtmlPipe, name: "sanitizeHtml" }, { kind: "pipe", type: StatePipe, name: "state" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ExpandedItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-expanded-item', template: "@if (model.summary) {\r\n  <div class=\"summary\" [innerHTML]=\"model.summary\">\r\n  </div>\r\n}\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  @for (a of actions; track a) {\r\n    @if (a.icon) {\r\n      <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\r\n        <mat-icon>{{a.icon}}</mat-icon>\r\n      </button>\r\n    }\r\n  }\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div class=\"center center\">\r\n    @if (typing) {\r\n      <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\r\n    }\r\n    @if (model.comments.length) {\r\n      <div class=\"mat-small\">\r\n        @if (!newComments) {\r\n          <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n        } @else {\r\n          <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\r\n  @if (model.tags) {\r\n    <mat-chip-set>\r\n      @for (tag of model.tags; track tag) {\r\n        <mat-chip [disabled]=\"true\">{{tag}}</mat-chip>\r\n      }\r\n    </mat-chip-set>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-expanded-item', template: "@if (model.summary) {\r\n<div class=\"summary\" [innerHTML]=\"model.summary\">\r\n</div>\r\n}\r\n<div>\r\n  <bizdoc-attachments [model]=\"model\"></bizdoc-attachments>\r\n  <bizdoc-events [model]=\"model\"></bizdoc-events>\r\n</div>\r\n<div class=\"row\">\r\n  <span class=\"note\" [innerHTML]=\"note | sanitizeHtml\" (click)=\"chat($event)\"></span>\r\n  <span class=\"divider\"></span>\r\n  @for (a of actions; track a) {\r\n  @if (a.icon) {\r\n  <button mat-icon-button (click)=\"send(a.name)\" [bizdocTooltip]=\"a.title\" class=\"tool\">\r\n    <mat-icon>{{a.icon}}</mat-icon>\r\n  </button>\r\n  }\r\n  }\r\n</div>\r\n<div class=\"row\">\r\n  <div class=\"mat-small row\">\r\n    <span>{{model.stateId | state : 'past' }}</span>\r\n    &nbsp;\r\n    <span class=\"time\" [bizdocTooltip]=\"model.received | amCalendar\">{{model.received | amTimeAgo}}</span>\r\n    &nbsp;\r\n    <span [innerHTML]=\"sender | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>&nbsp;\r\n    <span [innerHTML]=\"awaiting | sanitizeHtml\" (click)=\"chat($event)\" class=\"who\"></span>\r\n  </div>\r\n  <span class=\"divider\"></span>\r\n  <div class=\"center center\">\r\n    @if (typing) {\r\n    <span class=\"mat-small\">{{'SomeoneTyping'|translate}}</span>\r\n    }\r\n    @if (model.comments.length) {\r\n    <div class=\"mat-small\">\r\n      @if (!newComments) {\r\n      <span>{{model.comments.length > 1 ? ('CommentsCount' | translate : model.comments.length) : 'OneComment' | translate }}</span>\r\n      } @else {\r\n      <span [innerHTML]=\"'NewCommentsCount' | translate : model.comments.length : newComments | sanitizeHtml\"></span>\r\n      }\r\n    </div>\r\n    }\r\n  </div>\r\n  @if (tags) {\r\n  <mat-chip-set>\r\n    @for (tag of tags; track tag.name) {\r\n    <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n      @if(tag.icon) {\r\n      <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n      }\r\n      <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n    </mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n</div>\r\n", styles: [":host{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-right:24px;padding-left:24px;text-align:start}.row{align-items:center;min-height:27px;flex-direction:row;box-sizing:border-box;display:flex}.note{font-weight:200}.time{text-transform:uppercase}.summary{max-width:fit-content}\n"] }]
         }], ctorParameters: () => [{ type: PromptService }, { type: ChatInfo }, { type: AccountService }, { type: MailboxService }, { type: SessionService }, { type: i7$2.Directionality }, { type: i2$2.MatDialog }, { type: TranslateService }, { type: HubService }], propDecorators: { model: [{
                 type: Input
             }], sent: [{
@@ -9687,37 +9704,38 @@ class FormRef {
 }
 
 class TagsComponent {
-    constructor(data, _mailbox, session) {
-        this.data = data;
+    constructor(_data, _mailbox, session) {
+        this._data = _data;
         this._mailbox = _mailbox;
         this.control = new FormControl(null);
         this.separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
         this._destroy = new Subject();
-        const options = session.profile.options.tags || [];
-        this._options = options.sort();
-        if (!data.tags)
-            data.tags = [];
-        else
-            data.tags = data.tags.filter(t => options.indexOf(t) > -1);
-        this.tags = data.tags;
+        this._options = session.tags.filter(t => !t.system);
+        if (!_data.tags)
+            _data.tags = [];
+        this.tags = _data.tags;
     }
     ngOnInit() {
-        this.options = this.control.valueChanges.pipe(startWith(''), takeUntil(this._destroy), map(v => v ? v.toLowerCase() : ''), map(v => this._options.filter(t => t.toLowerCase().indexOf(v) > -1 && this.data.tags.indexOf(t) < 0)));
+        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() {
         setTimeout(() => this.inputElement.nativeElement.focus());
     }
     _save() {
-        this._mailbox.tags(this.data.id, this.data.tags).subscribe();
+        this._mailbox.tags(this._data.id, this._data.tags.map(t => t.name)).subscribe();
     }
     add(event) {
         if (!this.auto.isOpen) {
             const { chipInput, value } = event;
-            if ((value || '').trim()) {
-                const tag = value.trim();
-                this.data.tags.push(tag);
-                if (this._options.indexOf(tag) < 0)
+            let val = value?.trim();
+            if (val && val.length) {
+                let tag = this._options.find(t => t.name === val);
+                if (!tag) {
+                    tag = { name: val, title: val };
                     this._options.push(tag);
+                }
+                this.tags.push(tag);
                 this._save();
             }
             chipInput?.clear();
@@ -9726,15 +9744,15 @@ class TagsComponent {
     }
     selected(evt) {
         const tag = evt.option.value;
-        if (this.data.tags.indexOf(tag) < 0) {
-            this.data.tags.push(tag);
+        if (!this._data.tags.find(t => t.name === tag.name)) {
+            this.tags.push(tag);
             this._save();
         }
         this.inputElement.nativeElement.value = '';
         this.control.setValue(null);
     }
     remove(tag) {
-        this.data.tags.remove(tag);
+        this.tags.remove(tag);
         this._save();
     }
     ngOnDestroy() {
@@ -9742,11 +9760,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 (item of tags; track item) {\r\n      <mat-chip\r\n        [removable]=\"true\" (removed)=\"remove(item)\">\r\n        {{item}}\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 (item of options | async; track item) {\r\n        <mat-option [value]=\"item\">\r\n          {{item}}\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" }] }); }
+    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': undefined; 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" }] }); }
 }
 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 (item of tags; track item) {\r\n      <mat-chip\r\n        [removable]=\"true\" (removed)=\"remove(item)\">\r\n        {{item}}\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 (item of options | async; track item) {\r\n        <mat-option [value]=\"item\">\r\n          {{item}}\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 tags | filterBy: 'system': undefined; 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]
@@ -9790,6 +9808,8 @@ class ComposeFormComponent {
     }
     /** */
     ngOnInit() {
+        this.tags = this.model.tags?.map(v => this._session.tags.find(t => t.name === v)).
+            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 &&
@@ -9940,7 +9960,7 @@ class ComposeFormComponent {
             if (retry > -1)
                 this.model.attachments.splice(retry, 1);
             const model = this._constructAttachment(f);
-            const observable = this._mailbox.upload(this.model.id, this.model.formId, this.model.version, f).
+            const observable = this._mailbox.uploadAttachment(this.model.id, this.model.formId, this.model.version, f).
                 pipe(tap({
                 next: r => {
                     this._sb.toast(!exists ? 'UploadOk' : 'UploadVersionOk', f.name);
@@ -9974,8 +9994,12 @@ class ComposeFormComponent {
         };
     }
     tag(evt) {
+        const { id, version } = this.model;
         this._popup.open(TagsComponent, evt.target, {
-            data: this.model
+            data: {
+                id, version,
+                tags: this.tags,
+            }
         });
     }
     /** */
@@ -10228,13 +10252,13 @@ class ComposeFormComponent {
         this._destroy.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ComposeFormComponent, deps: [{ token: Popup }, { token: MailboxService }, { token: AccountService }, { token: RouterImpl }, { token: i2$2.MatDialog }, { token: PromptService }, { token: SessionService }, { token: i0.Injector }, { token: i3.MatSnackBar }, { token: BizDocComponentFactoryResolver }, { token: GuideService }, { token: TranslateService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ComposeFormComponent, isStandalone: false, selector: "bizdoc-form", inputs: { model: "model", working: "working", dirty: "dirty", valid: "valid", page: "page", mode: "mode", contacts: "contacts" }, outputs: { modelChange: "modelChange", workingChange: "workingChange", dirtyChange: "dirtyChange", validChange: "validChange", saved: "saved" }, host: { classAttribute: "form-container bizdoc-compose" }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "attachments", first: true, predicate: AttachmentsComponent, descendants: true, static: true }, { propertyName: "_container", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header\">\r\n  <!--<bizdoc-people [model]=\"model\" *ngIf=\"mode !== 'compose' && contacts\"></bizdoc-people>-->\r\n  <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"true\" [viewedIndicator]=\"false\"></bizdoc-attachments>\r\n  @if (!model.replied && mode !== 'compose' && model.note) {\r\n  <div class=\"compose-note\">\r\n    <mat-icon color=\"primary\">info</mat-icon> <span class=\"mat-body-2\">{{model.note}}</span>\r\n  </div>\r\n  }\r\n  @if (model.tags) {\r\n  <mat-chip-set>\r\n    @for (tag of model.tags; track tag) {\r\n    <mat-chip [disableRipple]=\"true\">{{tag}}</mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n  @if (editing) {\r\n  <div class=\"message\">{{ editing }}</div>\r\n  }\r\n</div>\r\n<ng-container #component></ng-container>\r\n<form style=\"display:none\"><input type=\"file\" #file multiple /></form>\r\n", dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: 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.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: ComposeFormComponent, isStandalone: false, selector: "bizdoc-form", inputs: { model: "model", working: "working", dirty: "dirty", valid: "valid", page: "page", mode: "mode", contacts: "contacts" }, outputs: { modelChange: "modelChange", workingChange: "workingChange", dirtyChange: "dirtyChange", validChange: "validChange", saved: "saved" }, host: { classAttribute: "form-container bizdoc-compose" }, viewQueries: [{ propertyName: "_fileElement", first: true, predicate: ["file"], descendants: true, static: true }, { propertyName: "attachments", first: true, predicate: AttachmentsComponent, descendants: true, static: true }, { propertyName: "_container", first: true, predicate: ["component"], descendants: true, read: ViewContainerRef, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-header\">\r\n    <!--<bizdoc-people [model]=\"model\" *ngIf=\"mode !== 'compose' && contacts\"></bizdoc-people>-->\r\n    <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"true\" [viewedIndicator]=\"false\"></bizdoc-attachments>\r\n    @if (!model.replied && mode !== 'compose' && model.note) {\r\n    <div class=\"compose-note\">\r\n        <mat-icon color=\"primary\">info</mat-icon> <span class=\"mat-body-2\">{{model.note}}</span>\r\n    </div>\r\n    }\r\n    @if (tags) {\r\n    <mat-chip-set>\r\n        @for (tag of tags; track tag.name) {\r\n        <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n            @if(tag.icon) {\r\n            <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n            }\r\n            <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n        </mat-chip>\r\n        }\r\n    </mat-chip-set>\r\n    }\r\n    @if (editing) {\r\n    <div class=\"message\">{{ editing }}</div>\r\n    }\r\n</div>\r\n<ng-container #component></ng-container>\r\n<form style=\"display:none\"><input type=\"file\" #file multiple /></form>\r\n", dependencies: [{ kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: 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: "directive", type: i4.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "component", type: i4.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AttachmentsComponent, selector: "bizdoc-attachments", inputs: ["model", "viewedIndicator", "includeDeleted"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ComposeFormComponent, decorators: [{
             type: Component,
             args: [{ standalone: false, selector: 'bizdoc-form', host: {
                         class: 'form-container bizdoc-compose'
-                    }, template: "<div class=\"form-header\">\r\n  <!--<bizdoc-people [model]=\"model\" *ngIf=\"mode !== 'compose' && contacts\"></bizdoc-people>-->\r\n  <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"true\" [viewedIndicator]=\"false\"></bizdoc-attachments>\r\n  @if (!model.replied && mode !== 'compose' && model.note) {\r\n  <div class=\"compose-note\">\r\n    <mat-icon color=\"primary\">info</mat-icon> <span class=\"mat-body-2\">{{model.note}}</span>\r\n  </div>\r\n  }\r\n  @if (model.tags) {\r\n  <mat-chip-set>\r\n    @for (tag of model.tags; track tag) {\r\n    <mat-chip [disableRipple]=\"true\">{{tag}}</mat-chip>\r\n    }\r\n  </mat-chip-set>\r\n  }\r\n  @if (editing) {\r\n  <div class=\"message\">{{ editing }}</div>\r\n  }\r\n</div>\r\n<ng-container #component></ng-container>\r\n<form style=\"display:none\"><input type=\"file\" #file multiple /></form>\r\n" }]
+                    }, template: "<div class=\"form-header\">\r\n    <!--<bizdoc-people [model]=\"model\" *ngIf=\"mode !== 'compose' && contacts\"></bizdoc-people>-->\r\n    <bizdoc-attachments [model]=\"model\" [includeDeleted]=\"true\" [viewedIndicator]=\"false\"></bizdoc-attachments>\r\n    @if (!model.replied && mode !== 'compose' && model.note) {\r\n    <div class=\"compose-note\">\r\n        <mat-icon color=\"primary\">info</mat-icon> <span class=\"mat-body-2\">{{model.note}}</span>\r\n    </div>\r\n    }\r\n    @if (tags) {\r\n    <mat-chip-set>\r\n        @for (tag of tags; track tag.name) {\r\n        <mat-chip [disableRipple]=\"true\" [style.backgroundColor]=\"tag.backgroundColor\">\r\n            @if(tag.icon) {\r\n            <mat-icon matChipAvatar [style.color]=\"tag.color\">{{tag.icon}}</mat-icon>\r\n            }\r\n            <span [style.color]=\"tag.color\">{{tag.title || tag.name}}</span>\r\n        </mat-chip>\r\n        }\r\n    </mat-chip-set>\r\n    }\r\n    @if (editing) {\r\n    <div class=\"message\">{{ editing }}</div>\r\n    }\r\n</div>\r\n<ng-container #component></ng-container>\r\n<form style=\"display:none\"><input type=\"file\" #file multiple /></form>\r\n" }]
         }], ctorParameters: () => [{ type: Popup }, { type: MailboxService }, { type: AccountService }, { type: RouterImpl }, { type: i2$2.MatDialog }, { type: PromptService }, { type: SessionService }, { type: i0.Injector }, { type: i3.MatSnackBar }, { type: BizDocComponentFactoryResolver }, { type: GuideService }, { type: TranslateService }, { type: HubService }], propDecorators: { model: [{
                 type: Input
             }], modelChange: [{
@@ -12710,7 +12734,7 @@ const MODE_MAP = {
     'Offline': { icon: 'timer', color: '#f57c00' },
     'Online': { icon: 'check', color: '#43a047' },
     'OutOfOffice': { icon: 'priority_high', color: '#90a4ae' },
-    'Vacation': { icon: 'beach_access', color: '#fdd835' },
+    'OnVacation': { icon: 'beach_access', color: '#fdd835' },
     'WorkingHome': { icon: 'home', color: '#fdd835' }
 };
 class AvatarComponent {
@@ -19750,13 +19774,13 @@ class SearchService {
             });
             // user tags
             profile.options.tags?.forEach(t => {
-                if (t.toLowerCase().indexOf(val) > -1)
+                if ((t.title || t.name).toLowerCase().indexOf(val) > -1)
                     results.push({
                         portal: new ComponentPortal(PathListingComponent),
                         model: {
                             path: ['mailbox', 'f'],
-                            params: { tag: t },
-                            title: t,
+                            params: { tag: t.name },
+                            title: t.title || t.name,
                             section: 'Tags',
                             icon: 'bookmark'
                         }
@@ -23762,7 +23786,7 @@ class FileInput {
         });
     }
     discard(item) {
-        const task = () => this._mailbox.removeattachment(this._model.id, item.id).subscribe({
+        const task = () => this._mailbox.removeAttachment(this._model.id, item.id).subscribe({
             next: () => {
                 this._items.remove(item);
                 this._value = this.multiple ? this._items.length ? this._items.map(i => i.id) : undefined : undefined;
@@ -23883,7 +23907,7 @@ class FileInput {
                 }
                 else if (this._editable(item)) {
                     // existing item, override
-                    let observable = this._mailbox.upload(this._model.id, this._model.formId, this._model.version, file, { isPrivate: true }).
+                    let observable = this._mailbox.uploadAttachment(this._model.id, this._model.formId, this._model.version, file, { isPrivate: true }).
                         pipe(
                     // TODO:          reportProgress(item),
                     catchError(e => {
@@ -23900,7 +23924,7 @@ class FileInput {
             }
             else {
                 // upload new
-                let observable = this._mailbox.upload(this._model.id, this._model.formId, this._model.version, file, { isPrivate: true }).
+                let observable = this._mailbox.uploadAttachment(this._model.id, this._model.formId, this._model.version, file, { isPrivate: true }).
                     pipe(/*TODO reportProgress(item), */ catchError(e => {
                     this._handleError(e);
                     return of(false);
@@ -34496,7 +34520,11 @@ class DesignerItemComponent {
             this.mode = 'edit';
         if (this.mode === 'add' && this.model.copyOf && !this.addContent)
             this.mode = 'edit';
-        this.mode === 'edit' && this._commonForm();
+        switch (this.mode) {
+            case 'edit':
+                this._commonForm();
+                break;
+        }
         if (!this.model.designTemplate && !this.model.arguments?.length)
             this._patch();
         (this.model.copyOf || this.mode === 'add') && this.form.markAsDirty();
@@ -34627,11 +34655,11 @@ class DesignerItemComponent {
         this._destroy?.complete();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DesignerItemComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.FormBuilder }, { token: i2$1.DomSanitizer }, { token: DesignerRef }, { token: BizDocComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DesignerItemComponent, isStandalone: false, selector: "bizdoc-designer-element", inputs: { privileges: "privileges", icon: "icon", form: "form", context: "context" }, outputs: { onSave: "save", onContinue: "continue" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "addContent", first: true, predicate: AddContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }, { propertyName: "customContents", predicate: CustomContentDirective }], usesOnChanges: true, ngImport: i0, template: "@switch (mode) {\r\n<!--widget mode -->\r\n@case ('widget') {\r\n<!--icon -->\r\n  @if (model.familyKey) {\r\n    @if (SVG[model.familyKey]) {\r\n<img class=\"logo\" [src]=\"resource(SVG[model.familyKey])\" [bizdocTooltip]=\"model.family\" />\r\n    }\r\n    @else {\r\n<div>{{model.family}}</div>\r\n    }\r\n  }\r\n<!--options-->\r\n<ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n<!--designer widget-->\r\n<ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n}\r\n@case ('edit') {\r\n<!--edit / custom mode -->\r\n@if (context?.active) {\r\n<mat-toolbar class=\"row\">\r\n  @if(context.mode === 'add') {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [disabled]=\"context.form.invalid\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"closeView()\" [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n  }\r\n  @else {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_backspace</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <h2 class=\"mat-h2\">{{context.title|translate}}</h2>\r\n  <ng-container *ngTemplateOutlet=\"customView; context: context\"></ng-container>\r\n</form>\r\n}\r\n@else {\r\n<!--edit mode -->\r\n<mat-toolbar bizdoc-sticky>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"form.invalid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"close()\"  [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  @if (model.resourceType) {\r\n  <p class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  <br />\r\n  }\r\n  <ng-container [formGroup]=\"form\">\r\n    <div class=\"row gap\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        @if (form.controls.name.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n        @if (form.controls.name.hasError('duplicate')) {\r\n        <mat-error [innerHTML]=\"'DuplicateErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    @if (icon) {\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    }\r\n  </ng-container>\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--edit template-->\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--options-->\r\n  @if (options) {\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!--privileges-->\r\n  @if (form.controls.privileges) {\r\n  <bizdoc-designer-privileges [form]=\"form.controls.privileges\"></bizdoc-designer-privileges>\r\n  }\r\n</form>\r\n}\r\n}\r\n<!--add-->\r\n@case ('add') {\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--add template-->\r\n  <ng-container [ngTemplateOutlet]=\"addContent?.templateRef\"></ng-container>\r\n  @if (options) {\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!-- continue-->\r\n  <div class=\"row actions\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"form.invalid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</form>\r\n  }\r\n}\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1;width:100%}form{min-width:280px;padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\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.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: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: DesignerItemComponent, isStandalone: false, selector: "bizdoc-designer-element", inputs: { privileges: "privileges", icon: "icon", form: "form", context: "context" }, outputs: { onSave: "save", onContinue: "continue" }, queries: [{ propertyName: "editContent", first: true, predicate: EditContentDirective, descendants: true }, { propertyName: "addContent", first: true, predicate: AddContentDirective, descendants: true }, { propertyName: "widgetContent", first: true, predicate: WidgetContentDirective, descendants: true }, { propertyName: "customContents", predicate: CustomContentDirective }], usesOnChanges: true, ngImport: i0, template: "@switch (mode) {\r\n<!--widget mode -->\r\n@case ('widget') {\r\n<!--icon -->\r\n  @if (model.familyKey) {\r\n    @if (SVG[model.familyKey]) {\r\n<img class=\"logo\" [src]=\"resource(SVG[model.familyKey])\" [bizdocTooltip]=\"model.family\" />\r\n    }\r\n    @else {\r\n<div>{{model.family}}</div>\r\n    }\r\n  }\r\n<!--options-->\r\n<ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n<!--designer widget-->\r\n<ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n}\r\n@case ('edit') {\r\n<!--edit / custom mode -->\r\n@if (context?.active) {\r\n<mat-toolbar class=\"row\">\r\n  @if(context.mode === 'add') {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [disabled]=\"context.form.invalid\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"closeView()\" [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n  }\r\n  @else {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_backspace</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <h2 class=\"mat-h2\">{{context.title|translate}}</h2>\r\n  <ng-container *ngTemplateOutlet=\"customView; context: context\"></ng-container>\r\n</form>\r\n}\r\n@else {\r\n<!--edit mode -->\r\n<mat-toolbar bizdoc-sticky>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"form.invalid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"close()\"  [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  @if (model.resourceType) {\r\n  <p class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  <br />\r\n  }\r\n  <ng-container [formGroup]=\"form\">\r\n    <div class=\"row gap\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        @if (form.controls.name.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n        @if (form.controls.name.hasError('duplicate')) {\r\n        <mat-error [innerHTML]=\"'DuplicateErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    @if (icon) {\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    }\r\n  </ng-container>\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--edit template-->\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--options-->\r\n  @if (options) {\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!--privileges-->\r\n  @if (form.controls.privileges) {\r\n  <bizdoc-designer-privileges [form]=\"form.controls.privileges\"></bizdoc-designer-privileges>\r\n  }\r\n</form>\r\n}\r\n}\r\n<!--add-->\r\n@case ('add') {\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--add template-->\r\n  @if(addContent) {\r\n  <ng-container [ngTemplateOutlet]=\"addContent.templateRef\"></ng-container>\r\n  }\r\n  @else {\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  }\r\n  @if (options) {\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!-- continue-->\r\n  <div class=\"row actions\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"form.invalid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</form>\r\n  }\r\n}\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1;width:100%}form{min-width:280px;padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\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.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: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: i8$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: "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: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "component", type: LocalizedStringComponent, selector: "bizdoc-localized-string", inputs: ["class", "floatLabel", "value", "placeholder", "required", "disabled", "maxlength"] }, { kind: "component", type: DesignerPrivilegesComponent, selector: "bizdoc-designer-privileges", inputs: ["form"] }, { kind: "component", type: IconPickerComponent, selector: "bizdoc-icon-picker", inputs: ["value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: DesignerItemComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'bizdoc-designer-element', template: "@switch (mode) {\r\n<!--widget mode -->\r\n@case ('widget') {\r\n<!--icon -->\r\n  @if (model.familyKey) {\r\n    @if (SVG[model.familyKey]) {\r\n<img class=\"logo\" [src]=\"resource(SVG[model.familyKey])\" [bizdocTooltip]=\"model.family\" />\r\n    }\r\n    @else {\r\n<div>{{model.family}}</div>\r\n    }\r\n  }\r\n<!--options-->\r\n<ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n<!--designer widget-->\r\n<ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n}\r\n@case ('edit') {\r\n<!--edit / custom mode -->\r\n@if (context?.active) {\r\n<mat-toolbar class=\"row\">\r\n  @if(context.mode === 'add') {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [disabled]=\"context.form.invalid\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"closeView()\" [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n  }\r\n  @else {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_backspace</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <h2 class=\"mat-h2\">{{context.title|translate}}</h2>\r\n  <ng-container *ngTemplateOutlet=\"customView; context: context\"></ng-container>\r\n</form>\r\n}\r\n@else {\r\n<!--edit mode -->\r\n<mat-toolbar bizdoc-sticky>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"form.invalid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"close()\"  [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  @if (model.resourceType) {\r\n  <p class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  <br />\r\n  }\r\n  <ng-container [formGroup]=\"form\">\r\n    <div class=\"row gap\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        @if (form.controls.name.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n        @if (form.controls.name.hasError('duplicate')) {\r\n        <mat-error [innerHTML]=\"'DuplicateErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    @if (icon) {\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    }\r\n  </ng-container>\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--edit template-->\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--options-->\r\n  @if (options) {\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!--privileges-->\r\n  @if (form.controls.privileges) {\r\n  <bizdoc-designer-privileges [form]=\"form.controls.privileges\"></bizdoc-designer-privileges>\r\n  }\r\n</form>\r\n}\r\n}\r\n<!--add-->\r\n@case ('add') {\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--add template-->\r\n  <ng-container [ngTemplateOutlet]=\"addContent?.templateRef\"></ng-container>\r\n  @if (options) {\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!-- continue-->\r\n  <div class=\"row actions\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"form.invalid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</form>\r\n  }\r\n}\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1;width:100%}form{min-width:280px;padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"] }]
+            args: [{ standalone: false, selector: 'bizdoc-designer-element', template: "@switch (mode) {\r\n<!--widget mode -->\r\n@case ('widget') {\r\n<!--icon -->\r\n  @if (model.familyKey) {\r\n    @if (SVG[model.familyKey]) {\r\n<img class=\"logo\" [src]=\"resource(SVG[model.familyKey])\" [bizdocTooltip]=\"model.family\" />\r\n    }\r\n    @else {\r\n<div>{{model.family}}</div>\r\n    }\r\n  }\r\n<!--options-->\r\n<ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n<!--designer widget-->\r\n<ng-container [ngTemplateOutlet]=\"widgetContent?.templateRef\"></ng-container>\r\n}\r\n@case ('edit') {\r\n<!--edit / custom mode -->\r\n@if (context?.active) {\r\n<mat-toolbar class=\"row\">\r\n  @if(context.mode === 'add') {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [disabled]=\"context.form.invalid\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"closeView()\" [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n  }\r\n  @else {\r\n  <button mat-icon-button (click)=\"closeView(true)\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon>keyboard_backspace</mat-icon></button>\r\n  }\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <h2 class=\"mat-h2\">{{context.title|translate}}</h2>\r\n  <ng-container *ngTemplateOutlet=\"customView; context: context\"></ng-container>\r\n</form>\r\n}\r\n@else {\r\n<!--edit mode -->\r\n<mat-toolbar bizdoc-sticky>\r\n  <button mat-icon-button (click)=\"save()\" [disabled]=\"form.invalid || !form.dirty\"><mat-icon>save</mat-icon></button>\r\n  <span class=\"divider\"></span>\r\n  <button mat-icon-button (click)=\"close()\"  [bizdocTooltip]=\"'Close'|translate\"><mat-icon>close</mat-icon></button>\r\n</mat-toolbar>\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  @if (model.resourceType) {\r\n  <p class=\"message\" (click)=\"unlock($event)\" [innerHTML]=\"'UnlockMultilang'|translate\"></p>\r\n  <br />\r\n  }\r\n  <ng-container [formGroup]=\"form\">\r\n    <div class=\"row gap\">\r\n      <bizdoc-localized-string #title formControlName=\"title\" [placeholder]=\"'Title'|translate\" required class=\"flex column\"></bizdoc-localized-string>\r\n      <mat-form-field class=\"flex\">\r\n        <mat-label>{{'Name'|translate}}</mat-label>\r\n        <input matInput formControlName=\"name\" required />\r\n        @if (form.controls.name.hasError('required')) {\r\n        <mat-error [innerHTML]=\"'RequiredErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n        @if (form.controls.name.hasError('duplicate')) {\r\n        <mat-error [innerHTML]=\"'DuplicateErr'|translate:('Name'|translate)\"></mat-error>\r\n        }\r\n      </mat-form-field>\r\n    </div>\r\n    @if (icon) {\r\n    <bizdoc-icon-picker formControlName=\"icon\" required></bizdoc-icon-picker>\r\n    }\r\n  </ng-container>\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--edit template-->\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  <!--options-->\r\n  @if (options) {\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!--privileges-->\r\n  @if (form.controls.privileges) {\r\n  <bizdoc-designer-privileges [form]=\"form.controls.privileges\"></bizdoc-designer-privileges>\r\n  }\r\n</form>\r\n}\r\n}\r\n<!--add-->\r\n@case ('add') {\r\n<form autocomplete=\"off\" class=\"column\" (keydown)=\"handleKeyboardEvent($event)\">\r\n  <!--arguments-->\r\n  @if (arguments) {\r\n  <ng-container (attached)=\"argumentsAttached($event)\" [cdkPortalOutlet]=\"arguments\"></ng-container>\r\n  }\r\n  <!--add template-->\r\n  @if(addContent) {\r\n  <ng-container [ngTemplateOutlet]=\"addContent.templateRef\"></ng-container>\r\n  }\r\n  @else {\r\n  <ng-container [ngTemplateOutlet]=\"editContent?.templateRef\"></ng-container>\r\n  }\r\n  @if (options) {\r\n  <!--options-->\r\n  <ng-container (attached)=\"optionsAttached($event)\" [cdkPortalOutlet]=\"options\"></ng-container>\r\n  }\r\n  <!-- continue-->\r\n  <div class=\"row actions\">\r\n    <span class=\"divider\"></span>\r\n    <button mat-stroked-button [disabled]=\"form.invalid\" (click)=\"continue()\" type=\"button\">{{'Continue'|translate}}&nbsp;<mat-icon class=\"mat-icon-rtl-mirror\">double_arrow</mat-icon></button>\r\n  </div>\r\n</form>\r\n  }\r\n}\r\n", styles: ["img.logo{display:block;height:26px}:host{flex:1;width:100%}form{min-width:280px;padding:8px}p.message{margin:5px}:host ::ng-deep .cdk-drag-handle{cursor:move}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1$2.FormBuilder }, { type: i2$1.DomSanitizer }, { type: DesignerRef, decorators: [{
                     type: Inject,
                     args: [DesignerRef]
@@ -35658,6 +35686,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
             args: [{ standalone: false, selector: 'bizdoc-device-designer', template: "<bizdoc-designer-element [form]=\"form\">\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n        <mat-form-field>\r\n            <mat-label>{{'ExecutionMode'|translate}}</mat-label>\r\n            <mat-select formControlName=\"executionMode\">\r\n                <mat-option value=\"RegisteredDevice\">{{'RegisteredDevice'|translate}}</mat-option>\r\n                <mat-option value=\"Challenge\">{{'Challenge'|translate}}</mat-option>\r\n            </mat-select>\r\n        </mat-form-field>\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
         }] });
 
+class TagDesignComponent extends DesignerTypeElementComponent {
+    constructor(fb, element, ref) {
+        super(fb, element, ref);
+        this.form = this._fb.group({
+            color: null,
+            backgroundColor: null,
+            system: true,
+        });
+    }
+    ngOnInit() {
+        //  if (this.mode !== 'widget') {
+        //  }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TagDesignComponent, deps: [{ token: i1$2.FormBuilder }, { token: i0.ElementRef }, { token: DesignerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.6", type: TagDesignComponent, isStandalone: false, selector: "ng-component", usesInheritance: true, ngImport: i0, template: "<bizdoc-designer-element [form]=\"form\" [icon]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row\">\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n        <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n      <mat-checkbox formControlName=\"system\">{{'System'|translate}}</mat-checkbox>\r\n      <!--<mat-chip [ngStyle]=\"{'background-color': form.controls.backgroundColor.value, 'color': form.controls.color.value}\">{{'Tag'|translate}}</mat-chip>-->\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n", dependencies: [{ kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.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$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: "component", type: ColorPicker, selector: "bizdoc-color-picker", inputs: ["label", "value", "required", "disabled"], outputs: ["valueChanges"] }, { kind: "directive", type: EditContentDirective, selector: "[bizdocEditContent]" }, { kind: "component", type: DesignerItemComponent, selector: "bizdoc-designer-element", inputs: ["privileges", "icon", "form", "context"], outputs: ["save", "continue"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: TagDesignComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: false, template: "<bizdoc-designer-element [form]=\"form\" [icon]=\"true\">\r\n  <ng-template bizdocEditContent>\r\n    <ng-container [formGroup]=\"form\">\r\n      <div class=\"row\">\r\n        <bizdoc-color-picker formControlName=\"color\" [label]=\"'Color'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n        <bizdoc-color-picker formControlName=\"backgroundColor\" [label]=\"'BackgroundColor'|translate\" class=\"flex\"></bizdoc-color-picker>\r\n      </div>\r\n      <mat-checkbox formControlName=\"system\">{{'System'|translate}}</mat-checkbox>\r\n      <!--<mat-chip [ngStyle]=\"{'background-color': form.controls.backgroundColor.value, 'color': form.controls.color.value}\">{{'Tag'|translate}}</mat-chip>-->\r\n    </ng-container>\r\n  </ng-template>\r\n</bizdoc-designer-element>\r\n" }]
+        }], ctorParameters: () => [{ type: i1$2.FormBuilder }, { type: i0.ElementRef }, { type: DesignerRef, decorators: [{
+                    type: Inject,
+                    args: [DesignerRef]
+                }] }] });
+
 const SEARCH_DEBOUNCE = 200;
 /** */
 let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
@@ -35706,6 +35758,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
                     { elements: r.notifications, type: 'Notifications', comp: NotificationDesignComponent, templates: r.tNotifications },
                     { elements: r.devices, type: 'Devices', comp: DeviceDesignComponent, templates: r.tDevices },
                     { elements: r.controls, type: 'Controls', comp: ControlDesignComponent },
+                    { elements: r.tags, type: 'Tags', comp: TagDesignComponent, templates: [{ title: this._translate.get('Tag') }] },
                     { elements: r.policies, type: 'Policies', comp: PolicyDesignComponent, templates: r.tPolicies },
                 ];
                 const families = [];
@@ -35938,7 +35991,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
     }
     save() {
         this.saving = true;
-        const { controls, attributes, policies, actions, cubes, folders, forms, guides, reports, roles, notifications, rules, states, types, utilities, views, widgets, nodes, devices } = this.model;
+        const { controls, tags, attributes, policies, actions, cubes, folders, forms, guides, reports, roles, notifications, rules, states, types, utilities, views, widgets, nodes, devices } = this.model;
         const model = {
             actions: strip(actions),
             cubes: strip(cubes),
@@ -35958,6 +36011,7 @@ let ConfigurationDesignerComponent = class ConfigurationDesignerComponent {
             nodes: strip(nodes),
             widgets: strip(widgets),
             controls: strip(controls),
+            tags: strip(tags),
             attributes: strip(attributes)
         };
         this._ref.execute(model).subscribe({
@@ -37196,6 +37250,9 @@ class SystemModule {
         registerComponents(DESINER_COMPONENTS);
         TranslateService.set({
             en: {
+                BackgroundColor: 'Background color',
+                Tag: 'Tag',
+                Tags: 'Tags',
                 RegisteredDevice: 'Registered device',
                 Challenge: 'Challenge',
                 Settings: 'Settings',
@@ -37581,7 +37638,7 @@ class SystemModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SystemModule, declarations: [
             /** design */
             FormInviteDialog, PerformanceReportDesignComponent, NodeDesignerComponent, DesignerPrivilegesComponent, AddContentDirective, IconPickerComponent, CustomContentDirective, EditContentDirective, WidgetContentDirective,
-            DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, DeviceDesignComponent, NotificationDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, SourceDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
+            DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, TagDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, DeviceDesignComponent, NotificationDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, SourceDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
             CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
             LocalizedStringField,
             /** utilities */
@@ -37624,7 +37681,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                     declarations: [
                         /** design */
                         FormInviteDialog, PerformanceReportDesignComponent, NodeDesignerComponent, DesignerPrivilegesComponent, AddContentDirective, IconPickerComponent, CustomContentDirective, EditContentDirective, WidgetContentDirective,
-                        DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, DeviceDesignComponent, NotificationDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, SourceDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
+                        DocumentStateWidgetDesignComponent, PolicyDesignComponent, StateDesignComponent, TagDesignComponent, RoleDesignComponent, GuideDesignComponent, ControlDesignComponent, AttributeDesignComponent, DeviceDesignComponent, NotificationDesignComponent, RuleDesignComponent, ReportDesignerComponent, FolderDesignComponent, UtilityDesignComponent, FormDesignComponent, WidgetDesignComponent, SourceDesignComponent, JobDesignComponent, CubeDesignComponent, ActionDesignerComponent, ReportDesignerComponent, ViewDesignComponent, TypeDesignComponent,
                         CubeIndexDesignComponent, ConfigurationDatasourceDesignComponent, ReturnToRoleActionDesignComponent, PivotViewDesignComponent, CubeViewDesignComponent, BoxFormDesignComponent, AnomalyRuleDesignComponent, UsageReportDesignComponent, DocumentsWidgetDesignComponent, PerformanceWidgetDesignComponent, DocumentsReportDesignComponent, TasksReportDesignComponent, ExploreViewDesignComponent, AnalysisWidgetDesignComponent, ParallelViewDesignComponent, SumViewDesignComponent, MatrixViewDesignComponent, ChartViewDesignComponent,
                         LocalizedStringField,
                         /** utilities */