+
+
+ Top
+
+
+ Bottom
+
+
+ Start
+
+
+ End
+
+
+
+
+ Reached
+
+
+
+ Top
+
+
+ Bottom
+
+
+ Start
+
+
+ End
+
+
+
`,
styleUrls: ['./reached-notifier.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,6 +47,7 @@ import { MatChipsModule } from '@angular/material/chips';
})
export class ReachedNotifierComponent {
@Input() reached: ReachedEvent;
+ @Input() dropped: ReachedEvent;
}
export interface ReachedEvent {
diff --git a/projects/ngx-scrollbar-demo/src/app/prime-ng-table/prime-ng.component.html b/projects/ngx-scrollbar-demo/src/app/prime-ng-table/prime-ng.component.html
index 81c44326..a71660f5 100644
--- a/projects/ngx-scrollbar-demo/src/app/prime-ng-table/prime-ng.component.html
+++ b/projects/ngx-scrollbar-demo/src/app/prime-ng-table/prime-ng.component.html
@@ -26,7 +26,7 @@
asyncDetection="auto">
Dropped
+
+
-
-
- 
-
+
+
+ 
+
Custom overlay-scrollbars with native scrolling mechanism
+
+
+ 
+
diff --git a/projects/ngx-scrollbar-demo/src/app/shared/header/header.component.scss b/projects/ngx-scrollbar-demo/src/app/shared/header/header.component.scss
index 59a2b3ba..94fcef9b 100644
--- a/projects/ngx-scrollbar-demo/src/app/shared/header/header.component.scss
+++ b/projects/ngx-scrollbar-demo/src/app/shared/header/header.component.scss
@@ -42,15 +42,14 @@ app-logo {
margin: 2em 0;
display: flex;
flex-wrap: wrap;
- justify-content: center;
- align-items: center;
+ place-content: center;
+ gap: 4px;
a, iframe {
margin-top: 7px;
}
a {
- margin-left: 7px;
display: flex;
}
}
diff --git a/projects/ngx-scrollbar-demo/src/styles.scss b/projects/ngx-scrollbar-demo/src/styles.scss
index 7cfc6a37..acb2726c 100644
--- a/projects/ngx-scrollbar-demo/src/styles.scss
+++ b/projects/ngx-scrollbar-demo/src/styles.scss
@@ -49,8 +49,8 @@ $purple-passion-palette: (
)
);
-$app-primary: mat.define-palette($purple-passion-palette, 500);
-//$app-primary: mat.define-palette(mat.$light-green-palette, 500);
+//$app-primary: mat.define-palette($purple-passion-palette, 500);
+$app-primary: mat.define-palette(mat.$blue-palette, 500);
$app-accent: mat.define-palette(mat.$orange-palette, 500);
$app-warn: mat.define-palette(mat.$red-palette);
$app-success: mat.define-palette(mat.$light-green-palette);
@@ -90,7 +90,10 @@ body {
--color-orange-passion: #{mat.get-color-from-palette(mat.define-palette($app-accent, 500))};
- --color-track-orange-passion: #975857;
+ --color-track-orange-passion: #963634;
+
+ --mat-option-selected-state-label-text-color: var(--color-track-orange-passion);
+ --mat-option-selected-state-label-text-color: var(--color-track-orange-passion);
--color-app-background: #{mat.get-color-from-palette(mat.define-palette($app-primary, 400))};
--color-app-logo: var(--color-app-background);
@@ -205,6 +208,6 @@ a {
.mat-mdc-select-panel {
padding: 0 !important;
- --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--color-primary);
- background-image: linear-gradient( to bottom, var(--color-example3), #EFB436);
+ --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--color-track-orange-passion);
+ background-image: linear-gradient( to bottom, var(--color-example3), var(--color-accent));
}
diff --git a/projects/ngx-scrollbar/.eslintrc.json b/projects/ngx-scrollbar/.eslintrc.json
index d4266efc..dde2dd6a 100644
--- a/projects/ngx-scrollbar/.eslintrc.json
+++ b/projects/ngx-scrollbar/.eslintrc.json
@@ -34,6 +34,8 @@
"@angular-eslint/component-class-suffix": 0,
"@angular-eslint/directive-class-suffix": 0,
"@angular-eslint/no-input-rename": 0,
+ "@angular-eslint/no-output-rename": 0,
+ "@angular-eslint/no-output-native": 0,
"@angular-eslint/no-host-metadata-property": 0
}
},
diff --git a/projects/ngx-scrollbar/package.json b/projects/ngx-scrollbar/package.json
index 1fbe265d..5a893323 100644
--- a/projects/ngx-scrollbar/package.json
+++ b/projects/ngx-scrollbar/package.json
@@ -1,6 +1,6 @@
{
"name": "ngx-scrollbar",
- "version": "14.0.0-beta.6",
+ "version": "14.0.0-beta.7",
"license": "MIT",
"homepage": "https://ngx-scrollbar.netlify.com/",
"author": {
diff --git a/projects/ngx-scrollbar/reached-event/src/ng-scroll-dropped.ts b/projects/ngx-scrollbar/reached-event/src/ng-scroll-dropped.ts
new file mode 100644
index 00000000..29e03e5a
--- /dev/null
+++ b/projects/ngx-scrollbar/reached-event/src/ng-scroll-dropped.ts
@@ -0,0 +1,60 @@
+import {
+ Directive,
+ Input,
+ Output,
+ numberAttribute,
+ booleanAttribute,
+ input,
+ EventEmitter,
+ InputSignalWithTransform
+} from '@angular/core';
+import { ReachedDroppedBase } from './reached-dropped-base';
+
+@Directive({
+ selector: 'ng-scrollbar[droppedTop], ng-scrollbar[droppedBottom], ng-scrollbar[droppedStart], ng-scrollbar[droppedEnd]',
+ standalone: true,
+})
+export class NgScrollDropped extends ReachedDroppedBase {
+
+ /** Dropped offset value in px */
+ @Input({ alias: 'droppedOffset', transform: numberAttribute }) set offsetSetter(value: number) {
+ this.setCssVariable('--dropped-offset', value);
+ }
+
+ @Input({ alias: 'droppedTopOffset', transform: numberAttribute }) set offsetTopSetter(value: number) {
+ this.setCssVariable('--dropped-offset-top', value);
+ }
+
+ @Input({ alias: 'droppedBottomOffset', transform: numberAttribute }) set offsetBottomSetter(value: number) {
+ this.setCssVariable('--dropped-offset-bottom', value);
+ }
+
+ @Input({ alias: 'droppedStartOffset', transform: numberAttribute }) set offsetStartSetter(value: number) {
+ this.setCssVariable('--dropped-offset-start', value);
+ }
+
+ @Input({ alias: 'droppedEndOffset', transform: numberAttribute }) set offsetEndSetter(value: number) {
+ this.setCssVariable('--dropped-offset-end', value);
+ }
+
+ disabled: InputSignalWithTransformngx-scrollbar
@@ -27,13 +27,14 @@Custom overlay-scrollbars with native scrolling mechanism
-
-
- 
-
+
+
+ 
+
Custom overlay-scrollbars with native scrolling mechanism
+
+
+
+