[{"__symbolic":"module","version":3,"metadata":{"SkyContribListViewGridComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../list/list-view.component","name":"ListViewComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-contrib-list-view-grid","template":"<div *ngIf=\"(active | async)\" [style.height.px]=\"height | async\" [style.width.px]=\"width | async\">\n  <table *ngIf=\"!(loading | async)\" [ngClass]=\"{ 'no-top-border': hasToolbar | async, fit: fit !== 'scroll' }\">\n    <thead>\n      <tr dragula=\"heading\">\n        <th\n          *ngIf=\"(selectionEnabled | async)\"\n          class=\"heading locked\"\n          [style.width.px]=\"100\"\n          [attr.cmp-id]=\"'select-header'\"\n        >\n          <sky-checkbox\n            [checked]=\"isAllDisplayedSelected() | async\"\n            (change)=\"toggleSelectAllDisplayed($event)\"\n          ></sky-checkbox>\n        </th>\n        <th\n          class=\"heading\"\n          *ngFor=\"let column of (columns | async); let last = last\"\n          (click)=\"sortByColumn(column)\"\n          [attr.cmp-id]=\"column.id || column.field\"\n          [ngClass]=\"{ locked: column.locked }\"\n          [ngStyle]=\"{\n            'width.px': column.width,\n            'min-width.px': column.minWidth || columnMinWidth\n          }\"\n        >\n          <sky-contrib-list-view-grid-renderer\n            [template]=\"column.headingTemplate || defaultHeadingTemplate\"\n            [item]=\"column\"\n          ></sky-contrib-list-view-grid-renderer>\n          <i\n            class=\"fa\"\n            [hidden]=\"!(getSortDirection(column.field) | async)\"\n            [ngClass]=\"{\n              'fa-caret-up': (getSortDirection(column.field) | async) === 'asc',\n              'fa-caret-down': (getSortDirection(column.field) | async) === 'desc'\n            }\"\n          ></i>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        class=\"sky-contrib-list-view-grid-row\"\n        *ngFor=\"let item of (items | async); trackBy: trackItemsByIdOrIndex\"\n        [attr.cmp-id]=\"item.id\"\n      >\n        <sky-contrib-list-view-grid-cell\n          *ngIf=\"(selectionEnabled | async)\"\n          [template]=\"selectTemplate\"\n          [item]=\"item\"\n          [isSelected]=\"isSelected(item.id) | async\"\n          [attr.cmp-id]=\"'select-' + item.id\"\n          columnId=\"select-column\"\n          [style.width.px]=\"100\"\n        ></sky-contrib-list-view-grid-cell>\n        <td\n          *ngFor=\"let column of (columns | async); trackBy: trackColumnsByIdOrIndex; let last = last; let i = index\"\n          [ngStyle]=\"{\n            'width.px': column.width,\n            'min-width.px': column.minWidth || columnMinWidth\n          }\"\n        >\n          <sky-contrib-list-view-grid-cell\n            [template]=\"column.template || defaultCellTemplate\"\n            [fieldSelector]=\"column.field\"\n            [item]=\"item\"\n            [columnId]=\"column.id\"\n            [attr.cmp-id]=\"column.id || column.field\"\n          ></sky-contrib-list-view-grid-cell>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n  <div class=\"loading\" *ngIf=\"(loading | async)\"><sky-wait [isWaiting]=\"true\"></sky-wait></div>\n</div>\n\n<!-- ==== Reusable templates ==== -->\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{ value }}</ng-template>\n\n<ng-template #selectTemplate let-item=\"item\" let-selected=\"isSelected\"\n  ><sky-checkbox\n    id=\"{{ item.id }}\"\n    class=\"select-checkbox\"\n    [checked]=\"selected\"\n    (change)=\"toggleSelected($event, item)\"\n  ></sky-checkbox\n></ng-template>\n\n<ng-template #chooseColumnsTemplate>\n  <button (click)=\"openColumnSelector()\" title=\"{{ localizations.gridColumnButtonMouseOver }}\">\n    <span class=\"fa fa-lg fa-columns\"></span> {{ localizations.gridColumnButtonLabel }}\n  </button>\n</ng-template>\n\n<ng-template #defaultHeadingTemplate let-heading=\"item.heading\"> {{ heading }} </ng-template>\n","styles":[":host{position:relative;display:block}:host .loading{height:200px;position:relative}:host>div{overflow:auto}:host>div>sky-wait{padding:50px 0;position:relative}:host table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}:host table.fit{width:100%}:host table.no-top-border th{border-top-width:0px}:host tbody{background-color:#fff}:host tr.sky-contrib-list-view-grid-row{border-bottom:1px dotted #ccc}:host tr.sky-contrib-list-view-grid-row:nth-child(odd){background-color:#FBFBFB}:host tr.sky-contrib-list-view-grid-row td{padding:0}:host th{border:1px solid #e2e3e4;border-right-width:0px;font-weight:400;color:#686c73;font-size:15px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;text-align:left;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-moz-user-select:none;-ms-user-select:none;user-select:none}:host th:first-child{border-left:1px solid transparent}:host th.dragging{padding:8px;background-color:#e2e3e4;color:#000}\n"],"providers":[{"provide":{"__symbolic":"reference","module":"../list/list-view.component","name":"ListViewComponent"},"useExisting":{"__symbolic":"reference","name":"SkyContribListViewGridComponent"}},{"__symbolic":"reference","module":"./state","name":"GridState"},{"__symbolic":"reference","module":"./state","name":"GridStateDispatcher"},{"__symbolic":"reference","module":"./state","name":"GridStateModel"}],"viewProviders":[{"__symbolic":"reference","module":"ng2-dragula/ng2-dragula","name":"DragulaService"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"searchFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["search"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hiddenColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"columnMinWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"columnMaxWidth":[{"__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"}}]}],"selectionEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"chooseColumnsTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["chooseColumnsTemplate"]}]}],"columnComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-view-grid-column.component","name":"SkyContribListViewGridColumnComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../locale/locale.service","name":"SkyContribLocaleService"},{"__symbolic":"reference","module":"../list/state","name":"ListState"},{"__symbolic":"reference","module":"../list/state","name":"ListStateDispatcher"},{"__symbolic":"reference","module":"./state","name":"GridState"},{"__symbolic":"reference","module":"./state","name":"GridStateDispatcher"},{"__symbolic":"reference","module":"@blackbaud/skyux/dist/core","name":"SkyModalService"},{"__symbolic":"reference","module":"ng2-dragula/ng2-dragula","name":"DragulaService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onViewActive":[{"__symbolic":"method"}],"getSortDirection":[{"__symbolic":"method"}],"sortByColumn":[{"__symbolic":"method"}],"openColumnSelector":[{"__symbolic":"method"}],"toggleSelectAllDisplayed":[{"__symbolic":"method"}],"toggleSelected":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"isAllDisplayedSelected":[{"__symbolic":"method"}],"trackItemsByIdOrIndex":[{"__symbolic":"method"}],"trackColumnsByIdOrIndex":[{"__symbolic":"method"}],"removeColumn":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"SkyContribListViewGridComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../list/list-view.component","name":"ListViewComponent"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"sky-contrib-list-view-grid","template":"<div *ngIf=\"(active | async)\" [style.height.px]=\"height | async\" [style.width.px]=\"width | async\">\n  <table *ngIf=\"!(loading | async)\" [ngClass]=\"{ 'no-top-border': hasToolbar | async, fit: fit !== 'scroll' }\">\n    <thead>\n      <tr dragula=\"heading\">\n        <th\n          *ngIf=\"(selectionEnabled | async)\"\n          class=\"heading locked\"\n          [style.width.px]=\"100\"\n          [attr.cmp-id]=\"'select-header'\"\n        >\n          <sky-checkbox\n            [checked]=\"isAllDisplayedSelected() | async\"\n            (change)=\"toggleSelectAllDisplayed($event)\"\n          ></sky-checkbox>\n        </th>\n        <th\n          class=\"heading\"\n          *ngFor=\"let column of (columns | async); let last = last\"\n          (click)=\"sortByColumn(column)\"\n          [attr.cmp-id]=\"column.id || column.field\"\n          [ngClass]=\"{ locked: column.locked }\"\n          [ngStyle]=\"{\n            'width.px': column.width,\n            'min-width.px': column.minWidth || columnMinWidth\n          }\"\n        >\n          <sky-contrib-list-view-grid-renderer\n            [template]=\"column.headingTemplate || defaultHeadingTemplate\"\n            [item]=\"column\"\n          ></sky-contrib-list-view-grid-renderer>\n          <i\n            class=\"fa\"\n            [hidden]=\"!(getSortDirection(column.field) | async)\"\n            [ngClass]=\"{\n              'fa-caret-up': (getSortDirection(column.field) | async) === 'asc',\n              'fa-caret-down': (getSortDirection(column.field) | async) === 'desc'\n            }\"\n          ></i>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        class=\"sky-contrib-list-view-grid-row\"\n        *ngFor=\"let item of (items | async); trackBy: trackItemsByIdOrIndex\"\n        [attr.cmp-id]=\"item.id\"\n      >\n        <sky-contrib-list-view-grid-cell\n          *ngIf=\"(selectionEnabled | async)\"\n          [template]=\"selectTemplate\"\n          [item]=\"item\"\n          [isSelected]=\"isSelected(item.id) | async\"\n          [attr.cmp-id]=\"'select-' + item.id\"\n          columnId=\"select-column\"\n          [style.width.px]=\"100\"\n        ></sky-contrib-list-view-grid-cell>\n        <td\n          *ngFor=\"let column of (columns | async); trackBy: trackColumnsByIdOrIndex; let last = last; let i = index\"\n          [ngStyle]=\"{\n            'width.px': column.width,\n            'min-width.px': column.minWidth || columnMinWidth\n          }\"\n        >\n          <sky-contrib-list-view-grid-cell\n            [template]=\"column.template || defaultCellTemplate\"\n            [fieldSelector]=\"column.field\"\n            [item]=\"item\"\n            [columnId]=\"column.id\"\n            [attr.cmp-id]=\"column.id || column.field\"\n          ></sky-contrib-list-view-grid-cell>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n  <div class=\"loading\" *ngIf=\"(loading | async)\"><sky-wait [isWaiting]=\"true\"></sky-wait></div>\n</div>\n\n<!-- ==== Reusable templates ==== -->\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{ value }}</ng-template>\n\n<ng-template #selectTemplate let-item=\"item\" let-selected=\"isSelected\"\n  ><sky-checkbox\n    id=\"{{ item.id }}\"\n    class=\"select-checkbox\"\n    [checked]=\"selected\"\n    (change)=\"toggleSelected($event, item)\"\n  ></sky-checkbox\n></ng-template>\n\n<ng-template #chooseColumnsTemplate>\n  <button (click)=\"openColumnSelector()\" title=\"{{ localizations.gridColumnButtonMouseOver }}\">\n    <span class=\"fa fa-lg fa-columns\"></span> {{ localizations.gridColumnButtonLabel }}\n  </button>\n</ng-template>\n\n<ng-template #defaultHeadingTemplate let-heading=\"item.heading\"> {{ heading }} </ng-template>\n","styles":[":host{position:relative;display:block}:host .loading{height:200px;position:relative}:host>div{overflow:auto}:host>div>sky-wait{padding:50px 0;position:relative}:host table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}:host table.fit{width:100%}:host table.no-top-border th{border-top-width:0px}:host tbody{background-color:#fff}:host tr.sky-contrib-list-view-grid-row{border-bottom:1px dotted #ccc}:host tr.sky-contrib-list-view-grid-row:nth-child(odd){background-color:#FBFBFB}:host tr.sky-contrib-list-view-grid-row td{padding:0}:host th{border:1px solid #e2e3e4;border-right-width:0px;font-weight:400;color:#686c73;font-size:15px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px;text-align:left;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-moz-user-select:none;-ms-user-select:none;user-select:none}:host th:first-child{border-left:1px solid transparent}:host th.dragging{padding:8px;background-color:#e2e3e4;color:#000}\n"],"providers":[{"provide":{"__symbolic":"reference","module":"../list/list-view.component","name":"ListViewComponent"},"useExisting":{"__symbolic":"reference","name":"SkyContribListViewGridComponent"}},{"__symbolic":"reference","module":"./state","name":"GridState"},{"__symbolic":"reference","module":"./state","name":"GridStateDispatcher"},{"__symbolic":"reference","module":"./state","name":"GridStateModel"}],"viewProviders":[{"__symbolic":"reference","module":"ng2-dragula/ng2-dragula","name":"DragulaService"}],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy"},"member":"OnPush"}}]}],"members":{"searchFunction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["search"]}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"hiddenColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"displayedColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"columnMinWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"columnMaxWidth":[{"__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"}}]}],"selectionEnabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"chooseColumnsTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["chooseColumnsTemplate"]}]}],"columnComponents":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren"},"arguments":[{"__symbolic":"reference","module":"./list-view-grid-column.component","name":"SkyContribListViewGridColumnComponent"}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../locale/locale.service","name":"SkyContribLocaleService"},{"__symbolic":"reference","module":"../list/state","name":"ListState"},{"__symbolic":"reference","module":"../list/state","name":"ListStateDispatcher"},{"__symbolic":"reference","module":"./state","name":"GridState"},{"__symbolic":"reference","module":"./state","name":"GridStateDispatcher"},{"__symbolic":"reference","module":"@blackbaud/skyux/dist/core","name":"SkyModalService"},{"__symbolic":"reference","module":"ng2-dragula/ng2-dragula","name":"DragulaService"}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"onViewActive":[{"__symbolic":"method"}],"getSortDirection":[{"__symbolic":"method"}],"sortByColumn":[{"__symbolic":"method"}],"openColumnSelector":[{"__symbolic":"method"}],"toggleSelectAllDisplayed":[{"__symbolic":"method"}],"toggleSelected":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"isAllDisplayedSelected":[{"__symbolic":"method"}],"trackItemsByIdOrIndex":[{"__symbolic":"method"}],"trackColumnsByIdOrIndex":[{"__symbolic":"method"}],"removeColumn":[{"__symbolic":"method"}]}}}}]