@bizdoc/core 1.14.0-next.8 → 1.14.0-next.9

package/fesm2020/bizdoc-core.mjs

@@ -842,6 +842,7 @@ var OpenPolicy;
     OpenPolicy[OpenPolicy["Dialog"] = 112] = "Dialog";
     OpenPolicy[OpenPolicy["Dismissable"] = 128] = "Dismissable";
     OpenPolicy[OpenPolicy["Toggle"] = 256] = "Toggle";
+    OpenPolicy[OpenPolicy["Stretch"] = 256] = "Stretch";
 })(OpenPolicy || (OpenPolicy = {}));
 const DEFAULT_POLICY = OpenPolicy.Pane;
 
@@ -1007,6 +1008,9 @@ const THEMES = [
     { name: 'brown', primary: 'brown', color: '#795548', accent: 'grey' }
 ];
 const SUPPORTED_LANGUAGES = ['en', 'he', 'de', 'ar', 'ru'], RTL_LANGUALGES = ['he', 'ar'];
+function SessionProviderFactory(provider) {
+    return () => provider.prepare();
+}
 class SessionService {
     constructor(_config, _http, _cookies, _hub) {
         this._config = _config;
@@ -1020,7 +1024,12 @@ class SessionService {
         this.themeChange = this._themeChange.asObservable();
         this._firebase = new FirebaseService(this._config ? this._config.firebase : null, this);
         ('serviceWorker' in navigator) && this._loadSw();
-        _config && _config.maps && this._loadMaps();
+    }
+    prepare() {
+        const promisses = [];
+        if (this._config.maps)
+            promisses.push(this._googleMaps());
+        return Promise.all(promisses);
     }
     get profile() { return this._profile; }
     get gender() { return this.profile.byId ? this._profile.byGender : this._profile.gender; }
@@ -1215,11 +1224,14 @@ class SessionService {
             }, null);
         });
     }
-    _loadMaps() {
+    _googleMaps() {
         const apiKey = this._config.maps.apiKey;
-        const script = document.createElement('script');
-        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&language=${this.language}`;
-        document.head.append(script);
+        return new Promise((resolve, reject) => {
+            const script = document.createElement('script');
+            script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&language=${this.language}`;
+            script.addEventListener('load', resolve, {});
+            document.head.append(script);
+        });
     }
 }
 SessionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SessionService, deps: [{ token: BIZDOC_CONFIG }, { token: i1.HttpClient }, { token: i2.CookieService }, { token: HubService }], target: i0.ɵɵFactoryTarget.Injectable });
@@ -6257,6 +6269,9 @@ class PaneRef {
     ;
     get parent() { return this._options.parent; }
     ;
+    get stretch() { return this._options.stretch; }
+    ;
+    set stretch(val) { this._options.stretch = val; }
     get dialog() { return this._options.dialog; }
     ;
     get dismissable() { return this._options.dismissable; }
@@ -11392,6 +11407,10 @@ class CubeViewPaneComponent extends ViewBase {
             this._pane.group = this.cube.title;
             this._pane.title = this.view.title;
             this._pane.icon = this.view.icon || this.cube.icon;
+            if (this.view.type === 'Spreadsheet' ||
+                this.view.type === 'Grid' ||
+                (this.view.type === 'Pivot' && !this.view.chartType))
+                this._pane.stretch = true;
         });
         this._pane.queryParamsChange.subscribe(p => this.originalAxes = p);
         this._pane.resize.subscribe(() => this.viewPane.resize());
