@elderbyte/ngx-starter 18.13.0-beta.1 → 18.13.0

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

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

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

@@ -3,6 +3,9 @@
 @use '../../../../theming/elder-typography-utils' as elder-typography;
 
 @mixin theme($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/src/lib/components/toasts/standard-toast/standard-toast.component.scss

@@ -1,32 +1,3 @@
-.elder-toast {
-  --mat-snack-bar-button-color: var(--md-sys-color-on-primary-container);
-
-  button {
-    background-color: var(--md-sys-color-primary-container);;
-  }
-
-  .toast-title,
-  .mat-icon {
-    color: var(--md-sys-color-primary-fixed);
-  }
-
-  &.elder-toast-type-warn {
-    button {
-      background-color: var(--md-sys-color-tertiary-container);
-    }
-    .toast-title,
-    .mat-icon {
-      color: var(--md-sys-color-tertiary-fixed);
-    }
-  }
-
-  &.elder-toast-type-error {
-    button {
-      background-color: var(--md-sys-color-error-container);
-    }
-    .toast-title,
-    .mat-icon {
-      color: var(--md-sys-color-error);
-    }
-  }
+.toast-title {
+  font-size: 16px;
 }

package/theming/_elder-common.scss

@@ -1,6 +1,6 @@
-@use './mixins' as mixins;
+@use 'mat-icon-button-size' as icon-button-size;
 @use '@angular/material' as mat;
-
+@use 'mixins' as mixins;
 @mixin elder-common-styles($theme) {
   $common-sizes: map-get($theme, elder, common-sizes);
   $form-field-density: map-get($theme, elder, density, form-field);
@@ -90,6 +90,175 @@
     }
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * elder-form-field-label styling                                          *
+   *                                                                         *
+   **************************************************************************/
+
+  // 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;
+    }
+  }
+
+  /***************************************************************************
+  Form field dense styling
+  **************************************************************************/
+
+  .mat-mdc-form-field.elder-dense {
+    .mat-mdc-text-field-wrapper {
+      // padding left / right 16 by default
+      padding-left: $sm !important;
+      padding-right: $sm !important;
+    }
+
+    .mat-mdc-form-field-flex {
+      padding: 0;
+    }
+
+    .mdc-text-field--outlined {
+      .mat-mdc-form-field-infix {
+        padding-top: $sm !important; // 16px by default
+        padding-bottom: $sm !important; // 16px by default
+        min-height: 40px; // (24 + 2*16) = 56px by default
+      }
+    }
+
+    .mdc-text-field--filled {
+      .mdc-floating-label--float-above {
+        transform: translateY(-100%) 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
+      }
+    }
+
+    @include mixins.form-field-icons(-4);
+
+    //.mat-mdc-icon-button {
+    //  // @include icon-button-size.matIconButtonSize(40,24);
+    //  width: 40px !important;
+    //  height: 40px !important;
+    //
+    //  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-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;
+    }
+  }
+
+  /******************************
+  Material Form Controls
+  *******************************/
+
+  .elder-form-control {
+    width: 180px;
+    overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+  }
+
+  .elder-flex-control {
+    flex: 1 1 180px;
+    overflow: hidden;
+  }
+
+  /******************************
+  Material Form Field
+  *******************************/
+
+  .elder-form-field-gap {
+    width: 12px;
+  }
+
+  // two fields plus 12px gap add up to elder-std-form-field width
+  .elder-form-field-small {
+    width: 84px;
+  }
+
+  // three fields plus 12px gap add up to elder-std-form-field width
+  .elder-form-field-tiny {
+    width: 52px;
+  }
+
+  .elder-std-form-field {
+    width: 180px;
+    overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+  }
+
+  .elder-form-field-large {
+    width: 244px;
+    overflow: hidden;
+  }
+
+  .elder-form-field-xl {
+    width: 276px;
+    overflow: hidden;
+  }
+
+  .elder-form-field-xxl {
+    width: 372px;
+    overflow: hidden;
+  }
+
+  /**
+   * mat-form-field style shorthands
+   */
+  mat-form-field {
+    // three fields plus 12px gap add up to elder-std-form-field width
+    .tiny {
+      width: 52px; // (180-(2*12)) / 3
+    }
+
+    // two fields plus 12px gap add up to elder-std-form-field width
+    .small {
+      width: 84px; // (180-(1*12)) / 2
+    }
+
+    .standard {
+      width: 180px;
+      overflow: hidden; // This allows flex items to shrink (min/max is not defaulting auto)
+    }
+
+    // one and a half plus 12px gap 180 + 52 + 12
+    .large {
+      width: 244px;
+      overflow: hidden;
+    }
+
+    // one and a half plus 12px gap 180 + 84 + 12
+    .xl {
+      width: 276px;
+      overflow: hidden;
+    }
+
+    // two standard fields plus 12px gap (180 + 180 + 12)
+    .xxl {
+      width: 372px;
+      overflow: hidden;
+    }
+  }
+
   /***************************************************************************
    *                                                                         *
    * Style for hiding spinner on inputs                                      *
@@ -131,6 +300,230 @@
     display: none;
   }
 
+  /***************************************************************************
+   *                                                                         *
+   * Padding                                                                 *
+   *                                                                         *
+   **************************************************************************/
+
+  .p-xs {
+    padding: $xs;
+  }
+
+  .pt-xs {
+    padding-top: $xs;
+  }
+
+  .pb-xs {
+    padding-bottom: $xs;
+  }
+
+  .pr-xs {
+    padding-right: $xs;
+  }
+
+  .pl-xs {
+    padding-left: $xs;
+  }
+
+  .px-xs {
+    padding-left: $xs;
+    padding-right: $xs;
+  }
+
+  .py-xs {
+    padding-top: $xs;
+    padding-bottom: $xs;
+  }
+
+  .p-sm {
+    padding: $sm;
+  }
+
+  .pt-sm {
+    padding-top: $sm;
+  }
+
+  .pb-sm {
+    padding-bottom: $sm;
+  }
+
+  .pr-sm {
+    padding-right: $sm;
+  }
+
+  .pl-sm {
+    padding-left: $sm;
+  }
+
+  .px-sm {
+    padding-left: $sm;
+    padding-right: $sm;
+  }
+
+  .py-sm {
+    padding-top: $sm;
+    padding-bottom: $sm;
+  }
+
+  .p-md {
+    padding: $md;
+  }
+
+  .pt-md {
+    padding-top: $md;
+  }
+
+  .pb-md {
+    padding-bottom: $md;
+  }
+
+  .pr-md {
+    padding-right: $md;
+  }
+
+  .pl-md {
+    padding-left: $md;
+  }
+
+  .px-md {
+    padding-left: $md;
+    padding-right: $md;
+  }
+
+  .py-md {
+    padding-top: $md;
+    padding-bottom: $md;
+  }
+
+  .p-lg {
+    padding: $lg;
+  }
+
+  .pt-lg {
+    padding-top: $lg;
+  }
+
+  .pb-lg {
+    padding-bottom: $lg;
+  }
+
+  .pr-lg {
+    padding-right: $lg;
+  }
+
+  .pl-lg {
+    padding-left: $lg;
+  }
+
+  .px-lg {
+    padding-left: $lg;
+    padding-right: $lg;
+  }
+
+  .py-lg {
+    padding-top: $lg;
+    padding-bottom: $lg;
+  }
+
+  .p-xl {
+    padding: $xl;
+  }
+
+  .pt-xl {
+    padding-top: $xl;
+  }
+
+  .pb-xl {
+    padding-bottom: $xl;
+  }
+
+  .pr-xl {
+    padding-right: $xl;
+  }
+
+  .pl-xl {
+    padding-left: $xl;
+  }
+
+  .px-xl {
+    padding-left: $xl;
+    padding-right: $xl;
+  }
+
+  .py-xl {
+    padding-top: $xl;
+    padding-bottom: $xl;
+  }
+
+  .p-xxl {
+    padding: $xxl;
+  }
+
+  .pt-xxl {
+    padding-top: $xxl;
+  }
+
+  .pb-xxl {
+    padding-bottom: $xxl;
+  }
+
+  .pr-xxl {
+    padding-right: $xxl;
+  }
+
+  .pl-xxl {
+    padding-left: $xxl;
+  }
+
+  .px-xxl {
+    padding-left: $xxl;
+    padding-right: $xxl;
+  }
+
+  .py-xxl {
+    padding-top: $xxl;
+    padding-bottom: $xxl;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Layout Widths                                                           *
+   *                                                                         *
+   **************************************************************************/
+
+  .width-5p {
+    width: 5%;
+  }
+
+  .width-10p {
+    width: 10%;
+  }
+
+  .width-15p {
+    width: 15%;
+  }
+
+  .width-20p {
+    width: 20%;
+  }
+
+  .width-25p {
+    width: 25%;
+  }
+
+  .width-30p {
+    width: 30%;
+  }
+
+  .width-40p {
+    width: 40%;
+  }
+
+  .width-50p {
+    width: 50%;
+  }
+
   /***************************************************************************
    *                                                                         *
    * MDC Icon Button Sizing                                                  *
@@ -138,16 +531,16 @@
    **************************************************************************/
 
   .elder-icon-button-lg {
-    @include mixins.matIconButtonSize(40px, 24px);
+    @include icon-button-size.matIconButtonSize(40px, 24px);
   }
   .elder-icon-button-md {
-    @include mixins.matIconButtonSize(32px, 19px);
+    @include icon-button-size.matIconButtonSize(32px, 19px);
   }
   .elder-icon-button-sm {
-    @include mixins.matIconButtonSize(26px, 16px);
+    @include icon-button-size.matIconButtonSize(26px, 16px);
   }
   .elder-icon-button-xs {
-    @include mixins.matIconButtonSize(20px, 12px);
+    @include icon-button-size.matIconButtonSize(20px, 12px);
   }
 
   .mat-mdc-chip {

package/theming/_elder-defaults.scss

@@ -1,5 +1,4 @@
 @use 'sass:map';
-@use '@angular/material' as mat;
 
 /******************************
 Default values
@@ -11,8 +10,9 @@ $commonSizesLg: 16px;
 $commonSizesXl: 24px;
 $commonSizesXxl: 32px;
 
-$densityFormField: -4;
-$scrollbarStyling: true;
+$densityFormField: 0;
+
+$scrollbarStyling: false;
 
 /******************************
 Validates $theme and sets default value if null
@@ -43,3 +43,7 @@ Validates $theme and sets default value if null
     @return $defaultValue;
   }
 }
+
+@function get-default-input() {
+  @return ();
+}