@inglorious/ui 9.8.2 → 9.10.0

package/src/data-display/lightbox/style.css

@@ -0,0 +1,97 @@
+.iw-lightbox {
+  width: 100vw;
+  max-width: none;
+  height: 100dvh;
+  max-height: none;
+  margin: 0;
+  padding: var(--iw-space-4);
+  border: none;
+  background: #0c0c0c;
+  color: #fff;
+
+  &[open] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &::backdrop {
+    background: #0c0c0c;
+  }
+
+  .iw-button.iw-lightbox-close {
+    position: absolute;
+    top: calc(var(--iw-space-3) + var(--safe-area-top, 0px));
+    inset-inline-end: var(--iw-space-3);
+    z-index: 1;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: color-mix(in srgb, #fff 14%, transparent);
+    color: #fff;
+
+    &:hover {
+      background: color-mix(in srgb, #fff 24%, transparent);
+    }
+  }
+
+  .iw-button.iw-lightbox-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 1;
+    width: 2.5rem;
+    height: 2.5rem;
+    background: color-mix(in srgb, #000 45%, transparent);
+    color: #fff;
+
+    &:hover {
+      background: color-mix(in srgb, #000 62%, transparent);
+    }
+
+    &:dir(rtl) .iw-icon {
+      scale: -1 1;
+    }
+  }
+}
+
+.iw-lightbox-stage {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: min(100%, 56rem);
+  height: min(100%, 90dvh);
+  user-select: none;
+  touch-action: pan-y;
+}
+
+.iw-lightbox-image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--iw-radius-xl);
+  pointer-events: none;
+}
+
+.iw-lightbox-previous {
+  inset-inline-start: var(--iw-space-2);
+}
+
+.iw-lightbox-next {
+  inset-inline-end: var(--iw-space-2);
+}
+
+.iw-lightbox-counter {
+  position: absolute;
+  inset-inline-end: var(--iw-space-3);
+  bottom: var(--iw-space-2);
+  padding: 0.125rem 0.5rem;
+  border-radius: 999px;
+  background: color-mix(in srgb, #000 50%, transparent);
+  color: #fff;
+  font-size: var(--iw-font-size-xs);
+  font-variant-numeric: tabular-nums;
+}

package/src/data-display/lightbox/template.js

@@ -0,0 +1,153 @@
+/**
+ * @typedef {import('../../../types/data-display/lightbox').LightboxProps} LightboxProps
+ * @typedef {import('../../../types/data-display/lightbox').LightboxImage} LightboxImage
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html, nothing } from "@inglorious/web"
+import { ref } from "@inglorious/web/directives/ref"
+import { when } from "@inglorious/web/directives/when"
+
+import { IconButton } from "../../controls/icon-button/index.js"
+import { chevronLeft, chevronRight, close } from "../../shared/icons.js"
+import { syncDialog } from "../../shared/top-layer.js"
+import { Icon } from "../icon/index.js"
+
+const SWIPE_PX = 40
+const NEXT = 1
+const PREVIOUS = -1
+
+/**
+ * Where each lightbox's current swipe started.
+ * @type {WeakMap<HTMLDialogElement, number>}
+ */
+const swipeStarts = new WeakMap()
+
+/**
+ * Renders images full screen in a modal `<dialog>`, one at a time. With more
+ * than one, the arrows, the arrow keys and a horizontal swipe step through
+ * them, following the writing direction. Esc, the close button and a press
+ * outside the image close it.
+ * @param {LightboxProps} props
+ * @returns {TemplateResult | typeof nothing}
+ */
+export function render(props) {
+  const {
+    id,
+    images = [],
+    index = 0,
+    isOpen = false,
+    label = "Photos",
+    closeLabel = "Close",
+    previousLabel = "Previous photo",
+    nextLabel = "Next photo",
+    className = "",
+    onStep,
+    onClose,
+  } = props
+
+  const total = images.length
+  if (!total) return nothing
+
+  const current = ((index % total) + total) % total
+  const image = toImage(images[current])
+  const isNavigable = total > 1 && Boolean(onStep)
+
+  return html`<dialog
+    id=${id || nothing}
+    class=${["iw-lightbox", className].filter(Boolean).join(" ")}
+    aria-label=${label}
+    @click=${(event) => {
+      if (event.target === event.currentTarget) onClose?.()
+    }}
+    @cancel=${(event) => {
+      if (!onClose) event.preventDefault()
+    }}
+    @keydown=${(event) => {
+      if (!isNavigable) return
+      const step = arrowStep(event)
+      if (!step) return
+      event.preventDefault()
+      onStep(step)
+    }}
+    @pointerdown=${(event) => {
+      swipeStarts.set(event.currentTarget, event.clientX)
+    }}
+    @pointerup=${(event) => {
+      const startX = swipeStarts.get(event.currentTarget)
+      swipeStarts.delete(event.currentTarget)
+      if (!isNavigable || startX == null) return
+      const distance = event.clientX - startX
+      if (Math.abs(distance) < SWIPE_PX) return
+      const towardsEnd = isRtl(event.currentTarget)
+        ? distance > 0
+        : distance < 0
+      onStep(towardsEnd ? NEXT : PREVIOUS)
+    }}
+    @pointercancel=${(event) => swipeStarts.delete(event.currentTarget)}
+    ${ref((element) => syncDialog(element, { isOpen, onClose }))}
+  >
+    ${when(onClose, () =>
+      IconButton.render({
+        icon: Icon.render({ icon: close, size: "lg" }),
+        variant: "ghost",
+        shape: "round",
+        ariaLabel: closeLabel,
+        className: "iw-lightbox-close",
+        onClick: onClose,
+      }),
+    )}
+    <div class="iw-lightbox-stage">
+      <img
+        class="iw-lightbox-image"
+        src=${image.src}
+        alt=${image.alt ?? ""}
+        draggable="false"
+      />
+      ${when(
+        isNavigable,
+        () => html`
+          ${IconButton.render({
+            icon: Icon.render({ icon: chevronLeft, size: "lg" }),
+            variant: "ghost",
+            shape: "round",
+            ariaLabel: previousLabel,
+            className: "iw-lightbox-nav iw-lightbox-previous",
+            onClick: () => onStep(PREVIOUS),
+          })}
+          ${IconButton.render({
+            icon: Icon.render({ icon: chevronRight, size: "lg" }),
+            variant: "ghost",
+            shape: "round",
+            ariaLabel: nextLabel,
+            className: "iw-lightbox-nav iw-lightbox-next",
+            onClick: () => onStep(NEXT),
+          })}
+          <div class="iw-lightbox-counter" aria-hidden="true">
+            ${current + 1}/${total}
+          </div>
+        `,
+      )}
+    </div>
+  </dialog>`
+}
+
+/**
+ * @param {string | LightboxImage} image
+ * @returns {LightboxImage}
+ */
+function toImage(image) {
+  return typeof image === "string" ? { src: image } : image
+}
+
+function arrowStep(event) {
+  const towardsEnd = isRtl(event.currentTarget) ? "ArrowLeft" : "ArrowRight"
+  const towardsStart = isRtl(event.currentTarget) ? "ArrowRight" : "ArrowLeft"
+  if (event.key === towardsEnd) return NEXT
+  if (event.key === towardsStart) return PREVIOUS
+  return 0
+}
+
+function isRtl(element) {
+  return getComputedStyle(element).direction === "rtl"
+}

package/src/feedback/confirm-dialog/confirm-dialog.stories.js

@@ -0,0 +1,33 @@
+import { createRender } from "../../stories/notify-story.js"
+import { ConfirmDialog } from "."
+
+export default {
+  title: "Feedback/ConfirmDialog",
+  tags: ["autodocs"],
+  render: createRender(ConfirmDialog),
+  argTypes: {
+    tone: { control: "select", options: ["danger", "primary"] },
+    isBusy: { control: "boolean" },
+    onConfirm: { action: "onConfirm" },
+    onCancel: { action: "onCancel" },
+  },
+}
+
+export const Danger = {
+  args: {
+    isOpen: true,
+    message: "Delete this event? This cannot be undone.",
+    confirmLabel: "Delete",
+    busyLabel: "Deleting…",
+    cancelLabel: "Keep it",
+  },
+}
+
+export const Primary = {
+  args: {
+    isOpen: true,
+    tone: "primary",
+    message: "Publish this event now?",
+    confirmLabel: "Publish",
+  },
+}

package/src/feedback/confirm-dialog/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const ConfirmDialog = { ...renderers }

package/src/feedback/confirm-dialog/style.css

@@ -0,0 +1,16 @@
+.iw-confirm-dialog-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--iw-space-2);
+  width: 100%;
+
+  > * {
+    flex: 1;
+  }
+}
+
+@media (min-width: 48rem) {
+  .iw-confirm-dialog-actions {
+    flex-direction: row;
+  }
+}

