ontimize-web-ngx 15.0.3 → 15.1.0

package/lib/types/o-component-permissions-by-route.type.d.ts

@@ -0,0 +1,5 @@
+import { OComponentPermissions } from "./o-component-permissions.type";
+export type OComponentPermissionsByRoute = {
+    route?: OComponentPermissions;
+    component?: OComponentPermissions;
+};

package/lib/types/o-form-permissions.type.d.ts

@@ -1,7 +1,2 @@
-import { OPermissions } from './o-permissions.type';
-export type OFormPermissions = {
-    attr: string;
-    selector: string;
-    components?: OPermissions[];
-    actions?: OPermissions[];
-};
+import { OServiceBasePermissions } from './o-service-base-permissions.type';
+export type OFormPermissions = OServiceBasePermissions;

package/lib/types/o-global-config.type.d.ts

@@ -0,0 +1,5 @@
+import { InjectionToken } from "@angular/core";
+export type OGlobalConfig = {
+    storeState: boolean;
+};
+export declare const O_GLOBAL_CONFIG: InjectionToken<OGlobalConfig>;

package/lib/types/o-grid-permissions.type.d.ts

@@ -0,0 +1,2 @@
+import { OServiceBasePermissions } from './o-service-base-permissions.type';
+export type OGridPermissions = OServiceBasePermissions;

package/lib/types/o-list-permissions.type.d.ts

@@ -0,0 +1,2 @@
+import { OServiceBasePermissions } from './o-service-base-permissions.type';
+export type OListPermissions = OServiceBasePermissions;

package/lib/types/o-service-base-permissions.type.d.ts

@@ -0,0 +1,7 @@
+import { OPermissions } from './o-permissions.type';
+export type OServiceBasePermissions = {
+    attr: string;
+    selector: string;
+    components?: OPermissions[];
+    actions?: OPermissions[];
+};

package/lib/types/o-tree-permissions.type.d.ts

@@ -0,0 +1,2 @@
+import { OServiceBasePermissions } from './o-service-base-permissions.type';
+export type OTreePermissions = OServiceBasePermissions;

package/lib/types/table/o-table-global-config.type.d.ts

@@ -1,4 +1,9 @@
+import { ORowHeight, OTableDetailMode, OTableEditionMode } from './../../util/codes';
 export type OTableGlobalConfig = {
     autoAdjust: boolean;
     autoAlignTitles: boolean;
+    filterColumnActiveByDefault: boolean;
+    editionMode: OTableEditionMode;
+    detailMode: OTableDetailMode;
+    rowHeight: ORowHeight;
 };

package/lib/types/table/o-table-permissions.type.d.ts

@@ -1,10 +1,8 @@
 import { OPermissions } from '../o-permissions.type';
+import { OServiceBasePermissions } from '../o-service-base-permissions.type';
 import { OTableMenuPermissions } from './o-table-menu-permissions.type';
