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

package/theming/{implatform-fashion-theme.scss → ontimize-style.scss}

@@ -1,15 +1,110 @@
 @use "sass:color";
 @use "sass:map";
-@use 'themes/implatform-fashion-default-theme.scss';
-@use 'styles/fashion/typography-fashion.scss';
-@use 'styles/fashion/variables.scss';
-@use 'styles/lite/typography/ontimize-lite.scss'as ontimize-lite;
+@use 'fonts/poppins.scss';
+@use 'styles/ontimize/variables.scss';
 @use '@angular/material'as mat;
 @use '@angular/cdk';
-@use 'styles/default/typography/ontimize.scss'as ontimize-typography;
+@use 'styles/ontimize/typography-ontimize.scss';
+@use 'typography/ontimize.scss'as ontimize;
+@use 'ontimize-style-v8.scss'as ontimize-style;
+
+/*Sidenav background-color*/
+$sidenav-background-color: #f5f5f5;
+
+// Background palette for light themes.
+@function ontimize-light-theme-background($primary, $mat-theme) {
+  $primary-500: mat.get-color-from-palette($primary, 500);
+  $background: map.get($mat-theme, background);
+  @return map.merge($background,
+    (level-0: mix(variables.$app-background-color, $primary-500, 98%),
+      level-04: #f2f2f2,
+      level-06: #f6f6f6,
+      level-08: #fafafa,
+      level-1: white,
+      sidenav-overlay: #525252,
+      status-bar: mix($sidenav-background-color, mat.get-color-from-palette($primary), 97.2%),
+      app-bar: mix($sidenav-background-color, mat.get-color-from-palette($primary), 97.2%),
+      background: mix(variables.$app-background-color, mat.get-color-from-palette($primary), 97.2%)));
+}
 
