npm - @sd-angular/core - Versions diffs - 1.1.85 → 1.1.89 - Mend

@sd-angular/core 1.1.85 → 1.1.89

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

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../node_modules/tslib/tslib.es6.js","../../../../projects/sd-core/date-time/src/lib/date-time.component.ts","../../../../projects/sd-core/date-time/src/lib/date-time.module.ts"],"names":["Object","create","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","value","get","__classPrivateFieldSet","set","parse","dateInput","display","monthYearLabel","dateA11yLabel","monthYearA11yLabel","ɵ1","SdDateTime","ref","deviceService","formConfig","_this","this","id","uuid.v4","isMobileOrTablet","_date","_name","disableErrorMessage","formControl","SdFormControl","_form","type","isRequired","sdChange","EventEmitter","modelChange","_subscription","Subscription","isFocused","onFocus","onBlur","onClick","_a","sdView","templateRef","disabled","focus","blur","_b","input","nativeElement","setTimeout","_c","datePicker","open","_d","dateTimePicker","onChange","event","toDate","Date","emit","clear","$event","stopPropagation","setValue","setMonthAndYear","normalizedMonthAndYear","datepicker","ctrlValue","moment","month","year","close","isDesktop","defineProperty","prototype","val","isDate","min","max","NgForm","form","disable","enable","setValidators","Validators","required","clearValidators","label","qcId","hash","selector","date","toFormat","ngOnDestroy","removeControl","unsubscribe","ngOnInit","appearance","add","sdChanges","subscribe","markForCheck","addControl","ngAfterViewInit","focusInputElement","Component","args","template","changeDetection","ChangeDetectionStrategy","OnPush","providers","provide","MAT_DATE_FORMATS","useValue","ɵ0","NGX_MAT_DATE_FORMATS","ChangeDetectorRef","DeviceDetectorService","Inject","FORM_CONFIG","Optional","Input","Output","ContentChild","SdViewDefDirective","ViewChild","MatDatepicker","NgxMatDatetimePicker","NgModule","imports","CommonModule","FormsModule","ReactiveFormsModule","MatInputModule","MatIconModule","MatFormFieldModule","MatDatepickerModule","MatMomentDateModule","NgxMatDatetimePickerModule","NgxMatTimepickerModule","NgxMatMomentModule","SdTranslateModule","SdCommonModule","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 ChangeDetectorRef,\r\n OnInit,\r\n ViewChild,\r\n ChangeDetectionStrategy,\r\n ContentChild,\r\n ElementRef,\r\n Inject,\r\n Optional\r\n} from '@angular/core';\r\nimport as uuid from 'uuid';\r\nimport hash from 'object-hash';\r\nimport moment, { Moment } from 'moment';\r\nimport { FormGroup, NgForm, Validators } from '@angular/forms';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';\r\nimport { NgxMatDatetimePicker, NGX_MAT_DATE_FORMATS, } from '@angular-material-components/datetime-picker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { FORM_CONFIG, IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\n\r\nconst CUSTOM_DATETIME_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY HH:mm'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY HH:mm',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\nconst CUSTOM_DATE_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\n@Component({\r\n selector: 'sd-date-time',\r\n templateUrl: './date-time.component.html',\r\n styleUrls: ['./date-time.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [\r\n { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },\r\n { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATETIME_FORMATS }\r\n ]\r\n})\r\nexport class SdDateTime implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n isMobileOrTablet = false;\r\n #date: any;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n @Input() appearance: MatFormFieldAppearance;\r\n disableErrorMessage = false;\r\n @Input('disableErrorMessage') set _disableErrorMessage(val: boolean \| '') {\r\n this.disableErrorMessage = (val === '') \|\| val;\r\n val = (val === '') \|\| val;\r\n }\r\n formControl = new SdFormControl();\r\n min: Date;\r\n @Input('min') set _min(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n max: Date;\r\n @Input('max') set _max(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() type: 'datetime' \| 'date' \| 'time' \| 'month' = 'datetime';\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n isRequired = false;\r\n @Input() set required(val: boolean \| '') {\r\n this.isRequired = (val === '') \|\| val;\r\n if (this.isRequired) {\r\n this.formControl.setValidators([Validators.required]);\r\n } else {\r\n this.formControl.clearValidators();\r\n }\r\n }\r\n qcId: string;\r\n label: string;\r\n @Input('label') set _label(val: string) {\r\n this.label = val;\r\n this.qcId = hash({\r\n selector: 'sd-date-time',\r\n label: val\r\n });\r\n };\r\n @Input() placeholder: string;\r\n @Input() defaultTime: any;\r\n @Input() set minDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n @Input() set maxDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() validator: (value: any) => string \| Promise<string>;\r\n @Output() sdChange = new EventEmitter();\r\n\r\n @Input() set model(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#date !== val) {\r\n this.#date = val;\r\n const date = Date.isDate(this.#date) ? moment(Date.toFormat(this.#date, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n this.formControl.setValue(date);\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n #subscription = new Subscription();\r\n @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n @ViewChild('input') input: ElementRef;\r\n @ViewChild(MatDatepicker) datePicker: MatDatepicker<Moment>;\r\n @ViewChild(NgxMatDatetimePicker) dateTimePicker: NgxMatDatetimePicker<Moment>;\r\n isFocused = false;\r\n constructor(\r\n private ref: ChangeDetectorRef,\r\n deviceService: DeviceDetectorService,\r\n @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\r\n this.isMobileOrTablet = !deviceService.isDesktop();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n ngOnInit() {\r\n this.appearance = this.appearance \|\| this.formConfig?.appearance;\r\n this.#subscription.add(this.formControl.sdChanges.subscribe(() => {\r\n // this.formControl.updateValueAndValidity();\r\n this.ref.markForCheck();\r\n }));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n }\r\n\r\n ngAfterViewInit() {\r\n }\r\n\r\n onFocus = () => {\r\n this.isFocused = true;\r\n }\r\n\r\n onBlur = () => {\r\n this.isFocused = false;\r\n }\r\n\r\n onClick = () => {\r\n if (this.sdView?.templateRef) {\r\n if (!this.formControl.disabled && !this.isFocused) {\r\n this.focus();\r\n }\r\n }\r\n }\r\n\r\n blur = () => {\r\n this.input?.nativeElement?.blur();\r\n }\r\n\r\n focus = () => {\r\n this.isFocused = true;\r\n setTimeout(() => {\r\n this.input?.nativeElement?.focus();\r\n if (this.type === 'date') {\r\n this.datePicker?.open();\r\n } else {\r\n this.dateTimePicker?.open();\r\n }\r\n //\r\n }, 100);\r\n }\r\n\r\n focusInputElement() {\r\n this.input?.nativeElement?.focus();\r\n }\r\n\r\n onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate();\r\n /*\r\n Focus input khi `ngx-mat-datetime-picker` đang mở sẽ trigger hàm cancel() làm cho giá trị _selected không được update mới nhất\r\n * Case riêng trường hợp type = `datetime` thì xử lý focus element sau khi `ngx-mat-datetime-picker` emit event (closed)\r\n * @see https://github.com/h2qutc/ngx-mat-datetime-picker/blob/HEAD/projects/datetime-picker/src/lib/datetime-input.ts#L343\r\n */\r\n if (!this.dateTimePicker) {\r\n this.input?.nativeElement?.focus();\r\n }\r\n if (value) {\r\n if (new Date(this.#date) !== value) {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n } else {\r\n if (!this.formControl?.value) {\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n }\r\n\r\n clear = ($event: any) => {\r\n $event?.stopPropagation();\r\n if (this.formControl.value) {\r\n this.formControl.setValue(null);\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n\r\n setMonthAndYear = (normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) => {\r\n const ctrlValue = this.formControl.value \|\| moment();\r\n ctrlValue.month(normalizedMonthAndYear.month());\r\n ctrlValue.year(normalizedMonthAndYear.year());\r\n this.formControl.setValue(ctrlValue);\r\n datepicker.close();\r\n this.modelChange.emit(ctrlValue);\r\n this.sdChange.emit(ctrlValue);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport {\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule\r\n} from '@angular-material-components/datetime-picker';\r\nimport { SdDateTime } from './date-time.component';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { NgxMatMomentModule } from '@angular-material-components/moment-adapter';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatFormFieldModule,\r\n MatDatepickerModule,\r\n MatMomentDateModule,\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule,\r\n NgxMatMomentModule,\r\n SdTranslateModule,\r\n SdCommonModule\r\n ],\r\n declarations: [\r\n SdDateTime\r\n ],\r\n exports: [\r\n SdCommonModule,\r\n SdDateTime\r\n ],\r\n providers: [\r\n ]\r\n})\r\nexport class SdDateTimeModule {\r\n\r\n}\r\n"]}
1	+ {"version":3,"sources":["../../../../node_modules/tslib/tslib.es6.js","../../../../projects/sd-core/date-time/src/lib/date-time.component.ts","../../../../projects/sd-core/date-time/src/lib/date-time.module.ts"],"names":["Object","create","__classPrivateFieldGet","receiver","state","kind","f","TypeError","has","call","value","get","__classPrivateFieldSet","set","parse","dateInput","display","monthYearLabel","dateA11yLabel","monthYearA11yLabel","ɵ1","SdDateTime","ref","deviceService","formConfig","_this","this","id","uuid.v4","isMobileOrTablet","_date","_name","disableErrorMessage","formControl","SdFormControl","_form","type","required","sdChange","EventEmitter","modelChange","_subscription","Subscription","isFocused","onFocus","onBlur","onClick","_a","sdView","templateRef","disabled","focus","blur","_b","input","nativeElement","setTimeout","_c","datePicker","open","_d","dateTimePicker","onChange","event","toDate","Date","emit","clear","$event","stopPropagation","setValue","setMonthAndYear","normalizedMonthAndYear","datepicker","ctrlValue","moment","month","year","close","isDesktop","defineProperty","prototype","val","isDate","min","max","NgForm","form","disable","enable","setValidators","Validators","clearValidators","label","qcId","hash","selector","date","toFormat","ngOnDestroy","removeControl","unsubscribe","ngOnInit","appearance","add","sdChanges","subscribe","markForCheck","addControl","ngAfterViewInit","focusInputElement","Component","args","template","changeDetection","ChangeDetectionStrategy","OnPush","providers","provide","MAT_DATE_FORMATS","useValue","ɵ0","NGX_MAT_DATE_FORMATS","ChangeDetectorRef","DeviceDetectorService","Inject","FORM_CONFIG","Optional","Input","Output","ContentChild","SdViewDefDirective","ViewChild","MatDatepicker","NgxMatDatetimePicker","NgModule","imports","CommonModule","FormsModule","ReactiveFormsModule","MatInputModule","MatIconModule","MatFormFieldModule","MatDatepickerModule","MatMomentDateModule","NgxMatDatetimePickerModule","NgxMatTimepickerModule","NgxMatMomentModule","SdTranslateModule","SdCommonModule","declarations","exports"],"mappings":"k3DA2G6BA,OAAOC,OAsGpC,YAAyBD,OAAOC,gBAkBhBC,EAAuBC,EAAUC,EAAOC,EAAMC,GAC1D,GAAa,MAATD,IAAiBC,EAAG,MAAM,IAAIC,UAAU,iDAC5C,GAAqB,mBAAVH,EAAuBD,IAAaC,IAAUE,GAAKF,EAAMI,IAAIL,GAAW,MAAM,IAAII,UAAU,4EACvG,MAAgB,MAATF,EAAeC,EAAa,MAATD,EAAeC,EAAEG,KAAKN,GAAYG,EAAIA,EAAEI,MAAQN,EAAMO,IAAIR,YAGxES,EAAuBT,EAAUC,EAAOM,EAAOL,EAAMC,GACjE,GAAa,MAATD,EAAc,MAAM,IAAIE,UAAU,kCACtC,GAAa,MAATF,IAAiBC,EAAG,MAAM,IAAIC,UAAU,iDAC5C,GAAqB,mBAAVH,EAAuBD,IAAaC,IAAUE,GAAKF,EAAMI,IAAIL,GAAW,MAAM,IAAII,UAAU,2EACvG,MAAiB,MAATF,EAAeC,EAAEG,KAAKN,EAAUO,GAASJ,EAAIA,EAAEI,MAAQA,EAAQN,EAAMS,IAAIV,EAAUO,GAASA,ECjNxG,MAW4B,CAC1BI,MAAO,CACLC,UAAW,cAEbC,QAAS,CACPD,UAAW,aACXE,eAAgB,WAChBC,cAAe,KACfC,mBAAoB,cASsCC,EA5B9B,CAC9BN,MAAO,CACLC,UAAW,oBAEbC,QAAS,CACPD,UAAW,mBACXE,eAAgB,WAChBC,cAAe,KACfC,mBAAoB,2BAmItB,SAAAE,EACUC,EACRC,EACyCC,GAH3C,IAAAC,EAAAC,KACUA,KAAAJ,IAAAA,EAEiCI,KAAAF,WAAAA,EA7G3CE,KAAAC,GAAK,IAAIC,EAAAA,KACTF,KAAAG,kBAAmB,EACnBC,EAAAjB,IAAAa,UAAA,GACAK,EAAAlB,IAAAa,KAAQE,EAAAA,MAORF,KAAAM,qBAAsB,EAKtBN,KAAAO,YAAc,IAAIC,EAAAA,cAkBlBC,EAAAtB,IAAAa,UAAA,GAUSA,KAAAU,KAA+C,WASxDV,KAAAW,UAAW,EAmCDX,KAAAY,SAAW,IAAIC,EAAAA,aAYfb,KAAAc,YAAc,IAAID,EAAAA,aAC5BE,EAAA5B,IAAAa,KAAgB,IAAIgB,EAAAA,cAKpBhB,KAAAiB,WAAY,EAyBZjB,KAAAkB,QAAU,WACRnB,EAAKkB,WAAY,GAGnBjB,KAAAmB,OAAS,WACPpB,EAAKkB,WAAY,GAGnBjB,KAAAoB,QAAU,kBACO,QAAfC,EAAItB,EAAKuB,cAAM,IAAAD,OAAA,EAAAA,EAAEE,eACVxB,EAAKQ,YAAYiB,UAAazB,EAAKkB,WACtClB,EAAK0B,UAKXzB,KAAA0B,KAAO,mBACoB,QAAzBC,EAAU,QAAVN,EAAAtB,EAAK6B,aAAK,IAAAP,OAAA,EAAAA,EAAEQ,qBAAa,IAAAF,GAAAA,EAAED,QAG7B1B,KAAAyB,MAAQ,WACN1B,EAAKkB,WAAY,EACjBa,YAAW,uBACgB,QAAzBH,EAAU,QAAVN,EAAAtB,EAAK6B,aAAK,IAAAP,OAAA,EAAAA,EAAEQ,qBAAa,IAAAF,GAAAA,EAAEF,QACT,SAAd1B,EAAKW,KACQ,QAAfqB,EAAAhC,EAAKiC,kBAAU,IAAAD,GAAAA,EAAEE,OAEE,QAAnBC,EAAAnC,EAAKoC,sBAAc,IAAAD,GAAAA,EAAED,SAGtB,MAOLjC,KAAAoC,SAAW,SAACC,eACJrD,EAAmB,QAAdqC,EAAGgB,EAAMrD,aAAK,IAAAqC,OAAA,EAAAA,EAAEiB,SAMtBvC,EAAKoC,gBACiB,QAAzBJ,EAAU,QAAVJ,EAAA5B,EAAK6B,aAAK,IAAAD,OAAA,EAAAA,EAAEE,qBAAa,IAAAE,GAAAA,EAAEN,QAEzBzC,EACE,IAAIuD,KAAI/D,EAAAuB,EAAAK,MAAiBpB,IAC3Be,EAAKe,YAAY0B,KAAKxD,GACtBe,EAAKa,SAAS4B,KAAKxD,KAGA,QAAjBkD,EAACnC,EAAKQ,mBAAW,IAAA2B,OAAA,EAAAA,EAAElD,SACrBe,EAAKe,YAAY0B,KAAK,MACtBzC,EAAKa,SAAS4B,KAAK,QAKzBxC,KAAAyC,MAAQ,SAACC,GACPA,MAAAA,GAAAA,EAAQC,kBACJ5C,EAAKQ,YAAYvB,QACnBe,EAAKQ,YAAYqC,SAAS,MAC1B7C,EAAKe,YAAY0B,KAAK,MACtBzC,EAAKa,SAAS4B,KAAK,QAIvBxC,KAAA6C,gBAAkB,SAACC,EAAgCC,GACjD,IAAMC,EAAYjD,EAAKQ,YAAYvB,OAASiE,EAAAA,UAC5CD,EAAUE,MAAMJ,EAAuBI,SACvCF,EAAUG,KAAKL,EAAuBK,QACtCpD,EAAKQ,YAAYqC,SAASI,GAC1BD,EAAWK,QACXrD,EAAKe,YAAY0B,KAAKQ,GACtBjD,EAAKa,SAAS4B,KAAKQ,IAhGnBhD,KAAKG,kBAAoBN,EAAcwD,mBA1GzC/E,OAAAgF,eAAa3D,EAAA4D,UAAA,OAAI,KAAjB,SAAkBC,GACZA,GACFtE,EAAAc,KAAIK,EAASmD,oCAKjBlF,OAAAgF,eAAkC3D,EAAA4D,UAAA,uBAAoB,KAAtD,SAAuDC,GACrDxD,KAAKM,oBAA+B,KAARkD,GAAeA,EAC3CA,EAAe,KAARA,GAAeA,mCAIxBlF,OAAAgF,eAAkB3D,EAAA4D,UAAA,OAAI,KAAtB,SAAuBC,GACjBjB,KAAKkB,OAAOD,GACdxD,KAAK0D,IAAM,IAAInB,KAAKiB,GAEpBxD,KAAK0D,IAAM,sCAIfpF,OAAAgF,eAAkB3D,EAAA4D,UAAA,OAAI,KAAtB,SAAuBC,GACjBjB,KAAKkB,OAAOD,GACdxD,KAAK2D,IAAM,IAAIpB,KAAKiB,GAEpBxD,KAAK2D,IAAM,sCAKfrF,OAAAgF,eAAa3D,EAAA4D,UAAA,OAAI,KAAjB,SAAkBC,GACZA,IACEA,aAAeI,EAAAA,OACjB1E,EAAAc,KAAIS,EAAS+C,EAAIK,MAEjB3E,EAAAc,KAAIS,EAAS+C,qCAKnBlF,OAAAgF,eAAa3D,EAAA4D,UAAA,WAAQ,KAArB,SAAsBC,IACpBA,EAAe,KAARA,GAAeA,GAEpBxD,KAAKO,YAAYuD,UAEjB9D,KAAKO,YAAYwD,0CAIrBzF,OAAAgF,eAAuB3D,EAAA4D,UAAA,YAAS,KAAhC,SAAiCC,GAC/BxD,KAAKW,SAAoB,KAAR6C,GAAeA,EAC5BxD,KAAKW,SACPX,KAAKO,YAAYyD,cAAc,CAACC,EAAAA,WAAWtD,WAE3CX,KAAKO,YAAY2D,mDAKrB5F,OAAAgF,eAAoB3D,EAAA4D,UAAA,SAAM,KAA1B,SAA2BC,GACzBxD,KAAKmE,MAAQX,EACbxD,KAAKoE,KAAOC,EAAAA,QAAK,CACfC,SAAU,eACVH,MAAOX,qCAKXlF,OAAAgF,eAAa3D,EAAA4D,UAAA,UAAO,KAApB,SAAqBC,GACfjB,KAAKkB,OAAOD,GACdxD,KAAK0D,IAAM,IAAInB,KAAKiB,GAEpBxD,KAAK0D,IAAM,sCAGfpF,OAAAgF,eAAa3D,EAAA4D,UAAA,UAAO,KAApB,SAAqBC,GACfjB,KAAKkB,OAAOD,GACdxD,KAAK2D,IAAM,IAAIpB,KAAKiB,GAEpBxD,KAAK2D,IAAM,sCAMfrF,OAAAgF,eAAa3D,EAAA4D,UAAA,QAAK,KAAlB,SAAmBC,GAIjB,GAHKjB,KAAKkB,OAAOD,KACfA,EAAM,MAEJhF,EAAAwB,KAAAI,KAAeoD,EAAK,CACtBtE,EAAAc,KAAII,EAASoD,GACb,IAAMe,EAAOhC,KAAKkB,OAAMjF,EAAAwB,KAAAI,IAAe6C,EAAAA,QAAOV,KAAKiC,SAAQhG,EAAAwB,KAAAI,GAAa,uBAAwB,uBAAyB,KACzHJ,KAAKO,YAAYqC,SAAS2B,qCAiB9B5E,EAAA4D,UAAAkB,YAAA,iBACE,QAAApD,EAAA7C,EAAAwB,KAAAS,UAAA,IAAAY,GAAAA,EAAYqD,cAAalG,EAAAwB,KAAAK,IACzB7B,EAAAwB,KAAAe,GAAmB4D,eAGrBhF,EAAA4D,UAAAqB,SAAA,WAAA,QAAA7E,EAAAC,KACEA,KAAK6E,WAAa7E,KAAK6E,aAA6B,QAAnBxD,EAAIrB,KAAKF,kBAAU,IAAAuB,OAAA,EAAAA,EAAEwD,YACtDrG,EAAAwB,KAAAe,GAAmB+D,IAAI9E,KAAKO,YAAYwE,UAAUC,WAAU,WAE1DjF,EAAKH,IAAIqF,mBAEX,QAAAtD,EAAAnD,EAAAwB,KAAAS,UAAA,IAAAkB,GAAAA,EAAYuD,WAAU1G,EAAAwB,KAAAK,GAAaL,KAAKO,cAG1CZ,EAAA4D,UAAA4B,gBAAA,aAoCAxF,EAAA4D,UAAA6B,kBAAA,mBAC2B,QAAzBzD,EAAU,QAAVN,EAAArB,KAAK4B,aAAK,IAAAP,OAAA,EAAAA,EAAEQ,qBAAa,IAAAF,GAAAA,EAAEF,0FA/K9B4D,EAAAA,UAASC,KAAA,CAAC,CACThB,SAAU,eACViB,SAAA,m1MAEAC,gBAAiBC,EAAAA,wBAAwBC,OACzCC,UAAW,CACT,CAAEC,QAASC,EAAAA,iBAAkBC,SAAQC,GACrC,CAAEH,QAASI,EAAAA,qBAAsBF,SAAQpG,0jBAlD3CuG,EAAAA,yBAaOC,EAAAA,sDAsJJC,EAAAA,OAAMb,KAAA,CAACc,EAAAA,cAAW,CAAA1F,KAAG2F,EAAAA,4CAzGvBC,EAAAA,0BAKAA,EAAAA,oCAEAA,EAAAA,MAAKhB,KAAA,CAAC,qCAMNgB,EAAAA,MAAKhB,KAAA,CAAC,qBAQNgB,EAAAA,MAAKhB,KAAA,CAAC,qBAONgB,EAAAA,oBAEAA,EAAAA,oBASAA,EAAAA,wBACAA,EAAAA,yBASAA,EAAAA,MAAKhB,KAAA,CAAC,4BAUNgB,EAAAA,MAAKhB,KAAA,CAAC,8BAONgB,EAAAA,2BACAA,EAAAA,uBACAA,EAAAA,uBAOAA,EAAAA,yBAOAA,EAAAA,wBACAC,EAAAA,sBAEAD,EAAAA,2BAUAC,EAAAA,uBAEAC,EAAAA,aAAYlB,KAAA,CAACmB,EAAAA,mCACbC,EAAAA,UAASpB,KAAA,CAAC,6BACVoB,EAAAA,UAASpB,KAAA,CAACqB,EAAAA,uCACVD,EAAAA,UAASpB,KAAA,CAACsB,EAAAA,+BC3Hb,iCA1BCC,EAAAA,SAAQvB,KAAA,CAAC,CACRwB,QAAS,CACPC,EAAAA,aACAC,EAAAA,YACAC,EAAAA,oBACAC,EAAAA,eACAC,EAAAA,cACAC,EAAAA,mBACAC,EAAAA,oBACAC,EAAAA,oBACAC,EAAAA,2BACAC,EAAAA,uBACAC,EAAAA,mBACAC,EAAAA,kBACAC,EAAAA,gBAEFC,aAAc,CACZjI,GAEFkI,QAAS,CACPF,EAAAA,eACAhI,GAEFgG,UAAW","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 ChangeDetectorRef,\r\n OnInit,\r\n ViewChild,\r\n ChangeDetectionStrategy,\r\n ContentChild,\r\n ElementRef,\r\n Inject,\r\n Optional\r\n} from '@angular/core';\r\nimport as uuid from 'uuid';\r\nimport hash from 'object-hash';\r\nimport moment, { Moment } from 'moment';\r\nimport { FormGroup, NgForm, Validators } from '@angular/forms';\r\nimport { DeviceDetectorService } from 'ngx-device-detector';\r\nimport { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';\r\nimport { NgxMatDatetimePicker, NGX_MAT_DATE_FORMATS, } from '@angular-material-components/datetime-picker';\r\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\r\nimport { Subscription } from 'rxjs';\r\nimport { FORM_CONFIG, IFormConfiguration, SdFormControl, SdViewDefDirective } from '@sd-angular/core/common';\r\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\r\n\r\nconst CUSTOM_DATETIME_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY HH:mm'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY HH:mm',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\nconst CUSTOM_DATE_FORMATS = {\r\n parse: {\r\n dateInput: 'DD/MM/YYYY'\r\n },\r\n display: {\r\n dateInput: 'DD/MM/YYYY',\r\n monthYearLabel: 'MMM YYYY',\r\n dateA11yLabel: 'LL',\r\n monthYearA11yLabel: 'MMMM YYYY'\r\n }\r\n};\r\n@Component({\r\n selector: 'sd-date-time',\r\n templateUrl: './date-time.component.html',\r\n styleUrls: ['./date-time.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n providers: [\r\n { provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS },\r\n { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATETIME_FORMATS }\r\n ]\r\n})\r\nexport class SdDateTime implements OnDestroy, OnInit, AfterViewInit {\r\n id = `I${uuid.v4()}`;\r\n isMobileOrTablet = false;\r\n #date: any;\r\n #name = uuid.v4();\r\n @Input() set name(val: string) {\r\n if (val) {\r\n this.#name = val;\r\n }\r\n }\r\n @Input() appearance: MatFormFieldAppearance;\r\n disableErrorMessage = false;\r\n @Input('disableErrorMessage') set _disableErrorMessage(val: boolean \| '') {\r\n this.disableErrorMessage = (val === '') \|\| val;\r\n val = (val === '') \|\| val;\r\n }\r\n formControl = new SdFormControl();\r\n min: Date;\r\n @Input('min') set _min(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n max: Date;\r\n @Input('max') set _max(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() size: 'sm' \| 'lg';\r\n #form: FormGroup;\r\n @Input() set form(val: NgForm \| FormGroup) {\r\n if (val) {\r\n if (val instanceof NgForm) {\r\n this.#form = val.form;\r\n } else {\r\n this.#form = val;\r\n }\r\n }\r\n }\r\n @Input() type: 'datetime' \| 'date' \| 'time' \| 'month' = 'datetime';\r\n @Input() set disabled(val: boolean \| '') {\r\n val = (val === '') \|\| val;\r\n if (val) {\r\n this.formControl.disable();\r\n } else {\r\n this.formControl.enable();\r\n }\r\n }\r\n required = false;\r\n @Input('required') set _required(val: boolean \| '') {\r\n this.required = (val === '') \|\| val;\r\n if (this.required) {\r\n this.formControl.setValidators([Validators.required]);\r\n } else {\r\n this.formControl.clearValidators();\r\n }\r\n }\r\n qcId: string;\r\n label: string;\r\n @Input('label') set _label(val: string) {\r\n this.label = val;\r\n this.qcId = hash({\r\n selector: 'sd-date-time',\r\n label: val\r\n });\r\n };\r\n @Input() placeholder: string;\r\n @Input() defaultTime: any;\r\n @Input() set minDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.min = new Date(val);\r\n } else {\r\n this.min = null;\r\n }\r\n }\r\n @Input() set maxDate(val: string \| Date) {\r\n if (Date.isDate(val)) {\r\n this.max = new Date(val);\r\n } else {\r\n this.max = null;\r\n }\r\n }\r\n @Input() validator: (value: any) => string \| Promise<string>;\r\n @Output() sdChange = new EventEmitter();\r\n\r\n @Input() set model(val: any) {\r\n if (!Date.isDate(val)) {\r\n val = null;\r\n }\r\n if (this.#date !== val) {\r\n this.#date = val;\r\n const date = Date.isDate(this.#date) ? moment(Date.toFormat(this.#date, 'MM/dd/yyyy HH:mm:ss'), 'MM/DD/YYYY HH:mm:ss') : null;\r\n this.formControl.setValue(date);\r\n }\r\n }\r\n @Output() modelChange = new EventEmitter();\r\n #subscription = new Subscription();\r\n @ContentChild(SdViewDefDirective) sdView: SdViewDefDirective;\r\n @ViewChild('input') input: ElementRef;\r\n @ViewChild(MatDatepicker) datePicker: MatDatepicker<Moment>;\r\n @ViewChild(NgxMatDatetimePicker) dateTimePicker: NgxMatDatetimePicker<Moment>;\r\n isFocused = false;\r\n constructor(\r\n private ref: ChangeDetectorRef,\r\n deviceService: DeviceDetectorService,\r\n @Inject(FORM_CONFIG) @Optional() private formConfig: IFormConfiguration) {\r\n this.isMobileOrTablet = !deviceService.isDesktop();\r\n }\r\n\r\n ngOnDestroy() {\r\n this.#form?.removeControl(this.#name);\r\n this.#subscription.unsubscribe();\r\n }\r\n\r\n ngOnInit() {\r\n this.appearance = this.appearance \|\| this.formConfig?.appearance;\r\n this.#subscription.add(this.formControl.sdChanges.subscribe(() => {\r\n // this.formControl.updateValueAndValidity();\r\n this.ref.markForCheck();\r\n }));\r\n this.#form?.addControl(this.#name, this.formControl);\r\n }\r\n\r\n ngAfterViewInit() {\r\n }\r\n\r\n onFocus = () => {\r\n this.isFocused = true;\r\n }\r\n\r\n onBlur = () => {\r\n this.isFocused = false;\r\n }\r\n\r\n onClick = () => {\r\n if (this.sdView?.templateRef) {\r\n if (!this.formControl.disabled && !this.isFocused) {\r\n this.focus();\r\n }\r\n }\r\n }\r\n\r\n blur = () => {\r\n this.input?.nativeElement?.blur();\r\n }\r\n\r\n focus = () => {\r\n this.isFocused = true;\r\n setTimeout(() => {\r\n this.input?.nativeElement?.focus();\r\n if (this.type === 'date') {\r\n this.datePicker?.open();\r\n } else {\r\n this.dateTimePicker?.open();\r\n }\r\n //\r\n }, 100);\r\n }\r\n\r\n focusInputElement() {\r\n this.input?.nativeElement?.focus();\r\n }\r\n\r\n onChange = (event: MatDatepickerInputEvent<Moment>) => {\r\n const value = event.value?.toDate();\r\n /*\r\n Focus input khi `ngx-mat-datetime-picker` đang mở sẽ trigger hàm cancel() làm cho giá trị _selected không được update mới nhất\r\n * Case riêng trường hợp type = `datetime` thì xử lý focus element sau khi `ngx-mat-datetime-picker` emit event (closed)\r\n * @see https://github.com/h2qutc/ngx-mat-datetime-picker/blob/HEAD/projects/datetime-picker/src/lib/datetime-input.ts#L343\r\n */\r\n if (!this.dateTimePicker) {\r\n this.input?.nativeElement?.focus();\r\n }\r\n if (value) {\r\n if (new Date(this.#date) !== value) {\r\n this.modelChange.emit(value);\r\n this.sdChange.emit(value);\r\n }\r\n } else {\r\n if (!this.formControl?.value) {\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n }\r\n\r\n clear = ($event: any) => {\r\n $event?.stopPropagation();\r\n if (this.formControl.value) {\r\n this.formControl.setValue(null);\r\n this.modelChange.emit(null);\r\n this.sdChange.emit(null);\r\n }\r\n }\r\n\r\n setMonthAndYear = (normalizedMonthAndYear: Moment, datepicker: MatDatepicker<Moment>) => {\r\n const ctrlValue = this.formControl.value \|\| moment();\r\n ctrlValue.month(normalizedMonthAndYear.month());\r\n ctrlValue.year(normalizedMonthAndYear.year());\r\n this.formControl.setValue(ctrlValue);\r\n datepicker.close();\r\n this.modelChange.emit(ctrlValue);\r\n this.sdChange.emit(ctrlValue);\r\n }\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatDatepickerModule } from '@angular/material/datepicker';\r\nimport {\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule\r\n} from '@angular-material-components/datetime-picker';\r\nimport { SdDateTime } from './date-time.component';\r\nimport { SdTranslateModule } from '@sd-angular/core/translate';\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { NgxMatMomentModule } from '@angular-material-components/moment-adapter';\r\nimport { MatMomentDateModule } from '@angular/material-moment-adapter';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { SdCommonModule } from '@sd-angular/core/common';\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n FormsModule,\r\n ReactiveFormsModule,\r\n MatInputModule,\r\n MatIconModule,\r\n MatFormFieldModule,\r\n MatDatepickerModule,\r\n MatMomentDateModule,\r\n NgxMatDatetimePickerModule,\r\n NgxMatTimepickerModule,\r\n NgxMatMomentModule,\r\n SdTranslateModule,\r\n SdCommonModule\r\n ],\r\n declarations: [\r\n SdDateTime\r\n ],\r\n exports: [\r\n SdCommonModule,\r\n SdDateTime\r\n ],\r\n providers: [\r\n ]\r\n})\r\nexport class SdDateTimeModule {\r\n\r\n}\r\n"]}

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

@@ -2556,7 +2556,7 @@
     SdGridConfig.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-config',
-                    template: "<sd-modal [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"storage\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-3 col-6\">\r\n        <sd-input-number [label]=\"'Page size' | sdTranslate\" [(model)]=\"storage.pageSize\" step=\"1\">\r\n        </sd-input-number>\r\n      </div>\r\n    </div>\r\n    <div class=\"sd-box sd-box-primary\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered c-table\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center\" style=\"width: 50px\">#</th>\r\n                <th *sdDesktop class=\"text-center\" style=\"width: 80px\"></th>\r\n                <!-- <th class=\"text-uppercase\" style=\"width: 120px\">Field </th> -->\r\n                <th class=\"text-uppercase\">{{'Title' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Width' | sdTranslate}}</th>\r\n                <th class=\"text-uppercase\" style=\"width: 80px\">{{'Hidden' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Freeze' | sdTranslate}}</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let column of storage.columnConfigs; let idx = index\">\r\n                <td class=\"align-middle text-center\">\r\n                  {{idx+1}}\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <button type=\"button\" [disabled]=\"idx==0\" type=\"button\" class=\"c-btn-icon\" placement=\"top\"\r\n                    matTooltip=\"Up\" (click)=\"moveColumnUp(idx)\">\r\n                    <i class=\"fa fa-arrow-up text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                  <button type=\"button\" [disabled]=\"idx==storage.columnConfigs.length-1\" type=\"button\"\r\n                    class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Down\" (click)=\"moveColumnDown(idx)\">\r\n                    <i class=\"fa fa-arrow-down text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                </td>\r\n                <!-- <td class=\"align-middle\">{{column.originColumn.field}}</td> -->\r\n                <td class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.title}}\" [(ngModel)]=\"column.title\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.width}}\" [(ngModel)]=\"column.width\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.hidden\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.fixed\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n              </tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\" size=\"sm\"></sd-button>\r\n    <sd-button (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>",
+                    template: "<sd-modal [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"storage\">\r\n    <div class=\"row\">\r\n      <div class=\"col-md-3 col-6\">\r\n        <sd-input-currency [label]=\"'Page size' | sdTranslate\" [(model)]=\"storage.pageSize\" step=\"1\">\r\n        </sd-input-currency>\r\n      </div>\r\n    </div>\r\n    <div class=\"sd-box sd-box-primary\">\r\n      <div class=\"sd-box-body p-0\">\r\n        <div class=\"table-responsive\">\r\n          <table class=\"table table-striped table-sm table-hover table-bordered c-table\">\r\n            <thead class=\"thead-light\">\r\n              <tr>\r\n                <th class=\"text-center\" style=\"width: 50px\">#</th>\r\n                <th *sdDesktop class=\"text-center\" style=\"width: 80px\"></th>\r\n                <!-- <th class=\"text-uppercase\" style=\"width: 120px\">Field </th> -->\r\n                <th class=\"text-uppercase\">{{'Title' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Width' | sdTranslate}}</th>\r\n                <th class=\"text-uppercase\" style=\"width: 80px\">{{'Hidden' | sdTranslate}}</th>\r\n                <th *sdDesktop class=\"text-uppercase\" style=\"width: 80px\">{{'Freeze' | sdTranslate}}</th>\r\n              </tr>\r\n            </thead>\r\n            <tbody>\r\n              <tr *ngFor=\"let column of storage.columnConfigs; let idx = index\">\r\n                <td class=\"align-middle text-center\">\r\n                  {{idx+1}}\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <button type=\"button\" [disabled]=\"idx==0\" type=\"button\" class=\"c-btn-icon\" placement=\"top\"\r\n                    matTooltip=\"Up\" (click)=\"moveColumnUp(idx)\">\r\n                    <i class=\"fa fa-arrow-up text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                  <button type=\"button\" [disabled]=\"idx==storage.columnConfigs.length-1\" type=\"button\"\r\n                    class=\"c-btn-icon\" placement=\"top\" matTooltip=\"Down\" (click)=\"moveColumnDown(idx)\">\r\n                    <i class=\"fa fa-arrow-down text-primary\" aria-hidden=\"true\"></i>\r\n                  </button>\r\n                </td>\r\n                <!-- <td class=\"align-middle\">{{column.originColumn.field}}</td> -->\r\n                <td class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.title}}\" [(ngModel)]=\"column.title\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle\">\r\n                  <input type=\"text\" placeholder=\"{{column.originColumn.width}}\" [(ngModel)]=\"column.width\"\r\n                    class=\"form-control form-control-sm\">\r\n                </td>\r\n                <td class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.hidden\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n                <td *sdDesktop class=\"align-middle text-center\">\r\n                  <mat-slide-toggle [(ngModel)]=\"column.fixed\" color=\"primary\"></mat-slide-toggle>\r\n                </td>\r\n              </tr>\r\n          </table>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\" size=\"sm\"></sd-button>\r\n    <sd-button (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"reset()\" icon=\"refresh\" [title]=\"'Reset' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"save()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>",
                     styles: [".c-btn-icon{background:none!important;border:none;opacity:.8}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:none!important;border:none;cursor:not-allowed;opacity:.3}.table td,.table th{padding:.2rem!important}.c-table.table{margin-bottom:5px}"]
                 },] }
     ];
