@sd-angular/core 1.2.78 → 1.2.79

package/export/src/lib/export.service.d.ts

@@ -44,7 +44,7 @@ export declare class SdExportService {
     }) => Promise<void>;
     export: (option: IExportOption) => Promise<void>;
     exportCSV: (option: IExportOption) => Promise<void>;
-    exportExcelRaw: (data: any[], fileName: string) => Promise<void>;
+    exportExcelRaw: (option: IExportOption) => Promise<void>;
     mergePDF: (urls: string[]) => Promise<void>;
 }
 export interface IExportInfo {

package/fesm2015/sd-angular-core-export.js

@@ -177,8 +177,13 @@ class SdExportService {
             });
             csvExporter.generateCsv([headerCSV, ...items]);
         });
-        this.exportExcelRaw = (data, fileName) => __awaiter(this, void 0, void 0, function* () {
-            const ws = utils.json_to_sheet(data);
+        this.exportExcelRaw = (option) => __awaiter(this, void 0, void 0, function* () {
+            const { columns, items, fileName } = option;
+            const header = {};
+            for (const column of columns) {
+                header[column.field] = column.title;
+            }
+            const ws = utils.json_to_sheet([header, ...items]);
             const wb = { Sheets: { data: ws }, SheetNames: ['data'] };
             const excelBuffer = write(wb, { bookType: 'xlsx', type: 'array' });
             const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });

package/fesm2015/sd-angular-core-export.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-export.js","sources":["../../../../projects/sd-core/export/src/lib/export.model.ts","../../../../projects/sd-core/export/src/lib/export.service.ts","../../../../projects/sd-core/export/src/public-api.ts","../../../../projects/sd-core/export/sd-angular-core-export.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nexport interface ExportTemplate {\r\n  fileName?: string;\r\n  columns: ExportTempateColumn[];\r\n  sheets?: {\r\n    name: string,\r\n    items: any[],\r\n    fields: string[]\r\n  }[];\r\n}\r\n\r\nexport interface ExportTempateColumn {\r\n  field: string;\r\n  title: string;\r\n  required?: boolean;\r\n  color?: string;\r\n  width?: string;\r\n  description?: string;\r\n  fontColor?: string;\r\n  fill?: string;\r\n}\r\n\r\nexport interface SdExportFile {\r\n  fileName?: string;\r\n  filePath?: string;\r\n}\r\n\r\nexport interface SdExportColumn {\r\n  field: string;\r\n  title: string;\r\n  description?: string;\r\n  width?: string;\r\n}\r\n\r\nexport interface IExportOption {\r\n  columns: ExportTempateColumn[];\r\n  items: any[];\r\n  fileName?: string;\r\n  sheets?: {\r\n    name: string,\r\n    items: any[],\r\n    fields: string[]\r\n  }[];\r\n}\r\n\r\nexport interface IBigExportRequest {\r\n  filePath?: string;\r\n  destination?: string;\r\n  latestRow: number;\r\n  columns: {\r\n    field: string,\r\n    title: string,\r\n    description?: string,\r\n    width?: string,\r\n  }[];\r\n  items: any[];\r\n}\r\n\r\nexport interface IBigExportResponse {\r\n  filePath: string;\r\n  destination: string;\r\n  latestRow: number;\r\n}\r\n\r\nexport interface IExportConfiguration {\r\n  firebaseUrl: string;\r\n  folder: string | (() => string);\r\n  token?: string;\r\n  user?: {\r\n    folder: string | (() => string);\r\n  }\r\n  groups?: {\r\n    code: string;\r\n    folder: string | (() => string);\r\n    permission: GroupPermission | (() => GroupPermission);\r\n  }[];\r\n}\r\n\r\nexport type GroupPermission = 'view' | 'add' | 'delete';\r\n\r\nexport const API = {\r\n  generateTemplate: '/excel/generateTemplate',\r\n  uploadTemplate: '/excel/uploadTemplate',\r\n  generateUploadTemplate: '/excel/generateUploadTemplate',\r\n  export: '/excel/export',\r\n  downloadByTemplate: '/excel/downloadByTemplate',\r\n  filesInFolder: '/excel/filesInFolder',\r\n  removeFile: '/excel/remove',\r\n  sdExport: '/excel/sd-export',\r\n  sdExportByTemplate: '/excel/sd-export-by-template',\r\n  sdMergePDF: '/excel/sd-merge-pdf',\r\n  sdGenerateTemplate: '/excel/sd-generate-template',\r\n};\r\n\r\nexport const EXPORT_CONFIG = new InjectionToken<IExportConfiguration>('export.configuration');\r\n","import { Optional } from '@angular/core';\r\nimport { Injectable, Inject } from '@angular/core';\r\nimport { SdApiService } from '@sd-angular/core/api';\r\nimport * as uuid from 'uuid';\r\nimport hash from 'object-hash';\r\nimport { ExportToCsv } from 'export-to-csv';\r\nimport * as XLSX from 'xlsx';\r\nimport { ExportTemplate, IExportConfiguration, EXPORT_CONFIG, IExportOption, API, SdExportFile } from './export.model';\r\nimport { SdNotifyService } from '@sd-angular/core/notify';\r\nimport { SdUtilityService } from '@sd-angular/core/utility';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class SdExportService {\r\n  get hasConfiguration() {\r\n    return !!this.configuration?.firebaseUrl;\r\n  }\r\n  constructor(\r\n    private apiService: SdApiService,\r\n    private utilityService: SdUtilityService,\r\n    private notifyService: SdNotifyService,\r\n    @Inject(EXPORT_CONFIG) @Optional() private configuration: IExportConfiguration) {\r\n  }\r\n\r\n  private get folder() {\r\n    const { folder } = this.configuration;\r\n    if (typeof (folder) === 'string') {\r\n      return folder;\r\n    }\r\n    return folder();\r\n  }\r\n\r\n  private get userFolder() {\r\n    const { user } = this.configuration;\r\n    if (!user?.folder) {\r\n      return;\r\n    }\r\n    const { folder } = user;\r\n    if (typeof (folder) === 'string') {\r\n      return folder;\r\n    }\r\n    return folder();\r\n  }\r\n\r\n  #directory = (key: string, group: string) => {\r\n    let hashedFolder = hash({\r\n      folder: this.folder,\r\n      userFolder: this.userFolder\r\n    });\r\n    if (!group) {\r\n      return `dir1=${this.folder}&dir2=U-${hashedFolder}&dir3=${key || ''}`;\r\n    }\r\n    hashedFolder = hash({\r\n      folder: this.folder,\r\n      group\r\n    });\r\n    return `dir1=${this.folder}&dir2=G-${hashedFolder}&dir3=${key || ''}`;\r\n  }\r\n\r\n  generateTemplate = async (template: ExportTemplate) => {\r\n    const { firebaseUrl } = this.configuration;\r\n    const { sdGenerateTemplate } = API;\r\n    const url = `${firebaseUrl}${sdGenerateTemplate}`;\r\n    // const { filePath, fileName } = await this.apiService.post(url, template);\r\n    // return { filePath, fileName };\r\n    const buffer = await this.apiService.post(url, template, null, {\r\n      responseType: 'arraybuffer'\r\n    });\r\n    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' });\r\n    this.#blobToSaveAs(blob, template.fileName || 'Template');\r\n  }\r\n\r\n  uploadTemplate = async (args: {\r\n    key: string;\r\n    group?: string;\r\n    validator?: (fileName: string) => string\r\n  }): Promise<SdExportFile> => {\r\n    const { key, group, validator } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { uploadTemplate } = API;\r\n    const url = `${firebaseUrl}${uploadTemplate}?${this.#directory(key, group)}`;\r\n    const file = await this.utilityService.upload({\r\n      extensions: ['xlsx'],\r\n      maxSizeInMb: 0.1,\r\n      validator\r\n    });\r\n    if (file) {\r\n      const { filePath, fileName } = await this.apiService.upload(url, file).catch((err: Error) => {\r\n        this.notifyService.notify.warning(err?.message);\r\n        throw err;\r\n      });\r\n      return {\r\n        filePath,\r\n        fileName,\r\n      };\r\n    }\r\n    return null;\r\n  }\r\n\r\n  generateUploadTemplate = async (args: {\r\n    key: string;\r\n    template: ExportTemplate;\r\n    group?: string;\r\n  }) => {\r\n    const { key, template, group } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { generateUploadTemplate } = API;\r\n    const url = `${firebaseUrl}${generateUploadTemplate}?${this.#directory(key, group)}`;\r\n    const { filePath, fileName } = await this.apiService.post(url, template);\r\n    return { filePath, fileName };\r\n  }\r\n\r\n  removeFile = async (args: {\r\n    key: string;\r\n    group?: string;\r\n    fileName?: string;\r\n  }) => {\r\n    const { key, group, fileName } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { removeFile } = API;\r\n    const url = `${firebaseUrl}${removeFile}?${this.#directory(key, group)}&name=${fileName}`;\r\n    await this.apiService.post(url);\r\n  }\r\n\r\n  filesInFolder = async (args: {\r\n    key: string;\r\n    group?: string;\r\n  }): Promise<SdExportFile[]> => {\r\n    interface FilesInFolderRes {\r\n      directory: string;\r\n      files: {\r\n        publicUrl: string, fullPath: string, name: string\r\n      }[];\r\n    }\r\n    const { key, group } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { filesInFolder } = API;\r\n    const url = `${firebaseUrl}${filesInFolder}?${this.#directory(key, group)}`;\r\n    const res = await this.apiService.get<FilesInFolderRes>(url);\r\n    return res.files?.map(e => ({\r\n      filePath: e.publicUrl,\r\n      fileName: e.name\r\n    })) || [];\r\n  }\r\n\r\n  download = (filePath: string, fileName?: string) => {\r\n    const link: any = document.createElement('a');\r\n    link.download = `${fileName || uuid.v4()}.xlsx`;\r\n    link.href = filePath;\r\n    document.body.appendChild(link);\r\n    link.click();\r\n    document.body.removeChild(link);\r\n  }\r\n\r\n  exportByTemplate = async (args: {\r\n    filePath: string,\r\n    columns: any[],\r\n    items: any[],\r\n    fileName?: string\r\n  }) => {\r\n    const { filePath, columns, items, fileName } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { sdExportByTemplate } = API;\r\n    const url = `${firebaseUrl}${sdExportByTemplate}`;\r\n    const buffer = await this.apiService.post(url, {\r\n      filePath,\r\n      columns,\r\n      items,\r\n      fileName\r\n    }, null, {\r\n      responseType: 'arraybuffer'\r\n    });\r\n    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' });\r\n    this.#blobToSaveAs(blob, fileName);\r\n  }\r\n\r\n  export = async (option: IExportOption) => {\r\n    const { firebaseUrl } = this.configuration;\r\n    const { sdExport } = API;\r\n    const url = `${firebaseUrl}${sdExport}`;\r\n    const buffer = await this.apiService.post(url, option, null, {\r\n      responseType: 'arraybuffer'\r\n    });\r\n    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' });\r\n    this.#blobToSaveAs(blob, option?.fileName);\r\n  }\r\n\r\n  // exportCSV = async (option: IExportOption) => {\r\n  //   const { columns, items, fileName } = option;\r\n  //   const options = {\r\n  //     fieldSeparator: ',',\r\n  //     quoteStrings: '\"',\r\n  //     decimalseparator: '.',\r\n  //     showLabels: true,\r\n  //     showTitle: false,\r\n  //     title: fileName || 'CSV',\r\n  //     useBom: true,\r\n  //     noDownload: false,\r\n  //     useHeader: false,\r\n  //     nullToEmptyString: true,\r\n  //   };\r\n  //   const headerCSV = {};\r\n  //   for (const column of columns) {\r\n  //     headerCSV[column.field] = column.title;\r\n  //   }\r\n  //   return new AngularCsv([...[headerCSV], ...items], `${fileName || 'CSV'}_${Date.toFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss')}`, options);\r\n  // }\r\n\r\n  exportCSV = async (option: IExportOption) => {\r\n    const { columns, items, fileName } = option;\r\n    const headerCSV = {};\r\n    for (const column of columns) {\r\n      headerCSV[column.field] = column.title;\r\n    }\r\n    const csvExporter = new ExportToCsv({\r\n      filename: `${fileName || 'CSV'}_${Date.toFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss')}`,\r\n      fieldSeparator: ',',\r\n      quoteStrings: '\"',\r\n      decimalSeparator: '.',\r\n      showLabels: true,\r\n      showTitle: false,\r\n      title: fileName || 'CSV',\r\n      useBom: true,\r\n    });\r\n    csvExporter.generateCsv([headerCSV, ...items]);\r\n  }\r\n\r\n  exportExcelRaw = async (data: any[], fileName: string) => {\r\n    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(data);\r\n    const wb: XLSX.WorkBook = { Sheets: { data: ws }, SheetNames: ['data'] };\r\n    const excelBuffer: any = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });\r\n    const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });\r\n    this.#blobToSaveAs(blob, fileName );\r\n  }\r\n\r\n  mergePDF = async (urls: string[]) => {\r\n    const { firebaseUrl } = this.configuration;\r\n    const { sdMergePDF } = API;\r\n    const url = `${firebaseUrl}${sdMergePDF}`;\r\n    const buffer = await this.apiService.post(url, {\r\n      urls\r\n    }, null, {\r\n      responseType: 'arraybuffer'\r\n    });\r\n    const blob = new Blob([buffer], { type: 'application/pdf' });\r\n    this.#blobToSaveAs(blob, `${uuid.v4()}`);\r\n  }\r\n\r\n  #blobToSaveAs = (blob: Blob, fileName: string = 'Export') => {\r\n    try {\r\n      const url = window.URL.createObjectURL(blob);\r\n      const link = document.createElement('a');\r\n      fileName = fileName.replace(/.xlsx/i, '');\r\n      fileName = fileName.replace(/.pdf/i, '');\r\n      if (link.download !== undefined) { // feature detection\r\n        link.setAttribute('href', url);\r\n        link.setAttribute('download', `${fileName}_${new Date().toFormat('yyyy_MM_dd_HH_mm')}`);\r\n        link.style.visibility = 'hidden';\r\n        document.body.appendChild(link);\r\n        link.click();\r\n        document.body.removeChild(link);\r\n      }\r\n    } catch (e) {\r\n      console.error('BlobToSaveAs error', e);\r\n    }\r\n  }\r\n}\r\n\r\nexport interface IExportInfo {\r\n  data: any[];\r\n  sheetName?: string;\r\n  fileName?: string;\r\n}\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/export.model';\r\nexport * from './lib/export.service';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuid.v4","XLSX.utils","XLSX.write"],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-export.js","sources":["../../../../projects/sd-core/export/src/lib/export.model.ts","../../../../projects/sd-core/export/src/lib/export.service.ts","../../../../projects/sd-core/export/src/public-api.ts","../../../../projects/sd-core/export/sd-angular-core-export.ts"],"sourcesContent":["import { InjectionToken } from '@angular/core';\r\n\r\nexport interface ExportTemplate {\r\n  fileName?: string;\r\n  columns: ExportTempateColumn[];\r\n  sheets?: {\r\n    name: string,\r\n    items: any[],\r\n    fields: string[]\r\n  }[];\r\n}\r\n\r\nexport interface ExportTempateColumn {\r\n  field: string;\r\n  title: string;\r\n  required?: boolean;\r\n  color?: string;\r\n  width?: string;\r\n  description?: string;\r\n  fontColor?: string;\r\n  fill?: string;\r\n}\r\n\r\nexport interface SdExportFile {\r\n  fileName?: string;\r\n  filePath?: string;\r\n}\r\n\r\nexport interface SdExportColumn {\r\n  field: string;\r\n  title: string;\r\n  description?: string;\r\n  width?: string;\r\n}\r\n\r\nexport interface IExportOption {\r\n  columns: ExportTempateColumn[];\r\n  items: any[];\r\n  fileName?: string;\r\n  sheets?: {\r\n    name: string,\r\n    items: any[],\r\n    fields: string[]\r\n  }[];\r\n}\r\n\r\nexport interface IBigExportRequest {\r\n  filePath?: string;\r\n  destination?: string;\r\n  latestRow: number;\r\n  columns: {\r\n    field: string,\r\n    title: string,\r\n    description?: string,\r\n    width?: string,\r\n  }[];\r\n  items: any[];\r\n}\r\n\r\nexport interface IBigExportResponse {\r\n  filePath: string;\r\n  destination: string;\r\n  latestRow: number;\r\n}\r\n\r\nexport interface IExportConfiguration {\r\n  firebaseUrl: string;\r\n  folder: string | (() => string);\r\n  token?: string;\r\n  user?: {\r\n    folder: string | (() => string);\r\n  }\r\n  groups?: {\r\n    code: string;\r\n    folder: string | (() => string);\r\n    permission: GroupPermission | (() => GroupPermission);\r\n  }[];\r\n}\r\n\r\nexport type GroupPermission = 'view' | 'add' | 'delete';\r\n\r\nexport const API = {\r\n  generateTemplate: '/excel/generateTemplate',\r\n  uploadTemplate: '/excel/uploadTemplate',\r\n  generateUploadTemplate: '/excel/generateUploadTemplate',\r\n  export: '/excel/export',\r\n  downloadByTemplate: '/excel/downloadByTemplate',\r\n  filesInFolder: '/excel/filesInFolder',\r\n  removeFile: '/excel/remove',\r\n  sdExport: '/excel/sd-export',\r\n  sdExportByTemplate: '/excel/sd-export-by-template',\r\n  sdMergePDF: '/excel/sd-merge-pdf',\r\n  sdGenerateTemplate: '/excel/sd-generate-template',\r\n};\r\n\r\nexport const EXPORT_CONFIG = new InjectionToken<IExportConfiguration>('export.configuration');\r\n","import { Optional } from '@angular/core';\r\nimport { Injectable, Inject } from '@angular/core';\r\nimport { SdApiService } from '@sd-angular/core/api';\r\nimport * as uuid from 'uuid';\r\nimport hash from 'object-hash';\r\nimport { ExportToCsv } from 'export-to-csv';\r\nimport * as XLSX from 'xlsx';\r\nimport { ExportTemplate, IExportConfiguration, EXPORT_CONFIG, IExportOption, API, SdExportFile } from './export.model';\r\nimport { SdNotifyService } from '@sd-angular/core/notify';\r\nimport { SdUtilityService } from '@sd-angular/core/utility';\r\n\r\n@Injectable({\r\n  providedIn: 'root'\r\n})\r\nexport class SdExportService {\r\n  get hasConfiguration() {\r\n    return !!this.configuration?.firebaseUrl;\r\n  }\r\n  constructor(\r\n    private apiService: SdApiService,\r\n    private utilityService: SdUtilityService,\r\n    private notifyService: SdNotifyService,\r\n    @Inject(EXPORT_CONFIG) @Optional() private configuration: IExportConfiguration) {\r\n  }\r\n\r\n  private get folder() {\r\n    const { folder } = this.configuration;\r\n    if (typeof (folder) === 'string') {\r\n      return folder;\r\n    }\r\n    return folder();\r\n  }\r\n\r\n  private get userFolder() {\r\n    const { user } = this.configuration;\r\n    if (!user?.folder) {\r\n      return;\r\n    }\r\n    const { folder } = user;\r\n    if (typeof (folder) === 'string') {\r\n      return folder;\r\n    }\r\n    return folder();\r\n  }\r\n\r\n  #directory = (key: string, group: string) => {\r\n    let hashedFolder = hash({\r\n      folder: this.folder,\r\n      userFolder: this.userFolder\r\n    });\r\n    if (!group) {\r\n      return `dir1=${this.folder}&dir2=U-${hashedFolder}&dir3=${key || ''}`;\r\n    }\r\n    hashedFolder = hash({\r\n      folder: this.folder,\r\n      group\r\n    });\r\n    return `dir1=${this.folder}&dir2=G-${hashedFolder}&dir3=${key || ''}`;\r\n  }\r\n\r\n  generateTemplate = async (template: ExportTemplate) => {\r\n    const { firebaseUrl } = this.configuration;\r\n    const { sdGenerateTemplate } = API;\r\n    const url = `${firebaseUrl}${sdGenerateTemplate}`;\r\n    // const { filePath, fileName } = await this.apiService.post(url, template);\r\n    // return { filePath, fileName };\r\n    const buffer = await this.apiService.post(url, template, null, {\r\n      responseType: 'arraybuffer'\r\n    });\r\n    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' });\r\n    this.#blobToSaveAs(blob, template.fileName || 'Template');\r\n  }\r\n\r\n  uploadTemplate = async (args: {\r\n    key: string;\r\n    group?: string;\r\n    validator?: (fileName: string) => string\r\n  }): Promise<SdExportFile> => {\r\n    const { key, group, validator } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { uploadTemplate } = API;\r\n    const url = `${firebaseUrl}${uploadTemplate}?${this.#directory(key, group)}`;\r\n    const file = await this.utilityService.upload({\r\n      extensions: ['xlsx'],\r\n      maxSizeInMb: 0.1,\r\n      validator\r\n    });\r\n    if (file) {\r\n      const { filePath, fileName } = await this.apiService.upload(url, file).catch((err: Error) => {\r\n        this.notifyService.notify.warning(err?.message);\r\n        throw err;\r\n      });\r\n      return {\r\n        filePath,\r\n        fileName,\r\n      };\r\n    }\r\n    return null;\r\n  }\r\n\r\n  generateUploadTemplate = async (args: {\r\n    key: string;\r\n    template: ExportTemplate;\r\n    group?: string;\r\n  }) => {\r\n    const { key, template, group } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { generateUploadTemplate } = API;\r\n    const url = `${firebaseUrl}${generateUploadTemplate}?${this.#directory(key, group)}`;\r\n    const { filePath, fileName } = await this.apiService.post(url, template);\r\n    return { filePath, fileName };\r\n  }\r\n\r\n  removeFile = async (args: {\r\n    key: string;\r\n    group?: string;\r\n    fileName?: string;\r\n  }) => {\r\n    const { key, group, fileName } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { removeFile } = API;\r\n    const url = `${firebaseUrl}${removeFile}?${this.#directory(key, group)}&name=${fileName}`;\r\n    await this.apiService.post(url);\r\n  }\r\n\r\n  filesInFolder = async (args: {\r\n    key: string;\r\n    group?: string;\r\n  }): Promise<SdExportFile[]> => {\r\n    interface FilesInFolderRes {\r\n      directory: string;\r\n      files: {\r\n        publicUrl: string, fullPath: string, name: string\r\n      }[];\r\n    }\r\n    const { key, group } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { filesInFolder } = API;\r\n    const url = `${firebaseUrl}${filesInFolder}?${this.#directory(key, group)}`;\r\n    const res = await this.apiService.get<FilesInFolderRes>(url);\r\n    return res.files?.map(e => ({\r\n      filePath: e.publicUrl,\r\n      fileName: e.name\r\n    })) || [];\r\n  }\r\n\r\n  download = (filePath: string, fileName?: string) => {\r\n    const link: any = document.createElement('a');\r\n    link.download = `${fileName || uuid.v4()}.xlsx`;\r\n    link.href = filePath;\r\n    document.body.appendChild(link);\r\n    link.click();\r\n    document.body.removeChild(link);\r\n  }\r\n\r\n  exportByTemplate = async (args: {\r\n    filePath: string,\r\n    columns: any[],\r\n    items: any[],\r\n    fileName?: string\r\n  }) => {\r\n    const { filePath, columns, items, fileName } = args;\r\n    const { firebaseUrl } = this.configuration;\r\n    const { sdExportByTemplate } = API;\r\n    const url = `${firebaseUrl}${sdExportByTemplate}`;\r\n    const buffer = await this.apiService.post(url, {\r\n      filePath,\r\n      columns,\r\n      items,\r\n      fileName\r\n    }, null, {\r\n      responseType: 'arraybuffer'\r\n    });\r\n    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' });\r\n    this.#blobToSaveAs(blob, fileName);\r\n  }\r\n\r\n  export = async (option: IExportOption) => {\r\n    const { firebaseUrl } = this.configuration;\r\n    const { sdExport } = API;\r\n    const url = `${firebaseUrl}${sdExport}`;\r\n    const buffer = await this.apiService.post(url, option, null, {\r\n      responseType: 'arraybuffer'\r\n    });\r\n    const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' });\r\n    this.#blobToSaveAs(blob, option?.fileName);\r\n  }\r\n\r\n  // exportCSV = async (option: IExportOption) => {\r\n  //   const { columns, items, fileName } = option;\r\n  //   const options = {\r\n  //     fieldSeparator: ',',\r\n  //     quoteStrings: '\"',\r\n  //     decimalseparator: '.',\r\n  //     showLabels: true,\r\n  //     showTitle: false,\r\n  //     title: fileName || 'CSV',\r\n  //     useBom: true,\r\n  //     noDownload: false,\r\n  //     useHeader: false,\r\n  //     nullToEmptyString: true,\r\n  //   };\r\n  //   const headerCSV = {};\r\n  //   for (const column of columns) {\r\n  //     headerCSV[column.field] = column.title;\r\n  //   }\r\n  //   return new AngularCsv([...[headerCSV], ...items], `${fileName || 'CSV'}_${Date.toFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss')}`, options);\r\n  // }\r\n\r\n  exportCSV = async (option: IExportOption) => {\r\n    const { columns, items, fileName } = option;\r\n    const headerCSV = {};\r\n    for (const column of columns) {\r\n      headerCSV[column.field] = column.title;\r\n    }\r\n    const csvExporter = new ExportToCsv({\r\n      filename: `${fileName || 'CSV'}_${Date.toFormat(new Date(), 'yyyy-MM-dd-HH-mm-ss')}`,\r\n      fieldSeparator: ',',\r\n      quoteStrings: '\"',\r\n      decimalSeparator: '.',\r\n      showLabels: true,\r\n      showTitle: false,\r\n      title: fileName || 'CSV',\r\n      useBom: true,\r\n    });\r\n    csvExporter.generateCsv([headerCSV, ...items]);\r\n  }\r\n\r\n  exportExcelRaw = async (option: IExportOption) => {\r\n    const { columns, items, fileName } = option;\r\n    const header = {};\r\n    for (const column of columns) {\r\n      header[column.field] = column.title;\r\n    }\r\n    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet([header, ...items]);\r\n    const wb: XLSX.WorkBook = { Sheets: { data: ws }, SheetNames: ['data'] };\r\n    const excelBuffer: any = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });\r\n    const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });\r\n    this.#blobToSaveAs(blob, fileName);\r\n  }\r\n\r\n  mergePDF = async (urls: string[]) => {\r\n    const { firebaseUrl } = this.configuration;\r\n    const { sdMergePDF } = API;\r\n    const url = `${firebaseUrl}${sdMergePDF}`;\r\n    const buffer = await this.apiService.post(url, {\r\n      urls\r\n    }, null, {\r\n      responseType: 'arraybuffer'\r\n    });\r\n    const blob = new Blob([buffer], { type: 'application/pdf' });\r\n    this.#blobToSaveAs(blob, `${uuid.v4()}`);\r\n  }\r\n\r\n  #blobToSaveAs = (blob: Blob, fileName: string = 'Export') => {\r\n    try {\r\n      const url = window.URL.createObjectURL(blob);\r\n      const link = document.createElement('a');\r\n      fileName = fileName.replace(/.xlsx/i, '');\r\n      fileName = fileName.replace(/.pdf/i, '');\r\n      if (link.download !== undefined) { // feature detection\r\n        link.setAttribute('href', url);\r\n        link.setAttribute('download', `${fileName}_${new Date().toFormat('yyyy_MM_dd_HH_mm')}`);\r\n        link.style.visibility = 'hidden';\r\n        document.body.appendChild(link);\r\n        link.click();\r\n        document.body.removeChild(link);\r\n      }\r\n    } catch (e) {\r\n      console.error('BlobToSaveAs error', e);\r\n    }\r\n  }\r\n}\r\n\r\nexport interface IExportInfo {\r\n  data: any[];\r\n  sheetName?: string;\r\n  fileName?: string;\r\n}\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/export.model';\r\nexport * from './lib/export.service';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuid.v4","XLSX.utils","XLSX.write"],"mappings":"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"}

package/fesm2015/sd-angular-core-grid-material.js

@@ -451,7 +451,7 @@ SdGridFilter.propDecorators = {
     filterChange: [{ type: Output }]
 };
 
-var _getExportableColumns, _getExportableGroups, _initTemplate;
+var _getExportableColumns, _getExportableGroups, _getExportColumns, _initTemplate;
 class SdPopupExport {
     constructor(ref, loadingService, exportService, notifyService, translateService) {
         this.ref = ref;
@@ -527,24 +527,36 @@ class SdPopupExport {
             this.modal.open();
             this.ref.detectChanges();
         });
-        this.exportDefault = (isCSV = false) => {
+        _getExportColumns.set(this, () => {
             if (this.configuration) {
                 const { firstColumns, secondColumns } = this.configuration;
-                const columns = [...firstColumns, ...secondColumns].map(e => (Object.assign(Object.assign({}, e), { data: this.columns.find(e1 => e1.field === e.field) }))).filter(e => !!e.data)
+                return [...firstColumns, ...secondColumns].map(e => (Object.assign(Object.assign({}, e), { data: this.columns.find(e1 => e1.field === e.field) }))).filter(e => !!e.data)
                     .map(e => e.data);
-                this.export.emit({
-                    file: null,
-                    columns,
-                    isCSV
-                });
             }
             else {
-                this.export.emit({
-                    file: null,
-                    columns: this.columns,
-                    isCSV
-                });
+                return this.columns;
             }
+        });
+        this.exportDefault = () => {
+            this.export.emit({
+                file: null,
+                columns: __classPrivateFieldGet(this, _getExportColumns).call(this),
+                isCSV: false
+            });
+        };
+        this.exportCSV = () => {
+            this.export.emit({
+                file: null,
+                columns: __classPrivateFieldGet(this, _getExportColumns).call(this),
+                isCSV: true
+            });
+        };
+        this.exportRaw = () => {
+            this.export.emit({
+                file: null,
+                columns: __classPrivateFieldGet(this, _getExportColumns).call(this),
+                isRaw: true
+            });
         };
         this.loadFiles = (group = null) => __awaiter(this, void 0, void 0, function* () {
             this.selectedGroup = this.groups.find(e => e.code === group);
@@ -728,7 +740,7 @@ class SdPopupExport {
     ngAfterViewInit() {
     }
 }
-_getExportableColumns = new WeakMap(), _getExportableGroups = new WeakMap(), _initTemplate = new WeakMap();
+_getExportableColumns = new WeakMap(), _getExportableGroups = new WeakMap(), _getExportColumns = new WeakMap(), _initTemplate = new WeakMap();
 SdPopupExport.decorators = [
     { type: Component, args: [{
                 selector: 'sd-popup-export',
@@ -1572,27 +1584,33 @@ class SdGridMaterial {
             return ((_b = (_a = this.gridOption.export) === null || _a === void 0 ? void 0 : _a.columns) === null || _b === void 0 ? void 0 : _b.filter(e => { var _a; return !((_a = e.export) === null || _a === void 0 ? void 0 : _a.disabled); })) || [];
         });
         _onExport.set(this, (args) => __awaiter(this, void 0, void 0, function* () {
-            var _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            var _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
             try {
-                const { file, isCSV } = args;
+                const { file, isCSV, isRaw } = args;
                 let { columns } = args;
                 const pageSize = ((_h = (_g = this.gridOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.maxItemsPerRequest) || 1000;
+                const batch = ((_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.batch) || 1;
                 let total = this.total;
                 let pageNumber = 0;
                 let exportItems = [];
                 this.isExporting = true;
                 const items = [];
-                while (pageNumber * pageSize < total) {
-                    const res = yield __classPrivateFieldGet(this, _exportedItems).call(this, pageNumber, pageSize);
-                    if ('items' in res) {
-                        exportItems = res.items;
-                        total = res.total;
-                    }
-                    else {
-                        exportItems = res;
-                        // total = exportItems.length;
+                let promises = [];
+                const handleData = () => __awaiter(this, void 0, void 0, function* () {
+                    var _u;
+                    const results = yield Promise.all(promises);
+                    promises = [];
+                    exportItems = [];
+                    for (const result of results) {
+                        if ('items' in result) {
+                            exportItems = [...exportItems, ...result.items];
+                            total = result.total;
+                        }
+                        else {
+                            exportItems = [...exportItems, ...result];
+                        }
                     }
-                    if ((_j = this.gridOption.export) === null || _j === void 0 ? void 0 : _j.mapping) {
+                    if ((_u = this.gridOption.export) === null || _u === void 0 ? void 0 : _u.mapping) {
                         const results = this.gridOption.export.mapping(exportItems);
                         if (results instanceof Promise) {
                             exportItems = yield results;
@@ -1602,14 +1620,14 @@ class SdGridMaterial {
                         }
                     }
                     const totalPage = total / pageSize;
-                    const percent = Math.round(pageNumber * 100.0 / totalPage);
+                    const percent = Math.round((pageNumber - 1) * 100.0 / totalPage);
                     this.exportTitle = `Exporting...${percent}%`;
                     const allColumns = __classPrivateFieldGet(this, _allColumns).call(this);
                     const allExportedColumns = __classPrivateFieldGet(this, _allExportedColumns).call(this);
                     for (const item of exportItems) {
                         const obj = {};
                         const handle = (exportColumn) => __awaiter(this, void 0, void 0, function* () {
-                            var _r, _s;
+                            var _v, _w;
                             obj[exportColumn.field] = item[exportColumn.field];
                             const column = allColumns.find(e => e.field === exportColumn.field);
                             const exportedColumn = allExportedColumns.find(e => e.field === exportColumn.field);
@@ -1646,10 +1664,10 @@ class SdGridMaterial {
                             else if (column.type === 'bool') {
                                 // Nếu là bool thì gán bằng giá trị trueValue và falseValue (nếu có), mặc định là TRUE/FALSE
                                 if (item[column.field]) {
-                                    obj[column.field] = ((_r = column.option) === null || _r === void 0 ? void 0 : _r.displayOnTrue) || 'True';
+                                    obj[column.field] = ((_v = column.option) === null || _v === void 0 ? void 0 : _v.displayOnTrue) || 'True';
                                 }
                                 else if (obj[column.field] !== undefined && obj[column.field] !== null) {
-                                    obj[column.field] = ((_s = column.option) === null || _s === void 0 ? void 0 : _s.displayOnFalse) || 'False';
+                                    obj[column.field] = ((_w = column.option) === null || _w === void 0 ? void 0 : _w.displayOnFalse) || 'False';
                                 }
                             }
                             else if (column.type === 'date') {
@@ -1693,19 +1711,37 @@ class SdGridMaterial {
                         }
                         items.push(obj);
                     }
+                });
+                while (pageNumber * pageSize < total) {
+                    promises.push(__classPrivateFieldGet(this, _exportedItems).call(this, pageNumber, pageSize));
                     pageNumber++;
+                    if (promises.length < batch) {
+                        continue;
+                    }
+                    yield handleData();
+                }
+                if (promises.length > 0) {
+                    yield handleData();
                 }
                 if (!(file === null || file === void 0 ? void 0 : file.filePath)) {
                     if (isCSV) {
                         yield this.exportService.exportCSV({
                             columns,
                             items,
-                            fileName: (_l = (_k = this.gridOption) === null || _k === void 0 ? void 0 : _k.export) === null || _l === void 0 ? void 0 : _l.fileName
+                            fileName: (_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.fileName
+                        });
+                        return;
+                    }
+                    if (isRaw) {
+                        yield this.exportService.exportExcelRaw({
+                            columns,
+                            items,
+                            fileName: (_p = (_o = this.gridOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName
                         });
                         return;
                     }
                     const sheets = [];
-                    if (Array.isArray((_o = (_m = this.gridOption) === null || _m === void 0 ? void 0 : _m.export) === null || _o === void 0 ? void 0 : _o.sheets)) {
+                    if (Array.isArray((_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.sheets)) {
                         for (const sheet of this.gridOption.export.sheets) {
                             if (sheet.name && sheet.items && sheet.fields) {
                                 if (Array.isArray(sheet.items)) {
@@ -1728,7 +1764,7 @@ class SdGridMaterial {
                     yield this.exportService.export({
                         columns,
                         items,
-                        fileName: (_q = (_p = this.gridOption) === null || _p === void 0 ? void 0 : _p.export) === null || _q === void 0 ? void 0 : _q.fileName,
+                        fileName: (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.fileName,
                         sheets
                     });
                     return;
@@ -1749,10 +1785,12 @@ class SdGridMaterial {
         this.onExport = (args) => __awaiter(this, void 0, void 0, function* () {
             const { translate } = this.translateService;
             if (!args.isCSV && this.gridOption.export.max && this.total > this.gridOption.export.max) {
-                this.notifyService.confirm(translate(`Total rows reach limit, do you want to export CSV`)).then(() => {
-                    args.isCSV = true;
-                    __classPrivateFieldGet(this, _onExport).call(this, args);
-                });
+                args.isRaw = true;
+                __classPrivateFieldGet(this, _onExport).call(this, args);
+                // this.notifyService.confirm(translate(`Total rows reach limit, do you want to export CSV`)).then(() => {
+                //   args.isCSV = true;
+                //   this.#onExport(args);
+                // });
                 return;
             }
             __classPrivateFieldGet(this, _onExport).call(this, args);
@@ -1762,8 +1800,8 @@ class SdGridMaterial {
             this.reload(false);
         };
         this.onExpand = (rowData) => __awaiter(this, void 0, void 0, function* () {
-            var _t, _u, _v, _w, _x;
-            if ((_t = this.gridOption.subInformation) === null || _t === void 0 ? void 0 : _t.always) {
+            var _x, _y, _z, _0, _1;
+            if ((_x = this.gridOption.subInformation) === null || _x === void 0 ? void 0 : _x.always) {
                 return;
             }
             if (rowData.isExpanding) {
@@ -1773,8 +1811,8 @@ class SdGridMaterial {
                 rowData.isExpanded = false;
                 return;
             }
-            const data = (_w = (_v = (_u = this.gridOption) === null || _u === void 0 ? void 0 : _u.subInformation) === null || _v === void 0 ? void 0 : _v.onExpand) === null || _w === void 0 ? void 0 : _w.call(_v, rowData);
-            if (!((_x = this.gridOption.subInformation) === null || _x === void 0 ? void 0 : _x.multiple)) {
+            const data = (_0 = (_z = (_y = this.gridOption) === null || _y === void 0 ? void 0 : _y.subInformation) === null || _z === void 0 ? void 0 : _z.onExpand) === null || _0 === void 0 ? void 0 : _0.call(_z, rowData);
+            if (!((_1 = this.gridOption.subInformation) === null || _1 === void 0 ? void 0 : _1.multiple)) {
                 this.items.forEach(item => item.isExpanding = item.isExpanded = false);
             }
             if (data instanceof Promise) {
@@ -2113,7 +2151,7 @@ _paginator = new WeakMap(), _sort = new WeakMap(), _subscription$1 = new WeakMap
 SdGridMaterial.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-material',
-                template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n            <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"groupedItems\" matSort\r\n              [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n              (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #useExpandCollapse>\r\n                      <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                        <ng-container *ngIf=\"item.isExpanded\">\r\n                          <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                          </ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button *ngIf=\"!element.isExpanding && !gridOption?.subInformation?.always\" mat-icon-button\r\n                    aria-label=\"Expand & Collapse\" (click)=\"onExpand(element)\">\r\n                    <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                    <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                  </button>\r\n                  <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                  </div>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                    <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </th>\r\n                <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                  <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n                    <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-editor-validation>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                    <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                      <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">save</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">close</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdGroup\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n                  </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                  <div>\r\n                    <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n                    [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n                    [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n              </ng-container>\r\n              <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n              <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n                <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n              </ng-container>\r\n            </table>\r\n            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditorValidation\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditor\">\r\n                  <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                    <button class=\"c-btn-add\"\r\n                      *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                      (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                      <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                    </button>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                    [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #sdEmptyDataNoRef>\r\n                      <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                    </ng-template>\r\n                  </td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdGroup\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n                </tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                  <span> {{ \"Configure\" | sdTranslate }}</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n        (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-export *ngIf=\"gridOption.export?.visible\" [configuration]=\"configuration\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n        #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
+                template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n            <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"groupedItems\" matSort\r\n              [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n              (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #useExpandCollapse>\r\n                      <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                        <ng-container *ngIf=\"item.isExpanded\">\r\n                          <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                          </ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button *ngIf=\"!element.isExpanding && !gridOption?.subInformation?.always\" mat-icon-button\r\n                    aria-label=\"Expand & Collapse\" (click)=\"onExpand(element)\">\r\n                    <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                    <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                  </button>\r\n                  <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                  </div>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                    <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </th>\r\n                <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                  <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n                    <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-editor-validation>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                    <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                      <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">save</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">close</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdGroup\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n                  </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                  <div>\r\n                    <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n                    [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td px-0\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n                    [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n              </ng-container>\r\n              <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n              <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n                <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n              </ng-container>\r\n            </table>\r\n            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditorValidation\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditor\">\r\n                  <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                    <button class=\"c-btn-add\"\r\n                      *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                      (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                      <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                    </button>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                    [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #sdEmptyDataNoRef>\r\n                      <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                    </ng-template>\r\n                  </td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdGroup\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n                </tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleExcelRaw !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportRaw()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel raw\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportCSV()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                  <span> {{ \"Configure\" | sdTranslate }}</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n        (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-export *ngIf=\"gridOption.export?.visible\" [configuration]=\"configuration\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n        #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
                 animations: [
                     trigger('detailExpand', [
                         state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),