@netgrif/components 6.4.1 → 6.4.2-rc.1

package/fesm2020/netgrif-components.mjs

@@ -4288,9 +4288,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }, { type: i2$2.ActivatedRoute }]; } });
 
 class DefaultTabbedCaseViewComponent extends AbstractTabbedCaseViewComponent {
-    constructor(caseViewService, loggerService, viewIdService, overflowService, _injectedTabData) {
+    constructor(caseViewService, _exportService, _searchService, _snackbar, _translate, loggerService, viewIdService, overflowService, _injectedTabData) {
         super(caseViewService, loggerService, _injectedTabData, overflowService, undefined, undefined, _injectedTabData.newCaseButtonConfiguration);
+        this._exportService = _exportService;
+        this._searchService = _searchService;
+        this._snackbar = _snackbar;
+        this._translate = _translate;
         this._injectedTabData = _injectedTabData;
+        this._currentHeaders = [];
         this.initialSearchMode = _injectedTabData.caseViewSearchTypeConfiguration.initialSearchMode;
         this.showToggleButton = _injectedTabData.caseViewSearchTypeConfiguration.showSearchToggleButton;
         this.enableSearch = _injectedTabData.caseViewSearchTypeConfiguration.initialSearchMode !== undefined;
@@ -4300,6 +4305,11 @@ class DefaultTabbedCaseViewComponent extends AbstractTabbedCaseViewComponent {
         this.headersMode = _injectedTabData.caseViewHeadersMode ? _injectedTabData.caseViewHeadersMode : [];
         this.allowTableMode = this._injectedTabData.caseViewAllowTableMode;
         this.defaultHeadersMode = this.resolveHeaderMode(_injectedTabData.caseViewDefaultHeadersMode);
+        this.allowExport = this._injectedTabData.caseViewAllowExport;
+        this.loading$ = new LoadingEmitter();
+        this._headersSub = this.selectedHeaders$.subscribe(headers => {
+            this._currentHeaders = headers;
+        });
         if (!this.allowTableMode) {
             const viewId = viewIdService.viewId;
             localStorage.setItem(viewId + '-overflowMode', 'false');
@@ -4384,8 +4394,27 @@ class DefaultTabbedCaseViewComponent extends AbstractTabbedCaseViewComponent {
                 return undefined;
         }
     }
+    isLoading() {
+        return this.loading$.isActive;
+    }
+    export() {
+        if (this.loading$.isActive) {
+            return;
+        }
+        this.loading$.on();
+        this._exportService.downloadExcelFromCurrentSelection(this._searchService.activeFilter, this._currentHeaders).subscribe(() => {
+            this.loading$.off();
+        }, error => {
+            this._loggerService.error('File download failed', error);
+            this._snackbar.openErrorSnackBar(this._translate.instant('export.errorExportDownload'));
+            this.loading$.off();
+        });
+    }
+    ngOnDestroy() {
+        this.loading$.complete();
+    }
 }
-DefaultTabbedCaseViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultTabbedCaseViewComponent, deps: [{ token: i1.CaseViewService }, { token: i1.LoggerService }, { token: i1.ViewIdService }, { token: i1.OverflowService }, { token: NAE_TAB_DATA }], target: i0.ɵɵFactoryTarget.Component });
+DefaultTabbedCaseViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultTabbedCaseViewComponent, deps: [{ token: i1.CaseViewService }, { token: i1.ExportService }, { token: i1.SearchService }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }, { token: i1.LoggerService }, { token: i1.ViewIdService }, { token: i1.OverflowService }, { token: NAE_TAB_DATA }], target: i0.ɵɵFactoryTarget.Component });
 DefaultTabbedCaseViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DefaultTabbedCaseViewComponent, selector: "nc-default-tabbed-case-view", providers: [
         CategoryFactory,
         CaseViewService,
@@ -4412,7 +4441,7 @@ DefaultTabbedCaseViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             useFactory: navigationItemCaseViewDefaultHeadersFactory,
             deps: [NAE_NAVIGATION_ITEM_TASK_DATA]
         }