-export type OTablePermissions = {
-    attr: string;
-    selector: string;
+export type OTablePermissions = OServiceBasePermissions & {
     menu?: OTableMenuPermissions;
     columns?: OPermissions[];
-    actions?: OPermissions[];
     contextMenu?: OPermissions[];
 };

package/lib/util/codes.d.ts

@@ -1,6 +1,9 @@
 export type OAppLayoutMode = 'mobile' | 'desktop';
 export type OSidenavMode = 'over' | 'push' | 'side';
 export type CHANGE_EVENTS = 'onValueChange' | 'onChange';
+export type ORowHeight = 'small' | 'medium' | 'large';
+export type OTableEditionMode = 'none' | 'click' | 'dblclick' | 'doubleclick';
+export type OTableDetailMode = 'none' | 'click' | 'dblclick' | 'doubleclick';
 export declare class Codes {
     static PAGINATED_QUERY_METHOD: string;
     static DELETE_METHOD: string;
@@ -12,13 +15,15 @@ export declare class Codes {
     static DETAIL_ICON: string;
     static EDIT_ICON: string;
     static DEFAULT_ROW_HEIGHT: string;
-    static AVAILABLE_ROW_HEIGHTS_VALUES: string[];
+    static readonly AVAILABLE_ROW_HEIGHTS_VALUES: string[];
     static DETAIL_MODE_NONE: string;
     static DETAIL_MODE_CLICK: string;
     static DETAIL_MODE_DBLCLICK_VALUES: string[];
+    static readonly AVAILABLE_DETAIL_MODES: string[];
     static EDITION_MODE_NONE: string;
     static EDITION_MODE_CLICK: string;
     static EDITION_MODE_DBLCLICK_VALUES: string[];
+    static readonly AVAILABLE_MODES: string[];
     static SELECTION_MODE_NONE: string;
     static SELECTION_MODE_SINGLE: string;
     static SELECTION_MODE_MULTIPLE: string;
@@ -97,4 +102,6 @@ export declare class Codes {
     static getIsDetailObject(): any;
     static formatString(format: number): string;
     static isHourInputAllowed(e: KeyboardEvent): boolean;
+    static isValidEditionMode(editionMode: OTableEditionMode): boolean;
+    static isValidDetailMode(detailMode: OTableDetailMode): any;
 }

package/lib/util/util.d.ts

@@ -46,4 +46,6 @@ export declare class Util {
     static configureMessageService(configureServiceArgs: OConfigureMessageServiceArgs): any;
     static isBase64(file: string): boolean;
     static stringify(obj: object): string;
+    static sortFunction(propertyA: string | number, propertyB: string | number, activeSortDirection: string): number;
+    static cloneArray<T>(arr: T[]): T[];
 }

package/ontimize.scss

@@ -21,7 +21,7 @@ $layout-gutter-width: ($baseline-grid * 2) !default;
 
   [layout-padding]>[flex-sm],
   [layout-padding]>[flex-lt-md] {
-    padding: math.div($layout-gutter-width, 4);
+    padding: calc($layout-gutter-width / 4);
   }
 
   [layout-padding],
@@ -29,17 +29,17 @@ $layout-gutter-width: ($baseline-grid * 2) !default;
   [layout-padding]>[flex-gt-sm],
   [layout-padding]>[flex-md],
   [layout-padding]>[flex-lt-lg] {
-    padding: math.div($layout-gutter-width, 2);
+    padding: calc($layout-gutter-width / 2);
   }
 
   [layout-padding]>[flex-gt-md],
   [layout-padding]>[flex-lg] {
-    padding: math.div($layout-gutter-width, 1);
+    padding: $layout-gutter-width
   }
 
   [layout-margin]>[flex-sm],
   [layout-margin]>[flex-lt-md] {
-    margin: math.div($layout-gutter-width, 4);
+    margin: calc($layout-gutter-width / 4);
   }
 
   [layout-margin],
@@ -47,13 +47,13 @@ $layout-gutter-width: ($baseline-grid * 2) !default;
   [layout-margin]>[flex-gt-sm],
   [layout-margin]>[flex-md],
   [layout-margin]>[flex-lt-lg] {
-    margin: math.div($layout-gutter-width, 2);
+    margin: calc($layout-gutter-width / 2);
   }
 
   [layout-margin]>[flex-gt-md],
   [layout-margin]>[flex-lg] {
-    margin: math.div($layout-gutter-width, 1);
-    }
+    margin: $layout-gutter-width;
+  }
 
     [layout-wrap] {
       flex-wrap: wrap;
@@ -65,17 +65,17 @@ $layout-gutter-width: ($baseline-grid * 2) !default;
   }
 
   @include layout-padding-margin();
-$display-1-font-size-base: rem(3.400) !default;
-$display-4-font-size-base: rem(11.20) !default;
-$display-3-font-size-base: rem(5.600) !default;
-$display-2-font-size-base: rem(4.500) !default;
+$display-1-font-size-base: 3.400rem !default;
+$display-4-font-size-base: 11.20rem !default;
+$display-3-font-size-base: 5.600rem !default;
+$display-2-font-size-base: 4.500rem !default;
 
-$headline-font-size-base: rem(2.400) !default;
-$title-font-size-base: rem(2.000) !default;
-$subhead-font-size-base: rem(1.600) !default;
+$headline-font-size-base: 2.400rem !default;
+$title-font-size-base: 2.000rem !default;
+$subhead-font-size-base: 1.600rem !default;
 
 // $body-font-size-base: rem(1.400) !default;
-$caption-font-size-base: rem(1.200) !default;
+$caption-font-size-base: 1.200rem !default;
 
 // Layout
 // $baseline-grid: 8px !default;
@@ -258,17 +258,17 @@ input {
 // [3] Prevent iOS text size adjust after orientation change, without disabling user zoom
 // [4] Fonts on OSX will look more consistent with other systems that do not
 // render text using sub-pixel anti-aliasing.
-$display-1-font-size-base: rem(3.400) !default;
-$display-4-font-size-base: rem(11.20) !default;
-$display-3-font-size-base: rem(5.600) !default;
-$display-2-font-size-base: rem(4.500) !default;
+$display-1-font-size-base: 3.400rem !default;
+$display-4-font-size-base: 11.20rem !default;
+$display-3-font-size-base: 5.600rem !default;
+$display-2-font-size-base: 4.500rem !default;
 
-$headline-font-size-base: rem(2.400) !default;
-$title-font-size-base: rem(2.000) !default;
-$subhead-font-size-base: rem(1.600) !default;
+$headline-font-size-base: 2.400rem !default;
+$title-font-size-base: 2.000rem !default;
+$subhead-font-size-base: 1.600rem !default;
 
 // $body-font-size-base: rem(1.400) !default;
-$caption-font-size-base: rem(1.200) !default;
+$caption-font-size-base: 1.200rem !default;
 
 // Layout
 // $baseline-grid: 8px !default;
@@ -337,19 +337,19 @@ html, body {
 .mat-headline-3 {
   font-size: $display-2-font-size-base;
   font-weight: 400;
-  line-height: rem(6.4);
+  line-height: 6.4rem;
 }
 
 .mat-headline-4 {
   font-size: $display-1-font-size-base;
   font-weight: 400;
-  line-height: rem(4);
+  line-height: 4rem;
 }
 
 .mat-headline-5 {
   font-size: $headline-font-size-base;
   font-weight: 400;
-  line-height: rem(3.2);
+  line-height: 3.2rem;
 }
 
 
@@ -380,17 +380,18 @@ input {
  .material-icons{
   font-feature-settings:"liga"
  }
-$display-1-font-size-base: rem(3.400) !default;
-$display-4-font-size-base: rem(11.20) !default;
-$display-3-font-size-base: rem(5.600) !default;
-$display-2-font-size-base: rem(4.500) !default;
 
-$headline-font-size-base: rem(2.400) !default;
-$title-font-size-base: rem(2.000) !default;
-$subhead-font-size-base: rem(1.600) !default;
+$display-1-font-size-base: 3.400rem !default;
+$display-4-font-size-base: 11.20rem !default;
+$display-3-font-size-base: 5.600rem !default;
+$display-2-font-size-base: 4.500rem !default;
+
+$headline-font-size-base: 2.400rem !default;
+$title-font-size-base: 2.000rem !default;
+$subhead-font-size-base: 1.600rem !default;
 
 // $body-font-size-base: rem(1.400) !default;
-$caption-font-size-base: rem(1.200) !default;
+$caption-font-size-base: 1.200rem !default;
 
 // Layout
 // $baseline-grid: 8px !default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ontimize-web-ngx",
   "homepage": "https://github.com/OntimizeWeb/ontimize-web-ngx#readme",
-  "version": "15.0.3",
+  "version": "15.1.0",
   "description": "Ontimize Web framework using Angular 15",
   "bugs": "https://github.com/OntimizeWeb/ontimize-web-ngx/issues",
   "author": "Imatia S.L.",

package/theme.scss

@@ -73,74 +73,7 @@
     }
   }
 
-}@mixin o-bar-menu-theme($theme-or-color-config) {
-    $theme: map.get($theme-or-color-config, color);
-    $primary: map.get($theme, primary);
-
-
-    $bg-color: #FFF;
-    $fg-color: rgba(0, 0, 0, 0.7);
-
-    $item-bg-color-hover-dark: rgba(0, 0, 0, 0.16);
-    $item-bg-color-hover-light: rgba(255, 255, 255, 0.16);
-
-    .o-bar-menu {
-      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-
-      nav {
-        .fake-ul {
-          .fake-ul {
-            background-color: $bg-color;
-
-            .mat-icon,
-            .o-bar-menu-group-title,
-            .o-bar-menu-item-title,
-            label.toggle {
-              color: $fg-color;
-            }
-
-            .fake-li {
-              background-color: $bg-color;
-            }
-          }
-        }
-
-        a {
-          color: $bg-color;
-        }
-      }
-
-      @media all and (min-width : 768px) {
-        nav .fake-ul {
-          .fake-li .fake-ul .fake-li-hover {
-            background: $item-bg-color-hover-dark;
-          }
-
-          .fake-li-hover {
-            background-color: $item-bg-color-hover-light;
-          }
-        }
-      }
-
-      @media all and (max-width : 767px) {
-        nav {
-          a:hover {
-            background-color: rgba(255, 255, 255, 0.15);
-          }
-
-          .fake-ul {
-            border-top: 1px solid rgba(255, 255, 255, 0.5);
-          }
-        }
-
-        .toggle {
-          &:hover {
-            background-color: rgba(255, 255, 255, 0.15);
-          }
-        }
-      }
-    }
-  }@mixin o-app-sidenav-theme($theme-or-color-config) {
+}@mixin o-app-sidenav-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
@@ -216,7 +149,74 @@
       }
     }
   }
