@elderbyte/ngx-starter 17.11.0 → 18.0.0

package/src/lib/components/files/drag-n-drop/elder-drop-zone/elder-drop-zone.component.scss

@@ -20,28 +20,28 @@ $colorStateNone: rgb(0, 0, 0);
     cursor: pointer;
 
     .elder-drop-zone-icon {
-      color: mat.get-color-from-palette($primary, default, 0.75);
+      color: mat.m2-get-color-from-palette($primary, default, 0.75);
       font-size: 28px;
       width: 28px;
       height: 28px;
     }
 
     .elder-drop-zone-prompt {
-      color: mat.get-color-from-palette($primary, default, 0.75);
+      color: mat.m2-get-color-from-palette($primary, default, 0.75);
     }
 
   }
 
   .elder-drop-zone.is-dragover {
-    border: 4px solid mat.get-color-from-palette($accent, default, 0.40);
-    background-color: mat.get-color-from-palette($accent, default, 0.25);
+    border: 4px solid mat.m2-get-color-from-palette($accent, default, 0.40);
+    background-color: mat.m2-get-color-from-palette($accent, default, 0.25);
 
     .elder-drop-zone-icon {
-      color: mat.get-color-from-palette($accent, default, 0.75);
+      color: mat.m2-get-color-from-palette($accent, default, 0.75);
     }
 
     .elder-drop-zone-prompt {
-      color: mat.get-color-from-palette($accent, default, 0.75);
+      color: mat.m2-get-color-from-palette($accent, default, 0.75);
     }
 
   }

package/src/lib/components/navigation/nav/_elder-nav-theme.scss

@@ -13,24 +13,24 @@
   $foreground: map-get($theme, foreground);
 
   .nav-group-button:hover {
-    background-color: mat.get-color-from-palette($primary, default, 0.10);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.10);
     transition: background 0.5s;
   }
 
     .nav-group-button:not(.nav-group-button-open) {
     .mat-icon {
-      color: mat.get-color-from-palette($foreground, secondary-text);
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
   }
 
   .nav-group-button-active {
-    background-color: mat.get-color-from-palette($primary, default, 0.15);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
   }
 
   .nav-group-button-open {
     padding-left: 11px!important; // -5 to counter border-left
     .mat-icon {
-      color: mat.get-color-from-palette($primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 }
@@ -45,7 +45,7 @@
   .nav-link.nav-link-clickable {
     cursor: pointer;
     &:hover {
-      background-color: mat.get-color-from-palette($primary, default, 0.10);
+      background-color: mat.m2-get-color-from-palette($primary, default, 0.10);
     }
   }
 
@@ -54,21 +54,21 @@
   }
 
   .nav-link:hover {
-    background-color: mat.get-color-from-palette($primary, default, 0.05);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.05);
   }
 
   .nav-link.nav-link-active {
-    background-color: mat.get-color-from-palette($primary, default, 0.15);
-    color: mat.get-color-from-palette($primary);
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.15);
+    color: mat.m2-get-color-from-palette($primary);
     .mat-icon {
-      color: mat.get-color-from-palette($primary);
+      color: mat.m2-get-color-from-palette($primary);
     }
   }
 
   .nav-link.nav-link-inactive {
-    color: mat.get-color-from-palette($foreground, text);
+    color: mat.m2-get-color-from-palette($foreground, text);
     .mat-icon {
-      color: mat.get-color-from-palette($foreground, secondary-text);
+      color: mat.m2-get-color-from-palette($foreground, secondary-text);
     }
   }
 

package/src/lib/components/panels/card-panel/elder-card-panel.component.scss

