ontimize-web-ngx 15.0.0-beta.0 → 15.0.0-beta.1

package/lib/services/appearance.service.d.ts

@@ -5,13 +5,16 @@ import { LocalStorageService } from './local-storage.service';
 import * as i0 from "@angular/core";
 export declare class AppearanceService {
     protected injector: Injector;
+    readonly darkThemeClass = "o-dark";
     private isDarkModeSubject;
     isDarkMode$: Observable<boolean>;
     protected _appConfig: AppConfig;
+    protected _document: Document;
     protected localStorageService: LocalStorageService;
     constructor(injector: Injector);
     setDarkMode(isDarkMode: boolean): void;
     isDarkMode(): boolean;
+    updateThemeClass(isDark?: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AppearanceService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AppearanceService>;
 }

package/package.json

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

package/theme.scss

@@ -9,12 +9,20 @@
     $theme-or-color-config: map.merge($theme-or-color-config, 'typography', $typographyConfig);
   }
 
+
   //Include theme styles for core and each component used in your app.;
-  @include mat.all-component-themes($theme-or-color-config);
+  $typography: map.get($theme-or-color-config, typography);
+
+  @if($typography) {
+    @include mat.core();
+    @include mat.all-component-themes($theme-or-color-config);
+  }
+
+  @else {
+    @include mat.all-component-colors($theme-or-color-config);
+  }
 
   $typography: mat.get-typography-config($theme-or-color-config);
-  //Emit the CSS rules for these CSS classes and native elements
-  @include mat.typography-hierarchy($typography);
 
   @include app-global-theme($theme-or-color-config);
   @include o-breadcrumb-theme($theme-or-color-config);
@@ -24,7 +32,6 @@
   @include o-date-input-theme($theme-or-color-config);
   @include o-dialog-theme($theme-or-color-config);
   @include o-table-theme($theme-or-color-config);
-  @include o-table-typography($typography);
   @include o-list-theme($theme-or-color-config);
   @include o-list-picker-theme($theme-or-color-config);
   @include o-app-header-theme($theme-or-color-config);
@@ -247,12 +254,17 @@
       background-color: mat.get-color-from-palette($background, background, 0.29);
     }
 
+    @if($typography) {
+      .o-card-menu-item-title {
+        font-size: mat.font-size($typography, headline-6);
+      }
+    }
+
     .o-card-menu-item-title {
       color: mat.get-color-from-palette($primary);
-      font-size: mat.font-size($typography, headline-5);
     }
 
-    .mat-mdc-button {
+    .mat-mdc-button:not(:disabled) {
       color: mat.get-color-from-palette($primary);
       background: mat.get-color-from-palette($accent, 100);
     }
@@ -292,12 +304,14 @@
 
       }
 
