feat(tree): add files, create structure, add sample #7475

projects/igniteui-angular/src/lib/tree/common.ts

@@ -0,0 +1,73 @@
+import { EventEmitter, InjectionToken, TemplateRef } from '@angular/core';
+import { IBaseCancelableBrowserEventArgs, IBaseCancelableEventArgs, IBaseEventArgs } from '../core/utils';
+
+// Component interfaces
+
+export interface ITreeComponent {
+    id: string,
+    nodeTemplate: TemplateRef<any>,
+    nodeEditTemplate: TemplateRef<any>,
+    selectMarker: TemplateRef<any>,
+    expandIndicator: TemplateRef<any>,
+    valueKey: string,
+    textKey: string,
+    childKey: string,
+    nodeEdited: EventEmitter<ITreeNodeEditedEvent>,
+    nodeEditing: EventEmitter<ITreeNodeEditingEvent>
+    nodeExpanding: EventEmitter<ITreeNodeTogglingEventArgs>,
+    nodeExpanded: EventEmitter<ITreeNodeToggledEventArgs>,
+    selectNode(id: string): void,
+    updateNodeText(id: string, value: string): void,
+    updateNode(id: string, value: any): void,
+    deleteNode(id: string): void,
+    addNode(data: any, parentPath?: string[]): void
+}
+
+// Item interfaces
+export interface ITreeNode {
+    id: string,
+    depth: number,
+    fullPath: string[],
+    children?: ITreeNode[]
+}
+
+export interface ITreeRoot {
+}
+
+export interface ITreeBranch extends ITreeNode {
+    children: ITreeNode[],
+    childKey: string
+}
+
+// Events
+export interface ITreeNodeSelectionEvent extends IBaseCancelableBrowserEventArgs {
+    nodeId: string;
+}
+
+export interface ITreeNodeEditingEvent extends IBaseCancelableBrowserEventArgs {
+    nodeId: string;
+    value: string;
+}
+
+export interface ITreeNodeEditedEvent extends IBaseEventArgs {
+    nodeId: string;
+    value: any;
+}
+
+export interface ITreeNodeTogglingEventArgs extends IBaseEventArgs, IBaseCancelableBrowserEventArgs {
+    nodeId: string;
+}
+
+export interface ITreeNodeToggledEventArgs extends IBaseEventArgs {
+    nodeId: string;
+}
+
+// Enums
+export enum IGX_TREE_SELECTION_TYPE {
+    Non = "Non",
+    BiState = "BiState",
+    Cascading = "Cascading"
+}
+
+// Token
+export const IGX_TREE_COMPONENT = new InjectionToken<ITreeComponent>('IgxComboComponentToken');

projects/igniteui-angular/src/lib/tree/public_api.ts

@@ -0,0 +1,4 @@
+export * from './tree.component';
+export * from './tree.service';
+export * from './tree-node/tree-node.component';
+export * from './common';

projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.html

@@ -0,0 +1,20 @@
+<div class="igx-node__header">
+    <ng-container *ngTemplateOutlet="selectMarkerTempalte, context: templateContext">
+    </ng-container>
+    <ng-container *ngTemplateOutlet="selectMarkerTempalte, context: templateContext">
+
+    </ng-container>
+    <div class="igx-node__value">
+        <ng-container *ngTemplateOutlet="headerTemplate, context: templateContext">
+        </ng-container>
+    </div>
+</div>
+<ng-container *ngIf="this.expanded">
+    <igx-tree-node *ngFor="let item of data[childKey]"
+        [id]="id + '-' + item[valueKey]"
+        [data]="item"
+        [depth]="depth + 1"
+    >
+    </igx-tree-node>
+</ng-container>
+

projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.scss

@@ -0,0 +1,4 @@
+:host {
+    display: flex;
+    flex-direction: column;
+}

projects/igniteui-angular/src/lib/tree/tree-node/tree-node.component.ts

