@ngx-stoui/core 15.0.0 → 16.0.0

package/style/theme/_number-unit-input.scss

@@ -1,34 +1,34 @@
-@import "./theme";
-@import "./typography";
-
-@mixin sto-number-unit-input-theme($theme, $variables) {
-  $border-color: map_get($variables, border-color);
-  $color: map_get($variables, color);
-  $disabled: map_get($variables, disabled);
-  $secondary-color: map_get($variables, secondary);
-
-  .mat-form-field.sto-form__field {
-    sto-number-unit-input {
-      .number-unit-input-spacer {
-        background: $border-color;
-      }
-
-      .number-unit-input-element {
-        color: $color;
-
-        &::placeholder {
-          color: $secondary-color;
-        }
-      }
-
-    }
-  }
-  .mat-option.sto-option--clear {
-    color: $secondary-color;
-  }
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-number-unit-input-theme($sto-theme, $variables);
-}
+@import "./theme";
+@import "./typography";
+
+@mixin sto-number-unit-input-theme($theme, $variables) {
+  $border-color: map_get($variables, border-color);
+  $color: map_get($variables, color);
+  $disabled: map_get($variables, disabled);
+  $secondary-color: map_get($variables, secondary);
+
+  .mat-form-field.sto-form__field {
+    sto-number-unit-input {
+      .number-unit-input-spacer {
+        background: $border-color;
+      }
+
+      .number-unit-input-element {
+        color: $color;
+
+        &::placeholder {
+          color: $secondary-color;
+        }
+      }
+
+    }
+  }
+  .mat-option.sto-option--clear {
+    color: $secondary-color;
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include sto-number-unit-input-theme($sto-theme, $variables);
+}

package/style/theme/_select-filter.scss

@@ -1,16 +1,16 @@
-@import "theme";
-@import "typography";
-
-@mixin sto-input-override-theme($theme, $variables) {
-  $color: map_get($variables, color);
-  $background-color: map_get($variables, background);
-
-  .sto-select-filter {
-    background-color: $background-color;
-  }
-}
-
-// Include theme styles for your custom components.
-body {
-  @include sto-input-override-theme($sto-theme, $variables);
-}
+@import "theme";
+@import "typography";
+
+@mixin sto-input-override-theme($theme, $variables) {
+  $color: map_get($variables, color);
+  $background-color: map_get($variables, background);
+
+  .sto-select-filter {
+    background-color: $background-color;
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include sto-input-override-theme($sto-theme, $variables);
+}

package/style/theme/_sto-indicators.scss

@@ -1,89 +1,89 @@
-@use '@angular/material' as mat;
-@import "./theme-variables";
-@import "./theme";
-@import "colors";
-
-
-@mixin indicators-theme($theme, $variables) {
-  $primary: map_get($variables, primary);
-  $warn: map_get($variables, warn);
-  $accent: map_get($variables, accent);
-  $primary-contrast: map_get($variables, primary-contrast);
-  $warn-contrast: map_get($variables, warn-contrast);
-  $accent-contrast: map_get($variables, accent-contrast);
-  $color: map_get($variables, color);
-  $border-color: map_get($variables, border-color);
-  $icon-color: map_get($variables, icon);
-  $indicators: map_get($theme, indicators);
-  $success-palette: map_get($indicators, success);
-  $success-highlight-bg: mat.get-color-from-palette($success-palette, highlight);
-  $success-highlight-contrast: map-get(map-get($success-palette, contrast), highlight); // mat.get-color-from-palette($success-palette, highlight-contrast);
-  $danger-palette: map-get($indicators, danger);
-  $danger-highlight-bg: mat.get-color-from-palette($danger-palette, highlight);
-  $danger-highlight-contrast: map-get(map-get($danger-palette, contrast), highlight); //mat.get-color-from-palette($danger-palette, highlight-contrast);
-  $warning-palette: map-get($indicators, warning);
-  $warning-highlight-bg: mat.get-color-from-palette($warning-palette, highlight);
-  $warning-highlight-contrast: mat.get-color-from-palette($warning-palette, highlight-contrast);
-  $warning-text: mat.get-color-from-palette($warning-palette, text);
-  $success-text: mat.get-color-from-palette($success-palette, text);
-  $danger-text: mat.get-color-from-palette($danger-palette, text);
-
-  $fill-buttons: '.mat-raised-button', '.mat-flat-button', '.mat-fab', '.mat-mini-fab';
-  $text-buttons: '.mat-button', '.mat-stroked-button', '.mat-icon-button';
-
-  .mat-card {
-    &.mat-primary {
-      background-color: $primary;
-      color: $primary-contrast;
-    }
-
-    &.mat-accent {
-      background-color: $accent;
-      color: $accent-contrast;
-    }
-
-    &.mat-warn {
-      background-color: $warn;
-      color: $warn-contrast;
-    }
-  }
-
-  div, .mat-card, #{$fill-buttons} {
-    &.mat-success {
-      background-color: $success-highlight-bg;
-      color: $success-highlight-contrast;
-    }
-
-    &.mat-danger {
-      background-color: $danger-highlight-bg;
-      color: $danger-highlight-contrast;
-    }
-
-    &.mat-warning {
-      background-color: $warning-highlight-bg;
-      color: $warning-highlight-contrast;
-    }
-  }
-
-
-  .mat-hint, span, p, h1, h2, h3, h4, h5, h6, small, .mat-icon, #{$text-buttons} {
-    &.mat-success {
-      color: $success-text;
-    }
-
-    &.mat-danger {
-      color: $danger-text;
-    }
-
-    &.mat-warning {
-      color: $warning-text;
-    }
-  }
-}
-
-// Include theme styles for your custom components.
-body {
-  @include indicators-theme($sto-theme, $variables);
-}
-
-
+@use '@angular/material' as mat;
+@import "./theme-variables";
+@import "./theme";
+@import "colors";
+
+
+@mixin indicators-theme($theme, $variables) {
+  $primary: map_get($variables, primary);
+  $warn: map_get($variables, warn);
+  $accent: map_get($variables, accent);
+  $primary-contrast: map_get($variables, primary-contrast);
+  $warn-contrast: map_get($variables, warn-contrast);
+  $accent-contrast: map_get($variables, accent-contrast);
+  $color: map_get($variables, color);
+  $border-color: map_get($variables, border-color);
+  $icon-color: map_get($variables, icon);
+  $indicators: map_get($theme, indicators);
+  $success-palette: map_get($indicators, success);
+  $success-highlight-bg: mat.get-color-from-palette($success-palette, highlight);
+  $success-highlight-contrast: map-get(map-get($success-palette, contrast), highlight); // mat.get-color-from-palette($success-palette, highlight-contrast);
+  $danger-palette: map-get($indicators, danger);
+  $danger-highlight-bg: mat.get-color-from-palette($danger-palette, highlight);
+  $danger-highlight-contrast: map-get(map-get($danger-palette, contrast), highlight); //mat.get-color-from-palette($danger-palette, highlight-contrast);
+  $warning-palette: map-get($indicators, warning);
+  $warning-highlight-bg: mat.get-color-from-palette($warning-palette, highlight);
+  $warning-highlight-contrast: mat.get-color-from-palette($warning-palette, highlight-contrast);
+  $warning-text: mat.get-color-from-palette($warning-palette, text);
+  $success-text: mat.get-color-from-palette($success-palette, text);
+  $danger-text: mat.get-color-from-palette($danger-palette, text);
+
+  $fill-buttons: '.mat-raised-button', '.mat-flat-button', '.mat-fab', '.mat-mini-fab';
+  $text-buttons: '.mat-button', '.mat-stroked-button', '.mat-icon-button';
+
+  .mat-card {
+    &.mat-primary {
+      background-color: $primary;
+      color: $primary-contrast;
+    }
+
+    &.mat-accent {
+      background-color: $accent;
+      color: $accent-contrast;
+    }
+
+    &.mat-warn {
+      background-color: $warn;
+      color: $warn-contrast;
+    }
+  }
+
+  div, .mat-card, #{$fill-buttons} {
+    &.mat-success {
+      background-color: $success-highlight-bg;
+      color: $success-highlight-contrast;
+    }
+
+    &.mat-danger {
+      background-color: $danger-highlight-bg;
+      color: $danger-highlight-contrast;
+    }
+
+    &.mat-warning {
+      background-color: $warning-highlight-bg;
+      color: $warning-highlight-contrast;
+    }
+  }
+
+
+  .mat-hint, span, p, h1, h2, h3, h4, h5, h6, small, .mat-icon, #{$text-buttons} {
+    &.mat-success {
+      color: $success-text;
+    }
+
+    &.mat-danger {
+      color: $danger-text;
+    }
+
+    &.mat-warning {
+      color: $warning-text;
+    }
+  }
+}
+
+// Include theme styles for your custom components.
+body {
+  @include indicators-theme($sto-theme, $variables);
+}
+
+

