feat(modal): completed modal tedi-ready development #223

.stylelintrc.json

@@ -6,7 +6,7 @@
   ],
   "rules": {
     "selector-class-pattern": [
-      "^(tedi-[a-z][a-z0-9]*(?:-[a-z0-9]+)*(?:__[a-z][a-z0-9]*(?:-[a-z0-9]+)*)*(?:--[a-z][a-z0-9]+(?:-[a-z0-9]+)*)?|ng-[a-z]+(?:-[a-z]+)*|float-ui-[a-z]+(?:-[a-z]+)*)$",
+      "^((tedi|cdk)-[a-z][a-z0-9]*(?:-[a-z0-9]+)*(?:__[a-z][a-z0-9]*(?:-[a-z0-9]+)*)*(?:--[a-z][a-z0-9]+(?:-[a-z0-9]+)*)?|ng-[a-z]+(?:-[a-z]+)*|float-ui-[a-z]+(?:-[a-z]+)*)$",
       {
         "message": "Class selector must start with 'tedi-' prefix and follow BEM naming (e.g., .tedi-button, .tedi-button__icon, .tedi-button--primary). Selector: \"%s\"",
         "resolveNestedSelectors": true

jest-jsdom-env.ts

@@ -0,0 +1,25 @@
+import JestEnvironment from "jest-preset-angular/environments/jest-jsdom-env";
+import type { JestEnvironmentConfig, EnvironmentContext } from "@jest/environment";
+
+/**
+ * Custom jest environment that suppresses jsdom "Could not parse CSS stylesheet"
+ * errors. These occur because jsdom <22 does not support CSS @layer rules used
+ * by Angular CDK overlay styles.
+ */
+export default class PatchedJsdomEnvironment extends JestEnvironment {
+  constructor(config: JestEnvironmentConfig, context: EnvironmentContext) {
+    const originalError = context.console.error.bind(context.console);
+    context.console.error = (...args: Parameters<typeof console.error>) => {
+      const first = args[0];
+      if (
+        first instanceof Error &&
+        first.message === "Could not parse CSS stylesheet"
+      ) {
+        return;
+      }
+      originalError(...args);
+    };
+
+    super(config, context);
+  }
+}

jest.config.ts

@@ -12,7 +12,7 @@ export default {
   testPathIgnorePatterns: ["/node_modules/", "/dist/"],
   moduleFileExtensions: ["ts", "html", "js", "json"],
   resolver: "jest-preset-angular/build/resolvers/ng-jest-resolver.js",
-  testEnvironment: "jsdom",
+  testEnvironment: "<rootDir>/jest-jsdom-env.ts",
   collectCoverage: true,
   collectCoverageFrom: ["./tedi/components/**/*.{js,ts,tsx}"],
   coveragePathIgnorePatterns: ["\\.stories\\.ts$"],

tedi/components/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from "./grid";
+export * from "./scroll-fade";
 export * from "./separator/separator.component";
 export * from "./timeline";

tedi/components/helpers/scroll-fade/index.ts

@@ -0,0 +1,2 @@
+export { ScrollFadeComponent } from "./scroll-fade.component";
+export type { ScrollFadeSize, ScrollFadePosition, ScrollFadeScrollbar } from "./scroll-fade.component";

tedi/components/helpers/scroll-fade/scroll-fade.component.html

@@ -0,0 +1,3 @@
+<div #inner [class]="innerClasses()" (scroll)="onScroll()">
+  <ng-content />
+</div>

tedi/components/helpers/scroll-fade/scroll-fade.component.scss

@@ -0,0 +1,56 @@
+$percentages: (0, 10, 20);
+
+.tedi-scroll-fade {
+  --_tedi-scroll-fade-top: 0%;
+  --_tedi-scroll-fade-bottom: 0%;
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-height: inherit;
+  overflow: hidden;
+
+  &__inner {
+    flex: 1;
+    min-height: 0;
+    max-height: inherit;
+    overflow: auto;
+    mask-image: linear-gradient(
+      to bottom,
+      transparent 0%,
+      black var(--_tedi-scroll-fade-top),
+      black calc(100% - var(--_tedi-scroll-fade-bottom)),
+      transparent 100%
+    );
+
+    &--custom-scroll {
+      &::-webkit-scrollbar {
+        width: 6px;
+        background-color: var(--general-surface-primary);
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: var(--general-border-primary);
+        border-radius: 100px;
+
+        &:hover {
+          background-color: var(--general-border-secondary);
+        }
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: var(--general-surface-primary);
+      }
+    }
+  }
+
+  @each $percentage in $percentages {
+    &--top-#{$percentage} {
+      --_tedi-scroll-fade-top: calc(#{$percentage} * 1%);
+    }
+
+    &--bottom-#{$percentage} {
+      --_tedi-scroll-fade-bottom: calc(#{$percentage} * 1%);
+    }
+  }
+}

tedi/components/helpers/scroll-fade/scroll-fade.component.spec.ts

@@ -0,0 +1,185 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { Component } from "@angular/core";
+import { ScrollFadeComponent } from "./scroll-fade.component";
+
+@Component({
+  standalone: true,
+  imports: [ScrollFadeComponent],
+  template: `
+    <tedi-scroll-fade
+      [fadeSize]="fadeSize"
+      [fadePosition]="fadePosition"
+      [scrollBar]="scrollBar"
+      (scrolledToTop)="onScrolledToTop()"
+      (scrolledToBottom)="onScrolledToBottom()"
+    >
+      <div [style.height.px]="contentHeight">Content</div>
+    </tedi-scroll-fade>
+  `,
+})
+class TestHostComponent {
+  fadeSize: 0 | 10 | 20 = 20;
+  fadePosition: "top" | "bottom" | "both" = "both";
+  scrollBar: "default" | "custom" = "custom";
+  contentHeight = 100;
+  onScrolledToTop = jest.fn();
+  onScrolledToBottom = jest.fn();
+}
+
+describe("ScrollFadeComponent", () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let host: TestHostComponent;
+  let scrollFadeEl: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+    scrollFadeEl = fixture.nativeElement.querySelector("tedi-scroll-fade");
+  });
+
+  it("should render with default classes", () => {
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade")).toBe(true);
+  });
+
+  it("should render children content", () => {
+    expect(scrollFadeEl.textContent).toContain("Content");
+  });
+
+  it("should have inner wrapper element", () => {
+    const inner = scrollFadeEl.querySelector(".tedi-scroll-fade__inner");
+    expect(inner).toBeTruthy();
+  });
+
+  it("should apply custom scrollbar class by default", () => {
+    const inner = scrollFadeEl.querySelector(".tedi-scroll-fade__inner");
+    expect(inner?.classList.contains("tedi-scroll-fade__inner--custom-scroll")).toBe(true);
+  });
+
+  it("should not apply custom scrollbar class when scrollBar is default", () => {
+    host.scrollBar = "default";
+    fixture.detectChanges();
+    const inner = scrollFadeEl.querySelector(".tedi-scroll-fade__inner");
+    expect(inner?.classList.contains("tedi-scroll-fade__inner--custom-scroll")).toBe(false);
+  });
+
+  it("should not show fade when content does not overflow", () => {
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-20")).toBe(false);
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-20")).toBe(false);
+  });
+
+  it("should respect fadePosition top — never adds bottom fade class", () => {
+    host.fadePosition = "top";
+    fixture.detectChanges();
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-20")).toBe(false);
+  });
+
+  it("should respect fadePosition bottom — never adds top fade class", () => {
+    host.fadePosition = "bottom";
+    fixture.detectChanges();
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-20")).toBe(false);
+  });
+
+  it("should use fadeSize 10 in class names", () => {
+    host.fadeSize = 10;
+    fixture.detectChanges();
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-10")).toBe(false);
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-10")).toBe(false);
+  });
+
+  it("should use fadeSize 0 in class names", () => {
+    host.fadeSize = 0;
+    fixture.detectChanges();
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-0")).toBe(false);
+    expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-0")).toBe(false);
+  });
+
+  describe("with overflowing content", () => {
+    let innerEl: HTMLElement;
+
+    beforeEach(() => {
+      innerEl = scrollFadeEl.querySelector(".tedi-scroll-fade__inner")!;
+
+      Object.defineProperty(innerEl, "scrollHeight", { value: 500, configurable: true });
+      Object.defineProperty(innerEl, "clientHeight", { value: 200, configurable: true });
+      Object.defineProperty(innerEl, "scrollTop", { value: 0, writable: true, configurable: true });
+    });
+
+    it("should show bottom fade when content overflows and scrolled to top", () => {
+      innerEl.dispatchEvent(new Event("scroll"));
+      fixture.detectChanges();
+
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-20")).toBe(false);
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-20")).toBe(true);
+    });
+
+    it("should show both fades when scrolled to middle", () => {
+      Object.defineProperty(innerEl, "scrollTop", { value: 100, configurable: true });
+      innerEl.dispatchEvent(new Event("scroll"));
+      fixture.detectChanges();
+
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-20")).toBe(true);
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-20")).toBe(true);
+    });
+
+    it("should show only top fade when scrolled to bottom", () => {
+      Object.defineProperty(innerEl, "scrollTop", { value: 300, configurable: true });
+      innerEl.dispatchEvent(new Event("scroll"));
+      fixture.detectChanges();
+
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-20")).toBe(true);
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-20")).toBe(false);
+    });
+
+    it("should emit scrolledToTop when at top", () => {
+      innerEl.dispatchEvent(new Event("scroll"));
+      expect(host.onScrolledToTop).toHaveBeenCalled();
+    });
+
+    it("should emit scrolledToBottom when at bottom", () => {
+      Object.defineProperty(innerEl, "scrollTop", { value: 300, configurable: true });
+      innerEl.dispatchEvent(new Event("scroll"));
+      expect(host.onScrolledToBottom).toHaveBeenCalled();
+    });
+
+    it("should not emit scrolledToTop when in middle", () => {
+      host.onScrolledToTop.mockClear();
+      Object.defineProperty(innerEl, "scrollTop", { value: 100, configurable: true });
+      innerEl.dispatchEvent(new Event("scroll"));
+      expect(host.onScrolledToTop).not.toHaveBeenCalled();
+    });
+
+    it("should not emit scrolledToBottom when in middle", () => {
+      host.onScrolledToBottom.mockClear();
+      Object.defineProperty(innerEl, "scrollTop", { value: 100, configurable: true });
+      innerEl.dispatchEvent(new Event("scroll"));
+      expect(host.onScrolledToBottom).not.toHaveBeenCalled();
+    });
+
+    it("should only show top fade when fadePosition is top and scrolled to middle", () => {
+      host.fadePosition = "top";
+      fixture.detectChanges();
+      Object.defineProperty(innerEl, "scrollTop", { value: 100, configurable: true });
+      innerEl.dispatchEvent(new Event("scroll"));
+      fixture.detectChanges();
+
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-20")).toBe(true);
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-20")).toBe(false);
+    });
+
+    it("should only show bottom fade when fadePosition is bottom and scrolled to middle", () => {
+      host.fadePosition = "bottom";
+      fixture.detectChanges();
+      Object.defineProperty(innerEl, "scrollTop", { value: 100, configurable: true });
+      innerEl.dispatchEvent(new Event("scroll"));
+      fixture.detectChanges();
+
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--top-20")).toBe(false);
+      expect(scrollFadeEl.classList.contains("tedi-scroll-fade--bottom-20")).toBe(true);
+    });
+  });
+});

tedi/components/helpers/scroll-fade/scroll-fade.component.ts

@@ -0,0 +1,100 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  ViewEncapsulation,
+  computed,
+  input,
+  output,
+  signal,
+  viewChild,
+} from "@angular/core";
+
+export type ScrollFadeSize = 0 | 10 | 20;
+export type ScrollFadePosition = "top" | "bottom" | "both";
+export type ScrollFadeScrollbar = "default" | "custom";
+
+@Component({
+  standalone: true,
+  selector: "tedi-scroll-fade",
+  templateUrl: "./scroll-fade.component.html",
+  styleUrl: "./scroll-fade.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    "[class]": "classes()",
+  },
+})
+export class ScrollFadeComponent implements AfterViewInit {
+  /** Size of the fade gradient in percentages. */
+  readonly fadeSize = input<ScrollFadeSize>(20);
+
+  /** Which edges show the fade. */
+  readonly fadePosition = input<ScrollFadePosition>("both");
+
+  /** Scrollbar style. */
+  readonly scrollBar = input<ScrollFadeScrollbar>("custom");
+
+  /** Emitted when scrolled to the top. */
+  readonly scrolledToTop = output<void>();
+
+  /** Emitted when scrolled to the bottom. */
+  readonly scrolledToBottom = output<void>();
+
+  private readonly innerRef = viewChild.required<ElementRef<HTMLDivElement>>("inner");
+
+  private readonly fade = signal({ top: false, bottom: false });
+
+  readonly classes = computed(() => {
+    const classList = ["tedi-scroll-fade"];
+    const { top, bottom } = this.fade();
+    const pos = this.fadePosition();
+    const size = this.fadeSize();
+
+    if (top && (pos === "both" || pos === "top")) {
+      classList.push(`tedi-scroll-fade--top-${size}`);
+    }
+
+    if (bottom && (pos === "both" || pos === "bottom")) {
+      classList.push(`tedi-scroll-fade--bottom-${size}`);
+    }
+
+    return classList.join(" ");
+  });
+
+  readonly innerClasses = computed(() => {
+    const classList = ["tedi-scroll-fade__inner"];
+
+    if (this.scrollBar() === "custom") {
+      classList.push("tedi-scroll-fade__inner--custom-scroll");
+    }
+
+    return classList.join(" ");
+  });
+
+  onScroll(): void {
+    const el = this.innerRef().nativeElement;
+    this.updateFade(el.scrollTop, el.scrollHeight, el.clientHeight);
+  }
+
+  ngAfterViewInit(): void {
+    const el = this.innerRef().nativeElement;
+    this.updateFade(el.scrollTop, el.scrollHeight, el.clientHeight);
+  }
+
+  private updateFade(scrollTop: number, scrollHeight: number, clientHeight: number): void {
+    const atTop = scrollTop === 0;
+    const atBottom = Math.abs(scrollHeight - scrollTop - clientHeight) <= 1;
+
+    if (atTop) {
+      this.scrolledToTop.emit();
+    }
+
+    if (atBottom) {
+      this.scrolledToBottom.emit();
+    }
+
+    this.fade.set({ top: !atTop, bottom: !atBottom });
+  }
+}