-
-
+
+
diff --git a/projects/demo/src/app/app.component.scss b/projects/demo/src/app/app.component.scss
new file mode 100644
index 00000000..c6bbb365
--- /dev/null
+++ b/projects/demo/src/app/app.component.scss
@@ -0,0 +1,41 @@
+.header.sticky {
+ position: sticky;
+ top: 0;
+ background: purple;
+ height: 110px;
+ z-index: 2;
+}
+
+.header.title {
+ text-align: center;
+ color: white;
+ margin: 0;
+ line-height: 50px;
+}
+
+.header.description {
+ text-align: center;
+ color: white;
+ line-height: 25px;
+}
+
+.header.info {
+ color: white;
+ text-align: center;
+}
+
+.header.info.debug {
+ line-height: 35px;
+}
+
+section {
+ font-size: 0.875rem;
+ display: flex;
+ flex-direction: row;
+}
+
+section article {
+ flex: 1;
+ display: flex;
+ margin: 10px;
+}
diff --git a/projects/demo/src/app/app.component.ts b/projects/demo/src/app/app.component.ts
index 29227a60..e08962ac 100644
--- a/projects/demo/src/app/app.component.ts
+++ b/projects/demo/src/app/app.component.ts
@@ -1,10 +1,11 @@
import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
@Component({
- standalone: false,
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrl: './app.component.css'
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss'],
+ imports: [RouterOutlet]
})
export class AppComponent {
title = 'Angular Tree Component';
diff --git a/projects/demo/src/app/app.module.ts b/projects/demo/src/app/app.module.ts
deleted file mode 100644
index e2d1c0bc..00000000
--- a/projects/demo/src/app/app.module.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { TreeModule } from '@talentia/angular-tree-component';
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { FullTreeComponent } from './fulltree/fulltree.component';
-import { ActionsComponent } from './actions/actions.component';
-import { ApiComponent } from './api/api.component';
-import { AsyncTreeComponent } from './async/async.component';
-import { BasicTreeComponent } from './basictree/basictree.component';
-import { CheckboxesComponent } from './checkboxes/checkboxes.component';
-import { ContextmenuComponent } from './contextmenu/contextmenu.component';
-import { DragComponent } from './drag/drag.component';
-import { DragOverStylingFullTreeComponent } from './dragover-styling/dragover-styling-full-tree.component';
-import { DragOverStylingComponent } from './dragover-styling/dragover-styling.component';
-import { EmptyComponent } from './empty/empty.component';
-import { FieldsComponent } from './fields/fields.component';
-import { FilterComponent } from './filter/filter.component';
-import { RtlTreeComponent } from './rtl/rtl-tree.component';
-import { SaveRestoreComponent } from './save-restore/save-restore.component';
-import { ScrollContainerComponent } from './scrollcontainer/scrollcontainer.component';
-import { TemplatesComponent } from './templates/templates.component';
-import { VirtualscrollComponent } from './virtualscroll/virtualscroll.component';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-
-@NgModule({
- declarations: [
- AppComponent,
- FullTreeComponent,
- BasicTreeComponent,
- TemplatesComponent,
- FieldsComponent,
- FilterComponent,
- EmptyComponent,
- RtlTreeComponent,
- AsyncTreeComponent,
- SaveRestoreComponent,
- CheckboxesComponent,
- DragComponent,
- DragOverStylingComponent,
- DragOverStylingFullTreeComponent,
- VirtualscrollComponent,
- ApiComponent,
- ActionsComponent,
- ScrollContainerComponent,
- ContextmenuComponent
- ],
- imports: [
- FormsModule,
- CommonModule,
- BrowserModule,
- BrowserAnimationsModule,
- AppRoutingModule,
- BsDropdownModule.forRoot(),
- TreeModule
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
diff --git a/projects/demo/src/app/async/async.component.ts b/projects/demo/src/app/async/async.component.ts
index 380d1b6b..789805df 100644
--- a/projects/demo/src/app/async/async.component.ts
+++ b/projects/demo/src/app/async/async.component.ts
@@ -1,13 +1,12 @@
import { Component } from '@angular/core';
-import { ITreeOptions, TreeNode} from '@talentia/angular-tree-component';
+import { ITreeOptions, TreeModule } from '@talentia/angular-tree-component';
@Component({
- standalone: false,
- selector: 'app-async',
- template: `
+ selector: 'app-async',
+ template: `
- `,
- styles: []
+ `,
+ imports: [TreeModule]
})
export class AsyncTreeComponent {
options: ITreeOptions = {
diff --git a/projects/demo/src/app/basictree/basictree.component.ts b/projects/demo/src/app/basictree/basictree.component.ts
index dc74eb70..3067343b 100644
--- a/projects/demo/src/app/basictree/basictree.component.ts
+++ b/projects/demo/src/app/basictree/basictree.component.ts
@@ -1,15 +1,15 @@
import { Component } from '@angular/core';
+import { TreeModule } from '@talentia/angular-tree-component';
@Component({
- standalone: false,
- selector: 'app-basictree',
- template: `
+ selector: 'app-basictree',
+ template: `
Keys:
down | up | left | right | space | enter
`,
- styles: []
+ imports: [TreeModule]
})
export class BasicTreeComponent {
nodes = [
diff --git a/projects/demo/src/app/checkboxes/checkboxes.component.ts b/projects/demo/src/app/checkboxes/checkboxes.component.ts
index c9c7856e..fcde4805 100644
--- a/projects/demo/src/app/checkboxes/checkboxes.component.ts
+++ b/projects/demo/src/app/checkboxes/checkboxes.component.ts
@@ -1,10 +1,9 @@
-import { ITreeOptions } from '@talentia/angular-tree-component';
+import { ITreeOptions, TreeModule } from '@talentia/angular-tree-component';
import { Component } from '@angular/core';
@Component({
- standalone: false,
- selector: 'app-checkboxes',
- template: `
+ selector: 'app-checkboxes',
+ template: `
tri-state checkboxes
`,
- styles: [
- ]
+ imports: [TreeModule]
})
export class CheckboxesComponent {
nodes = [
diff --git a/projects/demo/src/app/contextmenu/contextmenu.component.html b/projects/demo/src/app/contextmenu/contextmenu.component.html
deleted file mode 100644
index 1d79b97f..00000000
--- a/projects/demo/src/app/contextmenu/contextmenu.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- contextmenu works!
-
diff --git a/projects/demo/src/app/contextmenu/contextmenu.component.ts b/projects/demo/src/app/contextmenu/contextmenu.component.ts
index 6f145deb..0376a85d 100644
--- a/projects/demo/src/app/contextmenu/contextmenu.component.ts
+++ b/projects/demo/src/app/contextmenu/contextmenu.component.ts
@@ -1,10 +1,11 @@
-import { Component, HostListener } from '@angular/core';
-import { ITreeOptions, TREE_ACTIONS, TreeNode, TreeModel } from '@talentia/angular-tree-component';
+import { Component } from '@angular/core';
+import { ITreeOptions, TREE_ACTIONS, TreeNode, TreeModel, TreeModule } from '@talentia/angular-tree-component';
+import { NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
@Component({
- standalone: false,
- selector: 'app-contextmenu',
- template: `
+ selector: 'app-contextmenu',
+ template: `
@@ -31,28 +32,29 @@ import { ITreeOptions, TREE_ACTIONS, TreeNode, TreeModel } from '@talentia/angul
Keys:
down | up | left | right | space | enter
`,
- styles: [
- `.menu {
- position: absolute;
- background: rgba(255, 255, 255, 0.9);
- padding: 7px;
- border-radius: 5px;
- box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
- }`,
- `ul {
- list-style: none;
- padding: 0;
- margin: 0;
- }`,
- `li {
- padding: 7px;
- border-radius: 3px;
- cursor: pointer;
- }`,
- `li:hover {
- background-color: aliceblue;
- }`,
- ]
+ styles: [
+ `.menu {
+ position: absolute;
+ background: rgba(255, 255, 255, 0.9);
+ padding: 7px;
+ border-radius: 5px;
+ box-shadow: 0 0 2px 2px rgba(0,0,0,0.2);
+ }`,
+ `ul {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }`,
+ `li {
+ padding: 7px;
+ border-radius: 3px;
+ cursor: pointer;
+ }`,
+ `li:hover {
+ background-color: aliceblue;
+ }`
+ ],
+ imports: [TreeModule, NgIf, FormsModule]
})
export class ContextmenuComponent {
contextMenu: {node: TreeNode, x: number, y: number} = null;
diff --git a/projects/demo/src/app/drag/drag.component.ts b/projects/demo/src/app/drag/drag.component.ts
index 901da610..571178db 100644
--- a/projects/demo/src/app/drag/drag.component.ts
+++ b/projects/demo/src/app/drag/drag.component.ts
@@ -1,15 +1,14 @@
import { Component } from '@angular/core';
-import { ITreeState, ITreeOptions } from '@talentia/angular-tree-component';
+import { ITreeState, ITreeOptions, TreeModule } from '@talentia/angular-tree-component';
import { v4 } from 'uuid';
@Component({
- standalone: false,
- selector: 'app-drag',
- template: `
+ selector: 'app-drag',
+ template: `
Allowing to drag only leaf nodes; ctrl-drag to copy
`,
- styles: []
+ imports: [TreeModule]
})
export class DragComponent {
state: ITreeState = {
diff --git a/projects/demo/src/app/dragover-styling/dragover-styling-full-tree.component.ts b/projects/demo/src/app/dragover-styling/dragover-styling-full-tree.component.ts
index 12c33559..335982da 100644
--- a/projects/demo/src/app/dragover-styling/dragover-styling-full-tree.component.ts
+++ b/projects/demo/src/app/dragover-styling/dragover-styling-full-tree.component.ts
@@ -1,12 +1,6 @@
import { Component, OnInit } from '@angular/core';
-import {
- TreeNode,
- TreeModel,
- TREE_ACTIONS,
- KEYS,
- IActionMapping,
- ITreeOptions
-} from '@talentia/angular-tree-component';
+import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions, TreeModule } from '@talentia/angular-tree-component';
+import { FormsModule } from '@angular/forms';
const actionMapping: IActionMapping = {
mouse: {
@@ -31,12 +25,11 @@ const actionMapping: IActionMapping = {
};
@Component({
- standalone: false,
- selector: 'app-dragover-styling-fulltree',
- styles: [
- 'button {line-height: 24px;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);border: none;border-radius: 2px;background: #a3d9f5;cursor: pointer;margin: 0 3px;}'
- ],
- template: `
+ selector: 'app-dragover-styling-fulltree',
+ styles: [
+ 'button {line-height: 24px;box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);border: none;border-radius: 2px;background: #a3d9f5;cursor: pointer;margin: 0 3px;}'
+ ],
+ template: `
-
+
getActiveNodes()
- `
+ `,
+ imports: [FormsModule, TreeModule]
})
export class FullTreeComponent implements OnInit {
nodes: any[];
diff --git a/projects/demo/src/app/rtl/rtl-tree.component.ts b/projects/demo/src/app/rtl/rtl-tree.component.ts
index 00a85f8c..8ef1b871 100644
--- a/projects/demo/src/app/rtl/rtl-tree.component.ts
+++ b/projects/demo/src/app/rtl/rtl-tree.component.ts
@@ -1,13 +1,13 @@
import { Component, ViewEncapsulation } from '@angular/core';
+import { TreeModule } from '@talentia/angular-tree-component';
@Component({
- standalone: false,
- selector: 'app-basictree',
- template: `
+ selector: 'app-basictree',
+ template: `
`,
- encapsulation: ViewEncapsulation.None,
- styles: []
+ encapsulation: ViewEncapsulation.None,
+ imports: [TreeModule]
})
export class RtlTreeComponent {
options = {
diff --git a/projects/demo/src/app/save-restore/save-restore.component.ts b/projects/demo/src/app/save-restore/save-restore.component.ts
index 9d14a9f8..5b5ca937 100644
--- a/projects/demo/src/app/save-restore/save-restore.component.ts
+++ b/projects/demo/src/app/save-restore/save-restore.component.ts
@@ -1,5 +1,5 @@
import { Component } from '@angular/core';
-import { ITreeState } from '@talentia/angular-tree-component';
+import { ITreeState, TreeModule } from '@talentia/angular-tree-component';
const getChildren = () => new Promise((resolve) => {
setTimeout(() => resolve([
@@ -11,13 +11,12 @@ const getChildren = () => new Promise((resolve) => {
});
@Component({
- standalone: false,
- selector: 'app-saverestore',
- template: `
+ selector: 'app-saverestore',
+ template: `
`,
- styles: []
+ imports: [TreeModule]
})
export class SaveRestoreComponent {
get state(): ITreeState {
diff --git a/projects/demo/src/app/scrollcontainer/scrollcontainer.component.ts b/projects/demo/src/app/scrollcontainer/scrollcontainer.component.ts
index 6e2f75d5..e2f1a5c5 100644
--- a/projects/demo/src/app/scrollcontainer/scrollcontainer.component.ts
+++ b/projects/demo/src/app/scrollcontainer/scrollcontainer.component.ts
@@ -1,12 +1,9 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from '@talentia/angular-tree-component';
+import { Component, OnInit } from '@angular/core';
+import { ITreeOptions, TreeModule } from '@talentia/angular-tree-component';
@Component({
- standalone: false,
- selector: 'app-scrollcontainer',
- styles: [
- ],
- template: `
+ selector: 'app-scrollcontainer',
+ template: `
Padding
- `
+ `,
+ imports: [TreeModule]
})
export class ScrollContainerComponent implements OnInit {
nodes: any[] = [];
diff --git a/projects/demo/src/app/templates/templates.component.ts b/projects/demo/src/app/templates/templates.component.ts
index 9c655b44..fe2b9bed 100644
--- a/projects/demo/src/app/templates/templates.component.ts
+++ b/projects/demo/src/app/templates/templates.component.ts
@@ -1,10 +1,9 @@
import { Component } from '@angular/core';
-import { ITreeOptions } from '@talentia/angular-tree-component';
+import { ITreeOptions, TreeModule } from '@talentia/angular-tree-component';
@Component({
- standalone: false,
- selector: 'app-templates',
- template: `
+ selector: 'app-templates',
+ template: `
treeNodeTemplate and loadingTemplate
@@ -44,10 +43,11 @@ import { ITreeOptions } from '@talentia/angular-tree-component';
`,
- styles: [
- '.root1Class { color: blue }',
- '.root2Class { color: red }'
- ]
+ styles: [
+ '.root1Class { color: blue }',
+ '.root2Class { color: red }'
+ ],
+ imports: [TreeModule]
})
export class TemplatesComponent {
nodes1 = [
diff --git a/projects/demo/src/app/virtualscroll/virtualscroll.component.css b/projects/demo/src/app/virtualscroll/virtualscroll.component.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/projects/demo/src/app/virtualscroll/virtualscroll.component.html b/projects/demo/src/app/virtualscroll/virtualscroll.component.html
deleted file mode 100644
index 4adcb10d..00000000
--- a/projects/demo/src/app/virtualscroll/virtualscroll.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
-
- virtualscroll works!
-
diff --git a/projects/demo/src/app/virtualscroll/virtualscroll.component.ts b/projects/demo/src/app/virtualscroll/virtualscroll.component.ts
index fab26daf..e4f26e04 100644
--- a/projects/demo/src/app/virtualscroll/virtualscroll.component.ts
+++ b/projects/demo/src/app/virtualscroll/virtualscroll.component.ts
@@ -1,12 +1,9 @@
-import { Component, Input } from '@angular/core';
-import { TreeNode, TreeModel, ITreeOptions } from '@talentia/angular-tree-component';
+import { Component } from '@angular/core';
+import { ITreeOptions, TreeModule } from '@talentia/angular-tree-component';
@Component({
- standalone: false,
- selector: 'app-virtualscroll',
- styles: [
- ],
- template: `
+ selector: 'app-virtualscroll',
+ template: `
- `
+ `,
+ imports: [TreeModule]
})
export class VirtualscrollComponent {
nodes: any[];
diff --git a/projects/demo/src/main.ts b/projects/demo/src/main.ts
index fbf76ea6..5dbb63da 100644
--- a/projects/demo/src/main.ts
+++ b/projects/demo/src/main.ts
@@ -1,5 +1,16 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { AppRoutingModule } from './app/app-routing.module';
+import { TreeModule } from '@talentia/angular-tree-component';
+import { AppComponent } from './app/app.component';
+import { importProvidersFrom } from '@angular/core';
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+ providers: [
+ importProvidersFrom(FormsModule, CommonModule, BrowserModule, AppRoutingModule, TreeModule),
+ provideAnimations()
+ ]
+})
.catch(err => console.error(err));
diff --git a/projects/demo/src/styles.scss b/projects/demo/src/styles.scss
index 6a4bc7c9..85816a7f 100644
--- a/projects/demo/src/styles.scss
+++ b/projects/demo/src/styles.scss
@@ -1,5 +1,10 @@
/* You can add global styles to this file, and also import other style files */
-@import '../../../node_modules/bootstrap/scss/bootstrap';
+
+body {
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ margin: 0;
+ padding: 0;
+}
.tree-children.tree-children-no-padding { padding-left: 0 }
.tree-children { padding-left: 20px; overflow: hidden }
diff --git a/tsconfig.json b/tsconfig.json
index 28f5fc9c..a263c09d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -28,7 +28,6 @@
"noImplicitAny": false,
"strictNullChecks": false,
"strictPropertyInitialization": false,
- "allowSyntheticDefaultImports": true,
"inlineSourceMap": true,
"stripInternal": true,
"useDefineForClassFields": false,