npm - @sd-angular/core - Versions diffs - 1.2.26 → 1.2.29 - Mend

@sd-angular/core 1.2.26 → 1.2.29

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 (91) 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 { FormGroup, NgForm, 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\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) {\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) {\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 @Input() type: 'datetime' \| 'date' \| 'time' \| 'month' = 'datetime';\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 @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.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 onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate();\r\n /*\r\n Focus input khi `ngx-mat-datetime-picker` đang mở sẽ trigger hàm cancel() làm cho giá trị _selected không được update mới nhất\r\n * Case riêng trường hợp type = `datetime` thì xử lý focus element sau khi `ngx-mat-datetime-picker` emit event (closed)\r\n * @see https://github.com/h2qutc/ngx-mat-datetime-picker/blob/HEAD/projects/datetime-picker/src/lib/datetime-input.ts#L343\r\n /\r\n if (!this.dateTimePicker) {\r\n this.input?.nativeElement?.focus();\r\n }\r\n if (value) {\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 if (!this.formControl?.value) {\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\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\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) {\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) {\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 @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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"}

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

@@ -1,4 +1,4 @@
-import { EventEmitter, Component, ChangeDetectorRef, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, NgZone, ChangeDetectorRef, ViewChild, Input, Output, NgModule } from '@angular/core';
 import { QuillModule } from 'ngx-quill';
 import { FormControl, Validators, NgForm, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
@@ -118,7 +118,8 @@ const PROMOTION_FORM = {
 var _name, _subscription, _model, _form, _updateValidator, _uploadImage;
 class SdEditor {
-    constructor(ref, sdApiService) {
+    constructor(ngZone, ref, sdApiService) {
+        this.ngZone = ngZone;
         this.ref = ref;
         this.sdApiService = sdApiService;
         _name.set(this, `N${v4()}`);
@@ -214,6 +215,7 @@ class SdEditor {
             }
             this.formControl.setValidators(validators);
             this.formControl.updateValueAndValidity();
+            this.ref.markForCheck();
         });
         this.editorInit = (quill) => {
             this.quillEvent = quill;
@@ -236,43 +238,48 @@ class SdEditor {
             //   // this.formControl.setValue(html);
             // });
             const self = this;
-            quill.getModule('toolbar').addHandler('image', function () {
-                let fileInput = this.container.querySelector('input.ql-image[type=file]');
-                if (fileInput == null) {
-                    fileInput = document.createElement('input');
-                    fileInput.setAttribute('type', Constants.FILE);
-                    fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
-                    fileInput.classList.add('ql-image');
-                    fileInput.addEventListener('change', () => {
-                        const files = fileInput.files;
-                        const range = this.quill.getSelection(true);
-                        if (!files || !files.length) {
-                            return;
-                        }
-                        const formData = new FormData();
-                        formData.append(Constants.FILE, files[0]);
-                        this.quill.enable(false);
-                        /*this.apiService.post(this.domain + this.urlUploadImage, formData).subscribe((resp: any) => {
-                          this.quill.enable(true);
-                          this.quill.editor.insertEmbed(range.index, 'image', resp.data.imageUrl || resp.data.publish_url ||  resp.url);
-                          const content = this.quill.getContents();
-                          this.quill.setContents(content);
-                          this.quill.setSelection(range.index + 1, 'silent');
-                          fileInput.value = '';
-                        });*/
-                        __classPrivateFieldGet(self, _uploadImage).call(self, formData, quill, range, fileInput);
-                    });
-                    this.container.appendChild(fileInput);
-                }
-                fileInput.click();
+            this.ngZone.runOutsideAngular(() => {
+                quill.getModule('toolbar').addHandler('image', function () {
+                    let fileInput = this.container.querySelector('input.ql-image[type=file]');
+                    if (fileInput == null) {
+                        fileInput = document.createElement('input');
+                        fileInput.setAttribute('type', Constants.FILE);
+                        fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
+                        fileInput.classList.add('ql-image');
+                        fileInput.addEventListener('change', () => {
+                            const files = fileInput.files;
+                            const range = this.quill.getSelection(true);
+                            if (!files || !files.length) {
+                                return;
+                            }
+                            const formData = new FormData();
+                            formData.append(Constants.FILE, files[0]);
+                            this.quill.enable(false);
+                            /*this.apiService.post(this.domain + this.urlUploadImage, formData).subscribe((resp: any) => {
+                              this.quill.enable(true);
+                              this.quill.editor.insertEmbed(range.index, 'image', resp.data.imageUrl || resp.data.publish_url ||  resp.url);
+                              const content = this.quill.getContents();
+                              this.quill.setContents(content);
+                              this.quill.setSelection(range.index + 1, 'silent');
+                              fileInput.value = '';
+                            });*/
+                            __classPrivateFieldGet(self, _uploadImage).call(self, formData, quill, range, fileInput);
+                        });
+                        this.container.appendChild(fileInput);
+                    }
+                    fileInput.click();
+                });
             });
