Update

MurhafSousli · Mar 19, 2024 · 830c343 · 830c343
1 parent 9c69197
commit 830c343
Show file tree

Hide file tree

Showing 42 changed files with 571 additions and 202 deletions.
diff --git a/.nx/cache/nx_files.nxt b/.nx/cache/nx_files.nxt
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## 14.0.0-beta.7
+
+- regret: Use `offsetWidth` and `offsetHeight` again instead of `getBoundingClientRect` due to incorrect value when scrollbar is used in an overlay such as `matSelect`.
+- fix: `(reachedEnd)` does not work without subscribing to `(reachedBottom)`.
+
+### Breaking changes:
+
+- Remove `NgScrollbarReachModule`.
+- Rename the directive `MatSelectViewport` to `NgScrollbarMatSelectViewport`.
+
 ## 14.0.0-beta.6
 
 - feat: Add scrollbar buttons using `buttons` options, closes [#465](https://github.com/MurhafSousli/ngx-scrollbar/issues/465).
@@ -8,7 +18,7 @@
 - refactor: Use `swithcMap` instead of `expand` for track long ongoing pointer down event.
 - refactor: Only use `getRtlScrollAxisType` once on initialization in `SmoothScrollManager`.
 - refactor: `matSelectViewport` use instant scroll function to scroll to the selected item in the list.
-- refactor: Use `getBoundingClientRect` in all directives instead of `clientWidth` and `clientHeight` for high precision calculation.
+- refactor: Use `getBoundingClientRect` in all directives instead of `offsetWidth` and `offsetHeight` for high precision calculation.
 
 ### Breaking Changes
 

diff --git a/angular.json b/angular.json
@@ -58,8 +58,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "12kb",
-                  "maximumError": "12kb"
+                  "maximumWarning": "13kb",
+                  "maximumError": "13kb"
                 }
               ],
               "outputHashing": "all"

diff --git a/projects/ngx-scrollbar-demo/src/app/app.component.html b/projects/ngx-scrollbar-demo/src/app/app.component.html
@@ -21,15 +21,10 @@
           Material Integration
         </a>
         <a mat-list-item
-           routerLink="/integration"
+           routerLink="/other-integrations"
            routerLinkActive="active-link">
-          Integration
+          Other Integrations
         </a>
-        <!--        <a mat-list-item-->
-        <!--           routerLink="/lab"-->
-        <!--           routerLinkActive="active-link">-->
-        <!--          Lab-->
-        <!--        </a>-->
       </mat-nav-list>
     </mat-sidenav>
 

