@k2b/ui 0.26.0 → 0.28.0
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.
- package/README.md +1 -1
- package/dist/base.css +147 -2
- package/dist/browser/actions/ContextMenu.js +30 -4
- package/dist/browser/actions/ContextMenu.js.map +1 -1
- package/dist/browser/actions/Dropdown.js +184 -158
- package/dist/browser/actions/Dropdown.js.map +1 -1
- package/dist/browser/actions/GestureMenu.js +71 -138
- package/dist/browser/actions/GestureMenu.js.map +1 -1
- package/dist/browser/actions/Toolbar.js +379 -48
- package/dist/browser/actions/Toolbar.js.map +1 -1
- package/dist/browser/actions/index.js.map +1 -1
- package/dist/browser/actions/menu-rows.js +15 -0
- package/dist/browser/actions/menu-rows.js.map +1 -0
- package/dist/browser/actions/menu-sheet.js +154 -0
- package/dist/browser/actions/menu-sheet.js.map +1 -0
- package/dist/browser/actions/toolbar-messages.js +20 -0
- package/dist/browser/actions/toolbar-messages.js.map +1 -0
- package/dist/browser/chart-inspection.js +3 -0
- package/dist/browser/chart-inspection.js.map +1 -0
- package/dist/browser/chat/ChatComposer.js +1020 -431
- package/dist/browser/chat/ChatComposer.js.map +1 -1
- package/dist/browser/chat/chat-behavior.js +4 -0
- package/dist/browser/chat/chat-behavior.js.map +1 -1
- package/dist/browser/chat/chat-messages.js +33 -1
- package/dist/browser/chat/chat-messages.js.map +1 -1
- package/dist/browser/chat/command-search.js +173 -0
- package/dist/browser/chat/command-search.js.map +1 -0
- package/dist/browser/chat/composer-document.js +1 -1
- package/dist/browser/chat/composer-document.js.map +1 -1
- package/dist/browser/chat/index.js +2 -0
- package/dist/browser/chat/index.js.map +1 -1
- package/dist/browser/chat/reaction-people.js +15 -0
- package/dist/browser/chat/reaction-people.js.map +1 -0
- package/dist/browser/content/CalendarDayView.js +28 -3
- package/dist/browser/content/CalendarDayView.js.map +1 -1
- package/dist/browser/content/Chart.js +6 -15
- package/dist/browser/content/Chart.js.map +1 -1
- package/dist/browser/content/ChartSnapshotView.js +7 -10
- package/dist/browser/content/ChartSnapshotView.js.map +1 -1
- package/dist/browser/content/MessageRow.js +330 -448
- package/dist/browser/content/MessageRow.js.map +1 -1
- package/dist/browser/content/ReactionBar.js +419 -0
- package/dist/browser/content/ReactionBar.js.map +1 -0
- package/dist/browser/content/chart-inspection-core.js +557 -0
- package/dist/browser/content/chart-inspection-core.js.map +1 -0
- package/dist/browser/content/chart-inspection.js +10 -445
- package/dist/browser/content/chart-inspection.js.map +1 -1
- package/dist/browser/content/chart-line-gaps.js +1 -1
- package/dist/browser/content/chart-line-gaps.js.map +1 -1
- package/dist/browser/content/chart-snapshot.js +1 -1
- package/dist/browser/content/chart-snapshot.js.map +1 -1
- package/dist/browser/content/index.js +1 -0
- package/dist/browser/content/index.js.map +1 -1
- package/dist/browser/feedback/dialog-core.js +135 -23
- package/dist/browser/feedback/dialog-core.js.map +1 -1
- package/dist/browser/index.js +1 -0
- package/dist/browser/index.js.map +1 -1
- package/dist/browser/input-mode.js +40 -0
- package/dist/browser/input-mode.js.map +1 -0
- package/dist/browser/inputs/Combobox.js +4 -2
- package/dist/browser/inputs/Combobox.js.map +1 -1
- package/dist/browser/inputs/FileDropTarget.js +24 -9
- package/dist/browser/inputs/FileDropTarget.js.map +1 -1
- package/dist/browser/inputs/FileInputs.js +2 -2
- package/dist/browser/inputs/FileInputs.js.map +1 -1
- package/dist/browser/inputs/SelectChip.js +52 -12
- package/dist/browser/inputs/SelectChip.js.map +1 -1
- package/dist/browser/inputs/emoji/EmojiPicker.js +13 -0
- package/dist/browser/inputs/emoji/EmojiPicker.js.map +1 -1
- package/dist/browser/inputs/file-drop.js.map +1 -1
- package/dist/browser/layout/AppWorkspace.js +708 -515
- package/dist/browser/layout/AppWorkspace.js.map +1 -1
- package/dist/browser/layout/BottomSheet.js +8 -0
- package/dist/browser/layout/BottomSheet.js.map +1 -1
- package/dist/browser/layout/DetailPanel.js +283 -197
- package/dist/browser/layout/DetailPanel.js.map +1 -1
- package/dist/browser/layout/Discussion.js +233 -185
- package/dist/browser/layout/Discussion.js.map +1 -1
- package/dist/browser/layout/TableOfContents.js +10 -2
- package/dist/browser/layout/TableOfContents.js.map +1 -1
- package/dist/browser/layout/app-workspace-controller.js +155 -23
- package/dist/browser/layout/app-workspace-controller.js.map +1 -1
- package/dist/browser/layout/app-workspace-state.js +5 -1
- package/dist/browser/layout/app-workspace-state.js.map +1 -1
- package/dist/browser/layout/detail-panel-messages.js +35 -0
- package/dist/browser/layout/detail-panel-messages.js.map +1 -0
- package/dist/browser/layout/index.js +1 -1
- package/dist/browser/layout/index.js.map +1 -1
- package/dist/browser/surfaces/Avatar.js +50 -20
- package/dist/browser/surfaces/Avatar.js.map +1 -1
- package/dist/browser/surfaces/AvatarStack.js +406 -0
- package/dist/browser/surfaces/AvatarStack.js.map +1 -0
- package/dist/browser/surfaces/avatar-messages.js +8 -2
- package/dist/browser/surfaces/avatar-messages.js.map +1 -1
- package/dist/browser/surfaces/index.js +1 -0
- package/dist/browser/surfaces/index.js.map +1 -1
- package/dist/ssr/actions/ContextMenu.js +21 -3
- package/dist/ssr/actions/ContextMenu.js.map +1 -1
- package/dist/ssr/actions/Dropdown.js +140 -72
- package/dist/ssr/actions/Dropdown.js.map +1 -1
- package/dist/ssr/actions/GestureMenu.js +52 -106
- package/dist/ssr/actions/GestureMenu.js.map +1 -1
- package/dist/ssr/actions/Toolbar.js +294 -14
- package/dist/ssr/actions/Toolbar.js.map +1 -1
- package/dist/ssr/actions/index.js.map +1 -1
- package/dist/ssr/actions/menu-rows.js +15 -0
- package/dist/ssr/actions/menu-rows.js.map +1 -0
- package/dist/ssr/actions/menu-sheet.js +138 -0
- package/dist/ssr/actions/menu-sheet.js.map +1 -0
- package/dist/ssr/actions/toolbar-messages.js +20 -0
- package/dist/ssr/actions/toolbar-messages.js.map +1 -0
- package/dist/ssr/chart-inspection.js +3 -0
- package/dist/ssr/chart-inspection.js.map +1 -0
- package/dist/ssr/chat/ChatComposer.js +604 -113
- package/dist/ssr/chat/ChatComposer.js.map +1 -1
- package/dist/ssr/chat/chat-behavior.js +4 -0
- package/dist/ssr/chat/chat-behavior.js.map +1 -1
- package/dist/ssr/chat/chat-messages.js +33 -1
- package/dist/ssr/chat/chat-messages.js.map +1 -1
- package/dist/ssr/chat/command-search.js +173 -0
- package/dist/ssr/chat/command-search.js.map +1 -0
- package/dist/ssr/chat/composer-document.js +1 -1
- package/dist/ssr/chat/composer-document.js.map +1 -1
- package/dist/ssr/chat/index.js +2 -0
- package/dist/ssr/chat/index.js.map +1 -1
- package/dist/ssr/chat/reaction-people.js +15 -0
- package/dist/ssr/chat/reaction-people.js.map +1 -0
- package/dist/ssr/content/CalendarDayView.js +28 -3
- package/dist/ssr/content/CalendarDayView.js.map +1 -1
- package/dist/ssr/content/Chart.js +6 -15
- package/dist/ssr/content/Chart.js.map +1 -1
- package/dist/ssr/content/ChartSnapshotView.js +7 -10
- package/dist/ssr/content/ChartSnapshotView.js.map +1 -1
- package/dist/ssr/content/MessageRow.js +98 -152
- package/dist/ssr/content/MessageRow.js.map +1 -1
- package/dist/ssr/content/ReactionBar.js +304 -0
- package/dist/ssr/content/ReactionBar.js.map +1 -0
- package/dist/ssr/content/chart-inspection-core.js +557 -0
- package/dist/ssr/content/chart-inspection-core.js.map +1 -0
- package/dist/ssr/content/chart-inspection.js +10 -445
- package/dist/ssr/content/chart-inspection.js.map +1 -1
- package/dist/ssr/content/chart-line-gaps.js +1 -1
- package/dist/ssr/content/chart-line-gaps.js.map +1 -1
- package/dist/ssr/content/chart-snapshot.js +1 -1
- package/dist/ssr/content/chart-snapshot.js.map +1 -1
- package/dist/ssr/content/index.js +1 -0
- package/dist/ssr/content/index.js.map +1 -1
- package/dist/ssr/feedback/dialog-core.js +135 -23
- package/dist/ssr/feedback/dialog-core.js.map +1 -1
- package/dist/ssr/index.js +1 -0
- package/dist/ssr/index.js.map +1 -1
- package/dist/ssr/input-mode.js +40 -0
- package/dist/ssr/input-mode.js.map +1 -0
- package/dist/ssr/inputs/Combobox.js +4 -2
- package/dist/ssr/inputs/Combobox.js.map +1 -1
- package/dist/ssr/inputs/FileDropTarget.js +17 -5
- package/dist/ssr/inputs/FileDropTarget.js.map +1 -1
- package/dist/ssr/inputs/FileInputs.js +2 -2
- package/dist/ssr/inputs/FileInputs.js.map +1 -1
- package/dist/ssr/inputs/SelectChip.js +44 -11
- package/dist/ssr/inputs/SelectChip.js.map +1 -1
- package/dist/ssr/inputs/emoji/EmojiPicker.js +12 -0
- package/dist/ssr/inputs/emoji/EmojiPicker.js.map +1 -1
- package/dist/ssr/inputs/file-drop.js.map +1 -1
- package/dist/ssr/layout/AppWorkspace.js +242 -105
- package/dist/ssr/layout/AppWorkspace.js.map +1 -1
- package/dist/ssr/layout/BottomSheet.js +8 -0
- package/dist/ssr/layout/BottomSheet.js.map +1 -1
- package/dist/ssr/layout/DetailPanel.js +112 -58
- package/dist/ssr/layout/DetailPanel.js.map +1 -1
- package/dist/ssr/layout/Discussion.js +63 -36
- package/dist/ssr/layout/Discussion.js.map +1 -1
- package/dist/ssr/layout/TableOfContents.js +10 -2
- package/dist/ssr/layout/TableOfContents.js.map +1 -1
- package/dist/ssr/layout/app-workspace-controller.js +155 -23
- package/dist/ssr/layout/app-workspace-controller.js.map +1 -1
- package/dist/ssr/layout/app-workspace-state.js +5 -1
- package/dist/ssr/layout/app-workspace-state.js.map +1 -1
- package/dist/ssr/layout/detail-panel-messages.js +35 -0
- package/dist/ssr/layout/detail-panel-messages.js.map +1 -0
- package/dist/ssr/layout/index.js +1 -1
- package/dist/ssr/layout/index.js.map +1 -1
- package/dist/ssr/surfaces/Avatar.js +20 -2
- package/dist/ssr/surfaces/Avatar.js.map +1 -1
- package/dist/ssr/surfaces/AvatarStack.js +286 -0
- package/dist/ssr/surfaces/AvatarStack.js.map +1 -0
- package/dist/ssr/surfaces/avatar-messages.js +8 -2
- package/dist/ssr/surfaces/avatar-messages.js.map +1 -1
- package/dist/ssr/surfaces/index.js +1 -0
- package/dist/ssr/surfaces/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/actions/ContextMenu.d.ts +8 -0
- package/dist/types/actions/Dropdown.d.ts +12 -5
- package/dist/types/actions/GestureMenu.d.ts +6 -4
- package/dist/types/actions/Toolbar.d.ts +20 -0
- package/dist/types/actions/index.d.ts +1 -1
- package/dist/types/actions/menu-rows.d.ts +5 -0
- package/dist/types/actions/menu-sheet.d.ts +22 -0
- package/dist/types/actions/toolbar-messages.d.ts +8 -0
- package/dist/types/chart-inspection.d.ts +2 -0
- package/dist/types/chat/ChatComposer.d.ts +51 -2
- package/dist/types/chat/chat-behavior.d.ts +4 -0
- package/dist/types/chat/chat-messages.d.ts +17 -2
- package/dist/types/chat/command-search.d.ts +41 -0
- package/dist/types/chat/index.d.ts +3 -1
- package/dist/types/chat/reaction-people.d.ts +9 -0
- package/dist/types/content/Chart.d.ts +2 -2
- package/dist/types/content/MessageRow.d.ts +3 -10
- package/dist/types/content/ReactionBar.d.ts +32 -0
- package/dist/types/content/chart-inspection-core.d.ts +61 -0
- package/dist/types/content/chart-inspection.d.ts +4 -20
- package/dist/types/content/chart-snapshot.d.ts +1 -1
- package/dist/types/content/index.d.ts +2 -1
- package/dist/types/feedback/dialog-core.d.ts +16 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/input-mode.d.ts +7 -0
- package/dist/types/inputs/FileDropTarget.d.ts +6 -3
- package/dist/types/inputs/SelectChip.d.ts +6 -0
- package/dist/types/inputs/file-drop.d.ts +2 -0
- package/dist/types/layout/AppWorkspace.d.ts +13 -1
- package/dist/types/layout/BottomSheet.d.ts +8 -0
- package/dist/types/layout/DetailPanel.d.ts +11 -0
- package/dist/types/layout/Discussion.d.ts +8 -0
- package/dist/types/layout/TableOfContents.d.ts +2 -0
- package/dist/types/layout/detail-panel-messages.d.ts +15 -0
- package/dist/types/layout/index.d.ts +1 -1
- package/dist/types/surfaces/Avatar.d.ts +12 -0
- package/dist/types/surfaces/AvatarStack.d.ts +41 -0
- package/dist/types/surfaces/avatar-messages.d.ts +3 -0
- package/dist/types/surfaces/index.d.ts +3 -1
- package/package.json +9 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["inputs/FileInputs.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, mergeProps, onCleanup, onMount, Show } from \"solid-js\";\nimport { Button, IconButton } from \"../actions/Button\";\nimport { Tooltip } from \"../feedback/Tooltip\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { fileDropTarget } from \"./FileDropTarget\";\nimport type { FieldProps, ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport { fileDropEngine, liveDocument } from \"./file-drop\";\nimport { useFileDropMessages } from \"./file-drop-messages\";\nimport { useFileInputMessages } from \"./file-input-messages\";\nimport {\n clampImageCropRect,\n getInitialImageCropRect,\n type ImageCropAspect,\n type ImageCropRect,\n type ImageCropResizeHandle,\n type ImageCropRotation,\n type ImageCropSource,\n type ImageCropState,\n resizeImageCropFromCorner,\n rotateImageCropRight,\n} from \"./image-crop\";\n\nexport type FileDropzoneProps = FieldProps & {\n accept?: string;\n multiple?: boolean;\n busy?: boolean;\n /** Full icon class list, for example `\"ti ti-photo-plus\"`. Defaults to `\"ti ti-cloud-upload\"`. */\n icon?: string;\n title?: JSX.Element;\n subtitle?: JSX.Element;\n hint?: JSX.Element;\n /** One sentence that says what dropping does, shown while files are over the zone. Defaults to \"Drop to upload\". */\n dropLabel?: string;\n /**\n * Chooses files when the zone is clicked, instead of the device's file dialog, for example to offer other sources as\n * well. Called within the click, so it may still open the device's dialog; resolve `[]` when the user cancels. A\n * rejection shows its message as the field's error.\n */\n choose?: () => Promise<readonly File[]>;\n onDrop: (files: File[]) => void | Promise<void>;\n};\n\nexport function FileDropzone(props: FileDropzoneProps): JSX.Element {\n const fileInputMessages = useFileInputMessages();\n const fileDropMessages = useFileDropMessages();\n const meta = createFieldMeta(props.id);\n const disabled = () => Boolean(props.disabled || props.busy);\n const [chooseError, setChooseError] = createSignal<string>();\n const error = () => resolveMaybeAccessor(props.error) ?? chooseError();\n let input: HTMLInputElement | undefined;\n const [button, setButton] = createSignal<HTMLButtonElement>();\n const emit = (files: File[]) => {\n if (disabled() || files.length === 0) return;\n setChooseError();\n void props.onDrop(props.multiple === false ? files.slice(0, 1) : files);\n };\n const choose = (chooseFiles: () => Promise<readonly File[]>) => {\n setChooseError();\n chooseFiles().then(\n (files) => emit([...files]),\n (cause: unknown) => setChooseError(cause instanceof Error && cause.message ? cause.message : fileInputMessages().failedLoadFiles),\n );\n };\n // Drops take the same path as every other file drop target: files only, the most specific target wins, and files\n // that do not fit `accept` are left out with a message.\n const dropLabel = () => props.dropLabel ?? fileInputMessages().dropToUpload;\n const dropRef = fileDropTarget({\n get label() {\n return dropLabel();\n },\n get accept() {\n return props.accept;\n },\n get multiple() {\n return props.multiple;\n },\n get disabled() {\n return disabled();\n },\n onDrop: emit,\n });\n const [engine, setEngine] = createSignal<ReturnType<typeof fileDropEngine>>();\n onMount(() => {\n const element = button();\n if (element) setEngine(fileDropEngine(liveDocument(element)));\n });\n const dragState = createMemo(() => {\n const element = button();\n const hover = engine()?.session()?.hover;\n if (!hover || hover.element !== element) return undefined;\n return hover.invalid ? \"invalid\" : \"over\";\n });\n const title = () =>\n props.busy\n ? fileInputMessages().uploading\n : dragState() === \"invalid\"\n ? fileDropMessages().fileTypeNotAccepted\n : dragState() === \"over\"\n ? dropLabel()\n : (props.title ?? fileInputMessages().dropFiles);\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={disabled()}\n >\n <button\n id={meta.controlId}\n type=\"button\"\n ref={(element) => {\n setButton(element);\n dropRef(element);\n }}\n class=\"k2b-dropzone\"\n data-invalid={error() ? \"true\" : undefined}\n disabled={disabled()}\n {...fieldControlAria(meta, mergeProps(props, { error }))}\n onClick={() => {\n if (props.choose) choose(props.choose);\n else input?.click();\n }}\n >\n <span class=\"k2b-dropzone__icon\" aria-hidden=\"true\">\n <i class={props.busy ? \"ti ti-loader-2 k2b-spin\" : (props.icon ?? \"ti ti-cloud-upload\")} />\n </span>\n <span class=\"k2b-dropzone__copy\">\n <strong>{title()}</strong>\n <Show\n when={dragState() === \"invalid\"}\n fallback={\n <Show when={props.subtitle}>\n <span class=\"k2b-dropzone__subtitle\">{props.subtitle}</span>\n </Show>\n }\n >\n <span class=\"k2b-dropzone__subtitle\">{fileInputMessages().chooseMatchingFile}</span>\n </Show>\n <Show when={props.hint}>\n <span class=\"k2b-dropzone__hint\">{props.hint}</span>\n </Show>\n </span>\n </button>\n {/* With `choose`, the zone is the only control: a native input would take a dialog's first focus and open the\n device's dialog past the chooser. */}\n <Show when={!props.choose}>\n <input\n ref={input}\n class=\"k2b-sr-only\"\n type=\"file\"\n aria-label={\n props[\"aria-label\"] ??\n (typeof props.label === \"string\"\n ? props.label\n : props.multiple === false\n ? fileInputMessages().chooseFile\n : fileInputMessages().chooseFiles)\n }\n accept={props.accept}\n multiple={props.multiple ?? true}\n disabled={disabled()}\n tabIndex={-1}\n onChange={(event) => {\n const files = Array.from(event.currentTarget.files ?? []);\n // Reset before emitting so re-picking the same file still fires change,\n // even when onDrop throws.\n event.currentTarget.value = \"\";\n emit(files);\n }}\n />\n </Show>\n </Field>\n );\n}\n\nexport type ImageInputProps = ValueFieldProps<string | null> & {\n round?: boolean;\n variant?: \"default\" | \"small\";\n transform?: (file: File) => Promise<string>;\n accept?: string;\n fallbackMarker?: string;\n};\n\nconst DEFAULT_IMAGE_ACCEPT = \"image/jpeg,image/png,image/gif,image/webp,image/svg+xml,.jpg,.jpeg,.png,.gif,.webp,.svg\";\n\nconst defaultImageTransform = async (file: File): Promise<string> => {\n const { img } = await import(\"@k2b/stdlib/browser\");\n return img.presets.avatar(file);\n};\n\nexport function ImageInput(props: ImageInputProps): JSX.Element {\n const messages = useUiMessages();\n const fileInputMessages = useFileInputMessages();\n const meta = createFieldMeta(props.id);\n const [busy, setBusy] = createSignal(false);\n const [localError, setLocalError] = createSignal<string>();\n let input: HTMLInputElement | undefined;\n const disabled = () => Boolean(props.disabled || busy() || !props.onValueChange);\n const error = () => resolveMaybeAccessor(props.error) ?? localError();\n const value = () => {\n const current = resolveMaybeAccessor(props.value);\n return current && !current.includes(props.fallbackMarker ?? \"?fallback\") ? current : null;\n };\n const compact = () => props.variant === \"small\";\n const changeLabel = () => (value() ? fileInputMessages().changeImage : fileInputMessages().addImage);\n const changeIcon = () => (value() ? \"ti ti-pencil\" : \"ti ti-photo-plus\");\n const select = async (file: File | undefined) => {\n if (!file || disabled()) return;\n setBusy(true);\n setLocalError();\n try {\n const transformed = await (props.transform ?? defaultImageTransform)(file);\n commitFieldValue(props, transformed);\n } catch (error) {\n setLocalError(error instanceof Error ? error.message : fileInputMessages().imageProcessingFailed);\n } finally {\n setBusy(false);\n if (input) input.value = \"\";\n }\n };\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={disabled()}\n >\n <div\n class=\"k2b-image-input\"\n data-round={props.round ? \"true\" : undefined}\n data-variant={props.variant ?? \"default\"}\n role=\"group\"\n aria-labelledby={props.label ? meta.labelId : undefined}\n aria-label={!props.label ? props[\"aria-label\"] : undefined}\n aria-describedby={fieldControlAria(meta, { ...props, error })[\"aria-describedby\"]}\n >\n <div class=\"k2b-image-input__preview\">\n <Show when={value()} fallback={<i class=\"ti ti-photo-off\" aria-hidden=\"true\" />}>\n {(source) => <img src={source()} alt={typeof props.label === \"string\" ? props.label : fileInputMessages().selectedImage} />}\n </Show>\n </div>\n <div class=\"k2b-image-input__actions\">\n <Show\n when={compact()}\n fallback={\n <Button\n variant=\"secondary\"\n loading={busy()}\n loadingLabel={fileInputMessages().processingImage}\n disabled={disabled()}\n onClick={() => input?.click()}\n >\n <i class={changeIcon()} aria-hidden=\"true\" />\n {value() ? messages().change : messages().add}\n </Button>\n }\n >\n <IconButton\n label={changeLabel()}\n loading={busy()}\n loadingLabel={fileInputMessages().processingImage}\n disabled={disabled()}\n onClick={() => input?.click()}\n >\n <i class={changeIcon()} aria-hidden=\"true\" />\n </IconButton>\n </Show>\n <Show when={value()}>\n <Show\n when={compact()}\n fallback={\n <Button variant=\"ghost\" disabled={disabled()} onClick={() => commitFieldValue(props, null)}>\n <i class=\"ti ti-trash\" aria-hidden=\"true\" /> Remove\n </Button>\n }\n >\n <IconButton label={fileInputMessages().removeImage} disabled={disabled()} onClick={() => commitFieldValue(props, null)}>\n <i class=\"ti ti-trash\" aria-hidden=\"true\" />\n </IconButton>\n </Show>\n </Show>\n </div>\n <input\n ref={input}\n id={meta.controlId}\n class=\"k2b-sr-only\"\n type=\"file\"\n accept={props.accept ?? DEFAULT_IMAGE_ACCEPT}\n disabled={disabled()}\n required={props.required && !value()}\n {...fieldControlAria(meta, { ...props, error })}\n onChange={(event) => void select(event.currentTarget.files?.[0])}\n />\n </div>\n </Field>\n );\n}\n\ntype PreviewState = {\n url: string;\n objectUrl: boolean;\n sourceWidth: number;\n sourceHeight: number;\n};\n\ntype DragHandle = \"move\" | ImageCropResizeHandle;\ntype DragState = {\n handle: DragHandle;\n pointerId: number;\n startX: number;\n startY: number;\n startCrop: ImageCropRect;\n};\n\nexport type ImageCropperProps = {\n source: ImageCropSource;\n aspect?: ImageCropAspect;\n previewShape?: \"rect\" | \"circle\";\n disabled?: boolean;\n onValueChange?: (state: ImageCropState | null) => void;\n class?: string;\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));\n\nconst imageElementReady = async (image: HTMLImageElement): Promise<void> => {\n if (image.complete && image.naturalWidth > 0) return;\n await new Promise<void>((resolve, reject) => {\n image.addEventListener(\"load\", () => resolve(), { once: true });\n image.addEventListener(\"error\", () => reject(new Error(\"Failed to load image.\")), { once: true });\n });\n};\n\nconst loadPreviewState = async (source: ImageCropSource): Promise<PreviewState> => {\n const sourceImage =\n source instanceof HTMLImageElement\n ? source\n : Object.assign(new Image(), {\n crossOrigin: source instanceof Blob ? undefined : \"anonymous\",\n src:\n source instanceof HTMLCanvasElement\n ? source.toDataURL(\"image/png\")\n : source instanceof Blob\n ? URL.createObjectURL(source)\n : source,\n });\n\n try {\n await imageElementReady(sourceImage);\n return {\n url: source instanceof HTMLImageElement ? source.currentSrc || source.src : sourceImage.src,\n objectUrl: source instanceof Blob,\n sourceWidth: sourceImage.naturalWidth || sourceImage.width,\n sourceHeight: sourceImage.naturalHeight || sourceImage.height,\n };\n } catch (error) {\n if (source instanceof Blob) URL.revokeObjectURL(sourceImage.src);\n throw error;\n }\n};\n\nexport function ImageCropper(props: ImageCropperProps): JSX.Element {\n const fileInputMessages = useFileInputMessages();\n let frame: HTMLDivElement | undefined;\n let activePreview: PreviewState | null = null;\n const aspect = () => props.aspect ?? \"free\";\n const previewShape = () => props.previewShape ?? \"rect\";\n const disabled = () => props.disabled ?? false;\n const [preview, setPreview] = createSignal<PreviewState | null>(null);\n const [crop, setCrop] = createSignal<ImageCropRect | null>(null);\n const [rotation, setRotation] = createSignal<ImageCropRotation>(0);\n const [loading, setLoading] = createSignal(true);\n const [error, setError] = createSignal<string | null>(null);\n const [drag, setDrag] = createSignal<DragState | null>(null);\n\n const previewSize = (): { width: number; height: number } | null => {\n const currentPreview = preview();\n if (!currentPreview) return null;\n const swapsDimensions = rotation() === 90 || rotation() === 270;\n return {\n width: swapsDimensions ? currentPreview.sourceHeight : currentPreview.sourceWidth,\n height: swapsDimensions ? currentPreview.sourceWidth : currentPreview.sourceHeight,\n };\n };\n\n const replacePreview = (next: PreviewState | null) => {\n if (activePreview?.objectUrl) URL.revokeObjectURL(activePreview.url);\n activePreview = next;\n setPreview(next);\n };\n\n onCleanup(() => {\n if (activePreview?.objectUrl) URL.revokeObjectURL(activePreview.url);\n });\n\n createEffect(() => {\n props.source;\n setRotation(0);\n setCrop(null);\n });\n\n createEffect(() => {\n const source = props.source;\n let disposed = false;\n replacePreview(null);\n setLoading(true);\n setError(null);\n\n void (async () => {\n try {\n const nextPreview = await loadPreviewState(source);\n if (disposed) {\n if (nextPreview.objectUrl) URL.revokeObjectURL(nextPreview.url);\n return;\n }\n replacePreview(nextPreview);\n } catch {\n if (disposed) return;\n replacePreview(null);\n setCrop(null);\n setError(fileInputMessages().failedLoadImage);\n } finally {\n if (!disposed) setLoading(false);\n }\n })();\n\n onCleanup(() => {\n disposed = true;\n });\n });\n\n createEffect(() => {\n const currentSize = previewSize();\n const currentAspect = aspect();\n if (!currentSize) return;\n setCrop((current) => clampImageCropRect(current ?? getInitialImageCropRect(currentSize, currentAspect), currentSize, currentAspect));\n });\n\n createEffect(() => {\n const currentCrop = crop();\n const currentPreview = preview();\n props.onValueChange?.(currentCrop && currentPreview ? { crop: currentCrop, rotation: rotation() } : null);\n });\n\n const readPointerPosition = (event: PointerEvent) => {\n if (!frame) return { x: 0, y: 0 };\n const rect = frame.getBoundingClientRect();\n return {\n x: (event.clientX - rect.left) / Math.max(1, rect.width),\n y: (event.clientY - rect.top) / Math.max(1, rect.height),\n };\n };\n\n const moveCrop = (event: PointerEvent) => {\n const state = drag();\n const currentSize = previewSize();\n if (!state || !currentSize || state.pointerId !== event.pointerId) return;\n event.preventDefault();\n const point = readPointerPosition(event);\n const dx = point.x - state.startX;\n const dy = point.y - state.startY;\n const start = state.startCrop;\n\n if (state.handle === \"move\") {\n setCrop(\n clampImageCropRect(\n {\n ...start,\n x: start.x + dx,\n y: start.y + dy,\n },\n currentSize,\n aspect(),\n ),\n );\n return;\n }\n\n setCrop(resizeImageCropFromCorner(start, currentSize, aspect(), state.handle, dx, dy));\n };\n\n let releaseTextSelection: (() => void) | undefined;\n const endDrag = (event: PointerEvent) => {\n const state = drag();\n if (!state || state.pointerId !== event.pointerId) return;\n window.removeEventListener(\"pointermove\", moveCrop);\n window.removeEventListener(\"pointerup\", endDrag);\n window.removeEventListener(\"pointercancel\", endDrag);\n releaseTextSelection?.();\n setDrag(null);\n };\n\n const startDrag = (handle: DragHandle, event: PointerEvent) => {\n const currentCrop = crop();\n if (!currentCrop || disabled() || event.button !== 0) return;\n event.preventDefault();\n event.stopPropagation();\n (event.currentTarget as Element).setPointerCapture?.(event.pointerId);\n releaseTextSelection = suppressTextSelection(event.pointerId);\n const point = readPointerPosition(event);\n setDrag({\n handle,\n pointerId: event.pointerId,\n startX: point.x,\n startY: point.y,\n startCrop: currentCrop,\n });\n window.addEventListener(\"pointermove\", moveCrop);\n window.addEventListener(\"pointerup\", endDrag);\n window.addEventListener(\"pointercancel\", endDrag);\n };\n\n onCleanup(() => {\n if (typeof window === \"undefined\") return;\n window.removeEventListener(\"pointermove\", moveCrop);\n window.removeEventListener(\"pointerup\", endDrag);\n window.removeEventListener(\"pointercancel\", endDrag);\n releaseTextSelection?.();\n });\n\n const rotateRight = () => {\n if (disabled()) return;\n setRotation((current) => rotateImageCropRight(current));\n };\n\n const nudgeCrop = (handle: DragHandle, event: KeyboardEvent) => {\n if (disabled() || ![\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\"].includes(event.key)) return;\n const current = crop();\n const currentSize = previewSize();\n if (!current || !currentSize) return;\n event.preventDefault();\n const step = event.shiftKey ? 0.05 : 0.01;\n const dx = event.key === \"ArrowLeft\" ? -step : event.key === \"ArrowRight\" ? step : 0;\n const dy = event.key === \"ArrowUp\" ? -step : event.key === \"ArrowDown\" ? step : 0;\n setCrop(\n handle === \"move\"\n ? clampImageCropRect({ ...current, x: current.x + dx, y: current.y + dy }, currentSize, aspect())\n : resizeImageCropFromCorner(current, currentSize, aspect(), handle, dx, dy),\n );\n };\n\n const previewFrameStyle = (): JSX.CSSProperties => {\n const currentSize = previewSize();\n if (!currentSize) return {};\n return {\n \"aspect-ratio\": `${currentSize.width} / ${currentSize.height}`,\n \"max-width\": `min(100%, calc(min(58vh, 24rem) * ${currentSize.width} / ${currentSize.height}))`,\n };\n };\n\n const previewImageStyle = (): JSX.CSSProperties => {\n const currentPreview = preview();\n const currentSize = previewSize();\n if (!currentPreview || !currentSize) return {};\n const swapsDimensions = rotation() === 90 || rotation() === 270;\n return {\n left: \"50%\",\n top: \"50%\",\n width: swapsDimensions ? `${(currentPreview.sourceWidth / currentSize.width) * 100}%` : \"100%\",\n height: swapsDimensions ? `${(currentPreview.sourceHeight / currentSize.height) * 100}%` : \"100%\",\n \"max-width\": \"none\",\n \"object-fit\": \"fill\",\n transform: `translate(-50%, -50%) rotate(${rotation()}deg)`,\n };\n };\n\n const cropStyle = (): JSX.CSSProperties => {\n const currentCrop = crop();\n if (!currentCrop) return {};\n return {\n left: `${currentCrop.x * 100}%`,\n top: `${currentCrop.y * 100}%`,\n width: `${currentCrop.width * 100}%`,\n height: `${currentCrop.height * 100}%`,\n \"box-shadow\": \"0 0 0 9999px rgba(0,0,0,.42)\",\n };\n };\n\n const showResizeHandles = () => previewShape() !== \"circle\";\n\n return (\n <div class={`k2b-image-cropper ${props.class ?? \"\"}`}>\n <div class=\"k2b-image-cropper__stage\">\n <Show when={!loading()} fallback={<small>{fileInputMessages().preparingImage}</small>}>\n <Show when={!error()} fallback={<small class=\"k2b-image-cropper__error\">{error()}</small>}>\n <Show when={preview() && crop()}>\n <div ref={frame} class=\"k2b-image-cropper__frame\" style={previewFrameStyle()}>\n <img src={preview()!.url} alt={fileInputMessages().cropPreview} draggable={false} style={previewImageStyle()} />\n <div\n class=\"k2b-image-cropper__selection\"\n data-shape={previewShape()}\n style={cropStyle()}\n role=\"group\"\n tabIndex={disabled() ? undefined : 0}\n aria-label={fileInputMessages().cropArea}\n onPointerDown={(event) => startDrag(\"move\", event)}\n onKeyDown={(event) => nudgeCrop(\"move\", event)}\n >\n <Show when={showResizeHandles()}>\n <For each={[\"nw\", \"ne\", \"sw\", \"se\"] as const}>\n {(handle) => (\n <button\n type=\"button\"\n class=\"k2b-image-cropper__handle\"\n data-handle={handle}\n aria-label={fileInputMessages().resizeCrop({ handle })}\n disabled={disabled()}\n onPointerDown={(event) => startDrag(handle, event)}\n onKeyDown={(event) => nudgeCrop(handle, event)}\n />\n )}\n </For>\n </Show>\n </div>\n <Tooltip.Trigger\n type=\"button\"\n class=\"k2b-image-cropper__rotate\"\n content={fileInputMessages().rotateRight}\n aria-label={fileInputMessages().rotateRight}\n disabled={disabled() || !crop() || Boolean(error())}\n onClick={rotateRight}\n >\n <i class=\"ti ti-rotate-clockwise\" aria-hidden=\"true\" />\n </Tooltip.Trigger>\n </div>\n </Show>\n </Show>\n </Show>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAY,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,QAAQ,UAAU;AACtH,SAAS,MAAM,EAAE,UAAU,QAAQ,mBAAmB;AACtD,SAAS,OAAO,QAAQ,qBAAqB;AAC7C,SAAS,eAAe,EAAE,KAAK,EAAE,gBAAgB,QAAQ,mBAAmB;AAC5E,SAAS,qBAAqB,QAAQ,4BAA4B;AAClE,SAAS,aAAa,QAAQ,kBAAkB;AAChD,SAAS,cAAc,QAAQ,kBAAkB;AAEjD,SAAS,gBAAgB,EAAE,oBAAoB,QAAQ,kBAAkB;AACzE,SAAS,cAAc,EAAE,YAAY,QAAQ,aAAa;AAC1D,SAAS,mBAAmB,QAAQ,sBAAsB;AAC1D,SAAS,oBAAoB,QAAQ,uBAAuB;AAC5D,SACE,kBAAkB,EAClB,uBAAuB,EAOvB,yBAAyB,EACzB,oBAAoB,QACf,cAAc;AAsBrB,OAAO,SAAS,YAAY,CAAC,KAAwB,EAAe;EAClE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC;EAChD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;EAC9C,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;EACtC,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC;EAC5D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,YAAY,CAAS,CAAC;EAC5D,MAAM,KAAK,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,CAAC;EACtE,IAAI,KAAmC;EACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAoB,CAAC;EAC7D,MAAM,IAAI,GAAI,KAAa,IAAK;IAC9B,IAAI,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;IACtC,cAAc,CAAC,CAAC;IAChB,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,KAAK,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC;EACzE,CAAC;EACD,MAAM,MAAM,GAAI,WAA2C,IAAK;IAC9D,cAAc,CAAC,CAAC;IAChB,WAAW,CAAC,CAAC,CAAC,IAAI,CACf,KAAK,IAAK,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAC1B,KAAc,IAAK,cAAc,CAAC,KAAK,YAAY,KAAK,IAAI,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,GAAG,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAClI,CAAC;EACH,CAAC;EACD;EACA;EACA,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,SAAS,IAAI,iBAAiB,CAAC,CAAC,CAAC,YAAY;EAC3E,MAAM,OAAO,GAAG,cAAc,CAAC;IAC7B,IAAI,KAAK,GAAG;MACV,OAAO,SAAS,CAAC,CAAC;IACpB,CAAC;IACD,IAAI,MAAM,GAAG;MACX,OAAO,KAAK,CAAC,MAAM;IACrB,CAAC;IACD,IAAI,QAAQ,GAAG;MACb,OAAO,KAAK,CAAC,QAAQ;IACvB,CAAC;IACD,IAAI,QAAQ,GAAG;MACb,OAAO,QAAQ,CAAC,CAAC;IACnB,CAAC;IACD,MAAM,EAAE;EACV,CAAC,CAAC;EACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAoC,CAAC;EAC7E,OAAO,CAAC,MAAM;IACZ,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,IAAI,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;EAC/D,CAAC,CAAC;EACF,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM;IACjC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK;IACxC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,SAAS;IACzD,OAAO,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,MAAM;EAC3C,CAAC,CAAC;EACF,MAAM,KAAK,GAAG,MACZ,KAAK,CAAC,IAAI,GACN,iBAAiB,CAAC,CAAC,CAAC,SAAS,GAC7B,SAAS,CAAC,CAAC,KAAK,SAAS,GACvB,gBAAgB,CAAC,CAAC,CAAC,mBAAmB,GACtC,SAAS,CAAC,CAAC,KAAK,MAAM,GACpB,SAAS,CAAC,CAAC,GACV,KAAK,CAAC,KAAK,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAU;EAExD,yBACG,KAAK;IAAA;MAAA,OACG,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,KAAK;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,WAAW;MAAA,OAAE,KAAK,CAAC,WAAW;IAAA;IAAA,IAC9B,KAAK;MAAA,OAAE,KAAK,CAAC,CAAC;IAAA;IACd,IAAI,EAAE,IAAI;IAAA,IACV,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA,IACxB,QAAQ;MAAA,OAAE,QAAQ,CAAC,CAAC;IAAA;IAAA;MAAA;QAAA,IAGlB,EAAE;UAAA,OAAE,IAAI,CAAC,SAAS;QAAA;QAClB,IAAI,EAAC,QAAQ;QAAA,SAKP,cAAc;QAAA;UAAA,OACN,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS;QAAA;QAAA,IAC1C,QAAQ;UAAA,OAAE,QAAQ,CAAC,CAAC;QAAA;MAAA,SAChB,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,KAAK,EAAE;QAAE;MAAM,CAAC,CAAC,CAAC,0CAO5C,KAAK,CAAC,IAAI,GAAG,yBAAyB,YAAI,KAAK,CAAC,IAAI,IAAI,oBAAoB,OAAC,mCAG9E,KAAK,CAAC,CAAC,8BACf,IAAI;QAAA,IACH,IAAI;UAAA,OAAE,SAAS,CAAC,CAAC,KAAK,SAAS;QAAA;QAAA,IAC/B,QAAQ;UAAA,yBACL,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,KAAK,CAAC,QAAQ;YAAA;YAAA;cAAA,+BACc,KAAK,CAAC,QAAQ;YAAA;UAAA;QAAA;QAAA;UAAA,+BAIlB,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;QAAA;MAAA,gCAE7E,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,IAAI;QAAA;QAAA;UAAA,+BACc,KAAK,CAAC,IAAI;QAAA;MAAA,iCAMjD,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,CAAC,KAAK,CAAC,MAAM;QAAA;QAAA;UAAA,4DAMnB,KAAK,CAAC,YAAY,CAAC,KAClB,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,GAC5B,KAAK,CAAC,KAAK,GACX,KAAK,CAAC,QAAQ,KAAK,KAAK,GACtB,iBAAiB,CAAC,CAAC,CAAC,UAAU,GAC9B,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC,oDAEhC,KAAK,CAAC,MAAM,4CACV,KAAK,CAAC,QAAQ,IAAI,IAAI,oCACtB,QAAQ,CAAC,CAAC;QAAA;MAAA;IAAA;EAAA;AAa9B;AAUA,MAAM,oBAAoB,GAAG,yFAAyF;AAEtH,MAAM,qBAAqB,GAAG,MAAO,IAAU,IAAsB;EACnE,MAAM;IAAE;EAAI,CAAC,GAAG,MAAM,OAAO,qBAAqB,CAAC;EACnD,OAAO,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC;AACjC,CAAC;AAED,OAAO,SAAS,UAAU,CAAC,KAAsB,EAAe;EAC9D,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC;EAChD,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;EACtC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;EAC3C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,YAAY,CAAS,CAAC;EAC1D,IAAI,KAAmC;EACvC,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;EAChF,MAAM,KAAK,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,CAAC;EACrE,MAAM,KAAK,GAAG,MAAM;IAClB,MAAM,OAAO,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;IACjD,OAAO,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,IAAI,WAAW,CAAC,GAAG,OAAO,GAAG,IAAI;EAC3F,CAAC;EACD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,KAAK,OAAO;EAC/C,MAAM,WAAW,GAAG,MAAO,KAAK,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,QAAS;EACpG,MAAM,UAAU,GAAG,MAAO,KAAK,CAAC,CAAC,GAAG,cAAc,GAAG,kBAAmB;EACxE,MAAM,MAAM,GAAG,MAAO,IAAsB,IAAK;IAC/C,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,EAAE;IACzB,OAAO,CAAC,IAAI,CAAC;IACb,aAAa,CAAC,CAAC;IACf,IAAI;MACF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,IAAI,qBAAqB,EAAE,IAAI,CAAC;MAC1E,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC;IACtC,CAAC,CAAC,OAAO,KAAK,EAAE;MACd,aAAa,CAAC,KAAK,YAAY,KAAK,GAAG,KAAK,CAAC,OAAO,GAAG,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IACnG,CAAC,SAAS;MACR,OAAO,CAAC,KAAK,CAAC;MACd,IAAI,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,EAAE;IAC7B;EACF,CAAC;EAED,yBACG,KAAK;IAAA;MAAA,OACG,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,KAAK;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,WAAW;MAAA,OAAE,KAAK,CAAC,WAAW;IAAA;IAAA,IAC9B,KAAK;MAAA,OAAE,KAAK,CAAC,CAAC;IAAA;IACd,IAAI,EAAE,IAAI;IAAA,IACV,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA,IACxB,QAAQ;MAAA,OAAE,QAAQ,CAAC,CAAC;IAAA;IAAA;MAAA,mDAIN,KAAK,CAAC,KAAK,GAAG,MAAM,YAAG,SAAS,0DAC9B,KAAK,CAAC,OAAO,IAAI,SAAS,mDAEvB,KAAK,CAAC,KAAK,YAAG,IAAI,CAAC,OAAO,mBAAG,SAAS,+CAC3C,CAAC,KAAK,CAAC,KAAK,YAAG,KAAK,CAAC,YAAY,CAAC,mBAAG,SAAS,8DACxC,gBAAgB,CAAC,IAAI,EAAE;QAAE,GAAG,KAAK;QAAE;MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,4CAG9E,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,CAAC;QAAA;QAAA,IAAE,QAAQ;UAAA;QAAA;QAAA,UACzB,MAAM,kDAAe,MAAM,CAAC,CAAC,wCAAO,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,YAAG,KAAK,CAAC,KAAK,mBAAG,iBAAiB,CAAC,CAAC,CAAC,aAAa;MAAI,gCAI5H,IAAI;QAAA,IACH,IAAI;UAAA,OAAE,OAAO,CAAC,CAAC;QAAA;QAAA,IACf,QAAQ;UAAA,yBACL,MAAM;YACL,OAAO;YAAA,IACP,OAAO;cAAA,OAAE,IAAI,CAAC,CAAC;YAAA;YAAA,IACf,YAAY;cAAA,OAAE,iBAAiB,CAAC,CAAC,CAAC,eAAe;YAAA;YAAA,IACjD,QAAQ;cAAA,OAAE,QAAQ,CAAC,CAAC;YAAA;YACpB,OAAO,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC;YAAA;cAAA,wDAEnB,UAAU,CAAC,CAAC,kBACrB,KAAK,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG;YAAA;UAAA;QAAA;QAAA;UAAA,yBAIhD,UAAU;YAAA,IACT,KAAK;cAAA,OAAE,WAAW,CAAC,CAAC;YAAA;YAAA,IACpB,OAAO;cAAA,OAAE,IAAI,CAAC,CAAC;YAAA;YAAA,IACf,YAAY;cAAA,OAAE,iBAAiB,CAAC,CAAC,CAAC,eAAe;YAAA;YAAA,IACjD,QAAQ;cAAA,OAAE,QAAQ,CAAC,CAAC;YAAA;YACpB,OAAO,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC;YAAA;cAAA,uDAEnB,UAAU,CAAC,CAAC;YAAA;UAAA;QAAA;MAAA,gCAGzB,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,CAAC;QAAA;QAAA;UAAA,yBAChB,IAAI;YAAA,IACH,IAAI;cAAA,OAAE,OAAO,CAAC,CAAC;YAAA;YAAA,IACf,QAAQ;cAAA,yBACL,MAAM;gBAAC,OAAO;gBAAA,IAAS,QAAQ;kBAAA,OAAE,QAAQ,CAAC,CAAC;gBAAA;gBAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC;gBAAA;kBAAA;gBAAA;cAAA;YAAA;YAAA;cAAA,yBAK3F,UAAU;gBAAA,IAAC,KAAK;kBAAA,OAAE,iBAAiB,CAAC,CAAC,CAAC,WAAW;gBAAA;gBAAA,IAAE,QAAQ;kBAAA,OAAE,QAAQ,CAAC,CAAC;gBAAA;gBAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC;gBAAA;kBAAA;gBAAA;cAAA;YAAA;UAAA;QAAA;MAAA;QAAA,IAQ1H,EAAE;UAAA,OAAE,IAAI,CAAC,SAAS;QAAA;QAAA,SACZ,aAAa;QACnB,IAAI,EAAC,MAAM;QAAA,IACX,MAAM;UAAA,OAAE,KAAK,CAAC,MAAM,IAAI,oBAAoB;QAAA;QAAA,IAC5C,QAAQ;UAAA,OAAE,QAAQ,CAAC,CAAC;QAAA;QAAA,IACpB,QAAQ;UAAA,OAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC;QAAA;MAAA,SAChC,gBAAgB,CAAC,IAAI,EAAE;QAAE,GAAG,KAAK;QAAE;MAAM,CAAC,CAAC;IAAA;EAAA;AAMzD;AA2BA,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAE9F,MAAM,iBAAiB,GAAG,MAAO,KAAuB,IAAoB;EAC1E,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,GAAG,CAAC,EAAE;EAC9C,MAAM,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,KAAK;IAC3C,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,CAAC,EAAE;MAAE,IAAI,EAAE;IAAK,CAAC,CAAC;IAC/D,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC,EAAE;MAAE,IAAI,EAAE;IAAK,CAAC,CAAC;EACnG,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,gBAAgB,GAAG,MAAO,MAAuB,IAA4B;EACjF,MAAM,WAAW,GACf,MAAM,YAAY,gBAAgB,GAC9B,MAAM,GACN,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE;IACzB,WAAW,EAAE,MAAM,YAAY,IAAI,GAAG,SAAS,GAAG,WAAW;IAC7D,GAAG,EACD,MAAM,YAAY,iBAAiB,GAC/B,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,GAC7B,MAAM,YAAY,IAAI,GACpB,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,GAC3B;EACV,CAAC,CAAC;EAER,IAAI;IACF,MAAM,iBAAiB,CAAC,WAAW,CAAC;IACpC,OAAO;MACL,GAAG,EAAE,MAAM,YAAY,gBAAgB,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,GAAG,GAAG,WAAW,CAAC,GAAG;MAC3F,SAAS,EAAE,MAAM,YAAY,IAAI;MACjC,WAAW,EAAE,WAAW,CAAC,YAAY,IAAI,WAAW,CAAC,KAAK;MAC1D,YAAY,EAAE,WAAW,CAAC,aAAa,IAAI,WAAW,CAAC;IACzD,CAAC;EACH,CAAC,CAAC,OAAO,KAAK,EAAE;IACd,IAAI,MAAM,YAAY,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,WAAW,CAAC,GAAG,CAAC;IAChE,MAAM,KAAK;EACb;AACF,CAAC;AAED,OAAO,SAAS,YAAY,CAAC,KAAwB,EAAe;EAClE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC;EAChD,IAAI,KAAiC;EACrC,IAAI,aAAkC,GAAG,IAAI;EAC7C,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,MAAM,IAAI,MAAM;EAC3C,MAAM,YAAY,GAAG,MAAM,KAAK,CAAC,YAAY,IAAI,MAAM;EACvD,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,IAAI,KAAK;EAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAsB,IAAI,CAAC;EACrE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAuB,IAAI,CAAC;EAChE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,YAAY,CAAoB,CAAC,CAAC;EAClE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;EAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAgB,IAAI,CAAC;EAC3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAmB,IAAI,CAAC;EAE5D,MAAM,WAAW,GAAG,MAAgD;IAClE,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC;IAChC,IAAI,CAAC,cAAc,EAAE,OAAO,IAAI;IAChC,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI,QAAQ,CAAC,CAAC,KAAK,GAAG;IAC/D,OAAO;MACL,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,YAAY,GAAG,cAAc,CAAC,WAAW;MACjF,MAAM,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,GAAG,cAAc,CAAC;IACxE,CAAC;EACH,CAAC;EAED,MAAM,cAAc,GAAI,IAAyB,IAAK;IACpD,IAAI,aAAa,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe,CAAC,aAAa,CAAC,GAAG,CAAC;IACpE,aAAa,GAAG,IAAI;IACpB,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED,SAAS,CAAC,MAAM;IACd,IAAI,aAAa,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe,CAAC,aAAa,CAAC,GAAG,CAAC;EACtE,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,KAAK,CAAC,MAAM;IACZ,WAAW,CAAC,CAAC,CAAC;IACd,OAAO,CAAC,IAAI,CAAC;EACf,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM;IAC3B,IAAI,QAAQ,GAAG,KAAK;IACpB,cAAc,CAAC,IAAI,CAAC;IACpB,UAAU,CAAC,IAAI,CAAC;IAChB,QAAQ,CAAC,IAAI,CAAC;IAEd,KAAK,CAAC,YAAY;MAChB,IAAI;QACF,MAAM,WAAW,GAAG,MAAM,gBAAgB,CAAC,MAAM,CAAC;QAClD,IAAI,QAAQ,EAAE;UACZ,IAAI,WAAW,CAAC,SAAS,EAAE,GAAG,CAAC,eAAe,CAAC,WAAW,CAAC,GAAG,CAAC;UAC/D;QACF;QACA,cAAc,CAAC,WAAW,CAAC;MAC7B,CAAC,CAAC,MAAM;QACN,IAAI,QAAQ,EAAE;QACd,cAAc,CAAC,IAAI,CAAC;QACpB,OAAO,CAAC,IAAI,CAAC;QACb,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAC;MAC/C,CAAC,SAAS;QACR,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,KAAK,CAAC;MAClC;IACF,CAAC,EAAE,CAAC;IAEJ,SAAS,CAAC,MAAM;MACd,QAAQ,GAAG,IAAI;IACjB,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC;IAC9B,IAAI,CAAC,WAAW,EAAE;IAClB,OAAO,CAAE,OAAO,IAAK,kBAAkB,CAAC,OAAO,IAAI,uBAAuB,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;EACtI,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1B,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC;IAChC,KAAK,CAAC,aAAa,GAAG,WAAW,IAAI,cAAc,GAAG;MAAE,IAAI,EAAE,WAAW;MAAE,QAAQ,EAAE,QAAQ,CAAC;IAAE,CAAC,GAAG,IAAI,CAAC;EAC3G,CAAC,CAAC;EAEF,MAAM,mBAAmB,GAAI,KAAmB,IAAK;IACnD,IAAI,CAAC,KAAK,EAAE,OAAO;MAAE,CAAC,EAAE,CAAC;MAAE,CAAC,EAAE;IAAE,CAAC;IACjC,MAAM,IAAI,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC1C,OAAO;MACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC;MACxD,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM;IACzD,CAAC;EACH,CAAC;EAED,MAAM,QAAQ,GAAI,KAAmB,IAAK;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC;IACpB,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE;IACnE,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC;IACxC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM;IACjC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM;IACjC,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS;IAE7B,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,EAAE;MAC3B,OAAO,CACL,kBAAkB,CAChB;QACE,GAAG,KAAK;QACR,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,EAAE;QACf,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG;MACf,CAAC,EACD,WAAW,EACX,MAAM,CAAC,CACT,CACF,CAAC;MACD;IACF;IAEA,OAAO,CAAC,yBAAyB,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;EACxF,CAAC;EAED,IAAI,oBAA8C;EAClD,MAAM,OAAO,GAAI,KAAmB,IAAK;IACvC,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC;IACpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE;IACnD,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,QAAQ,CAAC;IACnD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;IAChD,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC;IACpD,oBAAoB,GAAG,CAAC;IACxB,OAAO,CAAC,IAAI,CAAC;EACf,CAAC;EAED,MAAM,SAAS,GAAG,CAAC,MAAkB,EAAE,KAAmB,KAAK;IAC7D,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1B,IAAI,CAAC,WAAW,IAAI,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;IACtD,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,KAAK,CAAC,eAAe,CAAC,CAAC;IACtB,KAAK,CAAC,aAAa,CAAa,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAAC;IACrE,oBAAoB,GAAG,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC;IAC7D,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC;IACxC,OAAO,CAAC;MACN,MAAM;MACN,SAAS,EAAE,KAAK,CAAC,SAAS;MAC1B,MAAM,EAAE,KAAK,CAAC,CAAC;MACf,MAAM,EAAE,KAAK,CAAC,CAAC;MACf,SAAS,EAAE;IACb,CAAC,CAAC;IACF,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,QAAQ,CAAC;IAChD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC;IAC7C,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC;EACnD,CAAC;EAED,SAAS,CAAC,MAAM;IACd,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;IACnC,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,QAAQ,CAAC;IACnD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;IAChD,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC;IACpD,oBAAoB,GAAG,CAAC;EAC1B,CAAC,CAAC;EAEF,MAAM,WAAW,GAAG,MAAM;IACxB,IAAI,QAAQ,CAAC,CAAC,EAAE;IAChB,WAAW,CAAE,OAAO,IAAK,oBAAoB,CAAC,OAAO,CAAC,CAAC;EACzD,CAAC;EAED,MAAM,SAAS,GAAG,CAAC,MAAkB,EAAE,KAAoB,KAAK;IAC9D,IAAI,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;IAC5F,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC;IACtB,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE;IAC9B,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,YAAY,GAAG,IAAI,GAAG,CAAC;IACpF,MAAM,EAAE,GAAG,KAAK,CAAC,GAAG,KAAK,SAAS,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,GAAG,IAAI,GAAG,CAAC;IACjF,OAAO,CACL,MAAM,KAAK,MAAM,GACb,kBAAkB,CAAC;MAAE,GAAG,OAAO;MAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE;MAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG;IAAG,CAAC,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,GAC/F,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAC9E,CAAC;EACH,CAAC;EAED,MAAM,iBAAiB,GAAG,MAAyB;IACjD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO;MACL,cAAc,EAAE,GAAG,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE;MAC9D,WAAW,EAAE,qCAAqC,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM;IAC7F,CAAC;EACH,CAAC;EAED,MAAM,iBAAiB,GAAG,MAAyB;IACjD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC;IAChC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,cAAc,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI,QAAQ,CAAC,CAAC,KAAK,GAAG;IAC/D,OAAO;MACL,IAAI,EAAE,KAAK;MACX,GAAG,EAAE,KAAK;MACV,KAAK,EAAE,eAAe,GAAG,GAAI,cAAc,CAAC,WAAW,GAAG,WAAW,CAAC,KAAK,GAAI,GAAG,GAAG,GAAG,MAAM;MAC9F,MAAM,EAAE,eAAe,GAAG,GAAI,cAAc,CAAC,YAAY,GAAG,WAAW,CAAC,MAAM,GAAI,GAAG,GAAG,GAAG,MAAM;MACjG,WAAW,EAAE,MAAM;MACnB,YAAY,EAAE,MAAM;MACpB,SAAS,EAAE,gCAAgC,QAAQ,CAAC,CAAC;IACvD,CAAC;EACH,CAAC;EAED,MAAM,SAAS,GAAG,MAAyB;IACzC,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1B,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO;MACL,IAAI,EAAE,GAAG,WAAW,CAAC,CAAC,GAAG,GAAG,GAAG;MAC/B,GAAG,EAAE,GAAG,WAAW,CAAC,CAAC,GAAG,GAAG,GAAG;MAC9B,KAAK,EAAE,GAAG,WAAW,CAAC,KAAK,GAAG,GAAG,GAAG;MACpC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,GAAG,GAAG,GAAG;MACtC,YAAY,EAAE;IAChB,CAAC;EACH,CAAC;EAED,MAAM,iBAAiB,GAAG,MAAM,YAAY,CAAC,CAAC,KAAK,QAAQ;EAE3D,uBACc,8BAAqB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BAE/C,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,CAAC,OAAO,CAAC,CAAC;IAAA;IAAA,IAAE,QAAQ;MAAA,gCAAU,iBAAiB,CAAC,CAAC,CAAC,cAAc;IAAA;IAAA;MAAA,yBACzE,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,CAAC,KAAK,CAAC,CAAC;QAAA;QAAA,IAAE,QAAQ;UAAA,gCAA2C,KAAK,CAAC,CAAC;QAAA;QAAA;UAAA,yBAC7E,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,sBAAO,CAAC,CAAC,OAAI,IAAI,CAAC,CAAC;YAAA;YAAA;cAAA,kCAC4B,iBAAiB,CAAC,CAAC,kCAChE,OAAO,CAAC,CAAC,CAAE,GAAG,iDAAO,iBAAiB,CAAC,CAAC,CAAC,WAAW,4BAA2B,iBAAiB,CAAC,CAAC,yCAG9F,YAAY,CAAC,CAAC,4BACnB,SAAS,CAAC,CAAC,8BAER,QAAQ,CAAC,CAAC,YAAG,SAAS,UAAG,CAAC,iDACxB,iBAAiB,CAAC,CAAC,CAAC,QAAQ,4CAIvC,IAAI;gBAAA,IAAC,IAAI;kBAAA,OAAE,iBAAiB,CAAC,CAAC;gBAAA;gBAAA;kBAAA,yBAC5B,GAAG;oBAAC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;oBAAA,UAC/B,MAAM,2DAIS,MAAM,wDACP,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC;sBAAE;oBAAO,CAAC,CAAC,4CAC5C,QAAQ,CAAC,CAAC;kBAIvB;gBAAA;cAAA,gCAIN,OAAO,CAAC,OAAO;gBACd,IAAI;gBAAA;gBAAA,IAEJ,OAAO;kBAAA,OAAE,iBAAiB,CAAC,CAAC,CAAC,WAAW;gBAAA;gBAAA;kBAAA,OAC5B,iBAAiB,CAAC,CAAC,CAAC,WAAW;gBAAA;gBAAA,IAC3C,QAAQ;kBAAA,OAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;gBAAA;gBACnD,OAAO,EAAE,WAAW;gBAAA;kBAAA;gBAAA;cAAA;YAAA;UAAA;QAAA;MAAA;IAAA;EAAA;AAWtC","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":[],"sources":["inputs/FileInputs.tsx"],"sourcesContent":["import { createEffect, createMemo, createSignal, For, type JSX, mergeProps, onCleanup, onMount, Show } from \"solid-js\";\nimport { Button, IconButton } from \"../actions/Button\";\nimport { Tooltip } from \"../feedback/Tooltip\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport { suppressTextSelection } from \"../internal/text-selection\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { labelledFileDropTarget } from \"./FileDropTarget\";\nimport type { FieldProps, ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport { fileDropEngine, liveDocument } from \"./file-drop\";\nimport { useFileDropMessages } from \"./file-drop-messages\";\nimport { useFileInputMessages } from \"./file-input-messages\";\nimport {\n clampImageCropRect,\n getInitialImageCropRect,\n type ImageCropAspect,\n type ImageCropRect,\n type ImageCropResizeHandle,\n type ImageCropRotation,\n type ImageCropSource,\n type ImageCropState,\n resizeImageCropFromCorner,\n rotateImageCropRight,\n} from \"./image-crop\";\n\nexport type FileDropzoneProps = FieldProps & {\n accept?: string;\n multiple?: boolean;\n busy?: boolean;\n /** Full icon class list, for example `\"ti ti-photo-plus\"`. Defaults to `\"ti ti-cloud-upload\"`. */\n icon?: string;\n title?: JSX.Element;\n subtitle?: JSX.Element;\n hint?: JSX.Element;\n /** One sentence that says what dropping does, shown while files are over the zone. Defaults to \"Drop to upload\". */\n dropLabel?: string;\n /**\n * Chooses files when the zone is clicked, instead of the device's file dialog, for example to offer other sources as\n * well. Called within the click, so it may still open the device's dialog; resolve `[]` when the user cancels. A\n * rejection shows its message as the field's error.\n */\n choose?: () => Promise<readonly File[]>;\n onDrop: (files: File[]) => void | Promise<void>;\n};\n\nexport function FileDropzone(props: FileDropzoneProps): JSX.Element {\n const fileInputMessages = useFileInputMessages();\n const fileDropMessages = useFileDropMessages();\n const meta = createFieldMeta(props.id);\n const disabled = () => Boolean(props.disabled || props.busy);\n const [chooseError, setChooseError] = createSignal<string>();\n const error = () => resolveMaybeAccessor(props.error) ?? chooseError();\n let input: HTMLInputElement | undefined;\n const [button, setButton] = createSignal<HTMLButtonElement>();\n const emit = (files: File[]) => {\n if (disabled() || files.length === 0) return;\n setChooseError();\n void props.onDrop(props.multiple === false ? files.slice(0, 1) : files);\n };\n const choose = (chooseFiles: () => Promise<readonly File[]>) => {\n setChooseError();\n chooseFiles().then(\n (files) => emit([...files]),\n (cause: unknown) => setChooseError(cause instanceof Error && cause.message ? cause.message : fileInputMessages().failedLoadFiles),\n );\n };\n // Drops take the same path as every other file drop target: files only, the most specific target wins, and files\n // that do not fit `accept` are left out with a message.\n const dropLabel = () => props.dropLabel ?? fileInputMessages().dropToUpload;\n const dropRef = labelledFileDropTarget({\n get label() {\n return dropLabel();\n },\n get accept() {\n return props.accept;\n },\n get multiple() {\n return props.multiple;\n },\n get disabled() {\n return disabled();\n },\n onDrop: emit,\n });\n const [engine, setEngine] = createSignal<ReturnType<typeof fileDropEngine>>();\n onMount(() => {\n const element = button();\n if (element) setEngine(fileDropEngine(liveDocument(element)));\n });\n const dragState = createMemo(() => {\n const element = button();\n const hover = engine()?.session()?.hover;\n if (!hover || hover.element !== element) return undefined;\n return hover.invalid ? \"invalid\" : \"over\";\n });\n const title = () =>\n props.busy\n ? fileInputMessages().uploading\n : dragState() === \"invalid\"\n ? fileDropMessages().fileTypeNotAccepted\n : dragState() === \"over\"\n ? dropLabel()\n : (props.title ?? fileInputMessages().dropFiles);\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={disabled()}\n >\n <button\n id={meta.controlId}\n type=\"button\"\n ref={(element) => {\n setButton(element);\n dropRef(element);\n }}\n class=\"k2b-dropzone\"\n data-invalid={error() ? \"true\" : undefined}\n disabled={disabled()}\n {...fieldControlAria(meta, mergeProps(props, { error }))}\n onClick={() => {\n if (props.choose) choose(props.choose);\n else input?.click();\n }}\n >\n <span class=\"k2b-dropzone__icon\" aria-hidden=\"true\">\n <i class={props.busy ? \"ti ti-loader-2 k2b-spin\" : (props.icon ?? \"ti ti-cloud-upload\")} />\n </span>\n <span class=\"k2b-dropzone__copy\">\n <strong>{title()}</strong>\n <Show\n when={dragState() === \"invalid\"}\n fallback={\n <Show when={props.subtitle}>\n <span class=\"k2b-dropzone__subtitle\">{props.subtitle}</span>\n </Show>\n }\n >\n <span class=\"k2b-dropzone__subtitle\">{fileInputMessages().chooseMatchingFile}</span>\n </Show>\n <Show when={props.hint}>\n <span class=\"k2b-dropzone__hint\">{props.hint}</span>\n </Show>\n </span>\n </button>\n {/* With `choose`, the zone is the only control: a native input would take a dialog's first focus and open the\n device's dialog past the chooser. */}\n <Show when={!props.choose}>\n <input\n ref={input}\n class=\"k2b-sr-only\"\n type=\"file\"\n aria-label={\n props[\"aria-label\"] ??\n (typeof props.label === \"string\"\n ? props.label\n : props.multiple === false\n ? fileInputMessages().chooseFile\n : fileInputMessages().chooseFiles)\n }\n accept={props.accept}\n multiple={props.multiple ?? true}\n disabled={disabled()}\n tabIndex={-1}\n onChange={(event) => {\n const files = Array.from(event.currentTarget.files ?? []);\n // Reset before emitting so re-picking the same file still fires change,\n // even when onDrop throws.\n event.currentTarget.value = \"\";\n emit(files);\n }}\n />\n </Show>\n </Field>\n );\n}\n\nexport type ImageInputProps = ValueFieldProps<string | null> & {\n round?: boolean;\n variant?: \"default\" | \"small\";\n transform?: (file: File) => Promise<string>;\n accept?: string;\n fallbackMarker?: string;\n};\n\nconst DEFAULT_IMAGE_ACCEPT = \"image/jpeg,image/png,image/gif,image/webp,image/svg+xml,.jpg,.jpeg,.png,.gif,.webp,.svg\";\n\nconst defaultImageTransform = async (file: File): Promise<string> => {\n const { img } = await import(\"@k2b/stdlib/browser\");\n return img.presets.avatar(file);\n};\n\nexport function ImageInput(props: ImageInputProps): JSX.Element {\n const messages = useUiMessages();\n const fileInputMessages = useFileInputMessages();\n const meta = createFieldMeta(props.id);\n const [busy, setBusy] = createSignal(false);\n const [localError, setLocalError] = createSignal<string>();\n let input: HTMLInputElement | undefined;\n const disabled = () => Boolean(props.disabled || busy() || !props.onValueChange);\n const error = () => resolveMaybeAccessor(props.error) ?? localError();\n const value = () => {\n const current = resolveMaybeAccessor(props.value);\n return current && !current.includes(props.fallbackMarker ?? \"?fallback\") ? current : null;\n };\n const compact = () => props.variant === \"small\";\n const changeLabel = () => (value() ? fileInputMessages().changeImage : fileInputMessages().addImage);\n const changeIcon = () => (value() ? \"ti ti-pencil\" : \"ti ti-photo-plus\");\n const select = async (file: File | undefined) => {\n if (!file || disabled()) return;\n setBusy(true);\n setLocalError();\n try {\n const transformed = await (props.transform ?? defaultImageTransform)(file);\n commitFieldValue(props, transformed);\n } catch (error) {\n setLocalError(error instanceof Error ? error.message : fileInputMessages().imageProcessingFailed);\n } finally {\n setBusy(false);\n if (input) input.value = \"\";\n }\n };\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={error()}\n meta={meta}\n required={props.required}\n disabled={disabled()}\n >\n <div\n class=\"k2b-image-input\"\n data-round={props.round ? \"true\" : undefined}\n data-variant={props.variant ?? \"default\"}\n role=\"group\"\n aria-labelledby={props.label ? meta.labelId : undefined}\n aria-label={!props.label ? props[\"aria-label\"] : undefined}\n aria-describedby={fieldControlAria(meta, { ...props, error })[\"aria-describedby\"]}\n >\n <div class=\"k2b-image-input__preview\">\n <Show when={value()} fallback={<i class=\"ti ti-photo-off\" aria-hidden=\"true\" />}>\n {(source) => <img src={source()} alt={typeof props.label === \"string\" ? props.label : fileInputMessages().selectedImage} />}\n </Show>\n </div>\n <div class=\"k2b-image-input__actions\">\n <Show\n when={compact()}\n fallback={\n <Button\n variant=\"secondary\"\n loading={busy()}\n loadingLabel={fileInputMessages().processingImage}\n disabled={disabled()}\n onClick={() => input?.click()}\n >\n <i class={changeIcon()} aria-hidden=\"true\" />\n {value() ? messages().change : messages().add}\n </Button>\n }\n >\n <IconButton\n label={changeLabel()}\n loading={busy()}\n loadingLabel={fileInputMessages().processingImage}\n disabled={disabled()}\n onClick={() => input?.click()}\n >\n <i class={changeIcon()} aria-hidden=\"true\" />\n </IconButton>\n </Show>\n <Show when={value()}>\n <Show\n when={compact()}\n fallback={\n <Button variant=\"ghost\" disabled={disabled()} onClick={() => commitFieldValue(props, null)}>\n <i class=\"ti ti-trash\" aria-hidden=\"true\" /> Remove\n </Button>\n }\n >\n <IconButton label={fileInputMessages().removeImage} disabled={disabled()} onClick={() => commitFieldValue(props, null)}>\n <i class=\"ti ti-trash\" aria-hidden=\"true\" />\n </IconButton>\n </Show>\n </Show>\n </div>\n <input\n ref={input}\n id={meta.controlId}\n class=\"k2b-sr-only\"\n type=\"file\"\n accept={props.accept ?? DEFAULT_IMAGE_ACCEPT}\n disabled={disabled()}\n required={props.required && !value()}\n {...fieldControlAria(meta, { ...props, error })}\n onChange={(event) => void select(event.currentTarget.files?.[0])}\n />\n </div>\n </Field>\n );\n}\n\ntype PreviewState = {\n url: string;\n objectUrl: boolean;\n sourceWidth: number;\n sourceHeight: number;\n};\n\ntype DragHandle = \"move\" | ImageCropResizeHandle;\ntype DragState = {\n handle: DragHandle;\n pointerId: number;\n startX: number;\n startY: number;\n startCrop: ImageCropRect;\n};\n\nexport type ImageCropperProps = {\n source: ImageCropSource;\n aspect?: ImageCropAspect;\n previewShape?: \"rect\" | \"circle\";\n disabled?: boolean;\n onValueChange?: (state: ImageCropState | null) => void;\n class?: string;\n};\n\nconst clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));\n\nconst imageElementReady = async (image: HTMLImageElement): Promise<void> => {\n if (image.complete && image.naturalWidth > 0) return;\n await new Promise<void>((resolve, reject) => {\n image.addEventListener(\"load\", () => resolve(), { once: true });\n image.addEventListener(\"error\", () => reject(new Error(\"Failed to load image.\")), { once: true });\n });\n};\n\nconst loadPreviewState = async (source: ImageCropSource): Promise<PreviewState> => {\n const sourceImage =\n source instanceof HTMLImageElement\n ? source\n : Object.assign(new Image(), {\n crossOrigin: source instanceof Blob ? undefined : \"anonymous\",\n src:\n source instanceof HTMLCanvasElement\n ? source.toDataURL(\"image/png\")\n : source instanceof Blob\n ? URL.createObjectURL(source)\n : source,\n });\n\n try {\n await imageElementReady(sourceImage);\n return {\n url: source instanceof HTMLImageElement ? source.currentSrc || source.src : sourceImage.src,\n objectUrl: source instanceof Blob,\n sourceWidth: sourceImage.naturalWidth || sourceImage.width,\n sourceHeight: sourceImage.naturalHeight || sourceImage.height,\n };\n } catch (error) {\n if (source instanceof Blob) URL.revokeObjectURL(sourceImage.src);\n throw error;\n }\n};\n\nexport function ImageCropper(props: ImageCropperProps): JSX.Element {\n const fileInputMessages = useFileInputMessages();\n let frame: HTMLDivElement | undefined;\n let activePreview: PreviewState | null = null;\n const aspect = () => props.aspect ?? \"free\";\n const previewShape = () => props.previewShape ?? \"rect\";\n const disabled = () => props.disabled ?? false;\n const [preview, setPreview] = createSignal<PreviewState | null>(null);\n const [crop, setCrop] = createSignal<ImageCropRect | null>(null);\n const [rotation, setRotation] = createSignal<ImageCropRotation>(0);\n const [loading, setLoading] = createSignal(true);\n const [error, setError] = createSignal<string | null>(null);\n const [drag, setDrag] = createSignal<DragState | null>(null);\n\n const previewSize = (): { width: number; height: number } | null => {\n const currentPreview = preview();\n if (!currentPreview) return null;\n const swapsDimensions = rotation() === 90 || rotation() === 270;\n return {\n width: swapsDimensions ? currentPreview.sourceHeight : currentPreview.sourceWidth,\n height: swapsDimensions ? currentPreview.sourceWidth : currentPreview.sourceHeight,\n };\n };\n\n const replacePreview = (next: PreviewState | null) => {\n if (activePreview?.objectUrl) URL.revokeObjectURL(activePreview.url);\n activePreview = next;\n setPreview(next);\n };\n\n onCleanup(() => {\n if (activePreview?.objectUrl) URL.revokeObjectURL(activePreview.url);\n });\n\n createEffect(() => {\n props.source;\n setRotation(0);\n setCrop(null);\n });\n\n createEffect(() => {\n const source = props.source;\n let disposed = false;\n replacePreview(null);\n setLoading(true);\n setError(null);\n\n void (async () => {\n try {\n const nextPreview = await loadPreviewState(source);\n if (disposed) {\n if (nextPreview.objectUrl) URL.revokeObjectURL(nextPreview.url);\n return;\n }\n replacePreview(nextPreview);\n } catch {\n if (disposed) return;\n replacePreview(null);\n setCrop(null);\n setError(fileInputMessages().failedLoadImage);\n } finally {\n if (!disposed) setLoading(false);\n }\n })();\n\n onCleanup(() => {\n disposed = true;\n });\n });\n\n createEffect(() => {\n const currentSize = previewSize();\n const currentAspect = aspect();\n if (!currentSize) return;\n setCrop((current) => clampImageCropRect(current ?? getInitialImageCropRect(currentSize, currentAspect), currentSize, currentAspect));\n });\n\n createEffect(() => {\n const currentCrop = crop();\n const currentPreview = preview();\n props.onValueChange?.(currentCrop && currentPreview ? { crop: currentCrop, rotation: rotation() } : null);\n });\n\n const readPointerPosition = (event: PointerEvent) => {\n if (!frame) return { x: 0, y: 0 };\n const rect = frame.getBoundingClientRect();\n return {\n x: (event.clientX - rect.left) / Math.max(1, rect.width),\n y: (event.clientY - rect.top) / Math.max(1, rect.height),\n };\n };\n\n const moveCrop = (event: PointerEvent) => {\n const state = drag();\n const currentSize = previewSize();\n if (!state || !currentSize || state.pointerId !== event.pointerId) return;\n event.preventDefault();\n const point = readPointerPosition(event);\n const dx = point.x - state.startX;\n const dy = point.y - state.startY;\n const start = state.startCrop;\n\n if (state.handle === \"move\") {\n setCrop(\n clampImageCropRect(\n {\n ...start,\n x: start.x + dx,\n y: start.y + dy,\n },\n currentSize,\n aspect(),\n ),\n );\n return;\n }\n\n setCrop(resizeImageCropFromCorner(start, currentSize, aspect(), state.handle, dx, dy));\n };\n\n let releaseTextSelection: (() => void) | undefined;\n const endDrag = (event: PointerEvent) => {\n const state = drag();\n if (!state || state.pointerId !== event.pointerId) return;\n window.removeEventListener(\"pointermove\", moveCrop);\n window.removeEventListener(\"pointerup\", endDrag);\n window.removeEventListener(\"pointercancel\", endDrag);\n releaseTextSelection?.();\n setDrag(null);\n };\n\n const startDrag = (handle: DragHandle, event: PointerEvent) => {\n const currentCrop = crop();\n if (!currentCrop || disabled() || event.button !== 0) return;\n event.preventDefault();\n event.stopPropagation();\n (event.currentTarget as Element).setPointerCapture?.(event.pointerId);\n releaseTextSelection = suppressTextSelection(event.pointerId);\n const point = readPointerPosition(event);\n setDrag({\n handle,\n pointerId: event.pointerId,\n startX: point.x,\n startY: point.y,\n startCrop: currentCrop,\n });\n window.addEventListener(\"pointermove\", moveCrop);\n window.addEventListener(\"pointerup\", endDrag);\n window.addEventListener(\"pointercancel\", endDrag);\n };\n\n onCleanup(() => {\n if (typeof window === \"undefined\") return;\n window.removeEventListener(\"pointermove\", moveCrop);\n window.removeEventListener(\"pointerup\", endDrag);\n window.removeEventListener(\"pointercancel\", endDrag);\n releaseTextSelection?.();\n });\n\n const rotateRight = () => {\n if (disabled()) return;\n setRotation((current) => rotateImageCropRight(current));\n };\n\n const nudgeCrop = (handle: DragHandle, event: KeyboardEvent) => {\n if (disabled() || ![\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\"].includes(event.key)) return;\n const current = crop();\n const currentSize = previewSize();\n if (!current || !currentSize) return;\n event.preventDefault();\n const step = event.shiftKey ? 0.05 : 0.01;\n const dx = event.key === \"ArrowLeft\" ? -step : event.key === \"ArrowRight\" ? step : 0;\n const dy = event.key === \"ArrowUp\" ? -step : event.key === \"ArrowDown\" ? step : 0;\n setCrop(\n handle === \"move\"\n ? clampImageCropRect({ ...current, x: current.x + dx, y: current.y + dy }, currentSize, aspect())\n : resizeImageCropFromCorner(current, currentSize, aspect(), handle, dx, dy),\n );\n };\n\n const previewFrameStyle = (): JSX.CSSProperties => {\n const currentSize = previewSize();\n if (!currentSize) return {};\n return {\n \"aspect-ratio\": `${currentSize.width} / ${currentSize.height}`,\n \"max-width\": `min(100%, calc(min(58vh, 24rem) * ${currentSize.width} / ${currentSize.height}))`,\n };\n };\n\n const previewImageStyle = (): JSX.CSSProperties => {\n const currentPreview = preview();\n const currentSize = previewSize();\n if (!currentPreview || !currentSize) return {};\n const swapsDimensions = rotation() === 90 || rotation() === 270;\n return {\n left: \"50%\",\n top: \"50%\",\n width: swapsDimensions ? `${(currentPreview.sourceWidth / currentSize.width) * 100}%` : \"100%\",\n height: swapsDimensions ? `${(currentPreview.sourceHeight / currentSize.height) * 100}%` : \"100%\",\n \"max-width\": \"none\",\n \"object-fit\": \"fill\",\n transform: `translate(-50%, -50%) rotate(${rotation()}deg)`,\n };\n };\n\n const cropStyle = (): JSX.CSSProperties => {\n const currentCrop = crop();\n if (!currentCrop) return {};\n return {\n left: `${currentCrop.x * 100}%`,\n top: `${currentCrop.y * 100}%`,\n width: `${currentCrop.width * 100}%`,\n height: `${currentCrop.height * 100}%`,\n \"box-shadow\": \"0 0 0 9999px rgba(0,0,0,.42)\",\n };\n };\n\n const showResizeHandles = () => previewShape() !== \"circle\";\n\n return (\n <div class={`k2b-image-cropper ${props.class ?? \"\"}`}>\n <div class=\"k2b-image-cropper__stage\">\n <Show when={!loading()} fallback={<small>{fileInputMessages().preparingImage}</small>}>\n <Show when={!error()} fallback={<small class=\"k2b-image-cropper__error\">{error()}</small>}>\n <Show when={preview() && crop()}>\n <div ref={frame} class=\"k2b-image-cropper__frame\" style={previewFrameStyle()}>\n <img src={preview()!.url} alt={fileInputMessages().cropPreview} draggable={false} style={previewImageStyle()} />\n <div\n class=\"k2b-image-cropper__selection\"\n data-shape={previewShape()}\n style={cropStyle()}\n role=\"group\"\n tabIndex={disabled() ? undefined : 0}\n aria-label={fileInputMessages().cropArea}\n onPointerDown={(event) => startDrag(\"move\", event)}\n onKeyDown={(event) => nudgeCrop(\"move\", event)}\n >\n <Show when={showResizeHandles()}>\n <For each={[\"nw\", \"ne\", \"sw\", \"se\"] as const}>\n {(handle) => (\n <button\n type=\"button\"\n class=\"k2b-image-cropper__handle\"\n data-handle={handle}\n aria-label={fileInputMessages().resizeCrop({ handle })}\n disabled={disabled()}\n onPointerDown={(event) => startDrag(handle, event)}\n onKeyDown={(event) => nudgeCrop(handle, event)}\n />\n )}\n </For>\n </Show>\n </div>\n <Tooltip.Trigger\n type=\"button\"\n class=\"k2b-image-cropper__rotate\"\n content={fileInputMessages().rotateRight}\n aria-label={fileInputMessages().rotateRight}\n disabled={disabled() || !crop() || Boolean(error())}\n onClick={rotateRight}\n >\n <i class=\"ti ti-rotate-clockwise\" aria-hidden=\"true\" />\n </Tooltip.Trigger>\n </div>\n </Show>\n </Show>\n </Show>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,EAAY,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,QAAQ,UAAU;AACtH,SAAS,MAAM,EAAE,UAAU,QAAQ,mBAAmB;AACtD,SAAS,OAAO,QAAQ,qBAAqB;AAC7C,SAAS,eAAe,EAAE,KAAK,EAAE,gBAAgB,QAAQ,mBAAmB;AAC5E,SAAS,qBAAqB,QAAQ,4BAA4B;AAClE,SAAS,aAAa,QAAQ,kBAAkB;AAChD,SAAS,sBAAsB,QAAQ,kBAAkB;AAEzD,SAAS,gBAAgB,EAAE,oBAAoB,QAAQ,kBAAkB;AACzE,SAAS,cAAc,EAAE,YAAY,QAAQ,aAAa;AAC1D,SAAS,mBAAmB,QAAQ,sBAAsB;AAC1D,SAAS,oBAAoB,QAAQ,uBAAuB;AAC5D,SACE,kBAAkB,EAClB,uBAAuB,EAOvB,yBAAyB,EACzB,oBAAoB,QACf,cAAc;AAsBrB,OAAO,SAAS,YAAY,CAAC,KAAwB,EAAe;EAClE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC;EAChD,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;EAC9C,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;EACtC,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC;EAC5D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,YAAY,CAAS,CAAC;EAC5D,MAAM,KAAK,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,WAAW,CAAC,CAAC;EACtE,IAAI,KAAmC;EACvC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAoB,CAAC;EAC7D,MAAM,IAAI,GAAI,KAAa,IAAK;IAC9B,IAAI,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;IACtC,cAAc,CAAC,CAAC;IAChB,KAAK,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,KAAK,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,KAAK,CAAC;EACzE,CAAC;EACD,MAAM,MAAM,GAAI,WAA2C,IAAK;IAC9D,cAAc,CAAC,CAAC;IAChB,WAAW,CAAC,CAAC,CAAC,IAAI,CACf,KAAK,IAAK,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAC1B,KAAc,IAAK,cAAc,CAAC,KAAK,YAAY,KAAK,IAAI,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,GAAG,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAClI,CAAC;EACH,CAAC;EACD;EACA;EACA,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,SAAS,IAAI,iBAAiB,CAAC,CAAC,CAAC,YAAY;EAC3E,MAAM,OAAO,GAAG,sBAAsB,CAAC;IACrC,IAAI,KAAK,GAAG;MACV,OAAO,SAAS,CAAC,CAAC;IACpB,CAAC;IACD,IAAI,MAAM,GAAG;MACX,OAAO,KAAK,CAAC,MAAM;IACrB,CAAC;IACD,IAAI,QAAQ,GAAG;MACb,OAAO,KAAK,CAAC,QAAQ;IACvB,CAAC;IACD,IAAI,QAAQ,GAAG;MACb,OAAO,QAAQ,CAAC,CAAC;IACnB,CAAC;IACD,MAAM,EAAE;EACV,CAAC,CAAC;EACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,YAAY,CAAoC,CAAC;EAC7E,OAAO,CAAC,MAAM;IACZ,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,IAAI,OAAO,EAAE,SAAS,CAAC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;EAC/D,CAAC,CAAC;EACF,MAAM,SAAS,GAAG,UAAU,CAAC,MAAM;IACjC,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC;IACxB,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,KAAK;IACxC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,EAAE,OAAO,SAAS;IACzD,OAAO,KAAK,CAAC,OAAO,GAAG,SAAS,GAAG,MAAM;EAC3C,CAAC,CAAC;EACF,MAAM,KAAK,GAAG,MACZ,KAAK,CAAC,IAAI,GACN,iBAAiB,CAAC,CAAC,CAAC,SAAS,GAC7B,SAAS,CAAC,CAAC,KAAK,SAAS,GACvB,gBAAgB,CAAC,CAAC,CAAC,mBAAmB,GACtC,SAAS,CAAC,CAAC,KAAK,MAAM,GACpB,SAAS,CAAC,CAAC,GACV,KAAK,CAAC,KAAK,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAU;EAExD,yBACG,KAAK;IAAA;MAAA,OACG,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,KAAK;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,WAAW;MAAA,OAAE,KAAK,CAAC,WAAW;IAAA;IAAA,IAC9B,KAAK;MAAA,OAAE,KAAK,CAAC,CAAC;IAAA;IACd,IAAI,EAAE,IAAI;IAAA,IACV,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA,IACxB,QAAQ;MAAA,OAAE,QAAQ,CAAC,CAAC;IAAA;IAAA;MAAA;QAAA,IAGlB,EAAE;UAAA,OAAE,IAAI,CAAC,SAAS;QAAA;QAClB,IAAI,EAAC,QAAQ;QAAA,SAKP,cAAc;QAAA;UAAA,OACN,KAAK,CAAC,CAAC,GAAG,MAAM,GAAG,SAAS;QAAA;QAAA,IAC1C,QAAQ;UAAA,OAAE,QAAQ,CAAC,CAAC;QAAA;MAAA,SAChB,gBAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,KAAK,EAAE;QAAE;MAAM,CAAC,CAAC,CAAC,0CAO5C,KAAK,CAAC,IAAI,GAAG,yBAAyB,YAAI,KAAK,CAAC,IAAI,IAAI,oBAAoB,OAAC,mCAG9E,KAAK,CAAC,CAAC,8BACf,IAAI;QAAA,IACH,IAAI;UAAA,OAAE,SAAS,CAAC,CAAC,KAAK,SAAS;QAAA;QAAA,IAC/B,QAAQ;UAAA,yBACL,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,KAAK,CAAC,QAAQ;YAAA;YAAA;cAAA,+BACc,KAAK,CAAC,QAAQ;YAAA;UAAA;QAAA;QAAA;UAAA,+BAIlB,iBAAiB,CAAC,CAAC,CAAC,kBAAkB;QAAA;MAAA,gCAE7E,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,IAAI;QAAA;QAAA;UAAA,+BACc,KAAK,CAAC,IAAI;QAAA;MAAA,iCAMjD,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,CAAC,KAAK,CAAC,MAAM;QAAA;QAAA;UAAA,4DAMnB,KAAK,CAAC,YAAY,CAAC,KAClB,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,GAC5B,KAAK,CAAC,KAAK,GACX,KAAK,CAAC,QAAQ,KAAK,KAAK,GACtB,iBAAiB,CAAC,CAAC,CAAC,UAAU,GAC9B,iBAAiB,CAAC,CAAC,CAAC,WAAW,CAAC,oDAEhC,KAAK,CAAC,MAAM,4CACV,KAAK,CAAC,QAAQ,IAAI,IAAI,oCACtB,QAAQ,CAAC,CAAC;QAAA;MAAA;IAAA;EAAA;AAa9B;AAUA,MAAM,oBAAoB,GAAG,yFAAyF;AAEtH,MAAM,qBAAqB,GAAG,MAAO,IAAU,IAAsB;EACnE,MAAM;IAAE;EAAI,CAAC,GAAG,MAAM,OAAO,qBAAqB,CAAC;EACnD,OAAO,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC;AACjC,CAAC;AAED,OAAO,SAAS,UAAU,CAAC,KAAsB,EAAe;EAC9D,MAAM,QAAQ,GAAG,aAAa,CAAC,CAAC;EAChC,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC;EAChD,MAAM,IAAI,GAAG,eAAe,CAAC,KAAK,CAAC,EAAE,CAAC;EACtC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC,KAAK,CAAC;EAC3C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,YAAY,CAAS,CAAC;EAC1D,IAAI,KAAmC;EACvC,MAAM,QAAQ,GAAG,MAAM,OAAO,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;EAChF,MAAM,KAAK,GAAG,MAAM,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,UAAU,CAAC,CAAC;EACrE,MAAM,KAAK,GAAG,MAAM;IAClB,MAAM,OAAO,GAAG,oBAAoB,CAAC,KAAK,CAAC,KAAK,CAAC;IACjD,OAAO,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,IAAI,WAAW,CAAC,GAAG,OAAO,GAAG,IAAI;EAC3F,CAAC;EACD,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO,KAAK,OAAO;EAC/C,MAAM,WAAW,GAAG,MAAO,KAAK,CAAC,CAAC,GAAG,iBAAiB,CAAC,CAAC,CAAC,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,QAAS;EACpG,MAAM,UAAU,GAAG,MAAO,KAAK,CAAC,CAAC,GAAG,cAAc,GAAG,kBAAmB;EACxE,MAAM,MAAM,GAAG,MAAO,IAAsB,IAAK;IAC/C,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAC,EAAE;IACzB,OAAO,CAAC,IAAI,CAAC;IACb,aAAa,CAAC,CAAC;IACf,IAAI;MACF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,SAAS,IAAI,qBAAqB,EAAE,IAAI,CAAC;MAC1E,gBAAgB,CAAC,KAAK,EAAE,WAAW,CAAC;IACtC,CAAC,CAAC,OAAO,KAAK,EAAE;MACd,aAAa,CAAC,KAAK,YAAY,KAAK,GAAG,KAAK,CAAC,OAAO,GAAG,iBAAiB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IACnG,CAAC,SAAS;MACR,OAAO,CAAC,KAAK,CAAC;MACd,IAAI,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,EAAE;IAC7B;EACF,CAAC;EAED,yBACG,KAAK;IAAA;MAAA,OACG,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,KAAK;MAAA,OAAE,KAAK,CAAC,KAAK;IAAA;IAAA,IAClB,WAAW;MAAA,OAAE,KAAK,CAAC,WAAW;IAAA;IAAA,IAC9B,KAAK;MAAA,OAAE,KAAK,CAAC,CAAC;IAAA;IACd,IAAI,EAAE,IAAI;IAAA,IACV,QAAQ;MAAA,OAAE,KAAK,CAAC,QAAQ;IAAA;IAAA,IACxB,QAAQ;MAAA,OAAE,QAAQ,CAAC,CAAC;IAAA;IAAA;MAAA,mDAIN,KAAK,CAAC,KAAK,GAAG,MAAM,YAAG,SAAS,0DAC9B,KAAK,CAAC,OAAO,IAAI,SAAS,mDAEvB,KAAK,CAAC,KAAK,YAAG,IAAI,CAAC,OAAO,mBAAG,SAAS,+CAC3C,CAAC,KAAK,CAAC,KAAK,YAAG,KAAK,CAAC,YAAY,CAAC,mBAAG,SAAS,8DACxC,gBAAgB,CAAC,IAAI,EAAE;QAAE,GAAG,KAAK;QAAE;MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,4CAG9E,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,CAAC;QAAA;QAAA,IAAE,QAAQ;UAAA;QAAA;QAAA,UACzB,MAAM,kDAAe,MAAM,CAAC,CAAC,wCAAO,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,YAAG,KAAK,CAAC,KAAK,mBAAG,iBAAiB,CAAC,CAAC,CAAC,aAAa;MAAI,gCAI5H,IAAI;QAAA,IACH,IAAI;UAAA,OAAE,OAAO,CAAC,CAAC;QAAA;QAAA,IACf,QAAQ;UAAA,yBACL,MAAM;YACL,OAAO;YAAA,IACP,OAAO;cAAA,OAAE,IAAI,CAAC,CAAC;YAAA;YAAA,IACf,YAAY;cAAA,OAAE,iBAAiB,CAAC,CAAC,CAAC,eAAe;YAAA;YAAA,IACjD,QAAQ;cAAA,OAAE,QAAQ,CAAC,CAAC;YAAA;YACpB,OAAO,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC;YAAA;cAAA,wDAEnB,UAAU,CAAC,CAAC,kBACrB,KAAK,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG;YAAA;UAAA;QAAA;QAAA;UAAA,yBAIhD,UAAU;YAAA,IACT,KAAK;cAAA,OAAE,WAAW,CAAC,CAAC;YAAA;YAAA,IACpB,OAAO;cAAA,OAAE,IAAI,CAAC,CAAC;YAAA;YAAA,IACf,YAAY;cAAA,OAAE,iBAAiB,CAAC,CAAC,CAAC,eAAe;YAAA;YAAA,IACjD,QAAQ;cAAA,OAAE,QAAQ,CAAC,CAAC;YAAA;YACpB,OAAO,EAAE,MAAM,KAAK,EAAE,KAAK,CAAC,CAAC;YAAA;cAAA,uDAEnB,UAAU,CAAC,CAAC;YAAA;UAAA;QAAA;MAAA,gCAGzB,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,KAAK,CAAC,CAAC;QAAA;QAAA;UAAA,yBAChB,IAAI;YAAA,IACH,IAAI;cAAA,OAAE,OAAO,CAAC,CAAC;YAAA;YAAA,IACf,QAAQ;cAAA,yBACL,MAAM;gBAAC,OAAO;gBAAA,IAAS,QAAQ;kBAAA,OAAE,QAAQ,CAAC,CAAC;gBAAA;gBAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC;gBAAA;kBAAA;gBAAA;cAAA;YAAA;YAAA;cAAA,yBAK3F,UAAU;gBAAA,IAAC,KAAK;kBAAA,OAAE,iBAAiB,CAAC,CAAC,CAAC,WAAW;gBAAA;gBAAA,IAAE,QAAQ;kBAAA,OAAE,QAAQ,CAAC,CAAC;gBAAA;gBAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC;gBAAA;kBAAA;gBAAA;cAAA;YAAA;UAAA;QAAA;MAAA;QAAA,IAQ1H,EAAE;UAAA,OAAE,IAAI,CAAC,SAAS;QAAA;QAAA,SACZ,aAAa;QACnB,IAAI,EAAC,MAAM;QAAA,IACX,MAAM;UAAA,OAAE,KAAK,CAAC,MAAM,IAAI,oBAAoB;QAAA;QAAA,IAC5C,QAAQ;UAAA,OAAE,QAAQ,CAAC,CAAC;QAAA;QAAA,IACpB,QAAQ;UAAA,OAAE,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC;QAAA;MAAA,SAChC,gBAAgB,CAAC,IAAI,EAAE;QAAE,GAAG,KAAK;QAAE;MAAM,CAAC,CAAC;IAAA;EAAA;AAMzD;AA2BA,MAAM,KAAK,GAAG,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW,KAAK,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAE9F,MAAM,iBAAiB,GAAG,MAAO,KAAuB,IAAoB;EAC1E,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,GAAG,CAAC,EAAE;EAC9C,MAAM,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,MAAM,KAAK;IAC3C,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,CAAC,EAAE;MAAE,IAAI,EAAE;IAAK,CAAC,CAAC;IAC/D,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,MAAM,CAAC,IAAI,KAAK,CAAC,uBAAuB,CAAC,CAAC,EAAE;MAAE,IAAI,EAAE;IAAK,CAAC,CAAC;EACnG,CAAC,CAAC;AACJ,CAAC;AAED,MAAM,gBAAgB,GAAG,MAAO,MAAuB,IAA4B;EACjF,MAAM,WAAW,GACf,MAAM,YAAY,gBAAgB,GAC9B,MAAM,GACN,MAAM,CAAC,MAAM,CAAC,IAAI,KAAK,CAAC,CAAC,EAAE;IACzB,WAAW,EAAE,MAAM,YAAY,IAAI,GAAG,SAAS,GAAG,WAAW;IAC7D,GAAG,EACD,MAAM,YAAY,iBAAiB,GAC/B,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,GAC7B,MAAM,YAAY,IAAI,GACpB,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,GAC3B;EACV,CAAC,CAAC;EAER,IAAI;IACF,MAAM,iBAAiB,CAAC,WAAW,CAAC;IACpC,OAAO;MACL,GAAG,EAAE,MAAM,YAAY,gBAAgB,GAAG,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,GAAG,GAAG,WAAW,CAAC,GAAG;MAC3F,SAAS,EAAE,MAAM,YAAY,IAAI;MACjC,WAAW,EAAE,WAAW,CAAC,YAAY,IAAI,WAAW,CAAC,KAAK;MAC1D,YAAY,EAAE,WAAW,CAAC,aAAa,IAAI,WAAW,CAAC;IACzD,CAAC;EACH,CAAC,CAAC,OAAO,KAAK,EAAE;IACd,IAAI,MAAM,YAAY,IAAI,EAAE,GAAG,CAAC,eAAe,CAAC,WAAW,CAAC,GAAG,CAAC;IAChE,MAAM,KAAK;EACb;AACF,CAAC;AAED,OAAO,SAAS,YAAY,CAAC,KAAwB,EAAe;EAClE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,CAAC;EAChD,IAAI,KAAiC;EACrC,IAAI,aAAkC,GAAG,IAAI;EAC7C,MAAM,MAAM,GAAG,MAAM,KAAK,CAAC,MAAM,IAAI,MAAM;EAC3C,MAAM,YAAY,GAAG,MAAM,KAAK,CAAC,YAAY,IAAI,MAAM;EACvD,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,IAAI,KAAK;EAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAsB,IAAI,CAAC;EACrE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAuB,IAAI,CAAC;EAChE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,YAAY,CAAoB,CAAC,CAAC;EAClE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC;EAChD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,YAAY,CAAgB,IAAI,CAAC;EAC3D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,YAAY,CAAmB,IAAI,CAAC;EAE5D,MAAM,WAAW,GAAG,MAAgD;IAClE,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC;IAChC,IAAI,CAAC,cAAc,EAAE,OAAO,IAAI;IAChC,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI,QAAQ,CAAC,CAAC,KAAK,GAAG;IAC/D,OAAO;MACL,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC,YAAY,GAAG,cAAc,CAAC,WAAW;MACjF,MAAM,EAAE,eAAe,GAAG,cAAc,CAAC,WAAW,GAAG,cAAc,CAAC;IACxE,CAAC;EACH,CAAC;EAED,MAAM,cAAc,GAAI,IAAyB,IAAK;IACpD,IAAI,aAAa,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe,CAAC,aAAa,CAAC,GAAG,CAAC;IACpE,aAAa,GAAG,IAAI;IACpB,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC;EAED,SAAS,CAAC,MAAM;IACd,IAAI,aAAa,EAAE,SAAS,EAAE,GAAG,CAAC,eAAe,CAAC,aAAa,CAAC,GAAG,CAAC;EACtE,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,KAAK,CAAC,MAAM;IACZ,WAAW,CAAC,CAAC,CAAC;IACd,OAAO,CAAC,IAAI,CAAC;EACf,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM;IAC3B,IAAI,QAAQ,GAAG,KAAK;IACpB,cAAc,CAAC,IAAI,CAAC;IACpB,UAAU,CAAC,IAAI,CAAC;IAChB,QAAQ,CAAC,IAAI,CAAC;IAEd,KAAK,CAAC,YAAY;MAChB,IAAI;QACF,MAAM,WAAW,GAAG,MAAM,gBAAgB,CAAC,MAAM,CAAC;QAClD,IAAI,QAAQ,EAAE;UACZ,IAAI,WAAW,CAAC,SAAS,EAAE,GAAG,CAAC,eAAe,CAAC,WAAW,CAAC,GAAG,CAAC;UAC/D;QACF;QACA,cAAc,CAAC,WAAW,CAAC;MAC7B,CAAC,CAAC,MAAM;QACN,IAAI,QAAQ,EAAE;QACd,cAAc,CAAC,IAAI,CAAC;QACpB,OAAO,CAAC,IAAI,CAAC;QACb,QAAQ,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,CAAC;MAC/C,CAAC,SAAS;QACR,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,KAAK,CAAC;MAClC;IACF,CAAC,EAAE,CAAC;IAEJ,SAAS,CAAC,MAAM;MACd,QAAQ,GAAG,IAAI;IACjB,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC;IAC9B,IAAI,CAAC,WAAW,EAAE;IAClB,OAAO,CAAE,OAAO,IAAK,kBAAkB,CAAC,OAAO,IAAI,uBAAuB,CAAC,WAAW,EAAE,aAAa,CAAC,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC;EACtI,CAAC,CAAC;EAEF,YAAY,CAAC,MAAM;IACjB,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1B,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC;IAChC,KAAK,CAAC,aAAa,GAAG,WAAW,IAAI,cAAc,GAAG;MAAE,IAAI,EAAE,WAAW;MAAE,QAAQ,EAAE,QAAQ,CAAC;IAAE,CAAC,GAAG,IAAI,CAAC;EAC3G,CAAC,CAAC;EAEF,MAAM,mBAAmB,GAAI,KAAmB,IAAK;IACnD,IAAI,CAAC,KAAK,EAAE,OAAO;MAAE,CAAC,EAAE,CAAC;MAAE,CAAC,EAAE;IAAE,CAAC;IACjC,MAAM,IAAI,GAAG,KAAK,CAAC,qBAAqB,CAAC,CAAC;IAC1C,OAAO;MACL,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC;MACxD,CAAC,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,MAAM;IACzD,CAAC;EACH,CAAC;EAED,MAAM,QAAQ,GAAI,KAAmB,IAAK;IACxC,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC;IACpB,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,KAAK,IAAI,CAAC,WAAW,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE;IACnE,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC;IACxC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM;IACjC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM;IACjC,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS;IAE7B,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,EAAE;MAC3B,OAAO,CACL,kBAAkB,CAChB;QACE,GAAG,KAAK;QACR,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG,EAAE;QACf,CAAC,EAAE,KAAK,CAAC,CAAC,GAAG;MACf,CAAC,EACD,WAAW,EACX,MAAM,CAAC,CACT,CACF,CAAC;MACD;IACF;IAEA,OAAO,CAAC,yBAAyB,CAAC,KAAK,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;EACxF,CAAC;EAED,IAAI,oBAA8C;EAClD,MAAM,OAAO,GAAI,KAAmB,IAAK;IACvC,MAAM,KAAK,GAAG,IAAI,CAAC,CAAC;IACpB,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,EAAE;IACnD,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,QAAQ,CAAC;IACnD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;IAChD,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC;IACpD,oBAAoB,GAAG,CAAC;IACxB,OAAO,CAAC,IAAI,CAAC;EACf,CAAC;EAED,MAAM,SAAS,GAAG,CAAC,MAAkB,EAAE,KAAmB,KAAK;IAC7D,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1B,IAAI,CAAC,WAAW,IAAI,QAAQ,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;IACtD,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,KAAK,CAAC,eAAe,CAAC,CAAC;IACtB,KAAK,CAAC,aAAa,CAAa,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAAC;IACrE,oBAAoB,GAAG,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC;IAC7D,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAK,CAAC;IACxC,OAAO,CAAC;MACN,MAAM;MACN,SAAS,EAAE,KAAK,CAAC,SAAS;MAC1B,MAAM,EAAE,KAAK,CAAC,CAAC;MACf,MAAM,EAAE,KAAK,CAAC,CAAC;MACf,SAAS,EAAE;IACb,CAAC,CAAC;IACF,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,QAAQ,CAAC;IAChD,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,OAAO,CAAC;IAC7C,MAAM,CAAC,gBAAgB,CAAC,eAAe,EAAE,OAAO,CAAC;EACnD,CAAC;EAED,SAAS,CAAC,MAAM;IACd,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE;IACnC,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,QAAQ,CAAC;IACnD,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,OAAO,CAAC;IAChD,MAAM,CAAC,mBAAmB,CAAC,eAAe,EAAE,OAAO,CAAC;IACpD,oBAAoB,GAAG,CAAC;EAC1B,CAAC,CAAC;EAEF,MAAM,WAAW,GAAG,MAAM;IACxB,IAAI,QAAQ,CAAC,CAAC,EAAE;IAChB,WAAW,CAAE,OAAO,IAAK,oBAAoB,CAAC,OAAO,CAAC,CAAC;EACzD,CAAC;EAED,MAAM,SAAS,GAAG,CAAC,MAAkB,EAAE,KAAoB,KAAK;IAC9D,IAAI,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;IAC5F,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC;IACtB,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,OAAO,IAAI,CAAC,WAAW,EAAE;IAC9B,KAAK,CAAC,cAAc,CAAC,CAAC;IACtB,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,GAAG,IAAI,GAAG,IAAI;IACzC,MAAM,EAAE,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,YAAY,GAAG,IAAI,GAAG,CAAC;IACpF,MAAM,EAAE,GAAG,KAAK,CAAC,GAAG,KAAK,SAAS,GAAG,CAAC,IAAI,GAAG,KAAK,CAAC,GAAG,KAAK,WAAW,GAAG,IAAI,GAAG,CAAC;IACjF,OAAO,CACL,MAAM,KAAK,MAAM,GACb,kBAAkB,CAAC;MAAE,GAAG,OAAO;MAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG,EAAE;MAAE,CAAC,EAAE,OAAO,CAAC,CAAC,GAAG;IAAG,CAAC,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,GAC/F,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,CAC9E,CAAC;EACH,CAAC;EAED,MAAM,iBAAiB,GAAG,MAAyB;IACjD,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO;MACL,cAAc,EAAE,GAAG,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM,EAAE;MAC9D,WAAW,EAAE,qCAAqC,WAAW,CAAC,KAAK,MAAM,WAAW,CAAC,MAAM;IAC7F,CAAC;EACH,CAAC;EAED,MAAM,iBAAiB,GAAG,MAAyB;IACjD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC;IAChC,MAAM,WAAW,GAAG,WAAW,CAAC,CAAC;IACjC,IAAI,CAAC,cAAc,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC9C,MAAM,eAAe,GAAG,QAAQ,CAAC,CAAC,KAAK,EAAE,IAAI,QAAQ,CAAC,CAAC,KAAK,GAAG;IAC/D,OAAO;MACL,IAAI,EAAE,KAAK;MACX,GAAG,EAAE,KAAK;MACV,KAAK,EAAE,eAAe,GAAG,GAAI,cAAc,CAAC,WAAW,GAAG,WAAW,CAAC,KAAK,GAAI,GAAG,GAAG,GAAG,MAAM;MAC9F,MAAM,EAAE,eAAe,GAAG,GAAI,cAAc,CAAC,YAAY,GAAG,WAAW,CAAC,MAAM,GAAI,GAAG,GAAG,GAAG,MAAM;MACjG,WAAW,EAAE,MAAM;MACnB,YAAY,EAAE,MAAM;MACpB,SAAS,EAAE,gCAAgC,QAAQ,CAAC,CAAC;IACvD,CAAC;EACH,CAAC;EAED,MAAM,SAAS,GAAG,MAAyB;IACzC,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;IAC1B,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;IAC3B,OAAO;MACL,IAAI,EAAE,GAAG,WAAW,CAAC,CAAC,GAAG,GAAG,GAAG;MAC/B,GAAG,EAAE,GAAG,WAAW,CAAC,CAAC,GAAG,GAAG,GAAG;MAC9B,KAAK,EAAE,GAAG,WAAW,CAAC,KAAK,GAAG,GAAG,GAAG;MACpC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,GAAG,GAAG,GAAG;MACtC,YAAY,EAAE;IAChB,CAAC;EACH,CAAC;EAED,MAAM,iBAAiB,GAAG,MAAM,YAAY,CAAC,CAAC,KAAK,QAAQ;EAE3D,uBACc,8BAAqB,KAAK,CAAC,KAAK,IAAI,EAAE,SAAE,6BAE/C,IAAI;IAAA,IAAC,IAAI;MAAA,OAAE,CAAC,OAAO,CAAC,CAAC;IAAA;IAAA,IAAE,QAAQ;MAAA,gCAAU,iBAAiB,CAAC,CAAC,CAAC,cAAc;IAAA;IAAA;MAAA,yBACzE,IAAI;QAAA,IAAC,IAAI;UAAA,OAAE,CAAC,KAAK,CAAC,CAAC;QAAA;QAAA,IAAE,QAAQ;UAAA,gCAA2C,KAAK,CAAC,CAAC;QAAA;QAAA;UAAA,yBAC7E,IAAI;YAAA,IAAC,IAAI;cAAA,OAAE,sBAAO,CAAC,CAAC,OAAI,IAAI,CAAC,CAAC;YAAA;YAAA;cAAA,kCAC4B,iBAAiB,CAAC,CAAC,kCAChE,OAAO,CAAC,CAAC,CAAE,GAAG,iDAAO,iBAAiB,CAAC,CAAC,CAAC,WAAW,4BAA2B,iBAAiB,CAAC,CAAC,yCAG9F,YAAY,CAAC,CAAC,4BACnB,SAAS,CAAC,CAAC,8BAER,QAAQ,CAAC,CAAC,YAAG,SAAS,UAAG,CAAC,iDACxB,iBAAiB,CAAC,CAAC,CAAC,QAAQ,4CAIvC,IAAI;gBAAA,IAAC,IAAI;kBAAA,OAAE,iBAAiB,CAAC,CAAC;gBAAA;gBAAA;kBAAA,yBAC5B,GAAG;oBAAC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;oBAAA,UAC/B,MAAM,2DAIS,MAAM,wDACP,iBAAiB,CAAC,CAAC,CAAC,UAAU,CAAC;sBAAE;oBAAO,CAAC,CAAC,4CAC5C,QAAQ,CAAC,CAAC;kBAIvB;gBAAA;cAAA,gCAIN,OAAO,CAAC,OAAO;gBACd,IAAI;gBAAA;gBAAA,IAEJ,OAAO;kBAAA,OAAE,iBAAiB,CAAC,CAAC,CAAC,WAAW;gBAAA;gBAAA;kBAAA,OAC5B,iBAAiB,CAAC,CAAC,CAAC,WAAW;gBAAA;gBAAA,IAC3C,QAAQ;kBAAA,OAAE,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;gBAAA;gBACnD,OAAO,EAAE,WAAW;gBAAA;kBAAA;gBAAA;cAAA;YAAA;UAAA;QAAA;MAAA;IAAA;EAAA;AAWtC","ignoreList":[]}
|
|
@@ -5,11 +5,10 @@ import { escape as _$escape } from "solid-js/web";
|
|
|
5
5
|
import { createComponent as _$createComponent } from "solid-js/web";
|
|
6
6
|
import { memo as _$memo } from "solid-js/web";
|
|
7
7
|
var _tmpl$ = ["<span", ">", "</span>"],
|
|
8
|
-
_tmpl$2 = "<i
|
|
9
|
-
_tmpl$3 = ["<
|
|
10
|
-
_tmpl$4 = ["<
|
|
11
|
-
|
|
12
|
-
import { createMemo, Show } from "solid-js";
|
|
8
|
+
_tmpl$2 = ["<i", " aria-hidden=\"true\"></i>"],
|
|
9
|
+
_tmpl$3 = ["<img", " alt>"],
|
|
10
|
+
_tmpl$4 = ["<input type=\"hidden\"", ">"];
|
|
11
|
+
import { createComputed, createEffect, createMemo, on, Show } from "solid-js";
|
|
13
12
|
import { Dropdown } from "../actions/Dropdown";
|
|
14
13
|
import { createFieldMeta, Field, fieldControlAria } from "../internal/field";
|
|
15
14
|
import { commitFieldValue, resolveMaybeAccessor } from "./field-contract";
|
|
@@ -19,6 +18,25 @@ export function SelectChip(props) {
|
|
|
19
18
|
const meta = createFieldMeta(props.id);
|
|
20
19
|
const value = () => resolveMaybeAccessor(props.value);
|
|
21
20
|
const selected = () => props.options.find(option => option.value === value());
|
|
21
|
+
const disabled = createMemo(() => Boolean(props.disabled || props.loading));
|
|
22
|
+
// A disabled button loses focus, so a chip disabled while a change saves (its own or one elsewhere) would leave
|
|
23
|
+
// keyboard focus on the page. Focus returns to the chip once it is enabled again, unless it has moved on
|
|
24
|
+
// meanwhile. The check runs as a computation, before the DOM update disables the button.
|
|
25
|
+
let trigger;
|
|
26
|
+
let refocus = false;
|
|
27
|
+
createComputed(on(disabled, isDisabled => {
|
|
28
|
+
if (isDisabled) refocus = trigger !== undefined && document.activeElement === trigger;
|
|
29
|
+
}, {
|
|
30
|
+
defer: true
|
|
31
|
+
}));
|
|
32
|
+
createEffect(on(disabled, isDisabled => {
|
|
33
|
+
if (isDisabled || !refocus) return;
|
|
34
|
+
refocus = false;
|
|
35
|
+
const active = document.activeElement;
|
|
36
|
+
if (trigger?.isConnected && (active === null || active === document.body)) trigger.focus();
|
|
37
|
+
}, {
|
|
38
|
+
defer: true
|
|
39
|
+
}));
|
|
22
40
|
const triggerLabel = () => props["aria-label"] ?? (typeof props.label === "string" ? props.label : selectMessages().chooseOption);
|
|
23
41
|
const items = createMemo(() => props.options.map(option => ({
|
|
24
42
|
action: () => commitFieldValue(props, option.value),
|
|
@@ -49,10 +67,19 @@ export function SelectChip(props) {
|
|
|
49
67
|
return props.required;
|
|
50
68
|
},
|
|
51
69
|
get disabled() {
|
|
52
|
-
return
|
|
70
|
+
return disabled();
|
|
53
71
|
},
|
|
54
72
|
get children() {
|
|
55
73
|
return [_$createComponent(Dropdown.Root, {
|
|
74
|
+
get open() {
|
|
75
|
+
return _$memo(() => props.open === undefined)() ? undefined : _$memo(() => !!props.open)() && !disabled();
|
|
76
|
+
},
|
|
77
|
+
get onOpenChange() {
|
|
78
|
+
return props.onOpenChange;
|
|
79
|
+
},
|
|
80
|
+
get disabled() {
|
|
81
|
+
return disabled();
|
|
82
|
+
},
|
|
56
83
|
get position() {
|
|
57
84
|
return props.position ?? "bottom-right";
|
|
58
85
|
},
|
|
@@ -78,11 +105,17 @@ export function SelectChip(props) {
|
|
|
78
105
|
return props.iconOnly ? undefined : "k2b-select-chip";
|
|
79
106
|
},
|
|
80
107
|
get disabled() {
|
|
81
|
-
return
|
|
108
|
+
return disabled();
|
|
109
|
+
},
|
|
110
|
+
get ["aria-busy"]() {
|
|
111
|
+
return props.loading ? "true" : undefined;
|
|
82
112
|
},
|
|
83
113
|
get iconOnly() {
|
|
84
114
|
return props.iconOnly;
|
|
85
115
|
},
|
|
116
|
+
get loading() {
|
|
117
|
+
return _$memo(() => !!props.iconOnly)() ? props.loading : undefined;
|
|
118
|
+
},
|
|
86
119
|
get label() {
|
|
87
120
|
return triggerLabel();
|
|
88
121
|
},
|
|
@@ -103,16 +136,16 @@ export function SelectChip(props) {
|
|
|
103
136
|
get when() {
|
|
104
137
|
return selected()?.icon ?? props.icon;
|
|
105
138
|
},
|
|
106
|
-
children: icon => _$ssr(_tmpl$
|
|
139
|
+
children: icon => _$ssr(_tmpl$2, _$ssrAttribute("class", _$escape(icon(), true), false))
|
|
107
140
|
});
|
|
108
141
|
},
|
|
109
|
-
children: image => _$ssr(_tmpl$
|
|
142
|
+
children: image => _$ssr(_tmpl$3, _$ssrAttribute("src", _$escape(image(), true), false))
|
|
110
143
|
}), _$createComponent(Show, {
|
|
111
144
|
get when() {
|
|
112
145
|
return !props.iconOnly;
|
|
113
146
|
},
|
|
114
147
|
get children() {
|
|
115
|
-
return [_$ssr(_tmpl$, _$ssrAttribute("data-placeholder", selected() ? _$escape(undefined, true) : "true", false), _$escape(selected()?.label ?? props.placeholder ?? "")), _$ssr(_tmpl$2)];
|
|
148
|
+
return [_$ssr(_tmpl$, _$ssrAttribute("data-placeholder", selected() ? _$escape(undefined, true) : "true", false), _$escape(selected()?.label ?? props.placeholder ?? "")), _$ssr(_tmpl$2, _$ssrAttribute("class", props.loading ? "ti ti-loader-2 k2b-spin" : "ti ti-chevron-down", false))];
|
|
116
149
|
}
|
|
117
150
|
})];
|
|
118
151
|
}
|
|
@@ -122,7 +155,7 @@ export function SelectChip(props) {
|
|
|
122
155
|
get when() {
|
|
123
156
|
return props.name;
|
|
124
157
|
},
|
|
125
|
-
children: name => _$ssr(_tmpl$
|
|
158
|
+
children: name => _$ssr(_tmpl$4, _$ssrAttribute("name", _$escape(name(), true), false) + _$ssrAttribute("value", _$escape(value(), true), false))
|
|
126
159
|
})];
|
|
127
160
|
}
|
|
128
161
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["inputs/SelectChip.tsx"],"sourcesContent":["import { createMemo, type JSX, Show } from \"solid-js\";\nimport type { ButtonSize } from \"../actions/Button\";\nimport { Dropdown, type DropdownItem, type DropdownPosition } from \"../actions/Dropdown\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport type { MaybeAccessor, ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport { useSelectMessages } from \"./select-messages\";\n\nexport type SelectChipOption<T extends string | number = string> = {\n value: T;\n label: string;\n description?: string;\n icon?: string;\n image?: string;\n disabled?: boolean;\n};\n\nexport type SelectChipProps<T extends string | number = string> = ValueFieldProps<T> & {\n value: MaybeAccessor<T>;\n options: SelectChipOption<T>[];\n icon?: string;\n iconOnly?: boolean;\n size?: ButtonSize;\n placeholder?: string;\n position?: DropdownPosition;\n /** Exact menu width as a CSS length. Without it the menu sizes to its options, at least `10rem`. */\n menuWidth?: string;\n name?: string;\n};\n\nexport function SelectChip<T extends string | number = string>(props: SelectChipProps<T>): JSX.Element {\n const selectMessages = useSelectMessages();\n const meta = createFieldMeta(props.id);\n const value = () => resolveMaybeAccessor(props.value)!;\n const selected = () => props.options.find((option) => option.value === value());\n const triggerLabel = () => props[\"aria-label\"] ?? (typeof props.label === \"string\" ? props.label : selectMessages().chooseOption);\n const items = createMemo<DropdownItem[]>(() =>\n props.options.map((option) => ({\n action: () => commitFieldValue(props, option.value),\n checked: () => option.value === value(),\n choice: \"radio\" as const,\n class: \"k2b-select-chip__option\",\n description: option.description,\n disabled: option.disabled,\n icon: option.icon,\n image: option.image,\n label: option.label,\n })),\n );\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={props.error}\n meta={meta}\n required={props.required}\n disabled={
|
|
1
|
+
{"version":3,"names":[],"sources":["inputs/SelectChip.tsx"],"sourcesContent":["import { createComputed, createEffect, createMemo, type JSX, on, Show } from \"solid-js\";\nimport type { ButtonSize } from \"../actions/Button\";\nimport { Dropdown, type DropdownItem, type DropdownPosition } from \"../actions/Dropdown\";\nimport { createFieldMeta, Field, fieldControlAria } from \"../internal/field\";\nimport type { MaybeAccessor, ValueFieldProps } from \"./field-contract\";\nimport { commitFieldValue, resolveMaybeAccessor } from \"./field-contract\";\nimport { useSelectMessages } from \"./select-messages\";\n\nexport type SelectChipOption<T extends string | number = string> = {\n value: T;\n label: string;\n description?: string;\n icon?: string;\n image?: string;\n disabled?: boolean;\n};\n\nexport type SelectChipProps<T extends string | number = string> = ValueFieldProps<T> & {\n value: MaybeAccessor<T>;\n options: SelectChipOption<T>[];\n icon?: string;\n iconOnly?: boolean;\n size?: ButtonSize;\n placeholder?: string;\n position?: DropdownPosition;\n /** Exact menu width as a CSS length. Without it the menu sizes to its options, at least `10rem`. */\n menuWidth?: string;\n name?: string;\n /** Shows that a change from this chip is saving: the chip stays in place with\n * its size, cannot be opened, is marked busy, and shows a spinner where its\n * chevron (or, icon-only, its icon) is. */\n loading?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n};\n\nexport function SelectChip<T extends string | number = string>(props: SelectChipProps<T>): JSX.Element {\n const selectMessages = useSelectMessages();\n const meta = createFieldMeta(props.id);\n const value = () => resolveMaybeAccessor(props.value)!;\n const selected = () => props.options.find((option) => option.value === value());\n const disabled = createMemo(() => Boolean(props.disabled || props.loading));\n // A disabled button loses focus, so a chip disabled while a change saves (its own or one elsewhere) would leave\n // keyboard focus on the page. Focus returns to the chip once it is enabled again, unless it has moved on\n // meanwhile. The check runs as a computation, before the DOM update disables the button.\n let trigger: HTMLButtonElement | undefined;\n let refocus = false;\n createComputed(\n on(\n disabled,\n (isDisabled) => {\n if (isDisabled) refocus = trigger !== undefined && document.activeElement === trigger;\n },\n { defer: true },\n ),\n );\n createEffect(\n on(\n disabled,\n (isDisabled) => {\n if (isDisabled || !refocus) return;\n refocus = false;\n const active = document.activeElement;\n if (trigger?.isConnected && (active === null || active === document.body)) trigger.focus();\n },\n { defer: true },\n ),\n );\n const triggerLabel = () => props[\"aria-label\"] ?? (typeof props.label === \"string\" ? props.label : selectMessages().chooseOption);\n const items = createMemo<DropdownItem[]>(() =>\n props.options.map((option) => ({\n action: () => commitFieldValue(props, option.value),\n checked: () => option.value === value(),\n choice: \"radio\" as const,\n class: \"k2b-select-chip__option\",\n description: option.description,\n disabled: option.disabled,\n icon: option.icon,\n image: option.image,\n label: option.label,\n })),\n );\n\n return (\n <Field\n class={props.class}\n label={props.label}\n description={props.description}\n error={props.error}\n meta={meta}\n required={props.required}\n disabled={disabled()}\n >\n <Dropdown.Root\n // A controlled `open` cannot bypass a disabled or saving chip.\n open={props.open === undefined ? undefined : props.open && !disabled()}\n onOpenChange={props.onOpenChange}\n disabled={disabled()}\n position={props.position ?? \"bottom-right\"}\n /* Cloud opens this menu at `w-40`; the stylesheet keeps that as its floor. */\n width={props.menuWidth}\n menuClass=\"k2b-select-chip__menu\"\n label={triggerLabel()}\n items={items()}\n >\n <Dropdown.Trigger\n appearance={props.iconOnly ? \"button\" : \"plain\"}\n id={meta.controlId}\n ref={(element: HTMLButtonElement) => {\n trigger = element;\n }}\n class={props.iconOnly ? undefined : \"k2b-select-chip\"}\n disabled={disabled()}\n aria-busy={props.loading ? \"true\" : undefined}\n iconOnly={props.iconOnly}\n loading={props.iconOnly ? props.loading : undefined}\n label={triggerLabel()}\n size={props.iconOnly ? props.size : undefined}\n title={props.iconOnly ? triggerLabel() : undefined}\n {...fieldControlAria(meta, props)}\n >\n <Show\n when={selected()?.image}\n fallback={<Show when={selected()?.icon ?? props.icon}>{(icon) => <i class={icon()} aria-hidden=\"true\" />}</Show>}\n >\n {(image) => <img src={image()} alt=\"\" />}\n </Show>\n <Show when={!props.iconOnly}>\n <span data-placeholder={selected() ? undefined : \"true\"}>{selected()?.label ?? props.placeholder ?? \"\"}</span>\n {/* Both glyphs are one icon wide, so a saving chip keeps its size. */}\n <i class={props.loading ? \"ti ti-loader-2 k2b-spin\" : \"ti ti-chevron-down\"} aria-hidden=\"true\" />\n </Show>\n </Dropdown.Trigger>\n </Dropdown.Root>\n <Show when={props.name}>{(name) => <input type=\"hidden\" name={name()} value={value()} />}</Show>\n </Field>\n );\n}\n\nexport default SelectChip;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -403,6 +403,12 @@ function EmojiPickerPopover(props) {
|
|
|
403
403
|
/** An anchor pressed while the picker was open closes it; the same click must not open it again. */
|
|
404
404
|
let pressedAnchor;
|
|
405
405
|
const [shown, setShown] = createSignal();
|
|
406
|
+
let expandedAnchor;
|
|
407
|
+
let previousExpanded = null;
|
|
408
|
+
const restoreExpanded = () => {
|
|
409
|
+
if (previousExpanded === null) expandedAnchor?.removeAttribute("aria-expanded");else expandedAnchor?.setAttribute("aria-expanded", previousExpanded);
|
|
410
|
+
expandedAnchor = undefined;
|
|
411
|
+
};
|
|
406
412
|
const place = () => {
|
|
407
413
|
const anchor = shown();
|
|
408
414
|
if (!surface || !anchor) return;
|
|
@@ -438,6 +444,7 @@ function EmojiPickerPopover(props) {
|
|
|
438
444
|
if (previous?.isConnected) returnFocus(previous, ring);
|
|
439
445
|
};
|
|
440
446
|
const hide = () => {
|
|
447
|
+
restoreExpanded();
|
|
441
448
|
restoreFocus();
|
|
442
449
|
if (surface?.matches(":popover-open")) surface.hidePopover();
|
|
443
450
|
setShown(undefined);
|
|
@@ -474,6 +481,10 @@ function EmojiPickerPopover(props) {
|
|
|
474
481
|
previous = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
475
482
|
ring = ringOnReturn(previous ?? anchor);
|
|
476
483
|
}
|
|
484
|
+
restoreExpanded();
|
|
485
|
+
expandedAnchor = anchor;
|
|
486
|
+
previousExpanded = anchor.getAttribute("aria-expanded");
|
|
487
|
+
anchor.setAttribute("aria-expanded", "true");
|
|
477
488
|
setShown(anchor);
|
|
478
489
|
if (!surface.matches(":popover-open")) surface.showPopover();
|
|
479
490
|
place();
|
|
@@ -502,6 +513,7 @@ function EmojiPickerPopover(props) {
|
|
|
502
513
|
window.visualViewport?.removeEventListener("scroll", place);
|
|
503
514
|
document.removeEventListener("pointerdown", pressed, true);
|
|
504
515
|
document.removeEventListener("click", clicked, true);
|
|
516
|
+
restoreExpanded();
|
|
505
517
|
if (surface?.matches(":popover-open")) hide();
|
|
506
518
|
});
|
|
507
519
|
});
|