@elderbyte/ngx-starter 17.1.3 → 17.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "17.1.3",
+  "version": "17.3.0",
   "peerDependencies": {
     "@angular/core": "^17.0.0 || ^18.0.0",
     "@angular/common": "^17.0.0 || ^18.0.0",

package/src/lib/components/select/_elder-select-base.scss

@@ -4,10 +4,10 @@
 @use '../../../../theming/mat-icon-button-size' as icon-button-size;
 
 @mixin typography($typography-config) {
-  $config: mat.private-typography-to-2014-config($typography-config);
+  $config: $typography-config; // TODO $typography-config
   // The unit-less line-height from the font config.
-  $line-height: mat.line-height($config, input);
-  $font-size: mat.font-size($config, input);
+  $line-height: mat.line-height($config, body-1);
+  $font-size: mat.font-size($config, body-1);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
   $icon-size: 16px;

package/src/lib/components/select/multi/elder-multi-select-chip-options/elder-multi-select-chip-options.component.scss

@@ -4,10 +4,10 @@
 @use '../../elder-select-base' as elder-select-base;
 
 @mixin typography($typography-config) {
-  $config: mat.private-typography-to-2014-config($typography-config);
+  $config: $typography-config; // TODO $typography-config
   // The unit-less line-height from the font config.
-  $line-height: mat.line-height($config, input);
-  $font-size: mat.font-size($config, input);
+  $line-height: mat.line-height($config, body-1);
+  $font-size: mat.font-size($config, body-1);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
   @include elder-select-base.typography($typography-config);
@@ -41,7 +41,7 @@
 
 @mixin theme($config-or-theme) {
   $color: mat.get-color-config($config-or-theme);
-  $typography: mat.get-typography-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
 
   // If no actual typography configuration has been specified, create a default one.
   @if not $typography {

package/src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component.scss

@@ -4,10 +4,10 @@
 @use '../../elder-select-base' as elder-select-base;
 
 @mixin typography($typography-config) {
-  $config: mat.private-typography-to-2014-config($typography-config);
+  $config: $typography-config; // TODO $typography-config
   // The unit-less line-height from the font config.
-  $line-height: mat.line-height($config, input);
-  $font-size: mat.font-size($config, input);
+  $line-height: mat.line-height($config, body-1);
+  $font-size: mat.font-size($config, body-1);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
   @include elder-select-base.typography($typography-config);
@@ -41,7 +41,7 @@
 
 @mixin theme($config-or-theme) {
   $color: mat.get-color-config($config-or-theme);
-  $typography: mat.get-typography-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
 
   // If no actual typography configuration has been specified, create a default one.
   @if not $typography {

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

@@ -4,10 +4,10 @@
 @use '../../elder-select-base' as elder-select-base;
 
 @mixin typography($typography-config) {
-  $config: mat.private-typography-to-2014-config($typography-config);
+  $config: $typography-config;
   // The unit-less line-height from the font config.
-  $line-height: mat.line-height($config, input);
-  $font-size: mat.font-size($config, input);
+  $line-height: mat.line-height($config, body-1);
+  $font-size: mat.font-size($config, body-1);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
   @include elder-select-base.typography($typography-config);
@@ -32,7 +32,7 @@
 
 @mixin theme($config-or-theme) {
   $color: mat.get-color-config($config-or-theme);
-  $typography: mat.get-typography-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
 
   // If no actual typography configuration has been specified, create a default one.
   @if not $typography {

package/theming/_elder-common.scss

@@ -4,7 +4,7 @@
 @mixin elder-common-styles ($theme) {
   $common-sizes: map-get($theme, elder, common-sizes);
   $form-field-density: map-get($theme, elder, density, form-field);
-  @include mat.private-form-field-density($form-field-density);
+  @include mat.form-field-density($form-field-density);
 
   /***************************************************************************
    *                                                                         *

package/theming/_elder-defaults.scss

@@ -43,3 +43,9 @@ Validates $theme and sets default value if null
     @return $defaultValue;
   }
 }
+
+@function get-default-input() {
+ @return (
+
+ );
+}

package/theming/_elder-mdc-support.scss

@@ -7,17 +7,12 @@
 
 @mixin mdc-theme-support($config-or-theme) {
   $color: mat.get-color-config($config-or-theme);
-  $typography: mat.get-typography-config($config-or-theme);
+  $typography: elder-typography.get-typography-config($config-or-theme);
 
   @if $color != null {
     @include _color-support($color);
   }
 
-  // If no actual typography configuration has been specified, create a default one.
-  @if not $typography {
-    $typography: mat.define-typography-config();
-  }
-
   @if $typography != null {
     @include _typography-support($typography);
   }
@@ -34,11 +29,11 @@
 }
 
 @mixin _typography-support($typography-config) {
-  $config: mat.private-typography-to-2014-config($typography-config);
+  $config: $typography-config;
 
   // The unit-less line-height from the font config.
-  $line-height: mat.line-height($config, input);
-  $font-size: mat.font-size($config, input);
+  $line-height: mat.line-height($config, body-1);
+  $font-size: mat.font-size($config, body-1);
   $line-height-em: elder-typography.coerce-unitless-to-em($line-height);
 
 
@@ -46,6 +41,11 @@
   $control-button-size: var(--mdc-typography-body1-line-height, 24px);
   $control-icon-size: 20px;
 
+  // Add input typography to all form fields
+  .mat-mdc-form-field {
+    @include mat.typography-level($config, input)
+  }
+
   .elder-mdc-input-fix {
     max-height: $control-button-size;
   }
@@ -57,6 +57,7 @@
   .mat-datepicker-toggle.elder-control-icon-button {
     max-height: $control-button-size;
     max-width: $control-button-size;
+
     .mat-mdc-icon-button {
       @include icon-button-size.matIconButtonSize($control-button-size, $control-icon-size); // 0.6
     }
@@ -172,9 +173,9 @@
     color: $contrast-color;
 
     .mdc-text-field__input {
-        background: mat.get-color-from-palette($palette);
-        color: $contrast-color;
-        caret-color: currentColor;
+      background: mat.get-color-from-palette($palette);
+      color: $contrast-color;
+      caret-color: currentColor;
     }
 
     .mat-mdc-select-value {
@@ -193,12 +194,15 @@
       .mdc-notched-outline__leading {
         border-color: $contrast-color-inactive;
       }
+
       .mdc-notched-outline__notch {
         border-color: $contrast-color-inactive;
+
         .mat-mdc-floating-label {
           color: $contrast-color-inactive;
         }
       }
+
       .mdc-notched-outline__trailing {
         border-color: $contrast-color-inactive;
       }
@@ -216,12 +220,15 @@
         .mdc-notched-outline__leading {
           border-color: $contrast-color;
         }
+
         .mdc-notched-outline__notch {
           border-color: $contrast-color;
+
           .mat-mdc-floating-label {
             color: $contrast-color;
           }
         }
+
         .mdc-notched-outline__trailing {
           border-color: $contrast-color;
         }

package/theming/_elder-style-fixes.scss

@@ -1,5 +1,6 @@
 @use '@angular/material' as mat;
 @use 'mixins' as mixins;
+@use "sass:map";
 
 @mixin elder-style-fixes($theme) {
   @include _ng-style-fixes;
@@ -67,6 +68,7 @@
         line-height: 18px;
         font-size: 18px;
       }
+
       img {
         width: 18px;
         height: 18px;
@@ -123,6 +125,7 @@
         .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;
@@ -136,17 +139,21 @@
     *******************************/
 
     .mat-mdc-floating-label.mdc-floating-label {
-      pointer-events: none!important;
+      pointer-events: none !important;
+
       mat-label {
-        pointer-events: none!important;;
+        pointer-events: none !important;;
       }
     }
+
     .mdc-notched-outline__notch {
-      pointer-events: none!important;;
+      pointer-events: none !important;;
+
       .mdc-floating-label {
-        pointer-events: none!important;;
+        pointer-events: none !important;;
+
         mat-label {
-          pointer-events: none!important;;
+          pointer-events: none !important;;
         }
       }
     }
@@ -161,11 +168,11 @@
   Material chip make regular chips clickable when applying this class
   *******************************/
 
-   .clickable-chip {
-     .mat-mdc-chip-action {
-       cursor: pointer;
-     }
-   }
+  .clickable-chip {
+    .mat-mdc-chip-action {
+      cursor: pointer;
+    }
+  }
 }
 
 .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {

package/theming/_elder-typography-utils.scss

@@ -3,9 +3,21 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
+@use '@angular/material' as mat;
 
 /// Coerce a value to `em` if it is a unitless number, otherwise returns
 /// the value provided.
 @function coerce-unitless-to-em($value) {
   @return if(math.is-unitless($value), 1em * $value, $value);
 }
+
+@function get-typography-config($config) {
+  $typography: mat.get-typography-config($config);
+
+  // If no actual typography configuration has been specified, create a default one.
+  @if not $typography {
+    $typography: mat.define-typography-config();
+  }
+
+  @return $typography;
+}