@skyux/grids 5.5.0 → 5.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/bundles/skyux-grids.umd.js +299 -248
  2. package/documentation.json +364 -323
  3. package/esm2015/lib/modules/grid/grid-adapter.service.js +5 -5
  4. package/esm2015/lib/modules/grid/grid-adapter.service.js.map +1 -1
  5. package/esm2015/lib/modules/grid/grid-cell.component.js +2 -2
  6. package/esm2015/lib/modules/grid/grid-cell.component.js.map +1 -1
  7. package/esm2015/lib/modules/grid/grid-column.component.js.map +1 -1
  8. package/esm2015/lib/modules/grid/grid-column.model.js.map +1 -1
  9. package/esm2015/lib/modules/grid/grid.component.js +88 -55
  10. package/esm2015/lib/modules/grid/grid.component.js.map +1 -1
  11. package/esm2015/lib/modules/grid/grid.module.js +6 -6
  12. package/esm2015/lib/modules/grid/grid.module.js.map +1 -1
  13. package/esm2015/lib/modules/shared/skyux-grids-resources.module.js +1 -1
  14. package/esm2015/lib/modules/shared/skyux-grids-resources.module.js.map +1 -1
  15. package/fesm2015/skyux-grids.js +251 -218
  16. package/fesm2015/skyux-grids.js.map +1 -1
  17. package/lib/modules/grid/grid-adapter.service.d.ts +1 -1
  18. package/lib/modules/grid/grid.component.d.ts +4 -1
  19. package/package.json +8 -8
