@elderbyte/ngx-starter 19.0.1 → 19.1.0-beta.0

package/theming/_elder-mdc-support.scss

@@ -1,235 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../theming/mat-icon-button-size' as icon-button-size;
-@use '../theming/elder-typography-utils' as elder-typography;
-
-@mixin mdc-theme-support($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
-
-  @if $color != null {
-    @include _color-support($color);
-  }
-
-  @if $typography != null {
-    @include _typography-support($typography);
-  }
-
-  /**
-   * This class should be applied to "controls"
-   * which themself contain a mat-form-field.
-   */
-  .elder-form-field-host {
-    display: inline-flex;
-    flex-direction: column;
-    min-width: 0;
-  }
-}
-
-@mixin _typography-support($typography-config) {
-  $config: $typography-config;
-
-  // The unit-less line-height from the font config.
-  $line-height: mat.m2-line-height($config, body-1);
-  $font-size: mat.m2-font-size($config, body-1);
-  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
-
-  // $control-button-size: 24px; // $line-height-em
-  $control-button-size: var(--mdc-typography-body1-line-height, 24px);
-  $control-icon-size: 20px;
-
-  .elder-mdc-input-fix {
-    max-height: $control-button-size;
-  }
-
-  .mat-mdc-icon-button.elder-control-icon-button {
-    @include icon-button-size.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
-  }
-
-  .mat-datepicker-toggle.elder-control-icon-button {
-    max-height: $control-button-size;
-    max-width: $control-button-size;
-
-    .mat-mdc-icon-button {
-      @include icon-button-size.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
-    }
-  }
-}
-
-@mixin _color-support($color-config) {
-  @include _mdc-control-icon($color-config);
-  @include _mdc-mat-toolbar($color-config);
-  @include _mdc-mat-snack-bar($color-config);
-}
-
-/**
- * The snackbar has a light background in dark, and a dark background in light theme.
- * Therefore, text/contrast colors need to be inverted inside the snackbar.
- */
-@mixin _mdc-mat-snack-bar($color-config) {
-  $is-dark-theme: map.get($color-config, is-dark);
-  $snackbar-text-color: if(
-    $is-dark-theme,
-    var(--mdc-theme-text-primary-on-light),
-    var(--mdc-theme-text-primary-on-dark)
-  );
-
-  .mat-mdc-snack-bar-container {
-    color: $snackbar-text-color; // Fix the default text color in snackbar
-  }
-}
-
-@mixin _mdc-mat-toolbar($color-config) {
-  $foreground: map.get($color-config, foreground);
-  $background: map.get($color-config, background);
-  $primary: map.get($color-config, primary);
-  $accent: map.get($color-config, accent);
-  $warn: map.get($color-config, warn);
-
-  .mat-toolbar {
-    &.mat-primary {
-      @include _form-field-palette($primary);
-    }
-
-    &.mat-accent {
-      @include _form-field-palette($accent);
-    }
-
-    &.mat-warn {
-      @include _form-field-palette($warn);
-    }
-  }
-}
-
-@mixin _mdc-control-icon($color-config) {
-  $foreground: map.get($color-config, foreground);
-  $background: map.get($color-config, background);
-  $primary: map.get($color-config, primary);
-  $accent: map.get($color-config, accent);
-  $warn: map.get($color-config, warn);
-
-  .elder-mdc-control-icon {
-    color: mat.m2-get-color-from-palette($foreground, secondary-text);
-  }
-
-  .mat-mdc-form-field {
-    &.mat-focused {
-      &.mat-primary {
-        .elder-mdc-control-icon,
-        .elder-control-icon-button {
-          color: mat.m2-get-color-from-palette($primary, text);
-        }
-      }
-
-      &.mat-accent {
-        .elder-mdc-control-icon,
-        .elder-control-icon-button {
-          color: mat.m2-get-color-from-palette($accent, text);
-        }
-      }
-
-      &.mat-warn {
-        .elder-mdc-control-icon,
-        .elder-control-icon-button {
-          color: mat.m2-get-color-from-palette($warn, text);
-        }
-      }
-    }
-
-    &.mat-form-field-invalid {
-      .elder-mdc-control-icon,
-      .elder-control-icon-button {
-        color: mat.m2-get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-disabled {
-      .elder-mdc-control-icon,
-      .elder-control-icon-button {
-        color: mat.m2-get-color-from-palette($foreground, disabled-text);
-      }
-    }
-  }
-}
-
-@mixin _form-field-palette($palette) {
-  $contrast-color: mat.m2-get-color-from-palette($palette, default-contrast);
-  $contrast-color-inactive: rgba($contrast-color, 0.5);
-
-  .mat-mdc-slide-toggle .mdc-form-field {
-    background: mat.m2-get-color-from-palette($palette);
-    color: $contrast-color;
-  }
-
-  .mat-mdc-form-field.mat-form-field-appearance-outline {
-    background: mat.m2-get-color-from-palette($palette);
-    color: $contrast-color;
-
-    .mdc-text-field__input {
-      background: mat.m2-get-color-from-palette($palette);
-      color: $contrast-color;
-      caret-color: currentColor;
-    }
-
-    .mat-mdc-select-value {
-      color: $contrast-color;
-    }
-
-    ::placeholder,
-    .mat-mdc-select-placeholder {
-      color: $contrast-color-inactive;
-    }
-
-    .elder-mdc-control-icon,
-    .elder-control-icon-button,
-    .mat-mdc-select-arrow {
-      color: $contrast-color-inactive;
-    }
-
-    .mdc-notched-outline {
-      .mdc-notched-outline__leading {
-        border-color: $contrast-color-inactive;
-      }
-
-      .mdc-notched-outline__notch {
-        border-color: $contrast-color-inactive;
-
-        .mat-mdc-floating-label {
-          color: $contrast-color-inactive;
-        }
-      }
-
-      .mdc-notched-outline__trailing {
-        border-color: $contrast-color-inactive;
-      }
-    }
-
-    &.mat-focused {
-      .mat-mdc-select-arrow,
-      .elder-mdc-control-icon,
-      .elder-control-icon-button {
-        color: $contrast-color;
-      }
-    }
-
-    &:hover {
-      .mdc-notched-outline {
-        .mdc-notched-outline__leading {
-          border-color: $contrast-color;
-        }
-
-        .mdc-notched-outline__notch {
-          border-color: $contrast-color;
-
-          .mat-mdc-floating-label {
-            color: $contrast-color;
-          }
-        }
-
-        .mdc-notched-outline__trailing {
-          border-color: $contrast-color;
-        }
-      }
-    }
-  }
-}

package/theming/_elder-palettes.scss

@@ -1,148 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-
-/***************************************************************************
- *                                                                         *
- * Overriding Material Base Variables                                      *
- *                                                                         *
- **************************************************************************/
-
-$dark-primary-text: rgba(black, 0.87);
-$light-primary-text: white;
-
-/***************************************************************************
- *                                                                         *
- * Material Color Palettes                                                 *
- *                                                                         *
- **************************************************************************/
-
-// ElderByte Theme
-
-$elder-blue: (
-  50: #dfe3e8,
-  100: #b3bcc8,
-  200: #8593a7,
-  300: #546883,
-  400: #2f4869,
-  500: #0b284f,
-  // Official Main Color tone: #002852 (#0B284F)
-  600: #0a2448,
-  700: #092040,
-  800: #081c38,
-  900: #061529,
-  A100: #809ec5,
-  A200: #5179bf,
-  A400: #004390,
-  A700: #00006b,
-  contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $dark-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $light-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text,
-  ),
-);
-
-$elder-gold: (
-  50: #f6f3ec,
-  100: #e8e1d1,
-  200: #dacfb4,
-  300: #ccbc96,
-  400: #c1ad80,
-  500: #b69f6a,
-  // Official ElderByte Accent tone
-  600: #a69160,
-  700: #948156,
-  800: #81714b,
-  900: #5f5337,
-  A100: #e1d1a9,
-  A200: #efd08f,
-  A400: #dbbe7a,
-  A700: #af9144,
-  contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $dark-primary-text,
-    400: $dark-primary-text,
-    500: $dark-primary-text,
-    600: $dark-primary-text,
-    700: $dark-primary-text,
-    800: $dark-primary-text,
-    900: $dark-primary-text,
-    A100: $dark-primary-text,
-    A200: $dark-primary-text,
-    A400: $dark-primary-text,
-    A700: $dark-primary-text,
-  ),
-);
-
-/***************************************************************************
- *                                                                         *
- * Dark Theme Palettes                                                     *
- *                                                                         *
- **************************************************************************/
-
-$grey-palette: mat.$m2-grey-palette;
-$light-primary-text: rgba(white, 0.87);
-$light-secondary-text: rgba(white, 0.4);
-$light-disabled-text: rgba(white, 0.38);
-$light-dividers: rgba(white, 0.12);
-$light-focused: rgba(white, 0.12);
-
-$dark-background-dp-01: #1f1f1f; // 5%
-$dark-background-dp-02: #222222; // 7%
-$dark-background-dp-03: #262626; // 8%
-$dark-background-dp-04: #272727; // 9%
-$dark-background-dp-06: #2c2c2c; // 11%
-$dark-background-dp-08: #2d2d2d; // 12%
-$dark-background-dp-12: #333333; // 14%
-
-// Background palette for dark themes.
-$elder-dark-theme-background: (
-  status-bar: black,
-  app-bar: $dark-background-dp-01,
-  background: #121212,
-  // #121212
-  hover: rgba(white, 0.04),
-  card: $dark-background-dp-03,
-  dialog: $dark-background-dp-12,
-  // $my-dark-dp-06
-  disabled-button: rgba(white, 0.12),
-  raised-button: map.get($grey-palette, 800),
-  focused-button: $light-focused,
-  selected-button: map.get($grey-palette, 900),
-  selected-disabled-button: map.get($grey-palette, 800),
-  disabled-button-toggle: black,
-  unselected-chip: map.get($grey-palette, 800),
-  disabled-list-option: rgba(white, 0.12),
-  tooltip: map.get($grey-palette, 800),
-);
-
-// Foreground palette for dark themes.
-$elder-dark-theme-foreground: (
-  base: rgba(white, 0.87),
-  divider: $light-dividers,
-  dividers: $light-dividers,
-  disabled: $light-disabled-text,
-  disabled-button: rgba(white, 0.38),
-  disabled-text: $light-disabled-text,
-  elevation: black,
-  hint-text: $light-disabled-text,
-  secondary-text: $light-secondary-text,
-  icon: rgba(white, 0.87),
-  icons: rgba(white, 0.87),
-  text: rgba(white, 0.87),
-  slider-min: rgba(white, 0.87),
-  slider-off: rgba(white, 0.38),
-  slider-off-active: rgba(white, 0.38),
-);

