import { __decorate } from "tslib";
import { Component, OnInit, AfterViewInit, Input, ChangeDetectorRef } from '@angular/core';
import { SettingService } from '../../../../services/setting/setting.service';
import { NotifyService } from '../../../../services/notify/notify.service';
import { MobileMaxWidth } from '../../../../constants/responsive';
var GridSubInformationComponent = /** @class */ (function () {
    function GridSubInformationComponent(ref, settingService, notifyService) {
        var _this = this;
        this.ref = ref;
        this.settingService = settingService;
        this.notifyService = notifyService;
        this.height = 'auto';
        this.columns = [];
        this.commands = [];
        this.subItems = [];
        this.isMobile = window.innerWidth < MobileMaxWidth;
        this.filter = {};
        this.onEditorChange = function (column, item, value) {
            var _a;
            if (column.type !== 'children') {
                (_a = column.editor) === null || _a === void 0 ? void 0 : _a.change(item, value);
                _this.ref.detectChanges();
            }
        };
    }
    GridSubInformationComponent.prototype.ngOnInit = function () {
    };
    GridSubInformationComponent.prototype.ngAfterViewInit = function () {
    };
    GridSubInformationComponent.prototype.updateFilter = function () {
    };
    GridSubInformationComponent.prototype.trackById = function (index, item) {
        return item.id;
    };
    GridSubInformationComponent.ctorParameters = function () { return [
        { type: ChangeDetectorRef },
        { type: SettingService },
        { type: NotifyService }
    ]; };
    __decorate([
        Input()
    ], GridSubInformationComponent.prototype, "height", void 0);
    __decorate([
        Input()
    ], GridSubInformationComponent.prototype, "columns", void 0);
    __decorate([
        Input()
    ], GridSubInformationComponent.prototype, "commands", void 0);
    __decorate([
        Input()
    ], GridSubInformationComponent.prototype, "subItems", void 0);
    GridSubInformationComponent = __decorate([
        Component({
            selector: 'sd-grid-sub-information',
            template: "<div class=\"clearfix\"></div>\r\n<div *ngIf=\"!isMobile\" class=\"sd-box sd-box-primary\">\r\n  <div class=\"sd-box-body p-0\">\r\n    <div class=\"row mx-0\">\r\n      <div class=\"table-responsive\" style=\"position: relative;\" [ngStyle]=\"{'height': height}\">\r\n        <table class=\"table table-hover table-striped table-bordered\">\r\n          <thead class=\"thead-light\">\r\n            <tr>\r\n              <th class=\"position-sticky c-sticky-all align-middle p-0\" style=\"width:1px\">\r\n                <div class=\"d-flex h-100\">\r\n                  <div style=\"width:4px; min-width: 4px;\"></div>\r\n                  <div *ngIf=\"commands?.length\" class=\"align-middle text-center\"\r\n                    [ngStyle]=\"{'width':commands.length*35 + 'px', 'min-width': commands.length*35 + 'px'}\">\r\n                  </div>\r\n                  <div *ngIf=\"commands?.length\" class=\"c-sticky-spliter\"></div>\r\n                </div>\r\n              </th>\r\n              <th *ngFor=\"let column of columns\" class=\"position-sticky c-sticky-top\"\r\n                [ngStyle]=\"{'width':column.width ? column.width : '','min-width':column.width ? column.width : '300px'}\">\r\n                <span [title]=\"column.title\" class=\"c-header-title cursor-pointer\"\r\n                  [ngStyle]=\"{'width':column.width ? column.width : ''}\">\r\n                  {{column.title}}\r\n                </span>\r\n              </th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            <ng-container *ngFor=\"let item of subItems; trackBy: trackById\">\r\n              <tr>\r\n                <td class=\"position-sticky c-sticky-left p-0\" style=\"width:1px\">\r\n                  <div class=\"d-inline-flex align-middle h-100\">\r\n                    <div class=\"h-100\" style=\"width:4px;min-width: 4px;left:0\" matTooltipPosition=\"after\">\r\n                    </div>\r\n                  </div>\r\n                  <div *ngIf=\"commands?.length\" class=\"d-inline-flex align-middle\">\r\n                    <div class=\"d-flex align-middle text-center justify-content-center\"\r\n                      [ngStyle]=\"{'width':commands.length*35 + 'px', 'min-width': commands.length*35 + 'px'}\">\r\n                      <ng-container *ngIf=\"item.viewCommands?.length\">\r\n                        <section *ngFor=\"let command of item.viewCommands\">\r\n                          <button (click)=\"command.click(item)\" type=\"button\" class=\"c-btn-icon\"\r\n                            [matTooltip]=\"command.title\" [disabled]=\"command.disabled\">\r\n                            <i class=\"{{command.icon}}\" aria-hidden=\"true\"></i>\r\n                          </button>\r\n                        </section>\r\n                      </ng-container>\r\n                    </div>\r\n                  </div>\r\n                  <div *ngIf=\"commands?.length\" class=\"d-inline-flex align-middle h-100\">\r\n                    <div class=\"c-sticky-spliter h-100\"></div>\r\n                  </div>\r\n                </td>\r\n                <td *ngFor=\"let column of columns\" class=\"align-middle\"\r\n                  [ngClass]=\"{'text-center': column.type !== 'string' && column.type !== 'number', 'text-right': column.type === 'number'}\"\r\n                  [ngStyle]=\"{'width':column.width ? column.width : '', 'min-width':column.width ? column.width : '300px'}\">\r\n                  <ng-container *ngIf=\"!column.children?.length\">\r\n                    <ng-container *ngIf=\"item[column.field] | editorSubInformationHandler:item:columns\">\r\n                      <ng-container *ngIf=\"item.editorHandler[column.field].visible;else elseDisableEditor\">\r\n                        <div *ngIf=\"column.type === 'string'\">\r\n                          <input class=\"form-control c-input-xs\"\r\n                            [ngClass]=\"{'border-right-0':column.editor && column.editor.click}\"\r\n                            [(ngModel)]=\"item[column.field]\"\r\n                            (keyup.enter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n                            (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'number'\">\r\n                          <input class=\"form-control c-input-xs\" type=\"number\"\r\n                            [ngClass]=\"{'border-right-0':column.editor && column.editor.click}\"\r\n                            [(ngModel)]=\"item[column.field]\"\r\n                            (keyup.enter)=\"column.editor?.keyupEnter && column.editor?.keyupEnter(item)\"\r\n                            (change)=\"column.editor?.change && column.editor?.change(item)\">\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'bool'\">\r\n                          <div class=\"align-middle\">\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>\r\n                      </ng-container>\r\n                      <ng-template #elseDisableEditor>\r\n                        <div *ngIf=\"column.type === 'string'\">\r\n                          <div class=\"c-ellipsis\">\r\n                            <span [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-badge':item.badge && item.badge[column.field], \r\n                            'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n                            'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n                            'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n                            'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n                            'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n                            'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n                            'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n                            'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n                            'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field]}}</span>\r\n                          </div>\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'color'\">\r\n                          <input [disabled]=\"true\" type=\"color\" class=\"form-control c-input-xs\"\r\n                            [(ngModel)]=\"item[column.field]\">\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'number'\">\r\n                          <div class=\"pull-right\">\r\n                            <span\r\n                              [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-badge':item.badge && item.badge[column.field], \r\n                              'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n                              'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n                              'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n                              'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n                              'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n                              'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n                              'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n                              'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n                              'blinker': item.blinker && item.blinker[column.field]}\">{{(item[column.field] | valueTransform:item:column) | number : '1.0-2'}}</span>\r\n                          </div>\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'date'\">\r\n                          {{item[column.field] | date:'dd/MM/yyyy'}}\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'datetime'\">\r\n                          {{item[column.field] | date:'dd/MM/yyyy HH:mm'}}\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'time'\">\r\n                          {{item[column.field] | date:'HH:mm'}}\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'bool'\">\r\n                          <div class=\"align-middle\">\r\n                            <span *ngIf=\"item[column.field]\"\r\n                              class=\"status status-success\">{{column.trueValue || 'True'}}</span>\r\n                            <span *ngIf=\"!item[column.field]\"\r\n                              class=\"status status-danger\">{{column.falseValue || 'False'}}</span>\r\n                          </div>\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'values'\">\r\n                          <div class=\"status c-ellipsis\"\r\n                            [ngStyle]=\"{'color':column?.dictionary[item[column.field]]?.color}\">\r\n                            {{!!column?.dictionary[item[column.field]] ? column?.dictionary[item[column.field]]?.text : item[column.field]}}\r\n                          </div>\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'radio'\">\r\n                          <div class=\"c-ellipsis\">\r\n                            <span>{{item[column.field]}}</span>\r\n                          </div>\r\n                        </div>\r\n                        <div *ngIf=\"column.type === 'image'\">\r\n                          <div class=\"align-middle\">\r\n                            <img [src]=\"item[column.field]\" [width]=\"column.display?.width\"\r\n                              [height]=\"column.display?.height\" style=\"margin: 5px 0\">\r\n                          </div>\r\n                        </div>\r\n                      </ng-template>\r\n                    </ng-container>\r\n                  </ng-container>\r\n                  <div *ngIf=\"column.children?.length\" class=\"row mx-0\">\r\n                    <div *ngFor=\"let childColumn of column.children | filterMobile:item\"\r\n                      [ngClass]=\"{'col-sm-6': childColumn?.colSpan === 1, 'col-sm-12': !childColumn?.colSpan || childColumn?.colSpan === 2}\">\r\n                      <span class=\"c-mobile-title\">\u2022 {{childColumn.title}}:</span>\r\n                      <span *ngIf=\"childColumn.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n                        'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n                        'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n                        'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n                        'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n                        'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n                        'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n                        'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n                        'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n                        'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field]}}</span>\r\n                      <span *ngIf=\"childColumn.type === 'number'\" class=\"c-mobile-value\"\r\n                        [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n                        'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n                        'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n                        'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n                        'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n                        'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n                        'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n                        'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n                        'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n                        'blinker': item.blinker && item.blinker[childColumn.field]}\">{{(item[childColumn.field] | valueTransform:item:childColumn) | number : '1.0-2'}}</span>\r\n                      <span *ngIf=\"childColumn.type === 'datetime'\"\r\n                        class=\"c-mobile-value\">{{item[childColumn.field] | date:'dd/MM/yyyy HH:mm'}}</span>\r\n                      <span *ngIf=\"childColumn.type === 'date'\"\r\n                        class=\"c-mobile-value\">{{item[childColumn.field] | date:'dd/MM/yyyy'}}</span>\r\n                      <span *ngIf=\"childColumn.type === 'time'\"\r\n                        class=\"c-mobile-value\">{{item[childColumn.field] | date:'HH:mm'}}</span>\r\n                      <span *ngIf=\"childColumn.type === 'bool'\" class=\"c-mobile-value\">\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'\" class=\"c-mobile-value\"><input disabled=\"true\"\r\n                          type=\"color\" class=\"form-control c-input-xs\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n                      <span *ngIf=\"childColumn.type === 'values'\" class=\"status c-mobile-value\"\r\n                        [ngStyle]=\"{'color':childColumn?.dictionary[item[childColumn.field]]?.color}\">\r\n                        {{!!childColumn?.dictionary[item[childColumn.field]] ? childColumn?.dictionary[item[childColumn.field]]?.text : item[childColumn.field]}}\r\n                      </span>\r\n                      <span *ngIf=\"childColumn.type === 'radio'\"\r\n                        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\"\r\n                        style=\"margin: 5px 0\">\r\n                    </div>\r\n                  </div>\r\n                </td>\r\n              </tr>\r\n            </ng-container>\r\n          </tbody>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div *ngIf=\"isMobile\" class=\"sd-box c-mobile-box\">\r\n  <div class=\"sd-box-body c-mobile-body\" [ngStyle]=\"{'height': height}\">\r\n    <ng-container *ngFor=\"let item of subItems\">\r\n      <div class=\"c-mobile-item\">\r\n        <ng-container *ngFor=\"let column of columns | filterMobile:item\">\r\n          <div *ngIf=\"item[column.field]\" class=\"c-mobile-row\">\r\n            <span class=\"c-mobile-title\">\u2022 {{column.title}}:</span>\r\n            <span *ngIf=\"column.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-mobile-badge':item.badge && item.badge[column.field], \r\n            'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n            'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n            'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n            'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n            'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n            'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n            'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n            'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n            'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field]}}</span>\r\n            <span *ngIf=\"column.type === 'number'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[column.field], 'c-mobile-badge':item.badge && item.badge[column.field], \r\n            'badge-primary':item.badge && item.badge[column.field] === 'PRIMARY', \r\n            'badge-secondary':item.badge && item.badge[column.field] === 'SECONDARY', \r\n            'badge-info':item.badge && item.badge[column.field] === 'INFO', \r\n            'badge-success':item.badge && item.badge[column.field] === 'SUCCESS', \r\n            'badge-warning':item.badge && item.badge[column.field] === 'WARNING', \r\n            'badge-danger':item.badge && item.badge[column.field] === 'DANGER',\r\n            'badge-light':item.badge && item.badge[column.field] === 'LIGHT',\r\n            'badge-dark':item.badge && item.badge[column.field] === 'DARK',\r\n            'blinker': item.blinker && item.blinker[column.field]}\">{{item[column.field] | number : '1.0-2'}}</span>\r\n            <span *ngIf=\"column.type === 'datetime'\"\r\n              class=\"c-mobile-value\">{{item[column.field] | date:'dd/MM/yyyy HH:mm'}}</span>\r\n            <span *ngIf=\"column.type === 'date'\"\r\n              class=\"c-mobile-value\">{{item[column.field] | date:'dd/MM/yyyy'}}</span>\r\n            <span *ngIf=\"column.type === 'time'\" class=\"c-mobile-value\">{{item[column.field] | date:'HH:mm'}}</span>\r\n            <span *ngIf=\"column.type === 'bool'\" class=\"c-mobile-value\">\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            <span *ngIf=\"column.type === 'values'\" class=\"status c-mobile-value\"\r\n              [ngStyle]=\"{'color':column?.dictionary[item[column.field]]?.color}\">\r\n              {{!!column?.dictionary[item[column.field]] ? column?.dictionary[item[column.field]]?.text : item[column.field]}}\r\n            </span>\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          </div>\r\n          <ng-container *ngIf=\"column.children?.length\">\r\n            <div class=\"c-mobile-row\" *ngFor=\"let childColumn of column.children | filterMobile:item\">\r\n              <span class=\"c-mobile-title\">\u2022 {{childColumn.title}}:</span>\r\n              <span *ngIf=\"childColumn.type === 'string'\" class=\"c-mobile-value\" [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n            'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n            'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n            'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n            'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n            'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n            'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n            'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n            'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n            'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field]}}</span>\r\n              <span *ngIf=\"childColumn.type === 'number'\" class=\"c-mobile-value\"\r\n                [ngClass]=\"{'badge': item.badge && item.badge[childColumn.field], 'c-mobile-badge':item.badge && item.badge[childColumn.field], \r\n            'badge-primary':item.badge && item.badge[childColumn.field] === 'PRIMARY', \r\n            'badge-secondary':item.badge && item.badge[childColumn.field] === 'SECONDARY', \r\n            'badge-info':item.badge && item.badge[childColumn.field] === 'INFO', \r\n            'badge-success':item.badge && item.badge[childColumn.field] === 'SUCCESS', \r\n            'badge-warning':item.badge && item.badge[childColumn.field] === 'WARNING', \r\n            'badge-danger':item.badge && item.badge[childColumn.field] === 'DANGER',\r\n            'badge-light':item.badge && item.badge[childColumn.field] === 'LIGHT',\r\n            'badge-dark':item.badge && item.badge[childColumn.field] === 'DARK',\r\n            'blinker': item.blinker && item.blinker[childColumn.field]}\">{{item[childColumn.field] | number : '1.0-2'}}</span>\r\n              <span *ngIf=\"childColumn.type === 'datetime'\"\r\n                class=\"c-mobile-value\">{{item[childColumn.field] | date:'dd/MM/yyyy HH:mm'}}</span>\r\n              <span *ngIf=\"childColumn.type === 'date'\"\r\n                class=\"c-mobile-value\">{{item[childColumn.field] | date:'dd/MM/yyyy'}}</span>\r\n              <span *ngIf=\"childColumn.type === 'time'\"\r\n                class=\"c-mobile-value\">{{item[childColumn.field] | date:'HH:mm'}}</span>\r\n              <span *ngIf=\"childColumn.type === 'bool'\" class=\"c-mobile-value\">\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'\" class=\"c-mobile-value\"><input disabled=\"true\" type=\"color\"\r\n                  class=\"form-control c-input-xs\" [(ngModel)]=\"item[childColumn.field]\"></span>\r\n              <span *ngIf=\"childColumn.type === 'values'\" class=\"status c-mobile-value\"\r\n                [ngStyle]=\"{'color':childColumn?.dictionary[item[childColumn.field]]?.color}\">\r\n                {{!!childColumn?.dictionary[item[childColumn.field]] ? childColumn?.dictionary[item[childColumn.field]]?.text : item[childColumn.field]}}\r\n              </span>\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            </div>\r\n          </ng-container>\r\n        </ng-container>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n</div>",
            styles: [".btn{color:#fff;background-color:#919191;border-color:#919191;box-shadow:0 2px 2px 0 rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12)}.btn:active,.btn:hover{box-shadow:0 14px 26px -12px rgba(153,153,153,.14),0 3px 1px -2px rgba(153,153,153,.2),0 1px 5px 0 rgba(153,153,153,.12)}.btn.btn-sm{padding:.2rem .5rem;font-size:11px}.btn.btn-xs{padding:.1rem .3rem;font-size:9px}.btn.btn-round{border-radius:30px}.btn.btn-primary{color:#fff;background-color:#c82c37;border-color:#c82c37;box-shadow:0 2px 2px 0 rgba(156,39,176,.14),0 3px 1px -2px rgba(156,39,176,.2),0 1px 5px 0 rgba(156,39,176,.12)}.btn.btn-primary:active,.btn.btn-primary:hover{box-shadow:0 14px 26px -12px rgba(156,39,176,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(156,39,176,.2)}.btn.btn-info{color:#fff;background-color:#00bcd4;border-color:#00bcd4;box-shadow:0 2px 2px 0 rgba(0,188,212,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,188,212,.12)}.btn.btn-info:active,.btn.btn-info:hover{box-shadow:0 14px 26px -12px rgba(0,188,212,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(0,188,212,.2)}.btn.btn-success{color:#fff;background-color:#4caf50;border-color:#4caf50;box-shadow:0 2px 2px 0 rgba(76,175,80,.14),0 3px 1px -2px rgba(76,175,80,.2),0 1px 5px 0 rgba(76,175,80,.12)}.btn.btn-success:active,.btn.btn-success:hover{box-shadow:0 14px 26px -12px rgba(76,175,80,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(76,175,80,.2)}.btn.btn-warning{color:#fff;background-color:#ff9800;border-color:#ff9800;box-shadow:0 2px 2px 0 rgba(255,152,0,.14),0 3px 1px -2px rgba(255,152,0,.2),0 1px 5px 0 rgba(255,152,0,.12)}.btn.btn-warning:active,.btn.btn-warning:hover{box-shadow:0 14px 26px -12px rgba(255,152,0,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(255,152,0,.2)}.btn.btn-danger{color:#fff;background-color:#f44336;border-color:#f44336;box-shadow:0 2px 2px 0 rgba(244,67,54,.14),0 3px 1px -2px rgba(244,67,54,.2),0 1px 5px 0 rgba(244,67,54,.12)}.btn.btn-danger:active,.btn.btn-danger:hover{box-shadow:0 14px 26px -12px rgba(244,67,54,.42),0 4px 23px 0 rgba(0,0,0,.12),0 8px 10px -5px rgba(244,67,54,.2)}", ".sd-label{font-weight:500;color:#919191!important}.sd-label.sd-label-primary{color:#c82c37!important}.sd-label.sd-label-success{color:#4caf50!important}.sd-label.sd-label-info{color:#00bcd4!important}.sd-label.sd-label-warning{color:#ff9800!important}.sd-label.sd-label-danger{color:#f44336!important}", "::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#888;border-radius:50px}::-webkit-scrollbar-thumb:hover{background:#555}", ".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}", "@charset \"UTF-8\";.grid-header{overflow-x:hidden;overflow-y:hidden}td,th{padding:3px 5px;font-size:13px;min-width:0}.c-cell-padding{padding:3px 5px!important}.c-header-title{text-transform:uppercase;font-weight:500}span.c-header-title{white-space:nowrap;overflow:hidden!important;text-overflow:ellipsis;display:block;padding:0 .3rem}thead th{min-height:50px;height:50px;border-top:none}tbody td{min-height:25px;height:25px}.status{font-weight:500;padding:2px 5px;border-radius:1.5rem;color:#16759b;display:inline-block;text-align:center;text-transform:uppercase}.status-success{color:#43a047}.status-danger{color:#f44336}.sumarize{padding:8px 12px;text-transform:uppercase;font-size:12px;color:#fff;display:inline-block;white-space:normal;font-weight:500;line-height:1;text-align:center;border-radius:10rem;background-color:#00bcd4}.cursor-pointer{cursor:pointer}label.custom-control.custom-checkbox{margin:0}.c-overflow-x-hidden{overflow-x:hidden}.c-overflow-y-hidden{overflow-y:hidden}.c-grid-header{overflow-x:hidden;overflow-y:hidden}.c-th-xs{line-height:1.15;padding:.1rem!important;font-size:.8rem;min-width:0;min-height:49px;height:49px}.c-td-xs{line-height:1.15;padding:.1rem!important;font-size:.8rem;min-width:0;min-height:1.5rem;height:1.5rem}.c-input-xs{font-size:13px!important;line-height:1.5!important;padding:3px!important;height:28px!important}.c-sticky-top{z-index:20;top:0!important}.c-sticky-left{z-index:20;left:0!important;border-left:none!important;border-right:none!important}.c-sticky-all{z-index:30;top:0!important;left:0!important;border-left:none!important;border-right:none!important}.c-sticky-spliter{z-index:40;background-color:#dee2e6;border:none;width:1px;min-width:1px}.table-striped tbody tr:nth-of-type(even) .c-sticky-left{background-color:#fff}.table-striped tbody tr:nth-of-type(odd) .c-sticky-left{background-color:#f2f2f2}.table-responsive>.table-bordered{border:1px solid #dee2e6!important}.c-badge{display:block!important;border-radius:10rem;padding:.3rem!important;font-weight:500;font-size:.8rem}"]
        })
    ], GridSubInformationComponent);
    return GridSubInformationComponent;
}());
export { GridSubInformationComponent };
//# sourceMappingURL=data:application/json;base64, 