igniteui-grid-lite 0.0.1 → 0.0.2

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 (129) hide show
  1. package/README.md +234 -9
  2. package/components/grid.d.ts +1 -1
  3. package/components/grid.js +4 -3
  4. package/components/grid.js.map +1 -1
  5. package/components/header.d.ts +1 -0
  6. package/components/header.js +6 -0
  7. package/components/header.js.map +1 -1
  8. package/docs/assets/highlight.css +27 -13
  9. package/docs/assets/main.js +2 -2
  10. package/docs/classes/IgcGridLite.html +20 -20
  11. package/docs/hierarchy.html +1 -1
  12. package/docs/index.html +193 -11
  13. package/docs/interfaces/BaseColumnConfiguration.html +11 -11
  14. package/docs/interfaces/BaseColumnSortConfiguration.html +4 -4
  15. package/docs/interfaces/BaseFilterExpression.html +6 -6
  16. package/docs/interfaces/BaseIgcCellContext.html +6 -6
  17. package/docs/interfaces/BaseSortExpression.html +4 -4
  18. package/docs/interfaces/ColumnFilterConfiguration.html +3 -3
  19. package/docs/interfaces/DataPipelineConfiguration.html +4 -4
  20. package/docs/interfaces/GridSortConfiguration.html +4 -4
  21. package/docs/interfaces/IgcFilteredEvent.html +4 -4
  22. package/docs/interfaces/IgcFilteringEvent.html +5 -5
  23. package/docs/interfaces/IgcGridLiteEventMap.html +5 -5
  24. package/docs/interfaces/IgcHeaderContext.html +4 -4
  25. package/docs/media/LICENSE +9 -0
  26. package/docs/modules.html +1 -1
  27. package/docs/types/BasePropertyType.html +2 -2
  28. package/docs/types/BaseSortComparer.html +2 -2
  29. package/docs/types/ColumnConfiguration.html +2 -2
  30. package/docs/types/ColumnSortConfiguration.html +2 -2
  31. package/docs/types/DataPipelineHook.html +2 -2
  32. package/docs/types/DataPipelineParams.html +5 -5
  33. package/docs/types/DataType.html +2 -2
  34. package/docs/types/FilterCriteria.html +2 -2
  35. package/docs/types/FilterExpression.html +2 -2
  36. package/docs/types/IgcCellContext.html +2 -2
  37. package/docs/types/Keys.html +2 -2
  38. package/docs/types/PropertyType.html +2 -2
  39. package/docs/types/SortComparer.html +2 -2
  40. package/docs/types/SortExpression.html +2 -2
  41. package/docs/types/SortState.html +2 -2
  42. package/docs/types/SortingDirection.html +2 -2
  43. package/internal/theming.js +5 -7
  44. package/internal/theming.js.map +1 -1
  45. package/operations/filter/tree.d.ts +1 -1
  46. package/package.json +2 -2
  47. package/styles/_common.css.js +1 -1
  48. package/styles/_common.css.js.map +1 -1
  49. package/styles/body-cell/body-cell.css.js +1 -1
  50. package/styles/body-cell/body-cell.css.js.map +1 -1
  51. package/styles/body-row/body-row.css.js +1 -1
  52. package/styles/body-row/body-row.css.js.map +1 -1
  53. package/styles/filter-row/filter-row.css.js +1 -1
  54. package/styles/filter-row/filter-row.css.js.map +1 -1
  55. package/styles/header-cell/header-cell.css.js +1 -1
  56. package/styles/header-cell/header-cell.css.js.map +1 -1
  57. package/styles/header-row/header-row.base.css.js +1 -1
  58. package/styles/header-row/header-row.base.css.js.map +1 -1
  59. package/styles/themes/dark/_themes.css.js +3 -0
  60. package/styles/themes/dark/_themes.css.js.map +1 -0
  61. package/styles/themes/dark/grid.bootstrap.css.js +3 -0
  62. package/styles/themes/dark/grid.bootstrap.css.js.map +1 -0
  63. package/styles/themes/dark/grid.fluent.css.js +3 -0
  64. package/styles/themes/dark/grid.fluent.css.js.map +1 -0
  65. package/styles/themes/dark/grid.indigo.css.js +3 -0
  66. package/styles/themes/dark/grid.indigo.css.js.map +1 -0
  67. package/styles/themes/dark/grid.material.css.js +3 -0
  68. package/styles/themes/dark/grid.material.css.js.map +1 -0
  69. package/styles/themes/grid-header-themes.d.ts +2 -0
  70. package/styles/themes/grid-header-themes.js +21 -0
  71. package/styles/themes/grid-header-themes.js.map +1 -0
  72. package/styles/themes/grid-themes.d.ts +2 -0
  73. package/styles/{grid/themes/themes.js → themes/grid-themes.js} +17 -9
  74. package/styles/themes/grid-themes.js.map +1 -0
  75. package/styles/themes/grid.base.css.js +3 -0
  76. package/styles/themes/grid.base.css.js.map +1 -0
  77. package/styles/themes/light/_themes.css.js +3 -0
  78. package/styles/themes/light/_themes.css.js.map +1 -0
  79. package/styles/themes/light/grid.bootstrap.css.js +3 -0
  80. package/styles/themes/light/grid.bootstrap.css.js.map +1 -0
  81. package/styles/themes/light/grid.fluent.css.js +3 -0
  82. package/styles/themes/light/grid.fluent.css.js.map +1 -0
  83. package/styles/themes/light/grid.indigo.css.d.ts +1 -0
  84. package/styles/themes/light/grid.indigo.css.js +3 -0
  85. package/styles/themes/light/grid.indigo.css.js.map +1 -0
  86. package/styles/themes/light/grid.material.css.d.ts +1 -0
  87. package/styles/themes/light/grid.material.css.js +3 -0
  88. package/styles/themes/light/grid.material.css.js.map +1 -0
  89. package/styles/themes/light/grid.shared.css.d.ts +1 -0
  90. package/styles/themes/light/grid.shared.css.js +3 -0
  91. package/styles/themes/light/grid.shared.css.js.map +1 -0
  92. package/styles/themes/shared/grid.common.css.d.ts +1 -0
  93. package/styles/themes/shared/grid.common.css.js +3 -0
  94. package/styles/themes/shared/grid.common.css.js.map +1 -0
  95. package/styles/themes/shared/header.bootstrap.css.d.ts +1 -0
  96. package/styles/themes/shared/header.bootstrap.css.js +3 -0
  97. package/styles/themes/shared/header.bootstrap.css.js.map +1 -0
  98. package/styles/themes/shared/header.fluent.css.d.ts +1 -0
  99. package/styles/themes/shared/header.fluent.css.js +3 -0
  100. package/styles/themes/shared/header.fluent.css.js.map +1 -0
  101. package/styles/grid/themes/dark/grid.bootstrap.css.js +0 -3
  102. package/styles/grid/themes/dark/grid.bootstrap.css.js.map +0 -1
  103. package/styles/grid/themes/dark/grid.fluent.css.js +0 -3
  104. package/styles/grid/themes/dark/grid.fluent.css.js.map +0 -1
  105. package/styles/grid/themes/dark/grid.indigo.css.js +0 -3
  106. package/styles/grid/themes/dark/grid.indigo.css.js.map +0 -1
  107. package/styles/grid/themes/dark/grid.material.css.js +0 -3
  108. package/styles/grid/themes/dark/grid.material.css.js.map +0 -1
  109. package/styles/grid/themes/grid.base.css.js +0 -3
  110. package/styles/grid/themes/grid.base.css.js.map +0 -1
  111. package/styles/grid/themes/light/grid.bootstrap.css.js +0 -3
  112. package/styles/grid/themes/light/grid.bootstrap.css.js.map +0 -1
  113. package/styles/grid/themes/light/grid.fluent.css.js +0 -3
  114. package/styles/grid/themes/light/grid.fluent.css.js.map +0 -1
  115. package/styles/grid/themes/light/grid.indigo.css.js +0 -3
  116. package/styles/grid/themes/light/grid.indigo.css.js.map +0 -1
  117. package/styles/grid/themes/light/grid.material.css.js +0 -3
  118. package/styles/grid/themes/light/grid.material.css.js.map +0 -1
  119. package/styles/grid/themes/themes.d.ts +0 -2
  120. package/styles/grid/themes/themes.js.map +0 -1
  121. /package/styles/{grid/themes/dark/grid.bootstrap.css.d.ts → themes/dark/_themes.css.d.ts} +0 -0
  122. /package/styles/{grid/themes/light → themes/dark}/grid.bootstrap.css.d.ts +0 -0
  123. /package/styles/{grid/themes → themes}/dark/grid.fluent.css.d.ts +0 -0
  124. /package/styles/{grid/themes → themes}/dark/grid.indigo.css.d.ts +0 -0
  125. /package/styles/{grid/themes → themes}/dark/grid.material.css.d.ts +0 -0
  126. /package/styles/{grid/themes → themes}/grid.base.css.d.ts +0 -0
  127. /package/styles/{grid/themes/light/grid.fluent.css.d.ts → themes/light/_themes.css.d.ts} +0 -0
  128. /package/styles/{grid/themes/light/grid.indigo.css.d.ts → themes/light/grid.bootstrap.css.d.ts} +0 -0
  129. /package/styles/{grid/themes/light/grid.material.css.d.ts → themes/light/grid.fluent.css.d.ts} +0 -0