-}@mixin o-breadcrumb-theme($theme-or-color-config) {
+}@mixin o-bar-menu-theme($theme-or-color-config) {
+    $theme: map.get($theme-or-color-config, color);
+    $primary: map.get($theme, primary);
+
+
+    $bg-color: #FFF;
+    $fg-color: rgba(0, 0, 0, 0.7);
+
+    $item-bg-color-hover-dark: rgba(0, 0, 0, 0.16);
+    $item-bg-color-hover-light: rgba(255, 255, 255, 0.16);
+
+    .o-bar-menu {
+      box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+
+      nav {
+        .fake-ul {
+          .fake-ul {
+            background-color: $bg-color;
+
+            .mat-icon,
+            .o-bar-menu-group-title,
+            .o-bar-menu-item-title,
+            label.toggle {
+              color: $fg-color;
+            }
+
+            .fake-li {
+              background-color: $bg-color;
+            }
+          }
+        }
+
+        a {
+          color: $bg-color;
+        }
+      }
+
+      @media all and (min-width : 768px) {
+        nav .fake-ul {
+          .fake-li .fake-ul .fake-li-hover {
+            background: $item-bg-color-hover-dark;
+          }
+
+          .fake-li-hover {
+            background-color: $item-bg-color-hover-light;
+          }
+        }
+      }
+
+      @media all and (max-width : 767px) {
+        nav {
+          a:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+          }
+
+          .fake-ul {
+            border-top: 1px solid rgba(255, 255, 255, 0.5);
+          }
+        }
+
+        .toggle {
+          &:hover {
+            background-color: rgba(255, 255, 255, 0.15);
+          }
+        }
+      }
+    }
+  }@mixin o-breadcrumb-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
@@ -1077,7 +1077,7 @@ $layout-gutter-width-horizontal: 14px !default;
   $warn: map.get($theme, warn);
   $background: map.get($theme, background);
   $foreground: map.get($theme, foreground);