-      >.o-container-title,
-      >.mat-expansion-panel-header .o-container-title {
-        span {
-          font: {
-            size: mat.font-size($typography, body-1);
-            weight: mat.font-weight($typography, body-1);
+      @if($typography) {
+        >.o-container-title,
+        >.mat-expansion-panel-header .o-container-title {
+          span {
+            font: {
+              size: mat.font-size($typography, body-1);
+              weight: mat.font-weight($typography, body-1);
+            }
           }
         }
       }
@@ -590,13 +604,16 @@
     background-color: mat.get-color-from-palette($background, background);
   }
 
-  button,
-  html,
-  input,
-  select,
-  span,
-  textarea {
-    font-family: mat.font-family($typography);
+  @if($typography) {
+
+    button,
+    html,
+    input,
+    select,
+    span,
+    textarea {
+      font-family: mat.font-family($typography);
+    }
   }
 
   ::-webkit-scrollbar {
@@ -685,7 +702,9 @@
       }
 
       .mat-mdc-dialog-content {
-        font-size: mat.font-size($typography, body-1);
+        @if($typography) {
+          font-size: mat.font-size($typography, body-1);
+        }
 
         .mat-mdc-subheader.mdc-list-group__subheader {
           font-weight: inherit;
@@ -708,18 +727,20 @@
 
         }
 
-        .mat-mdc-list[dense] {
-          .mat-mdc-list-item {
+        @if($typography) {
+          .mat-mdc-list[dense] {
+            .mat-mdc-list-item {
 
-            .empty-filter-list,
-            .mdc-list-item__content>* {
-              font-size: mat.font-size($typography, body-1);
-            }
+              .empty-filter-list,
+              .mdc-list-item__content>* {
+                font-size: mat.font-size($typography, body-1);
+              }
 
-            .mat-mdc-list-item-line:nth-child(n+2) {
-              font-size: mat.font-size($typography, caption);
-            }
+              .mat-mdc-list-item-line:nth-child(n+2) {
+                font-size: mat.font-size($typography, caption);
+              }
 
+            }
           }
         }
       }
@@ -751,12 +772,15 @@
       .mdc-list-item__primary-text,
       .mdc-list-item__secondary-text {
         margin-bottom: 0;
+
         &::before {
           height: auto;
           content: none;
         }
 
-        font-size: mat.font-size($typography, caption);
+        @if($typography) {
+          font-size: mat.font-size($typography, caption);
+        }
 
       }
     }
@@ -773,9 +797,14 @@
     box-sizing: border-box;
     border-radius: 2px;
 
+    @if($typography) {
+      .mdc-list-item__content {
+        font-size: mat.font-size($typography, body-1);
+      }
+    }
+
     .mdc-list-item__content {
       display: block;
-      font-size: mat.font-size($typography, body-1);
       color: mat.get-color-from-palette($foreground, text);
       padding: 6px;
       flex-direction: row;
@@ -967,28 +996,11 @@
   }
 
   /*MAT MENU*/
-  /* TODO(mdc-migration): The following rule targets internal classes of menu that may no longer apply for the MDC version. */
-  /* TODO(mdc-migration): The following rule targets internal classes of menu that may no longer apply for the MDC version. */
   .o-mat-menu.mat-mdc-menu-panel {
     min-height: auto;
   }
 
-  /* CHART FONT */
-  o-chart .nvd3 {
-    text {
-      font: mat.font-weight($typography, caption) mat.font-size($typography, caption) mat.font-family($typography);
-      fill: mat.get-color-from-palette($foreground, text);
-    }
-
-    .nv-discretebar .nv-groups text,
-    .nv-multibarHorizontal .nv-groups text {
-      fill: mat.get-color-from-palette($foreground, text);
-    }
 
-    .nv-axis path {
-      stroke: mat.get-color-from-palette($foreground, text);
-    }
-  }
 }// Layout-padding-xxx & Layout-margin-xxxx
 // ------------------------------
 $baseline-grid: 8px !default;
@@ -1445,113 +1457,7 @@ $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);
   }
-}@function o-table-typography-config(
-  /* Small */
-  $small-header-height:     mat.define-typography-level(32px, 32px, 400),
-  $small-row-height:        mat.define-typography-level(28px, 28px, 400),
-  $small-header-font-size:  mat.define-typography-level(16px, 16px, 400),
-  $small-row-font-size:     mat.define-typography-level(12px, 12px, 400),
-  /* Medium */
-  $medium-header-height:    mat.define-typography-level(40px, 40px, 400),
-  $medium-row-height:       mat.define-typography-level(36px, 36px, 400),
-  $medium-header-font-size: mat.define-typography-level(20px, 20px, 400),
-  $medium-row-font-size:    mat.define-typography-level(14px, 14px, 400),
-  /* Large */
-  $large-header-height:     mat.define-typography-level(52px, 40px, 400),
-  $large-row-height:        mat.define-typography-level(48px, 36px, 400),
-  $large-header-font-size:  mat.define-typography-level(24px, 24px, 400),
-  $large-row-font-size:     mat.define-typography-level(14px, 14px, 400)
-) {
-
-  // Declare an initial map with all of the levels.
-  $config: (
-    small-header-height:      $small-header-height,
-    small-row-height:         $small-row-height,
-    small-header-font-size:   $small-header-font-size,
-    small-row-font-size:      $small-row-font-size,
-
-    medium-header-height:     $medium-header-height,
-    medium-row-height:        $medium-row-height,
-    medium-header-font-size:  $medium-header-font-size,
-    medium-row-font-size:     $medium-row-font-size,
-
-    large-header-height:      $large-header-height,
-    large-row-height:         $large-row-height,
-    large-header-font-size:   $large-header-font-size,
-    large-row-font-size:      $large-row-font-size
-  );
-  @return $config;
-}
-@mixin o-table-size-typography($typography, $size) {
-
-  $header-height: mat.font-size($typography, #{$size}-header-height);
-  $row-height: mat.font-size($typography, #{$size}-row-height);
-  $header-font-size: mat.font-size($typography, #{$size}-header-font-size);
-  $row-font-size: mat.font-size($typography, #{$size}-row-font-size);
-
-  .o-table .o-table-container {
-    .mat-mdc-table.#{$size} {
-      tr.mat-mdc-header-row:not(.o-table-insertable) {
-        height: $header-height;
-
-        .mat-mdc-header-cell {
-          font-size: $header-font-size;
-        }
-      }
-
-      tr.mat-mdc-row {
-        height: $row-height;
-
-        .mat-mdc-cell {
-          .mat-mdc-form-field {
-            font-size: $row-font-size;
-          }
-          font-size: $row-font-size;
-        }
-      }
-
-      tr.o-table-insertable.mat-mdc-header-row{
-        height: $row-height;
-
-        .mat-mdc-table-sticky {
-          .mat-mdc-form-field {
-            font-size: $row-font-size;
-          }
-          font-size: $row-font-size;
-        }
-      }
-
-      .o-table-no-results span {
-        font-size: $row-font-size;
-        line-height: $header-height;
-      }
-    }
-  }
-
-  .o-table-context-menu.#{$size},
-  .o-table-menu.#{$size} {
-    .mat-mdc-menu-item {
-      line-height: $row-height;
-      height: $row-height;
-      min-height: $row-height;
-    }
-  }
-
-  .o-table-visible-columns-dialog {
-    .mat-mdc-list.#{$size} .mat-mdc-list-item {
-      height: $header-height;
-    }
-  }
-}
-@mixin o-table-typography($typography: null) {
-   @if $typography == null{
-    $typography: o-table-typography-config();
-  }
-  @include o-table-size-typography($typography, 'small');
-  @include o-table-size-typography($typography, 'medium');
-  @include o-table-size-typography($typography, 'large');
-}
-@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-theme.scss → ontimize-style-v8.scss}