-$typography : ontimize-lite.$typography;
+// Background palette for dark themes.
+@function ontimize-dark-theme-background($primary, $mat-theme) {
+  $primary-500: mat.get-color-from-palette($primary, 500);
+  $background: map.get($mat-theme, background);
+  @return map.merge($background,
+    (level-0: mix(#171717, $primary-500, 94%),
+      level-04: mix(#1E1E1E, $primary-500, 94%),
+      level-06: mix(#2C2C2C, $primary-500, 94%),
+      level-08: mix(#333333, $primary-500, 94%),
+      level-1: mix(#383838, $primary-500, 94%),
+      sidenav-overlay: #525252,
+      status-bar: mix(#272727, $primary-500, 94%)));
+}
 
+// Foreground palette for light themes.
+$ontimize-light-theme-foreground: (base: rgba(black, 0.6),
+  divider: rgba(black, 0.12),
+  dividers: rgba(black, 0.12),
+  disabled: rgba(black, 0.38),
+  disabled-button: rgba(black, 0.38),
+  disabled-text: rgba(black, 0.38),
+  elevation: black,
+  hint-text: rgba(black, 0.38),
+  secondary-text: rgba(black, 0.54),
+  title: rgba(black, 0.87),
+  icon: rgba(black, 0.6),
+  icons: rgba(black, 0.6),
+  text: rgba(black, 0.87),
+  slider-min: rgba(black, 0.38),
+  slider-off: rgba(black, 0.38),
+  slider-off-active: rgba(black, 0.38),
+  button: rgba(black, 0.74));
+
+// Foreground palette for dark themes.
+$ontimize-dark-theme-foreground: (base: rgba(white, 0.6),
+  divider: rgba(white, 0.12),
+  dividers: rgba(white, 0.12),
+  disabled: rgba(white, 0.38),
+  disabled-button: rgba(white, 0.38),
+  disabled-text: rgba(white, 0.38),
+  elevation: black,
+  hint-text: rgba(white, 0.38),
+  secondary-text: rgba(white, 0.54),
+  title: rgba(white, 0.87),
+  icon: rgba(white, 0.6),
+  icons: rgba(white, 0.6),
+  text: rgba(white, 0.87),
+  slider-min: rgba(white, 0.38),
+  slider-off: rgba(white, 0.38),
+  slider-off-active: rgba(white, 0.38),
+  button: rgba(white, 0.74));
+
+
+// Creates a container object for a light theme to be given to individual component theme mixins.
+@function o-mat-light-theme($primary, $accent, $warn: mat.define-palette(mat.$red-palette)) {
+  $mat-theme: mat.define-light-theme((color:(primary: $primary, accent: $accent, warn: $warn)));
+  $color: map.get($mat-theme, color);
+  @return (color:(primary: $primary,
+      accent: $accent,
+      warn: $warn,
+      is-dark: false,
+      foreground: $ontimize-light-theme-foreground,
+      background: ontimize-light-theme-background($primary, $color)),
+    typography:ontimize.$typography)
+}
+
+// Creates a container object for a dark theme to be given to individual component theme mixins.
+@function o-mat-dark-theme($primary, $accent, $warn: mat.define-palette(mat.$red-palette)) {
+  $mat-theme: mat.define-dark-theme((color:(primary: $primary, accent: $accent, warn: $warn)));
+  $color: map.get($mat-theme, color);
+  @return (color:(primary: $primary,
+      accent: $accent,
+      warn: $warn,
+      is-dark: true,
+      foreground: $ontimize-dark-theme-foreground,
+      background: ontimize-dark-theme-background($primary, $color)),
+    typography:ontimize.$typography)
+}
 
 @mixin mat-checkbox-theme($theme-or-color-config) {
   $theme: map.get($theme-or-color-config, color);
@@ -200,32 +295,30 @@ $typography : ontimize-lite.$typography;
       background: $disabled-color;
     }
   }
-
-
 }
 
-@mixin implatform-fashion-theme-styles($theme-or-color-config, $typographyConfig: null) {
-
-  $current-typography: if(ontimize-typography.$lite-typography==null, ontimize-typography.$default-typography, ontimize-typography.$lite-typography);
-
-  @if $typographyConfig !=null {
-    $typography: map-merge($current-typography, $typographyConfig);
-  }
-
-  @else {
-    $typography: $current-typography;
-  }
-
-  $theme-or-color-config: map.merge($theme-or-color-config, 'typography', $typography);
+@mixin ontimize-theme-all-component-color($theme-or-color-config) {
+  $color: map.get($theme-or-color-config, color);
+  @include ontimize-theme-styles((color: $color,
+      typography: null,
+      density: null,
+    ));
+}
 
+@mixin ontimize-theme-styles($theme-or-color-config) {
 
   $typography: mat.get-typography-config($theme-or-color-config);
-
+  //Apply v8 styles
+  @include ontimize-style.ontimize-theme-styles($theme-or-color-config);
+  //Apply new styles
   @include mat-checkbox-theme($theme-or-color-config);
   @include mat-pseudo-checkbox-theme($theme-or-color-config);
-  @include typography-fashion.o-table-typography-fashion($typography);
-  @include typography-fashion.o-common-typography-fashion($typography);
-  @include typography-fashion.o-form-theme-fashion($typography);
+
+  @if($typography) {
+    @include typography-ontimize.o-table-typography-fashion($typography);
+    @include typography-ontimize.o-common-typography-fashion($typography);
+    @include typography-ontimize.o-form-theme-fashion($typography);
+  }
 
   $theme: map.get($theme-or-color-config, color);
   $background: map.get($theme, background);
@@ -411,7 +504,7 @@ $typography : ontimize-lite.$typography;
     }
   }
 
-  .mat-mdc-tab-group .mdc-tab.mdc-tab--active .mdc-tab__text-label{
+  .mat-mdc-tab-group .mdc-tab.mdc-tab--active .mdc-tab__text-label {
     color: mat.get-color-from-palette($foreground, title);
   }
 
@@ -599,12 +692,14 @@ $typography : ontimize-lite.$typography;
         }
       }
 
-      >.o-container-title,
-      >.mat-expansion-panel-header .o-container-title {
-        span {
-          font: {
-            size: mat.font-size($typography, headline-5);
-            weight: bold;
+      @if($typography) {
+        >.o-container-title,
+        >.mat-expansion-panel-header .o-container-title {
+          span {
+            font: {
+              size: mat.font-size($typography, headline-5);
+              weight: bold;
+            }
           }
         }
       }

package/theming/styles/{lite/layout-lite.scss → layout.scss}

@@ -20,7 +20,7 @@ $layout-gutter-width: ($baseline-grid * 2) !default;
 $layout-gutter-width-vertical: $baseline-grid;
 $layout-gutter-width-horizontal: 14px !default;
 
-@mixin layout-padding-margin-lite() {
+@mixin layout-padding-margin() {
   [layout-padding] > [flex-lt-md],
   [layout-padding] > [flex-sm] {
     padding: $layout-gutter-width * 0.25;

package/theming/styles/{fashion/typography-fashion.scss → ontimize/typography-ontimize.scss}

@@ -72,15 +72,25 @@
         max-height: 64px;
         padding: 0 24px;
 
-        font: {
-          size: mat.font-size($typography, headline-5);
-          weight: bold;
+        @if($typography) {
+          font: {
+            size: mat.font-size($typography, headline-5);
+            weight: bold;
+          }
+
+          .o-form-navigation {
+            span {
+              font: {
+                size: mat.font-size($typography, subtitle-1);
+                weight: normal;
+              }
+            }
+          }
         }
 
         .o-form-navigation {
           span {
             font: {
-              size: mat.font-size($typography, subtitle-1);
               weight: normal;
             }
           }

package/theming/styles/{lite/typography-lite.scss → ontimize-v8/containers.scss}

@@ -1,98 +1,4 @@
-@use '@angular/material'as mat;
-@use 'form-field/o-form-field-theme.scss';
 
-@mixin o-table-typography-lite($config) {
-
-  .o-table.o-table {
-    .o-table-container {
-      .mat-mdc-table {
-        .mat-mdc-header-cell {
-          font-weight: 600;
-
-          .column-filter-icon {
-            margin-right: 4px;
-            width: 16px;
-            height: 16px;
-          }
-        }
-      }
-    }
-  }
-
-  o-table.o-table {
-    .o-table-container {
-      .o-table-toolbar .buttons .o-table-button .mat-mdc-button {
-
-        height: 30px;
-        border: none;
-        padding: 0 6px;
-        border-radius: 0;
-
-        &.disabled {
-          border: none;
-          border-radius: 0;
-        }
-
-        &:not(.disabled):hover {
-          border: none;
-          border-radius: 0;
-        }
-      }
-
-      .mat-mdc-table {
-        .mat-mdc-form-field {
-
-          /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-          .mat-form-field-infix {
-            border-top: 0;
-          }
-        }
-
-        .mat-mdc-row .mat-mdc-cell {
-          &:not(.o-column-image):first-of-type {
-            padding-left: 12px;
-          }
-
-          &:last-of-type {
-            padding-right: 12px;
-          }
-        }
-
-        .mat-mdc-cell,
-        .mat-mdc-header-cell {
-          &.mat-column-select {
-            padding: 0 0 0 12px;
-          }
-        }
-      }
-    }
-  }
-
-  .o-table-export-dialog.o-table-export-dialog {
-    .mat-mdc-raised-button {
-      width: 68px;
-      height: 68px;
-      min-width: 68px;
-
-      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-      .mat-button-wrapper {
-        >div {
-          line-height: 1;
-        }
-      }
-
-      .mat-icon {
-        padding: 0 6px 6px;
-        width: 38px;
-        height: 38px;
-        font-size: 38px;
-      }
-    }
-  }
-
-}
-
-@mixin o-common-typography-lite($config) {
   $font-size-title-container: .75;
 
   .o-column,
@@ -227,9 +133,8 @@
     }
   }
 
-}
 
-@mixin o-form-theme() {
+
   $mat-toolbar-height-desktop: 36px;
   $margin-button: 6px;
   $mat-icon-button-size: 30px;
@@ -268,4 +173,3 @@
       }
     }
   }
-}

package/theming/styles/ontimize-v8/o-form-field-style.scss

@@ -0,0 +1,52 @@
+@use '@angular/material'as mat;
+
+
+.mat-mdc-form-field {
+
+  @include mat.form-field-density(-4);
+
+
+  &.icon-field .mat-mdc-form-field-icon-suffix .icon-btn,
+  &.icon-field .mat-mdc-form-field-icon-suffix .mat-icon-button,
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-suffix .mat-mdc-icon-button,
+  .mat-mdc-text-field-wrapper .mat-mdc-form-field-icon-prefix .mat-mdc-icon-button {
+    svg {
+      height: 100%;
+      width: 100%;
+    }
+
+    .mat-mdc-button-touch-target {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    display: none;
+  }
+
+  .mat-mdc-text-field-wrapper {
+    .mat-mdc-form-field-flex {
+      .mat-mdc-form-field-infix {
+        min-height: auto;
+        padding-bottom: 4px;
+
+
+        .mat-mdc-floating-label {
+          display: block;
+        }
+
+        .mat-mdc-select-arrow-wrapper {
+          height: auto;
+        }
+      }
+
+      &:not(.mdc-text-field--outlined) {
+        .mat-mdc-form-field-infix {
+          min-height: auto;
+          padding-top: 14px;
+        }
+      }
+    }
+  }
+}

package/theming/styles/ontimize-v8/o-table-style.scss

@@ -0,0 +1,224 @@
+@use 'variables.scss';
+@use '@angular/material'as mat;
+@use "sass:map";
+
+@mixin o-table-style($theme) {
+
+  $foreground: map.get($theme, color, foreground);
+  $accent: map.get($theme, color, accent);
+  $typography: map.get($theme, typography);
+
+  /* TABLE */
+  .ontimize-table.o-table {
+    font-weight: 400;
+
+    .o-table-container {
+      border: none;
+      border-radius: variables.$border-radius;
+      box-sizing: border-box;
+
+      /*Toolbar*/
+      .o-table-toolbar {
+        margin: 0 0 4px;
+        padding-top: variables.$basic-padding-size;
+
+        .buttons .o-table-button .mat-mdc-button {
+
+          height: 30px;
+          border: none;
+          padding: 0 6px;
+          border-radius: 0;
+
+          &.disabled {
+            border: none;
+            border-radius: 0;
+          }
+
+          &:not(.disabled):hover {
+            border: none;
+            border-radius: 0;
+          }
+        }
+      }
+
+      .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;
+
+        .column-filter-icon {
+          margin-right: 4px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+    }
+
+    .mat-mdc-paginator {
+      background: inherit;
+    }
+
+    .mat-mdc-table {
+      .mat-mdc-header-row .mat-mdc-header-cell {
+        font-weight: 700;
+      }
+
+      .mat-mdc-form-field {
+        .mat-mdc-form-field-infix {
+          border-top: 0;
+        }
+      }
+
+      .mat-mdc-row .mat-mdc-cell {
+        &:not(.o-column-image):first-of-type {
+          padding-left: 12px;
+        }
+
+        &:last-of-type {
+          padding-right: 12px;
+        }
+      }
+
+      .mat-mdc-cell,
+      .mat-mdc-header-cell {
+        &.mat-column-select {
+          padding: 0 0 0 12px;
+        }
+      }
+    }
+  }
+
+  .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;
+  }
+
+  .o-table-export-dialog.o-table-export-dialog {
+    .mat-mdc-raised-button {
+      width: 68px;
+      height: 68px;
+      min-width: 68px;
+
+      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
+      .mat-button-wrapper {
+        >div {
+          line-height: 1;
+        }
+      }
+
+      .mat-icon {
+        padding: 0 6px 6px;
+        width: 38px;
+        height: 38px;
+        font-size: 38px;
+      }
+    }
+  }
+
+  @if($typography) {
+    @include o-table-typography($typography);
+  }
+}
+
+@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();
+  }
+
+  @include o-table-size-typography($typography, 'small');
+  @include o-table-size-typography($typography, 'medium');
+  @include o-table-size-typography($typography, 'large');
+}

package/theming/styles/ontimize-v8/variables.scss

@@ -0,0 +1,10 @@
+  $border-radius: 2px;
+  $button-line-height: 30px;
+  $basic-padding-size: 8px;
+  $tabs-header-border: none;
+  $inactive-tab-opacity: .35;
+  $font-size-title-container: 1;
+  $background-tab-inactive-on-dark: #686868;
+  $background-tab-inactive-on-light: #D7DDE0;
+  /*Application background-color*/
+  $app-background-color: #eaeaea;

package/theming/styles/paginator.scss

@@ -0,0 +1,4 @@
+.mat-mdc-paginator .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+}

package/theming/themes/fashion.scss

@@ -0,0 +1,46 @@
+@use "sass:color";
+@use "sass:map";
+@use '@angular/material'as mat;
+@use '../ontimize-style.scss'as ontimize-style;
+
+//Definition primary and accent palettes
+$default-palette: (50: #e8e3f4,
+  100: #c5b9e4,
+  200: #9f8ad2,
+  300: #795bc0,
+  400: #5c37b3,
+  500: #3f14a5,
+  600: #39129d,
+  700: #310e93,
+  800: #290b8a,
+  900: #1b0679,
+  A100: #b3a8ff,
+  A200: #8775ff,
+  A400: #5b42ff,
+  A700: #4428ff,
+  contrast: (50: #000000,
+    100: #000000,
+    200: #000000,
+    300: #ffffff,
+    400: #ffffff,
+    500: #ffffff,
+    600: #ffffff,
+    700: #ffffff,
+    800: #ffffff,
+    900: #ffffff,
+    A100: #000000,
+    A200: #000000,
+    A400: #ffffff,
+    A700: #ffffff,
+  ),
+);
+
+// Define a theme.
+$primary: mat.define-palette($default-palette);
+$accent: mat.define-palette($default-palette);
+
+
+/* Light theme */
+$theme: ontimize-style.o-mat-light-theme($primary, $accent);
+/* Dark theme */
+$dark-theme: ontimize-style.o-mat-dark-theme($primary, $accent);