@elderbyte/ngx-starter 15.8.2 → 15.9.0

package/lib/common/theme-sizes.d.ts

@@ -1,4 +1,4 @@
 /**
- * Defined in _elder-config.scss
+ * Defined in _elder-defautls.scss
  */
 export declare type ElderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';

package/package.json

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

package/theming/_elder-common.scss

@@ -1,8 +1,8 @@
 @use 'mat-icon-button-size' as icon-button-size;
 @use '@angular/material' as mat;
-
-@mixin elder-common-styles ($theme, $common-sizes) {
-
+@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);
   @include mat.private-form-field-density($form-field-density);
 
@@ -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,45 @@
+@use "sass:map";
+
+/******************************
+Default values
+*******************************/
+$commonSizesXs: 4px;
+$commonSizesSm: 8px;
+$commonSizesMd: 12px;
+$commonSizesLg: 16px;
+$commonSizesXl: 24px;
+$commonSizesXxl: 32px;
+
+$densityFormField: 0;
+
+$scrollbarStyling: false;
+
+/******************************
+Validates $theme and sets default value if null
+*******************************/
+@function validate-and-set-defaults($theme) {
+  $elderMap: (
+    common-sizes: (
+      xs: get-or-default($theme, $commonSizesXs, common-sizes, xs),
+      sm: get-or-default($theme, $commonSizesSm, common-sizes, sm),
+      md: get-or-default($theme, $commonSizesMd, common-sizes, md),
+      lg: get-or-default($theme, $commonSizesLg, common-sizes, lg),
+      xl: get-or-default($theme, $commonSizesXl, common-sizes, xl),
+      xxl: get-or-default($theme, $commonSizesXxl, common-sizes, xxl),
+    ),
+    density: (
+      form-field: get-or-default($theme, $densityFormField, density, form-field),
+    ),
+    scrollbar-styling: get-or-default($theme, $scrollbarStyling, scrollbar-styling),
+  );
+
+  @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-flex-layout.scss

@@ -34,7 +34,8 @@ $media: (
   box-sizing: border-box;
 }
 
-@mixin elder-flex-layout($common-sizes) {
+@mixin elder-flex-layout($theme) {
+  $common-sizes: map-get($theme, elder, common-sizes);
 
   /***************************************************************************
    *                                                                         *

package/theming/_elder-scrollbar-theme.scss

@@ -1,56 +1,64 @@
 @use '@angular/material' as mat;
-@use './elder-config';
+@use 'sass:map';
 
-@mixin starter-scrollbar-theme($theme) {
+@mixin theme($theme) {
+  @include _starter-scrollbar-theme($theme);
+}
 
-  $primary: map-get($theme, primary);
-  $accent: map-get($theme, accent);
-  $warn: map-get($theme, warn);
-  $background: map-get($theme, background);
-  $foreground: map-get($theme, foreground);
+@mixin _starter-scrollbar-theme($theme) {
 
-  @include scrollbar-width(map-get(elder-config.common-sizes(), sm)); // default
+  $scrollbarStyling: map.get($theme, elder, scrollbar-styling);
 
-  .scrollbar-xs {
-    @include scrollbar-width(map-get(elder-config.common-sizes(), xs));
-  }
+  @if $scrollbarStyling {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+    $commonSizes: map.get($theme, elder, common-sizes);
 
-  .scrollbar-sm {
-    @include scrollbar-width(map-get(elder-config.common-sizes(), sm));
-  }
+    @include scrollbar-width(map.get($commonSizes, sm)); // default
 
-  .scrollbar-md {
-    @include scrollbar-width(map-get(elder-config.common-sizes(), md));
-  }
+    .scrollbar-xs {
+      @include scrollbar-width(map.get($commonSizes, xs));
+    }
 
-  .scrollbar-lg {
-    @include scrollbar-width(map-get(elder-config.common-sizes(), lg));
-  }
+    .scrollbar-sm {
+      @include scrollbar-width(map.get($commonSizes, sm));
+    }
 
-  .scrollbar-xl {
-    @include scrollbar-width(map-get(elder-config.common-sizes(), xl));
-  }
+    .scrollbar-md {
+      @include scrollbar-width(map.get($commonSizes, md));
+    }
 
-  .scrollbar-xxl {
-    @include scrollbar-width(map-get(elder-config.common-sizes(), xxl));
-  }
+    .scrollbar-lg {
+      @include scrollbar-width(map.get($commonSizes, lg));
+    }
 
-  /* Track */
-  ::-webkit-scrollbar-track {
-    // background: mat.get-color-from-palette($background, background);
-  }
+    .scrollbar-xl {
+      @include scrollbar-width(map.get($commonSizes, xl));
+    }
 
-  /* Handle */
-  ::-webkit-scrollbar-thumb {
-    background: mat.get-color-from-palette($primary);
-    border-radius: 5px;
-  }
+    .scrollbar-xxl {
+      @include scrollbar-width(map.get($commonSizes, xxl));
+    }
 
-  /* Handle on hover */
-  ::-webkit-scrollbar-thumb:hover {
-    background: mat.get-color-from-palette($primary, 300);
-  }
+    /* Track */
+    ::-webkit-scrollbar-track {
+      // background: mat.get-color-from-palette($background, background);
+    }
 
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+      background: mat.get-color-from-palette($primary);
+      border-radius: 5px;
+    }
+
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+      background: mat.get-color-from-palette($primary, 300);
+    }
+  }
 }
 
 @mixin scrollbar-width($width) {
@@ -58,5 +66,4 @@
   ::-webkit-scrollbar {
     width: $width;
   }
-
 }

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;
+  }
+}

package/theming/_elder-config.scss

@@ -1,37 +0,0 @@
-
-/*
-   Builds an elder-config.
-
-   All arguments are optional which means all, none are only a part of the arguments can be passed.
-   In case no arguments are passed, the default elder-config will be returned.
-
-   @Examples:
-      elder-config.build();                             // returns default config
-      elder-config.build($common-sizes: $custom-sizes); // returns config with custom sizes
- */
-@function buildConfig($common-sizes: common-sizes()) {
-  @return (
-    common-sizes: $common-sizes
-  );
-}
-
-/*
-  Returns a map of common-sizes.
- */
-@function common-sizes(
-  $xs: 4px,
-  $sm: 8px,
-  $md: 12px,
-  $lg: 16px,
-  $xl: 24px,
-  $xxl: 32px
-) {
-  @return (
-    xs: $xs,
-    sm: $sm,
-    md: $md,
-    lg: $lg,
-    xl: $xl,
-    xxl: $xxl
-  )
-}