From 53dac27b932abdf734ac5d661293f42686f288c7 Mon Sep 17 00:00:00 2001
From: jacksonjunelee <jacksonjunelee@gmail.com>
Date: Mon, 16 Jul 2018 22:17:37 -0400
Subject: [PATCH 1/2] add cssClass to settings to add custom css to
 value-container

---
 README.md                                     |  1 +
 src/tree-internal.component.ts                |  6 +++++-
 src/tree.ts                                   | 13 +++++++++++--
 src/tree.types.ts                             |  1 +
 test/settings.tree-internal.component.spec.ts |  6 ++++++
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index a1429cbb..729dd055 100644
--- a/README.md
+++ b/README.md
@@ -346,6 +346,7 @@ Here is an example of its usage:
 ```
 
 * `static` - Boolean - This option makes it impossible to drag a tree or modify it in a some way, though you still can select nodes in the static tree and appropriate events will be generated.
+* `cssClass` - String - It specifies a css class (or classes) for the container of the entire item.
 * `isCollapsedOnInit` - Boolean - This option makes a tree to be collapsed on first load (this option cascades to its children).
 * `rightMenu` - Boolean - This option allows you to activate (true, by default) or deactivate (false) right menu when clicking with right button of a mouse.
 * `leftMenu` - Boolean - This option allows you to activate (true) or deactivate (false, by default) left menu.
diff --git a/src/tree-internal.component.ts b/src/tree-internal.component.ts
index 1da00de3..710cc625 100644
--- a/src/tree-internal.component.ts
+++ b/src/tree-internal.component.ts
@@ -31,7 +31,7 @@ import { get, isNil } from './utils/fn.utils';
   <ul class="tree" *ngIf="tree" [ngClass]="{rootless: isRootHidden()}">
     <li>
       <div class="value-container"
-        [ngClass]="{rootless: isRootHidden()}"
+        [ngClass]="containerClass"
         [class.selected]="isSelected"
         (contextmenu)="showRightMenu($event)"
         [nodeDraggable]="nodeElementRef"
@@ -101,6 +101,10 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy, Afte
 
   private subscriptions: Subscription[] = [];
 
+  public get containerClass(): string {
+    return this.isRootHidden() ? `rootless ${this.tree.getContainerCss()}` : this.tree.getContainerCss();
+  }
+
   public constructor(
     private nodeMenuService: NodeMenuService,
     public treeService: TreeService,
diff --git a/src/tree.ts b/src/tree.ts
index 65e82c15..38dcb49d 100644
--- a/src/tree.ts
+++ b/src/tree.ts
@@ -523,8 +523,8 @@ export class Tree {
   }
 
   /**
-   * Get a css class for element which displayes folding state - expanded, collapsed or leaf
-   * @returns {string} A string icontaining css class (classes)
+   * Get a css class for element which displays folding state - expanded, collapsed or leaf
+   * @returns {string} A string containing css class (classes)
    */
   public get foldingCssClass(): string {
     return this.getCssClassesFromSettings() || this.foldingType.cssClass;
@@ -655,4 +655,13 @@ export class Tree {
 
     return model;
   }
+
+  /**
+   * Get css classes used in the value-container div
+   * @returns {string} css class that will be used in the node container
+   */
+
+  public getContainerCss(): string {
+    return get(this.node, 'cssClass', '');
+  }
 }
diff --git a/src/tree.types.ts b/src/tree.types.ts
index af435ad9..d84400f6 100644
--- a/src/tree.types.ts
+++ b/src/tree.types.ts
@@ -26,6 +26,7 @@ export interface TreeModel {
   _status?: TreeStatus;
   _foldingType?: FoldingType;
   [additionalData: string]: any;
+  cssClass?: string;
 }
 
 export interface CssClasses {
diff --git a/test/settings.tree-internal.component.spec.ts b/test/settings.tree-internal.component.spec.ts
index 68596b11..4184b281 100644
--- a/test/settings.tree-internal.component.spec.ts
+++ b/test/settings.tree-internal.component.spec.ts
@@ -21,6 +21,7 @@ let masterComponentInstance;
 
 const tree: TreeModel = {
   value: 'Master',
+  cssClass: 'cssClassMaster',
   settings: {
     cssClasses: {
       expanded: 'fa fa-caret-down',
@@ -77,6 +78,11 @@ describe('settings on tree model', () => {
   });
 
   describe('cssClasses setting in tree', () => {
+    it('adds appropriate css classes for a node container', () => {
+      const el: DebugElement = masterInternalTreeEl.query(By.css('.value-container'));
+      expect(el.classes).toEqual({ 'value-container': true, cssClassMaster: true, selected: false });
+    });
+
     it('adds appropriate css classes for a expanded node', () => {
       const foldingEl: DebugElement = masterInternalTreeEl.query(By.css('.folding'));
       expect(foldingEl.classes).toEqual({ folding: true, fa: true, 'fa-caret-down': true });

From 723cb375da5eb80ab4fa8919a6ed5f4dac322dda Mon Sep 17 00:00:00 2001
From: jacksonjunelee <jacksonjunelee@gmail.com>
Date: Mon, 16 Jul 2018 23:12:16 -0400
Subject: [PATCH 2/2] update tests

---
 test/tree-internal.component.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/tree-internal.component.spec.ts b/test/tree-internal.component.spec.ts
index 3b2f6a1e..3403bc3e 100644
--- a/test/tree-internal.component.spec.ts
+++ b/test/tree-internal.component.spec.ts
@@ -453,7 +453,7 @@ describe('TreeInternalComponent', () => {
       'Only element with root tree node can have rootless class'
     );
     expect(childEl.query(By.css('.value-container')).classes['rootless']).toEqual(
-      false,
+      undefined,
       'Only element with root tree node can have rootless class'
     );
   });