-
+  $is-dark-theme: map-get($theme, is-dark);
   $color-inactive: #999999;
 
   /*
@@ -1095,6 +1095,27 @@ $layout-gutter-width-horizontal: 14px !default;
 * styles
 */
   .md-drppicker {
+    .calendar {
+
+      td,
+      th {
+        color: mat.get-color-from-palette($foreground, text);
+
+        &.in-range {
+          color: if($is-dark-theme, #000000, #fff);
+        }
+
+        &.available {
+          &.prev {
+            background-image: if($is-dark-theme, url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCiAgPGc+DQogICAgPHBhdGggZD0iTTMuNywwLjdMMS40LDNsMi4zLDIuM0wzLDZMMCwzbDMtM0wzLjcsMC43eiIgZmlsbD0iI0ZGRkZGRiIvPg0KICA8L2c+DQo8L3N2Zz4="), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K"));
+          }
+
+          &.next {
+            background-image: if($is-dark-theme, url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiIGZpbGw9IiNGRkZGRkYiIC8+DQo8L2c+DQo8L3N2Zz4NCg=="), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMy43IDYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMuNyA2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwYXRoIGQ9Ik0zLjcsMC43TDEuNCwzbDIuMywyLjNMMyw2TDAsM2wzLTNMMy43LDAuN3oiLz4NCjwvZz4NCjwvc3ZnPg0K"));
+          }
+        }
+      }
+    }
 
     background-color: mat.get-color-from-palette($background, card);
 
