@acorex/components 22.1.7 → 22.2.0

package/fesm2022/acorex-components-highlight.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-highlight.mjs","sources":["../../../../packages/components/highlight/src/lib/highlight-text.component.ts","../../../../packages/components/highlight/src/acorex-components-highlight.ts"],"sourcesContent":["import { AXHighlightOptions, AXHighlightSegment, splitHighlightSegments } from '@acorex/core/utils';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n} from '@angular/core';\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\n\n/**\n * Renders text with search-term matches wrapped in `.ax-highlight` spans.\n *\n * Uses a single innerHTML string so Angular control-flow whitespace cannot insert\n * gaps between highlighted and non-highlighted characters.\n *\n * Does not use the `ax-highlight-text` class on the host — that class is reserved for\n * {@link AXHighlightService} DOM wrappers.\n */\n@Component({\n  selector: 'ax-highlight-text',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'ax-highlight-text-root',\n  },\n  styles: [\n    `\n      ax-highlight-text.ax-highlight-text-root {\n        display: contents;\n      }\n\n      ax-highlight-text .ax-highlight-text-content {\n        display: inline;\n        margin: 0;\n        padding: 0;\n        font: inherit;\n        letter-spacing: inherit;\n        word-spacing: inherit;\n      }\n    `,\n  ],\n  template: `<span class=\"ax-highlight-text-content\" [innerHTML]=\"highlightedHtml()\"></span>`,\n})\nexport class AXHighlightTextComponent {\n  private readonly sanitizer = inject(DomSanitizer);\n\n  /** The full text to render. */\n  readonly text = input('');\n\n  /** The search term or terms to highlight within the text. */\n  readonly query = input<string | readonly string[]>('');\n\n  /** When true, highlighting is disabled and plain text is shown. */\n  readonly highlightDisabled = input(false, { transform: booleanAttribute });\n\n  /** Optional highlight behavior configuration. */\n  readonly highlightOptions = input<AXHighlightOptions>();\n\n  protected readonly segments = computed((): AXHighlightSegment[] => {\n    const content = this.text() ?? '';\n    if (this.highlightDisabled()) {\n      return content ? [{ text: content, match: false }] : [];\n    }\n\n    const query = this.query();\n    const terms = Array.isArray(query) ? query : [query];\n    const normalized = terms.map((value) => value.trim()).filter(Boolean);\n    if (!normalized.length) {\n      return content ? [{ text: content, match: false }] : [];\n    }\n\n    return splitHighlightSegments(content, normalized, this.highlightOptions());\n  });\n\n  protected readonly highlightedHtml = computed((): SafeHtml => {\n    const segments = this.segments();\n    if (!segments.length) {\n      return this.sanitizer.bypassSecurityTrustHtml('');\n    }\n\n    const html = segments\n      .map((segment) =>\n        segment.match\n          ? `<span class=\"ax-highlight\">${this.#escapeHtml(segment.text)}</span>`\n          : this.#escapeHtml(segment.text),\n      )\n      .join('');\n\n    return this.sanitizer.bypassSecurityTrustHtml(html);\n  });\n\n  #escapeHtml(value: string): string {\n    return value\n      .replace(/&/g, '&amp;')\n      .replace(/</g, '&lt;')\n      .replace(/>/g, '&gt;')\n      .replace(/\"/g, '&quot;')\n      .replace(/'/g, '&#39;');\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-components-image-editor.mjs

@@ -1012,7 +1012,7 @@ class AXImageEditorCropComponent extends AXImageEditorToolComponent {
         this.container.crop();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('crop')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'crop'\"\n  [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('crop')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'crop'\"\n  [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
             type: Component,
@@ -1029,7 +1029,7 @@ class AXImageEditorHighlightComponent extends AXImageEditorToolComponent {
         this.tool = 'highlight';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHighlightComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('highlight')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'highlight'\"\n  [color]=\"service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('highlight')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'highlight'\"\n  [color]=\"service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
             type: Component,
@@ -1051,7 +1051,7 @@ class AXImageEditorHistoryComponent {
         this.service.redo();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canUndo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canRedo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canUndo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canRedo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHistoryComponent, decorators: [{
             type: Component,
@@ -1068,7 +1068,7 @@ class AXImageEditorPenComponent extends AXImageEditorToolComponent {
         this.tool = 'pen';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorPenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('pen')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'pen'\"\n  [color]=\"service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('pen')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'pen'\"\n  [color]=\"service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
             type: Component,
@@ -1085,7 +1085,7 @@ class AXImageEditorRotateComponent extends AXImageEditorToolComponent {
         this.tool = 'rotate';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('rotate')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'rotate'\"\n  [color]=\"service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('rotate')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'rotate'\"\n  [color]=\"service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
             type: Component,
@@ -1116,7 +1116,7 @@ class AXImageEditorCropOptionsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorCropOptionsComponent, isStandalone: true, selector: "ax-image-editor-crop-options", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], ngImport: i0, template: "<div class=\"ax-image-editor-crop-ratios\">\n  @for (item of aspectRatios(); track item) {\n    <ax-button\n      [selected]=\"service.cropperRatio() === item\"\n      [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n      (click)=\"ratioHandler(item)\"\n      class=\"ax-crop-save ax-sm\"\n      [text]=\"item\"\n    ></ax-button>\n  } @empty {\n    <ax-button\n      [selected]=\"service.cropperRatio() === '1:1'\"\n      [color]=\"service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n      (click)=\"ratioHandler('1:1')\"\n      class=\"ax-crop-save ax-sm\"\n      text=\"1:1\"\n    ></ax-button>\n    <ax-button\n      [selected]=\"service.cropperRatio() === '16:9'\"\n      [color]=\"service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n      (click)=\"ratioHandler('16:9')\"\n      class=\"ax-crop-save ax-sm\"\n      text=\"16:9\"\n    ></ax-button>\n  }\n</div>\n\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorCropOptionsComponent, isStandalone: true, selector: "ax-image-editor-crop-options", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], ngImport: i0, template: "<div class=\"ax-image-editor-crop-ratios\">\n  @for (item of aspectRatios(); track item) {\n    <ax-button\n      [selected]=\"service.cropperRatio() === item\"\n      [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n      (click)=\"ratioHandler(item)\"\n      class=\"ax-crop-save ax-sm\"\n      [text]=\"item\"\n    ></ax-button>\n  } @empty {\n    <ax-button\n      [selected]=\"service.cropperRatio() === '1:1'\"\n      [color]=\"service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n      (click)=\"ratioHandler('1:1')\"\n      class=\"ax-crop-save ax-sm\"\n      text=\"1:1\"\n    ></ax-button>\n    <ax-button\n      [selected]=\"service.cropperRatio() === '16:9'\"\n      [color]=\"service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n      (click)=\"ratioHandler('16:9')\"\n      class=\"ax-crop-save ax-sm\"\n      text=\"16:9\"\n    ></ax-button>\n  }\n</div>\n\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropOptionsComponent, decorators: [{
             type: Component,
@@ -1187,7 +1187,7 @@ class AXImageEditorRotateOptionsComponent {
         this.service.rotate.set({ state: -90, userInteract: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateOptionsComponent, isStandalone: true, selector: "ax-image-editor-rotate-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateOptionsComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateOptionsComponent, isStandalone: true, selector: "ax-image-editor-rotate-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateOptionsComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateOptionsComponent, decorators: [{
             type: Component,