package/theming/_elder-scrollbar-theme.scss

@@ -1,67 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-
-@mixin theme($theme) {
-  @include _starter-scrollbar-theme($theme);
-}
-
-@mixin _starter-scrollbar-theme($theme) {
-  $scrollbarStyling: map.get($theme, elder, scrollbar-styling);
-
-  @if $scrollbarStyling {
-    $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);
-    $commonSizes: map.get($theme, elder, common-sizes);
-
-    @include scrollbar-width(map.get($commonSizes, sm)); // default
-
-    .scrollbar-xs {
-      @include scrollbar-width(map.get($commonSizes, xs));
-    }
-
-    .scrollbar-sm {
-      @include scrollbar-width(map.get($commonSizes, sm));
-    }
-
-    .scrollbar-md {
-      @include scrollbar-width(map.get($commonSizes, md));
-    }
-
-    .scrollbar-lg {
-      @include scrollbar-width(map.get($commonSizes, lg));
-    }
-
-    .scrollbar-xl {
-      @include scrollbar-width(map.get($commonSizes, xl));
-    }
-
-    .scrollbar-xxl {
-      @include scrollbar-width(map.get($commonSizes, xxl));
-    }
-
-    /* Track */
-    ::-webkit-scrollbar-track {
-      // background: mat.get-color-from-palette($background, background);
-    }
-
-    /* Handle */
-    ::-webkit-scrollbar-thumb {
-      background: mat.m2-get-color-from-palette($primary);
-      border-radius: 5px;
-    }
-
-    /* Handle on hover */
-    ::-webkit-scrollbar-thumb:hover {
-      background: mat.m2-get-color-from-palette($primary, 300);
-    }
-  }
-}
-
-@mixin scrollbar-width($width) {
-  ::-webkit-scrollbar {
-    width: $width;
-  }
-}

