@inglorious/ui 9.9.0 → 9.10.1

package/types/data-display/lightbox.d.ts

@@ -0,0 +1,35 @@
+import type { TemplateResult, nothing } from "@inglorious/web"
+
+export interface LightboxImage {
+  src: string
+  /** Defaults to empty, for images the page describes already. */
+  alt?: string
+}
+
+export interface LightboxProps {
+  id?: string
+  /** URLs, or `{ src, alt }`. Renders nothing when empty. */
+  images?: (string | LightboxImage)[]
+  /** The image shown. Any integer: it wraps around. */
+  index?: number
+  isOpen?: boolean
+  /** The dialog's accessible name. Defaults to `"Photos"`. */
+  label?: string
+  /** Defaults to `"Close"`. */
+  closeLabel?: string
+  /** Defaults to `"Previous photo"`. */
+  previousLabel?: string
+  /** Defaults to `"Next photo"`. */
+  nextLabel?: string
+  className?: string
+  /** `1` for the next image, `-1` for the previous. Without it there is no navigation. */
+  onStep?: (step: 1 | -1) => void
+  /** Called by the close button, Esc and a press outside the image. */
+  onClose?: () => void
+}
+
+export type LightboxType = {
+  render(props: LightboxProps): TemplateResult | typeof nothing
+}
+
+export declare const Lightbox: LightboxType

package/types/feedback/confirm-dialog.d.ts

@@ -0,0 +1,34 @@
+import type { TemplateResult } from "@inglorious/web"
+
+import type { Renderable } from "../shared/renderable"
+
+export interface ConfirmDialogProps {
+  id?: string
+  isOpen?: boolean
+  /** The question, such as "Delete this event?". */
+  message?: TemplateResult | string | number
+  /** Anything more to show under the message, such as an error. */
+  children?: Renderable
+  confirmLabel: string
+  /** The confirm button's text while `isBusy`. Defaults to `confirmLabel`. */
+  busyLabel?: string
+  /** Defaults to `"Cancel"`. */
+  cancelLabel?: string
+  /** The close button's accessible name. Defaults to `"Close"`. */
+  closeLabel?: string
+  /** `"danger"` (default) for an action that cannot be undone, `"primary"` otherwise. */
+  tone?: "danger" | "primary"
+  /** The action is running: nothing can be pressed and the sheet stays open. */
+  isBusy?: boolean
+  isDisabled?: boolean
+  className?: string
+  onConfirm?: () => void
+  /** Called by the cancel button, Esc and the backdrop. */
+  onCancel?: () => void
+}
+
+export type ConfirmDialogType = {
+  render(props: ConfirmDialogProps): TemplateResult
+}
+
+export declare const ConfirmDialog: ConfirmDialogType

package/types/feedback/crop-dialog.d.ts

@@ -0,0 +1,35 @@
+import type { Api, TemplateResult } from "@inglorious/web"
+
+import type { CropRect } from "../controls/image-cropper"
+
+export interface CropDialogProps {
+  id?: string
+  isOpen?: boolean
+  /** The id of the ImageCropper entity to show. */
+  cropperId: string
+  title?: TemplateResult | string
+  description?: TemplateResult | string
+  /** Defaults to `"Apply"`. */
+  applyLabel?: string
+  /** The apply button's text while `isSaving`. Defaults to `"Saving…"`. */
+  savingLabel?: string
+  /** Defaults to `"Cancel"`. */
+  cancelLabel?: string
+  /** The close button's accessible name. Defaults to `"Close"`. */
+  closeLabel?: string
+  /** Shown when the cropper cannot load its image. */
+  loadErrorText?: string
+  /** An error of the caller's, such as a failed upload. Wins over `loadErrorText`. */
+  error?: TemplateResult | string | null
+  isSaving?: boolean
+  className?: string
+  onCancel?: () => void
+  /** Receives the cropper's `rect`. */
+  onApply?: (rect: CropRect) => void
+}
+
+export type CropDialogType = {
+  render(props: CropDialogProps, api: Api): TemplateResult
+}
+
+export declare const CropDialog: CropDialogType