@@ -1,13 +1,19 @@
 @use "sass:map";
-@use 'fonts/poppins.scss';
-@use 'styles/lite/layout.scss';
-@use 'styles/default/typography/ontimize.scss'as ontimize-typography;
-@use 'styles/default/addons/report-on-demand.scss';
-@use 'styles/default/addons/charts-on-demand.scss';
 @use '@angular/material'as mat;
+@use 'fonts/poppins.scss';
+@use 'styles/ontimize-v8/variables.scss';
+@use 'typography/ontimize.scss';
+@use 'styles/ontimize-v8/o-form-field-style.scss';
+@use 'styles/ontimize-v8/o-table-style.scss';
+@use 'styles/ontimize-v8/containers';
+@use 'styles/layout.scss';
 @use 'styles/density.scss'as o-density;
+@use 'styles/paginator.scss';
+
+@use '../theme.scss';
+@use 'addons/report-on-demand.scss';
+@use 'addons/charts-on-demand.scss';
 
-$typography: ontimize-typography.$default-typography;
 $background-color: #eceff1;
 /*Application background-color*/
 $app-background-color: #eaeaea;
@@ -44,7 +50,7 @@ $app-background-color: #eaeaea;
       is-dark: false,
       foreground: map.get($mat-theme, foreground),
       background: ontimize-light-theme-background($mat-theme)),
-    typography: mat.define-typography-config())
+    typography:ontimize.$typography)
 }
 
 // Creates a container object for a dark theme to be given to individual component theme mixins.
@@ -56,7 +62,7 @@ $app-background-color: #eaeaea;
       is-dark: true,
       foreground: map.get($mat-theme, foreground),
       background: ontimize-dark-theme-background($mat-theme)),
