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

package/theming/_elder-badge-sizing.scss

@@ -0,0 +1,21 @@
+@mixin elder-badge-sizing() {
+  // Use legacy MAT 2 badge sizing
+  --mat-badge-container-size: unset;
+  --mat-badge-small-size-container-size: unset;
+  --mat-badge-large-size-container-size: unset;
+  --mat-badge-legacy-container-size: 22px;
+  --mat-badge-legacy-small-size-container-size: 16px;
+  --mat-badge-legacy-large-size-container-size: 28px;
+  --mat-badge-container-offset: -11px 0;
+  --mat-badge-small-size-container-offset: -8px 0;
+  --mat-badge-large-size-container-offset: -14px 0;
+  --mat-badge-container-overlap-offset: -11px;
+  --mat-badge-small-size-container-overlap-offset: -8px;
+  --mat-badge-large-size-container-overlap-offset: -14px;
+  --mat-badge-container-padding: 0;
+  --mat-badge-small-size-container-padding: 0;
+  --mat-badge-large-size-container-padding: 0;
+  --mat-badge-line-height: var(--mat-badge-legacy-container-size);
+  --mat-badge-small-size-line-height: var(--mat-badge-legacy-small-size-container-size);
+  --mat-badge-large-size-line-height: var(--mat-badge-legacy-large-size-container-size);
+}

package/theming/_elder-color-variants.scss

@@ -0,0 +1,26 @@
+@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
+ */
+@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/_elder-common.scss

@@ -1,6 +1,6 @@
-@use 'mat-icon-button-size' as icon-button-size;
+@use './mixins' as mixins;
 @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,175 +90,6 @@
     }
   }
 
-  /***************************************************************************
-   *                                                                         *
-   * 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                                      *
@@ -300,230 +131,6 @@
     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                                                  *
@@ -531,16 +138,16 @@
    **************************************************************************/
 
   .elder-icon-button-lg {
-    @include icon-button-size.matIconButtonSize(40px, 24px);
+    @include mixins.matIconButtonSize(40px, 24px);
   }
   .elder-icon-button-md {
-    @include icon-button-size.matIconButtonSize(32px, 19px);
+    @include mixins.matIconButtonSize(32px, 19px);
   }
   .elder-icon-button-sm {
-    @include icon-button-size.matIconButtonSize(26px, 16px);
+    @include mixins.matIconButtonSize(26px, 16px);
   }
   .elder-icon-button-xs {
-    @include icon-button-size.matIconButtonSize(20px, 12px);
+    @include mixins.matIconButtonSize(20px, 12px);
   }
 
   .mat-mdc-chip {

package/theming/_elder-defaults.scss

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