@nxgt/material 3.91.0 → 3.93.0

package/dist/lib/components/ui/widgets/event-calendar/partials/calendar-badge.d.ts

@@ -0,0 +1,16 @@
+import { CalendarEventBadge } from '../types.js';
+/**
+ * A day's or a week's badge: a small soft pill, or with `dot` (where the room
+ * is short, such as a phone's column) a short tone bar whose label is its tooltip
+ * and, hidden visually, its text. The container that names it (a button, a
+ * cell) holds the label in its own name.
+ */
+export declare function CalendarBadge({ badge, slot, dot, wrap, className, }: {
+    badge: CalendarEventBadge;
+    /** The `data-slot` of the pill; the dot adds `-dot`. */
+    slot: string;
+    dot?: boolean;
+    /** The label may take two lines instead of one clipped (a narrow corner). */
+    wrap?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/month-day-cell.d.ts

@@ -1,5 +1,6 @@
 import { MutableRefObject } from 'react';
-export declare function MonthDayCell({ day, month, draft, draggedRef, }: {
+import { CalendarEventBadge } from '../types.js';
+export declare function MonthDayCell({ day, month, draft, draggedRef, weekBadge, }: {
     day: Date;
     month: Date;
     draft: {
@@ -7,4 +8,6 @@ export declare function MonthDayCell({ day, month, draft, draggedRef, }: {
         to: Date;
     } | null;
     draggedRef: MutableRefObject<boolean>;
+    /** The week's badge, given to the first cell of the row. */
+    weekBadge?: CalendarEventBadge;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/month-day-parts.d.ts

@@ -1,4 +1,4 @@
-import { CalendarEvent } from '../types.js';
+import { CalendarEvent, CalendarEventBadge } from '../types.js';
 /** The day number in a month cell: a filled disc today, a ring on the phone's chosen day. */
 export declare function MonthDayNumber({ day, isToday, isCursor, outside, }: {
     day: Date;
@@ -10,3 +10,14 @@ export declare function MonthDayNumber({ day, isToday, isCursor, outside, }: {
 export declare function MonthDayDots({ items }: {
     items: CalendarEvent[];
 }): import("react").JSX.Element;
+/**
+ * The day number with the day's badge: a pill beside it, or on a phone (where
+ * the cell has no room) a tone dot in the cell's top corner.
+ */
+export declare function MonthDayTop({ badge, ...number }: React.ComponentProps<typeof MonthDayNumber> & {
+    badge?: CalendarEventBadge;
+}): import("react").JSX.Element;
+/** The week's badge on the first cell of a row: a pill along its foot, or a dot on a phone. */
+export declare function MonthWeekBadge({ badge }: {
+    badge: CalendarEventBadge;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/resource-header.d.ts

@@ -5,7 +5,8 @@ import { ResourceColumn } from '../event-calendar.resources.js';
  * column, its label and description. It stays above the hours while they
  * scroll, and the gutter's corner names the zone's offset when there is one.
  */
-export declare function ResourceHeader({ columns, zoneLabel, zone, }: {
+export declare function ResourceHeader({ day, columns, zoneLabel, zone, }: {
+    day: Date;
     columns: ResourceColumn[];
     zoneLabel?: ReactNode;
     zone?: string;

package/dist/lib/components/ui/widgets/event-calendar/partials/span-event.d.ts

@@ -1,4 +1,6 @@
 import { SpanSegment } from '../event-calendar.spans.js';
-export declare function SpanEvent({ segment }: {
+export declare function SpanEvent({ segment, rowOffset, }: {
     segment: SpanSegment;
+    /** Rows above it taken by the backdrop spans of the all-day strip. */
+    rowOffset?: number;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/time-grid-header-day.d.ts

@@ -1,9 +1,6 @@
-/**
- * One day of the grid's header: the weekday and a large date, today's filled.
- * With `canOpen` (a week that offers the day view) it is a button that opens
- * that day.
- */
-export declare function HeaderDay({ day, canOpen }: {
+export declare function HeaderDay({ day, canOpen, dot, }: {
     day: Date;
     canOpen: boolean;
+    /** The day's badge is a tone dot, for a column too narrow for its pill. */
+    dot?: boolean;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/partials/zone-corner.d.ts

@@ -1,10 +1,18 @@
 import { ReactNode } from 'react';
+import { CalendarEventBadge } from '../types.js';
 /**
  * The gutter's corner above the hours: it names the zone's offset (`UTC+1`)
- * when the calendar has a `timeZone`, and stays an empty cell otherwise.
+ * when the calendar has a `timeZone`, carries the week's badge, and stays an
+ * empty cell otherwise. The badges are tone dots where the gutter is narrow
+ * (a phone).
  */
-export declare function ZoneCorner({ zoneLabel, zone, className, }: {
+export declare function ZoneCorner({ zoneLabel, zone, badges, className, }: {
     zoneLabel?: ReactNode;
     zone?: string;
+    /** The week's badge, and in a day view with resources the day's. */
+    badges?: {
+        badge: CalendarEventBadge;
+        slot: string;
+    }[];
     className?: string;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/widgets/event-calendar/template.types.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
-import { EventCalendarProps } from './types.js';
+import { Tone } from '../../tones.js';
+import { CalendarEventStatus, EventCalendarProps } from './types.js';
 /** ISO weekday: 1 is Monday, 7 is Sunday. */
 export type EventCalendarWeekday = 1 | 2 | 3 | 4 | 5 | 6 | 7;
 /**
@@ -15,6 +16,10 @@ export type EventCalendarTemplateEvent = {
     /** The alternating week it belongs to (an `EventCalendarLane` id); none: every week. */
     lane?: string;
     color?: string;
+    /** A tone the event is drawn in: `color` wins over it. */
+    tone?: Tone;
+    /** `'cancelled'`: struck through, muted and named so. */
+    status?: CalendarEventStatus;
     description?: string;
     disabled?: boolean;
 };
@@ -41,7 +46,7 @@ export type EventCalendarTemplateChange = {
  * slots and changes are keyed by weekday and time. The month, day and agenda
  * views do not apply: `view` is `week` (the default) or `workweek`.
  */
-export type EventCalendarTemplateProps = Pick<EventCalendarProps, 'disabled' | 'className' | 'toolbar' | 'searchable' | 'density' | 'eventVariant' | 'startHour' | 'endHour' | 'hourHeight' | 'slotDurationMinutes' | 'scrollToHour' | 'eventPreview' | 'previewFields'> & {
+export type EventCalendarTemplateProps = Pick<EventCalendarProps, 'disabled' | 'readOnlyEvents' | 'className' | 'toolbar' | 'searchable' | 'density' | 'eventVariant' | 'startHour' | 'endHour' | 'hourHeight' | 'slotDurationMinutes' | 'scrollToHour' | 'eventPreview' | 'previewFields'> & {
     mode: 'template';
     events?: EventCalendarTemplateEvent[];
     defaultEvents?: EventCalendarTemplateEvent[];

package/dist/lib/components/ui/widgets/event-calendar/types.d.ts

@@ -2,7 +2,10 @@ import { ReactNode } from 'react';
 import { EventChipBadge } from '../../display/event-chip/event-chip.js';
 import { EventChipVariant } from '../../display/event-chip/event-chip.classes.js';
 import { Tone } from '../../tones.js';
+import { EventCalendarDayMarksProps } from './backdrop.types.js';
 export type EventCalendarView = 'month' | 'week' | 'workweek' | 'day' | 'agenda';
+/** Whether an event takes place: `cancelled` is drawn struck through and muted, and named so. */
+export type CalendarEventStatus = 'scheduled' | 'cancelled';
 export type CalendarEvent = {
     id: string;
     title: string;
@@ -25,6 +28,19 @@ export type CalendarEvent = {
      * box is too small it is hidden visually and still read.
      */
     badge?: CalendarEventBadge;
+    /**
+     * Further badges, drawn after `badge` in the same places (a status, then a
+     * priority and a progress count). Each is part of the accessible name and
+     * becomes a tone dot where the box is narrow or short.
+     */
+    badges?: CalendarEventBadge[];
+    /**
+     * A tone of the library (`'success'`, or one an app declared) the event is
+     * drawn in. Colour precedence: `color`, then `tone`, then the resource's.
+     */
+    tone?: Tone;
+    /** `'cancelled'` strikes the title, mutes the chip and adds "Cancelled" to its name; it stays draggable. */
+    status?: CalendarEventStatus;
 };
 export type CalendarEventBadge = EventChipBadge;
 /** A column of the day view: a room, a person, a team. */
@@ -53,18 +69,7 @@ export type EventCalendarSlot = {
 };
 /** `comfortable` (the default) or `compact`: shorter hours and month cells. */
 export type EventCalendarDensity = 'comfortable' | 'compact';
-export type EventCalendarChromeState = {
-    focusedEventId: string | null;
-    query: string;
-    /** The way the last move went (-1 back, 1 forward): the view slides from it. */
-    direction: -1 | 0 | 1;
-    /** A view was picked in the switcher: `phoneView` no longer applies. */
-    viewPicked: boolean;
-    /** The keyboard moved the cursor: its day takes the focus once rendered. */
-    dayFocus: boolean;
-    /** The resource the phone's switcher shows; `null` is the first. */
-    resourceId: string | null;
-};
+export type { EventCalendarChromeState } from './chrome.types.js';
 /** A field of the event preview popover. */
 export type EventCalendarPreviewField = 'title' | 'color' | 'description';
 export type EventCalendarRenderEvent = (event: CalendarEvent) => ReactNode;
@@ -107,6 +112,13 @@ export type EventCalendarProps = {
     hourHeight?: number;
     slotDurationMinutes?: number;
     disabled?: boolean;
+    /**
+     * No event can be dragged, resized, moved by key, edited or deleted, yet
+     * each stays focusable, clickable and at full strength; `onSlotClick` still
+     * fires. Not `disabled` (the whole calendar) nor `CalendarEvent.disabled`
+     * (dims one event, swallows its clicks). Default `false`.
+     */
+    readOnlyEvents?: boolean;
     className?: string;
     renderEvent?: EventCalendarRenderEvent;
     toolbar?: ReactNode;
@@ -147,7 +159,7 @@ export type EventCalendarProps = {
      * development). Without it, the machine's clock.
      */
     timeZone?: string;
-};
+} & EventCalendarDayMarksProps;
 export type LaidOutEvent = {
     event: CalendarEvent;
     column: number;

package/dist/lib/components/ui/widgets/event-calendar/use-backdrops.d.ts

@@ -0,0 +1,8 @@
+import { BackdropLane, BackdropSegment } from './backdrop.types.js';
+/** The spans on one day (of one resource column, when given), for the view to shade. */
+export declare function useDaySpans(day: Date, resourceId?: string | null): BackdropSegment[];
+/** The whole-day spans as bars over `days`, and the rows they take above the events. */
+export declare function useBackdropLanes(days: Date[], resourceId?: string | null): {
+    lanes: BackdropLane[];
+    rows: number;
+};

package/dist/lib/components/ui/widgets/event-calendar/use-badges.d.ts

@@ -0,0 +1,5 @@
+import { CalendarEventBadge } from './types.js';
+/** The badge set on a day (`dayBadges`), if any. */
+export declare function useDayBadge(day: Date): CalendarEventBadge | undefined;
+/** The badge set on the week a day falls in (`weekBadges`, keyed by the week's first day). */
+export declare function useWeekBadge(day: Date): CalendarEventBadge | undefined;

package/dist/lib/components/ui/widgets/event-calendar/use-event-calendar.d.ts

@@ -1,12 +1,12 @@
 import { CalendarEvent, EventCalendarProps, EventCalendarView } from './types.js';
-export type UseEventCalendarOptions = Pick<EventCalendarProps, 'events' | 'defaultEvents' | 'onEventsChange' | 'onChange' | 'view' | 'defaultView' | 'onViewChange' | 'date' | 'defaultDate' | 'onDateChange' | 'disabled' | 'startHour' | 'endHour' | 'hourHeight' | 'slotDurationMinutes' | 'weekStartsOn' | 'density' | 'now' | 'resources' | 'timeZone'>;
+export type UseEventCalendarOptions = Pick<EventCalendarProps, 'events' | 'defaultEvents' | 'onEventsChange' | 'onChange' | 'view' | 'defaultView' | 'onViewChange' | 'date' | 'defaultDate' | 'onDateChange' | 'disabled' | 'readOnlyEvents' | 'startHour' | 'endHour' | 'hourHeight' | 'slotDurationMinutes' | 'weekStartsOn' | 'density' | 'now' | 'resources' | 'timeZone'>;
 export declare function useEventCalendar(options: UseEventCalendarOptions): {
     events: CalendarEvent[];
     eventsById: Map<string, CalendarEvent>;
     view: EventCalendarView;
     cursor: string;
     cursorDate: Date;
-    chrome: import('./types.js').EventCalendarChromeState;
+    chrome: import('./chrome.types.js').EventCalendarChromeState;
     chromeActions: {
         setFocusedEventId: (payload: string | null) => void;
         setQuery: (payload: string) => void;
@@ -16,6 +16,7 @@ export declare function useEventCalendar(options: UseEventCalendarOptions): {
         pickView: (noArgument?: void | undefined) => void;
     };
     disabled: boolean;
+    readOnlyEvents: boolean;
     startHour: number;
     endHour: number;
     hourHeight: number;

package/dist/lib/components/ui/widgets/event-calendar/use-month-day.d.ts

@@ -1,18 +1,23 @@
+import { CalendarEventBadge } from './types.js';
 /**
  * What a month cell derives and does: its events, its flags (today, outside
  * the month, the cursor, inside the dragged range), its spoken label, and
  * what a click or key does (choose the day on a phone, open the day's
  * dialog, or start a new event).
  */
-export declare function useMonthDay({ day, month, draft, }: {
+export declare function useMonthDay({ day, month, draft, weekBadge, }: {
     day: Date;
     month: Date;
     draft: {
         from: Date;
         to: Date;
     } | null;
+    /** The week's badge, on the first cell of a row. */
+    weekBadge?: CalendarEventBadge;
 }): {
     items: import('./types.js').CalendarEvent[];
+    backdrop: import('./backdrop.types.js').BackdropSegment[];
+    dayBadge: import('../../display/index.js').EventChipBadge | undefined;
     outside: boolean;
     isToday: boolean;
     isCursor: boolean;

package/dist/lib/components/ui/widgets/event-calendar/use-time-column.d.ts

@@ -19,4 +19,5 @@ export declare function useTimeColumn(day: Date, axis: DayAxis, resource: Resour
         onPointerUp: (event: import('react').PointerEvent<HTMLElement>) => void;
     };
     onClick: (event: MouseEvent<HTMLDivElement>) => void;
+    backdrop: import('./backdrop.types.js').BackdropSegment[];
 };

package/dist/lib/i18n/resources/en/en.d.ts

@@ -1336,6 +1336,9 @@ export declare const en: {
             remove: string;
             replace: string;
             retry: string;
+            "move-up": string;
+            "move-down": string;
+            moved: string;
         };
         "inline-edit": {
             edit: string;
@@ -1816,6 +1819,7 @@ export declare const en: {
             events: string;
             more: string;
             drag: string;
+            label: string;
             add: string;
             resize: string;
             "new-event": string;
@@ -1835,8 +1839,13 @@ export declare const en: {
             resource: string;
             lane: string;
             "lane-all": string;
+            cancelled: string;
+            "week-badge": string;
             "time-zone": string;
         };
+        "event-chip": {
+            cancelled: string;
+        };
         dnd: {
             drag: string;
         };
@@ -2274,6 +2283,7 @@ export declare const en: {
             "none-single": string;
             "none-multiple": string;
             blank: string;
+            detail: string;
             "text-required": string;
         };
         "repeatable-group": {

package/dist/lib/i18n/resources/en/material.json.d.ts

@@ -1325,7 +1325,10 @@ declare const _default: {
 		"download": "Download",
 		"remove": "Remove",
 		"replace": "Replace",
-		"retry": "Retry"
+		"retry": "Retry",
+		"move-up": "Move {name} up",
+		"move-down": "Move {name} down",
+		"moved": "Moved {name} to position {to}"
 	},
 	"inline-edit": {
 		"edit": "Edit",
@@ -1806,6 +1809,7 @@ declare const _default: {
 		"events": "{count, plural, one {# event} other {# events}}",
 		"more": "+{count} more",
 		"drag": "Drag event",
+		"label": "Event calendar",
 		"add": "Add event",
 		"resize": "Resize event",
 		"new-event": "New event",
@@ -1825,8 +1829,13 @@ declare const _default: {
 		"resource": "Resource",
 		"lane": "Week",
 		"lane-all": "All weeks",
+		"cancelled": "Cancelled",
+		"week-badge": "Week: {label}",
 		"time-zone": "Time zone: {zone}"
 	},
+	"event-chip": {
+		"cancelled": "Cancelled"
+	},
 	"dnd": {
 		"drag": "Drag"
 	},
@@ -2264,6 +2273,7 @@ declare const _default: {
 		"none-single": "Mark the correct {label}",
 		"none-multiple": "Mark at least one correct {label}",
 		"blank": "Fill in every {label}",
+		"detail": "Explanation",
 		"text-required": "Enter the {label}"
 	},
 	"repeatable-group": {

package/dist/lib/i18n/resources/fr/fr.d.ts

@@ -1336,6 +1336,9 @@ export declare const fr: {
             remove: string;
             replace: string;
             retry: string;
+            "move-up": string;
+            "move-down": string;
+            moved: string;
         };
         "inline-edit": {
             edit: string;
@@ -1816,6 +1819,7 @@ export declare const fr: {
             events: string;
             more: string;
             drag: string;
+            label: string;
             add: string;
             resize: string;
             "new-event": string;
@@ -1835,8 +1839,13 @@ export declare const fr: {
             resource: string;
             lane: string;
             "lane-all": string;
+            cancelled: string;
+            "week-badge": string;
             "time-zone": string;
         };
+        "event-chip": {
+            cancelled: string;
+        };
         dnd: {
             drag: string;
         };
@@ -2274,6 +2283,7 @@ export declare const fr: {
             "none-single": string;
             "none-multiple": string;
             blank: string;
+            detail: string;
             "text-required": string;
         };
         "repeatable-group": {

package/dist/lib/i18n/resources/fr/material.json.d.ts

@@ -1325,7 +1325,10 @@ declare const _default: {
 		"download": "Télécharger",
 		"remove": "Retirer",
 		"replace": "Remplacer",
-		"retry": "Réessayer"
+		"retry": "Réessayer",
+		"move-up": "Monter {name}",
+		"move-down": "Descendre {name}",
+		"moved": "{name} déplacé en position {to}"
 	},
 	"inline-edit": {
 		"edit": "Modifier",
@@ -1806,6 +1809,7 @@ declare const _default: {
 		"events": "{count, plural, one {# événement} other {# événements}}",
 		"more": "+{count} de plus",
 		"drag": "Déplacer l'événement",
+		"label": "Calendrier d'événements",
 		"add": "Ajouter un événement",
 		"resize": "Redimensionner l'événement",
 		"new-event": "Nouvel événement",
@@ -1825,8 +1829,13 @@ declare const _default: {
 		"resource": "Ressource",
 		"lane": "Semaine",
 		"lane-all": "Toutes les semaines",
+		"cancelled": "Annulé",
+		"week-badge": "Semaine : {label}",
 		"time-zone": "Fuseau horaire : {zone}"
 	},
+	"event-chip": {
+		"cancelled": "Annulé"
+	},
 	"dnd": {
 		"drag": "Déplacer"
 	},
@@ -2264,6 +2273,7 @@ declare const _default: {
 		"none-single": "Indiquez la {label} juste",
 		"none-multiple": "Indiquez au moins une {label} juste",
 		"blank": "Remplissez chaque {label}",
+		"detail": "Explication",
 		"text-required": "Saisissez la {label}"
 	},
 	"repeatable-group": {

package/dist/lib/i18n/resources/resources.d.ts

@@ -1334,6 +1334,9 @@ export declare const resources: {
                 remove: string;
                 replace: string;
                 retry: string;
+                "move-up": string;
+                "move-down": string;
+                moved: string;
             };
             "inline-edit": {
                 edit: string;
@@ -1814,6 +1817,7 @@ export declare const resources: {
                 events: string;
                 more: string;
                 drag: string;
+                label: string;
                 add: string;
                 resize: string;
                 "new-event": string;
@@ -1833,8 +1837,13 @@ export declare const resources: {
                 resource: string;
                 lane: string;
                 "lane-all": string;
+                cancelled: string;
+                "week-badge": string;
                 "time-zone": string;
             };
+            "event-chip": {
+                cancelled: string;
+            };
             dnd: {
                 drag: string;
             };
@@ -2272,6 +2281,7 @@ export declare const resources: {
                 "none-single": string;
                 "none-multiple": string;
                 blank: string;
+                detail: string;
                 "text-required": string;
             };
             "repeatable-group": {
@@ -4883,6 +4893,9 @@ export declare const resources: {
                 remove: string;
                 replace: string;
                 retry: string;
+                "move-up": string;
+                "move-down": string;
+                moved: string;
             };
             "inline-edit": {
                 edit: string;
@@ -5363,6 +5376,7 @@ export declare const resources: {
                 events: string;
                 more: string;
                 drag: string;
+                label: string;
                 add: string;
                 resize: string;
                 "new-event": string;
@@ -5382,8 +5396,13 @@ export declare const resources: {
                 resource: string;
                 lane: string;
                 "lane-all": string;
+                cancelled: string;
+                "week-badge": string;
                 "time-zone": string;
             };
+            "event-chip": {
+                cancelled: string;
+            };
             dnd: {
                 drag: string;
             };
@@ -5821,6 +5840,7 @@ export declare const resources: {
                 "none-single": string;
                 "none-multiple": string;
                 blank: string;
+                detail: string;
                 "text-required": string;
             };
             "repeatable-group": {