@@ -1250,6 +1271,8 @@ $layout-gutter-width-horizontal: 14px !default;
 }@mixin o-hour-input-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $primary: map.get($theme, primary);
+  $background: map.get($theme, background);
+  $is-dark-theme: map.get($theme, is-dark);
 
   ngx-material-timepicker-container ngx-material-timepicker-content {
     .timepicker__header {
@@ -1257,10 +1280,11 @@ $layout-gutter-width-horizontal: 14px !default;
     }
 
     .clock-face {
+      background-color: mat.get-color-from-palette($background, level-1);
+
       .clock-face__container {
         .clock-face__number>span.active {
           background-color: mat.get-color-from-palette($primary);
-          color: #fff;
         }
       }
 
@@ -1281,6 +1305,14 @@ $layout-gutter-width-horizontal: 14px !default;
       color: mat.get-color-from-palette($primary);
     }
 
+    .timepicker__actions {
+      background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), mat.get-color-from-palette($background, level-1)) !important;
+    }
+
+    .timepicker__body {
+      background-color: if($is-dark-theme, mat.get-color-from-palette($background, background), mat.get-color-from-palette($background, level-1)) !important;
+    }
+
     .timepicker-dial__control {
       outline: none;
     }
@@ -1371,7 +1403,7 @@ $layout-gutter-width-horizontal: 14px !default;
         }
 
         &.selected {
-          background: mat.get-color-from-palette($primary, 50, if($is-dark-theme, 0.5, 1));
+          background: mat.get-color-from-palette($background, hover, 0.12);
         }
 
         .mat-mdc-cell {
@@ -1453,7 +1485,8 @@ $layout-gutter-width-horizontal: 14px !default;
   .o-table-quickfilter .quickFilter .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-prefix div {
     border-right: 1px solid mat.get-color-from-palette($foreground, divider);
   }
-}@mixin o-dialog-theme($theme-or-color-config) {
+}
+@mixin o-dialog-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
   $background: map.get($theme, background);
   $foreground: map.get($theme, foreground);

package/theming/ontimize-style.scss

@@ -2,11 +2,11 @@
 @use "sass:map";
 @use 'fonts/poppins.scss';
 @use 'styles/ontimize/variables.scss';
-@use '@angular/material'as mat;
+@use '@angular/material' as mat;
 @use '@angular/cdk';
 @use 'styles/ontimize/typography-ontimize.scss';
-@use 'typography/ontimize.scss'as ontimize;
-@use 'ontimize-style-v8.scss'as ontimize-style;
+@use 'typography/ontimize.scss' as ontimize;
+@use 'ontimize-style-v8.scss' as ontimize-style;
 
 /*Sidenav background-color*/
 $sidenav-background-color: #f5f5f5;
