@elderbyte/ngx-starter 19.1.3 → 19.1.5

package/lib/components/shell/shell/elder-shell.component.d.ts

@@ -55,6 +55,7 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
     readonly footerTemplate$: Observable<TemplateRef<any>>;
     private readonly destroy$;
     color: ThemePalette;
+    navMenuSvgIcon: string;
     readonly menuColor$: BehaviorSubject<ThemePalette>;
     readonly menuIconColor$: BehaviorSubject<ThemePalette>;
     /***************************************************************************
@@ -97,5 +98,5 @@ export declare class ElderShellComponent implements OnInit, OnDestroy {
     private isContained;
     private checkSoon;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderShellComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderShellComponent, "elder-shell", never, { "sideNavToggleEnabled": { "alias": "sideNavToggleEnabled"; "required": false; }; "leftSideAutoFocus": { "alias": "leftSideAutoFocus"; "required": false; }; "rightSideAutoFocus": { "alias": "rightSideAutoFocus"; "required": false; }; "color": { "alias": "color"; "required": false; }; "menuColor": { "alias": "menuColor"; "required": false; }; "menuIconColor": { "alias": "menuIconColor"; "required": false; }; }, {}, ["sideContentLeft", "sideContentRight", "centerContent"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderShellComponent, "elder-shell", never, { "sideNavToggleEnabled": { "alias": "sideNavToggleEnabled"; "required": false; }; "leftSideAutoFocus": { "alias": "leftSideAutoFocus"; "required": false; }; "rightSideAutoFocus": { "alias": "rightSideAutoFocus"; "required": false; }; "color": { "alias": "color"; "required": false; }; "navMenuSvgIcon": { "alias": "navMenuSvgIcon"; "required": false; }; "menuColor": { "alias": "menuColor"; "required": false; }; "menuIconColor": { "alias": "menuIconColor"; "required": false; }; }, {}, ["sideContentLeft", "sideContentRight", "centerContent"], never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.1.3",
+  "version": "19.1.5",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

package/src/lib/components/shell/shell/elder-shell.component.scss

@@ -26,3 +26,16 @@ mat-sidenav-container {
     background-color: rgba(0, 0, 0, 0.07);
   }
 }
+
+.elder-logo-btn {
+  display: flex;
+  padding: 5px;
+  justify-content: center;
+  align-items: center;
+  --mdc-icon-button-icon-size: 36px !important;
+  .mat-icon {
+    height: var(--mdc-icon-button-icon-size);
+    width: var(--mdc-icon-button-icon-size);
+    filter: brightness(1.09) saturate(1.07);
+  }
+}

package/theming/abstracts/_elder-design-tokens.scss

@@ -41,7 +41,8 @@
     --elder-border-radius-sm: 4px; // typical small border radius, inspired by mat 2
     --elder-border-light: 1px solid var(--md-sys-color-outline-variant);
     --elder-box-shadow-default: var(--mat-app-elevation-shadow-level-8);
-    --elder-scrollbar-width: 8px;
+    --elder-scrollbar-width-default: 8px;
+    --elder-scrollbar-width-lg: #{map.get(config.$sizes, lg)};
     --elder-lightened-transparent-bg: rgba(255, 255, 255, 0.15);
     --elder-main-nav-bg: var(--md-sys-color-surface-container-lowest);
     --elder-nav-item-height: 54px;

package/theming/base/_elder-common-base.scss

@@ -3,6 +3,25 @@
 @use 'sass:map';
 
 @mixin elder-common-base($theme) {
+  /***************************************************************************
+  *                                                                         *
+  * Scrollbar styling (webkit)                                              *
+  *                                                                         *
+  **************************************************************************/
+
+  ::-webkit-scrollbar {
+    width: var(--elder-scrollbar-width-default);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--md-sys-color-outline-variant);
+    border-radius: 5px;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: var(--md-sys-color-outline);
+  }
+
   /***************************************************************************
    *                                                                         *
    * Angular Material Extensions (Optional)                                  *

package/theming/base/_elder-fixes-base.scss

@@ -88,6 +88,17 @@
     --mat-badge-background-color: var(--md-sys-color-error);
   }
 
+  // disable button color grayed out
+  .mat-mdc-icon-button[disabled],
+  .mat-mdc-icon-button.mat-mdc-button-disabled {
+    opacity: 0.5;
+  };
+
+  // mat-slide-toggle label color inherit from parent context
+  .mat-mdc-slide-toggle .mat-internal-form-field {
+    color: inherit !important;
+  }
+
   /**************************************************************************
     Card fixes
   **************************************************************************/
@@ -186,8 +197,4 @@
       // --mdc-switch-selected-hover-handle-color: color-mix(in hsl, var(--md-sys-color-tertiary), black 16%);
     }
   }
-
-  &.elder-light-theme .main-nav-logo{
-    filter: brightness(1.09) saturate(1.07);
-  }
 }

package/theming/components/_elder-scrollbar-theme.scss

@@ -5,19 +5,6 @@
 
 @mixin theme() {
   // scrollbar styling
-  ::-webkit-scrollbar {
-    width: var(--elder-scrollbar-width);
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background: var(--md-sys-color-outline-variant);
-    border-radius: 5px;
-  }
-
-  ::-webkit-scrollbar-thumb:hover {
-    background: var(--md-sys-color-outline);
-  }
-
   .scrollbar-xs {
     @include scrollbar-width(map.get(config.$sizes, xs));
   }
@@ -39,7 +26,7 @@
 }
 
 @mixin scrollbar-width($width) {
-  &::-webkit-scrollbar {
+  ::-webkit-scrollbar {
     width: $width;
   }
 }

package/theming/utilities/_elder-common-utils.scss

@@ -1,3 +1,6 @@
+@use 'sass:map';
+@use '../abstracts/elder-scss-variables' as config;
+
 @mixin elder-common-utils() {
   .border-none {
     border: none;
@@ -62,4 +65,11 @@
   .outlined {
     border: 1px solid var(--md-sys-color-outline-variant);
   }
+
+  // large scrollbar fix for webkit browsers
+  .scrollbar-lg {
+    ::-webkit-scrollbar {
+      width: var(--elder-scrollbar-width-lg) !important;
+    }
+  }
 }