@k2b/ui 0.1.0-rc.0

package/dist/browser/inputs/FileInputs.js

@@ -0,0 +1,736 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { setProperty as _$setProperty } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { use as _$use } from "solid-js/web";
+import { className as _$className } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
+import { getNextMarker as _$getNextMarker } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { getNextElement as _$getNextElement } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { spread as _$spread } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-dropzone__subtitle>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-dropzone__hint>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<button type=button class=k2b-dropzone><span class=k2b-dropzone__icon aria-hidden=true><i></i></span><span class=k2b-dropzone__copy><strong></strong><!$><!/><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<input class=k2b-sr-only type=file tabindex=-1>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<i aria-hidden=true>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<i class="ti ti-trash"aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-image-input role=group><div class=k2b-image-input__preview></div><div class=k2b-image-input__actions><!$><!/><!$><!/></div><input class=k2b-sr-only type=file>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<i class="ti ti-photo-off"aria-hidden=true>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<img>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-image-cropper__frame><img><div class=k2b-image-cropper__selection role=group></div><button type=button class=k2b-image-cropper__rotate><i class="ti ti-rotate-clockwise"aria-hidden=true>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<div><div class=k2b-image-cropper__stage>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<small>`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<small class=k2b-image-cropper__error>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<button type=button class=k2b-image-cropper__handle>`);
+import { dropzone } from "@k2b/stdlib/solid";
+import { createEffect, createSignal, For, onCleanup, Show } from "solid-js";
+import { Button, IconButton } from "../actions/Button";
+import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
+import { useUiMessages } from "../intl/messages";
+import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
+import { clampImageCropRect, getInitialImageCropRect, resizeImageCropFromCorner, rotateImageCropRight } from "./image-crop";
+export function FileDropzone(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.id);
+  const disabled = () => Boolean(props.disabled || props.busy);
+  const error = () => resolveMaybeAccessor(props.error);
+  let input;
+  const emit = files => {
+    if (disabled() || files.length === 0) return;
+    void props.onDrop(props.multiple === false ? files.slice(0, 1) : files);
+  };
+  const zone = dropzone.create({
+    get accept() {
+      return props.accept;
+    },
+    onDrop: emit
+  });
+  const title = () => props.busy ? messages().uploading : zone.invalidDrag() ? messages().fileTypeNotAccepted : zone.isDragging() ? messages().dropToUpload : props.title ?? messages().dropFiles;
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return error();
+    },
+    meta: meta,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return disabled();
+    },
+    get children() {
+      return [(() => {
+        var _el$ = _$getNextElement(_tmpl$3),
+          _el$2 = _el$.firstChild,
+          _el$3 = _el$2.firstChild,
+          _el$4 = _el$2.nextSibling,
+          _el$5 = _el$4.firstChild,
+          _el$8 = _el$5.nextSibling,
+          [_el$9, _co$] = _$getNextMarker(_el$8.nextSibling),
+          _el$0 = _el$9.nextSibling,
+          [_el$1, _co$2] = _$getNextMarker(_el$0.nextSibling);
+        _$spread(_el$, _$mergeProps({
+          get id() {
+            return meta.controlId;
+          },
+          get ["data-dragging"]() {
+            return zone.isDragging() ? "true" : undefined;
+          },
+          get ["data-invalid"]() {
+            return zone.invalidDrag() || error() ? "true" : undefined;
+          },
+          get disabled() {
+            return disabled();
+          }
+        }, () => fieldControlAria(meta, props), {
+          "onClick": () => input?.click()
+        }, () => zone.handlers), false, true);
+        _$insert(_el$5, title);
+        _$insert(_el$4, _$createComponent(Show, {
+          get when() {
+            return zone.invalidDrag();
+          },
+          get fallback() {
+            return _$createComponent(Show, {
+              get when() {
+                return props.subtitle;
+              },
+              get children() {
+                var _el$11 = _$getNextElement(_tmpl$);
+                _$insert(_el$11, () => props.subtitle);
+                return _el$11;
+              }
+            });
+          },
+          get children() {
+            var _el$6 = _$getNextElement(_tmpl$);
+            _$insert(_el$6, () => messages().chooseMatchingFile);
+            return _el$6;
+          }
+        }), _el$9, _co$);
+        _$insert(_el$4, _$createComponent(Show, {
+          get when() {
+            return props.hint;
+          },
+          get children() {
+            var _el$7 = _$getNextElement(_tmpl$2);
+            _$insert(_el$7, () => props.hint);
+            return _el$7;
+          }
+        }), _el$1, _co$2);
+        _$effect(() => _$className(_el$3, props.busy ? "ti ti-loader-2 k2b-spin" : props.icon ?? "ti ti-cloud-upload"));
+        _$runHydrationEvents();
+        return _el$;
+      })(), (() => {
+        var _el$10 = _$getNextElement(_tmpl$4);
+        _el$10.addEventListener("change", event => {
+          const files = Array.from(event.currentTarget.files ?? []);
+          // Reset before emitting so re-picking the same file still fires change,
+          // even when onDrop throws.
+          event.currentTarget.value = "";
+          emit(files);
+        });
+        var _ref$ = input;
+        typeof _ref$ === "function" ? _$use(_ref$, _el$10) : input = _el$10;
+        _$effect(_p$ => {
+          var _v$ = props["aria-label"] ?? (typeof props.label === "string" ? props.label : props.multiple === false ? messages().chooseFile : messages().chooseFiles),
+            _v$2 = props.accept,
+            _v$3 = props.multiple ?? true,
+            _v$4 = disabled();
+          _v$ !== _p$.e && _$setAttribute(_el$10, "aria-label", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$10, "accept", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$setProperty(_el$10, "multiple", _p$.a = _v$3);
+          _v$4 !== _p$.o && _$setProperty(_el$10, "disabled", _p$.o = _v$4);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$10;
+      })()];
+    }
+  });
+}
+const DEFAULT_IMAGE_ACCEPT = "image/jpeg,image/png,image/gif,image/webp,image/svg+xml,.jpg,.jpeg,.png,.gif,.webp,.svg";
+const defaultImageTransform = async file => {
+  const {
+    img
+  } = await import("@k2b/stdlib/browser");
+  return img.presets.avatar(file);
+};
+export function ImageInput(props) {
+  const messages = useUiMessages();
+  const meta = createFieldMeta(props.id);
+  const [busy, setBusy] = createSignal(false);
+  const [localError, setLocalError] = createSignal();
+  let input;
+  const disabled = () => Boolean(props.disabled || busy() || !props.onValueChange);
+  const error = () => resolveMaybeAccessor(props.error) ?? localError();
+  const value = () => {
+    const current = resolveMaybeAccessor(props.value);
+    return current && !current.includes(props.fallbackMarker ?? "?fallback") ? current : null;
+  };
+  const compact = () => props.variant === "small";
+  const changeLabel = () => value() ? messages().changeImage : messages().addImage;
+  const changeIcon = () => value() ? "ti ti-pencil" : "ti ti-photo-plus";
+  const select = async file => {
+    if (!file || disabled()) return;
+    setBusy(true);
+    setLocalError();
+    try {
+      const transformed = await (props.transform ?? defaultImageTransform)(file);
+      commitFieldValue(props, transformed);
+    } catch (error) {
+      setLocalError(error instanceof Error ? error.message : messages().imageProcessingFailed);
+    } finally {
+      setBusy(false);
+      if (input) input.value = "";
+    }
+  };
+  return _$createComponent(Field, {
+    get ["class"]() {
+      return props.class;
+    },
+    get label() {
+      return props.label;
+    },
+    get description() {
+      return props.description;
+    },
+    get error() {
+      return error();
+    },
+    meta: meta,
+    get required() {
+      return props.required;
+    },
+    get disabled() {
+      return disabled();
+    },
+    get children() {
+      var _el$12 = _$getNextElement(_tmpl$7),
+        _el$13 = _el$12.firstChild,
+        _el$14 = _el$13.nextSibling,
+        _el$17 = _el$14.firstChild,
+        [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling),
+        _el$19 = _el$18.nextSibling,
+        [_el$20, _co$4] = _$getNextMarker(_el$19.nextSibling),
+        _el$21 = _el$14.nextSibling;
+      _$insert(_el$13, _$createComponent(Show, {
+        get when() {
+          return value();
+        },
+        get fallback() {
+          return _$getNextElement(_tmpl$8);
+        },
+        children: source => (() => {
+          var _el$23 = _$getNextElement(_tmpl$9);
+          _$effect(_p$ => {
+            var _v$0 = source(),
+              _v$1 = typeof props.label === "string" ? props.label : messages().selectedImage;
+            _v$0 !== _p$.e && _$setAttribute(_el$23, "src", _p$.e = _v$0);
+            _v$1 !== _p$.t && _$setAttribute(_el$23, "alt", _p$.t = _v$1);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
+          return _el$23;
+        })()
+      }));
+      _$insert(_el$14, _$createComponent(Show, {
+        get when() {
+          return compact();
+        },
+        get fallback() {
+          return _$createComponent(Button, {
+            variant: "secondary",
+            get loading() {
+              return busy();
+            },
+            get loadingLabel() {
+              return messages().processingImage;
+            },
+            get disabled() {
+              return disabled();
+            },
+            onClick: () => input?.click(),
+            get children() {
+              return [(() => {
+                var _el$24 = _$getNextElement(_tmpl$5);
+                _$effect(() => _$className(_el$24, changeIcon()));
+                return _el$24;
+              })(), _$memo(() => _$memo(() => !!value())() ? messages().change : messages().add)];
+            }
+          });
+        },
+        get children() {
+          return _$createComponent(IconButton, {
+            get label() {
+              return changeLabel();
+            },
+            get loading() {
+              return busy();
+            },
+            get loadingLabel() {
+              return messages().processingImage;
+            },
+            get disabled() {
+              return disabled();
+            },
+            onClick: () => input?.click(),
+            get children() {
+              var _el$15 = _$getNextElement(_tmpl$5);
+              _$effect(() => _$className(_el$15, changeIcon()));
+              return _el$15;
+            }
+          });
+        }
+      }), _el$18, _co$3);
+      _$insert(_el$14, _$createComponent(Show, {
+        get when() {
+          return value();
+        },
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return compact();
+            },
+            get fallback() {
+              return _$createComponent(Button, {
+                variant: "ghost",
+                get disabled() {
+                  return disabled();
+                },
+                onClick: () => commitFieldValue(props, null),
+                get children() {
+                  return [_$getNextElement(_tmpl$6), " Remove"];
+                }
+              });
+            },
+            get children() {
+              return _$createComponent(IconButton, {
+                get label() {
+                  return messages().removeImage;
+                },
+                get disabled() {
+                  return disabled();
+                },
+                onClick: () => commitFieldValue(props, null),
+                get children() {
+                  return _$getNextElement(_tmpl$6);
+                }
+              });
+            }
+          });
+        }
+      }), _el$20, _co$4);
+      var _ref$2 = input;
+      typeof _ref$2 === "function" ? _$use(_ref$2, _el$21) : input = _el$21;
+      _$spread(_el$21, _$mergeProps({
+        get id() {
+          return meta.controlId;
+        },
+        get accept() {
+          return props.accept ?? DEFAULT_IMAGE_ACCEPT;
+        },
+        get disabled() {
+          return disabled();
+        },
+        get required() {
+          return _$memo(() => !!props.required)() && !value();
+        }
+      }, () => fieldControlAria(meta, {
+        ...props,
+        error
+      }), {
+        "onChange": event => void select(event.currentTarget.files?.[0])
+      }), false, false);
+      _$effect(_p$ => {
+        var _v$5 = props.round ? "true" : undefined,
+          _v$6 = props.variant ?? "default",
+          _v$7 = props.label ? meta.labelId : undefined,
+          _v$8 = !props.label ? props["aria-label"] : undefined,
+          _v$9 = fieldControlAria(meta, {
+            ...props,
+            error
+          })["aria-describedby"];
+        _v$5 !== _p$.e && _$setAttribute(_el$12, "data-round", _p$.e = _v$5);
+        _v$6 !== _p$.t && _$setAttribute(_el$12, "data-variant", _p$.t = _v$6);
+        _v$7 !== _p$.a && _$setAttribute(_el$12, "aria-labelledby", _p$.a = _v$7);
+        _v$8 !== _p$.o && _$setAttribute(_el$12, "aria-label", _p$.o = _v$8);
+        _v$9 !== _p$.i && _$setAttribute(_el$12, "aria-describedby", _p$.i = _v$9);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined,
+        i: undefined
+      });
+      _$runHydrationEvents();
+      return _el$12;
+    }
+  });
+}
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+const imageElementReady = async image => {
+  if (image.complete && image.naturalWidth > 0) return;
+  await new Promise((resolve, reject) => {
+    image.addEventListener("load", () => resolve(), {
+      once: true
+    });
+    image.addEventListener("error", () => reject(new Error("Failed to load image.")), {
+      once: true
+    });
+  });
+};
+const loadPreviewState = async source => {
+  const sourceImage = source instanceof HTMLImageElement ? source : Object.assign(new Image(), {
+    crossOrigin: source instanceof Blob ? undefined : "anonymous",
+    src: source instanceof HTMLCanvasElement ? source.toDataURL("image/png") : source instanceof Blob ? URL.createObjectURL(source) : source
+  });
+  try {
+    await imageElementReady(sourceImage);
+    return {
+      url: source instanceof HTMLImageElement ? source.currentSrc || source.src : sourceImage.src,
+      objectUrl: source instanceof Blob,
+      sourceWidth: sourceImage.naturalWidth || sourceImage.width,
+      sourceHeight: sourceImage.naturalHeight || sourceImage.height
+    };
+  } catch (error) {
+    if (source instanceof Blob) URL.revokeObjectURL(sourceImage.src);
+    throw error;
+  }
+};
+export function ImageCropper(props) {
+  const messages = useUiMessages();
+  let frame;
+  let activePreview = null;
+  const aspect = () => props.aspect ?? "free";
+  const previewShape = () => props.previewShape ?? "rect";
+  const disabled = () => props.disabled ?? false;
+  const [preview, setPreview] = createSignal(null);
+  const [crop, setCrop] = createSignal(null);
+  const [rotation, setRotation] = createSignal(0);
+  const [loading, setLoading] = createSignal(true);
+  const [error, setError] = createSignal(null);
+  const [drag, setDrag] = createSignal(null);
+  const previewSize = () => {
+    const currentPreview = preview();
+    if (!currentPreview) return null;
+    const swapsDimensions = rotation() === 90 || rotation() === 270;
+    return {
+      width: swapsDimensions ? currentPreview.sourceHeight : currentPreview.sourceWidth,
+      height: swapsDimensions ? currentPreview.sourceWidth : currentPreview.sourceHeight
+    };
+  };
+  const replacePreview = next => {
+    if (activePreview?.objectUrl) URL.revokeObjectURL(activePreview.url);
+    activePreview = next;
+    setPreview(next);
+  };
+  onCleanup(() => {
+    if (activePreview?.objectUrl) URL.revokeObjectURL(activePreview.url);
+  });
+  createEffect(() => {
+    props.source;
+    setRotation(0);
+    setCrop(null);
+  });
+  createEffect(() => {
+    const source = props.source;
+    let disposed = false;
+    replacePreview(null);
+    setLoading(true);
+    setError(null);
+    void (async () => {
+      try {
+        const nextPreview = await loadPreviewState(source);
+        if (disposed) {
+          if (nextPreview.objectUrl) URL.revokeObjectURL(nextPreview.url);
+          return;
+        }
+        replacePreview(nextPreview);
+      } catch {
+        if (disposed) return;
+        replacePreview(null);
+        setCrop(null);
+        setError(messages().failedLoadImage);
+      } finally {
+        if (!disposed) setLoading(false);
+      }
+    })();
+    onCleanup(() => {
+      disposed = true;
+    });
+  });
+  createEffect(() => {
+    const currentSize = previewSize();
+    const currentAspect = aspect();
+    if (!currentSize) return;
+    setCrop(current => clampImageCropRect(current ?? getInitialImageCropRect(currentSize, currentAspect), currentSize, currentAspect));
+  });
+  createEffect(() => {
+    const currentCrop = crop();
+    const currentPreview = preview();
+    props.onValueChange?.(currentCrop && currentPreview ? {
+      crop: currentCrop,
+      rotation: rotation()
+    } : null);
+  });
+  const readPointerPosition = event => {
+    if (!frame) return {
+      x: 0,
+      y: 0
+    };
+    const rect = frame.getBoundingClientRect();
+    return {
+      x: (event.clientX - rect.left) / Math.max(1, rect.width),
+      y: (event.clientY - rect.top) / Math.max(1, rect.height)
+    };
+  };
+  const moveCrop = event => {
+    const state = drag();
+    const currentSize = previewSize();
+    if (!state || !currentSize || state.pointerId !== event.pointerId) return;
+    event.preventDefault();
+    const point = readPointerPosition(event);
+    const dx = point.x - state.startX;
+    const dy = point.y - state.startY;
+    const start = state.startCrop;
+    if (state.handle === "move") {
+      setCrop(clampImageCropRect({
+        ...start,
+        x: start.x + dx,
+        y: start.y + dy
+      }, currentSize, aspect()));
+      return;
+    }
+    setCrop(resizeImageCropFromCorner(start, currentSize, aspect(), state.handle, dx, dy));
+  };
+  const endDrag = event => {
+    const state = drag();
+    if (!state || state.pointerId !== event.pointerId) return;
+    window.removeEventListener("pointermove", moveCrop);
+    window.removeEventListener("pointerup", endDrag);
+    window.removeEventListener("pointercancel", endDrag);
+    setDrag(null);
+  };
+  const startDrag = (handle, event) => {
+    const currentCrop = crop();
+    if (!currentCrop || disabled()) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    const point = readPointerPosition(event);
+    setDrag({
+      handle,
+      pointerId: event.pointerId,
+      startX: point.x,
+      startY: point.y,
+      startCrop: currentCrop
+    });
+    window.addEventListener("pointermove", moveCrop);
+    window.addEventListener("pointerup", endDrag);
+    window.addEventListener("pointercancel", endDrag);
+  };
+  onCleanup(() => {
+    if (typeof window === "undefined") return;
+    window.removeEventListener("pointermove", moveCrop);
+    window.removeEventListener("pointerup", endDrag);
+    window.removeEventListener("pointercancel", endDrag);
+  });
+  const rotateRight = () => {
+    if (disabled()) return;
+    setRotation(current => rotateImageCropRight(current));
+  };
+  const nudgeCrop = (handle, event) => {
+    if (disabled() || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+    const current = crop();
+    const currentSize = previewSize();
+    if (!current || !currentSize) return;
+    event.preventDefault();
+    const step = event.shiftKey ? 0.05 : 0.01;
+    const dx = event.key === "ArrowLeft" ? -step : event.key === "ArrowRight" ? step : 0;
+    const dy = event.key === "ArrowUp" ? -step : event.key === "ArrowDown" ? step : 0;
+    setCrop(handle === "move" ? clampImageCropRect({
+      ...current,
+      x: current.x + dx,
+      y: current.y + dy
+    }, currentSize, aspect()) : resizeImageCropFromCorner(current, currentSize, aspect(), handle, dx, dy));
+  };
+  const previewFrameStyle = () => {
+    const currentSize = previewSize();
+    if (!currentSize) return {};
+    return {
+      "aspect-ratio": `${currentSize.width} / ${currentSize.height}`,
+      "max-width": `min(100%, calc(min(58vh, 24rem) * ${currentSize.width} / ${currentSize.height}))`
+    };
+  };
+  const previewImageStyle = () => {
+    const currentPreview = preview();
+    const currentSize = previewSize();
+    if (!currentPreview || !currentSize) return {};
+    const swapsDimensions = rotation() === 90 || rotation() === 270;
+    return {
+      left: "50%",
+      top: "50%",
+      width: swapsDimensions ? `${currentPreview.sourceWidth / currentSize.width * 100}%` : "100%",
+      height: swapsDimensions ? `${currentPreview.sourceHeight / currentSize.height * 100}%` : "100%",
+      "max-width": "none",
+      "object-fit": "fill",
+      transform: `translate(-50%, -50%) rotate(${rotation()}deg)`
+    };
+  };
+  const cropStyle = () => {
+    const currentCrop = crop();
+    if (!currentCrop) return {};
+    return {
+      left: `${currentCrop.x * 100}%`,
+      top: `${currentCrop.y * 100}%`,
+      width: `${currentCrop.width * 100}%`,
+      height: `${currentCrop.height * 100}%`,
+      "box-shadow": "0 0 0 9999px rgba(0,0,0,.42)"
+    };
+  };
+  const showResizeHandles = () => previewShape() !== "circle";
+  return (() => {
+    var _el$26 = _$getNextElement(_tmpl$1),
+      _el$27 = _el$26.firstChild;
+    _$insert(_el$27, _$createComponent(Show, {
+      get when() {
+        return !loading();
+      },
+      get fallback() {
+        return (() => {
+          var _el$32 = _$getNextElement(_tmpl$10);
+          _$insert(_el$32, () => messages().preparingImage);
+          return _el$32;
+        })();
+      },
+      get children() {
+        return _$createComponent(Show, {
+          get when() {
+            return !error();
+          },
+          get fallback() {
+            return (() => {
+              var _el$33 = _$getNextElement(_tmpl$11);
+              _$insert(_el$33, error);
+              return _el$33;
+            })();
+          },
+          get children() {
+            return _$createComponent(Show, {
+              get when() {
+                return _$memo(() => !!preview())() && crop();
+              },
+              get children() {
+                var _el$28 = _$getNextElement(_tmpl$0),
+                  _el$29 = _el$28.firstChild,
+                  _el$30 = _el$29.nextSibling,
+                  _el$31 = _el$30.nextSibling;
+                var _ref$3 = frame;
+                typeof _ref$3 === "function" ? _$use(_ref$3, _el$28) : frame = _el$28;
+                _$setAttribute(_el$29, "draggable", false);
+                _el$30.$$keydown = event => nudgeCrop("move", event);
+                _el$30.$$pointerdown = event => startDrag("move", event);
+                _$insert(_el$30, _$createComponent(Show, {
+                  get when() {
+                    return showResizeHandles();
+                  },
+                  get children() {
+                    return _$createComponent(For, {
+                      each: ["nw", "ne", "sw", "se"],
+                      children: handle => (() => {
+                        var _el$34 = _$getNextElement(_tmpl$12);
+                        _el$34.$$keydown = event => nudgeCrop(handle, event);
+                        _el$34.$$pointerdown = event => startDrag(handle, event);
+                        _$setAttribute(_el$34, "data-handle", handle);
+                        _$effect(_p$ => {
+                          var _v$21 = messages().resizeCrop({
+                              handle
+                            }),
+                            _v$22 = disabled();
+                          _v$21 !== _p$.e && _$setAttribute(_el$34, "aria-label", _p$.e = _v$21);
+                          _v$22 !== _p$.t && _$setProperty(_el$34, "disabled", _p$.t = _v$22);
+                          return _p$;
+                        }, {
+                          e: undefined,
+                          t: undefined
+                        });
+                        _$runHydrationEvents();
+                        return _el$34;
+                      })()
+                    });
+                  }
+                }));
+                _el$31.$$click = rotateRight;
+                _$effect(_p$ => {
+                  var _v$10 = previewFrameStyle(),
+                    _v$11 = preview().url,
+                    _v$12 = messages().cropPreview,
+                    _v$13 = previewImageStyle(),
+                    _v$14 = previewShape(),
+                    _v$15 = cropStyle(),
+                    _v$16 = disabled() ? undefined : 0,
+                    _v$17 = messages().cropArea,
+                    _v$18 = messages().rotateRight,
+                    _v$19 = messages().rotateRight,
+                    _v$20 = disabled() || !crop() || Boolean(error());
+                  _p$.e = _$style(_el$28, _v$10, _p$.e);
+                  _v$11 !== _p$.t && _$setAttribute(_el$29, "src", _p$.t = _v$11);
+                  _v$12 !== _p$.a && _$setAttribute(_el$29, "alt", _p$.a = _v$12);
+                  _p$.o = _$style(_el$29, _v$13, _p$.o);
+                  _v$14 !== _p$.i && _$setAttribute(_el$30, "data-shape", _p$.i = _v$14);
+                  _p$.n = _$style(_el$30, _v$15, _p$.n);
+                  _v$16 !== _p$.s && _$setAttribute(_el$30, "tabindex", _p$.s = _v$16);
+                  _v$17 !== _p$.h && _$setAttribute(_el$30, "aria-label", _p$.h = _v$17);
+                  _v$18 !== _p$.r && _$setAttribute(_el$31, "title", _p$.r = _v$18);
+                  _v$19 !== _p$.d && _$setAttribute(_el$31, "aria-label", _p$.d = _v$19);
+                  _v$20 !== _p$.l && _$setProperty(_el$31, "disabled", _p$.l = _v$20);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined,
+                  i: undefined,
+                  n: undefined,
+                  s: undefined,
+                  h: undefined,
+                  r: undefined,
+                  d: undefined,
+                  l: undefined
+                });
+                _$runHydrationEvents();
+                return _el$28;
+              }
+            });
+          }
+        });
+      }
+    }));
+    _$effect(() => _$className(_el$26, `k2b-image-cropper ${props.class ?? ""}`));
+    return _el$26;
+  })();
+}
+_$delegateEvents(["pointerdown", "keydown", "click"]);
+//# sourceMappingURL=FileInputs.js.map