Feature/node container css classes

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.

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,

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', '');
+  }
 }

src/tree.types.ts

@@ -26,6 +26,7 @@ export interface TreeModel {
   _status?: TreeStatus;
   _foldingType?: FoldingType;
   [additionalData: string]: any;
+  cssClass?: string;
 }
 
 export interface CssClasses {

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 });

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'
     );
   });