@acorex/cdk 22.0.0-next.9 → 22.0.0

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.0",
   "peerDependencies": {
-    "@acorex/core": "22.0.0-next.9",
+    "@acorex/core": "22.0.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",
@@ -59,6 +60,10 @@
       "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"
+    },
     "./horizontal-scroll": {
       "types": "./types/acorex-cdk-horizontal-scroll.d.ts",
       "default": "./fesm2022/acorex-cdk-horizontal-scroll.mjs"

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-common.d.ts

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { ChangeDetectorRef, ViewContainerRef, EventEmitter, OnDestroy, AfterViewInit, InjectionToken } from '@angular/core';
-import { AXUnsubscriber } from '@acorex/core/utils';
 import { AXValidationSummary, AXValidationRuleOptions } from '@acorex/core/validation';
+import { AXUnsubscriber } from '@acorex/core/utils';
 import { ControlValueAccessor } from '@angular/forms';
 import { DataSource, CollectionViewer } from '@angular/cdk/collections';
 import { Subject, Observable } from 'rxjs';
@@ -44,6 +44,11 @@ declare abstract class NXComponent {
     #private;
     protected isRendered: i0.Signal<boolean>;
     get nativeElement(): HTMLElement;
+    /**
+     * Gets the host HTML element of the component.
+     * Same contract as classic editors so `ax-label` / `ax-form-field` can associate the field.
+     */
+    getHostElement<T = HTMLElement>(): T;
     static ɵfac: i0.ɵɵFactoryDeclaration<NXComponent, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NXComponent>;
 }
@@ -87,66 +92,6 @@ declare abstract class NXLookComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<NXLookComponent, "ng-component", never, { "look": { "alias": "look"; "required": false; "isSignal": true; }; }, { "look": "lookChange"; }, never, never, true, never>;
 }
 
