import { __awaiter, __decorate, __generator, __read, __spread, __values } from "tslib";
// tslint:disable-next-line:max-line-length
import { Component, OnInit, AfterViewInit, ViewChild, Output, EventEmitter, Input, ChangeDetectorRef, ViewEncapsulation } from '@angular/core';
import { SettingService } from '../../../../services/setting/setting.service';
import { TranslateService } from '../../../../services/translate/translate.service';
import { NotifyService } from '../../../../services/notify/notify.service';
import { DeviceDetectorService } from 'ngx-device-detector';
var GridPopupFilterComponent = /** @class */ (function () {
    function GridPopupFilterComponent(ref, deviceService, settingService, notifyService, translateService) {
        var _this = this;
        this.ref = ref;
        this.settingService = settingService;
        this.notifyService = notifyService;
        this.translateService = translateService;
        this.keyPrefix = 'PopupFilter';
        this.displayKey = 'SDCUSTOM';
        this.isMobileOrTablet = false;
        this.key = '';
        this.accept = new EventEmitter();
        this.clear = new EventEmitter();
        this.loadInlineFilter = new EventEmitter();
        this.newQuickFilter = 'e1ef1d43-d689-424f-959e-e6cd154cfee7';
        this.filter = {};
        this.externalFilter = {};
        this.columns = [];
        this.externalFilters = [];
        this.quickFilters = [];
        this.maxQuickFilters = 5;
        this.inlineExternal = {};
        this.inlineColumn = {};
        this.open = function (fixedColums, normalColumns, filter, externalFilter, externalFilters) {
            _this.init(fixedColums, normalColumns, filter, externalFilter, externalFilters);
            _this.modal.open();
        };
        this.init = function (fixedColums, normalColumns, filter, externalFilter, externalFilters) {
            var e_1, _a, e_2, _b;
            _this.columns = __spread(fixedColums, normalColumns).filter(function (e) { var _a; return !((_a = e.filter) === null || _a === void 0 ? void 0 : _a.disabled) && e.type !== 'image'; });
            _this.columns.forEach(function (column) {
                if (column.type === 'children') {
                    column.children = column.children.filter(function (e) { var _a; return !((_a = e.filter) === null || _a === void 0 ? void 0 : _a.disabled) && e.type !== 'image'; });
                }
            });
            if (externalFilters) {
                _this.externalFilters = externalFilters.filter(function (e) { return !e.disabled; });
            }
            else {
                _this.externalFilters = [];
            }
            _this.filter = filter;
            _this.externalFilter = _this.initExternalFilter(externalFilters, externalFilter);
            try {
                for (var _c = __values(_this.externalFilters), _d = _c.next(); !_d.done; _d = _c.next()) {
                    var eFilter = _d.value;
                    if (_this.inlineExternal[eFilter.field] === undefined) {
                        _this.inlineExternal[eFilter.field] = true;
                    }
                }
            }
            catch (e_1_1) { e_1 = { error: e_1_1 }; }
            finally {
                try {
                    if (_d && !_d.done && (_a = _c.return)) _a.call(_c);
                }
                finally { if (e_1) throw e_1.error; }
            }
            try {
                for (var _e = __values(_this.columns), _f = _e.next(); !_f.done; _f = _e.next()) {
                    var column = _f.value;
                    if (_this.inlineColumn[column.field] === undefined) {
                        _this.inlineColumn[column.field] = true;
                    }
                }
            }
            catch (e_2_1) { e_2 = { error: e_2_1 }; }
            finally {
                try {
                    if (_f && !_f.done && (_b = _e.return)) _b.call(_e);
                }
                finally { if (e_2) throw e_2.error; }
            }
        };
        this.close = function () {
            _this.modal.close();
        };
        this.onSelectionChange = function (change) {
            var _a;
            var value = ((_a = change) === null || _a === void 0 ? void 0 : _a.value) || '';
            if (value === _this.newQuickFilter) {
                _this.selectedCode = '';
                _this.onCreateQuickFilter();
                _this.ref.detectChanges();
            }
            else {
                var quickFilter = _this.quickFilters.find(function (e) { return e.code === value; });
                if (quickFilter) {
                    _this.onDetailQuickFilter(quickFilter);
                }
            }
        };
        this.onCreateQuickFilter = function (ev) {
            var _a, _b, _c;
            (_a = ev) === null || _a === void 0 ? void 0 : _a.stopPropagation();
            (_b = ev) === null || _b === void 0 ? void 0 : _b.preventDefault();
            (_c = _this.matSelect) === null || _c === void 0 ? void 0 : _c.close();
            _this.popupQuickFilterDetail.open(_this.columns, _this.externalFilters);
        };
        this.onDetailQuickFilter = function (quickFilter) { return __awaiter(_this, void 0, void 0, function () {
            var f1, f2;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        if (!quickFilter) return [3 /*break*/, 2];
                        this.selectedCode = quickFilter.code;
                        f1 = JSON.stringify(quickFilter.filter);
                        f2 = JSON.stringify(quickFilter.externalFilter);
                        this.filter = JSON.parse(f1);
                        this.externalFilter = this.initExternalFilter(this.externalFilters, JSON.parse(f2));
                        return [4 /*yield*/, this.updateConfiguration()];
                    case 1:
                        _a.sent();
                        _a.label = 2;
                    case 2: return [2 /*return*/];
                }
            });
        }); };
        this.onEditQuickFilter = function (ev, quickFilter) {
            var _a;
            ev.stopPropagation();
            ev.preventDefault();
            (_a = _this.matSelect) === null || _a === void 0 ? void 0 : _a.close();
            if (quickFilter) {
                _this.popupQuickFilterDetail.open(_this.columns, _this.externalFilters, quickFilter.filter, quickFilter.externalFilter, quickFilter.code);
                _this.ref.detectChanges();
            }
        };
        this.onDeleteQuickFilter = function (ev, quickFilter) {
            var _a;
            ev.stopPropagation();
            ev.preventDefault();
            (_a = _this.matSelect) === null || _a === void 0 ? void 0 : _a.close();
            if (quickFilter) {
                _this.notifyService.confirm(_this.translateService.translate('Remove filter')).then(function () { return __awaiter(_this, void 0, void 0, function () {
                    var idx;
                    return __generator(this, function (_a) {
                        switch (_a.label) {
                            case 0:
                                if (quickFilter.code === this.selectedCode) {
                                    this.selectedCode = '';
                                }
                                idx = this.quickFilters.findIndex(function (e) { return e.code === quickFilter.code; });
                                this.quickFilters.splice(idx, 1);
                                return [4 /*yield*/, this.updateConfiguration()];
                            case 1:
                                _a.sent();
                                this.ref.detectChanges();
                                return [2 /*return*/];
                        }
                    });
                }); });
            }
        };
        this.onAcceptQuickFilter = function (args) { return __awaiter(_this, void 0, void 0, function () {
            var quickFilter;
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        quickFilter = this.quickFilters.find(function (e) { return e.code === args.code; });
                        if (!quickFilter) {
                            this.quickFilters.push({
                                code: args.code,
                                filter: args.filter,
                                externalFilter: this.initExternalFilter(this.externalFilters, args.externalFilter)
                            });
                        }
                        else {
                            quickFilter.filter = args.filter;
                            quickFilter.externalFilter = this.initExternalFilter(this.externalFilters, args.externalFilter);
                        }
                        return [4 /*yield*/, this.updateConfiguration()];
                    case 1:
                        _a.sent();
                        return [2 /*return*/];
                }
            });
        }); };
        this.onInlineChange = function () {
            _this.updateConfiguration();
        };
        this.initExternalFilter = function (externalFilters, externalFilter) {
            externalFilter = externalFilter || {};
            externalFilters = externalFilters || [];
            externalFilters.forEach(function (e) {
                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
                if (e.type === 'string') {
                    if (e.default) {
                        externalFilter[e.field] = (_a = e.default, (_a !== null && _a !== void 0 ? _a : ''));
                    }
                    return;
                }
                if (e.type === 'number') {
                    externalFilter[e.field] = (_c = (_b = externalFilter[e.field], (_b !== null && _b !== void 0 ? _b : e.default)), (_c !== null && _c !== void 0 ? _c : undefined));
                    return;
                }
                if (e.type === 'daterange') {
                    externalFilter[e.field] = {
                        from: (_f = (_e = (_d = externalFilter[e.field]) === null || _d === void 0 ? void 0 : _d.from, (_e !== null && _e !== void 0 ? _e : e.defaultFrom)), (_f !== null && _f !== void 0 ? _f : undefined)),
                        to: (_j = (_h = (_g = externalFilter[e.field]) === null || _g === void 0 ? void 0 : _g.to, (_h !== null && _h !== void 0 ? _h : e.defaultTo)), (_j !== null && _j !== void 0 ? _j : undefined))
                    };
                    return;
                }
                if (e.type === 'numberrange') {
                    externalFilter[e.field] = {
                        from: (_m = (_l = (_k = externalFilter[e.field]) === null || _k === void 0 ? void 0 : _k.from, (_l !== null && _l !== void 0 ? _l : e.defaultFrom)), (_m !== null && _m !== void 0 ? _m : undefined)),
                        to: (_q = (_p = (_o = externalFilter[e.field]) === null || _o === void 0 ? void 0 : _o.to, (_p !== null && _p !== void 0 ? _p : e.defaultTo)), (_q !== null && _q !== void 0 ? _q : undefined))
                    };
                    return;
                }
                if (e.type === 'daterangefull') {
                    externalFilter[e.field] = {
                        from: (_t = (_s = (_r = externalFilter[e.field]) === null || _r === void 0 ? void 0 : _r.from, (_s !== null && _s !== void 0 ? _s : e.defaultFrom)), (_t !== null && _t !== void 0 ? _t : undefined)),
                        to: (_w = (_v = (_u = externalFilter[e.field]) === null || _u === void 0 ? void 0 : _u.to, (_v !== null && _v !== void 0 ? _v : e.defaultTo)), (_w !== null && _w !== void 0 ? _w : undefined))
                    };
                    return;
                }
            });
            return externalFilter;
        };
        this.isMobileOrTablet = !deviceService.isDesktop();
    }
    GridPopupFilterComponent.prototype.ngOnInit = function () {
        var _this = this;
        this.loadConfiguration().then(function () {
            _this.loadInlineFilter.emit({
                quickFilters: _this.quickFilters || [],
                selectedQuickFilter: _this.selectedCode || '',
                inlineExternal: _this.inlineExternal,
                inlineColumn: _this.inlineColumn
            });
        });
    };
    GridPopupFilterComponent.prototype.ngAfterViewInit = function () {
    };
    GridPopupFilterComponent.prototype.onAccept = function () {
        var _a, _b;
        var _c;
        if (((_c = this.filterOption) === null || _c === void 0 ? void 0 : _c.multiple) === false) {
            if (this.selectedField) {
                if (this.selectedField.startsWith('column')) {
                    var field = this.selectedField.replace('column', '');
                    this.accept.emit({
                        filter: (_a = {},
                            _a[field] = this.filter[field],
                            _a),
                        externalFilter: {}
                    });
                }
                else if (this.selectedField.startsWith('external')) {
                    var field = this.selectedField.replace('external', '');
                    this.accept.emit({
                        filter: {},
                        externalFilter: this.initExternalFilter(this.externalFilters, (_b = {},
                            _b[field] = this.externalFilter[field],
                            _b))
                    });
                }
            }
        }
        else {
            this.accept.emit({
                filter: this.filter,
                externalFilter: this.externalFilter
            });
        }
        this.modal.close();
    };
    GridPopupFilterComponent.prototype.onClear = function () {
        delete this.selectedCode;
        this.clear.emit();
    };
    GridPopupFilterComponent.prototype.loadConfiguration = function () {
        var _a, _b, _c, _d;
        return __awaiter(this, void 0, void 0, function () {
            var configuration, _e, _f, externalFilter, _g, _h, column;
            var e_3, _j, e_4, _k;
            return __generator(this, function (_l) {
                switch (_l.label) {
                    case 0:
                        this.quickFilters = [];
                        if (!this.key) {
                            return [2 /*return*/];
                        }
                        return [4 /*yield*/, this.settingService.hasKey(this.keyPrefix + this.key)];
                    case 1:
                        if (!(_l.sent())) {
                            return [2 /*return*/];
                        }
                        return [4 /*yield*/, this.settingService.get(this.keyPrefix + this.key)];
                    case 2:
                        configuration = _l.sent();
                        if (Array.isArray((_a = configuration) === null || _a === void 0 ? void 0 : _a.quickFilters)) {
                            this.quickFilters = configuration.quickFilters;
                        }
                        this.selectedCode = ((_b = configuration) === null || _b === void 0 ? void 0 : _b.selectedQuickFilter) || '';
                        this.inlineExternal = ((_c = configuration) === null || _c === void 0 ? void 0 : _c.inlineExternal) || {};
                        this.inlineColumn = ((_d = configuration) === null || _d === void 0 ? void 0 : _d.inlineColumn) || {};
                        try {
                            for (_e = __values(this.externalFilters), _f = _e.next(); !_f.done; _f = _e.next()) {
                                externalFilter = _f.value;
                                if (this.inlineExternal[externalFilter.field] === undefined) {
                                    this.inlineExternal[externalFilter.field] = true;
                                }
                            }
                        }
                        catch (e_3_1) { e_3 = { error: e_3_1 }; }
                        finally {
                            try {
                                if (_f && !_f.done && (_j = _e.return)) _j.call(_e);
                            }
                            finally { if (e_3) throw e_3.error; }
                        }
                        try {
                            for (_g = __values(this.columns), _h = _g.next(); !_h.done; _h = _g.next()) {
                                column = _h.value;
                                if (this.inlineColumn[column.field] === undefined) {
                                    this.inlineColumn[column.field] = true;
                                }
                            }
                        }
                        catch (e_4_1) { e_4 = { error: e_4_1 }; }
                        finally {
                            try {
                                if (_h && !_h.done && (_k = _g.return)) _k.call(_g);
                            }
                            finally { if (e_4) throw e_4.error; }
                        }
                        return [2 /*return*/];
                }
            });
        });
    };
    GridPopupFilterComponent.prototype.updateConfiguration = function (selectedQuickFilterCode) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        if (!this.key) {
                            return [2 /*return*/];
                        }
                        if (selectedQuickFilterCode !== undefined) {
                            this.selectedCode = selectedQuickFilterCode;
                        }
                        return [4 /*yield*/, this.settingService.set(this.keyPrefix + this.key, {
                                quickFilters: this.quickFilters,
                                selectedQuickFilter: this.selectedCode,
                                inlineExternal: this.inlineExternal,
                                inlineColumn: this.inlineColumn
                            })];
                    case 1:
                        _a.sent();
                        this.loadInlineFilter.emit({
                            quickFilters: this.quickFilters || [],
                            selectedQuickFilter: this.selectedCode || '',
                            inlineExternal: this.inlineExternal,
                            inlineColumn: this.inlineColumn
                        });
                        this.ref.detectChanges();
                        return [2 /*return*/];
                }
            });
        });
    };
    GridPopupFilterComponent.ctorParameters = function () { return [
        { type: ChangeDetectorRef },
        { type: DeviceDetectorService },
        { type: SettingService },
        { type: NotifyService },
        { type: TranslateService }
    ]; };
    __decorate([
        ViewChild('modal')
    ], GridPopupFilterComponent.prototype, "modal", void 0);
    __decorate([
        ViewChild('popupQuickFilterDetail')
    ], GridPopupFilterComponent.prototype, "popupQuickFilterDetail", void 0);
    __decorate([
        ViewChild('matSelect')
    ], GridPopupFilterComponent.prototype, "matSelect", void 0);
    __decorate([
        Input()
    ], GridPopupFilterComponent.prototype, "key", void 0);
    __decorate([
        Input()
    ], GridPopupFilterComponent.prototype, "filterOption", void 0);
    __decorate([
        Output()
    ], GridPopupFilterComponent.prototype, "accept", void 0);
    __decorate([
        Output()
    ], GridPopupFilterComponent.prototype, "clear", void 0);
    __decorate([
        Output()
    ], GridPopupFilterComponent.prototype, "loadInlineFilter", void 0);
    __decorate([
        Input()
    ], GridPopupFilterComponent.prototype, "inlineExternal", void 0);
    __decorate([
        Input()
    ], GridPopupFilterComponent.prototype, "inlineColumn", void 0);
    GridPopupFilterComponent = __decorate([
        Component({
            selector: 'sd-grid-popup-filter',
            template: "<sd-modal-control 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-form\" 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 class=\"sd-form\" 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-checkbox-control [(model)]=\"inlineExternal[item.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-checkbox-control>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input-control [label]=\"item.title\" *ngIf=\"item.type === 'string'\" type=\"text\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input-control>\r\n          <sd-input-control [label]=\"item.title\" *ngIf=\"item.type === 'number'\" type=\"number\"\r\n            [(model)]=\"externalFilter[item.field]\">\r\n          </sd-input-control>\r\n          <sd-select-control [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-control>\r\n          <sd-select-control [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-control>\r\n          <ng-container *ngIf=\"item.type === 'values'\">\r\n            <sd-select-control *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-control>\r\n            <sd-autocomplete-control *ngIf=\"item.selection === 'AUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-autocomplete-control>\r\n            <sd-chip-control *ngIf=\"item.selection === 'MULTIPLEAUTOCOMPLETE'\" [label]=\"item.title\"\r\n              [items]=\"item.values\" [valueField]=\"item.valueField\" [displayField]=\"item.displayField\"\r\n              [(model)]=\"externalFilter[item.field]\">\r\n            </sd-chip-control>\r\n            <sd-select-control *ngIf=\"!item.selection\" [label]=\"item.title\" [items]=\"item.values\"\r\n              [valueField]=\"item.valueField\" [displayField]=\"item.displayField\" [(model)]=\"externalFilter[item.field]\">\r\n            </sd-select-control>\r\n          </ng-container>\r\n          <sd-input-control *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-control>\r\n          <sd-date-picker-control [label]=\"item.title\" *ngIf=\"item.type ==='date'\"\r\n            [(model)]=\"externalFilter[item.field]\" type=\"date\">\r\n          </sd-date-picker-control>\r\n          <sd-date-range-picker-control [label]=\"item.title\" *ngIf=\"item.type ==='daterangefull'\"\r\n            [(fromDate)]=\"externalFilter[item.field].from\" [(toDate)]=\"externalFilter[item.field].to\"\r\n            [minDate]=\"item.minDate\" [maxDate]=\"item.maxDate\" type=\"date\">\r\n          </sd-date-range-picker-control>\r\n          <ng-container *ngIf=\"item.type ==='daterange'\">\r\n            <div class=\"row\">\r\n              <div class=\"col-6\">\r\n                <sd-date-picker-control [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-picker-control>\r\n              </div>\r\n              <div class=\"col-6\">\r\n                <sd-date-picker-control [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-picker-control>\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-control [label]=\"item.fromTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].from\">\r\n              </sd-input-control>\r\n            </div>\r\n            <div class=\"col-6\">\r\n              <sd-input-control [label]=\"item.toTitle\" type=\" number\" [(model)]=\"externalFilter[item.field].to\">\r\n              </sd-input-control>\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-checkbox-control [(model)]=\"inlineColumn[column.field]\" (sdChange)=\"onInlineChange()\">\r\n            </sd-checkbox-control>\r\n          </div>\r\n        </ng-container>\r\n        <div class=\"c-filterable\">\r\n          <sd-input-control *ngIf=\"column.type === 'string'\" [label]=\"column.title\" type=\"text\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input-control>\r\n          <sd-input-control *ngIf=\"column.type === 'number'\" [label]=\"column.title\" type=\" number\"\r\n            [(model)]=\"filter[column.field]\">\r\n          </sd-input-control>\r\n          <sd-radio-control *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-radio-control>\r\n          <sd-select-control *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-control>\r\n          <sd-select-control *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-control>\r\n          <sd-autocomplete-control *ngIf=\"column.type === 'values' && column?.editor?.autocomplete\"\r\n            [items]=\"column.values\" valueField=\"value\" displayField=\"text\" [(model)]=\"filter[column.field]\">\r\n          </sd-autocomplete-control>\r\n          <sd-date-picker-control *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-picker-control>\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-checkbox-control [(model)]=\"inlineColumn[childColumn.field]\" (sdChange)=\"onInlineChange()\">\r\n                </sd-checkbox-control>\r\n              </div>\r\n            </ng-container>\r\n            <div class=\"c-filterable\">\r\n              <sd-input-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'string'\" type=\"text\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input-control>\r\n              <sd-input-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'number'\" type=\" number\"\r\n                [(model)]=\"filter[childColumn.field]\">\r\n              </sd-input-control>\r\n              <sd-radio-control [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-radio-control>\r\n              <sd-radio-control [label]=\"childColumn.title\" *ngIf=\"childColumn.type === 'radio'\"\r\n                [items]=\"childColumn.values\" [valueField]=\"childColumn.valueField\"\r\n                [displayField]=\"childColumn.displayField\" [(model)]=\"filter[childColumn.field]\">\r\n              </sd-radio-control>\r\n              <sd-autocomplete-control [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-control>\r\n              <sd-date-picker-control [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-picker-control>\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-control>\r\n<sd-grid-popup-quick-filter-detail #popupQuickFilterDetail (accept)=\"onAcceptQuickFilter($event)\">\r\n</sd-grid-popup-quick-filter-detail>",
            encapsulation: ViewEncapsulation.None,
            styles: [".sd-form{width:100%;font-size:14px}.sd-form.sd-form-with-information{width:calc(100% - 30px)}.sd-information{display:inline-block;text-align:center;margin:auto;width:30px}.cdk-overlay-container .mat-option{font-size:12px}.swal2-popup .swal2-content .swal2-html-container{line-height:1.7;color:#7c7c7e}.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month{opacity:1;cursor:pointer}.daterangepicker{z-index:99999}", ".sd-label.sd-label-primary{color:#2f6bff!important}.sd-label.sd-label-success{color:#00bc3c!important}.sd-label.sd-label-info{color:#13c2c2!important}.sd-label.sd-label-warning{color:#fa8c16!important}.sd-label.sd-label-danger{color:#f5222d!important}", "::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:50px}::-webkit-scrollbar-thumb:hover{background:#555}", ".cdk-overlay-container{z-index:10000}.c-fa-icon{font-size:20px;color:gray}.c-checkable{width:30px}.c-filterable{flex:1}"]
        })
    ], GridPopupFilterComponent);
    return GridPopupFilterComponent;
}());
export { GridPopupFilterComponent };
//# sourceMappingURL=data:application/json;base64, 