@sd-angular/core 1.1.18 → 1.1.21

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

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-autocomplete.js","sources":["../../../../projects/sd-core/autocomplete/src/lib/autocomplete-display-def.directive.ts","../../../../projects/sd-core/autocomplete/src/lib/autocomplete.component.ts","../../../../projects/sd-core/autocomplete/src/lib/autocomplete.module.ts","../../../../projects/sd-core/autocomplete/src/public-api.ts","../../../../projects/sd-core/autocomplete/sd-angular-core-autocomplete.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core';\r\n\r\n@Directive({\r\n  selector: '[sdAutocompleteDisplayDef]'\r\n})\r\nexport class SdAutocompleteDisplayDefDirective {\r\n  constructor(public templateRef: TemplateRef<any>) { }\r\n}\r\n","import {\r\n  Component,\r\n  Input,\r\n  ViewChild,\r\n  Output,\r\n  EventEmitter,\r\n  OnInit,\r\n  OnDestroy,\r\n  AfterViewInit,\r\n  ChangeDetectorRef,\r\n  ContentChild,\r\n  ChangeDetectionStrategy,\r\n  ElementRef,\r\n  Inject,\r\n  Optional\r\n} from '@angular/core';\r\nimport { startWith, switchMap, debounceTime, map, finalize } from 'rxjs/operators';\r\n\r\nimport * as uuid from 'uuid';\r\nimport { FormControl, NgForm, Validators, FormGroupDirective, FormGroup, ValidatorFn, AsyncValidatorFn } from '@angular/forms';\r\nimport { BehaviorSubject, combineLatest, defer, from, Observable, of, Subscription } from 'rxjs';\r\nimport { ErrorStateMatcher } from '@angular/material/core';\r\nimport { SdAutocompleteDisplayDefDirective } from './autocomplete-display-def.directive';\r\nimport { MatAutocompleteTrigger } from '@angular/material/autocomplete';\r\nimport { FORM_CONFIG, IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\n\r\nclass SdAutocompleteErrotStateMatcher implements ErrorStateMatcher {\r\n  constructor(private formControl: FormControl) { }\r\n  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {\r\n    const isSubmitted = form && form.submitted;\r\n    return !!(this.formControl?.invalid && (this.formControl?.dirty || this.formControl?.touched || isSubmitted));\r\n  }\r\n}\r\n\r\n@Component({\r\n  selector: 'sd-autocomplete',\r\n  templateUrl: './autocomplete.component.html',\r\n  styleUrls: ['./autocomplete.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdAutocomplete implements OnInit, OnDestroy, AfterViewInit {\r\n  @Input() set key(value: any) {\r\n    this.#cache = {};\r\n    this.#item = {};\r\n  }\r\n  @ViewChild(MatAutocompleteTrigger, { read: MatAutocompleteTrigger }) autocompleteTrigger: MatAutocompleteTrigger;\r\n  id = `I${uuid.v4()}`;\r\n  #model: string | number;\r\n\r\n  #delay = 0; // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện gọi hàm\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  loading = false;\r\n  inputControl = new SdFormControl();\r\n  formControl = new SdFormControl();\r\n  matcher = new SdAutocompleteErrotStateMatcher(this.formControl);\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() label: string;\r\n  @Input() valueField: string;\r\n  @Input() displayField: string;\r\n  @Input() placeholder: string;\r\n\r\n  #itemsChanges = new BehaviorSubject<any[] | SearchFunc>([]);\r\n  @Input() set items(items: undefined | any[] | SearchFunc) {\r\n    if (!items) {\r\n      this.#itemsChanges.next([]);\r\n    } else if (Array.isArray(items)) {\r\n      this.#itemsChanges.next(items.filter(e => e !== null && e !== undefined));\r\n    } else {\r\n      this.#itemsChanges.next(items);\r\n      this.#delay = 500;\r\n    }\r\n    this.formControl.updateValueAndValidity();\r\n  }\r\n\r\n  @Input() limit = 100;\r\n\r\n  filteredItems: Observable<any[]>;\r\n  controlPlaceHolder: Observable<string | number>;\r\n  controlPlaceHolder2: Observable<string | number>;\r\n  @Input() set model(value: undefined | number | string) {\r\n    this.#model = value;\r\n    this.formControl.setValue(value);\r\n  }\r\n\r\n  @ContentChild(SdAutocompleteDisplayDefDirective) autocompleteDisplayDef: SdAutocompleteDisplayDefDirective;\r\n  @Input() actionIcon: string;\r\n  @Output() action = new EventEmitter();\r\n  @Output() modelChange = new EventEmitter();\r\n  @Output() sdChange = new EventEmitter();\r\n\r\n  // Optional\r\n  @Input() set disabled(val: boolean | '') {\r\n    val = (val === '') || val;\r\n    if (val) {\r\n      this.inputControl.disable();\r\n      this.formControl.disable();\r\n    } else {\r\n      this.inputControl.enable();\r\n      this.formControl.enable();\r\n    }\r\n  }\r\n  isRequired = false;\r\n  @Input() set required(val: boolean | '') {\r\n    this.isRequired = (val === '') || val;\r\n    this.#updateValidator();\r\n  }\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  #subscription = new Subscription();\r\n  @ViewChild('input') input: ElementRef;\r\n  @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n  isFocused = false;\r\n  selected: Observable<any>;\r\n\r\n  #cache: {\r\n    [key: string]: any[]\r\n  } = {};\r\n  #item: {\r\n    [key: string]: any\r\n  } = {};\r\n  constructor(\r\n    private ref: ChangeDetectorRef,\r\n    @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\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.ref.markForCheck();\r\n    }));\r\n    this.#subscription.add(this.inputControl.sdChanges.subscribe(() => {\r\n      this.ref.markForCheck();\r\n    }));\r\n    this.filteredItems = combineLatest([\r\n      this.#itemsChanges.asObservable(),\r\n      this.inputControl.valueChanges.pipe(debounceTime(this.#delay))]).pipe(\r\n        switchMap(([items, searchText]) => {\r\n          searchText = searchText || '';\r\n          if (typeof (items) === 'function') {\r\n            if (this.#cache[searchText] !== undefined) {\r\n              return this.#cache[searchText].asObservable();\r\n            }\r\n            let obs: Observable<any[]>;\r\n            const func = items(searchText, false);\r\n            if (func instanceof Promise) {\r\n              obs = defer(() => from(func));\r\n            } else {\r\n              obs = func\r\n            }\r\n            this.loading = true;\r\n            return obs.pipe(map(data => {\r\n              this.#cache[searchText] = data || [];\r\n              Object.assign(this.#item, Array.toObject(this.#cache[searchText], this.valueField));\r\n              return this.#cache[searchText];\r\n            }), finalize(() => this.loading = false));\r\n          }\r\n          return items\r\n            .search(searchText, [this.valueField, this.displayField])\r\n            .paging(this.limit)\r\n            .asObservable();\r\n        })\r\n      );\r\n    this.selected = combineLatest([\r\n      this.#itemsChanges.asObservable(),\r\n      this.formControl.valueChanges.pipe(startWith(this.formControl.value))])\r\n      .pipe(\r\n        switchMap(([items, val]) => {\r\n          // Vì một số lý do chưa xác định mà khi sử dụng sdViewDef thì khi chuyển sang dạng view sẽ trigger val = null\r\n          // Nhưng formControl.value vẫn có giá trị đúng nên thực hiện gán val = this.formControl.value;\r\n          val = this.formControl.value;\r\n          if (!this.valueField) {\r\n            return of(val);\r\n          }\r\n          if (val || val === 0) {\r\n            if (typeof (items) === 'function') {\r\n              if (this.#item[val]) {\r\n                return of(this.#item[val]);\r\n              }\r\n              let obs: Observable<any[]>;\r\n              const func = items(val, true);\r\n              if (func instanceof Promise) {\r\n                obs = defer(() => from(func));\r\n              } else {\r\n                obs = func;\r\n              }\r\n              return obs.pipe(map(data => {\r\n                Object.assign(this.#item, Array.toObject(data, this.valueField));\r\n                return this.#item[val] || {\r\n                  [this.valueField]: val,\r\n                  [this.displayField]: val\r\n                };\r\n              }));\r\n            }\r\n            return of(items.find(e => e[this.valueField] === val));\r\n          }\r\n          return of('');\r\n        })\r\n      );\r\n    this.controlPlaceHolder = this.selected.pipe(map(item => item?.[this.displayField] ?? item ?? this.placeholder ?? this.label ?? ''));\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#form?.addControl(this.#name, this.formControl);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n    this.#form?.removeControl(this.#name);\r\n  }\r\n  onSelect = (item: any) => {\r\n    if (item) {\r\n      if (typeof (item) === 'string' || typeof (item) === 'number') {\r\n        if (this.formControl.value !== item) {\r\n          this.formControl.setValue(item);\r\n          this.modelChange.emit(item);\r\n          this.sdChange.emit(item);\r\n        }\r\n      } else if (this.valueField && this.displayField) {\r\n        const val = item?.[this.valueField] || null;\r\n        if (this.formControl.value !== val) {\r\n          this.formControl.setValue(val);\r\n          this.modelChange.emit(val);\r\n          this.sdChange.emit(item);\r\n        }\r\n      }\r\n      this.inputControl.setValue('', {\r\n        emitEvent: false\r\n      });\r\n    }\r\n  }\r\n\r\n  onFocus = () => {\r\n    this.isFocused = true;\r\n    this.inputControl.setValue('');\r\n    // this.inputControl.updateValueAndValidity();\r\n  }\r\n\r\n  onBlur = () => {\r\n    this.isFocused = false;\r\n    this.inputControl.setValue('', {\r\n      emitEvent: false\r\n    });\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.autocompleteTrigger?.openPanel();\r\n      this.input?.nativeElement?.focus();\r\n    }, 100);\r\n  }\r\n\r\n  clear = ($event?: any) => {\r\n    $event?.stopPropagation();\r\n    this.inputControl?.setValue('');\r\n    if (this.#model) {\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  onAction = ($event: Event) => {\r\n    $event?.stopPropagation();\r\n    this.autocompleteTrigger?.closePanel();\r\n    this.action.emit();\r\n  }\r\n\r\n  reValidate = () => {\r\n    this.inputControl.updateValueAndValidity({ emitEvent: true });\r\n  }\r\n\r\n  #updateValidator = () => {\r\n    this.formControl.clearValidators();\r\n    this.formControl.clearAsyncValidators();\r\n    const validators: ValidatorFn[] = [];\r\n    // const asyncValidators: AsyncValidatorFn[] = [];\r\n    if (this.isRequired) {\r\n      validators.push(Validators.required);\r\n    }\r\n    // if (this.#validator) {\r\n    //   asyncValidators.push(this.#customValidator(this.#validator));\r\n    // }\r\n    this.formControl.setValidators(validators);\r\n    // this.formControl.setAsyncValidators(asyncValidators);\r\n    this.formControl.updateValueAndValidity();\r\n  }\r\n}\r\n\r\ntype SearchFunc = (searchText?: string | number, isFormValue?: boolean) => Promise<any[]> | Observable<any[]>;","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 { MatInputModule } from '@angular/material/input';\r\nimport { SdAutocomplete } from './autocomplete.component';\r\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\nimport { SdAutocompleteDisplayDefDirective } from './autocomplete-display-def.directive';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n    MatInputModule,\r\n    MatTooltipModule,\r\n    MatFormFieldModule,\r\n    MatAutocompleteModule,\r\n    MatIconModule,\r\n    MatProgressSpinnerModule,\r\n    SdTranslateModule,\r\n    SdCommonModule\r\n  ],\r\n  declarations: [\r\n    SdAutocomplete,\r\n    SdAutocompleteDisplayDefDirective\r\n  ],\r\n  exports: [\r\n    SdAutocomplete,\r\n    SdAutocompleteDisplayDefDirective,\r\n    SdCommonModule\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdAutocompleteModule {\r\n\r\n}\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/autocomplete.module';\r\nexport * from './lib/autocomplete.component';\r\nexport * from './lib/autocomplete-display-def.directive';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["uuid.v4"],"mappings":"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"}
+{"version":3,"file":"sd-angular-core-autocomplete.js","sources":["../../../../projects/sd-core/autocomplete/src/lib/autocomplete-display-def.directive.ts","../../../../projects/sd-core/autocomplete/src/lib/autocomplete.component.ts","../../../../projects/sd-core/autocomplete/src/lib/autocomplete.module.ts","../../../../projects/sd-core/autocomplete/src/public-api.ts","../../../../projects/sd-core/autocomplete/sd-angular-core-autocomplete.ts"],"sourcesContent":["import { Directive, TemplateRef } from '@angular/core';\r\n\r\n@Directive({\r\n  selector: '[sdAutocompleteDisplayDef]'\r\n})\r\nexport class SdAutocompleteDisplayDefDirective {\r\n  constructor(public templateRef: TemplateRef<any>) { }\r\n}\r\n","import {\r\n  Component,\r\n  Input,\r\n  ViewChild,\r\n  Output,\r\n  EventEmitter,\r\n  OnInit,\r\n  OnDestroy,\r\n  AfterViewInit,\r\n  ChangeDetectorRef,\r\n  ContentChild,\r\n  ChangeDetectionStrategy,\r\n  ElementRef,\r\n  Inject,\r\n  Optional\r\n} from '@angular/core';\r\nimport { startWith, switchMap, debounceTime, map, finalize } from 'rxjs/operators';\r\n\r\nimport * as uuid from 'uuid';\r\nimport { FormControl, NgForm, Validators, FormGroupDirective, FormGroup, ValidatorFn, AsyncValidatorFn } from '@angular/forms';\r\nimport { BehaviorSubject, combineLatest, defer, from, Observable, of, Subscription } from 'rxjs';\r\nimport { ErrorStateMatcher } from '@angular/material/core';\r\nimport { SdAutocompleteDisplayDefDirective } from './autocomplete-display-def.directive';\r\nimport { MatAutocompleteTrigger } from '@angular/material/autocomplete';\r\nimport { FORM_CONFIG, IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\n\r\nclass SdAutocompleteErrotStateMatcher implements ErrorStateMatcher {\r\n  constructor(private formControl: FormControl) { }\r\n  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {\r\n    const isSubmitted = form && form.submitted;\r\n    return !!(this.formControl?.invalid && (control?.dirty || control?.touched || this.formControl?.dirty || this.formControl?.touched || isSubmitted));\r\n  }\r\n}\r\n\r\n@Component({\r\n  selector: 'sd-autocomplete',\r\n  templateUrl: './autocomplete.component.html',\r\n  styleUrls: ['./autocomplete.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class SdAutocomplete implements OnInit, OnDestroy, AfterViewInit {\r\n  @Input() set key(value: any) {\r\n    this.#cache = {};\r\n    this.#item = {};\r\n  }\r\n  @ViewChild(MatAutocompleteTrigger, { read: MatAutocompleteTrigger }) autocompleteTrigger: MatAutocompleteTrigger;\r\n  id = `I${uuid.v4()}`;\r\n  #model: string | number;\r\n\r\n  #delay = 0; // Sau khoảng thời gian delay nếu không có thay đổi thì thì mới bắt đầu thực hiện gọi hàm\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  loading = false;\r\n  inputControl = new SdFormControl();\r\n  formControl = new SdFormControl();\r\n  matcher = new SdAutocompleteErrotStateMatcher(this.formControl);\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() label: string;\r\n  @Input() valueField: string;\r\n  @Input() displayField: string;\r\n  @Input() placeholder: string;\r\n\r\n  #itemsChanges = new BehaviorSubject<any[] | SearchFunc>([]);\r\n  @Input() set items(items: undefined | any[] | SearchFunc) {\r\n    if (!items) {\r\n      this.#itemsChanges.next([]);\r\n    } else if (Array.isArray(items)) {\r\n      this.#itemsChanges.next(items.filter(e => e !== null && e !== undefined));\r\n    } else {\r\n      this.#itemsChanges.next(items);\r\n      this.#delay = 500;\r\n    }\r\n    this.formControl.updateValueAndValidity();\r\n  }\r\n\r\n  @Input() limit = 100;\r\n\r\n  filteredItems: Observable<any[]>;\r\n  controlPlaceHolder: Observable<string | number>;\r\n  controlPlaceHolder2: Observable<string | number>;\r\n  @Input() set model(value: undefined | number | string) {\r\n    this.#model = value;\r\n    this.formControl.setValue(value);\r\n  }\r\n\r\n  @ContentChild(SdAutocompleteDisplayDefDirective) autocompleteDisplayDef: SdAutocompleteDisplayDefDirective;\r\n  @Input() actionIcon: string;\r\n  @Output() action = new EventEmitter();\r\n  @Output() modelChange = new EventEmitter();\r\n  @Output() sdChange = new EventEmitter();\r\n\r\n  // Optional\r\n  @Input() set disabled(val: boolean | '') {\r\n    val = (val === '') || val;\r\n    if (val) {\r\n      this.inputControl.disable();\r\n      this.formControl.disable();\r\n    } else {\r\n      this.inputControl.enable();\r\n      this.formControl.enable();\r\n    }\r\n  }\r\n  isRequired = false;\r\n  @Input() set required(val: boolean | '') {\r\n    this.isRequired = (val === '') || val;\r\n    this.#updateValidator();\r\n  }\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  #subscription = new Subscription();\r\n  @ViewChild('input') input: ElementRef;\r\n  @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n  isFocused = false;\r\n  selected: Observable<any>;\r\n\r\n  #cache: {\r\n    [key: string]: any[]\r\n  } = {};\r\n  #item: {\r\n    [key: string]: any\r\n  } = {};\r\n  constructor(\r\n    private ref: ChangeDetectorRef,\r\n    @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\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.ref.markForCheck();\r\n    }));\r\n    this.#subscription.add(this.inputControl.sdChanges.subscribe(() => {\r\n      \r\n      this.ref.markForCheck();\r\n    }));\r\n    this.filteredItems = combineLatest([\r\n      this.#itemsChanges.asObservable(),\r\n      this.inputControl.valueChanges.pipe(debounceTime(this.#delay))]).pipe(\r\n        switchMap(([items, searchText]) => {\r\n          searchText = searchText || '';\r\n          if (typeof (items) === 'function') {\r\n            if (this.#cache[searchText] !== undefined) {\r\n              return this.#cache[searchText].asObservable();\r\n            }\r\n            let obs: Observable<any[]>;\r\n            const func = items(searchText, false);\r\n            if (func instanceof Promise) {\r\n              obs = defer(() => from(func));\r\n            } else {\r\n              obs = func\r\n            }\r\n            this.loading = true;\r\n            return obs.pipe(map(data => {\r\n              this.#cache[searchText] = data || [];\r\n              Object.assign(this.#item, Array.toObject(this.#cache[searchText], this.valueField));\r\n              return this.#cache[searchText];\r\n            }), finalize(() => this.loading = false));\r\n          }\r\n          return items\r\n            .search(searchText, [this.valueField, this.displayField])\r\n            .paging(this.limit)\r\n            .asObservable();\r\n        })\r\n      );\r\n    this.selected = combineLatest([\r\n      this.#itemsChanges.asObservable(),\r\n      this.formControl.valueChanges.pipe(startWith(this.formControl.value))])\r\n      .pipe(\r\n        switchMap(([items, val]) => {\r\n          // Vì một số lý do chưa xác định mà khi sử dụng sdViewDef thì khi chuyển sang dạng view sẽ trigger val = null\r\n          // Nhưng formControl.value vẫn có giá trị đúng nên thực hiện gán val = this.formControl.value;\r\n          val = this.formControl.value;\r\n          if (!this.valueField) {\r\n            return of(val);\r\n          }\r\n          if (val || val === 0) {\r\n            if (typeof (items) === 'function') {\r\n              if (this.#item[val]) {\r\n                return of(this.#item[val]);\r\n              }\r\n              let obs: Observable<any[]>;\r\n              const func = items(val, true);\r\n              if (func instanceof Promise) {\r\n                obs = defer(() => from(func));\r\n              } else {\r\n                obs = func;\r\n              }\r\n              return obs.pipe(map(data => {\r\n                Object.assign(this.#item, Array.toObject(data, this.valueField));\r\n                return this.#item[val] || {\r\n                  [this.valueField]: val,\r\n                  [this.displayField]: val\r\n                };\r\n              }));\r\n            }\r\n            return of(items.find(e => e[this.valueField] === val));\r\n          }\r\n          return of('');\r\n        })\r\n      );\r\n    this.controlPlaceHolder = this.selected.pipe(map(item => item?.[this.displayField] ?? item ?? this.placeholder ?? this.label ?? ''));\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#form?.addControl(this.#name, this.formControl);\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n    this.#form?.removeControl(this.#name);\r\n  }\r\n  onSelect = (item: any) => {\r\n    if (item) {\r\n      if (typeof (item) === 'string' || typeof (item) === 'number') {\r\n        if (this.formControl.value !== item) {\r\n          this.formControl.setValue(item);\r\n          this.modelChange.emit(item);\r\n          this.sdChange.emit(item);\r\n        }\r\n      } else if (this.valueField && this.displayField) {\r\n        const val = item?.[this.valueField] || null;\r\n        if (this.formControl.value !== val) {\r\n          this.formControl.setValue(val);\r\n          this.modelChange.emit(val);\r\n          this.sdChange.emit(item);\r\n        }\r\n      }\r\n      this.inputControl.setValue('', {\r\n        emitEvent: false\r\n      });\r\n    }\r\n  }\r\n\r\n  onFocus = () => {\r\n    this.isFocused = true;\r\n    this.inputControl.setValue('');\r\n    // this.inputControl.updateValueAndValidity();\r\n  }\r\n\r\n  onBlur = () => {\r\n    this.isFocused = false;\r\n    this.inputControl.setValue('', {\r\n      emitEvent: false\r\n    });\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.autocompleteTrigger?.openPanel();\r\n      this.input?.nativeElement?.focus();\r\n    }, 100);\r\n  }\r\n\r\n  clear = ($event?: any) => {\r\n    $event?.stopPropagation();\r\n    this.inputControl?.setValue('');\r\n    if (this.#model) {\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  onAction = ($event: Event) => {\r\n    $event?.stopPropagation();\r\n    this.autocompleteTrigger?.closePanel();\r\n    this.action.emit();\r\n  }\r\n\r\n  reValidate = () => {\r\n    this.inputControl.updateValueAndValidity({ emitEvent: true });\r\n  }\r\n\r\n  #updateValidator = () => {\r\n    this.formControl.clearValidators();\r\n    this.formControl.clearAsyncValidators();\r\n    const validators: ValidatorFn[] = [];\r\n    // const asyncValidators: AsyncValidatorFn[] = [];\r\n    if (this.isRequired) {\r\n      validators.push(Validators.required);\r\n    }\r\n    // if (this.#validator) {\r\n    //   asyncValidators.push(this.#customValidator(this.#validator));\r\n    // }\r\n    this.formControl.setValidators(validators);\r\n    // this.formControl.setAsyncValidators(asyncValidators);\r\n    this.formControl.updateValueAndValidity();\r\n  }\r\n}\r\n\r\ntype SearchFunc = (searchText?: string | number, isFormValue?: boolean) => Promise<any[]> | Observable<any[]>;","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 { MatInputModule } from '@angular/material/input';\r\nimport { SdAutocomplete } from './autocomplete.component';\r\nimport { MatAutocompleteModule } from '@angular/material/autocomplete';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\nimport { SdAutocompleteDisplayDefDirective } from './autocomplete-display-def.directive';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    FormsModule,\r\n    ReactiveFormsModule,\r\n    MatInputModule,\r\n    MatTooltipModule,\r\n    MatFormFieldModule,\r\n    MatAutocompleteModule,\r\n    MatIconModule,\r\n    MatProgressSpinnerModule,\r\n    SdTranslateModule,\r\n    SdCommonModule\r\n  ],\r\n  declarations: [\r\n    SdAutocomplete,\r\n    SdAutocompleteDisplayDefDirective\r\n  ],\r\n  exports: [\r\n    SdAutocomplete,\r\n    SdAutocompleteDisplayDefDirective,\r\n    SdCommonModule\r\n  ],\r\n  providers: [\r\n  ]\r\n})\r\nexport class SdAutocompleteModule {\r\n\r\n}\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport * from './lib/autocomplete.module';\r\nexport * from './lib/autocomplete.component';\r\nexport * from './lib/autocomplete-display-def.directive';","/**\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-button.js

@@ -59,7 +59,7 @@ _disabled = new WeakMap(), _initialized = new WeakMap(), _subscription = new Wea
 SdButton.decorators = [
     { type: Component, args: [{
                 selector: 'sd-button',
-                template: "<button *ngIf=\"type === 'fill'\" [ngStyle]=\"{'width':width}\" class=\"c-button c-fill\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-flat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'light'\" [ngStyle]=\"{'width':width}\" class=\"c-button c-light\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-flat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'outline'\" [ngStyle]=\"{'width':width}\" class=\"c-button c-outline\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-stroked-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'link'\" [ngStyle]=\"{'width':width}\" class=\"c-button c-link\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<ng-template #buttonContent>\r\n  <ng-container *ngIf=\"title\">\r\n    <ng-container *ngIf=\"!iconSuffix\">\r\n      <mat-spinner *ngIf=\"loading\" strokeWidth=\"2\" mode=\"indeterminate\" diameter=\"18\" value=\"100\"\r\n        class=\"d-inline-block\"></mat-spinner>\r\n      <mat-icon *ngIf=\"!loading && icon\" [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n    </ng-container>\r\n    <span class=\"d-inline\" [ngClass]=\"{'ml-8': icon && !iconSuffix, 'mr-8': icon && iconSuffix}\">{{title}}</span>\r\n    <mat-icon *ngIf=\"iconSuffix && icon\" [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!title\">\r\n    <mat-icon [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n  </ng-container>\r\n</ng-template>",
+                template: "<button *ngIf=\"type === 'fill'\" [ngStyle]=\"{'width':width}\" class=\"c-button c-fill\" [class.c-square]=\"icon && !title\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-flat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'light'\" [ngStyle]=\"{'width':width}\" class=\"c-button c-light\" [class.c-square]=\"icon && !title\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-flat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'outline'\" [ngStyle]=\"{'width':width}\" class=\"c-button c-outline\"\r\n  [class.c-square]=\"icon && !title\" [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\"\r\n  [color]=\"color\" [disabled]=\"isDisabled\" matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-stroked-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<button *ngIf=\"type === 'link'\" [ngStyle]=\"{'width':width}\" class=\"c-button c-link\" [class.c-square]=\"icon && !title\"\r\n  [ngClass]=\"{'c-sm': size === 'sm', 'c-lg': size === 'lg'}\" type=\"button\" [color]=\"color\" [disabled]=\"isDisabled\"\r\n  matTooltipPosition=\"above\" [matTooltip]=\"tooltip\" mat-button #button>\r\n  <ng-container *ngTemplateOutlet=\"buttonContent\"></ng-container>\r\n</button>\r\n<ng-template #buttonContent>\r\n  <ng-container *ngIf=\"title\">\r\n    <ng-container *ngIf=\"!iconSuffix\">\r\n      <mat-spinner *ngIf=\"loading\" strokeWidth=\"2\" mode=\"indeterminate\" diameter=\"18\" value=\"100\"\r\n        class=\"d-inline-block\"></mat-spinner>\r\n      <mat-icon *ngIf=\"!loading && icon\" [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n    </ng-container>\r\n    <span class=\"d-inline\" [ngClass]=\"{'ml-8': icon && !iconSuffix, 'mr-8': icon && iconSuffix}\">{{title}}</span>\r\n    <mat-icon *ngIf=\"iconSuffix && icon\" [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!title\">\r\n    <mat-icon [fontSet]=\"fontSet\">{{icon}}</mat-icon>\r\n  </ng-container>\r\n</ng-template>",
                 styles: [".text-black400{color:#757575}:host ::ng-deep button.c-button{font-size:16px;height:40px;line-height:20px;min-width:auto;padding:2px 16px!important}:host ::ng-deep button.c-button .mat-button-wrapper{align-items:center;display:flex;justify-content:center}:host ::ng-deep button.c-button.mat-button-disabled{background-color:#e9e9e9!important;color:#a6a6a6!important}:host ::ng-deep button.c-button.c-square{min-width:auto!important;padding:0!important;width:40px!important}:host ::ng-deep button.c-button.c-sm{font-size:14px!important;font-weight:400;height:32px;line-height:20px!important;padding:2px 16px!important}:host ::ng-deep button.c-button.c-sm mat-icon{font-size:16px!important;height:16px!important;width:16px!important}:host ::ng-deep button.c-button.c-sm.c-square{width:32px!important}:host ::ng-deep button.c-button.c-lg{font-size:16px!important;height:48px;line-height:20px!important;padding:2px 16px!important}:host ::ng-deep button.c-button.c-lg.c-square{width:48px!important}:host ::ng-deep button.c-button:focus{outline:none}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-info,:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-primary{background-color:#2962ff;color:#fff}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-success{background-color:#4caf50;color:#fff}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-warning{background-color:#ff9600;color:#fff}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-danger{background-color:#f82c13;color:#fff}:host ::ng-deep button.c-button.c-fill.mat-flat-button.mat-secondary{background-color:#212121;color:#fff}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-info,:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-primary{background-color:#e7e9ff;color:#2962ff}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-success{background-color:#dbefdc;color:#4caf50}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-warning{background-color:#ffeacc;color:#ff9600}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-danger{background-color:#fed5d0;color:#f82c13}:host ::ng-deep button.c-button.c-light.mat-flat-button.mat-secondary{background-color:#e9e9e9;color:#212121}:host ::ng-deep button.c-button.c-outline.mat-stroked-button{border-color:#d3d3d3}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-info,:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-primary{color:#2962ff}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-success{color:#4caf50}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-warning{color:#ff9600}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-danger{color:#f82c13}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-secondary{color:#212121}:host ::ng-deep button.c-button.c-outline.mat-stroked-button.mat-button-disabled{background:transparent!important}:host ::ng-deep button.c-button.c-link.mat-button.mat-info,:host ::ng-deep button.c-button.c-link.mat-button.mat-primary{color:#2962ff}:host ::ng-deep button.c-button.c-link.mat-button.mat-success{color:#4caf50}:host ::ng-deep button.c-button.c-link.mat-button.mat-warning{color:#ff9600}:host ::ng-deep button.c-button.c-link.mat-button.mat-danger{color:#f82c13}:host ::ng-deep button.c-button.c-link.mat-button.mat-secondary{color:#212121}"]
             },] }
 ];

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

@@ -1 +1 @@
-{"version":3,"file":"sd-angular-core-button.js","sources":["../../../../projects/sd-core/button/src/lib/button.component.ts","../../../../projects/sd-core/button/src/lib/button.module.ts","../../../../projects/sd-core/button/src/public-api.ts","../../../../projects/sd-core/button/sd-angular-core-button.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  Output,\r\n  EventEmitter,\r\n  ChangeDetectorRef,\r\n  OnInit,\r\n  AfterViewInit,\r\n  ViewChild,\r\n  ElementRef,\r\n} from '@angular/core';\r\nimport { Subscription, fromEvent } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { MatButton } from '@angular/material/button';\r\n\r\n@Component({\r\n  selector: 'sd-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss']\r\n})\r\n\r\nexport class SdButton implements OnInit, AfterViewInit {\r\n  @ViewChild('button') button: MatButton;\r\n  #disabled = false;\r\n  #initialized = false;\r\n  isDisabled = false;\r\n  @Input() type: 'fill' | 'light' | 'outline' | 'link' = 'light';\r\n  @Input() color: 'primary' | 'accent' | 'warn' | 'info' | 'success' | 'warning' | 'danger' | 'secondary' = 'secondary';\r\n  @Input() title: string;\r\n  @Input() icon: string;\r\n  @Input() width: string;\r\n  @Input() size: 'sm' | 'lg';\r\n  @Input() tooltip: string;\r\n  @Input() iconSuffix = false;\r\n  @Input() fontSet: 'material-icons' |\r\n    'material-icons-outlined' |\r\n    'material-icons-round' |\r\n    'material-icons-sharp' = 'material-icons';\r\n  @Input() set disabled(value: boolean) {\r\n    this.#disabled = value || false;\r\n    if (this.#initialized) {\r\n      this.#onChanges();\r\n    }\r\n  }\r\n  @Input() loading = false;\r\n  @Output() action = new EventEmitter();\r\n  #subscription = new Subscription();\r\n  constructor(private ref: ChangeDetectorRef) {\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#onChanges();\r\n    this.#subscription.add(fromEvent(this.button._elementRef.nativeElement, 'click').pipe(debounceTime(200)).subscribe($event => {\r\n      if (this.loading) {\r\n        return;\r\n      }\r\n      this.action.emit($event);\r\n    }));\r\n    this.#initialized = true;\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  #onChanges = () => {\r\n    this.isDisabled = this.#disabled;\r\n    this.ref.detectChanges();\r\n  }\r\n\r\n  onClick = ($event: any) => {\r\n    if (this.loading) {\r\n      return;\r\n    }\r\n    this.action.emit($event);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdButton } from './button.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    MatButtonModule,\r\n    MatProgressSpinnerModule,\r\n    MatTooltipModule\r\n  ],\r\n  declarations: [\r\n    SdButton\r\n  ],\r\n  exports: [\r\n    SdButton\r\n  ]\r\n})\r\nexport class SdButtonModule { }\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport { SdButtonModule } from './lib/button.module';\r\nexport * from './lib/button.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MAqBa,QAAQ;IA0BnB,YAAoB,GAAsB;QAAtB,QAAG,GAAH,GAAG,CAAmB;QAxB1C,oBAAY,KAAK,EAAC;QAClB,uBAAe,KAAK,EAAC;QACrB,eAAU,GAAG,KAAK,CAAC;QACV,SAAI,GAA0C,OAAO,CAAC;QACtD,UAAK,GAA4F,WAAW,CAAC;QAM7G,eAAU,GAAG,KAAK,CAAC;QACnB,YAAO,GAGW,gBAAgB,CAAC;QAOnC,YAAO,GAAG,KAAK,CAAC;QACf,WAAM,GAAG,IAAI,YAAY,EAAE,CAAC;QACtC,wBAAgB,IAAI,YAAY,EAAE,EAAC;QAsBnC,qBAAa;YACX,IAAI,CAAC,UAAU,0CAAiB,CAAC;YACjC,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;SAC1B,EAAA;QAED,YAAO,GAAG,CAAC,MAAW;YACpB,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1B,CAAA;KA9BA;IAVD,IAAa,QAAQ,CAAC,KAAc;QAClC,uBAAA,IAAI,aAAa,KAAK,IAAI,KAAK,EAAC;QAChC,gDAAuB;YACrB,8CAAA,IAAI,CAAa,CAAC;SACnB;KACF;IAOD,QAAQ;KACP;IAED,eAAe;QACb,8CAAA,IAAI,CAAa,CAAC;QAClB,4CAAmB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM;YACvH,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1B,CAAC,CAAC,CAAC;QACJ,uBAAA,IAAI,gBAAgB,IAAI,EAAC;KAC1B;IAED,WAAW;QACT,4CAAmB,WAAW,EAAE,CAAC;KAClC;;;;YAnDF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,wwEAAsC;;aAEvC;;;YAdC,iBAAiB;;;qBAiBhB,SAAS,SAAC,QAAQ;mBAIlB,KAAK;oBACL,KAAK;oBACL,KAAK;mBACL,KAAK;oBACL,KAAK;mBACL,KAAK;sBACL,KAAK;yBACL,KAAK;sBACL,KAAK;uBAIL,KAAK;sBAML,KAAK;qBACL,MAAM;;;MCtBI,cAAc;;;YAf1B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;oBACb,eAAe;oBACf,wBAAwB;oBACxB,gBAAgB;iBACjB;gBACD,YAAY,EAAE;oBACZ,QAAQ;iBACT;gBACD,OAAO,EAAE;oBACP,QAAQ;iBACT;aACF;;;ACtBD;;;;ACAA;;;;;;"}
+{"version":3,"file":"sd-angular-core-button.js","sources":["../../../../projects/sd-core/button/src/lib/button.component.ts","../../../../projects/sd-core/button/src/lib/button.module.ts","../../../../projects/sd-core/button/src/public-api.ts","../../../../projects/sd-core/button/sd-angular-core-button.ts"],"sourcesContent":["import {\r\n  Component,\r\n  Input,\r\n  Output,\r\n  EventEmitter,\r\n  ChangeDetectorRef,\r\n  OnInit,\r\n  AfterViewInit,\r\n  ViewChild,\r\n  ElementRef,\r\n} from '@angular/core';\r\nimport { Subscription, fromEvent } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { MatButton } from '@angular/material/button';\r\n\r\n@Component({\r\n  selector: 'sd-button',\r\n  templateUrl: './button.component.html',\r\n  styleUrls: ['./button.component.scss']\r\n})\r\n\r\nexport class SdButton implements OnInit, AfterViewInit {\r\n  @ViewChild('button') button: MatButton;\r\n  #disabled = false;\r\n  #initialized = false;\r\n  isDisabled = false;\r\n  @Input() type: 'fill' | 'light' | 'outline' | 'link' = 'light';\r\n  @Input() color: 'primary' | 'accent' | 'warn' | 'info' | 'success' | 'warning' | 'danger' | 'secondary' = 'secondary';\r\n  @Input() title: string;\r\n  @Input() icon: string;\r\n  @Input() width: string;\r\n  @Input() size: 'sm' | 'lg';\r\n  @Input() tooltip: string;\r\n  @Input() iconSuffix = false;\r\n  @Input() fontSet: 'material-icons' |\r\n    'material-icons-outlined' |\r\n    'material-icons-round' |\r\n    'material-icons-sharp' = 'material-icons';\r\n  @Input() set disabled(value: boolean) {\r\n    this.#disabled = value || false;\r\n    if (this.#initialized) {\r\n      this.#onChanges();\r\n    }\r\n  }\r\n  @Input() loading = false;\r\n  @Output() action = new EventEmitter();\r\n  #subscription = new Subscription();\r\n  constructor(private ref: ChangeDetectorRef) {\r\n  }\r\n\r\n  ngOnInit() {\r\n  }\r\n\r\n  ngAfterViewInit() {\r\n    this.#onChanges();\r\n    this.#subscription.add(fromEvent(this.button._elementRef.nativeElement, 'click').pipe(debounceTime(200)).subscribe($event => {\r\n      if (this.loading) {\r\n        return;\r\n      }\r\n      this.action.emit($event);\r\n    }));\r\n    this.#initialized = true;\r\n  }\r\n\r\n  ngOnDestroy() {\r\n    this.#subscription.unsubscribe();\r\n  }\r\n\r\n  #onChanges = () => {\r\n    this.isDisabled = this.#disabled;\r\n    this.ref.detectChanges();\r\n  }\r\n\r\n  onClick = ($event: any) => {\r\n    if (this.loading) {\r\n      return;\r\n    }\r\n    this.action.emit($event);\r\n  }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { SdButton } from './button.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatTooltipModule } from '@angular/material/tooltip';\r\nimport { MatProgressSpinnerModule } from '@angular/material/progress-spinner';\r\n\r\n@NgModule({\r\n  imports: [\r\n    CommonModule,\r\n    MatIconModule,\r\n    MatButtonModule,\r\n    MatProgressSpinnerModule,\r\n    MatTooltipModule\r\n  ],\r\n  declarations: [\r\n    SdButton\r\n  ],\r\n  exports: [\r\n    SdButton\r\n  ]\r\n})\r\nexport class SdButtonModule { }\r\n","/*\r\n * Public API Surface of superdev-angular-core\r\n */\r\n\r\nexport { SdButtonModule } from './lib/button.module';\r\nexport * from './lib/button.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;MAqBa,QAAQ;IA0BnB,YAAoB,GAAsB;QAAtB,QAAG,GAAH,GAAG,CAAmB;QAxB1C,oBAAY,KAAK,EAAC;QAClB,uBAAe,KAAK,EAAC;QACrB,eAAU,GAAG,KAAK,CAAC;QACV,SAAI,GAA0C,OAAO,CAAC;QACtD,UAAK,GAA4F,WAAW,CAAC;QAM7G,eAAU,GAAG,KAAK,CAAC;QACnB,YAAO,GAGW,gBAAgB,CAAC;QAOnC,YAAO,GAAG,KAAK,CAAC;QACf,WAAM,GAAG,IAAI,YAAY,EAAE,CAAC;QACtC,wBAAgB,IAAI,YAAY,EAAE,EAAC;QAsBnC,qBAAa;YACX,IAAI,CAAC,UAAU,0CAAiB,CAAC;YACjC,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;SAC1B,EAAA;QAED,YAAO,GAAG,CAAC,MAAW;YACpB,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1B,CAAA;KA9BA;IAVD,IAAa,QAAQ,CAAC,KAAc;QAClC,uBAAA,IAAI,aAAa,KAAK,IAAI,KAAK,EAAC;QAChC,gDAAuB;YACrB,8CAAA,IAAI,CAAa,CAAC;SACnB;KACF;IAOD,QAAQ;KACP;IAED,eAAe;QACb,8CAAA,IAAI,CAAa,CAAC;QAClB,4CAAmB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM;YACvH,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,OAAO;aACR;YACD,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SAC1B,CAAC,CAAC,CAAC;QACJ,uBAAA,IAAI,gBAAgB,IAAI,EAAC;KAC1B;IAED,WAAW;QACT,4CAAmB,WAAW,EAAE,CAAC;KAClC;;;;YAnDF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,w5EAAsC;;aAEvC;;;YAdC,iBAAiB;;;qBAiBhB,SAAS,SAAC,QAAQ;mBAIlB,KAAK;oBACL,KAAK;oBACL,KAAK;mBACL,KAAK;oBACL,KAAK;mBACL,KAAK;sBACL,KAAK;yBACL,KAAK;sBACL,KAAK;uBAIL,KAAK;sBAML,KAAK;qBACL,MAAM;;;MCtBI,cAAc;;;YAf1B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,aAAa;oBACb,eAAe;oBACf,wBAAwB;oBACxB,gBAAgB;iBACjB;gBACD,YAAY,EAAE;oBACZ,QAAQ;iBACT;gBACD,OAAO,EAAE;oBACP,QAAQ;iBACT;aACF;;;ACtBD;;;;ACAA;;;;;;"}

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

@@ -179,7 +179,7 @@ class SdPopupFilter {
 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]\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"columnFilter[column.field]\">\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]\">\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]\">\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]\">\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          </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]\">\r\n          </sd-input>\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input>\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]\">\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]\" 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\" [(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\" [(model)]=\"externalFilter[item.field]\" 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\" [(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'\" [(model)]=\"externalFilter[item.field]\"\r\n            [type]=\"item.type\">\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\">\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>",
+                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\" 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 [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\"\r\n            [(model)]=\"externalFilter[item.field]\" appearance=\"outline\">\r\n          </sd-input>\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]\" 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'\" [(model)]=\"externalFilter[item.field]\"\r\n            [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>",
                 styles: [".c-checkable{width:50px}.c-filterable{flex:1}::ng-deep sd-modal-body.c-popup-filter .mat-form-field-wrapper{padding-bottom:0}"]
             },] }
 ];
@@ -2001,7 +2001,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\" 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\" 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 pl-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 pl-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>",
                 animations: [
                     trigger('detailExpand', [
                         state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),