@acorex/components 22.0.0 → 22.0.1-next.0

package/types/acorex-components-image-editor.d.ts

@@ -2,15 +2,6 @@ import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, ElementRef, Renderer2 } from '@angular/core';
 import { MXBaseComponent, MXInputBaseValueComponent, MXLookComponent } from '@acorex/cdk/common';
-import * as i1 from '@acorex/components/button';
-import * as i2 from '@angular/forms';
-import * as i3 from '@acorex/components/range-slider';
-import * as i4 from '@acorex/components/select-box';
-import * as i5 from '@acorex/components/color-box';
-import * as i6 from '@acorex/components/popover';
-import * as i7 from '@acorex/components/decorators';
-import * as i8 from '@acorex/components/loading';
-import * as i9 from '@acorex/components/dialog';
 
 type AXImageEditorTool = 'pen' | 'highlight' | 'crop' | 'rotate';
 declare class AXImageEditorService {
@@ -25,19 +16,27 @@ declare class AXImageEditorService {
         userInteract: boolean;
     }>;
     isImageLoad: _angular_core.WritableSignal<boolean>;
+    loadError: _angular_core.WritableSignal<boolean>;
     newImage: HTMLImageElement | null;
     initialImage: HTMLImageElement | null;
     imageBlob: _angular_core.WritableSignal<Blob[]>;
     undoPressed: _angular_core.WritableSignal<boolean>;
     redoPressed: _angular_core.WritableSignal<boolean>;
+    canUndo: _angular_core.WritableSignal<boolean>;
+    canRedo: _angular_core.WritableSignal<boolean>;
     cropperRatio: _angular_core.WritableSignal<string>;
     cropperSize: _angular_core.WritableSignal<number>;
     toggleTool(tool: AXImageEditorTool): void;
     activateTool(tool: AXImageEditorTool): void;
+    undo(): void;
+    redo(): void;
+    /** Handles Ctrl/Cmd+Z and Ctrl/Cmd+Y history shortcuts. Returns true when handled. */
+    handleHistoryShortcut(event: KeyboardEvent): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXImageEditorService>;
 }
 
+type AXImageEditorCropHandle = 'right' | 'top' | 'left' | 'bottom' | 'right-top' | 'bottom-right' | 'bottom-left' | 'left-top';
 /**
  * paint mode.
  * @category Components
@@ -55,39 +54,41 @@ declare class AXImageEditorCropperWindowComponent implements OnDestroy {
     protected cropperWindow: _angular_core.Signal<ElementRef<any>>;
     private currentX;
     private currentY;
-    private prevX;
-    private prevY;
     private aspectWidth;
     private aspectHeight;
     private isMousePressed;
     protected renderer: Renderer2;
     private platformID;
-    private mouseMoveEvent;
-    private mouseUpEvent;
-    private mouseMoveEvent2;
-    private mouseUpEvent2;
-    private mouseDownEvent;
-    private mouseLeaveEvent;
+    private mouseMoveEvent?;
+    private mouseUpEvent?;
+    private mouseMoveEvent2?;
+    private mouseUpEvent2?;
+    private mouseDownEvent?;
+    private mouseLeaveEvent?;
+    private positioned;
     ngOnDestroy(): void;
-    protected panMove(e: MouseEvent): void;
-    protected panDown(e: MouseEvent): void;
+    protected panMove(e: PointerEvent): void;
+    protected panDown(e: PointerEvent): void;
     protected panUp(): void;
     getCropperArea(): DOMRect;
-    private setPosition;
     private startX;
     private startY;
     private startWidth;
     private startHeight;
     private startLeft;
     private startTop;
-    protected handleSelector(e: MouseEvent, value: string): void;
-    protected changeSizeHandler(e: MouseEvent): void;
+    protected handleSelector(e: PointerEvent, value: AXImageEditorCropHandle): void;
+    protected changeSizeHandler(e: PointerEvent): void;
     protected clearSelector(): void;
+    private normalizeRatio;
+    private centerOnParent;
+    private clampToParent;
+    private applyPosition;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorCropperWindowComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorCropperWindowComponent, "ax-image-editor-cropper-window", never, { "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-declare class AXImageEditorViewComponent extends MXBaseComponent implements OnDestroy {
+declare class AXImageEditorViewComponent extends MXBaseComponent {
     /**
      * its change grid display state.
      */
