@elderbyte/ngx-starter 14.12.0-beta4 → 15.0.0-mdc

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

@@ -0,0 +1,68 @@
+@use '@angular/material' as mat;
+
+@mixin theme($theme) {
+  @include _group-theme($theme);
+  @include _link-theme($theme);
+}
+
+@mixin _group-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);
+
+  .nav-group-button:hover {
+    background-color: mat.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);
+    }
+  }
+
+  .nav-group-button-active {
+    background-color: mat.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);
+    }
+  }
+}
+
+@mixin _link-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);
+
+  .nav-link:hover {
+    background-color: mat.get-color-from-palette($primary, default, 0.10);
+    transition: background 0.5s;
+  }
+
+  .nav-link.nav-link-active {
+    background-color: mat.get-color-from-palette($primary, default, 0.15);
+    color: mat.get-color-from-palette($primary);
+    .mat-icon {
+      color: mat.get-color-from-palette($primary);
+    }
+  }
+
+  .nav-link.nav-link-inactive {
+    color: mat.get-color-from-palette($foreground, text);
+    .mat-icon {
+      color: mat.get-color-from-palette($foreground, secondary-text);
+    }
+  }
+
+
+}
+
+

package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.scss

@@ -1,49 +1,29 @@
 @use '@angular/material' as mat;
 
-
-
-@mixin 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);
-
-  .nav-group-active {
-    border-left: 5px solid mat.get-color-from-palette($primary)!important;
-  }
-
-  .nav-group-button-active {
-    //background-color: mat.get-color-from-palette($primary, default, 0.10);
-    padding-left: 11px!important; // -5 to counter border-left
-  }
-}
-
-.nav-group-button-inactive {
+.nav-group-button-closed {
   padding-left: 16px;
 }
 
 .nav-group {
-  min-height: 56px;
+  min-height: 48px;
 }
 
 .nav-group-button {
   padding-right: 16px;
-  min-height: 56px;
-  border-radius: 0;
+  min-height: 48px;
   font-size: 16px;
   font-weight: 400;
+  border-radius: 4px;
+  cursor: pointer;
 }
 
-elder-nav-group a mat-icon {
-  height: 24px;
-  width: 24px;
-  font-size: 24px;
-  padding: 4px;
-}
-
-elder-nav-group a.nav-group-button-inactive mat-icon {
-  color: #757575;
+.nav-group-button {
+ .mat-icon {
+   height: 24px;
+   width: 24px;
+   font-size: 24px;
+   padding: 4px;
+ }
 }
 
 .nav-group-items-container {

package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.scss

@@ -1,48 +1,18 @@
 @use '@angular/material' as mat;
 
-
-
-@mixin 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);
-
-  .nav-link-active {
-    background-color: mat.get-color-from-palette($primary, default, 0.10);
-  }
-}
-
-
 .nav-link {
+  text-decoration: none;
   padding-left: 16px;
   padding-right: 16px;
-  min-height: 56px;
-  border-radius: 0;
-}
-
-.nav-icon {
-  height: 24px;
-  width: 24px;
-  font-size: 24px;
-  padding: 4px;
-}
-
-.nav-icon-inactive {
-  color: #757575;
-}
-
-.nav-text {
-  padding-left: 16px;
-  font-size: 16px;
-  font-weight: 400;
-}
-
-.nav-text-inactive {
-  // color: #757575;
-}
-
-.nav-text-active {
-
+  min-height: 48px;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+
+  .mat-icon {
+    height: 24px;
+    width: 24px;
+    font-size: 24px;
+    padding: 4px;
+  }
 }

package/src/lib/components/navigation/nav/nav-list/elder-nav-list.component.scss

@@ -10,7 +10,7 @@
 }
 
 .elder-nav-list-full {
-  min-width: 350px;
+  min-width: 120px;
 }
 
 .elder-nav-list-full:focus {

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

@@ -8,13 +8,14 @@
 }
 
 @mixin _elder-panel-form-field-overrides {
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
   .mat-form-field-underline,
   .mat-form-field-ripple,
   .mat-focused .mat-form-field-ripple {
     background-color: currentColor;
   }
 
-  .mat-form-field-label,
+  .mat-mdc-form-field-label,
   .mat-focused .mat-form-field-label,
   .mat-select-value,
   .mat-select-arrow,
@@ -22,7 +23,7 @@
     color: inherit;
   }
 
