@elderbyte/ngx-starter 15.8.3 → 15.9.0

package/_index.scss

@@ -2,14 +2,14 @@
 @forward "./theming/elder-scrollbar-theme";
 @forward "./theming/elder-palettes";
 @forward "./theming/elder-theme";
-@forward "./theming/elder-config";
+@forward "./theming/elder-defaults";
 
 
 @use "./theming/elder-toast-theme" as elder-toast;
 @use "./src/lib/components/chips/elder-chip-theme" as elder-chip;
 @use "./theming/elder-style-fixes" as elder-fixes;
+@use "./theming/elder-scrollbar-theme" as elder-scrollbar-theme;
 @use "./theming/elder-defaults" as elder-defaults;
-@use "./theming/elder-config" as elder-config;
 @use "./theming/elder-mdc-support" as elder-mdc-support;
 @use "./theming/elder-common" as elder-common;
 @use "./theming/elder-flex-layout" as elder-flex-layout;
@@ -30,15 +30,15 @@
 @use "./src/lib/components/select/multi/elder-multi-select-chips/elder-multi-select-chips.component" as elder-multi-select;
 @use "./src/lib/components/iframes/iframe-host/iframe-host.component" as iframe-host;
 
-// Create a theme.
-@mixin starter-theme($theme, $elder-config: elder-config.buildConfig()) {
-  $common-sizes: map-get($elder-config, common-sizes);
+@use "sass:map";
 
+// Create a theme.
+@mixin starter-theme($theme) {
   $theme: elder-defaults.validate-and-set-defaults($theme);
   @include elder-fixes.elder-style-fixes($theme);
   @include elder-mdc-support.mdc-theme-support($theme);
-  @include elder-common.elder-common-styles($theme, $common-sizes);
-  @include elder-flex-layout.elder-flex-layout($common-sizes);
+  @include elder-common.elder-common-styles($theme);
+  @include elder-flex-layout.elder-flex-layout($theme);
 
   @include elder-toast.theme($theme);
   @include elder-chip.theme($theme);
@@ -57,5 +57,6 @@
   @include elder-card.theme($theme);
   @include elder-grid.theme($theme);
   @include elder-button-group.theme($theme);
+  @include elder-scrollbar-theme.theme($theme);
   @include iframe-host.theme($theme);
 }

package/esm2020/lib/common/theme-sizes.mjs

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtc2l6ZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lbGRlcmJ5dGUvbmd4LXN0YXJ0ZXIvc3JjL2xpYi9jb21tb24vdGhlbWUtc2l6ZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRGVmaW5lZCBpbiBfZWxkZXItY29uZmlnLnNjc3NcbiAqL1xuZXhwb3J0IHR5cGUgRWxkZXJTaXplID0gJ3hzJyB8ICdzbScgfCAnbWQnIHwgJ2xnJyB8ICd4bCcgfCAneHhsJztcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWUtc2l6ZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9lbGRlcmJ5dGUvbmd4LXN0YXJ0ZXIvc3JjL2xpYi9jb21tb24vdGhlbWUtc2l6ZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRGVmaW5lZCBpbiBfZWxkZXItZGVmYXV0bHMuc2Nzc1xuICovXG5leHBvcnQgdHlwZSBFbGRlclNpemUgPSAneHMnIHwgJ3NtJyB8ICdtZCcgfCAnbGcnIHwgJ3hsJyB8ICd4eGwnO1xuIl19

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.3",
+  "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;
 @use 'mixins' as mixins;
-@mixin elder-common-styles ($theme, $common-sizes) {
-
+@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);
 

package/theming/_elder-defaults.scss

@@ -3,17 +3,34 @@
 /******************************
 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)
-    )
+      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);

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-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
-  )
-}