import * as tslib_1 from "tslib";
import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, EventEmitter, ViewChild, ElementRef, Optional, Renderer2, ChangeDetectorRef, forwardRef, Inject } from '@angular/core';
import { OnChange } from '../core/decorators';
import { TableComponent } from './table';
import { OverlayComponent } from '../overlay';
import { OverlayOriginDirective } from '../overlay/overlay-origin.directive';
/**
 * table header item component
 */
var TableHeaderItemComponent = /** @class */ (function () {
    function TableHeaderItemComponent(_table, _cd, _el, _render) {
        this._table = _table;
        this._cd = _cd;
        this._el = _el;
        this._render = _render;
        /**
         * table filter event, emits a `FilterParam` Object
         */
        this.filter = new EventEmitter();
        this.filterReset = new EventEmitter();
        this.filterHide = new EventEmitter();
        /**
         * table sort event, emits a `SortParam` Object
         */
        this.sort = new EventEmitter();
        /**
         * Whether the filter panel should show filter buttons, e.g. when a single select filter, there
         * no need filter button to trigger the filter event
         */
        this.showFilterButton = true;
        /**
         * table cell align position
         * @default left
         */
        this.align = 'left';
        /**
         * Whether the column can be resizable
         * @default false
         */
        this.resizable = false;
        /**
         * the index in the table columns
         * @docs-private
         */
        this._columnIndex = 0;
        /**
         * Whether the column is in filtered mode
         * @docs-private
         */
        this.filtered = false;
    }
    Object.defineProperty(TableHeaderItemComponent.prototype, "order", {
        /**
         * table field order type
         */
        get: function () { return this._order; },
        set: function (value) {
            this._order = value;
            this._cd.markForCheck();
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TableHeaderItemComponent.prototype, "showFilter", {
        /**
         * Whether show the filter panel
         * @docs-private
         */
        get: function () { return this._showFilter; },
        set: function (value) {
            this._showFilter = value;
            this._cd.markForCheck();
        },
        enumerable: true,
        configurable: true
    });
    TableHeaderItemComponent.prototype.ngOnInit = function () {
        if (this._table) {
            // set default sort status
            if (this._table.orderBy === this.field) {
                this.order = this._table.order;
            }
            // it resizable only table can be resizable and column can be resizable
            this.resizable = this._table.resizable /**&& this.resizable **/;
        }
        this.overlay.origin = this.origin;
    };
    TableHeaderItemComponent.prototype.toggleOverlay = function () {
        this.showFilter = !this.showFilter;
        this.overlay.isVisible() ? this.hide() : this.show();
    };
    TableHeaderItemComponent.prototype.show = function () {
        this.showFilter = true;
        this.overlay.show();
    };
    TableHeaderItemComponent.prototype.hide = function () {
        this.showFilter = false;
        this.overlay.hide();
    };
    TableHeaderItemComponent.prototype.ngAfterViewInit = function () {
    };
    /**
     * toggle filter panel
     * @docs-private
     */
    TableHeaderItemComponent.prototype.onToggleFilter = function () {
        this.toggleOverlay();
    };
    TableHeaderItemComponent.prototype.ngOnDestroy = function () {
    };
    /**
     * get the column width
     * @return {number} column width
     * @docs-private
     */
    TableHeaderItemComponent.prototype.getElementWidth = function () {
        var el = this._el.nativeElement;
        return el.getBoundingClientRect().width;
    };
    /**
     * set the column width
     * @param {number} width - column width
     * @docs-private
     */
    TableHeaderItemComponent.prototype.setElementWidth = function (width) {
        var el = this._el.nativeElement;
        this._render.setStyle(el, 'width', width + 'px');
    };
    /**
     * on column filter
     * @docs-private
     */
    TableHeaderItemComponent.prototype.onFilter = function () {
        // in filter mode
        this.filtered = true;
        this.hide();
        // emit filter params
        this.filter.emit({
            field: this.field,
            target: this
        });
    };
    /**
     * hide filter
     * @docs-private
     */
    TableHeaderItemComponent.prototype.onCancel = function () {
        this.filtered = false;
        this.hide();
        this.filterReset.emit({
            field: this.field,
            target: this
        });
    };
    /**
     * on column sort
     * @docs-private
     */
    TableHeaderItemComponent.prototype.onSort = function () {
        if (!this.sortable) {
            return;
        }
        this.order = (!this.order || this.order === 'asc') ? 'desc' : 'asc';
        // update table current order and orderBy
        if (this._table) {
            this._table.orderBy = this.field;
            this._table.order = this.order;
        }
    };
    /**
     * column resize begin
     * @param {MouseEvent} event - mouse event
     * @docs-private
     */
    TableHeaderItemComponent.prototype.onColumnResizeBegin = function (event) {
        // cache table position
        if (!this._tablePos) {
            this._tablePos = this._table.getTablePosition();
        }
        // compute left position relative to the table
        var leftRelativeTable = event.clientX - this._tablePos.left;
        // mark the table is resizing columns
        this._table.startColumnResizing();
        // tell the parent table the `_columnIndex`th column is resizing columns
        this._table.setColumeResizeStartPosition(leftRelativeTable, this._columnIndex);
        // it's important here to prevent default copy behaviors
        return false;
    };
    TableHeaderItemComponent.prototype.onFilterPanelHide = function (event) {
        this.filterHide.emit(event);
    };
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], TableHeaderItemComponent.prototype, "filter", void 0);
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], TableHeaderItemComponent.prototype, "filterReset", void 0);
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], TableHeaderItemComponent.prototype, "filterHide", void 0);
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], TableHeaderItemComponent.prototype, "sort", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], TableHeaderItemComponent.prototype, "sortable", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], TableHeaderItemComponent.prototype, "tipable", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], TableHeaderItemComponent.prototype, "filterable", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], TableHeaderItemComponent.prototype, "showFilterButton", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], TableHeaderItemComponent.prototype, "align", void 0);
    tslib_1.__decorate([
        ViewChild('origin', { static: true }),
        tslib_1.__metadata("design:type", OverlayOriginDirective)
    ], TableHeaderItemComponent.prototype, "origin", void 0);
    tslib_1.__decorate([
        ViewChild('overlay', { static: true }),
        tslib_1.__metadata("design:type", OverlayComponent)
    ], TableHeaderItemComponent.prototype, "overlay", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", Object),
        tslib_1.__metadata("design:paramtypes", [Object])
    ], TableHeaderItemComponent.prototype, "order", null);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], TableHeaderItemComponent.prototype, "field", void 0);
    tslib_1.__decorate([
        OnChange(true),
        Input(),
        tslib_1.__metadata("design:type", Boolean)
    ], TableHeaderItemComponent.prototype, "resizable", void 0);
    TableHeaderItemComponent = tslib_1.__decorate([
        Component({
            selector: 'th[nb-th], th[field]',
            template: "<div class=\"field-title-wrapper\" (click)=\"onSort()\"><ng-content select=\".field-title\"></ng-content></div><ng-container *ngIf=\"tipable\"><i class=\"iconfont icon-help\" [nbTooltip]=\"tip\" placement=\"top\" hasArrow></i></ng-container><i [class.hide]=\"!filterable\" nbOverlayOrigin #origin=\"nbOverlayOrigin\" class=\"iconfont icon-filter\" [class.active]=\"showFilter || filtered\" (click)=\"onToggleFilter()\"></i><ng-container *ngIf=\"sortable\"><span title=\"sort\" (click)=\"onSort()\" class=\"sort-group\" [class.sort-group-asc]=\"order=='asc'\" [class.sort-group-desc]=\"order=='desc'\"><i class=\"iconfont icon-sort-desc\"></i> <i class=\"iconfont icon-sort-asc\"></i></span></ng-container><ng-template #tip><ng-content select=\".tip-content\"></ng-content></ng-template><ng-template #filter><ng-content select=\"[nb-table-filter]\"></ng-content><div *ngIf=\"showFilterButton\" class=\"filter-content-button\"><button size=\"sm\" theme=\"primary\" nb-button (click)=\"onFilter()\">筛选</button> <button size=\"sm\" theme=\"default\" nb-button (click)=\"onCancel()\">重置</button></div></ng-template><nb-overlay #overlay placement=\"bottom-left\" (closeHandler)=\"onFilterPanelHide($event)\"><div class=\"table-filter-panel\"><ng-container *ngTemplateOutlet=\"filter\"></ng-container></div></nb-overlay><div *ngIf=\"resizable\" class=\"table-resize-bar\" (mousedown)=\"onColumnResizeBegin($event)\"></div>",
            preserveWhitespaces: false,
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            host: {
                'class': 'nb-table-td nb-table-th',
                '[class.nb-table-td-left]': 'align == "left"',
                '[class.nb-table-td-center]': 'align == "center"',
                '[class.nb-table-td-right]': 'align == "right"'
            },
            exportAs: 'nbTH'
        }),
        tslib_1.__param(0, Optional()), tslib_1.__param(0, Inject(forwardRef(function () { return TableComponent; }))),
        tslib_1.__metadata("design:paramtypes", [TableComponent,
            ChangeDetectorRef,
            ElementRef,
            Renderer2])
    ], TableHeaderItemComponent);
    return TableHeaderItemComponent;
}());
export { TableHeaderItemComponent };
//# sourceMappingURL=table-th.js.map