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

package/theming/themes/ontimize-black-yellow.scss

@@ -1,8 +1,6 @@
 @use '@angular/material'as mat;
-@use '../ontimize-theme.scss';
+@use '../ontimize-style-v8.scss'as ontimize-style;
 
-@include mat.all-component-typographies();
-@include mat.core();
 
 /* Color definitions */
 $mat-custom-primary: (50 : #e5e5e5, 100 : #bdbdbd, 200 : #929292, 300 : #666666, 400 : #454545, 500 : #242424, 600 : #202020, 700 : #1b1b1b, 800 : #161616, 900 : #0d0d0d, A100 : #e5e5e5, A200 : #bdbdbd, A400 : #454545, A700 : #1b1b1b, contrast: (50: $black-87-opacity, 100: $black-87-opacity, 200: $black-87-opacity, 300: white, 400: white, 500: $white-87-opacity, 600: $white-87-opacity, 700: $white-87-opacity, 800: $white-87-opacity, 900: $white-87-opacity, A100: $black-87-opacity, A200: white, A400: white, A700: white, ));
@@ -12,5 +10,5 @@ $mat-custom-accent: (50 : #fff9e0, 100 : #fff0b3, 200 : #ffe680, 300 : #ffdb4d,
 // Define a theme.
 $primary: mat.define-palette($mat-custom-primary);
 $accent: mat.define-palette($mat-custom-accent);
-$theme: ontimize-theme.o-mat-light-theme($primary, $accent);
-$dark-theme: ontimize-theme.o-mat-dark-theme($primary, $accent);
+$theme: ontimize-style.o-mat-light-theme($primary, $accent);
+$dark-theme: ontimize-style.o-mat-dark-theme($primary, $accent);

package/theming/themes/ontimize-blue.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use '@angular/material'as mat;
+@use '../ontimize-style-v8.scss'as ontimize-style;
+
+/* Color definitions */
+$mat-custom-primary: (50 : #e3ecf4, 100 : #b9d1e4, 200 : #8ab2d2, 300 : #5b93c0, 400 : #377bb3, 500 : #1464a5, 600 : #125c9d, 700 : #0e5293, 800 : #0b488a, 900 : #063679, A100 : #a8c7ff, A200 : #75a7ff, A400 : #4286ff, A700 : #2876ff, contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff));
+
+$mat-custom-primary-dark: (50 : #f1f6fa, 100 : #dce8f2, 200 : #c5d9e9, 300 : #adc9e0, 400 : #9cbed9, 500 : #8ab2d2, 600 : #82abcd, 700 : #77a2c7, 800 : #6d99c1, 900 : #5a8ab6, A100 : #ffffff, A200 : #ebf5ff, A400 : #b8dcff, A700 : #9ed0ff, contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #000000, 500 : #000000, 600 : #000000, 700 : #000000, 800 : #000000, 900 : #000000, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ));
+
+// Define a theme.
+$primary: mat.define-palette($mat-custom-primary);
+$accent:$primary;
+
+$primary-dark: mat.define-palette($mat-custom-primary-dark);
+$accent-dark: $primary-dark;
+
+/* Light theme */
+$theme: ontimize-style.o-mat-light-theme($primary, $accent);
+
+/* Dark theme */
+$dark-theme: ontimize-style.o-mat-dark-theme($primary-dark, $accent-dark);

package/theming/themes/ontimize.scss

@@ -1,29 +1,21 @@
 @use "sass:map";
 @use '@angular/material'as mat;
-@use '../ontimize-theme.scss';
+@use '../ontimize-style.scss';
 
-@include mat.all-component-typographies();
-@include mat.core();
 
 /* Color definitions */
 $mat-custom-primary: (50 : #e3ecf4, 100 : #b9d1e4, 200 : #8ab2d2, 300 : #5b93c0, 400 : #377bb3, 500 : #1464a5, 600 : #125c9d, 700 : #0e5293, 800 : #0b488a, 900 : #063679, A100 : #a8c7ff, A200 : #75a7ff, A400 : #4286ff, A700 : #2876ff, contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff));
 
-$mat-custom-accent: (50 : #e3ecf4, 100 : #b9d1e4, 200 : #8ab2d2, 300 : #5b93c0, 400 : #377bb3, 500 : #1464a5, 600 : #125c9d, 700 : #0e5293, 800 : #0b488a, 900 : #063679, A100 : #a8c7ff, A200 : #75a7ff, A400 : #4286ff, A700 : #2876ff, contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff));
+/* Color definitions */
+$mat-custom-primary-dark: (50 : #f1f6fa, 100 : #dce8f2, 200 : #c5d9e9, 300 : #adc9e0, 400 : #9cbed9, 500 : #8ab2d2, 600 : #82abcd, 700 : #77a2c7, 800 : #6d99c1, 900 : #5a8ab6, A100 : #ffffff, A200 : #ebf5ff, A400 : #b8dcff, A700 : #9ed0ff, contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #000000, 500 : #000000, 600 : #000000, 700 : #000000, 800 : #000000, 900 : #000000, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ));
 
 // Define a theme.
 $primary: mat.define-palette($mat-custom-primary);
-$accent: mat.define-palette($mat-custom-accent);
-$background-color: #eceff1;
-
+$accent:$primary;
+$primary-dark: mat.define-palette($mat-custom-primary-dark);
+$accent-dark: $primary-dark;
 /* Light theme */
-$theme: ontimize-theme.o-mat-light-theme($primary, $accent);
-
-// Insert custom background color
-$background: map.get($theme, color, background);
-$background: map.merge($background, (background: $background-color));
+$theme: ontimize-style.o-mat-light-theme($primary, $accent);
 
-$theme: map.merge($theme, color, (background: $background));
 /* Dark theme */
-$primary-dark: mat.define-palette($mat-custom-primary);
-$accent-dark: mat.define-palette($mat-custom-accent);
-$dark-theme: ontimize-theme.o-mat-dark-theme($primary, $accent);
+$dark-theme: ontimize-style.o-mat-dark-theme($primary-dark, $accent-dark);

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

@@ -1,14 +1,14 @@
 @use "sass:map";
 @use '@angular/material'as mat;
-@use "../../default/typography/o-table-typography";
+@use "o-table-typography";
 
 $o-mat-lite-typography: mat.define-typography-config($font-family: 'Poppins, "Helvetica Neue", sans-serif',
   $headline-1: mat.define-typography-level(84px, 92px, 300),
   $headline-2: mat.define-typography-level(42px, 42px, 400),
   $headline-3: mat.define-typography-level(34px, 36px, 400),
   $headline-4: mat.define-typography-level(26px, 30px, 400),
-  $headline-5: mat.define-typography-level(20px, 24px, 400),
-  $headline-6: mat.define-typography-level(18px, 26px, 500),
+  $headline-5: mat.define-typography-level(24px, 24px, 400),
+  $headline-6: mat.define-typography-level(18px, 24px, 500),
   $subtitle-1: mat.define-typography-level(14px, 21px, 600),
   $subtitle-2: mat.define-typography-level(12px, 18px, 500),
   $body-1: mat.define-typography-level(13px, 1.125em, 400),

package/theming/ontimize-theme-flat.scss

@@ -1,330 +0,0 @@
-@use "sass:map";
-@use 'styles/flat/variables.scss';
-
-@mixin ontimize-flat-styles($theme, $color_states:null) {
-  $background: map.get($theme, background);
-  $foreground: map.get($theme, foreground);
-  @include set-color-states($color_states);
-
-  .text-muted {
-    color: variables.$default-color;
-  }
-
-  .text-inverse {
-    color: white;
-  }
-
-  .text-primary {
-    color: variables.$primary-color;
-  }
-
-  .text-warning {
-    color: variables.$warning-color;
-  }
-
-  .text-danger {
-    color: variables.$danger-color;
-  }
-
-  .text-success {
-    color: variables.$success-color;
-  }
-
-  .text-info {
-    color: variables.$info-color;
-  }
-
-  a.text-danger:hover,
-  a.text-inverse:hover,
-  a.text-muted:hover,
-  a.text-primary:hover,
-  a.text-success:hover,
-  a.text-warning:hover {
-    opacity: .85;
-  }
-
-  .o-form .o-form-toolbar .o-form-toolbar-header .mat-toolbar-tools .o-form-toolbar-button.mat-mdc-outlined-button,
-  button.mat-mdc-button-base:not(.mat-mdc-icon-button):not(.mat-mdc-fab):not(.mat-mdc-mini-fab) {
-    min-width: 132px;
-  }
-
-  /* Generic button class */
-  @include o-button-class();
-
-  /* MATERIAL BUTTON STYLES*/
-  button,
-  button.mat-mdc-button,
-  button.mat-mdc-outlined-button {
-    &:not(.mat-mdc-icon-button):not(.mat-mdc-fab):not(.mat-mdc-mini-fab) {
-      border-radius: 0;
-    }
-
-    &:hover {
-
-      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
-      .mat-button-focus-overlay {
-        opacity: .10;
-      }
-    }
-
-  }
-
-  /* O-BUTTON STYLES */
-  .o-button {
-    border: none;
-    border-radius: 0;
-
-    &.o-button-danger,
-    &.o-button-default,
-    &.o-button-info,
-    &.o-button-primary,
-    &.o-button-success,
-    &.o-button-warning {
-      button {
-        color: white;
-      }
-    }
-
-    &.o-button-info button {
-      background-color: variables.$info-color;
-    }
-
-    &.o-button-default button {
-      background-color: variables.$default-color;
-    }
-
-    &.o-button-success button {
-      background-color: variables.$success-color;
-    }
-
-    &.o-button-primary button {
-      background-color: variables.$primary-color;
-    }
-
-    &.o-button-danger button {
-      background-color: variables.$danger-color;
-    }
-
-    &.o-button-warning button {
-      background-color: variables.$warning-color;
-    }
-  }
-
-  .o-form .o-form-toolbar-header.mat-toolbar .o-form-toolbar-button,
-  .ontimize-table.o-table .o-table-button button.mat-mdc-outlined-button {
-    &[disabled] {
-      opacity: .65;
-      color: rgba(255, 255, 255, 0.65);
-    }
-  }
-
-  .ontimize-table.o-table {
-    .o-table-button {
-      button.mat-mdc-outlined-button {
-        border: 0;
-      }
-
-      button {
-        color: white;
-        border: none;
-      }
-
-      &.o-table-button-add button {
-        background-color: variables.$primary-color;
-      }
-
-      &.o-table-button-refresh button {
-        background-color: variables.$default-color;
-      }
-
-      &.o-table-button-delete button {
-        background-color: variables.$danger-color;
-      }
-    }
-
-    div.o-table-container {
-      border-radius: 0;
-    }
-  }
-
-  .o-form {
-    .o-form-toolbar-header.mat-toolbar {
-      border-radius: 0;
-    }
-
-    .o-form-toolbar>.mat-toolbar {
-      .mat-mdc-outlined-button {
-        border: none;
-      }
-
-      button.mat-mdc-button.o-form-toolbar-button,
-      button.o-form-toolbar-button {
-
-        &:not([disabled]),
-        &[disabled] {
-          color: #fff;
-        }
-
-        &.o-form-toolbar-button-insert,
-        &.o-form-toolbar-button-new,
-        &.o-form-toolbar-button-save {
-          background-color: variables.$primary-color;
-        }
-
-        &.o-form-toolbar-button-refresh {
-          background-color: variables.$default-color;
-        }
-
-        &.o-form-toolbar-button-cancel,
-        &.o-form-toolbar-button-delete {
-          background-color: variables.$danger-color;
-        }
-
-        &.o-form-toolbar-button-undo {
-          background-color: variables.$warning-color;
-        }
-      }
-    }
-  }
-
-  o-app-sidenav.o-app-sidenav,
-  o-app-sidenav.o-app-sidenav.header-layout {
-    .o-app-sidenav-container {
-      .o-app-header {
-        box-shadow: none;
-        border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);
-      }
-
-      mat-sidenav.mat-drawer.o-app-sidenav-sidenav {
-        box-shadow: none;
-        border-right: 1px solid mat.get-color-from-palette($foreground, divider);
-
-        .o-app-sidenav-menugroup.active+.o-app-sidenav-menugroup-items-container ul {
-          box-shadow: none;
-          background: none;
-        }
-      }
-    }
-
-    .mat-mdc-menu-panel {
-      border: 1px solid mat.get-color-from-palette($foreground, divider);
-    }
-
-    .o-app-header {
-      .o-user-info {
-        .o-user-info-wrapper {
-          font-weight: 500;
-          color: white;
-        }
-      }
-    }
-  }
-
-  //TABS
-  .mat-mdc-tab-group.o-tab-ontimize {
-
-    .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab-list .mat-mdc-tab,
-    div.mat-mdc-tab-body-wrapper {
-      border-radius: 0;
-      padding: 0;
-    }
-  }
-
-  //o-row, o-column
-  o-column.o-column,
-  o-row.o-row {
-    background: mat.get-color-from-palette($background, background);
-    border-radius: 4px;
-
-    .o-container {
-      .o-container-title {
-        padding: 20px 0;
-
-        span {
-          color: mat.get-color-from-palette($foreground, text);
-          font-weight: 500;
-        }
-      }
-    }
-  }
-
-  //dialog
-  .o-dialog-class {
-
-    /* TODO(mdc-migration): The following rule targets internal classes of dialog that may no longer apply for the MDC version. */
-    mat-dialog-container.mat-mdc-dialog-container {
-      .mat-mdc-dialog-title {
-        border-bottom-color: variables.$default-color;
-      }
-
-      .mat-mdc-dialog-actions {
-        @include o-button-class();
-
-        button.mat-mdc-button-base[ng-reflect-dialog-result="0"],
-        button.mat-mdc-button-base[ng-reflect-dialog-result="true"] {
-          color: white;
-          background-color: variables.$primary-color;
-        }
-
-        button.mat-mdc-button-base[ng-reflect-dialog-result="1"],
-        button.mat-mdc-button-base[ng-reflect-dialog-result="false"] {
-          color: white;
-          background-color: variables.$default-color;
-        }
-      }
-    }
-  }
-}
-
-@mixin o-button-class() {
-  button {
-
-    &.o-button-danger,
-    &.o-button-default,
-    &.o-button-info,
-    &.o-button-primary,
-    &.o-button-success,
-    &.o-button-warning {
-      border: none;
-      border-radius: 0;
-      color: white;
-    }
-
-    &.o-button-info {
-      background-color: variables.$info-color;
-    }
-
-    &.o-button-default {
-      background-color: variables.$default-color;
-    }
-
-    &.o-button-success {
-      background-color: variables.$success-color;
-    }
-
-    &.o-button-primary {
-      background-color: variables.$primary-color;
-    }
-
-    &.o-button-danger {
-      background-color: variables.$danger-color;
-    }
-
-    &.o-button-warning {
-      background-color: variables.$warning-color;
-    }
-  }
-}
-
-@mixin set-color-states($color_states) {
-  @if $color_states !=null {
-    variables.$success-color: if(map.has-key($color_states, success), map.get($color_states, success), variables.$success-color) !global;
-    variables.$danger-color: if(map.has-key($color_states, danger), map.get($color_states, danger), variables.$danger-color) !global;
-    variables.$primary-color: if(map.has-key($color_states, primary), map.get($color_states, primary), variables.$primary-color) !global;
-    variables.$warning-color: if(map.has-key($color_states, warning), map.get($color_states, warning), variables.$warning-color) !global;
-    variables.$info-color: if(map.get($color_states, info), map.get($color_states, info), variables.$info-color) !global;
-    variables.$default-color: if(map.has-key($color_states, default), map.get($color_states, default), variables.$default-color) !global;
-    variables.$inverse-color: if(map.has-key($color_states, inverse), map.get($color_states, inverse), variables.$inverse-color) !global;
-    variables.$disable-color: if(map.has-key($color_states, disable), map.get($color_states, disable), variables.$disable-color) !global;
-  }
-}

package/theming/ontimize-theme-lite.scss

@@ -1,40 +0,0 @@
-@use "sass:map";
-@use 'styles/lite/layout-lite.scss';
-@use 'styles/lite/typography-lite.scss';
-@use 'styles/lite/typography/ontimize-lite.scss';
-@use 'styles/lite/form-field/o-form-field-theme.scss';
-@use 'ontimize-theme.scss';
-@use 'styles/density.scss'as o-density;
-@use 'styles//lite/paginator.scss';
-
-
-$typography : ontimize-lite.$typography;
-
-@mixin ontimize-theme-styles-lite($theme-or-color-config, $typographyConfig: null) {
-  /* INCLUDE ONTIMIZE LITE */
-  $theme: map.get($theme-or-color-config, color);
-
-  @if $typographyConfig !=null {
-    $typography: map.merge($typography, $typographyConfig);
-  }
-
-  $theme-or-color-config:map.merge($theme-or-color-config, typography, $typography);
-  @include ontimize-theme.ontimize-theme-styles($theme-or-color-config);
-  @include typography-lite.o-table-typography-lite($typography);
-  @include o-form-field-theme.o-mat-form-field-typography-lite($typography);
-  @include typography-lite.o-common-typography-lite($typography);
-  @include layout-lite.layout-padding-margin-lite();
-
-  @include typography-lite.o-form-theme();
-  @include paginator.o-paginator();
-
-  // .o-table,
-  // .o-checkbox,
-  // .o-dialog-class.o-table-dialog,
-  // .mat-mdc-menu-panel.o-table-menu,
-  // .mat-mdc-menu-panel.o-table-quickfilter-menu,
-  // .mat-mdc-menu-panel.o-table-quickfilter-menu,
-  // .report-on-demand-sidenav {
-  @include o-density.checkbox(19px, 19px, 15px);
-  // }
-}

package/theming/styles/default/typography/ontimize.scss

@@ -1,9 +0,0 @@
-@use "sass:map";
-@use 'o-table-typography.scss';
-@use '@angular/material'as mat;
-
-
-$default-typography: mat.define-typography-config($font-family: 'Poppins, "Helvetica Neue", sans-serif');
-$default-typography: map.merge($default-typography, o-table-typography.$table-typography);
-
-$lite-typography: null !default;

package/theming/styles/flat/variables.scss

@@ -1,8 +0,0 @@
-$success-color: #2ecc71;
-$danger-color: #e74c3c;
-$primary-color: #1ABC9C;
-$warning-color: #f1c40f;
-$info-color: #3498db;
-$default-color: #bdc3c7;
-$inverse-color: #34495e;
-$disable-color: #ECF0F1;

package/theming/styles/lite/form-field/o-form-field-theme.scss

@@ -1,57 +0,0 @@
-@use '@angular/material'as mat;
-@use './../../density.scss'as o-density;
-@use 'sass:math';
-
-
-@mixin o-mat-form-field-typography-lite($config) {
-  $prefix-suffix-icon-font-scale: 1.4;
-  .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/lite/layout.scss

@@ -1,70 +0,0 @@
-@use "layout-lite";
-
-/*
-*
-*  Responsive attributes
-*
-*  References:
-*  1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
-*  2) https://css-tricks.com/almanac/properties/f/flex/
-*  3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-*  4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
-*  5) http://godban.com.ua/projects/flexgrid
-*
-*/
-
-// Layout
-// ------------------------------
-$baseline-grid: 4px !default;
-layout-lite.$layout-gutter-width-vertical: $baseline-grid;
-$layout-gutter-width-horizontal: 14px !default;
-@mixin layout-padding-margin() {
-  [layout-padding-vertical] {
-    padding: layout-lite.$layout-gutter-width-vertical 0;
-  }
-
-  [layout-margin-vertical] {
-    margin: layout-lite.$layout-gutter-width-vertical 0;
-  }
-
-  [layout-padding-horizontal] {
-    padding: 0 $layout-gutter-width-horizontal;
-  }
-
-  [layout-margin-horizontal] {
-    margin: 0 $layout-gutter-width-horizontal;
-  }
-
-  [layout-padding-left] {
-    padding-left: $layout-gutter-width-horizontal;
-  }
-
-  [layout-margin-left] {
-    margin-left: $layout-gutter-width-horizontal;
-  }
-
-  [layout-padding-right] {
-    padding-right: $layout-gutter-width-horizontal;
-  }
-
-  [layout-margin-right] {
-    margin-right:$layout-gutter-width-horizontal;
-  }
-
-  [layout-padding-top] {
-    padding-top: layout-lite.$layout-gutter-width-vertical;
-  }
-
-  [layout-margin-top] {
-    margin-top: layout-lite.$layout-gutter-width-vertical;
-  }
-
-  [layout-padding-bottom] {
-    padding-bottom: layout-lite.$layout-gutter-width-vertical;
-  }
-
-  [layout-margin-bottom] {
-    margin-bottom: layout-lite.$layout-gutter-width-vertical;
-  }
-
-}

package/theming/styles/lite/paginator.scss

@@ -1,6 +0,0 @@
-@mixin o-paginator {
-  .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;
-  }
-}