import { Component, Input, Output, EventEmitter } from '@angular/core';
export class SdGridMobileItemView {
    constructor() {
        this.check = new EventEmitter();
        this.onCheck = (item) => {
            this.check.emit(item);
        };
    }
}
SdGridMobileItemView.decorators = [
    { type: Component, args: [{
                selector: 'sd-grid-mobile-item-view',
                template: "<ng-container *ngIf=\"gridOption && item\">\r\n  <ng-container *ngIf=\"gridOption?.mobileOrTablet?.htmlTemplate\">\r\n    <div\r\n      [innerHTML]=\"(item | mobileViewHtmlTempate:gridOption.columns:gridOption?.mobileOrTablet?.htmlTemplate) | safeHtml\"\r\n      (click)=\"onCheck(item)\">\r\n    </div>\r\n  </ng-container>\r\n  <ng-container *ngIf=\"!gridOption?.mobileOrTablet?.htmlTemplate\">\r\n    <ng-container *ngFor=\"let column of gridOption.columns | filterMobile:item\">\r\n      <div *ngIf=\"column.type !== 'children'\" class=\"row c-row\" (click)=\"onCheck(item)\">\r\n        <div class=\"col-5\">\r\n          <span class=\"c-title\">\r\n            {{item | columnTitle:column.title:column.dynamicTitle | async}}:\r\n          </span>\r\n        </div>\r\n        <div class=\"col-7\">\r\n          <ng-container *ngIf=\"column.type === 'string'\">\r\n            <span *ngIf=\"!column.htmlTemplate; else elseUseTemplate\"\r\n              [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n              <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n                (click)=\"column.click(item[column.field], item)\">{{item[column.field]}}</a>\r\n              <ng-container *ngIf=\"!column.click\">\r\n                {{item[column.field]}}</ng-container>\r\n            </span>\r\n            <ng-template #elseUseTemplate>\r\n              <span class=\"c-value\"\r\n                [innerHTML]=\"(item[column.field] | columnHtmlTemplate:item:column.htmlTemplate) | safeHtml\"></span>\r\n            </ng-template>\r\n            <ng-container\r\n              *ngIf=\"column.commands | columnCommandFilter:item | async; $implicit as filteredColumnCommands\">\r\n              <button *ngFor=\"let columnCommand of filteredColumnCommands\" (click)=\"columnCommand.click(item)\"\r\n                type=\"button\" class=\"c-btn-icon\" [matTooltip]=\"columnCommand.title | commandTitle:item\">\r\n                <i class=\"{{columnCommand.icon | commandIcon:item}}\" aria-hidden=\"true\" style=\"font-size: 14px;\"></i>\r\n              </button>\r\n            </ng-container>\r\n          </ng-container>\r\n          <span *ngIf=\"column.type === 'number'\" [className]=\"item[column.field] | cellMobileClassName:item:column\">\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\">\r\n              {{item[column.field] | valueTransform:item:column}}</ng-container>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'datetime'\" [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n            <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | date:'dd/MM/yyyy HH:mm'}}</a>\r\n            <ng-container *ngIf=\"!column.click\">\r\n              {{item[column.field] | date:'dd/MM/yyyy HH:mm'}}</ng-container>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'date'\" [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n            <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | date:'dd/MM/yyyy'}}</a>\r\n            <ng-container *ngIf=\"!column.click\">\r\n              {{item[column.field] | date:'dd/MM/yyyy'}}</ng-container>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'time'\" [className]=\"item[column.field] | cellMobileClassName:item:column\">\r\n            <a *ngIf=\"column.click\" href=\"javascript:;\"\r\n              (click)=\"column.click(item[column.field], item)\">{{item[column.field] | date:'HH:mm'}}</a>\r\n            <ng-container *ngIf=\"!column.click\">\r\n              {{item[column.field] | date:'HH:mm'}}</ng-container>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'bool'\" [className]=\"item[column.field] | cellMobileClassName:item:column\"\r\n            (click)=\"column.click && column.click(item[column.field], item)\">\r\n            <strong *ngIf=\"item[column.field]\"\r\n              class=\"text-success\">{{column.trueValue || 'True'}}</strong>\r\n            <strong *ngIf=\"!item[column.field]\"\r\n              class=\"text-danger\">{{column.falseValue || 'False'}}</strong>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'color'\" class=\"c-value\"><input disabled=\"true\" type=\"color\"\r\n              class=\"form-control form-control-sm\" [(ngModel)]=\"item[column.field]\"></span>\r\n          <ng-container *ngIf=\"column.type === 'values'\">\r\n            <ng-container *ngIf=\"column?.dictionary[item[column.field]] as dic; else elseNotInDic\">\r\n              <span *ngIf=\"dic.color || dic.backgroundColor; else elseNoStatus\" class=\"status c-status\"\r\n                [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n                {{dic.text}}\r\n              </span>\r\n              <ng-template #elseNoStatus>\r\n                <span class=\"c-value\">\r\n                  {{dic.text}}\r\n                </span>\r\n              </ng-template>\r\n            </ng-container>\r\n            <ng-template #elseNotInDic>\r\n              <span class=\"c-value\">\r\n                {{item[column.field]}}\r\n              </span>\r\n            </ng-template>\r\n          </ng-container>\r\n          <span *ngIf=\"column.type === 'radio'\" class=\"c-value\">{{item[column.field]}}</span>\r\n          <img *ngIf=\"column.type === 'image'\" [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n            [height]=\"column.display?.height\" style=\"margin: 5px 0\"\r\n            (click)=\"column.click && column.click(item[column.field], item)\">\r\n        </div>\r\n      </div>\r\n      <ng-container *ngIf=\"column.type === 'children' && column.children?.length\">\r\n        <div class=\"row c-row\" *ngFor=\"let childColumn of column.children | filterMobile:item\" (click)=\"onCheck(item)\">\r\n          <div class=\"col-5\">\r\n            <span class=\"c-title\">\r\n              {{childColumn.title}}:\r\n            </span>\r\n          </div>\r\n          <div class=\"col-7\">\r\n            <ng-container *ngIf=\"childColumn.type === 'string'\">\r\n              <span *ngIf=\"!childColumn.htmlTemplate; else elseUseTemplate\"\r\n                [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\"><a\r\n                  *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                  (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field]}}</a>\r\n                <ng-container *ngIf=\"!childColumn.click\">\r\n                  {{item[childColumn.field]}}</ng-container>\r\n              </span>\r\n              <ng-template #elseUseTemplate>\r\n                <span class=\"c-value\"\r\n                  [innerHTML]=\"(item[childColumn.field] | columnHtmlTemplate:item:childColumn.htmlTemplate) | safeHtml\"></span>\r\n              </ng-template>\r\n            </ng-container>\r\n            <span *ngIf=\"childColumn.type === 'number'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\">\r\n              <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | valueTransform:item:childColumn}}</a>\r\n              <ng-container *ngIf=\"!childColumn.click\">\r\n                {{item[childColumn.field] | valueTransform:item:childColumn}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'datetime'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\">\r\n              <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'dd/MM/yyyy HH:mm'}}</a>\r\n              <ng-container *ngIf=\"!childColumn.click\">\r\n                {{item[childColumn.field] | date:'dd/MM/yyyy HH:mm'}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'date'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\">\r\n              <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'dd/MM/yyyy'}}</a>\r\n              <ng-container *ngIf=\"!childColumn.click\">\r\n                {{item[childColumn.field] | date:'dd/MM/yyyy'}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'time'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\">\r\n              <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                (click)=\"childColumn.click(item[childColumn.field], item)\">{{item[childColumn.field] | date:'HH:mm'}}</a>\r\n              <ng-container *ngIf=\"!childColumn.click\">\r\n                {{item[childColumn.field] | date:'HH:mm'}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'bool'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\"\r\n              (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n              <strong *ngIf=\"item[childColumn.field]\"\r\n                class=\"text-success\">{{childColumn.trueValue || 'True'}}</strong>\r\n              <strong *ngIf=\"!item[childColumn.field]\"\r\n                class=\"text-danger\">{{childColumn.falseValue || 'False'}}</strong>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'color'\"\r\n              [className]=\"item[childColumn.field] | cellMobileClassName:item:childColumn\"\r\n              (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"><input disabled=\"true\"\r\n                type=\"color\" class=\"form-control form-control-sm\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n            <ng-container *ngIf=\"childColumn.type === 'values'\">\r\n              <ng-container *ngIf=\"childColumn?.dictionary[item[childColumn.field]] as dic; else elseNotInDic\">\r\n                <span *ngIf=\"dic.color || dic.backgroundColor; else elseNoStatus\" class=\"status c-status\"\r\n                  [ngStyle]=\"{'color':dic.color, 'background-color': dic.backgroundColor}\">\r\n                  {{dic.text}}\r\n                </span>\r\n                <ng-template #elseNoStatus>\r\n                  <span class=\"c-value\">\r\n                    {{dic.text}}\r\n                  </span>\r\n                </ng-template>\r\n              </ng-container>\r\n              <ng-template #elseNotInDic>\r\n                <span class=\"c-value\">\r\n                  {{item[childColumn.field]}}\r\n                </span>\r\n              </ng-template>\r\n            </ng-container>\r\n            <span *ngIf=\"childColumn.type === 'radio'\" class=\"c-value\">{{item[childColumn.field]}}</span>\r\n            <img *ngIf=\"childColumn.type === 'image'\" [src]=\"item[childColumn.field]\"\r\n              [width]=\"childColumn.display?.width\" [height]=\"childColumn.display?.height\" style=\"margin: 5px 0\"\r\n              (click)=\"column.click && column.click(item[column.field], item)\">\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>",
                styles: [".c-status{display:inline-block;font-weight:500;text-align:left;text-transform:uppercase}.c-row{margin:0 -8px 3px}.c-title{font-weight:700;margin-right:3px}.c-title,.c-value{color:#212529;font-size:14px}.c-value{overflow-wrap:break-word}.c-badge{font-size:14px;font-weight:500;padding:5px!important}"]
            },] }
];
SdGridMobileItemView.ctorParameters = () => [];
SdGridMobileItemView.propDecorators = {
    gridOption: [{ type: Input }],
    item: [{ type: Input }],
    check: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1tb2JpbGUtaXRlbS12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJDOi9Vc2Vycy9uZ2hpYXR0MTVfb25lbW91bnQvRG9jdW1lbnRzL2xpYi1jb3JlLXVpL3Byb2plY3RzL3NkLWNvcmUvZ3JpZC8iLCJzb3VyY2VzIjpbInNyYy9saWIvY29tcG9uZW50cy9ncmlkLW1vYmlsZS1pdGVtLXZpZXcvZ3JpZC1tb2JpbGUtaXRlbS12aWV3LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBU3ZFLE1BQU0sT0FBTyxvQkFBb0I7SUFJL0I7UUFEVSxVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVksQ0FBQztRQUkvQyxZQUFPLEdBQUcsQ0FBQyxJQUFjLEVBQUUsRUFBRTtZQUMzQixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUN4QixDQUFDLENBQUE7SUFKRyxDQUFDOzs7WUFWTixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLDBCQUEwQjtnQkFDcEMsb2hYQUFxRDs7YUFFdEQ7Ozs7eUJBRUUsS0FBSzttQkFDTCxLQUFLO29CQUNMLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuaW1wb3J0IHsgR3JpZEl0ZW0sIFNkR3JpZE9wdGlvbiB9IGZyb20gJy4uLy4uL2dyaWQubW9kZWwnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdzZC1ncmlkLW1vYmlsZS1pdGVtLXZpZXcnLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9ncmlkLW1vYmlsZS1pdGVtLXZpZXcuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsczogWycuL2dyaWQtbW9iaWxlLWl0ZW0tdmlldy5jb21wb25lbnQuc2NzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZEdyaWRNb2JpbGVJdGVtVmlldyB7XHJcbiAgQElucHV0KCkgZ3JpZE9wdGlvbjogU2RHcmlkT3B0aW9uO1xyXG4gIEBJbnB1dCgpIGl0ZW06IEdyaWRJdGVtO1xyXG4gIEBPdXRwdXQoKSBjaGVjayA9IG5ldyBFdmVudEVtaXR0ZXI8R3JpZEl0ZW0+KCk7XHJcbiAgY29uc3RydWN0b3IoXHJcbiAgKSB7IH1cclxuXHJcbiAgb25DaGVjayA9IChpdGVtOiBHcmlkSXRlbSkgPT4ge1xyXG4gICAgdGhpcy5jaGVjay5lbWl0KGl0ZW0pO1xyXG4gIH1cclxufVxyXG4iXX0=