import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
import * as i3 from "@angular/cdk/drag-drop";
import * as i4 from "../form-field/form-field-control.directive";
import * as i5 from "../dropdown/dropdown.component";
import * as i6 from "../dropdown/dropdown-menu.component";
import * as i7 from "../dropdown/dropdown-trigger.directive";
import * as i8 from "@ngx-translate/core";
export class DataTableColumnPickerComponent {
    constructor() {
        this.reorder = new EventEmitter();
        this.resetColumns = new EventEmitter();
    }
    toggleColumn(column) {
        column.setVisibility(!column.visible);
    }
    drop(event) {
        this.reorder.emit({
            column: event.item.data,
            newIndex: event.currentIndex,
        });
    }
    reset() {
        this.columns.forEach(c => c.resetVisibility());
        this.resetColumns.emit();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableColumnPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: DataTableColumnPickerComponent, selector: "vdr-data-table-colum-picker", inputs: { columns: "columns", uiLanguage: "uiLanguage" }, outputs: { reorder: "reorder", resetColumns: "resetColumns" }, ngImport: i0, template: "<vdr-dropdown [manualToggle]=\"true\">\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\n        <clr-icon shape=\"view-columns\"></clr-icon>\n    </button>\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n            <div\n                *ngFor=\"let column of columns; index as i\"\n                class=\"mx-2 column-list\"\n                cdkDrag\n                cdkDragLockAxis=\"y\"\n                [cdkDragData]=\"column\"\n            >\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\n                </div>\n                <label class=\"flex\">\n                    <clr-checkbox-container>\n                        <clr-checkbox-wrapper>\n                            <input\n                                type=\"checkbox\"\n                                clrCheckbox\n                                [disabled]=\"column.optional === false\"\n                                [indeterminate]=\"column.optional === false\"\n                                [checked]=\"column.visible\"\n                                (change)=\"toggleColumn(column)\"\n                                class=\"mr-1\"\n                            />\n                            <label>{{ column.heading | translate }}</label>\n                        </clr-checkbox-wrapper>\n                    </clr-checkbox-container>\n                </label>\n            </div>\n        </div>\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\n            <button class=\"button-small\" (click)=\"reset()\">\n                <span>{{ 'common.reset-columns' | translate }}</span>\n                <clr-icon shape=\"history\"></clr-icon>\n            </button>\n        </div>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i1.ClrLabel, selector: "label", inputs: ["for"] }, { kind: "directive", type: i1.ClrCheckbox, selector: "[clrCheckbox],[clrToggle]" }, { kind: "component", type: i1.ClrCheckboxContainer, selector: "clr-checkbox-container,clr-toggle-container", inputs: ["clrInline"] }, { kind: "component", type: i1.ClrCheckboxWrapper, selector: "clr-checkbox-wrapper,clr-toggle-wrapper" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i4.FormFieldControlDirective, selector: "input, textarea, select" }, { kind: "component", type: i5.DropdownComponent, selector: "vdr-dropdown", inputs: ["manualToggle"] }, { kind: "component", type: i6.DropdownMenuComponent, selector: "vdr-dropdown-menu", inputs: ["vdrPosition", "customClasses"] }, { kind: "directive", type: i7.DropdownTriggerDirective, selector: "[vdrDropdownTrigger]" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: DataTableColumnPickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-data-table-colum-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-dropdown [manualToggle]=\"true\">\n    <button class=\"button-small\" vdrDropdownTrigger [title]=\"'common.select-table-columns' | translate\">\n        <clr-icon shape=\"view-columns\"></clr-icon>\n    </button>\n    <vdr-dropdown-menu vdrPosition=\"bottom-left\">\n        <div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n            <div\n                *ngFor=\"let column of columns; index as i\"\n                class=\"mx-2 column-list\"\n                cdkDrag\n                cdkDragLockAxis=\"y\"\n                [cdkDragData]=\"column\"\n            >\n                <div cdkDragHandle class=\"drag-handle\" [cdkDragHandleDisabled]=\"column.orderable === false\">\n                    <clr-icon shape=\"drag-handle\"></clr-icon>\n                </div>\n                <label class=\"flex\">\n                    <clr-checkbox-container>\n                        <clr-checkbox-wrapper>\n                            <input\n                                type=\"checkbox\"\n                                clrCheckbox\n                                [disabled]=\"column.optional === false\"\n                                [indeterminate]=\"column.optional === false\"\n                                [checked]=\"column.visible\"\n                                (change)=\"toggleColumn(column)\"\n                                class=\"mr-1\"\n                            />\n                            <label>{{ column.heading | translate }}</label>\n                        </clr-checkbox-wrapper>\n                    </clr-checkbox-container>\n                </label>\n            </div>\n        </div>\n        <div class=\"mt-1 pt-1 mx-1 flex center reset-button\">\n            <button class=\"button-small\" (click)=\"reset()\">\n                <span>{{ 'common.reset-columns' | translate }}</span>\n                <clr-icon shape=\"history\"></clr-icon>\n            </button>\n        </div>\n    </vdr-dropdown-menu>\n</vdr-dropdown>\n", styles: [".column-list{display:flex;align-items:center}.drag-handle{cursor:grab;margin-top:-4px}.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:0}.reset-button{border-top:1px solid var(--color-weight-125)}\n"] }]
        }], propDecorators: { columns: [{
                type: Input
            }], uiLanguage: [{
                type: Input
            }], reorder: [{
                type: Output
            }], resetColumns: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 