package/src/feedback/confirm-dialog/template.js

@@ -0,0 +1,70 @@
+/**
+ * @typedef {import('../../../types/feedback/confirm-dialog').ConfirmDialogProps} ConfirmDialogProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html } from "@inglorious/web"
+
+import { Button } from "../../controls/button/index.js"
+import { Dialog } from "../dialog/index.js"
+
+/**
+ * Renders a sheet asking to confirm an action, with the confirm button first.
+ * While `isBusy` it cannot be dismissed, and the confirm button shows
+ * `busyLabel`.
+ * @param {ConfirmDialogProps} props
+ * @returns {TemplateResult}
+ */
+export function render(props) {
+  const {
+    id,
+    isOpen = false,
+    message,
+    children,
+    confirmLabel,
+    busyLabel = confirmLabel,
+    cancelLabel = "Cancel",
+    closeLabel,
+    tone = "danger",
+    isBusy = false,
+    isDisabled = false,
+    className = "",
+    onConfirm,
+    onCancel,
+  } = props
+
+  const isDanger = tone === "danger"
+
+  return Dialog.render({
+    id,
+    isOpen,
+    variant: "sheet",
+    size: "sm",
+    description: message,
+    children,
+    className: ["iw-confirm-dialog", className].filter(Boolean).join(" "),
+    closeLabel,
+    actions: html`<div class="iw-confirm-dialog-actions">
+      ${Button.render({
+        children: isBusy ? busyLabel : confirmLabel,
+        color: isDanger ? "error" : "primary",
+        variant: isDanger ? "outline" : "default",
+        shape: "pill",
+        size: "md",
+        isDisabled: isBusy || isDisabled,
+        onClick: () => {
+          if (!isBusy && !isDisabled) onConfirm?.()
+        },
+      })}
+      ${Button.render({
+        children: cancelLabel,
+        variant: "outline",
+        shape: "pill",
+        size: "md",
+        isDisabled: isBusy,
+        onClick: onCancel,
+      })}
+    </div>`,
+    onClose: isBusy ? undefined : onCancel,
+  })
+}

