@blackbaud/skyux/dist/modules/grid/grid.component.metadata.json

SKY UX built on Angular 2

[{"__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{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row .sky-grid-cell{padding:0}.sky-grid-heading{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;color:#686c73;font-weight:400;font-size:15px;border-right-width:0px;cursor:pointer;background-color:#fff;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}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{padding:8px;background-color:#eeeeef}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort{min-width:8px}\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"}],"sortByColumn":[{"__symbolic":"method"}],"getSortDirection":[{"__symbolic":"method"}],"onHeaderDrop":[{"__symbolic":"method"}],"setDisplayedColumns":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"setSortHeaders":[{"__symbolic":"method"}],"getColumnsFromComponent":[{"__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{position:relative;display:block}.sky-grid-table-container{overflow:auto}.sky-grid-table{position:relative;table-layout:fixed;border-collapse:collapse;margin:0;font-size:15px;min-width:100%}.sky-grid-table.sky-grid-fit{width:100%}.sky-grid-tbody{background-color:#fff}.sky-grid-row{border-bottom:1px dotted #cdcfd2}.sky-grid-row:nth-child(odd){background-color:#fbfbfb}.sky-grid-row .sky-grid-cell{padding:0}.sky-grid-heading{border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;color:#686c73;font-weight:400;font-size:15px;border-right-width:0px;cursor:pointer;background-color:#fff;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}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{padding:8px;background-color:#eeeeef}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort{min-width:8px}\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"}],"sortByColumn":[{"__symbolic":"method"}],"getSortDirection":[{"__symbolic":"method"}],"onHeaderDrop":[{"__symbolic":"method"}],"setDisplayedColumns":[{"__symbolic":"method"}],"transformData":[{"__symbolic":"method"}],"setSortHeaders":[{"__symbolic":"method"}],"getColumnsFromComponent":[{"__symbolic":"method"}]}}}}]