ripple is added

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.html

@@ -9,7 +9,7 @@
     class="group-tree"
   >
     <!-- This is the tree node template for leaf nodes -->
-    <mat-tree-node *matTreeNodeDef="let node" style="height: 80px;">
+    <mat-tree-node *matTreeNodeDef="let node" style="height: 80px;" matRipple>
       <li>
         <div class="mat-tree-node">
           <ng-container

projects/ucap-webmessenger-ui-organization/src/lib/components/tree.component.html

@@ -14,8 +14,8 @@
       matTreeNodePadding
       class="mat-tree-last-node"
     >
-      <li>
-        <div (click)="onClickNode(node)">
+      <li (click)="onClickNode(node)" matRipple>
+        <div>
           {{ node.name }}
         </div>
       </li>
@@ -26,8 +26,8 @@
       matTreeNodePadding
       class="tree-node-frame"
     >
-      <li>
-        <div (click)="onClickNode(node)" class="path">
+      <li (click)="onClickNode(node)" matRipple>
+        <div class="path">
           <span class="horizontal-line"></span>
           <button
             mat-icon-button

projects/ucap-webmessenger-ui-organization/src/lib/ucap-ui-organization.module.ts

@@ -6,6 +6,8 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 
 import { ScrollingModule } from '@angular/cdk/scrolling';
 
+import { MatRippleModule } from '@angular/material';
+
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
@@ -26,6 +28,7 @@ const SERVICES = [];
     FlexLayoutModule,
     ScrollingModule,
 
+    MatRippleModule,
     MatButtonModule,
     MatIconModule,
     MatInputModule,