@elderbyte/ngx-starter 15.7.2 → 15.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "15.7.2",
+  "version": "15.8.1",
   "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,10 @@
 @use 'mat-icon-button-size' as icon-button-size;
+@use '@angular/material' as mat;
 
-@mixin elder-common-styles ($common-sizes) {
+@mixin elder-common-styles ($theme, $common-sizes) {
+
+  $form-field-density: map-get($theme, elder, density, form-field);
+  @include mat.private-form-field-density($form-field-density);
 
   /***************************************************************************
    *                                                                         *
@@ -110,7 +114,7 @@
 
     .mdc-text-field--filled {
       .mdc-floating-label--float-above {
-        transform: translateY(-145%) scale(0.75);
+        transform: translateY(-100%) scale(0.75);
       }
       .mat-mdc-form-field-infix {
         padding-top: 14px!important; // 16px by default

package/theming/_elder-style-fixes.scss

@@ -1,9 +1,33 @@
+@use '@angular/material' as mat;
 
-@mixin elder-style-fixes {
+
+@mixin elder-style-fixes($theme) {
   @include _ng-style-fixes;
-  @include _mat-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
@@ -18,8 +42,10 @@
   }
 }
 
+@mixin _mat-style-fixes($theme) {
 
-@mixin _mat-style-fixes {
+  $iconSize: calc-form-icon-size($theme);
+  $iconPadding: calc-form-icon-padding($theme);
 
   // Globally disable automatic scrolling of Material Drawer Container
   .mat-drawer-inner-container {
@@ -85,10 +111,71 @@
   }
 
   /******************************
+  Fix cut off label
+  *******************************/
+
+
+  .mat-mdc-form-field {
+
+    /******************************
+    Fix icon size and placement in mat label
+    *******************************/
+
+    $mat-mdc-form-field-label-transform: 0.75;
+    $mat-mdc-form-field-label-offset-x: -16px;
+
+    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: 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;
+    }
+
+    /******************************
+    Fix text and hover placement of small filled form fields
+    *******************************/
+
+    $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;
+        }
+        .mat-mdc-form-field-infix {
+          padding-top: calc-padding-top-form-field-inflix($form-field-density) !important;
+          padding-bottom: 2px !important;
+          min-height: 40px; // (24 + 2*16) = 56px by default
+        }
+      }
+    }
+
+    /******************************
     Material Form Field Label stealing clicks
     *******************************/
 
-  .mat-mdc-form-field {
     .mat-mdc-floating-label.mdc-floating-label {
       pointer-events: none!important;
       mat-label {
@@ -110,5 +197,8 @@
       padding-right: 0;
     }
   }
+}
 
+.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
+  display: block !important;
 }

package/theming/_mat-icon-button-size.scss

@@ -2,7 +2,7 @@
  * Based on https://github.com/btxtiger/mat-icon-button-sizes
  * The default factor between button and icon size is *= 0.6
  */
-@mixin matIconButtonSize($buttonSize, $iconSize) {
+  @mixin matIconButtonSize($buttonSize, $iconSize) {
   width: $buttonSize !important;
   height: $buttonSize !important;
   padding: 0px !important;