@bizdoc/core 2.4.3 → 2.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19992,7 +19992,7 @@ class SlotsComponent {
19992
19992
  this._destroy.complete();
19993
19993
  }
19994
19994
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SlotsComponent, deps: [{ token: PANES_DATA }, { token: SessionService }, { token: i0.ChangeDetectorRef }, { token: PanesRouter }, { token: WindowTitleService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
19995
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\n cdkScrollable\n @panes\n (scroll)=\"enableNavigationArrows($event)\">\n <!---->\n @if (prev) {\n <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n <i class=\"material-icons mat-icon-rtl-mirror\">\n arrow_back_ios\n </i>\n </div>\n }\n <!--panes-->\n @for (p of panes; track p; let i = $index) {\n <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n (click)=\"select(i)\"\n [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n </div>\n @if (i < panes.length - 1) {\n <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n }\n }\n <!--dialog-->\n @if (dialog) {\n <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n }\n <!--next-->\n @if (next) {\n <div class=\"scroll-arrow forward\">\n <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n (click)=\"scrollBy(400)\">\n arrow_forward_ios\n </i>\n </div>\n }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n <!--title-->\n <div class=\"row tabs-title\">\n @if (swapTab) {\n <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n }\n <h2>{{group}}</h2>\n @if (!dialog) {\n <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\n }\n <span class=\"divider\"></span>\n <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n </div>\n <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n @for (t of tabs; track t; let i = $index) {\n <a mat-tab-link class=\"mat-tab-link\"\n (click)=\"selectedTabIndex = i\"\n [active]=\"selectedTabIndex === i\">\n <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n {{t.title}}\n @if (t.dismissable) {\n <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n }\n <!--inline=\"true\"-->\n </a>\n }\n </nav>\n <mat-tab-nav-panel #tabPanel class=\"flex\">\n @for (t of tabs; track t; let i = $index) {\n <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n </div>\n }\n </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:sticky;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{left:0}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i5$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
19995
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SlotsComponent, selector: "bizdoc-panes-outlet", outputs: { dialogChange: "dialogChange" }, host: { listeners: { "document:keydown": "handleKeydown($event)", "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "_panesContainerRef", first: true, predicate: ["panesEl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "_tabsElement", first: true, predicate: ["tabsEl"], descendants: true }, { propertyName: "_scrollable", first: true, predicate: CdkScrollable, descendants: true, static: true }], ngImport: i0, template: "<div #panesEl class=\"panes\"\n cdkScrollable\n @panes\n (scroll)=\"enableNavigationArrows($event)\">\n <!---->\n @if (prev) {\n <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n <i class=\"material-icons mat-icon-rtl-mirror\">\n arrow_back_ios\n </i>\n </div>\n }\n <!--panes-->\n @for (p of panes; track p; let i = $index) {\n <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n (click)=\"select(i)\"\n [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n </div>\n @if (i < panes.length - 1) {\n <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n }\n }\n <!--dialog-->\n @if (dialog) {\n <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n }\n <!--next-->\n @if (next) {\n <div class=\"scroll-arrow forward\">\n <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n (click)=\"scrollBy(400)\">\n arrow_forward_ios\n </i>\n </div>\n }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n <!--title-->\n <div class=\"row tabs-title\">\n @if (swapTab) {\n <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n }\n <h2>{{group}}</h2>\n @if (!dialog) {\n <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\n }\n <span class=\"divider\"></span>\n <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n </div>\n <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n @for (t of tabs; track t; let i = $index) {\n <a mat-tab-link class=\"mat-tab-link\"\n (click)=\"selectedTabIndex = i\"\n [active]=\"selectedTabIndex === i\">\n <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n {{t.title}}\n @if (t.dismissable) {\n <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n }\n <!--inline=\"true\"-->\n </a>\n }\n </nav>\n <mat-tab-nav-panel #tabPanel class=\"flex\">\n @for (t of tabs; track t; let i = $index) {\n <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n </div>\n }\n </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:sticky;cursor:pointer;align-self:center;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{left:0}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"], dependencies: [{ kind: "directive", type: i5$5.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "directive", type: i5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$5.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: i7$3.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i7$3.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i7$3.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: i5$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i10.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: TooltipDirective, selector: "[bizdocTooltip]", inputs: ["bizdocTooltip", "bizdocTooltipTemplate", "bizdocTooltipContext", "bizdocTooltipPosition", "bizdocTooltipDuration", "bizdocTooltipDisabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], animations: [
19996
19996
  panesAnimation,
19997
19997
  paneAnimation,
19998
19998
  paramAnimation,
@@ -20010,7 +20010,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
20010
20010
  queryAnimation,
20011
20011
  tabsAnimation,
20012
20012
  tabAnimation
20013
- ], template: "<div #panesEl class=\"panes\"\n cdkScrollable\n @panes\n (scroll)=\"enableNavigationArrows($event)\">\n <!---->\n @if (prev) {\n <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n <i class=\"material-icons mat-icon-rtl-mirror\">\n arrow_back_ios\n </i>\n </div>\n }\n <!--panes-->\n @for (p of panes; track p; let i = $index) {\n <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n (click)=\"select(i)\"\n [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n </div>\n @if (i < panes.length - 1) {\n <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n }\n }\n <!--dialog-->\n @if (dialog) {\n <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n }\n <!--next-->\n @if (next) {\n <div class=\"scroll-arrow forward\">\n <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n (click)=\"scrollBy(400)\">\n arrow_forward_ios\n </i>\n </div>\n }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n <!--title-->\n <div class=\"row tabs-title\">\n @if (swapTab) {\n <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n }\n <h2>{{group}}</h2>\n @if (!dialog) {\n <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\n }\n <span class=\"divider\"></span>\n <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n </div>\n <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n @for (t of tabs; track t; let i = $index) {\n <a mat-tab-link class=\"mat-tab-link\"\n (click)=\"selectedTabIndex = i\"\n [active]=\"selectedTabIndex === i\">\n <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n {{t.title}}\n @if (t.dismissable) {\n <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n }\n <!--inline=\"true\"-->\n </a>\n }\n </nav>\n <mat-tab-nav-panel #tabPanel class=\"flex\">\n @for (t of tabs; track t; let i = $index) {\n <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n </div>\n }\n </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:sticky;cursor:pointer;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{left:0}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
20013
+ ], template: "<div #panesEl class=\"panes\"\n cdkScrollable\n @panes\n (scroll)=\"enableNavigationArrows($event)\">\n <!---->\n @if (prev) {\n <div class=\"scroll-arrow\" (click)=\"scrollBy(-400)\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleColor]=\"accent\">\n <i class=\"material-icons mat-icon-rtl-mirror\">\n arrow_back_ios\n </i>\n </div>\n }\n <!--panes-->\n @for (p of panes; track p; let i = $index) {\n <div (mouseenter)=\"selectedIndex !== i && !dragging && select(i)\"\n (click)=\"select(i)\"\n [class.active]=\"selectedIndex === i && panes.length > 1\" class=\"pane-content\" @pane>\n <ng-container [cdkPortalOutlet]=\"p._portal\" (attached)=\"p._instance = $event.instance\"></ng-container>\n </div>\n @if (i < panes.length - 1) {\n <div class=\"pane-separator\" (mousedown)=\"onPaneResize(p, $event)\"></div>\n }\n }\n <!--dialog-->\n @if (dialog) {\n <div class=\"backdrop\" (click)=\"closeTab(0)\"></div>\n }\n <!--next-->\n @if (next) {\n <div class=\"scroll-arrow forward\">\n <i class=\"material-icons mat-icon-rtl-mirror\" matRipple [matRippleUnbounded]=\"true\" [matRippleCentered]=\"true\" [matRippleRadius]=\"30\" [matRippleColor]=\"accent\"\n (click)=\"scrollBy(400)\">\n arrow_forward_ios\n </i>\n </div>\n }\n</div>\n<!--tabs-->\n@if (tabs.length) {\n<div class=\"tabs-separator\" (mousedown)=\"onTabResize($event)\"></div>\n<div class=\"tabs mat-elevation-z18\" #tabsEl [@tabs]=\"tabsAnimation\" (@tabs.done)=\"done()\">\n <!--title-->\n <div class=\"row tabs-title\">\n @if (swapTab) {\n <button mat-icon-button (click)=\"tabBack()\" [bizdocTooltip]=\"prevGroup || ('Back'|translate)\"><mat-icon class=\"mat-icon-rtl-mirror\">arrow_back</mat-icon></button>\n }\n <h2>{{group}}</h2>\n @if (!dialog) {\n <button mat-icon-button (click)=\"expandTab()\" [bizdocTooltip]=\"'Expand'| translate\"><mat-icon class=\"mat-icon-rtl-mirror\" style=\"font-size: 22px\">open_in_full</mat-icon></button>\n }\n <span class=\"divider\"></span>\n <button mat-icon-button (click)=\"collapse()\" bizdocTooltip=\"Esc\"><mat-icon>close</mat-icon></button>\n </div>\n <nav mat-tab-nav-bar color=\"accent\" [disablePagination]=\"true\" [tabPanel]=\"tabPanel\">\n @for (t of tabs; track t; let i = $index) {\n <a mat-tab-link class=\"mat-tab-link\"\n (click)=\"selectedTabIndex = i\"\n [active]=\"selectedTabIndex === i\">\n <mat-icon [matBadge]=\"t.badge\" [matBadgeHidden]=\"!t.badge\" matBadgeSize=\"small\" matBadgeColor=\"accent\" aria-hidden=\"false\">{{t.icon}}</mat-icon>&nbsp;\n {{t.title}}\n @if (t.dismissable) {\n <mat-icon (click)=\"closeTab(i)\" class=\"tool\">close</mat-icon>\n }\n <!--inline=\"true\"-->\n </a>\n }\n </nav>\n <mat-tab-nav-panel #tabPanel class=\"flex\">\n @for (t of tabs; track t; let i = $index) {\n <div [style.display]=\"selectedTabIndex === i ? '': 'none'\" class=\"tab\" [@tab]=\"selectedTabIndex\">\n <ng-container [cdkPortalOutlet]=\"t._portal\" (attached)=\"t._instance = $event.instance\"></ng-container>\n </div>\n }\n </mat-tab-nav-panel>\n</div>\n}\n", styles: [":host{flex:1;overflow:hidden;display:flex}.scroll-arrow{position:sticky;cursor:pointer;align-self:center;top:50%;z-index:200}.scroll-arrow i{font-size:50px;opacity:.2}.scroll-arrow i:hover{opacity:.9}.scroll-arrow:first-child{left:0}.scroll-arrow:last-child{right:0}.panes{overflow-x:auto;flex:1;height:100%;display:flex;-ms-flex-direction:row;-webkit-flex-direction:row;flex-direction:row}.panes .pane-content{-webkit-flex-grow:1;flex-grow:1;min-width:420px;overflow-y:auto;overflow-x:clip}.panes .pane-content>*{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow-x:hidden;flex-grow:1}.pane-separator,.tabs-separator{cursor:ew-resize;background-repeat:no-repeat;background-position:center;display:table;height:100%;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none}.pane-separator{width:8px}.tabs-separator{width:12px}::ng-deep .mat-mdc-tab-link-container{overflow-x:auto;border-bottom:1px solid lightgray;-ms-overflow-style:none;scrollbar-width:none}::ng-deep .mat-mdc-tab-link-container::-webkit-scrollbar{display:none}::ng-deep .mat-mdc-tab-nav-panel{overflow-y:auto}.tabs{display:flex;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;z-index:300;-webkit-flex-grow:0;flex-shrink:1;flex-basis:0;max-width:80vw}.tabs .tabs-title{align-items:center}.tabs .tabs-title h2{font-size:x-large;margin:9px;font-weight:100}.tabs .tabs-title:hover{opacity:1}.tabs .mat-mdc-tab-link .tool{opacity:0}.tabs .mat-mdc-tab-link:hover .tool{opacity:1}.tabs .tab{overflow-y:auto;overflow-x:hidden;display:flex;height:100%}\n"] }]
20014
20014
  }], ctorParameters: () => [{ type: undefined, decorators: [{
20015
20015
  type: Inject,
20016
20016
  args: [PANES_DATA]