@acorex/cdk 22.3.16 → 22.3.18

package/auto-follow-scroll/README.md

@@ -0,0 +1,9 @@
+# @acorex/cdk/auto-follow-scroll
+
+Chat-style auto-follow scroll for message lists (Telegram / Discord behavior).
+
+```typescript
+import { AutoFollowScrollDirective } from '@acorex/cdk/auto-follow-scroll';
+```
+
+Apply the directive to the scroll container (`overflow: auto`). Call `messageAdded()` on the directive instance after each new message is rendered.

package/fesm2022/acorex-cdk-auto-follow-scroll.mjs

@@ -0,0 +1,187 @@
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DestroyRef, PLATFORM_ID, NgZone, input, output, signal, afterNextRender, Directive } from '@angular/core';
+
+const PROGRAMMATIC_SCROLL_FALLBACK_MS = 400;
+/**
+ * Manages chat-style auto-follow scroll: sticks to the bottom while the user is
+ * "following", and preserves scroll position with unread counts when they scroll up.
+ *
+ * Apply to the element that has `overflow: auto` (the scroll container).
+ *
+ * @example
+ * ```html
+ * <div
+ *   autoFollowScroll
+ *   [threshold]="100"
+ *   [smooth]="true"
+ *   (followStateChange)="onFollowState($event)"
+ *   (newMessages)="onNewMessages($event)"
+ * >
+ *   @for (message of messages; track message.id) {
+ *     <div>{{ message.text }}</div>
+ *   }
+ * </div>
+ * ```
+ */
+class AXAutoFollowScrollDirective {
+    constructor() {
+        this.host = inject((ElementRef));
+        this.destroyRef = inject(DestroyRef);
+        this.platformId = inject(PLATFORM_ID);
+        this.ngZone = inject(NgZone);
+        /** Distance from the bottom (px) at or below which the user is considered "following". */
+        this.threshold = input(100, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "threshold" }] : /* istanbul ignore next */ []));
+        /** Whether programmatic scroll uses smooth behavior. */
+        this.smooth = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "smooth" }] : /* istanbul ignore next */ []));
+        this.followStateChange = output();
+        this.newMessages = output();
+        this.state = signal('following', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+        this.unreadCount = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unreadCount" }] : /* istanbul ignore next */ []));
+        this.isProgrammaticScroll = false;
+        this.scrollRafId = null;
+        this.programmaticScrollTimer = null;
+        this.scrollListener = null;
+        afterNextRender(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            this.attachScrollListener();
+        });
+        this.destroyRef.onDestroy(() => this.teardown());
+    }
+    /**
+     * Call after a new message is rendered in the list.
+     */
+    messageAdded() {
+        requestAnimationFrame(() => {
+            if (this.state() === 'following') {
+                this.scrollToBottom();
+                return;
+            }
+            this.unreadCount.update((count) => count + 1);
+            this.newMessages.emit({ count: this.unreadCount() });
+        });
+    }
+    /** Scrolls to the bottom and resumes following. */
+    scrollToBottom() {
+        this.unreadCount.set(0);
+        this.setState('following');
+        this.runProgrammaticScroll(this.smooth());
+    }
+    /** Resets unread count and following state without scrolling. */
+    reset() {
+        this.clearProgrammaticScrollGuard();
+        this.unreadCount.set(0);
+        this.setState('following');
+    }
+    attachScrollListener() {
+        const element = this.host.nativeElement;
+        this.scrollListener = () => this.scheduleScrollHandling();
+        element.addEventListener('scroll', this.scrollListener, { passive: true });
+    }
+    scheduleScrollHandling() {
+        if (this.scrollRafId !== null) {
+            return;
+        }
+        this.scrollRafId = requestAnimationFrame(() => {
+            this.scrollRafId = null;
+            this.handleUserScroll();
+        });
+    }
+    handleUserScroll() {
+        if (this.isProgrammaticScroll) {
+            return;
+        }
+        const atBottom = this.isNearBottom();
+        if (atBottom) {
+            if (this.state() === 'user-scrolling') {
+                this.unreadCount.set(0);
+                this.setState('following');
+            }
+            return;
+        }
+        if (this.state() === 'following') {
+            this.setState('user-scrolling');
+        }
+    }
+    isNearBottom() {
+        const element = this.host.nativeElement;
+        const distanceFromBottom = element.scrollHeight - element.clientHeight - element.scrollTop;
+        return distanceFromBottom <= this.threshold();
+    }
+    runProgrammaticScroll(smooth) {
+        const element = this.host.nativeElement;
+        const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);
+        this.beginProgrammaticScroll();
+        element.scrollTo({
+            top: maxScrollTop,
+            behavior: smooth ? 'smooth' : 'auto',
+        });
+        if (typeof window !== 'undefined' && 'onscrollend' in window) {
+            const onScrollEnd = () => {
+                element.removeEventListener('scrollend', onScrollEnd);
+                this.endProgrammaticScroll();
+            };
+            element.addEventListener('scrollend', onScrollEnd, { once: true });
+            return;
+        }
+        this.programmaticScrollTimer = setTimeout(() => this.endProgrammaticScroll(), smooth ? PROGRAMMATIC_SCROLL_FALLBACK_MS : 0);
+    }
+    beginProgrammaticScroll() {
+        this.clearProgrammaticScrollGuard();
+        this.isProgrammaticScroll = true;
+    }
+    endProgrammaticScroll() {
+        this.isProgrammaticScroll = false;
+        this.programmaticScrollTimer = null;
+    }
+    clearProgrammaticScrollGuard() {
+        if (this.programmaticScrollTimer !== null) {
+            clearTimeout(this.programmaticScrollTimer);
+            this.programmaticScrollTimer = null;
+        }
+        this.isProgrammaticScroll = false;
+    }
+    setState(next) {
+        if (this.state() === next) {
+            return;
+        }
+        this.state.set(next);
+        this.ngZone.run(() => {
+            this.followStateChange.emit({ state: next });
+        });
+    }
+    teardown() {
+        if (this.scrollRafId !== null) {
+            cancelAnimationFrame(this.scrollRafId);
+            this.scrollRafId = null;
+        }
+        this.clearProgrammaticScrollGuard();
+        const element = this.host.nativeElement;
+        if (this.scrollListener) {
+            element.removeEventListener('scroll', this.scrollListener);
+            this.scrollListener = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXAutoFollowScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: AXAutoFollowScrollDirective, isStandalone: true, selector: "[axAutoFollowScroll]", inputs: { threshold: { classPropertyName: "threshold", publicName: "threshold", isSignal: true, isRequired: false, transformFunction: null }, smooth: { classPropertyName: "smooth", publicName: "smooth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { followStateChange: "followStateChange", newMessages: "newMessages" }, exportAs: ["axautoFollowScroll"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXAutoFollowScrollDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axAutoFollowScroll]',
+                    exportAs: 'axautoFollowScroll',
+                }]
+        }], ctorParameters: () => [], propDecorators: { threshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "threshold", required: false }] }], smooth: [{ type: i0.Input, args: [{ isSignal: true, alias: "smooth", required: false }] }], followStateChange: [{ type: i0.Output, args: ["followStateChange"] }], newMessages: [{ type: i0.Output, args: ["newMessages"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXAutoFollowScrollDirective };
+//# sourceMappingURL=acorex-cdk-auto-follow-scroll.mjs.map

package/fesm2022/acorex-cdk-auto-follow-scroll.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-cdk-auto-follow-scroll.mjs","sources":["../../../../packages/cdk/auto-follow-scroll/src/lib/auto-follow-scroll.directive.ts","../../../../packages/cdk/auto-follow-scroll/src/acorex-cdk-auto-follow-scroll.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport {\n  afterNextRender,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  NgZone,\n  output,\n  PLATFORM_ID,\n  signal,\n} from '@angular/core';\n\nexport type ScrollState = 'following' | 'user-scrolling';\n\nexport interface FollowStateChangeEvent {\n  state: ScrollState;\n}\n\nexport interface NewMessagesEvent {\n  count: number;\n}\n\nconst PROGRAMMATIC_SCROLL_FALLBACK_MS = 400;\n\n/**\n * Manages chat-style auto-follow scroll: sticks to the bottom while the user is\n * \"following\", and preserves scroll position with unread counts when they scroll up.\n *\n * Apply to the element that has `overflow: auto` (the scroll container).\n *\n * @example\n * ```html\n * <div\n *   autoFollowScroll\n *   [threshold]=\"100\"\n *   [smooth]=\"true\"\n *   (followStateChange)=\"onFollowState($event)\"\n *   (newMessages)=\"onNewMessages($event)\"\n * >\n *   @for (message of messages; track message.id) {\n *     <div>{{ message.text }}</div>\n *   }\n * </div>\n * ```\n */\n@Directive({\n  selector: '[axAutoFollowScroll]',\n  exportAs: 'axautoFollowScroll',\n})\nexport class AXAutoFollowScrollDirective {\n  private readonly host = inject(ElementRef<HTMLElement>);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly platformId = inject(PLATFORM_ID);\n  private readonly ngZone = inject(NgZone);\n\n  /** Distance from the bottom (px) at or below which the user is considered \"following\". */\n  readonly threshold = input(100);\n\n  /** Whether programmatic scroll uses smooth behavior. */\n  readonly smooth = input(true);\n\n  readonly followStateChange = output<FollowStateChangeEvent>();\n  readonly newMessages = output<NewMessagesEvent>();\n\n  readonly state = signal<ScrollState>('following');\n  readonly unreadCount = signal(0);\n\n  private isProgrammaticScroll = false;\n  private scrollRafId: number | null = null;\n  private programmaticScrollTimer: ReturnType<typeof setTimeout> | null = null;\n  private scrollListener: (() => void) | null = null;\n\n  constructor() {\n    afterNextRender(() => {\n      if (!isPlatformBrowser(this.platformId)) {\n        return;\n      }\n      this.attachScrollListener();\n    });\n\n    this.destroyRef.onDestroy(() => this.teardown());\n  }\n\n  /**\n   * Call after a new message is rendered in the list.\n   */\n  messageAdded(): void {\n    requestAnimationFrame(() => {\n      if (this.state() === 'following') {\n        this.scrollToBottom();\n        return;\n      }\n\n      this.unreadCount.update((count) => count + 1);\n      this.newMessages.emit({ count: this.unreadCount() });\n    });\n  }\n\n  /** Scrolls to the bottom and resumes following. */\n  scrollToBottom(): void {\n    this.unreadCount.set(0);\n    this.setState('following');\n    this.runProgrammaticScroll(this.smooth());\n  }\n\n  /** Resets unread count and following state without scrolling. */\n  reset(): void {\n    this.clearProgrammaticScrollGuard();\n    this.unreadCount.set(0);\n    this.setState('following');\n  }\n\n  private attachScrollListener(): void {\n    const element = this.host.nativeElement;\n\n    this.scrollListener = () => this.scheduleScrollHandling();\n    element.addEventListener('scroll', this.scrollListener, { passive: true });\n  }\n\n  private scheduleScrollHandling(): void {\n    if (this.scrollRafId !== null) {\n      return;\n    }\n\n    this.scrollRafId = requestAnimationFrame(() => {\n      this.scrollRafId = null;\n      this.handleUserScroll();\n    });\n  }\n\n  private handleUserScroll(): void {\n    if (this.isProgrammaticScroll) {\n      return;\n    }\n\n    const atBottom = this.isNearBottom();\n\n    if (atBottom) {\n      if (this.state() === 'user-scrolling') {\n        this.unreadCount.set(0);\n        this.setState('following');\n      }\n      return;\n    }\n\n    if (this.state() === 'following') {\n      this.setState('user-scrolling');\n    }\n  }\n\n  private isNearBottom(): boolean {\n    const element = this.host.nativeElement;\n    const distanceFromBottom = element.scrollHeight - element.clientHeight - element.scrollTop;\n    return distanceFromBottom <= this.threshold();\n  }\n\n  private runProgrammaticScroll(smooth: boolean): void {\n    const element = this.host.nativeElement;\n    const maxScrollTop = Math.max(0, element.scrollHeight - element.clientHeight);\n\n    this.beginProgrammaticScroll();\n\n    element.scrollTo({\n      top: maxScrollTop,\n      behavior: smooth ? 'smooth' : 'auto',\n    });\n\n    if (typeof window !== 'undefined' && 'onscrollend' in window) {\n      const onScrollEnd = (): void => {\n        element.removeEventListener('scrollend', onScrollEnd);\n        this.endProgrammaticScroll();\n      };\n      element.addEventListener('scrollend', onScrollEnd, { once: true });\n      return;\n    }\n\n    this.programmaticScrollTimer = setTimeout(\n      () => this.endProgrammaticScroll(),\n      smooth ? PROGRAMMATIC_SCROLL_FALLBACK_MS : 0,\n    );\n  }\n\n  private beginProgrammaticScroll(): void {\n    this.clearProgrammaticScrollGuard();\n    this.isProgrammaticScroll = true;\n  }\n\n  private endProgrammaticScroll(): void {\n    this.isProgrammaticScroll = false;\n    this.programmaticScrollTimer = null;\n  }\n\n  private clearProgrammaticScrollGuard(): void {\n    if (this.programmaticScrollTimer !== null) {\n      clearTimeout(this.programmaticScrollTimer);\n      this.programmaticScrollTimer = null;\n    }\n    this.isProgrammaticScroll = false;\n  }\n\n  private setState(next: ScrollState): void {\n    if (this.state() === next) {\n      return;\n    }\n\n    this.state.set(next);\n    this.ngZone.run(() => {\n      this.followStateChange.emit({ state: next });\n    });\n  }\n\n  private teardown(): void {\n    if (this.scrollRafId !== null) {\n      cancelAnimationFrame(this.scrollRafId);\n      this.scrollRafId = null;\n    }\n\n    this.clearProgrammaticScrollGuard();\n\n    const element = this.host.nativeElement;\n    if (this.scrollListener) {\n      element.removeEventListener('scroll', this.scrollListener);\n      this.scrollListener = null;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@acorex/cdk",
-  "version": "22.3.16",
+  "version": "22.3.18",
   "peerDependencies": {
-    "@acorex/core": "22.3.16",
+    "@acorex/core": "22.3.18",
     "quill": ">=2.0.2",
     "qrcode": ">=1.5.4",
     "swiper": ">=11.1.15",
@@ -24,6 +24,10 @@
       "types": "./types/acorex-cdk-accordion.d.ts",
       "default": "./fesm2022/acorex-cdk-accordion.mjs"
     },
+    "./auto-follow-scroll": {
+      "types": "./types/acorex-cdk-auto-follow-scroll.d.ts",
+      "default": "./fesm2022/acorex-cdk-auto-follow-scroll.mjs"
+    },
     "./carousel": {
       "types": "./types/acorex-cdk-carousel.d.ts",
       "default": "./fesm2022/acorex-cdk-carousel.mjs"

package/types/acorex-cdk-auto-follow-scroll.d.ts

@@ -0,0 +1,72 @@
+import * as _angular_core from '@angular/core';
+
+type ScrollState = 'following' | 'user-scrolling';
+interface FollowStateChangeEvent {
+    state: ScrollState;
+}
+interface NewMessagesEvent {
+    count: number;
+}
+/**
+ * Manages chat-style auto-follow scroll: sticks to the bottom while the user is
+ * "following", and preserves scroll position with unread counts when they scroll up.
+ *
+ * Apply to the element that has `overflow: auto` (the scroll container).
+ *
+ * @example
+ * ```html
+ * <div
+ *   autoFollowScroll
+ *   [threshold]="100"
+ *   [smooth]="true"
+ *   (followStateChange)="onFollowState($event)"
+ *   (newMessages)="onNewMessages($event)"
+ * >
+ *   @for (message of messages; track message.id) {
+ *     <div>{{ message.text }}</div>
+ *   }
+ * </div>
+ * ```
+ */
+declare class AXAutoFollowScrollDirective {
+    private readonly host;
+    private readonly destroyRef;
+    private readonly platformId;
+    private readonly ngZone;
+    /** Distance from the bottom (px) at or below which the user is considered "following". */
+    readonly threshold: _angular_core.InputSignal<number>;
+    /** Whether programmatic scroll uses smooth behavior. */
+    readonly smooth: _angular_core.InputSignal<boolean>;
+    readonly followStateChange: _angular_core.OutputEmitterRef<FollowStateChangeEvent>;
+    readonly newMessages: _angular_core.OutputEmitterRef<NewMessagesEvent>;
+    readonly state: _angular_core.WritableSignal<ScrollState>;
+    readonly unreadCount: _angular_core.WritableSignal<number>;
+    private isProgrammaticScroll;
+    private scrollRafId;
+    private programmaticScrollTimer;
+    private scrollListener;
+    constructor();
+    /**
+     * Call after a new message is rendered in the list.
+     */
+    messageAdded(): void;
+    /** Scrolls to the bottom and resumes following. */
+    scrollToBottom(): void;
+    /** Resets unread count and following state without scrolling. */
+    reset(): void;
+    private attachScrollListener;
+    private scheduleScrollHandling;
+    private handleUserScroll;
+    private isNearBottom;
+    private runProgrammaticScroll;
+    private beginProgrammaticScroll;
+    private endProgrammaticScroll;
+    private clearProgrammaticScrollGuard;
+    private setState;
+    private teardown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAutoFollowScrollDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXAutoFollowScrollDirective, "[axAutoFollowScroll]", ["axautoFollowScroll"], { "threshold": { "alias": "threshold"; "required": false; "isSignal": true; }; "smooth": { "alias": "smooth"; "required": false; "isSignal": true; }; }, { "followStateChange": "followStateChange"; "newMessages": "newMessages"; }, never, never, true, never>;
+}
+
+export { AXAutoFollowScrollDirective };
+export type { FollowStateChangeEvent, NewMessagesEvent, ScrollState };