package/theming/_elder-style-fixes.scss

@@ -1,216 +0,0 @@
-@use '@angular/material' as mat;
-@use 'mixins' as mixins;
-@use 'sass:map';
-
-@mixin elder-style-fixes($theme) {
-  @include _ng-style-fixes;
-  @include _mat-style-fixes($theme);
-
-  // elder custom icons fill color
-  .mat-icon.svg-icon-inherit-color svg * {
-    fill: currentColor !important;
-  }
-}
-
-@mixin _ng-style-fixes {
-  // Trick to ensure flex functionality within router-outlet
-  router-outlet.router-flex + * {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    height: 100%; // Required for Safari
-    width: 100%;
-    min-height: 0; // Fixes scrolling vert
-    min-width: 0; // Fixes scrolling horz
-  }
-}
-
-@mixin _mat-style-fixes($theme) {
-  // Globally disable automatic scrolling of Material Drawer Container
-  .mat-drawer-inner-container {
-    overflow: hidden !important;
-  }
-
-  // Globally disable automatic scrolling of Material Drawer Content
-  .mat-drawer-content {
-    overflow: hidden !important;
-  }
-
-  /******************************
-  Material tab fix
-  *******************************/
-
-  .mat-mdc-tab-body-wrapper {
-    flex: 1 1 100% !important;
-    height: 100% !important;
-  }
-
-  .mat-mdc-tab-body {
-    display: flex !important;
-    flex-direction: column;
-  }
-
-  /*
-  .mat-tab-body-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    height: 100% !important;
-    overflow: hidden !important; // Globally disable automatic scrolling of Material Tabs
-  }*/
-
-  /******************************
-  Material Chip fix
-  *******************************/
-
-  .mat-mdc-chip {
-    // Fixes default avatar on attribute usage (<mat-chip-avatar> vs matChipAvatar) which is broken in Angular Material 15.0.0
-    mat-chip-avatar {
-      .mat-icon {
-        width: 18px;
-        height: 18px;
-        line-height: 18px;
-        font-size: 18px;
-      }
-
-      img {
-        width: 18px;
-        height: 18px;
-        overflow: hidden;
-        border-radius: 9px;
-      }
-    }
-  }
-
-  /******************************
-    Material Badge Index
-    *******************************/
-
-  .mat-badge-content {
-    z-index: 1;
-  }
-
-  .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
-    padding-left: 0 !important;
-  }
-
-  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
-    padding-right: 0 !important;
-  }
-
-  .mat-mdc-form-field:not(.mat-mdc-form-field.elder-dense) {
-    $density: map-get($theme, elder, density, form-field);
-
-    /******************************
-    Fix big paddings for dense form fields
-    *******************************/
-
-    .mat-mdc-text-field-wrapper {
-      padding-left: calc-side-paddings($density);
-      padding-right: calc-side-paddings($density);
-    }
-
-    /******************************
-    Fix icon size and placement in mat label
-    *******************************/
-
-    @include mixins.form-field-icons($density);
-
-    /******************************
-    Fix text and hover placement of small filled form fields
-    *******************************/
-
-    $mat-mdc-form-field-label-transform: 0.75;
-    $mat-mdc-form-field-label-offset-x: -16px;
-    $form-field-density: map-get($theme, elder, density, form-field);
-
-    @if $form-field-density < -1 {
-      .mdc-text-field--filled {
-        .mdc-floating-label--float-above {
-          transform: var(
-            $mat-mdc-form-field-label-transform,
-            translateY(-50%)
-              translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))
-          ) !important;
-        }
-
-        .mat-mdc-form-field-infix {
-          padding-top: calc-padding-top-form-field-inflix($form-field-density) !important;
-          padding-bottom: 2px !important;
-          min-height: 40px; // (24 + 2*16) = 56px by default
-        }
-      }
-    }
-
-    /******************************
-    Material Form Field Label stealing clicks
-    *******************************/
-
-    .mat-mdc-floating-label.mdc-floating-label {
-      pointer-events: none !important;
-
-      mat-label {
-        pointer-events: none !important;
-      }
-    }
-
-    .mdc-notched-outline__notch {
-      pointer-events: none !important;
-
-      .mdc-floating-label {
-        pointer-events: none !important;
-
-        mat-label {
-          pointer-events: none !important;
-        }
-      }
-    }
-
-    .mat-mdc-form-field-error-wrapper {
-      display: flex;
-      padding-right: 0;
-    }
-  }
-
-  /******************************
-  Material chip make regular chips clickable when applying this class
-  *******************************/
-
-  .clickable-chip {
-    .mat-mdc-chip-action {
-      cursor: pointer;
-    }
-  }
-}
-
-.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
-  display: block !important;
-}
-
-@function calc-side-paddings($density) {
-  $paddingDensityNeg4: 8px;
-  $paddingDensityNeg3: 10px;
-  $paddingDensityNeg2: 12px;
-  $paddingDensityNeg1: 14px;
-  $paddingDensity0: 16px;
-
-  @if $density == -4 {
-    @return $paddingDensityNeg4;
-  } @else if $density == -3 {
-    @return $paddingDensityNeg3;
-  } @else if $density == -2 {
-    @return $paddingDensityNeg2;
-  } @else if $density == -1 {
-    @return $paddingDensityNeg1;
-  } @else if $density == 0 {
-    @return $paddingDensity0;
-  }
-}
-
-@function calc-padding-top-form-field-inflix($density) {
-  @if $density > -3 {
-    @return 20px;
-  } @else {
-    @return 14px;
-  }
-}

