var _inlineOperator_1, _valueChanges, _subcription;
import { __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { startWith } from 'rxjs/operators';
import { SdFilterOperators } from '../../models/grid-column.model';
export class SdColumnInlineFilter {
    constructor(ref) {
        this.ref = ref;
        this.inlineSymbol = 'filter_alt';
        _inlineOperator_1.set(this, void 0);
        this.inlineOperatorChange = new EventEmitter();
        this.columnFilter = {};
        this.operators = [];
        this.filterChange = new EventEmitter();
        _valueChanges.set(this, new Subject());
        _subcription.set(this, new Subscription());
        this.onFilterChange = () => {
            this.filterChange.emit();
        };
        this.onChangeOperator = (operator) => {
            if (operator) {
                __classPrivateFieldSet(this, _inlineOperator_1, operator.value);
                this.inlineSymbol = operator.symbol;
            }
            else {
                __classPrivateFieldSet(this, _inlineOperator_1, null);
                this.inlineSymbol = 'filter_alt';
            }
            this.inlineOperatorChange.emit(__classPrivateFieldGet(this, _inlineOperator_1));
            this.ref.markForCheck();
        };
    }
    _value(value) {
        this.value = value;
        __classPrivateFieldGet(this, _valueChanges).next();
    }
    set _inlineOperator(inlineOperator) {
        var _a, _b;
        if (__classPrivateFieldGet(this, _inlineOperator_1) !== inlineOperator) {
            __classPrivateFieldSet(this, _inlineOperator_1, inlineOperator);
            this.inlineSymbol = (_b = (_a = SdFilterOperators.find(e => e.value === inlineOperator)) === null || _a === void 0 ? void 0 : _a.symbol) !== null && _b !== void 0 ? _b : 'filter_alt';
        }
    }
    set _columnFilter(columnFilter) {
        this.columnFilter = columnFilter || {};
        __classPrivateFieldGet(this, _valueChanges).next();
    }
    set _column(column) {
        var _a, _b, _c;
        this.column = column;
        if (!((_a = column === null || column === void 0 ? void 0 : column.filter) === null || _a === void 0 ? void 0 : _a.disabled) && ((_c = (_b = column === null || column === void 0 ? void 0 : column.filter) === null || _b === void 0 ? void 0 : _b.operator) === null || _c === void 0 ? void 0 : _c.enable)) {
            this.operators = SdFilterOperators.filter(e => { var _a, _b; return (_b = (_a = column.filter.operator.list) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, e.value); });
        }
        else {
            this.operators = [];
        }
    }
    ngOnInit() {
        __classPrivateFieldGet(this, _subcription).add(__classPrivateFieldGet(this, _valueChanges).pipe(startWith(this.columnFilter)).subscribe(() => {
            var _a, _b;
            if (this.column.type === 'date' || this.column.type === 'time' || this.column.type === 'datetime') {
                if (!((_b = (_a = this.column) === null || _a === void 0 ? void 0 : _a.option) === null || _b === void 0 ? void 0 : _b.useFilterDate)) {
                    this.columnFilter[this.column.field] = this.columnFilter[this.column.field] || {
                        from: null,
                        to: null,
                    };
                }
            }
        }));
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _subcription).unsubscribe();
    }
}
_inlineOperator_1 = new WeakMap(), _valueChanges = new WeakMap(), _subcription = new WeakMap();
SdColumnInlineFilter.decorators = [
    { type: Component, args: [{
                selector: 'sd-column-inline-filter',
                template: "<div class=\"d-flex c-inline-column align-items-end\">\r\n  <ng-container *ngIf=\"\r\n      column.type === 'string' ||\r\n        column.type === 'number' ||\r\n        column.type === 'bool' ||\r\n        column.type === 'values' ||\r\n        column.type === 'date' ||\r\n        column.type === 'datetime' ||\r\n        column.type === 'time';\r\n      else noFilter\r\n    \">\r\n    <ng-container *ngIf=\"operators.length\">\r\n      <div class=\"d-flex align-items-center\">\r\n        <!-- Only number column icon broken. add mb when not default symbol -->\r\n        <sd-button class=\"{{ (column.type === 'number' && inlineSymbol !== 'filter_alt') ? 'mb-4 mr-2 ' :'mr-2 '}}\" fontSet=\"material-symbols-outlined\" [icon]=\"inlineSymbol\" size=\"sm\"\r\n        [matMenuTriggerFor]=\"menu\" type=\"link\"> </sd-button>\r\n        <mat-menu #menu=\"matMenu\">\r\n          <button *ngFor=\"let operator of operators\" (click)=\"onChangeOperator(operator)\" mat-menu-item type=\"button\">\r\n            <mat-icon  fontSet=\"material-symbols-outlined\" class=\"{{column.type === 'number' ? 'mb-8 ':''}}\">{{ operator.symbol }}</mat-icon>\r\n            <span> {{ operator.display }}</span>\r\n          </button>\r\n        </mat-menu>\r\n      </div>\r\n    </ng-container>\r\n    <sd-input *ngIf=\"column.type === 'string'\" style=\"flex: 1\" size=\"sm\" type=\"text\"\r\n      [(model)]=\"columnFilter[column.field]\" (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input>\r\n    <sd-input-number *ngIf=\"column.type === 'number'\" style=\"flex: 1\" size=\"sm\" [(model)]=\"columnFilter[column.field]\"\r\n      (keyupEnter)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n    </sd-input-number>\r\n    <sd-select *ngIf=\"column.type === 'bool'\" style=\"flex: 1\" size=\"sm\" [items]=\"[\r\n        { value: '1', display: column.option?.displayOnTrue || 'True' },\r\n        { value: '0', display: column.option?.displayOnFalse || 'False' }\r\n      ]\" valueField=\"value\" displayField=\"display\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n      <ng-template sdSelectDisplayDef let-item=\"item\">\r\n        <sd-badge *ngIf=\"item.value === '1'\" color=\"success\" [title]=\"column.option?.displayOnTrue || 'True'\">\r\n        </sd-badge>\r\n        <sd-badge *ngIf=\"item.value === '0'\" color=\"danger\" [title]=\"column.option?.displayOnFalse || 'False'\">\r\n        </sd-badge>\r\n      </ng-template>\r\n    </sd-select>\r\n    <sd-select *ngIf=\"column.type === 'values' && column?.option?.selection !== 'AUTOCOMPLETE'\" style=\"flex: 1\"\r\n      size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\"\r\n      [multiple]=\"column?.option?.selection === 'MULTIPLE' || column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\"\r\n      [filtered]=\"column?.option?.selection === 'MULTIPLEAUTOCOMPLETE'\">\r\n    </sd-select>\r\n    <sd-autocomplete *ngIf=\"column.type === 'values' && column?.option?.selection === 'AUTOCOMPLETE'\" style=\"flex: 1\"\r\n      size=\"sm\" [items]=\"column.option.items\" [valueField]=\"column.option.valueField\"\r\n      [displayField]=\"column.option.displayField\" [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\"\r\n      [disabled]=\"column.filter?.disabled\">\r\n    </sd-autocomplete>\r\n    <ng-container *ngIf=\"column.type === 'date' || column.type === 'datetime' || column.type === 'time'\">\r\n      <sd-date-range *ngIf=\"!column.option?.useFilterDate\" style=\"flex: 1\" size=\"sm\"\r\n        [(from)]=\"columnFilter[column.field].from\" [(to)]=\"columnFilter[column.field].to\" (sdChange)=\"onFilterChange()\"\r\n        [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-range>\r\n      <sd-date-time *ngIf=\"column.option?.useFilterDate\" style=\"flex: 1\" type=\"date\" size=\"sm\"\r\n        [(model)]=\"columnFilter[column.field]\" (sdChange)=\"onFilterChange()\" [disabled]=\"column.filter?.disabled\">\r\n      </sd-date-time>\r\n    </ng-container>\r\n  </ng-container>\r\n  <ng-template #noFilter>\r\n    <sd-input type=\"text\" size=\"sm\" disabled> </sd-input>\r\n  </ng-template>\r\n</div>",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host ::ng-deep .c-inline-column .mat-form-field-wrapper{background-color:#fff;border-radius:8px;margin:8px 0 0!important;padding:0!important}"]
            },] }
];
SdColumnInlineFilter.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
SdColumnInlineFilter.propDecorators = {
    _value: [{ type: Input, args: ['value',] }],
    _inlineOperator: [{ type: Input, args: ['inlineOperator',] }],
    inlineOperatorChange: [{ type: Output }],
    _columnFilter: [{ type: Input, args: ['columnFilter',] }],
    _column: [{ type: Input, args: ['column',] }],
    filterChange: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64, 