package/esm2015/lib/modules/grid/grid-adapter.service.js CHANGED
@@ -17,11 +17,11 @@ export class SkyGridAdapterService {
17
17
  dragulaService.drag.subscribe(([, source]) => source.classList.add(GRID_HEADER_DRAGGING_CLASS));
18
18
  dragulaService.dragend.subscribe(([, source]) => source.classList.remove(GRID_HEADER_DRAGGING_CLASS));
19
19
  dragulaService.drop.subscribe(([, , container]) => {
20
- let columnIds = [];
21
- let nodes = container.querySelectorAll(`th:not(${GRID_MULTISELECT_SELECTOR}):not(${GRID_ROW_DELETE_SELECTOR})`);
20
+ const columnIds = [];
21
+ const nodes = container.querySelectorAll(`th:not(${GRID_MULTISELECT_SELECTOR}):not(${GRID_ROW_DELETE_SELECTOR})`);
22
22
  for (let i = 0; i < nodes.length; i++) {
23
- let el = nodes[i];
24
- let id = el.getAttribute('sky-cmp-id');
23
+ const el = nodes[i];
24
+ const id = el.getAttribute('sky-cmp-id');
25
25
  columnIds.push(id);
26
26
  }
27
27
  dropCallback(columnIds);
@@ -60,7 +60,7 @@ export class SkyGridAdapterService {
60
60
  }
61
61
  isLeftOfLocked(handle, columns) {
62
62
  let sourceColumn = handle;
63
- for (let column of Array.from(columns)) {
63
+ for (const column of Array.from(columns)) {
64
64
  if (column.contains(handle)) {
65
65
  sourceColumn = column;
66
66
  }
package/esm2015/lib/modules/grid/grid-adapter.service.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/grids/src/lib/modules/grid/grid-adapter.service.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n Injectable,\n Renderer2,\n RendererFactory2,\n ElementRef,\n} from '@angular/core';\n\nimport { DragulaService } from 'ng2-dragula';\n\nconst GRID_HEADER_DRAGGING_CLASS = 'sky-grid-header-dragging';\nconst GRID_HEADER_LOCKED_SELECTOR = '.sky-grid-header-locked';\nconst GRID_HEADER_RESIZE_HANDLE = '.sky-grid-resize-handle';\nconst GRID_ROW_DELETE_SELECTOR = '.sky-grid-row-delete-heading';\nconst GRID_MULTISELECT_SELECTOR = '.sky-grid-multiselect-cell';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyGridAdapterService {\n private renderer: Renderer2;\n\n constructor(private rendererFactory: RendererFactory2) {\n this.renderer = this.rendererFactory.createRenderer(undefined, undefined);\n }\n\n public initializeDragAndDrop(\n dragulaService: DragulaService,\n dropCallback: (newColumnIds: Array<string>) => void\n ) {\n dragulaService.drag.subscribe(([, source]: Array<HTMLElement>) =>\n source.classList.add(GRID_HEADER_DRAGGING_CLASS)\n );\n\n dragulaService.dragend.subscribe(([, source]: Array<HTMLElement>) =>\n source.classList.remove(GRID_HEADER_DRAGGING_CLASS)\n );\n\n dragulaService.drop.subscribe(([, , container]: Array<HTMLElement>) => {\n let columnIds: string[] = [];\n let nodes = container.querySelectorAll(\n `th:not(${GRID_MULTISELECT_SELECTOR}):not(${GRID_ROW_DELETE_SELECTOR})`\n );\n for (let i = 0; i < nodes.length; i++) {\n let el = nodes[i];\n let id = el.getAttribute('sky-cmp-id');\n columnIds.push(id);\n }\n dropCallback(columnIds);\n });\n\n dragulaService.setOptions('sky-grid-heading', {\n moves: (el: HTMLElement, container: HTMLElement, handle: HTMLElement) => {\n const columns: NodeListOf<HTMLElement> =\n container.querySelectorAll('th div');\n const isLeftOfLocked = this.isLeftOfLocked(handle, columns);\n\n return (\n !el.querySelector(GRID_HEADER_LOCKED_SELECTOR) &&\n handle !== undefined &&\n !handle.matches(GRID_HEADER_RESIZE_HANDLE) &&\n !handle.matches(GRID_MULTISELECT_SELECTOR) &&\n !handle.matches(GRID_ROW_DELETE_SELECTOR) &&\n !isLeftOfLocked\n );\n },\n accepts: (\n el: HTMLElement,\n target: HTMLElement,\n source: HTMLElement,\n sibling: HTMLElement\n ) => {\n if (sibling === undefined || !sibling) {\n return true;\n }\n\n const columns: NodeListOf<HTMLElement> =\n source.querySelectorAll('th div');\n const siblingDiv = sibling.querySelector('div');\n const isLeftOfLocked = this.isLeftOfLocked(siblingDiv, columns);\n\n return (\n !sibling.matches(GRID_HEADER_LOCKED_SELECTOR) &&\n !sibling.matches(GRID_HEADER_RESIZE_HANDLE) &&\n !isLeftOfLocked\n );\n },\n });\n }\n\n public getRowHeight(el: ElementRef, index: number): string {\n return (\n el.nativeElement.querySelectorAll('tbody tr')[index].scrollHeight + 'px'\n );\n }\n\n public setStyle(el: ElementRef, style: string, value: string): void {\n if (el) {\n this.renderer.setStyle(el.nativeElement, style, value);\n }\n }\n\n private isLeftOfLocked(\n handle: HTMLElement,\n columns: NodeListOf<HTMLElement>\n ): boolean {\n let sourceColumn = handle;\n for (let column of Array.from(columns)) {\n if (column.contains(handle)) {\n sourceColumn = column;\n }\n }\n\n for (let i = columns.length - 1; i >= 0; i--) {\n if (columns[i].classList.contains('sky-grid-header-locked')) {\n return true;\n }\n\n if (columns[i] === sourceColumn) {\n break;\n }\n }\n\n return false;\n }\n}\n"]}
1
+ {"version":3,"file":"grid-adapter.service.js","sourceRoot":"","sources":["../../../../../../../../libs/components/grids/src/lib/modules/grid/grid-adapter.service.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ElementRef,\n Injectable,\n Renderer2,\n RendererFactory2,\n} from '@angular/core';\n\nimport { DragulaService } from 'ng2-dragula';\n\nconst GRID_HEADER_DRAGGING_CLASS = 'sky-grid-header-dragging';\nconst GRID_HEADER_LOCKED_SELECTOR = '.sky-grid-header-locked';\nconst GRID_HEADER_RESIZE_HANDLE = '.sky-grid-resize-handle';\nconst GRID_ROW_DELETE_SELECTOR = '.sky-grid-row-delete-heading';\nconst GRID_MULTISELECT_SELECTOR = '.sky-grid-multiselect-cell';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyGridAdapterService {\n private renderer: Renderer2;\n\n constructor(private rendererFactory: RendererFactory2) {\n this.renderer = this.rendererFactory.createRenderer(undefined, undefined);\n }\n\n public initializeDragAndDrop(\n dragulaService: DragulaService,\n dropCallback: (newColumnIds: Array<string>) => void\n ) {\n dragulaService.drag.subscribe(([, source]: Array<HTMLElement>) =>\n source.classList.add(GRID_HEADER_DRAGGING_CLASS)\n );\n\n dragulaService.dragend.subscribe(([, source]: Array<HTMLElement>) =>\n source.classList.remove(GRID_HEADER_DRAGGING_CLASS)\n );\n\n dragulaService.drop.subscribe(([, , container]: Array<HTMLElement>) => {\n const columnIds: string[] = [];\n const nodes = container.querySelectorAll(\n `th:not(${GRID_MULTISELECT_SELECTOR}):not(${GRID_ROW_DELETE_SELECTOR})`\n );\n for (let i = 0; i < nodes.length; i++) {\n const el = nodes[i];\n const id = el.getAttribute('sky-cmp-id');\n columnIds.push(id);\n }\n dropCallback(columnIds);\n });\n\n dragulaService.setOptions('sky-grid-heading', {\n moves: (el: HTMLElement, container: HTMLElement, handle: HTMLElement) => {\n const columns: NodeListOf<HTMLElement> =\n container.querySelectorAll('th div');\n const isLeftOfLocked = this.isLeftOfLocked(handle, columns);\n\n return (\n !el.querySelector(GRID_HEADER_LOCKED_SELECTOR) &&\n handle !== undefined &&\n !handle.matches(GRID_HEADER_RESIZE_HANDLE) &&\n !handle.matches(GRID_MULTISELECT_SELECTOR) &&\n !handle.matches(GRID_ROW_DELETE_SELECTOR) &&\n !isLeftOfLocked\n );\n },\n accepts: (\n el: HTMLElement,\n target: HTMLElement,\n source: HTMLElement,\n sibling: HTMLElement\n ) => {\n if (sibling === undefined || !sibling) {\n return true;\n }\n\n const columns: NodeListOf<HTMLElement> =\n source.querySelectorAll('th div');\n const siblingDiv = sibling.querySelector('div');\n const isLeftOfLocked = this.isLeftOfLocked(siblingDiv, columns);\n\n return (\n !sibling.matches(GRID_HEADER_LOCKED_SELECTOR) &&\n !sibling.matches(GRID_HEADER_RESIZE_HANDLE) &&\n !isLeftOfLocked\n );\n },\n });\n }\n\n public getRowHeight(el: ElementRef, index: number): string {\n return (\n el.nativeElement.querySelectorAll('tbody tr')[index].scrollHeight + 'px'\n );\n }\n\n public setStyle(el: ElementRef, style: string, value: string): void {\n if (el) {\n this.renderer.setStyle(el.nativeElement, style, value);\n }\n }\n\n private isLeftOfLocked(\n handle: HTMLElement,\n columns: NodeListOf<HTMLElement>\n ): boolean {\n let sourceColumn = handle;\n for (const column of Array.from(columns)) {\n if (column.contains(handle)) {\n sourceColumn = column;\n }\n }\n\n for (let i = columns.length - 1; i >= 0; i--) {\n if (columns[i].classList.contains('sky-grid-header-locked')) {\n return true;\n }\n\n if (columns[i] === sourceColumn) {\n break;\n }\n }\n\n return false;\n }\n}\n"]}
package/esm2015/lib/modules/grid/grid-cell.component.js CHANGED
@@ -1,5 +1,5 @@
1
- import { Component, Input, ViewChild, ViewContainerRef, TemplateRef, ChangeDetectionStrategy, } from '@angular/core';
2
- import { getData, ListItemModel } from '@skyux/list-builder-common';
1
+ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild, ViewContainerRef, } from '@angular/core';
2
+ import { ListItemModel, getData } from '@skyux/list-builder-common';
3
3
  import * as i0 from "@angular/core";
4
4
  /**
5
5
  * @internal
package/esm2015/lib/modules/grid/grid-cell.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid-cell.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/grids/src/lib/modules/grid/grid-cell.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,EACL,SAAS,EACT,gBAAgB,EAChB,WAAW,EAEX,uBAAuB,GACxB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;;AAEpE;;GAEG;AAOH,MAAM,OAAO,oBAAoB;IAmBxB,QAAQ;QACb,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACxB,CAAC;IAED,IAAI,KAAK;QACP,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC3D,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;SACrE;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;;kHAjCU,oBAAoB;sGAApB,oBAAoB,yOAcvB,gBAAgB,2CAlBd,mCAAmC;4FAIlC,oBAAoB;kBANhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,eAAe;oBACzB,QAAQ,EAAE,mCAAmC;oBAC7C,SAAS,EAAE,CAAC,4BAA4B,CAAC;oBACzC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;8BAGQ,IAAI;sBADV,KAAK;gBAIC,QAAQ;sBADd,KAAK;gBAIE,QAAQ;sBADf,KAAK;gBAIE,aAAa;sBADpB,KAAK;gBAOE,SAAS;sBAJhB,SAAS;uBAAC,MAAM,EAAE;wBACjB,IAAI,EAAE,gBAAgB;wBACtB,MAAM,EAAE,IAAI;qBACb","sourcesContent":["import {\n Component,\n Input,\n ViewChild,\n ViewContainerRef,\n TemplateRef,\n OnInit,\n ChangeDetectionStrategy,\n} from '@angular/core';\n\nimport { getData, ListItemModel } from '@skyux/list-builder-common';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-grid-cell',\n template: '<ng-template #cell></ng-template>',\n styleUrls: ['./grid-cell.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyGridCellComponent implements OnInit {\n @Input()\n public item: ListItemModel;\n\n @Input()\n public columnId: string;\n\n @Input()\n private template: TemplateRef<any>;\n\n @Input()\n private fieldSelector: string;\n\n @ViewChild('cell', {\n read: ViewContainerRef,\n static: true,\n })\n private container: ViewContainerRef;\n\n public ngOnInit() {\n this.container.createEmbeddedView(this.template, this);\n }\n\n get row() {\n return this.item.data;\n }\n\n get value() {\n if (this.item.data && (this.fieldSelector || this.columnId)) {\n return getData(this.item.data, this.fieldSelector || this.columnId);\n }\n\n return undefined;\n }\n}\n"]}
1
+ {"version":3,"file":"grid-cell.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/grids/src/lib/modules/grid/grid-cell.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EAEL,WAAW,EACX,SAAS,EACT,gBAAgB,GACjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;;AAEpE;;GAEG;AAOH,MAAM,OAAO,oBAAoB;IAmBxB,QAAQ;QACb,IAAI,CAAC,SAAS,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;IACxB,CAAC;IAED,IAAI,KAAK;QACP,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC,EAAE;YAC3D,OAAO,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;SACrE;QAED,OAAO,SAAS,CAAC;IACnB,CAAC;;kHAjCU,oBAAoB;sGAApB,oBAAoB,yOAcvB,gBAAgB,2CAlBd,mCAAmC;4FAIlC,oBAAoB;kBANhC,SAAS;mBAAC;oBACT,QAAQ,EAAE,eAAe;oBACzB,QAAQ,EAAE,mCAAmC;oBAC7C,SAAS,EAAE,CAAC,4BAA4B,CAAC;oBACzC,eAAe,EAAE,uBAAuB,CAAC,MAAM;iBAChD;8BAGQ,IAAI;sBADV,KAAK;gBAIC,QAAQ;sBADd,KAAK;gBAIE,QAAQ;sBADf,KAAK;gBAIE,aAAa;sBADpB,KAAK;gBAOE,SAAS;sBAJhB,SAAS;uBAAC,MAAM,EAAE;wBACjB,IAAI,EAAE,gBAAgB;wBACtB,MAAM,EAAE,IAAI;qBACb","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n Input,\n OnInit,\n TemplateRef,\n ViewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { ListItemModel, getData } from '@skyux/list-builder-common';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-grid-cell',\n template: '<ng-template #cell></ng-template>',\n styleUrls: ['./grid-cell.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyGridCellComponent implements OnInit {\n @Input()\n public item: ListItemModel;\n\n @Input()\n public columnId: string;\n\n @Input()\n private template: TemplateRef<any>;\n\n @Input()\n private fieldSelector: string;\n\n @ViewChild('cell', {\n read: ViewContainerRef,\n static: true,\n })\n private container: ViewContainerRef;\n\n public ngOnInit() {\n this.container.createEmbeddedView(this.template, this);\n }\n\n get row() {\n return this.item.data;\n }\n\n get value() {\n if (this.item.data && (this.fieldSelector || this.columnId)) {\n return getData(this.item.data, this.fieldSelector || this.columnId);\n }\n\n return undefined;\n }\n}\n"]}
package/esm2015/lib/modules/grid/grid-column.component.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid-column.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/grids/src/lib/modules/grid/grid-column.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n OnChanges,\n QueryList,\n SimpleChanges,\n TemplateRef,\n} from '@angular/core';\n\nimport { SkyGridColumnAlignment } from './types/grid-column-alignment';\n\nimport { SkyGridColumnDescriptionModelChange } from './types/grid-column-description-model-change';\n\nimport { SkyGridColumnHeadingModelChange } from './types/grid-column-heading-model-change';\n\nimport { SkyGridColumnInlineHelpPopoverModelChange } from './types/grid-column-inline-help-popover-model-change';\n\n/**\n * Specifies the column information.\n */\n@Component({\n selector: 'sky-grid-column',\n template: '<ng-content></ng-content>',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyGridColumnComponent implements OnChanges {\n /**\n * Specifies the horizontal alignment of the column's data and header.\n * Options include: `\"left\"`, `\"center\"`, and `\"right\"`.\n * @default \"left\"\n */\n @Input()\n public alignment: SkyGridColumnAlignment = 'left';\n\n /**\n * Specifies a description for the column.\n */\n @Input()\n public description: string;\n\n /**\n * Indicates whether to disable the highlighting of search text in the column.\n * @default false\n */\n @Input()\n public excludeFromHighlighting: boolean;\n\n /**\n * Specifies the property to retrieve cell information from an entry on the grid `data` array.\n * You must provide either the `id` or `field` property for every column,\n * but do not provide both. If `id` does not exist on a column, then `field` is the entry\n * for the grid `selectedColumnIds` array.\n */\n @Input()\n public field: string;\n\n /**\n * Specifies text to display in the column header.\n */\n @Input()\n public heading: string;\n\n /**\n * Indicates whether the column is initially hidden when grid `selectedColumnIds` are not provided.\n * @default false\n */\n @Input()\n public hidden: boolean;\n\n /**\n * Specifies a unique ID for the column. You must provide either the `id` or `field` property\n * for every column, but do not provide both. If `field` does not exist on a column,\n * then the `id` property retrieves cell information from an entry on the grid `data` array.\n */\n @Input()\n public id: string;\n\n /**\n * Specifies a template to display inside an inline help popup for this column.\n */\n @Input()\n public inlineHelpPopover: any;\n\n /**\n * Indicates whether the column sorts the grid when users click the column header.\n * @default true\n */\n @Input()\n public isSortable: boolean = true;\n\n /**\n * Indicates whether the column is locked. The intent is to display locked columns first\n * on the left side of the grid. If set to `true`, then users cannot drag the column\n * to another position and or drag other columns before the locked column.\n * @default false\n */\n @Input()\n public locked: boolean;\n\n /**\n * Specifies a search function to apply for the specific column. By default,\n * the column executes a string compare on the column data.\n * @default (value, searchText) => value.toString().toLowerCase().indexOf(searchText) !== -1\n */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('search')\n public searchFunction: (value: any, searchText: string) => boolean =\n this.search;\n\n /**\n * @internal\n */\n @Input()\n public type: string;\n\n /**\n * Specifies a template for a column. This can be assigned as a reference\n * to the `template` attribute, or it can be assigned as a child of the `template` element\n * inside the `sky-grid-column` component. The template has access to the `value` variable,\n * which contains the value passed to the column, and the `row` variable, which contains\n * the entire row data.\n */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('template')\n public templateInput: TemplateRef<any>;\n\n /**\n * Specifies the width of the column in pixels.\n * If undefined, the column width is evenly distributed.\n */\n @Input()\n public width: number;\n\n public descriptionChanges: EventEmitter<string> = new EventEmitter<string>();\n\n public descriptionModelChanges =\n new EventEmitter<SkyGridColumnDescriptionModelChange>();\n\n public headingChanges: EventEmitter<string> = new EventEmitter<string>();\n\n public headingModelChanges =\n new EventEmitter<SkyGridColumnHeadingModelChange>();\n\n public inlineHelpPopoverModelChanges =\n new EventEmitter<SkyGridColumnInlineHelpPopoverModelChange>();\n\n @ContentChildren(TemplateRef)\n private templates: QueryList<TemplateRef<any>>;\n\n public ngOnChanges(changes: SimpleChanges): void {\n if (changes.heading && changes.heading.firstChange === false) {\n this.headingChanges.emit(this.heading);\n this.headingModelChanges.emit({\n value: this.heading,\n id: this.id,\n field: this.field,\n });\n }\n if (changes.description && changes.description.firstChange === false) {\n this.descriptionChanges.emit(this.description);\n this.descriptionModelChanges.emit({\n value: this.description,\n id: this.id,\n field: this.field,\n });\n }\n if (\n changes.inlineHelpPopover &&\n changes.inlineHelpPopover.firstChange === false\n ) {\n this.inlineHelpPopoverModelChanges.emit({\n value: this.inlineHelpPopover,\n id: this.id,\n field: this.field,\n });\n }\n }\n\n public get template(): TemplateRef<any> {\n if (this.templates.length > 0) {\n return this.templates.first;\n }\n\n return this.templateInput;\n }\n\n private search(value: any, searchText: string): boolean {\n /* tslint:disable:no-null-keyword */\n if (value !== undefined && value !== null) {\n return value.toString().toLowerCase().indexOf(searchText) !== -1;\n }\n /* tslint:enable */\n\n return false;\n }\n}\n"]}
1
+ {"version":3,"file":"grid-column.component.js","sourceRoot":"","sources":["../../../../../../../../libs/components/grids/src/lib/modules/grid/grid-column.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n OnChanges,\n QueryList,\n SimpleChanges,\n TemplateRef,\n} from '@angular/core';\n\nimport { SkyGridColumnAlignment } from './types/grid-column-alignment';\nimport { SkyGridColumnDescriptionModelChange } from './types/grid-column-description-model-change';\nimport { SkyGridColumnHeadingModelChange } from './types/grid-column-heading-model-change';\nimport { SkyGridColumnInlineHelpPopoverModelChange } from './types/grid-column-inline-help-popover-model-change';\n\n/**\n * Specifies the column information.\n */\n@Component({\n selector: 'sky-grid-column',\n template: '<ng-content></ng-content>',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SkyGridColumnComponent implements OnChanges {\n /**\n * Specifies the horizontal alignment of the column's data and header.\n * Options include: `\"left\"`, `\"center\"`, and `\"right\"`.\n * @default \"left\"\n */\n @Input()\n public alignment: SkyGridColumnAlignment = 'left';\n\n /**\n * Specifies a description for the column.\n */\n @Input()\n public description: string;\n\n /**\n * Indicates whether to disable the highlighting of search text in the column.\n * @default false\n */\n @Input()\n public excludeFromHighlighting: boolean;\n\n /**\n * Specifies the property to retrieve cell information from an entry on the grid `data` array.\n * You must provide either the `id` or `field` property for every column,\n * but do not provide both. If `id` does not exist on a column, then `field` is the entry\n * for the grid `selectedColumnIds` array.\n */\n @Input()\n public field: string;\n\n /**\n * Specifies text to display in the column header.\n */\n @Input()\n public heading: string;\n\n /**\n * Indicates whether the column is initially hidden when grid `selectedColumnIds` are not provided.\n * @default false\n */\n @Input()\n public hidden: boolean;\n\n /**\n * Specifies a unique ID for the column. You must provide either the `id` or `field` property\n * for every column, but do not provide both. If `field` does not exist on a column,\n * then the `id` property retrieves cell information from an entry on the grid `data` array.\n */\n @Input()\n public id: string;\n\n /**\n * Specifies a template to display inside an inline help popup for this column.\n */\n @Input()\n public inlineHelpPopover: any;\n\n /**\n * Indicates whether the column sorts the grid when users click the column header.\n * @default true\n */\n @Input()\n public isSortable = true;\n\n /**\n * Indicates whether the column is locked. The intent is to display locked columns first\n * on the left side of the grid. If set to `true`, then users cannot drag the column\n * to another position and or drag other columns before the locked column.\n * @default false\n */\n @Input()\n public locked: boolean;\n\n /**\n * Specifies a search function to apply for the specific column. By default,\n * the column executes a string compare on the column data.\n * @default (value, searchText) => value.toString().toLowerCase().indexOf(searchText) !== -1\n */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('search')\n public searchFunction: (value: any, searchText: string) => boolean =\n this.search;\n\n /**\n * @internal\n */\n @Input()\n public type: string;\n\n /**\n * Specifies a template for a column. This can be assigned as a reference\n * to the `template` attribute, or it can be assigned as a child of the `template` element\n * inside the `sky-grid-column` component. The template has access to the `value` variable,\n * which contains the value passed to the column, and the `row` variable, which contains\n * the entire row data.\n */\n // eslint-disable-next-line @angular-eslint/no-input-rename\n @Input('template')\n public templateInput: TemplateRef<any>;\n\n /**\n * Specifies the width of the column in pixels.\n * If undefined, the column width is evenly distributed.\n */\n @Input()\n public width: number;\n\n public descriptionChanges: EventEmitter<string> = new EventEmitter<string>();\n\n public descriptionModelChanges =\n new EventEmitter<SkyGridColumnDescriptionModelChange>();\n\n public headingChanges: EventEmitter<string> = new EventEmitter<string>();\n\n public headingModelChanges =\n new EventEmitter<SkyGridColumnHeadingModelChange>();\n\n public inlineHelpPopoverModelChanges =\n new EventEmitter<SkyGridColumnInlineHelpPopoverModelChange>();\n\n @ContentChildren(TemplateRef)\n private templates: QueryList<TemplateRef<any>>;\n\n public ngOnChanges(changes: SimpleChanges): void {\n if (changes.heading && changes.heading.firstChange === false) {\n this.headingChanges.emit(this.heading);\n this.headingModelChanges.emit({\n value: this.heading,\n id: this.id,\n field: this.field,\n });\n }\n if (changes.description && changes.description.firstChange === false) {\n this.descriptionChanges.emit(this.description);\n this.descriptionModelChanges.emit({\n value: this.description,\n id: this.id,\n field: this.field,\n });\n }\n if (\n changes.inlineHelpPopover &&\n changes.inlineHelpPopover.firstChange === false\n ) {\n this.inlineHelpPopoverModelChanges.emit({\n value: this.inlineHelpPopover,\n id: this.id,\n field: this.field,\n });\n }\n }\n\n public get template(): TemplateRef<any> {\n if (this.templates.length > 0) {\n return this.templates.first;\n }\n\n return this.templateInput;\n }\n\n private search(value: any, searchText: string): boolean {\n /* tslint:disable:no-null-keyword */\n if (value !== undefined && value !== null) {\n return value.toString().toLowerCase().indexOf(searchText) !== -1;\n }\n /* tslint:enable */\n\n return false;\n }\n}\n"]}
package/esm2015/lib/modules/grid/grid-column.model.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid-column.model.js","sourceRoot":"","sources":["../../../../../../../../libs/components/grids/src/lib/modules/grid/grid-column.model.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,OAAO,kBAAkB;IAqB7B,YAAY,QAA0B,EAAE,IAAU;QAV3C,eAAU,GAAY,IAAI,CAAC;QAWhC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEzB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAC5B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YACzD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YACpC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YAClC,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC;YAC5D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;SACjC;IACH,CAAC;CACF","sourcesContent":["import { TemplateRef } from '@angular/core';\n\nimport { SkyGridColumnAlignment } from './types/grid-column-alignment';\n\n/**\n * @internal\n */\nexport class SkyGridColumnModel {\n public template: TemplateRef<any>;\n public id: string;\n public field: string;\n public heading: string;\n public inlineHelpPopover: any;\n public type: string;\n public width: number;\n public hidden: boolean;\n public locked: boolean;\n public description: string;\n public isSortable: boolean = true;\n public excludeFromHighlighting: boolean;\n\n /**\n * The horizontal alignment of the column's data and header.\n */\n public alignment: SkyGridColumnAlignment;\n\n public searchFunction: (data: any, searchText: string) => boolean;\n\n constructor(template: TemplateRef<any>, data?: any) {\n this.template = template;\n\n if (data) {\n this.id = data.id || data.field;\n this.type = data.type;\n this.field = data.field;\n this.heading = data.heading;\n this.inlineHelpPopover = data.inlineHelpPopover;\n this.width = data.width ? Number(data.width) : undefined;\n this.hidden = data.hidden;\n this.locked = data.locked;\n this.description = data.description;\n this.searchFunction = data.searchFunction;\n this.isSortable = data.isSortable;\n this.excludeFromHighlighting = data.excludeFromHighlighting;\n this.alignment = data.alignment;\n }\n }\n}\n"]}
1
+ {"version":3,"file":"grid-column.model.js","sourceRoot":"","sources":["../../../../../../../../libs/components/grids/src/lib/modules/grid/grid-column.model.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,OAAO,kBAAkB;IAqB7B,YAAY,QAA0B,EAAE,IAAU;QAV3C,eAAU,GAAG,IAAI,CAAC;QAWvB,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAEzB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,KAAK,CAAC;YAChC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACxB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YAC5B,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YACzD,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAC1B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YACpC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC;YAC1C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;YAClC,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,uBAAuB,CAAC;YAC5D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;SACjC;IACH,CAAC;CACF","sourcesContent":["import { TemplateRef } from '@angular/core';\n\nimport { SkyGridColumnAlignment } from './types/grid-column-alignment';\n\n/**\n * @internal\n */\nexport class SkyGridColumnModel {\n public template: TemplateRef<any>;\n public id: string;\n public field: string;\n public heading: string;\n public inlineHelpPopover: any;\n public type: string;\n public width: number;\n public hidden: boolean;\n public locked: boolean;\n public description: string;\n public isSortable = true;\n public excludeFromHighlighting: boolean;\n\n /**\n * The horizontal alignment of the column's data and header.\n */\n public alignment: SkyGridColumnAlignment;\n\n public searchFunction: (data: any, searchText: string) => boolean;\n\n constructor(template: TemplateRef<any>, data?: any) {\n this.template = template;\n\n if (data) {\n this.id = data.id || data.field;\n this.type = data.type;\n this.field = data.field;\n this.heading = data.heading;\n this.inlineHelpPopover = data.inlineHelpPopover;\n this.width = data.width ? Number(data.width) : undefined;\n this.hidden = data.hidden;\n this.locked = data.locked;\n this.description = data.description;\n this.searchFunction = data.searchFunction;\n this.isSortable = data.isSortable;\n this.excludeFromHighlighting = data.excludeFromHighlighting;\n this.alignment = data.alignment;\n }\n }\n}\n"]}
package/esm2015/lib/modules/grid/grid.component.js CHANGED
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren,
2
2
  import { SkyAffixAutoFitContext, SkyAffixService, SkyAppWindowRef, SkyOverlayService, SkyUIConfigService, } from '@skyux/core';
3
3
  import { ListItemModel, ListSortFieldSelectorModel, } from '@skyux/list-builder-common';
4
4
  import { DragulaService } from 'ng2-dragula';
5
- import { BehaviorSubject, fromEvent, merge, Subject, } from 'rxjs';
5
+ import { BehaviorSubject, Subject, fromEvent, merge, } from 'rxjs';
6
6
  import { distinctUntilChanged, map, take, takeUntil, takeWhile, } from 'rxjs/operators';
7
7
  import { SkyGridAdapterService } from './grid-adapter.service';
8
8
  import { SkyGridColumnComponent } from './grid-column.component';
@@ -104,6 +104,22 @@ export class SkyGridComponent {
104
104
  descending: false,
105
105
  });
106
106
  }
107
+ /**
108
+ * Specifies columns and column properties for the grid.
109
+ */
110
+ set columns(newColumns) {
111
+ const oldColumns = this.columns;
112
+ this._columns = newColumns;
113
+ if (oldColumns) {
114
+ this.transferColumnWidths(oldColumns, this.columns);
115
+ this.isResized = false;
116
+ this.setDisplayedColumns(true);
117
+ }
118
+ this.changeDetector.markForCheck();
119
+ }
120
+ get columns() {
121
+ return this._columns;
122
+ }
107
123
  /**
108
124
  * Specifies the columns to display in the grid based on the `id` or `field` properties
109
125
  * of the columns. If no columns are specified, then the grid displays all columns.
@@ -197,7 +213,7 @@ export class SkyGridComponent {
197
213
  else {
198
214
  // The rows re-render thus messing up the affixers. We must reaffix them so that things
199
215
  // continue to render correctly.
200
- let rowElement = this.tableElementRef.nativeElement.querySelector('[sky-cmp-id="' + id + '"]');
216
+ const rowElement = this.tableElementRef.nativeElement.querySelector('[sky-cmp-id="' + id + '"]');
201
217
  this.rowDeleteContents[id].affixer.affixTo(rowElement, {
202
218
  autoFitContext: SkyAffixAutoFitContext.Viewport,
203
219
  isSticky: true,
@@ -233,7 +249,7 @@ export class SkyGridComponent {
233
249
  return this.tableElementRef.nativeElement.scrollWidth;
234
250
  }
235
251
  getTableClassNames() {
236
- let classNames = [];
252
+ const classNames = [];
237
253
  if (this.fit !== 'scroll') {
238
254
  classNames.push('sky-grid-fit');
239
255
  }
@@ -243,14 +259,14 @@ export class SkyGridComponent {
243
259
  return this.addDelimeter(classNames, ' ');
244
260
  }
245
261
  getTableHeaderClassNames(column) {
246
- let classNames = [];
262
+ const classNames = [];
247
263
  if (column && column.locked) {
248
264
  classNames.push('sky-grid-header-locked');
249
265
  }
250
266
  return this.addDelimeter(classNames, ' ');
251
267
  }
252
268
  getCaretIconNames(column) {
253
- let iconNames = [];
269
+ const iconNames = [];
254
270
  this.getSortDirection(column.field).subscribe((sortDir) => {
255
271
  if (sortDir === 'asc') {
256
272
  iconNames.push('caret-up');
@@ -399,20 +415,20 @@ export class SkyGridComponent {
399
415
  }
400
416
  onInputChangeResizeCol(event) {
401
417
  const input = event.target;
402
- let newValue = Number(input.value);
403
- let deltaX = newValue - this.startColumnWidth;
418
+ const newValue = Number(input.value);
419
+ const deltaX = newValue - this.startColumnWidth;
404
420
  this.resizeColumnByIndex(this.activeResizeColumnIndex, newValue, deltaX);
405
421
  const left = input.getBoundingClientRect().left;
406
422
  this.setResizeBarPosition(left);
407
423
  }
408
424
  onResizeHandleMove(event) {
409
- let deltaX = event.pageX - this.xPosStart;
410
- let newColWidth = this.startColumnWidth + deltaX;
425
+ const deltaX = event.pageX - this.xPosStart;
426
+ const newColWidth = this.startColumnWidth + deltaX;
411
427
  if (newColWidth <= this.minColWidth) {
412
428
  event.stopPropagation();
413
429
  return;
414
430
  }
415
- let max = this.getMaxRangeByIndex(this.activeResizeColumnIndex);
431
+ const max = this.getMaxRangeByIndex(this.activeResizeColumnIndex);
416
432
  if (this.fit === 'width' && newColWidth > max) {
417
433
  event.stopPropagation();
418
434
  return;
@@ -431,8 +447,8 @@ export class SkyGridComponent {
431
447
  }
432
448
  onResizeHandleRelease(event) {
433
449
  this.showResizeBar = false;
434
- let deltaX = event.pageX - this.xPosStart;
435
- let newColWidth = this.startColumnWidth + deltaX;
450
+ const deltaX = event.pageX - this.xPosStart;
451
+ const newColWidth = this.startColumnWidth + deltaX;
436
452
  this.resizeColumnByIndex(this.activeResizeColumnIndex, newColWidth, deltaX);
437
453
  this.isDraggingResizeHandle = false;
438
454
  this.activeResizeColumnIndex = undefined;
@@ -511,9 +527,9 @@ export class SkyGridComponent {
511
527
  const windowSize = this.skyWindow.nativeWindow.innerWidth;
512
528
  this.columnElementRefs.forEach((col) => {
513
529
  if (!this.showTopScroll) {
514
- let computedWidth = parseFloat(window.getComputedStyle(col.nativeElement).width);
515
- let offsetWidth = col.nativeElement.offsetWidth;
516
- let width = Math.max(computedWidth || offsetWidth, this.minColWidth);
530
+ const computedWidth = parseFloat(window.getComputedStyle(col.nativeElement).width);
531
+ const offsetWidth = col.nativeElement.offsetWidth;
532
+ const width = Math.max(computedWidth || offsetWidth, this.minColWidth);
517
533
  columnsWidthTotal = columnsWidthTotal + width;
518
534
  if (columnsWidthTotal > windowSize) {
519
535
  this.showTopScroll = true;
@@ -561,7 +577,7 @@ export class SkyGridComponent {
561
577
  id: message.data.promptDeleteRow.id,
562
578
  pending: false,
563
579
  });
564
- let overlay = this.overlayService.create({
580
+ const overlay = this.overlayService.create({
565
581
  enableScroll: true,
566
582
  showBackdrop: false,
567
583
  closeOnNavigation: true,
@@ -585,8 +601,8 @@ export class SkyGridComponent {
585
601
  return (elRef.nativeElement.id ===
586
602
  'row-delete-ref-' + message.data.promptDeleteRow.id);
587
603
  });
588
- let affixer = this.affixService.createAffixer(inlineDeleteRef);
589
- let rowElement = this.tableElementRef.nativeElement.querySelector('[sky-cmp-id="' + message.data.promptDeleteRow.id + '"]');
604
+ const affixer = this.affixService.createAffixer(inlineDeleteRef);
605
+ const rowElement = this.tableElementRef.nativeElement.querySelector('[sky-cmp-id="' + message.data.promptDeleteRow.id + '"]');
590
606
  affixer.affixTo(rowElement, {
591
607
  autoFitContext: SkyAffixAutoFitContext.Viewport,
592
608
  isSticky: true,
@@ -622,23 +638,27 @@ export class SkyGridComponent {
622
638
  this.changeDetector.markForCheck();
623
639
  }
624
640
  setDisplayedColumns(respectHidden = false) {
625
- if (this.selectedColumnIds !== undefined) {
626
- // setup displayed columns
627
- this.displayedColumns = this.selectedColumnIds
628
- .filter((columnId) => {
629
- return this.columns.find((column) => column.id === columnId);
630
- })
631
- .map((columnId) => {
632
- return this.columns.filter((column) => column.id === columnId)[0];
633
- });
634
- }
635
- else if (respectHidden) {
636
- this.displayedColumns = this.columns.filter((column) => {
637
- return !column.hidden;
638
- });
639
- }
640
- else {
641
- this.displayedColumns = this.columns;
641
+ /* sanity check */
642
+ /* istanbul ignore else */
643
+ if (this.columns) {
644
+ if (this.selectedColumnIds !== undefined) {
645
+ // setup displayed columns
646
+ this.displayedColumns = this.selectedColumnIds
647
+ .filter((columnId) => {
648
+ return this.columns.find((column) => column.id === columnId);
649
+ })
650
+ .map((columnId) => {
651
+ return this.columns.filter((column) => column.id === columnId)[0];
652
+ });
653
+ }
654
+ else if (respectHidden) {
655
+ this.displayedColumns = this.columns.filter((column) => {
656
+ return !column.hidden;
657
+ });
658
+ }
659
+ else {
660
+ this.displayedColumns = this.columns;
661
+ }
642
662
  }
643
663
  }
644
664
  transformData() {
@@ -659,7 +679,7 @@ export class SkyGridComponent {
659
679
  }
660
680
  }
661
681
  getGridDataWithSelectedRows() {
662
- let selectedRows = this.getSelectedRows();
682
+ const selectedRows = this.getSelectedRows();
663
683
  return this.data.map((item) => {
664
684
  let checked;
665
685
  if (item.hasOwnProperty(this.multiselectRowId)) {
@@ -690,15 +710,13 @@ export class SkyGridComponent {
690
710
  }
691
711
  updateColumns() {
692
712
  this.getColumnsFromComponent();
693
- this.setDisplayedColumns(true);
694
- this.changeDetector.markForCheck();
695
713
  // This set timeout is necessary to ensure the columns have rendered in the grid
696
714
  setTimeout(() => {
697
715
  this.checkUserColumnWidthsForScroll();
698
716
  });
699
717
  }
700
718
  resizeColumnByIndex(columnIndex, newColWidth, deltaX) {
701
- let column = this.getColumnModelByIndex(columnIndex);
719
+ const column = this.getColumnModelByIndex(columnIndex);
702
720
  // Prevent accidental shrinkage below minimum width.
703
721
  if (newColWidth <= this.minColWidth) {
704
722
  deltaX = deltaX + this.minColWidth - newColWidth;
@@ -707,9 +725,9 @@ export class SkyGridComponent {
707
725
  // fit=width adds/removes width from the last column
708
726
  // fit=scroll adds/removes width from the table
709
727
  if (this.fit === 'width') {
710
- let lastColumn = this.getLastDisplayedColumn();
728
+ const lastColumn = this.getLastDisplayedColumn();
711
729
  // Prevent accidental growth that would bump last column off screen.
712
- let max = this.getMaxRangeByIndex(columnIndex);
730
+ const max = this.getMaxRangeByIndex(columnIndex);
713
731
  if (newColWidth > max) {
714
732
  newColWidth = max;
715
733
  deltaX = max - this.startColumnWidth;
@@ -731,8 +749,8 @@ export class SkyGridComponent {
731
749
  // Set column widths based on the width initially given by the browser.
732
750
  // computedWidth prevents accidental overflow for browsers with sub-pixel widths.
733
751
  this.columnElementRefs.forEach((col, index) => {
734
- let computedWidth = parseFloat(window.getComputedStyle(col.nativeElement).width);
735
- let offsetWidth = col.nativeElement.offsetWidth;
752
+ const computedWidth = parseFloat(window.getComputedStyle(col.nativeElement).width);
753
+ const offsetWidth = col.nativeElement.offsetWidth;
736
754
  /* istanbul ignore next */
737
755
  this.getColumnModelByIndex(index).width = Math.max(computedWidth || offsetWidth, this.minColWidth);
738
756
  });
@@ -746,8 +764,23 @@ export class SkyGridComponent {
746
764
  }
747
765
  this.changeDetector.detectChanges();
748
766
  }
767
+ transferColumnWidths(oldColumns, newColumns) {
768
+ /* sanity check */
769
+ /* istanbul ignore else */
770
+ if (oldColumns && newColumns) {
771
+ for (const oldColumn of oldColumns) {
772
+ if (oldColumn.width) {
773
+ const matchingColumn = newColumns.find((newColumn) => oldColumn.id === newColumn.id);
774
+ if (matchingColumn && !matchingColumn.width) {
775
+ matchingColumn.width = oldColumn.width;
776
+ }
777
+ }
778
+ }
779
+ }
780
+ this.changeDetector.markForCheck();
781
+ }
749
782
  getColumnWidthModelChange() {
750
- let columnWidthModelChange = new Array();
783
+ const columnWidthModelChange = new Array();
751
784
  this.columns.forEach((column) => {
752
785
  columnWidthModelChange.push({
753
786
  id: column.id,
@@ -758,10 +791,10 @@ export class SkyGridComponent {
758
791
  return columnWidthModelChange;
759
792
  }
760
793
  updateMaxRange() {
761
- let leftoverWidth = this.getLastDisplayedColumn().width - this.minColWidth;
794
+ const leftoverWidth = this.getLastDisplayedColumn().width - this.minColWidth;
762
795
  this.displayedColumns.forEach((column, index) => {
763
- let newMaxRange = column.width + leftoverWidth;
764
- let rangeInput = this.getRangeInputByIndex(index);
796
+ const newMaxRange = column.width + leftoverWidth;
797
+ const rangeInput = this.getRangeInputByIndex(index);
765
798
  rangeInput.nativeElement.max = newMaxRange;
766
799
  rangeInput.nativeElement.setAttribute('aria-valuemax', newMaxRange);
767
800
  });
@@ -769,7 +802,7 @@ export class SkyGridComponent {
769
802
  initializeResizeColumn(event) {
770
803
  const clickTarget = event.target;
771
804
  this.activeResizeColumnIndex = clickTarget.getAttribute('sky-cmp-index');
772
- let column = this.getColumnModelByIndex(this.activeResizeColumnIndex);
805
+ const column = this.getColumnModelByIndex(this.activeResizeColumnIndex);
773
806
  this.startColumnWidth = column.width;
774
807
  }
775
808
  resetTableWidth() {
@@ -787,8 +820,8 @@ export class SkyGridComponent {
787
820
  return this.displayedColumns[Number(index)];
788
821
  }
789
822
  getMaxRangeByIndex(index) {
790
- let columnElementRef = this.columnElementRefs.find((th) => th.nativeElement.getAttribute('sky-cmp-index') === index);
791
- let rangeInput = columnElementRef.nativeElement.querySelector('.sky-grid-column-input-aria-only');
823
+ const columnElementRef = this.columnElementRefs.find((th) => th.nativeElement.getAttribute('sky-cmp-index') === index);
824
+ const rangeInput = columnElementRef.nativeElement.querySelector('.sky-grid-column-input-aria-only');
792
825
  return Number(rangeInput.max);
793
826
  }
794
827
  getLastDisplayedColumn() {
@@ -807,7 +840,7 @@ export class SkyGridComponent {
807
840
  }
808
841
  }
809
842
  emitSelectedRows(source) {
810
- let selectedRows = {
843
+ const selectedRows = {
811
844
  selectedRowIds: this.getSelectedRows(),
812
845
  source: source,
813
846
  };
@@ -826,7 +859,7 @@ export class SkyGridComponent {
826
859
  });
827
860
  }
828
861
  isInteractiveElement(event) {
829
- let interactiveElSelectors = `
862
+ const interactiveElSelectors = `
830
863
  a,
831
864
  button,
832
865
  input,
@@ -842,8 +875,8 @@ export class SkyGridComponent {
842
875
  return event.target.closest(interactiveElSelectors);
843
876
  }
844
877
  setResizeBarPosition(xPosition) {
845
- let parentScroll = this.tableContainerElementRef.nativeElement.scrollLeft;
846
- let resizeBarX = xPosition -
878
+ const parentScroll = this.tableContainerElementRef.nativeElement.scrollLeft;
879
+ const resizeBarX = xPosition -
847
880
  this.tableElementRef.nativeElement.getBoundingClientRect().left -
848
881
  parentScroll;
849
882
  this.gridAdapter.setStyle(this.resizeBar, 'left', resizeBarX + 'px');
@@ -911,7 +944,7 @@ export class SkyGridComponent {
911
944
  }
912
945
  }
913
946
  SkyGridComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyGridComponent, deps: [{ token: i1.SkyAffixService }, { token: i0.ChangeDetectorRef }, { token: i2.DragulaService }, { token: i3.SkyGridAdapterService }, { token: i1.SkyOverlayService }, { token: i1.SkyAppWindowRef }, { token: i1.SkyUIConfigService }], target: i0.ɵɵFactoryTarget.Component });
914
- SkyGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridComponent, selector: "sky-grid", inputs: { columns: "columns", data: "data", enableMultiselect: "enableMultiselect", fit: "fit", hasToolbar: "hasToolbar", height: "height", highlightText: "highlightText", messageStream: "messageStream", multiselectRowId: "multiselectRowId", rowHighlightedId: "rowHighlightedId", selectedColumnIds: "selectedColumnIds", selectedRowIds: "selectedRowIds", settingsKey: "settingsKey", sortField: "sortField", width: "width" }, outputs: { columnWidthChange: "columnWidthChange", multiselectSelectionChange: "multiselectSelectionChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange", sortFieldChange: "sortFieldChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyGridAdapterService], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "tableContainerElementRef", first: true, predicate: ["gridContainer"], descendants: true }, { propertyName: "tableElementRef", first: true, predicate: ["gridTable"], descendants: true }, { propertyName: "topScrollContainerElementRef", first: true, predicate: ["topScrollContainer"], descendants: true }, { propertyName: "resizeBar", first: true, predicate: ["resizeBar"], descendants: true }, { propertyName: "columnElementRefs", predicate: ["gridCol"], descendants: true }, { propertyName: "columnRangeInputElementRefs", predicate: ["colSizeRange"], descendants: true }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-grid\">\n <div\n *ngIf=\"showTopScroll\"\n class=\"sky-grid-top-scroll-container\"\n (scroll)=\"onTopScroll($event)\"\n #topScrollContainer\n >\n <div\n class=\"sky-grid-top-scroll\"\n [style.width.px]=\"getTopScrollWidth()\"\n ></div>\n </div>\n <div\n class=\"sky-grid-table-container\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n (scroll)=\"onGridScroll($event)\"\n #gridContainer\n >\n <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n <thead>\n <tr dragula=\"sky-grid-heading\">\n <th\n *ngIf=\"enableMultiselect\"\n class=\"\n sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\n \"\n scope=\"col\"\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <span class=\"screen-reader-only\">\n {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n </span>\n </th>\n <th\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-heading sky-field-label\"\n scope=\"col\"\n [attr.sky-cmp-index]=\"i\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n [tabIndex]=\"column.isSortable ? 0 : -1\"\n (mouseup)=\"sortByColumn(column)\"\n (keydown)=\"onKeydown($event, column)\"\n (touchmove)=\"onTouchMove($event)\"\n #gridCol\n >\n <div\n class=\"overflow\"\n [ngClass]=\"getTableHeaderClassNames(column)\"\n [style.max-width.px]=\"column.width - 1\"\n [style.width.px]=\"column.width - 1\"\n >\n <span\n *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n class=\"sky-grid-header-caret-hidden-spacing\"\n ></span>\n <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n <span class=\"sky-grid-header-text\">{{\n column.heading?.trim()\n }}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"\n 'sky-grid-heading-sort-' +\n (getCaretVisibility(column.field) | async)\n \"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline\n *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden':\n getHelpInlineClass(column.field) | async\n }\"\n [skyPopover]=\"column.inlineHelpPopover\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n >\n </sky-help-inline>\n </div>\n <span\n *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-handle\"\n tabindex=\"-1\"\n [attr.sky-cmp-index]=\"i\"\n (mousedown)=\"onResizeColumnStart($event)\"\n (touchstart)=\"onResizeColumnStart($event)\"\n >\n </span>\n <input\n aria-label=\"Width of column\"\n class=\"sky-grid-column-input-aria-only\"\n role=\"slider\"\n type=\"range\"\n [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n [attr.aria-valuemin]=\"minColWidth\"\n [attr.aria-valuemax]=\"maxColWidth\"\n [attr.aria-valuenow]=\"column.width\"\n [attr.sky-cmp-index]=\"i\"\n [min]=\"minColWidth\"\n [max]=\"maxColWidth\"\n [step]=\"columnResizeStep\"\n [(ngModel)]=\"column.width\"\n (blur)=\"onResizeHandleBlur($event)\"\n (focus)=\"onResizeHandleFocus($event)\"\n (keydown)=\"onKeydownResizeCol($event)\"\n (change)=\"onInputChangeResizeCol($event)\"\n #colSizeRange\n />\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; let i = index\"\n [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n [attr.aria-selected]=\"item.isSelected\"\n [attr.sky-cmp-id]=\"item.id\"\n [ngClass]=\"{\n 'sky-grid-multiselect-selected-row': item.isSelected,\n 'sky-grid-multiselect-row': enableMultiselect,\n 'sky-grid-row-highlight': isRowHighlighted(item.id)\n }\"\n (click)=\"onRowClick($event, item)\"\n >\n <td\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n >\n <div\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <sky-checkbox\n [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n (change)=\"onMultiselectCheckboxChange()\"\n [(ngModel)]=\"item.isSelected\"\n >\n </sky-checkbox>\n </div>\n </td>\n <td\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-cell\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n >\n <sky-grid-cell\n [skyHighlight]=\"\n !column.excludeFromHighlighting ? highlightText : undefined\n \"\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 >\n </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div\n *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n id=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n ></div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n <div\n [id]=\"'row-delete-ref-' + item.id\"\n [ngStyle]=\"{\n height: getRowHeight(0),\n position: 'fixed',\n width: tableWidth + 'px'\n }\"\n #inlineDeleteRef\n >\n <sky-inline-delete\n [pending]=\"getRowDeleteItem(item.id).pending\"\n (cancelTriggered)=\"cancelRowDelete(item.id)\"\n (deleteTriggered)=\"confirmRowDelete(item.id)\"\n ></sky-inline-delete>\n </div>\n</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{max-width:100%;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-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i4.λ3, selector: "sky-help-inline", outputs: ["actionClick"] }, { type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.SkyGridCellComponent, selector: "sky-grid-cell", inputs: ["item", "columnId", "template", "fieldSelector"] }, { type: i7.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i10.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "skyLibResources": i11.SkyLibResourcesPipe, "async": i8.AsyncPipe }, viewProviders: [DragulaService], changeDetection: i0.ChangeDetectionStrategy.OnPush });
947
+ SkyGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SkyGridComponent, selector: "sky-grid", inputs: { columns: "columns", data: "data", enableMultiselect: "enableMultiselect", fit: "fit", hasToolbar: "hasToolbar", height: "height", highlightText: "highlightText", messageStream: "messageStream", multiselectRowId: "multiselectRowId", rowHighlightedId: "rowHighlightedId", selectedColumnIds: "selectedColumnIds", selectedRowIds: "selectedRowIds", settingsKey: "settingsKey", sortField: "sortField", width: "width" }, outputs: { columnWidthChange: "columnWidthChange", multiselectSelectionChange: "multiselectSelectionChange", rowDeleteCancel: "rowDeleteCancel", rowDeleteConfirm: "rowDeleteConfirm", selectedColumnIdsChange: "selectedColumnIdsChange", sortFieldChange: "sortFieldChange" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyGridAdapterService], queries: [{ propertyName: "columnComponents", predicate: SkyGridColumnComponent }], viewQueries: [{ propertyName: "inlineDeleteTemplateRef", first: true, predicate: ["inlineDeleteTemplateRef"], descendants: true, read: TemplateRef }, { propertyName: "tableContainerElementRef", first: true, predicate: ["gridContainer"], descendants: true }, { propertyName: "tableElementRef", first: true, predicate: ["gridTable"], descendants: true }, { propertyName: "topScrollContainerElementRef", first: true, predicate: ["topScrollContainer"], descendants: true }, { propertyName: "resizeBar", first: true, predicate: ["resizeBar"], descendants: true }, { propertyName: "columnElementRefs", predicate: ["gridCol"], descendants: true }, { propertyName: "columnRangeInputElementRefs", predicate: ["colSizeRange"], descendants: true }, { propertyName: "inlineDeleteRefs", predicate: ["inlineDeleteRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"sky-grid\">\n <div\n *ngIf=\"showTopScroll\"\n class=\"sky-grid-top-scroll-container\"\n (scroll)=\"onTopScroll($event)\"\n #topScrollContainer\n >\n <div\n class=\"sky-grid-top-scroll\"\n [style.width.px]=\"getTopScrollWidth()\"\n ></div>\n </div>\n <div\n class=\"sky-grid-table-container\"\n [style.height.px]=\"height\"\n [style.width.px]=\"width\"\n (scroll)=\"onGridScroll($event)\"\n #gridContainer\n >\n <table class=\"sky-grid-table\" [ngClass]=\"getTableClassNames()\" #gridTable>\n <thead>\n <tr dragula=\"sky-grid-heading\">\n <th\n *ngIf=\"enableMultiselect\"\n class=\"\n sky-grid-heading sky-grid-multiselect-cell sky-grid-header-locked\n \"\n scope=\"col\"\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <span class=\"screen-reader-only\">\n {{ 'skyux_grid_multiselect_select_row' | skyLibResources }}\n </span>\n </th>\n <th\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-heading sky-field-label\"\n scope=\"col\"\n [attr.sky-cmp-index]=\"i\"\n [attr.sky-cmp-id]=\"column.id || column.field\"\n [attr.aria-sort]=\"getAriaSortDirection(column) | async\"\n [id]=\"'sky-grid-' + gridId + '-column-' + i\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n [tabIndex]=\"column.isSortable ? 0 : -1\"\n (mouseup)=\"sortByColumn(column)\"\n (keydown)=\"onKeydown($event, column)\"\n (touchmove)=\"onTouchMove($event)\"\n #gridCol\n >\n <div\n class=\"overflow\"\n [ngClass]=\"getTableHeaderClassNames(column)\"\n [style.max-width.px]=\"column.width - 1\"\n [style.width.px]=\"column.width - 1\"\n >\n <span\n *ngIf=\"(getCaretVisibility(column.field) | async) === 'hidden'\"\n class=\"sky-grid-header-caret-hidden-spacing\"\n ></span>\n <!-- The no spacing here is intentional to avoid extra spaces due to these being inline elements -->\n <span class=\"sky-grid-header-text\">{{\n column.heading?.trim()\n }}</span>\n <sky-icon\n class=\"sky-grid-heading-sort\"\n [ngClass]=\"\n 'sky-grid-heading-sort-' +\n (getCaretVisibility(column.field) | async)\n \"\n [icon]=\"getCaretIconNames(column)\"\n >\n </sky-icon>\n <sky-help-inline\n *ngIf=\"column.inlineHelpPopover\"\n [ngClass]=\"{\n 'sky-grid-help-inline-sort-hidden':\n getHelpInlineClass(column.field) | async\n }\"\n [skyPopover]=\"column.inlineHelpPopover\"\n (keydown.enter)=\"$event.stopPropagation()\"\n (keydown.space)=\"$event.stopPropagation()\"\n (mousedown)=\"$event.stopPropagation()\"\n (mouseup)=\"$event.stopPropagation()\"\n >\n </sky-help-inline>\n </div>\n <span\n *ngIf=\"(fit === 'width' && !last) || fit === 'scroll'\"\n aria-hidden=\"true\"\n class=\"sky-grid-resize-handle\"\n tabindex=\"-1\"\n [attr.sky-cmp-index]=\"i\"\n (mousedown)=\"onResizeColumnStart($event)\"\n (touchstart)=\"onResizeColumnStart($event)\"\n >\n </span>\n <input\n aria-label=\"Width of column\"\n class=\"sky-grid-column-input-aria-only\"\n role=\"slider\"\n type=\"range\"\n [attr.aria-controls]=\"'sky-grid-' + gridId + '-column-' + i\"\n [attr.aria-valuemin]=\"minColWidth\"\n [attr.aria-valuemax]=\"maxColWidth\"\n [attr.aria-valuenow]=\"column.width\"\n [attr.sky-cmp-index]=\"i\"\n [min]=\"minColWidth\"\n [max]=\"maxColWidth\"\n [step]=\"columnResizeStep\"\n [(ngModel)]=\"column.width\"\n (blur)=\"onResizeHandleBlur($event)\"\n (focus)=\"onResizeHandleFocus($event)\"\n (keydown)=\"onKeydownResizeCol($event)\"\n (change)=\"onInputChangeResizeCol($event)\"\n #colSizeRange\n />\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; let i = index\"\n [attr.aria-current]=\"isRowHighlighted(item.id) ? true : null\"\n [attr.sky-cmp-id]=\"item.id\"\n [ngClass]=\"{\n 'sky-grid-multiselect-selected-row': item.isSelected,\n 'sky-grid-multiselect-row': enableMultiselect,\n 'sky-grid-row-highlight': isRowHighlighted(item.id)\n }\"\n (click)=\"onRowClick($event, item)\"\n >\n <td\n *ngIf=\"enableMultiselect\"\n class=\"sky-grid-multiselect-cell sky-grid-header-locked\"\n >\n <div\n [style.max-width.px]=\"minColWidth\"\n [style.width.px]=\"minColWidth\"\n >\n <sky-checkbox\n [label]=\"'skyux_grid_multiselect_select_row' | skyLibResources\"\n (change)=\"onMultiselectCheckboxChange()\"\n [(ngModel)]=\"item.isSelected\"\n >\n </sky-checkbox>\n </div>\n </td>\n <td\n *ngFor=\"\n let column of displayedColumns;\n let last = last;\n let i = index\n \"\n class=\"sky-grid-cell\"\n [ngClass]=\"'sky-grid-column-alignment-' + column.alignment\"\n [style.max-width.px]=\"column.width\"\n [style.width.px]=\"column.width\"\n >\n <sky-grid-cell\n [skyHighlight]=\"\n !column.excludeFromHighlighting ? highlightText : undefined\n \"\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 >\n </sky-grid-cell>\n </td>\n </tr>\n </tbody>\n </table>\n <div\n *ngIf=\"showResizeBar\"\n aria-hidden=\"true\"\n id=\"sky-grid-resize-bar\"\n tabindex=\"-1\"\n #resizeBar\n ></div>\n </div>\n</div>\n\n<ng-template #defaultCellTemplate let-row=\"row\" let-value=\"value\">{{\n value\n}}</ng-template>\n\n<ng-template let-item #inlineDeleteTemplateRef>\n <div\n [id]=\"'row-delete-ref-' + item.id\"\n [ngStyle]=\"{\n height: getRowHeight(0),\n position: 'fixed',\n width: tableWidth + 'px'\n }\"\n #inlineDeleteRef\n >\n <sky-inline-delete\n [pending]=\"getRowDeleteItem(item.id).pending\"\n (cancelTriggered)=\"cancelRowDelete(item.id)\"\n (deleteTriggered)=\"confirmRowDelete(item.id)\"\n ></sky-inline-delete>\n </div>\n</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{max-width:100%;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-row-highlight{border-top:1px solid #0974a1;box-shadow:0 0 0 3px inset #0974a1}.sky-grid-row .sky-grid-cell{padding:0;min-width:10px}.sky-grid-heading{position:relative;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;border-right-width:0px;padding:0;cursor:pointer;background-color:#fff;overflow:visible;background-clip:padding-box;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;user-select:none}.sky-grid-heading:first-child{border-left:1px solid transparent}.sky-grid-heading.sky-grid-header-dragging{background-color:#eeeeef}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-heading-sort,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-heading-sort{width:14px}.sky-grid-heading.sky-grid-column-alignment-left .sky-grid-help-inline-sort-hidden,.sky-grid-heading.sky-grid-column-alignment-center .sky-grid-help-inline-sort-hidden{margin-left:-14px;margin-right:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-header-caret-hidden-spacing{padding-left:14px}.sky-grid-heading.sky-grid-column-alignment-right .sky-grid-heading-sort-visible{width:14px}.sky-grid-heading div{padding:8px}.sky-grid-heading .overflow{text-overflow:ellipsis;white-space:nowrap;position:relative;z-index:1;overflow:hidden;min-width:100%}.sky-grid-heading .sky-grid-column-input-aria-only{-webkit-appearance:none;-moz-appearance:none;height:100%;width:5px;position:absolute;display:block;top:0;bottom:0;right:0}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-track{background:transparent}.sky-grid-heading .sky-grid-column-input-aria-only::-moz-range-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-ms-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;width:0;height:0;border-radius:0;border:0 none;background:none;display:none}.sky-grid-heading .sky-grid-column-input-aria-only:focus{background-color:#00b4f1}.sky-grid-column-alignment-left{text-align:left}.sky-grid-column-alignment-center{text-align:center}.sky-grid-column-alignment-right{text-align:right}.sky-grid-multiselect-cell{padding:0;text-align:center}.sky-grid-multiselect-cell ::ng-deep .sky-switch-control{margin:0 auto}th.sky-grid-multiselect-cell{cursor:default}th.sky-grid-multiselect-cell .screen-reader-only{width:0;height:0;padding:0;opacity:0;position:absolute;margin:-1px;border:0;overflow:hidden;clip:rect(0,0,0,0);outline:none;white-space:nowrap}@-moz-document url-prefix(){.sky-grid-multiselect-row td{border-left:0px solid transparent;border-right:0px solid transparent}}.sky-grid-multiselect-row:hover{background-color:#e9e4f1}.sky-grid-multiselect-row:hover:nth-child(odd){background:#e9e4f1}.sky-grid-multiselect-selected-row{background:#f1eef6;border-top:1px solid #dadbf6;border-bottom:1px solid #dadbf6}.sky-grid-multiselect-selected-row:nth-child(odd){background:#f1eef6}.sky-grid-has-toolbar .sky-grid-heading{border-top-width:0px}.sky-grid-heading-sort.sky-grid-heading-sort-hidden{visibility:hidden}.sky-grid-heading-sort.sky-grid-heading-sort-visible{visibility:visible;padding-left:5px}.sky-grid-resize-handle{position:absolute;right:0;top:0;bottom:0;width:30px;z-index:2;min-height:20px;height:100%!important;vertical-align:middle;cursor:col-resize}.sky-grid-resize-handle:hover:after{background-color:#00b4f1}.sky-grid-resize-handle:after{position:absolute;right:0;top:0;bottom:0;width:5px;height:100%;content:\"\"}#sky-grid-resize-bar{position:absolute;top:0;left:0;z-index:99;height:100%;width:5px;background:#00b4f1;opacity:.6}tr{position:relative}.sky-grid-top-scroll-container{overflow:auto}.sky-grid-top-scroll{height:1px}\n"], components: [{ type: i4.λ4, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: i4.λ3, selector: "sky-help-inline", outputs: ["actionClick"] }, { type: i5.λ3, selector: "sky-checkbox", inputs: ["label", "labelledBy", "id", "disabled", "tabindex", "name", "icon", "checkboxType", "checked", "required"], outputs: ["change", "checkedChange", "disabledChange"] }, { type: i6.SkyGridCellComponent, selector: "sky-grid-cell", inputs: ["item", "columnId", "template", "fieldSelector"] }, { type: i7.λ8, selector: "sky-inline-delete", inputs: ["pending"], outputs: ["cancelTriggered", "deleteTriggered"] }], directives: [{ type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.DragulaDirective, selector: "[dragula]", inputs: ["dragula", "dragulaModel", "dragulaOptions"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.λ7, selector: "[skyPopover]", inputs: ["skyPopover", "skyPopoverAlignment", "skyPopoverMessageStream", "skyPopoverPlacement", "skyPopoverTrigger"] }, { type: i10.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.λ11, selector: "[skyHighlight]", inputs: ["skyHighlight"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "skyLibResources": i11.SkyLibResourcesPipe, "async": i8.AsyncPipe }, viewProviders: [DragulaService], changeDetection: i0.ChangeDetectionStrategy.OnPush });
915
948
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SkyGridComponent, decorators: [{
916
949
  type: Component,
917
950
  args: [{