package/style/theme/_theme-variables.scss

@@ -1,61 +1,63 @@
-@use '@angular/material' as mat;
-
-@function theme_variables($theme) {
-  $primary-palette: map-get($theme, primary);
-  $primary: mat.get-color-from-palette($primary-palette);
-  $primary-contrast: mat.get-contrast-color-from-palette($primary-palette, main);
-  $accent-palette: map-get($theme, accent);
-  $accent: mat.get-color-from-palette($accent-palette, highlight);
-  $accent-contrast: mat.get-contrast-color-from-palette($accent-palette, main);
-  $warn-palette: map-get($theme, warn);
-  $warn: mat.get-color-from-palette($warn-palette);
-  $warn-contrast: mat.get-contrast-color-from-palette($warn-palette, main);
-  $indicators: map-get($theme, indicators);
-  $danger-palette: map-get($indicators, danger);
-  $error: mat.get-color-from-palette($danger-palette, resting);
-  $warning-palette: map-get($indicators, warning);
-  $warning: mat.get-color-from-palette($warning-palette, resting);
-  $success-palette: map-get($indicators, success);
-  $success: mat.get-color-from-palette($success-palette, resting);
-
-
-  $foreground: map-get($theme, foreground);
-  $color: mat.get-color-from-palette($foreground, text);
-  $secondary: mat.get-color-from-palette($foreground, secondary-text);
-  $disabled: mat.get-color-from-palette($foreground, disabled-text);
-  $icon: mat.get-color-from-palette($foreground, icon);
-  $icon-hover: rgba($icon, 0.8);
-
-  $background: map-get($theme, background);
-  $background-color: map-get($background, background);
-  $card-bg: map_get($background, card);
-  $hover-bg-color: mat.get-color-from-palette($background, 'hover');
-  $hover-color: mat.get-color-from-palette($foreground, slider-off-active);
-  $selected-color: mat.get-color-from-palette($background, selected-button);
-  $border-color: mat.get-color-from-palette($foreground, divider);
-  $app-bar: mat.get-color-from-palette($background, 'app-bar');
-
-  @return (
-    primary: $primary,
-    accent: $accent,
-    primary-contrast: $primary-contrast,
-    accent-contrast: $accent-contrast,
-    warn: $warn,
-    warn-contrast: $warn-contrast,
-    color: $color,
-    secondary: $secondary,
-    disabled: $disabled,
-    background: $background-color,
-    hover-bg: $hover-bg-color,
-    selected-bg: $selected-color,
-    border-color: $border-color,
-    success: $success,
-    error: $error,
-    warning: $warning,
-    app-bar: $app-bar,
-    icon: $icon,
-    icon-hover: $icon-hover,
-    hover-color: $hover-color,
-    card-bg: $card-bg
-  )
-}
+@use '@angular/material' as mat;
+
+@function theme_variables($theme) {
+  $primary-palette: map-get($theme, primary);
+  $primary: mat.get-color-from-palette($primary-palette);
+  $primary-contrast: mat.get-contrast-color-from-palette(
+    $primary-palette,
+    main
+  );
+  $accent-palette: map-get($theme, accent);
+  $accent: mat.get-color-from-palette($accent-palette, highlight);
+  $accent-contrast: mat.get-contrast-color-from-palette($accent-palette, main);
+  $warn-palette: map-get($theme, warn);
+  $warn: mat.get-color-from-palette($warn-palette);
+  $warn-contrast: mat.get-contrast-color-from-palette($warn-palette, main);
+  $indicators: map-get($theme, indicators);
+  $danger-palette: map-get($indicators, danger);
+  $error: mat.get-color-from-palette($danger-palette, resting);
+  $warning-palette: map-get($indicators, warning);
+  $warning: mat.get-color-from-palette($warning-palette, resting);
+  $success-palette: map-get($indicators, success);
+  $success: mat.get-color-from-palette($success-palette, resting);
+
+  $foreground: map-get($theme, foreground);
+  $color: mat.get-color-from-palette($foreground, text);
+  $secondary: mat.get-color-from-palette($foreground, secondary-text);
+  $disabled: mat.get-color-from-palette($foreground, disabled-text);
+  $icon: mat.get-color-from-palette($foreground, icon);
+  $icon-hover: rgba($icon, 0.8);
+
+  $background: map-get($theme, background);
+  $background-color: map-get($background, background);
+  $card-bg: map_get($background, card);
+  $hover-bg-color: mat.get-color-from-palette($background, hover);
+  $hover-color: mat.get-color-from-palette($foreground, slider-off-active);
+  $selected-color: mat.get-color-from-palette($background, selected-button);
+  $border-color: mat.get-color-from-palette($foreground, divider);
+  $app-bar: mat.get-color-from-palette($background, 'app-bar');
+
+  @return (
+    primary: $primary,
+    accent: $accent,
+    primary-contrast: $primary-contrast,
+    accent-contrast: $accent-contrast,
+    warn: $warn,
+    warn-contrast: $warn-contrast,
+    color: $color,
+    secondary: $secondary,
+    disabled: $disabled,
+    background: $background-color,
+    hover-bg: $hover-bg-color,
+    selected-bg: $selected-color,
+    border-color: $border-color,
+    success: $success,
+    error: $error,
+    warning: $warning,
+    app-bar: $app-bar,
+    icon: $icon,
+    icon-hover: $icon-hover,
+    hover-color: $hover-color,
+    card-bg: $card-bg
+  );
+}