-declare abstract class NXValueComponent {
-    readonly: i0.ModelSignal<boolean>;
-    name: i0.ModelSignal<string>;
-    value: i0.ModelSignal<unknown>;
-    onValueChanged: i0.OutputEmitterRef<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<NXValueComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NXValueComponent, "ng-component", never, { "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "readonly": "readonlyChange"; "name": "nameChange"; "value": "valueChange"; "onValueChanged": "onValueChanged"; }, never, never, true, never>;
-}
-
-/**
- * A token that specifies the direction of component.
- */
-type AXDirection = 'vertical' | 'horizontal';
-
-/**
- * A token that specifies the orientation of component.
- */
-type AXOrientation = 'vertical' | 'horizontal';
-
-type AXPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
-type AXPlacementType = AXConnectedPosition | AXConnectedPosition[] | AXPlacement | AXPlacement[];
-declare function convertToPlacement(value: AXPlacementType): AXConnectedPosition[];
-interface AXConnectedPosition {
-    originX: 'start' | 'center' | 'end';
-    originY: 'top' | 'center' | 'bottom';
-    overlayX: 'start' | 'center' | 'end';
-    overlayY: 'top' | 'center' | 'bottom';
-    weight?: number;
-    offsetX?: number;
-    offsetY?: number;
-}
-declare const AX_PLACEMENT_TOP: AXConnectedPosition;
-declare const AX_PLACEMENT_TOP_START: AXConnectedPosition;
-declare const AX_PLACEMENT_TOP_END: AXConnectedPosition;
-declare const AX_PLACEMENT_BOTTOM: AXConnectedPosition;
-declare const AX_PLACEMENT_BOTTOM_START: AXConnectedPosition;
-declare const AX_PLACEMENT_BOTTOM_END: AXConnectedPosition;
-declare const AX_PLACEMENT_START: AXConnectedPosition;
-declare const AX_PLACEMENT_START_TOP: AXConnectedPosition;
-declare const AX_PLACEMENT_START_BOTTOM: AXConnectedPosition;
-declare const AX_PLACEMENT_END: AXConnectedPosition;
-declare const AX_PLACEMENT_END_TOP: AXConnectedPosition;
-declare const AX_PLACEMENT_END_BOTTOM: AXConnectedPosition;
-declare const AX_PLACEMENT_MAP: {
-    [key: string]: {
-        origin: AXConnectedPosition;
-        alts?: AXConnectedPosition[];
-    };
-};
-
-interface AXRange<T> {
-    from: T;
-    end: T;
-}
-
-/**
- * A token that specifies the  selection mode of component.
- */
-type AXSelectionMode = 'single' | 'multiple' | 'none';
-
 /**
  *  Contains native event
  * @category Events
@@ -569,6 +514,77 @@ declare abstract class AXAutocompleteParentComponent<T> extends MXValueComponent
     static ɵprov: i0.ɵɵInjectableDeclaration<AXAutocompleteParentComponent<any>>;
 }
 
+/**
+ * Signal-based value editor with the same `ax-validation-rule` / `ax-form` contract as the classic value mixins.
+ */
+declare abstract class NXValueComponent extends NXComponent {
+    #private;
+    readonly validationRulesChange: EventEmitter<AXFormValidationRule[]>;
+    get isRequired(): boolean;
+    get state(): AXComponentState;
+    protected registerValidation(): void;
+    addValidationRule(rule: AXFormValidationRule): void;
+    removeValidationRule(ruleToRemove: AXFormValidationRule): void;
+    removeValidationRuleByType(type: string): void;
+    validate(): Promise<AXValidationSummary>;
+    setState(state: AXComponentState, ...args: unknown[]): void;
+    resetErrors(): void;
+    commitValue(value: unknown, _isUserInteraction?: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NXValueComponent, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<NXValueComponent>;
+}
+
+/**
+ * A token that specifies the direction of component.
+ */
+type AXDirection = 'vertical' | 'horizontal';
+
+/**
+ * A token that specifies the orientation of component.
+ */
+type AXOrientation = 'vertical' | 'horizontal';
+
+type AXPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
+type AXPlacementType = AXConnectedPosition | AXConnectedPosition[] | AXPlacement | AXPlacement[];
+declare function convertToPlacement(value: AXPlacementType): AXConnectedPosition[];
+interface AXConnectedPosition {
+    originX: 'start' | 'center' | 'end';
+    originY: 'top' | 'center' | 'bottom';
+    overlayX: 'start' | 'center' | 'end';
+    overlayY: 'top' | 'center' | 'bottom';
+    weight?: number;
+    offsetX?: number;
+    offsetY?: number;
+}
+declare const AX_PLACEMENT_TOP: AXConnectedPosition;
+declare const AX_PLACEMENT_TOP_START: AXConnectedPosition;
+declare const AX_PLACEMENT_TOP_END: AXConnectedPosition;
+declare const AX_PLACEMENT_BOTTOM: AXConnectedPosition;
+declare const AX_PLACEMENT_BOTTOM_START: AXConnectedPosition;
+declare const AX_PLACEMENT_BOTTOM_END: AXConnectedPosition;
+declare const AX_PLACEMENT_START: AXConnectedPosition;
+declare const AX_PLACEMENT_START_TOP: AXConnectedPosition;
+declare const AX_PLACEMENT_START_BOTTOM: AXConnectedPosition;
+declare const AX_PLACEMENT_END: AXConnectedPosition;
+declare const AX_PLACEMENT_END_TOP: AXConnectedPosition;
+declare const AX_PLACEMENT_END_BOTTOM: AXConnectedPosition;
+declare const AX_PLACEMENT_MAP: {
+    [key: string]: {
+        origin: AXConnectedPosition;
+        alts?: AXConnectedPosition[];
+    };
+};
+
+interface AXRange<T> {
+    from: T;
+    end: T;
+}
+
+/**
+ * A token that specifies the  selection mode of component.
+ */
+type AXSelectionMode = 'single' | 'multiple' | 'none';
+
 type AXDataSourceOperator = {
     type: 'equal' | 'isNull' | 'isEmpty' | 'lt' | 'lte' | 'gt' | 'gte' | 'startsWith' | 'endsWith' | 'contains' | 'in';
     negative?: boolean;

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

@@ -0,0 +1,120 @@
+import * as _angular_core from '@angular/core';
+import { OnDestroy, OutputEmitterRef } from '@angular/core';
+
+/**
+ * Hammer.js event payload emitted by AXGestureDirective outputs.
+ */
+interface AXGestureEvent {
+    type: string;
+    deltaX: number;
+    deltaY: number;
+    deltaTime: number;
+    distance: number;
+    angle: number;
+    velocity: number;
+    velocityX: number;
+    velocityY: number;
+    direction: number;
+    offsetDirection: number;
+    scale: number;
+    rotation: number;
+    center: {
+        x: number;
+        y: number;
+    };
+    srcEvent: Event;
+    target: HTMLElement;
+    pointerType: string;
+    eventType: number;
+    isFirst: boolean;
+    isFinal: boolean;
+    preventDefault: () => void;
+}
+/**
+ * Hammer.js constructor options passed through to the manager.
+ */
+interface AXGestureOptions {
+    touchAction?: string;
+    enable?: boolean;
+    cssProps?: Record<string, string | number>;
+    domEvents?: boolean;
+    inputTarget?: EventTarget;
+}
+/**
+ * Allowed pan and swipe directions. Maps to Hammer.DIRECTION_* constants.
+ */
+type AXGestureDirection = 'all' | 'horizontal' | 'vertical';
+/**
+ * Public surface of the Hammer manager exposed via AXGestureDirective.manager.
+ */
+interface AXGestureManager {
+    get: (name: string) => {
+        set: (options: object) => unknown;
+    } | null;
+    on: (events: string, handler: (ev: AXGestureEvent) => void) => void;
+    off: (events: string, handler: (ev: AXGestureEvent) => void) => void;
+    destroy: () => void;
+}
+
+/**
+ * Attaches Hammer.js gesture recognition to the host element.
+ *
+ * Usage:
+ * <div axGesture [direction]="'all'" (tap)="onTap($event)" (pan)="onPan($event)"></div>
+ */
+declare class AXGestureDirective implements OnDestroy {
+    #private;
+    private readonly el;
+    private readonly zone;
+    private readonly platformId;
+    /**
+     * Extra Hammer.js options forwarded to the manager constructor.
+     */
+    options: _angular_core.InputSignal<AXGestureOptions>;
+    /**
+     * Pan and swipe direction. Defaults to horizontal, matching Hammer.js.
+     */
+    direction: _angular_core.InputSignal<AXGestureDirection>;
+    /**
+     * Enables the multi-touch pinch recognizer. Disabled by default.
+     */
+    enablePinch: _angular_core.InputSignal<boolean>;
+    /**
+     * Enables the multi-touch rotate recognizer. Disabled by default.
+     */
+    enableRotate: _angular_core.InputSignal<boolean>;
+    /**
+     * Stops gesture recognition when true.
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    tap: OutputEmitterRef<AXGestureEvent>;
+    doubletap: OutputEmitterRef<AXGestureEvent>;
+    press: OutputEmitterRef<AXGestureEvent>;
+    pan: OutputEmitterRef<AXGestureEvent>;
+    panstart: OutputEmitterRef<AXGestureEvent>;
+    panmove: OutputEmitterRef<AXGestureEvent>;
+    panend: OutputEmitterRef<AXGestureEvent>;
+    swipe: OutputEmitterRef<AXGestureEvent>;
+    pinch: OutputEmitterRef<AXGestureEvent>;
+    rotate: OutputEmitterRef<AXGestureEvent>;
+    private hammer;
+    private hammerLib;
+    private setupId;
+    private ready;
+    private readonly emitters;
+    /**
+     * The underlying Hammer manager, or null when not initialized.
+     */
+    get manager(): AXGestureManager | null;
+    ngOnDestroy(): void;
+    private setup;
+    private loadHammer;
+    private toHammerDirection;
+    private teardown;
+    private readonly onHammerEvent;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXGestureDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXGestureDirective, "[axGesture]", ["axGesture"], { "options": { "alias": "options"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "enablePinch": { "alias": "enablePinch"; "required": false; "isSignal": true; }; "enableRotate": { "alias": "enableRotate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "tap": "tap"; "doubletap": "doubletap"; "press": "press"; "pan": "pan"; "panstart": "panstart"; "panmove": "panmove"; "panend": "panend"; "swipe": "swipe"; "pinch": "pinch"; "rotate": "rotate"; }, never, never, true, never>;
+}
+
+export { AXGestureDirective };
+export type { AXGestureDirection, AXGestureEvent, AXGestureManager, AXGestureOptions };

package/types/acorex-cdk-horizontal-scroll.d.ts

@@ -1,22 +1,27 @@
 import * as _angular_core from '@angular/core';
 import { OnDestroy } from '@angular/core';
+import * as i1 from '@acorex/cdk/gesture';
 
 /**
- * Converts vertical mouse-wheel scrolling into horizontal scrolling on the host element.
- * Applies only when the host can scroll horizontally.
+ * Converts vertical mouse-wheel scrolling and horizontal pan into horizontal scrolling on the host element.
+ * Applies only when the host can scroll horizontally. Pan is provided by the hosted AXGestureDirective.
  *
  * Usage:
  * <div axHorizontalScroll [speed]="150" class="overflow-x-auto">
  *   ...
  * </div>
+ *
+ * Do not put `axGesture` on the same element; this directive already hosts it.
  */
 declare class AXHorizontalScrollDirective implements OnDestroy {
     #private;
-    private elementRef;
-    private platformId;
-    private zone;
+    private readonly elementRef;
+    private readonly platformId;
+    private readonly zone;
+    private readonly gesture;
+    private readonly destroyRef;
     /**
-     * Disables wheel-to-horizontal conversion when true.
+     * Disables wheel-to-horizontal conversion and pan scrolling when true.
      */
     disabled: _angular_core.InputSignal<boolean>;
     /**
@@ -28,17 +33,31 @@ declare class AXHorizontalScrollDirective implements OnDestroy {
     private targetScrollLeft;
     private scrollPosition;
     private lastFrameTime;
+    private isPanning;
+    private ignorePan;
+    private panStartScrollLeft;
+    private suppressClickListener;
+    private suppressClickTimer;
+    private readonly interactiveSelector;
     private readonly wheelListener;
+    constructor();
     ngOnDestroy(): void;
     private get nativeElement();
     private handleWheel;
+    private handlePanStart;
+    private handlePanMove;
+    private handlePanEnd;
+    private clearPanStyles;
+    private suppressClick;
+    private clearClickSuppression;
     private syncScrollState;
     private startAnimation;
     private applyScrollPosition;
     private stopAnimation;
     private canScrollHorizontally;
+    private getMaxScrollLeft;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXHorizontalScrollDirective, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXHorizontalScrollDirective, "[axHorizontalScroll]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXHorizontalScrollDirective, "[axHorizontalScroll]", never, { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof i1.AXGestureDirective; inputs: {}; outputs: {}; }]>;
 }
 
 export { AXHorizontalScrollDirective };