@muxima-ui/core 1.1.0 → 1.3.0

package/fesm2022/muxima-ui-core-image-cropper.mjs

@@ -0,0 +1,568 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, numberAttribute, model, output, viewChild, inject, signal, computed, effect, untracked, DestroyRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LiveAnnouncer } from '@angular/cdk/a11y';
+import { mxUniqueId } from '@muxima-ui/core/form-field';
+
+/** Mantém o rectângulo dentro dos limites, sem mudar o tamanho (a não ser que não caiba). */
+function mxClampRect(r, bounds) {
+    const width = Math.min(r.width, bounds.width);
+    const height = Math.min(r.height, bounds.height);
+    return {
+        width,
+        height,
+        x: Math.min(Math.max(r.x, bounds.x), bounds.x + bounds.width - width),
+        y: Math.min(Math.max(r.y, bounds.y), bounds.y + bounds.height - height),
+    };
+}
+/** Maior rectângulo com a proporção dada, centrado nos limites (ocupa `fill` do espaço). */
+function mxCenteredRect(bounds, ratio, fill = 0.8) {
+    let width = bounds.width * fill;
+    let height = bounds.height * fill;
+    if (ratio) {
+        if (width / height > ratio)
+            width = height * ratio;
+        else
+            height = width / ratio;
+    }
+    return {
+        x: bounds.x + (bounds.width - width) / 2,
+        y: bounds.y + (bounds.height - height) / 2,
+        width,
+        height,
+    };
+}
+/**
+ * Redimensiona a partir de um puxador por (dx, dy), respeitando a proporção, o tamanho
+ * mínimo e os limites. O lado oposto ao puxador fica parado.
+ */
+function mxResizeRect(r, handle, dx, dy, bounds, ratio, min = 24) {
+    let { x, y, width, height } = r;
+    const right = x + width;
+    const bottom = y + height;
+    if (handle.includes('e'))
+        width = Math.min(Math.max(width + dx, min), bounds.x + bounds.width - x);
+    if (handle.includes('w')) {
+        const nx = Math.min(Math.max(x + dx, bounds.x), right - min);
+        width = right - nx;
+        x = nx;
+    }
+    if (handle.includes('s'))
+        height = Math.min(Math.max(height + dy, min), bounds.y + bounds.height - y);
+    if (handle.includes('n')) {
+        const ny = Math.min(Math.max(y + dy, bounds.y), bottom - min);
+        height = bottom - ny;
+        y = ny;
+    }
+    if (ratio) {
+        // o eixo que o puxador controla manda; nos cantos, o maior movimento
+        const horizontal = handle === 'e' || handle === 'w' || (handle.length === 2 && Math.abs(dx) >= Math.abs(dy));
+        if (horizontal)
+            height = width / ratio;
+        else
+            width = height * ratio;
+        // não sair dos limites: reduz ambos
+        const maxW = handle.includes('w') ? right - bounds.x : bounds.x + bounds.width - x;
+        const maxH = handle.includes('n') ? bottom - bounds.y : bounds.y + bounds.height - y;
+        const k = Math.min(1, maxW / width, maxH / height);
+        width *= k;
+        height *= k;
+        if (handle.includes('w'))
+            x = right - width;
+        if (handle.includes('n'))
+            y = bottom - height;
+        if (handle === 'e' || handle === 'w')
+            y = Math.min(Math.max(r.y + (r.height - height) / 2, bounds.y), bounds.y + bounds.height - height);
+        if (handle === 'n' || handle === 's')
+            x = Math.min(Math.max(r.x + (r.width - width) / 2, bounds.x), bounds.x + bounds.width - width);
+    }
+    return { x, y, width, height };
+}
+
+const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+/**
+ * Recortar uma imagem antes de a enviar: arrastar a área, redimensionar pelos cantos,
+ * zoom e rodar. Com teclado: setas movem a área, Alt + setas mudam o tamanho (Shift para
+ * passos maiores); cada mudança é anunciada.
+ *
+ * ```html
+ * <mx-image-cropper #c [src]="ficheiro" [aspectRatio]="1" round />
+ * <button mxButton (click)="c.toBlob().then(enviar)">Guardar</button>
+ * ```
+ *
+ * `src` aceita um URL ou um File. `toBlob()` devolve a imagem recortada na resolução original.
+ */
+class MxImageCropper {
+    src = input(null, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    alt = input('Imagem a recortar', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    /** Largura / altura da área (1 = quadrado, 16/9...). null = livre. */
+    aspectRatio = input(null, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : /* istanbul ignore next */ []));
+    /** Máscara redonda (fotografias de perfil). toBlob devolve PNG com cantos transparentes. */
+    round = input(false, { ...(ngDevMode ? { debugName: "round" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    controls = input(true, { ...(ngDevMode ? { debugName: "controls" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    height = input('320px', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /** Tamanho mínimo da área no ecrã, em px. */
+    minSize = input(40, { ...(ngDevMode ? { debugName: "minSize" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    zoom = model(1, ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+    rotation = model(0, ...(ngDevMode ? [{ debugName: "rotation" }] : /* istanbul ignore next */ []));
+    helpText = input('Setas movem a área. Alt e setas mudam o tamanho. Shift dá passos maiores.', ...(ngDevMode ? [{ debugName: "helpText" }] : /* istanbul ignore next */ []));
+    zoomText = input('Zoom', ...(ngDevMode ? [{ debugName: "zoomText" }] : /* istanbul ignore next */ []));
+    rotateLeftText = input('Rodar para a esquerda', ...(ngDevMode ? [{ debugName: "rotateLeftText" }] : /* istanbul ignore next */ []));
+    rotateRightText = input('Rodar para a direita', ...(ngDevMode ? [{ debugName: "rotateRightText" }] : /* istanbul ignore next */ []));
+    resetText = input('Repor', ...(ngDevMode ? [{ debugName: "resetText" }] : /* istanbul ignore next */ []));
+    /** Área recortada em píxeis da imagem original. */
+    areaChange = output();
+    stage = viewChild.required('stage');
+    img = viewChild('img', ...(ngDevMode ? [{ debugName: "img" }] : /* istanbul ignore next */ []));
+    announcer = inject(LiveAnnouncer);
+    helpId = mxUniqueId('mx-cropper-help');
+    handles = HANDLES;
+    url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
+    natural = signal({ w: 0, h: 0 }, ...(ngDevMode ? [{ debugName: "natural" }] : /* istanbul ignore next */ []));
+    stageSize = signal({ w: 0, h: 0 }, ...(ngDevMode ? [{ debugName: "stageSize" }] : /* istanbul ignore next */ []));
+    ready = signal(false, ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    box = signal({ x: 0, y: 0, width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "box" }] : /* istanbul ignore next */ []));
+    live = signal('', ...(ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []));
+    objectUrl = null;
+    liveTimer;
+    /** Escala que faz a imagem caber no palco, vezes o zoom. */
+    fit = computed(() => {
+        const { w, h } = this.natural();
+        const s = this.stageSize();
+        if (!w || !h || !s.w || !s.h)
+            return 1;
+        const turned = Math.abs(this.rotation()) % 180 === 90;
+        const iw = turned ? h : w;
+        const ih = turned ? w : h;
+        return Math.min(s.w / iw, s.h / ih);
+    }, ...(ngDevMode ? [{ debugName: "fit" }] : /* istanbul ignore next */ []));
+    scale = computed(() => this.fit() * this.zoom(), ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+    zoomPct = computed(() => Math.round(this.zoom() * 100), ...(ngDevMode ? [{ debugName: "zoomPct" }] : /* istanbul ignore next */ []));
+    /** Rectângulo da imagem no palco (onde a área pode estar). */
+    bounds = computed(() => {
+        const { w, h } = this.natural();
+        const s = this.stageSize();
+        const turned = Math.abs(this.rotation()) % 180 === 90;
+        const iw = (turned ? h : w) * this.scale();
+        const ih = (turned ? w : h) * this.scale();
+        const bw = Math.min(iw, s.w);
+        const bh = Math.min(ih, s.h);
+        return { x: (s.w - bw) / 2, y: (s.h - bh) / 2, width: bw, height: bh };
+    }, ...(ngDevMode ? [{ debugName: "bounds" }] : /* istanbul ignore next */ []));
+    /** Área em píxeis da imagem (rodada). */
+    area = computed(() => {
+        const b = this.box();
+        const s = this.stageSize();
+        const k = 1 / this.scale();
+        const turned = Math.abs(this.rotation()) % 180 === 90;
+        const iw = (turned ? this.natural().h : this.natural().w) * this.scale();
+        const ih = (turned ? this.natural().w : this.natural().h) * this.scale();
+        const ox = (s.w - iw) / 2;
+        const oy = (s.h - ih) / 2;
+        return {
+            x: Math.round((b.x - ox) * k),
+            y: Math.round((b.y - oy) * k),
+            width: Math.round(b.width * k),
+            height: Math.round(b.height * k),
+            rotation: this.rotation(),
+        };
+    }, ...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
+    boxLabel = computed(() => {
+        const a = this.area();
+        return `${a.width} por ${a.height} píxeis`;
+    }, ...(ngDevMode ? [{ debugName: "boxLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const src = this.src();
+            this.ready.set(false);
+            if (this.objectUrl)
+                URL.revokeObjectURL(this.objectUrl);
+            this.objectUrl = null;
+            if (!src) {
+                this.url.set(null);
+                return;
+            }
+            if (typeof src === 'string')
+                this.url.set(src);
+            else {
+                this.objectUrl = URL.createObjectURL(src);
+                this.url.set(this.objectUrl);
+            }
+        });
+        // mantém a área dentro da imagem quando o zoom ou a rotação mudam
+        effect(() => {
+            const b = this.bounds();
+            if (!this.ready())
+                return;
+            const current = untracked(() => this.box());
+            const next = mxClampRect(current, b);
+            if (next.x !== current.x ||
+                next.y !== current.y ||
+                next.width !== current.width ||
+                next.height !== current.height) {
+                untracked(() => this.box.set(next));
+            }
+        });
+        effect(() => {
+            if (this.ready())
+                this.areaChange.emit(this.area());
+        });
+        const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(() => this.measure()) : null;
+        queueMicrotask(() => ro?.observe(this.stage().nativeElement));
+        inject(DestroyRef).onDestroy(() => {
+            ro?.disconnect();
+            if (this.objectUrl)
+                URL.revokeObjectURL(this.objectUrl);
+            clearTimeout(this.liveTimer);
+        });
+    }
+    measure() {
+        const r = this.stage().nativeElement.getBoundingClientRect();
+        this.stageSize.set({ w: r.width, h: r.height });
+    }
+    onLoad() {
+        const el = this.img().nativeElement;
+        this.natural.set({ w: el.naturalWidth, h: el.naturalHeight });
+        this.measure();
+        this.ready.set(true);
+        this.reset();
+    }
+    /** Volta ao zoom 1, sem rotação, área centrada. */
+    reset() {
+        this.zoom.set(1);
+        this.rotation.set(0);
+        queueMicrotask(() => this.box.set(mxCenteredRect(this.bounds(), this.aspectRatio())));
+    }
+    setZoom(z) {
+        const prev = this.box();
+        this.zoom.set(Math.min(Math.max(z, 1), 4));
+        this.box.set(mxClampRect(prev, this.bounds()));
+    }
+    rotate(deg) {
+        this.rotation.update((r) => (r + deg + 360) % 360);
+        this.box.set(mxCenteredRect(this.bounds(), this.aspectRatio()));
+        this.say(`Rodada ${this.rotation()} graus`);
+    }
+    say(text) {
+        clearTimeout(this.liveTimer);
+        this.liveTimer = setTimeout(() => this.live.set(text), 250);
+    }
+    onKeydown(e) {
+        const step = e.shiftKey ? 10 : 1;
+        const d = {
+            ArrowLeft: [-step, 0],
+            ArrowRight: [step, 0],
+            ArrowUp: [0, -step],
+            ArrowDown: [0, step],
+        };
+        const m = d[e.key];
+        if (!m)
+            return;
+        e.preventDefault();
+        const b = this.box();
+        if (e.altKey) {
+            // Alt: muda o tamanho a partir do canto inferior direito
+            this.box.set(mxResizeRect(b, 'se', m[0], m[1] || (this.aspectRatio() ? m[0] / this.aspectRatio() : 0), this.bounds(), this.aspectRatio(), this.minSize()));
+        }
+        else {
+            this.box.set(mxClampRect({ ...b, x: b.x + m[0], y: b.y + m[1] }, this.bounds()));
+        }
+        const a = this.area();
+        this.say(`${a.width} por ${a.height} píxeis, a ${a.x} da esquerda e ${a.y} do topo`);
+    }
+    drag(e, apply) {
+        if (e.button !== 0)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        const start = this.box();
+        const sx = e.clientX;
+        const sy = e.clientY;
+        const target = e.currentTarget;
+        target.setPointerCapture?.(e.pointerId);
+        const move = (ev) => this.box.set(apply(ev.clientX - sx, ev.clientY - sy, start));
+        const up = () => {
+            target.removeEventListener('pointermove', move);
+            target.removeEventListener('pointerup', up);
+        };
+        target.addEventListener('pointermove', move);
+        target.addEventListener('pointerup', up);
+    }
+    startMove(e) {
+        e.currentTarget.focus();
+        this.drag(e, (dx, dy, s) => mxClampRect({ ...s, x: s.x + dx, y: s.y + dy }, this.bounds()));
+    }
+    startResize(e, h) {
+        this.drag(e, (dx, dy, s) => mxResizeRect(s, h, dx, dy, this.bounds(), this.aspectRatio(), this.minSize()));
+    }
+    /** Desenha o recorte num canvas na resolução original. */
+    toCanvas() {
+        const img = this.img()?.nativeElement;
+        const canvas = document.createElement('canvas');
+        if (!img || !this.ready())
+            return canvas;
+        const b = this.box();
+        const s = this.stageSize();
+        const k = 1 / this.scale();
+        canvas.width = Math.max(1, Math.round(b.width * k));
+        canvas.height = Math.max(1, Math.round(b.height * k));
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return canvas;
+        if (this.round()) {
+            ctx.beginPath();
+            ctx.ellipse(canvas.width / 2, canvas.height / 2, canvas.width / 2, canvas.height / 2, 0, 0, Math.PI * 2);
+            ctx.clip();
+        }
+        ctx.scale(k, k);
+        ctx.translate(-b.x, -b.y);
+        ctx.translate(s.w / 2, s.h / 2);
+        ctx.rotate((this.rotation() * Math.PI) / 180);
+        ctx.scale(this.scale(), this.scale());
+        ctx.drawImage(img, -this.natural().w / 2, -this.natural().h / 2);
+        return canvas;
+    }
+    /** Recorte como Blob (PNG por omissão; com `round` é sempre PNG). */
+    toBlob(type = 'image/png', quality = 0.92) {
+        const canvas = this.toCanvas();
+        return new Promise((resolve) => canvas.toBlob(resolve, this.round() ? 'image/png' : type, quality));
+    }
+    toDataURL(type = 'image/png', quality = 0.92) {
+        return this.toCanvas().toDataURL(this.round() ? 'image/png' : type, quality);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxImageCropper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: MxImageCropper, isStandalone: true, selector: "mx-image-cropper", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, round: { classPropertyName: "round", publicName: "round", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, rotation: { classPropertyName: "rotation", publicName: "rotation", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, zoomText: { classPropertyName: "zoomText", publicName: "zoomText", isSignal: true, isRequired: false, transformFunction: null }, rotateLeftText: { classPropertyName: "rotateLeftText", publicName: "rotateLeftText", isSignal: true, isRequired: false, transformFunction: null }, rotateRightText: { classPropertyName: "rotateRightText", publicName: "rotateRightText", isSignal: true, isRequired: false, transformFunction: null }, resetText: { classPropertyName: "resetText", publicName: "resetText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zoom: "zoomChange", rotation: "rotationChange", areaChange: "areaChange" }, host: { properties: { "attr.data-round": "round() ? \"\" : null", "attr.aria-label": "null" }, classAttribute: "mx-image-cropper" }, viewQueries: [{ propertyName: "stage", first: true, predicate: ["stage"], descendants: true, isSignal: true }, { propertyName: "img", first: true, predicate: ["img"], descendants: true, isSignal: true }], exportAs: ["mxImageCropper"], ngImport: i0, template: `
+    <div class="mx-cropper-stage" #stage [style.height]="height()">
+      @if (url()) {
+        <img
+          #img
+          class="mx-cropper-image"
+          [src]="url()"
+          [alt]="alt()"
+          draggable="false"
+          [style.width.px]="natural().w"
+          [style.height.px]="natural().h"
+          [style.transform]="
+            'translate(-50%, -50%) rotate(' + rotation() + 'deg) scale(' + scale() + ')'
+          "
+          (load)="onLoad()"
+        />
+      }
+      @if (ready()) {
+        <div
+          class="mx-cropper-box"
+          role="group"
+          tabindex="0"
+          aria-roledescription="área de recorte"
+          [attr.aria-label]="boxLabel()"
+          [attr.aria-describedby]="helpId"
+          [style.left.px]="box().x"
+          [style.top.px]="box().y"
+          [style.width.px]="box().width"
+          [style.height.px]="box().height"
+          (pointerdown)="startMove($event)"
+          (keydown)="onKeydown($event)"
+        >
+          <span class="mx-cropper-grid" aria-hidden="true"></span>
+          @for (h of handles; track h) {
+            <span
+              class="mx-cropper-handle"
+              [attr.data-handle]="h"
+              aria-hidden="true"
+              (pointerdown)="startResize($event, h)"
+            ></span>
+          }
+        </div>
+      }
+    </div>
+    <p class="mx-visually-hidden" [id]="helpId">{{ helpText() }}</p>
+    @if (controls()) {
+      <div class="mx-cropper-controls">
+        <label class="mx-cropper-zoom">
+          <span>{{ zoomText() }}</span>
+          <input
+            type="range"
+            class="mx-slider"
+            min="1"
+            max="4"
+            step="0.05"
+            [value]="zoom()"
+            [disabled]="!ready()"
+            [attr.aria-valuetext]="zoomPct() + '%'"
+            (input)="setZoom($any($event.target).valueAsNumber)"
+          />
+        </label>
+        <button
+          type="button"
+          class="mx-cropper-button"
+          [disabled]="!ready()"
+          [attr.aria-label]="rotateLeftText()"
+          (click)="rotate(-90)"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path
+              d="M3.5 6.5a5 5 0 1 1 .8 5.2M3.5 2.5v4h4"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="mx-cropper-button"
+          [disabled]="!ready()"
+          [attr.aria-label]="rotateRightText()"
+          (click)="rotate(90)"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path
+              d="M12.5 6.5a5 5 0 1 0-.8 5.2M12.5 2.5v4h-4"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="mx-cropper-button mx-cropper-reset"
+          [disabled]="!ready()"
+          (click)="reset()"
+        >
+          {{ resetText() }}
+        </button>
+      </div>
+    }
+    <span class="mx-visually-hidden" aria-live="polite">{{ live() }}</span>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: MxImageCropper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mx-image-cropper',
+                    exportAs: 'mxImageCropper',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        class: 'mx-image-cropper',
+                        '[attr.data-round]': 'round() ? "" : null',
+                        '[attr.aria-label]': 'null',
+                    },
+                    template: `
+    <div class="mx-cropper-stage" #stage [style.height]="height()">
+      @if (url()) {
+        <img
+          #img
+          class="mx-cropper-image"
+          [src]="url()"
+          [alt]="alt()"
+          draggable="false"
+          [style.width.px]="natural().w"
+          [style.height.px]="natural().h"
+          [style.transform]="
+            'translate(-50%, -50%) rotate(' + rotation() + 'deg) scale(' + scale() + ')'
+          "
+          (load)="onLoad()"
+        />
+      }
+      @if (ready()) {
+        <div
+          class="mx-cropper-box"
+          role="group"
+          tabindex="0"
+          aria-roledescription="área de recorte"
+          [attr.aria-label]="boxLabel()"
+          [attr.aria-describedby]="helpId"
+          [style.left.px]="box().x"
+          [style.top.px]="box().y"
+          [style.width.px]="box().width"
+          [style.height.px]="box().height"
+          (pointerdown)="startMove($event)"
+          (keydown)="onKeydown($event)"
+        >
+          <span class="mx-cropper-grid" aria-hidden="true"></span>
+          @for (h of handles; track h) {
+            <span
+              class="mx-cropper-handle"
+              [attr.data-handle]="h"
+              aria-hidden="true"
+              (pointerdown)="startResize($event, h)"
+            ></span>
+          }
+        </div>
+      }
+    </div>
+    <p class="mx-visually-hidden" [id]="helpId">{{ helpText() }}</p>
+    @if (controls()) {
+      <div class="mx-cropper-controls">
+        <label class="mx-cropper-zoom">
+          <span>{{ zoomText() }}</span>
+          <input
+            type="range"
+            class="mx-slider"
+            min="1"
+            max="4"
+            step="0.05"
+            [value]="zoom()"
+            [disabled]="!ready()"
+            [attr.aria-valuetext]="zoomPct() + '%'"
+            (input)="setZoom($any($event.target).valueAsNumber)"
+          />
+        </label>
+        <button
+          type="button"
+          class="mx-cropper-button"
+          [disabled]="!ready()"
+          [attr.aria-label]="rotateLeftText()"
+          (click)="rotate(-90)"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path
+              d="M3.5 6.5a5 5 0 1 1 .8 5.2M3.5 2.5v4h4"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="mx-cropper-button"
+          [disabled]="!ready()"
+          [attr.aria-label]="rotateRightText()"
+          (click)="rotate(90)"
+        >
+          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path
+              d="M12.5 6.5a5 5 0 1 0-.8 5.2M12.5 2.5v4h-4"
+              stroke="currentColor"
+              stroke-width="1.4"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="mx-cropper-button mx-cropper-reset"
+          [disabled]="!ready()"
+          (click)="reset()"
+        >
+          {{ resetText() }}
+        </button>
+      </div>
+    }
+    <span class="mx-visually-hidden" aria-live="polite">{{ live() }}</span>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], round: [{ type: i0.Input, args: [{ isSignal: true, alias: "round", required: false }] }], controls: [{ type: i0.Input, args: [{ isSignal: true, alias: "controls", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], minSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minSize", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }, { type: i0.Output, args: ["zoomChange"] }], rotation: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotation", required: false }] }, { type: i0.Output, args: ["rotationChange"] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], zoomText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomText", required: false }] }], rotateLeftText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateLeftText", required: false }] }], rotateRightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotateRightText", required: false }] }], resetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetText", required: false }] }], areaChange: [{ type: i0.Output, args: ["areaChange"] }], stage: [{ type: i0.ViewChild, args: ['stage', { isSignal: true }] }], img: [{ type: i0.ViewChild, args: ['img', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MxImageCropper, mxCenteredRect, mxClampRect, mxResizeRect };
+//# sourceMappingURL=muxima-ui-core-image-cropper.mjs.map