@@ -2625,7 +2625,7 @@
     SdGridDesktopColumnEdit.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-desktop-column-edit',
-                    template: "<ng-container *ngIf=\"column && item\">\r\n  <div *ngIf=\"column.type === 'string'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseInput\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseInput>\r\n      <sd-input size=\"sm\" *ngIf=\"column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\" (sdClick)=\"column.editor.click(item)\"></sd-input>\r\n      <sd-input size=\"sm\" *ngIf=\"!column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'color'\">\r\n    <sd-input size=\"sm\" type=\"color\" [(model)]=\"item[column.field]\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-input>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'number'\">\r\n    <sd-input-number size=\"sm\" [(model)]=\"item[column.field]\"\r\n      (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input-number>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'date'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"date\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'datetime'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"datetime\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'time'\">\r\n    <sd-time [(model)]=\"item[column.field]\"></sd-time>\r\n    <!-- <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"time\"></sd-grid-date-picker-control> -->\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'bool'\">\r\n    <sd-switch [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-switch>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'values'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseValues\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseValues>\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n      (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'radio'\">\r\n    <section class=\"mt-5 ml-5\">\r\n      <mat-radio-group class=\"d-flex\" [(ngModel)]=\"item[column.field]\"\r\n        (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n        <mat-radio-button *ngIf=\"!column.editor?.required\" color=\"warn\" class=\"mr-5\" value=\"\">\r\n          {{'Please select' | sdTranslate}}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" class=\"mr-5\" *ngFor=\"let data of column.values\"\r\n          [value]=\"data[column.valueField]\">\r\n          {{data[column.displayField]}}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </section>\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'image'\">\r\n    <img [src]=\"item[column.field]\" [width]=\"column.display?.width\" [height]=\"column.display?.height\"\r\n      style=\"margin: 5px 0\" (click)=\"column.click && column.click(item[column.field], item)\">\r\n  </div>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"column && item\">\r\n  <div *ngIf=\"column.type === 'string'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseInput\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseInput>\r\n      <sd-input size=\"sm\" *ngIf=\"column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\" (sdClick)=\"column.editor.click(item)\"></sd-input>\r\n      <sd-input size=\"sm\" *ngIf=\"!column.editor?.click\" [(model)]=\"item[column.field]\"\r\n        (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n        (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'color'\">\r\n    <sd-input size=\"sm\" type=\"color\" [(model)]=\"item[column.field]\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-input>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'number'\">\r\n    <sd-input-currency size=\"sm\" [(model)]=\"item[column.field]\"\r\n      (keyupEnter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n      (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-input-currency>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'date'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"date\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'datetime'\">\r\n    <sd-date-time size=\"sm\" [(model)]=\"item[column.field]\" type=\"datetime\"></sd-date-time>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'time'\">\r\n    <sd-time [(model)]=\"item[column.field]\"></sd-time>\r\n    <!-- <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"time\"></sd-grid-date-picker-control> -->\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'bool'\">\r\n    <sd-switch [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n    </sd-switch>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'values'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseValues\">\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\"\r\n        [items]=\"item[column.editor?.item?.dependOnField] | sdDynamicItems:dynamicItems\"\r\n        [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n        (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </div>\r\n    <ng-template #elseUseValues>\r\n      <sd-select *ngIf=\"!column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n        (sdSelection)=\"onSelectionChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-select>\r\n      <sd-autocomplete *ngIf=\"column.editor?.autocomplete\" size=\"sm\" [(model)]=\"item[column.field]\" [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n      (sdChange)=\"onAutocompleteChange($event)\" [placeholder]=\"column.title\">\r\n      </sd-autocomplete>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'radio'\">\r\n    <section class=\"mt-5 ml-5\">\r\n      <mat-radio-group class=\"d-flex\" [(ngModel)]=\"item[column.field]\"\r\n        (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n        <mat-radio-button *ngIf=\"!column.editor?.required\" color=\"warn\" class=\"mr-5\" value=\"\">\r\n          {{'Please select' | sdTranslate}}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" class=\"mr-5\" *ngFor=\"let data of column.values\"\r\n          [value]=\"data[column.valueField]\">\r\n          {{data[column.displayField]}}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </section>\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'image'\">\r\n    <img [src]=\"item[column.field]\" [width]=\"column.display?.width\" [height]=\"column.display?.height\"\r\n      style=\"margin: 5px 0\" (click)=\"column.click && column.click(item[column.field], item)\">\r\n  </div>\r\n</ng-container>",
                     changeDetection: core.ChangeDetectionStrategy.OnPush,
                     styles: [".c-input-xs{font-size:13px!important;height:28px!important;line-height:1.5!important;padding:3px!important}"]
                 },] }
