@acorex/components 20.8.22 → 20.8.24

package/image-editor/index.d.ts

@@ -12,8 +12,9 @@ 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 {
-    activeToolState: _angular_core.WritableSignal<"pen" | "highlight" | "crop" | "rotate" | "history">;
+    activeToolState: _angular_core.WritableSignal<AXImageEditorTool>;
     penColor: _angular_core.WritableSignal<string | CanvasGradient | CanvasPattern>;
     highlightColor: _angular_core.WritableSignal<string | CanvasGradient | CanvasPattern>;
     penWidth: _angular_core.WritableSignal<number>;
@@ -30,6 +31,9 @@ declare class AXImageEditorService {
     undoPressed: _angular_core.WritableSignal<boolean>;
     redoPressed: _angular_core.WritableSignal<boolean>;
     cropperRatio: _angular_core.WritableSignal<string>;
+    cropperSize: _angular_core.WritableSignal<number>;
+    toggleTool(tool: AXImageEditorTool): void;
+    activateTool(tool: AXImageEditorTool): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXImageEditorService>;
 }
@@ -41,6 +45,8 @@ declare class AXImageEditorService {
 declare class AXImageEditorCropperWindowComponent implements OnDestroy {
     #private;
     readonly showGrid: _angular_core.InputSignal<boolean>;
+    /** Base size in pixels used to calculate the initial cropper window dimensions. */
+    readonly size: _angular_core.InputSignal<number>;
     protected service: AXImageEditorService;
     private ngZone;
     private selectedHandle;
@@ -78,7 +84,7 @@ declare class AXImageEditorCropperWindowComponent implements OnDestroy {
     protected changeSizeHandler(e: MouseEvent): void;
     protected clearSelector(): void;
     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; }; }, {}, never, never, true, 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 {
@@ -86,6 +92,10 @@ declare class AXImageEditorViewComponent extends MXBaseComponent implements OnDe
      * its change grid display state.
      */
     readonly showGrid: _angular_core.InputSignal<boolean>;
+    /**
+     * Base size in pixels for the initial cropper window dimensions.
+     */
+    readonly cropperSize: _angular_core.InputSignal<number>;
     /**
      * its change grid display state.
      */
@@ -141,13 +151,13 @@ declare class AXImageEditorViewComponent extends MXBaseComponent implements OnDe
     /** @ignore */
     protected mouseUpHandler(): void;
     /** @ignore */
-    cropButtonHandler(): void;
+    crop(): void;
     /** @ignore */
     protected rotateImage(): void;
     /** @ignore */
     protected saveImageChange(): Promise<void>;
     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; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; }, {}, never, never, true, 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>;
 }
 
 declare const AXImageEditorContainerComponent_base: polytype.Polytype.ClusteredConstructor<[{
@@ -165,41 +175,48 @@ declare class AXImageEditorContainerComponent extends AXImageEditorContainerComp
     protected service: AXImageEditorService;
     imageEditorContainer: _angular_core.Signal<ElementRef<any>>;
     view: _angular_core.Signal<AXImageEditorViewComponent>;
-    aspectRatio: _angular_core.InputSignal<string[]>;
-    protected cropButtonHandler(): void;
+    /** Applies the current cropper selection. */
+    crop(): void;
     get __hostClass(): string;
     private get __hostName();
     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; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; }, ["view"], ["ax-header", "ax-image-editor-view", "ax-validation-rule"], true, 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>;
 }
 
 /**
- * paint mode.
+ * Base class for image editor tool trigger components.
  * @category Components
  */
-declare class AXImageEditorCropComponent {
+declare abstract class AXImageEditorToolComponent {
     protected service: AXImageEditorService;
-    cropPressed: _angular_core.OutputEmitterRef<void>;
+    abstract readonly tool: AXImageEditorTool;
+    setActive(): void;
+}
+
+/**
+ * Crop tool trigger for the image editor toolbar.
+ * @category Components
+ */
+declare class AXImageEditorCropComponent extends AXImageEditorToolComponent {
+    #private;
+    readonly tool = "crop";
+    private container;
+    /** Aspect ratio presets. Append `:active` to mark the default ratio, e.g. `'2:1:active'`. */
     aspectRatio: _angular_core.InputSignal<string[]>;
-    protected cropButtonHandler(): void;
-    protected ratioHandler(r: '1:1' | '16:9' | string): void;
+    /** Base size in pixels for the initial cropper window dimensions. */
+    size: _angular_core.InputSignal<number>;
+    /** Applies the current cropper selection. */
+    crop(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorCropComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorCropComponent, "ax-image-editor-crop", never, { "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, { "cropPressed": "cropPressed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorCropComponent, "ax-image-editor-crop", never, { "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
- * paint mode.
+ * Highlight tool trigger for the image editor toolbar.
  * @category Components
  */
-declare class AXImageEditorHighlightComponent {
-    protected service: AXImageEditorService;
-    /** @ignore */
-    protected selectedColor: _angular_core.WritableSignal<string | CanvasGradient | CanvasPattern>;
-    /** @ignore */
-    protected value: number;
-    protected changeColorHandler(e: string): void;
-    /** @ignore */
-    protected valueHandler(e: number): void;
+declare class AXImageEditorHighlightComponent extends AXImageEditorToolComponent {
+    readonly tool = "highlight";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorHighlightComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorHighlightComponent, "ax-image-editor-highlight", never, {}, {}, never, never, true, never>;
 }
@@ -217,52 +234,62 @@ declare class AXImageEditorHistoryComponent {
 }
 
 /**
- * paint mode.
+ * Pen tool trigger for the image editor toolbar.
  * @category Components
  */
-declare class AXImageEditorPenComponent {
-    protected service: AXImageEditorService;
-    /** @ignore */
-    protected value: number;
-    /** @ignore */
-    protected selectedColor: _angular_core.WritableSignal<string | CanvasGradient | CanvasPattern>;
-    protected changeColorHandler(e: string): void;
-    /** @ignore */
-    protected valueHandler(e: number): void;
+declare class AXImageEditorPenComponent extends AXImageEditorToolComponent {
+    readonly tool = "pen";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorPenComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorPenComponent, "ax-image-editor-pen", never, {}, {}, never, never, true, never>;
 }
 
 /**
- * paint mode.
+ * Rotate tool trigger for the image editor toolbar.
  * @category Components
  */
-declare class AXImageEditorRotateComponent {
-    /** @ignore */
-    protected service: AXImageEditorService;
-    /** @ignore */
-    protected rotateRightHandler(): void;
-    /** @ignore */
-    protected rotateLeftHandler(): void;
+declare class AXImageEditorRotateComponent extends AXImageEditorToolComponent {
+    readonly tool = "rotate";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorRotateComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorRotateComponent, "ax-image-editor-rotate", never, {}, {}, never, never, true, never>;
 }
 
 /**
- * paint mode.
+ * Toolbar layout for configurable image editor tools.
  * @category Components
  */
-declare class AXImageEditorToolSelectorComponent {
+declare class AXImageEditorToolsBarComponent {
+    #private;
     protected service: AXImageEditorService;
-    protected changeToolHandler(tool: 'pen' | 'highlight' | 'crop' | 'rotate'): void;
+    /**
+     * Tool component reference to activate on load.
+     */
+    active: _angular_core.InputSignal<AXImageEditorToolComponent>;
+    /** Hides the tools bar UI while keeping projected tools configurable. */
+    hidden: _angular_core.InputSignal<boolean>;
+    protected penTool: _angular_core.Signal<AXImageEditorPenComponent>;
+    protected highlightTool: _angular_core.Signal<AXImageEditorHighlightComponent>;
+    protected cropTool: _angular_core.Signal<AXImageEditorCropComponent>;
+    protected rotateTool: _angular_core.Signal<AXImageEditorRotateComponent>;
+    protected cropAspectRatio: _angular_core.Signal<string[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorToolsBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorToolsBarComponent, "ax-image-editor-tools-bar", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; }, {}, ["penTool", "highlightTool", "cropTool", "rotateTool"], ["ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate"], true, never>;
+}
+
+/**
+ * Convenience wrapper that includes all image editor tools.
+ * @category Components
+ */
+declare class AXImageEditorToolSelectorComponent {
+    aspectRatio: _angular_core.InputSignal<string[]>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXImageEditorToolSelectorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorToolSelectorComponent, "ax-image-editor-tool-selector", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXImageEditorToolSelectorComponent, "ax-image-editor-tool-selector", never, { "aspectRatio": { "alias": "aspectRatio"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 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 AXImageEditorPenComponent, typeof AXImageEditorHighlightComponent, typeof AXImageEditorRotateComponent, typeof AXImageEditorCropperWindowComponent], [typeof AXImageEditorViewComponent, typeof AXImageEditorContainerComponent, typeof AXImageEditorCropComponent, typeof AXImageEditorHistoryComponent, typeof AXImageEditorToolSelectorComponent, typeof AXImageEditorPenComponent, typeof AXImageEditorHighlightComponent, typeof AXImageEditorRotateComponent, typeof AXImageEditorCropperWindowComponent]>;
+    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 ɵinj: _angular_core.ɵɵInjectorDeclaration<AXImageEditorModule>;
 }
 
-export { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorCropperWindowComponent, AXImageEditorHighlightComponent, AXImageEditorHistoryComponent, AXImageEditorModule, AXImageEditorPenComponent, AXImageEditorRotateComponent, AXImageEditorService, AXImageEditorToolSelectorComponent, AXImageEditorViewComponent };
+export { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorCropperWindowComponent, AXImageEditorHighlightComponent, AXImageEditorHistoryComponent, AXImageEditorModule, AXImageEditorPenComponent, AXImageEditorRotateComponent, AXImageEditorService, AXImageEditorToolComponent, AXImageEditorToolSelectorComponent, AXImageEditorToolsBarComponent, AXImageEditorViewComponent };
+export type { AXImageEditorTool };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@acorex/components",
-  "version": "20.8.22",
+  "version": "20.8.24",
   "peerDependencies": {
-    "@acorex/core": "20.8.22",
-    "@acorex/cdk": "20.8.22",
+    "@acorex/core": "20.8.24",
+    "@acorex/cdk": "20.8.24",
     "polytype": ">=0.17.0",
     "angular-imask": ">=7.6.1",
     "gridstack": ">=12.0.0",
@@ -60,14 +60,14 @@
       "types": "./accordion/index.d.ts",
       "default": "./fesm2022/acorex-components-accordion.mjs"
     },
-    "./alert": {
-      "types": "./alert/index.d.ts",
-      "default": "./fesm2022/acorex-components-alert.mjs"
-    },
     "./action-sheet": {
       "types": "./action-sheet/index.d.ts",
       "default": "./fesm2022/acorex-components-action-sheet.mjs"
     },
+    "./alert": {
+      "types": "./alert/index.d.ts",
+      "default": "./fesm2022/acorex-components-alert.mjs"
+    },
     "./aspect-ratio": {
       "types": "./aspect-ratio/index.d.ts",
       "default": "./fesm2022/acorex-components-aspect-ratio.mjs"
@@ -172,14 +172,14 @@
       "types": "./datetime-box/index.d.ts",
       "default": "./fesm2022/acorex-components-datetime-box.mjs"
     },
-    "./datetime-input": {
-      "types": "./datetime-input/index.d.ts",
-      "default": "./fesm2022/acorex-components-datetime-input.mjs"
-    },
     "./datetime-picker": {
       "types": "./datetime-picker/index.d.ts",
       "default": "./fesm2022/acorex-components-datetime-picker.mjs"
     },
+    "./datetime-input": {
+      "types": "./datetime-input/index.d.ts",
+      "default": "./fesm2022/acorex-components-datetime-input.mjs"
+    },
     "./decorators": {
       "types": "./decorators/index.d.ts",
       "default": "./fesm2022/acorex-components-decorators.mjs"
@@ -340,14 +340,14 @@
       "types": "./qrcode/index.d.ts",
       "default": "./fesm2022/acorex-components-qrcode.mjs"
     },
-    "./query-builder": {
-      "types": "./query-builder/index.d.ts",
-      "default": "./fesm2022/acorex-components-query-builder.mjs"
-    },
     "./radio": {
       "types": "./radio/index.d.ts",
       "default": "./fesm2022/acorex-components-radio.mjs"
     },
+    "./query-builder": {
+      "types": "./query-builder/index.d.ts",
+      "default": "./fesm2022/acorex-components-query-builder.mjs"
+    },
     "./rail-navigation": {
       "types": "./rail-navigation/index.d.ts",
       "default": "./fesm2022/acorex-components-rail-navigation.mjs"
@@ -400,14 +400,14 @@
       "types": "./selection-list/index.d.ts",
       "default": "./fesm2022/acorex-components-selection-list.mjs"
     },
-    "./selection-list-2": {
-      "types": "./selection-list-2/index.d.ts",
-      "default": "./fesm2022/acorex-components-selection-list-2.mjs"
-    },
     "./side-menu": {
       "types": "./side-menu/index.d.ts",
       "default": "./fesm2022/acorex-components-side-menu.mjs"
     },
+    "./selection-list-2": {
+      "types": "./selection-list-2/index.d.ts",
+      "default": "./fesm2022/acorex-components-selection-list-2.mjs"
+    },
     "./skeleton": {
       "types": "./skeleton/index.d.ts",
       "default": "./fesm2022/acorex-components-skeleton.mjs"
@@ -476,14 +476,14 @@
       "types": "./tree-view-legacy/index.d.ts",
       "default": "./fesm2022/acorex-components-tree-view-legacy.mjs"
     },
-    "./uploader": {
-      "types": "./uploader/index.d.ts",
-      "default": "./fesm2022/acorex-components-uploader.mjs"
-    },
     "./video-player": {
       "types": "./video-player/index.d.ts",
       "default": "./fesm2022/acorex-components-video-player.mjs"
     },
+    "./uploader": {
+      "types": "./uploader/index.d.ts",
+      "default": "./fesm2022/acorex-components-uploader.mjs"
+    },
     "./wysiwyg": {
       "types": "./wysiwyg/index.d.ts",
       "default": "./fesm2022/acorex-components-wysiwyg.mjs"