npm - @sd-angular/core - Versions diffs - 1.2.75 → 1.2.78 - Mend

@sd-angular/core 1.2.75 → 1.2.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (555) hide show

package/fesm2015/sd-angular-core-date-time.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-date-time.js","sources":["../../../../projects/sd-core/date-time/src/lib/date-time.component.ts","../../../../projects/sd-core/date-time/src/lib/date-time.module.ts","../../../../projects/sd-core/date-time/sd-angular-core-date-time.ts"],"sourcesContent":["import {\r\n Component,\r\n Input,\r\n EventEmitter,\r\n Output,\r\n OnDestroy,\r\n AfterViewInit,\r\n ChangeDetectorRef,\r\n OnInit,\r\n ViewChild,\r\n ChangeDetectionStrategy,\r\n ContentChild,\r\n ElementRef,\r\n Inject,\r\n Optional\r\n} from '@angular/core';\r\nimport * as uuid from 'uuid';\r\nimport hash from 'object-hash';\r\nimport moment, { Moment } from 'moment';\r\nimport { AbstractControl, FormGroup, NgForm, ValidatorFn, Validators } from '@angular/forms';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';\r\nimport { NgxMatDatetimePicker, NGX_MAT_DATE_FORMATS, } from '@angular-material-components/datetime-picker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { FORM_CONFIG, IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\nimport { SdLabelDefDirective } from '@sd-angular/core/common';\r\n\r\nconst CUSTOM_DATETIME_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY HH:mm'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY HH:mm',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\nconst CUSTOM_DATE_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\n@Component({\r\n selector: 'sd-date-time',\r\n templateUrl: './date-time.component.html',\r\n styleUrls: ['./date-time.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [\r\n { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },\r\n { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATETIME_FORMATS }\r\n ]\r\n})\r\nexport class SdDateTime implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n isMobileOrTablet = false;\r\n #date: any;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n @Input() appearance: MatFormFieldAppearance;\r\n disableErrorMessage = false;\r\n @Input('disableErrorMessage') set _disableErrorMessage(val: boolean \| '') {\r\n this.disableErrorMessage = (val === '') \|\| val;\r\n val = (val === '') \|\| val;\r\n }\r\n formControl = new SdFormControl();\r\n min: Date;\r\n @Input('min') set _min(val: string \| Date \| number) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n max: Date;\r\n @Input('max') set _max(val: string \| Date \| number) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n maxlength: number;\r\n type: 'datetime' \| 'date' \| 'time' \| 'month' = 'datetime';\r\n @Input('type') set _type(val: 'datetime' \| 'date' \| 'time' \| 'month') {\r\n this.type = val \|\| 'datetime';\r\n }\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n required = false;\r\n @Input('required') set _required(val: boolean \| '') {\r\n this.required = (val === '') \|\| val;\r\n if (this.required) {\r\n this.formControl.setValidators([Validators.required]);\r\n } else {\r\n this.formControl.clearValidators();\r\n }\r\n }\r\n qcId: string;\r\n label: string;\r\n @Input('label') set _label(val: string) {\r\n this.label = val;\r\n this.qcId = hash({\r\n selector: 'sd-date-time',\r\n label: val\r\n });\r\n };\r\n @Input() placeholder: string;\r\n @Input() defaultTime: any;\r\n @Input() set minDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n @Input() set maxDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() validator: (value: any) => string \| Promise<string>;\r\n @Output() sdChange = new EventEmitter();\r\n\r\n @Input() set model(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#date !== val) {\r\n this.#date = val;\r\n const date = Date.isDate(this.#date) ? moment(Date.toFormat(this.#date, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n this.formControl.setValue(date);\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n #subscription = new Subscription();\r\n @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n @ContentChild(SdLabelDefDirective) sdLabelDef: SdLabelDefDirective;\r\n @ViewChild('input') input: ElementRef;\r\n @ViewChild(MatDatepicker) datePicker: MatDatepicker<Moment>;\r\n @ViewChild(NgxMatDatetimePicker) dateTimePicker: NgxMatDatetimePicker<Moment>;\r\n isFocused = false;\r\n constructor(\r\n private ref: ChangeDetectorRef,\r\n deviceService: DeviceDetectorService,\r\n @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\r\n this.isMobileOrTablet = !deviceService.isDesktop();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n ngOnInit() {\r\n this.maxlength = this.type === 'datetime' ? 16 : 10;\r\n this.appearance = this.appearance \|\| this.formConfig?.appearance;\r\n this.#subscription.add(this.formControl.sdChanges.subscribe(() => {\r\n // this.formControl.updateValueAndValidity();\r\n this.ref.markForCheck();\r\n }));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n }\r\n\r\n ngAfterViewInit() {\r\n }\r\n\r\n onFocus = () => {\r\n this.isFocused = true;\r\n }\r\n\r\n onBlur = () => {\r\n this.isFocused = false;\r\n }\r\n\r\n onClick = () => {\r\n if (this.sdView?.templateRef) {\r\n if (!this.formControl.disabled && !this.isFocused) {\r\n this.focus();\r\n }\r\n }\r\n }\r\n\r\n blur = () => {\r\n this.input?.nativeElement?.blur();\r\n }\r\n\r\n focus = () => {\r\n this.isFocused = true;\r\n setTimeout(() => {\r\n this.input?.nativeElement?.focus();\r\n if (this.type === 'date') {\r\n this.datePicker?.open();\r\n } else {\r\n this.dateTimePicker?.open();\r\n }\r\n //\r\n }, 100);\r\n }\r\n\r\n focusInputElement() {\r\n this.input?.nativeElement?.focus();\r\n }\r\n\r\n isValid: boolean;\r\n onKeyDown = (event) => {\r\n const key = event.keyCode \|\| event.charCode;\r\n let isShift = false;\r\n if (key == 16) {\r\n isShift = true;\r\n }\r\n //Allow only Numeric Keys.\r\n if (((key >= 48 && key <= 57) \|\| key == 8 \|\| key <= 37 \|\| key <= 39 \|\| (key >= 96 && key <= 105) \|\| key == 191 \|\| key == 186) && isShift == false) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n onKeyup = (event) => {\r\n const currentVal: string = event.target.value;\r\n const formControl: AbstractControl = this.formControl;\r\n let regex = /^([1-9]\|([012][0-9])\|(3[01]))\\/([0]{0,1}[1-9]\|1[012])\\/\\d\\d\\d\\d$/g;\r\n\r\n if (this.type === 'datetime' \|\| this.type === 'time') {\r\n regex = /^([1-9]\|([012][0-9])\|(3[01]))\\/([0]{0,1}[1-9]\|1[012])\\/\\d\\d\\d\\d [012]{0,1}[0-9]:[0-6][0-9]$/g;\r\n }\r\n if (this.type === 'month') {\r\n regex = /^([0]{0,1}[1-9]\|1[012])\\/\\d\\d\\d\\d [012]{0,1}[0-9]:[0-6][0-9]$/g;\r\n }\r\n\r\n const errorMessage = this.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm';\r\n if (currentVal && !regex.test(currentVal)) {\r\n setTimeout(() => {\r\n this.isValid = true;\r\n formControl.markAsDirty();\r\n formControl.markAsTouched();\r\n formControl.setErrors({ ...formControl.errors, date: `Chưa đúng định dạng ${errorMessage}` });\r\n }, 0);\r\n\r\n } else {\r\n setTimeout(() => {\r\n this.isValid = false;\r\n formControl.setErrors({ ...formControl.errors, date: null });\r\n this.formControl.updateValueAndValidity();\r\n }, 0);\r\n }\r\n }\r\n\r\n onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate();\r\n if (!this.dateTimePicker) {\r\n this.input?.nativeElement?.focus();\r\n }\r\n if (!this.isValid) {\r\n if (new Date(this.#date) !== value) {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n } else {\r\n this.isValid = false;\r\n this.formControl.setValue(null);\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n\r\n clear = ($event: any) => {\r\n $event?.stopPropagation();\r\n if (this.formControl.value) {\r\n this.formControl.setValue(null);\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n\r\n setMonthAndYear = (normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) => {\r\n const ctrlValue = this.formControl.value \|\| moment();\r\n ctrlValue.month(normalizedMonthAndYear.month());\r\n ctrlValue.year(normalizedMonthAndYear.year());\r\n this.formControl.setValue(ctrlValue);\r\n datepicker.close();\r\n this.modelChange.emit(ctrlValue);\r\n this.sdChange.emit(ctrlValue);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport {\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule\r\n} from '@angular-material-components/datetime-picker';\r\nimport { SdDateTime } from './date-time.component';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { NgxMatMomentModule } from '@angular-material-components/moment-adapter';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\nimport { SdPopoverModule } from '@sd-angular/core/popover';\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatFormFieldModule,\r\n MatDatepickerModule,\r\n MatMomentDateModule,\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule,\r\n NgxMatMomentModule,\r\n SdTranslateModule,\r\n SdCommonModule,\r\n SdPopoverModule\r\n ],\r\n declarations: [\r\n SdDateTime\r\n ],\r\n exports: [\r\n SdCommonModule,\r\n SdDateTime\r\n ],\r\n providers: [\r\n ]\r\n})\r\nexport class SdDateTimeModule {\r\n\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["uuid.v4"],"mappings":"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"}
1	+ {"version":3,"file":"sd-angular-core-date-time.js","sources":["../../../../projects/sd-core/date-time/src/lib/date-time.component.ts","../../../../projects/sd-core/date-time/src/lib/date-time.module.ts","../../../../projects/sd-core/date-time/sd-angular-core-date-time.ts"],"sourcesContent":["import {\r\n Component,\r\n Input,\r\n EventEmitter,\r\n Output,\r\n OnDestroy,\r\n AfterViewInit,\r\n ChangeDetectorRef,\r\n OnInit,\r\n ViewChild,\r\n ChangeDetectionStrategy,\r\n ContentChild,\r\n ElementRef,\r\n Inject,\r\n Optional\r\n} from '@angular/core';\r\nimport * as uuid from 'uuid';\r\nimport hash from 'object-hash';\r\nimport moment, { Moment } from 'moment';\r\nimport { AbstractControl, FormGroup, NgForm, ValidatorFn, Validators } from '@angular/forms';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';\r\nimport { NgxMatDatetimePicker, NGX_MAT_DATE_FORMATS, } from '@angular-material-components/datetime-picker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { FORM_CONFIG, IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\nimport { SdLabelDefDirective } from '@sd-angular/core/common';\r\n\r\nconst CUSTOM_DATETIME_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY HH:mm'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY HH:mm',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\nconst CUSTOM_DATE_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\n@Component({\r\n selector: 'sd-date-time',\r\n templateUrl: './date-time.component.html',\r\n styleUrls: ['./date-time.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [\r\n { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },\r\n { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATETIME_FORMATS }\r\n ]\r\n})\r\nexport class SdDateTime implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n isMobileOrTablet = false;\r\n #date: any;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n @Input() appearance: MatFormFieldAppearance;\r\n disableErrorMessage = false;\r\n @Input('disableErrorMessage') set _disableErrorMessage(val: boolean \| '') {\r\n this.disableErrorMessage = (val === '') \|\| val;\r\n val = (val === '') \|\| val;\r\n }\r\n formControl = new SdFormControl();\r\n min: Date;\r\n @Input('min') set _min(val: string \| Date \| number) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n max: Date;\r\n @Input('max') set _max(val: string \| Date \| number) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n maxlength: number;\r\n type: 'datetime' \| 'date' \| 'time' \| 'month' = 'datetime';\r\n @Input('type') set _type(val: 'datetime' \| 'date' \| 'time' \| 'month') {\r\n this.type = val \|\| 'datetime';\r\n }\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n required = false;\r\n @Input('required') set _required(val: boolean \| '') {\r\n this.required = (val === '') \|\| val;\r\n if (this.required) {\r\n this.formControl.setValidators([Validators.required]);\r\n } else {\r\n this.formControl.clearValidators();\r\n }\r\n }\r\n qcId: string;\r\n label: string;\r\n @Input('label') set _label(val: string) {\r\n this.label = val;\r\n this.qcId = hash({\r\n selector: 'sd-date-time',\r\n label: val\r\n });\r\n };\r\n @Input() placeholder: string;\r\n @Input() defaultTime: any;\r\n @Input() set minDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n @Input() set maxDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() validator: (value: any) => string \| Promise<string>;\r\n @Output() sdChange = new EventEmitter();\r\n\r\n @Input() set model(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#date !== val) {\r\n this.#date = val;\r\n const date = Date.isDate(this.#date) ? moment(Date.toFormat(this.#date, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n this.formControl.setValue(date);\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n #subscription = new Subscription();\r\n @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n @ContentChild(SdLabelDefDirective) sdLabelDef: SdLabelDefDirective;\r\n @ViewChild('input') input: ElementRef;\r\n @ViewChild(MatDatepicker) datePicker: MatDatepicker<Moment>;\r\n @ViewChild(NgxMatDatetimePicker) dateTimePicker: NgxMatDatetimePicker<Moment>;\r\n isFocused = false;\r\n constructor(\r\n private ref: ChangeDetectorRef,\r\n deviceService: DeviceDetectorService,\r\n @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\r\n this.isMobileOrTablet = !deviceService.isDesktop();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n ngOnInit() {\r\n this.maxlength = this.type === 'datetime' ? 16 : 10;\r\n this.appearance = this.appearance \|\| this.formConfig?.appearance;\r\n this.#subscription.add(this.formControl.sdChanges.subscribe(() => {\r\n // this.formControl.updateValueAndValidity();\r\n this.ref.markForCheck();\r\n }));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n }\r\n\r\n ngAfterViewInit() {\r\n }\r\n\r\n onFocus = () => {\r\n this.isFocused = true;\r\n }\r\n\r\n onBlur = () => {\r\n this.isFocused = false;\r\n }\r\n\r\n onClick = () => {\r\n if (this.sdView?.templateRef) {\r\n if (!this.formControl.disabled && !this.isFocused) {\r\n this.focus();\r\n }\r\n }\r\n }\r\n\r\n blur = () => {\r\n this.input?.nativeElement?.blur();\r\n }\r\n\r\n focus = () => {\r\n this.isFocused = true;\r\n setTimeout(() => {\r\n this.input?.nativeElement?.focus();\r\n if (this.type === 'date') {\r\n this.datePicker?.open();\r\n } else {\r\n this.dateTimePicker?.open();\r\n }\r\n //\r\n }, 100);\r\n }\r\n\r\n focusInputElement() {\r\n this.input?.nativeElement?.focus();\r\n }\r\n\r\n isValid: boolean;\r\n onKeyDown = (event: KeyboardEvent) => {\r\n const key = event.keyCode \|\| event.charCode;\r\n let isShift = false;\r\n if (key == 16) {\r\n isShift = true;\r\n }\r\n //Allow only Numeric Keys.\r\n if (((key >= 48 && key <= 57) \|\| key == 8 \|\| key <= 37 \|\| key <= 39 \|\| (key >= 96 && key <= 105) \|\| key == 191 \|\| key == 186 \|\| key == 59) && isShift == false) {\r\n return true;\r\n }\r\n else {\r\n return false;\r\n }\r\n }\r\n\r\n onKeyup = (event) => {\r\n const currentVal: string = event.target.value;\r\n const formControl: AbstractControl = this.formControl;\r\n let regex = /^([1-9]\|([012][0-9])\|(3[01]))\\/([0]{0,1}[1-9]\|1[012])\\/\\d\\d\\d\\d$/g;\r\n\r\n if (this.type === 'datetime' \|\| this.type === 'time') {\r\n regex = /^([1-9]\|([012][0-9])\|(3[01]))\\/([0]{0,1}[1-9]\|1[012])\\/\\d\\d\\d\\d [012]{0,1}[0-9]:[0-6][0-9]$/g;\r\n }\r\n if (this.type === 'month') {\r\n regex = /^([0]{0,1}[1-9]\|1[012])\\/\\d\\d\\d\\d [012]{0,1}[0-9]:[0-6][0-9]$/g;\r\n }\r\n\r\n const errorMessage = this.type === 'date' ? 'dd/MM/yyyy' : 'dd/MM/yyyy HH:mm';\r\n if (currentVal && !regex.test(currentVal)) {\r\n setTimeout(() => {\r\n this.isValid = true;\r\n formControl.markAsDirty();\r\n formControl.markAsTouched();\r\n formControl.setErrors({ ...formControl.errors, date: `Chưa đúng định dạng ${errorMessage}` });\r\n }, 0);\r\n\r\n } else {\r\n setTimeout(() => {\r\n this.isValid = false;\r\n formControl.setErrors({ ...formControl.errors, date: null });\r\n this.formControl.updateValueAndValidity();\r\n }, 0);\r\n }\r\n }\r\n\r\n onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate();\r\n if (!this.dateTimePicker) {\r\n this.input?.nativeElement?.focus();\r\n }\r\n if (!this.isValid) {\r\n if (new Date(this.#date) !== value) {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n } else {\r\n this.isValid = false;\r\n this.formControl.setValue(null);\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n\r\n clear = ($event: any) => {\r\n $event?.stopPropagation();\r\n if (this.formControl.value) {\r\n this.formControl.setValue(null);\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n\r\n setMonthAndYear = (normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) => {\r\n const ctrlValue = this.formControl.value \|\| moment();\r\n ctrlValue.month(normalizedMonthAndYear.month());\r\n ctrlValue.year(normalizedMonthAndYear.year());\r\n this.formControl.setValue(ctrlValue);\r\n datepicker.close();\r\n this.modelChange.emit(ctrlValue);\r\n this.sdChange.emit(ctrlValue);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport {\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule\r\n} from '@angular-material-components/datetime-picker';\r\nimport { SdDateTime } from './date-time.component';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { NgxMatMomentModule } from '@angular-material-components/moment-adapter';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\nimport { SdPopoverModule } from '@sd-angular/core/popover';\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatFormFieldModule,\r\n MatDatepickerModule,\r\n MatMomentDateModule,\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule,\r\n NgxMatMomentModule,\r\n SdTranslateModule,\r\n SdCommonModule,\r\n SdPopoverModule\r\n ],\r\n declarations: [\r\n SdDateTime\r\n ],\r\n exports: [\r\n SdCommonModule,\r\n SdDateTime\r\n ],\r\n providers: [\r\n ]\r\n})\r\nexport class SdDateTimeModule {\r\n\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["uuid.v4"],"mappings":"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"}

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

@@ -18,7 +18,8 @@ const API = {
     removeFile: '/excel/remove',
     sdExport: '/excel/sd-export',
     sdExportByTemplate: '/excel/sd-export-by-template',
-    sdMergePDF: '/excel/sd-merge-pdf'
+    sdMergePDF: '/excel/sd-merge-pdf',
+    sdGenerateTemplate: '/excel/sd-generate-template',
 };
 const EXPORT_CONFIG = new InjectionToken('export.configuration');
@@ -45,10 +46,15 @@ class SdExportService {
         });
         this.generateTemplate = (template) => __awaiter(this, void 0, void 0, function* () {
             const { firebaseUrl } = this.configuration;
-            const { generateTemplate } = API;
-            const url = `${firebaseUrl}${generateTemplate}`;
-            const { filePath, fileName } = yield this.apiService.post(url, template);
-            return { filePath, fileName };
+            const { sdGenerateTemplate } = API;
+            const url = `${firebaseUrl}${sdGenerateTemplate}`;
+            // const { filePath, fileName } = await this.apiService.post(url, template);
+            // return { filePath, fileName };
+            const buffer = yield this.apiService.post(url, template, null, {
+                responseType: 'arraybuffer'
+            });
+            const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,' });
+            __classPrivateFieldGet(this, _blobToSaveAs).call(this, blob, template.fileName || 'Template');
         });
         this.uploadTemplate = (args) => __awaiter(this, void 0, void 0, function* () {
             const { key, group, validator } = args;

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

	@@ -1 +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}\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};\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 { generateTemplate } = API;\r\n const url = `${firebaseUrl}${generateTemplate}`;\r\n const { filePath, fileName } = await this.apiService.post(url, template);\r\n return { filePath, fileName };\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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"}
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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"}

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

@@ -4,7 +4,6 @@ import { __awaiter, __classPrivateFieldGet, __rest, __classPrivateFieldSet } fro
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { trigger, state, style, transition, animate } from '@angular/animations';
-import * as uuid from 'uuid';
 import { v4 } from 'uuid';
 import { Subject, Subscription, isObservable } from 'rxjs';
 import { SdNotifyService } from '@sd-angular/core/notify';
@@ -529,11 +528,23 @@ class SdPopupExport {
             this.ref.detectChanges();
         });
         this.exportDefault = (isCSV = false) => {
-            this.export.emit({
-                file: null,
-                columns: this.columns,
-                isCSV
-            });
+            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)
+                    .map(e => e.data);
+                this.export.emit({
+                    file: null,
+                    columns,
+                    isCSV
+                });
+            }
+            else {
+                this.export.emit({
+                    file: null,
+                    columns: this.columns,
+                    isCSV
+                });
+            }
         };
         this.loadFiles = (group = null) => __awaiter(this, void 0, void 0, function* () {
             this.selectedGroup = this.groups.find(e => e.code === group);
@@ -573,18 +584,14 @@ class SdPopupExport {
             });
         }));
         this.generateTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            var _g, _h;
             this.loadingService.start();
-            const result = yield __classPrivateFieldGet(this, _initTemplate).call(this).finally(this.loadingService.stop);
-            if (result === null || result === void 0 ? void 0 : result.filePath) {
-                this.exportService.download(result.filePath, `${((_h = (_g = this.gridOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.fileName) || uuid}.xlsx`);
-            }
+            yield __classPrivateFieldGet(this, _initTemplate).call(this).finally(this.loadingService.stop);
         });
         this.generateAndUploadTemplate = (fileName) => __awaiter(this, void 0, void 0, function* () {
-            var _j, _k, _l, _m, _o, _p, _q;
+            var _g, _h, _j, _k, _l, _m, _o;
             const sheets = [];
-            if (Array.isArray((_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.sheets)) {
-                for (const sheet of (_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.sheets) {
+            if (Array.isArray((_h = (_g = this.gridOption) === null || _g === void 0 ? void 0 : _g.export) === null || _h === void 0 ? void 0 : _h.sheets)) {
+                for (const sheet of (_k = (_j = this.gridOption) === null || _j === void 0 ? void 0 : _j.export) === null || _k === void 0 ? void 0 : _k.sheets) {
                     if (sheet.name && sheet.items && sheet.fields) {
                         if (Array.isArray(sheet.items)) {
                             sheets.push({
@@ -606,11 +613,11 @@ class SdPopupExport {
             return yield this.exportService.generateUploadTemplate({
                 key: this.key,
                 template: {
-                    fileName: fileName || ((_p = (_o = this.gridOption) === null || _o === void 0 ? void 0 : _o.export) === null || _p === void 0 ? void 0 : _p.fileName),
+                    fileName: fileName || ((_m = (_l = this.gridOption) === null || _l === void 0 ? void 0 : _l.export) === null || _m === void 0 ? void 0 : _m.fileName),
                     columns: this.columns.filter(e => this.selected[e.field]),
                     sheets
                 },
-                group: (_q = this.selectedGroup) === null || _q === void 0 ? void 0 : _q.code
+                group: (_o = this.selectedGroup) === null || _o === void 0 ? void 0 : _o.code
             });
         });
         this.onExport = (file) => {
@@ -621,11 +628,11 @@ class SdPopupExport {
             this.ref.detectChanges();
         };
         this.uploadTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            var _r, _s, _t;
+            var _p, _q, _r;
             const file = yield this.exportService.uploadTemplate({
                 key: this.key,
-                group: (_r = this.selectedGroup) === null || _r === void 0 ? void 0 : _r.code,
-                validator: (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.validators
+                group: (_p = this.selectedGroup) === null || _p === void 0 ? void 0 : _p.code,
+                validator: (_r = (_q = this.gridOption) === null || _q === void 0 ? void 0 : _q.export) === null || _r === void 0 ? void 0 : _r.validators
             });
             if (file) {
                 this.files = [...this.files, file];
@@ -647,7 +654,7 @@ class SdPopupExport {
             });
         };
         this.createTemplate = () => __awaiter(this, void 0, void 0, function* () {
-            var _u, _v, _w, _x, _y;
+            var _s, _t, _u, _v, _w;
             const { translate } = this.translateService;
             if (this.form.invalid) {
                 this.form.markAllAsTouched();
@@ -660,8 +667,8 @@ class SdPopupExport {
             this.loadingService.start();
             const fileName = this.templateName + '.xlsx';
             try {
-                if ((_w = (_v = (_u = this.gridOption) === null || _u === void 0 ? void 0 : _u.export) === null || _v === void 0 ? void 0 : _v.validators) === null || _w === void 0 ? void 0 : _w.call(_v, fileName)) {
-                    this.notifyService.notify.warning((_y = (_x = this.gridOption) === null || _x === void 0 ? void 0 : _x.export) === null || _y === void 0 ? void 0 : _y.validators(fileName));
+                if ((_u = (_t = (_s = this.gridOption) === null || _s === void 0 ? void 0 : _s.export) === null || _t === void 0 ? void 0 : _t.validators) === null || _u === void 0 ? void 0 : _u.call(_t, fileName)) {
+                    this.notifyService.notify.warning((_w = (_v = this.gridOption) === null || _v === void 0 ? void 0 : _v.export) === null || _w === void 0 ? void 0 : _w.validators(fileName));
                     return;
                 }
                 const result = yield this.generateAndUploadTemplate(fileName);
@@ -741,7 +748,8 @@ SdPopupExport.propDecorators = {
     modal: [{ type: ViewChild, args: ['modal',] }],
     listGroups: [{ type: ViewChild, args: ['listGroups',] }],
     export: [{ type: Output }],
-    _gridOption: [{ type: Input, args: ['gridOption',] }]
+    _gridOption: [{ type: Input, args: ['gridOption',] }],
+    configuration: [{ type: Input }]
 };
 var _COLUMNS, _cache, _getKey, _default, _load, _get, _set, _remove;
@@ -1566,7 +1574,8 @@ class SdGridMaterial {
         _onExport.set(this, (args) => __awaiter(this, void 0, void 0, function* () {
             var _g, _h, _j, _k, _l, _m, _o, _p, _q;
             try {
-                const { file, columns, isCSV } = args;
+                const { file, isCSV } = 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;
                 let total = this.total;
                 let pageNumber = 0;
@@ -2104,7 +2113,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\" [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?.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>",
                 animations: [
                     trigger('detailExpand', [
                         state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),