@acorex/cdk 22.0.0-next.9 → 22.0.1-next.0

package/fesm2022/acorex-cdk-shimmer.mjs

@@ -0,0 +1,220 @@
+import { isPlatformBrowser } from '@angular/common';
+import { AX_STYLE_COLOR_TYPES } from '@acorex/cdk/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DestroyRef, PLATFORM_ID, signal, input, effect, afterNextRender, Directive } from '@angular/core';
+
+const SHIMMER_DEFAULT_SPREAD = 'calc(3ch + 40px)';
+const SHIMMER_ANIMATION_KEY = '__axShimmerAnimation';
+/**
+ * Applies the shimmer text effect to a host element.
+ */
+class AXShimmerDirective {
+    constructor() {
+        this.hostElement = inject((ElementRef));
+        this.destroyRef = inject(DestroyRef);
+        this.platformId = inject(PLATFORM_ID);
+        this.refresh = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "refresh" }] : /* istanbul ignore next */ []));
+        /**
+         * Plays the shimmer animation once instead of looping.
+         *
+         * @defaultValue false
+         */
+        this.once = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "once" }] : /* istanbul ignore next */ []));
+        /**
+         * Reverses the shimmer sweep direction.
+         *
+         * @defaultValue false
+         */
+        this.reverse = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reverse" }] : /* istanbul ignore next */ []));
+        /**
+         * Disables the shimmer effect and renders normal text.
+         *
+         * @defaultValue false
+         */
+        this.disabled = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /**
+         * Duration of one shimmer sweep in milliseconds.
+         *
+         * @defaultValue 2000
+         */
+        this.duration = input(2000, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+        /**
+         * Width of the highlight band. Numbers use the spacing scale; strings accept any CSS length.
+         */
+        this.spread = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "spread" }] : /* istanbul ignore next */ []));
+        /**
+         * Tilt of the highlight band in degrees.
+         *
+         * @defaultValue 20
+         */
+        this.angle = input(20, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "angle" }] : /* istanbul ignore next */ []));
+        /**
+         * Explicit highlight color. Accepts ACoreX semantic colors (`primary`, `danger`, …) or any CSS color value.
+         * Falls back to a tint derived from currentColor when omitted.
+         */
+        this.color = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.#syncShimmer = effect(() => {
+            this.refresh();
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            if (this.disabled() || this.prefersReducedMotion()) {
+                this.cancelShimmerAnimation();
+                this.clearShimmerStyles();
+                return;
+            }
+            this.applyShimmerStyles({
+                spread: this.spread(),
+                angle: this.angle(),
+                color: this.color(),
+            });
+            this.restartShimmerAnimation({
+                duration: this.duration(),
+                once: this.once(),
+                reverse: this.reverse(),
+                rtl: this.isRtl(),
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#syncShimmer" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            if (!isPlatformBrowser(this.platformId)) {
+                return;
+            }
+            const themeObserver = new MutationObserver(() => {
+                this.refresh.update((value) => value + 1);
+            });
+            themeObserver.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['class', 'dir'],
+            });
+            const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            const onMotionPreferenceChange = () => {
+                this.refresh.update((value) => value + 1);
+            };
+            motionQuery.addEventListener('change', onMotionPreferenceChange);
+            this.destroyRef.onDestroy(() => {
+                themeObserver.disconnect();
+                motionQuery.removeEventListener('change', onMotionPreferenceChange);
+                this.cancelShimmerAnimation();
+                this.clearShimmerStyles();
+            });
+        });
+    }
+    #syncShimmer;
+    get element() {
+        return this.hostElement.nativeElement;
+    }
+    resolveSpread(spread) {
+        if (spread == null || spread === '') {
+            return SHIMMER_DEFAULT_SPREAD;
+        }
+        return typeof spread === 'number' ? `calc(var(--spacing) * ${spread})` : spread;
+    }
+    isSemanticColor(color) {
+        return AX_STYLE_COLOR_TYPES.includes(color);
+    }
+    resolveHighlightColor(color, isDark) {
+        if (!color || color === 'default') {
+            return isDark
+                ? 'color-mix(in oklch, currentColor 55%, white)'
+                : 'color-mix(in oklch, currentColor 30%, transparent)';
+        }
+        if (this.isSemanticColor(color)) {
+            return `var(--color-${color})`;
+        }
+        return color;
+    }
+    isDarkMode() {
+        return this.element.closest('.dark') !== null || document.documentElement.classList.contains('dark');
+    }
+    isRtl() {
+        const dirHost = this.element.closest('[dir]');
+        return dirHost?.getAttribute('dir') === 'rtl' || document.documentElement.getAttribute('dir') === 'rtl';
+    }
+    prefersReducedMotion() {
+        return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    }
+    buildBackgroundImage(angle, spread, highlight) {
+        const base = 'currentColor';
+        return `linear-gradient(${90 + angle}deg, ${base} calc(50% - ${spread}), color-mix(in oklch, ${highlight}, ${base} 50%) calc(50% - calc(${spread} * 0.5)), ${highlight} 50%, color-mix(in oklch, ${highlight}, ${base} 50%) calc(50% + calc(${spread} * 0.5)), ${base} calc(50% + ${spread}))`;
+    }
+    applyShimmerStyles(state) {
+        const spread = this.resolveSpread(state.spread);
+        const highlight = this.resolveHighlightColor(state.color, this.isDarkMode());
+        const style = this.element.style;
+        style.setProperty('--shimmer-spread', spread);
+        style.setProperty('--shimmer-angle', `${state.angle}deg`);
+        style.setProperty('--shimmer-color', state.color ?? '');
+        style.display = 'inline-block';
+        style.backgroundImage = this.buildBackgroundImage(state.angle, spread, highlight);
+        style.backgroundRepeat = 'no-repeat';
+        style.backgroundSize = `calc(200% + ${spread} * 2) 100%`;
+        style.backgroundPosition = '0 0';
+        style.backgroundClip = 'text';
+        style.setProperty('-webkit-background-clip', 'text');
+        style.setProperty('-webkit-text-fill-color', 'transparent');
+    }
+    clearShimmerStyles() {
+        const style = this.element.style;
+        style.removeProperty('--shimmer-spread');
+        style.removeProperty('--shimmer-angle');
+        style.removeProperty('--shimmer-color');
+        style.removeProperty('--shimmer-duration');
+        style.removeProperty('display');
+        style.removeProperty('background-image');
+        style.removeProperty('background-repeat');
+        style.removeProperty('background-size');
+        style.removeProperty('background-position');
+        style.removeProperty('background-clip');
+        style.removeProperty('-webkit-background-clip');
+        style.removeProperty('-webkit-text-fill-color');
+    }
+    restartShimmerAnimation(options) {
+        this.cancelShimmerAnimation();
+        this.element.style.setProperty('--shimmer-duration', `${options.duration}ms`);
+        let direction = 'normal';
+        if (options.reverse) {
+            direction = 'reverse';
+        }
+        else if (options.rtl) {
+            direction = 'reverse';
+        }
+        const animation = this.element.animate([{ backgroundPosition: '100% 0' }, { backgroundPosition: '0 0' }], {
+            duration: options.duration,
+            iterations: options.once ? 1 : Infinity,
+            direction,
+            fill: options.once ? 'backwards' : 'auto',
+            easing: 'linear',
+        });
+        this.element[SHIMMER_ANIMATION_KEY] = animation;
+        return animation;
+    }
+    cancelShimmerAnimation() {
+        const animation = this.element[SHIMMER_ANIMATION_KEY];
+        animation?.cancel();
+        delete this.element[SHIMMER_ANIMATION_KEY];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXShimmerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AXShimmerDirective, isStandalone: true, selector: "[axShimmer]", inputs: { once: { classPropertyName: "once", publicName: "once", isSignal: true, isRequired: false, transformFunction: null }, reverse: { classPropertyName: "reverse", publicName: "reverse", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, spread: { classPropertyName: "spread", publicName: "spread", isSignal: true, isRequired: false, transformFunction: null }, angle: { classPropertyName: "angle", publicName: "angle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXShimmerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[axShimmer]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { once: [{ type: i0.Input, args: [{ isSignal: true, alias: "once", required: false }] }], reverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverse", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], spread: [{ type: i0.Input, args: [{ isSignal: true, alias: "spread", required: false }] }], angle: [{ type: i0.Input, args: [{ isSignal: true, alias: "angle", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXShimmerDirective };
+//# sourceMappingURL=acorex-cdk-shimmer.mjs.map

package/fesm2022/acorex-cdk-shimmer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-cdk-shimmer.mjs","sources":["../../../../packages/cdk/shimmer/src/lib/shimmer.directive.ts","../../../../packages/cdk/shimmer/src/acorex-cdk-shimmer.ts"],"sourcesContent":["import { isPlatformBrowser } from '@angular/common';\nimport { AXStyleColorType, AX_STYLE_COLOR_TYPES } from '@acorex/cdk/common';\nimport { afterNextRender, DestroyRef, Directive, effect, ElementRef, inject, input, PLATFORM_ID, signal } from '@angular/core';\n\nconst SHIMMER_DEFAULT_SPREAD = 'calc(3ch + 40px)';\nconst SHIMMER_ANIMATION_KEY = '__axShimmerAnimation';\n\ninterface AXShimmerStyleState {\n  spread: string | number | null;\n  angle: number;\n  color: AXStyleColorType | string | null;\n}\n\ninterface AXShimmerAnimationOptions {\n  duration: number;\n  once: boolean;\n  reverse: boolean;\n  rtl: boolean;\n}\n\n/**\n * Applies the shimmer text effect to a host element.\n */\n@Directive({\n  selector: '[axShimmer]',\n})\nexport class AXShimmerDirective {\n  private readonly hostElement = inject(ElementRef<HTMLElement>);\n  private readonly destroyRef = inject(DestroyRef);\n  private readonly platformId = inject(PLATFORM_ID);\n  private readonly refresh = signal(0);\n\n  /**\n   * Plays the shimmer animation once instead of looping.\n   *\n   * @defaultValue false\n   */\n  once = input(false);\n\n  /**\n   * Reverses the shimmer sweep direction.\n   *\n   * @defaultValue false\n   */\n  reverse = input(false);\n\n  /**\n   * Disables the shimmer effect and renders normal text.\n   *\n   * @defaultValue false\n   */\n  disabled = input(false);\n\n  /**\n   * Duration of one shimmer sweep in milliseconds.\n   *\n   * @defaultValue 2000\n   */\n  duration = input(2000);\n\n  /**\n   * Width of the highlight band. Numbers use the spacing scale; strings accept any CSS length.\n   */\n  spread = input<string | number | null>(null);\n\n  /**\n   * Tilt of the highlight band in degrees.\n   *\n   * @defaultValue 20\n   */\n  angle = input(20);\n\n  /**\n   * Explicit highlight color. Accepts ACoreX semantic colors (`primary`, `danger`, …) or any CSS color value.\n   * Falls back to a tint derived from currentColor when omitted.\n   */\n  color = input<AXStyleColorType | string | null>(null);\n\n  constructor() {\n    afterNextRender(() => {\n      if (!isPlatformBrowser(this.platformId)) {\n        return;\n      }\n\n      const themeObserver = new MutationObserver(() => {\n        this.refresh.update((value) => value + 1);\n      });\n      themeObserver.observe(document.documentElement, {\n        attributes: true,\n        attributeFilter: ['class', 'dir'],\n      });\n\n      const motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');\n      const onMotionPreferenceChange = () => {\n        this.refresh.update((value) => value + 1);\n      };\n      motionQuery.addEventListener('change', onMotionPreferenceChange);\n\n      this.destroyRef.onDestroy(() => {\n        themeObserver.disconnect();\n        motionQuery.removeEventListener('change', onMotionPreferenceChange);\n        this.cancelShimmerAnimation();\n        this.clearShimmerStyles();\n      });\n    });\n  }\n\n  #syncShimmer = effect(() => {\n    this.refresh();\n\n    if (!isPlatformBrowser(this.platformId)) {\n      return;\n    }\n\n    if (this.disabled() || this.prefersReducedMotion()) {\n      this.cancelShimmerAnimation();\n      this.clearShimmerStyles();\n      return;\n    }\n\n    this.applyShimmerStyles({\n      spread: this.spread(),\n      angle: this.angle(),\n      color: this.color(),\n    });\n\n    this.restartShimmerAnimation({\n      duration: this.duration(),\n      once: this.once(),\n      reverse: this.reverse(),\n      rtl: this.isRtl(),\n    });\n  });\n\n  private get element(): HTMLElement {\n    return this.hostElement.nativeElement;\n  }\n\n  private resolveSpread(spread: string | number | null): string {\n    if (spread == null || spread === '') {\n      return SHIMMER_DEFAULT_SPREAD;\n    }\n\n    return typeof spread === 'number' ? `calc(var(--spacing) * ${spread})` : spread;\n  }\n\n  private isSemanticColor(color: string): color is AXStyleColorType {\n    return AX_STYLE_COLOR_TYPES.includes(color as AXStyleColorType);\n  }\n\n  private resolveHighlightColor(color: AXStyleColorType | string | null, isDark: boolean): string {\n    if (!color || color === 'default') {\n      return isDark\n        ? 'color-mix(in oklch, currentColor 55%, white)'\n        : 'color-mix(in oklch, currentColor 30%, transparent)';\n    }\n\n    if (this.isSemanticColor(color)) {\n      return `var(--color-${color})`;\n    }\n\n    return color;\n  }\n\n  private isDarkMode(): boolean {\n    return this.element.closest('.dark') !== null || document.documentElement.classList.contains('dark');\n  }\n\n  private isRtl(): boolean {\n    const dirHost = this.element.closest('[dir]');\n    return dirHost?.getAttribute('dir') === 'rtl' || document.documentElement.getAttribute('dir') === 'rtl';\n  }\n\n  private prefersReducedMotion(): boolean {\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  private buildBackgroundImage(angle: number, spread: string, highlight: string): string {\n    const base = 'currentColor';\n\n    return `linear-gradient(${90 + angle}deg, ${base} calc(50% - ${spread}), color-mix(in oklch, ${highlight}, ${base} 50%) calc(50% - calc(${spread} * 0.5)), ${highlight} 50%, color-mix(in oklch, ${highlight}, ${base} 50%) calc(50% + calc(${spread} * 0.5)), ${base} calc(50% + ${spread}))`;\n  }\n\n  private applyShimmerStyles(state: AXShimmerStyleState): void {\n    const spread = this.resolveSpread(state.spread);\n    const highlight = this.resolveHighlightColor(state.color, this.isDarkMode());\n    const style = this.element.style;\n\n    style.setProperty('--shimmer-spread', spread);\n    style.setProperty('--shimmer-angle', `${state.angle}deg`);\n    style.setProperty('--shimmer-color', state.color ?? '');\n\n    style.display = 'inline-block';\n    style.backgroundImage = this.buildBackgroundImage(state.angle, spread, highlight);\n    style.backgroundRepeat = 'no-repeat';\n    style.backgroundSize = `calc(200% + ${spread} * 2) 100%`;\n    style.backgroundPosition = '0 0';\n    style.backgroundClip = 'text';\n    style.setProperty('-webkit-background-clip', 'text');\n    style.setProperty('-webkit-text-fill-color', 'transparent');\n  }\n\n  private clearShimmerStyles(): void {\n    const style = this.element.style;\n\n    style.removeProperty('--shimmer-spread');\n    style.removeProperty('--shimmer-angle');\n    style.removeProperty('--shimmer-color');\n    style.removeProperty('--shimmer-duration');\n    style.removeProperty('display');\n    style.removeProperty('background-image');\n    style.removeProperty('background-repeat');\n    style.removeProperty('background-size');\n    style.removeProperty('background-position');\n    style.removeProperty('background-clip');\n    style.removeProperty('-webkit-background-clip');\n    style.removeProperty('-webkit-text-fill-color');\n  }\n\n  private restartShimmerAnimation(options: AXShimmerAnimationOptions): Animation | null {\n    this.cancelShimmerAnimation();\n\n    this.element.style.setProperty('--shimmer-duration', `${options.duration}ms`);\n\n    let direction: PlaybackDirection = 'normal';\n    if (options.reverse) {\n      direction = 'reverse';\n    } else if (options.rtl) {\n      direction = 'reverse';\n    }\n\n    const animation = this.element.animate([{ backgroundPosition: '100% 0' }, { backgroundPosition: '0 0' }], {\n      duration: options.duration,\n      iterations: options.once ? 1 : Infinity,\n      direction,\n      fill: options.once ? 'backwards' : 'auto',\n      easing: 'linear',\n    });\n\n    (this.element as HTMLElement & { [SHIMMER_ANIMATION_KEY]?: Animation })[SHIMMER_ANIMATION_KEY] = animation;\n    return animation;\n  }\n\n  private cancelShimmerAnimation(): void {\n    const animation = (this.element as HTMLElement & { [SHIMMER_ANIMATION_KEY]?: Animation })[SHIMMER_ANIMATION_KEY];\n    animation?.cancel();\n    delete (this.element as HTMLElement & { [SHIMMER_ANIMATION_KEY]?: Animation })[SHIMMER_ANIMATION_KEY];\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-cdk-sliding-item.mjs

@@ -1,13 +1,18 @@
+import * as i1 from '@acorex/cdk/gesture';
+import { AXGestureDirective } from '@acorex/cdk/gesture';
 import * as i0 from '@angular/core';
-import { inject, ElementRef, signal, effect, afterNextRender, Directive } from '@angular/core';
+import { inject, ElementRef, DestroyRef, signal, effect, afterNextRender, Directive } from '@angular/core';
 
+/**
+ * Enables horizontal sliding on the host via the hosted AXGestureDirective pan events.
+ *
+ * Do not put `axGesture` on the same element; this directive already hosts it.
+ */
 class AXSlidingItemDirective {
     constructor() {
-        this.hostElement = inject(ElementRef);
-        this.isMouseDown = signal(false, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "isMouseDown" }] : /* istanbul ignore next */ []));
-        this.prevX = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "prevX" }] : /* istanbul ignore next */ []));
+        this.hostElement = inject((ElementRef));
+        this.gesture = inject(AXGestureDirective);
+        this.destroyRef = inject(DestroyRef);
         this.currentX = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentX" }] : /* istanbul ignore next */ []));
         this.stopPoint = signal(0, /* @ts-ignore */
@@ -16,6 +21,9 @@ class AXSlidingItemDirective {
         ...(ngDevMode ? [{ debugName: "disableSlidingRight" }] : /* istanbul ignore next */ []));
         this.disableSlidingLeft = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "disableSlidingLeft" }] : /* istanbul ignore next */ []));
+        this.cursor = signal('grab', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cursor" }] : /* istanbul ignore next */ []));
+        this.originX = 0;
         this.#positionChange = effect(() => {
             if (this.currentX() > 0 && this.disableSlidingRight())
                 return;
@@ -26,77 +34,79 @@ class AXSlidingItemDirective {
         ...(ngDevMode ? [{ debugName: "#positionChange" }] : /* istanbul ignore next */ []));
         this.#init = afterNextRender(() => {
             const el = this.hostElement.nativeElement.parentElement;
+            if (!el)
+                return;
             el.style.display = 'flex';
             el.style.justifyContent = 'space-between';
             el.style.position = 'relative';
             el.style.overflow = 'hidden';
         });
-        this.#effect2 = effect(() => {
-            this.hostElement.nativeElement.style.position = 'absolute';
-            this.hostElement.nativeElement.style.top = '0';
-            this.hostElement.nativeElement.style.left = '0';
-            this.hostElement.nativeElement.style.width = '100%';
-            this.hostElement.nativeElement.style.height = '100%';
-            this.hostElement.nativeElement.style.zIndex = '1';
-            this.hostElement.nativeElement.style.cursor = 'grab';
-            this.hostElement.nativeElement.style.userSelect = 'none';
-            this.hostElement.nativeElement.style.touchAction = 'none';
-            this.hostElement.nativeElement.onpointerdown = (e) => {
-                this.hostElement.nativeElement.style.transition = 'none';
-                this.hostElement.nativeElement.style.cursor = 'grabbing';
-                this.isMouseDown.set(true);
-                this.prevX.set(e.clientX);
-            };
-            this.hostElement.nativeElement.onpointermove = (e) => {
-                if (!this.isMouseDown())
-                    return;
-                const currentX = e.clientX;
-                const deltaX = currentX - this.prevX();
-                this.currentX.update((prev) => prev + deltaX);
-                this.prevX.set(currentX);
-            };
-            this.hostElement.nativeElement.onpointerup = () => {
-                this.isMouseDown.set(false);
-                this.dismiss();
-            };
-            this.hostElement.nativeElement.onpointerleave = () => {
-                if (!this.isMouseDown())
-                    return;
-                this.isMouseDown.set(false);
-                this.dismiss();
-            };
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#effect2" }] : /* istanbul ignore next */ []));
+        const subscriptions = [
+            this.gesture.panstart.subscribe(() => this.handlePanStart()),
+            this.gesture.panmove.subscribe((event) => this.handlePanMove(event)),
+            this.gesture.panend.subscribe(() => this.handlePanEnd()),
+        ];
+        this.destroyRef.onDestroy(() => {
+            for (const subscription of subscriptions) {
+                subscription.unsubscribe();
+            }
+        });
     }
     #positionChange;
     #init;
