import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
var GridDesktopColumnViewComponent = /** @class */ (function () {
    function GridDesktopColumnViewComponent() {
    }
    __decorate([
        Input()
    ], GridDesktopColumnViewComponent.prototype, "column", void 0);
    __decorate([
        Input()
    ], GridDesktopColumnViewComponent.prototype, "item", void 0);
    GridDesktopColumnViewComponent = __decorate([
        Component({
            selector: 'sd-grid-desktop-column-view',
            template: "<ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"column.htmlTemplate;else useDefaultView\">\r\n    <div (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'cursor-pointer':column.click}\"\r\n      [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column.htmlTemplate) | safeHtml\">\r\n    </div>\r\n  </ng-container>\r\n  <ng-template #useDefaultView>\r\n    <div *ngIf=\"column.type === 'string'\">\r\n      <span [className]=\"item[column.field] | cellDesktopClassName:item:column\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\">\r\n        <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n          (click)=\"column.click(item[column.field], item)\">{{item[column.field] | valueTransform:item:column}}</a>\r\n        <ng-container *ngIf=\"!column.click\">{{item[column.field] | valueTransform:item:column}}</ng-container>\r\n      </span>\r\n      <ng-container *ngIf=\"column.commands | columnCommandFilter:item | async; $implicit as filteredColumnCommands\">\r\n        <button *ngFor=\"let columnCommand of filteredColumnCommands\" (click)=\"columnCommand.click(item)\" type=\"button\"\r\n          class=\"c-btn-icon\" [matTooltip]=\"columnCommand.title | commandTitle:item\">\r\n          <i class=\"{{columnCommand.icon | commandIcon:item}}\" aria-hidden=\"true\"></i>\r\n        </button>\r\n      </ng-container>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'color'\">\r\n      <input disabled=\"true\" type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"\r\n        (change)=\"column.editor?.change && column.editor.change(item)\">\r\n    </div>\r\n    <div *ngIf=\"column.type === 'number'\">\r\n      <span [className]=\"item[column.field] | cellDesktopClassName:item:column\"\r\n        [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\">\r\n        <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n          (click)=\"column.click(item[column.field], item)\">{{(item[column.field] | valueTransform:item:column) | number : '1.0-2'}}</a>\r\n        <ng-container *ngIf=\"!column.click\">\r\n          {{(item[column.field] | valueTransform:item:column) | number : '1.0-2'}}</ng-container>\r\n      </span>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'date'\" class=\"text-center\" matTooltipPosition=\"above\"\r\n      [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy'\">\r\n      {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy':column.timeDifferent | async}}\r\n    </div>\r\n    <div *ngIf=\"column.type === 'datetime'\" class=\"text-center\" matTooltipPosition=\"above\"\r\n      [matTooltip]=\"item[column.field] | date:'dd/MM/yyyy HH:mm'\">\r\n      {{item[column.field] | sdTimeDifferent:'dd/MM/yyyy HH:mm':column.timeDifferent | async}}\r\n    </div>\r\n    <div *ngIf=\"column.type === 'time'\" class=\"text-center\">\r\n      {{item[column.field] | date:'HH:mm'}}\r\n    </div>\r\n    <div class=\"align-middle text-center\" *ngIf=\"column.type === 'bool'\">\r\n      <span *ngIf=\"!item.editorHandler[column.field].visible && item[column.field]\"\r\n        class=\"status status-success\">{{column.trueValue || 'True'}}</span>\r\n      <span *ngIf=\"!item.editorHandler[column.field].visible && !item[column.field]\"\r\n        class=\"status status-danger\">{{column.falseValue || 'False'}}</span>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'values'\">\r\n      <ng-container *ngIf=\"column?.dictionary[item[column.field]] as dic; else elseNotInDic\">\r\n        <div *ngIf=\"dic.color || dic.backgroundColor; else elseNoStatus\" class=\"status\"\r\n          [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n          {{dic.text}}\r\n        </div>\r\n        <ng-template #elseNoStatus>\r\n          <div class=\"text-left\">\r\n            {{dic.text}}\r\n          </div>\r\n        </ng-template>\r\n      </ng-container>\r\n      <ng-template #elseNotInDic>\r\n        <div class=\"text-left\">\r\n          {{item[column.field]}}\r\n        </div>\r\n      </ng-template>\r\n    </div>\r\n    <div *ngIf=\"column.type === 'radio'\">\r\n      {{item[column.field]}}\r\n    </div>\r\n    <div class=\"align-middle text-center\" *ngIf=\"column.type === 'image'\">\r\n      <img *ngIf=\"item[column.field]\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n        [height]=\"column.display?.height\" style=\"margin: 5px 0;object-fit: contain;\"\r\n        (click)=\"column.click && column.click(item[column.field], item)\" [ngClass]=\"{'c-clickable':column.click}\">\r\n      <i *ngIf=\"!item[column.field]\" class=\"fa fa-picture-o fa-fw c-img\" [ngClass]=\"{'c-clickable':column.click}\"\r\n        (click)=\"column.click && column.click(item[column.field], item)\"></i>\r\n    </div>\r\n  </ng-template>\r\n</ng-container>",
            styles: [".c-badge{display:block!important;border-radius:10rem;padding:.3rem!important;font-weight:500;font-size:12px;max-width:80%;margin:0 auto}.c-badge a{color:#fff}.status{font-weight:500;padding:4px 8px;border-radius:1.5rem;display:inline-block;text-align:center;text-transform:uppercase;width:100%}.status-success{color:#00bc3c}.status-danger{color:#f5222d}.c-btn-icon{background:0 0!important;border:none;opacity:.8;height:20px;display:inline-flex;padding:0 3px}.c-btn-icon:hover{cursor:pointer;opacity:1}.c-btn-icon:disabled{background:0 0!important;border:none;cursor:not-allowed;opacity:.3}.c-clickable{cursor:pointer}.c-img{font-size:30px;opacity:.5}.c-img.c-clickable:hover{opacity:.9}"]
        })
    ], GridDesktopColumnViewComponent);
    return GridDesktopColumnViewComponent;
}());
export { GridDesktopColumnViewComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1kZXNrdG9wLWNvbHVtbi12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL3N1cGVyZGV2LWFuZ3VsYXItY29yZS8iLCJzb3VyY2VzIjpbImxpYi9jb250cm9scy9ncmlkLWNvbnRyb2wvY29tcG9uZW50cy9ncmlkLWRlc2t0b3AtY29sdW1uLXZpZXcvZ3JpZC1kZXNrdG9wLWNvbHVtbi12aWV3LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFTakQ7SUFHRTtJQUNJLENBQUM7SUFISTtRQUFSLEtBQUssRUFBRTtrRUFBb0I7SUFDbkI7UUFBUixLQUFLLEVBQUU7Z0VBQWdCO0lBRmIsOEJBQThCO1FBTDFDLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSw2QkFBNkI7WUFDdkMsMnhKQUF3RDs7U0FFekQsQ0FBQztPQUNXLDhCQUE4QixDQUsxQztJQUFELHFDQUFDO0NBQUEsQUFMRCxJQUtDO1NBTFksOEJBQThCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgR3JpZENvbHVtbiwgR3JpZEl0ZW0gfSBmcm9tICcuLi8uLi9ncmlkLWNvbnRyb2wubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZC1ncmlkLWRlc2t0b3AtY29sdW1uLXZpZXcnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9ncmlkLWRlc2t0b3AtY29sdW1uLXZpZXcuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2dyaWQtZGVza3RvcC1jb2x1bW4tdmlldy5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBHcmlkRGVza3RvcENvbHVtblZpZXdDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpIGNvbHVtbjogR3JpZENvbHVtbjtcclxuICBASW5wdXQoKSBpdGVtOiBHcmlkSXRlbTtcclxuICBjb25zdHJ1Y3RvcihcclxuICApIHsgfVxyXG59XHJcbiJdfQ==