@elderbyte/ngx-starter 18.13.0-beta.2 → 18.14.0

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);
@@ -19,18 +19,6 @@
   $xl: map-get($common-sizes, xl);
   $xxl: map-get($common-sizes, xxl);
 
-  /***************************************************************************
-   *                                                                         *
-   * CSS reset                                                               *
-   *                                                                         *
-   **************************************************************************/
-
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
   /***************************************************************************
    *                                                                         *
    * Angular Material Extensions (Optional)                                  *
@@ -102,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                                      *
@@ -124,9 +281,9 @@
    **************************************************************************/
 
   .custom-dialog-container .mat-mdc-dialog-container {
-    // overflow-y: hidden;
-    // padding: 0;
-    // margin: 0;
+    overflow-y: hidden;
+    padding: 0;
+    margin: 0;
   }
 
   .no-padding-dialog .mat-mdc-dialog-container {
@@ -143,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                                                  *
@@ -150,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 ();
+}

package/theming/_elder-flex-layout.scss

@@ -25,11 +25,13 @@ $media: (
 }
 
 @mixin flex-layout {
+  box-sizing: border-box;
   display: flex !important;
 }
 
 @mixin flex-initial-100 {
   flex: 1 1 100%;
+  box-sizing: border-box;
 }
 
 @mixin elder-flex-layout($theme) {
@@ -59,6 +61,7 @@ $media: (
     min-height: 100%;
     min-width: 100%;
     width: 100%;
+    box-sizing: border-box;
   }
 
   /***************************************************************************
@@ -192,20 +195,24 @@ $media: (
 
   .flex {
     flex: 1 1 0%; // grow, shrink, no initial size
+    box-sizing: border-box;
     min-width: 0;
     min-height: 0;
   }
 
   .flex-auto {
     flex: 1 1 auto; // grow, shrink
+    box-sizing: border-box;
   }
 
   .flex-initial {
     flex: 0 1 auto; // No grow, shrink
+    box-sizing: border-box;
   }
 
   .flex-none {
     flex: none;
+    box-sizing: border-box;
   }
 
   .layout-row {
@@ -318,18 +325,22 @@ $media: (
 
   .flex-grow {
     flex-grow: 1;
+    box-sizing: border-box;
   }
 
   .flex-nogrow {
     flex-grow: 0;
+    box-sizing: border-box;
   }
 
   .flex-shrink {
     flex-shrink: 1;
+    box-sizing: border-box;
   }
 
   .flex-noshrink {
     flex: 1 0 0%; // grow, shrink, no initial size
+    box-sizing: border-box;
   }
 
   /***************************************************************************