var _setting;
import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
import { Component, ViewChild, EventEmitter, ChangeDetectorRef, Input, HostListener } from '@angular/core';
import { SdNotifyService } from '@sd-angular/core/notify';
import { SdTableConfigurationService } from '../../services/table-configuration.service';
import { moveItemInArray } from '@angular/cdk/drag-drop';
export class SdPopupConfiguration {
    constructor(ref, notifyService, gridConfigurationService) {
        this.ref = ref;
        this.notifyService = notifyService;
        this.gridConfigurationService = gridConfigurationService;
        this.changes = new EventEmitter();
        _setting.set(this, void 0);
        this.isCreatingColumn = false;
        this.selected = {};
        this.disabledDrag = true;
        this.open = () => __awaiter(this, void 0, void 0, function* () {
            __classPrivateFieldSet(this, _setting, this.gridConfigurationService.init(this.gridOption));
            this.configuration = __classPrivateFieldGet(this, _setting).get();
            this.modal.open();
        });
        this.onSave = () => {
            __classPrivateFieldGet(this, _setting).set(this.configuration);
            this.modal.close();
            this.ref.detectChanges();
        };
        this.onReset = () => __awaiter(this, void 0, void 0, function* () {
            this.notifyService.confirm('Xác nhận đưa tất cả thiết lập về mặc định').then(() => {
                __classPrivateFieldGet(this, _setting).remove();
                this.modal.close();
                this.ref.detectChanges();
            });
        });
    }
    ngOnInit() { }
    mouseUp(event) {
        this.disabledDrag = true;
    }
    dropTable(event) {
        moveItemInArray(this.configuration.columns, event.previousIndex, event.currentIndex);
        this.table.renderRows();
    }
    handleMouseDown() {
        this.disabledDrag = false;
    }
    handleMouseUp() {
        this.disabledDrag = true;
    }
}
_setting = new WeakMap();
SdPopupConfiguration.decorators = [
    { type: Component, args: [{
                selector: 'sd-popup-configuration',
                template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height: 70vh\">\r\n        <table\r\n          #table\r\n          mat-table\r\n          [dataSource]=\"configuration.columns\"\r\n          cdkDropList\r\n          [cdkDropListData]=\"configuration.columns\"\r\n          (cdkDropListDropped)=\"dropTable($event)\">\r\n          >\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 50px\">#</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <div class=\"c-handle\" (mousedown)=\"handleMouseDown()\" (mouseup)=\"handleMouseUp()\">\r\n                <svg width=\"24px\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\r\n                  <path\r\n                    d=\"M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z\"></path>\r\n                  <path d=\"M0 0h24v24H0z\" fill=\"none\"></path>\r\n                </svg>\r\n              </div>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"title\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef>{{ 'Title' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <sd-input [placeholder]=\"item?.origin?.title\" [(model)]=\"item.title\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"width\">\r\n            <th mat-header-cell class=\"c-th px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Width' | sdTranslate }}</th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item\">\r\n              <!-- <span>{{item.width}}</span>\r\n              <mat-slider\r\n                  step=\"1\"\r\n                  min=\"0\"\r\n                  [max]=\"+item?.origin?.width*3\"\r\n                  [(ngModel)]=\"+item.width\"\r\n                  aria-label=\"units\">\r\n                </mat-slider> -->\r\n              <sd-input [placeholder]=\"item?.origin?.width\" [(model)]=\"item.width\" disableErrorMessage></sd-input>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"invisible\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Hidden' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\"> </mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <ng-container matColumnDef=\"fixed\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width: 80px\">{{ 'Freeze' | sdTranslate }}</th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.fixed\" color=\"primary\"></mat-slide-toggle>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title', 'width', 'invisible', 'fixed']; sticky: true\"></tr>\r\n          <tr\r\n            mat-row\r\n            *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed']\"\r\n            cdkDrag\r\n            [cdkDragData]=\"row\"\r\n            cdkDragLockAxis=\"y\"\r\n            [cdkDragDisabled]=\"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <sd-button class=\"mr-8s\" (action)=\"onReset()\" title=\"M\u1EB7c \u0111\u1ECBnh\" color=\"info\" size=\"sm\"> </sd-button>\r\n    <sd-button (action)=\"onSave()\" title=\"L\u01B0u\" type=\"fill\" color=\"info\" size=\"sm\"> </sd-button>\r\n  </sd-modal-footer>\r\n</sd-modal>\r\n",
                styles: [".c-table{overflow:auto;position:relative}.c-table table{width:100%}.c-table .c-th{color:#000;font-size:14px;font-weight:500;line-height:20px}.c-container{min-height:200px;position:relative}.c-handle{color:#ccc;cursor:move}"]
            },] }
];
SdPopupConfiguration.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: SdNotifyService },
    { type: SdTableConfigurationService }
];
SdPopupConfiguration.propDecorators = {
    gridOption: [{ type: Input }],
    modal: [{ type: ViewChild, args: ['modal',] }],
    table: [{ type: ViewChild, args: ['table',] }],
    mouseUp: [{ type: HostListener, args: ['window:mouseup', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64, 