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.
- package/README.md +234 -9
- package/components/grid.d.ts +1 -1
- package/components/grid.js +4 -3
- package/components/grid.js.map +1 -1
- package/components/header.d.ts +1 -0
- package/components/header.js +6 -0
- package/components/header.js.map +1 -1
- package/docs/assets/highlight.css +27 -13
- package/docs/assets/main.js +2 -2
- package/docs/classes/IgcGridLite.html +20 -20
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +193 -11
- package/docs/interfaces/BaseColumnConfiguration.html +11 -11
- package/docs/interfaces/BaseColumnSortConfiguration.html +4 -4
- package/docs/interfaces/BaseFilterExpression.html +6 -6
- package/docs/interfaces/BaseIgcCellContext.html +6 -6
- package/docs/interfaces/BaseSortExpression.html +4 -4
- package/docs/interfaces/ColumnFilterConfiguration.html +3 -3
- package/docs/interfaces/DataPipelineConfiguration.html +4 -4
- package/docs/interfaces/GridSortConfiguration.html +4 -4
- package/docs/interfaces/IgcFilteredEvent.html +4 -4
- package/docs/interfaces/IgcFilteringEvent.html +5 -5
- package/docs/interfaces/IgcGridLiteEventMap.html +5 -5
- package/docs/interfaces/IgcHeaderContext.html +4 -4
- package/docs/media/LICENSE +9 -0
- package/docs/modules.html +1 -1
- package/docs/types/BasePropertyType.html +2 -2
- package/docs/types/BaseSortComparer.html +2 -2
- package/docs/types/ColumnConfiguration.html +2 -2
- package/docs/types/ColumnSortConfiguration.html +2 -2
- package/docs/types/DataPipelineHook.html +2 -2
- package/docs/types/DataPipelineParams.html +5 -5
- package/docs/types/DataType.html +2 -2
- package/docs/types/FilterCriteria.html +2 -2
- package/docs/types/FilterExpression.html +2 -2
- package/docs/types/IgcCellContext.html +2 -2
- package/docs/types/Keys.html +2 -2
- package/docs/types/PropertyType.html +2 -2
- package/docs/types/SortComparer.html +2 -2
- package/docs/types/SortExpression.html +2 -2
- package/docs/types/SortState.html +2 -2
- package/docs/types/SortingDirection.html +2 -2
- package/internal/theming.js +5 -7
- package/internal/theming.js.map +1 -1
- package/operations/filter/tree.d.ts +1 -1
- package/package.json +2 -2
- package/styles/_common.css.js +1 -1
- package/styles/_common.css.js.map +1 -1
- package/styles/body-cell/body-cell.css.js +1 -1
- package/styles/body-cell/body-cell.css.js.map +1 -1
- package/styles/body-row/body-row.css.js +1 -1
- package/styles/body-row/body-row.css.js.map +1 -1
- package/styles/filter-row/filter-row.css.js +1 -1
- package/styles/filter-row/filter-row.css.js.map +1 -1
- package/styles/header-cell/header-cell.css.js +1 -1
- package/styles/header-cell/header-cell.css.js.map +1 -1
- package/styles/header-row/header-row.base.css.js +1 -1
- package/styles/header-row/header-row.base.css.js.map +1 -1
- package/styles/themes/dark/_themes.css.js +3 -0
- package/styles/themes/dark/_themes.css.js.map +1 -0
- package/styles/themes/dark/grid.bootstrap.css.js +3 -0
- package/styles/themes/dark/grid.bootstrap.css.js.map +1 -0
- package/styles/themes/dark/grid.fluent.css.js +3 -0
- package/styles/themes/dark/grid.fluent.css.js.map +1 -0
- package/styles/themes/dark/grid.indigo.css.js +3 -0
- package/styles/themes/dark/grid.indigo.css.js.map +1 -0
- package/styles/themes/dark/grid.material.css.js +3 -0
- package/styles/themes/dark/grid.material.css.js.map +1 -0
- package/styles/themes/grid-header-themes.d.ts +2 -0
- package/styles/themes/grid-header-themes.js +21 -0
- package/styles/themes/grid-header-themes.js.map +1 -0
- package/styles/themes/grid-themes.d.ts +2 -0
- package/styles/{grid/themes/themes.js → themes/grid-themes.js} +17 -9
- package/styles/themes/grid-themes.js.map +1 -0
- package/styles/themes/grid.base.css.js +3 -0
- package/styles/themes/grid.base.css.js.map +1 -0
- package/styles/themes/light/_themes.css.js +3 -0
- package/styles/themes/light/_themes.css.js.map +1 -0
- package/styles/themes/light/grid.bootstrap.css.js +3 -0
- package/styles/themes/light/grid.bootstrap.css.js.map +1 -0
- package/styles/themes/light/grid.fluent.css.js +3 -0
- package/styles/themes/light/grid.fluent.css.js.map +1 -0
- package/styles/themes/light/grid.indigo.css.d.ts +1 -0
- package/styles/themes/light/grid.indigo.css.js +3 -0
- package/styles/themes/light/grid.indigo.css.js.map +1 -0
- package/styles/themes/light/grid.material.css.d.ts +1 -0
- package/styles/themes/light/grid.material.css.js +3 -0
- package/styles/themes/light/grid.material.css.js.map +1 -0
- package/styles/themes/light/grid.shared.css.d.ts +1 -0
- package/styles/themes/light/grid.shared.css.js +3 -0
- package/styles/themes/light/grid.shared.css.js.map +1 -0
- package/styles/themes/shared/grid.common.css.d.ts +1 -0
- package/styles/themes/shared/grid.common.css.js +3 -0
- package/styles/themes/shared/grid.common.css.js.map +1 -0
- package/styles/themes/shared/header.bootstrap.css.d.ts +1 -0
- package/styles/themes/shared/header.bootstrap.css.js +3 -0
- package/styles/themes/shared/header.bootstrap.css.js.map +1 -0
- package/styles/themes/shared/header.fluent.css.d.ts +1 -0
- package/styles/themes/shared/header.fluent.css.js +3 -0
- package/styles/themes/shared/header.fluent.css.js.map +1 -0
- package/styles/grid/themes/dark/grid.bootstrap.css.js +0 -3
- package/styles/grid/themes/dark/grid.bootstrap.css.js.map +0 -1
- package/styles/grid/themes/dark/grid.fluent.css.js +0 -3
- package/styles/grid/themes/dark/grid.fluent.css.js.map +0 -1
- package/styles/grid/themes/dark/grid.indigo.css.js +0 -3
- package/styles/grid/themes/dark/grid.indigo.css.js.map +0 -1
- package/styles/grid/themes/dark/grid.material.css.js +0 -3
- package/styles/grid/themes/dark/grid.material.css.js.map +0 -1
- package/styles/grid/themes/grid.base.css.js +0 -3
- package/styles/grid/themes/grid.base.css.js.map +0 -1
- package/styles/grid/themes/light/grid.bootstrap.css.js +0 -3
- package/styles/grid/themes/light/grid.bootstrap.css.js.map +0 -1
- package/styles/grid/themes/light/grid.fluent.css.js +0 -3
- package/styles/grid/themes/light/grid.fluent.css.js.map +0 -1
- package/styles/grid/themes/light/grid.indigo.css.js +0 -3
- package/styles/grid/themes/light/grid.indigo.css.js.map +0 -1
- package/styles/grid/themes/light/grid.material.css.js +0 -3
- package/styles/grid/themes/light/grid.material.css.js.map +0 -1
- package/styles/grid/themes/themes.d.ts +0 -2
- package/styles/grid/themes/themes.js.map +0 -1
- /package/styles/{grid/themes/dark/grid.bootstrap.css.d.ts → themes/dark/_themes.css.d.ts} +0 -0
- /package/styles/{grid/themes/light → themes/dark}/grid.bootstrap.css.d.ts +0 -0
- /package/styles/{grid/themes → themes}/dark/grid.fluent.css.d.ts +0 -0
- /package/styles/{grid/themes → themes}/dark/grid.indigo.css.d.ts +0 -0
- /package/styles/{grid/themes → themes}/dark/grid.material.css.d.ts +0 -0
- /package/styles/{grid/themes → themes}/grid.base.css.d.ts +0 -0
- /package/styles/{grid/themes/light/grid.fluent.css.d.ts → themes/light/_themes.css.d.ts} +0 -0
- /package/styles/{grid/themes/light/grid.indigo.css.d.ts → themes/light/grid.bootstrap.css.d.ts} +0 -0
- /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
|
[](https://github.com/IgniteUI/igniteui-grid-lite/actions/workflows/node.js.yml)
|
|
3
3
|
[](https://coveralls.io/github/IgniteUI/igniteui-grid-lite?branch=master)
|
|
4
|
+
[](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
|
-
|
|
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
|
-
##
|
|
21
|
+
## Features
|
|
9
22
|
|
|
10
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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"
|
package/components/grid.d.ts
CHANGED
|
@@ -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>;
|
package/components/grid.js
CHANGED
|
@@ -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/
|
|
23
|
-
import { all } from '../styles/
|
|
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
|
}
|
package/components/grid.js.map
CHANGED
|
@@ -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":";;;;;;AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,GAClB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAO9D,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC1F,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,MAAM,IAAI,MAAM,EAAE,MAAM,4CAA4C,CAAC;AAC9E,OAAO,eAAe,MAAM,WAAW,CAAC;AACxC,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,oBAAoB,MAAM,iBAAiB,CAAC;AACnD,OAAO,cAAc,MAAM,UAAU,CAAC;AACtC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAkG9C,MAAM,OAAO,WAA8B,SAAQ,gBAAwC;IAClF,MAAM,KAAK,OAAO;QACvB,OAAO,QAAQ,CAAC;IAClB,CAAC;aAEsB,WAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnB,CAAoB;IAE1C,MAAM,CAAC,QAAQ;QACpB,iBAAiB,CACf,WAAW,EACX,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,CACrB,CAAC;IACJ,CAAC;IA6ED,IAAW,eAAe,CAAC,WAAgC;QACzD,IAAI,WAAW,CAAC,MAAM,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAMD,IAAW,eAAe;QACxB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,CAAC;IAKD,IAAW,iBAAiB,CAAC,WAAkC;QAC7D,IAAI,WAAW,CAAC,MAAM,EAAE,CAAC;YACvB,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;IAMD,IAAW,iBAAiB;QAC1B,MAAM,WAAW,GAA0B,EAAE,CAAC;QAE9C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAC/D,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;QAED,OAAO,WAAW,CAAC;IACrB,CAAC;IASD,IAAW,IAAI;QACb,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChC,CAAC;IAMD,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAKD,IAAW,UAAU;QACnB,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;IAC/B,CAAC;IAGS,YAAY,CAAC,CAA2B,EAAE,YAAsC,EAAE;QAC1F,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,qBAAqB,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;IACtF,CAAC;IAGS,WAAW;QACnB,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5C,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAE1B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC;IACH,CAAC;IAGe,AAAN,KAAK,CAAC,QAAQ;QACtB,IAAI,CAAC,SAAS,GAAG,MAAM,IAAI,CAAC,cAAc,CAAC,KAAK,CAC9C,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAC1B,IAAI,CAAC,eAAe,CACrB,CAAC;IACJ,CAAC;IAED;QACE,KAAK,EAAE,CAAC;QAlKA,oBAAe,GAAG,IAAI,eAAe,CAAI,IAAI,CAAC,CAAC;QAC/C,QAAG,GAAG,IAAI,iBAAiB,CAAI,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC3D,mBAAc,GAAG,IAAI,wBAAwB,CAAI,IAAI,CAAC,CAAC;QAEvD,kBAAa,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE;YAClD,OAAO,EAAE,gBAAgB;YACzB,YAAY,EAAE,IAAI,CAAC,eAAe;SACnC,CAAC,CAAC;QAYO,cAAS,GAAa,EAAE,CAAC;QAO5B,YAAO,GAAkC,EAAE,CAAC;QAI5C,SAAI,GAAa,EAAE,CAAC;QA2BpB,iBAAY,GAAG,KAAK,CAAC;QAIrB,sBAAiB,GAA0B;YAChD,QAAQ,EAAE,IAAI;YACd,QAAQ,EAAE,IAAI;SACf,CAAC;QAoGA,oBAAoB,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;IAClC,CAAC;IAKM,MAAM,CAAC,MAAmD;QAC/D,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CACnC,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC3B,OAAO,IAAI,CAAC,SAAS,KAAK,QAAQ;YAChC,CAAC;gBACC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;oBAClB,SAAS,EAAG,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAE,CAAS,CAAC,IAAI,CAAC,SAAS,CAAC;iBACpF,CAAC;YACJ,CAAC,CAAC,IAAI,CACT,CACF,CAAC;IACJ,CAAC;IAKM,IAAI,CAAC,WAAoD;QAC9D,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACjD,CAAC;IAKM,SAAS,CAAC,GAAa;QAC5B,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACxC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAKM,WAAW,CAAC,GAAa;QAC9B,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QAC1C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAKM,SAAS,CAAC,EAAoB;QACnC,OAAO,OAAO,EAAE,KAAK,QAAQ;YAC3B,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;YACrB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC;IACjD,CAAC;IAKM,aAAa,CAAC,OAA0D;QAC7E,KAAK,MAAM,MAAM,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;YACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,CAAC,CAAC;YACtE,IAAI,QAAQ,EAAE,CAAC;gBACb,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC/B,CAAC;IAGS,gBAAgB,CAAC,KAAiB;QAC1C,MAAM,MAAM,GAAG,KAAK;aACjB,YAAY,EAAE;aACd,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,YAAY,eAAe,CAAuB,CAAC;QACrE,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG;gBAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG;gBACzB,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK;aACtB,CAAC;QACJ,CAAC;IACH,CAAC;IAES,kBAAkB,CAAC,KAAoB;QAC/C,IAAI,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,KAAK,CAAC,MAAqB,CAAC,EAAE,CAAC;YACjE,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClD,CAAC;IACH,CAAC;IAES,eAAe;QACvB,OAAO,IAAI,CAAA;;cAED,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC;iBAC3B,IAAI,CAAC,OAAO;;KAExB,CAAC;IACJ,CAAC;IAES,UAAU;QAClB,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,SAAS;sBACT,IAAI,CAAC,GAAG,CAAC,WAAW;iBACzB,IAAI,CAAC,gBAAgB;mBACnB,IAAI,CAAC,kBAAkB;;KAErC,CAAC;IACJ,CAAC;IAES,eAAe;QACvB,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;YACjD,CAAC,CAAC,IAAI,CAAA,yBAAyB,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC,oBAAoB;YACjF,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,eAAe,EAAE;QAC/C,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,UAAU,EAAE;KACpB,CAAC;IACJ,CAAC;;AA/QS;IADT,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;oDACa;AAGjC;IADT,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC;8CACU;AAGpC;IADT,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;8CACU;AAG5B;IADT,KAAK,EAAE;8CAC2B;AAGzB;IADT,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC;0CACe;AAIzC;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;4CACoB;AAI5C;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;yCACJ;AA2BpB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;iDAC5B;AAIrB;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;sDAI7B;AAMK;IADN,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;8DACiC;AAehE;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;kDAG9B;AAeD;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;oDAS9B;AA6BS;IADT,KAAK,CAAC,SAAS,CAAC;+CAGhB;AAGS;IADT,KAAK,CAAC,MAAM,CAAC;8CAQb;AAGe;IADf,KAAK,CAAC,QAAQ,CAAC;2CAMf;AAuES;IADT,YAAY,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAW/B","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"]}
|
package/components/header.d.ts
CHANGED
|
@@ -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>;
|
package/components/header.js
CHANGED
|
@@ -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', () => {
|
package/components/header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAwB,MAAM,yBAAyB,CAAC;AACjF,OAAO,EACL,oBAAoB,EACpB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;
|
|
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: #
|
|
3
|
-
--dark-hl-0: #
|
|
4
|
-
--light-hl-1: #
|
|
5
|
-
--dark-hl-1: #
|
|
6
|
-
--light-hl-2: #
|
|
7
|
-
--dark-hl-2: #
|
|
8
|
-
--light-hl-3: #
|
|
9
|
-
--dark-hl-3: #
|
|
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: #
|
|
12
|
-
--light-hl-5: #
|
|
13
|
-
--dark-hl-5: #
|
|
14
|
-
--light-hl-6: #
|
|
15
|
-
--dark-hl-6: #
|
|
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); }
|