package/types/feedback/load-status.d.ts

@@ -0,0 +1,22 @@
+import type { Renderable } from "../shared/renderable"
+
+export interface LoadStatusProps {
+  isError?: boolean
+  error?: Renderable
+  isLoading?: boolean
+  /** Replaces the circular progress, such as with the app's own animation. */
+  loader?: Renderable
+  /** The progress indicator's accessible name. Defaults to `"Loading…"`. */
+  loadingLabel?: string
+  isEmpty?: boolean
+  emptyText?: Renderable
+  /** What to render when there is no status to show. Runs only then, so it can read data still loading. */
+  content?: () => Renderable
+  className?: string
+}
+
+export type LoadStatusType = {
+  render(props: LoadStatusProps): Renderable
+}
+
+export declare const LoadStatus: LoadStatusType

package/types/index.d.ts

@@ -1,6 +1,7 @@
 export { Button } from "./controls/button"
 export { ButtonGroup } from "./controls/button-group"
 export { Checkbox } from "./controls/checkbox"
+export { ChipPicker } from "./controls/chip-picker"
 export { Fab } from "./controls/fab"
 export { FileUpload } from "./controls/file-upload"
 export { IconButton } from "./controls/icon-button"
@@ -18,6 +19,7 @@ export { BeforeAfter } from "./data-display/before-after"
 export { Carousel } from "./data-display/carousel"
 export { Chat } from "./data-display/chat"
 export { Chip } from "./data-display/chip"
+export { Lightbox } from "./data-display/lightbox"
 export { DataGrid } from "./data-display/data-grid"
 export { Divider } from "./data-display/divider"
 export { Icon } from "./data-display/icon"
@@ -28,7 +30,10 @@ export { Typography } from "./data-display/typography"
 export { VirtualList } from "./data-display/virtual-list"
 export { Alert } from "./feedback/alert"
 export { Backdrop } from "./feedback/backdrop"
+export { ConfirmDialog } from "./feedback/confirm-dialog"
+export { CropDialog } from "./feedback/crop-dialog"
 export { Dialog } from "./feedback/dialog"
+export { LoadStatus } from "./feedback/load-status"
 export { Progress } from "./feedback/progress"
 export { Skeleton } from "./feedback/skeleton"
 export { Snackbar } from "./feedback/snackbar"
@@ -53,6 +58,7 @@ export { Paper } from "./surfaces/paper"
 export type { ButtonProps, ButtonType } from "./controls/button"
 export type { ButtonGroupProps, ButtonGroupType } from "./controls/button-group"
 export type { CheckboxProps, CheckboxType } from "./controls/checkbox"
+export type { ChipPickerProps, ChipPickerType } from "./controls/chip-picker"
 export type {
   ComboboxProps,
   ComboboxType,
@@ -119,6 +125,11 @@ export type { PaperProps, PaperType } from "./surfaces/paper"
 export type { AvatarProps, AvatarType } from "./data-display/avatar"
 export type { BadgeProps, BadgeType } from "./data-display/badge"
 export type { ChipProps, ChipType } from "./data-display/chip"
+export type {
+  LightboxImage,
+  LightboxProps,
+  LightboxType,
+} from "./data-display/lightbox"
 export type {
   DataGridProps,
   DataGridType,
@@ -148,7 +159,13 @@ export type {
 } from "./data-display/typography"
 export type { AlertProps, AlertType } from "./feedback/alert"
 export type { BackdropProps, BackdropType } from "./feedback/backdrop"
+export type {
+  ConfirmDialogProps,
+  ConfirmDialogType,
+} from "./feedback/confirm-dialog"
+export type { CropDialogProps, CropDialogType } from "./feedback/crop-dialog"
 export type { DialogProps, DialogType } from "./feedback/dialog"
+export type { LoadStatusProps, LoadStatusType } from "./feedback/load-status"
 export type { ProgressProps, ProgressType } from "./feedback/progress"
 export type { SkeletonProps, SkeletonType } from "./feedback/skeleton"
 export type { SnackbarProps, SnackbarType } from "./feedback/snackbar"