[{"__symbolic":"module","version":3,"metadata":{"TableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"bb-table","template":"\n      <bb-card [padding]=\"0\" [title]=\"title\" [rightButtonBar]=\"buttonBar\" [overflow]=\"overflow\"\n               (onButtonClicked)=\"resetAndEmit($event)\">\n          <div class=\"table-wrapper\">\n              <table class=\"table\">\n                  <ng-container *ngIf=\"data | async as list; else loading\">\n                      <tr *ngIf=\"header && list.length > 0\" class=\"table-row table-row--header\">\n                          <th *ngIf=\"selectedButtonBar.length > 0\" class=\"table-header table-header__checkbox\">\n                              <bb-checkbox (click)=\"onAllCheckboxClicked(list)\" [selected]=\"selected.length === list.length\"\n                                           [single]=\"true\"></bb-checkbox>\n                          </th>\n                          <th *ngFor=\"let row of rows; trackBy: trackByRow\" [ngClass]=\"{\n                              'table-header--fit': row.fit,\n                              'table-header--center': row.flow === 'center',\n                              'table-header--left': !row.flow || row.flow === 'left',\n                              'table-header--right': row.flow === 'right'\n                          }\" class=\"table-header\">\n                              {{ row.label && row.label !== '' ? (row.label | translate) : row.label }}\n                          </th>\n                      </tr>\n                      <tr class=\"table-row\" *ngFor=\"let item of list; trackBy: trackByRowIdentifier\">\n                          <td *ngIf=\"selectedButtonBar.length > 0\" class=\"table-data table-data__checkbox\">\n                              <bb-checkbox (click)=\"onCheckboxClicked(item[rowIdentifier])\"\n                                           [selected]=\"isRowSelected(item[rowIdentifier])\" [single]=\"true\"></bb-checkbox>\n                          </td>\n                          <td *ngFor=\"let row of rows; trackBy: trackByRow\" [ngClass]=\"{\n                              'table-data--fit': row.fit,\n                              'table-data--center': row.flow === 'center',\n                              'table-data--left': !row.flow || row.flow === 'left',\n                              'table-data--right': row.flow === 'right'\n                          }\" class=\"table-data\">\n                              <ng-container *ngIf=\"!row.templateRef\">\n                                  {{ item[row.property] || '-' }}\n                              </ng-container>\n                              <ng-container *ngIf=\"row.templateRef\">\n                                  <ng-container *ngTemplateOutlet=\"row.templateRef; context: {$implicit: {}, data: item}\">\n                                  </ng-container>\n                              </ng-container>\n                          </td>\n                      </tr>\n                      <tr *ngIf=\"list.length === 0\" class=\"table-row\">\n                          <td class=\"table-data table-data--center table-data--empty\">\n                              <span class=\"light\">{{ empty | translate }}</span>\n                          </td>\n                      </tr>\n                  </ng-container>\n              </table>\n          </div>\n      </bb-card>\n\n      <ng-template #loading>\n          <tr class=\"table-row\">\n              <td class=\"table-data table-data--center\">\n                  <svg width=\"64px\" height=\"64px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n                       preserveAspectRatio=\"xMidYMid\" class=\"lds-ring\">\n                      <circle cx=\"50\" cy=\"50\" r=\"30\" stroke-width=\"10\" fill=\"none\"></circle>\n                      <circle cx=\"50\" cy=\"50\" r=\"30\" stroke=\"#9f9f9f\" stroke-width=\"10\" fill=\"none\"\n                              transform=\"rotate(144 50 50)\">\n                          <animateTransform attributeName=\"transform\" type=\"rotate\" calcMode=\"linear\"\n                                            values=\"0 50 50;360 50 50\"\n                                            keyTimes=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\"></animateTransform>\n                          <animate attributeName=\"stroke-dasharray\" calcMode=\"linear\"\n                                   values=\"18.84955592153876 169.64600329384882;94.2477796076938 94.24777960769377;18.84955592153876 169.64600329384882\"\n                                   keyTimes=\"0;0.5;1\" dur=\"1\" begin=\"0s\" repeatCount=\"indefinite\"></animate>\n                      </circle>\n                  </svg>\n              </td>\n          </tr>\n      </ng-template>\n    ","styles":["\n      .table-wrapper{overflow-x:auto}.table{width:100%}.table-row:not(:last-child){border-bottom:1px solid rgba(208,212,217,0.5)}.table-row:nth-child(even){background-color:rgba(0,0,0,0.01)}.table-row--header{background-color:#ffffff}.table-row--header:not(:last-child){border-bottom:1px solid #d0d4d9}.table-header,.table-data{font-size:15px;padding:14px 20px;vertical-align:middle;line-height:1.2;word-wrap:break-word}.table-header__checkbox,.table-data__checkbox{padding-right:0;width:1%;white-space:nowrap}.table-header,.table-data{font-weight:500}.table-header--fit,.table-data--fit{width:1%;white-space:nowrap}.table-header--left,.table-data--left{text-align:left}.table-header--center,.table-data--center{text-align:center}.table-header--right,.table-data--right{text-align:right}.table-header{color:#afafaf}.table-data--empty{padding:24px 20px}:host /deep/ .table *.light{color:#bebebe}:host /deep/ .table *.subtitle{margin-top:5px}:host /deep/ .table *.middle{display:inline-block;vertical-align:middle}:host /deep/ .table img{width:32px;height:32px;display:inline-block;vertical-align:middle}:host /deep/ .table img.icon{margin-right:5px}\n    "]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rowIdentifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rightButtonBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedButtonBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"empty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overflow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onButtonClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"resetAndEmit":[{"__symbolic":"method"}],"onAllCheckboxClicked":[{"__symbolic":"method"}],"onCheckboxClicked":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"trackByRowIdentifier":[{"__symbolic":"method"}],"trackByRow":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"TableComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"bb-table","template":"\n      <bb-card [padding]=\"0\" [title]=\"title\" [rightButtonBar]=\"buttonBar\" [overflow]=\"overflow\"\n               (onButtonClicked)=\"resetAndEmit($event)\">\n          <div class=\"table-wrapper\">\n              <table class=\"table\">\n                  <ng-container *ngIf=\"data | async as list; else loading\">\n                      <tr *ngIf=\"header && list.length > 0\" class=\"table-row table-row--header\">\n                          <th *ngIf=\"selectedButtonBar.length > 0\" class=\"table-header table-header__checkbox\">\n                              <bb-checkbox (click)=\"onAllCheckboxClicked(list)\" [selected]=\"selected.length === list.length\"\n                                           [single]=\"true\"></bb-checkbox>\n                          </th>\n                          <th *ngFor=\"let row of rows; trackBy: trackByRow\" [ngClass]=\"{\n                              'table-header--fit': row.fit,\n                              'table-header--center': row.flow === 'center',\n                              'table-header--left': !row.flow || row.flow === 'left',\n                              'table-header--right': row.flow === 'right'\n                          }\" class=\"table-header\">\n                              {{ row.label && row.label !== '' ? (row.label | translate) : row.label }}\n                          </th>\n                      </tr>\n                      <tr class=\"table-row\" *ngFor=\"let item of list; trackBy: trackByRowIdentifier\">\n                          <td *ngIf=\"selectedButtonBar.length > 0\" class=\"table-data table-data__checkbox\">\n                              <bb-checkbox (click)=\"onCheckboxClicked(item[rowIdentifier])\"\n                                           [selected]=\"isRowSelected(item[rowIdentifier])\" [single]=\"true\"></bb-checkbox>\n                          </td>\n                          <td *ngFor=\"let row of rows; trackBy: trackByRow\" [ngClass]=\"{\n                              'table-data--fit': row.fit,\n                              'table-data--center': row.flow === 'center',\n                              'table-data--left': !row.flow || row.flow === 'left',\n                              'table-data--right': row.flow === 'right'\n                          }\" class=\"table-data\">\n                              <ng-container *ngIf=\"!row.templateRef\">\n                                  {{ item[row.property] || '-' }}\n                              </ng-container>\n                              <ng-container *ngIf=\"row.templateRef\">\n                                  <ng-container *ngTemplateOutlet=\"row.templateRef; context: {$implicit: {}, data: item}\">\n                                  </ng-container>\n                              </ng-container>\n                          </td>\n                      </tr>\n                      <tr *ngIf=\"list.length === 0\" class=\"table-row\">\n                          <td class=\"table-data table-data--center table-data--empty\">\n                              <span class=\"light\">{{ empty | translate }}</span>\n                          </td>\n                      </tr>\n                  </ng-container>\n              </table>\n          </div>\n      </bb-card>\n\n      <ng-template #loading>\n          <tr class=\"table-row\">\n              <td class=\"table-data table-data--center\">\n                  <svg width=\"64px\" height=\"64px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"\n                       preserveAspectRatio=\"xMidYMid\" class=\"lds-ring\">\n                      <circle cx=\"50\" cy=\"50\" r=\"30\" stroke-width=\"10\" fill=\"none\"></circle>\n                      <circle cx=\"50\" cy=\"50\" r=\"30\" stroke=\"#9f9f9f\" stroke-width=\"10\" fill=\"none\"\n                              transform=\"rotate(144 50 50)\">\n                          <animateTransform attributeName=\"transform\" type=\"rotate\" calcMode=\"linear\"\n                                            values=\"0 50 50;360 50 50\"\n                                            keyTimes=\"0;1\" dur=\"1s\" begin=\"0s\" repeatCount=\"indefinite\"></animateTransform>\n                          <animate attributeName=\"stroke-dasharray\" calcMode=\"linear\"\n                                   values=\"18.84955592153876 169.64600329384882;94.2477796076938 94.24777960769377;18.84955592153876 169.64600329384882\"\n                                   keyTimes=\"0;0.5;1\" dur=\"1\" begin=\"0s\" repeatCount=\"indefinite\"></animate>\n                      </circle>\n                  </svg>\n              </td>\n          </tr>\n      </ng-template>\n    ","styles":["\n      .table-wrapper{overflow-x:auto}.table{width:100%}.table-row:not(:last-child){border-bottom:1px solid rgba(208,212,217,0.5)}.table-row:nth-child(even){background-color:rgba(0,0,0,0.01)}.table-row--header{background-color:#ffffff}.table-row--header:not(:last-child){border-bottom:1px solid #d0d4d9}.table-header,.table-data{font-size:15px;padding:14px 20px;vertical-align:middle;line-height:1.2;word-wrap:break-word}.table-header__checkbox,.table-data__checkbox{padding-right:0;width:1%;white-space:nowrap}.table-header,.table-data{font-weight:500}.table-header--fit,.table-data--fit{width:1%;white-space:nowrap}.table-header--left,.table-data--left{text-align:left}.table-header--center,.table-data--center{text-align:center}.table-header--right,.table-data--right{text-align:right}.table-header{color:#afafaf}.table-data--empty{padding:24px 20px}:host /deep/ .table *.light{color:#bebebe}:host /deep/ .table *.subtitle{margin-top:5px}:host /deep/ .table *.middle{display:inline-block;vertical-align:middle}:host /deep/ .table img{width:32px;height:32px;display:inline-block;vertical-align:middle}:host /deep/ .table img.icon{margin-right:5px}\n    "]}]}],"members":{"title":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rowIdentifier":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rows":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"rightButtonBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedButtonBar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"empty":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"header":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overflow":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"onButtonClicked":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"onSelectedChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"resetAndEmit":[{"__symbolic":"method"}],"onAllCheckboxClicked":[{"__symbolic":"method"}],"onCheckboxClicked":[{"__symbolic":"method"}],"isRowSelected":[{"__symbolic":"method"}],"trackByRowIdentifier":[{"__symbolic":"method"}],"trackByRow":[{"__symbolic":"method"}]}}}}]