import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
let GridMobileColumnViewComponent = class GridMobileColumnViewComponent {
    constructor() { }
};
__decorate([
    Input(),
    Input()
], GridMobileColumnViewComponent.prototype, "column", void 0);
__decorate([
    Input()
], GridMobileColumnViewComponent.prototype, "item", void 0);
GridMobileColumnViewComponent = __decorate([
    Component({
        selector: 'sd-grid-desktop-mobile-view',
        template: "<!-- <ng-container *ngIf=\"column && item\">\r\n  <ng-container *ngIf=\"\"></ng-container>\r\n  <div class=\"c-mobile-item\" [ngClass]=\"{'c-mobile-item-selected':item.isChecked}\">\r\n    <ng-container *ngFor=\"let column of columns | filterMobile:item\">\r\n      <div *ngIf=\"column.type !== 'children'\" class=\"row c-mobile-row\" (click)=\"check(item)\">\r\n        <div class=\"col-5\">\r\n          <span class=\"c-mobile-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] | cellClassName: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]}}</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-mobile-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] | cellClassName: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          <span *ngIf=\"column.type === 'datetime'\" [className]=\"item[column.field] | cellClassName: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] | 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] | cellClassName: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] | 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] | cellClassName: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] | 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] | cellClassName:item:column\"\r\n            [ngClass]=\"{'blinker': item.blinker && item.blinker[column.field]}\"\r\n            (click)=\"column.click && column.click(item[column.field], item)\">\r\n            <span *ngIf=\"item[column.field]\" class=\"status status-success\">{{column.trueValue || 'True'}}</span>\r\n            <span *ngIf=\"!item[column.field]\" class=\"status status-danger\">{{column.falseValue || 'False'}}</span>\r\n          </span>\r\n          <span *ngIf=\"column.type === 'color'\" class=\"c-mobile-value\"><input disabled=\"true\" type=\"color\"\r\n              class=\"form-control c-input-xs\" [(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-mobile-value\"\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-mobile-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-mobile-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-mobile-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-mobile-row\" *ngFor=\"let childColumn of column.children | filterMobile:item\"\r\n          (click)=\"check(item)\">\r\n          <div class=\"col-5\">\r\n            <span class=\"c-mobile-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] | cellClassName:item:childColumn:true\"\r\n                [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"><a *ngIf=\"childColumn.click\"\r\n                  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-mobile-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] | cellClassName:item:childColumn:true\"\r\n              [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\r\n              <a *ngIf=\"childColumn.click\" href=\"javascript:;\"\r\n                (click)=\"childColumn.click(item[childColumn.field], item)\">{{(item[childColumn.field] | valueTransform:item:childColumn) | number : '1.0-2'}}</a>\r\n              <ng-container *ngIf=\"!childColumn.click\">\r\n                {{(item[childColumn.field] | valueTransform:item:childColumn) | number : '1.0-2'}}</ng-container>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'datetime'\"\r\n              [className]=\"item[childColumn.field] | cellClassName:item:childColumn:true\"\r\n              [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\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] | cellClassName:item:childColumn:true\"\r\n              [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\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] | cellClassName:item:childColumn:true\"\r\n              [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\">\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] | cellClassName:item:childColumn:true\"\r\n              [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n              (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\">\r\n              <span *ngIf=\"item[childColumn.field]\"\r\n                class=\"status status-success\">{{childColumn.trueValue || 'True'}}</span>\r\n              <span *ngIf=\"!item[childColumn.field]\"\r\n                class=\"status status-danger\">{{childColumn.falseValue || 'False'}}</span>\r\n            </span>\r\n            <span *ngIf=\"childColumn.type === 'color'\"\r\n              [className]=\"item[childColumn.field] | cellClassName:item:childColumn:true\"\r\n              [ngClass]=\"{'blinker': item.blinker && item.blinker[childColumn.field]}\"\r\n              (click)=\"childColumn.click && childColumn.click(item[childColumn.field], item)\"><input disabled=\"true\"\r\n                type=\"color\" class=\"form-control c-input-xs\" [(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-mobile-value\"\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-mobile-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-mobile-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-mobile-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    <div class=\"p-2\" *ngIf=\"gridOption?.subInformation && item?.subInformation?.isOpened\">\r\n      <sd-grid-sub-information [subItems]=\"item?.subInformation?.subItems\"\r\n        [columns]=\"gridOption?.subInformation?.columns\"></sd-grid-sub-information>\r\n    </div>\r\n    <div class=\"c-mobile-command\">\r\n      <div>\r\n        <i *ngIf=\"gridOption?.subInformation && item.subInformation?.isLoading\"\r\n          class=\"fa fa-spinner fa-spin ml-1 c-mobile-action\" (click)=\"expandOrCollapse(item)\"></i>\r\n        <i *ngIf=\"gridOption?.subInformation && !item.subInformation?.isLoading\" class=\"fa ml-1 c-mobile-action\"\r\n          [ngClass]=\"{'fa-plus': !item.subInformation?.isOpened, 'fa-minus': item.subInformation?.isOpened}\"\r\n          (click)=\"expandOrCollapse(item)\"></i>\r\n      </div>\r\n      <ng-container *ngIf=\"gridOption.commands | mobileCommandFilter:item | async; $implicit as filteredCommands\">\r\n        <div *ngIf=\"filteredCommands.length\">\r\n          <i [matMenuTriggerFor]=\"menu\" class=\"fa fa-navicon fa-fw c-mobile-action\"></i>\r\n          <mat-menu #menu=\"matMenu\">\r\n            <button *ngFor=\"let command of filteredCommands\" mat-menu-item (click)=\"command.click(item)\"\r\n              [disabled]=\"command.disabled | commandDisabled:item\">\r\n              <i class=\"{{command.icon | commandIcon:item}}\"></i>\r\n              <span> {{command.title | commandTitle:item}}</span>\r\n            </button>\r\n          </mat-menu>\r\n        </div>\r\n      </ng-container>\r\n    </div>\r\n  </div>\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:#4caf50}.status-danger{color:#f44336}.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:50px;opacity:.5}.c-img.c-clickable:hover{opacity:.9}"]
    })
], GridMobileColumnViewComponent);
export { GridMobileColumnViewComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC1kZXNrdG9wLW1vYmlsZS12aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL3N1cGVyZGV2LWFuZ3VsYXItY29yZS8iLCJzb3VyY2VzIjpbImxpYi9jb250cm9scy9ncmlkLWNvbnRyb2wvY29tcG9uZW50cy9ncmlkLWRlc2t0b3AtbW9iaWxlLXZpZXcvZ3JpZC1kZXNrdG9wLW1vYmlsZS12aWV3LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFTakQsSUFBYSw2QkFBNkIsR0FBMUMsTUFBYSw2QkFBNkI7SUFJeEMsZ0JBQ0ksQ0FBQztDQUNOLENBQUE7QUFKVTtJQURSLEtBQUssRUFBRTtJQUNQLEtBQUssRUFBRTs2REFBb0I7QUFDbkI7SUFBUixLQUFLLEVBQUU7MkRBQWdCO0FBSGIsNkJBQTZCO0lBTHpDLFNBQVMsQ0FBQztRQUNULFFBQVEsRUFBRSw2QkFBNkI7UUFDdkMsc2xjQUF3RDs7S0FFekQsQ0FBQztHQUNXLDZCQUE2QixDQU16QztTQU5ZLDZCQUE2QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuXHJcbmltcG9ydCB7IEdyaWRDb2x1bW4sIEdyaWRJdGVtIH0gZnJvbSAnLi4vLi4vZ3JpZC1jb250cm9sLm1vZGVsJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnc2QtZ3JpZC1kZXNrdG9wLW1vYmlsZS12aWV3JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vZ3JpZC1kZXNrdG9wLW1vYmlsZS12aWV3LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9ncmlkLWRlc2t0b3AtbW9iaWxlLXZpZXcuY29tcG9uZW50LnNjc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgR3JpZE1vYmlsZUNvbHVtblZpZXdDb21wb25lbnQge1xyXG4gIEBJbnB1dCgpXHJcbiAgQElucHV0KCkgY29sdW1uOiBHcmlkQ29sdW1uO1xyXG4gIEBJbnB1dCgpIGl0ZW06IEdyaWRJdGVtO1xyXG4gIGNvbnN0cnVjdG9yKFxyXG4gICkgeyB9XHJcbn1cclxuIl19