package/src/feedback/crop-dialog/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const CropDialog = { ...renderers }

package/src/feedback/crop-dialog/style.css

@@ -0,0 +1,43 @@
+.iw-dialog.iw-crop-dialog {
+  width: min(48rem, calc(100vw - 2 * var(--iw-space-4)));
+  min-width: 0;
+  max-width: none;
+  max-height: calc(
+    100dvh - 2 * var(--iw-space-4) - var(--safe-area-top, 0px) -
+      var(--safe-area-bottom, 0px)
+  );
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.iw-crop-dialog-viewport {
+  width: 100%;
+  --iw-image-cropper-max-height: 55dvh;
+}
+
+@media (max-height: 32rem) {
+  .iw-crop-dialog-viewport {
+    --iw-image-cropper-max-height: 35dvh;
+  }
+}
+
+.iw-crop-dialog-error {
+  margin: var(--iw-space-3) 0 0;
+}
+
+.iw-crop-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: var(--iw-space-2);
+  width: 100%;
+
+  .iw-button {
+    flex: 0 1 auto;
+    min-width: 0;
+    padding-inline: var(--iw-space-3);
+    font-size: var(--iw-font-size-sm);
+    white-space: nowrap;
+  }
+}

package/src/feedback/crop-dialog/template.js

@@ -0,0 +1,82 @@
+/**
+ * @typedef {import('../../../types/feedback/crop-dialog').CropDialogProps} CropDialogProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ * @typedef {import('@inglorious/web').Api} Api
+ */
+
+import { html } from "@inglorious/web"
+import { when } from "@inglorious/web/directives/when"
+
+import { Button } from "../../controls/button/index.js"
+import { Alert } from "../alert/index.js"
+import { Dialog } from "../dialog/index.js"
+
+/**
+ * Renders an ImageCropper entity in a dialog, with cancel and apply buttons.
+ * Apply stays disabled until the image has loaded, and passes the cropper's
+ * `rect`.
+ * @param {CropDialogProps} props
+ * @param {Api} api
+ * @returns {TemplateResult}
+ */
+export function render(props, api) {
+  const {
+    id,
+    isOpen = false,
+    cropperId,
+    title,
+    description,
+    applyLabel = "Apply",
+    savingLabel = "Saving…",
+    cancelLabel = "Cancel",
+    closeLabel,
+    loadErrorText = "The image could not be loaded.",
+    error,
+    isSaving = false,
+    className = "",
+    onCancel,
+    onApply,
+  } = props
+
+  const cropper = api.getEntity(cropperId)
+  const isLoaded = Boolean(cropper?.naturalWidth)
+  const shownError = error || (cropper?.hasError ? loadErrorText : null)
+
+  return Dialog.render({
+    id,
+    isOpen,
+    title,
+    description,
+    closeLabel,
+    className: ["iw-crop-dialog", className].filter(Boolean).join(" "),
+    onClose: onCancel,
+    children: html`
+      <div class="iw-crop-dialog-viewport">${api.render(cropperId)}</div>
+      ${when(shownError, () =>
+        Alert.render({
+          severity: "error",
+          className: "iw-crop-dialog-error",
+          children: shownError,
+        }),
+      )}
+    `,
+    actions: html`<div class="iw-crop-dialog-actions">
+      ${Button.render({
+        children: cancelLabel,
+        variant: "ghost",
+        shape: "pill",
+        size: "sm",
+        isDisabled: isSaving,
+        onClick: onCancel,
+      })}
+      ${Button.render({
+        children: isSaving ? savingLabel : applyLabel,
+        color: "primary",
+        shape: "pill",
+        size: "sm",
+        isDisabled: isSaving || !isLoaded,
+        onClick: () => onApply?.(cropper.rect),
+      })}
+    </div>`,
+  })
+}

