feat(actionbar): add support a item class function

demo/src/locale/en.json

@@ -1,3 +1,5 @@
 {
-  "welcome": "Welcome to {{title}}"
+  "welcome": "Welcome to {{title}}",
+  "About": "About",
+  "Salutation": "Salutation"
 }

demo/src/locale/fr.json

@@ -1,3 +1,5 @@
 {
-  "welcome": "Bienvenue à {{title}}"
+  "welcome": "Bienvenue à {{title}}",
+  "About": "À propos",
+  "Salutation": "Salutation"
 }

packages/common/src/lib/action/actionbar/actionbar.component.html

@@ -13,6 +13,7 @@
 
   <ng-template *ngIf="!collapsed" ngFor let-action [ngForOf]="store.view.all$() | async">
     <igo-actionbar-item
+      [ngClass]="itemClassFunc(action)"
       color="accent"
       [withTitle]="withTitle"
       [withIcon]="withIcon"

packages/common/src/lib/action/actionbar/actionbar.component.ts

@@ -25,7 +25,6 @@ import { ActionStore } from '../shared/store';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ActionbarComponent implements OnDestroy, OnChanges {
-
   /**
    * Reference to the ActionbarMode enum for use in the template
    * @internal
@@ -45,7 +44,9 @@ export class ActionbarComponent implements OnDestroy, OnChanges {
   toggleCollapseAction = {
     id: 'actionbar_toggle',
     icon: 'more_vert',
-    handler: () => { this.collapsed = !this.collapsed; }
+    handler: () => {
+      this.collapsed = !this.collapsed;
+    }
   };
 
   /**
@@ -103,29 +104,42 @@ export class ActionbarComponent implements OnDestroy, OnChanges {
    * Class to add to the actionbar overlay
    */
   @Input()
-  set overlayClass(value: string) { this._overlayClass = value; }
+  set overlayClass(value: string) {
+    this._overlayClass = value;
+  }
   get overlayClass(): string {
     return [this._overlayClass, 'igo-actionbar-overlay'].join(' ');
   }
   private _overlayClass = '';
 
+  /**
+   * Function to add class to item actionbar
+   */
+  @Input() itemClassFunc: (action: Action) => { [key: string]: boolean };
+
   /**
    * @ignore
    */
   @HostBinding('class.with-title')
-  get withTitleClass() { return this.withTitle; }
+  get withTitleClass() {
+    return this.withTitle;
+  }
 
   /**
    * @ignore
    */
   @HostBinding('class.with-icon')
-  get withIconClass() { return this.withIcon; }
+  get withIconClass() {
+    return this.withIcon;
+  }
 
   /**
    * @ignore
    */
   @HostBinding('class.horizontal')
-  get horizontalClass() { return this.horizontal; }
+  get horizontalClass() {
+    return this.horizontal;
+  }
 
   constructor(private cdRef: ChangeDetectorRef) {}
 

packages/common/src/lib/tool/toolbox/toolbox.component.html

@@ -3,7 +3,8 @@
   [store]="actionStore"
   [withIcon]="true"
   [withTitle]="toolbarWithTitle"
-  [horizontal]="false">
+  [horizontal]="false"
+  [itemClassFunc]=actionBarItemClassFunc>
 </igo-actionbar>
 
 <div

packages/common/src/lib/tool/toolbox/toolbox.component.scss

@@ -42,8 +42,8 @@ igo-actionbar:not(.with-title) {
   box-shadow: 2px 0px 2px 0px #dddddd;
 }
 
-igo-actionbar ::ng-deep igo-list {
-  overflow: inherit;
+igo-actionbar ::ng-deep igo-actionbar-item.tool-actived ::ng-deep mat-list-item {
+  background-color: #e0e0e0;
 }
 
 igo-dynamic-outlet {

packages/common/src/lib/tool/toolbox/toolbox.component.ts

@@ -129,6 +129,19 @@ export class ToolboxComponent implements OnInit, OnDestroy {
     return tool.options || {};
   }
 
+  /**
+   * Get Action bar item class function
+   * @internal
+   */
+  get actionBarItemClassFunc() {
+    return (tool: Tool) => {
+      if (!this.toolbox.activeTool$.value) {
+        return;
+      }
+      return { 'tool-actived': tool.id === this.toolbox.activeTool$.value.name };
+    };
+  }
+
   /**
    * Initialize an action store
    * @param toolbar Toolbar