@@ -0,0 +1,121 @@
+import {
+    Component, OnInit,
+    OnDestroy, ChangeDetectionStrategy, Input, Inject, ViewChild, TemplateRef
+} from '@angular/core';
+import { IgxSelectionAPIService } from '../../core/selection';
+import { IGX_TREE_COMPONENT, ITreeComponent, ITreeNode } from '../common';
+import { IgxTreeExpandIndicatorDirective, IgxTreeNodeDirective, IgxTreeSelectMarkerDirective } from '../tree.component';
+import { IgxTreeService } from '../tree.service';
+/**
+ *
+ * The tree node component represents a child node of the tree component or another tree node.
+ * Usage:
+ *
+ * ```html
+ *  <tree [data]="data" [titleDataKey]="'Title'"></tree>
+ * ```
+ */
+@Component({
+    selector: "igx-tree-node",
+    templateUrl: "tree-node.component.html",
+    styleUrls: ["tree-node.component.scss"],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class IgxTreeNodeComponent implements ITreeNode, OnInit, OnDestroy {
+    constructor(@Inject(IGX_TREE_COMPONENT) public tree: ITreeComponent, private selectionService: IgxSelectionAPIService, private treeService: IgxTreeService) { }
+
+    @Input()
+    private _parentPath: string;
+
+    @Input()
+    public id: string;
+
+    @Input()
+    public depth: number;
+
+    @Input()
+    public data: any;
+
+    public nodeTemplate: TemplateRef<any>;
+
+    public nodeEditTemplate: TemplateRef<any>;
+
+    public selectMarker: TemplateRef<any>;
+
+    public expandIndicator: TemplateRef<any>;
+
+    @ViewChild(IgxTreeNodeDirective, { read: TemplateRef })
+    private _defaultNodeTemplate: TemplateRef<any>;
+
+    public get nodeTemplateRef(): TemplateRef<any> {
+        return this.nodeTemplate || this._defaultNodeTemplate
+    }
+
+    @ViewChild(IgxTreeExpandIndicatorDirective, { read: TemplateRef })
+    private _defaultNodeEdit: TemplateRef<any>;
+
+    public get nodeEditTemplateRef(): TemplateRef<any> {
+        return this.nodeEditTemplate || this._defaultNodeEdit
+    }
+    @ViewChild(IgxTreeSelectMarkerDirective, { read: TemplateRef })
+    private _defaultSelectMarker: TemplateRef<any>;
+
+    public get selectMarkerTemplate(): TemplateRef<any> {
+        return this.selectMarker || this._defaultSelectMarker
+    }
+
+    @ViewChild(IgxTreeExpandIndicatorDirective, { read: TemplateRef })
+    private _defaultExpandIndicatorTemplate: TemplateRef<any>;
+
+    public get expandIndicatorTemplate(): TemplateRef<any> {
+        return this.expandIndicator || this._defaultExpandIndicatorTemplate
+    }
+
+    public get selected(): boolean {
+        return this.selectionService.get(this.tree.id).has(this.id);
+    }
+
+    public get expanded(): boolean {
+        return this.treeService.isExpanded(this.id);
+    }
+
+    public get templateContext(): any {
+        return {
+            $implicit: {
+                data: this.data,
+                id: this.id,
+                expanded: this.expanded,
+                selected: this.selected
+            }
+        }
+    }
+
+    public get valueKey(): string {
+        return this.tree.valueKey;
+    }
+
+    public get textKey(): string {
+        return this.tree.textKey
+    }
+
+    public get childKey(): string {
+        return this.tree.childKey
+    }
+
+    public get fullPath(): string[] {
+        return [...this._parentPath, this.id];
+    }
+
+    ngOnInit() {
+        console.log(this.tree);
+    }
+
+    ngAfterViewInit() {
+        this.nodeEditTemplate = this.tree.nodeEditTemplate;
+        this.nodeTemplate = this.tree.nodeTemplate;
+        this.selectMarker = this.tree.selectMarker;
+        this.expandIndicator = this.tree.expandIndicator;
+    }
+
+    ngOnDestroy() { }
+}

projects/igniteui-angular/src/lib/tree/tree.component.html

@@ -0,0 +1,28 @@
+<div class="tree__root">
+    <igx-tree-node *ngFor="let item of items"
+        [id]="id + '-' + item[valueKey]"
+        [data]="item"
+        [depth]="0"
+    >
+    </igx-tree-node>
+</div>
+<ng-template igxTreeExpandIndicator let-item>
+    <igx-icon>
+        isNodeExpanded(item.id) ?? "expand_less" : "expand_more"
+    </igx-icon>
+</ng-template>
+
+<ng-template igxTreeSelectMarker let-item>
+    <igx-checkbox [checked]="isSelected(item.id)" [readonly]="true">
+    </igx-checkbox>
+</ng-template>
+
+<ng-template igxTreeNode let-item>
+    {{ item.data[valueKey] }}
+</ng-template>
+
+<ng-template igxTreeNodeEdit let-item>
+    <igx-input-group>
+        <input igxInput [ngModel]="item.data">
+    </igx-input-group>
+</ng-template>