@@ -118,44 +119,54 @@ declare class AXImageEditorViewComponent extends MXBaseComponent implements OnDe
     protected isDrawRectangleCreated: _angular_core.WritableSignal<boolean>;
     /** @ignore */
     protected parent: AXImageEditorContainerComponent;
-    /** @ignore */
-    protected renderer: Renderer2;
+    private readonly destroyRef;
+    private readonly host;
     /** @ignore */
     protected imageEditorHistory: _angular_core.WritableSignal<HTMLImageElement[]>;
     /** @ignore */
     protected imageEditorHistoryPointer: _angular_core.WritableSignal<number>;
-    /** @ignore */
-    private resizeEventListener;
-    /** @ignore */
-    private imageLoadEventListener;
-    private originalWidth;
-    private originalHeight;
-    private scale;
+    private canvasReady;
+    private drawing;
+    private didDraw;
+    private highlightSnapshot;
+    private highlightPoints;
+    private persistGeneration;
+    private sourceToken;
+    constructor();
     /** @ignore */
     protected resizeWindow(): void;
     /** @ignore */
     protected canvasResponsive(image: HTMLImageElement): void;
-    /** @ignore */
-    constructor();
-    /** @ignore */
-    ngOnDestroy(): void;
-    private setInitialImage;
-    /** @ignore */
-    protected imageChanged(): void;
+    private loadSource;
+    private paintImage;
+    private fitCanvasDisplay;
+    private replaceHistory;
+    private pushHistory;
+    private syncHistoryFlags;
+    private applyUndo;
+    private applyRedo;
+    private canvasPoint;
+    private isDrawTool;
     /** @ignore */
     protected penConfigHandler(penType: 'pen' | 'highlight'): void;
+    private strokeHighlight;
     /** @ignore */
-    protected mouseDownHandler(e: MouseEvent): void;
+    protected historyKeyDown(event: KeyboardEvent): void;
     /** @ignore */
-    protected mouseMoveHandler(e: MouseEvent): void;
+    protected focusCanvas(): void;
     /** @ignore */
-    protected mouseUpHandler(): void;
+    protected mouseDownHandler(event: PointerEvent): void;
     /** @ignore */
-    crop(): Promise<void>;
+    protected mouseMoveHandler(event: PointerEvent): void;
     /** @ignore */
-    protected rotateImage(): void;
+    protected mouseUpHandler(event?: PointerEvent): void;
+    /** Applies the current cropper selection. */
+    crop(): Promise<void>;
+    /** Encodes the current canvas into JPEG, PNG, and WebP blobs. */
+    commitChanges(): Promise<Blob[]>;
     /** @ignore */