package/style/theme/_theme.scss

@@ -1,16 +1,22 @@
-@use '@angular/material' as mat;
-@use 'sass:map' as map;
-@import "./theme-variables";
-@import "colors";
-
-// Create the theme object (a Sass map containing all of the palettes).
-$sto-theme: mat.define-light-theme($primary, $accent, $sto-warn);
-$sto-theme: map_merge($sto-theme, $sto-indicators);
-$variables: theme_variables($sto-theme);
-
-// @deprecated only here for backwards compability
-$sto-dark-theme: $sto-theme;
-
-$dark-variables: theme_variables($sto-theme);
-
-
+@use '@angular/material' as mat;
+@use 'sass:map' as map;
+@import './theme-variables';
+@import 'colors';
+
+// Create the theme object (a Sass map containing all of the palettes).
+$sto-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $primary,
+      accent: $accent,
+      warn: $sto-warn,
+    ),
+  )
+);
+$sto-theme: map_merge($sto-theme, $sto-indicators);
+$variables: theme_variables($sto-theme);
+
+// @deprecated only here for backwards compability
+$sto-dark-theme: $sto-theme;
+
+$dark-variables: theme_variables($sto-theme);

package/style/theme/_typography.scss

@@ -1,41 +1,44 @@
-@use '@angular/material' as mat;
-
-$base-font-size: 13px;
-$sm-font-size: 10px;
-$l-font-size: 16px;
-
-$sto-typography: mat.define-legacy-typography-config(
-  $font-family: 'Equinor, Roboto',
-  $body-1: mat.define-typography-level(13px, 20px, 400, 'Equinor, Roboto'),
-  $body-2: mat.define-typography-level(13px, 20px, 400, 'Equinor, Roboto'),
-  $button: mat.define-typography-level(14px, 24px, 500, 'Equinor, Roboto'),
-  $headline: mat.define-typography-level(28px, 44px, 400, 'Equinor, Roboto'),
-  $title: mat.define-typography-level(24px, 32px, 400, 'Equinor, Roboto'),
-  $subheading-2: mat.define-typography-level(20px, 28px, 400, 'Equinor, Roboto'),
-  $subheading-1: mat.define-typography-level(16px, 24px, 400, 'Equinor, Roboto'),
-  $input: mat.define-typography-level(13px, 1.333, 400, 0.025em, 'Equinor, Roboto')
-);
-
-$sto-sm-typography: mat.define-legacy-typography-config(
-  $font-family: 'Equinor, Roboto',
-  $body-1: mat.define-typography-level(10px, 16px, 400, 'Equinor, Roboto'),
-  $body-2: mat.define-typography-level(10px, 16px, 400, 'Equinor, Roboto'),
-  $button: mat.define-typography-level(10px, 16px, 500, 'Equinor, Roboto'),
-  $headline: mat.define-typography-level(24px, 40px, 400, 'Equinor, Roboto'),
-  $title: mat.define-typography-level(20px, 28px, 400, 'Equinor, Roboto'),
-  $subheading-2: mat.define-typography-level(16px, 24px, 400, 'Equinor, Roboto'),
-  $subheading-1: mat.define-typography-level(12px, 20px, 400, 'Equinor, Roboto'),
-  $input: mat.define-typography-level(10px, 1.333, 400, 0.025em, 'Equinor, Roboto')
-);
-
-$sto-l-typography: mat.define-legacy-typography-config(
-  $font-family: 'Equinor, Roboto',
-  $body-1: mat.define-typography-level(16px, 24px, 400, 'Equinor, Roboto'),
-  $body-2: mat.define-typography-level(18px, 24px, 400, 'Equinor, Roboto'),
-  $button: mat.define-typography-level(14px, 24px, 500, 'Equinor, Roboto'),
-  $headline: mat.define-typography-level(32px, 48px, 400, 'Equinor, Roboto'),
-  $title: mat.define-typography-level(28px, 40px, 400, 'Equinor, Roboto'),
-  $subheading-2: mat.define-typography-level(24px, 40px, 400, 'Equinor, Roboto'),
-  $subheading-1: mat.define-typography-level(20px, 32px, 400, 'Equinor, Roboto'),
-  $input: mat.define-typography-level(16px, 1.333, 400, 0.025em, 'Equinor, Roboto')
-);
+@use '@angular/material' as mat;
+
+$base-font-size: 13px;
+$sm-font-size: 10px;
+$l-font-size: 16px;
+
+$sto-typography: mat.define-typography-config(
+  $font-family: 'Equinor, Roboto',
+  $body-1: mat.define-typography-level(13px, 20px, 400, 'Equinor, Roboto'),
+  $body-2: mat.define-typography-level(13px, 20px, 400, 'Equinor, Roboto'),
+  $button: mat.define-typography-level(14px, 24px, 500, 'Equinor, Roboto'),
+  $headline-1: mat.define-typography-level(28px, 44px, 400, 'Equinor, Roboto'),
+  $headline-2: mat.define-typography-level(24px, 32px, 400, 'Equinor, Roboto'),
+  $subtitle-2: mat.define-typography-level(20px, 28px, 400, 'Equinor, Roboto'),
+  $subtitle-1: mat.define-typography-level(16px, 24px, 400, 'Equinor, Roboto'),
+);
+// $input:
+//   mat.define-typography-level(13px, 1.333, 400, 0.025em, 'Equinor, Roboto'),
+
+$sto-sm-typography: mat.define-typography-config(
+  $font-family: 'Equinor, Roboto',
+  $body-1: mat.define-typography-level(10px, 16px, 400, 'Equinor, Roboto'),
+  $body-2: mat.define-typography-level(10px, 16px, 400, 'Equinor, Roboto'),
+  $button: mat.define-typography-level(10px, 16px, 500, 'Equinor, Roboto'),
+  $headline-1: mat.define-typography-level(24px, 40px, 400, 'Equinor, Roboto'),
+  $headline-2: mat.define-typography-level(20px, 28px, 400, 'Equinor, Roboto'),
+  $subtitle-2: mat.define-typography-level(16px, 24px, 400, 'Equinor, Roboto'),
+  $subtitle-1: mat.define-typography-level(12px, 20px, 400, 'Equinor, Roboto'),
+);
+// $input:
+//   mat.define-typography-level(10px, 1.333, 400, 0.025em, 'Equinor, Roboto'),
+
+$sto-l-typography: mat.define-typography-config(
+  $font-family: 'Equinor, Roboto',
+  $body-1: mat.define-typography-level(16px, 24px, 400, 'Equinor, Roboto'),
+  $body-2: mat.define-typography-level(18px, 24px, 400, 'Equinor, Roboto'),
+  $button: mat.define-typography-level(14px, 24px, 500, 'Equinor, Roboto'),
+  $headline-1: mat.define-typography-level(32px, 48px, 400, 'Equinor, Roboto'),
+  $headline-2: mat.define-typography-level(28px, 40px, 400, 'Equinor, Roboto'),
+  $subtitle-2: mat.define-typography-level(24px, 40px, 400, 'Equinor, Roboto'),
+  $subtitle-1: mat.define-typography-level(20px, 32px, 400, 'Equinor, Roboto'),
+);
+// $input:
+//   mat.define-typography-level(16px, 1.333, 400, 0.025em, 'Equinor, Roboto'),

