@acorex/components 20.8.23 → 20.8.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -36,6 +36,7 @@ class AXImageEditorService {
|
|
|
36
36
|
this.undoPressed = signal(false, ...(ngDevMode ? [{ debugName: "undoPressed" }] : []));
|
|
37
37
|
this.redoPressed = signal(false, ...(ngDevMode ? [{ debugName: "redoPressed" }] : []));
|
|
38
38
|
this.cropperRatio = signal(null, ...(ngDevMode ? [{ debugName: "cropperRatio" }] : []));
|
|
39
|
+
this.cropperSize = signal(150, ...(ngDevMode ? [{ debugName: "cropperSize" }] : []));
|
|
39
40
|
}
|
|
40
41
|
toggleTool(tool) {
|
|
41
42
|
if (this.activeToolState() === tool) {
|
|
@@ -64,6 +65,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
64
65
|
class AXImageEditorCropperWindowComponent {
|
|
65
66
|
constructor() {
|
|
66
67
|
this.showGrid = input(true, ...(ngDevMode ? [{ debugName: "showGrid" }] : []));
|
|
68
|
+
/** Base size in pixels used to calculate the initial cropper window dimensions. */
|
|
69
|
+
this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
67
70
|
this.service = inject(AXImageEditorService);
|
|
68
71
|
this.ngZone = inject(NgZone);
|
|
69
72
|
this.selectedHandle = signal(null, ...(ngDevMode ? [{ debugName: "selectedHandle" }] : []));
|
|
@@ -83,7 +86,7 @@ class AXImageEditorCropperWindowComponent {
|
|
|
83
86
|
const host = this.elementRef.nativeElement;
|
|
84
87
|
let width;
|
|
85
88
|
let height;
|
|
86
|
-
const scale =
|
|
89
|
+
const scale = this.size() ?? this.service.cropperSize();
|
|
87
90
|
switch (this.service.cropperRatio()) {
|
|
88
91
|
case '1:1':
|
|
89
92
|
width = 1;
|
|
@@ -323,7 +326,7 @@ class AXImageEditorCropperWindowComponent {
|
|
|
323
326
|
this.selectedHandle.set(null);
|
|
324
327
|
}
|
|
325
328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
326
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n @if (!service.cropperRatio()) {\n <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n }\n\n <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n <div\n (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n class=\"ax-image-bottom-right-handle ax-handle-shape\"\n ></div>\n <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n @if (showGrid()) {\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n }\n</div>\n", styles: ["ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;-webkit-user-select:none;user-select:none;touch-action:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;height:100%;cursor:move;outline:rgba(0,0,0,.7) solid 100vmax;display:grid;grid-template-columns:repeat(3,1fr)}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border:1px dashed rgba(255,255,255,.5)}ax-image-editor-cropper-window .ax-handle-shape{width:1rem;height:1rem;border:1px dashed white;background-color:gray;position:absolute;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:-.5rem;right:-.5rem;cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{bottom:-.5rem;right:-.5rem;cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{right:-.5rem;top:calc(50% - .5rem);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:-.5rem;left:-.5rem;cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:-.5rem;left:-.5rem;cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{bottom:-.5rem;right:calc(50% - .5rem);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{left:-.5rem;top:calc(50% - .5rem);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:-.5rem;right:calc(50% - .5rem);cursor:n-resize}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n @if (!service.cropperRatio()) {\n <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n }\n\n <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n <div\n (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n class=\"ax-image-bottom-right-handle ax-handle-shape\"\n ></div>\n <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n @if (showGrid()) {\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n }\n</div>\n", styles: ["ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;-webkit-user-select:none;user-select:none;touch-action:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;height:100%;cursor:move;outline:rgba(0,0,0,.7) solid 100vmax;display:grid;grid-template-columns:repeat(3,1fr)}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border:1px dashed rgba(255,255,255,.5)}ax-image-editor-cropper-window .ax-handle-shape{width:1rem;height:1rem;border:1px dashed white;background-color:gray;position:absolute;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:-.5rem;right:-.5rem;cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{bottom:-.5rem;right:-.5rem;cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{right:-.5rem;top:calc(50% - .5rem);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:-.5rem;left:-.5rem;cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:-.5rem;left:-.5rem;cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{bottom:-.5rem;right:calc(50% - .5rem);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{left:-.5rem;top:calc(50% - .5rem);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:-.5rem;right:calc(50% - .5rem);cursor:n-resize}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
327
330
|
}
|
|
328
331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
|
|
329
332
|
type: Component,
|
|
@@ -377,6 +380,10 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
377
380
|
* its change grid display state.
|
|
378
381
|
*/
|
|
379
382
|
this.showGrid = input(true, ...(ngDevMode ? [{ debugName: "showGrid" }] : []));
|
|
383
|
+
/**
|
|
384
|
+
* Base size in pixels for the initial cropper window dimensions.
|
|
385
|
+
*/
|
|
386
|
+
this.cropperSize = input(...(ngDevMode ? [undefined, { debugName: "cropperSize" }] : []));
|
|
380
387
|
/**
|
|
381
388
|
* its change grid display state.
|
|
382
389
|
*/
|
|
@@ -433,6 +440,12 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
433
440
|
return;
|
|
434
441
|
this.rotateImage();
|
|
435
442
|
});
|
|
443
|
+
effect(() => {
|
|
444
|
+
const size = this.cropperSize();
|
|
445
|
+
if (size != null) {
|
|
446
|
+
this.service.cropperSize.set(size);
|
|
447
|
+
}
|
|
448
|
+
});
|
|
436
449
|
}
|
|
437
450
|
/** @ignore */
|
|
438
451
|
ngOnDestroy() {
|
|
@@ -516,8 +529,12 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
516
529
|
this.saveImageChange();
|
|
517
530
|
}
|
|
518
531
|
/** @ignore */
|
|
519
|
-
|
|
520
|
-
const
|
|
532
|
+
crop() {
|
|
533
|
+
const cropper = this.cropperWindow();
|
|
534
|
+
if (this.service.activeToolState() !== 'crop' || !cropper) {
|
|
535
|
+
return;
|
|
536
|
+
}
|
|
537
|
+
const cropRect = cropper.getCropperArea();
|
|
521
538
|
const canvasRect = this.canvasElem().nativeElement.getClientRects()[0];
|
|
522
539
|
const dx = cropRect.x - canvasRect.x;
|
|
523
540
|
const dy = cropRect.y - canvasRect.y;
|
|
@@ -582,7 +599,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
582
599
|
this.service.imageBlob.set(blobs);
|
|
583
600
|
}
|
|
584
601
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
585
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n tabindex=\"1\"\n (pointerdown)=\"mouseDownHandler($event)\"\n (pointerup)=\"mouseUpHandler()\"\n (pointermove)=\"mouseMoveHandler($event)\"\n class=\"ax-canvas-element\"\n #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:#000}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, cropperSize: { classPropertyName: "cropperSize", publicName: "cropperSize", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n tabindex=\"1\"\n (pointerdown)=\"mouseDownHandler($event)\"\n (pointerup)=\"mouseUpHandler()\"\n (pointermove)=\"mouseMoveHandler($event)\"\n class=\"ax-canvas-element\"\n #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:#000}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
586
603
|
}
|
|
587
604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
|
|
588
605
|
type: Component,
|
|
@@ -611,6 +628,10 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
|
|
|
611
628
|
}, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
|
|
612
629
|
}
|
|
613
630
|
#eff;
|
|
631
|
+
/** Applies the current cropper selection. */
|
|
632
|
+
crop() {
|
|
633
|
+
this.view()?.crop();
|
|
634
|
+
}
|
|
614
635
|
get __hostClass() {
|
|
615
636
|
if (this.disabled)
|
|
616
637
|
return 'ax-state-disabled';
|
|
@@ -653,6 +674,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
653
674
|
args: ['attr.name']
|
|
654
675
|
}] } });
|
|
655
676
|
|
|
677
|
+
const IMAGE_EDITOR_ASPECT_RATIO_ACTIVE_SUFFIX = ':active';
|
|
678
|
+
function parseAspectRatioItem(item) {
|
|
679
|
+
if (item.endsWith(IMAGE_EDITOR_ASPECT_RATIO_ACTIVE_SUFFIX)) {
|
|
680
|
+
return {
|
|
681
|
+
ratio: item.slice(0, -IMAGE_EDITOR_ASPECT_RATIO_ACTIVE_SUFFIX.length),
|
|
682
|
+
active: true,
|
|
683
|
+
};
|
|
684
|
+
}
|
|
685
|
+
return { ratio: item, active: false };
|
|
686
|
+
}
|
|
687
|
+
function parseAspectRatios(items) {
|
|
688
|
+
const ratios = [];
|
|
689
|
+
let activeRatio = null;
|
|
690
|
+
for (const item of items) {
|
|
691
|
+
const { ratio, active } = parseAspectRatioItem(item);
|
|
692
|
+
ratios.push(ratio);
|
|
693
|
+
if (active && activeRatio === null) {
|
|
694
|
+
activeRatio = ratio;
|
|
695
|
+
}
|
|
696
|
+
}
|
|
697
|
+
return { ratios, activeRatio };
|
|
698
|
+
}
|
|
699
|
+
|
|
656
700
|
/**
|
|
657
701
|
* Base class for image editor tool trigger components.
|
|
658
702
|
* @category Components
|
|
@@ -674,10 +718,32 @@ class AXImageEditorCropComponent extends AXImageEditorToolComponent {
|
|
|
674
718
|
constructor() {
|
|
675
719
|
super(...arguments);
|
|
676
720
|
this.tool = 'crop';
|
|
721
|
+
this.container = inject(AXImageEditorContainerComponent);
|
|
722
|
+
/** Aspect ratio presets. Append `:active` to mark the default ratio, e.g. `'2:1:active'`. */
|
|
677
723
|
this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
724
|
+
/** Base size in pixels for the initial cropper window dimensions. */
|
|
725
|
+
this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
726
|
+
this.#syncSize = effect(() => {
|
|
727
|
+
const size = this.size();
|
|
728
|
+
if (size != null) {
|
|
729
|
+
this.service.cropperSize.set(size);
|
|
730
|
+
}
|
|
731
|
+
}, ...(ngDevMode ? [{ debugName: "#syncSize" }] : []));
|
|
732
|
+
this.#syncAspectRatio = effect(() => {
|
|
733
|
+
const { activeRatio } = parseAspectRatios(this.aspectRatio());
|
|
734
|
+
if (activeRatio) {
|
|
735
|
+
this.service.cropperRatio.set(activeRatio);
|
|
736
|
+
}
|
|
737
|
+
}, ...(ngDevMode ? [{ debugName: "#syncAspectRatio" }] : []));
|
|
738
|
+
}
|
|
739
|
+
#syncSize;
|
|
740
|
+
#syncAspectRatio;
|
|
741
|
+
/** Applies the current cropper selection. */
|
|
742
|
+
crop() {
|
|
743
|
+
this.container.crop();
|
|
678
744
|
}
|
|
679
745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
680
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", 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-xs\"\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 }); }
|
|
746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", 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-xs\"\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 }); }
|
|
681
747
|
}
|
|
682
748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
|
|
683
749
|
type: Component,
|
|
@@ -764,10 +830,11 @@ class AXImageEditorCropOptionsComponent {
|
|
|
764
830
|
this.container = inject(AXImageEditorContainerComponent);
|
|
765
831
|
this.cropPressed = output();
|
|
766
832
|
this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
833
|
+
this.aspectRatios = computed(() => parseAspectRatios(this.aspectRatio()).ratios, ...(ngDevMode ? [{ debugName: "aspectRatios" }] : []));
|
|
767
834
|
}
|
|
768
835
|
cropButtonHandler() {
|
|
769
836
|
this.cropPressed.emit();
|
|
770
|
-
this.container.
|
|
837
|
+
this.container.crop();
|
|
771
838
|
}
|
|
772
839
|
ratioHandler(r) {
|
|
773
840
|
if (this.service.cropperRatio() === r) {
|
|
@@ -778,11 +845,11 @@ class AXImageEditorCropOptionsComponent {
|
|
|
778
845
|
}
|
|
779
846
|
}
|
|
780
847
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
781
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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
|
|
848
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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-xs\"\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-xs\"\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-xs\"\n text=\"16:9\"\n ></ax-button>\n }\n</div>\n\n<ax-button\n (click)=\"cropButtonHandler()\"\n class=\"ax-crop-save ax-xs\"\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 }); }
|
|
782
849
|
}
|
|
783
850
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropOptionsComponent, decorators: [{
|
|
784
851
|
type: Component,
|
|
785
|
-
args: [{ selector: 'ax-image-editor-crop-options', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], template: "<div class=\"ax-image-editor-crop-ratios\">\n @for (item of
|
|
852
|
+
args: [{ selector: 'ax-image-editor-crop-options', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], 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-xs\"\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-xs\"\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-xs\"\n text=\"16:9\"\n ></ax-button>\n }\n</div>\n\n<ax-button\n (click)=\"cropButtonHandler()\"\n class=\"ax-crop-save ax-xs\"\n [text]=\"'@acorex:image-editor.crop' | translate | async\"\n color=\"primary\"\n></ax-button>\n" }]
|
|
786
853
|
}] });
|
|
787
854
|
|
|
788
855
|
/** @ignore */
|
|
@@ -886,6 +953,8 @@ class AXImageEditorToolsBarComponent {
|
|
|
886
953
|
* Tool component reference to activate on load.
|
|
887
954
|
*/
|
|
888
955
|
this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
|
|
956
|
+
/** Hides the tools bar UI while keeping projected tools configurable. */
|
|
957
|
+
this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
889
958
|
this.penTool = contentChild(AXImageEditorPenComponent, ...(ngDevMode ? [{ debugName: "penTool" }] : []));
|
|
890
959
|
this.highlightTool = contentChild(AXImageEditorHighlightComponent, ...(ngDevMode ? [{ debugName: "highlightTool" }] : []));
|
|
891
960
|
this.cropTool = contentChild(AXImageEditorCropComponent, ...(ngDevMode ? [{ debugName: "cropTool" }] : []));
|
|
@@ -897,18 +966,20 @@ class AXImageEditorToolsBarComponent {
|
|
|
897
966
|
}
|
|
898
967
|
#activeEffect;
|
|
899
968
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorToolsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
900
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorToolsBarComponent, isStandalone: true, selector: "ax-image-editor-tools-bar", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], queries: [{ propertyName: "penTool", first: true, predicate: AXImageEditorPenComponent, descendants: true, isSignal: true }, { propertyName: "highlightTool", first: true, predicate: AXImageEditorHighlightComponent, descendants: true, isSignal: true }, { propertyName: "cropTool", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }, { propertyName: "rotateTool", first: true, predicate: AXImageEditorRotateComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-toolbar class=\"ax-main-toolbar\">\n <ax-prefix class=\"ax-image-editor-tool-triggers\">\n <ng-content\n select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n ></ng-content>\n </ax-prefix>\n\n @if (service.activeToolState()) {\n <ax-suffix class=\"ax-image-editor-tool-options\">\n @switch (service.activeToolState()) {\n @case ('pen') {\n @if (penTool()) {\n <ax-image-editor-pen-options></ax-image-editor-pen-options>\n }\n }\n @case ('highlight') {\n @if (highlightTool()) {\n <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n }\n }\n @case ('crop') {\n @if (cropTool()) {\n <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n }\n }\n @case ('rotate') {\n @if (rotateTool()) {\n <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n }\n }\n }\n </ax-suffix>\n }\n</ax-toolbar>\n", styles: ["ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:.5rem}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1;min-width:0}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-color-box,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-color-box{flex:0 0 auto}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider .ax-range-slider .ax-range-slider-handler,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorPenOptionsComponent, selector: "ax-image-editor-pen-options" }, { kind: "component", type: AXImageEditorHighlightOptionsComponent, selector: "ax-image-editor-highlight-options" }, { kind: "component", type: AXImageEditorCropOptionsComponent, selector: "ax-image-editor-crop-options", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "component", type: AXImageEditorRotateOptionsComponent, selector: "ax-image-editor-rotate-options" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorToolsBarComponent, isStandalone: true, selector: "ax-image-editor-tools-bar", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ax-image-editor-tools-bar-hidden": "hidden()" } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], queries: [{ propertyName: "penTool", first: true, predicate: AXImageEditorPenComponent, descendants: true, isSignal: true }, { propertyName: "highlightTool", first: true, predicate: AXImageEditorHighlightComponent, descendants: true, isSignal: true }, { propertyName: "cropTool", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }, { propertyName: "rotateTool", first: true, predicate: AXImageEditorRotateComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-toolbar class=\"ax-main-toolbar\">\n <ax-prefix class=\"ax-image-editor-tool-triggers\">\n <ng-content\n select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n ></ng-content>\n </ax-prefix>\n\n @if (service.activeToolState()) {\n <ax-suffix class=\"ax-image-editor-tool-options\">\n @switch (service.activeToolState()) {\n @case ('pen') {\n @if (penTool()) {\n <ax-image-editor-pen-options></ax-image-editor-pen-options>\n }\n }\n @case ('highlight') {\n @if (highlightTool()) {\n <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n }\n }\n @case ('crop') {\n @if (cropTool()) {\n <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n }\n }\n @case ('rotate') {\n @if (rotateTool()) {\n <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n }\n }\n }\n </ax-suffix>\n }\n</ax-toolbar>\n", styles: ["ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar.ax-image-editor-tools-bar-hidden{display:none}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:.5rem}ax-image-editor-tools-bar .ax-main-toolbar ax-divider{display:none}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1;min-width:0}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-color-box,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-color-box{flex:0 0 auto}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider .ax-range-slider .ax-range-slider-handler,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorPenOptionsComponent, selector: "ax-image-editor-pen-options" }, { kind: "component", type: AXImageEditorHighlightOptionsComponent, selector: "ax-image-editor-highlight-options" }, { kind: "component", type: AXImageEditorCropOptionsComponent, selector: "ax-image-editor-crop-options", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "component", type: AXImageEditorRotateOptionsComponent, selector: "ax-image-editor-rotate-options" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
901
970
|
}
|
|
902
971
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorToolsBarComponent, decorators: [{
|
|
903
972
|
type: Component,
|
|
904
|
-
args: [{ selector: 'ax-image-editor-tools-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
973
|
+
args: [{ selector: 'ax-image-editor-tools-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
974
|
+
'[class.ax-image-editor-tools-bar-hidden]': 'hidden()',
|
|
975
|
+
}, imports: [
|
|
905
976
|
AXDecoratorModule,
|
|
906
977
|
AXToolBarModule,
|
|
907
978
|
AXImageEditorPenOptionsComponent,
|
|
908
979
|
AXImageEditorHighlightOptionsComponent,
|
|
909
980
|
AXImageEditorCropOptionsComponent,
|
|
910
981
|
AXImageEditorRotateOptionsComponent,
|
|
911
|
-
], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], template: "<ax-toolbar class=\"ax-main-toolbar\">\n <ax-prefix class=\"ax-image-editor-tool-triggers\">\n <ng-content\n select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n ></ng-content>\n </ax-prefix>\n\n @if (service.activeToolState()) {\n <ax-suffix class=\"ax-image-editor-tool-options\">\n @switch (service.activeToolState()) {\n @case ('pen') {\n @if (penTool()) {\n <ax-image-editor-pen-options></ax-image-editor-pen-options>\n }\n }\n @case ('highlight') {\n @if (highlightTool()) {\n <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n }\n }\n @case ('crop') {\n @if (cropTool()) {\n <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n }\n }\n @case ('rotate') {\n @if (rotateTool()) {\n <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n }\n }\n }\n </ax-suffix>\n }\n</ax-toolbar>\n", styles: ["ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:.5rem}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1;min-width:0}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-color-box,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-color-box{flex:0 0 auto}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider .ax-range-slider .ax-range-slider-handler,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:.25rem}\n"] }]
|
|
982
|
+
], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], template: "<ax-toolbar class=\"ax-main-toolbar\">\n <ax-prefix class=\"ax-image-editor-tool-triggers\">\n <ng-content\n select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n ></ng-content>\n </ax-prefix>\n\n @if (service.activeToolState()) {\n <ax-suffix class=\"ax-image-editor-tool-options\">\n @switch (service.activeToolState()) {\n @case ('pen') {\n @if (penTool()) {\n <ax-image-editor-pen-options></ax-image-editor-pen-options>\n }\n }\n @case ('highlight') {\n @if (highlightTool()) {\n <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n }\n }\n @case ('crop') {\n @if (cropTool()) {\n <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n }\n }\n @case ('rotate') {\n @if (rotateTool()) {\n <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n }\n }\n }\n </ax-suffix>\n }\n</ax-toolbar>\n", styles: ["ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar.ax-image-editor-tools-bar-hidden{display:none}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:.5rem}ax-image-editor-tools-bar .ax-main-toolbar ax-divider{display:none}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1;min-width:0}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-color-box,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-color-box{flex:0 0 auto}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider .ax-range-slider .ax-range-slider-handler,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:.25rem}\n"] }]
|
|
912
983
|
}] });
|
|
913
984
|
|
|
914
985
|
/**
|
|
@@ -920,7 +991,7 @@ class AXImageEditorToolSelectorComponent {
|
|
|
920
991
|
this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
921
992
|
}
|
|
922
993
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
923
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-image-editor-tools-bar>\n <ax-image-editor-pen></ax-image-editor-pen>\n <ax-image-editor-highlight></ax-image-editor-highlight>\n <ax-image-editor-crop [aspectRatio]=\"aspectRatio()\"></ax-image-editor-crop>\n <ax-image-editor-rotate></ax-image-editor-rotate>\n</ax-image-editor-tools-bar>\n", dependencies: [{ kind: "component", type: AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active"] }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio"] }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
994
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-image-editor-tools-bar>\n <ax-image-editor-pen></ax-image-editor-pen>\n <ax-image-editor-highlight></ax-image-editor-highlight>\n <ax-image-editor-crop [aspectRatio]=\"aspectRatio()\"></ax-image-editor-crop>\n <ax-image-editor-rotate></ax-image-editor-rotate>\n</ax-image-editor-tools-bar>\n", dependencies: [{ kind: "component", type: AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
924
995
|
}
|
|
925
996
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
|
|
926
997
|
type: Component,
|