+            this.ref.markForCheck();
         };
         this.onModelChange = (val) => {
             this.formControl.setValue(val);
             this.modelHTML = val;
+            this.ref.markForCheck();
         };
         this.onClickShowHtmlEditor = () => {
             this.showHtmlEditor = !this.showHtmlEditor;
+            this.ref.markForCheck();
         };
         _uploadImage.set(this, (formData, quill, range, fileInput) => {
             if (!this.urlUploadImage) {
@@ -280,17 +287,20 @@ class SdEditor {
             }
             // this.domain = 'https://api-commerce-qc.vinid.dev';
             this.sdApiService.post(this.urlUploadImage, formData).then((resp) => {
-                var _a, _b, _c, _d;
-                quill.enable(true);
-                // quill.editor.insertEmbed(range.index, 'image', resp?.data?.imageUrl || resp?.data?.publish_url || resp?.url || '');
-                quill.getModule('clipboard').dangerouslyPasteHTML(range.index, '<a target="_blank" href="' + (((_a = resp === null || resp === void 0 ? void 0 : resp.data) === null || _a === void 0 ? void 0 : _a.imageUrl) || ((_b = resp === null || resp === void 0 ? void 0 : resp.data) === null || _b === void 0 ? void 0 : _b.publish_url) || (resp === null || resp === void 0 ? void 0 : resp.url) || '')
-                    + '"><img src="' + (((_c = resp === null || resp === void 0 ? void 0 : resp.data) === null || _c === void 0 ? void 0 : _c.imageUrl) || ((_d = resp === null || resp === void 0 ? void 0 : resp.data) === null || _d === void 0 ? void 0 : _d.publish_url) || (resp === null || resp === void 0 ? void 0 : resp.url) || '') + '" alt="c-image-editor-quill"></a>', 'user');
-                // quill.insertText();
-                const content = quill.getContents();
-                quill.setContents(content);
-                quill.setSelection(range.index + 1, 'user');
-                fileInput.value = '';
+                this.ngZone.runOutsideAngular(() => {
+                    var _a, _b, _c, _d;
+                    quill.enable(true);
+                    // quill.editor.insertEmbed(range.index, 'image', resp?.data?.imageUrl || resp?.data?.publish_url || resp?.url || '');
+                    quill.getModule('clipboard').dangerouslyPasteHTML(range.index, '<a target="_blank" href="' + (((_a = resp === null || resp === void 0 ? void 0 : resp.data) === null || _a === void 0 ? void 0 : _a.imageUrl) || ((_b = resp === null || resp === void 0 ? void 0 : resp.data) === null || _b === void 0 ? void 0 : _b.publish_url) || (resp === null || resp === void 0 ? void 0 : resp.url) || '')
+                        + '"><img src="' + (((_c = resp === null || resp === void 0 ? void 0 : resp.data) === null || _c === void 0 ? void 0 : _c.imageUrl) || ((_d = resp === null || resp === void 0 ? void 0 : resp.data) === null || _d === void 0 ? void 0 : _d.publish_url) || (resp === null || resp === void 0 ? void 0 : resp.url) || '') + '" alt="c-image-editor-quill"></a>', 'user');
+                    // quill.insertText();
+                    const content = quill.getContents();
+                    quill.setContents(content);
+                    quill.setSelection(range.index + 1, 'user');
+                    fileInput.value = '';
+                });
             });
+            this.ref.markForCheck();
         });
     }
     set model(val) {
@@ -339,6 +349,7 @@ class SdEditor {
             this.quillConfig.toolbar.container = this.toolbar;
             console.log('toolbar', this.quillConfig);
         }
+        this.ref.markForCheck();
     }
     ngAfterViewInit() {
         __classPrivateFieldGet(this, _subscription).add(this.formControl.valueChanges.subscribe((val) => {
@@ -357,10 +368,12 @@ SdEditor.decorators = [
     { type: Component, args: [{
                 selector: 'sd-editor',
                 template: "<label *ngIf=\"label\" class=\"d-block T14M\">{{label}} <span class=\"text-danger mb-2\" *ngIf=\"required\">*</span></label>\r\n<ng-container *ngIf=\"!formControl.disabled && !showHtmlEditor\">\r\n  <quill-editor #editor [styles]=\"styles\" (onEditorCreated)=\"editorInit($event)\" [ngModel]=\"formControl.value\"\r\n                (ngModelChange)=\"onModelChange($event)\" [id]=\"id\" [modules]=\"quillConfig\" [placeholder]=\"placeholder\"\r\n                [maxLength]=\"maxlength\" >\r\n  </quill-editor>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.required\">\r\n    {{'This field is required' | sdTranslate}}\r\n  </span>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.minlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{minlength}}</strong>\r\n  </span>\r\n  <span class=\"d-block text-danger mt-5\" *ngIf=\"formControl.errors?.maxlength\">\r\n    {{'Max length' | sdTranslate}} <strong>{{maxlength}}</strong>\r\n  </span>\r\n</ng-container>\r\n<ng-container *ngIf=\"formControl.disabled\">\r\n  <div [innerHtml]=\"formControl.value\"></div>\r\n</ng-container>\r\n<ng-container *ngIf=\"enableHTMLButton\">\r\n  <sd-textarea [(model)]=\"modelHTML\" *ngIf=\"showHtmlEditor\" rows=\"20\"\r\n               (modelChange)=\"onModelChange($event)\"></sd-textarea>\r\n  <sd-button\r\n    title=\"{{showHtmlEditor?'\u1EA8n':'Hi\u1EC7n'}} m\u00E3 HTML\"\r\n    class=\"mr-8\"\r\n    fontSet=\"material-icons-outlined\"\r\n    (action)=\"onClickShowHtmlEditor()\"\r\n    type=\"light\"\r\n  ></sd-button>\r\n</ng-container>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: ["::ng-deep img[alt=c-image-editor-quill]{max-width:80%}"]
             },] }
 ];
 SdEditor.ctorParameters = () => [
+    { type: NgZone },
     { type: ChangeDetectorRef },
     { type: SdApiService }
 ];

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-editor.js","sources":["../../../../projects/sd-core/editor/src/lib/constant.ts","../../../../projects/sd-core/editor/src/lib/editor.component.ts","../../../../projects/sd-core/editor/src/lib/editor.module.ts","../../../../projects/sd-core/editor/src/public-api.ts","../../../../projects/sd-core/editor/sd-angular-core-editor.ts"],"sourcesContent":["export const Constants = {\r\n ARE_YOU_WANT_TO_DELETE: 'Are you sure you want to delete?',\r\n ACTIVE: 'active',\r\n IN_ACTIVE: 'inactive',\r\n APPROVE: 'approve',\r\n UN_APPROVE: 'unapprove',\r\n ACCEPT_SIZE_IMAGE: 'Logo only accept image with size <= 2MB',\r\n ACCEPT_TYPE_IMAGE:\r\n 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',\r\n PAGE_TYPE_NEW: 'new',\r\n PAGE_TYPE_EDIT: 'edit',\r\n SAVE: 'saveOb',\r\n SAVE_AND_CONTINUE: 'saveAndContOb',\r\n IMAGE_SIZE: 2048000,\r\n SUCCESS: 'Success',\r\n IMPORT_SUCCESSFULLY: 'Import successfully!',\r\n ERROR: 'Error',\r\n FAILED: 'fail',\r\n FILE: 'file',\r\n NONE: 'none',\r\n NOT_EXIST_ID_OR_LINK: 'This ID/Link is not existing',\r\n FEATURE_IS_PENDING: 'This feature is pending',\r\n NOT_SUPPORT_FILE_IMAGE: 'File upload is not supported.',\r\n NOT_SUPPORT_FILE_IMPORT: 'File import is not supported.',\r\n NETWORK_ERROR: 'Network Error',\r\n SORT_BY: [\r\n {\r\n value: 0,\r\n name: 'Created Date'\r\n },\r\n {\r\n value: 1,\r\n name: 'Title'\r\n }\r\n ],\r\n DESC: [\r\n {\r\n value: true,\r\n name: 'Descending'\r\n },\r\n {\r\n value: false,\r\n name: 'Ascending'\r\n }\r\n ],\r\n FORM_ERRORS: {\r\n Id: '',\r\n textSearch: '',\r\n ImportLogId: '',\r\n SortBy: '',\r\n Reverse: '',\r\n },\r\n VALIDATION_MESSAGES: {}\r\n};\r\n\r\nexport const PROMOTION_PERMISSIONS = ['ListPromotion', 'AddNewPromotion', 'EditPromotion',\r\n 'ActiveOrInactivePromotion', 'RemovePromotion', 'ImportPromotion', 'ExportPromotion'];\r\n\r\nexport const ValidateMessageConstants = {\r\n TITLE_REQUIRED: 'Title is required',\r\n TITLE_MAXLENGTH: 'Title is not more than 55 characters',\r\n TITLE_PATTERN: 'Title is required',\r\n\r\n CREATED_AT_REQUIRED: 'Created At is required',\r\n\r\n SHOW_ON_HOME_REQUIRED: 'Show On Home is required',\r\n\r\n DISPLAY_NUMBER_REQUIRED: 'Display Number is required',\r\n\r\n CONTENT_TYPE_REQUIRED: 'Content Type is required',\r\n\r\n DISCOUNT_PERCENT_REQUIRED: 'Discount percent is required',\r\n DISCOUNT_PERCENT_MAX: 'Max discount percent is 100, cannot input greater',\r\n DISCOUNT_PERCENT_MIN: 'Min discount percent is 0, cannot input lower'\r\n};\r\n\r\nexport const PROMOTION_FORM = {\r\n FORM_ERRORS: {\r\n title: '',\r\n createdAt: '',\r\n displayNumber: '',\r\n showOnHome: '',\r\n discountPercent: '',\r\n isActive: '',\r\n ctaLabelName: '',\r\n ctaDeepLink: '',\r\n tags: ''\r\n },\r\n VALIDATION_MESSAGES: {\r\n title: {\r\n required: ValidateMessageConstants.TITLE_REQUIRED,\r\n maxlength: ValidateMessageConstants.TITLE_MAXLENGTH,\r\n pattern: ValidateMessageConstants.TITLE_PATTERN\r\n },\r\n createdAt: {\r\n required: ValidateMessageConstants.CREATED_AT_REQUIRED\r\n },\r\n showOnHome: {\r\n required: ValidateMessageConstants.SHOW_ON_HOME_REQUIRED\r\n },\r\n displayNumber: {\r\n required: ValidateMessageConstants.DISPLAY_NUMBER_REQUIRED\r\n },\r\n discountPercent: {\r\n required: ValidateMessageConstants.DISCOUNT_PERCENT_REQUIRED,\r\n max: ValidateMessageConstants.DISCOUNT_PERCENT_MAX,\r\n min: ValidateMessageConstants.DISCOUNT_PERCENT_MIN\r\n },\r\n tags: {\r\n required: ValidateMessageConstants.CONTENT_TYPE_REQUIRED\r\n }\r\n }\r\n};\r\n","import {\r\n Component,\r\n ViewChild,\r\n Input,\r\n OnInit,\r\n Output,\r\n EventEmitter,\r\n ChangeDetectorRef,\r\n AfterViewInit, OnDestroy\r\n} from '@angular/core';\r\nimport {QuillEditorComponent} from 'ngx-quill';\r\nimport * as uuid from 'uuid';\r\nimport {FormControl, FormGroup, NgForm, ValidatorFn, Validators} from '@angular/forms';\r\nimport {Constants} from './constant';\r\nimport {Subscription} from 'rxjs';\r\nimport {SdApiService} from '@sd-angular/core/api';\r\nimport 'quill-mention';\r\n\r\n@Component({\r\n selector: 'sd-editor',\r\n templateUrl: './editor.component.html',\r\n styleUrls: ['./editor.component.scss'],\r\n})\r\nexport class SdEditor implements OnInit, AfterViewInit, OnDestroy {\r\n #name = `N${uuid.v4()}`;\r\n id: string = `I${uuid.v4()}`;\r\n #subscription = new Subscription();\r\n @ViewChild('editor') editor: QuillEditorComponent;\r\n @Input() label: string;\r\n #model: string;\r\n @Input() set model(val: string) {\r\n this.#model = val;\r\n this.modelHTML = val;\r\n this.formControl.setValue(this.#model, {\r\n emitEvent: false\r\n });\r\n this.ref.detectChanges();\r\n }\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\r\n required = false;\r\n\r\n @Input() set pRequired(val: boolean \| '') {\r\n this.required = (val === '') \|\| val;\r\n this.#updateValidator();\r\n }\r\n\r\n minlength: number;\r\n\r\n @Input('minlength') set _minlength(val: number) {\r\n this.minlength = +val;\r\n this.#updateValidator();\r\n }\r\n\r\n maxlength: number;\r\n\r\n @Input('maxlength') set _maxlength(val: number) {\r\n this.maxlength = +val;\r\n this.#updateValidator();\r\n }\r\n\r\n @Output() modelChange = new EventEmitter<string>();\r\n\r\n @Input() placeholder: string = '';\r\n\r\n @Input() styles: any = {height: '250px'};\r\n\r\n formControl = new FormControl();\r\n\r\n @Input() domain = '';\r\n @Input() urlUploadImage: string;\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\r\n @Input() toolbar: any;\r\n @Input() enableHTMLButton = false;\r\n showHtmlEditor = false;\r\n modelHTML: string;\r\n\r\n quillEvent: any;\r\n @Input() mentionValues: { id: string, value: string, link?: string }[];\r\n @Input() hashTagValues: { id: string, value: string, link?: string }[];\r\n quillConfig = {\r\n // toolbar: '.toolbar',\r\n toolbar: {\r\n container: [\r\n ['bold', 'italic', 'underline', 'strike'], // toggled buttons\r\n ['blockquote', 'code-block'],\r\n\r\n [{'header': 1}, {'header': 2}], // custom button values\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n [{'script': 'sub'}, {'script': 'super'}], // superscript/subscript\r\n [{'indent': '-1'}, {'indent': '+1'}], // outdent/indent\r\n [{'direction': 'rtl'}], // text direction\r\n\r\n [{'size': ['small', false, 'large', 'huge']}], // custom dropdown\r\n [{'header': [1, 2, 3, 4, 5, 6, false]}],\r\n\r\n [{'color': []}, {'background': []}], // dropdown with defaults from theme\r\n [{'font': []}],\r\n [{'align': []}],\r\n\r\n ['clean'], // remove formatting button\r\n\r\n ['link', 'image', 'video'] // link and image, video\r\n ]\r\n },\r\n mention: {\r\n allowedChars: /^[A-Za-z0-9\\sÅÄÖåäö._-]$/,\r\n mentionDenotationChars: ['@', '#'],\r\n source: (searchTerm, renderList, mentionChar) => {\r\n if ((this.mentionValues && mentionChar === '@') \|\| (this.hashTagValues && mentionChar === '#')) {\r\n let values;\r\n if (mentionChar === '@') {\r\n values = this.mentionValues;\r\n } else if (mentionChar === '#') {\r\n values = this.hashTagValues;\r\n } else {\r\n values = [];\r\n }\r\n\r\n if (searchTerm.length === 0) {\r\n renderList(values, searchTerm);\r\n } else {\r\n const matches = [];\r\n // tslint:disable-next-line:prefer-for-of\r\n for (let i = 0; i < values.length; i++) {\r\n // tslint:disable-next-line:no-bitwise\r\n if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {\r\n matches.push(values[i]);\r\n }\r\n }\r\n renderList(matches, searchTerm);\r\n }\r\n }\r\n },\r\n },\r\n keyboard: {\r\n bindings: {\r\n enter: {\r\n key: 13,\r\n handler: (range, context) => {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n textLength: number = 0;\r\n @Output() sdChange = new EventEmitter<string>();\r\n\r\n constructor(\r\n private ref: ChangeDetectorRef,\r\n private sdApiService: SdApiService\r\n ) {\r\n }\r\n\r\n ngOnInit() {\r\n this.#form?.addControl(this.#name, this.formControl);\r\n if (this.toolbar) {\r\n this.quillConfig.toolbar.container = this.toolbar;\r\n console.log('toolbar', this.quillConfig);\r\n }\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.#subscription.add(this.formControl.valueChanges.subscribe((val) => {\r\n this.modelChange.emit(val);\r\n this.sdChange.emit(val);\r\n }));\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 #updateValidator = () => {\r\n this.formControl.clearValidators();\r\n this.formControl.clearAsyncValidators();\r\n const validators: ValidatorFn[] = [];\r\n if (this.required) {\r\n validators.push(Validators.required);\r\n }\r\n if (this.minlength > 0) {\r\n validators.push(Validators.minLength(this.minlength));\r\n }\r\n if (this.maxlength > 0) {\r\n validators.push(Validators.maxLength(this.maxlength));\r\n }\r\n this.formControl.setValidators(validators);\r\n this.formControl.updateValueAndValidity();\r\n }\r\n\r\n editorInit = (quill) => {\r\n this.quillEvent = quill;\r\n // const txtArea = document.createElement('textarea');\r\n // txtArea.style.cssText =\r\n // 'width: 100%;margin: 0px;background: rgb(29, 29, 29);' +\r\n // 'box-sizing: border-box;color: rgb(204, 204, 204);' +\r\n // 'font-size: 15px;outline: none;padding: 20px;' +\r\n // 'line-height: 24px;font-family: Consolas, Menlo, Monaco, "Courier New", monospace;' +\r\n // 'position: absolute;top: 0;bottom: 0;border: none;display:none';\r\n\r\n // const htmlEditor = quill.addContainer('ql-custom');\r\n // htmlEditor.appendChild(txtArea);\r\n\r\n // const myEditor = quill.container;\r\n // quill.on('text-change', (delta, oldDelta, source) => {\r\n // const html = myEditor.children[0].innerHTML;\r\n // txtArea.value = html;\r\n // // if (quill.getLength() > this.maxlength) {\r\n // // quill.deleteText(this.maxlength, quill.getLength());\r\n // // }\r\n // // this.formControl.setValue(html);\r\n // });\r\n\r\n const self = this;\r\n quill.getModule('toolbar').addHandler('image', function () {\r\n let fileInput = this.container.querySelector('input.ql-image[type=file]');\r\n\r\n if (fileInput == null) {\r\n fileInput = document.createElement('input');\r\n fileInput.setAttribute('type', Constants.FILE);\r\n fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');\r\n fileInput.classList.add('ql-image');\r\n fileInput.addEventListener('change', () => {\r\n const files = fileInput.files;\r\n const range = this.quill.getSelection(true);\r\n if (!files \|\| !files.length) {\r\n return;\r\n }\r\n\r\n const formData = new FormData();\r\n formData.append(Constants.FILE, files[0]);\r\n\r\n this.quill.enable(false);\r\n /this.apiService.post(this.domain + this.urlUploadImage, formData).subscribe((resp: any) => {\r\n this.quill.enable(true);\r\n this.quill.editor.insertEmbed(range.index, 'image', resp.data.imageUrl \|\| resp.data.publish_url \|\| resp.url);\r\n const content = this.quill.getContents();\r\n this.quill.setContents(content);\r\n this.quill.setSelection(range.index + 1, 'silent');\r\n fileInput.value = '';\r\n });/\r\n self.#uploadImage(formData, quill, range, fileInput);\r\n });\r\n this.container.appendChild(fileInput);\r\n }\r\n fileInput.click();\r\n });\r\n }\r\n\r\n onModelChange = (val: string) => {\r\n this.formControl.setValue(val);\r\n this.modelHTML = val;\r\n }\r\n\r\n onClickShowHtmlEditor = () => {\r\n this.showHtmlEditor = !this.showHtmlEditor;\r\n }\r\n\r\n #uploadImage = (formData, quill, range, fileInput) => {\r\n if (!this.urlUploadImage) {\r\n this.urlUploadImage = '/partner/v2/merchandise/file/uploaduserfile';\r\n }\r\n // this.domain = 'https://api-commerce-qc.vinid.dev';\r\n this.sdApiService.post(this.urlUploadImage, formData).then((resp: any) => {\r\n quill.enable(true);\r\n // quill.editor.insertEmbed(range.index, 'image', resp?.data?.imageUrl \|\| resp?.data?.publish_url \|\| resp?.url \|\| '');\r\n quill.getModule('clipboard').dangerouslyPasteHTML(range.index, '<a target=\"_blank\" href=\"' + (resp?.data?.imageUrl \|\| resp?.data?.publish_url \|\| resp?.url \|\| '')\r\n + '\"><img src=\"' + (resp?.data?.imageUrl \|\| resp?.data?.publish_url \|\| resp?.url \|\| '') + '\" alt=\"c-image-editor-quill\"></a>', 'user');\r\n // quill.insertText();\r\n const content = quill.getContents();\r\n quill.setContents(content);\r\n quill.setSelection(range.index + 1, 'user');\r\n fileInput.value = '';\r\n });\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { QuillModule } from 'ngx-quill';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { SdEditor } from './editor.component';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport {SdButtonModule} from '@sd-angular/core/button';\r\nimport {SdTextareaModule} from '@sd-angular/core/textarea';\r\nimport {SdApiModule, SdApiService} from '@sd-angular/core/api';\r\n\r\n@NgModule({\r\n declarations: [SdEditor],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n QuillModule.forRoot(),\r\n SdTranslateModule,\r\n SdButtonModule,\r\n SdTextareaModule,\r\n SdApiModule\r\n ],\r\n exports: [SdEditor],\r\n providers: [],\r\n})\r\nexport class SdEditorModule { }\r\n","/\r\n * Public API Surface of superdev-angular-core\r\n /\r\n\r\nexport from './lib/editor.module';\r\nexport * from './lib/constant';\r\nexport * from './lib/editor.component';\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-editor.js","sources":["../../../../projects/sd-core/editor/src/lib/constant.ts","../../../../projects/sd-core/editor/src/lib/editor.component.ts","../../../../projects/sd-core/editor/src/lib/editor.module.ts","../../../../projects/sd-core/editor/src/public-api.ts","../../../../projects/sd-core/editor/sd-angular-core-editor.ts"],"sourcesContent":["export const Constants = {\r\n ARE_YOU_WANT_TO_DELETE: 'Are you sure you want to delete?',\r\n ACTIVE: 'active',\r\n IN_ACTIVE: 'inactive',\r\n APPROVE: 'approve',\r\n UN_APPROVE: 'unapprove',\r\n ACCEPT_SIZE_IMAGE: 'Logo only accept image with size <= 2MB',\r\n ACCEPT_TYPE_IMAGE:\r\n 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon',\r\n PAGE_TYPE_NEW: 'new',\r\n PAGE_TYPE_EDIT: 'edit',\r\n SAVE: 'saveOb',\r\n SAVE_AND_CONTINUE: 'saveAndContOb',\r\n IMAGE_SIZE: 2048000,\r\n SUCCESS: 'Success',\r\n IMPORT_SUCCESSFULLY: 'Import successfully!',\r\n ERROR: 'Error',\r\n FAILED: 'fail',\r\n FILE: 'file',\r\n NONE: 'none',\r\n NOT_EXIST_ID_OR_LINK: 'This ID/Link is not existing',\r\n FEATURE_IS_PENDING: 'This feature is pending',\r\n NOT_SUPPORT_FILE_IMAGE: 'File upload is not supported.',\r\n NOT_SUPPORT_FILE_IMPORT: 'File import is not supported.',\r\n NETWORK_ERROR: 'Network Error',\r\n SORT_BY: [\r\n {\r\n value: 0,\r\n name: 'Created Date'\r\n },\r\n {\r\n value: 1,\r\n name: 'Title'\r\n }\r\n ],\r\n DESC: [\r\n {\r\n value: true,\r\n name: 'Descending'\r\n },\r\n {\r\n value: false,\r\n name: 'Ascending'\r\n }\r\n ],\r\n FORM_ERRORS: {\r\n Id: '',\r\n textSearch: '',\r\n ImportLogId: '',\r\n SortBy: '',\r\n Reverse: '',\r\n },\r\n VALIDATION_MESSAGES: {}\r\n};\r\n\r\nexport const PROMOTION_PERMISSIONS = ['ListPromotion', 'AddNewPromotion', 'EditPromotion',\r\n 'ActiveOrInactivePromotion', 'RemovePromotion', 'ImportPromotion', 'ExportPromotion'];\r\n\r\nexport const ValidateMessageConstants = {\r\n TITLE_REQUIRED: 'Title is required',\r\n TITLE_MAXLENGTH: 'Title is not more than 55 characters',\r\n TITLE_PATTERN: 'Title is required',\r\n\r\n CREATED_AT_REQUIRED: 'Created At is required',\r\n\r\n SHOW_ON_HOME_REQUIRED: 'Show On Home is required',\r\n\r\n DISPLAY_NUMBER_REQUIRED: 'Display Number is required',\r\n\r\n CONTENT_TYPE_REQUIRED: 'Content Type is required',\r\n\r\n DISCOUNT_PERCENT_REQUIRED: 'Discount percent is required',\r\n DISCOUNT_PERCENT_MAX: 'Max discount percent is 100, cannot input greater',\r\n DISCOUNT_PERCENT_MIN: 'Min discount percent is 0, cannot input lower'\r\n};\r\n\r\nexport const PROMOTION_FORM = {\r\n FORM_ERRORS: {\r\n title: '',\r\n createdAt: '',\r\n displayNumber: '',\r\n showOnHome: '',\r\n discountPercent: '',\r\n isActive: '',\r\n ctaLabelName: '',\r\n ctaDeepLink: '',\r\n tags: ''\r\n },\r\n VALIDATION_MESSAGES: {\r\n title: {\r\n required: ValidateMessageConstants.TITLE_REQUIRED,\r\n maxlength: ValidateMessageConstants.TITLE_MAXLENGTH,\r\n pattern: ValidateMessageConstants.TITLE_PATTERN\r\n },\r\n createdAt: {\r\n required: ValidateMessageConstants.CREATED_AT_REQUIRED\r\n },\r\n showOnHome: {\r\n required: ValidateMessageConstants.SHOW_ON_HOME_REQUIRED\r\n },\r\n displayNumber: {\r\n required: ValidateMessageConstants.DISPLAY_NUMBER_REQUIRED\r\n },\r\n discountPercent: {\r\n required: ValidateMessageConstants.DISCOUNT_PERCENT_REQUIRED,\r\n max: ValidateMessageConstants.DISCOUNT_PERCENT_MAX,\r\n min: ValidateMessageConstants.DISCOUNT_PERCENT_MIN\r\n },\r\n tags: {\r\n required: ValidateMessageConstants.CONTENT_TYPE_REQUIRED\r\n }\r\n }\r\n};\r\n","import {\r\n Component,\r\n ViewChild,\r\n Input,\r\n OnInit,\r\n Output,\r\n EventEmitter,\r\n ChangeDetectorRef,\r\n AfterViewInit, OnDestroy, ChangeDetectionStrategy, NgZone\r\n} from '@angular/core';\r\nimport {QuillEditorComponent} from 'ngx-quill';\r\nimport * as uuid from 'uuid';\r\nimport {FormControl, FormGroup, NgForm, ValidatorFn, Validators} from '@angular/forms';\r\nimport {Constants} from './constant';\r\nimport {Subscription} from 'rxjs';\r\nimport {SdApiService} from '@sd-angular/core/api';\r\nimport 'quill-mention';\r\n\r\n@Component({\r\n selector: 'sd-editor',\r\n templateUrl: './editor.component.html',\r\n styleUrls: ['./editor.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdEditor implements OnInit, AfterViewInit, OnDestroy {\r\n #name = `N${uuid.v4()}`;\r\n id: string = `I${uuid.v4()}`;\r\n #subscription = new Subscription();\r\n @ViewChild('editor') editor: QuillEditorComponent;\r\n @Input() label: string;\r\n #model: string;\r\n @Input() set model(val: string) {\r\n this.#model = val;\r\n this.modelHTML = val;\r\n this.formControl.setValue(this.#model, {\r\n emitEvent: false\r\n });\r\n this.ref.detectChanges();\r\n }\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\r\n required = false;\r\n\r\n @Input() set pRequired(val: boolean \| '') {\r\n this.required = (val === '') \|\| val;\r\n this.#updateValidator();\r\n }\r\n\r\n minlength: number;\r\n\r\n @Input('minlength') set _minlength(val: number) {\r\n this.minlength = +val;\r\n this.#updateValidator();\r\n }\r\n\r\n maxlength: number;\r\n\r\n @Input('maxlength') set _maxlength(val: number) {\r\n this.maxlength = +val;\r\n this.#updateValidator();\r\n }\r\n\r\n @Output() modelChange = new EventEmitter<string>();\r\n\r\n @Input() placeholder: string = '';\r\n\r\n @Input() styles: any = {height: '250px'};\r\n\r\n formControl = new FormControl();\r\n\r\n @Input() domain = '';\r\n @Input() urlUploadImage: string;\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\r\n @Input() toolbar: any;\r\n @Input() enableHTMLButton = false;\r\n showHtmlEditor = false;\r\n modelHTML: string;\r\n\r\n quillEvent: any;\r\n @Input() mentionValues: { id: string, value: string, link?: string }[];\r\n @Input() hashTagValues: { id: string, value: string, link?: string }[];\r\n quillConfig = {\r\n // toolbar: '.toolbar',\r\n toolbar: {\r\n container: [\r\n ['bold', 'italic', 'underline', 'strike'], // toggled buttons\r\n ['blockquote', 'code-block'],\r\n\r\n [{'header': 1}, {'header': 2}], // custom button values\r\n [{'list': 'ordered'}, {'list': 'bullet'}],\r\n [{'script': 'sub'}, {'script': 'super'}], // superscript/subscript\r\n [{'indent': '-1'}, {'indent': '+1'}], // outdent/indent\r\n [{'direction': 'rtl'}], // text direction\r\n\r\n [{'size': ['small', false, 'large', 'huge']}], // custom dropdown\r\n [{'header': [1, 2, 3, 4, 5, 6, false]}],\r\n\r\n [{'color': []}, {'background': []}], // dropdown with defaults from theme\r\n [{'font': []}],\r\n [{'align': []}],\r\n\r\n ['clean'], // remove formatting button\r\n\r\n ['link', 'image', 'video'] // link and image, video\r\n ]\r\n },\r\n mention: {\r\n allowedChars: /^[A-Za-z0-9\\sÅÄÖåäö._-]$/,\r\n mentionDenotationChars: ['@', '#'],\r\n source: (searchTerm, renderList, mentionChar) => {\r\n if ((this.mentionValues && mentionChar === '@') \|\| (this.hashTagValues && mentionChar === '#')) {\r\n let values;\r\n if (mentionChar === '@') {\r\n values = this.mentionValues;\r\n } else if (mentionChar === '#') {\r\n values = this.hashTagValues;\r\n } else {\r\n values = [];\r\n }\r\n\r\n if (searchTerm.length === 0) {\r\n renderList(values, searchTerm);\r\n } else {\r\n const matches = [];\r\n // tslint:disable-next-line:prefer-for-of\r\n for (let i = 0; i < values.length; i++) {\r\n // tslint:disable-next-line:no-bitwise\r\n if (~values[i].value.toLowerCase().indexOf(searchTerm.toLowerCase())) {\r\n matches.push(values[i]);\r\n }\r\n }\r\n renderList(matches, searchTerm);\r\n }\r\n }\r\n },\r\n },\r\n keyboard: {\r\n bindings: {\r\n enter: {\r\n key: 13,\r\n handler: (range, context) => {\r\n return true;\r\n }\r\n }\r\n }\r\n }\r\n };\r\n\r\n textLength: number = 0;\r\n @Output() sdChange = new EventEmitter<string>();\r\n\r\n constructor(\r\n private ngZone: NgZone,\r\n private ref: ChangeDetectorRef,\r\n private sdApiService: SdApiService\r\n ) {\r\n }\r\n\r\n ngOnInit() {\r\n this.#form?.addControl(this.#name, this.formControl);\r\n if (this.toolbar) {\r\n this.quillConfig.toolbar.container = this.toolbar;\r\n console.log('toolbar', this.quillConfig);\r\n }\r\n this.ref.markForCheck();\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.#subscription.add(this.formControl.valueChanges.subscribe((val) => {\r\n this.modelChange.emit(val);\r\n this.sdChange.emit(val);\r\n }));\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 #updateValidator = () => {\r\n this.formControl.clearValidators();\r\n this.formControl.clearAsyncValidators();\r\n const validators: ValidatorFn[] = [];\r\n if (this.required) {\r\n validators.push(Validators.required);\r\n }\r\n if (this.minlength > 0) {\r\n validators.push(Validators.minLength(this.minlength));\r\n }\r\n if (this.maxlength > 0) {\r\n validators.push(Validators.maxLength(this.maxlength));\r\n }\r\n this.formControl.setValidators(validators);\r\n this.formControl.updateValueAndValidity();\r\n this.ref.markForCheck();\r\n }\r\n\r\n editorInit = (quill) => {\r\n this.quillEvent = quill;\r\n // const txtArea = document.createElement('textarea');\r\n // txtArea.style.cssText =\r\n // 'width: 100%;margin: 0px;background: rgb(29, 29, 29);' +\r\n // 'box-sizing: border-box;color: rgb(204, 204, 204);' +\r\n // 'font-size: 15px;outline: none;padding: 20px;' +\r\n // 'line-height: 24px;font-family: Consolas, Menlo, Monaco, "Courier New", monospace;' +\r\n // 'position: absolute;top: 0;bottom: 0;border: none;display:none';\r\n\r\n // const htmlEditor = quill.addContainer('ql-custom');\r\n // htmlEditor.appendChild(txtArea);\r\n\r\n // const myEditor = quill.container;\r\n // quill.on('text-change', (delta, oldDelta, source) => {\r\n // const html = myEditor.children[0].innerHTML;\r\n // txtArea.value = html;\r\n // // if (quill.getLength() > this.maxlength) {\r\n // // quill.deleteText(this.maxlength, quill.getLength());\r\n // // }\r\n // // this.formControl.setValue(html);\r\n // });\r\n\r\n const self = this;\r\n this.ngZone.runOutsideAngular(() => {\r\n quill.getModule('toolbar').addHandler('image', function () {\r\n let fileInput = this.container.querySelector('input.ql-image[type=file]');\r\n \r\n if (fileInput == null) {\r\n fileInput = document.createElement('input');\r\n fileInput.setAttribute('type', Constants.FILE);\r\n fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');\r\n fileInput.classList.add('ql-image');\r\n fileInput.addEventListener('change', () => {\r\n const files = fileInput.files;\r\n const range = this.quill.getSelection(true);\r\n if (!files \|\| !files.length) {\r\n return;\r\n }\r\n \r\n const formData = new FormData();\r\n formData.append(Constants.FILE, files[0]);\r\n \r\n this.quill.enable(false);\r\n /this.apiService.post(this.domain + this.urlUploadImage, formData).subscribe((resp: any) => {\r\n this.quill.enable(true);\r\n this.quill.editor.insertEmbed(range.index, 'image', resp.data.imageUrl \|\| resp.data.publish_url \|\| resp.url);\r\n const content = this.quill.getContents();\r\n this.quill.setContents(content);\r\n this.quill.setSelection(range.index + 1, 'silent');\r\n fileInput.value = '';\r\n });/\r\n self.#uploadImage(formData, quill, range, fileInput);\r\n });\r\n this.container.appendChild(fileInput);\r\n }\r\n fileInput.click();\r\n });\r\n })\r\n this.ref.markForCheck();\r\n }\r\n\r\n onModelChange = (val: string) => {\r\n this.formControl.setValue(val);\r\n this.modelHTML = val;\r\n this.ref.markForCheck();\r\n }\r\n\r\n onClickShowHtmlEditor = () => {\r\n this.showHtmlEditor = !this.showHtmlEditor;\r\n this.ref.markForCheck();\r\n }\r\n\r\n #uploadImage = (formData, quill, range, fileInput) => {\r\n if (!this.urlUploadImage) {\r\n this.urlUploadImage = '/partner/v2/merchandise/file/uploaduserfile';\r\n }\r\n // this.domain = 'https://api-commerce-qc.vinid.dev';\r\n this.sdApiService.post(this.urlUploadImage, formData).then((resp: any) => {\r\n this.ngZone.runOutsideAngular(() => {\r\n quill.enable(true);\r\n // quill.editor.insertEmbed(range.index, 'image', resp?.data?.imageUrl \|\| resp?.data?.publish_url \|\| resp?.url \|\| '');\r\n quill.getModule('clipboard').dangerouslyPasteHTML(range.index, '<a target=\"_blank\" href=\"' + (resp?.data?.imageUrl \|\| resp?.data?.publish_url \|\| resp?.url \|\| '')\r\n + '\"><img src=\"' + (resp?.data?.imageUrl \|\| resp?.data?.publish_url \|\| resp?.url \|\| '') + '\" alt=\"c-image-editor-quill\"></a>', 'user');\r\n // quill.insertText();\r\n const content = quill.getContents();\r\n quill.setContents(content);\r\n quill.setSelection(range.index + 1, 'user');\r\n fileInput.value = '';\r\n })\r\n });\r\n this.ref.markForCheck();\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { QuillModule } from 'ngx-quill';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { SdEditor } from './editor.component';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport {SdButtonModule} from '@sd-angular/core/button';\r\nimport {SdTextareaModule} from '@sd-angular/core/textarea';\r\nimport {SdApiModule, SdApiService} from '@sd-angular/core/api';\r\n\r\n@NgModule({\r\n declarations: [SdEditor],\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n QuillModule.forRoot(),\r\n SdTranslateModule,\r\n SdButtonModule,\r\n SdTextareaModule,\r\n SdApiModule\r\n ],\r\n exports: [SdEditor],\r\n providers: [],\r\n})\r\nexport class SdEditorModule { }\r\n","/\r\n * Public API Surface of superdev-angular-core\r\n /\r\n\r\nexport from './lib/editor.module';\r\nexport * from './lib/constant';\r\nexport * from './lib/editor.component';\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-grid-material.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { SdCommonModule } from '@sd-angular/core/common';
-import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ViewChild, Output, Injectable, ChangeDetectorRef, Inject, Optional, Pipe, QueryList, ContentChild, ContentChildren, ChangeDetectionStrategy, HostListener, NgModule } from '@angular/core';
+import { Directive, TemplateRef, Input, InjectionToken, EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Output, Injectable, Inject, Optional, Pipe, QueryList, ContentChild, ContentChildren, HostListener, NgModule } from '@angular/core';
 import { __awaiter, __classPrivateFieldGet, __rest, __classPrivateFieldSet } from 'tslib';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
@@ -133,7 +133,8 @@ const DEFAULT_GRID_MATERIAL_CONFIG = {
 const GRID_MATERIAL_CONFIG = new InjectionToken('sd-grid-material.configuration');
 class SdPopupFilter {
-    constructor() {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
         this.externalFilters = [];
         this.externalFilter = {};
         this.inlineExternal = {};
@@ -154,9 +155,11 @@ class SdPopupFilter {
             this.inlineFilterDef = JSON.parse(JSON.stringify(inlineFilterDef || {}));
             this.filterDef = JSON.parse(JSON.stringify(filterDef || {}));
             this.modal.open();
+            this.cdRef.markForCheck();
         };
         this.close = () => {
             this.modal.close();
+            this.cdRef.markForCheck();
         };
         this.onApply = () => {
             this.changeFilter.emit({
@@ -168,21 +171,26 @@ class SdPopupFilter {
                 filterDef: this.filterDef || {}
             });
             this.modal.close();
+            this.cdRef.markForCheck();
         };
     }
     onClear() {
         this.clearFilter.emit();
         this.modal.close();
+        this.cdRef.markForCheck();
     }
 }
 SdPopupFilter.decorators = [
     { type: Component, args: [{
                 selector: 'sd-popup-filter',
                 template: "<sd-modal width=\"500px\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body class=\"c-popup-filter\">\r\n    <ng-container *ngFor=\"let column of columns | sdFilterColumn\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineColumn[column.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n            [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-select *ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n              {value:'0',display:column.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n            [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" appearance=\"outline\">\r\n          </sd-autocomplete>\r\n          <sd-date-time *ngIf=\"column.type ==='date' || column.type==='datetime' ||\r\n              column.type==='time'\" [label]=\"column.title\" [(model)]=\" columnFilter[column.field]\" type=\"date\"\r\n            appearance=\"outline\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineExternal[item.field]\" color=\"primary\"></mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n            appearance=\"outline\">\r\n          </sd-input-number>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n          {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n              [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\" appearance=\"outline\" multiple>\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\" multiple>\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [items]=\"item.option.items\" [valueField]=\"item.option.valueField\"\r\n              [displayField]=\"item.option.displayField\" appearance=\"outline\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type === 'datetime'\"\r\n            [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" appearance=\"outline\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\" appearance=\"outline\">\r\n          </sd-date-range>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let filter of filterDefs\">\r\n      <div class=\"d-flex align-items-baseline\">\r\n        <ng-container>\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <mat-slide-toggle [(ngModel)]=\"inlineFilterDef[filter.sdMaterialFilterDef]\" color=\"primary\">\r\n            </mat-slide-toggle>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <ng-container *ngTemplateOutlet=\"filter.templateRef;context:{filterDef:filterDef}\">\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onApply()\" icon=\"done\" [title]=\"'Apply' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n      [title]=\"'Clear filter' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onApply()\" icon=\"done\" [title]=\"'Apply' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]
             },] }
 ];
-SdPopupFilter.ctorParameters = () => [];
+SdPopupFilter.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 SdPopupFilter.propDecorators = {
     modal: [{ type: ViewChild, args: ['modal',] }],
     externalFilters: [{ type: Input }],
@@ -255,7 +263,8 @@ SdGridFilterService.ctorParameters = () => [
 var _filterOptionChanges, _subscription, _loadDefault, _clearFilter;
 class SdGridFilter {
-    constructor(deviceService, gridFilterService) {
+    constructor(ref, deviceService, gridFilterService) {
+        this.ref = ref;
         this.deviceService = deviceService;
         this.gridFilterService = gridFilterService;
         this.isVisible = true;
@@ -354,6 +363,7 @@ class SdGridFilter {
                 selectedQuickFilter: null
             });
             this.filterChange.emit();
+            this.ref.markForCheck();
         };
         this.onClearFilter = () => {
             var _a;
@@ -387,8 +397,10 @@ class SdGridFilter {
                     };
                 }
             }
+            this.ref.markForCheck();
         };
         this.isMobileOrTablet = !this.deviceService.isDesktop();
+        this.ref.markForCheck();
     }
     set _filter(filter) {
         var _a;
@@ -411,6 +423,7 @@ class SdGridFilter {
                 __classPrivateFieldGet(this, _loadDefault).call(this);
                 this.filterChange.emit();
             });
+            this.ref.markForCheck();
         }));
     }
     ngOnDestroy() {
@@ -422,10 +435,12 @@ SdGridFilter.decorators = [
     { type: Component, args: [{
                 selector: 'sd-grid-filter',
                 template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-input>\r\n      <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-input-number>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" appearance=\"outline\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\" appearance=\"outline\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-input>\r\n      <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-input-number>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" appearance=\"outline\" multiple>\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" appearance=\"outline\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\" appearance=\"outline\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
             },] }
 ];
 SdGridFilter.ctorParameters = () => [
+    { type: ChangeDetectorRef },
     { type: DeviceDetectorService },
     { type: SdGridFilterService }
 ];
@@ -526,6 +541,7 @@ class SdPopupExport {
                 key: this.key,
                 group
             });
+            this.ref.markForCheck();
         });
         _initTemplate.set(this, (fileName) => __awaiter(this, void 0, void 0, function* () {
             var _c, _d, _e, _f;
@@ -710,6 +726,7 @@ SdPopupExport.decorators = [
     { type: Component, args: [{
                 selector: 'sd-popup-export',
                 template: "<sd-modal width=\"907px\" [title]=\"'Exported template' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <ng-container\r\n        *ngIf=\"groups?.length > 1 || (groups?.length === 1 && !gridOption?.export?.hideMyTemplates); else noSelection\">\r\n        <div class=\"col-9\">\r\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </div>\r\n        <div class=\"col-3\">\r\n          <mat-selection-list [multiple]=\"false\" #listGroups>\r\n            <mat-list-option *ngIf=\"!gridOption?.export?.hideMyTemplates\" [value]=\"\" (click)=\"loadFiles()\">\r\n              <div mat-line>{{'My templates' | sdTranslate}}</div>\r\n            </mat-list-option>\r\n            <mat-list-option [value]=\"group.code\" *ngFor=\"let group of groups\" (click)=\"loadFiles(group.code)\">\r\n              <div mat-line>{{group.title}}</div>\r\n            </mat-list-option>\r\n          </mat-selection-list>\r\n        </div>\r\n      </ng-container>\r\n      <ng-template #noSelection>\r\n        <div class=\"col-12\">\r\n          <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n        </div>\r\n      </ng-template>\r\n      <ng-template #content>\r\n        <div class=\"row\">\r\n          <div *ngIf=\"!files?.length\" class=\"col-12\">\r\n            <div class=\"c-empty\">\r\n              <img class=\"c-empty-image\">\r\n              <div class=\"T14R\">{{'There are no exported templates' | sdTranslate}}</div>\r\n            </div>\r\n          </div>\r\n          <ng-container *ngIf=\"files?.length\">\r\n            <div class=\"col-12\">\r\n              <div class=\"c-table\" style=\"max-height:50vh\">\r\n                <table mat-table [dataSource]=\"files\">\r\n                  <ng-container matColumnDef=\"stt\">\r\n                    <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n                    </th>\r\n                    <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n                      {{idx + 1}}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-container matColumnDef=\"fileName\">\r\n                    <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{'File name' | sdTranslate}}\r\n                    </th>\r\n                    <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n                      {{item.fileName}}\r\n                    </td>\r\n                  </ng-container>\r\n                  <ng-container matColumnDef=\"action\">\r\n                    <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width:80px\">\r\n                    </th>\r\n                    <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n                      <div class=\"d-flex\">\r\n                        <button *ngIf=\"!selectedGroup || selectedGroup?.permission === 'delete'\" mat-icon-button\r\n                          aria-label=\"delete\" (click)=\"removeFile(item)\">\r\n                          <mat-icon>delete</mat-icon>\r\n                        </button>\r\n                        <button mat-icon-button aria-label=\"download\" (click)=\"onExport(item)\">\r\n                          <mat-icon>download</mat-icon>\r\n                        </button>\r\n                      </div>\r\n                    </td>\r\n                  </ng-container>\r\n                  <tr mat-header-row *matHeaderRowDef=\"['stt', 'fileName', 'action']; sticky: true\">\r\n                  </tr>\r\n                  <tr mat-row *matRowDef=\"let row; columns: ['stt', 'fileName', 'action'];\"></tr>\r\n                </table>\r\n              </div>\r\n            </div>\r\n            <div *ngIf=\"files.length < 5 && (!selectedGroup || selectedGroup?.permission === 'add' || selectedGroup?.permission === 'delete')\"\r\n              class=\"col-12 mt-10\">\r\n              <sd-button class=\"mr-5\" [title]=\"'New template' | sdTranslate\" (action)=\"enableCreating = true\"\r\n                color=\"info\" [disabled]=\"enableCreating\">\r\n              </sd-button>\r\n              <sd-button *ngIf=\"gridOption?.export?.enableUpload\" [title]=\"'Upload template' | sdTranslate\"\r\n                (action)=\"uploadTemplate()\" type=\"outline\">\r\n              </sd-button>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"(enableCreating || !files?.length) && (!selectedGroup || selectedGroup?.permission === 'add' || selectedGroup?.permission === 'delete')\">\r\n            <div class=\"col-12 mt-20\">\r\n              <div class=\"T14R\">{{'Select columns for creating template' | sdTranslate}}:</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <mat-chip-list selectable=\"true\" multiple=\"true\">\r\n                <ng-container *ngFor=\"let column of columns\">\r\n                  <mat-chip [selected]=\"selected[column.field]\"\r\n                    (click)=\"selected[column.field] = !selected[column.field]\">\r\n                    {{column.title}}\r\n                  </mat-chip>\r\n                </ng-container>\r\n              </mat-chip-list>\r\n            </div>\r\n            <div class=\"col-12 row\">\r\n              <div class=\"col-10\">\r\n                <sd-input [form]=\"form\" [label]=\"'Template name' | sdTranslate\" [(model)]=\"templateName\"\r\n                  [validator]=\"validatorTemplateName\"></sd-input>\r\n              </div>\r\n              <div class=\"col-2 mt-7\">\r\n                <sd-button width=\"100%\" [title]=\"'Save' | sdTranslate\" color=\"info\" (action)=\"createTemplate()\">\r\n                </sd-button>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n  </sd-modal-body>\r\n</sd-modal>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [".c-radio-group{display:flex;flex-direction:column;margin:15px 0}.c-radio-button{margin:5px}.c-empty{align-items:center;background:#f6f6f6;border-radius:4px;display:flex;flex-direction:column;height:116px;justify-content:center;position:static}.c-empty .c-empty-image{content:url(\"data:image/png;base64,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\")}.c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}"]
             },] }
 ];
@@ -2435,6 +2452,7 @@ SdDesktopCommand.decorators = [
     { type: Component, args: [{
                 selector: 'sd-desktop-command',
                 template: "<ng-container *ngIf=\"item | commandFilter:commands | async; $implicit as filteredCommands\">\r\n  <ng-container *ngFor=\"let command of filteredCommands\">\r\n    <ng-container *ngIf=\"command?.click; else elseChildren\">\r\n      <button (click)=\"command.click(item)\" [matTooltip]=\"command.title | commandTitle:item\" aria-hidden=\"true\"\r\n        [disabled]=\"item | commandDisable:command\" mat-icon-button>\r\n        <mat-icon class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}</mat-icon>\r\n      </button>\r\n    </ng-container>\r\n    <ng-template #elseChildren>\r\n      <button [matMenuTriggerFor]=\"menu\" aria-hidden=\"true\" mat-icon-button>\r\n        <mat-icon *ngIf=\"command?.icon\" class=\"c-icon\" [fontSet]=\"command.fontSet\">{{command | commandIcon:item}}\r\n        </mat-icon>\r\n        <mat-icon *ngIf=\"!command?.icon\" class=\"c-icon\">more_vert</mat-icon>\r\n      </button>\r\n      <mat-menu #menu=\"matMenu\">\r\n        <span>\r\n          <button *ngFor=\"let childCommand of command.children\" mat-menu-item (click)=\"childCommand.click(item)\"\r\n            [disabled]=\"item | commandDisable:childCommand\">\r\n            <ng-container *ngIf=\"!childCommand.htmlTemplate\">\r\n              <mat-icon [fontSet]=\"command.fontSet\" class=\"c-icon\">{{childCommand | commandIcon:item}}\r\n              </mat-icon>\r\n              <span> {{childCommand | commandTitle:item}}</span>\r\n            </ng-container>\r\n            <ng-container *ngIf=\"childCommand.htmlTemplate\">\r\n              <div [innerHTML]=\"childCommand.htmlTemplate(item)\"></div>\r\n            </ng-container>\r\n          </button>\r\n        </span>\r\n      </mat-menu>\r\n    </ng-template>\r\n  </ng-container>\r\n</ng-container>\r\n",
+                changeDetection: ChangeDetectionStrategy.OnPush,
                 styles: [":host{align-items:center;display:flex}mat-icon.c-icon{color:rgba(0,0,0,.54)!important}"]
             },] }
 ];