package/README.md CHANGED
@@ -1,17 +1,242 @@
1
- # Ignite UI Grid Lite
1
+ # Ignite UI Grid Lite for Web Components
2
2
  [![Node.js CI](https://github.com/IgniteUI/igniteui-grid-lite/actions/workflows/node.js.yml/badge.svg)](https://github.com/IgniteUI/igniteui-grid-lite/actions/workflows/node.js.yml)
3
3
  [![Coverage Status](https://coveralls.io/repos/github/IgniteUI/igniteui-grid-lite/badge.svg?branch=master)](https://coveralls.io/github/IgniteUI/igniteui-grid-lite?branch=master)
4
+ [![npm version](https://badge.fury.io/js/igniteui-grid-lite.svg)](https://badge.fury.io/js/igniteui-grid-lite)
4
5
 
6
+ Ignite UI Grid Lite for Web Components is a high-performance, lightweight data grid built as a web component using [Lit](https://lit.dev/). It provides essential grid functionality with a small footprint, making it perfect for applications that need fast, efficient data visualization without the overhead of a full-featured grid.
5
7
 
6
- This is still a **very** early proof of concept for a web component based data grid.
8
+ ## Table of Contents
9
+ - [Features](#features)
10
+ - [Browser Support](#browser-support)
11
+ - [Getting Started](#getting-started)
12
+ - [Usage](#usage)
13
+ - [Building the Library](#building-the-library)
14
+ - [Running Tests](#running-tests)
15
+ - [Documentation](#documentation)
16
+ - [Ignite UI Open-Source vs. Premium for Web Comonents](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-open-source-vs-premium)
17
+ - [Contributing](#contributing)
18
+ - [Support](#support)
19
+ - [License](#license)
7
20
 
8
- ## Local Development
21
+ ## Features
9
22
 
10
- 1. Clone the repository.
11
- 2. Run `npm install`
12
- 3. Run `npm run build`
13
- 3. Play and explore the codebase.
23
+ Ignite UI Grid Lite for Web Components provides core data grid capabilities with an emphasis on performance and simplicity:
14
24
 
15
- ## Local demo with Vite
25
+ - **High Performance Row Virtualization** - Handles large datasets efficiently with built-in virtual scrolling
26
+ - **Column Filtering** - Built-in column filtering capabilities
27
+ - **Sorting** - Column sorting support for better data organization
28
+ - **Lightweight** - Minimal bundle size for fast load times
29
+ - **Web Standards** - Built with web components for framework-agnostic usage
30
+ - **Modern Architecture** - Built with Lit and TypeScript for maintainability
31
+ - **Customizable** - Flexible theming and styling options
32
+ - **Cell Templating** - Custom cell rendering for flexible data display
33
+ - **Header Templating** - Custom header rendering for enhanced grid headers
34
+ - **Accessible** - Designed with accessibility in mind
16
35
 
17
- Run `npm start` to open the demo page in `demo/index.html`
36
+ ## Browser Support
37
+
38
+ Ignite UI Grid Lite for Web Components supports all modern browsers:
39
+
40
+ | ![chrome] | ![firefox] | ![edge] | ![safari] | ![opera] |
41
+ |:---:|:---:|:---:|:---:|:---:|
42
+ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |
43
+
44
+ ## Getting Started
45
+
46
+ ### Installation
47
+
48
+ Install via npm:
49
+
50
+ ```bash
51
+ npm install igniteui-grid-lite
52
+ ```
53
+
54
+ ### Quick Start
55
+
56
+ 1. Import the grid component in your JavaScript/TypeScript file:
57
+
58
+ ```typescript
59
+ import 'igniteui-grid-lite';
60
+ ```
61
+
62
+ 2. Use the grid in your HTML:
63
+
64
+ ```html
65
+ <igc-grid-lite>
66
+ <!-- Grid configuration here -->
67
+ </igc-grid-lite>
68
+ ```
69
+
70
+ 3. For a complete example, check out the [demo application](./demo).
71
+
72
+ ## Usage
73
+
74
+ For detailed usage instructions and API documentation, visit:
75
+ - <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview">Grid Lite Overview</a>
76
+ - [API Documentation](https://igniteui.github.io/igniteui-grid-lite/)
77
+
78
+ ## Building the Library
79
+
80
+ ### Setup
81
+
82
+ Clone the repository and install dependencies:
83
+
84
+ ```bash
85
+ git clone https://github.com/IgniteUI/igniteui-grid-lite.git
86
+ cd igniteui-grid-lite
87
+ npm install
88
+ ```
89
+
90
+ ### Build
91
+
92
+ To build the library:
93
+
94
+ ```bash
95
+ npm run build
96
+ ```
97
+
98
+ This will:
99
+ - Analyze custom elements
100
+ - Build the TypeScript source
101
+ - Generate API documentation
102
+
103
+ ### Development
104
+
105
+ Start the development server with live reload:
106
+
107
+ ```bash
108
+ npm start
109
+ ```
110
+
111
+ This will open the demo page at `demo/index.html` with automatic rebuilding on file changes.
112
+
113
+ ## Running Tests
114
+
115
+ Run tests once:
116
+
117
+ ```bash
118
+ npm test
119
+ ```
120
+
121
+ Run tests in watch mode:
122
+
123
+ ```bash
124
+ npm run test:watch
125
+ ```
126
+
127
+ Tests are written using [@web/test-runner](https://modern-web.dev/docs/test-runner/overview/) and [@open-wc/testing](https://open-wc.org/docs/testing/helpers/).
128
+
129
+ ## Documentation
130
+
131
+ ### API Documentation
132
+
133
+ The API documentation is generated using [TypeDoc](https://typedoc.org/). To build the docs:
134
+
135
+ ```bash
136
+ npm run build
137
+ ```
138
+
139
+ Documentation will be available in the build output.
140
+
141
+ ### Additional Resources
142
+
143
+ - <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started">Ignite UI Web Components Product Documentation</a>
144
+ - <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grid-lite/overview">Grid Lite Documentation</a>
145
+ - [Web Components Guide](https://lit.dev/)
146
+
147
+ ## Ignite UI Grid Lite vs. Ignite UI for Web Components
148
+
149
+ Ignite UI Grid Lite is designed as a lightweight, open-source alternative to the full-featured <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/data-grid">Ignite UI for Web Components Data Grid</a>, while allowing for an easy swap with the full-featured grid, if application needs require it.
150
+
151
+ ### Ignite UI Grid Lite for Web Components (Open Source - MIT)
152
+
153
+ **Best for:**
154
+ - Applications requiring basic grid functionality
155
+ - Projects where bundle size is critical
156
+ - Framework-agnostic web applications
157
+ - Community-driven development
158
+
159
+ **Includes:**
160
+ - Core data virtualization
161
+ - Basic filtering and sorting
162
+ - Lightweight and fast
163
+ - MIT licensed and free for all use
164
+
165
+ **Best for:**
166
+ - Enterprise applications requiring advanced features
167
+ - Complex data scenarios with editing, grouping, and aggregation
168
+ - Applications needing professional support and SLA
169
+
170
+ **Includes:**
171
+ - All Grid Lite features plus:
172
+ - Advanced filtering with query builder
173
+ - Excel-style column filtering
174
+ - Grouping
175
+ - Cell editing, row editing, batch editing
176
+ - Summaries and aggregations
177
+ - Excel, PDF, and CSV export
178
+ - Column pinning, hiding, and resizing
179
+ - Row selection
180
+ - Paging
181
+ - Multi-column headers and collapsible column groups
182
+ - Cell merging
183
+ - Custom row layouts
184
+ - Master-detail views
185
+ - Hierarchical grid
186
+ - Tree grid
187
+ - Pivot grid
188
+ - 24/5 developer support
189
+
190
+ <a href="https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-open-source-vs-premium">Learn more about Open-Source vs Premium Ignite UI options</a>
191
+
192
+ ## Contributing
193
+
194
+ We welcome contributions! Please see our [contributing guidelines](CONTRIBUTING.md) for details on:
195
+ - Code of conduct
196
+ - Development workflow
197
+ - Submitting pull requests
198
+ - Coding standards
199
+
200
+ To contribute:
201
+
202
+ 1. Fork the repository
203
+ 2. Create a feature branch (`git checkout -b feature/amazing-feature`)
204
+ 3. Commit your changes (`git commit -m 'Add amazing feature'`)
205
+ 4. Push to the branch (`git push origin feature/amazing-feature`)
206
+ 5. Open a Pull Request
207
+
208
+ ## Support
209
+
210
+ ### Community Support
211
+
212
+ Community support for open source usage of this product is available at:
213
+ - [GitHub Issues](https://github.com/IgniteUI/igniteui-grid-lite/issues) - Report bugs or request features
214
+ - [Stack Overflow](https://stackoverflow.com/questions/tagged/igniteui) - Ask questions using the `igniteui` tag
215
+
216
+ ### Commercial Support
217
+
218
+ For professional support and access to the full Ignite UI for Web Components suite with advanced grid features:
219
+ - Visit [Infragistics Support](https://www.infragistics.com/support)
220
+ - Explore [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components)
221
+ - [Register for a trial](https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/general-getting-started)
222
+
223
+ ## License
224
+
225
+ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
226
+
227
+ **MIT License** - Free for commercial and non-commercial use.
228
+
229
+ © Copyright 2025 INFRAGISTICS. All Rights Reserved.
230
+
231
+ For the commercial Ignite UI for Angular product, please visit [Infragistics Licensing](https://www.infragistics.com/legal/license).
232
+
233
+ ---
234
+
235
+ **Built with ❤️ by [Infragistics](https://www.infragistics.com/)**
236
+
237
+ <!-- Browser Logos -->
238
+ [chrome]: https://user-images.githubusercontent.com/2188411/168109445-fbd7b217-35f9-44d1-8002-1eb97e39cdc6.png "Google Chrome"
239
+ [firefox]: https://user-images.githubusercontent.com/2188411/168109465-e46305ee-f69f-4fa5-8f4a-14876f7fd3ca.png "Mozilla Firefox"
240
+ [edge]: https://user-images.githubusercontent.com/2188411/168109472-a730f8c0-3822-4ae6-9f54-785a66695245.png "Microsoft Edge"
241
+ [opera]: https://user-images.githubusercontent.com/2188411/168109520-b6865a6c-b69f-44a4-9948-748d8afd687c.png "Opera"
242
+ [safari]: https://user-images.githubusercontent.com/2188411/168109527-6c58f2cf-7386-4b97-98b1-cfe0ab4e8626.png "Safari"
@@ -103,7 +103,7 @@ export interface IgcGridLiteEventMap<T extends object> {
103
103
  */
104
104
  export declare class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteEventMap<T>> {
105
105
  static get tagName(): "igc-grid-lite";
106
- static styles: import("lit").CSSResult;
106
+ static styles: import("lit").CSSResult[];
107
107
  static register(): void;
108
108
  protected stateController: StateController<T>;
109
109
  protected DOM: GridDOMController<T>;
@@ -19,8 +19,9 @@ import { GRID_TAG } from '../internal/tags.js';
19
19
  import { addThemingController } from '../internal/theming.js';
20
20
  import { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';
21
21
  import { watch } from '../internal/watch.js';
22
- import { styles } from '../styles/grid/themes/grid.base.css.js';
23
- import { all } from '../styles/grid/themes/themes.js';
22
+ import { styles } from '../styles/themes/grid.base.css.js';
23
+ import { all } from '../styles/themes/grid-themes.js';
24
+ import { styles as shared } from '../styles/themes/shared/grid.common.css.js';
24
25
  import IgcGridLiteCell from './cell.js';
25
26
  import IgcFilterRow from './filter-row.js';
26
27
  import IgcGridLiteHeaderRow from './header-row.js';
@@ -30,7 +31,7 @@ export class IgcGridLite extends EventEmitterBase {
30
31
  static get tagName() {
31
32
  return GRID_TAG;
32
33
  }
33
- static { this.styles = styles; }
34
+ static { this.styles = [styles, shared]; }
34
35
  static register() {
35
36
  registerComponent(IgcGridLite, IgcVirtualizer, IgcGridLiteRow, IgcGridLiteHeaderRow, IgcFilterRow, IgcButtonComponent, IgcChipComponent, IgcInputComponent, IgcDropdownComponent);
36
37
  }
@@ -1 +1 @@
1
- {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/components/grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport {\n IgcButtonComponent,\n IgcChipComponent,\n IgcDropdownComponent,\n IgcInputComponent,\n} from 'igniteui-webcomponents';\nimport { html, nothing } from 'lit';\nimport { eventOptions, property, query, queryAll, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { DataOperationsController } from '../controllers/data-operation.js';\nimport { GridDOMController } from '../controllers/dom.js';\nimport { gridStateContext, StateController } from '../controllers/state.js';\nimport { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';\nimport { EventEmitterBase } from '../internal/mixins/event-emitter.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_TAG } from '../internal/tags.js';\nimport { addThemingController } from '../internal/theming.js';\nimport type {\n ColumnConfiguration,\n DataPipelineConfiguration,\n GridSortConfiguration,\n Keys,\n} from '../internal/types.js';\nimport { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\nimport type { SortExpression } from '../operations/sort/types.js';\nimport { styles } from '../styles/grid/themes/grid.base.css.js';\nimport { all } from '../styles/grid/themes/themes.js';\nimport IgcGridLiteCell from './cell.js';\nimport IgcFilterRow from './filter-row.js';\nimport IgcGridLiteHeaderRow from './header-row.js';\nimport IgcGridLiteRow from './row.js';\nimport IgcVirtualizer from './virtualizer.js';\n\n/**\n * Event object for the filtering event of the grid.\n */\nexport interface IgcFilteringEvent<T extends object> {\n /**\n * The target column for the filter operation.\n */\n key: Keys<T>;\n\n /**\n * The filter expression(s) to apply.\n */\n expressions: FilterExpression<T>[];\n\n /**\n * The type of modification which will be applied to the filter\n * state of the column.\n *\n * @remarks\n * `add` - a new filter expression will be added to the state of the column.\n * `modify` - an existing filter expression will be modified.\n * `remove` - the expression(s) will be removed from the state of the column.\n */\n type: 'add' | 'modify' | 'remove';\n}\n\n/**\n * Event object for the filtered event of the grid.\n */\nexport interface IgcFilteredEvent<T extends object> {\n /**\n * The target column for the filter operation.\n */\n key: Keys<T>;\n\n /**\n * The filter state of the column after the operation.\n */\n state: FilterExpression<T>[];\n}\n\n/**\n * Events for the igc-grid-lite.\n */\nexport interface IgcGridLiteEventMap<T extends object> {\n /**\n * Emitted when sorting is initiated through the UI.\n * Returns the sort expression which will be used for the operation.\n *\n * @remarks\n * The event is cancellable which prevents the operation from being applied.\n * The expression can be modified prior to the operation running.\n *\n * @event\n */\n sorting: CustomEvent<SortExpression<T>>;\n /**\n * Emitted when a sort operation initiated through the UI has completed.\n * Returns the sort expression used for the operation.\n *\n * @event\n */\n sorted: CustomEvent<SortExpression<T>>;\n /**\n * Emitted when filtering is initiated through the UI.\n *\n * @remarks\n * The event is cancellable which prevents the operation from being applied.\n * The expression can be modified prior to the operation running.\n *\n * @event\n */\n filtering: CustomEvent<IgcFilteringEvent<T>>;\n /**\n * Emitted when a filter operation initiated through the UI has completed.\n * Returns the filter state for the affected column.\n *\n * @event\n */\n filtered: CustomEvent<IgcFilteredEvent<T>>;\n}\n\n/**\n * IgcGridLite is a web component for displaying data in a tabular format quick and easy.\n *\n * Out of the box it provides row virtualization, sort and filter operations (client and server side),\n * the ability to template cells and headers and column hiding.\n *\n * @element igc-grid-lite\n *\n * @fires sorting - Emitted when sorting is initiated through the UI.\n * @fires sorted - Emitted when a sort operation initiated through the UI has completed.\n * @fires filtering - Emitted when filtering is initiated through the UI.\n * @fires filtered - Emitted when a filter operation initiated through the UI has completed.\n *\n */\nexport class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteEventMap<T>> {\n public static get tagName() {\n return GRID_TAG;\n }\n\n public static override styles = styles;\n\n public static register() {\n registerComponent(\n IgcGridLite,\n IgcVirtualizer,\n IgcGridLiteRow,\n IgcGridLiteHeaderRow,\n IgcFilterRow,\n IgcButtonComponent,\n IgcChipComponent,\n IgcInputComponent,\n IgcDropdownComponent\n );\n }\n\n protected stateController = new StateController<T>(this);\n protected DOM = new GridDOMController<T>(this, this.stateController);\n protected dataController = new DataOperationsController<T>(this);\n\n protected stateProvider = new ContextProvider(this, {\n context: gridStateContext,\n initialValue: this.stateController,\n });\n\n @query(IgcVirtualizer.tagName)\n protected scrollContainer!: IgcVirtualizer;\n\n @query(IgcGridLiteHeaderRow.tagName)\n protected headerRow!: IgcGridLiteHeaderRow<T>;\n\n @query(IgcFilterRow.tagName)\n protected filterRow!: IgcFilterRow<T>;\n\n @state()\n protected dataState: Array<T> = [];\n\n @queryAll(IgcGridLiteRow.tagName)\n protected _rows!: NodeListOf<IgcGridLiteRow<T>>;\n\n /** Column configuration for the grid. */\n @property({ attribute: false })\n public columns: Array<ColumnConfiguration<T>> = [];\n\n /** The data source for the grid. */\n @property({ attribute: false })\n public data: Array<T> = [];\n\n /**\n * Whether the grid will try to \"resolve\" its column configuration based on the passed\n * data source.\n *\n * @remarks\n * This is usually executed on initial rendering in the DOM. It depends on having an existing data source\n * to infer the column configuration for the grid.\n * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually\n * result in empty column configuration for the grid.\n *\n * This property is ignored if any existing column configuration already exists in the grid.\n *\n * In a scenario where you want to bind a new data source and still keep the auto-generation behavior,\n * make sure to reset the column collection of the grid before passing in the new data source.\n *\n * @example\n * ```typescript\n * // assuming autoGenerate is set to true\n * grid.columns = [];\n * grid.data = [...];\n * ```\n *\n * @attr auto-generate\n */\n @property({ type: Boolean, attribute: 'auto-generate' })\n public autoGenerate = false;\n\n /** Sort configuration property for the grid. */\n @property({ attribute: false })\n public sortConfiguration: GridSortConfiguration = {\n multiple: true,\n triState: true,\n };\n\n /**\n * Configuration object which controls remote data operations for the grid.\n */\n @property({ attribute: false })\n public dataPipelineConfiguration!: DataPipelineConfiguration<T>;\n\n /**\n * Set the sort state for the grid.\n */\n public set sortExpressions(expressions: SortExpression<T>[]) {\n if (expressions.length) {\n this.sort(expressions);\n }\n }\n\n /**\n * Get the sort state for the grid.\n */\n @property({ attribute: false })\n public get sortExpressions(): SortExpression<T>[] {\n return Array.from(this.stateController.sorting.state.values());\n }\n\n /**\n * Set the filter state for the grid.\n */\n public set filterExpressions(expressions: FilterExpression<T>[]) {\n if (expressions.length) {\n this.filter(expressions);\n }\n }\n\n /**\n * Get the filter state for the grid.\n */\n @property({ attribute: false })\n public get filterExpressions(): FilterExpression<T>[] {\n const expressions: FilterExpression<T>[] = [];\n\n for (const each of this.stateController.filtering.state.values) {\n expressions.push(...each.all);\n }\n\n return expressions;\n }\n\n /**\n * Returns the collection of rendered row elements in the grid.\n *\n * @remarks\n * Since the grid has virtualization, this property returns only the currently rendered\n * chunk of elements in the DOM.\n */\n public get rows() {\n return Array.from(this._rows);\n }\n\n /**\n * Returns the state of the data source after sort/filter operations\n * have been applied.\n */\n public get dataView(): ReadonlyArray<T> {\n return this.dataState;\n }\n\n /**\n * The total number of items in the {@link IgcGridLite.dataView} collection.\n */\n public get totalItems() {\n return this.dataState.length;\n }\n\n @watch('columns')\n protected watchColumns(_: ColumnConfiguration<T>[], newConfig: ColumnConfiguration<T>[] = []) {\n this.columns = newConfig.map((config) => ({ ...DEFAULT_COLUMN_CONFIG, ...config }));\n }\n\n @watch('data')\n protected dataChanged() {\n this.dataState = structuredClone(this.data);\n autoGenerateColumns(this);\n\n if (this.hasUpdated) {\n this.pipeline();\n }\n }\n\n @watch(PIPELINE)\n protected async pipeline() {\n this.dataState = await this.dataController.apply(\n structuredClone(this.data),\n this.stateController\n );\n }\n\n constructor() {\n super();\n\n addThemingController(this, all);\n }\n\n /**\n * Performs a filter operation in the grid based on the passed expression(s).\n */\n public filter(config: FilterExpression<T> | FilterExpression<T>[]) {\n this.stateController.filtering.filter(\n asArray(config).map((each) =>\n typeof each.condition === 'string'\n ? // XXX: Types\n Object.assign(each, {\n condition: (getFilterOperandsFor(this.getColumn(each.key)!) as any)[each.condition],\n })\n : each\n )\n );\n }\n\n /**\n * Performs a sort operation in the grid based on the passed expression(s).\n */\n public sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n this.stateController.sorting.sort(expressions);\n }\n\n /**\n * Resets the current sort state of the control.\n */\n public clearSort(key?: Keys<T>) {\n this.stateController.sorting.reset(key);\n this.requestUpdate(PIPELINE);\n }\n\n /**\n * Resets the current filter state of the control.\n */\n public clearFilter(key?: Keys<T>) {\n this.stateController.filtering.reset(key);\n this.requestUpdate(PIPELINE);\n }\n\n /**\n * Returns a {@link ColumnConfiguration} for a given column.\n */\n public getColumn(id: Keys<T> | number) {\n return typeof id === 'number'\n ? this.columns.at(id)\n : this.columns.find(({ key }) => key === id);\n }\n\n /**\n * Updates the column configuration of the grid.\n */\n public updateColumns(columns: ColumnConfiguration<T> | ColumnConfiguration<T>[]) {\n for (const column of asArray(columns)) {\n const instance = this.columns.find((curr) => curr.key === column.key);\n if (instance) {\n Object.assign(instance, column);\n }\n }\n\n this.requestUpdate(PIPELINE);\n }\n\n @eventOptions({ capture: true })\n protected bodyClickHandler(event: MouseEvent) {\n const target = event\n .composedPath()\n .find((el) => el instanceof IgcGridLiteCell) as IgcGridLiteCell<T>;\n if (target) {\n this.stateController.active = {\n column: target.column.key,\n row: target.row.index,\n };\n }\n }\n\n protected bodyKeydownHandler(event: KeyboardEvent) {\n if (this.scrollContainer.isSameNode(event.target as HTMLElement)) {\n this.stateController.navigation.navigate(event);\n }\n }\n\n protected renderHeaderRow() {\n return html`\n <igc-grid-lite-header-row\n style=${styleMap(this.DOM.columnSizes)}\n .columns=${this.columns}\n ></igc-grid-lite-header-row>\n `;\n }\n\n protected renderBody() {\n return html`\n <igc-virtualizer\n .items=${this.dataState}\n .renderItem=${this.DOM.rowRenderer}\n @click=${this.bodyClickHandler}\n @keydown=${this.bodyKeydownHandler}\n ></igc-virtualizer>\n `;\n }\n\n protected renderFilterRow() {\n return this.columns.some((column) => column.filter)\n ? html`<igc-filter-row style=${styleMap(this.DOM.columnSizes)}></igc-filter-row>`\n : nothing;\n }\n\n protected override render() {\n return html`\n ${this.stateController.resizing.renderIndicator()}\n ${this.renderHeaderRow()}\n ${this.renderFilterRow()}\n ${this.renderBody()}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [IgcGridLite.tagName]: IgcGridLite<object>;\n }\n}\n"]}
1
+ {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../src/components/grid.ts"],"names":[],"mappings":"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","sourcesContent":["import { ContextProvider } from '@lit/context';\nimport {\n IgcButtonComponent,\n IgcChipComponent,\n IgcDropdownComponent,\n IgcInputComponent,\n} from 'igniteui-webcomponents';\nimport { html, nothing } from 'lit';\nimport { eventOptions, property, query, queryAll, state } from 'lit/decorators.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { DataOperationsController } from '../controllers/data-operation.js';\nimport { GridDOMController } from '../controllers/dom.js';\nimport { gridStateContext, StateController } from '../controllers/state.js';\nimport { DEFAULT_COLUMN_CONFIG, PIPELINE } from '../internal/constants.js';\nimport { EventEmitterBase } from '../internal/mixins/event-emitter.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_TAG } from '../internal/tags.js';\nimport { addThemingController } from '../internal/theming.js';\nimport type {\n ColumnConfiguration,\n DataPipelineConfiguration,\n GridSortConfiguration,\n Keys,\n} from '../internal/types.js';\nimport { asArray, autoGenerateColumns, getFilterOperandsFor } from '../internal/utils.js';\nimport { watch } from '../internal/watch.js';\nimport type { FilterExpression } from '../operations/filter/types.js';\nimport type { SortExpression } from '../operations/sort/types.js';\nimport { styles } from '../styles/themes/grid.base.css.js';\nimport { all } from '../styles/themes/grid-themes.js';\nimport { styles as shared } from '../styles/themes/shared/grid.common.css.js';\nimport IgcGridLiteCell from './cell.js';\nimport IgcFilterRow from './filter-row.js';\nimport IgcGridLiteHeaderRow from './header-row.js';\nimport IgcGridLiteRow from './row.js';\nimport IgcVirtualizer from './virtualizer.js';\n\n/**\n * Event object for the filtering event of the grid.\n */\nexport interface IgcFilteringEvent<T extends object> {\n /**\n * The target column for the filter operation.\n */\n key: Keys<T>;\n\n /**\n * The filter expression(s) to apply.\n */\n expressions: FilterExpression<T>[];\n\n /**\n * The type of modification which will be applied to the filter\n * state of the column.\n *\n * @remarks\n * `add` - a new filter expression will be added to the state of the column.\n * `modify` - an existing filter expression will be modified.\n * `remove` - the expression(s) will be removed from the state of the column.\n */\n type: 'add' | 'modify' | 'remove';\n}\n\n/**\n * Event object for the filtered event of the grid.\n */\nexport interface IgcFilteredEvent<T extends object> {\n /**\n * The target column for the filter operation.\n */\n key: Keys<T>;\n\n /**\n * The filter state of the column after the operation.\n */\n state: FilterExpression<T>[];\n}\n\n/**\n * Events for the igc-grid-lite.\n */\nexport interface IgcGridLiteEventMap<T extends object> {\n /**\n * Emitted when sorting is initiated through the UI.\n * Returns the sort expression which will be used for the operation.\n *\n * @remarks\n * The event is cancellable which prevents the operation from being applied.\n * The expression can be modified prior to the operation running.\n *\n * @event\n */\n sorting: CustomEvent<SortExpression<T>>;\n /**\n * Emitted when a sort operation initiated through the UI has completed.\n * Returns the sort expression used for the operation.\n *\n * @event\n */\n sorted: CustomEvent<SortExpression<T>>;\n /**\n * Emitted when filtering is initiated through the UI.\n *\n * @remarks\n * The event is cancellable which prevents the operation from being applied.\n * The expression can be modified prior to the operation running.\n *\n * @event\n */\n filtering: CustomEvent<IgcFilteringEvent<T>>;\n /**\n * Emitted when a filter operation initiated through the UI has completed.\n * Returns the filter state for the affected column.\n *\n * @event\n */\n filtered: CustomEvent<IgcFilteredEvent<T>>;\n}\n\n/**\n * IgcGridLite is a web component for displaying data in a tabular format quick and easy.\n *\n * Out of the box it provides row virtualization, sort and filter operations (client and server side),\n * the ability to template cells and headers and column hiding.\n *\n * @element igc-grid-lite\n *\n * @fires sorting - Emitted when sorting is initiated through the UI.\n * @fires sorted - Emitted when a sort operation initiated through the UI has completed.\n * @fires filtering - Emitted when filtering is initiated through the UI.\n * @fires filtered - Emitted when a filter operation initiated through the UI has completed.\n *\n */\nexport class IgcGridLite<T extends object> extends EventEmitterBase<IgcGridLiteEventMap<T>> {\n public static get tagName() {\n return GRID_TAG;\n }\n\n public static override styles = [styles, shared];\n\n public static register() {\n registerComponent(\n IgcGridLite,\n IgcVirtualizer,\n IgcGridLiteRow,\n IgcGridLiteHeaderRow,\n IgcFilterRow,\n IgcButtonComponent,\n IgcChipComponent,\n IgcInputComponent,\n IgcDropdownComponent\n );\n }\n\n protected stateController = new StateController<T>(this);\n protected DOM = new GridDOMController<T>(this, this.stateController);\n protected dataController = new DataOperationsController<T>(this);\n\n protected stateProvider = new ContextProvider(this, {\n context: gridStateContext,\n initialValue: this.stateController,\n });\n\n @query(IgcVirtualizer.tagName)\n protected scrollContainer!: IgcVirtualizer;\n\n @query(IgcGridLiteHeaderRow.tagName)\n protected headerRow!: IgcGridLiteHeaderRow<T>;\n\n @query(IgcFilterRow.tagName)\n protected filterRow!: IgcFilterRow<T>;\n\n @state()\n protected dataState: Array<T> = [];\n\n @queryAll(IgcGridLiteRow.tagName)\n protected _rows!: NodeListOf<IgcGridLiteRow<T>>;\n\n /** Column configuration for the grid. */\n @property({ attribute: false })\n public columns: Array<ColumnConfiguration<T>> = [];\n\n /** The data source for the grid. */\n @property({ attribute: false })\n public data: Array<T> = [];\n\n /**\n * Whether the grid will try to \"resolve\" its column configuration based on the passed\n * data source.\n *\n * @remarks\n * This is usually executed on initial rendering in the DOM. It depends on having an existing data source\n * to infer the column configuration for the grid.\n * Passing an empty data source or having a late bound data source (such as a HTTP request) will usually\n * result in empty column configuration for the grid.\n *\n * This property is ignored if any existing column configuration already exists in the grid.\n *\n * In a scenario where you want to bind a new data source and still keep the auto-generation behavior,\n * make sure to reset the column collection of the grid before passing in the new data source.\n *\n * @example\n * ```typescript\n * // assuming autoGenerate is set to true\n * grid.columns = [];\n * grid.data = [...];\n * ```\n *\n * @attr auto-generate\n */\n @property({ type: Boolean, attribute: 'auto-generate' })\n public autoGenerate = false;\n\n /** Sort configuration property for the grid. */\n @property({ attribute: false })\n public sortConfiguration: GridSortConfiguration = {\n multiple: true,\n triState: true,\n };\n\n /**\n * Configuration object which controls remote data operations for the grid.\n */\n @property({ attribute: false })\n public dataPipelineConfiguration!: DataPipelineConfiguration<T>;\n\n /**\n * Set the sort state for the grid.\n */\n public set sortExpressions(expressions: SortExpression<T>[]) {\n if (expressions.length) {\n this.sort(expressions);\n }\n }\n\n /**\n * Get the sort state for the grid.\n */\n @property({ attribute: false })\n public get sortExpressions(): SortExpression<T>[] {\n return Array.from(this.stateController.sorting.state.values());\n }\n\n /**\n * Set the filter state for the grid.\n */\n public set filterExpressions(expressions: FilterExpression<T>[]) {\n if (expressions.length) {\n this.filter(expressions);\n }\n }\n\n /**\n * Get the filter state for the grid.\n */\n @property({ attribute: false })\n public get filterExpressions(): FilterExpression<T>[] {\n const expressions: FilterExpression<T>[] = [];\n\n for (const each of this.stateController.filtering.state.values) {\n expressions.push(...each.all);\n }\n\n return expressions;\n }\n\n /**\n * Returns the collection of rendered row elements in the grid.\n *\n * @remarks\n * Since the grid has virtualization, this property returns only the currently rendered\n * chunk of elements in the DOM.\n */\n public get rows() {\n return Array.from(this._rows);\n }\n\n /**\n * Returns the state of the data source after sort/filter operations\n * have been applied.\n */\n public get dataView(): ReadonlyArray<T> {\n return this.dataState;\n }\n\n /**\n * The total number of items in the {@link IgcGridLite.dataView} collection.\n */\n public get totalItems() {\n return this.dataState.length;\n }\n\n @watch('columns')\n protected watchColumns(_: ColumnConfiguration<T>[], newConfig: ColumnConfiguration<T>[] = []) {\n this.columns = newConfig.map((config) => ({ ...DEFAULT_COLUMN_CONFIG, ...config }));\n }\n\n @watch('data')\n protected dataChanged() {\n this.dataState = structuredClone(this.data);\n autoGenerateColumns(this);\n\n if (this.hasUpdated) {\n this.pipeline();\n }\n }\n\n @watch(PIPELINE)\n protected async pipeline() {\n this.dataState = await this.dataController.apply(\n structuredClone(this.data),\n this.stateController\n );\n }\n\n constructor() {\n super();\n\n addThemingController(this, all);\n }\n\n /**\n * Performs a filter operation in the grid based on the passed expression(s).\n */\n public filter(config: FilterExpression<T> | FilterExpression<T>[]) {\n this.stateController.filtering.filter(\n asArray(config).map((each) =>\n typeof each.condition === 'string'\n ? // XXX: Types\n Object.assign(each, {\n condition: (getFilterOperandsFor(this.getColumn(each.key)!) as any)[each.condition],\n })\n : each\n )\n );\n }\n\n /**\n * Performs a sort operation in the grid based on the passed expression(s).\n */\n public sort(expressions: SortExpression<T> | SortExpression<T>[]) {\n this.stateController.sorting.sort(expressions);\n }\n\n /**\n * Resets the current sort state of the control.\n */\n public clearSort(key?: Keys<T>) {\n this.stateController.sorting.reset(key);\n this.requestUpdate(PIPELINE);\n }\n\n /**\n * Resets the current filter state of the control.\n */\n public clearFilter(key?: Keys<T>) {\n this.stateController.filtering.reset(key);\n this.requestUpdate(PIPELINE);\n }\n\n /**\n * Returns a {@link ColumnConfiguration} for a given column.\n */\n public getColumn(id: Keys<T> | number) {\n return typeof id === 'number'\n ? this.columns.at(id)\n : this.columns.find(({ key }) => key === id);\n }\n\n /**\n * Updates the column configuration of the grid.\n */\n public updateColumns(columns: ColumnConfiguration<T> | ColumnConfiguration<T>[]) {\n for (const column of asArray(columns)) {\n const instance = this.columns.find((curr) => curr.key === column.key);\n if (instance) {\n Object.assign(instance, column);\n }\n }\n\n this.requestUpdate(PIPELINE);\n }\n\n @eventOptions({ capture: true })\n protected bodyClickHandler(event: MouseEvent) {\n const target = event\n .composedPath()\n .find((el) => el instanceof IgcGridLiteCell) as IgcGridLiteCell<T>;\n if (target) {\n this.stateController.active = {\n column: target.column.key,\n row: target.row.index,\n };\n }\n }\n\n protected bodyKeydownHandler(event: KeyboardEvent) {\n if (this.scrollContainer.isSameNode(event.target as HTMLElement)) {\n this.stateController.navigation.navigate(event);\n }\n }\n\n protected renderHeaderRow() {\n return html`\n <igc-grid-lite-header-row\n style=${styleMap(this.DOM.columnSizes)}\n .columns=${this.columns}\n ></igc-grid-lite-header-row>\n `;\n }\n\n protected renderBody() {\n return html`\n <igc-virtualizer\n .items=${this.dataState}\n .renderItem=${this.DOM.rowRenderer}\n @click=${this.bodyClickHandler}\n @keydown=${this.bodyKeydownHandler}\n ></igc-virtualizer>\n `;\n }\n\n protected renderFilterRow() {\n return this.columns.some((column) => column.filter)\n ? html`<igc-filter-row style=${styleMap(this.DOM.columnSizes)}></igc-filter-row>`\n : nothing;\n }\n\n protected override render() {\n return html`\n ${this.stateController.resizing.renderIndicator()}\n ${this.renderHeaderRow()}\n ${this.renderFilterRow()}\n ${this.renderBody()}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [IgcGridLite.tagName]: IgcGridLite<object>;\n }\n}\n"]}
@@ -11,6 +11,7 @@ export default class IgcGridLiteHeader<T extends object> extends LitElement {
11
11
  protected get resizeController(): import("../controllers/resize.js").ResizeController<T>;
12
12
  state: StateController<T>;
13
13
  column: ColumnConfiguration<T>;
14
+ constructor();
14
15
  protected renderSortPart(): typeof nothing | import("lit-html").TemplateResult<1>;
15
16
  protected renderContentPart(): import("lit-html").TemplateResult<1>;
16
17
  protected renderResizePart(): typeof nothing | import("lit-html").TemplateResult<1>;
@@ -13,7 +13,9 @@ import { MIN_COL_RESIZE_WIDTH, SORT_ICON_ASCENDING, SORT_ICON_DESCENDING, } from
13
13
  import { partNameMap } from '../internal/part-map.js';
14
14
  import { registerComponent } from '../internal/register.js';
15
15
  import { GRID_HEADER_TAG } from '../internal/tags.js';
16
+ import { addThemingController } from '../internal/theming.js';
16
17
  import { styles } from '../styles/header-cell/header-cell.css.js';
18
+ import { all } from '../styles/themes/grid-header-themes.js';
17
19
  export default class IgcGridLiteHeader extends LitElement {
18
20
  static get tagName() {
19
21
  return GRID_HEADER_TAG;
@@ -34,6 +36,10 @@ export default class IgcGridLiteHeader extends LitElement {
34
36
  get resizeController() {
35
37
  return this.state.resizing;
36
38
  }
39
+ constructor() {
40
+ super();
41
+ addThemingController(this, all);
42
+ }
37
43
  #addResizeEventHandlers() {
38
44
  const config = { once: true };
39
45
  this.addEventListener('gotpointercapture', () => {
@@ -1 +1 @@
1
- {"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { IgcIconComponent } from 'igniteui-webcomponents';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport {\n MIN_COL_RESIZE_WIDTH,\n SORT_ICON_ASCENDING,\n SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\n\nexport default class IgcGridLiteHeader<T extends object> extends LitElement {\n public static get tagName() {\n return GRID_HEADER_TAG;\n }\n\n public static override styles = styles;\n\n public static register(): void {\n registerComponent(IgcGridLiteHeader, IgcIconComponent);\n }\n\n protected get context(): IgcHeaderContext<T> {\n return {\n parent: this,\n column: this.column,\n };\n }\n\n protected get isSortable() {\n return Boolean(this.column.sort);\n }\n\n protected get resizeController() {\n return this.state.resizing;\n }\n\n @consume({ context: gridStateContext, subscribe: true })\n @property({ attribute: false })\n public state!: StateController<T>;\n\n @property({ attribute: false })\n public column!: ColumnConfiguration<T>;\n\n #addResizeEventHandlers() {\n const config: AddEventListenerOptions = { once: true };\n\n this.addEventListener(\n 'gotpointercapture',\n () => {\n this.resizeController.indicatorActive = true;\n },\n config\n );\n this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n this.addEventListener('pointermove', this.#handleResize);\n }\n\n #handleClick(e: Event) {\n e.stopPropagation();\n this.state.sorting.sortFromHeaderClick(this.column);\n }\n\n #handleResize = ({ clientX }: PointerEvent) => {\n const { left } = this.getBoundingClientRect();\n const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n const x = this.offsetLeft + width;\n\n this.resizeController.resize(this.column, width, x);\n };\n\n #handleResizeStart(ev: PointerEvent) {\n const { target, pointerId } = ev;\n\n ev.preventDefault();\n\n this.#addResizeEventHandlers();\n this.resizeController.start(this);\n\n (target as HTMLElement).setPointerCapture(pointerId);\n }\n\n #handlePointerLost = () => {\n this.resizeController.indicatorActive = false;\n this.removeEventListener('pointermove', this.#handleResize);\n this.resizeController.stop();\n };\n\n #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n protected renderSortPart() {\n const state = this.state.sorting.state.get(this.column.key);\n const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n const attr = this.state.host.sortConfiguration.multiple\n ? idx > -1\n ? idx + 1\n : nothing\n : nothing;\n const icon = state\n ? state.direction === 'ascending'\n ? SORT_ICON_ASCENDING\n : SORT_ICON_DESCENDING\n : SORT_ICON_ASCENDING;\n\n return state || this.isSortable\n ? html`<span\n part=${partNameMap({ action: true, sorted: !!state?.direction })}\n @click=${this.isSortable ? this.#handleClick : nothing}\n >\n <igc-icon\n part=${partNameMap({ 'sorting-action': !!state })}\n data-sortIndex=${attr}\n name=${icon}\n collection=\"internal\"\n ></igc-icon>\n </span>`\n : nothing;\n }\n\n protected renderContentPart() {\n const defaultContent = this.column.headerText ?? this.column.key;\n const template = this.column.headerTemplate;\n\n return html`\n <span part=\"title\">\n <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n </span>\n `;\n }\n\n protected renderResizePart() {\n return this.column.resizable\n ? html`<span\n part=\"resizable\"\n @dblclick=${this.#handleAutosize}\n @pointerdown=${this.#handleResizeStart}\n ></span>`\n : nothing;\n }\n\n protected override render() {\n return html`\n <div\n part=${partNameMap({\n content: true,\n sortable: this.isSortable,\n resizing: this.resizeController.indicatorActive,\n })}\n >\n ${this.renderContentPart()}\n <div part=\"actions\">${this.renderSortPart()}</div>\n </div>\n ${this.renderResizePart()}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;\n }\n}\n"]}
1
+ {"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { IgcIconComponent } from 'igniteui-webcomponents';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport {\n MIN_COL_RESIZE_WIDTH,\n SORT_ICON_ASCENDING,\n SORT_ICON_DESCENDING,\n} from '../internal/constants.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport { addThemingController } from '../internal/theming.js';\nimport type { ColumnConfiguration, IgcHeaderContext } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\nimport { all } from '../styles/themes/grid-header-themes.js';\n\nexport default class IgcGridLiteHeader<T extends object> extends LitElement {\n public static get tagName() {\n return GRID_HEADER_TAG;\n }\n\n public static override styles = styles;\n\n public static register(): void {\n registerComponent(IgcGridLiteHeader, IgcIconComponent);\n }\n\n protected get context(): IgcHeaderContext<T> {\n return {\n parent: this,\n column: this.column,\n };\n }\n\n protected get isSortable() {\n return Boolean(this.column.sort);\n }\n\n protected get resizeController() {\n return this.state.resizing;\n }\n\n @consume({ context: gridStateContext, subscribe: true })\n @property({ attribute: false })\n public state!: StateController<T>;\n\n @property({ attribute: false })\n public column!: ColumnConfiguration<T>;\n\n constructor() {\n super();\n\n addThemingController(this, all);\n }\n #addResizeEventHandlers() {\n const config: AddEventListenerOptions = { once: true };\n\n this.addEventListener(\n 'gotpointercapture',\n () => {\n this.resizeController.indicatorActive = true;\n },\n config\n );\n this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n this.addEventListener('pointermove', this.#handleResize);\n }\n\n #handleClick(e: Event) {\n e.stopPropagation();\n this.state.sorting.sortFromHeaderClick(this.column);\n }\n\n #handleResize = ({ clientX }: PointerEvent) => {\n const { left } = this.getBoundingClientRect();\n const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n const x = this.offsetLeft + width;\n\n this.resizeController.resize(this.column, width, x);\n };\n\n #handleResizeStart(ev: PointerEvent) {\n const { target, pointerId } = ev;\n\n ev.preventDefault();\n\n this.#addResizeEventHandlers();\n this.resizeController.start(this);\n\n (target as HTMLElement).setPointerCapture(pointerId);\n }\n\n #handlePointerLost = () => {\n this.resizeController.indicatorActive = false;\n this.removeEventListener('pointermove', this.#handleResize);\n this.resizeController.stop();\n };\n\n #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n protected renderSortPart() {\n const state = this.state.sorting.state.get(this.column.key);\n const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n const attr = this.state.host.sortConfiguration.multiple\n ? idx > -1\n ? idx + 1\n : nothing\n : nothing;\n const icon = state\n ? state.direction === 'ascending'\n ? SORT_ICON_ASCENDING\n : SORT_ICON_DESCENDING\n : SORT_ICON_ASCENDING;\n\n return state || this.isSortable\n ? html`<span\n part=${partNameMap({ action: true, sorted: !!state?.direction })}\n @click=${this.isSortable ? this.#handleClick : nothing}\n >\n <igc-icon\n part=${partNameMap({ 'sorting-action': !!state })}\n data-sortIndex=${attr}\n name=${icon}\n collection=\"internal\"\n ></igc-icon>\n </span>`\n : nothing;\n }\n\n protected renderContentPart() {\n const defaultContent = this.column.headerText ?? this.column.key;\n const template = this.column.headerTemplate;\n\n return html`\n <span part=\"title\">\n <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n </span>\n `;\n }\n\n protected renderResizePart() {\n return this.column.resizable\n ? html`<span\n part=\"resizable\"\n @dblclick=${this.#handleAutosize}\n @pointerdown=${this.#handleResizeStart}\n ></span>`\n : nothing;\n }\n\n protected override render() {\n return html`\n <div\n part=${partNameMap({\n content: true,\n sortable: this.isSortable,\n resizing: this.resizeController.indicatorActive,\n })}\n >\n ${this.renderContentPart()}\n <div part=\"actions\">${this.renderSortPart()}</div>\n </div>\n ${this.renderResizePart()}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [IgcGridLiteHeader.tagName]: IgcGridLiteHeader<object>;\n }\n}\n"]}
@@ -1,18 +1,22 @@
1
1
  :root {
2
- --light-hl-0: #008000;
3
- --dark-hl-0: #6A9955;
4
- --light-hl-1: #001080;
5
- --dark-hl-1: #9CDCFE;
6
- --light-hl-2: #000000;
7
- --dark-hl-2: #D4D4D4;
8
- --light-hl-3: #800000;
9
- --dark-hl-3: #808080;
2
+ --light-hl-0: #795E26;
3
+ --dark-hl-0: #DCDCAA;
4
+ --light-hl-1: #000000;
5
+ --dark-hl-1: #D4D4D4;
6
+ --light-hl-2: #A31515;
7
+ --dark-hl-2: #CE9178;
8
+ --light-hl-3: #AF00DB;
9
+ --dark-hl-3: #C586C0;
10
10
  --light-hl-4: #800000;
11
- --dark-hl-4: #569CD6;
12
- --light-hl-5: #000000FF;
13
- --dark-hl-5: #D4D4D4;
14
- --light-hl-6: #A31515;
15
- --dark-hl-6: #CE9178;
11
+ --dark-hl-4: #808080;
12
+ --light-hl-5: #800000;
13
+ --dark-hl-5: #569CD6;
14
+ --light-hl-6: #008000;
15
+ --dark-hl-6: #6A9955;
16
+ --light-hl-7: #001080;
17
+ --dark-hl-7: #9CDCFE;
18
+ --light-hl-8: #000000FF;
19
+ --dark-hl-8: #D4D4D4;
16
20
  --light-code-background: #FFFFFF;
17
21
  --dark-code-background: #1E1E1E;
18
22
  }
@@ -25,6 +29,8 @@
25
29
  --hl-4: var(--light-hl-4);
26
30
  --hl-5: var(--light-hl-5);
27
31
  --hl-6: var(--light-hl-6);
32
+ --hl-7: var(--light-hl-7);
33
+ --hl-8: var(--light-hl-8);
28
34
  --code-background: var(--light-code-background);
29
35
  } }
30
36
 
@@ -36,6 +42,8 @@
36
42
  --hl-4: var(--dark-hl-4);
37
43
  --hl-5: var(--dark-hl-5);
38
44
  --hl-6: var(--dark-hl-6);
45
+ --hl-7: var(--dark-hl-7);
46
+ --hl-8: var(--dark-hl-8);
39
47
  --code-background: var(--dark-code-background);
40
48
  } }
41
49
 
@@ -47,6 +55,8 @@
47
55
  --hl-4: var(--light-hl-4);
48
56
  --hl-5: var(--light-hl-5);
49
57
  --hl-6: var(--light-hl-6);
58
+ --hl-7: var(--light-hl-7);
59
+ --hl-8: var(--light-hl-8);
50
60
  --code-background: var(--light-code-background);
51
61
  }
52
62
 
@@ -58,6 +68,8 @@
58
68
  --hl-4: var(--dark-hl-4);
59
69
  --hl-5: var(--dark-hl-5);
60
70
  --hl-6: var(--dark-hl-6);
71
+ --hl-7: var(--dark-hl-7);
72
+ --hl-8: var(--dark-hl-8);
61
73
  --code-background: var(--dark-code-background);
62
74
  }
63
75
 
@@ -68,4 +80,6 @@
68
80
  .hl-4 { color: var(--hl-4); }
69
81
  .hl-5 { color: var(--hl-5); }
70
82
  .hl-6 { color: var(--hl-6); }
83
+ .hl-7 { color: var(--hl-7); }
84
+ .hl-8 { color: var(--hl-8); }
71
85
  pre, code { background: var(--code-background); }