package/style/theme/_wysiwyg.scss

@@ -1,38 +1,38 @@
-@import "./theme";
-
-$form-field-bg: rgba(#6687B8, 0.1);
-
-@mixin wysiwyg-theme($theme, $variables) {
-  $primary: map_get($variables, primary);
-  $border-color: map_get($variables, border-color);
-
-  .sto-wysiwyg {
-    &__actions {
-      border-bottom: 1px solid $border-color;
-
-      .divider {
-        border-left: 1px solid $border-color;
-      }
-    }
-
-    &__editor {
-      &:focus {
-        border-bottom: 2px solid $primary;
-      }
-
-      border-bottom: 2px solid $border-color;
-      background: $form-field-bg;
-
-      &--readonly {
-        background: transparent;
-        border: none;
-      }
-    }
-  }
-}
-
-body {
-  @include wysiwyg-theme($sto-theme, $variables);
-}
-
-
+@import "./theme";
+
+$form-field-bg: rgba(#6687B8, 0.1);
+
+@mixin wysiwyg-theme($theme, $variables) {
+  $primary: map_get($variables, primary);
+  $border-color: map_get($variables, border-color);
+
+  .sto-wysiwyg {
+    &__actions {
+      border-bottom: 1px solid $border-color;
+
+      .divider {
+        border-left: 1px solid $border-color;
+      }
+    }
+
+    &__editor {
+      &:focus {
+        border-bottom: 2px solid $primary;
+      }
+
+      border-bottom: 2px solid $border-color;
+      background: $form-field-bg;
+
+      &--readonly {
+        background: transparent;
+        border: none;
+      }
+    }
+  }
+}
+
+body {
+  @include wysiwyg-theme($sto-theme, $variables);
+}
+
+

package/style/theme/components.scss

@@ -1,16 +1,16 @@
-@import "./action-footer";
-@import "./appheader";
-@import "./card";
-@import "./datatable";
-@import "./daterange";
-@import "./drawer";
-@import "./filterpanel";
-@import "./number-input";
-@import "./number-unit-input";
-@import "./input-overrides";
-@import "./message-panel";
-@import "./preference-manager";
-@import "./select-filter";
-@import "./sto-indicators";
-@import "./wysiwyg";
-@import "./dialog";
+@import "./action-footer";
+@import "./appheader";
+@import "./card";
+@import "./datatable";
+@import "./daterange";
+@import "./drawer";
+@import "./filterpanel";
+@import "./number-input";
+@import "./number-unit-input";
+@import "./input-overrides";
+@import "./message-panel";
+@import "./preference-manager";
+@import "./select-filter";
+@import "./sto-indicators";
+@import "./wysiwyg";
+@import "./dialog";