@elderbyte/ngx-starter 19.0.2 → 19.1.0-beta.1

package/src/lib/components/select/filter/elder-filter-chip-template/elder-filter-chip-template.component.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../../../../../../theming/elder-typography-utils' as elder-typography;
 @use '../../elder-select-base' as elder-select-base;
 
 @mixin typography($typography-config) {
@@ -8,7 +7,7 @@
   // The unit-less line-height from the font config.
   $line-height: mat.line-height($config, body-1);
   $font-size: mat.font-size($config, body-1);
-  $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
+  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
 
   @include elder-select-base.typography($typography-config);
 
@@ -41,16 +40,11 @@
 
 @mixin theme($config-or-theme) {
   $color: mat.get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
 
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.define-typography-config();
-  }
+  $typography: mat.define-typography-config();
 
   @if $color != null {
     @include elder-select-base.color($color);
-    @include _chip_color($config-or-theme);
   }
 
   @if $typography != null {
@@ -58,14 +52,6 @@
   }
 }
 
-@mixin _chip_color($theme) {
-  $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);
-}
-
 .elder-chip-text {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -78,12 +64,8 @@
 }
 
 .cdk-drag-preview {
-  box-sizing: border-box;
-  // border-radius: 4px;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  // border-radius: var(--elder-border-radius-sm);
+  box-shadow: var(--elder-box-shadow-default);
 }
 
 .cdk-drag-placeholder {

package/src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component.scss

@@ -1,22 +1,15 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../../../../../../theming/elder-typography-utils' as elder-typography;
 @use '../../elder-select-base' as elder-select-base;
 
 @mixin typography($typography-config) {
-  $config: $typography-config; // TODO $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);
-
   @include elder-select-base.typography($typography-config);
 
   .elder-multi-select {
-    font-family: mat.m2-font-family($config);
+    font-family: var(--md-sys-typescale-body-medium-font);
 
     .elder-select-input {
-      height: $line-height-em;
+      height: var(--md-sys-typescale-body-medium-line-height);
     }
 
     .elder-prefix-icon {
@@ -40,39 +33,16 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
-
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.m2-define-typography-config();
-  }
+  @include typography($config-or-theme);
 
-  @if $color != null {
-    @include elder-select-base.color($color);
-    @include _chip_color($config-or-theme);
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  @if $typography != null {
-    @include typography($typography);
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
   }
 }
-
-@mixin _chip_color($theme) {
-  $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);
-}
-
-.elder-chip-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.elder-trailing-icon {
-  color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-  opacity: 0.54;
-}

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -1,22 +1,15 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../../../../../../theming/elder-typography-utils' as elder-typography;
 @use '../../elder-select-base' as elder-select-base;
 
 @mixin typography($typography-config) {
-  $config: $typography-config; // TODO $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);
-
   @include elder-select-base.typography($typography-config);
 
   .elder-multi-select {
-    font-family: mat.m2-font-family($config);
+    font-family: var(--md-sys-typescale-body-medium-font);
 
     .elder-select-input {
-      height: $line-height-em;
+      height: var(--md-sys-typescale-body-medium-line-height);
     }
 
     .elder-prefix-icon {
@@ -40,56 +33,28 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
+  @include typography($config-or-theme);
 
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.m2-define-typography-config();
+  .elder-chip-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  @if $color != null {
-    @include elder-select-base.color($color);
-    @include _chip_color($config-or-theme);
+  .elder-trailing-icon {
+    color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
+    opacity: 0.54;
   }
 
-  @if $typography != null {
-    @include typography($typography);
+  .cdk-drag-preview {
+    box-shadow: var(--elder-box-shadow-default);
   }
-}
-
-@mixin _chip_color($theme) {
-  $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);
-}
 
-.elder-chip-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.elder-trailing-icon {
-  color: var(--mdc-chip-with-trailing-icon-trailing-icon-color);
-  opacity: 0.54;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  // border-radius: 4px;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-  opacity: 0;
-}
+  .cdk-drag-placeholder {
+    opacity: 0;
+  }
 
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  .cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  }
 }

package/src/lib/components/select/single/elder-select/elder-select.component.scss

@@ -1,19 +1,14 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
-@use '../../../../../../theming/elder-typography-utils' as elder-typography;
 @use '../../elder-select-base' as elder-select-base;
 
-@mixin typography($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);
+@mixin typography($config-or-theme) {
+  $line-height-em: var(--md-sys-typescale-body-medium-line-height);
 
-  @include elder-select-base.typography($typography-config);
+  @include elder-select-base.typography($config-or-theme);
 
   .elder-select {
-    font-family: mat.m2-font-family($config);
+    font-family: var(--md-sys-typescale-body-medium-font);
 
     .elder-input-prefix-icon-container {
       padding-right: 3px;
@@ -31,45 +26,33 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.m2-get-color-config($config-or-theme);
-  $typography: elder-typography.get-typography-config($config-or-theme);
+  // @debug mat.get-theme-typography($config-or-theme, body-medium, line-height);
+  // @debug mat.get-theme-typography($config-or-theme, body-medium, font-family);
+  @include typography($config-or-theme);
 
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.m2-define-typography-config();
+  @keyframes shrink {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0.75);
+    }
   }
 
-  @if $color != null {
-    @include elder-select-base.color($color);
+  .loading {
+    animation: shrink 0.3s ease-in-out infinite alternate;
+    -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
   }
 
-  @if $typography != null {
-    @include typography($typography);
+  .clickable-icon {
+    cursor: pointer;
   }
-}
 
-@keyframes shrink {
-  0% {
-    transform: scale(1);
+  .full-width {
+    width: 100%;
   }
-  100% {
-    transform: scale(0.75);
-  }
-}
-
-.loading {
-  animation: shrink 0.3s ease-in-out infinite alternate;
-  -webkit-animation: shrink 0.3s ease-in-out infinite alternate;
-}
-
-.clickable-icon {
-  cursor: pointer;
-}
 
-.full-width {
-  width: 100%;
-}
-
-.elder-select-dropdown-input {
-  cursor: pointer;
+  .elder-select-dropdown-input {
+    cursor: pointer;
+  }
 }

package/src/lib/components/select-chip-list/chip-list-select/elder-chip-list-select.component.scss

@@ -1,15 +1,9 @@
 @use '@angular/material' as mat;
 
 @mixin elder-select-list-theme($theme) {
-  $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);
-
   .select-item-active {
-    background-color: mat.m2-get-color-from-palette($primary, default, 0.1);
-    border-left: 5px solid mat.m2-get-color-from-palette($primary) !important;
+    background-color: var(--md-sys-color-primary-container);
+    border-left: 5px solid var(--md-sys-color-primary) !important;
   }
 }
 

package/src/lib/components/shell/header/elder-app-header/elder-app-header.component.scss

@@ -1,6 +1,15 @@
 .title-icon {
   font-size: 42px;
-  width: 42px;
-  height: 42px;
+  width: 82px;
+  height: 82px;
   padding: 20px;
 }
+
+.link-unstyled {
+  text-decoration: none;
+  color: inherit;
+}
+
+.elder-app-header-panel {
+  background-color: #0b284f; // TODO: replace in m3
+}

package/src/lib/components/shell/shell/elder-shell.component.scss

@@ -18,3 +18,11 @@ mat-sidenav-container {
   height: 100%;
   overflow: hidden;
 }
+
+.elder-toolbar-main-nav-button {
+  &:focus,
+  &:hover,
+  &:active {
+    background-color: rgba(0, 0, 0, 0.07);
+  }
+}

package/src/lib/components/toasts/standard-toast/standard-toast.component.scss

@@ -1,3 +1,23 @@
-.toast-title {
-  font-size: 16px;
+.elder-toast {
+  --elder-toast-message-color-title: var(--elder-toast-message-color-title-default);
+  --mdc-filled-button-container-color: var(--md-sys-color-secondary);
+
+  &.elder-toast-type-warn {
+    --elder-toast-message-color-title: var(--elder-toast-message-color-title-warn);
+    --mdc-filled-button-container-color: var(--md-sys-color-tertiary-container);
+  }
+
+  &.elder-toast-type-error {
+    --elder-toast-message-color-title: var(--elder-toast-message-color-title-error);
+    --mdc-filled-button-container-color: var(--md-sys-color-error);
+  }
+
+  button {
+    color: var(--elder-toast-message-color-title) !important;
+  }
+
+  .toast-title,
+  .mat-icon {
+    color: var(--elder-toast-message-color-title);
+  }
 }

package/theming/style-tweaks/_elder-color-variants.scss

@@ -0,0 +1,31 @@
+@use '@angular/material' as mat;
+
+/**
+ * Source: https://material.angular.io/guide/theming#using-component-color-variants
+ * 
+ * This applies custom color variants for the legacy M2 color system for usage in M3.
+ * There are different mixins for many components (not all).
+ * You can find the list of the components and there supported color variants here:
+ * https://material.angular.io/guide/theming#using-component-color-variants
+ */
+
+// Custom Color variants for m3. They can already be provided through
+// "mat.color-variants-backwards-compatibility()"
+// But can be customized in this mixin below:
+
+@mixin elder-color-variants($theme) {
+  // Apply primary color variants for button components
+  mat-chip-option[color='primary'] {
+    @include mat.chips-color($theme, $color-variant: primary);
+  }
+
+  // Apply secondary color variants for button components
+  mat-chip-option[color='danger'] {
+    @include mat.chips-color($theme, $color-variant: error);
+  }
+
+  // Apply tertiary color variants for button components
+  mat-chip-option[color='accent'] {
+    @include mat.chips-color($theme, $color-variant: tertiary);
+  }
+}

package/theming/style-tweaks/_elder-common.scss

@@ -0,0 +1,179 @@
+@use './elder-style-tweak-mixins' as mixins;
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin elder-common-styles($theme) {
+  $common-sizes: map.get($theme, elder, common-sizes);
+
+  /***************************************************************************
+   *                                                                         *
+   * Common Sizes                                                            *
+   *                                                                         *
+   **************************************************************************/
+
+  $xs: map.get($common-sizes, xs);
+  $sm: map.get($common-sizes, sm);
+  $md: map.get($common-sizes, md);
+  $lg: map.get($common-sizes, lg);
+  $xl: map.get($common-sizes, xl);
+  $xxl: map.get($common-sizes, xxl);
+
+  /***************************************************************************
+   *                                                                         *
+   * Angular Material Extensions (Optional)                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * The mat-button-fill class will lead a mat button
+   * to take up all the space, which gives you more freedom where
+   * to place items inside.
+   */
+  .mat-button-fill .mdc-button__label {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: stretch;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Material Card Styling                                                   *
+   *                                                                         *
+   **************************************************************************/
+
+  .mat-mdc-card.embedded {
+    border-radius: 0;
+    box-shadow: none;
+    border: none;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Material Table Styling                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  th.mat-mdc-header-cell {
+    &.elder-number-cell {
+      text-align: right;
+      justify-content: flex-end;
+    }
+    &.elder-center-cell {
+      text-align: center;
+      justify-content: center;
+    }
+  }
+
+  td.mat-mdc-cell {
+    &.elder-number-cell {
+      text-align: right;
+      justify-content: flex-end;
+    }
+    &.elder-center-cell {
+      text-align: center;
+      justify-content: center;
+    }
+  }
+
+  td.mat-mdc-footer-cell {
+    &.elder-number-cell {
+      text-align: right;
+      justify-content: flex-end;
+    }
+    &.elder-center-cell {
+      text-align: center;
+      justify-content: center;
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Style for hiding spinner on inputs                                      *
+   *                                                                         *
+   **************************************************************************/
+
+  input.elder-input-no-spinner::-webkit-outer-spin-button,
+  input.elder-input-no-spinner::-webkit-inner-spin-button {
+    display: none;
+  }
+
+  input[type='number'].elder-input-no-spinner {
+    -moz-appearance: textfield;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Material Dialog                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  .custom-dialog-container .mat-mdc-dialog-container {
+    // overflow-y: hidden;
+    // padding: 0;
+    // margin: 0;
+  }
+
+  .no-padding-dialog .mat-mdc-dialog-container {
+    padding: 0;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Padding                                                                 *
+   *                                                                         *
+   **************************************************************************/
+
+  .elder-default-content:not(:only-child) {
+    display: none;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * MDC Icon Button Sizing                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  .elder-icon-button-lg {
+    @include mixins.matIconButtonSize(40px, 24px);
+  }
+  .elder-icon-button-md {
+    @include mixins.matIconButtonSize(32px, 19px);
+  }
+  .elder-icon-button-sm {
+    @include mixins.matIconButtonSize(26px, 16px);
+  }
+  .elder-icon-button-xs {
+    @include mixins.matIconButtonSize(20px, 12px);
+  }
+
+  .mat-mdc-chip {
+    .mat-mdc-chip-avatar {
+      /**
+       * Maximizes the avatar icon / image size in a chip.
+       */
+      &.chip-avatar-xl {
+        width: 28px;
+        height: 28px;
+        margin-left: -4px;
+        margin-right: -4px;
+
+        img {
+          width: 28px;
+          height: 28px;
+          overflow: hidden;
+          border-radius: 14px;
+        }
+
+        .mat-icon {
+          width: 28px !important;
+          height: 28px !important;
+          line-height: 28px !important;
+          font-size: 28px !important;
+        }
+      }
+    }
+  }
+}

package/theming/style-tweaks/_elder-component-themes.scss

@@ -0,0 +1,22 @@
+@use '../../src/lib/components/chips/elder-chip-theme' as elder-chip;
+@use '../../src/lib/components/data-view/table/elder-table/elder-table.component' as elder-table;
+@use '../../src/lib/components/navigation/nav/elder-nav-theme' as elder-nav;
+@use '../../src/lib/components/data-view/grid/elder-grid/elder-grid.component' as elder-grid;
+@use '../../src/lib/components/card-organizer/card-stack/elder-card-stack.component' as
+  elder-card-stack;
+@use '../../src/lib/components/select/single/elder-select/elder-select.component' as elder-select;
+@use '../../src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component'
+  as elder-multi-select-chips;
+@use '../../src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component'
+  as elder-multi-select-chip-options;
+
+@mixin theme($theme) {
+  @include elder-chip.theme($theme);
+  @include elder-nav.theme($theme);
+  @include elder-select.theme($theme);
+  @include elder-multi-select-chips.theme($theme);
+  @include elder-multi-select-chip-options.theme($theme);
+  @include elder-table.theme($theme);
+  @include elder-card-stack.theme($theme);
+  @include elder-grid.theme($theme);
+}