package/src/feedback/dialog/style.css

@@ -43,8 +43,9 @@
   font-size: 1.1rem;
 }
 
-.iw-dialog-close {
+.iw-dialog-header .iw-dialog-close {
   flex-shrink: 0;
+  margin-inline-start: auto;
 }
 
 .iw-dialog-description {

package/src/feedback/dialog/template.js

@@ -53,6 +53,9 @@ export function render(props) {
 
   const titleId = id && title ? `${id}-title` : ""
   const descriptionId = id && description ? `${id}-description` : ""
+  // Without a title, the description is what the dialog asks: its name.
+  const labelId = titleId || descriptionId
+  const describedById = titleId ? descriptionId : ""
   const onBackdrop = onBackdropClick ?? onClose
 
   return html`<dialog
@@ -63,8 +66,8 @@ export function render(props) {
       "iw-dialog-sheet": variant === "sheet",
       ...extraClasses,
     })}
-    aria-labelledby=${titleId || nothing}
-    aria-describedby=${descriptionId || nothing}
+    aria-labelledby=${labelId || nothing}
+    aria-describedby=${describedById || nothing}
     @pointerdown=${(event) => {
       backdropPresses.set(
         event.currentTarget,

package/src/feedback/feedback.css

@@ -1,6 +1,9 @@
 @import "./alert/style.css";
 @import "./backdrop/style.css";
+@import "./confirm-dialog/style.css";
+@import "./crop-dialog/style.css";
 @import "./dialog/style.css";
+@import "./load-status/style.css";
 @import "./progress/style.css";
 @import "./skeleton/style.css";
 @import "./snackbar/style.css";

package/src/feedback/load-status/index.js

@@ -0,0 +1,3 @@
+import * as renderers from "./template.js"
+
+export const LoadStatus = { ...renderers }

package/src/feedback/load-status/load-status.stories.js

@@ -0,0 +1,16 @@
+import { createRender } from "../../stories/notify-story.js"
+import { LoadStatus } from "."
+
+export default {
+  title: "Feedback/LoadStatus",
+  tags: ["autodocs"],
+  render: createRender(LoadStatus),
+}
+
+export const Loading = { args: { isLoading: true } }
+
+export const Empty = { args: { isEmpty: true, emptyText: "No events yet." } }
+
+export const Error = {
+  args: { isError: true, error: "The events could not be loaded." },
+}

package/src/feedback/load-status/style.css

@@ -0,0 +1,10 @@
+.iw-load-status {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  grid-column: 1 / -1;
+  padding: var(--iw-space-10) 0;
+  text-align: center;
+  font-size: var(--iw-font-size-sm);
+  color: var(--iw-color-text-muted, var(--iw-color-text));
+}

package/src/feedback/load-status/template.js

@@ -0,0 +1,43 @@
+/**
+ * @typedef {import('../../../types/feedback/load-status').LoadStatusProps} LoadStatusProps
+ * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
+ */
+
+import { html, nothing } from "@inglorious/web"
+
+import { Progress } from "../progress/index.js"
+
+/**
+ * Renders where a load stands instead of what it loads: an error, a loader or
+ * an empty message, in that order of precedence. Otherwise it renders
+ * `content`, a function so that it runs only once there is something to show.
+ * @param {LoadStatusProps} props
+ * @returns {import('../../../types/shared/renderable').Renderable}
+ */
+export function render(props) {
+  const {
+    isError = false,
+    error,
+    isLoading = false,
+    loader,
+    loadingLabel = "Loading…",
+    isEmpty = false,
+    emptyText,
+    content,
+    className = "",
+  } = props
+
+  const classes = ["iw-load-status", className].filter(Boolean).join(" ")
+
+  if (isError) return html`<div class=${classes} role="alert">${error}</div>`
+  if (isLoading) {
+    return html`<div class=${classes} role="status">
+      ${
+        loader ??
+        Progress.render({ variant: "circular", ariaLabel: loadingLabel })
+      }
+    </div>`
+  }
+  if (isEmpty) return html`<div class=${classes}>${emptyText}</div>`
+  return content ? content() : nothing
+}

package/src/index.js

@@ -1,6 +1,7 @@
 export { Button } from "./controls/button/index.js"
 export { ButtonGroup } from "./controls/button-group/index.js"
 export { Checkbox } from "./controls/checkbox/index.js"
+export { ChipPicker } from "./controls/chip-picker/index.js"
 export { Fab } from "./controls/fab/index.js"
 export { FileUpload } from "./controls/file-upload/index.js"
 export { IconButton } from "./controls/icon-button/index.js"
@@ -25,6 +26,7 @@ export { Chip } from "./data-display/chip/index.js"
 export { DataGrid } from "./data-display/data-grid/index.js"
 export { Divider } from "./data-display/divider/index.js"
 export { Icon } from "./data-display/icon/index.js"
+export { Lightbox } from "./data-display/lightbox/index.js"
 export { List } from "./data-display/list/index.js"
 export { Table } from "./data-display/table/index.js"
 export { Tooltip } from "./data-display/tooltip/index.js"
@@ -32,7 +34,10 @@ export { Typography } from "./data-display/typography/index.js"
 export { VirtualList } from "./data-display/virtual-list/index.js"
 export { Alert } from "./feedback/alert/index.js"
 export { Backdrop } from "./feedback/backdrop/index.js"
+export { ConfirmDialog } from "./feedback/confirm-dialog/index.js"
+export { CropDialog } from "./feedback/crop-dialog/index.js"
 export { Dialog } from "./feedback/dialog/index.js"
+export { LoadStatus } from "./feedback/load-status/index.js"
 export { Progress } from "./feedback/progress/index.js"
 export { Skeleton } from "./feedback/skeleton/index.js"
 export { Snackbar } from "./feedback/snackbar/index.js"

package/src/shared/icons.js

@@ -9,3 +9,15 @@ export const leftPanelClose = {
   height: 24,
   body: '<path fill="currentColor" d="M16.5 16V8l-4 4zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm3-2V5H5v14zm2 0h9V5h-9zm-2 0H5z"/>',
 }
+
+export const chevronLeft = {
+  width: 24,
+  height: 24,
+  body: '<path fill="currentColor" d="m14 18l-6-6l6-6l1.4 1.4l-4.6 4.6l4.6 4.6z"/>',
+}
+
+export const chevronRight = {
+  width: 24,
+  height: 24,
+  body: '<path fill="currentColor" d="M12.6 12L8 7.4L9.4 6l6 6l-6 6L8 16.6z"/>',
+}