@elderbyte/ngx-starter 15.4.2 → 15.5.1

package/lib/common/public_api.d.ts

@@ -16,3 +16,4 @@ export * from './objects';
 export * from './sets';
 export * from './suggestion-provider';
 export * from './reactive-map';
+export * from './theme-sizes';

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

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

package/lib/components/public_api.d.ts

@@ -16,6 +16,7 @@ export * from './data-transfer/elder-data-transfer.module';
 export * from './overlays/elder-overlay.module';
 export * from './connectivity/public_api';
 export * from './infinitescroll/elder-infinite-scroll.module';
+export * from './scrollbar/elder-scrollbar.module';
 export * from './forms/public_api';
 export * from './http-support/public_api';
 export * from './dialogs/elder-dialog.module';

package/lib/components/scrollbar/elder-scrollbar.directive.d.ts

@@ -0,0 +1,34 @@
+import { ElderSize } from "../../common/theme-sizes";
+import { ElderClassHostBindingBase } from '../forms/directives/base/elder-class-hostbinding-base';
+import * as i0 from "@angular/core";
+export declare class ElderScrollbarDirective extends ElderClassHostBindingBase {
+    static readonly DEFAULT_WIDTH: ElderSize;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private _size;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor();
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get size(): ElderSize;
+    set size(value: ElderSize);
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private buildClass;
+    private static buildClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderScrollbarDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderScrollbarDirective, "[elderScrollbar]", never, { "size": "size"; }, {}, never, never, false, never>;
+}

package/lib/components/scrollbar/elder-scrollbar.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./elder-scrollbar.directive";
+export { ElderScrollbarDirective } from './elder-scrollbar.directive';
+export declare class ElderScrollbarModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderScrollbarModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderScrollbarModule, [typeof i1.ElderScrollbarDirective], never, [typeof i1.ElderScrollbarDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ElderScrollbarModule>;
+}

package/package.json

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

package/theming/_elder-scrollbar-theme.scss

@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@use './elder-config';
 
 @mixin starter-scrollbar-theme($theme) {
 
@@ -8,9 +9,30 @@
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
 
-  /* width */
-  ::-webkit-scrollbar {
-    width: 6px;
+  @include scrollbar-width(map-get(elder-config.common-sizes(), sm)); // default
+
+  .scrollbar-xs {
+    @include scrollbar-width(map-get(elder-config.common-sizes(), xs));
+  }
+
+  .scrollbar-sm {
+    @include scrollbar-width(map-get(elder-config.common-sizes(), sm));
+  }
+
+  .scrollbar-md {
+    @include scrollbar-width(map-get(elder-config.common-sizes(), md));
+  }
+
+  .scrollbar-lg {
+    @include scrollbar-width(map-get(elder-config.common-sizes(), lg));
+  }
+
+  .scrollbar-xl {
+    @include scrollbar-width(map-get(elder-config.common-sizes(), xl));
+  }
+
+  .scrollbar-xxl {
+    @include scrollbar-width(map-get(elder-config.common-sizes(), xxl));
   }
 
   /* Track */
@@ -31,3 +53,10 @@
 
 }
 
+@mixin scrollbar-width($width) {
+
+  ::-webkit-scrollbar {
+    width: $width;
+  }
+
+}