@@ -2676,7 +2676,7 @@
     SdGridDesktopInlineFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-desktop-inline-filter',
-                    template: "<ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n  <ng-container *ngIf=\"columns?.length && filterOption?.columnInline === 'outside'\">\r\n    <ng-container *ngFor=\"let item of columns\">\r\n      <ng-container\r\n        *ngIf=\"item.type !== 'children' && item.type !== 'image' && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngIf=\"inlineColumn[item.field] || inlineColumn[item.field] === undefined\">\r\n          <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input>\r\n            <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input-number>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item?.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item?.editor?.autocomplete\" [items]=\"item.values\"\r\n              valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\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)]=\"filter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-date-time>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container\r\n        *ngIf=\"item.type === 'children' && item.children?.length && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngFor=\"let childColumn of item.children\">\r\n          <ng-container\r\n            *ngIf=\"inlineColumn[childColumn.field] && !childColumn?.filter?.disabled && childColumn.priority !== 'low' && childColumn.type !== 'image'\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n              <sd-input-number [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input-number>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:childColumn.trueValue || 'True' },\r\n            {value:'0',display:childColumn.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"childColumn.type === 'values' && !item?.editor?.autocomplete\"\r\n                [label]=\"childColumn.title\" [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"childColumn.type === 'values' && item?.editor?.autocomplete\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-autocomplete>\r\n              <sd-date-time\r\n                *ngIf=\"childColumn.type === 'date' || childColumn.type === 'datetime' || childColumn.type === 'time'\"\r\n                [label]=\"childColumn.title\" [(model)]=\"filter[childColumn.field]\" type=\"date\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"filterOption?.externalFilters?.length\">\r\n    <ng-container *ngFor=\"let item of filterOption.externalFilters\">\r\n      <ng-container\r\n        *ngIf=\"(inlineExternal[item.field] || inlineExternal[item.field] === undefined) && item.priority !== 'low'\">\r\n        <div *ngIf=\"item.type !=='daterange' && item.type !=='numberrange';else elseFilterRange\"\r\n          class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n            (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input-number>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'custom'\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-range>\r\n        </div>\r\n        <ng-template #elseFilterRange>\r\n          <ng-container *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                [maxDate]=\"externalFilter[item.field].to || item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.type ==='numberrange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
+                    template: "<ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n  <ng-container *ngIf=\"columns?.length && filterOption?.columnInline === 'outside'\">\r\n    <ng-container *ngFor=\"let item of columns\">\r\n      <ng-container\r\n        *ngIf=\"item.type !== 'children' && item.type !== 'image' && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngIf=\"inlineColumn[item.field] || inlineColumn[item.field] === undefined\">\r\n          <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input>\r\n            <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"filter[item.field]\"\r\n              (keyupEnter)=\"onUpdateFilter()\">\r\n            </sd-input-currency>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item?.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item?.editor?.autocomplete\" [items]=\"item.values\"\r\n              valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.field]\" (sdChange)=\"onUpdateFilter()\">\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)]=\"filter[item.field]\" type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-date-time>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n      <ng-container\r\n        *ngIf=\"item.type === 'children' && item.children?.length && !item?.filter?.disabled && item.priority !== 'low'\">\r\n        <ng-container *ngFor=\"let childColumn of item.children\">\r\n          <ng-container\r\n            *ngIf=\"inlineColumn[childColumn.field] && !childColumn?.filter?.disabled && childColumn.priority !== 'low' && childColumn.type !== 'image'\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n              <sd-input-currency [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\"\r\n                [(model)]=\"filter[childColumn.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n              </sd-input-currency>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:childColumn.trueValue || 'True' },\r\n            {value:'0',display:childColumn.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"childColumn.type === 'values' && !item?.editor?.autocomplete\"\r\n                [label]=\"childColumn.title\" [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"childColumn.type === 'values' && item?.editor?.autocomplete\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-autocomplete>\r\n              <sd-date-time\r\n                *ngIf=\"childColumn.type === 'date' || childColumn.type === 'datetime' || childColumn.type === 'time'\"\r\n                [label]=\"childColumn.title\" [(model)]=\"filter[childColumn.field]\" type=\"date\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"filterOption?.externalFilters?.length\">\r\n    <ng-container *ngFor=\"let item of filterOption.externalFilters\">\r\n      <ng-container\r\n        *ngIf=\"(inlineExternal[item.field] || inlineExternal[item.field] === undefined) && item.priority !== 'low'\">\r\n        <div *ngIf=\"item.type !=='daterange' && item.type !=='numberrange';else elseFilterRange\"\r\n          class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\" (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\"\r\n            (keyupEnter)=\"onUpdateFilter()\">\r\n          </sd-input-currency>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n          {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-select>\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'custom'\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\"\r\n            (sdChange)=\"onUpdateFilter()\">\r\n          </sd-input>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              (sdChange)=\"onUpdateFilter()\" filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\" (sdChange)=\"onUpdateFilter()\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n          </sd-date-range>\r\n        </div>\r\n        <ng-template #elseFilterRange>\r\n          <ng-container *ngIf=\"item.type ==='daterange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                [maxDate]=\"externalFilter[item.field].to || item.maxDate\" (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-date-time>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.type ==='numberrange' && externalFilter[item.field]\">\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-lg-2 col-md-3 col-sm-6 px-4\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\"\r\n                (sdChange)=\"onUpdateFilter()\">\r\n              </sd-input>\r\n            </div>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
                     styles: [""]
                 },] }
     ];
