Merge pull request #8945 from IgniteUI/vslavov/tree-POC

IgxTree Implementation

Author: kdinev

CHANGELOG.md

@@ -31,6 +31,27 @@ All notable changes for each version of this project will be documented in this
     - `onDataPreLoad` -> `dataPreLoad`
 
 ### New Features
+- Added `IgxTree` component
+    - Allows users to render hierarchical data in an easy-to-navigate way. The control is **not** data bound and takes a declarative approach, giving users more control over what is being rendered.
+    - Features API for handling selection (bi-state and cascading), node activation, node expansion state.
+    - Features extensive and easy-to-use keyboard navigation, fully compliant with W3 standards.
+    - Code example for a tree contructured from a hierarchical data set:
+    ```html
+        <igx-tree>
+            <igx-tree-node *ngFor="let node of data" [data]="node" [expanded]="isNodeExpanded(node)" [selected]="isNodeSelected(node)">
+                {{ node.text }}
+                <img [src]="node.image" alt="node.imageAlt" />
+                <igx-tree-node *ngFor="let child of node.children" [data]="child" [expanded]="isNodeExpanded(child)" [selected]="isNodeSelected(child)">
+                    {{ child.text }}
+                    <igx-tree-node *ngFor="let leafChild of child.children" [data]="leafChild" [expanded]="isNodeExpanded(leafChild)" [selected]="isNodeSelected(leafChild)">
+                        <a igxTreeNodeLink href="{{leafChild.location}}" target="_blank">{{ leafChild.text }}</a>
+                    </igx-tree-node>
+                </igx-tree-node>
+            </igx-tree-node>
+        </igx-tree>
+    ```
+    - For more information, check out the [README](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tree/README.md), [specification](https://github.com/IgniteUI/igniteui-angular/wiki/Tree-Specification) and [official documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree)
+
 - `IgxHierarchicalGrid`
     - Added support for exporting hierarchical data.
 - `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

README.md

@@ -56,6 +56,7 @@ You can find source files under the [`src`](https://github.com/IgniteUI/igniteui
 |tabs|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tabs/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs)|||||
 |time picker|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/time-picker/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/time-picker)|||||
 |toast|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/toast/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast)|||||
+|tree|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/tree/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tree)|||||
 |tree grid|Available|[Readme](https://github.com/IgniteUI/igniteui-angular/blob/master/projects/igniteui-angular/src/lib/grids/tree-grid/README.md)|[Docs](https://www.infragistics.com/products/ignite-ui-angular/angular/components/treegrid/tree-grid)|||||
 
 #### Components available in [igniteui-angular-charts](https://www.npmjs.com/package/igniteui-angular-charts)

projects/igniteui-angular/karma.azure.non-grid.conf.js

@@ -23,7 +23,7 @@ module.exports = function (config) {
         random: false
       },
       tagPrefix: '#',
-      skipTags: 'hGrid,tGrid,grid,perf'
+      skipTags: 'hGrid,tGrid,grid,perf,treeView'
     },
     port: 9876,
     colors: true,

projects/igniteui-angular/src/lib/banner/banner.component.ts

@@ -1,7 +1,6 @@
 import { Component, NgModule, EventEmitter, Output, Input, ViewChild, ElementRef,
     ContentChild, HostBinding } from '@angular/core';
 import { IgxExpansionPanelModule } from '../expansion-panel/expansion-panel.module';
-import { AnimationSettings } from '../expansion-panel/expansion-panel.component';
 import { IgxExpansionPanelComponent } from '../expansion-panel/public_api';
 import { IgxIconModule, IgxIconComponent } from '../icon/public_api';
 import { IToggleView } from '../core/navigation';
@@ -10,6 +9,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxBannerActionsDirective } from './banner.directives';
 import { CommonModule } from '@angular/common';
 import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
+import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component';
 
 export interface BannerEventArgs extends IBaseEventArgs {
     banner: IgxBannerComponent;
@@ -111,11 +111,11 @@ export class IgxBannerComponent implements IToggleView {
     /**
      * Get the animation settings used by the banner open/close methods
      * ```typescript
-     * let currentAnimations: AnimationSettings = banner.animationSettings
+     * let currentAnimations: ToggleAnimationSettings = banner.animationSettings
      * ```
      */
     @Input()
-    public get animationSettings(): AnimationSettings {
+    public get animationSettings(): ToggleAnimationSettings {
         return this._animationSettings ? this._animationSettings : this._expansionPanel.animationSettings;
     }
 
@@ -124,10 +124,10 @@ export class IgxBannerComponent implements IToggleView {
      * ```typescript
      * import { slideInLeft, slideOutRight } from 'igniteui-angular';
      * ...
-     * banner.animationSettings: AnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
+     * banner.animationSettings: ToggleAnimationSettings = { openAnimation: slideInLeft, closeAnimation: slideOutRight };
      * ```
      */
-    public set animationSettings(settings: AnimationSettings) {
+    public set animationSettings(settings: ToggleAnimationSettings) {
         this._animationSettings = settings;
     }
     /**
@@ -166,7 +166,7 @@ export class IgxBannerComponent implements IToggleView {
     private _bannerActionTemplate: IgxBannerActionsDirective;
 
     private _bannerEvent: BannerEventArgs;
-    private _animationSettings: AnimationSettings;
+    private _animationSettings: ToggleAnimationSettings;
 
     constructor(public elementRef: ElementRef) { }
 

projects/igniteui-angular/src/lib/core/i18n/resources.ts

@@ -8,10 +8,11 @@ import { IChipResourceStrings, ChipResourceStringsEN } from './chip-resources';
 import { IListResourceStrings, ListResourceStringsEN } from './list-resources';
 import { CalendarResourceStringsEN, ICalendarResourceStrings } from './calendar-resources';
 import { IInputResourceStrings, InputResourceStringsEN } from './input-resources';
+import { ITreeResourceStrings, TreeResourceStringsEN } from './tree-resources';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICalendarResourceStrings,
     ICarouselResourceStrings, IChipResourceStrings, IInputResourceStrings, IDateRangePickerResourceStrings, IListResourceStrings,
-    IPaginatorResourceStrings { }
+    IPaginatorResourceStrings, ITreeResourceStrings { }
 
 /**
  * @hidden
@@ -26,6 +27,7 @@ export const CurrentResourceStrings = {
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
     ListResStrings: cloneValue(ListResourceStringsEN),
     InputResStrings: cloneValue(InputResourceStringsEN),
+    TreeResStrings: cloneValue(TreeResourceStringsEN),
 };
 
 const updateResourceStrings = (currentStrings: IResourceStrings, newStrings: IResourceStrings) => {

projects/igniteui-angular/src/lib/core/i18n/tree-resources.ts

@@ -0,0 +1,9 @@
+export interface ITreeResourceStrings {
+    igx_expand?: string;
+    igx_collapse?: string;
+}
+
+export const TreeResourceStringsEN: ITreeResourceStrings = {
+    igx_expand: 'Expand',
+    igx_collapse: 'Collapse',
+};

projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-component.scss

@@ -0,0 +1,86 @@
+////
+/// @group components
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+
+@include b(igx-tree) {
+    @extend %tree-display !optional;
+}
+
+@include b(igx-tree-node) {
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @extend %tree-node !optional;
+
+    @include e(wrapper) {
+        @extend %node-wrapper !optional;
+
+        &:hover {
+            &::after {
+                @extend %indigo-opacity !optional;
+            }
+        }
+    }
+
+    @include e(wrapper, $m: cosy) {
+        @extend %node-wrapper--cosy !optional;
+    }
+
+    @include e(wrapper, $m: compact) {
+        @extend %node-wrapper--compact !optional;
+    }
+
+    // STATES START
+    @include e(wrapper, $m: selected) {
+        @extend %node-wrapper--selected !optional;
+    }
+
+    @include e(wrapper, $m: active) {
+        @extend %node-wrapper--active !optional;
+    }
+
+    @include e(wrapper, $mods: (active, selected)) {
+        @extend %node-wrapper--active-selected !optional;
+    }
+
+    @include e(wrapper, $m: focused) {
+        @extend %node-wrapper--focused !optional;
+    }
+
+    @include e(wrapper, $m: disabled) {
+        @extend %node-wrapper--disabled !optional;
+    }
+    // STATES END
+
+    @include e(content) {
+        @extend %node-content !optional;
+    }
+
+    @include e(spacer) {
+        @extend %node-spacer !optional;
+    }
+
+    @include e(toggle-button) {
+        @extend %node-toggle-button !optional;
+    }
+
+    @include e(toggle-button, $m: hidden) {
+        @extend %node-toggle-button--hidden !optional;
+    }
+
+    @include e(drop-indicator) {
+        @extend %node-drop-indicator !optional;
+    }
+
+    @include e(select) {
+        @extend %node-select !optional;
+    }
+
+    @include e(group) {
+        @extend %node-group !optional;
+    }
+}