@@ -42,7 +42,8 @@ $sidenav-background-color: #f5f5f5;
 }
 
 // Foreground palette for light themes.
-$ontimize-light-theme-foreground: (base: rgba(black, 0.6),
+$ontimize-light-theme-foreground: (
+  base: rgba(black, 0.6),
   divider: rgba(black, 0.12),
   dividers: rgba(black, 0.12),
   disabled: rgba(black, 0.38),
@@ -58,10 +59,12 @@ $ontimize-light-theme-foreground: (base: rgba(black, 0.6),
   slider-min: rgba(black, 0.38),
   slider-off: rgba(black, 0.38),
   slider-off-active: rgba(black, 0.38),
-  button: rgba(black, 0.74));
+  button: rgba(black, 0.74)
+);
 
 // Foreground palette for dark themes.
-$ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
+$ontimize-dark-theme-foreground: (
+  base: rgba(white, 0.6),
   divider: rgba(white, 0.12),
   dividers: rgba(white, 0.12),
   disabled: rgba(white, 0.38),
@@ -77,7 +80,8 @@ $ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
   slider-min: rgba(white, 0.38),
   slider-off: rgba(white, 0.38),
   slider-off-active: rgba(white, 0.38),
-  button: rgba(white, 0.74));
+  button: rgba(white, 0.74)
+);
 
 
 // Creates a container object for a light theme to be given to individual component theme mixins.
@@ -332,8 +336,6 @@ $ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
   $background-accent-button: if($is-dark-theme, transparent, #ffffff);
   $background-hover-accent-button: if($is-dark-theme, mat.get-color-from-palette($accent, 500, 0.04), mat.get-color-from-palette($accent, 100));
   $background-hover-warn-button: if($is-dark-theme, mat.get-color-from-palette($warn, 500, 0.04), mat.get-color-from-palette($warn, 100));
-  $table-row-over-background: if($is-dark-theme, #ffffff1f, #f5f5f5);
-  $table-row-selected-background: if($is-dark-theme, #f1f6fa80, #eaeaea);
   $sidenav-background-color: if($is-dark-theme, mix(#1e1e1e, mat.get-color-from-palette($primary, 500), 94%), mat.get-color-from-palette($background, status-bar));
 
   .o-app-header {
@@ -524,6 +526,13 @@ $ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
 
   }
 
+  .o-tree {
+    .selected-node {
+      color: mat.get-color-from-palette($primary, 500);
+      font-weight: 800;
+    }
+  }
+
   .o-table {
     .o-table-quickfilter .quickFilter .mat-form-field .mat-mdc-text-field-wrapper .mat-form-field-flex .mat-form-field-prefix div {
       border-color: mat.get-color-from-palette($foreground, text, 0.32);
@@ -535,34 +544,7 @@ $ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
 
     .mat-mdc-table {
       .mat-mdc-row {
-        //TO BE DEFINED
-        //       &.o-table-group-row-level-1 {
-        //         font-weight: 900;
-        //         background-color: if($is-dark-theme, #464646, #b2b2b2);
-        //       }
-
-        //       &.o-table-group-row-level-2 {
-        //         font-weight: 800;
-        //         background-color: if($is-dark-theme, #575757, #cccccc);
-        //       }
-
-        //       &.o-table-group-row-level-3 {
-        //         font-weight: 700;
-        //         background-color: if($is-dark-theme,#686868, #e8e8e8);
-        //       }
-
-        //       &.o-table-group-row-level-4 {
-        //         font-weight: 600;
-        //         background-color: if($is-dark-theme, #7a7a7a, #f9f9f9);
-        //       }
-        &:hover:not(.o-table-group-row) {
-          cursor: pointer;
-          background-color: $table-row-over-background;
-        }
 
-        &.selected {
-          background-color: $table-row-selected-background;
-        }
 
         .mat-mdc-cell {
           color: mat.get-color-from-palette($foreground, base);
@@ -773,4 +755,4 @@ $ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
     border-radius: variables.$border-radius;
   }
 
-}
+}