import { __decorate } from "tslib";
import { Component, Input, ChangeDetectorRef, EventEmitter, ChangeDetectionStrategy, Output } from '@angular/core';
let GridDesktopColumnEditComponent = class GridDesktopColumnEditComponent {
    constructor(ref) {
        this.ref = ref;
        this.sdChange = new EventEmitter();
        this.onEditorChange = (column, item, value) => {
            var _a, _b, _c;
            if (column.type !== 'children') {
                (_c = (_a = column.editor) === null || _a === void 0 ? void 0 : (_b = _a).change) === null || _c === void 0 ? void 0 : _c.call(_b, item, value);
                this.ref.detectChanges();
                this.sdChange.emit();
            }
        };
        this.onSearch = (searchValue, item, column) => {
            item[column.field] = searchValue;
        };
    }
};
GridDesktopColumnEditComponent.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
__decorate([
    Input()
], GridDesktopColumnEditComponent.prototype, "column", void 0);
__decorate([
    Input()
], GridDesktopColumnEditComponent.prototype, "item", void 0);
__decorate([
    Output()
], GridDesktopColumnEditComponent.prototype, "sdChange", void 0);
GridDesktopColumnEditComponent = __decorate([
    Component({
        selector: 'sd-grid-desktop-column-edit',
        template: "<ng-container *ngIf=\"column && item\">\r\n  <div *ngIf=\"column.type === 'string'\">\r\n    <div *ngIf=\"column.editor?.item;else elseUseInput\">\r\n      <ng-container *ngIf=\"column.editor.autocomplete; else elseUseSelect\">\r\n        <sd-grid-autocomplete-control *ngIf=\"column.editor.item.type === 'dependent'\"\r\n          [items]=\"item[column.editor.item.dependOnField] | editorDynamicItem:item:column.editor.item | async\"\r\n          [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n          [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\"\r\n          (search)=\"onSearch($event, item, column)\">\r\n        </sd-grid-autocomplete-control>\r\n        <sd-grid-autocomplete-control *ngIf=\"column.editor.item.type === 'default'\"\r\n          [items]=\"'' | editorDynamicItem:item:column.editor.item | async\" [valueField]=\"column.editor.item.value\"\r\n          [displayField]=\"column.editor.item.display\" [(model)]=\"item[column.field]\"\r\n          (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n        </sd-grid-autocomplete-control>\r\n      </ng-container>\r\n      <ng-template #elseUseSelect>\r\n        <select *ngIf=\"column.editor.item.type === 'dependent'\" class=\"form-control form-control-xs\"\r\n          [(ngModel)]=\"item[column.field]\" (change)=\"onEditorChange(column,item,item[column.field])\">\r\n          <ng-container\r\n            *ngIf=\"item[column.editor.item.dependOnField] | editorDynamicItem:item:column.editor.item | async; let dynamicItems\">\r\n            <ng-container *ngIf=\"dynamicItems?.subscribe;else elseIsArray\">\r\n              <option *ngFor=\"let data of dynamicItems | async\" [value]=\"data[column.editor.item.value]\">\r\n                {{data[column.editor.item.display]}}\r\n              </option>\r\n            </ng-container>\r\n            <ng-template #elseIsArray>\r\n              <option *ngFor=\"let data of (dynamicItems || [])\" [value]=\"data[column.editor.item.value]\">\r\n                {{data[column.editor.item.display]}}\r\n              </option>\r\n            </ng-template>\r\n          </ng-container>\r\n        </select>\r\n        <select *ngIf=\"column.editor.item?.type === 'default'\" class=\"form-control form-control-xs\"\r\n          [(ngModel)]=\"item[column.field]\" (change)=\"onEditorChange(column,item,item[column.field])\">\r\n          <ng-container *ngIf=\"'' | editorDynamicItem:item:column.editor.item | async; let dynamicItems\">\r\n            <option *ngFor=\"let data of dynamicItems\" [value]=\"data[column.editor.item.value]\">\r\n              {{data[column.editor.item.display]}}\r\n            </option>\r\n          </ng-container>\r\n        </select>\r\n      </ng-template>\r\n    </div>\r\n    <ng-template #elseUseInput>\r\n      <div class=\"input-group\">\r\n        <input class=\"form-control c-input-xs\" [ngClass]=\"{'border-right-0':column.editor && column.editor.click}\"\r\n          [(ngModel)]=\"item[column.field]\" (keyup.enter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n          (change)=\"onEditorChange(column,item,item[column.field])\">\r\n        <div *ngIf=\"column.editor?.click\" class=\"input-group-append cursor-pointer\">\r\n          <span class=\"input-group-text border-0 py-0 px-1\" style=\"background:#FFF\" (click)=\"column.editor.click(item)\">\r\n            <i class=\"fa fa-search\"></i>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'color'\">\r\n    <input type=\"color\" class=\"form-control c-input-xs\" [(ngModel)]=\"item[column.field]\"\r\n      (change)=\"onEditorChange(column,item,item[column.field])\">\r\n  </div>\r\n  <div *ngIf=\"column.type === 'number'\">\r\n    <input type=\"number\" class=\"form-control c-input-xs\" [(ngModel)]=\"item[column.field]\"\r\n      (keyup.Enter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n      (change)=\"onEditorChange(column,item,item[column.field])\">\r\n  </div>\r\n  <div *ngIf=\"column.type === 'date'\">\r\n    <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"date\"></sd-grid-date-picker-control>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'datetime'\">\r\n    <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"datetime\"></sd-grid-date-picker-control>\r\n  </div>\r\n  <div class=\"text-center\" *ngIf=\"column.type === 'time'\">\r\n    <sd-grid-date-picker-control [(model)]=\"item[column.field]\" type=\"time\"></sd-grid-date-picker-control>\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'bool'\">\r\n    <sd-switch-control [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\"></sd-switch-control>\r\n    <!-- <mat-slide-toggle [(ngModel)]=\"item[column.field]\"\r\n      (change)=\"onEditorChange(column,item,item[column.field])\" color=\"primary\">\r\n    </mat-slide-toggle> -->\r\n  </div>\r\n  <div *ngIf=\"column.type === 'values'\">\r\n    <ng-container *ngIf=\"column.editor?.autocomplete;else elseUseSelect\">\r\n      <ng-container *ngIf=\"column.editor.item;else elseUseValues\">\r\n        <sd-grid-autocomplete-control *ngIf=\"column.editor.item.type === 'dependent'\"\r\n          [items]=\"item[column.editor.item.dependOnField] | editorDynamicItem:item:column.editor.item | async\"\r\n          [valueField]=\"column.editor.item.value\" [displayField]=\"column.editor.item.display\"\r\n          [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\"\r\n          (search)=\"onSearch($event, item, column)\">\r\n        </sd-grid-autocomplete-control>\r\n        <ng-template #elseDynamicByValue>\r\n          <sd-grid-autocomplete-control [items]=\"column.editor.item.items\" [valueField]=\"column.editor.item.value\"\r\n            [displayField]=\"column.editor.item.display\" [(model)]=\"item[column.field]\"\r\n            (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n          </sd-grid-autocomplete-control>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #elseUseValues>\r\n        <sd-grid-autocomplete-control [items]=\"column.values\" valueField=\"value\" displayField=\"text\"\r\n          [(model)]=\"item[column.field]\" (sdChange)=\"onEditorChange(column,item,item[column.field])\">\r\n        </sd-grid-autocomplete-control>\r\n      </ng-template>\r\n    </ng-container>\r\n    <ng-template #elseUseSelect>\r\n      <ng-container *ngIf=\"column.editor?.item;else elseUseValues\">\r\n        <select *ngIf=\"column.editor.item.type === 'dependent'\" class=\"form-control form-control-xs\"\r\n          [(ngModel)]=\"item[column.field]\" (change)=\"onEditorChange(column,item,item[column.field])\">\r\n          <option value=\"\">{{'Please select' | sdTranslate}}</option>\r\n          <ng-container *ngIf=\"item[column.editor.item.dependOnField] | editorDynamicItem:item:column.editor.item\r\n             | async; let dynamicItems\">\r\n            <ng-container *ngIf=\"dynamicItems?.subscribe;else elseIsArray\">\r\n              <option *ngFor=\"let data of dynamicItems | async\" [value]=\"data[column.editor.item.value]\">\r\n                {{data[column.editor.item.display]}}\r\n              </option>\r\n            </ng-container>\r\n            <ng-template #elseIsArray>\r\n              <option *ngFor=\"let data of (dynamicItems || [])\" [value]=\"data[column.editor.item.value]\">\r\n                {{data[column.editor.item.display]}}\r\n              </option>\r\n            </ng-template>\r\n          </ng-container>\r\n        </select>\r\n        <select *ngIf=\"column.editor.item.type === 'dependent'\" class=\"form-control form-control-xs\"\r\n          [(ngModel)]=\"item[column.field]\" (change)=\"onEditorChange(column,item,item[column.field])\">\r\n          <option value=\"\">{{'Please select' | sdTranslate}}</option>\r\n          <ng-container\r\n            *ngIf=\"item[column.editor.item.dependOnField] | editorDynamicItem:item:column.editor.item | async; let dynamicItems\">\r\n            <option *ngFor=\"let data of dynamicItems\" [value]=\"data[column.editor.item.value]\">\r\n              {{data[column.editor.item.display]}}\r\n            </option>\r\n          </ng-container>\r\n        </select>\r\n      </ng-container>\r\n      <ng-template #elseUseValues>\r\n        <select class=\"form-control form-control-xs\" [(ngModel)]=\"item[column.field]\"\r\n          (change)=\"column.editor?.change && column.editor.change(item)\">\r\n          <option value=\"\">{{'Please select' | sdTranslate}}</option>\r\n          <option *ngFor=\"let data of column.values\" [value]=\"data.value\">{{data.text}}\r\n          </option>\r\n        </select>\r\n      </ng-template>\r\n    </ng-template>\r\n  </div>\r\n  <div *ngIf=\"column.type === 'radio'\">\r\n    <section class=\"mt-2 ml-3\" style=\"align-content: center; align-items: center;\">\r\n      <mat-radio-group style=\"display: flex\"\r\n        [(ngModel)]=\"item[column.field]\" (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n        <mat-radio-button *ngIf=\"!column.editor?.required\" color=\"warn\" class=\"mr-2\" value=\"\">\r\n          {{'Please select' | sdTranslate}}\r\n        </mat-radio-button>\r\n        <mat-radio-button color=\"primary\" class=\"mr-2\" *ngFor=\"let data of column.values\"\r\n          [value]=\"data[column.valueField]\">\r\n          {{data[column.displayField]}}\r\n        </mat-radio-button>\r\n      </mat-radio-group>\r\n    </section>\r\n  </div>\r\n  <div class=\"align-middle text-center\" *ngIf=\"column.type === 'image'\">\r\n    <img [src]=\"item[column.field]\" [width]=\"column.display?.width\" [height]=\"column.display?.height\"\r\n      style=\"margin: 5px 0\" (click)=\"column.click && column.click(item[column.field], item)\">\r\n  </div>\r\n</ng-container>",
        changeDetection: ChangeDetectionStrategy.OnPush,
        styles: [".form-control-xs,.input-group-xs>.form-control,.input-group-xs>.input-group-append>.input-group-text{font-size:13px!important;line-height:1.5!important;padding:3px 25px 3px 3px!important;height:28px!important}", "select.form-control-xs:not([size]):not([multiple]){height:28px}"]
    })
], GridDesktopColumnEditComponent);
export { GridDesktopColumnEditComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1kZXNrdG9wLWNvbHVtbi1lZGl0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL3N1cGVyZGV2LWFuZ3VsYXItY29yZS8iLCJzb3VyY2VzIjpbImxpYi9jb250cm9scy9ncmlkLWNvbnRyb2wvY29tcG9uZW50cy9ncmlkLWRlc2t0b3AtY29sdW1uLWVkaXQvZ3JpZC1kZXNrdG9wLWNvbHVtbi1lZGl0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsWUFBWSxFQUFFLHVCQUF1QixFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQVduSCxJQUFhLDhCQUE4QixHQUEzQyxNQUFhLDhCQUE4QjtJQUl6QyxZQUNVLEdBQXNCO1FBQXRCLFFBQUcsR0FBSCxHQUFHLENBQW1CO1FBRnRCLGFBQVEsR0FBRyxJQUFJLFlBQVksRUFBb0QsQ0FBQztRQUsxRixtQkFBYyxHQUFHLENBQUMsTUFBa0IsRUFBRSxJQUFjLEVBQUUsS0FBVSxFQUFFLEVBQUU7O1lBQ2xFLElBQUksTUFBTSxDQUFDLElBQUksS0FBSyxVQUFVLEVBQUU7Z0JBQzlCLFlBQUEsTUFBTSxDQUFDLE1BQU0saURBQUUsTUFBTSxtREFBRyxJQUFJLEVBQUUsS0FBSyxFQUFFO2dCQUNyQyxJQUFJLENBQUMsR0FBRyxDQUFDLGFBQWEsRUFBRSxDQUFDO2dCQUN6QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO2FBQ3RCO1FBQ0gsQ0FBQyxDQUFBO1FBRUQsYUFBUSxHQUFHLENBQUMsV0FBbUIsRUFBRSxJQUFjLEVBQUUsTUFBa0IsRUFBRSxFQUFFO1lBQ3JFLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsV0FBVyxDQUFDO1FBQ25DLENBQUMsQ0FBQTtJQVpHLENBQUM7Q0FhTixDQUFBOztZQWRnQixpQkFBaUI7O0FBSnZCO0lBQVIsS0FBSyxFQUFFOzhEQUFvQjtBQUNuQjtJQUFSLEtBQUssRUFBRTs0REFBZ0I7QUFDZDtJQUFULE1BQU0sRUFBRTtnRUFBaUY7QUFIL0UsOEJBQThCO0lBUjFDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSw2QkFBNkI7UUFDdkMsZzJUQUF3RDtRQUl0RCxlQUFlLEVBQUUsdUJBQXVCLENBQUMsTUFBTTs7S0FDbEQsQ0FBQztHQUNXLDhCQUE4QixDQW1CMUM7U0FuQlksOEJBQThCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgQ2hhbmdlRGV0ZWN0b3JSZWYsIEV2ZW50RW1pdHRlciwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBHcmlkQ29sdW1uLCBHcmlkSXRlbSB9IGZyb20gJy4uLy4uL2dyaWQtY29udHJvbC5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3NkLWdyaWQtZGVza3RvcC1jb2x1bW4tZWRpdCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2dyaWQtZGVza3RvcC1jb2x1bW4tZWRpdC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbXHJcbiAgICAnLi4vLi4vLi4vLi4vYXNzZXRzL2Nzcy9pbnB1dC5zY3NzJyxcclxuICAgICcuLi8uLi8uLi8uLi9hc3NldHMvY3NzL3NlbGVjdC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxyXG59KVxyXG5leHBvcnQgY2xhc3MgR3JpZERlc2t0b3BDb2x1bW5FZGl0Q29tcG9uZW50IHtcclxuICBASW5wdXQoKSBjb2x1bW46IEdyaWRDb2x1bW47XHJcbiAgQElucHV0KCkgaXRlbTogR3JpZEl0ZW07XHJcbiAgQE91dHB1dCgpIHNkQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjx7Y29sdW1uOiBHcmlkQ29sdW1uLCBpdGVtOiBHcmlkSXRlbSwgdmFsdWU6IGFueX0+KCk7XHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIHJlZjogQ2hhbmdlRGV0ZWN0b3JSZWYsXHJcbiAgKSB7IH1cclxuXHJcbiAgb25FZGl0b3JDaGFuZ2UgPSAoY29sdW1uOiBHcmlkQ29sdW1uLCBpdGVtOiBHcmlkSXRlbSwgdmFsdWU6IGFueSkgPT4ge1xyXG4gICAgaWYgKGNvbHVtbi50eXBlICE9PSAnY2hpbGRyZW4nKSB7XHJcbiAgICAgIGNvbHVtbi5lZGl0b3I/LmNoYW5nZT8uKGl0ZW0sIHZhbHVlKTtcclxuICAgICAgdGhpcy5yZWYuZGV0ZWN0Q2hhbmdlcygpO1xyXG4gICAgICB0aGlzLnNkQ2hhbmdlLmVtaXQoKTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gIG9uU2VhcmNoID0gKHNlYXJjaFZhbHVlOiBzdHJpbmcsIGl0ZW06IEdyaWRJdGVtLCBjb2x1bW46IEdyaWRDb2x1bW4pID0+IHtcclxuICAgIGl0ZW1bY29sdW1uLmZpZWxkXSA9IHNlYXJjaFZhbHVlO1xyXG4gIH1cclxufVxyXG4iXX0=