-    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"showCreateCaseButton\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"], components: [{ type: BreadcrumbsComponent, selector: "nc-breadcrumbs" }, { type: SearchComponent, selector: "nc-search" }, { type: CreateCaseButtonComponent, selector: "nc-create-case-button", inputs: ["newCaseCreationConfig", "disabled"], outputs: ["caseCreatedEvent"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
+    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"allowExport\">\n                <button mat-mini-fab color=\"primary\" class=\"export-mat-mini-fab\" (click)=\"export()\"\n                        [disabled]=\"isLoading()\">\n                    <mat-icon class=\"net-upload\" *ngIf=\"(isLoading()) === false\" aria-hidden=\"false\" >save_alt</mat-icon>\n                    <mat-icon class=\"net-upload\" *ngIf=\"isLoading()\" aria-hidden=\"false\">schedule</mat-icon>\n                </button>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"showCreateCaseButton\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.button-icon{padding-right:4px;padding-bottom:2px}.export-mat-mini-fab{border-radius:6px;box-shadow:none;height:44px!important;min-width:44px;margin-right:8px;margin-top:2px}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"], components: [{ type: BreadcrumbsComponent, selector: "nc-breadcrumbs" }, { type: SearchComponent, selector: "nc-search" }, { type: i4.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: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CreateCaseButtonComponent, selector: "nc-create-case-button", inputs: ["newCaseCreationConfig", "disabled"], outputs: ["caseCreatedEvent"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultTabbedCaseViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-default-tabbed-case-view', providers: [
@@ -4441,8 +4470,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             useFactory: navigationItemCaseViewDefaultHeadersFactory,
                             deps: [NAE_NAVIGATION_ITEM_TASK_DATA]
                         }
-                    ], template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"showCreateCaseButton\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.CaseViewService }, { type: i1.LoggerService }, { type: i1.ViewIdService }, { type: i1.OverflowService }, { type: undefined, decorators: [{
+                    ], template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"allowExport\">\n                <button mat-mini-fab color=\"primary\" class=\"export-mat-mini-fab\" (click)=\"export()\"\n                        [disabled]=\"isLoading()\">\n                    <mat-icon class=\"net-upload\" *ngIf=\"(isLoading()) === false\" aria-hidden=\"false\" >save_alt</mat-icon>\n                    <mat-icon class=\"net-upload\" *ngIf=\"isLoading()\" aria-hidden=\"false\">schedule</mat-icon>\n                </button>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"showCreateCaseButton\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.button-icon{padding-right:4px;padding-bottom:2px}.export-mat-mini-fab{border-radius:6px;box-shadow:none;height:44px!important;min-width:44px;margin-right:8px;margin-top:2px}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.CaseViewService }, { type: i1.ExportService }, { type: i1.SearchService }, { type: i1.SnackBarService }, { type: i1$2.TranslateService }, { type: i1.LoggerService }, { type: i1.ViewIdService }, { type: i1.OverflowService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NAE_TAB_DATA]
                 }] }]; }, propDecorators: { caseHeaderComponent: [{
@@ -4534,6 +4563,7 @@ class DefaultTabViewComponent {
         const caseViewHeadersMode = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_CASE_HEADERS_MODE);
         const caseViewAllowTableMode = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_CASE_ALLOW_TABLE_MODE);
         const caseViewDefaultHeadersMode = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_CASE_DEFAULT_HEADERS_MODE);
+        const caseViewAllowExport = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_CASE_ALLOW_EXPORT);
         const taskSearchType = extractSearchTypeFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_TASK_VIEW_SEARCH_TYPE);
         const taskShowMoreMenu = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_TASK_SHOW_MORE_MENU);
         const taskSearchTypeConfig = {
@@ -4564,6 +4594,7 @@ class DefaultTabViewComponent {
                     caseViewHeadersMode: caseViewHeadersMode,
                     caseViewAllowTableMode: caseViewAllowTableMode,
                     caseViewDefaultHeadersMode: caseViewDefaultHeadersMode,
+                    caseViewAllowExport: caseViewAllowExport,
                     taskViewSearchTypeConfiguration: taskSearchTypeConfig,
                     taskViewShowMoreMenu: taskShowMoreMenu,
                     taskViewHeadersChangeable: taskViewHeadersChangeable,