@polygrid/angular 0.0.3 → 0.0.4
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/dist/fesm2022/polygrid-angular.mjs +87 -0
- package/dist/fesm2022/polygrid-angular.mjs.map +1 -0
- package/dist/types/polygrid-angular.d.ts +27 -0
- package/package.json +4 -1
- package/ng-package.json +0 -7
- package/src/lib/components/grid/poly-grid.css +0 -10
- package/src/lib/components/grid/poly-grid.html +0 -1
- package/src/lib/components/grid/poly-grid.ts +0 -66
- package/src/lib/effects/column.ts +0 -12
- package/src/lib/effects/data.ts +0 -11
- package/src/lib/effects/grid-id.ts +0 -11
- package/src/lib/effects/index.ts +0 -3
- package/src/lib/modules/poly-grid.ts +0 -9
- package/src/public-api.ts +0 -2
- package/tsconfig.lib.json +0 -11
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { effect, input, inject, Injector, runInInjectionContext, ViewChild, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
|
|
3
|
+
import { CommonModule } from '@angular/common';
|
|
4
|
+
import { PolyGrid } from '@polygrid/core/engine/core/grid';
|
|
5
|
+
|
|
6
|
+
function gridIdInputEffect(value, grid) {
|
|
7
|
+
return effect(() => {
|
|
8
|
+
if (grid)
|
|
9
|
+
grid.api.setGridId(value());
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function dataInputEffect(value, grid) {
|
|
14
|
+
return effect(() => {
|
|
15
|
+
if (grid)
|
|
16
|
+
grid.api.setData(value());
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function columnInputEffect(value, grid) {
|
|
21
|
+
return effect(() => {
|
|
22
|
+
if (grid)
|
|
23
|
+
grid.api.setColumns(value());
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
class PolyGridComponent {
|
|
28
|
+
grid = null;
|
|
29
|
+
hostRef;
|
|
30
|
+
// inputs
|
|
31
|
+
id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
32
|
+
columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
|
|
33
|
+
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
34
|
+
// reactive effects
|
|
35
|
+
gridIdEffect;
|
|
36
|
+
dataEffect;
|
|
37
|
+
columnEffect;
|
|
38
|
+
injector = inject(Injector);
|
|
39
|
+
ngAfterViewInit() {
|
|
40
|
+
const host = this.hostRef.nativeElement;
|
|
41
|
+
const options = {
|
|
42
|
+
id: this.id(),
|
|
43
|
+
columns: this.columns(),
|
|
44
|
+
data: this.data(),
|
|
45
|
+
};
|
|
46
|
+
this.grid = new PolyGrid(host, options);
|
|
47
|
+
runInInjectionContext(this.injector, () => {
|
|
48
|
+
this.gridIdEffect = gridIdInputEffect(this.id, this.grid);
|
|
49
|
+
this.dataEffect = dataInputEffect(this.data, this.grid);
|
|
50
|
+
this.columnEffect = columnInputEffect(this.columns, this.grid);
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
ngOnDestroy() {
|
|
54
|
+
this.grid?.destroy();
|
|
55
|
+
this.grid = null;
|
|
56
|
+
}
|
|
57
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PolyGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
58
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.6", type: PolyGridComponent, isStandalone: true, selector: "pg-grid", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "hostRef", first: true, predicate: ["host"], descendants: true, static: true }], ngImport: i0, template: "<div #host class=\"pg-host\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%}.pg-host{width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
59
|
+
}
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: PolyGridComponent, decorators: [{
|
|
61
|
+
type: Component,
|
|
62
|
+
args: [{ selector: "pg-grid", imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #host class=\"pg-host\"></div>\r\n", styles: [":host{display:block;width:100%;height:100%}.pg-host{width:100%;height:100%}\n"] }]
|
|
63
|
+
}], propDecorators: { hostRef: [{
|
|
64
|
+
type: ViewChild,
|
|
65
|
+
args: ["host", { static: true }]
|
|
66
|
+
}], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
67
|
+
|
|
68
|
+
class POLY_GRID {
|
|
69
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: POLY_GRID, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
70
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: POLY_GRID, imports: [PolyGridComponent], exports: [PolyGridComponent] });
|
|
71
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: POLY_GRID, imports: [PolyGridComponent] });
|
|
72
|
+
}
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: POLY_GRID, decorators: [{
|
|
74
|
+
type: NgModule,
|
|
75
|
+
args: [{
|
|
76
|
+
imports: [PolyGridComponent],
|
|
77
|
+
exports: [PolyGridComponent],
|
|
78
|
+
providers: [],
|
|
79
|
+
}]
|
|
80
|
+
}] });
|
|
81
|
+
|
|
82
|
+
/**
|
|
83
|
+
* Generated bundle index. Do not edit.
|
|
84
|
+
*/
|
|
85
|
+
|
|
86
|
+
export { POLY_GRID, PolyGridComponent };
|
|
87
|
+
//# sourceMappingURL=polygrid-angular.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"polygrid-angular.mjs","sources":["../../src/lib/effects/grid-id.ts","../../src/lib/effects/data.ts","../../src/lib/effects/column.ts","../../src/lib/components/grid/poly-grid.ts","../../src/lib/components/grid/poly-grid.html","../../src/lib/modules/poly-grid.ts","../../src/polygrid-angular.ts"],"sourcesContent":["import { effect, EffectRef, Signal } from \"@angular/core\";\r\nimport { PolyGrid } from \"@polygrid/core/engine/core/grid\";\r\n\r\nexport function gridIdInputEffect(\r\n value: Signal<string>,\r\n grid: PolyGrid\r\n): EffectRef {\r\n return effect(() => {\r\n if (grid) grid.api.setGridId(value());\r\n });\r\n}\r\n","import { effect, EffectRef, Signal } from \"@angular/core\";\r\nimport { PolyGrid } from \"@polygrid/core/engine/core/grid\";\r\n\r\nexport function dataInputEffect(\r\n value: Signal<any[]>,\r\n grid: PolyGrid\r\n): EffectRef {\r\n return effect(() => {\r\n if (grid) grid.api.setData(value());\r\n });\r\n}\r\n","import { effect, EffectRef, Signal } from \"@angular/core\";\r\nimport { PolyGrid } from \"@polygrid/core/engine/core/grid\";\r\nimport { PolyGridColumn } from \"@polygrid/core/engine/services/column/interfaces/column\";\r\n\r\nexport function columnInputEffect(\r\n value: Signal<PolyGridColumn[]>,\r\n grid: PolyGrid\r\n): EffectRef {\r\n return effect(() => {\r\n if (grid) grid.api.setColumns(value());\r\n });\r\n}\r\n","import {\r\n AfterViewInit,\r\n ChangeDetectionStrategy,\r\n Component,\r\n EffectRef,\r\n ElementRef,\r\n inject,\r\n Injector,\r\n input,\r\n OnDestroy,\r\n runInInjectionContext,\r\n ViewChild,\r\n} from \"@angular/core\";\r\nimport { CommonModule } from \"@angular/common\";\r\nimport * as effects from \"../../effects/index\";\r\nimport { PolyGrid } from \"@polygrid/core/engine/core/grid\";\r\nimport { PolyGridColumn } from \"@polygrid/core/engine/services/column/interfaces/column\";\r\nimport { PolyGridOptions } from \"@polygrid/core/engine/core/interfaces/grid-options\";\r\n\r\n@Component({\r\n selector: \"pg-grid\",\r\n imports: [CommonModule],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n templateUrl: \"./poly-grid.html\",\r\n styleUrl: \"./poly-grid.css\",\r\n})\r\nexport class PolyGridComponent implements AfterViewInit, OnDestroy {\r\n private grid: PolyGrid | null = null;\r\n\r\n @ViewChild(\"host\", { static: true }) hostRef!: ElementRef<HTMLDivElement>;\r\n\r\n // inputs\r\n id = input.required<string>();\r\n columns = input<PolyGridColumn[]>([]);\r\n data = input<any[]>([]);\r\n\r\n // reactive effects\r\n gridIdEffect!: EffectRef;\r\n dataEffect!: EffectRef;\r\n columnEffect!: EffectRef;\r\n\r\n private injector = inject(Injector);\r\n\r\n ngAfterViewInit(): void {\r\n const host = this.hostRef.nativeElement;\r\n\r\n const options: PolyGridOptions = {\r\n id: this.id(),\r\n columns: this.columns(),\r\n data: this.data(),\r\n };\r\n\r\n this.grid = new PolyGrid(host, options);\r\n\r\n runInInjectionContext(this.injector, () => {\r\n this.gridIdEffect = effects.gridIdInputEffect(this.id, this.grid!);\r\n this.dataEffect = effects.dataInputEffect(this.data, this.grid!);\r\n this.columnEffect = effects.columnInputEffect(this.columns, this.grid!);\r\n });\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.grid?.destroy();\r\n this.grid = null;\r\n }\r\n}\r\n","<div #host class=\"pg-host\"></div>\r\n","import { NgModule } from \"@angular/core\";\r\nimport { PolyGridComponent } from \"../../public-api\";\r\n\r\n@NgModule({\r\n imports: [PolyGridComponent],\r\n exports: [PolyGridComponent],\r\n providers: [],\r\n})\r\nexport class POLY_GRID {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["effects.gridIdInputEffect","effects.dataInputEffect","effects.columnInputEffect"],"mappings":"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"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { AfterViewInit, OnDestroy, ElementRef, EffectRef } from '@angular/core';
|
|
3
|
+
import { PolyGridColumn } from '@polygrid/core/engine/services/column/interfaces/column';
|
|
4
|
+
|
|
5
|
+
declare class PolyGridComponent implements AfterViewInit, OnDestroy {
|
|
6
|
+
private grid;
|
|
7
|
+
hostRef: ElementRef<HTMLDivElement>;
|
|
8
|
+
id: i0.InputSignal<string>;
|
|
9
|
+
columns: i0.InputSignal<PolyGridColumn[]>;
|
|
10
|
+
data: i0.InputSignal<any[]>;
|
|
11
|
+
gridIdEffect: EffectRef;
|
|
12
|
+
dataEffect: EffectRef;
|
|
13
|
+
columnEffect: EffectRef;
|
|
14
|
+
private injector;
|
|
15
|
+
ngAfterViewInit(): void;
|
|
16
|
+
ngOnDestroy(): void;
|
|
17
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<PolyGridComponent, never>;
|
|
18
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<PolyGridComponent, "pg-grid", never, { "id": { "alias": "id"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
declare class POLY_GRID {
|
|
22
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<POLY_GRID, never>;
|
|
23
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<POLY_GRID, never, [typeof PolyGridComponent], [typeof PolyGridComponent]>;
|
|
24
|
+
static ɵinj: i0.ɵɵInjectorDeclaration<POLY_GRID>;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export { POLY_GRID, PolyGridComponent };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@polygrid/angular",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": "^21.0.6",
|
|
6
6
|
"@angular/common": "^21.0.6",
|
|
@@ -17,6 +17,9 @@
|
|
|
17
17
|
"entryFile": "src/public-api.ts"
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
|
+
"files": [
|
|
21
|
+
"dist/**/*"
|
|
22
|
+
],
|
|
20
23
|
"scripts": {
|
|
21
24
|
"build": "ng-packagr -p ng-package.json"
|
|
22
25
|
}
|
package/ng-package.json
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<div #host class="pg-host"></div>
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
AfterViewInit,
|
|
3
|
-
ChangeDetectionStrategy,
|
|
4
|
-
Component,
|
|
5
|
-
EffectRef,
|
|
6
|
-
ElementRef,
|
|
7
|
-
inject,
|
|
8
|
-
Injector,
|
|
9
|
-
input,
|
|
10
|
-
OnDestroy,
|
|
11
|
-
runInInjectionContext,
|
|
12
|
-
ViewChild,
|
|
13
|
-
} from "@angular/core";
|
|
14
|
-
import { CommonModule } from "@angular/common";
|
|
15
|
-
import * as effects from "../../effects/index";
|
|
16
|
-
import { PolyGrid } from "@polygrid/core/engine/core/grid";
|
|
17
|
-
import { PolyGridColumn } from "@polygrid/core/engine/services/column/interfaces/column";
|
|
18
|
-
import { PolyGridOptions } from "@polygrid/core/engine/core/interfaces/grid-options";
|
|
19
|
-
|
|
20
|
-
@Component({
|
|
21
|
-
selector: "pg-grid",
|
|
22
|
-
imports: [CommonModule],
|
|
23
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
24
|
-
templateUrl: "./poly-grid.html",
|
|
25
|
-
styleUrl: "./poly-grid.css",
|
|
26
|
-
})
|
|
27
|
-
export class PolyGridComponent implements AfterViewInit, OnDestroy {
|
|
28
|
-
private grid: PolyGrid | null = null;
|
|
29
|
-
|
|
30
|
-
@ViewChild("host", { static: true }) hostRef!: ElementRef<HTMLDivElement>;
|
|
31
|
-
|
|
32
|
-
// inputs
|
|
33
|
-
id = input.required<string>();
|
|
34
|
-
columns = input<PolyGridColumn[]>([]);
|
|
35
|
-
data = input<any[]>([]);
|
|
36
|
-
|
|
37
|
-
// reactive effects
|
|
38
|
-
gridIdEffect!: EffectRef;
|
|
39
|
-
dataEffect!: EffectRef;
|
|
40
|
-
columnEffect!: EffectRef;
|
|
41
|
-
|
|
42
|
-
private injector = inject(Injector);
|
|
43
|
-
|
|
44
|
-
ngAfterViewInit(): void {
|
|
45
|
-
const host = this.hostRef.nativeElement;
|
|
46
|
-
|
|
47
|
-
const options: PolyGridOptions = {
|
|
48
|
-
id: this.id(),
|
|
49
|
-
columns: this.columns(),
|
|
50
|
-
data: this.data(),
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
this.grid = new PolyGrid(host, options);
|
|
54
|
-
|
|
55
|
-
runInInjectionContext(this.injector, () => {
|
|
56
|
-
this.gridIdEffect = effects.gridIdInputEffect(this.id, this.grid!);
|
|
57
|
-
this.dataEffect = effects.dataInputEffect(this.data, this.grid!);
|
|
58
|
-
this.columnEffect = effects.columnInputEffect(this.columns, this.grid!);
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
ngOnDestroy(): void {
|
|
63
|
-
this.grid?.destroy();
|
|
64
|
-
this.grid = null;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { effect, EffectRef, Signal } from "@angular/core";
|
|
2
|
-
import { PolyGrid } from "@polygrid/core/engine/core/grid";
|
|
3
|
-
import { PolyGridColumn } from "@polygrid/core/engine/services/column/interfaces/column";
|
|
4
|
-
|
|
5
|
-
export function columnInputEffect(
|
|
6
|
-
value: Signal<PolyGridColumn[]>,
|
|
7
|
-
grid: PolyGrid
|
|
8
|
-
): EffectRef {
|
|
9
|
-
return effect(() => {
|
|
10
|
-
if (grid) grid.api.setColumns(value());
|
|
11
|
-
});
|
|
12
|
-
}
|
package/src/lib/effects/data.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { effect, EffectRef, Signal } from "@angular/core";
|
|
2
|
-
import { PolyGrid } from "@polygrid/core/engine/core/grid";
|
|
3
|
-
|
|
4
|
-
export function dataInputEffect(
|
|
5
|
-
value: Signal<any[]>,
|
|
6
|
-
grid: PolyGrid
|
|
7
|
-
): EffectRef {
|
|
8
|
-
return effect(() => {
|
|
9
|
-
if (grid) grid.api.setData(value());
|
|
10
|
-
});
|
|
11
|
-
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { effect, EffectRef, Signal } from "@angular/core";
|
|
2
|
-
import { PolyGrid } from "@polygrid/core/engine/core/grid";
|
|
3
|
-
|
|
4
|
-
export function gridIdInputEffect(
|
|
5
|
-
value: Signal<string>,
|
|
6
|
-
grid: PolyGrid
|
|
7
|
-
): EffectRef {
|
|
8
|
-
return effect(() => {
|
|
9
|
-
if (grid) grid.api.setGridId(value());
|
|
10
|
-
});
|
|
11
|
-
}
|
package/src/lib/effects/index.ts
DELETED
package/src/public-api.ts
DELETED
package/tsconfig.lib.json
DELETED