-    typography: mat.define-typography-config())
+    typography: ontimize.$typography)
 }
 
 @mixin ontimize-theme-styles($theme-or-color-config) {
@@ -65,35 +71,28 @@ $app-background-color: #eaeaea;
 
   $primary: map.get($theme, primary);
   $accent: map.get($theme, accent);
-  // $warn: map.get($theme, warn);
   $background: map.get($theme, background);
   $foreground: map.get($theme, foreground);
   $container-background: mat.get-color-from-palette($background, 'card');
-  $border-radius: 2px;
-  $button-line-height: 30px;
-  $basic-padding-size: 8px;
-  // $tabs-header-border: 1px solid mat.get-color-from-palette($foreground, divider);
-  $tabs-header-border: none;
-  $inactive-tab-opacity: .35;
-  $font-size-title-container: 1;
+
   $fill-background-input: mat.get-color-from-palette($foreground, base, 0.1);
   $is-dark-theme: map.get($theme, is-dark);
 
-  // $background-tab-active: mat.get-color-from-palette($background, 800);
-  $background-tab-inactive-on-dark: #686868;
-  $background-tab-inactive-on-light: #D7DDE0;
-  $background-tab-inactive: if($is-dark-theme, $background-tab-inactive-on-dark, $background-tab-inactive-on-light);
+  $background-tab-inactive: if($is-dark-theme, variables.$background-tab-inactive-on-dark, variables.$background-tab-inactive-on-light);
   $background-accent-button: if($is-dark-theme, transparent, #ffffff);
   $background-hover-accent-button: if($is-dark-theme, mat.get-color-from-palette($accent, 500), mat.get-color-from-palette($accent, 100));
   $background-primary-button: if($is-dark-theme, mat.get-color-from-palette($primary, 500), mat.get-color-from-palette($primary, 100));
   $background-hover-primary-button: if($is-dark-theme, transparent, #ffffff);
-  // $mat-font-family: 'Lato', sans-serif !default;
-  @include report-on-demand.report-on-demand($theme-or-color-config);
-  @include charts-on-demand.o-chart-on-demand($theme-or-color-config);
+
+  @include theme.o-material-theme($theme-or-color-config);
   @include layout.layout-padding-margin();
-  @include o-density.checkbox(20px, 16px, 16px);
+  @include o-density.checkbox(19px, 19px, 15px);
   @include o-density.list();
   @include o-density.radio();
+  @include o-table-style.o-table-style($theme-or-color-config);
+  @include report-on-demand.report-on-demand($theme-or-color-config);
+  @include charts-on-demand.o-chart-on-demand($theme-or-color-config);
+
 
   .mat-dialog-actions {
 
@@ -135,7 +134,7 @@ $app-background-color: #eaeaea;
   .standalone-chart-container,
   .standalone-form-container .o-form-content-wrapper {
     background: $container-background;
-    border-radius: $border-radius;
+    border-radius: variables.$border-radius;
   }
 
   .standalone-chart-container {
@@ -144,7 +143,7 @@ $app-background-color: #eaeaea;
 
   .standalone-form-container {
     .inner-form {
-      padding: $basic-padding-size*2;
+      padding: variables.$basic-padding-size*2;
     }
   }
 
@@ -168,7 +167,7 @@ $app-background-color: #eaeaea;
     .mat-toolbar {
       box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.24);
       background-color: mat.get-color-from-palette($background, background);
-      border-radius: $border-radius;
+      border-radius: variables.$border-radius;
       min-height: initial;
     }
   }
@@ -221,10 +220,12 @@ $app-background-color: #eaeaea;
 
           .mdc-tab__content {
             width: 100%;
+
             .mdc-tab__text-label {
               padding: 0 8px;
             }
           }
+
           &.mdc-tab--active {
             background: $container-background;
 
@@ -245,8 +246,8 @@ $app-background-color: #eaeaea;
 
       >.mat-mdc-tab-body-wrapper {
         background: $container-background;
-        border-radius: $border-radius;
-        border-top: $tabs-header-border;
+        border-radius: variables.$border-radius;
+        border-top: variables.$tabs-header-border;
         border-top-left-radius: initial;
       }
     }
@@ -255,7 +256,7 @@ $app-background-color: #eaeaea;
     &.mat-mdc-tab-group {
 
       .mat-mdc-tab-body-wrapper {
-        padding: $basic-padding-size;
+        padding: variables.$basic-padding-size;
       }
     }
   }
@@ -268,75 +269,10 @@ $app-background-color: #eaeaea;
     &.mat-mdc-icon-button,
     &.mat-mdc-raised-button,
     &.mat-mdc-outlined-button {
-      border-radius: $border-radius;
+      border-radius: variables.$border-radius;
     }
   }
 
-  /* TABLE */
-  .ontimize-table.o-table {
-    font-weight: 400;
-
-    .o-table-container {
-      border: none;
-      border-radius: $border-radius;
-      box-sizing: border-box;
-
-      /*Toolbar*/
-      .o-table-toolbar {
-        margin: 0 0 4px;
-        padding-top: $basic-padding-size;
-      }
-
-      .o-table-menu {
-        .o-table-option-active {
-          background: mat.get-color-from-palette($foreground, divider);
-        }
-      }
-
-      thead tr th {
-        font-weight: 700;
-      }
-
-      tbody tr.even,
-      thead tr {
-        background-color: inherit;
-      }
-
-      /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
-      tbody td.o-table-column-select-checkbox .mat-checkbox-inner-container .mat-checkbox-background,
-      thead tr th.o-table-column-select-checkbox .mat-checkbox-inner-container .mat-checkbox-background {
-        background-color: mat.get-color-from-palette($accent);
-      }
-
-      .mat-mdc-header-cell {
-        font-weight: 700;
-      }
-    }
-
-    .mat-mdc-paginator {
-      background: inherit;
-    }
-
-    .mat-mdc-table {
-      .mat-mdc-header-row .mat-mdc-header-cell {
-        font-weight: 700;
-      }
-    }
-  }
-
-  .ontimize-table.o-table.o-table-fixed {
-    .o-scrollable-container {
-      height: 100%;
-      overflow-y: auto;
-    }
-  }
-
-
-
-  .mat-mdc-menu-panel.o-table-quickfilter-menu .mat-mdc-checkbox,
-  .mat-mdc-menu-panel.o-search-input-menu .mat-mdc-checkbox {
-    padding: 2px 0;
-  }
 
   /*background levels */
   .bg-level-0,