@acorex/cdk 22.2.0-next.0 → 22.2.0-next.1

package/types/acorex-cdk-overlay-scrollbar.d.ts

@@ -0,0 +1,155 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, EnvironmentProviders } from '@angular/core';
+
+/** Default delay (ms) before the overlay scrollbar fades out after scroll. */
+declare const AX_OVERLAY_SCROLLBAR_DEFAULT_HIDE_DELAY_MS = 800;
+/** Default pixels scrolled per navigation arrow click. */
+declare const AX_OVERLAY_SCROLLBAR_DEFAULT_NAV_SCROLL_STEP_PX = 40;
+/**
+ * Visual tokens for overlay scrollbars (`--ax-comp-overlay-scrollbar-*`).
+ * Values are applied to `:root` when using {@link provideOverlayScrollbar}, and inherited by scroll hosts.
+ */
+interface AXOverlayScrollbarDesignTokens {
+    size?: string;
+    thumbRadius?: string;
+    trackRadius?: string;
+    trackColor?: string;
+    thumbColor?: string;
+    thumbActiveColor?: string;
+    thumbHoverColor?: string;
+    trackActiveColor?: string;
+    thumbBorderWidth?: string;
+    thumbBorderColor?: string;
+    trackBorderWidth?: string;
+    trackBorderColor?: string;
+    fadeDuration?: string;
+}
+/** Application-wide defaults for {@link AXOverlayScrollbarDirective}. */
+interface AXOverlayScrollbarConfig {
+    /** Milliseconds before the scrollbar rail fades out after scrolling stops. */
+    hideDelay: number;
+    /** When true, shows up/down arrow buttons on the scrollbar rail. */
+    navigationButtons: boolean;
+    /** Pixels to scroll per navigation arrow click. */
+    navScrollStep: number;
+    /** Optional global design tokens (CSS custom properties). */
+    designTokens?: AXOverlayScrollbarDesignTokens;
+}
+declare const AXOverlayScrollbarDefaultConfig: AXOverlayScrollbarConfig;
+type AXPartialOverlayScrollbarConfig = Partial<AXOverlayScrollbarConfig> & {
+    designTokens?: Partial<AXOverlayScrollbarDesignTokens>;
+};
+declare const AX_OVERLAY_SCROLLBAR_CONFIG: InjectionToken<AXOverlayScrollbarConfig>;
+/** Merges partial config with {@link AXOverlayScrollbarDefaultConfig}. */
+declare function overlayScrollbarConfig(config?: AXPartialOverlayScrollbarConfig): AXOverlayScrollbarConfig;
+/** Sets overlay scrollbar CSS variables on the given element. */
+declare function applyOverlayScrollbarDesignTokens(element: HTMLElement, tokens?: AXOverlayScrollbarDesignTokens): void;
+/**
+ * Registers global overlay scrollbar defaults for the application.
+ *
+ * @example
+ * ```ts
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideOverlayScrollbar({
+ *       hideDelay: 1200,
+ *       navigationButtons: true,
+ *       navScrollStep: 48,
+ *       designTokens: {
+ *         size: '8px',
+ *         thumbColor: 'var(--ax-sys-scroller-thumb-color)',
+ *       },
+ *     }),
+ *   ],
+ * };
+ * ```
+ */
+declare function provideOverlayScrollbar(config?: AXPartialOverlayScrollbarConfig): EnvironmentProviders;
+
+declare function clampOverlayScrollbarWidth(px: number): number;
+/**
+ * Custom overlay scrollbar: native scrollbars are hidden; a positioned thumb reflects scroll position.
+ * Styles are injected once by this directive.
+ */
+declare class AXOverlayScrollbarDirective {
+    private readonly host;
+    private readonly destroyRef;
+    private readonly platformId;
+    private readonly document;
+    private readonly appConfig;
+    private rootEl;
+    private railEl;
+    private trackEl;
+    private navUpEl;
+    private navDownEl;
+    private thumbEl;
+    private resizeObserver;
+    private designTokenMutationObserver;
+    private designTokenSyncFrame;
+    private thumbDragPointerId;
+    private pointerOverRail;
+    private trackPressReleaseListener;
+    private unbindRailInteraction;
+    /** Thumb size derived from layout; position updates on scroll without re-measuring scrollHeight. */
+    private thumbLayout;
+    readonly hideDelay: _angular_core.InputSignal<number>;
+    /**
+     * When true, shows browser-style up/down arrow buttons on the rail.
+     * Styling follows track/thumb CSS tokens.
+     */
+    readonly navigationButtons: _angular_core.InputSignal<boolean>;
+    /** Pixels to scroll per arrow click. */
+    readonly navScrollStep: _angular_core.InputSignal<number>;
+    private hideTimer;
+    constructor();
+    /** Host and rail are siblings under the root; mirror CSS variables when the host style/class changes. */
+    private observeHostDesignTokenChanges;
+    private queueDesignTokenSync;
+    /** Rail lives on a wrapper so it stays fixed while the host scrolls. */
+    private ensureScrollRoot;
+    private mountCustomScrollbar;
+    private ensureRailStructure;
+    private createNavButton;
+    private resolveNavScrollStepPx;
+    private scrollByNavStep;
+    private bindRailInteraction;
+    private unmountCustomScrollbar;
+    private remeasureCustomThumb;
+    private syncThumbPosition;
+    /** Move thumb (and scroll position) to the pointer Y on the track. */
+    private jumpScrollToTrackPointer;
+    private onThumbPointerDown;
+    private showScrollbar;
+    private bumpVisibility;
+    private deactivateThumb;
+    private setScrollbarEngaged;
+    private setTrackPressed;
+    private isPointerOverThumbVisual;
+    private beginTrackPressed;
+    private clearTrackPressed;
+    private syncEngagedAfterScroll;
+    private scheduleHide;
+    private clearHideTimer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXOverlayScrollbarDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AXOverlayScrollbarDirective, "[axOverlayScrollbar]", ["axOverlayScrollbar"], { "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; "navigationButtons": { "alias": "navigationButtons"; "required": false; "isSignal": true; }; "navScrollStep": { "alias": "navScrollStep"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** CSS custom properties for overlay scrollbar styling (set on the scroll host or in CSS). */
+declare const AX_OVERLAY_SCROLLBAR_CSS_VARS: {
+    readonly size: "--ax-comp-overlay-scrollbar-size";
+    readonly thumbRadius: "--ax-comp-overlay-scrollbar-thumb-radius";
+    readonly trackRadius: "--ax-comp-overlay-scrollbar-track-radius";
+    readonly trackColor: "--ax-comp-overlay-scrollbar-track-color";
+    readonly thumbColor: "--ax-comp-overlay-scrollbar-thumb-color";
+    readonly thumbActiveColor: "--ax-comp-overlay-scrollbar-thumb-active-color";
+    readonly thumbHoverColor: "--ax-comp-overlay-scrollbar-thumb-hover-color";
+    readonly trackActiveColor: "--ax-comp-overlay-scrollbar-track-active-color";
+    readonly thumbBorderWidth: "--ax-comp-overlay-scrollbar-thumb-border-width";
+    readonly thumbBorderColor: "--ax-comp-overlay-scrollbar-thumb-border-color";
+    readonly trackBorderWidth: "--ax-comp-overlay-scrollbar-track-border-width";
+    readonly trackBorderColor: "--ax-comp-overlay-scrollbar-track-border-color";
+    readonly fadeDuration: "--ax-comp-overlay-scrollbar-fade-duration";
+};
+
+export { AXOverlayScrollbarDefaultConfig, AXOverlayScrollbarDirective, AX_OVERLAY_SCROLLBAR_CONFIG, AX_OVERLAY_SCROLLBAR_CSS_VARS, AX_OVERLAY_SCROLLBAR_DEFAULT_HIDE_DELAY_MS, AX_OVERLAY_SCROLLBAR_DEFAULT_NAV_SCROLL_STEP_PX, applyOverlayScrollbarDesignTokens, clampOverlayScrollbarWidth, overlayScrollbarConfig, provideOverlayScrollbar };
+export type { AXOverlayScrollbarConfig, AXOverlayScrollbarDesignTokens, AXPartialOverlayScrollbarConfig };

package/types/acorex-cdk-text-editor.d.ts

@@ -0,0 +1,156 @@
+import * as _angular_core from '@angular/core';
+import * as _tiptap_core from '@tiptap/core';
+import { Content, Extensions, Editor, JSONContent } from '@tiptap/core';
+
+type AXTextEditorTiptapEditor = Editor;
+type AXTextEditorTiptapContent = Content;
+type AXTextEditorTiptapJSON = JSONContent;
+type AXTextEditorTiptapChain = ReturnType<Editor['chain']>;
+type AXTextEditorHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type AXTextEditorTextAlign = 'left' | 'center' | 'right' | 'justify';
+type AXTextEditorTextDirection = 'rtl' | 'ltr';
+type AXTextEditorFontSizeToken = 'small' | 'large' | 'huge';
+declare const AX_TEXT_EDITOR_FONT_SIZE_TOKEN_VALUES: Record<AXTextEditorFontSizeToken, string>;
+type AXTextEditorCommandAttrs = Record<string, unknown>;
+declare const AX_TEXT_EDITOR_ZOOM_PRESETS: readonly [40, 50, 75, 90, 100, 125, 150, 175, 200];
+declare const AX_TEXT_EDITOR_ZOOM_MIN = 40;
+declare const AX_TEXT_EDITOR_ZOOM_MAX = 200;
+declare const AX_TEXT_EDITOR_FONT_SIZES: readonly [8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, 72];
+type AXTextEditorFontSize = (typeof AX_TEXT_EDITOR_FONT_SIZES)[number];
+declare const AX_TEXT_EDITOR_DEFAULT_TEXT_COLORS: string[];
+declare const AX_TEXT_EDITOR_DEFAULT_BACKGROUND_COLORS: string[];
+interface AXTextEditorRecentColor {
+    color: string;
+    kind: 'text' | 'background';
+}
+type AXTextEditorCommandType = 'undo' | 'redo' | 'bold' | 'italic' | 'underline' | 'strike' | 'heading' | 'paragraph' | 'align' | 'direction' | 'color' | 'highlight' | 'fontSize' | 'bulletList' | 'orderedList' | 'superscript' | 'subscript' | 'link' | 'unlink' | 'blockquote' | 'code' | 'codeBlock' | 'horizontalRule' | 'image' | 'video' | 'insertTable' | 'addColumnBefore' | 'addColumnAfter' | 'deleteColumn' | 'addRowBefore' | 'addRowAfter' | 'deleteRow' | 'toggleHeaderRow' | 'deleteTable';
+interface AXTextEditorFeatures {
+    table?: boolean;
+    image?: boolean;
+    video?: boolean;
+    superscript?: boolean;
+    subscript?: boolean;
+    keepSelection?: boolean;
+    placeholder?: boolean;
+}
+declare const AX_DEFAULT_TEXT_EDITOR_FEATURES: AXTextEditorFeatures;
+interface AXTextEditorLoadExtensionsOptions {
+    placeholder?: string | (() => string);
+    features?: AXTextEditorFeatures;
+    headingLevels?: AXTextEditorHeadingLevel[];
+    extensions?: Extensions;
+}
+interface AXTextEditorState {
+    bold: boolean;
+    italic: boolean;
+    underline: boolean;
+    strike: boolean;
+    code: boolean;
+    codeBlock: boolean;
+    headingLevel: AXTextEditorHeadingLevel | null;
+    bulletList: boolean;
+    orderedList: boolean;
+    blockquote: boolean;
+    superscript: boolean;
+    subscript: boolean;
+    textAlign: AXTextEditorTextAlign | null;
+    textColor: string | null;
+    highlightColor: string | null;
+    linkHref: string | null;
+    fontSize: string | null;
+    textDirection: AXTextEditorTextDirection | null;
+    table: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    isEmpty: boolean;
+    isFocused: boolean;
+}
+declare const AX_EMPTY_TEXT_EDITOR_STATE: AXTextEditorState;
+interface AXTextEditorInitOptions {
+    content?: AXTextEditorTiptapContent;
+    editable?: boolean;
+    placeholder?: string | (() => string);
+    features?: AXTextEditorFeatures;
+    headingLevels?: AXTextEditorHeadingLevel[];
+    extensions?: Extensions;
+    editorProps?: _tiptap_core.EditorOptions['editorProps'];
+    /** @deprecated Use `editable: false` instead. */
+    readOnly?: boolean;
+    onUpdate?: (editor: AXTextEditorTiptapEditor) => void;
+    onFocus?: (editor: AXTextEditorTiptapEditor, event?: FocusEvent) => void;
+    onBlur?: (editor: AXTextEditorTiptapEditor, event?: FocusEvent) => void;
+    onSelectionUpdate?: (editor: AXTextEditorTiptapEditor) => void;
+    onTransaction?: (editor: AXTextEditorTiptapEditor) => void;
+}
+declare module '@tiptap/core' {
+    interface Commands<ReturnType> {
+        superscript: {
+            toggleSuperscript: () => ReturnType;
+        };
+        subscript: {
+            toggleSubscript: () => ReturnType;
+        };
+        axTextEditorFontSize: {
+            setFontSize: (size: string | null) => ReturnType;
+        };
+        axTextEditorVideo: {
+            setVideo: (options: {
+                src: string;
+            }) => ReturnType;
+        };
+    }
+}
+
+declare class AXTextEditor {
+    readonly editor: _angular_core.WritableSignal<_tiptap_core.Editor>;
+    readonly state: _angular_core.WritableSignal<AXTextEditorState>;
+    readonly ready: _angular_core.WritableSignal<boolean>;
+    readonly version: _angular_core.WritableSignal<number>;
+    private readonly platformId;
+    private destroyed;
+    private applyingContent;
+    init(container: HTMLElement | string, options?: AXTextEditorInitOptions): Promise<void>;
+    destroy(): void;
+    refresh(): void;
+    setContent(value: AXTextEditorTiptapContent | null | undefined, emit?: boolean): void;
+    getHTML(): string;
+    getJSON(): AXTextEditorTiptapJSON | null;
+    getText(options?: {
+        blockSeparator?: string;
+    }): string;
+    isEmpty(): boolean;
+    isFocused(): boolean;
+    isEditable(): boolean;
+    setEditable(editable: boolean): void;
+    focus(): void;
+    blur(): void;
+    chain(): AXTextEditorTiptapChain | null;
+    get commands(): AXTextEditorTiptapEditor['commands'] | undefined;
+    isActive(command: AXTextEditorCommandType, attrs?: AXTextEditorCommandAttrs): boolean;
+    can(command: AXTextEditorCommandType, attrs?: AXTextEditorCommandAttrs): boolean;
+    run(command: AXTextEditorCommandType, attrs?: AXTextEditorCommandAttrs): boolean;
+    private commandsApi;
+    private getCommandsApi;
+    insertContent(value: AXTextEditorTiptapContent): boolean;
+    clearContent(): boolean;
+    insertImage(src: string, alt?: string): void;
+    insertVideo(src: string): void;
+    setLink(href: string): void;
+    unsetLink(): void;
+    clearFormatting(): void;
+    toggleHeading(level: AXTextEditorHeadingLevel): void;
+    setTextAlign(align: AXTextEditorTextAlign): void;
+    setTextDirection(direction: AXTextEditorTextDirection): void;
+    private refreshState;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXTextEditor, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<any>;
+}
+
+declare function isTextEditorCommandActive(editor: AXTextEditorTiptapEditor, command: AXTextEditorCommandType, attrs?: AXTextEditorCommandAttrs): boolean;
+declare function canRunTextEditorCommand(editor: AXTextEditorTiptapEditor, command: AXTextEditorCommandType, attrs?: AXTextEditorCommandAttrs): boolean;
+declare function runTextEditorCommand(editor: AXTextEditorTiptapEditor, command: AXTextEditorCommandType, attrs?: AXTextEditorCommandAttrs): boolean;
+
+declare function createTextEditorExtensions(placeholderOrOptions?: string | (() => string) | AXTextEditorLoadExtensionsOptions): Promise<_tiptap_core.AnyExtension[]>;
+
+export { AXTextEditor, AX_DEFAULT_TEXT_EDITOR_FEATURES, AX_EMPTY_TEXT_EDITOR_STATE, AX_TEXT_EDITOR_DEFAULT_BACKGROUND_COLORS, AX_TEXT_EDITOR_DEFAULT_TEXT_COLORS, AX_TEXT_EDITOR_FONT_SIZES, AX_TEXT_EDITOR_FONT_SIZE_TOKEN_VALUES, AX_TEXT_EDITOR_ZOOM_MAX, AX_TEXT_EDITOR_ZOOM_MIN, AX_TEXT_EDITOR_ZOOM_PRESETS, canRunTextEditorCommand, createTextEditorExtensions, isTextEditorCommandActive, runTextEditorCommand };
+export type { AXTextEditorCommandAttrs, AXTextEditorCommandType, AXTextEditorFeatures, AXTextEditorFontSize, AXTextEditorFontSizeToken, AXTextEditorHeadingLevel, AXTextEditorInitOptions, AXTextEditorLoadExtensionsOptions, AXTextEditorRecentColor, AXTextEditorState, AXTextEditorTextAlign, AXTextEditorTextDirection, AXTextEditorTiptapChain, AXTextEditorTiptapContent, AXTextEditorTiptapEditor, AXTextEditorTiptapJSON };

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

@@ -64,6 +64,9 @@ interface AXWysiwygLoadExtensionsOptions {
     placeholder?: string;
 }
 
+/**
+ * @deprecated Use `AXTextEditor` from `@acorex/cdk/text-editor` instead.
+ */
 declare class AXWysiwyg {
     readonly editor: _angular_core.WritableSignal<Editor>;
     readonly state: _angular_core.WritableSignal<AXWysiwygState>;