npm - @sd-angular/core - Versions diffs - 0.0.999 → 0.0.1003 - Mend

@sd-angular/core 0.0.999 → 0.0.1003

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

Files changed (113) hide show

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

@@ -6,8 +6,10 @@ import { MatInputModule } from '@angular/material/input';
 import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from 'tslib';
 import { debounceTime, switchMap, startWith } from 'rxjs/operators';
 import { v4 } from 'uuid';
+import { Subscription } from 'rxjs';
 import { SdUtilityService } from '@sd-angular/core/utility';
 import { MatAutocompleteTrigger, MatAutocompleteModule } from '@angular/material/autocomplete';
+import { SdFormControl } from '@sd-angular/core/common';
 import '@sd-angular/core/typing';
 import { MatIconModule } from '@angular/material/icon';
 import { SdTranslateModule } from '@sd-angular/core/translate';
@@ -28,7 +30,7 @@ SdAutocompleteDisplayDefDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
-var _model, _items, _currentItems, _delay, _name, _form, _loadItems;
+var _model, _items, _currentItems, _delay, _name, _form, _subscription, _loadItems;
 class SdAutocompleteErrotStateMatcher {
     constructor(formControl) {
         this.formControl = formControl;
@@ -51,7 +53,7 @@ class SdAutocomplete {
         _name.set(this, v4());
         this.loading = false;
         this.inputControl = new FormControl();
-        this.formControl = new FormControl();
+        this.formControl = new SdFormControl();
         this.matcher = new SdAutocompleteErrotStateMatcher(this.formControl);
         _form.set(this, void 0);
         this.limit = 100;
@@ -60,6 +62,7 @@ class SdAutocomplete {
         this.sdChange = new EventEmitter();
         this.isRequired = false;
         this.disableErrorMessage = false;
+        _subscription.set(this, new Subscription());
         _loadItems.set(this, (searchText, items) => __awaiter(this, void 0, void 0, function* () {
             this.loading = true;
             return yield items(searchText).finally(() => this.loading = false);
@@ -83,6 +86,10 @@ class SdAutocomplete {
                         this.sdChange.emit(item);
                     }
                 }
+                this.inputControl.setValue('', {
+                    emitEvent: false
+                });
+                // this.ref.markForCheck();
                 // this.inputControl.setValue('', {
                 //   emitEvent: false
                 // });
@@ -182,9 +189,14 @@ class SdAutocomplete {
         this.disableErrorMessage = (val === '') || val;
         val = (val === '') || val;
     }
-    ngOnInit() { }
+    ngOnInit() {
+        __classPrivateFieldGet(this, _subscription).add(this.formControl.touchedChanges.subscribe(() => {
+            this.ref.markForCheck();
+        }));
+    }
     ngAfterViewInit() {
         var _a;
+        __classPrivateFieldGet(this, _subscription).add(this.formControl.statusChanges.subscribe(() => this.ref.markForCheck()));
         this.filteredItems = this.inputControl.valueChanges.pipe(debounceTime(typeof (__classPrivateFieldGet(this, _items)) === 'function' ? __classPrivateFieldGet(this, _delay) : 0),
         // distinctUntilChanged(), Dùng sẽ gây ra bug khi items changes
         switchMap(() => __awaiter(this, void 0, void 0, function* () {
@@ -233,10 +245,11 @@ class SdAutocomplete {
     }
     ngOnDestroy() {
         var _a;
+        __classPrivateFieldGet(this, _subscription).unsubscribe();
         (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.removeControl(__classPrivateFieldGet(this, _name));
     }
 }
-_model = new WeakMap(), _items = new WeakMap(), _currentItems = new WeakMap(), _delay = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _loadItems = new WeakMap();
+_model = new WeakMap(), _items = new WeakMap(), _currentItems = new WeakMap(), _delay = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _subscription = new WeakMap(), _loadItems = new WeakMap();
 SdAutocomplete.decorators = [
     { type: Component, args: [{
                 selector: 'sd-autocomplete',

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

	@@ -1 +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} from '@angular/core';\r\nimport { startWith, switchMap, debounceTime, debounce, distinctUntilChanged } from 'rxjs/operators';\r\n\r\nimport * as uuid from 'uuid';\r\nimport { FormControl, NgForm, Validators, FormGroupDirective, FormGroup } from '@angular/forms';\r\nimport { Observable, interval } from 'rxjs';\r\nimport { SdUtilityService } from '@sd-angular/core/utility';\r\nimport { ErrorStateMatcher } from '@angular/material/core';\r\nimport { SdAutocompleteDisplayDefDirective } from './autocomplete-display-def.directive';\r\nimport { MatAutocompleteTrigger } from '@angular/material/autocomplete';\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 @ViewChild(MatAutocompleteTrigger, { read: MatAutocompleteTrigger }) autocompleteTrigger: MatAutocompleteTrigger;\r\n id = `I${uuid.v4()}`;\r\n #model: string \| number;\r\n #items: any[] \| ((searchText: string) => Promise<any[]>) = [];\r\n #currentItems: any[] = [];\r\n #delay = 500; // 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 loading = false;\r\n inputControl = new FormControl();\r\n formControl = new FormControl();\r\n matcher = new SdAutocompleteErrotStateMatcher(this.formControl);\r\n get isNumber() {\r\n if (this.#model \|\| this.#model === 0) {\r\n return typeof (this.#model) === 'number';\r\n }\r\n if (this.#currentItems?.length) {\r\n if (this.valueField) {\r\n return typeof (this.#currentItems[0][this.valueField]) === 'number';\r\n } else {\r\n return typeof (this.#currentItems[0]) === 'number';\r\n }\r\n }\r\n return false;\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() label: string;\r\n @Input() valueField: string;\r\n @Input() displayField: string;\r\n @Input() placeholder: string;\r\n @Input() leftLabel: string;\r\n @Input() labelMinWidth: string;\r\n\r\n @Input() set items(items: undefined \| any[] \| ((searchText?: string) => Promise<any[]>)) {\r\n if (!items) {\r\n this.#items = [];\r\n } else if (Array.isArray(items)) {\r\n this.#items = items.filter(e => e !== null && e !== undefined);\r\n } else {\r\n this.#items = items;\r\n }\r\n this.formControl.updateValueAndValidity();\r\n this.inputControl.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 @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 } else {\r\n this.inputControl.enable();\r\n }\r\n }\r\n isRequired = false;\r\n @Input() set required(val: boolean \| '') {\r\n this.isRequired = (val === '') \|\| val;\r\n if (this.isRequired) {\r\n this.formControl.setValidators([Validators.required]);\r\n } else {\r\n this.formControl.clearValidators();\r\n }\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 constructor(\r\n private ref: ChangeDetectorRef,\r\n private utilityService: SdUtilityService) {\r\n }\r\n\r\n ngOnInit() { }\r\n\r\n ngAfterViewInit() {\r\n this.filteredItems = this.inputControl.valueChanges.pipe(\r\n debounceTime(typeof (this.#items) === 'function' ? this.#delay : 0),\r\n // distinctUntilChanged(), Dùng sẽ gây ra bug khi items changes\r\n switchMap(async () => {\r\n const val = this.inputControl.value \|\| '';\r\n if (typeof (this.#items) === 'function') {\r\n const items = await this.#loadItems(val, this.#items);\r\n this.#currentItems = items.filter((item, index) => index < this.limit);\r\n return this.#currentItems;\r\n }\r\n const { changeAliasLowerCase } = this.utilityService;\r\n this.#currentItems = this.#items.filter(item => {\r\n const value = item[this.valueField];\r\n const display = item[this.displayField];\r\n const searchText = changeAliasLowerCase(val);\r\n return changeAliasLowerCase(value).indexOf(searchText) !== -1 \|\| changeAliasLowerCase(display).indexOf(searchText) !== -1\r\n }).filter((item, index) => index < this.limit);\r\n return this.#currentItems;\r\n })\r\n );\r\n this.controlPlaceHolder = this.formControl.valueChanges.pipe(\r\n startWith(''),\r\n // distinctUntilChanged(), Dùng sẽ gây ra bug khi items changes\r\n switchMap(async () => {\r\n const val = this.formControl.value;\r\n if (val \|\| val === 0) {\r\n let currentItems = [];\r\n const items = this.#items;\r\n if (typeof (items) === 'function') {\r\n currentItems = await this.#loadItems(val, items);\r\n } else {\r\n currentItems = items \|\| [];\r\n }\r\n if (this.valueField && this.displayField) {\r\n const item = currentItems.find(e => e[this.valueField] === val);\r\n return item?.[this.displayField] \|\| val;\r\n } else {\r\n return currentItems.find(e => e === val) \|\| val;\r\n }\r\n } else {\r\n return this.placeholder \|\| this.label \|\| '';\r\n }\r\n }));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n this.ref.detectChanges();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n }\r\n\r\n #loadItems = async (searchText: string, items: (searchText?: string) => Promise<any[]>) => {\r\n this.loading = true;\r\n return await items(searchText).finally(() => this.loading = false);\r\n // this.ref.detectChanges();\r\n // return this.#previousResults;\r\n }\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.inputControl.setValue('');\r\n // this.inputControl.updateValueAndValidity();\r\n }\r\n\r\n onBlur = () => {\r\n this.inputControl.setValue('', {\r\n emitEvent: false\r\n });\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","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 '@sd-angular/core/typing';\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\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 ],\r\n declarations: [\r\n SdAutocomplete,\r\n SdAutocompleteDisplayDefDirective\r\n ],\r\n exports: [\r\n SdAutocomplete,\r\n SdAutocompleteDisplayDefDirective\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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"}
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} from '@angular/core';\r\nimport { startWith, switchMap, debounceTime, debounce, distinctUntilChanged } from 'rxjs/operators';\r\n\r\nimport * as uuid from 'uuid';\r\nimport { FormControl, NgForm, Validators, FormGroupDirective, FormGroup } from '@angular/forms';\r\nimport { Observable, Subscription } from 'rxjs';\r\nimport { SdUtilityService } from '@sd-angular/core/utility';\r\nimport { ErrorStateMatcher } from '@angular/material/core';\r\nimport { SdAutocompleteDisplayDefDirective } from './autocomplete-display-def.directive';\r\nimport { MatAutocompleteTrigger } from '@angular/material/autocomplete';\r\nimport { SdFormControl } from '@sd-angular/core/common';\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 @ViewChild(MatAutocompleteTrigger, { read: MatAutocompleteTrigger }) autocompleteTrigger: MatAutocompleteTrigger;\r\n id = `I${uuid.v4()}`;\r\n #model: string \| number;\r\n #items: any[] \| ((searchText: string) => Promise<any[]>) = [];\r\n #currentItems: any[] = [];\r\n #delay = 500; // 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 loading = false;\r\n inputControl = new FormControl();\r\n formControl = new SdFormControl();\r\n matcher = new SdAutocompleteErrotStateMatcher(this.formControl);\r\n get isNumber() {\r\n if (this.#model \|\| this.#model === 0) {\r\n return typeof (this.#model) === 'number';\r\n }\r\n if (this.#currentItems?.length) {\r\n if (this.valueField) {\r\n return typeof (this.#currentItems[0][this.valueField]) === 'number';\r\n } else {\r\n return typeof (this.#currentItems[0]) === 'number';\r\n }\r\n }\r\n return false;\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() label: string;\r\n @Input() valueField: string;\r\n @Input() displayField: string;\r\n @Input() placeholder: string;\r\n @Input() leftLabel: string;\r\n @Input() labelMinWidth: string;\r\n\r\n @Input() set items(items: undefined \| any[] \| ((searchText?: string) => Promise<any[]>)) {\r\n if (!items) {\r\n this.#items = [];\r\n } else if (Array.isArray(items)) {\r\n this.#items = items.filter(e => e !== null && e !== undefined);\r\n } else {\r\n this.#items = items;\r\n }\r\n this.formControl.updateValueAndValidity();\r\n this.inputControl.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 @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 } else {\r\n this.inputControl.enable();\r\n }\r\n }\r\n isRequired = false;\r\n @Input() set required(val: boolean \| '') {\r\n this.isRequired = (val === '') \|\| val;\r\n if (this.isRequired) {\r\n this.formControl.setValidators([Validators.required]);\r\n } else {\r\n this.formControl.clearValidators();\r\n }\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 constructor(\r\n private ref: ChangeDetectorRef,\r\n private utilityService: SdUtilityService) {\r\n }\r\n\r\n ngOnInit() { \r\n this.#subscription.add(this.formControl.touchedChanges.subscribe(() => {\r\n this.ref.markForCheck();\r\n }));\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.#subscription.add(this.formControl.statusChanges.subscribe(() => this.ref.markForCheck()));\r\n this.filteredItems = this.inputControl.valueChanges.pipe(\r\n debounceTime(typeof (this.#items) === 'function' ? this.#delay : 0),\r\n // distinctUntilChanged(), Dùng sẽ gây ra bug khi items changes\r\n switchMap(async () => {\r\n const val = this.inputControl.value \|\| '';\r\n if (typeof (this.#items) === 'function') {\r\n const items = await this.#loadItems(val, this.#items);\r\n this.#currentItems = items.filter((item, index) => index < this.limit);\r\n return this.#currentItems;\r\n }\r\n const { changeAliasLowerCase } = this.utilityService;\r\n this.#currentItems = this.#items.filter(item => {\r\n const value = item[this.valueField];\r\n const display = item[this.displayField];\r\n const searchText = changeAliasLowerCase(val);\r\n return changeAliasLowerCase(value).indexOf(searchText) !== -1 \|\| changeAliasLowerCase(display).indexOf(searchText) !== -1\r\n }).filter((item, index) => index < this.limit);\r\n return this.#currentItems;\r\n })\r\n );\r\n this.controlPlaceHolder = this.formControl.valueChanges.pipe(\r\n startWith(''),\r\n // distinctUntilChanged(), Dùng sẽ gây ra bug khi items changes\r\n switchMap(async () => {\r\n const val = this.formControl.value;\r\n if (val \|\| val === 0) {\r\n let currentItems = [];\r\n const items = this.#items;\r\n if (typeof (items) === 'function') {\r\n currentItems = await this.#loadItems(val, items);\r\n } else {\r\n currentItems = items \|\| [];\r\n }\r\n if (this.valueField && this.displayField) {\r\n const item = currentItems.find(e => e[this.valueField] === val);\r\n return item?.[this.displayField] \|\| val;\r\n } else {\r\n return currentItems.find(e => e === val) \|\| val;\r\n }\r\n } else {\r\n return this.placeholder \|\| this.label \|\| '';\r\n }\r\n }));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n this.ref.detectChanges();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#subscription.unsubscribe();\r\n this.#form?.removeControl(this.#name);\r\n }\r\n\r\n #loadItems = async (searchText: string, items: (searchText?: string) => Promise<any[]>) => {\r\n this.loading = true;\r\n return await items(searchText).finally(() => this.loading = false);\r\n // this.ref.detectChanges();\r\n // return this.#previousResults;\r\n }\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 // this.ref.markForCheck();\r\n // this.inputControl.setValue('', {\r\n // emitEvent: false\r\n // });\r\n }\r\n }\r\n\r\n onFocus = () => {\r\n this.inputControl.setValue('');\r\n // this.inputControl.updateValueAndValidity();\r\n }\r\n\r\n onBlur = () => {\r\n this.inputControl.setValue('', {\r\n emitEvent: false\r\n });\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","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 '@sd-angular/core/typing';\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\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 ],\r\n declarations: [\r\n SdAutocomplete,\r\n SdAutocompleteDisplayDefDirective\r\n ],\r\n exports: [\r\n SdAutocomplete,\r\n SdAutocompleteDisplayDefDirective\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-common.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { FormControl } from '@angular/forms';
+import { Subject } from 'rxjs';
+class SdFormControl extends FormControl {
+    constructor(formState, validator = null, asyncValidator = null) {
+        super(formState, validator, asyncValidator);
+        this.touchedChanges = new Subject();
+    }
+    markAsTouched({ onlySelf } = {}) {
+        super.markAsTouched({ onlySelf });
+        this.touchedChanges.next(true);
+    }
+}
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { SdFormControl };
+//# sourceMappingURL=sd-angular-core-common.js.map

package/fesm2015/sd-angular-core-common.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"sd-angular-core-common.js","sources":["../../../../projects/sd-core/common/src/lib/models/sd-form-control.ts","../../../../projects/sd-core/common/sd-angular-core-common.ts"],"sourcesContent":["import { FormControl, AsyncValidatorFn, ValidatorFn } from '@angular/forms';\r\nimport { Subject } from 'rxjs';\r\nexport class SdFormControl extends FormControl {\r\n touchedChanges: Subject<boolean> = new Subject<boolean>();\r\n\r\n constructor(\r\n formState?: Object,\r\n validator: ValidatorFn | ValidatorFn[] = null,\r\n asyncValidator: AsyncValidatorFn | AsyncValidatorFn[] = null\r\n ) {\r\n super(formState, validator, asyncValidator);\r\n }\r\n\r\n markAsTouched({ onlySelf }: { onlySelf?: boolean } = {}): void {\r\n super.markAsTouched({ onlySelf });\r\n this.touchedChanges.next(true);\r\n }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAEa,aAAc,SAAQ,WAAW;IAG5C,YACE,SAAkB,EAClB,YAAyC,IAAI,EAC7C,iBAAwD,IAAI;QAE5D,KAAK,CAAC,SAAS,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC;QAP9C,mBAAc,GAAqB,IAAI,OAAO,EAAW,CAAC;KAQzD;IAED,aAAa,CAAC,EAAE,QAAQ,KAA6B,EAAE;QACrD,KAAK,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;;;AChBH;;;;;;"}

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

@@ -1,7 +1,7 @@
 import '@sd-angular/core/typing';
 import { EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormControl, NgForm, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgForm, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { NGX_MAT_DATE_FORMATS, NgxMatDatetimePickerModule, NgxMatTimepickerModule } from '@angular-material-components/datetime-picker';
@@ -10,13 +10,15 @@ import { v4 } from 'uuid';
 import moment from 'moment';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { MAT_DATE_FORMATS } from '@angular/material/core';
+import { Subscription } from 'rxjs';
+import { SdFormControl } from '@sd-angular/core/common';
 import { SdTranslateModule } from '@sd-angular/core/translate';
 import { MatInputModule } from '@angular/material/input';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
 import { MatIconModule } from '@angular/material/icon';
-var _date, _name, _form;
+var _date, _name, _form, _subscription;
 const CUSTOM_DATETIME_FORMATS = {
     parse: {
         dateInput: 'DD/MM/YYYY HH:mm'
@@ -48,12 +50,13 @@ class SdDateTime {
         _date.set(this, void 0);
         _name.set(this, v4());
         this.disableErrorMessage = false;
-        this.dateControl = new FormControl();
+        this.dateControl = new SdFormControl();
         _form.set(this, void 0);
         this.type = 'datetime';
         this.isRequired = false;
         this.sdChange = new EventEmitter();
         this.modelChange = new EventEmitter();
+        _subscription.set(this, new Subscription());
         this.onBlur = () => {
             // const value = this.dateControl.value?.toDate();
             // if (value) {
@@ -181,15 +184,19 @@ class SdDateTime {
     ngOnDestroy() {
         var _a;
         (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.removeControl(__classPrivateFieldGet(this, _name));
+        __classPrivateFieldGet(this, _subscription).unsubscribe();
     }
     ngOnInit() {
         var _a;
+        __classPrivateFieldGet(this, _subscription).add(this.dateControl.touchedChanges.subscribe(() => {
+            this.ref.markForCheck();
+        }));
         (_a = __classPrivateFieldGet(this, _form)) === null || _a === void 0 ? void 0 : _a.addControl(__classPrivateFieldGet(this, _name), this.dateControl);
     }
     ngAfterViewInit() {
     }
 }
-_date = new WeakMap(), _name = new WeakMap(), _form = new WeakMap();
+_date = new WeakMap(), _name = new WeakMap(), _form = new WeakMap(), _subscription = new WeakMap();
 SdDateTime.decorators = [
     { type: Component, args: [{
                 selector: 'sd-date-time',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"sd-angular-core-date-time.js","sources":["../../../../projects/sd-core/date-time/src/lib/date-time.component.ts","../../../../projects/sd-core/date-time/src/lib/date-time.module.ts","../../../../projects/sd-core/date-time/sd-angular-core-date-time.ts"],"sourcesContent":["import {\r\n Component,\r\n Input,\r\n EventEmitter,\r\n Output,\r\n OnDestroy,\r\n AfterViewInit,\r\n ChangeDetectorRef,\r\n OnInit,\r\n ViewChild,\r\n ChangeDetectionStrategy\r\n} from '@angular/core';\r\nimport * as uuid from 'uuid';\r\nimport moment, { Moment } from 'moment';\r\nimport { FormControl, FormGroup, NgForm, Validators } from '@angular/forms';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatDatepickerInputEvent } from '@angular/material/datepicker';\r\nimport { NGX_MAT_DATE_FORMATS, } from '@angular-material-components/datetime-picker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport '@sd-angular/core/typing';\r\n\r\nconst CUSTOM_DATETIME_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY HH:mm'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY HH:mm',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\nconst CUSTOM_DATE_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\n@Component({\r\n selector: 'sd-date-time',\r\n templateUrl: './date-time.component.html',\r\n styleUrls: ['./date-time.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [\r\n { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },\r\n { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATETIME_FORMATS }\r\n ]\r\n})\r\nexport class SdDateTime implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n isMobileOrTablet = false;\r\n #date: any;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n 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 dateControl = new FormControl();\r\n min: Date;\r\n @Input('min') set _min(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n max: Date;\r\n @Input('max') set _max(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() type: 'datetime' \| 'date' \| 'time' = 'datetime';\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.dateControl.disable();\r\n } else {\r\n this.dateControl.enable();\r\n }\r\n }\r\n isRequired = false;\r\n @Input() set required(val: boolean \| '') {\r\n this.isRequired = (val === '') \|\| val;\r\n if (this.isRequired) {\r\n this.dateControl.setValidators([Validators.required]);\r\n } else {\r\n this.dateControl.clearValidators();\r\n }\r\n }\r\n @Input() label: string;\r\n @Input() placeholder: string;\r\n @Input() defaultTime: any;\r\n @Input() set minDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n @Input() set maxDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() validator: (value: any) => string \| Promise<string>;\r\n @Output() sdChange = new EventEmitter();\r\n date: any;\r\n\r\n @Input() set model(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#date !== val) {\r\n this.#date = val;\r\n const date = Date.isDate(this.#date) ? moment(Date.toFormat(this.#date, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n this.dateControl.setValue(date);\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n constructor(\r\n private ref: ChangeDetectorRef,\r\n deviceService: DeviceDetectorService) {\r\n this.isMobileOrTablet = !deviceService.isDesktop();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n }\r\n\r\n ngOnInit() {\r\n this.#form?.addControl(this.#name, this.dateControl);\r\n }\r\n\r\n ngAfterViewInit() {\r\n }\r\n\r\n onBlur = () => {\r\n // const value = this.dateControl.value?.toDate();\r\n // if (value) {\r\n // if (new Date(this.#date) !== value) {\r\n // this.modelChange.emit(value);\r\n // this.sdChange.emit(value);\r\n // }\r\n // } else {\r\n // if (!this.dateControl?.value) {\r\n // this.modelChange.emit(null);\r\n // this.sdChange.emit(null);\r\n // }\r\n // }\r\n }\r\n\r\n onFocus = () => {\r\n if (this.isMobileOrTablet) {\r\n // $(this.control.nativeElement).trigger('blur');\r\n }\r\n }\r\n\r\n onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate();\r\n if (value) {\r\n if (new Date(this.#date) !== value) {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n } else {\r\n if (!this.dateControl?.value) {\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n }\r\n\r\n clear = ($event: any) => {\r\n $event?.stopPropagation();\r\n if (this.#date) {\r\n this.dateControl.setValue(null);\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport {\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule\r\n} from '@angular-material-components/datetime-picker';\r\nimport { SdDateTime } from './date-time.component';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { NgxMatMomentModule } from '@angular-material-components/moment-adapter';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport '@sd-angular/core/typing';\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatFormFieldModule,\r\n MatDatepickerModule,\r\n MatMomentDateModule,\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule,\r\n NgxMatMomentModule,\r\n SdTranslateModule\r\n ],\r\n declarations: [\r\n SdDateTime\r\n ],\r\n exports: [\r\n SdDateTime\r\n ],\r\n providers: [\r\n ]\r\n})\r\nexport class SdDateTimeModule {\r\n\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["uuid.v4"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAM,uBAAuB,GAAG;IAC9B,KAAK,EAAE;QACL,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,SAAS,EAAE,kBAAkB;QAC7B,cAAc,EAAE,UAAU;QAC1B,aAAa,EAAE,IAAI;QACnB,kBAAkB,EAAE,WAAW;KAChC;CACF,CAAC;AACF,MAAM,mBAAmB,GAAG;IAC1B,KAAK,EAAE;QACL,SAAS,EAAE,YAAY;KACxB;IACD,OAAO,EAAE;QACP,SAAS,EAAE,YAAY;QACvB,cAAc,EAAE,UAAU;QAC1B,aAAa,EAAE,IAAI;QACnB,kBAAkB,EAAE,WAAW;KAChC;CACF,CAAC;WAOyC,mBAAmB,OACf,uBAAuB;MAGzD,UAAU;IA6FrB,YACU,GAAsB,EAC9B,aAAoC;QAD5B,QAAG,GAAH,GAAG,CAAmB;QA7FhC,OAAE,GAAG,IAAIA,EAAO,EAAE,EAAE,CAAC;QACrB,qBAAgB,GAAG,KAAK,CAAC;QACzB,wBAAW;QACX,gBAAQA,EAAO,EAAE,EAAC;QAMlB,wBAAmB,GAAG,KAAK,CAAC;QAK5B,gBAAW,GAAG,IAAI,WAAW,EAAE,CAAC;QAkBhC,wBAAiB;QAUR,SAAI,GAAiC,UAAU,CAAC;QASzD,eAAU,GAAG,KAAK,CAAC;QA2BT,aAAQ,GAAG,IAAI,YAAY,EAAE,CAAC;QAa9B,gBAAW,GAAG,IAAI,YAAY,EAAE,CAAC;QAkB3C,WAAM,GAAG;;;;;;;;;;;;;SAaR,CAAA;QAED,YAAO,GAAG;YACR,IAAI,IAAI,CAAC,gBAAgB,EAAE;;aAE1B;SACF,CAAA;QAED,aAAQ,GAAG,CAAC,KAAsC;;YAChD,MAAM,KAAK,SAAG,KAAK,CAAC,KAAK,0CAAE,MAAM,EAAE,CAAC;YACpC,IAAI,KAAK,EAAE;gBACT,IAAI,IAAI,IAAI,qCAAY,KAAK,KAAK,EAAE;oBAClC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;oBAC7B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;iBAC3B;aACF;iBAAM;gBACL,IAAI,QAAC,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAA,EAAE;oBAC5B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC1B;aACF;SACF,CAAA;QAED,UAAK,GAAG,CAAC,MAAW;YAClB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,eAAe,GAAG;YAC1B,yCAAgB;gBACd,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC5B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAC1B;SACF,CAAA;QAzDC,IAAI,CAAC,gBAAgB,GAAG,CAAC,aAAa,CAAC,SAAS,EAAE,CAAC;KACpD;IA5FD,IAAa,IAAI,CAAC,GAAW;QAC3B,IAAI,GAAG,EAAE;YACP,uBAAA,IAAI,SAAS,GAAG,EAAC;SAClB;KACF;IAED,IAAkC,oBAAoB,CAAC,GAAiB;QACtE,IAAI,CAAC,mBAAmB,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;QAC/C,GAAG,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;KAC3B;IAGD,IAAkB,IAAI,CAAC,GAAkB;QACvC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;SACjB;KACF;IAED,IAAkB,IAAI,CAAC,GAAkB;QACvC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;SACjB;KACF;IAGD,IAAa,IAAI,CAAC,GAAuB;QACvC,IAAI,GAAG,EAAE;YACP,IAAI,GAAG,YAAY,MAAM,EAAE;gBACzB,uBAAA,IAAI,SAAS,GAAG,CAAC,IAAI,EAAC;aACvB;iBAAM;gBACL,uBAAA,IAAI,SAAS,GAAG,EAAC;aAClB;SACF;KACF;IAED,IAAa,QAAQ,CAAC,GAAiB;QACrC,GAAG,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;QAC1B,IAAI,GAAG,EAAE;YACP,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;SAC5B;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;SAC3B;KACF;IAED,IAAa,QAAQ,CAAC,GAAiB;QACrC,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,KAAK,EAAE,KAAK,GAAG,CAAC;QACtC,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC;SACvD;aAAM;YACL,IAAI,CAAC,WAAW,CAAC,eAAe,EAAE,CAAC;SACpC;KACF;IAID,IAAa,OAAO,CAAC,GAAkB;QACrC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;SACjB;KACF;IACD,IAAa,OAAO,CAAC,GAAkB;QACrC,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACpB,IAAI,CAAC,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;SAC1B;aAAM;YACL,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;SACjB;KACF;IAKD,IAAa,KAAK,CAAC,GAAQ;QACzB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;YACrB,GAAG,GAAG,IAAI,CAAC;SACZ;QACD,IAAI,wCAAe,GAAG,EAAE;YACtB,uBAAA,IAAI,SAAS,GAAG,EAAC;YACjB,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,qCAAY,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,sCAAa,qBAAqB,CAAC,EAAE,qBAAqB,CAAC,GAAG,IAAI,CAAC;YAC9H,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;SACjC;KACF;IAQD,WAAW;;QACT,mFAAY,aAAa,sCAAa;KACvC;IAED,QAAQ;;QACN,mFAAY,UAAU,sCAAa,IAAI,CAAC,WAAW,EAAE;KACtD;IAED,eAAe;KACd;;;;YAtHF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;gBACxB,gyHAAyC;gBAEzC,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,SAAS,EAAE;oBACT,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,IAAqB,EAAE;oBAC5D,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,IAAyB,EAAE;iBACrE;;aACF;;;YA7CC,iBAAiB;YAQV,qBAAqB;;;mBA2C3B,KAAK;mCAML,KAAK,SAAC,qBAAqB;mBAM3B,KAAK,SAAC,KAAK;mBAQX,KAAK,SAAC,KAAK;mBAOX,KAAK;mBAEL,KAAK;mBASL,KAAK;uBACL,KAAK;uBASL,KAAK;oBAQL,KAAK;0BACL,KAAK;0BACL,KAAK;sBACL,KAAK;sBAOL,KAAK;wBAOL,KAAK;uBACL,MAAM;oBAGN,KAAK;0BAUL,MAAM;;;MCzGI,gBAAgB;;;YAxB5B,QAAQ,SAAC;gBACR,OAAO,EAAE;oBACP,YAAY;oBACZ,WAAW;oBACX,mBAAmB;oBACnB,cAAc;oBACd,aAAa;oBACb,kBAAkB;oBAClB,mBAAmB;oBACnB,mBAAmB;oBACnB,0BAA0B;oBAC1B,sBAAsB;oBACtB,kBAAkB;oBAClB,iBAAiB;iBAClB;gBACD,YAAY,EAAE;oBACZ,UAAU;iBACX;gBACD,OAAO,EAAE;oBACP,UAAU;iBACX;gBACD,SAAS,EAAE,EACV;aACF;;;ACvCD;;;;;;"}
1	+ {"version":3,"file":"sd-angular-core-date-time.js","sources":["../../../../projects/sd-core/date-time/src/lib/date-time.component.ts","../../../../projects/sd-core/date-time/src/lib/date-time.module.ts","../../../../projects/sd-core/date-time/sd-angular-core-date-time.ts"],"sourcesContent":["import {\r\n Component,\r\n Input,\r\n EventEmitter,\r\n Output,\r\n OnDestroy,\r\n AfterViewInit,\r\n ChangeDetectorRef,\r\n OnInit,\r\n ViewChild,\r\n ChangeDetectionStrategy\r\n} from '@angular/core';\r\nimport * as uuid from 'uuid';\r\nimport moment, { Moment } from 'moment';\r\nimport { FormControl, FormGroup, NgForm, Validators } from '@angular/forms';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatDatepickerInputEvent } from '@angular/material/datepicker';\r\nimport { NGX_MAT_DATE_FORMATS, } from '@angular-material-components/datetime-picker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport '@sd-angular/core/typing';\r\nimport { Subscription } from 'rxjs';\r\nimport { SdFormControl } from '@sd-angular/core/common';\r\n\r\nconst CUSTOM_DATETIME_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY HH:mm'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY HH:mm',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\nconst CUSTOM_DATE_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\n@Component({\r\n selector: 'sd-date-time',\r\n templateUrl: './date-time.component.html',\r\n styleUrls: ['./date-time.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [\r\n { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },\r\n { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATETIME_FORMATS }\r\n ]\r\n})\r\nexport class SdDateTime implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n isMobileOrTablet = false;\r\n #date: any;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n 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 dateControl = new SdFormControl();\r\n min: Date;\r\n @Input('min') set _min(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n max: Date;\r\n @Input('max') set _max(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() type: 'datetime' \| 'date' \| 'time' = 'datetime';\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.dateControl.disable();\r\n } else {\r\n this.dateControl.enable();\r\n }\r\n }\r\n isRequired = false;\r\n @Input() set required(val: boolean \| '') {\r\n this.isRequired = (val === '') \|\| val;\r\n if (this.isRequired) {\r\n this.dateControl.setValidators([Validators.required]);\r\n } else {\r\n this.dateControl.clearValidators();\r\n }\r\n }\r\n @Input() label: string;\r\n @Input() placeholder: string;\r\n @Input() defaultTime: any;\r\n @Input() set minDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n @Input() set maxDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() validator: (value: any) => string \| Promise<string>;\r\n @Output() sdChange = new EventEmitter();\r\n date: any;\r\n\r\n @Input() set model(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#date !== val) {\r\n this.#date = val;\r\n const date = Date.isDate(this.#date) ? moment(Date.toFormat(this.#date, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n this.dateControl.setValue(date);\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n #subscription = new Subscription();\r\n constructor(\r\n private ref: ChangeDetectorRef,\r\n deviceService: DeviceDetectorService) {\r\n this.isMobileOrTablet = !deviceService.isDesktop();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n ngOnInit() {\r\n this.#subscription.add(this.dateControl.touchedChanges.subscribe(() => {\r\n this.ref.markForCheck();\r\n }));\r\n this.#form?.addControl(this.#name, this.dateControl);\r\n }\r\n\r\n ngAfterViewInit() {\r\n }\r\n\r\n onBlur = () => {\r\n // const value = this.dateControl.value?.toDate();\r\n // if (value) {\r\n // if (new Date(this.#date) !== value) {\r\n // this.modelChange.emit(value);\r\n // this.sdChange.emit(value);\r\n // }\r\n // } else {\r\n // if (!this.dateControl?.value) {\r\n // this.modelChange.emit(null);\r\n // this.sdChange.emit(null);\r\n // }\r\n // }\r\n }\r\n\r\n onFocus = () => {\r\n if (this.isMobileOrTablet) {\r\n // $(this.control.nativeElement).trigger('blur');\r\n }\r\n }\r\n\r\n onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate();\r\n if (value) {\r\n if (new Date(this.#date) !== value) {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n } else {\r\n if (!this.dateControl?.value) {\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n }\r\n\r\n clear = ($event: any) => {\r\n $event?.stopPropagation();\r\n if (this.#date) {\r\n this.dateControl.setValue(null);\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport {\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule\r\n} from '@angular-material-components/datetime-picker';\r\nimport { SdDateTime } from './date-time.component';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { NgxMatMomentModule } from '@angular-material-components/moment-adapter';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport '@sd-angular/core/typing';\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatFormFieldModule,\r\n MatDatepickerModule,\r\n MatMomentDateModule,\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule,\r\n NgxMatMomentModule,\r\n SdTranslateModule\r\n ],\r\n declarations: [\r\n SdDateTime\r\n ],\r\n exports: [\r\n SdDateTime\r\n ],\r\n providers: [\r\n ]\r\n})\r\nexport class SdDateTimeModule {\r\n\r\n}\r\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["uuid.v4"],"mappings":"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"}

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

@@ -1911,7 +1911,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    <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\" [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]=\"items\" matSort\r\n            [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n            (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\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                <div *ngIf=\"sdSubInformation?.templateRef\" [@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              </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\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n                  (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\">\r\n                <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [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\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</mat-icon>\r\n                </button>\r\n              </th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\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 *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n              [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                    \" [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                  </div>\r\n                  <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n                    [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [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            <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 [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n                    [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [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\"></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\" [class.selected]=\"row.isSelected\"\r\n              [style]=\"row | sdStyleRowCss:gridOption\"></tr>\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\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button\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</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 *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\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></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 [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\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></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-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<sd-quick-action *ngIf=\"\r\n    selectedItems\r\n      | selectionActionFilter: gridOption?.selection?.actions as actions\r\n  \" [isOpened]=\"actions?.length\">\r\n  <div sdMessage>\r\n    <strong class=\"text-info\">{{ selectedItems.length }}</strong>\r\n    {{ gridOption?.selection?.message || (\"selected rows\" | sdTranslate) }}\r\n  </div>\r\n  <div class=\"d-flex align-items-center\" sdAction>\r\n    <ng-container *ngFor=\"let action of actions\">\r\n      <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n        [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n        [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n      <ng-container *ngIf=\"action.children?.length\">\r\n        <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n              [disabled]=\"childAction.disabled\">\r\n              <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n              </mat-icon>\r\n              <span> {{ childAction.title }}</span>\r\n            </button>\r\n          </span>\r\n        </mat-menu>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</sd-quick-action>",
+                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    <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\" [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]=\"items\" matSort\r\n            [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n            [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n            (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\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                <div *ngIf=\"sdSubInformation?.templateRef\" [@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              </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\" mat-icon-button aria-label=\"Expand & Collapse\"\r\n                  (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\">\r\n                <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [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\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</mat-icon>\r\n                </button>\r\n              </th>\r\n              <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\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 *ngFor=\"let column of configuration.firstColumns; let i = index\" [matColumnDef]=\"column.field\"\r\n              [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                    \" [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                  </div>\r\n                  <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n                    [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [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            <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 [innerHTML]=\"column.titleHtml || column.title\"></div>\r\n                  <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\" [value]=\"columnFilter[column.field]\"\r\n                    [columnFilter]=\"columnFilter\" [column]=\"column\" (filterChange)=\"onFilterChange()\">\r\n                  </sd-column-inline-filter>\r\n                </div>\r\n              </th>\r\n              <td class=\"c-td px-8\" mat-cell *matCellDef=\"let item\">\r\n                <sd-desktop-cell [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\" [column]=\"column\"\r\n                  [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\"></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\" [class.selected]=\"row.isSelected\"\r\n              [style]=\"row | sdStyleRowCss:gridOption\"></tr>\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\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button\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</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 *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\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div [innerHTML]=\"column.titleHtml || column.title\"></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 [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\" [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [innerHTML]=\"column.titleHtml || column.title\"></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-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<sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"></sd-grid-quick-action>",
                 animations: [
                     trigger('detailExpand', [
                         state('collapsed', style({ height: '0', minHeight: '0', visibility: 'hidden' })),
@@ -3067,6 +3067,26 @@ SdIdPipe.decorators = [
             },] }
 ];
+class SdGridQuickAction {
+    constructor() {
+        this.onClear = () => {
+        };
+    }
+}
+SdGridQuickAction.decorators = [
+    { type: Component, args: [{
+                selector: 'sd-grid-quick-action',
+                template: "<sd-quick-action *ngIf=\"selectedItems | selectionActionFilter: gridOption?.selection?.actions as actions\"\r\n  [isOpened]=\"actions?.length\">\r\n  <div class=\"d-flex align-items-center\" sdMessage>\r\n    <div class=\"c-bg-length\">\r\n      <span class=\"c-length\">{{ selectedItems.length }}</span>\r\n    </div>\r\n    <div class=\"c-message\">{{ gridOption?.selection?.message || (\"selected items\" | sdTranslate) }}</div>\r\n  </div>\r\n  <div class=\"d-flex align-items-center mr-8\" sdAction>\r\n    <ng-container *ngFor=\"let action of actions\">\r\n      <sd-button *ngIf=\"action.click\" class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon\"\r\n        [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n        [title]=\"action.title\" size=\"sm\" (action)=\"action.click(selectedItems)\"></sd-button>\r\n      <ng-container *ngIf=\"action.children?.length\">\r\n        <sd-button class=\"ml-5\" [tooltip]=\"action.tooltip\" [icon]=\"action.icon || 'more_vert'\"\r\n          [color]=\"action.color || 'secondary'\" [type]=\"action.type || 'light'\" [fontSet]=\"action.fontSet\"\r\n          [title]=\"action.title\" size=\"sm\" [matMenuTriggerFor]=\"menu\">\r\n        </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <span>\r\n            <button *ngFor=\"let childAction of action.children\" mat-menu-item (click)=\"childAction.click(selectedItems)\"\r\n              [disabled]=\"childAction.disabled\">\r\n              <mat-icon [fontSet]=\"childAction.fontSet\" class=\"c-icon\">{{ childAction.icon }}\r\n              </mat-icon>\r\n              <span> {{ childAction.title }}</span>\r\n            </button>\r\n          </span>\r\n        </mat-menu>\r\n      </ng-container>\r\n    </ng-container>\r\n    <sd-button class=\"ml-5\" icon=\"close\" color=\"secondary\" type=\"outline\" size=\"sm\"\r\n      (action)=\"onClear()\"></sd-button>\r\n  </div>\r\n</sd-quick-action>",
+                changeDetection: ChangeDetectionStrategy.OnPush,
+                styles: [".c-bg-length{align-items:flex-start;background:#2962ff;border-radius:4px 0 0 4px;display:flex;flex-direction:column;height:48px;left:0;padding:12px 8px;position:static;top:0;width:48px}.c-bg-length .c-length{color:#fff;font-size:16px;font-weight:500;height:24px;left:8px;line-height:24px;text-align:center;top:12px;width:32px}.c-bg-length .c-length,.c-message{font-family:Roboto;font-style:normal;position:static}.c-message{color:#000;font-size:14px;font-weight:400;height:20px;left:0;line-height:20px;margin:0 0 0 16px;min-width:200px;top:6px}"]
+            },] }
+];
+SdGridQuickAction.ctorParameters = () => [];
+SdGridQuickAction.propDecorators = {
+    gridOption: [{ type: Input }],
+    selectedItems: [{ type: Input }]
+};
 class MatPaginatorIntlCro extends MatPaginatorIntl {
     constructor() {
         super(...arguments);
@@ -3120,6 +3140,7 @@ SdGridMaterialModule.decorators = [
                     ScrollingModule
                 ],
                 declarations: [
+                    SdGridQuickAction,
                     SdDesktopCell,
                     SdDesktopCellEditor,
                     SdDesktopEditorValidation,
@@ -3196,5 +3217,5 @@ SdGridMaterialModule.decorators = [
  * Generated bundle index. Do not edit.
  */
-export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdCommandTitlePipe as ɵba, SdColumnValuesPipe as ɵbb, SdColumnHtmlTemplatePipe as ɵbc, SdColumnTransformPipe as ɵbd, SdColumnTooltipPipe as ɵbe, SdColumnBadgePipe as ɵbf, SdFilterColumnPipe as ɵbg, SdFilterExternalPipe as ɵbh, SdSelectionActionFilterPipe as ɵbi, SdSelectionVisiblePipe as ɵbj, SdSelectionDisablePipe as ɵbk, SdSelectionVisibleSelectAllPipe as ɵbl, SdEditorHandlerRowPipe as ɵbm, SdEditorHandlerColumnPipe as ɵbn, SdEditorValidatePipe as ɵbo, SdIdPipe as ɵbp, SdStyleRowCss as ɵbq, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdGridService as ɵi, SdDesktopCell as ɵj, SdDesktopCellEditor as ɵk, SdDesktopEditorValidation as ɵl, SdDesktopCellView as ɵm, SdDesktopCellChildrenView as ɵn, SdDesktopCommand as ɵo, SdColumnInlineFilter as ɵp, SdLetDirective as ɵq, SdPopupGridConfiguration as ɵr, SdDynamicColumn as ɵs, SdGeneratedColumnService as ɵt, SdGridConfigurationResultPipe as ɵu, SdColumnChildrenFilterPipe as ɵv, SdColumnTitlePipe as ɵw, SdCommandFilterPipe as ɵx, SdCommandDisablePipe as ɵy, SdCommandIconPipe as ɵz };
+export { SdGridMaterial, SdGridMaterialModule, SdMaterialCellDefDirective, SdMaterialEmptyDataDefDirective, SdMaterialFilterDefDirective, SdMaterialFooterDefDirective, SdMaterialSubInformationDefDirective, MatPaginatorIntlCro as ɵa, SdGridFilter as ɵb, SdCommandIconPipe as ɵba, SdCommandTitlePipe as ɵbb, SdColumnValuesPipe as ɵbc, SdColumnHtmlTemplatePipe as ɵbd, SdColumnTransformPipe as ɵbe, SdColumnTooltipPipe as ɵbf, SdColumnBadgePipe as ɵbg, SdFilterColumnPipe as ɵbh, SdFilterExternalPipe as ɵbi, SdSelectionActionFilterPipe as ɵbj, SdSelectionVisiblePipe as ɵbk, SdSelectionDisablePipe as ɵbl, SdSelectionVisibleSelectAllPipe as ɵbm, SdEditorHandlerRowPipe as ɵbn, SdEditorHandlerColumnPipe as ɵbo, SdEditorValidatePipe as ɵbp, SdIdPipe as ɵbq, SdStyleRowCss as ɵbr, SdPopupFilter as ɵc, SdGridFilterService as ɵd, SdPopupExport as ɵe, GRID_MATERIAL_CONFIG as ɵg, SdGridConfigurationService as ɵh, SdGridService as ɵi, SdGridQuickAction as ɵj, SdDesktopCell as ɵk, SdDesktopCellEditor as ɵl, SdDesktopEditorValidation as ɵm, SdDesktopCellView as ɵn, SdDesktopCellChildrenView as ɵo, SdDesktopCommand as ɵp, SdColumnInlineFilter as ɵq, SdLetDirective as ɵr, SdPopupGridConfiguration as ɵs, SdDynamicColumn as ɵt, SdGeneratedColumnService as ɵu, SdGridConfigurationResultPipe as ɵv, SdColumnChildrenFilterPipe as ɵw, SdColumnTitlePipe as ɵx, SdCommandFilterPipe as ɵy, SdCommandDisablePipe as ɵz };
 //# sourceMappingURL=sd-angular-core-grid-material.js.map