[{"__symbolic":"module","version":3,"metadata":{"SkyGridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-grid","template":"<div class=\"sky-grid\">\n  <div class=\"sky-grid-table-container\" [style.height.px]=\"height\" [style.width.px]=\"width\">\n    <table\n      class=\"sky-grid-table\"\n      [ngClass]=\"{ 'sky-grid-fit': fit !== 'scroll', 'sky-grid-has-toolbar': hasToolbar }\">\n      <thead>\n        <tr dragula=\"sky-grid-heading\">\n          <th\n            scope=\"col\"\n            class=\"sky-grid-heading\"\n            *ngFor=\"let column of displayedColumns; let last = last\"\n            [style.width.px]=\"last ? null : column.width\"\n            [attr.sky-cmp-id]=\"column.id || column.field\"\n            [ngClass]=\"{ 'sky-grid-header-locked': column.locked }\"\n            (click)=\"sortByColumn(column)\">\n            {{column.heading}}\n            <i\n              class=\"fa sky-grid-heading-sort\"\n              [ngStyle]=\"{'visibility: hidden': (getSortDirection(column.field) | async)}\"\n              [ngClass]=\"{ 'fa-caret-up': (getSortDirection(column.field) | async) === 'asc', 'fa-caret-down': (getSortDirection(column.field) | async) === 'desc' }\"\n            >\n            </i>\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"sky-grid-tbody\">\n        <tr\n          class=\"sky-grid-row\"\n          *ngFor=\"let item of items\"\n          [attr.sky-cmp-id]=\"item.id\">\n          <td\n            class=\"sky-grid-cell\"\n            *ngFor=\"let column of displayedColumns; let last = last; let i = index\">\n            <sky-grid-cell\n              [template]=\"column.template || defaultCellTemplate\"\n              [fieldSelector]=\"column.field\"\n              [item]=\"item\"\n              [columnId]=\"column.id\"\n              [attr.sky-cmp-id]=\"column.id || column.field\"\n              [style.width.px]=\"last ? null : column.width\">\n            </sky-grid-cell>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{value}}</ng-template>\n","styles":[".sky-grid {\n  position: relative;\n  display: block;\n}\n\n.sky-grid-table-container {\n  overflow: auto;\n}\n\n.sky-grid-table {\n  position: relative;\n  table-layout: fixed;\n  border-collapse: collapse;\n  margin: 0;\n  font-size: 15px;\n  min-width: 100%;\n}\n\n.sky-grid-table.sky-grid-fit {\n  width: 100%;\n}\n\n.sky-grid-tbody {\n  background-color: #ffffff;\n}\n\n.sky-grid-row {\n  border-bottom: 1px dotted #cdcfd2;\n}\n\n.sky-grid-row:nth-child(odd) {\n  background-color: #fbfbfb;\n}\n\n.sky-grid-row .sky-grid-cell {\n  padding: 0;\n}\n\n.sky-grid-heading {\n  border-top: 1px solid #cdcfd2;\n  border-bottom: 1px solid #cdcfd2;\n  border-left: 1px solid #cdcfd2;\n  border-right: 1px solid #cdcfd2;\n  font-family: \"Blackbaud Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  color: #686c73;\n  font-weight: 400;\n  font-size: 15px;\n  border-right-width: 0px;\n  cursor: pointer;\n  background-color: #ffffff;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 8px;\n  text-align: left;\n  -webkit-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.sky-grid-heading:first-child {\n  border-left: 1px solid transparent;\n}\n\n.sky-grid-heading.sky-grid-header-dragging {\n  padding: 8px;\n  background-color: #eeeeef;\n}\n\n.sky-grid-has-toolbar .sky-grid-heading {\n  border-top-width: 0px;\n}\n\n/*\n  This prevents grid header width from changing when sort indication changes\n*/\n.sky-grid-heading-sort {\n  min-width: 8px;\n}\n"],"viewProviders":[{"__symbolic":"reference","module":"ng2-dragula/ng2-dragula","name":"DragulaService"}],"providers":[{"__symbolic":"reference","module":"./grid-adapter.service","name":"SkyGridAdapterService"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"selectedColumnIds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__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"}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hasToolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sortField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedColumnIdsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"sortFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"columnComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./grid-column.component","name":"SkyGridColumnComponent"},{"descendants":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ng2-dragula/ng2-dragula","name":"DragulaService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./grid-adapter.service","name":"SkyGridAdapterService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"sortByColumn":[{"__symbolic":"method"}],"getSortDirection":[{"__symbolic":"method"}],"updateColumnHeading":[{"__symbolic":"method"}],"onHeaderDrop":[{"__symbolic":"method"}],"setDisplayedColumns":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"setSortHeaders":[{"__symbolic":"method"}],"getColumnsFromComponent":[{"__symbolic":"method"}],"updateColumns":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyGridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-grid","template":"<div class=\"sky-grid\">\n  <div class=\"sky-grid-table-container\" [style.height.px]=\"height\" [style.width.px]=\"width\">\n    <table\n      class=\"sky-grid-table\"\n      [ngClass]=\"{ 'sky-grid-fit': fit !== 'scroll', 'sky-grid-has-toolbar': hasToolbar }\">\n      <thead>\n        <tr dragula=\"sky-grid-heading\">\n          <th\n            scope=\"col\"\n            class=\"sky-grid-heading\"\n            *ngFor=\"let column of displayedColumns; let last = last\"\n            [style.width.px]=\"last ? null : column.width\"\n            [attr.sky-cmp-id]=\"column.id || column.field\"\n            [ngClass]=\"{ 'sky-grid-header-locked': column.locked }\"\n            (click)=\"sortByColumn(column)\">\n            {{column.heading}}\n            <i\n              class=\"fa sky-grid-heading-sort\"\n              [ngStyle]=\"{'visibility: hidden': (getSortDirection(column.field) | async)}\"\n              [ngClass]=\"{ 'fa-caret-up': (getSortDirection(column.field) | async) === 'asc', 'fa-caret-down': (getSortDirection(column.field) | async) === 'desc' }\"\n            >\n            </i>\n          </th>\n        </tr>\n      </thead>\n      <tbody class=\"sky-grid-tbody\">\n        <tr\n          class=\"sky-grid-row\"\n          *ngFor=\"let item of items\"\n          [attr.sky-cmp-id]=\"item.id\">\n          <td\n            class=\"sky-grid-cell\"\n            *ngFor=\"let column of displayedColumns; let last = last; let i = index\">\n            <sky-grid-cell\n              [template]=\"column.template || defaultCellTemplate\"\n              [fieldSelector]=\"column.field\"\n              [item]=\"item\"\n              [columnId]=\"column.id\"\n              [attr.sky-cmp-id]=\"column.id || column.field\"\n              [style.width.px]=\"last ? null : column.width\">\n            </sky-grid-cell>\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{value}}</ng-template>\n","styles":[".sky-grid {\n  position: relative;\n  display: block;\n}\n\n.sky-grid-table-container {\n  overflow: auto;\n}\n\n.sky-grid-table {\n  position: relative;\n  table-layout: fixed;\n  border-collapse: collapse;\n  margin: 0;\n  font-size: 15px;\n  min-width: 100%;\n}\n\n.sky-grid-table.sky-grid-fit {\n  width: 100%;\n}\n\n.sky-grid-tbody {\n  background-color: #ffffff;\n}\n\n.sky-grid-row {\n  border-bottom: 1px dotted #cdcfd2;\n}\n\n.sky-grid-row:nth-child(odd) {\n  background-color: #fbfbfb;\n}\n\n.sky-grid-row .sky-grid-cell {\n  padding: 0;\n}\n\n.sky-grid-heading {\n  border-top: 1px solid #cdcfd2;\n  border-bottom: 1px solid #cdcfd2;\n  border-left: 1px solid #cdcfd2;\n  border-right: 1px solid #cdcfd2;\n  font-family: \"Blackbaud Sans\", \"Helvetica Neue\", Arial, sans-serif;\n  color: #686c73;\n  font-weight: 400;\n  font-size: 15px;\n  border-right-width: 0px;\n  cursor: pointer;\n  background-color: #ffffff;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 8px;\n  text-align: left;\n  -webkit-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.sky-grid-heading:first-child {\n  border-left: 1px solid transparent;\n}\n\n.sky-grid-heading.sky-grid-header-dragging {\n  padding: 8px;\n  background-color: #eeeeef;\n}\n\n.sky-grid-has-toolbar .sky-grid-heading {\n  border-top-width: 0px;\n}\n\n/*\n  This prevents grid header width from changing when sort indication changes\n*/\n.sky-grid-heading-sort {\n  min-width: 8px;\n}\n"],"viewProviders":[{"__symbolic":"reference","module":"ng2-dragula/ng2-dragula","name":"DragulaService"}],"providers":[{"__symbolic":"reference","module":"./grid-adapter.service","name":"SkyGridAdapterService"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"selectedColumnIds":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fit":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"height":[{"__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"}}]}],"columns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hasToolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"sortField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selectedColumnIdsChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"sortFieldChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"columnComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./grid-column.component","name":"SkyGridColumnComponent"},{"descendants":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"ng2-dragula/ng2-dragula","name":"DragulaService"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef"},{"__symbolic":"reference","module":"./grid-adapter.service","name":"SkyGridAdapterService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"sortByColumn":[{"__symbolic":"method"}],"getSortDirection":[{"__symbolic":"method"}],"updateColumnHeading":[{"__symbolic":"method"}],"onHeaderDrop":[{"__symbolic":"method"}],"setDisplayedColumns":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"setSortHeaders":[{"__symbolic":"method"}],"getColumnsFromComponent":[{"__symbolic":"method"}],"updateColumns":[{"__symbolic":"method"}]}}}}]