-    protected saveImageChange(): Promise<void>;
+    protected rotateImage(): Promise<void>;
+    private persistCanvas;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorViewComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorViewComponent, "ax-image-editor-view", never, { "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "cropperSize": { "alias": "cropperSize"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -173,12 +184,21 @@ declare class AXImageEditorContainerComponent extends AXImageEditorContainerComp
     #private;
     /** @ignore */
     protected service: AXImageEditorService;
+    private readonly host;
+    private readonly destroyRef;
     imageEditorContainer: _angular_core.Signal<ElementRef<any>>;
     view: _angular_core.Signal<AXImageEditorViewComponent>;
+    constructor();
+    /** @ignore */
+    protected focusEditor(): void;
     /** Applies the current cropper selection. */
     crop(): Promise<void>;
-    get __hostClass(): string;
-    private get __hostName();
+    /** @ignore */
+    protected onEditorPointerDown(event: PointerEvent): void;
+    /** @ignore */
+    protected handleHistoryShortcut(event: KeyboardEvent): void;
+    /** Encodes the current canvas into JPEG, PNG, and WebP blobs. */
+    commitChanges(): Promise<Blob[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorContainerComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorContainerComponent, "ax-image-editor-container", never, { "look": { "alias": "look"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onValueChanged": "onValueChanged"; }, ["view"], ["ax-header", "ax-image-editor-view", "ax-footer", "ax-validation-rule"], true, never>;
 }
@@ -287,7 +307,7 @@ declare class AXImageEditorToolSelectorComponent {
 
 declare class AXImageEditorModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXImageEditorModule, never, [typeof i1.AXButtonModule, typeof i2.FormsModule, typeof i3.AXRangeSliderModule, typeof i4.AXSelectBoxModule, typeof i5.AXColorBoxModule, typeof i6.AXPopoverModule, typeof i7.AXDecoratorModule, typeof i8.AXLoadingModule, typeof i9.AXDialogModule, typeof AXImageEditorViewComponent, typeof AXImageEditorContainerComponent, typeof AXImageEditorCropComponent, typeof AXImageEditorHistoryComponent, typeof AXImageEditorToolSelectorComponent, typeof AXImageEditorToolsBarComponent, typeof AXImageEditorPenComponent, typeof AXImageEditorHighlightComponent, typeof AXImageEditorRotateComponent, typeof AXImageEditorCropperWindowComponent], [typeof AXImageEditorViewComponent, typeof AXImageEditorContainerComponent, typeof AXImageEditorCropComponent, typeof AXImageEditorHistoryComponent, typeof AXImageEditorToolSelectorComponent, typeof AXImageEditorToolsBarComponent, typeof AXImageEditorPenComponent, typeof AXImageEditorHighlightComponent, typeof AXImageEditorRotateComponent, typeof AXImageEditorCropperWindowComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXImageEditorModule, never, [typeof AXImageEditorViewComponent, typeof AXImageEditorContainerComponent, typeof AXImageEditorCropComponent, typeof AXImageEditorHistoryComponent, typeof AXImageEditorToolSelectorComponent, typeof AXImageEditorToolsBarComponent, typeof AXImageEditorPenComponent, typeof AXImageEditorHighlightComponent, typeof AXImageEditorRotateComponent, typeof AXImageEditorCropperWindowComponent], [typeof AXImageEditorViewComponent, typeof AXImageEditorContainerComponent, typeof AXImageEditorCropComponent, typeof AXImageEditorHistoryComponent, typeof AXImageEditorToolSelectorComponent, typeof AXImageEditorToolsBarComponent, typeof AXImageEditorPenComponent, typeof AXImageEditorHighlightComponent, typeof AXImageEditorRotateComponent, typeof AXImageEditorCropperWindowComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXImageEditorModule>;
 }
 

package/types/acorex-components-inline-reaction.d.ts

@@ -0,0 +1,52 @@
+import * as _angular_core from '@angular/core';
+import { AXEmoji } from '@acorex/core/constants';
+
+declare class AXInlineReactionComponent {
+    private readonly elementRef;
+    private readonly document;
+    private readonly platformId;
+    readonly emojis: _angular_core.InputSignal<readonly AXEmoji[]>;
+    readonly size: _angular_core.InputSignal<number>;
+    /** Whether the reaction bar is expanded to show all emojis. */
+    readonly expanded: _angular_core.WritableSignal<boolean>;
+    /**
+     * Maximum number of emojis to display in the bar.
+     *
+     * @defaultValue 8
+     */
+    readonly maxVisible: _angular_core.InputSignal<number>;
+    /**
+     * When true, hides the expand button and always shows the collapsed bar only.
+     *
+     * @defaultValue false
+     */
+    readonly showExpanded: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, collapses the bar when the user clicks outside the component.
+     *
+     * @defaultValue true
+     */
+    readonly closeOnClickOutside: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the user clicks a quick reaction.
+     */
+    readonly selected: _angular_core.OutputEmitterRef<AXEmoji>;
+    /**
+     * Emits when the expanded state changes (expand button or click outside).
+     */
+    readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
+    protected readonly visibleEmojis: _angular_core.Signal<readonly AXEmoji[]>;
+    constructor();
+    protected toggleExpanded(event: Event): void;
+    private setExpanded;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXInlineReactionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXInlineReactionComponent, "ax-inline-reaction", never, { "emojis": { "alias": "emojis"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "maxVisible": { "alias": "maxVisible"; "required": false; "isSignal": true; }; "showExpanded": { "alias": "showExpanded"; "required": false; "isSignal": true; }; "closeOnClickOutside": { "alias": "closeOnClickOutside"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "expandedChange": "expandedChange"; }, never, never, true, never>;
+}
+
+declare class AXInlineReactionModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXInlineReactionModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXInlineReactionModule, never, [typeof AXInlineReactionComponent], [typeof AXInlineReactionComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXInlineReactionModule>;
+}
+
+export { AXInlineReactionComponent, AXInlineReactionModule };