npm - @sd-angular/core - Versions diffs - 1.1.13 → 1.1.16 - Mend

@sd-angular/core 1.1.13 → 1.1.16

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 (65) hide show

package/bundles/sd-angular-core-date-range.umd.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../node_modules/tslib/tslib.es6.js","../../../../projects/sd-core/date-range/src/lib/date-range.component.ts","../../../../projects/sd-core/date-range/src/lib/date-range.module.ts"],"names":["Object","create","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","value","get","__classPrivateFieldSet","set","parse","dateInput","display","monthYearLabel","dateA11yLabel","monthYearA11yLabel","SdDateRange","detectorService","_this","this","id1","uuid.v4","id2","_from","_to","isMobileOrTablet","_name","_form","formControl","FormControl","required","disableErrorMessage","sdChange","EventEmitter","fromChange","toChange","control1","_c1","control2","_c2","_subscription","Subscription","_onChanges","from","Date","isDate","moment","toFormat","to","setValue","emitEvent","onStartChange","event","_a","toDate","emit","onEndChange","clear","isDesktop","defineProperty","prototype","val","NgForm","form","disable","enable","min","max","ngOnDestroy","removeControl","_b","_c","unsubscribe","ngOnInit","addControl","ngAfterViewInit","add","merge","valueChanges","pipe","debounceTime","subscribe","Component","args","selector","template","providers","provide","MAT_DATE_FORMATS","useValue","ɵ0","DeviceDetectorService","Input","Output","NgModule","imports","CommonModule","FormsModule","ReactiveFormsModule","MatFormFieldModule","MatIconModule","MatDatepickerModule","MatMomentDateModule","SdTranslateModule","declarations","exports"],"mappings":"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","sourcesContent":["/! **************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n*************************************************************************** /\r\n/ global Reflect, Promise /\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf \|\|\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign \|\| function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) \|\| r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P \|\| (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments \|\| [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] \|\| ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 \|\| op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t \|\| (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 \|\| n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/* @deprecated /\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/* @deprecated /\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack \|\| arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar \|\| !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar \|\| Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments \|\| []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 \|\| resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state \|\| !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state \|\| !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n EventEmitter,\r\n Output,\r\n OnDestroy,\r\n AfterViewInit,\r\n OnInit\r\n} from '@angular/core';\r\n\r\nimport { FormControl, FormGroup, NgForm } from '@angular/forms';\r\nimport { MatDatepickerInputEvent, } from '@angular/material/datepicker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport moment, { Moment } from 'moment';\r\nimport as uuid from 'uuid';\r\nimport { merge, Subscription } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\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\r\n@Component({\r\n selector: 'sd-date-range',\r\n templateUrl: './date-range.component.html',\r\n styleUrls: ['./date-range.component.scss'],\r\n providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }],\r\n})\r\nexport class SdDateRange implements OnDestroy, OnInit, AfterViewInit {\r\n id1 = `I${uuid.v4()}`;\r\n id2 = `I${uuid.v4()}`;\r\n #from: any = null;\r\n #to: any = null;\r\n isMobileOrTablet = false;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n formControl = new FormControl();\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() disabled = false;\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n @Input() required = false;\r\n @Input() label: string;\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 min: Date;\r\n @Input('min') set _min(val: string) {\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) {\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() set from(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#from !== val) {\r\n this.#from = val;\r\n this.#onChanges();\r\n }\r\n }\r\n @Input() set to(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#to !== val) {\r\n this.#to = val;\r\n this.#onChanges();\r\n }\r\n }\r\n @Output() sdChange = new EventEmitter<{ from: Date, to: Date }>();\r\n @Output() fromChange = new EventEmitter();\r\n @Output() toChange = new EventEmitter();\r\n\r\n control1 = new FormControl();\r\n #c1 = uuid.v4();\r\n control2 = new FormControl();\r\n #c2 = uuid.v4();\r\n #subscription = new Subscription();\r\n constructor(\r\n private detectorService: DeviceDetectorService) {\r\n this.isMobileOrTablet = !this.detectorService.isDesktop();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#c1);\r\n this.#form?.removeControl(this.#c2);\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n ngOnInit() {\r\n this.#form?.addControl(this.#c1, this.control1);\r\n this.#form?.addControl(this.#c2, this.control2);\r\n this.#form?.addControl(this.#name, this.formControl);\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.#subscription.add(merge(this.control1.valueChanges, this.control2.valueChanges).pipe(debounceTime(500)).subscribe(() => {\r\n const from = this.control1.value?.toDate() \|\| null;\r\n const to = this.control2.value?.toDate() \|\| null;\r\n if (this.#from !== from \|\| this.#to !== to) {\r\n if (from && to) {\r\n this.sdChange.emit({\r\n from,\r\n to\r\n });\r\n } else if (!from && !to) {\r\n this.sdChange.emit({\r\n from: null,\r\n to: null\r\n });\r\n }\r\n }\r\n }));\r\n this.#onChanges();\r\n }\r\n\r\n #onChanges = () => {\r\n const from = Date.isDate(this.#from) ? moment(Date.toFormat(this.#from, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n const to = Date.isDate(this.#to) ? moment(Date.toFormat(this.#to, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n this.control1.setValue(from, {\r\n emitEvent: false\r\n });\r\n this.control2.setValue(to, {\r\n emitEvent: false\r\n });\r\n this.formControl.setValue({\r\n from: from,\r\n to: to\r\n }, {\r\n emitEvent: false\r\n });\r\n }\r\n\r\n onStartChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate() \|\| null;\r\n if (value) {\r\n if (new Date(this.#from) !== value) {\r\n this.#from = value;\r\n this.fromChange.emit(value);\r\n }\r\n } else {\r\n this.#from = null;\r\n this.fromChange.emit(null);\r\n }\r\n }\r\n\r\n onEndChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate() \|\| null;\r\n if (value) {\r\n if (new Date(this.#to) !== value) {\r\n this.#to = value;\r\n this.toChange.emit(value);\r\n }\r\n } else {\r\n this.#to = null;\r\n this.toChange.emit(null);\r\n }\r\n }\r\n\r\n clear = () => {\r\n this.control1.setValue(null, {\r\n emitEvent: false\r\n });\r\n this.control2.setValue(null, {\r\n emitEvent: false\r\n });\r\n this.formControl.setValue({\r\n from: null,\r\n to: null\r\n }, {\r\n emitEvent: false\r\n });\r\n this.#from = null;\r\n this.#to = null;\r\n this.fromChange.emit(null);\r\n this.toChange.emit(null);\r\n this.sdChange.emit(this.formControl.value);\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 { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { SdDateRange } from './date-range.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatFormFieldModule,\r\n MatIconModule,\r\n MatDatepickerModule,\r\n MatMomentDateModule,\r\n SdTranslateModule\r\n ],\r\n declarations: [\r\n SdDateRange\r\n ],\r\n exports: [\r\n SdDateRange\r\n ],\r\n providers: [\r\n ]\r\n})\r\nexport class SdDateRangeModule {\r\n\r\n}\r\n"]}
1	+ {"version":3,"sources":["../../../../node_modules/tslib/tslib.es6.js","../../../../projects/sd-core/date-range/src/lib/date-range.component.ts","../../../../projects/sd-core/date-range/src/lib/date-range.module.ts"],"names":["Object","create","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","value","get","__classPrivateFieldSet","set","parse","dateInput","display","monthYearLabel","dateA11yLabel","monthYearA11yLabel","SdDateRange","detectorService","formConfig","_this","this","id1","uuid.v4","id2","_from","_to","isMobileOrTablet","_name","_form","formControl","FormControl","required","disableErrorMessage","sdChange","EventEmitter","fromChange","toChange","control1","_c1","control2","_c2","_subscription","Subscription","_onChanges","from","Date","isDate","moment","toFormat","to","setValue","emitEvent","onStartChange","event","_a","toDate","emit","onEndChange","clear","isDesktop","defineProperty","prototype","val","NgForm","form","disable","enable","min","max","ngOnDestroy","removeControl","_b","_c","unsubscribe","ngOnInit","appearance","addControl","_d","ngAfterViewInit","add","merge","valueChanges","pipe","debounceTime","subscribe","Component","args","selector","template","providers","provide","MAT_DATE_FORMATS","useValue","ɵ0","DeviceDetectorService","Inject","FORM_CONFIG","type","Optional","Input","Output","NgModule","imports","CommonModule","FormsModule","ReactiveFormsModule","MatFormFieldModule","MatIconModule","MatDatepickerModule","MatMomentDateModule","SdTranslateModule","declarations","exports"],"mappings":"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","sourcesContent":["/! **************************************************************************\r\nCopyright (c) Microsoft Corporation.\r\n\r\nPermission to use, copy, modify, and/or distribute this software for any\r\npurpose with or without fee is hereby granted.\r\n\r\nTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\r\nREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\r\nAND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\r\nINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\r\nLOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\r\nOTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\r\nPERFORMANCE OF THIS SOFTWARE.\r\n*************************************************************************** /\r\n/ global Reflect, Promise /\r\n\r\nvar extendStatics = function(d, b) {\r\n extendStatics = Object.setPrototypeOf \|\|\r\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|\r\n function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };\r\n return extendStatics(d, b);\r\n};\r\n\r\nexport function __extends(d, b) {\r\n if (typeof b !== \"function\" && b !== null)\r\n throw new TypeError(\"Class extends value \" + String(b) + \" is not a constructor or null\");\r\n extendStatics(d, b);\r\n function __() { this.constructor = d; }\r\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\r\n}\r\n\r\nexport var __assign = function() {\r\n __assign = Object.assign \|\| function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n }\r\n return __assign.apply(this, arguments);\r\n}\r\n\r\nexport function __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nexport function __decorate(decorators, target, key, desc) {\r\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) \|\| r;\r\n return c > 3 && r && Object.defineProperty(target, key, r), r;\r\n}\r\n\r\nexport function __param(paramIndex, decorator) {\r\n return function (target, key) { decorator(target, key, paramIndex); }\r\n}\r\n\r\nexport function __metadata(metadataKey, metadataValue) {\r\n if (typeof Reflect === \"object\" && typeof Reflect.metadata === \"function\") return Reflect.metadata(metadataKey, metadataValue);\r\n}\r\n\r\nexport function __awaiter(thisArg, _arguments, P, generator) {\r\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\r\n return new (P \|\| (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments \|\| [])).next());\r\n });\r\n}\r\n\r\nexport function __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n if (f = 1, y && (t = op[0] & 2 ? y[\"return\"] : op[0] ? y[\"throw\"] \|\| ((t = y[\"return\"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 \|\| op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t \|\| (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\r\n\r\nexport var __createBinding = Object.create ? (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });\r\n}) : (function(o, m, k, k2) {\r\n if (k2 === undefined) k2 = k;\r\n o[k2] = m[k];\r\n});\r\n\r\nexport function __exportStar(m, o) {\r\n for (var p in m) if (p !== \"default\" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p);\r\n}\r\n\r\nexport function __values(o) {\r\n var s = typeof Symbol === \"function\" && Symbol.iterator, m = s && o[s], i = 0;\r\n if (m) return m.call(o);\r\n if (o && typeof o.length === \"number\") return {\r\n next: function () {\r\n if (o && i >= o.length) o = void 0;\r\n return { value: o && o[i++], done: !o };\r\n }\r\n };\r\n throw new TypeError(s ? \"Object is not iterable.\" : \"Symbol.iterator is not defined.\");\r\n}\r\n\r\nexport function __read(o, n) {\r\n var m = typeof Symbol === \"function\" && o[Symbol.iterator];\r\n if (!m) return o;\r\n var i = m.call(o), r, ar = [], e;\r\n try {\r\n while ((n === void 0 \|\| n-- > 0) && !(r = i.next()).done) ar.push(r.value);\r\n }\r\n catch (error) { e = { error: error }; }\r\n finally {\r\n try {\r\n if (r && !r.done && (m = i[\"return\"])) m.call(i);\r\n }\r\n finally { if (e) throw e.error; }\r\n }\r\n return ar;\r\n}\r\n\r\n/* @deprecated /\r\nexport function __spread() {\r\n for (var ar = [], i = 0; i < arguments.length; i++)\r\n ar = ar.concat(__read(arguments[i]));\r\n return ar;\r\n}\r\n\r\n/* @deprecated /\r\nexport function __spreadArrays() {\r\n for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;\r\n for (var r = Array(s), k = 0, i = 0; i < il; i++)\r\n for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)\r\n r[k] = a[j];\r\n return r;\r\n}\r\n\r\nexport function __spreadArray(to, from, pack) {\r\n if (pack \|\| arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {\r\n if (ar \|\| !(i in from)) {\r\n if (!ar) ar = Array.prototype.slice.call(from, 0, i);\r\n ar[i] = from[i];\r\n }\r\n }\r\n return to.concat(ar \|\| Array.prototype.slice.call(from));\r\n}\r\n\r\nexport function __await(v) {\r\n return this instanceof __await ? (this.v = v, this) : new __await(v);\r\n}\r\n\r\nexport function __asyncGenerator(thisArg, _arguments, generator) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var g = generator.apply(thisArg, _arguments \|\| []), i, q = [];\r\n return i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i;\r\n function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 \|\| resume(n, v); }); }; }\r\n function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }\r\n function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }\r\n function fulfill(value) { resume(\"next\", value); }\r\n function reject(value) { resume(\"throw\", value); }\r\n function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }\r\n}\r\n\r\nexport function __asyncDelegator(o) {\r\n var i, p;\r\n return i = {}, verb(\"next\"), verb(\"throw\", function (e) { throw e; }), verb(\"return\"), i[Symbol.iterator] = function () { return this; }, i;\r\n function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === \"return\" } : f ? f(v) : v; } : f; }\r\n}\r\n\r\nexport function __asyncValues(o) {\r\n if (!Symbol.asyncIterator) throw new TypeError(\"Symbol.asyncIterator is not defined.\");\r\n var m = o[Symbol.asyncIterator], i;\r\n return m ? m.call(o) : (o = typeof __values === \"function\" ? __values(o) : o[Symbol.iterator](), i = {}, verb(\"next\"), verb(\"throw\"), verb(\"return\"), i[Symbol.asyncIterator] = function () { return this; }, i);\r\n function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }\r\n function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }\r\n}\r\n\r\nexport function __makeTemplateObject(cooked, raw) {\r\n if (Object.defineProperty) { Object.defineProperty(cooked, \"raw\", { value: raw }); } else { cooked.raw = raw; }\r\n return cooked;\r\n};\r\n\r\nvar __setModuleDefault = Object.create ? (function(o, v) {\r\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\r\n}) : function(o, v) {\r\n o[\"default\"] = v;\r\n};\r\n\r\nexport function __importStar(mod) {\r\n if (mod && mod.__esModule) return mod;\r\n var result = {};\r\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\r\n __setModuleDefault(result, mod);\r\n return result;\r\n}\r\n\r\nexport function __importDefault(mod) {\r\n return (mod && mod.__esModule) ? mod : { default: mod };\r\n}\r\n\r\nexport function __classPrivateFieldGet(receiver, state, kind, f) {\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a getter\");\r\n if (typeof state === \"function\" ? receiver !== state \|\| !f : !state.has(receiver)) throw new TypeError(\"Cannot read private member from an object whose class did not declare it\");\r\n return kind === \"m\" ? f : kind === \"a\" ? f.call(receiver) : f ? f.value : state.get(receiver);\r\n}\r\n\r\nexport function __classPrivateFieldSet(receiver, state, value, kind, f) {\r\n if (kind === \"m\") throw new TypeError(\"Private method is not writable\");\r\n if (kind === \"a\" && !f) throw new TypeError(\"Private accessor was defined without a setter\");\r\n if (typeof state === \"function\" ? receiver !== state \|\| !f : !state.has(receiver)) throw new TypeError(\"Cannot write private member to an object whose class did not declare it\");\r\n return (kind === \"a\" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;\r\n}\r\n","import {\r\n Component,\r\n Input,\r\n EventEmitter,\r\n Output,\r\n OnDestroy,\r\n AfterViewInit,\r\n OnInit,\r\n Inject,\r\n Optional\r\n} from '@angular/core';\r\n\r\nimport { FormControl, FormGroup, NgForm } from '@angular/forms';\r\nimport { MatDatepickerInputEvent, } from '@angular/material/datepicker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport moment, { Moment } from 'moment';\r\nimport as uuid from 'uuid';\r\nimport { merge, Subscription } from 'rxjs';\r\nimport { debounceTime } from 'rxjs/operators';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\nimport { FORM_CONFIG, IFormConfiguration } from '@sd-angular/core/common';\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\r\n@Component({\r\n selector: 'sd-date-range',\r\n templateUrl: './date-range.component.html',\r\n styleUrls: ['./date-range.component.scss'],\r\n providers: [{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }],\r\n})\r\nexport class SdDateRange implements OnDestroy, OnInit, AfterViewInit {\r\n id1 = `I${uuid.v4()}`;\r\n id2 = `I${uuid.v4()}`;\r\n #from: any = null;\r\n #to: any = null;\r\n isMobileOrTablet = false;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n @Input() appearance: MatFormFieldAppearance;\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n formControl = new FormControl();\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() disabled = false;\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n @Input() required = false;\r\n @Input() label: string;\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 min: Date;\r\n @Input('min') set _min(val: string) {\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) {\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() set from(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#from !== val) {\r\n this.#from = val;\r\n this.#onChanges();\r\n }\r\n }\r\n @Input() set to(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#to !== val) {\r\n this.#to = val;\r\n this.#onChanges();\r\n }\r\n }\r\n @Output() sdChange = new EventEmitter<{ from: Date, to: Date }>();\r\n @Output() fromChange = new EventEmitter();\r\n @Output() toChange = new EventEmitter();\r\n\r\n control1 = new FormControl();\r\n #c1 = uuid.v4();\r\n control2 = new FormControl();\r\n #c2 = uuid.v4();\r\n #subscription = new Subscription();\r\n constructor(\r\n private detectorService: DeviceDetectorService,\r\n @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\r\n this.isMobileOrTablet = !this.detectorService.isDesktop();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#c1);\r\n this.#form?.removeControl(this.#c2);\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n ngOnInit() {\r\n this.appearance = this.appearance \|\| this.formConfig?.appearance;\r\n this.#form?.addControl(this.#c1, this.control1);\r\n this.#form?.addControl(this.#c2, this.control2);\r\n this.#form?.addControl(this.#name, this.formControl);\r\n }\r\n\r\n ngAfterViewInit() {\r\n this.#subscription.add(merge(this.control1.valueChanges, this.control2.valueChanges).pipe(debounceTime(500)).subscribe(() => {\r\n const from = this.control1.value?.toDate() \|\| null;\r\n const to = this.control2.value?.toDate() \|\| null;\r\n if (this.#from !== from \|\| this.#to !== to) {\r\n if (from && to) {\r\n this.sdChange.emit({\r\n from,\r\n to\r\n });\r\n } else if (!from && !to) {\r\n this.sdChange.emit({\r\n from: null,\r\n to: null\r\n });\r\n }\r\n }\r\n }));\r\n this.#onChanges();\r\n }\r\n\r\n #onChanges = () => {\r\n const from = Date.isDate(this.#from) ? moment(Date.toFormat(this.#from, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n const to = Date.isDate(this.#to) ? moment(Date.toFormat(this.#to, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n this.control1.setValue(from, {\r\n emitEvent: false\r\n });\r\n this.control2.setValue(to, {\r\n emitEvent: false\r\n });\r\n this.formControl.setValue({\r\n from: from,\r\n to: to\r\n }, {\r\n emitEvent: false\r\n });\r\n }\r\n\r\n onStartChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate() \|\| null;\r\n if (value) {\r\n if (new Date(this.#from) !== value) {\r\n this.#from = value;\r\n this.fromChange.emit(value);\r\n }\r\n } else {\r\n this.#from = null;\r\n this.fromChange.emit(null);\r\n }\r\n }\r\n\r\n onEndChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate() \|\| null;\r\n if (value) {\r\n if (new Date(this.#to) !== value) {\r\n this.#to = value;\r\n this.toChange.emit(value);\r\n }\r\n } else {\r\n this.#to = null;\r\n this.toChange.emit(null);\r\n }\r\n }\r\n\r\n clear = () => {\r\n this.control1.setValue(null, {\r\n emitEvent: false\r\n });\r\n this.control2.setValue(null, {\r\n emitEvent: false\r\n });\r\n this.formControl.setValue({\r\n from: null,\r\n to: null\r\n }, {\r\n emitEvent: false\r\n });\r\n this.#from = null;\r\n this.#to = null;\r\n this.fromChange.emit(null);\r\n this.toChange.emit(null);\r\n this.sdChange.emit(this.formControl.value);\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 { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { SdDateRange } from './date-range.component';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatFormFieldModule,\r\n MatIconModule,\r\n MatDatepickerModule,\r\n MatMomentDateModule,\r\n SdTranslateModule\r\n ],\r\n declarations: [\r\n SdDateRange\r\n ],\r\n exports: [\r\n SdDateRange\r\n ],\r\n providers: [\r\n ]\r\n})\r\nexport class SdDateRangeModule {\r\n\r\n}\r\n"]}

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

@@ -589,7 +589,7 @@
     SdDateTime.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-date-time',
-                    template: "<label *ngIf=\"!appearance && label\" class=\"d-block pb-0 T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n    *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container\r\n    *ngIf=\"sdView?.templateRef && !isFocused && !datePicker?.opened && !dateTimePicker?.opened; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field *ngIf=\"type === 'datetime' || type === 'time'\" class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage }\"\r\n      [appearance]=\"appearance || 'outline'\">\r\n      <mat-label *ngIf=\"appearance && label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [ngxMatDatetimePicker]=\"picker1\" placeholder=\"{{ placeholder || label }}\"\r\n        [min]=\"min\" [required]=\"isRequired\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\r\n      <!-- <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && picker1.open()\" matSuffix>today\r\n      </mat-icon> -->\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker1\">\r\n      </mat-datepicker-toggle>\r\n      <ngx-mat-datetime-picker #picker1 [defaultTime]=\"defaultTime\" [touchUi]=\"isMobileOrTablet\" [showSpinners]=\"false\"\r\n        (opened)=\"onFocus()\" (closed)=\"onBlur();focusInputElement()\">\r\n      </ngx-mat-datetime-picker>\r\n\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMin && !disableErrorMessage\">\r\n        {{ \"Min date\" | sdTranslate }}:\r\n        <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMax && !disableErrorMessage\">\r\n        {{ \"Max date\" | sdTranslate }}:\r\n        <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && !disableErrorMessage\">\r\n        {{ \"Parse error\" | sdTranslate }}:\r\n        <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"type === 'date'\" class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm' , 'no-padding-wrapper': disableErrorMessage}\"\r\n      [appearance]=\"appearance || 'outline'\">\r\n      <mat-label *ngIf=\"appearance && label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [required]=\"isRequired\" [matDatepicker]=\"picker2\"\r\n        placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && picker2.open()\" #btn matSuffix>today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #picker2 [touchUi]=\"isMobileOrTablet\"></mat-datepicker>\r\n\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <!-- <ngx-mat-timepicker *ngIf=\"type === 'time'\" formControlName=\"name\" [disabled]=\"disabled\" showSpinners=\"false\" stepHour=\"1\"\r\n  stepMinute=\"1\" stepSecond=\"1\">\r\n</ngx-mat-timepicker> -->\r\n    <mat-form-field *ngIf=\"type === 'month'\" class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm' , 'no-padding-wrapper': disableErrorMessage}\" appearance=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [required]=\"isRequired\" [matDatepicker]=\"pickerMonth\"\r\n        placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\r\n\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && pickerMonth.open()\" #btn matSuffix>\r\n        today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #pickerMonth [touchUi]=\"isMobileOrTablet\" startView=\"multi-year\"\r\n        (monthSelected)=\"setMonthAndYear($event, pickerMonth)\"></mat-datepicker>\r\n\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>",
+                    template: "<label *ngIf=\"!appearance && label\" class=\"d-block mb-0 T14M\">{{label}} <span class=\"text-danger mb-2\"\r\n    *ngIf=\"required\">*</span></label>\r\n<div class=\"d-flex align-items-center\" [class.sd-view]=\"sdView?.templateRef\" [class.c-focused]=\"isFocused\"\r\n  [class.c-disabled]=\"formControl.disabled\" (click)=\"onClick()\">\r\n  <ng-container\r\n    *ngIf=\"sdView?.templateRef && !isFocused && !datePicker?.opened && !dateTimePicker?.opened; else default\">\r\n    <ng-container *ngTemplateOutlet=\"sdView.templateRef;context: { value: formControl.value }\">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field *ngIf=\"type === 'datetime' || type === 'time'\" class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm', 'no-padding-wrapper': disableErrorMessage }\"\r\n      [appearance]=\"appearance || 'outline'\">\r\n      <mat-label *ngIf=\"appearance && label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [ngxMatDatetimePicker]=\"picker1\" placeholder=\"{{ placeholder || label }}\"\r\n        [min]=\"min\" [required]=\"isRequired\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\r\n      <!-- <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && picker1.open()\" matSuffix>today\r\n      </mat-icon> -->\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-datepicker-toggle matSuffix [for]=\"picker1\">\r\n      </mat-datepicker-toggle>\r\n      <ngx-mat-datetime-picker #picker1 [defaultTime]=\"defaultTime\" [touchUi]=\"isMobileOrTablet\" [showSpinners]=\"false\"\r\n        (opened)=\"onFocus()\" (closed)=\"onBlur();focusInputElement()\">\r\n      </ngx-mat-datetime-picker>\r\n\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMin && !disableErrorMessage\">\r\n        {{ \"Min date\" | sdTranslate }}:\r\n        <strong>{{ min | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerMax && !disableErrorMessage\">\r\n        {{ \"Max date\" | sdTranslate }}:\r\n        <strong>{{ max | date: \"dd/MM/yyyy HH:mm\" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.matDatetimePickerParse && !disableErrorMessage\">\r\n        {{ \"Parse error\" | sdTranslate }}:\r\n        <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf=\"type === 'date'\" class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm' , 'no-padding-wrapper': disableErrorMessage}\"\r\n      [appearance]=\"appearance || 'outline'\">\r\n      <mat-label *ngIf=\"appearance && label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [required]=\"isRequired\" [matDatepicker]=\"picker2\"\r\n        placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && picker2.open()\" #btn matSuffix>today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #picker2 [touchUi]=\"isMobileOrTablet\"></mat-datepicker>\r\n\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <!-- <ngx-mat-timepicker *ngIf=\"type === 'time'\" formControlName=\"name\" [disabled]=\"disabled\" showSpinners=\"false\" stepHour=\"1\"\r\n  stepMinute=\"1\" stepSecond=\"1\">\r\n</ngx-mat-timepicker> -->\r\n    <mat-form-field *ngIf=\"type === 'month'\" class=\"sd-md\"\r\n      [ngClass]=\"{ 'sd-sm': size === 'sm' , 'no-padding-wrapper': disableErrorMessage}\" appearance=\"outline\">\r\n      <mat-label *ngIf=\"label\">{{ label }}</mat-label>\r\n      <input [id]=\"id\" matInput (dateInput)=\"onChange($event)\" [autocomplete]=\"id\" autocorrect=\"off\"\r\n        [formControl]=\"formControl\" [required]=\"isRequired\" [matDatepicker]=\"pickerMonth\"\r\n        placeholder=\"{{ placeholder || label }}\" [min]=\"min\" [max]=\"max\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" #input />\r\n\r\n      <mat-icon *ngIf=\"formControl?.value && !isRequired && !formControl.disabled\" class=\"pointer sd-suffix-icon\"\r\n        (click)=\"clear($event)\" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon class=\"pointer sd-suffix-icon\" (click)=\"!formControl?.disabled && pickerMonth.open()\" #btn matSuffix>\r\n        today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #pickerMonth [touchUi]=\"isMobileOrTablet\" startView=\"multi-year\"\r\n        (monthSelected)=\"setMonthAndYear($event, pickerMonth)\"></mat-datepicker>\r\n\r\n      <mat-error *ngIf=\"formControl?.errors?.required && !disableErrorMessage\">\r\n        {{ \"This field is required\" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf=\"formControl?.errors?.customValidator && !disableErrorMessage\">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     providers: [
                         { provide: core$1.MAT_DATE_FORMATS, useValue: ɵ0 },

package/bundles/sd-angular-core-date-time.umd.min.js CHANGED Viewed

@@ -12,5 +12,5 @@
     LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */Object.create;var v,C,k,x;Object.create;function D(e,r,t,a){if("a"===t&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?e!==r||!a:!r.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?a:"a"===t?a.call(e):a?a.value:r.get(e)}function I(e,r,t,a,n){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?e!==r||!n:!r.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===a?n.call(e,t):n?n.value=t:r.set(e,t),t}var w={parse:{dateInput:"DD/MM/YYYY"},display:{dateInput:"DD/MM/YYYY",monthYearLabel:"MMM YYYY",dateA11yLabel:"LL",monthYearA11yLabel:"MMMM YYYY"}},Y={parse:{dateInput:"DD/MM/YYYY HH:mm"},display:{dateInput:"DD/MM/YYYY HH:mm",monthYearLabel:"MMM YYYY",dateA11yLabel:"LL",monthYearA11yLabel:"MMMM YYYY"}},T=function(){function e(e,t,a){var n=this;this.ref=e,this.formConfig=a,this.id="I"+l.v4(),this.isMobileOrTablet=!1,v.set(this,void 0),C.set(this,l.v4()),this.disableErrorMessage=!1,this.formControl=new c.SdFormControl,k.set(this,void 0),this.type="datetime",this.isRequired=!1,this.sdChange=new r.EventEmitter,this.modelChange=new r.EventEmitter,x.set(this,new u.Subscription),this.isFocused=!1,this.onFocus=function(){n.isFocused=!0},this.onBlur=function(){n.isFocused=!1},this.onClick=function(){var e;(null===(e=n.sdView)||void 0===e?void 0:e.templateRef)&&(n.formControl.disabled||n.isFocused||n.focus())},this.blur=function(){var e,r;null===(r=null===(e=n.input)||void 0===e?void 0:e.nativeElement)||void 0===r||r.blur()},this.focus=function(){n.isFocused=!0,setTimeout((function(){var e,r,t,a;null===(r=null===(e=n.input)||void 0===e?void 0:e.nativeElement)||void 0===r||r.focus(),"date"===n.type?null===(t=n.datePicker)||void 0===t||t.open():null===(a=n.dateTimePicker)||void 0===a||a.open()}),100)},this.onChange=function(e){var r,t,a,o,i=null===(r=e.value)||void 0===r?void 0:r.toDate();n.dateTimePicker||null===(a=null===(t=n.input)||void 0===t?void 0:t.nativeElement)||void 0===a||a.focus(),i?new Date(D(n,v))!==i&&(n.modelChange.emit(i),n.sdChange.emit(i)):(null===(o=n.formControl)||void 0===o?void 0:o.value)||(n.modelChange.emit(null),n.sdChange.emit(null))},this.clear=function(e){null==e||e.stopPropagation(),n.formControl.value&&(n.formControl.setValue(null),n.modelChange.emit(null),n.sdChange.emit(null))},this.setMonthAndYear=function(e,r){var t=n.formControl.value||y.default();t.month(e.month()),t.year(e.year()),n.formControl.setValue(t),r.close(),n.modelChange.emit(t),n.sdChange.emit(t)},this.isMobileOrTablet=!t.isDesktop()}return Object.defineProperty(e.prototype,"name",{set:function(e){e&&I(this,C,e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_disableErrorMessage",{set:function(e){this.disableErrorMessage=""===e||e,e=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_min",{set:function(e){Date.isDate(e)?this.min=new Date(e):this.min=null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_max",{set:function(e){Date.isDate(e)?this.max=new Date(e):this.max=null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"form",{set:function(e){e&&(e instanceof a.NgForm?I(this,k,e.form):I(this,k,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){(e=""===e||e)?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,this.isRequired?this.formControl.setValidators([a.Validators.required]):this.formControl.clearValidators()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"minDate",{set:function(e){Date.isDate(e)?this.min=new Date(e):this.min=null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"maxDate",{set:function(e){Date.isDate(e)?this.max=new Date(e):this.max=null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){if(Date.isDate(e)||(e=null),D(this,v)!==e){I(this,v,e);var r=Date.isDate(D(this,v))?y.default(Date.toFormat(D(this,v),"MM/dd/yyyy HH:mm:ss"),"MM/DD/YYYY HH:mm:ss"):null;this.formControl.setValue(r)}},enumerable:!1,configurable:!0}),e.prototype.ngOnDestroy=function(){var e;null===(e=D(this,k))||void 0===e||e.removeControl(D(this,C)),D(this,x).unsubscribe()},e.prototype.ngOnInit=function(){var e,r,t=this;this.appearance=this.appearance||(null===(e=this.formConfig)||void 0===e?void 0:e.appearance),D(this,x).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()}))),null===(r=D(this,k))||void 0===r||r.addControl(D(this,C),this.formControl)},e.prototype.ngAfterViewInit=function(){},e.prototype.focusInputElement=function(){var e,r;null===(r=null===(e=this.input)||void 0===e?void 0:e.nativeElement)||void 0===r||r.focus()},e}();v=new WeakMap,C=new WeakMap,k=new WeakMap,x=new WeakMap,T.decorators=[{type:r.Component,args:[{selector:"sd-date-time",template:'<label *ngIf="!appearance && label" class="d-block pb-0 T14M">{{label}} <span class="text-danger mb-2"\r\n    *ngIf="required">*</span></label>\r\n<div class="d-flex align-items-center" [class.sd-view]="sdView?.templateRef" [class.c-focused]="isFocused"\r\n  [class.c-disabled]="formControl.disabled" (click)="onClick()">\r\n  <ng-container\r\n    *ngIf="sdView?.templateRef && !isFocused && !datePicker?.opened && !dateTimePicker?.opened; else default">\r\n    <ng-container *ngTemplateOutlet="sdView.templateRef;context: { value: formControl.value }">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field *ngIf="type === \'datetime\' || type === \'time\'" class="sd-md"\r\n      [ngClass]="{ \'sd-sm\': size === \'sm\', \'no-padding-wrapper\': disableErrorMessage }"\r\n      [appearance]="appearance || \'outline\'">\r\n      <mat-label *ngIf="appearance && label">{{ label }}</mat-label>\r\n      <input [id]="id" matInput (dateInput)="onChange($event)" [autocomplete]="id" autocorrect="off"\r\n        [formControl]="formControl" [ngxMatDatetimePicker]="picker1" placeholder="{{ placeholder || label }}"\r\n        [min]="min" [required]="isRequired" [max]="max" (focus)="onFocus()" (blur)="onBlur()" #input />\r\n      \x3c!-- <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && picker1.open()" matSuffix>today\r\n      </mat-icon> --\x3e\r\n      <mat-icon *ngIf="formControl?.value && !isRequired && !formControl.disabled" class="pointer sd-suffix-icon"\r\n        (click)="clear($event)" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-datepicker-toggle matSuffix [for]="picker1">\r\n      </mat-datepicker-toggle>\r\n      <ngx-mat-datetime-picker #picker1 [defaultTime]="defaultTime" [touchUi]="isMobileOrTablet" [showSpinners]="false"\r\n        (opened)="onFocus()" (closed)="onBlur();focusInputElement()">\r\n      </ngx-mat-datetime-picker>\r\n\r\n      <mat-error *ngIf="formControl?.errors?.required && !disableErrorMessage">\r\n        {{ "This field is required" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.matDatetimePickerMin && !disableErrorMessage">\r\n        {{ "Min date" | sdTranslate }}:\r\n        <strong>{{ min | date: "dd/MM/yyyy HH:mm" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.matDatetimePickerMax && !disableErrorMessage">\r\n        {{ "Max date" | sdTranslate }}:\r\n        <strong>{{ max | date: "dd/MM/yyyy HH:mm" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.matDatetimePickerParse && !disableErrorMessage">\r\n        {{ "Parse error" | sdTranslate }}:\r\n        <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.customValidator && !disableErrorMessage">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf="type === \'date\'" class="sd-md"\r\n      [ngClass]="{ \'sd-sm\': size === \'sm\' , \'no-padding-wrapper\': disableErrorMessage}"\r\n      [appearance]="appearance || \'outline\'">\r\n      <mat-label *ngIf="appearance && label">{{ label }}</mat-label>\r\n      <input [id]="id" matInput (dateInput)="onChange($event)" [autocomplete]="id" autocorrect="off"\r\n        [formControl]="formControl" [required]="isRequired" [matDatepicker]="picker2"\r\n        placeholder="{{ placeholder || label }}" [min]="min" [max]="max" (focus)="onFocus()" (blur)="onBlur()" #input />\r\n      <mat-icon *ngIf="formControl?.value && !isRequired && !formControl.disabled" class="pointer sd-suffix-icon"\r\n        (click)="clear($event)" matSuffix>cancel\r\n      </mat-icon>\r\n\r\n      <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && picker2.open()" #btn matSuffix>today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #picker2 [touchUi]="isMobileOrTablet"></mat-datepicker>\r\n\r\n      <mat-error *ngIf="formControl?.errors?.required && !disableErrorMessage">\r\n        {{ "This field is required" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.customValidator && !disableErrorMessage">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    \x3c!-- <ngx-mat-timepicker *ngIf="type === \'time\'" formControlName="name" [disabled]="disabled" showSpinners="false" stepHour="1"\r\n  stepMinute="1" stepSecond="1">\r\n</ngx-mat-timepicker> --\x3e\r\n    <mat-form-field *ngIf="type === \'month\'" class="sd-md"\r\n      [ngClass]="{ \'sd-sm\': size === \'sm\' , \'no-padding-wrapper\': disableErrorMessage}" appearance="outline">\r\n      <mat-label *ngIf="label">{{ label }}</mat-label>\r\n      <input [id]="id" matInput (dateInput)="onChange($event)" [autocomplete]="id" autocorrect="off"\r\n        [formControl]="formControl" [required]="isRequired" [matDatepicker]="pickerMonth"\r\n        placeholder="{{ placeholder || label }}" [min]="min" [max]="max" (focus)="onFocus()" (blur)="onBlur()" #input />\r\n\r\n      <mat-icon *ngIf="formControl?.value && !isRequired && !formControl.disabled" class="pointer sd-suffix-icon"\r\n        (click)="clear($event)" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && pickerMonth.open()" #btn matSuffix>\r\n        today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #pickerMonth [touchUi]="isMobileOrTablet" startView="multi-year"\r\n        (monthSelected)="setMonthAndYear($event, pickerMonth)"></mat-datepicker>\r\n\r\n      <mat-error *ngIf="formControl?.errors?.required && !disableErrorMessage">\r\n        {{ "This field is required" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.customValidator && !disableErrorMessage">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>',changeDetection:r.ChangeDetectionStrategy.OnPush,providers:[{provide:m.MAT_DATE_FORMATS,useValue:w},{provide:i.NGX_MAT_DATE_FORMATS,useValue:Y}],styles:[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]}]}],T.ctorParameters=function(){return[{type:r.ChangeDetectorRef},{type:d.DeviceDetectorService},{type:void 0,decorators:[{type:r.Inject,args:[c.FORM_CONFIG]},{type:r.Optional}]}]},T.propDecorators={name:[{type:r.Input}],appearance:[{type:r.Input}],_disableErrorMessage:[{type:r.Input,args:["disableErrorMessage"]}],_min:[{type:r.Input,args:["min"]}],_max:[{type:r.Input,args:["max"]}],size:[{type:r.Input}],form:[{type:r.Input}],type:[{type:r.Input}],disabled:[{type:r.Input}],required:[{type:r.Input}],label:[{type:r.Input}],placeholder:[{type:r.Input}],defaultTime:[{type:r.Input}],minDate:[{type:r.Input}],maxDate:[{type:r.Input}],validator:[{type:r.Input}],sdChange:[{type:r.Output}],model:[{type:r.Input}],modelChange:[{type:r.Output}],sdView:[{type:r.ContentChild,args:[c.SdViewDefDirective]}],input:[{type:r.ViewChild,args:["input"]}],datePicker:[{type:r.ViewChild,args:[o.MatDatepicker]}],dateTimePicker:[{type:r.ViewChild,args:[i.NgxMatDatetimePicker]}]};var q=function(){};q.decorators=[{type:r.NgModule,args:[{imports:[t.CommonModule,a.FormsModule,a.ReactiveFormsModule,f.MatInputModule,b.MatIconModule,n.MatFormFieldModule,o.MatDatepickerModule,h.MatMomentDateModule,i.NgxMatDatetimePickerModule,i.NgxMatTimepickerModule,g.NgxMatMomentModule,p.SdTranslateModule,c.SdCommonModule],declarations:[T],exports:[c.SdCommonModule,T],providers:[]}]}],e.SdDateTime=T,e.SdDateTimeModule=q,Object.defineProperty(e,"__esModule",{value:!0})}));
+    ***************************************************************************** */Object.create;var v,C,k,x;Object.create;function D(e,r,t,a){if("a"===t&&!a)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof r?e!==r||!a:!r.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===t?a:"a"===t?a.call(e):a?a.value:r.get(e)}function I(e,r,t,a,n){if("m"===a)throw new TypeError("Private method is not writable");if("a"===a&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof r?e!==r||!n:!r.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===a?n.call(e,t):n?n.value=t:r.set(e,t),t}var w={parse:{dateInput:"DD/MM/YYYY"},display:{dateInput:"DD/MM/YYYY",monthYearLabel:"MMM YYYY",dateA11yLabel:"LL",monthYearA11yLabel:"MMMM YYYY"}},Y={parse:{dateInput:"DD/MM/YYYY HH:mm"},display:{dateInput:"DD/MM/YYYY HH:mm",monthYearLabel:"MMM YYYY",dateA11yLabel:"LL",monthYearA11yLabel:"MMMM YYYY"}},T=function(){function e(e,t,a){var n=this;this.ref=e,this.formConfig=a,this.id="I"+l.v4(),this.isMobileOrTablet=!1,v.set(this,void 0),C.set(this,l.v4()),this.disableErrorMessage=!1,this.formControl=new c.SdFormControl,k.set(this,void 0),this.type="datetime",this.isRequired=!1,this.sdChange=new r.EventEmitter,this.modelChange=new r.EventEmitter,x.set(this,new u.Subscription),this.isFocused=!1,this.onFocus=function(){n.isFocused=!0},this.onBlur=function(){n.isFocused=!1},this.onClick=function(){var e;(null===(e=n.sdView)||void 0===e?void 0:e.templateRef)&&(n.formControl.disabled||n.isFocused||n.focus())},this.blur=function(){var e,r;null===(r=null===(e=n.input)||void 0===e?void 0:e.nativeElement)||void 0===r||r.blur()},this.focus=function(){n.isFocused=!0,setTimeout((function(){var e,r,t,a;null===(r=null===(e=n.input)||void 0===e?void 0:e.nativeElement)||void 0===r||r.focus(),"date"===n.type?null===(t=n.datePicker)||void 0===t||t.open():null===(a=n.dateTimePicker)||void 0===a||a.open()}),100)},this.onChange=function(e){var r,t,a,o,i=null===(r=e.value)||void 0===r?void 0:r.toDate();n.dateTimePicker||null===(a=null===(t=n.input)||void 0===t?void 0:t.nativeElement)||void 0===a||a.focus(),i?new Date(D(n,v))!==i&&(n.modelChange.emit(i),n.sdChange.emit(i)):(null===(o=n.formControl)||void 0===o?void 0:o.value)||(n.modelChange.emit(null),n.sdChange.emit(null))},this.clear=function(e){null==e||e.stopPropagation(),n.formControl.value&&(n.formControl.setValue(null),n.modelChange.emit(null),n.sdChange.emit(null))},this.setMonthAndYear=function(e,r){var t=n.formControl.value||y.default();t.month(e.month()),t.year(e.year()),n.formControl.setValue(t),r.close(),n.modelChange.emit(t),n.sdChange.emit(t)},this.isMobileOrTablet=!t.isDesktop()}return Object.defineProperty(e.prototype,"name",{set:function(e){e&&I(this,C,e)},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_disableErrorMessage",{set:function(e){this.disableErrorMessage=""===e||e,e=""===e||e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_min",{set:function(e){Date.isDate(e)?this.min=new Date(e):this.min=null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"_max",{set:function(e){Date.isDate(e)?this.max=new Date(e):this.max=null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"form",{set:function(e){e&&(e instanceof a.NgForm?I(this,k,e.form):I(this,k,e))},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"disabled",{set:function(e){(e=""===e||e)?this.formControl.disable():this.formControl.enable()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"required",{set:function(e){this.isRequired=""===e||e,this.isRequired?this.formControl.setValidators([a.Validators.required]):this.formControl.clearValidators()},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"minDate",{set:function(e){Date.isDate(e)?this.min=new Date(e):this.min=null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"maxDate",{set:function(e){Date.isDate(e)?this.max=new Date(e):this.max=null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"model",{set:function(e){if(Date.isDate(e)||(e=null),D(this,v)!==e){I(this,v,e);var r=Date.isDate(D(this,v))?y.default(Date.toFormat(D(this,v),"MM/dd/yyyy HH:mm:ss"),"MM/DD/YYYY HH:mm:ss"):null;this.formControl.setValue(r)}},enumerable:!1,configurable:!0}),e.prototype.ngOnDestroy=function(){var e;null===(e=D(this,k))||void 0===e||e.removeControl(D(this,C)),D(this,x).unsubscribe()},e.prototype.ngOnInit=function(){var e,r,t=this;this.appearance=this.appearance||(null===(e=this.formConfig)||void 0===e?void 0:e.appearance),D(this,x).add(this.formControl.sdChanges.subscribe((function(){t.ref.markForCheck()}))),null===(r=D(this,k))||void 0===r||r.addControl(D(this,C),this.formControl)},e.prototype.ngAfterViewInit=function(){},e.prototype.focusInputElement=function(){var e,r;null===(r=null===(e=this.input)||void 0===e?void 0:e.nativeElement)||void 0===r||r.focus()},e}();v=new WeakMap,C=new WeakMap,k=new WeakMap,x=new WeakMap,T.decorators=[{type:r.Component,args:[{selector:"sd-date-time",template:'<label *ngIf="!appearance && label" class="d-block mb-0 T14M">{{label}} <span class="text-danger mb-2"\r\n    *ngIf="required">*</span></label>\r\n<div class="d-flex align-items-center" [class.sd-view]="sdView?.templateRef" [class.c-focused]="isFocused"\r\n  [class.c-disabled]="formControl.disabled" (click)="onClick()">\r\n  <ng-container\r\n    *ngIf="sdView?.templateRef && !isFocused && !datePicker?.opened && !dateTimePicker?.opened; else default">\r\n    <ng-container *ngTemplateOutlet="sdView.templateRef;context: { value: formControl.value }">\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #default>\r\n    <mat-form-field *ngIf="type === \'datetime\' || type === \'time\'" class="sd-md"\r\n      [ngClass]="{ \'sd-sm\': size === \'sm\', \'no-padding-wrapper\': disableErrorMessage }"\r\n      [appearance]="appearance || \'outline\'">\r\n      <mat-label *ngIf="appearance && label">{{ label }}</mat-label>\r\n      <input [id]="id" matInput (dateInput)="onChange($event)" [autocomplete]="id" autocorrect="off"\r\n        [formControl]="formControl" [ngxMatDatetimePicker]="picker1" placeholder="{{ placeholder || label }}"\r\n        [min]="min" [required]="isRequired" [max]="max" (focus)="onFocus()" (blur)="onBlur()" #input />\r\n      \x3c!-- <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && picker1.open()" matSuffix>today\r\n      </mat-icon> --\x3e\r\n      <mat-icon *ngIf="formControl?.value && !isRequired && !formControl.disabled" class="pointer sd-suffix-icon"\r\n        (click)="clear($event)" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-datepicker-toggle matSuffix [for]="picker1">\r\n      </mat-datepicker-toggle>\r\n      <ngx-mat-datetime-picker #picker1 [defaultTime]="defaultTime" [touchUi]="isMobileOrTablet" [showSpinners]="false"\r\n        (opened)="onFocus()" (closed)="onBlur();focusInputElement()">\r\n      </ngx-mat-datetime-picker>\r\n\r\n      <mat-error *ngIf="formControl?.errors?.required && !disableErrorMessage">\r\n        {{ "This field is required" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.matDatetimePickerMin && !disableErrorMessage">\r\n        {{ "Min date" | sdTranslate }}:\r\n        <strong>{{ min | date: "dd/MM/yyyy HH:mm" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.matDatetimePickerMax && !disableErrorMessage">\r\n        {{ "Max date" | sdTranslate }}:\r\n        <strong>{{ max | date: "dd/MM/yyyy HH:mm" }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.matDatetimePickerParse && !disableErrorMessage">\r\n        {{ "Parse error" | sdTranslate }}:\r\n        <strong>{{ formControl?.errors?.matDatetimePickerParse?.text }}</strong>\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.customValidator && !disableErrorMessage">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    <mat-form-field *ngIf="type === \'date\'" class="sd-md"\r\n      [ngClass]="{ \'sd-sm\': size === \'sm\' , \'no-padding-wrapper\': disableErrorMessage}"\r\n      [appearance]="appearance || \'outline\'">\r\n      <mat-label *ngIf="appearance && label">{{ label }}</mat-label>\r\n      <input [id]="id" matInput (dateInput)="onChange($event)" [autocomplete]="id" autocorrect="off"\r\n        [formControl]="formControl" [required]="isRequired" [matDatepicker]="picker2"\r\n        placeholder="{{ placeholder || label }}" [min]="min" [max]="max" (focus)="onFocus()" (blur)="onBlur()" #input />\r\n      <mat-icon *ngIf="formControl?.value && !isRequired && !formControl.disabled" class="pointer sd-suffix-icon"\r\n        (click)="clear($event)" matSuffix>cancel\r\n      </mat-icon>\r\n\r\n      <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && picker2.open()" #btn matSuffix>today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #picker2 [touchUi]="isMobileOrTablet"></mat-datepicker>\r\n\r\n      <mat-error *ngIf="formControl?.errors?.required && !disableErrorMessage">\r\n        {{ "This field is required" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.customValidator && !disableErrorMessage">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n    \x3c!-- <ngx-mat-timepicker *ngIf="type === \'time\'" formControlName="name" [disabled]="disabled" showSpinners="false" stepHour="1"\r\n  stepMinute="1" stepSecond="1">\r\n</ngx-mat-timepicker> --\x3e\r\n    <mat-form-field *ngIf="type === \'month\'" class="sd-md"\r\n      [ngClass]="{ \'sd-sm\': size === \'sm\' , \'no-padding-wrapper\': disableErrorMessage}" appearance="outline">\r\n      <mat-label *ngIf="label">{{ label }}</mat-label>\r\n      <input [id]="id" matInput (dateInput)="onChange($event)" [autocomplete]="id" autocorrect="off"\r\n        [formControl]="formControl" [required]="isRequired" [matDatepicker]="pickerMonth"\r\n        placeholder="{{ placeholder || label }}" [min]="min" [max]="max" (focus)="onFocus()" (blur)="onBlur()" #input />\r\n\r\n      <mat-icon *ngIf="formControl?.value && !isRequired && !formControl.disabled" class="pointer sd-suffix-icon"\r\n        (click)="clear($event)" matSuffix>cancel\r\n      </mat-icon>\r\n      <mat-icon class="pointer sd-suffix-icon" (click)="!formControl?.disabled && pickerMonth.open()" #btn matSuffix>\r\n        today\r\n      </mat-icon>\r\n\r\n      <mat-datepicker #pickerMonth [touchUi]="isMobileOrTablet" startView="multi-year"\r\n        (monthSelected)="setMonthAndYear($event, pickerMonth)"></mat-datepicker>\r\n\r\n      <mat-error *ngIf="formControl?.errors?.required && !disableErrorMessage">\r\n        {{ "This field is required" | sdTranslate }}\r\n      </mat-error>\r\n      <mat-error *ngIf="formControl?.errors?.customValidator && !disableErrorMessage">\r\n        <strong>{{ formControl?.errors?.customValidator }}</strong>\r\n      </mat-error>\r\n    </mat-form-field>\r\n  </ng-template>\r\n</div>',changeDetection:r.ChangeDetectionStrategy.OnPush,providers:[{provide:m.MAT_DATE_FORMATS,useValue:w},{provide:i.NGX_MAT_DATE_FORMATS,useValue:Y}],styles:[":host{display:block;padding-top:5px}:host ::ng-deep .mat-form-field.no-padding-wrapper .mat-form-field-wrapper{padding-bottom:0}:host ::ng-deep .mat-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{background:#f6f6f6;color:#e9e9e9}:host ::ng-deep .mat-form-field input.mat-input-element:disabled{color:#4d4d4d!important}:host ::ng-deep .mat-form-field .mat-placeholder-required{color:#f82c13}.sd-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}"]}]}],T.ctorParameters=function(){return[{type:r.ChangeDetectorRef},{type:d.DeviceDetectorService},{type:void 0,decorators:[{type:r.Inject,args:[c.FORM_CONFIG]},{type:r.Optional}]}]},T.propDecorators={name:[{type:r.Input}],appearance:[{type:r.Input}],_disableErrorMessage:[{type:r.Input,args:["disableErrorMessage"]}],_min:[{type:r.Input,args:["min"]}],_max:[{type:r.Input,args:["max"]}],size:[{type:r.Input}],form:[{type:r.Input}],type:[{type:r.Input}],disabled:[{type:r.Input}],required:[{type:r.Input}],label:[{type:r.Input}],placeholder:[{type:r.Input}],defaultTime:[{type:r.Input}],minDate:[{type:r.Input}],maxDate:[{type:r.Input}],validator:[{type:r.Input}],sdChange:[{type:r.Output}],model:[{type:r.Input}],modelChange:[{type:r.Output}],sdView:[{type:r.ContentChild,args:[c.SdViewDefDirective]}],input:[{type:r.ViewChild,args:["input"]}],datePicker:[{type:r.ViewChild,args:[o.MatDatepicker]}],dateTimePicker:[{type:r.ViewChild,args:[i.NgxMatDatetimePicker]}]};var q=function(){};q.decorators=[{type:r.NgModule,args:[{imports:[t.CommonModule,a.FormsModule,a.ReactiveFormsModule,f.MatInputModule,b.MatIconModule,n.MatFormFieldModule,o.MatDatepickerModule,h.MatMomentDateModule,i.NgxMatDatetimePickerModule,i.NgxMatTimepickerModule,g.NgxMatMomentModule,p.SdTranslateModule,c.SdCommonModule],declarations:[T],exports:[c.SdCommonModule,T],providers:[]}]}],e.SdDateTime=T,e.SdDateTimeModule=q,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=sd-angular-core-date-time.umd.min.js.map

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

@@ -816,7 +816,7 @@
     SdGridFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-filter',
-                    template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" multiple=\"true\">\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"isVisible\">\r\n  <div *ngIf=\"!isMobileOrTablet && ((columns?.length && !filter?.inlineColumn) || externalFilters?.length || filterDefs?.length)\"\r\n    class=\"row mx-0 pb-10\">\r\n    <ng-container *ngIf=\"filter?.sorts?.length\">\r\n      <ng-container *ngFor=\"let field of filter?.sorts\">\r\n        <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n          <ng-container *ngFor=\"let item of columns | sdFilterColumn:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"externalFilters?.length\">\r\n          <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal:field\">\r\n            <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n          </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngFor=\"let item of filterDefs\">\r\n          <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef] && item.sdMaterialFilterDef === field\"\r\n            class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n            <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n            </ng-container>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"!filter?.sorts?.length\">\r\n      <ng-container *ngIf=\"columns?.length && !filter?.inlineColumn\">\r\n        <ng-container *ngFor=\"let item of columns | sdFilterColumn\">\r\n          <ng-container *ngTemplateOutlet=\"filterColumn; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"externalFilters?.length\">\r\n        <ng-container *ngFor=\"let item of externalFilters | sdFilterExternal\">\r\n          <ng-container *ngTemplateOutlet=\"filterExternal; context: {item: item}\"></ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container *ngFor=\"let item of filterDefs\">\r\n        <div *ngIf=\"inlineFilterDef[item.sdMaterialFilterDef]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n          <ng-container *ngTemplateOutlet=\"item.templateRef;context:{filterDef:filterDef, isInline: true}\">\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n  <ng-template #filterColumn let-item=\"item\">\r\n    <div *ngIf=\"inlineColumn[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"columnFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-select>\r\n      <sd-select *ngIf=\"item.type === 'values' && item?.option?.selection !== 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\"\r\n        [multiple]=\"item?.option?.selection === 'MULTIPLE' || item?.item?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n        [filtered]=\"item?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" apperance=\"outline\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"item.type === 'values' && item?.option?.selection === 'AUTOCOMPLETE'\"\r\n        [items]=\"item.option?.items\" [valueField]=\"item.option?.valueField\"\r\n        [displayField]=\"item.option?.displayField\" [(model)]=\"columnFilter[item.field]\" (sdChange)=\"onFilter(item)\"\r\n        [disabled]=\"item.filter?.disabled\" apperance=\"outline\">\r\n      </sd-autocomplete>\r\n      <sd-date-time *ngIf=\"item.type === 'date' || item.type === 'datetime' || item.type === 'time'\"\r\n        [label]=\"item.title\" [(model)]=\"columnFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-date-time>\r\n    </div>\r\n  </ng-template>\r\n  <ng-template #filterExternal let-item=\"item\">\r\n    <div *ngIf=\"inlineExternal[item.field]\" class=\"col-lg-2 col-md-3 col-sm-6 px-8\">\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-input>\r\n      <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\" [(model)]=\"externalFilter[item.field]\"\r\n        (keyupEnter)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-input>\r\n      <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.option?.displayOnTrue || 'True' },\r\n        {value:'0',display:item.option?.displayOnFalse || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n        [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-select>\r\n      <ng-container *ngIf=\"item.type === 'values' && item.option\">\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" [selectAll]=\"item.option.selectAll\" apperance=\"outline\" multiple>\r\n        </sd-select>\r\n        <sd-autocomplete *ngIf=\"item.option?.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n        </sd-autocomplete>\r\n        <sd-select *ngIf=\"item.option?.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n          [items]=\"item.option.items\" [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" filtered=\"true\" apperance=\"outline\" multiple>\r\n        </sd-select>\r\n        <sd-select *ngIf=\"!item.option?.selection\" [label]=\"item.title\" [items]=\"item.option.items\"\r\n          [valueField]=\"item.option.valueField\" [displayField]=\"item.option.displayField\"\r\n          [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n        </sd-select>\r\n      </ng-container>\r\n      <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date' || item.type ==='datetime'\"\r\n        [(model)]=\"externalFilter[item.field]\" [type]=\"item.type\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-date-time>\r\n      <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\"\r\n        [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n        [max]=\"item.maxDate\" (sdChange)=\"onFilter(item)\" apperance=\"outline\">\r\n      </sd-date-range>\r\n    </div>\r\n  </ng-template>\r\n  <sd-popup-filter [columns]=\"columns\" [externalFilters]=\"externalFilters\" (changeFilter)=\"onChangeFilter($event)\"\r\n    (clearFilter)=\"onReset()\" [filterDefs]=\"filterDefs\">\r\n  </sd-popup-filter>\r\n</ng-container>",
                     styles: [":host{display:block;padding-left:0;padding-right:0}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:0}"]
                 },] }
     ];
@@ -2828,7 +2828,7 @@
     SdGridMaterial.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-material',
-                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n            <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"groupedItems\" matSort\r\n              [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n              (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <div *ngIf=\"sdSubInformation?.templateRef\"\r\n                    [@detailExpand]=\"item.isExpanded || gridOption?.subInformation?.always ? 'expanded' : 'collapsed'\">\r\n                    <ng-container *ngIf=\"item.isExpanded || gridOption?.subInformation?.always\">\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 && !gridOption?.subInformation?.always\" 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; index as idx\">\r\n                  <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-editor-validation>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                    <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                      <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">save</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">close</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdGroup\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n                  </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                  <div>\r\n                    <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n                    [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n                    [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n              </ng-container>\r\n              <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n              <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n                <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n              </ng-container>\r\n            </table>\r\n            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditorValidation\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditor\">\r\n                  <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                    <button class=\"c-btn-add\"\r\n                      *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                      (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                      <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                    </button>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                    [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #sdEmptyDataNoRef>\r\n                      <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                    </ng-template>\r\n                  </td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdGroup\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n                </tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                  <span> {{ \"Configure\" | sdTranslate }}</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n        (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n        #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"gridConfigurationObserver | async as gridConfiguration\">\r\n  <ng-container *ngIf=\"\r\n      gridConfiguration\r\n        | sdGridConfigurationResult\r\n          : gridOption\r\n          : sdSubInformation as configuration\r\n    \">\r\n    <ng-container *ngIf=\"!gridOption.filter?.disabled\">\r\n      <sd-grid-filter [filter]=\"gridOption?.filter\" [columns]=\"configuration.firstColumns\" [filterDefs]=\"filterDefs\">\r\n      </sd-grid-filter>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"items | sdGroup:gridOption; $implicit as groupedItems\">\r\n      <div class=\"c-container {{ gridOption?.style?.grid }}\" [ngClass]=\"{ 'mat-elevation-z2': gridOption?.shadow }\">\r\n        <div class=\"c-loading\" *ngIf=\"isLoading\">\r\n          <mat-spinner *ngIf=\"isLoading\"></mat-spinner>\r\n        </div>\r\n        <ng-container>\r\n          <div class=\"c-table\" sdScroll [ngStyle]=\"{\r\n            'max-height': gridOption?.maxHeight,\r\n            'min-height': gridOption?.minHeight\r\n          }\">\r\n            <table *ngIf=\"items?.length; else elseEmpty\" mat-table [dataSource]=\"groupedItems\" matSort\r\n              [matSortDisabled]=\"!gridOption.sortable\" cdkDropList cdkDropListOrientation=\"horizontal\"\r\n              [cdkDropListDisabled]=\"!gridOption.dropDragColumnEnable\"\r\n              (cdkDropListDropped)=\"drop($event, configuration.displayedColumns)\" multiTemplateDataRows>\r\n\r\n              <ng-container matColumnDef=\"sdSubInformation\" sticky>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\" [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                  <ng-container *ngIf=\"sdSubInformation?.templateRef\">\r\n                    <ng-container *ngIf=\"gridOption?.subInformation?.always;else useExpandCollapse\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #useExpandCollapse>\r\n                      <div [@detailExpand]=\"item.isExpanded ? 'expanded' : 'collapsed'\">\r\n                        <ng-container *ngIf=\"item.isExpanded\">\r\n                          <ng-container *ngTemplateOutlet=\"\r\n                          sdSubInformation.templateRef;\r\n                          context: { item: item }\r\n                        \">\r\n                          </ng-container>\r\n                        </ng-container>\r\n                      </div>\r\n                    </ng-template>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSubInformationAction\" stickyEnd>\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td mat-cell *matCellDef=\"let element\">\r\n                  <button *ngIf=\"!element.isExpanding && !gridOption?.subInformation?.always\" mat-icon-button\r\n                    aria-label=\"Expand & Collapse\" (click)=\"onExpand(element)\">\r\n                    <mat-icon *ngIf=\"!element.isExpanded\">expand_more</mat-icon>\r\n                    <mat-icon *ngIf=\"element.isExpanded\">expand_less</mat-icon>\r\n                  </button>\r\n                  <div *ngIf=\"element.isExpanding\" class=\"lds-ring\">\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                    <div></div>\r\n                  </div>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                <th class=\"text-center px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <ng-container *ngIf=\"items | selectionVisibleSelectAll: gridOption?.selection | async\">\r\n                    <mat-checkbox *ngIf=\"!gridOption.selection?.single\" class=\"c-selection\" color=\"primary\"\r\n                      [(ngModel)]=\"isSelectAll\" (change)=\"onSelectAll()\">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </th>\r\n                <td class=\"text-center px-15\" mat-cell *matCellDef=\"let item\" style=\"min-width: 50px; max-width: 50px\">\r\n                  <ng-container *ngIf=\"item | selectionVisible:gridOption?.selection\">\r\n                    <mat-checkbox class=\"c-selection\" color=\"primary\" [(ngModel)]=\"item.isSelected\"\r\n                      (change)=\"onSelect(item)\" [disabled]=\"\r\n                    selectedItems | selectionDisable: item:gridOption?.selection\r\n                  \">\r\n                    </mat-checkbox>\r\n                  </ng-container>\r\n\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditorValidation\">\r\n                <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 2px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0 position-relative\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <sd-desktop-editor-validation [sdId]=\"item.sdId\" [item]=\"item\" [items]=\"items\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-editor-validation>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdEditor\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  <button class=\"c-btn-add\"\r\n                    *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                    (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                    <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                  </button>\r\n                </th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item; index as idx\">\r\n                  <ng-container *sdLet=\"item.editorStatus | sdEditorHandlerRow:item:gridOption as editorHandler\">\r\n                    <div *ngIf=\"editorHandler\" class=\"d-flex align-items-center justify-content-center\">\r\n                      <button *ngIf=\"editorHandler.editable\" class=\"mx-2\" (click)=\"onUpdate(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">edit</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.removable\" class=\"mx-2\" (click)=\"onRemove(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">delete</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.savable\" class=\"mx-2\" (click)=\"onSave(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">save</mat-icon>\r\n                      </button>\r\n                      <button *ngIf=\"editorHandler.cancelable\" class=\"mx-2\" (click)=\"onCancel(item)\" aria-hidden=\"true\"\r\n                        mat-icon-button>\r\n                        <mat-icon class=\"c-icon\">close</mat-icon>\r\n                      </button>\r\n                    </div>\r\n                  </ng-container>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdCommand\">\r\n                <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"width: 50px\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                <td class=\"px-8\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-command [commands]=\"gridOption.commands\" [item]=\"item\"></sd-desktop-command>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container matColumnDef=\"sdGroup\">\r\n                <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                  [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                </th>\r\n                <td class=\"p-0\" mat-cell *matCellDef=\"let item\"\r\n                  [attr.colspan]=\"!item?.sdGroup ? 1 : configuration.displayedColumns.length\">\r\n                  <div [innerHtml]=\"item?.sdGroup?.htmlTemplate | safeHtml\">\r\n                  </div>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef></td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                <th mat-header-cell *matHeaderCellDef cdkDrag class=\"px-8 py-8 c-th\"\r\n                  [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                  configuration.multipleHeader && column.type !== 'children-col'\r\n                    ? 2\r\n                    : 1\r\n                \" [attr.colspan]=\"\r\n                  column.type === 'children-col' ? column.children?.length : 1\r\n                \">\r\n                  <div>\r\n                    <div aria-hidden=\"false\" role=\"presentation\" mat-sort-header [disabled]=\"\r\n                      !column.sortable || column.type === 'children-col'\r\n                    \" [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\"\r\n                      [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" *ngIf=\"!item?.sdGroup\" [sdId]=\"item.sdId\" [key]=\"key\"\r\n                    [value]=\"item[column.field]\" [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\"\r\n                    [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <ng-container *ngFor=\"let column of configuration.secondColumns; let i = index\"\r\n                [matColumnDef]=\"column.field\">\r\n                <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"c-th px-8\"\r\n                  [ngStyle]=\"{ 'min-width': column.width }\">\r\n                  <div>\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                    <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                      [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                      (filterChange)=\"onFilterChange()\">\r\n                    </sd-column-inline-filter>\r\n                  </div>\r\n                </th>\r\n                <td class=\"c-td\" mat-cell *matCellDef=\"let item\">\r\n                  <sd-desktop-cell class=\"d-block px-8\" [sdId]=\"item.sdId\" [key]=\"key\" [value]=\"item[column.field]\"\r\n                    [column]=\"column\" [item]=\"item\" [idx]=\"i\" [cellDef]=\"cellDef\" [gridOption]=\"gridOption\">\r\n                  </sd-desktop-cell>\r\n                </td>\r\n                <td mat-footer-cell *matFooterCellDef>\r\n                  <ng-container *ngIf=\"footerDef[column.field]\">\r\n                    <ng-container *ngTemplateOutlet=\"\r\n                      footerDef[column.field].templateRef;\r\n                      context: { items: items, column: column }\r\n                    \">\r\n                    </ng-container>\r\n                  </ng-container>\r\n                </td>\r\n              </ng-container>\r\n              <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n              </tr>\r\n              <ng-container *ngIf=\"configuration.secondHeaders?.length\">\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n              </ng-container>\r\n              <tr mat-row *matRowDef=\"let row; columns: configuration.displayedColumns\" matRipple class=\"c-row\"\r\n                [class.selected]=\"row.isSelected\" [style]=\"row | sdStyleRowCss:gridOption\"></tr>\r\n\r\n              <tr mat-row *matRowDef=\"let row; columns: ['sdSubInformation']\" class=\"c-detail-row\"></tr>\r\n              <ng-container *ngIf=\"hasFooter && configuration.displayedFooters?.length\">\r\n                <tr mat-footer-row *matFooterRowDef=\"configuration.displayedFooters; sticky: true\"></tr>\r\n              </ng-container>\r\n            </table>\r\n            <ng-template #elseEmpty>\r\n              <table mat-table [dataSource]=\"[{}]\">\r\n                <ng-container matColumnDef=\"sdSelection\" sticky>\r\n                  <th class=\"px-15\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditorValidation\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 4px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEditor\">\r\n                  <th class=\"px-8 py-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                    <button class=\"c-btn-add\"\r\n                      *ngIf=\"gridOption.editor?.addable && (!gridOption.editor.limit || gridOption.editor.limit > items.length)\"\r\n                      (click)=\"onCreate()\" aria-hidden=\"true\" mat-icon-button>\r\n                      <mat-icon class=\"c-icon-add\">add</mat-icon>\r\n                    </button>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdCommand\">\r\n                  <th class=\"px-8\" mat-header-cell *matHeaderCellDef style=\"min-width: 50px; max-width: 50px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdSubInformationAction\">\r\n                  <th class=\"p-0\" mat-header-cell *matHeaderCellDef style=\"width: 1px\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\"></th>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdEmpty\">\r\n                  <td class=\"c-empty\" mat-cell *matCellDef=\"let item\"\r\n                    [attr.colspan]=\"configuration.displayedColumns.length\">\r\n                    <ng-container *ngIf=\"sdEmptyData?.templateRef; else sdEmptyDataNoRef\">\r\n                      <ng-container *ngTemplateOutlet=\"\r\n                        sdEmptyData.templateRef;\r\n                        context: { item: item }\r\n                      \">\r\n                      </ng-container>\r\n                    </ng-container>\r\n                    <ng-template #sdEmptyDataNoRef>\r\n                      <mat-icon fontSet=\"material-icons-outlined\">leaderboard</mat-icon>\r\n                    </ng-template>\r\n                  </td>\r\n                </ng-container>\r\n                <ng-container matColumnDef=\"sdGroup\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"px-8 py-8\"\r\n                    [attr.rowspan]=\"configuration.multipleHeader ? 2 : 1\">\r\n                  </th>\r\n                  <td class=\"p-0\" mat-cell *matCellDef=\"let item\">\r\n                  </td>\r\n                  <td mat-footer-cell *matFooterCellDef></td>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.columns\" [matColumnDef]=\"column.field\"\r\n                  [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                      [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.firstColumns; let i = index\"\r\n                  [matColumnDef]=\"column.field\" [sticky]=\"configuration.fixedColumn[column.field]\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': configuration.firstColumns[i].width }\" [attr.rowspan]=\"\r\n                    configuration.multipleHeader &&\r\n                    column.type !== 'children-col'\r\n                      ? 2\r\n                      : 1\r\n                  \" [attr.colspan]=\"\r\n                    column.type === 'children-col' ? column.children?.length : 1\r\n                  \">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\"\r\n                        [innerHTML]=\"configuration.firstColumns[i].titleHtml || configuration.firstColumns[i].title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <ng-container *ngFor=\"let column of configuration.secondColumns\" [matColumnDef]=\"column.field\">\r\n                  <th mat-header-cell *matHeaderCellDef class=\"c-th px-8 py-8\"\r\n                    [ngStyle]=\"{ 'min-width': column.width }\">\r\n                    <div>\r\n                      <div [class.text-right]=\"column.align === 'right' || (!column.align && column.type === 'number')\"\r\n                        [class.text-center]=\"column.align === 'center'\" [innerHTML]=\"column.titleHtml || column.title\">\r\n                      </div>\r\n                      <sd-column-inline-filter *ngIf=\"gridOption.filter?.inlineColumn\"\r\n                        [value]=\"columnFilter[column.field]\" [columnFilter]=\"columnFilter\" [column]=\"column\"\r\n                        (filterChange)=\"onFilterChange()\"></sd-column-inline-filter>\r\n                    </div>\r\n                  </th>\r\n                </ng-container>\r\n                <tr class=\"c-first-header\" mat-header-row *matHeaderRowDef=\"configuration.firstHeaders; sticky: true\">\r\n                </tr>\r\n                <tr class=\"c-second-header\" mat-header-row *matHeaderRowDef=\"configuration.secondHeaders; sticky: true\">\r\n                </tr>\r\n                <tr mat-row *matRowDef=\"let row; columns: ['sdEmpty']\"></tr>\r\n              </table>\r\n            </ng-template>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-paginator\">\r\n          <div class=\"c-action\">\r\n            <sd-button *ngIf=\"\r\n              !gridOption.filter?.disabled && !gridOption.filter?.inlineColumn\r\n            \" class=\"mr-10\" [title]=\"'Filter' | sdTranslate\" icon=\"filter_alt\" size=\"sm\" (action)=\"gridFilter.open()\"\r\n              type=\"link\">\r\n            </sd-button>\r\n            <sd-button *ngIf=\"gridOption.reload?.visible\" class=\"mr-10\" [title]=\"'Reload' | sdTranslate\" icon=\"refresh\"\r\n              size=\"sm\" (action)=\"reload()\" [disabled]=\"!items?.length\" type=\"link\">\r\n            </sd-button>\r\n            <ng-container *ngIf=\"gridOption.export?.visible && items?.length\">\r\n              <ng-container *ngIf=\"isExporting; else unExporting\">\r\n                <sd-button class=\"mr-10\" [loading]=\"isExporting\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\"\r\n                  size=\"sm\" type=\"link\">\r\n                </sd-button>\r\n              </ng-container>\r\n              <ng-template #unExporting>\r\n                <sd-button class=\"mr-10\" [title]=\"exportTitle | sdTranslate\" icon=\"get_app\" size=\"sm\"\r\n                  [matMenuTriggerFor]=\"menu\" type=\"link\">\r\n                </sd-button>\r\n              </ng-template>\r\n\r\n              <mat-menu #menu=\"matMenu\">\r\n                <button *ngIf=\"gridOption.export?.visibleExcel !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export excel\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.visibleCSV !== false\" mat-menu-item\r\n                  (click)=\"sdPopupExport.exportDefault(true)\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">file_download</mat-icon>\r\n                  <span> {{ \"Export CSV\" | sdTranslate }}</span>\r\n                </button>\r\n                <button *ngIf=\"gridOption.export?.key\" mat-menu-item (click)=\"sdPopupExport.open()\" type=\"button\">\r\n                  <mat-icon fontSet=\"material-icons-outlined\">settings</mat-icon>\r\n                  <span> {{ \"Configure\" | sdTranslate }}</span>\r\n                </button>\r\n              </mat-menu>\r\n            </ng-container>\r\n            <sd-button *ngIf=\"gridOption.config?.visible\" class=\"mr-10\" [title]=\"'Configure' | sdTranslate\"\r\n              icon=\"settings\" size=\"sm\" (action)=\"popupGridConfiguration.open()\" type=\"link\">\r\n            </sd-button>\r\n          </div>\r\n          <mat-paginator [class.d-none]=\"gridOption.paginate?.hidden\" [length]=\"total\"\r\n            [pageSize]=\"gridOption.paginate?.pageSize\" [pageSizeOptions]=\"gridOption.paginate?.pages\"\r\n            [showFirstLastButtons]=\"gridOption.paginate?.showFirstLastButtons\"></mat-paginator>\r\n        </div>\r\n      </div>\r\n      <sd-grid-quick-action [gridOption]=\"gridOption\" [selectedItems]=\"selectedItems\"\r\n        (clear)=\"onClearSelection(groupedItems)\">\r\n      </sd-grid-quick-action>\r\n      <sd-popup-export *ngIf=\"gridOption.export?.visible\" [gridOption]=\"gridOption\" (export)=\"onExport($event)\"\r\n        #sdPopupExport>\r\n      </sd-popup-export>\r\n      <sd-popup-grid-configuration [gridOption]=\"gridOption\" [key]=\"key\" #popupGridConfiguration>\r\n      </sd-popup-grid-configuration>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
                     animations: [
                         animations.trigger('detailExpand', [
                             animations.state('collapsed', animations.style({ height: '0', minHeight: '0', visibility: 'hidden' })),