@elderbyte/ngx-starter 15.8.2 → 15.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "15.8.2",
+  "version": "15.8.3",
   "peerDependencies": {
     "@angular/core": "^15.0.0 || ^16.0.0",
     "@angular/common": "^15.0.0 || ^16.0.0",

package/theming/_elder-common.scss

@@ -1,6 +1,6 @@
 @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) {
 
   $form-field-density: map-get($theme, elder, density, form-field);
@@ -88,10 +88,8 @@
   }
 
   /***************************************************************************
-   *                                                                         *
-   * form-field dense styling                                                *
-   *                                                                         *
-   **************************************************************************/
+  Form field dense styling
+  **************************************************************************/
 
   .mat-mdc-form-field.elder-dense {
 
@@ -123,22 +121,24 @@
       }
     }
 
-    .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;
-      }
-    }
+    @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 {

package/theming/_elder-defaults.scss

@@ -0,0 +1,28 @@
+@use "sass:map";
+
+/******************************
+Default values
+*******************************/
+$densityFormField: 0;
+
+
+/******************************
+Validates $theme and sets default value if null
+*******************************/
+@function validate-and-set-defaults($theme) {
+  $elderMap: (
+    density: (
+      form-field: get-or-default($theme, $densityFormField, density, form-field)
+    )
+  );
+
+  @return map.set($theme, elder, $elderMap);
+}
+
+@function get-or-default($theme, $defaultValue, $keys...) {
+  @if map.has-key($theme, elder, $keys...) {
+    @return map.get($theme, elder, $keys...);
+  } @else {
+    @return $defaultValue;
+  }
+}

package/theming/_elder-style-fixes.scss

@@ -1,34 +1,11 @@
 @use '@angular/material' as mat;
-
+@use 'mixins' as mixins;
 
 @mixin elder-style-fixes($theme) {
   @include _ng-style-fixes;
   @include _mat-style-fixes($theme);
 }
 
-@function calc-form-icon-padding($theme) {
-  $density: map-get($theme, elder, density, form-field);
-  @return calc(12px + #{$density}px * 2);
-}
-
-@function calc-form-icon-size($theme) {
-  $density: map-get($theme, elder, density, form-field);
-
-  @if $density > -3 {
-    @return 48px;
-  } @else {
-    @return 40px;
-  }
-}
-
-@function calc-padding-top-form-field-inflix($density) {
-  @if $density > -3 {
-    @return 20px;
-  } @else {
-    @return 14px;
-  }
-}
-
 @mixin _ng-style-fixes {
   // Trick to ensure flex functionality within router-outlet
   router-outlet.router-flex + * {
@@ -44,9 +21,6 @@
 
 @mixin _mat-style-fixes($theme) {
 
-  $iconSize: calc-form-icon-size($theme);
-  $iconPadding: calc-form-icon-padding($theme);
-
   // Globally disable automatic scrolling of Material Drawer Container
   .mat-drawer-inner-container {
     overflow: hidden !important;
@@ -110,54 +84,44 @@
     z-index: 1;
   }
 
-  .mat-mdc-form-field {
+  .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper {
+    padding-left: 0 !important;
+  }
 
-    /******************************
-    Fix icon size and placement in mat label
-    *******************************/
+  .mat-mdc-form-field-has-icon-suffix .mat-mdc-text-field-wrapper {
+    padding-right: 0 !important;
+  }
 
-    $mat-mdc-form-field-label-transform: 0.75;
-    $mat-mdc-form-field-label-offset-x: -16px;
+  .mat-mdc-form-field:not(.mat-mdc-form-field.elder-dense) {
+    $density: map-get($theme, elder, density, form-field);
 
-    a {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
+    /******************************
+    Fix big paddings for dense form fields
+    *******************************/
 
-    .mat-mdc-form-field-icon-prefix>.mat-icon, .mat-mdc-form-field-icon-suffix>.mat-icon {
-      width: $iconSize !important;
-      height: $iconSize !important;
-      padding: 0 $iconPadding !important;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      box-sizing: border-box;
+    .mat-mdc-text-field-wrapper {
+      padding-left: calc-side-paddings($density);
+      padding-right: calc-side-paddings($density);
     }
 
-    .mat-mdc-icon-button .mat-mdc-button-touch-target {
-      width: $iconSize !important;
-      height: $iconSize !important;
-      line-height: 0;
-    }
+    /******************************
+    Fix icon size and placement in mat label
+    *******************************/
 
-    .mat-mdc-icon-button.mat-mdc-button-base {
-      width: $iconSize !important;
-      height: $iconSize !important;
-      padding: 0 $iconPadding !important;
-      line-height: 0;
-    }
+    @include mixins.form-field-icons($density);
 
     /******************************
     Fix text and hover placement of small filled form fields
     *******************************/
 
+    $mat-mdc-form-field-label-transform: 0.75;
+    $mat-mdc-form-field-label-offset-x: -16px;
     $form-field-density: map-get($theme, elder, density, form-field);
 
     @if $form-field-density < -1 {
       .mdc-text-field--filled {
         .mdc-floating-label--float-above {
-          transform: var( $mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))) !important;
+          transform: var($mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (44px + var($mat-mdc-form-field-label-offset-x, 0px))))) !important;
         }
         .mat-mdc-form-field-infix {
           padding-top: calc-padding-top-form-field-inflix($form-field-density) !important;
@@ -197,3 +161,31 @@
 .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
   display: block !important;
 }
+
+@function calc-side-paddings($density) {
+  $paddingDensityNeg4: 8px;
+  $paddingDensityNeg3: 10px;
+  $paddingDensityNeg2: 12px;
+  $paddingDensityNeg1: 14px;
+  $paddingDensity0: 16px;
+
+  @if $density == -4 {
+    @return $paddingDensityNeg4;
+  } @else if $density == -3 {
+    @return $paddingDensityNeg3;
+  } @else if $density == -2 {
+    @return $paddingDensityNeg2;
+  } @else if $density == -1 {
+    @return $paddingDensityNeg1;
+  } @else if $density == 0 {
+    @return $paddingDensity0;
+  }
+}
+
+@function calc-padding-top-form-field-inflix($density) {
+  @if $density > -3 {
+    @return 20px;
+  } @else {
+    @return 14px;
+  }
+}

package/theming/_mixins.scss

@@ -0,0 +1,47 @@
+@mixin form-field-icons($density) {
+  $iconSize: calc-form-icon-size($density);
+  $iconPadding: calc-form-icon-padding($density);
+
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .mat-mdc-form-field-icon-prefix>.mat-icon, .mat-mdc-form-field-icon-suffix>.mat-icon {
+    width: $iconSize !important;
+    height: $iconSize !important;
+    padding: 0 $iconPadding !important;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  .mat-mdc-icon-button .mat-mdc-button-touch-target {
+    width: $iconSize !important;
+    height: $iconSize !important;
+    line-height: 0;
+  }
+
+
+
+  .mat-mdc-icon-button.mat-mdc-button-base {
+    width: $iconSize !important;
+    height: $iconSize !important;
+    padding: 0 $iconPadding !important;
+    line-height: 0;
+  }
+}
+
+@function calc-form-icon-padding($density) {
+  @return calc(12px + #{$density}px * 2);
+}
+
+@function calc-form-icon-size($density) {
+  @if $density > -3 {
+    @return 48px;
+  } @else {
+    @return 40px;
+  }
+}