[{"__symbolic":"module","version":4,"metadata":{"ReadComplexFieldCollectionTableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../base-field/abstract-field-read.component","name":"AbstractFieldReadComponent","line":84,"character":62},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"ccd-read-complex-field-collection-table","template":"\n     <div class=\"complex-panel\">\n          <dl class=\"complex-panel-title\"><dt><span class=\"text-16\">{{caseField.label}}</span></dt><dd></dd></dl>\n          <table class=\"complex-panel-table\">\n            <tbody>\n            <!-- <COMPLEX table field header>-->\n            <tr>\n              <ng-container *ngFor=\"let heading of columns\">\n                <ng-container *ngFor=\"let name of columnsAllLabels | keyvalue\">\n                  <th *ngIf=\"heading.trim() == name.key\">\n                    <span class=\"text-16\">{{name.value.label}}</span>\n                    <a href=\"javascript:void(0)\" (click)=\"sortRowsByColumns(name.key)\"  class=\"sort-widget\" [innerHTML]=\"sortWidget(name.value  )\"></a>\n                  </th>\n                </ng-container>\n              </ng-container>\n              <th></th>\n            </tr>\n            <!-- </COMPLEX table field header>-->\n            <ng-container *ngFor=\"let fields of rows;  let i = index;\" >\n              <!-- <COMPLEX table collapsed view>-->\n              <tr class=\"new-table-row accordion-heading\">\n                <ng-container *ngFor=\"let heading of columns\">\n                  <td>\n                    <ng-container *ngIf=\"fields[heading];let fieldValue\">\n                    <div *ngIf=\"fieldValue;else showEmptyTd\">\n                    <ccd-field-read [caseField]=\"{\n                          id: heading,\n                          field_type: columnsHorizontalLabel[heading].type,\n                          value: fieldValue\n                        }\" [context]=\"context\"></ccd-field-read>\n                    </div>\n                    <ng-template #showEmptyTd><div>&nbsp;</div></ng-template>\n                    </ng-container>\n                  </td>\n                </ng-container>\n                  <td>\n                    <div (click)=\"isHidden[i] = !isHidden[i]\">\n                      <span [ngClass]=\"'fa ' + (isHidden[i]? 'fa-plus' : 'fa-minus') + ' fa-fw accordion-icon'\" ></span>\n                    </div>\n                   </td>\n              </tr>\n              <!-- </COMPLEX table collapsed view>-->\n              <!-- <COMPLEX table expanded view>-->\n              <tr [hidden]=\"isHidden[i]\">\n                <td [colSpan]=\"columns.length +1\">\n                  <div class='accordion-wrapper'>\n                  <table class=\"accordion-panel-table\">\n                    <tbody>\n                      <ng-container *ngFor=\"let vLabel of columnsVerticalLabel | keyvalue : skipSort\">\n                        <!-- <COMPLEX table expandable body simple field>-->\n                          <tr class=\"complex-panel-simple-field accordion-body\"\n                              ccdConditionalShow [caseField]=\"vLabel.value.caseField\" [contextFields]=\"caseField | ccdFieldsFilter :true :i\">\n                            <th *ngIf=\"!vLabel.value.caseField.isLabel()\"><span class=\"text-16\">{{vLabel.value.label}}</span></th>\n                            <td [colSpan]=\"vLabel.value.caseField.isLabel()? '2': ''\">\n                              <ccd-field-read [caseField]=\"{\n                                id: vLabel.key,\n                                label: vLabel.value.caseField.label,\n                                field_type:  vLabel.value.caseField.field_type,\n                                value: fields[vLabel.key]\n                              }\" [caseFields]=\"caseField | ccdFieldsFilter :true :i\"></ccd-field-read>\n                            </td>\n                          </tr>\n                      </ng-container>\n                    </tbody>\n                  </table>\n                  </div>\n                </td>\n              </tr>\n              <!-- </COMPLEX table expanded view>-->\n            </ng-container>\n            </tbody>\n          </table>\n        </div>\n  ","styles":["\n    .complex-panel{margin:13px 0px;border:1px solid #bfc1c3}.complex-panel .complex-panel-title{background-color:#dee0e2;padding:5px;border-bottom:1px solid #bfc1c3;font-weight:bold;display:block;color:#0b0c0c;padding-bottom:2px;font-family:\"nta\",Arial,sans-serif;font-weight:700;text-transform:none;font-size:16px;line-height:1.25}@media(min-width: 641px){.complex-panel .complex-panel-title{font-size:19px;line-height:1.3157894737}}.complex-panel .complex-panel-table{table-layout:fixed}.complex-panel .complex-panel-table>tbody>tr>th{vertical-align:top;color:#2e2c70}.complex-panel .complex-panel-table>tbody>tr:last-child>th{border-bottom:none}.complex-panel .complex-panel-table th{padding-left:5px;font-weight:bold;border-bottom:none}.complex-panel .complex-panel-table th:last-child{width:5%}.complex-panel .complex-panel-table td{padding-left:5px;padding-top:5px;padding-bottom:5px;border-bottom:none;word-wrap:break-word}.complex-panel .new-table-row{border-top:1px solid #bfc1c3}.complex-panel .complex-panel-simple-field th{padding-left:5px;padding-top:0px;padding-bottom:0px;width:295px}.complex-panel .complex-panel-nested-field th{padding-left:33px;padding-top:0px;padding-bottom:0px;width:200px}.complex-panel .complex-panel-compound-field td{padding:5px;border-bottom:none}.complex-panel .accordion-icon{margin-right:5px;float:right;padding:2px;cursor:pointer;color:#2e2c70}.sort-widget{cursor:pointer;text-decoration:none;color:#0b0c0c}.accordion-wrapper{margin-top:10px;margin-bottom:10px}.accordion-wrapper .heading-medium{margin:0px}.accordion-wrapper .accordion-heading{border-top:1px solid #bfc1c3;padding-top:20px;padding-bottom:10px;height:20px;cursor:pointer}.accordion-wrapper .accordion-body{margin-top:20px;margin-right:20px}.accordion-wrapper .last-accordion{border-bottom:1px solid #bfc1c3;padding-bottom:30px}.accordion-wrapper .accordion-panel-table th{width:30%;border-bottom:1px solid #e1e4e7;color:#000}.accordion-wrapper .accordion-panel-table td{border-bottom:1px solid #e1e4e7;word-break:break-word}.accordion-wrapper .accordion-panel-table tr:last-child>th{border-bottom:none}.accordion-wrapper .accordion-panel-table tr:last-child>td{border-bottom:none}\n  "]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}],"populateHorizontalLabels":[{"__symbolic":"method"}],"populateLabels":[{"__symbolic":"method"}],"populateCaseFieldValuesIntoRows":[{"__symbolic":"method"}],"sortRowsByColumns":[{"__symbolic":"method"}],"isSortAscending":[{"__symbolic":"method"}],"sortWidget":[{"__symbolic":"method"}],"trackByIndex":[{"__symbolic":"method"}],"skipSort":[{"__symbolic":"method"}]}}}}]