var _cache;
import { __awaiter, __classPrivateFieldGet, __classPrivateFieldSet } from "tslib";
import { Component, ViewChild, EventEmitter, ChangeDetectorRef, Input, HostListener } from '@angular/core';
import { SdNotifyService } from '@sd-angular/core/notify';
import { SdTranslateService } from '@sd-angular/core/translate';
import { SdGridConfigurationService } from '../../services/grid-configuration.service';
import * as uuid from 'uuid';
// import { SdGridMaterialColumn } from '@sd-angular/core/grid-material';
import { moveItemInArray } from '@angular/cdk/drag-drop';
export class SdPopupGridConfiguration {
    constructor(ref, notifyService, translateService, gridConfigurationService) {
        this.ref = ref;
        this.notifyService = notifyService;
        this.translateService = translateService;
        this.gridConfigurationService = gridConfigurationService;
        this.changes = new EventEmitter();
        _cache.set(this, void 0);
        this.isCreatingColumn = false;
        this.selected = {};
        this.disabledDrag = true;
        this.open = () => __awaiter(this, void 0, void 0, function* () {
            __classPrivateFieldSet(this, _cache, this.gridConfigurationService.init(this.key, this.gridOption));
            this.configuration = yield __classPrivateFieldGet(this, _cache).get();
            this.modal.open();
        });
        this.onSave = () => {
            __classPrivateFieldGet(this, _cache).set(this.configuration);
            this.modal.close();
            this.ref.detectChanges();
        };
        this.onReset = () => __awaiter(this, void 0, void 0, function* () {
            const { translate } = this.translateService;
            this.notifyService.confirm(translate('Reset grid configuration to default')).then(() => {
                __classPrivateFieldGet(this, _cache).remove();
                this.modal.close();
                this.ref.detectChanges();
            });
        });
        this.createColumn = () => __awaiter(this, void 0, void 0, function* () {
            this.selected = {};
            this.isCreatingColumn = true;
        });
        this.confirm = () => __awaiter(this, void 0, void 0, function* () {
            const generatedColumn = {
                origin: {
                    field: uuid.v4(),
                    title: 'Generated',
                    width: '300px'
                },
                fixed: false,
                invisible: false,
                title: 'Generated',
                width: '300px',
                isGeneratedColumn: true,
                generatedColumns: this.configuration.columns.filter(e => { var _a; return this.selected[(_a = e.origin) === null || _a === void 0 ? void 0 : _a.field]; }).map(e => { var _a; return (_a = e.origin) === null || _a === void 0 ? void 0 : _a.field; })
            };
            this.configuration.columns.push(generatedColumn);
            this.configuration = __classPrivateFieldGet(this, _cache).set(this.configuration);
            this.isCreatingColumn = false;
        });
    }
    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;
    }
}
_cache = new WeakMap();
SdPopupGridConfiguration.decorators = [
    { type: Component, args: [{
                selector: 'sd-popup-grid-configuration',
                template: "<sd-modal width=\"sm\" [title]=\"'Configuration' | sdTranslate\" #modal>\r\n  <sd-modal-body *ngIf=\"configuration\">\r\n    <div *ngIf=\"!isCreatingColumn\" class=\"c-container\">\r\n      <div class=\"c-table\" style=\"max-height:70vh\">\r\n        <table #table mat-table [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\">#\r\n            </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 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\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}}\r\n            </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}}\r\n            </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' |\r\n              sdTranslate}}\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <mat-slide-toggle [(ngModel)]=\"item.invisible\" color=\"primary\">\r\n              </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' |\r\n              sdTranslate}}\r\n            </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 mat-row *matRowDef=\"let row; columns: ['stt', 'title', 'width', 'invisible', 'fixed'];\" cdkDrag [cdkDragData]=\"row\" cdkDragLockAxis=\"y\" [cdkDragDisabled] = \"disabledDrag\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n    <div *ngIf=\"isCreatingColumn\">\r\n      <div class=\"c-table\" style=\"max-height:50vh\">\r\n        <table mat-table [dataSource]=\"configuration.columns\">\r\n          <ng-container matColumnDef=\"stt\">\r\n            <th mat-header-cell class=\"c-th text-center px-5\" *matHeaderCellDef style=\"width:50px\">#\r\n            </th>\r\n            <td class=\"text-center px-5\" mat-cell *matCellDef=\"let item; let idx = index\">\r\n              <sd-checkbox *ngIf=\"isCreatingColumn\" [(model)]=\"selected[item.origin?.field]\"></sd-checkbox>\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}}\r\n            </th>\r\n            <td class=\"px-5\" mat-cell *matCellDef=\"let item;\">\r\n              <span *ngIf=\"isCreatingColumn\">{{item.title || item?.origin?.title}}</span>\r\n            </td>\r\n          </ng-container>\r\n          <tr mat-header-row *matHeaderRowDef=\"['stt', 'title']; sticky: true\"></tr>\r\n          <tr mat-row *matRowDef=\"let row; columns: ['stt', 'title'];\"></tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </sd-modal-body>\r\n  <sd-modal-footer>\r\n    <ng-container *ngIf=\"!isCreatingColumn\">\r\n      <!-- <sd-button class=\"mr-auto\" (action)=\"createColumn()\" [title]=\"'Create column' | sdTranslate\" color=\"info\"\r\n        size=\"sm\">\r\n      </sd-button> -->\r\n      <sd-button class=\"mr-5\" (action)=\"onReset()\" [title]=\"'Default' | sdTranslate\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"onSave()\" [title]=\"'Save' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"isCreatingColumn\">\r\n      <sd-button class=\"mr-auto\" (action)=\"isCreatingColumn = false\" [title]=\"'Cancel' | sdTranslate\" color=\"info\"\r\n        size=\"sm\">\r\n      </sd-button>\r\n      <sd-button (action)=\"confirm()\" [title]=\"'Confirm' | sdTranslate\" type=\"fill\" color=\"info\" size=\"sm\">\r\n      </sd-button>\r\n    </ng-container>\r\n  </sd-modal-footer>\r\n</sd-modal>",
                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}"]
            },] }
];
SdPopupGridConfiguration.ctorParameters = () => [
    { type: ChangeDetectorRef },
    { type: SdNotifyService },
    { type: SdTranslateService },
    { type: SdGridConfigurationService }
];
SdPopupGridConfiguration.propDecorators = {
    gridOption: [{ type: Input }],
    key: [{ type: Input }],
    modal: [{ type: ViewChild, args: ['modal',] }],
    table: [{ type: ViewChild, args: ['table',] }],
    mouseUp: [{ type: HostListener, args: ['window:mouseup', ['$event'],] }]
};
//# sourceMappingURL=data:application/json;base64, 