/* 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";
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 = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: TableTheadComponent, deps: [{ token: i1.FilterableService }], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ TableTheadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: TableTheadComponent, selector: "table-thead", 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" }, host: { listeners: { "contextmenu": "openContextMenuHandler($event)" } }, ngImport: i0, 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", directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "titlecase": i2.TitleCasePipe, "isFilled": i3.IsFilledPipe }, animations: [fadeInLinearAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: TableTheadComponent, decorators: [{
            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" }]
        }], ctorParameters: function () { return [{ type: i1.FilterableService }]; }, propDecorators: { 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, 