-  .mat-input-element {
+  .mat-mdc-input-element {
     caret-color: currentColor;
   }
 }

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

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
 @use '../../../../theming/elder-typography-utils' as elder-typography;
+@use '../../../../theming/mat-icon-button-size' as icon-button-size;
 
 @mixin typography($typography-config) {
   $config: mat.private-typography-to-2014-config($typography-config);
@@ -9,19 +10,11 @@
   $font-size: mat.font-size($config, input);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
-  .elder-icon-button-small {
-    width: $line-height-em !important;
-    height: $line-height-em !important;
-    line-height: $line-height-em !important;
+  $icon-size: 16px;
+  $arrow-icon-size: 24px;
 
-    .mat-icon {
-      width: $line-height-em !important;
-      height: $line-height-em !important;
-      line-height: $line-height-em !important;
-    }
-    .material-icons {
-      font-size: $line-height-em !important;
-    }
+  .elder-icon-button-text {
+    @include icon-button-size.matIconButtonSize($line-height-em, $icon-size); // 0.6
   }
 
   .elder-input-prefix-icon-container {
@@ -29,37 +22,18 @@
     min-width: $line-height-em !important;
   }
 
-  .elder-icon-small {
-    width: $line-height-em !important;
-    height: $line-height-em !important;
-    line-height: $line-height-em !important;
-    font-size: $font-size !important;
-  }
-}
-
-
-@mixin _palette-styles($palette) {
-  background: mat.get-color-from-palette($palette);
-  color: mat.get-color-from-palette($palette, default-contrast);
-}
-
-@mixin _form-field-overrides {
-  .mat-form-field-underline,
-  .mat-form-field-ripple,
-  .mat-focused .mat-form-field-ripple {
-    background-color: currentColor;
-  }
-
-  .mat-form-field-label,
-  .mat-focused .mat-form-field-label,
-  .elder-select-value,
-  .elder-select-icon,
-  .mat-form-field.mat-focused .elder-select-icon {
-    color: inherit!important;
+  .elder-select-arrow {
+    width: $arrow-icon-size !important;
+    height: $arrow-icon-size !important;
+    line-height: $arrow-icon-size !important;
+    font-size: $arrow-icon-size !important;
   }
 
-  .mat-input-element {
-    caret-color: currentColor;
+  .elder-icon-small {
+    width: $icon-size !important;
+    height: $icon-size !important;
+    line-height: $icon-size !important;
+    font-size: $icon-size !important;
   }
 }
 
@@ -77,55 +51,4 @@
   .elder-select-disabled .elder-select-value {
     color: mat.get-color-from-palette($foreground, disabled-text);
   }
-
-  .elder-select-icon {
-    color: mat.get-color-from-palette($foreground, secondary-text);
-  }
-
-  .mat-toolbar {
-    background: mat.get-color-from-palette($background, app-bar);
-    color: mat.get-color-from-palette($foreground, text);
-
-    &.mat-primary {
-      @include _palette-styles($primary);
-    }
-
-    &.mat-accent {
-      @include _palette-styles($accent);
-    }
-
-    &.mat-warn {
-      @include _palette-styles($warn);
-    }
-
-    @include _form-field-overrides;
-  }
-
-  .mat-form-field {
-    &.mat-focused {
-      &.mat-primary .elder-select-icon {
-        color: mat.get-color-from-palette($primary, text);
-      }
-
-      &.mat-accent .elder-select-icon {
-        color: mat.get-color-from-palette($accent, text);
-      }
-
-      &.mat-warn .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-invalid .elder-select-base {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($warn, text);
-      }
-    }
-
-    &.mat-form-field-disabled .elder-select-base {
-      .elder-select-icon {
-        color: mat.get-color-from-palette($foreground, disabled-text);
-      }
-    }
-  }
 }

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

@@ -63,11 +63,3 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.mat-standard-chip .mat-chip-avatar {
-  &.chip-avatar-large {
-    width: 30px;
-    height: 30px;
-    margin-left: 1px;
-  }
-}

package/theming/_elder-common.scss

@@ -1,3 +1,4 @@
+@use 'mat-icon-button-size' as icon-button-size;
 
 @mixin elder-common-styles {
 
@@ -12,13 +13,26 @@
    * to take up all the space, which gives you more freedom where
    * to place items inside.
    */
-  .mat-button-fill .mat-button-wrapper {
+  .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;
+  }
 
   /***************************************************************************
    *                                                                         *
@@ -26,17 +40,17 @@
    *                                                                         *
    **************************************************************************/
 
-  th.mat-header-cell.elder-number-cell  {
+  th.mat-mdc-header-cell.elder-number-cell  {
     text-align: right;
     justify-content: flex-end;
   }
 
-  td.mat-cell.elder-number-cell  {
+  td.mat-mdc-cell.elder-number-cell  {
     text-align: right;
     justify-content: flex-end;
   }
 
-  td.mat-footer-cell.elder-number-cell  {
+  td.mat-mdc-footer-cell.elder-number-cell  {
     text-align: right;
     justify-content: flex-end;
   }
@@ -49,7 +63,7 @@
 
   // A legacy styled form field with class 'elder-form-field-label' will get these styles
   .mat-form-field-appearance-legacy.elder-form-field-label {
-
+    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-underline {
       display: none;
     }
@@ -62,26 +76,60 @@
    *                                                                         *
    **************************************************************************/
 
-  .mat-form-field.elder-dense {
-    .mat-form-field-wrapper {
-      padding-bottom: 0;
+  .mat-mdc-form-field.elder-dense {
+
+    .mat-mdc-text-field-wrapper { // padding left / right 16 by default
+      padding-left: 8px!important;
+      padding-right: 8px!important;
     }
-    .mat-form-field-underline {
-      bottom: 0;
+
+    .mat-mdc-form-field-flex {
+      padding: 0;
     }
-    .mat-form-field-infix {
-      border: 0;
-      padding: 0 0 8px;
+
+    .mdc-text-field--outlined {
+      .mat-mdc-form-field-infix {
+        padding-top: 8px!important; // 16px by default
+        padding-bottom: 8px!important; // 16px by default
+        min-height: 40px; // (24 + 2*16) = 56px by default
+      }
     }
-    .mat-form-field-flex {
-      padding: 0;
+
+    .mdc-text-field--filled {
+      .mdc-floating-label--float-above {
+        transform: translateY(-145%) scale(0.75);
+      }
+      .mat-mdc-form-field-infix {
+        padding-top: 14px!important; // 16px by default
+        padding-bottom: 2px;
+        min-height: 40px; // (24 + 2*16) = 56px by default
+      }
+    }
+
+    .mat-mdc-icon-button {
+      // @include icon-button-size.matIconButtonSize(40,24);
+      width: 40px;
+      height: 40px;
+
+      padding: 0px !important;
+      display: inline-flex !important;
+      align-items: center;
+      justify-content: center;
+
+
+      .mat-mdc-button-touch-target {
+        width: 40px !important;
+        height: 40px !important;
+      }
     }
   }
 
-  .mat-form-field.elder-no-hint {
+  .mat-mdc-form-field.elder-no-hint {
+    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-wrapper {
       padding-bottom: 0;
     }
+    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-underline {
       bottom: 0;
     }
@@ -197,13 +245,13 @@
    *                                                                         *
    **************************************************************************/
 
-  .custom-dialog-container .mat-dialog-container {
+  .custom-dialog-container .mat-mdc-dialog-container {
     overflow-y: hidden;
     padding: 0;
     margin: 0;
   }
 
-  .no-padding-dialog .mat-dialog-container {
+  .no-padding-dialog .mat-mdc-dialog-container {
     padding: 0;
   }
 
@@ -236,4 +284,51 @@
   .p-xxl {
     padding: 32px;
   }
+
+  /***************************************************************************
+   *                                                                         *
+   * MDC Icon Button Sizing                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  .elder-icon-button-lg {
+    @include icon-button-size.matIconButtonSize(40px, 24px);
+  }
+  .elder-icon-button-md {
+    @include icon-button-size.matIconButtonSize(32px, 19px);
+  }
+  .elder-icon-button-sm {
+    @include icon-button-size.matIconButtonSize(26px, 16px);
+  }
+  .elder-icon-button-xs {
+    @include icon-button-size.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/_elder-flex-layout.scss

@@ -47,6 +47,7 @@ $media: (
     min-height: 100%;
     min-width: 100%;
     width: 100%;
+    box-sizing: border-box;
   }
 
   /***************************************************************************