package/theming/_elder-theme.scss

@@ -1,51 +0,0 @@
-@use '@angular/material' as mat;
-@use 'sass:map';
-@use 'elder-palettes' as palettes;
-
-/***************************************************************************
- *                                                                         *
- * Public API                                                              *
- *                                                                         *
- **************************************************************************/
-
-@function define-dark-elder-theme($config) {
-  $result: $config;
-  @if map.get($config, color) {
-    $color-settings: map.get($config, color);
-    $primary: map.get($color-settings, primary);
-    $accent: map.get($color-settings, accent);
-    $warn: map.get($color-settings, warn);
-    $result: map.merge(
-      $config,
-      (
-        color: _mat-create-dark-color-config($primary, $accent, $warn),
-      )
-    );
-  }
-  @return _create-backwards-compatibility-theme($result);
-}
-
-/***************************************************************************
- *                                                                         *
- * Private functions                                                       *
- *                                                                         *
- **************************************************************************/
-
-@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
-  @return (
-    primary: $primary,
-    accent: $accent,
-    warn: if($warn != null, $warn, mat.m2-define-palette(mat.$m2-red-palette)),
-    is-dark: true,
-    foreground: palettes.$elder-dark-theme-foreground,
-    background: palettes.$elder-dark-theme-background
-  );
-}
-
-@function _create-backwards-compatibility-theme($theme) {
-  @if not map.get($theme, color) {
-    @return $theme;
-  }
-  $color: map.get($theme, color);
-  @return map.merge($theme, $color);
-}