import { moveItemInArray } from '@angular/cdk/drag-drop';
import { Component, ViewChild } from '@angular/core';
import { ZUIDialogComponent } from '../../../dialog';
export class ZuiTableOptionDialogComponent {
    constructor() {
        this.todo = ['Get to work', 'Pick up groceries', 'Go home', 'Fall asleep'];
        this.displayedColumns = ['no', 'title', 'width', 'hide', 'sticky'];
        this.dataSource = ELEMENT_DATA;
        this.open = () => {
            this.dialog.open();
            this.dialog.afterClosed(result => {
                console.log('afterClosed', result);
            });
        };
        this.setDefault = () => {
            console.log('default');
        };
        this.save = () => {
            console.log('save');
            this.dialog.close();
        };
        this.drop = (event) => {
            const previousIndex = this.dataSource.findIndex(row => row === event.item.data);
            moveItemInArray(this.dataSource, previousIndex, event.currentIndex);
            this.dataSource = this.dataSource.slice();
        };
    }
}
ZuiTableOptionDialogComponent.decorators = [
    { type: Component, args: [{
                selector: 'zui-table-option-dialog',
                template: "<zui-dialog title=\"Option\" width=\"500px\" #dialog>\n  <zui-dialog-body>\n    <table mat-table [dataSource]=\"dataSource\" [cdkDropListData]=\"dataSource\" (cdkDropListDropped)=\"drop($event)\" class=\"w-100\" cdkDropList>\n      <ng-container matColumnDef=\"no\">\n        <th mat-header-cell *matHeaderCellDef class=\"zui-option-dialog__title\">#</th>\n        <td mat-cell *matCellDef=\"let item\">\n          <mat-icon cdkDragHandle class=\"zui-option-dialog__drag\">open_with</mat-icon>\n        </td>\n      </ng-container>\n      <ng-container matColumnDef=\"title\">\n        <th mat-header-cell *matHeaderCellDef class=\"zui-option-dialog__title\">Title</th>\n        <td mat-cell *matCellDef=\"let item\">\n          <zui-input [placeholder]=\"item.title\" width=\"200px\" disabledError></zui-input>\n        </td>\n      </ng-container>\n      <ng-container matColumnDef=\"width\">\n        <th mat-header-cell *matHeaderCellDef class=\"zui-option-dialog__title\">Width</th>\n        <td mat-cell *matCellDef=\"let item\">\n          <zui-input [placeholder]=\"item.title\" width=\"100px\" disabledError></zui-input>\n        </td>\n      </ng-container>\n      <ng-container matColumnDef=\"hide\">\n        <th mat-header-cell *matHeaderCellDef class=\"zui-option-dialog__title\">Hide</th>\n        <td mat-cell *matCellDef=\"let item\">\n          <zui-checkbox type=\"slide\"></zui-checkbox>\n        </td>\n      </ng-container>\n      <ng-container matColumnDef=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef class=\"zui-option-dialog__title\">Sticky</th>\n        <td mat-cell *matCellDef=\"let item\">\n          <zui-checkbox type=\"slide\"></zui-checkbox>\n        </td>\n      </ng-container>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns\" cdkDrag [cdkDragData]=\"row\" cdkDragLockAxis=\"y\"></tr>\n    </table>\n  </zui-dialog-body>\n  <zui-dialog-footer>\n    <zui-button (action)=\"setDefault()\" label=\"Default\" prefixIcon=\"restart_alt\" type=\"stroked\" class=\"mr-5\"></zui-button>\n    <zui-button (action)=\"save()\" label=\"Save\" prefixIcon=\"save\" color=\"primary\" type=\"stroked\"></zui-button>\n  </zui-dialog-footer>\n</zui-dialog>\n",
                styles: [".zui-option-dialog__title{font-size:14px;color:#000}.zui-option-dialog__drag{cursor:move;opacity:.5}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-preview>td:first-child>*{margin-right:5px}.cdk-drag-preview>td:nth-child(2)>*{margin-right:16px}.cdk-drag-preview>td:nth-child(3)>*,.cdk-drag-preview>td:nth-child(4)>*{margin-right:8px}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}"]
            },] }
];
ZuiTableOptionDialogComponent.propDecorators = {
    dialog: [{ type: ViewChild, args: ['dialog',] }]
};
const ELEMENT_DATA = [
    { position: 1, title: 'Hydrogen', weight: 1.0079, symbol: 'H' },
    { position: 2, title: 'Helium', weight: 4.0026, symbol: 'He' },
    { position: 3, title: 'Lithium', weight: 6.941, symbol: 'Li' },
    { position: 4, title: 'Beryllium', weight: 9.0122, symbol: 'Be' },
    { position: 5, title: 'Boron', weight: 10.811, symbol: 'B' },
    { position: 6, title: 'Carbon', weight: 12.0107, symbol: 'C' },
    { position: 7, title: 'Nitrogen', weight: 14.0067, symbol: 'N' },
    { position: 8, title: 'Oxygen', weight: 15.9994, symbol: 'O' },
    { position: 9, title: 'Fluorine', weight: 18.9984, symbol: 'F' },
    { position: 10, title: 'Neon', weight: 20.1797, symbol: 'Ne' },
];
//# sourceMappingURL=index.component.js.map