feat(utilities): shadow-on-scroll directive

Author: xidedix

projects/coreui-angular/src/lib/utilities/public_api.ts

@@ -1,6 +1,7 @@
+export { AlignDirective } from './align.directive';
 export { BgColorDirective } from './bg-color.directive';
 export { BorderDirective } from './border.directive';
-export { TextColorDirective } from './text-color.directive';
 export { RoundedDirective } from './rounded.directive';
-export { AlignDirective } from './align.directive';
+export { ShadowOnScrollDirective } from './shadow-on-scroll.directive';
+export { TextColorDirective } from './text-color.directive';
 export { UtilitiesModule } from './utilities.module';

projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.spec.ts

@@ -0,0 +1,22 @@
+import { ElementRef } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { ShadowOnScrollDirective } from './shadow-on-scroll.directive';
+
+class MockElementRef extends ElementRef {}
+
+describe('ShadowOnScrollDirective', () => {
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ShadowOnScrollDirective],
+      providers: [{ provide: ElementRef, useClass: MockElementRef }]
+    });
+  });
+
+  it('should create an instance', () => {
+    TestBed.runInInjectionContext(() => {
+      const directive = new ShadowOnScrollDirective();
+      expect(directive).toBeTruthy();
+    });
+  });
+});

projects/coreui-angular/src/lib/utilities/shadow-on-scroll.directive.ts

@@ -0,0 +1,46 @@
+import { DOCUMENT } from '@angular/common';
+import { DestroyRef, Directive, effect, ElementRef, inject, Input, signal, WritableSignal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromEvent, Subscription } from 'rxjs';
+
+@Directive({
+  selector: '[cShadowOnScroll]',
+  standalone: true
+})
+export class ShadowOnScrollDirective {
+
+  readonly #destroyRef: DestroyRef = inject(DestroyRef);
+  readonly #document: Document = inject(DOCUMENT);
+  readonly #elementRef: ElementRef = inject(ElementRef);
+  readonly #scrolled: WritableSignal<boolean> = signal(false);
+
+  readonly #scrollEffect = effect(() => {
+    this.#elementRef.nativeElement.classList.toggle(this.#shadowClass, this.#scrolled());
+  });
+
+  #observable!: Subscription;
+  #shadowClass = 'shadow-sm';
+
+  constructor() {
+    this.#destroyRef.onDestroy(() => {
+      this.#scrollEffect?.destroy();
+    });
+  }
+
+  @Input()
+  set cShadowOnScroll(value: 'sm' | 'lg' | 'none' | boolean) {
+    this.#scrolled.set(false);
+    if (value) {
+      this.#shadowClass = value === true ? 'shadow' : `shadow-${value}`;
+      this.#observable = fromEvent(this.#document, 'scroll')
+        .pipe(
+          takeUntilDestroyed(this.#destroyRef)
+        )
+        .subscribe(scrolled => {
+          this.#scrolled.set(this.#document.documentElement.scrollTop > 0);
+        });
+    } else {
+      this.#observable?.unsubscribe();
+    }
+  };
+}

projects/coreui-angular/src/lib/utilities/utilities.module.ts

@@ -1,24 +1,17 @@
 import { NgModule } from '@angular/core';
-import { BgColorDirective } from './bg-color.directive';
-import { BorderDirective } from './border.directive';
-import { RoundedDirective } from './rounded.directive';
-import { TextColorDirective } from './text-color.directive';
-import { AlignDirective } from './align.directive';
+
+import {
+  AlignDirective,
+  BgColorDirective,
+  BorderDirective,
+  RoundedDirective,
+  ShadowOnScrollDirective,
+  TextColorDirective
+} from './public_api';
+
+const UTILITY_DIRECTIVES = [AlignDirective, BgColorDirective, BorderDirective, RoundedDirective, ShadowOnScrollDirective, TextColorDirective];
 
 @NgModule({
-  imports: [
-    BgColorDirective,
-    BorderDirective,
-    RoundedDirective,
-    TextColorDirective,
-    AlignDirective
-  ],
-  exports: [
-    BgColorDirective,
-    BorderDirective,
-    RoundedDirective,
-    TextColorDirective,
-    AlignDirective
-  ]
+  imports: [...UTILITY_DIRECTIVES], exports: [...UTILITY_DIRECTIVES]
 })
 export class UtilitiesModule {}