/* eslint-disable @angular-eslint/no-input-rename */
import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output, ViewEncapsulation } from '@angular/core';
import { fadeInLinearAnimation } from '@angular-ru/cdk/animations';
import { SortOrderType } from '@angular-ru/cdk/typings';
import { isNotNil, isTrue } from '@angular-ru/cdk/utils';
import { FilterableService } from '../../services/filterable/filterable.service';
import { OVERLOAD_WIDTH_TABLE_HEAD_CELL } from '../../table-builder.properties';
import * as i0 from "@angular/core";
import * as i1 from "../../services/filterable/filterable.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular-ru/cdk/pipes";
function TableTheadComponent_ng_template_2_Template(rf, ctx) { }
function TableTheadComponent_ng_template_3_ng_template_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0);
    i0.ɵɵpipe(1, "titlecase");
} if (rf & 2) {
    const ctx_r6 = i0.ɵɵnextContext(2);
    i0.ɵɵtextInterpolate1(" ", (ctx_r6.columnSchema == null ? null : ctx_r6.columnSchema.th == null ? null : ctx_r6.columnSchema.th.headTitle) || i0.ɵɵpipeBind1(1, 1, ctx_r6.columnSchema == null ? null : ctx_r6.columnSchema.key), " ");
} }
function TableTheadComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, TableTheadComponent_ng_template_3_ng_template_0_Template, 2, 3, "ng-template", 8);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵproperty("ngIf", !(ctx_r2.columnSchema == null ? null : ctx_r2.columnSchema.th == null ? null : ctx_r2.columnSchema.th.emptyHead));
} }
function TableTheadComponent_div_6_span_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵnamespaceSVG();
    i0.ɵɵnamespaceHTML();
    i0.ɵɵelementStart(0, "span", 13);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r7 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("@fadeInLinear", undefined);
    i0.ɵɵadvance(1);
    i0.ɵɵtextInterpolate1(" ", ctx_r7.positionMap[ctx_r7.columnSchema == null ? null : ctx_r7.columnSchema.key], " ");
} }
function TableTheadComponent_div_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelementStart(1, "svg", 10);
    i0.ɵɵelement(2, "path", 11);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(3, TableTheadComponent_div_6_span_3_Template, 2, 2, "span", 12);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("table-grid__column--sortable--active", ctx_r3.sortableDefinition[ctx_r3.columnSchema == null ? null : ctx_r3.columnSchema.key]);
    i0.ɵɵadvance(1);
    i0.ɵɵclassProp("table-grid-icon--sortable__asc", ctx_r3.sortableDefinition[ctx_r3.columnSchema == null ? null : ctx_r3.columnSchema.key] === ctx_r3.orderType.ASC)("table-grid-icon--sortable__desc", ctx_r3.sortableDefinition[ctx_r3.columnSchema == null ? null : ctx_r3.columnSchema.key] === ctx_r3.orderType.DESC);
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("ngIf", ctx_r3.sortableCount > 1);
} }
function TableTheadComponent_div_7_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 14);
    i0.ɵɵlistener("click", function TableTheadComponent_div_7_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r8 = i0.ɵɵnextContext(); return (ctx_r8.columnSchema == null ? null : ctx_r8.columnSchema.filterable) ? ctx_r8.openFilter(ctx_r8.columnSchema == null ? null : ctx_r8.columnSchema.key, $event) : null; });
    i0.ɵɵpipe(1, "isFilled");
    i0.ɵɵnamespaceSVG();
    i0.ɵɵelementStart(2, "svg", 15);
    i0.ɵɵelement(3, "polygon", 16);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r4 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("table-grid__column--filterable--active", i0.ɵɵpipeBind1(1, 2, ctx_r4.filterableDefinition[ctx_r4.columnSchema == null ? null : ctx_r4.columnSchema.key]));
} }
function TableTheadComponent_div_8_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 17);
    i0.ɵɵlistener("mousedown", function TableTheadComponent_div_8_Template_div_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r10 = i0.ɵɵnextContext(); return ctx_r10.resizing.emit({ event: $event, key: ctx_r10.columnSchema == null ? null : ctx_r10.columnSchema.key }); })("click", function TableTheadComponent_div_8_Template_div_click_0_listener($event) { return $event.stopPropagation(); });
    i0.ɵɵelement(1, "div", 18);
    i0.ɵɵelementEnd();
} }
const _c0 = function () { return []; };
export class TableTheadComponent {
    constructor(filterable) {
        this.filterable = filterable;
        this.columnWidth = 0;
        this.headHeight = null;
        this.sortableDefinition = {};
        this.positionMap = {};
        this.sortableCount = 0;
        this.filterableDefinition = {};
        this.clientRowHeight = null;
        this.columnSchema = null;
        this.resizing = new EventEmitter();
        this.sortByKey = new EventEmitter();
        this.openContextMenu = new EventEmitter();
        this.orderType = SortOrderType;
        this.limit = OVERLOAD_WIDTH_TABLE_HEAD_CELL;
    }
    openContextMenuHandler($event) {
        this.openContextMenu.emit($event);
    }
    sortIfEnabled() {
        const key = this.columnSchema?.key;
        if (isNotNil(key)) {
            const sortIsEnabled = isTrue(this.columnSchema?.sortable);
            const sortIsActive = isNotNil(this.sortableDefinition[key]);
            if (sortIsEnabled || sortIsActive) {
                this.sortByKey.emit(key);
            }
        }
    }
    openFilter(key, event) {
        if (isNotNil(key)) {
            this.filterable.openFilter(key, event);
        }
        /**
         * Note: need to be called so that the cell (parent element) does not catch the event and start sorting
         */
        event.stopPropagation();
        event.preventDefault();
    }
}
/** @nocollapse */ TableTheadComponent.ɵfac = function TableTheadComponent_Factory(t) { return new (t || TableTheadComponent)(i0.ɵɵdirectiveInject(i1.FilterableService)); };
/** @nocollapse */ TableTheadComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TableTheadComponent, selectors: [["table-thead"]], hostBindings: function TableTheadComponent_HostBindings(rf, ctx) { if (rf & 1) {
        i0.ɵɵlistener("contextmenu", function TableTheadComponent_contextmenu_HostBindingHandler($event) { return ctx.openContextMenuHandler($event); });
    } }, inputs: { columnWidth: ["column-width", "columnWidth"], headHeight: ["head-height", "headHeight"], sortableDefinition: ["sortable-definition", "sortableDefinition"], positionMap: ["sortable-position", "positionMap"], sortableCount: ["sortable-count", "sortableCount"], filterableDefinition: ["filterable-definition", "filterableDefinition"], clientRowHeight: ["client-row-height", "clientRowHeight"], columnSchema: ["column-schema", "columnSchema"] }, outputs: { resizing: "resizing", sortByKey: "sortByKey", openContextMenu: "openContextMenu" }, decls: 9, vars: 34, consts: [[1, "table-grid__cell", "table-grid__header-cell", 3, "ngClass", "ngStyle", "click"], [1, "table-grid__cell--content", "table-grid__header-cell--content"], [3, "ngIfElse", "ngIf", "ngTemplateOutlet"], ["defaultTh", ""], [1, "table-grid__header-cell-head--settings"], ["class", "table-grid__column--sortable", 3, "table-grid__column--sortable--active", 4, "ngIf"], ["class", "table-grid__column--filterable", 3, "table-grid__column--filterable--active", "click", 4, "ngIf"], ["class", "table-grid__column--resize", 3, "mousedown", "click", 4, "ngIf"], [3, "ngIf"], [1, "table-grid__column--sortable"], ["viewBox", "0 0 512 512", "xmlns", "http://www.w3.org/2000/svg", 1, "table-grid-icon--sortable"], ["d", "M128.4,189.3L233.4,89c5.8-6,13.7-9,22.4-9c8.7,0,16.5,3,22.4,9l105.4,100.3c12.5,11.9,12.5,31.3,0,43.2  c-12.5,11.9-32.7,11.9-45.2,0L288,184.4v217c0,16.9-14.3,30.6-32,30.6c-17.7,0-32-13.7-32-30.6v-217l-50.4,48.2  c-12.5,11.9-32.7,11.9-45.2,0C115.9,220.6,115.9,201.3,128.4,189.3z"], ["class", "table-grid-icon--sortable-number", 4, "ngIf"], [1, "table-grid-icon--sortable-number"], [1, "table-grid__column--filterable", 3, "click"], ["fill", "none", "height", "24", "stroke-linecap", "round", "stroke-linejoin", "round", "stroke-width", "2", "viewBox", "0 0 24 24", "width", "24", "xmlns", "http://www.w3.org/2000/svg", 1, "table-grid-icon--filterable"], ["points", "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"], [1, "table-grid__column--resize", 3, "mousedown", "click"], [1, "table-grid__column--resize--line"]], template: function TableTheadComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0);
        i0.ɵɵlistener("click", function TableTheadComponent_Template_div_click_0_listener() { return ctx.sortIfEnabled(); });
        i0.ɵɵelementStart(1, "div", 1);
        i0.ɵɵtemplate(2, TableTheadComponent_ng_template_2_Template, 0, 0, "ng-template", 2);
        i0.ɵɵtemplate(3, TableTheadComponent_ng_template_3_Template, 1, 1, "ng-template", null, 3, i0.ɵɵtemplateRefExtractor);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(5, "div", 4);
        i0.ɵɵtemplate(6, TableTheadComponent_div_6_Template, 4, 7, "div", 5);
        i0.ɵɵtemplate(7, TableTheadComponent_div_7_Template, 4, 4, "div", 6);
        i0.ɵɵtemplate(8, TableTheadComponent_div_8_Template, 2, 0, "div", 7);
        i0.ɵɵelementEnd()();
    } if (rf & 2) {
        const _r1 = i0.ɵɵreference(4);
        i0.ɵɵstyleProp("min-height", ctx.headHeight || (ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.height) || ctx.clientRowHeight, "px")("max-height", ctx.headHeight || (ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.height) || ctx.clientRowHeight, "px");
        i0.ɵɵclassProp("table-grid__header-cell--is-clickable", ctx.columnSchema == null ? null : ctx.columnSchema.sortable)("table-grid__cell--empty-head", ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.emptyHead)("table-grid__cell--custom-cell", ctx.columnSchema == null ? null : ctx.columnSchema.customColumn)("table-grid__cell--is-model-cell", ctx.columnSchema == null ? null : ctx.columnSchema.isModel)("table-grid__cell--text-bold", ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.textBold)("table-grid__cell--resizable", ctx.columnSchema == null ? null : ctx.columnSchema.resizable)("table-grid__header-cell--min-width", ctx.columnWidth < ctx.limit);
        i0.ɵɵproperty("ngClass", (ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.class) || i0.ɵɵpureFunction0(32, _c0))("ngStyle", (ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.style) || i0.ɵɵpureFunction0(33, _c0));
        i0.ɵɵadvance(1);
        i0.ɵɵclassProp("table-grid__cell--content-sortable-is-active", ctx.sortableDefinition[ctx.columnSchema == null ? null : ctx.columnSchema.key])("table-grid__cell--content-sortable", ctx.columnSchema == null ? null : ctx.columnSchema.sortable)("table-grid__cell--nowrap", ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.nowrap);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIfElse", _r1)("ngIf", ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.template)("ngTemplateOutlet", ctx.columnSchema == null ? null : ctx.columnSchema.th == null ? null : ctx.columnSchema.th.template);
        i0.ɵɵadvance(4);
        i0.ɵɵproperty("ngIf", ctx.columnSchema == null ? null : ctx.columnSchema.sortable);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", ctx.columnSchema == null ? null : ctx.columnSchema.filterable);
        i0.ɵɵadvance(1);
        i0.ɵɵproperty("ngIf", ctx.columnSchema == null ? null : ctx.columnSchema.resizable);
    } }, directives: [i2.NgClass, i2.NgStyle, i2.NgIf, i2.NgTemplateOutlet], pipes: [i2.TitleCasePipe, i3.IsFilledPipe], encapsulation: 2, data: { animation: [fadeInLinearAnimation] }, changeDetection: 0 });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableTheadComponent, [{
        type: Component,
        args: [{ selector: 'table-thead', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [fadeInLinearAnimation], template: "<div\n    class=\"table-grid__cell table-grid__header-cell\"\n    [class.table-grid__header-cell--is-clickable]=\"columnSchema?.sortable\"\n    [class.table-grid__cell--empty-head]=\"columnSchema?.th?.emptyHead\"\n    [class.table-grid__cell--custom-cell]=\"columnSchema?.customColumn\"\n    [class.table-grid__cell--is-model-cell]=\"columnSchema?.isModel\"\n    [class.table-grid__cell--text-bold]=\"columnSchema?.th?.textBold\"\n    [class.table-grid__cell--resizable]=\"columnSchema?.resizable\"\n    [class.table-grid__header-cell--min-width]=\"columnWidth < limit\"\n    [style.min-height.px]=\"headHeight || columnSchema?.th?.height || clientRowHeight\"\n    [style.max-height.px]=\"headHeight || columnSchema?.th?.height || clientRowHeight\"\n    [ngClass]=\"columnSchema?.th?.class || []\"\n    [ngStyle]=\"columnSchema?.th?.style || []\"\n    (click)=\"sortIfEnabled()\"\n>\n    <div\n        class=\"table-grid__cell--content table-grid__header-cell--content\"\n        [class.table-grid__cell--content-sortable-is-active]=\"sortableDefinition[columnSchema?.key!]\"\n        [class.table-grid__cell--content-sortable]=\"columnSchema?.sortable\"\n        [class.table-grid__cell--nowrap]=\"columnSchema?.th?.nowrap!\"\n    >\n        <ng-template\n            [ngIfElse]=\"defaultTh\"\n            [ngIf]=\"columnSchema?.th?.template!\"\n            [ngTemplateOutlet]=\"columnSchema?.th?.template!\"\n        ></ng-template>\n        <ng-template #defaultTh>\n            <ng-template [ngIf]=\"!columnSchema?.th?.emptyHead!\">\n                {{ columnSchema?.th?.headTitle || (columnSchema?.key! | titlecase) }}\n            </ng-template>\n        </ng-template>\n    </div>\n\n    <div class=\"table-grid__header-cell-head--settings\">\n        <div\n            *ngIf=\"columnSchema?.sortable\"\n            class=\"table-grid__column--sortable\"\n            [class.table-grid__column--sortable--active]=\"sortableDefinition[columnSchema?.key!]\"\n        >\n            <svg\n                viewBox=\"0 0 512 512\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"table-grid-icon--sortable\"\n                [class.table-grid-icon--sortable__asc]=\"sortableDefinition[columnSchema?.key!] === orderType.ASC\"\n                [class.table-grid-icon--sortable__desc]=\"sortableDefinition[columnSchema?.key!] === orderType.DESC\"\n            >\n                <path\n                    d=\"M128.4,189.3L233.4,89c5.8-6,13.7-9,22.4-9c8.7,0,16.5,3,22.4,9l105.4,100.3c12.5,11.9,12.5,31.3,0,43.2  c-12.5,11.9-32.7,11.9-45.2,0L288,184.4v217c0,16.9-14.3,30.6-32,30.6c-17.7,0-32-13.7-32-30.6v-217l-50.4,48.2  c-12.5,11.9-32.7,11.9-45.2,0C115.9,220.6,115.9,201.3,128.4,189.3z\"\n                />\n            </svg>\n            <span\n                *ngIf=\"sortableCount > 1\"\n                class=\"table-grid-icon--sortable-number\"\n                [@fadeInLinear]\n            >\n                {{ positionMap[columnSchema?.key!] }}\n            </span>\n        </div>\n\n        <div\n            *ngIf=\"columnSchema?.filterable\"\n            class=\"table-grid__column--filterable\"\n            [class.table-grid__column--filterable--active]=\"$any(filterableDefinition)[columnSchema?.key!] | isFilled\"\n            (click)=\"columnSchema?.filterable ? openFilter(columnSchema?.key, $event) : null\"\n        >\n            <svg\n                fill=\"none\"\n                height=\"24\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                viewBox=\"0 0 24 24\"\n                width=\"24\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                class=\"table-grid-icon--filterable\"\n            >\n                <polygon points=\"22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3\"></polygon>\n            </svg>\n        </div>\n\n        <div\n            *ngIf=\"columnSchema?.resizable\"\n            class=\"table-grid__column--resize\"\n            (mousedown)=\"resizing.emit({ event: $event, key: columnSchema?.key! })\"\n            (click)=\"$event.stopPropagation()\"\n        >\n            <div class=\"table-grid__column--resize--line\"></div>\n        </div>\n    </div>\n</div>\n" }]
    }], function () { return [{ type: i1.FilterableService }]; }, { columnWidth: [{
            type: Input,
            args: ['column-width']
        }], headHeight: [{
            type: Input,
            args: ['head-height']
        }], sortableDefinition: [{
            type: Input,
            args: ['sortable-definition']
        }], positionMap: [{
            type: Input,
            args: ['sortable-position']
        }], sortableCount: [{
            type: Input,
            args: ['sortable-count']
        }], filterableDefinition: [{
            type: Input,
            args: ['filterable-definition']
        }], clientRowHeight: [{
            type: Input,
            args: ['client-row-height']
        }], columnSchema: [{
            type: Input,
            args: ['column-schema']
        }], resizing: [{
            type: Output
        }], sortByKey: [{
            type: Output
        }], openContextMenu: [{
            type: Output
        }], openContextMenuHandler: [{
            type: HostListener,
            args: ['contextmenu', ['$event']]
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 