@@ -2753,7 +2753,7 @@
     SdGridPopupEditor.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-popup-editor',
-                    template: "<sd-modal [title]=\"(isModified ? 'Edit' : 'Create')\" width=\"sm\" #modal>\r\n  <sd-modal-body *ngIf=\"item && columns?.length\">\r\n    <form #formEditor=\"ngForm\">\r\n      <ng-container *ngFor=\"let column of columns\">\r\n        <div *ngIf=\"column | editorPopupVisible:item\" class=\"row\">\r\n          <div class=\"col-12\">\r\n            <sd-input *ngIf=\"column.type === 'string'\" [(model)]=\"item[column.field]\"></sd-input>\r\n            <sd-input-number *ngIf=\"column.type === 'number'\" [(model)]=\"item[column.field]\">\r\n            </sd-input-number>\r\n            <sd-select *ngIf=\"column.type === 'values'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n            <sd-switch *ngIf=\"column.type === 'boolean'\" [(model)]=\"item[column.field]\">\r\n            </sd-switch>\r\n            <sd-select *ngIf=\"column.type === 'radio'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </form>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>"
+                    template: "<sd-modal [title]=\"(isModified ? 'Edit' : 'Create')\" width=\"sm\" #modal>\r\n  <sd-modal-body *ngIf=\"item && columns?.length\">\r\n    <form #formEditor=\"ngForm\">\r\n      <ng-container *ngFor=\"let column of columns\">\r\n        <div *ngIf=\"column | editorPopupVisible:item\" class=\"row\">\r\n          <div class=\"col-12\">\r\n            <sd-input *ngIf=\"column.type === 'string'\" [(model)]=\"item[column.field]\"></sd-input>\r\n            <sd-input-currency *ngIf=\"column.type === 'number'\" [(model)]=\"item[column.field]\">\r\n            </sd-input-currency>\r\n            <sd-select *ngIf=\"column.type === 'values'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n            <sd-switch *ngIf=\"column.type === 'boolean'\" [(model)]=\"item[column.field]\">\r\n            </sd-switch>\r\n            <sd-select *ngIf=\"column.type === 'radio'\" [(model)]=\"item[column.field]\" [items]=\"column.values\">\r\n            </sd-select>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </form>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"close\" [title]=\"'Cancel' | sdTranslate\"\r\n      width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onSave()\" icon=\"save\" [title]=\"'Save' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>"
                 },] }
     ];
     SdGridPopupEditor.ctorParameters = function () { return []; };