diff --git a/projects/ngx-scrollbar-demo/src/app/app.component.scss b/projects/ngx-scrollbar-demo/src/app/app.component.scss
@@ -5,12 +5,22 @@ ng-scrollbar {
   --scrollbar-track-color: rgb(0 0 0 / 30%);
   --scrollbar-border-radius: 0;
 
+  --scrollbar-button-color: var(--scrollbar-thumb-color);
+  --scrollbar-button-hover-color: var(--scrollbar-button-color);
+  --scrollbar-button-active-color: var(--scrollbar-button-hover-color);
+
+  // Scrollbar button arrow fill
+  --scrollbar-button-fill: white;
+  --scrollbar-button-hover-fill: var(--scrollbar-button-fill);
+  --scrollbar-button-active-fill: var(--scrollbar-button-hover-fill);
+
+
   color: white;
   height: calc(100% - 60px);
 
   ::ng-deep {
     .app-scrollbar-track {
-      box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
+      //box-shadow: inset 0 0 0 1px rgb(0 0 0 / 10%);
     }
 
     .app-scrollbar-thumb {

diff --git a/projects/ngx-scrollbar-demo/src/app/app.routes.ts b/projects/ngx-scrollbar-demo/src/app/app.routes.ts
@@ -11,11 +11,7 @@ export const routes: Routes = [
     loadComponent: () => import('./material-page/material-page.component').then(c => c.MaterialPageComponent),
   },
   {
-    path: 'integration',
+    path: 'other-integrations',
     loadComponent: () => import('./integration-page/integration-page.component').then(c => c.IntegrationPageComponent),
-  },
-  // {
-  //   path: 'lab',
-  //   loadComponent: () => import('./lab/lab.component').then(c => c.LabComponent),
-  // }
+  }
 ];
diff --git a/...ngx-scrollbar-demo/src/app/example-infinite-scroll/example-infinite-scroll.component.scss b/...ngx-scrollbar-demo/src/app/example-infinite-scroll/example-infinite-scroll.component.scss
@@ -15,7 +15,9 @@
   ng-scrollbar {
     --scrollbar-track-color: rgb(0 0 0 / 5%);
     --scrollbar-thumb-color: var(--color-primary);
-    --scrollbar-thickness: 12;
+    --scrollbar-thickness: 10;
+    --scrollbar-offset: 6;
+    --scrollbar-border-radius: 7px;
 
     border-radius: 3px;
     border: 2px solid rgb(0 0 0 / 5%);

diff --git a/projects/ngx-scrollbar-demo/src/app/example-mat-select/example-mat-select.component.scss b/projects/ngx-scrollbar-demo/src/app/example-mat-select/example-mat-select.component.scss
@@ -1,10 +1,13 @@
 ng-scrollbar {
-  --scrollbar-thumb-color: var(--color-primary);
+  --scrollbar-thumb-color: var(--color-track-orange-passion);
   --scrollbar-thickness: 8;
   --scrollbar-track-color: rgb(0 0 0 / 20%);
+  --scrollbar-offset: 6;
+  --scrollbar-border-radius: 7px;
 }
 
 .mat-mdc-select {
+  --mat-select-enabled-arrow-color: rgb(255 255 255 / 54%);
   margin-bottom: 30px !important;
   color: white;
 }

diff --git a/projects/ngx-scrollbar-demo/src/app/example-mat-select/example-mat-select.component.ts b/projects/ngx-scrollbar-demo/src/app/example-mat-select/example-mat-select.component.ts
@@ -5,7 +5,7 @@ import { MatCardModule } from '@angular/material/card';
 import { MatSelectModule } from '@angular/material/select';
 import { Chance } from 'chance';
 import { NgScrollbar } from 'ngx-scrollbar';
-import { MatSelectViewport } from 'ngx-scrollbar/utils';
+import { NgScrollbarMatSelectViewport } from 'ngx-scrollbar/utils';
 
 @Component({
   selector: 'app-example-mat-select',
@@ -16,7 +16,7 @@ import { MatSelectViewport } from 'ngx-scrollbar/utils';
     NgForOf,
     NgScrollbar,
     MatCardModule,
-    MatSelectViewport
+    NgScrollbarMatSelectViewport
   ],
   templateUrl: './example-mat-select.component.html',
   styleUrl: './example-mat-select.component.scss',

diff --git a/...r-demo/src/app/example-nested-virtual-scroll/example-nested-virtual-scroll.component.scss b/...r-demo/src/app/example-nested-virtual-scroll/example-nested-virtual-scroll.component.scss
@@ -12,14 +12,17 @@
 .outer-ng-scrollbar {
   color: black;
   border: 2px solid rgb(0 0 0 / 5%);
-  --scrollbar-track-color: var(--color-track-orange-passion);
+  //--scrollbar-track-color: var(--color-track-orange-passion);
+  --scrollbar-track-color: rgb(255 255 255 / 15%);
   --scrollbar-thumb-color: var(--color-orange-passion);
-  --scrollbar-thickness: 12;
+  --scrollbar-offset: 3;
+  --scrollbar-thickness: 10;
   --scrollbar-border-radius: 10px;
 }
 
 .cdk-virtual-scroll-orientation-vertical ::ng-deep > .ng-scroll-content {
-  background: #643761;
+  //background: #643761;
+  background: var(--primary-color);
 }
 
 .cards {
@@ -73,6 +76,7 @@
     --scrollbar-track-color: #d3d3d3;
     --scrollbar-offset: 7;
     --scrollbar-thickness: 6;
+    --scrollbar-border-radius: 7px;
     --scrollbar-thumb-color: var(--color-accent);
   }
 }

diff --git a/...cts/ngx-scrollbar-demo/src/app/example-ngx-datatable/example-ngx-datatable.component.scss b/...cts/ngx-scrollbar-demo/src/app/example-ngx-datatable/example-ngx-datatable.component.scss
@@ -1,7 +1,7 @@
 ng-scrollbar {
   --scrollbar-thickness: 6;
   --scrollbar-hover-thickness: 10;
-  --scrollbar-offset: 0;
+  --scrollbar-offset: 1;
   --scrollbar-border-radius: 0;
   --scrollbar-thumb-color: var(--color-primary);
   --scrollbar-track-color: rgb(0 0 0 / 20%);

diff --git a/projects/ngx-scrollbar-demo/src/app/example2/example2.component.html b/projects/ngx-scrollbar-demo/src/app/example2/example2.component.html
@@ -7,7 +7,7 @@
                       externalViewport
                       appearance="compact"
                       (afterInit)="onScrollbarUpdate(scrollbarRef)"
-                      (afterUpdate)="onScrollbarUpdate(scrollbarRef)">
+                      (afterUpdate)="onScrollbarUpdate(scrollbarRef, 200)">
           <div scrollViewport>
             <ul>
               <li></li>
@@ -22,6 +22,6 @@
     </div>
   </mat-card-content>
   <mat-card-actions align="end">
-    <button mat-raised-button color="accent" (click)="addItem()">Add Task</button>
+    <button mat-flat-button color="accent" (click)="addItem()">Add Task</button>
   </mat-card-actions>
 </mat-card>
diff --git a/projects/ngx-scrollbar-demo/src/app/example2/example2.component.scss b/projects/ngx-scrollbar-demo/src/app/example2/example2.component.scss
@@ -4,6 +4,7 @@ ng-scrollbar {
   --scrollbar-track-color: rgb(0 0 0 / 10%);
   --scrollbar-thumb-color: rgb(0 0 0 / 20%);
   --scrollbar-thumb-hover-color: rgb(0 0 0 / 30%);
+  --scrollbar-border-radius: 7px;
   width: 100%;
   border: 1px solid rgb(0 0 0 / 25%);
   height: 200px;
@@ -58,8 +59,8 @@ ng-scrollbar {
   }
 
   header {
-    font-size: 1.1em;
-    padding: .2em;
+    font-size: 16px;
+    padding: 8px;
     letter-spacing: 1px;
     background-image: linear-gradient(to bottom, #3d434a, #242931);
     color: white;

diff --git a/projects/ngx-scrollbar-demo/src/app/example2/example2.component.ts b/projects/ngx-scrollbar-demo/src/app/example2/example2.component.ts
@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
 import { NgScrollbarExt, NgScrollbarModule } from 'ngx-scrollbar';
-import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
+import { NgScrollReached } from 'ngx-scrollbar/reached-event';
 
 @Component({
   selector: 'app-example2',
@@ -14,7 +14,7 @@ import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
     '[class.example-component]': 'true'
   },
   standalone: true,
-  imports: [CommonModule, NgScrollbarModule, NgScrollbarReachedModule, MatCardModule, MatButtonModule]
+  imports: [CommonModule, NgScrollbarModule, NgScrollReached, MatCardModule, MatButtonModule]
 })
 export class Example2Component {
 
@@ -102,7 +102,7 @@ export class Example2Component {
     ];
   }
 
-  onScrollbarUpdate(scrollbarRef: NgScrollbarExt): void {
-    scrollbarRef.scrollTo({ bottom: 0, duration: 200 });
+  onScrollbarUpdate(scrollbarRef: NgScrollbarExt, duration: number = 0): void {
+    scrollbarRef.scrollTo({ bottom: 0, duration });
   }
 }
diff --git a/projects/ngx-scrollbar-demo/src/app/example3/example3.component.scss b/projects/ngx-scrollbar-demo/src/app/example3/example3.component.scss
@@ -7,6 +7,7 @@
     --scrollbar-thickness: 12;
     --scrollbar-track-color: rgb(0 0 0 / 50%);
     --scrollbar-border-radius: 6px;
+    --scrollbar-offset: 4;
   }
 
   .mat-mdc-card-content {

diff --git a/projects/ngx-scrollbar-demo/src/app/lab/css-variables-form/css-variables-form.component.ts b/projects/ngx-scrollbar-demo/src/app/lab/css-variables-form/css-variables-form.component.ts
@@ -19,9 +19,9 @@ export class CssVariablesFormComponent implements OnInit {
     this.form = new FormGroup({
       thickness: new FormControl('12'),
       hoverThickness: new FormControl('15'),
-      trackColor: new FormControl('#975857'),
+      trackColor: new FormControl('#77b4e8'),
       thumbColor: new FormControl('var(--color-scrollbar-example-x)'),
-      thumbHoverColor: new FormControl('#ff6060'), //var(--color-scrollbar-example-x)'),
+      thumbHoverColor: new FormControl('var(--color-scrollbar-example-x)'),
       trackOffset: new FormControl('0'),
       borderRadius: new FormControl('0px'),
       overscrollBehavior: new FormControl('initial'),

diff --git a/projects/ngx-scrollbar-demo/src/app/lab/lab.component.html b/projects/ngx-scrollbar-demo/src/app/lab/lab.component.html
@@ -97,6 +97,15 @@
               </mat-button-toggle-group>
             </div>
 
+            <div class="lab-control">
+              <div class="lab-control-label">Disable dropped events</div>
+              <mat-button-toggle-group aria-label="Disable dropped events"
+                                       [(value)]="disableDropped">
+                <mat-button-toggle [value]="true">True</mat-button-toggle>
+                <mat-button-toggle [value]="false">False</mat-button-toggle>
+              </mat-button-toggle-group>
+            </div>
+
             <div class="lab-control">
               <div class="lab-control-label">Sensor throttle time</div>
               <input type="number" [(ngModel)]="sensorThrottleTime">
@@ -153,7 +162,12 @@
                           (reachedStart)="onReached('start')"
                           (reachedEnd)="onReached('end')"
                           (reachedBottom)="onReached('bottom')"
-                          [disableReached]="disableReached">
+                          [disableReached]="disableReached"
+                          (droppedTop)="onDropped('top')"
+                          (droppedStart)="onDropped('start')"
+                          (droppedEnd)="onDropped('end')"
+                          (droppedBottom)="onDropped('bottom')"
+                          [disableDropped]="disableDropped">
               <div class="inner"
                    [style.width.px]="(component.nativeElement.offsetWidth - (appearance === 'native' ? +variables.thickness + (+variables.trackOffset * 2) : 0)) * slider.contentWidth"
                    [innerHTML]="content"></div>
@@ -171,7 +185,7 @@
         </div>
 
         <div>
-          <app-reached-notifier [reached]="reached()"/>
+          <app-reached-notifier [reached]="reached()" [dropped]="dropped()"/>
         </div>
 
         <mat-accordion>

diff --git a/projects/ngx-scrollbar-demo/src/app/lab/lab.component.ts b/projects/ngx-scrollbar-demo/src/app/lab/lab.component.ts
@@ -12,7 +12,7 @@ import {
   ScrollbarOrientation,
   ScrollbarVisibility
 } from 'ngx-scrollbar';
-import { NgScrollbarReached } from 'ngx-scrollbar/reached-event';
+import { NgScrollDropped, NgScrollReached } from 'ngx-scrollbar/reached-event';
 import { NzResizableModule, NzResizeDirection, NzResizeEvent } from 'ng-zorro-antd/resizable';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
@@ -31,7 +31,8 @@ import { SmoothScrollFormComponent, SmoothScrollOptionsForm } from './smooth-scr
     FormsModule,
     ReactiveFormsModule,
     NgScrollbar,
-    NgScrollbarReached,
+    NgScrollReached,
+    NgScrollDropped,
     MatCardModule,
     MatButtonToggleModule,
     MatExpansionModule,
@@ -57,6 +58,7 @@ export class LabComponent {
   interactionDisabled: boolean = false;
   disableSensor: boolean = false;
   disableReached: boolean = false;
+  disableDropped: boolean = false;
   sensorThrottleTime: number = 0;
   trackScrollDuration: number = 50;
 
@@ -87,6 +89,8 @@ export class LabComponent {
 
   reached: WritableSignal<ReachedEvent> = signal({});
 
+  dropped: WritableSignal<ReachedEvent> = signal({});
+
   scrollReached: WritableSignal<any> = signal(false);
 
   get content(): string {
@@ -122,6 +126,13 @@ export class LabComponent {
     }, 600);
   }
 
+  onDropped(eventName: string): void {
+    this.dropped.set({ [eventName]: true });
+    setTimeout(() => {
+      this.dropped.set({ [eventName]: false })
+    }, 600);
+  }
+
   onScrollTo(event: SmoothScrollOptionsForm): void {
     // Prepare scrollTo options from event
     const options: Partial<SmoothScrollOptionsForm> = {

diff --git a/projects/ngx-scrollbar-demo/src/app/lab/reached-notifier/reached-notifier.component.scss b/projects/ngx-scrollbar-demo/src/app/lab/reached-notifier/reached-notifier.component.scss
@@ -10,6 +10,13 @@
   }
 }
 
+.notifier-wrapper {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  margin-bottom: 0.5em;
+}
+
 .reached-event-title {
   margin-bottom: 5px;
 }
@@ -27,7 +34,19 @@
   }
 
   &.changed {
+    transition: unset !important;
+  }
+}
+
+.reached {
+  .mat-mdc-chip.changed {
     background-color: var(--color-highlight) !important;
     transition: unset !important;
   }
 }
+
+.dropped {
+  .mat-mdc-chip.changed {
+    background-color: #85ff3f !important;
+  }
+}