@@ -8,8 +8,8 @@
   $foreground: map-get($theme, foreground);
 
   .elder-card-panel {
-    color: mat.get-color-from-palette($foreground, text);
-    background-color: mat.get-color-from-palette($background, 'card');
+    color: mat.m2-get-color-from-palette($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, 'card');
 
     padding: 10px;
     border-radius: 4px;

package/src/lib/components/panels/elder-dialog-panel/elder-dialog-panel.component.scss

@@ -8,8 +8,8 @@
   $foreground: map-get($theme, foreground);
 
   .elder-dialog-panel {
-    color: mat.get-color-from-palette($foreground, text);
-    background-color: mat.get-color-from-palette($background, dialog);
+    color: mat.m2-get-color-from-palette($foreground, text);
+    background-color: mat.m2-get-color-from-palette($background, dialog);
 
     padding: 10px;
     border-radius: 4px;

package/src/lib/components/panels/flat/_elder-panel-theme.scss

@@ -3,8 +3,8 @@
 
 
 @mixin _elder-panel-color($palette) {
-  background: mat.get-color-from-palette($palette);
-  color: mat.get-color-from-palette($palette, default-contrast);
+  background: mat.m2-get-color-from-palette($palette);
+  color: mat.m2-get-color-from-palette($palette, default-contrast);
 }
 
 @mixin _elder-panel-form-field-overrides {
@@ -36,8 +36,8 @@
   $foreground: map-get($theme, foreground);
 
   .mat-panel {
-    background: mat.get-color-from-palette($background, app-bar);
-    color: mat.get-color-from-palette($foreground, text);
+    background: mat.m2-get-color-from-palette($background, app-bar);
+    color: mat.m2-get-color-from-palette($foreground, text);
     transition: background 0.5s;
 
     &.mat-primary {
@@ -64,7 +64,7 @@
   .mat-panel h4,
   .mat-panel h5,
   .mat-panel h6 {
-    @include mat.typography-level($config, title);
+    @include mat.m2-typography-level($config, title);
     margin: 0;
   }
 }

package/src/lib/components/select/_elder-select-base.scss

@@ -6,8 +6,8 @@
 @mixin typography($typography-config) {
   $config: $typography-config; // TODO $typography-config
   // 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: 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);
 
   $icon-size: 16px;

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

@@ -0,0 +1,95 @@
+@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.line-height($config, body-1);
+  $font-size: mat.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.font-family($config);
+
+    .elder-select-input {
+      height: $line-height-em
+    }
+
+    .elder-prefix-icon {
+      margin-left: 3px;
+    }
+
+    .elder-chip-input {
+      flex: 1 0 auto;
+      padding-left: 8px;
+    }
+
+    .elder-chip-input-select {
+      flex: 1 0 140px;
+      max-width: 100%;
+    }
+
+    .elder-browse-icon {
+      margin-right: 4px;
+    }
+  }
+}
+
+@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();
+  }
+
+  @if $color != null {
+    @include elder-select-base.color($color);
+    @include _chip_color($config-or-theme)
+  }
+
+  @if $typography != null {
+    @include typography($typography);
+  }
+}
+
+@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-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

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

@@ -6,14 +6,14 @@
 @mixin typography($typography-config) {
   $config: $typography-config; // TODO $typography-config
   // 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: 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.font-family($config);
+    font-family: mat.m2-font-family($config);
 
     .elder-select-input {
       height: $line-height-em
@@ -40,12 +40,12 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.get-color-config($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.define-typography-config();
+    $typography: mat.m2-define-typography-config();
   }
 
   @if $color != null {

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

@@ -6,14 +6,14 @@
 @mixin typography($typography-config) {
   $config: $typography-config; // TODO $typography-config
   // 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: 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.font-family($config);
+    font-family: mat.m2-font-family($config);
 
     .elder-select-input {
       height: $line-height-em
@@ -40,12 +40,12 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.get-color-config($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.define-typography-config();
+    $typography: mat.m2-define-typography-config();
   }
 
   @if $color != null {

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

@@ -6,14 +6,14 @@
 @mixin typography($typography-config) {
   $config: $typography-config;
   // 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: 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-select {
-    font-family: mat.font-family($config);
+    font-family: mat.m2-font-family($config);
 
     .elder-input-prefix-icon-container {
       padding-right: 3px;
@@ -31,12 +31,12 @@
 }
 
 @mixin theme($config-or-theme) {
-  $color: mat.get-color-config($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.define-typography-config();
+    $typography: mat.m2-define-typography-config();
   }
 
   @if $color != null {

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

@@ -8,8 +8,8 @@
   $foreground: map-get($theme, foreground);
 
   .select-item-active {
-    background-color: mat.get-color-from-palette($primary, default, 0.10);
-    border-left: 5px solid mat.get-color-from-palette($primary)!important;
+    background-color: mat.m2-get-color-from-palette($primary, default, 0.10);
+    border-left: 5px solid mat.m2-get-color-from-palette($primary)!important;
   }
 }
 

package/src/lib/components/time/_elder-time-input.theme.scss

@@ -3,8 +3,8 @@
 @use '../../../../theming/elder-typography-utils' as elder-typography;
 
 @mixin theme($config-or-theme) {
-  $color: mat.get-color-config($config-or-theme);
-  $typography: mat.get-typography-config($config-or-theme);
+  $color: mat.m2-get-color-config($config-or-theme);
+  $typography: mat.m2-get-typography-config($config-or-theme);
 
   @include _interval-form-field-sizing();
   @include _interval-form-field-color();

package/theming/_elder-mdc-support.scss

@@ -6,7 +6,7 @@
 
 
 @mixin mdc-theme-support($config-or-theme) {
-  $color: mat.get-color-config($config-or-theme);
+  $color: mat.m2-get-color-config($config-or-theme);
   $typography: elder-typography.get-typography-config($config-or-theme);
 
   @if $color != null {
@@ -32,8 +32,8 @@
   $config: $typography-config;
 
   // 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: 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);
 
 
@@ -114,39 +114,39 @@
   $warn: map.get($color-config, warn);
 
   .elder-mdc-control-icon {
-    color: mat.get-color-from-palette($foreground, secondary-text);
+    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.get-color-from-palette($primary, text);
+          color: mat.m2-get-color-from-palette($primary, text);
         }
       }
 
       &.mat-accent {
         .elder-mdc-control-icon, .elder-control-icon-button {
-          color: mat.get-color-from-palette($accent, text);
+          color: mat.m2-get-color-from-palette($accent, text);
         }
       }
 
       &.mat-warn {
         .elder-mdc-control-icon, .elder-control-icon-button {
-          color: mat.get-color-from-palette($warn, text);
+          color: mat.m2-get-color-from-palette($warn, text);
         }
       }
     }
 
     &.mat-form-field-invalid {
       .elder-mdc-control-icon, .elder-control-icon-button {
-        color: mat.get-color-from-palette($warn, text);
+        color: mat.m2-get-color-from-palette($warn, text);
       }
     }
 
     &.mat-form-field-disabled {
       .elder-mdc-control-icon, .elder-control-icon-button {
-        color: mat.get-color-from-palette($foreground, disabled-text);
+        color: mat.m2-get-color-from-palette($foreground, disabled-text);
       }
     }
   }
@@ -155,20 +155,20 @@
 
 @mixin _form-field-palette($palette) {
 
-  $contrast-color: mat.get-color-from-palette($palette, default-contrast);
+  $contrast-color: mat.m2-get-color-from-palette($palette, default-contrast);
   $contrast-color-inactive: rgba($contrast-color, .5);
 
   .mat-mdc-slide-toggle .mdc-form-field {
-    background: mat.get-color-from-palette($palette);
+    background: mat.m2-get-color-from-palette($palette);
     color: $contrast-color;
   }
 
   .mat-mdc-form-field.mat-form-field-appearance-outline {
-    background: mat.get-color-from-palette($palette);
+    background: mat.m2-get-color-from-palette($palette);
     color: $contrast-color;
 
     .mdc-text-field__input {
-      background: mat.get-color-from-palette($palette);
+      background: mat.m2-get-color-from-palette($palette);
       color: $contrast-color;
       caret-color: currentColor;
     }

package/theming/_elder-palettes.scss

@@ -91,7 +91,7 @@ $elder-gold: (
  *                                                                         *
  **************************************************************************/
 
-$grey-palette: mat.$grey-palette;
+$grey-palette: mat.$m2-grey-palette;
 $light-primary-text: rgba(white, 0.87);
 $light-secondary-text: rgba(white, 0.40);
 $light-disabled-text: rgba(white, 0.38);

package/theming/_elder-scrollbar-theme.scss

@@ -50,13 +50,13 @@
 
     /* Handle */
     ::-webkit-scrollbar-thumb {
-      background: mat.get-color-from-palette($primary);
+      background: mat.m2-get-color-from-palette($primary);
       border-radius: 5px;
     }
 
     /* Handle on hover */
     ::-webkit-scrollbar-thumb:hover {
-      background: mat.get-color-from-palette($primary, 300);
+      background: mat.m2-get-color-from-palette($primary, 300);
     }
   }
 }

package/theming/_elder-theme.scss

@@ -30,7 +30,7 @@
   @return (
     primary: $primary,
     accent: $accent,
-    warn: if($warn != null, $warn, mat.define-palette(mat.$red-palette)),
+    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

package/theming/_elder-toast-theme.scss

@@ -34,15 +34,15 @@
   }*/
 
   .elder-primary-text {
-    color: mat.get-color-from-palette($primary);
+    color: mat.m2-get-color-from-palette($primary);
   }
 
   .elder-accent-text {
-    color: mat.get-color-from-palette($accent);
+    color: mat.m2-get-color-from-palette($accent);
   }
 
   .elder-warn-text {
-    color: mat.get-color-from-palette($warn);
+    color: mat.m2-get-color-from-palette($warn);
   }
 
 }

package/theming/_elder-typography-utils.scss

@@ -12,11 +12,11 @@
 }
 
 @function get-typography-config($config) {
-  $typography: mat.get-typography-config($config);
+  $typography: mat.m2-get-typography-config($config);
 
   // If no actual typography configuration has been specified, create a default one.
   @if not $typography {
-    $typography: mat.define-typography-config();
+    $typography: mat.m2-define-typography-config();
   }
 
   @return $typography;