@@ -3613,7 +3613,7 @@
     SdGridPopupFilter.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-popup-filter',
-                    template: "<sd-modal width=\"sm\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div\r\n      *ngIf=\"key && filterOption?.multiple !== false && (!filterOption?.quickFilterVisibility || filterOption?.quickFilterVisibility === 'popup')\">\r\n      <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n        <mat-label>{{'Quick filters' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedCode\" (selectionChange)=\"onSelectionChange($event)\" #matSelect>\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n            <div style=\"display:flex; justify-content: space-between\">\r\n              <span>{{quickFilter.code}}</span>\r\n              <div>\r\n                <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-pencil\"></mat-icon>\r\n                <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-trash-o\"></mat-icon>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n          <mat-option [value]=\"newQuickFilter\">\r\n            <div (click)=\"onCreateQuickFilter($event)\">\r\n              <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n              <span>{{'Create quick filter' | sdTranslate}}</span>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-container *ngIf=\"filterOption?.multiple === false\">\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>{{'Select field' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedField\">\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let item of externalFilters\" [value]=\"'external' + item.field\">\r\n            {{item.title}}\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let item of columns\">\r\n            <mat-option *ngIf=\"item.type !== 'children'\" [value]=\"'column' + item.field\">\r\n              {{item.title}}\r\n            </mat-option>\r\n            <ng-container *ngIf=\"item.type === 'children' && item.children?.length\">\r\n              <ng-container *ngFor=\"let childColumn of item.children\">\r\n                <mat-option [value]=\"'column' + childColumn.field\">\r\n                  {{childColumn.title}}\r\n                </mat-option>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters\">\r\n      <div *ngIf=\"filterOption?.multiple !== false || selectedField === 'external' + item.field\"\r\n        class=\"d-flex align-items-baseline\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineExternal[item.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input>\r\n          <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input-number>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n                {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\">\r\n          </sd-input>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\">\r\n          </sd-date-range>\r\n          <ng-container *ngIf=\"item.type ==='daterange'\">\r\n            <div class=\"row\">\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                  [maxDate]=\"externalFilter[item.field].to || item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                  [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n              </sd-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let column of columns\">\r\n      <div class=\"d-flex align-items-baseline\"\r\n        *ngIf=\"column.type !== 'children' && (filterOption?.multiple !== false || selectedField === 'column' + column.field)\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineColumn[column.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-select *ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n              {value:'0',display:column.falseValue || 'False' }]\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'radio'\" [label]=\"column.title\" [items]=\"column.values\"\r\n            [valueField]=\"column.valueField\" [displayField]=\"column.displayField\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-autocomplete>\r\n          <sd-date-time *ngIf=\"column.type ==='date' || column.type==='datetime' ||\r\n              column.type==='time'\" [label]=\"column.title\" [(model)]=\" filter[column.field]\" type=\"date\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"column.type === 'children' && column.children?.length\">\r\n        <ng-container *ngFor=\"let childColumn of column.children\">\r\n          <div class=\"d-flex align-items-baseline\"\r\n            *ngIf=\"filterOption?.multiple !== false || selectedField === 'column' + childColumn.field\">\r\n            <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n              <div *sdDesktop class=\"c-checkable\">\r\n                <sd-switch [(model)]=\"inlineColumn[childColumn.field]\" (sdChange)=\"onInlineChange()\">\r\n                </sd-switch>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"c-filterable\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n                {value:'0',display:childColumn.falseValue || 'False' }]\" [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-autocomplete [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'values'\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-autocomplete>\r\n              <sd-date-time [label]=\"childColumn.title\" *ngIf=\"childColumn.type ==='date' || childColumn.type==='datetime' ||\r\n                childColumn.type==='time'\" [(model)]=\" filter[childColumn.field]\" type=\"date\">\r\n              </sd-date-time>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n      [title]=\"'Clear filter' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n<sd-grid-popup-quick-filter-detail #popupQuickFilterDetail (accept)=\"onAcceptQuickFilter($event)\">\r\n</sd-grid-popup-quick-filter-detail>",
+                    template: "<sd-modal width=\"sm\" [title]=\"'Filter' | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div\r\n      *ngIf=\"key && filterOption?.multiple !== false && (!filterOption?.quickFilterVisibility || filterOption?.quickFilterVisibility === 'popup')\">\r\n      <mat-form-field class=\"sd-md\" appearance=\"outline\">\r\n        <mat-label>{{'Quick filters' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedCode\" (selectionChange)=\"onSelectionChange($event)\" #matSelect>\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let quickFilter of quickFilters\" [value]=\"quickFilter.code\">\r\n            <div style=\"display:flex; justify-content: space-between\">\r\n              <span>{{quickFilter.code}}</span>\r\n              <div>\r\n                <mat-icon class=\"mr-1 c-fa-icon\" (click)=\"onEditQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-pencil\"></mat-icon>\r\n                <mat-icon class=\"mr-0 c-fa-icon\" (click)=\"onDeleteQuickFilter($event, quickFilter)\" fontSet=\"fa\"\r\n                  fontIcon=\"fa-trash-o\"></mat-icon>\r\n              </div>\r\n            </div>\r\n          </mat-option>\r\n          <mat-option [value]=\"newQuickFilter\">\r\n            <div (click)=\"onCreateQuickFilter($event)\">\r\n              <mat-icon class=\"mr-1\" fontSet=\"material-icons-outlined\">add</mat-icon>\r\n              <span>{{'Create quick filter' | sdTranslate}}</span>\r\n            </div>\r\n          </mat-option>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </div>\r\n    <ng-container *ngIf=\"filterOption?.multiple === false\">\r\n      <mat-form-field appearance=\"outline\">\r\n        <mat-label>{{'Select field' | sdTranslate}}</mat-label>\r\n        <mat-select [(ngModel)]=\"selectedField\">\r\n          <mat-option value=\"\">{{'Please select' | sdTranslate}}</mat-option>\r\n          <mat-option *ngFor=\"let item of externalFilters\" [value]=\"'external' + item.field\">\r\n            {{item.title}}\r\n          </mat-option>\r\n          <ng-container *ngFor=\"let item of columns\">\r\n            <mat-option *ngIf=\"item.type !== 'children'\" [value]=\"'column' + item.field\">\r\n              {{item.title}}\r\n            </mat-option>\r\n            <ng-container *ngIf=\"item.type === 'children' && item.children?.length\">\r\n              <ng-container *ngFor=\"let childColumn of item.children\">\r\n                <mat-option [value]=\"'column' + childColumn.field\">\r\n                  {{childColumn.title}}\r\n                </mat-option>\r\n              </ng-container>\r\n            </ng-container>\r\n          </ng-container>\r\n        </mat-select>\r\n      </mat-form-field>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let item of externalFilters\">\r\n      <div *ngIf=\"filterOption?.multiple !== false || selectedField === 'external' + item.field\"\r\n        class=\"d-flex align-items-baseline\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineExternal[item.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input>\r\n          <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input-currency>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n                {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n            [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n          </sd-select>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              multiple=\"true\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\"\r\n              filtered=\"true\" multiple=\"true\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\" [valueField]=\"item.valueField\"\r\n              [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select>\r\n          </ng-container>\r\n          <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n            [(model)]=\"externalFilter[displayKey + item.field]\"\r\n            (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.field, displayKey + item.field)\">\r\n          </sd-input>\r\n          <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.field]\"\r\n            type=\"date\">\r\n          </sd-date-time>\r\n          <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(from)]=\"externalFilter[item.field].from\" [(to)]=\"externalFilter[item.field].to\" [min]=\"item.minDate\"\r\n            [max]=\"item.maxDate\">\r\n          </sd-date-range>\r\n          <ng-container *ngIf=\"item.type ==='daterange'\">\r\n            <div class=\"row\">\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.field].from\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                  [maxDate]=\"externalFilter[item.field].to || item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.field].to\"\r\n                  [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                  [minDate]=\"item.minDate || externalFilter[item.field].from\" [maxDate]=\"item.maxDate\">\r\n                </sd-date-time>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n              </sd-input>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n              </sd-input>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngFor=\"let column of columns\">\r\n      <div class=\"d-flex align-items-baseline\"\r\n        *ngIf=\"column.type !== 'children' && (filterOption?.multiple !== false || selectedField === 'column' + column.field)\">\r\n        <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n          <div *sdDesktop class=\"c-checkable\">\r\n            <sd-switch [(model)]=\"inlineColumn[column.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-switch>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-input *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input>\r\n          <sd-select *ngIf=\"column.type === 'bool'\" [label]=\"column.title\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n              {value:'0',display:column.falseValue || 'False' }]\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'radio'\" [label]=\"column.title\" [items]=\"column.values\"\r\n            [valueField]=\"column.valueField\" [displayField]=\"column.displayField\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-select *ngIf=\"column.type === 'values' && !column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-select>\r\n          <sd-autocomplete *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\" [label]=\"column.title\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-autocomplete>\r\n          <sd-date-time *ngIf=\"column.type ==='date' || column.type==='datetime' ||\r\n              column.type==='time'\" [label]=\"column.title\" [(model)]=\" filter[column.field]\" type=\"date\">\r\n          </sd-date-time>\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"column.type === 'children' && column.children?.length\">\r\n        <ng-container *ngFor=\"let childColumn of column.children\">\r\n          <div class=\"d-flex align-items-baseline\"\r\n            *ngIf=\"filterOption?.multiple !== false || selectedField === 'column' + childColumn.field\">\r\n            <ng-container *ngIf=\"filterOption?.multiple !== false\">\r\n              <div *sdDesktop class=\"c-checkable\">\r\n                <sd-switch [(model)]=\"inlineColumn[childColumn.field]\" (sdChange)=\"onInlineChange()\">\r\n                </sd-switch>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"c-filterable\">\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-input [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'bool'\" [items]=\"[{value:'1',display:column.trueValue || 'True' },\r\n                {value:'0',display:childColumn.falseValue || 'False' }]\" [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-select [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\" [items]=\"childColumn.values\"\r\n                [valueField]=\"childColumn.valueField\" [displayField]=\"childColumn.displayField\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-select>\r\n              <sd-autocomplete [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'values'\"\r\n                [items]=\"childColumn.values\" valueField=\"value\" displayField=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-autocomplete>\r\n              <sd-date-time [label]=\"childColumn.title\" *ngIf=\"childColumn.type ==='date' || childColumn.type==='datetime' ||\r\n                childColumn.type==='time'\" [(model)]=\" filter[childColumn.field]\" type=\"date\">\r\n              </sd-date-time>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </sd-modal-body>\r\n  <sd-modal-footer *sdDesktop>\r\n    <sd-button class=\"mr-auto\" (action)=\"onClear()\" icon=\"clear\" [title]=\"'Clear filter' | sdTranslate\" size=\"sm\">\r\n    </sd-button>\r\n    <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n  <sd-modal-footer *sdMobileTablet>\r\n    <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onClear()\" icon=\"clear\"\r\n      [title]=\"'Clear filter' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n    <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n      color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n<sd-grid-popup-quick-filter-detail #popupQuickFilterDetail (accept)=\"onAcceptQuickFilter($event)\">\r\n</sd-grid-popup-quick-filter-detail>",
                     encapsulation: core.ViewEncapsulation.None,
                     styles: [".c-fa-icon{color:grey;font-size:20px}.c-checkable{width:50px}.c-filterable{flex:1}"]
                 },] }