-    #effect2;
+    handlePanStart() {
+        this.hostElement.nativeElement.style.transition = 'none';
+        this.cursor.set('grabbing');
+        this.originX = this.currentX();
+    }
+    handlePanMove(event) {
+        let next = this.originX + event.deltaX;
+        if (next > 0 && this.disableSlidingRight())
+            next = 0;
+        if (next < 0 && this.disableSlidingLeft())
+            next = 0;
+        this.currentX.set(next);
+    }
+    handlePanEnd() {
+        this.dismiss();
+    }
     dismiss() {
-        const el = this.hostElement.nativeElement;
         this.hostElement.nativeElement.style.transition = '.5s transform ease';
-        el.style.cursor = 'grab';
-        if (this.stopPoint()) {
-            el.style.transform = `translate(${this.stopPoint()}, 0)`;
-            this.currentX.set(this.stopPoint());
-            this.prevX.set(this.stopPoint());
-        }
-        else {
-            el.style.transform = `translate(0, 0)`;
-            this.currentX.set(0);
-            this.prevX.set(0);
-        }
+        this.cursor.set('grab');
+        const target = this.stopPoint();
+        this.currentX.set(target);
+        this.setPosition(target);
     }
+    /**
+     * Sets the position of the sliding element.
+     *
+     * @param pos - The horizontal position in pixels to set the element to
+     * @returns void - No return value. The element's transform is updated to the specified position.
+     */
     setPosition(pos) {
-        const el = this.hostElement.nativeElement;
-        el.style.transform = `translate(${pos}px, 0)`;
+        this.hostElement.nativeElement.style.transform = `translate(${pos}px, 0)`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSlidingItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AXSlidingItemDirective, isStandalone: true, selector: "[axSlidingItem]", ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: AXSlidingItemDirective, isStandalone: true, selector: "[axSlidingItem]", host: { properties: { "style.position": "\"absolute\"", "style.top": "\"0\"", "style.left": "\"0\"", "style.width": "\"100%\"", "style.height": "\"100%\"", "style.z-index": "\"1\"", "style.cursor": "cursor()", "style.user-select": "\"none\"", "style.touch-action": "\"none\"" } }, hostDirectives: [{ directive: i1.AXGestureDirective }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXSlidingItemDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[axSlidingItem]' }]
-        }] });
+            args: [{
+                    selector: '[axSlidingItem]',
+                    hostDirectives: [AXGestureDirective],
+                    host: {
+                        '[style.position]': '"absolute"',
+                        '[style.top]': '"0"',
+                        '[style.left]': '"0"',
+                        '[style.width]': '"100%"',
+                        '[style.height]': '"100%"',
+                        '[style.z-index]': '"1"',
+                        '[style.cursor]': 'cursor()',
+                        '[style.user-select]': '"none"',
+                        '[style.touch-action]': '"none"',
+                    },
+                }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/acorex-cdk-sliding-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-cdk-sliding-item.mjs","sources":["../../../../packages/cdk/sliding-item/src/lib/sliding-item.directive.ts","../../../../packages/cdk/sliding-item/src/acorex-cdk-sliding-item.ts"],"sourcesContent":["import { afterNextRender, Directive, effect, ElementRef, inject, signal } from '@angular/core';\n\n@Directive({ selector: '[axSlidingItem]' })\nexport class AXSlidingItemDirective {\n  private hostElement = inject(ElementRef);\n  private isMouseDown = signal(false);\n  private prevX = signal(0);\n  currentX = signal(0);\n  stopPoint = signal(0);\n  disableSlidingRight = signal(false);\n  disableSlidingLeft = signal(false);\n\n  #positionChange = effect(() => {\n    if (this.currentX() > 0 && this.disableSlidingRight()) return;\n    if (this.currentX() < 0 && this.disableSlidingLeft()) return;\n    this.setPosition(this.currentX());\n  });\n\n  #init = afterNextRender(() => {\n    const el = (this.hostElement.nativeElement as HTMLElement).parentElement;\n    el.style.display = 'flex';\n    el.style.justifyContent = 'space-between';\n    el.style.position = 'relative';\n    el.style.overflow = 'hidden';\n  });\n\n  #effect2 = effect(() => {\n    this.hostElement.nativeElement.style.position = 'absolute';\n    this.hostElement.nativeElement.style.top = '0';\n    this.hostElement.nativeElement.style.left = '0';\n    this.hostElement.nativeElement.style.width = '100%';\n    this.hostElement.nativeElement.style.height = '100%';\n    this.hostElement.nativeElement.style.zIndex = '1';\n    this.hostElement.nativeElement.style.cursor = 'grab';\n    this.hostElement.nativeElement.style.userSelect = 'none';\n    this.hostElement.nativeElement.style.touchAction = 'none';\n\n    this.hostElement.nativeElement.onpointerdown = (e: PointerEvent) => {\n      this.hostElement.nativeElement.style.transition = 'none';\n      this.hostElement.nativeElement.style.cursor = 'grabbing';\n      this.isMouseDown.set(true);\n      this.prevX.set(e.clientX);\n    };\n\n    this.hostElement.nativeElement.onpointermove = (e: PointerEvent) => {\n      if (!this.isMouseDown()) return;\n      const currentX = e.clientX;\n      const deltaX = currentX - this.prevX();\n      this.currentX.update((prev) => prev + deltaX);\n      this.prevX.set(currentX);\n    };\n\n    this.hostElement.nativeElement.onpointerup = () => {\n      this.isMouseDown.set(false);\n      this.dismiss();\n    };\n\n    this.hostElement.nativeElement.onpointerleave = () => {\n      if (!this.isMouseDown()) return;\n      this.isMouseDown.set(false);\n      this.dismiss();\n    };\n  });\n\n  private dismiss() {\n    const el = this.hostElement.nativeElement as HTMLElement;\n    this.hostElement.nativeElement.style.transition = '.5s transform ease';\n    el.style.cursor = 'grab';\n\n    if (this.stopPoint()) {\n      el.style.transform = `translate(${this.stopPoint()}, 0)`;\n      this.currentX.set(this.stopPoint());\n      this.prevX.set(this.stopPoint());\n    } else {\n      el.style.transform = `translate(0, 0)`;\n      this.currentX.set(0);\n      this.prevX.set(0);\n    }\n  }\n\n  setPosition(pos: number) {\n    const el = this.hostElement.nativeElement as HTMLElement;\n    el.style.transform = `translate(${pos}px, 0)`;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-cdk-sliding-item.mjs","sources":["../../../../packages/cdk/sliding-item/src/lib/sliding-item.directive.ts","../../../../packages/cdk/sliding-item/src/acorex-cdk-sliding-item.ts"],"sourcesContent":["import { AXGestureDirective, AXGestureEvent } from '@acorex/cdk/gesture';\nimport { afterNextRender, DestroyRef, Directive, effect, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Enables horizontal sliding on the host via the hosted AXGestureDirective pan events.\n *\n * Do not put `axGesture` on the same element; this directive already hosts it.\n */\n@Directive({\n  selector: '[axSlidingItem]',\n  hostDirectives: [AXGestureDirective],\n  host: {\n    '[style.position]': '\"absolute\"',\n    '[style.top]': '\"0\"',\n    '[style.left]': '\"0\"',\n    '[style.width]': '\"100%\"',\n    '[style.height]': '\"100%\"',\n    '[style.z-index]': '\"1\"',\n    '[style.cursor]': 'cursor()',\n    '[style.user-select]': '\"none\"',\n    '[style.touch-action]': '\"none\"',\n  },\n})\nexport class AXSlidingItemDirective {\n  private readonly hostElement = inject(ElementRef<HTMLElement>);\n  private readonly gesture = inject(AXGestureDirective);\n  private readonly destroyRef = inject(DestroyRef);\n\n  currentX = signal(0);\n  stopPoint = signal(0);\n  disableSlidingRight = signal(false);\n  disableSlidingLeft = signal(false);\n\n  protected readonly cursor = signal('grab');\n  private originX = 0;\n\n  constructor() {\n    const subscriptions = [\n      this.gesture.panstart.subscribe(() => this.handlePanStart()),\n      this.gesture.panmove.subscribe((event) => this.handlePanMove(event)),\n      this.gesture.panend.subscribe(() => this.handlePanEnd()),\n    ];\n    this.destroyRef.onDestroy(() => {\n      for (const subscription of subscriptions) {\n        subscription.unsubscribe();\n      }\n    });\n  }\n\n  #positionChange = effect(() => {\n    if (this.currentX() > 0 && this.disableSlidingRight()) return;\n    if (this.currentX() < 0 && this.disableSlidingLeft()) return;\n    this.setPosition(this.currentX());\n  });\n\n  #init = afterNextRender(() => {\n    const el = this.hostElement.nativeElement.parentElement;\n    if (!el) return;\n    el.style.display = 'flex';\n    el.style.justifyContent = 'space-between';\n    el.style.position = 'relative';\n    el.style.overflow = 'hidden';\n  });\n\n  private handlePanStart(): void {\n    this.hostElement.nativeElement.style.transition = 'none';\n    this.cursor.set('grabbing');\n    this.originX = this.currentX();\n  }\n\n  private handlePanMove(event: AXGestureEvent): void {\n    let next = this.originX + event.deltaX;\n    if (next > 0 && this.disableSlidingRight()) next = 0;\n    if (next < 0 && this.disableSlidingLeft()) next = 0;\n    this.currentX.set(next);\n  }\n\n  private handlePanEnd(): void {\n    this.dismiss();\n  }\n\n  private dismiss(): void {\n    this.hostElement.nativeElement.style.transition = '.5s transform ease';\n    this.cursor.set('grab');\n    const target = this.stopPoint();\n    this.currentX.set(target);\n    this.setPosition(target);\n  }\n\n  /**\n   * Sets the position of the sliding element.\n   *\n   * @param pos - The horizontal position in pixels to set the element to\n   * @returns void - No return value. The element's transform is updated to the specified position.\n   */\n  setPosition(pos: number): void {\n    this.hostElement.nativeElement.style.transform = `translate(${pos}px, 0)`;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/gesture/README.md

@@ -0,0 +1,3 @@
+# @acorex/cdk/gesture
+
+Secondary entry point of `@acorex/cdk`. It can be used by importing from `@acorex/cdk/gesture`.

package/horizontal-scroll/README.md

@@ -2,4 +2,4 @@
 
 Secondary entry point of `@acorex/cdk`. It can be used by importing from `@acorex/cdk/horizontal-scroll`.
 
-Converts vertical mouse-wheel scrolling into horizontal scrolling on scrollable host elements.
+Converts vertical mouse-wheel scrolling and horizontal pan into horizontal scrolling on scrollable host elements. Pan is provided by a hosted `AXGestureDirective`. Do not put `axGesture` on the same element.

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@acorex/cdk",
-  "version": "22.0.0-next.9",
+  "version": "22.0.1-next.0",
   "peerDependencies": {
-    "@acorex/core": "22.0.0-next.9",
+    "@acorex/core": "22.0.1-next.0",
     "quill": ">=2.0.2",
     "qrcode": ">=1.5.4",
     "swiper": ">=11.1.15",
-    "maska": ">=3.1.1"
+    "maska": ">=3.1.1",
+    "hammerjs": ">=2.0.8"
   },
   "sideEffects": false,
   "module": "fesm2022/acorex-cdk.mjs",
@@ -39,10 +40,6 @@
       "types": "./types/acorex-cdk-dom.d.ts",
       "default": "./fesm2022/acorex-cdk-dom.mjs"
     },
-    "./double-click": {
-      "types": "./types/acorex-cdk-double-click.d.ts",
-      "default": "./fesm2022/acorex-cdk-double-click.mjs"
-    },
     "./drag-drop": {
       "types": "./types/acorex-cdk-drag-drop.d.ts",
       "default": "./fesm2022/acorex-cdk-drag-drop.mjs"
@@ -59,6 +56,14 @@
       "types": "./types/acorex-cdk-full-screen.d.ts",
       "default": "./fesm2022/acorex-cdk-full-screen.mjs"
     },
+    "./gesture": {
+      "types": "./types/acorex-cdk-gesture.d.ts",
+      "default": "./fesm2022/acorex-cdk-gesture.mjs"
+    },
+    "./highlight": {
+      "types": "./types/acorex-cdk-highlight.d.ts",
+      "default": "./fesm2022/acorex-cdk-highlight.mjs"
+    },
     "./horizontal-scroll": {
       "types": "./types/acorex-cdk-horizontal-scroll.d.ts",
       "default": "./fesm2022/acorex-cdk-horizontal-scroll.mjs"
@@ -95,6 +100,10 @@
       "types": "./types/acorex-cdk-selection.d.ts",
       "default": "./fesm2022/acorex-cdk-selection.mjs"
     },
+    "./shimmer": {
+      "types": "./types/acorex-cdk-shimmer.d.ts",
+      "default": "./fesm2022/acorex-cdk-shimmer.mjs"
+    },
     "./sliding-item": {
       "types": "./types/acorex-cdk-sliding-item.d.ts",
       "default": "./fesm2022/acorex-cdk-sliding-item.mjs"

package/shimmer/README.md

@@ -0,0 +1,11 @@
+# @acorex/cdk/shimmer
+
+Text shimmer directive for loading or streaming states.
+
+```typescript
+import { AXShimmerDirective } from '@acorex/cdk/shimmer';
+```
+
+```html
+<p class="text-sm text-neutral-500" axShimmer>Generating response…</p>
+```

package/sliding-item/README.md

@@ -1,3 +1,5 @@
-# @acorex/cdk/sliding-items
+# @acorex/cdk/sliding-item
 
-Secondary entry point of `@acorex/cdk`. It can be used by importing from `@acorex/cdk/sliding-items`.
+Secondary entry point of `@acorex/cdk`. It can be used by importing from `@acorex/cdk/sliding-item`.
+
+Enables horizontal sliding on the host via a hosted `AXGestureDirective`. Do not put `axGesture` on the same element.

package/types/acorex-cdk-carousel.d.ts

@@ -7,6 +7,8 @@ declare class AXCarouselDirective {
     carousel: i0.WritableSignal<Swiper>;
     private el;
     private platformId;
+    private initId;
+    destroy(): void;
     init(option: AXCarouselOptions): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCarouselDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<AXCarouselDirective, "[axCarousel]", ["axCarousel"], {}, {}, never, never, true, never>;