@@ -17301,8 +17320,7 @@ class DocumentViewRef {
 }
 
 class ViewItemComponent {
-    constructor(_pane, _http, _vc, _injector, _cf) {
-        this._pane = _pane;
+    constructor(_http, _vc, _injector, _cf) {
         this._http = _http;
         this._vc = _vc;
         this._injector = _injector;
@@ -17341,7 +17359,7 @@ class ViewItemComponent {
         this._destroy.complete();
     }
 }
-ViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ViewItemComponent, deps: [{ token: PaneRef, optional: true }, { token: i1.HttpClient }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: BizDocComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+ViewItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ViewItemComponent, deps: [{ token: i1.HttpClient }, { token: i0.ViewContainerRef }, { token: i0.Injector }, { token: BizDocComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
 ViewItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: ViewItemComponent, selector: "bizdoc-document-view-item", inputs: { model: "model", view: "view" }, host: { listeners: { "window:resize": "resize()" } }, ngImport: i0, template: '', isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: ViewItemComponent, decorators: [{
             type: Component,
@@ -17350,9 +17368,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                     template: '',
                     //host: { class: 'bz-view' }
                 }]
-        }], ctorParameters: function () { return [{ type: PaneRef, decorators: [{
-                    type: Optional
-                }] }, { type: i1.HttpClient }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: BizDocComponentFactoryResolver }]; }, propDecorators: { model: [{
+        }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i0.ViewContainerRef }, { type: i0.Injector }, { type: BizDocComponentFactoryResolver }]; }, propDecorators: { model: [{
                 type: Input
             }], view: [{
                 type: Input
@@ -18498,6 +18514,7 @@ class SlotsComponent {
         this.panes = [];
         this.tabs = [];
         this._selectedTabIndex = -1;
+        this.dialog = false;
         this.selectedIndex = -1;
         this.dragging = false;
         this.ripple = {
@@ -18527,6 +18544,7 @@ class SlotsComponent {
     }
     set selectedTabIndex(value) {
         this._selectedTabIndex = value;
+        this.dialog = this._selectedTabIndex > -1 && this.tabs.at(this._selectedTabIndex).dialog;
         this._setTabAnimation();
     }
     _setTabAnimation() {
@@ -18609,7 +18627,7 @@ class SlotsComponent {
                                 this.group = tab.group;
                                 this.selectedTabIndex = i;
                                 this._cd.detectChanges();
-                                this._replaceUrl();
+                                this._sync();
                                 return;
                             }
                         }
@@ -18617,7 +18635,7 @@ class SlotsComponent {
                             await this._navParams(path, tab, params, queryParams, state);
                             this.group = tab.group;
                             this.selectedTabIndex = i;
-                            this._replaceUrl();
+                            this._sync();
                             return;
                         }
                         i++;
@@ -18639,13 +18657,13 @@ class SlotsComponent {
                             else {
                                 this._navQueryParams(pane, queryParams, state);
                                 this.scrollTo(i);
-                                this._replaceUrl();
+                                this._sync();
                                 return;
                             }
                         }
                         else if (pane.route === route) {
                             await this._navParams(path, pane, params, queryParams, state);
-                            this._replaceUrl();
+                            this._sync();
                             return;
                         }
                         i++;
@@ -18686,13 +18704,13 @@ class SlotsComponent {
                         pane._fullscreen$.next(this.panes.length === 1);
                     }
                     route &&
-                        this._replaceUrl();
+                        this._sync();
                 }
                 else {
                     const pane = (policy & OpenPolicy.Tab) == OpenPolicy.Tab ?
                         this.tabs[this.selectedTabIndex] : this.panes[this.selectedIndex];
                     this._navQueryParams(pane, queryParams, state);
-                    this._replaceUrl();
+                    this._sync();
                     if ((policy & OpenPolicy.Tab) != OpenPolicy.Tab)
                         this.select(this.selectedIndex);
                 }
@@ -18952,7 +18970,7 @@ class SlotsComponent {
         this._cd.detectChanges();
     }
     /** */
-    _replaceUrl() {
+    _sync() {
         this._navigating = true;
         this._history('push');
         setTimeout(() => this._navigating = false, 200);
@@ -18985,7 +19003,7 @@ class SlotsComponent {
         const pane = this.panes[evt.previousIndex];
         this.panes.splice(evt.previousIndex, 1);
         this.panes.splice(evt.currentIndex, 0, pane);
-        this._replaceUrl();
+        this._sync();
     }
     togglePinned(pane) {
         pane.pinned = !pane.pinned;
@@ -19118,8 +19136,11 @@ class SlotsComponent {
         return pane;
     }
     _insertPane(component, options, position) {
-        //this._animationBuilder.build([]).create(element, { params: {} }).play();
-        const pane = this._constract(component, 'pane', options);
+        const stretch = (options.policy & OpenPolicy.Stretch) == OpenPolicy.Stretch;
+        const pane = this._constract(component, 'pane', {
+            stretch,
+            ...options
+        });
         if (position === undefined)
             position = this.panes.length;
         this.panes.push(pane);
@@ -19149,6 +19170,11 @@ class SlotsComponent {
         pane._comm$.subscribe(e => this._action(e, pane));
         return pane;
     }
+    /**
+     *
+     * @param component
+     * @param options
+     */
     _insertTab(component, options) {
         const { policy } = options, dialog = (policy & OpenPolicy.Dialog) == OpenPolicy.Dialog, dismissable = (policy & OpenPolicy.Dismissable) == OpenPolicy.Dismissable;
         const tab = this._constract(component, 'tab', {
@@ -19157,7 +19183,6 @@ class SlotsComponent {
             dismissable
         });
         this.tabs.push(tab);
-        this.dialog = dialog;
         this._router._events$.next(new NavigationStart(tab));
         this._cd.detectChanges();
         if (tab.group && this.group !== tab.group && options.swap !== false) {
@@ -19200,6 +19225,11 @@ class SlotsComponent {
         this._back(this.swapTab);
         this.swapTab = null;
     }
+    /**
+     *
+     * @param e
+     * @param pane
+     */
     _action(e, pane) {
         switch (e) {
             case 'focus':
@@ -19247,19 +19277,30 @@ class SlotsComponent {
         this.tabs.splice(0, this.tabs.length);
         this.selectedTabIndex = -1;
         this.swapTab = null;
-        this.dialog = false;
-        this._replaceUrl();
+        this._sync();
         this._router._events$.next(new CollapseNavigation());
     }
+    onResize() {
+        if (this.panes.length && !this.panes[this.panes.length - 1].stretch) {
+            const el = this._panesContainerRef.element.nativeElement, child = el.lastElementChild;
+            child.style.minWidth =
+                (el.parentElement.parentElement.clientWidth - child.offsetLeft - 2) + 'px';
+        }
+    }
     _resize() {
+        //this.tabs.concat(this.panes).forEach(t => t._resize$.next({
+        //} as any));
         window.dispatchEvent(new Event('resize'));
     }
+    dismiss() {
+        this.closeTab(this.selectedTabIndex);
+    }
     closeTab(position) {
         const tab = this.tabs[position];
         this.tabs.splice(position, 1);
         this._destroyPane(tab);
         this.selectedTabIndex = this.tabs.length ? position > 0 ? position - 1 : 0 : -1;
-        this._replaceUrl();
+        this._sync();
     }
     expandPane() {
         const pane = this.panes[this.selectedIndex];
@@ -19274,7 +19315,7 @@ class SlotsComponent {
                 i++;
         } while (i < this.panes.length);
         this.selectedIndex = 0;
-        this._replaceUrl();
+        this._sync();
         pane._fullscreen$.next(true);
     }
     _getHistoryStep() {
@@ -19290,7 +19331,7 @@ class SlotsComponent {
         tab._mode$.next('pane');
         tab._fullscreen$.next(true);
         this.selectedTabIndex = this.tabs.length ? 0 : -1;
-        this._replaceUrl();
+        this._sync();
     }
     select(position) {
         if (this.selectedIndex === position)
@@ -19313,7 +19354,7 @@ class SlotsComponent {
         this._discardPane(pane);
         if (position >= this.selectedIndex)
             this.select(-1);
-        this._replaceUrl();
+        this._sync();
     }
     /**
      *
@@ -19403,7 +19444,7 @@ class SlotsComponent {
         const el = this._children.item(index);
         el.focus();
     }
-    onResize(pane, event) {
+    onPaneResize(pane, event) {
         const el = event.srcElement.previousElementSibling;
         const // remember mouse down info
         width = el.clientWidth, d = this._rtl ? -1 : 1;
@@ -19443,9 +19484,6 @@ class SlotsComponent {
             const delta = Math.max((e.clientX - event.clientX) * d, -width);
             el.style.width = el.style.minWidth = (width + delta) + 'px';
             localStorage.setItem('tabs', el.style.width);
-            //  this.tabs[this.selectedTabIndex]._resize$.next({
-            //    height: el.clientHeight, width: width + delta
-            //  });
         }
     }
     _destroyPane(pane) {
@@ -19458,7 +19496,7 @@ class SlotsComponent {
     }
 }
 SlotsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.1", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: GuideService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-SlotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SlotsComponent, selector: "bizdoc-panes", host: { listeners: { "document:keydown.escape": "collapse()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["paning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"], components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: QuickToolsComponent, selector: "bizdoc-quicktools" }, { type: i8$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: NgxComponentOutlet, selector: "ngx-component-outlet", inputs: ["type", "injector", "ngxComponentOutletContent"], outputs: ["create"] }, { type: i8$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe }, animations: [panesAnimation,
+SlotsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.1", type: SlotsComponent, selector: "bizdoc-panes", host: { listeners: { "document:keydown.escape": "collapse()", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panning"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabing"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div class=\"panes\">\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #panning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onPaneResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"backdrop\" *ngIf=\"dialog\" (click)=\"dismiss()\"></div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"], components: [{ type: i7$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: QuickToolsComponent, selector: "bizdoc-quicktools" }, { type: i8$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12$2.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { type: NgxComponentOutlet, selector: "ngx-component-outlet", inputs: ["type", "injector", "ngxComponentOutletContent"], outputs: ["create"] }, { type: i8$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i13.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], pipes: { "translate": TranslatePipe }, animations: [panesAnimation,
         panesTitleAnimation,
         paneAnimation,
         paramAnimation,
@@ -19475,13 +19513,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         queryAnimation,
                         tabsAnimation,
                         tabAnimation
-                    ], template: "<div class=\"panes\">\r\n  <div class=\"backdrop\" [style.display]=\"dialog ? '' : 'none'\"></div>\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #paning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"] }]
+                    ], template: "<div class=\"panes\">\r\n  <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\"\r\n       *ngIf=\"prev\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\">\r\n      arrow_back_ios\r\n    </i>\r\n  </div>\r\n  <div class=\"panes-title\" [@title]=\"titleAnimation\">\r\n    <h1>\r\n      <button mat-icon-button (click)=\"back()\" *ngIf=\"swap\" [bizdocTooltip]=\"'Back'|translate\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_circle_left</mat-icon></button>\r\n      <ng-container *ngFor=\"let p of panes; let first = first\">\r\n        <span class=\"breadcrumbs\" *ngIf=\"!first\">\\</span>\r\n        {{p.title}}\r\n      </ng-container>\r\n      <button mat-icon-button (click)=\"guide(panes[0].guide)\" *ngIf=\"panes[0]?.guide\" [bizdocTooltip]=\"'Help'|translate\"><mat-icon>help</mat-icon></button>\r\n    </h1>\r\n    <span class=\"divider\">\r\n    </span>\r\n    <bizdoc-quicktools></bizdoc-quicktools>\r\n  </div>\r\n  <div #panning class=\"panes-container\"\r\n       cdkScrollable\r\n       @panes\r\n       (scroll)=\"navigationArrows($event)\">\r\n    <ng-container *ngFor=\"let p of panes; let i = index\">\r\n      <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\r\n           (click)=\"select(i)\"\r\n           [class.active]=\"selectedIndex === i\" class=\"pane-content\" @pane>\r\n        <ngx-component-outlet [type]=\"p.component\" [injector]=\"p.injector\" (create)=\"p._instance = $event\"></ngx-component-outlet>\r\n      </div>\r\n      <div class=\"pane-separator\" *ngIf=\"i < panes.length - 1\" (mousedown)=\"onPaneResize(p, $event)\">&nbsp;</div>\r\n    </ng-container>\r\n  </div>\r\n  <div class=\"backdrop\" *ngIf=\"dialog\" (click)=\"dismiss()\"></div>\r\n  <div class=\"scroll-arrow forward\"\r\n       *ngIf=\"next\">\r\n    <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\r\n       (click)=\"scrollBy(400)\">\r\n      arrow_forward_ios\r\n    </i>\r\n  </div>\r\n</div>\r\n<ng-container *ngIf=\"tabs.length\">\r\n  <div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\">&nbsp;</div>\r\n  <div class=\"mat-elevation-z18 tabs\" [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\" #tabing>\r\n    <div class=\"row tabs-title\">\r\n      <button mat-icon-button (click)=\"tabBack()\" *ngIf=\"swapTab\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\r\n      <h2>{{group}}</h2>\r\n      <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon inline=\"true\" class=\"mat-icon-rtl-mirror\">open_in_full</mat-icon></button>\r\n      <span class=\"divider\"></span>\r\n      <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\r\n    </div>\r\n    <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\">\r\n      <a mat-tab-link *ngFor=\"let p of tabs; let i = index\" class=\"mat-tab-link\"\r\n         (click)=\"selectedTabIndex = i\"\r\n         [active]=\"selectedTabIndex === i\">\r\n        <mat-icon [matBadge]=\"p.badge\" [matBadgeHidden]=\"!p.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\">{{p.icon}}</mat-icon>&nbsp;\r\n        {{p.title}}\r\n        <mat-icon *ngIf=\"p.dismissable\" (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\r\n        <!--inline=\"true\"-->\r\n      </a>\r\n    </nav>\r\n    <div *ngFor=\"let t of tabs; let i = index\" [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\r\n      <ngx-component-outlet [type]=\"t.component\" [injector]=\"t.injector\" (create)=\"t._instance = $event\"></ngx-component-outlet>\r\n    </div>\r\n  </div>\r\n</ng-container>\r\n", styles: [":host{display:flex;flex-direction:row;flex-grow:1;overflow-x:hidden}.panes{flex-grow:1;position:relative;overflow-x:hidden;display:inline-flex;flex-direction:column;flex-basis:100%}.panes .panes-title{display:flex;flex-direction:row;align-items:center;min-width:max-content}.panes .panes-title h1{font-size:xx-large;margin:12px;font-weight:100}.panes .panes-title h1 button{vertical-align:middle}.panes .panes-title h1 .breadcrumbs{font-size:smaller}.panes .scroll-arrow{position:absolute;cursor:pointer;top:50%;z-index:1000}.panes .scroll-arrow i{font-size:50px;opacity:.2}.panes .scroll-arrow i:hover{opacity:.9}.panes .scroll-arrow:last-child{right:0}.panes .panes-container{overflow-x:auto;height:100%;display:flex;flex-direction:row}.panes .panes-container .pane-content{display:block;border-right:1px solid #00000014;height:inherit;border-left-width:1px;border-left-style:double;border-left-color:transparent;flex-grow:1;min-width:420px;overflow-y:auto}.panes .panes-container .pane-content .pane{flex-grow:1}.panes .panes-container .pane-separator{width:8px}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-webkit-user-select:none;user-select:none}.tabs-separator{width:12px}::ng-deep [dir=rtl] .scroll-arrow:last-child{right:unset;left:0}.tabs{display:flex;flex-direction:column;z-index:1;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-tab-link .tool{opacity:0}.tabs .mat-tab-link:hover .tool{opacity:1}.tabs .tab{flex-grow:1;overflow-y:auto;overflow-x:hidden;display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [PANES_DATA]
                 }] }, { type: SessionService }, { type: i0.ChangeDetectorRef }, { type: PanesRouter }, { type: WindowTitleService }, { type: GuideService }, { type: i0.Injector }]; }, propDecorators: { _panesContainerRef: [{
                 type: ViewChild,
-                args: ['paning', { read: ViewContainerRef, static: true }]
+                args: ['panning', { read: ViewContainerRef, static: true }]
             }], _tabsElement: [{
                 type: ViewChild,
                 args: ['tabing']
@@ -19491,6 +19529,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
             }], collapse: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
             }] } });
 const PANE_PARAMS_REGEX = /(:[\w\-]+)/g;
 function prepareRoutes(routes, treePath) {
@@ -20048,7 +20089,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
 const PANES_CONFIG = [{
         path: 'dashboard',
         component: DashboardPaneComponent,
-        policy: OpenPolicy.Clear,
+        policy: OpenPolicy.Clear | OpenPolicy.Stretch,
     },
     { component: BrokenPage, path: 'broken' },
     {
@@ -22763,7 +22804,10 @@ let PersonalScoreWidget = class PersonalScoreWidget {
             width: 0, position: 'Outside'
         };
         this.legendSettings = {
-            visible: true, position: 'Top', shape: 'Diamond', alignment: 'Center', padding: 0, margin: { top: 0 }, location: { y: 0 }, textStyle: {
+            visible: true, position: 'Top', shape: 'Diamond', alignment: 'Center',
+            padding: 0, margin: { top: 0 },
+            location: { y: 0 },
+            textStyle: {
                 fontFamily: FONT_FAMILY
             }
         };
@@ -22872,6 +22916,15 @@ let PersonalScoreWidget = class PersonalScoreWidget {
     }
     _draw() {
         this.gauge && this.gauge.destroy();
+        const axes = [{
+                radius: '90%', maximum: this.max,
+                startAngle: 270,
+                endAngle: 90,
+                majorTicks: this.majorTicks, direction: this.direction,
+                labelStyle: this.labelStyle, lineStyle: this.lineStyle, minorTicks: this.minorTicks,
+                ranges: this.ranges,
+                pointers: this.pointers
+            }];
         this.gauge = new CircularGauge({
             tooltip: this.tooltip,
             centerY: '50%',
@@ -22885,15 +22938,7 @@ let PersonalScoreWidget = class PersonalScoreWidget {
             legendSettings: this.legendSettings,
             tooltipRender: this.tooltipRender.bind(this),
             enableRtl: this._session.inverse,
-            axes: [{
-                    radius: '90%', maximum: this.max,
-                    startAngle: 270,
-                    endAngle: 90,
-                    majorTicks: this.majorTicks, direction: this.direction,
-                    labelStyle: this.labelStyle, lineStyle: this.lineStyle, minorTicks: this.minorTicks,
-                    ranges: this.ranges,
-                    pointers: this.pointers
-                }]
+            axes
         }, this._elementRef.nativeElement);
     }
     _refresh() {
@@ -27330,6 +27375,7 @@ SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
         //{ provide: LOCALE_ID, useClass: SessionService.getLocale() },
         { provide: HTTP_INTERCEPTORS, useClass: AppHttpInterceptor, multi: true },
         { provide: APP_INITIALIZER, useFactory: TranslateProviderFactory, deps: [TranslateService], multi: true },
+        { provide: APP_INITIALIZER, useFactory: SessionProviderFactory, deps: [SessionService], multi: true },
     ], imports: [[
             DayJsModule,
             CommonModule,
@@ -27448,6 +27494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.1", ngImpor
                         //{ provide: LOCALE_ID, useClass: SessionService.getLocale() },
                         { provide: HTTP_INTERCEPTORS, useClass: AppHttpInterceptor, multi: true },
                         { provide: APP_INITIALIZER, useFactory: TranslateProviderFactory, deps: [TranslateService], multi: true },
+                        { provide: APP_INITIALIZER, useFactory: SessionProviderFactory, deps: [SessionService], multi: true },
                     ],
                     exports: [FileInput, FilterTagsComponent,
                         DateFormatPipe, CalendarPipe, DifferencePipe, DurationPipe, TimeAgoPipe,