@@ -3823,7 +3823,7 @@
     SdGridPopupQuickFilterDetail.decorators = [
         { type: core.Component, args: [{
                     selector: 'sd-grid-popup-quick-filter-detail',
-                    template: "<sd-modal width=\"sm\" [title]=\"(page === 1 ? 'Select filtered fields':'Input filtered fields') | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <ng-container *ngIf=\"page === 1\">\r\n        <div *ngFor=\"let field of selectableFields\" class=\"col-12\">\r\n          <sd-switch [(model)]=\"selectedField[field.id]\" [label]=\"field.title\" (sdChange)=\"onSelectFields()\">\r\n          </sd-switch>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"page === 2\">\r\n        <div class=\"col-12\" *ngFor=\"let item of fields\">\r\n          <ng-container *ngIf=\"item.group === 'external'\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input>\r\n            <sd-input-number [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input-number>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n              {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <ng-container *ngIf=\"item.type === 'values'\">\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                multiple=\"true\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-autocomplete>\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                filtered=\"true\" multiple=\"true\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-select>\r\n            </ng-container>\r\n            <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n              [(model)]=\"externalFilter[displayKey + item.code]\"\r\n              (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.code, displayKey + item.code)\">\r\n            </sd-input>\r\n            <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.code]\"\r\n              type=\"date\">\r\n            </sd-date-time>\r\n            <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n              [(from)]=\"externalFilter[item.code].from\" [(to)]=\"externalFilter[item.code].to\" [min]=\"item.minDate\"\r\n              [max]=\"item.maxDate\">\r\n            </sd-date-range>\r\n            <ng-container *ngIf=\"item.type ==='daterange'\">\r\n              <div class=\"row\">\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.code].from\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                    [maxDate]=\"externalFilter[item.code].to || item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.code].to\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                    [minDate]=\"item.minDate || externalFilter[item.code].from\" [maxDate]=\"item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].from\">\r\n                </sd-input>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].to\">\r\n                </sd-input>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.group === 'column'\">\r\n            <sd-input *ngIf=\"item.type === 'string'\" [label]=\"item.title\" type=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-input *ngIf=\"item.type === 'number'\" [label]=\"item.title\" type=\" number\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-select *ngIf=\"item.type === 'bool'\" [label]=\"item.title\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n            {value:'0',display:item.falseValue || 'False' }]\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'radio'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-date-time *ngIf=\"item.type ==='date' || item.type==='datetime' ||\r\n            item.type==='time'\" [label]=\"item.title\" [(model)]=\" filter[item.code]\" type=\"date\">\r\n            </sd-date-time>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </sd-modal-body>\r\n  <ng-container *ngIf=\"page === 1\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"page = 2\" icon=\"arrow_forward\" [title]=\"'Next' | sdTranslate\" color=\"primary\"\r\n        iconSuffix=\"true\" [disabled]=\"!fields.length\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"clear\"\r\n        [title]=\"'Cancel' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"page = 2\" icon=\"arrow_forward\"\r\n        [title]=\"'Next' | sdTranslate\" color=\"primary\" width=\"100%\" iconSuffix=\"true\" [disabled]=\"!fields.length\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"page === 2\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"page = 1\" icon=\"arrow_back\" [title]=\"'Back' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"page = 1\" icon=\"arrow_back\"\r\n        [title]=\"'Back' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n        color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n</sd-modal>",
+                    template: "<sd-modal width=\"sm\" [title]=\"(page === 1 ? 'Select filtered fields':'Input filtered fields') | sdTranslate\" #modal>\r\n  <sd-modal-body>\r\n    <div class=\"row\">\r\n      <ng-container *ngIf=\"page === 1\">\r\n        <div *ngFor=\"let field of selectableFields\" class=\"col-12\">\r\n          <sd-switch [(model)]=\"selectedField[field.id]\" [label]=\"field.title\" (sdChange)=\"onSelectFields()\">\r\n          </sd-switch>\r\n        </div>\r\n      </ng-container>\r\n      <ng-container *ngIf=\"page === 2\">\r\n        <div class=\"col-12\" *ngFor=\"let item of fields\">\r\n          <ng-container *ngIf=\"item.group === 'external'\">\r\n            <sd-input [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input>\r\n            <sd-input-currency [label]=\"item.title\" *ngIf=\"item.type === 'number'\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-input-currency>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'bool'\" [items]=\" [{value:'1',display:item.trueValue || 'True' },\r\n              {value:'0',display:item.falseValue || 'False' }]\" valueField=\"value\" displayField=\"display\"\r\n              [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <sd-select [label]=\"item.title\" *ngIf=\"item.type === 'radio'\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n            </sd-select>\r\n            <ng-container *ngIf=\"item.type === 'values'\">\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                multiple=\"true\">\r\n              </sd-select>\r\n              <sd-autocomplete *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-autocomplete>\r\n              <sd-select *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\"\r\n                filtered=\"true\" multiple=\"true\">\r\n              </sd-select>\r\n              <sd-select *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n                [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.code]\">\r\n              </sd-select>\r\n            </ng-container>\r\n            <sd-input *ngIf=\"item.type === 'custom'\" [label]=\"item.title\"\r\n              [(model)]=\"externalFilter[displayKey + item.code]\"\r\n              (sdFocusForceBlur)=\"item?.onClick(externalFilter, item.code, displayKey + item.code)\">\r\n            </sd-input>\r\n            <sd-date-time [label]=\"item.title\" *ngIf=\"item.type ==='date'\" [(model)]=\"externalFilter[item.code]\"\r\n              type=\"date\">\r\n            </sd-date-time>\r\n            <sd-date-range [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n              [(from)]=\"externalFilter[item.code].from\" [(to)]=\"externalFilter[item.code].to\" [min]=\"item.minDate\"\r\n              [max]=\"item.maxDate\">\r\n            </sd-date-range>\r\n            <ng-container *ngIf=\"item.type ==='daterange'\">\r\n              <div class=\"row\">\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.fromTitle\" [(model)]=\"externalFilter[item.code].from\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\" [minDate]=\"item.minDate\"\r\n                    [maxDate]=\"externalFilter[item.code].to || item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n                <div class=\"col-6\">\r\n                  <sd-date-time [label]=\"item.toTitle\" [(model)]=\"externalFilter[item.code].to\"\r\n                    [type]=\"item.enableTime ? 'datetime' : 'date'\"\r\n                    [minDate]=\"item.minDate || externalFilter[item.code].from\" [maxDate]=\"item.maxDate\">\r\n                  </sd-date-time>\r\n                </div>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"row\" *ngIf=\"item.type ==='numberrange'\">\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].from\">\r\n                </sd-input>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-input [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.code].to\">\r\n                </sd-input>\r\n              </div>\r\n            </div>\r\n          </ng-container>\r\n          <ng-container *ngIf=\"item.group === 'column'\">\r\n            <sd-input *ngIf=\"item.type === 'string'\" [label]=\"item.title\" type=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-input *ngIf=\"item.type === 'number'\" [label]=\"item.title\" type=\" number\" [(model)]=\"filter[item.code]\">\r\n            </sd-input>\r\n            <sd-select *ngIf=\"item.type === 'bool'\" [label]=\"item.title\" [items]=\"[{value:'1',display:item.trueValue || 'True' },\r\n            {value:'0',display:item.falseValue || 'False' }]\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-select *ngIf=\"item.type === 'radio'\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-autocomplete *ngIf=\"item.type === 'values' && item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-autocomplete>\r\n            <sd-select *ngIf=\"item.type === 'values' && !item.editor?.autocomplete\" [label]=\"item.title\"\r\n              [items]=\"item.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[item.code]\">\r\n            </sd-select>\r\n            <sd-date-time *ngIf=\"item.type ==='date' || item.type==='datetime' ||\r\n            item.type==='time'\" [label]=\"item.title\" [(model)]=\" filter[item.code]\" type=\"date\">\r\n            </sd-date-time>\r\n          </ng-container>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </sd-modal-body>\r\n  <ng-container *ngIf=\"page === 1\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"onCancel()\" icon=\"clear\" [title]=\"'Cancel' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"page = 2\" icon=\"arrow_forward\" [title]=\"'Next' | sdTranslate\" color=\"primary\"\r\n        iconSuffix=\"true\" [disabled]=\"!fields.length\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"onCancel()\" icon=\"clear\"\r\n        [title]=\"'Cancel' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"page = 2\" icon=\"arrow_forward\"\r\n        [title]=\"'Next' | sdTranslate\" color=\"primary\" width=\"100%\" iconSuffix=\"true\" [disabled]=\"!fields.length\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"page === 2\">\r\n    <sd-modal-footer *sdDesktop>\r\n      <sd-button class=\"mr-auto\" (action)=\"page = 1\" icon=\"arrow_back\" [title]=\"'Back' | sdTranslate\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\" color=\"primary\" size=\"sm\">\r\n      </sd-button>\r\n    </sd-modal-footer>\r\n    <sd-modal-footer *sdMobileTablet>\r\n      <sd-button style=\"flex: 1; padding-right: 5px;\" (action)=\"page = 1\" icon=\"arrow_back\"\r\n        [title]=\"'Back' | sdTranslate\" width=\"100%\" size=\"sm\"></sd-button>\r\n      <sd-button style=\"flex: 1; padding-left: 5px;\" (action)=\"onAccept()\" icon=\"done\" [title]=\"'Accept' | sdTranslate\"\r\n        color=\"primary\" width=\"100%\" size=\"sm\"></sd-button>\r\n    </sd-modal-footer>\r\n  </ng-container>\r\n</sd-modal>",
                     styles: [""]
                 },] }
     ];