@cratis/scene.blueprint.default 4.35.0 → 4.37.0

package/dist/esm/defaultBlueprintComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultBlueprintComponents.js","sources":["../../defaultBlueprintComponents.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ComponentRegistry, componentRegistryKey } from '@cratis/scene.react';\nimport { ComponentName } from './ComponentName';\nimport { defaultBlueprintName } from './packageName';\nimport { ChartWrapper, ColumnChooser, EmptyState, FilterBuilder, SavedViewsMenu, StatCard, StatusChip, TrendChip } from './foundation';\nimport {\n    AppShell,\n    Breadcrumb,\n    ConfigPanel,\n    Footer,\n    FullPageShell,\n    LayoutModeSwitcher,\n    Logo,\n    Mask,\n    Menu,\n    MenuItem,\n    PageHeader,\n    RightPanel,\n    Sidebar,\n    ThemeSwitcher,\n    Topbar,\n    UserMenu,\n} from './shell';\n\n/**\n * The components this package registers, keyed the way the renderer looks them up.\n *\n * Every key is built with `componentRegistryKey` rather than written out, because the separator between\n * package and component name is the registry's own business - it is deliberately not the `.` a screen uses\n * to qualify a name, so that a package name containing dots stays unambiguous. Building a key by hand is\n * how a component ends up registered under something no lookup will ever produce.\n */\nexport const defaultBlueprintComponents: ComponentRegistry = {\n    [componentRegistryKey(defaultBlueprintName, ComponentName.AppShell)]: AppShell,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.FullPageShell)]: FullPageShell,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Topbar)]: Topbar,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Sidebar)]: Sidebar,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Menu)]: Menu,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.MenuItem)]: MenuItem,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Breadcrumb)]: Breadcrumb,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Footer)]: Footer,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.RightPanel)]: RightPanel,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ConfigPanel)]: ConfigPanel,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.PageHeader)]: PageHeader,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Mask)]: Mask,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Logo)]: Logo,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.UserMenu)]: UserMenu,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ThemeSwitcher)]: ThemeSwitcher,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.LayoutModeSwitcher)]: LayoutModeSwitcher,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.EmptyState)]: EmptyState,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.StatCard)]: StatCard,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.TrendChip)]: TrendChip,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.StatusChip)]: StatusChip,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ChartWrapper)]: ChartWrapper,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.FilterBuilder)]: FilterBuilder,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ColumnChooser)]: ColumnChooser,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.SavedViewsMenu)]: SavedViewsMenu,\n};\n"],"names":["defaultBlueprintComponents","componentRegistryKey","defaultBlueprintName","ComponentName","AppShell","FullPageShell","Topbar","Sidebar","Menu","MenuItem","Breadcrumb","Footer","RightPanel","ConfigPanel","PageHeader","Mask","Logo","UserMenu","ThemeSwitcher","LayoutModeSwitcher","EmptyState","StatCard","TrendChip","StatusChip","ChartWrapper","FilterBuilder","ColumnChooser","SavedViewsMenu"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAyBA;;;;;;;UAQaA,0BAAAA,GAAgD;AACzD,IAAA,CAACC,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcC,QAAQ,IAAIA,QAAAA;AACtE,IAAA,CAACH,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcE,aAAa,IAAIA,aAAAA;AAC3E,IAAA,CAACJ,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcG,MAAM,IAAIA,MAAAA;AACpE,IAAA,CAACL,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcI,OAAO,IAAIA,OAAAA;AACrE,IAAA,CAACN,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcK,IAAI,IAAIA,IAAAA;AAClE,IAAA,CAACP,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcM,QAAQ,IAAIA,QAAAA;AACtE,IAAA,CAACR,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcO,UAAU,IAAIA,UAAAA;AACxE,IAAA,CAACT,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcQ,MAAM,IAAIA,MAAAA;AACpE,IAAA,CAACV,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcS,UAAU,IAAIA,UAAAA;AACxE,IAAA,CAACX,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcU,WAAW,IAAIA,WAAAA;AACzE,IAAA,CAACZ,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcW,UAAU,IAAIA,UAAAA;AACxE,IAAA,CAACb,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcY,IAAI,IAAIA,IAAAA;AAClE,IAAA,CAACd,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAca,IAAI,IAAIA,IAAAA;AAClE,IAAA,CAACf,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcc,QAAQ,IAAIA,QAAAA;AACtE,IAAA,CAAChB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAce,aAAa,IAAIA,aAAAA;AAC3E,IAAA,CAACjB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcgB,kBAAkB,IAAIA,kBAAAA;AAChF,IAAA,CAAClB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAciB,UAAU,IAAIA,UAAAA;AACxE,IAAA,CAACnB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAckB,QAAQ,IAAIA,QAAAA;AACtE,IAAA,CAACpB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcmB,SAAS,IAAIA,SAAAA;AACvE,IAAA,CAACrB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcoB,UAAU,IAAIA,UAAAA;AACxE,IAAA,CAACtB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcqB,YAAY,IAAIA,YAAAA;AAC1E,IAAA,CAACvB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcsB,aAAa,IAAIA,aAAAA;AAC3E,IAAA,CAACxB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcuB,aAAa,IAAIA,aAAAA;AAC3E,IAAA,CAACzB,oBAAAA,CAAqBC,oBAAAA,EAAsBC,aAAAA,CAAcwB,cAAc,IAAIA;AAChF;;"}
+{"version":3,"file":"defaultBlueprintComponents.js","sources":["../../defaultBlueprintComponents.ts"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ComponentRegistry, componentRegistryKey } from '@cratis/scene.react';\nimport { ComponentName } from './ComponentName';\nimport { defaultBlueprintName } from './packageName';\nimport { ActivityFeed, ApprovalChainStepper, AvatarStack, ChartWrapper, ChecklistSection, ColumnChooser, FileUploader, EmptyState, FilterBuilder, OrgTree, PermissionMatrix, SavedViewsMenu, StatCard, StatusChip, TrendChip } from './foundation';\nimport {\n    AppShell,\n    Breadcrumb,\n    ConfigPanel,\n    Footer,\n    FullPageShell,\n    LayoutModeSwitcher,\n    Logo,\n    Mask,\n    Menu,\n    MenuItem,\n    PageHeader,\n    RightPanel,\n    Sidebar,\n    ThemeSwitcher,\n    Topbar,\n    UserMenu,\n} from './shell';\n\n/**\n * The components this package registers, keyed the way the renderer looks them up.\n *\n * Every key is built with `componentRegistryKey` rather than written out, because the separator between\n * package and component name is the registry's own business - it is deliberately not the `.` a screen uses\n * to qualify a name, so that a package name containing dots stays unambiguous. Building a key by hand is\n * how a component ends up registered under something no lookup will ever produce.\n */\nexport const defaultBlueprintComponents: ComponentRegistry = {\n    [componentRegistryKey(defaultBlueprintName, ComponentName.AppShell)]: AppShell,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.FullPageShell)]: FullPageShell,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Topbar)]: Topbar,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Sidebar)]: Sidebar,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Menu)]: Menu,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.MenuItem)]: MenuItem,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Breadcrumb)]: Breadcrumb,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Footer)]: Footer,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.RightPanel)]: RightPanel,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ConfigPanel)]: ConfigPanel,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.PageHeader)]: PageHeader,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Mask)]: Mask,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.Logo)]: Logo,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.UserMenu)]: UserMenu,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ThemeSwitcher)]: ThemeSwitcher,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.LayoutModeSwitcher)]: LayoutModeSwitcher,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.EmptyState)]: EmptyState,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.StatCard)]: StatCard,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.TrendChip)]: TrendChip,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.StatusChip)]: StatusChip,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ChartWrapper)]: ChartWrapper,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.FilterBuilder)]: FilterBuilder,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ColumnChooser)]: ColumnChooser,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.SavedViewsMenu)]: SavedViewsMenu,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ChecklistSection)]: ChecklistSection,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ActivityFeed)]: ActivityFeed,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.AvatarStack)]: AvatarStack,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.FileUploader)]: FileUploader,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.ApprovalChainStepper)]: ApprovalChainStepper,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.OrgTree)]: OrgTree,\n    [componentRegistryKey(defaultBlueprintName, ComponentName.PermissionMatrix)]: PermissionMatrix,\n};\n"],"names":["defaultBlueprintComponents","componentRegistryKey","defaultBlueprintName","ComponentName","AppShell","FullPageShell","Topbar","Sidebar","Menu","MenuItem","Breadcrumb","Footer","RightPanel","ConfigPanel","PageHeader","Mask","Logo","UserMenu","ThemeSwitcher","LayoutModeSwitcher","EmptyState","StatCard","TrendChip","StatusChip","ChartWrapper","FilterBuilder","ColumnChooser","SavedViewsMenu","ChecklistSection","ActivityFeed","AvatarStack","FileUploader","ApprovalChainStepper","OrgTree","PermissionMatrix"],"mappings":"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"}

package/dist/esm/foundation/ActivityFeed.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function ActivityFeed({ element, interactions }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=ActivityFeed.d.ts.map

package/dist/esm/foundation/ActivityFeed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityFeed.d.ts","sourceRoot":"","sources":["../../../foundation/ActivityFeed.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAqB/D,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,wBAAwB,+BAkC/E"}

package/dist/esm/foundation/ActivityFeed.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { readOptionalString } from '../shell/elementProperties.js';
+import { readActivity, groupByDay, ActivityKind } from './activityModel.js';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { FoundationIcon } from './FoundationIcon.js';
+import { readLocale, formatDay, formatDate } from './formatting.js';
+import { readFoundationStrings } from './foundationStrings.js';
+import { FoundationFrame } from './StateFrame.js';
+
+const icons = {
+    [ActivityKind.Comment]: 'user',
+    [ActivityKind.Change]: 'refresh',
+    [ActivityKind.Status]: 'check',
+    [ActivityKind.System]: 'info'
+};
+/**
+ * The `activityFeed` component: what happened to a record, newest first, under a heading for each day.
+ *
+ * `entries` carry an id, who (`actor`), what (`action`), the instant (`at`, ISO 8601), a `kind` and an optional `body` such as a comment's
+ * text. The feed is an ordered list; each entry names its kind in words for assistive technology as well as by icon, and its time is a
+ * `time` element formatted for the locale. Content is supplied by the application - this only lays it out - and a feed of any length
+ * stays one list. `order="ascending"` reads oldest first, and `timeZone` fixes the zone days are cut in.
+ */ function ActivityFeed({ element, interactions }) {
+    const entries = useMemo(()=>readActivity(element.properties.entries), [
+        element.properties.entries
+    ]);
+    const strings = readFoundationStrings(element);
+    const locale = readLocale(element);
+    const timeZone = readOptionalString(element, 'timeZone');
+    const days = useMemo(()=>groupByDay(entries, element.properties.order === 'ascending', timeZone), [
+        entries,
+        element.properties.order,
+        timeZone
+    ]);
+    const state = readComponentState(element, entries.length > 0);
+    const kindText = {
+        comment: strings.activityComment,
+        change: strings.activityChange,
+        status: strings.activityStatus,
+        system: strings.activitySystem
+    };
+    const emptyElement = state === ComponentState.Empty ? {
+        ...element,
+        properties: {
+            emptyHeadline: strings.activityEmpty,
+            ...element.properties
+        }
+    } : element;
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: emptyElement,
+        interactions: interactions,
+        name: "activity-feed",
+        state: state,
+        skeleton: [
+            60,
+            90,
+            70,
+            85
+        ],
+        children: (state === ComponentState.Ready || state === ComponentState.Partial) && days.map((day)=>/*#__PURE__*/ jsxs("section", {
+                className: "foundation-activity-day",
+                children: [
+                    /*#__PURE__*/ jsx("h3", {
+                        className: "foundation-activity-heading",
+                        children: /*#__PURE__*/ jsx("time", {
+                            dateTime: day.day,
+                            children: formatDay(day.day, locale)
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("ol", {
+                        className: "foundation-activity-list",
+                        children: day.entries.map((entry)=>/*#__PURE__*/ jsxs("li", {
+                                className: "foundation-activity-entry",
+                                "data-kind": entry.kind,
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "foundation-activity-icon",
+                                        children: /*#__PURE__*/ jsx(FoundationIcon, {
+                                            name: icons[entry.kind]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        className: "foundation-activity-content",
+                                        children: [
+                                            /*#__PURE__*/ jsxs("p", {
+                                                className: "foundation-activity-summary",
+                                                children: [
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: "foundation-visually-hidden",
+                                                        children: `${kindText[entry.kind]}: `
+                                                    }),
+                                                    /*#__PURE__*/ jsx("strong", {
+                                                        children: entry.actor
+                                                    }),
+                                                    " ",
+                                                    entry.action
+                                                ]
+                                            }),
+                                            entry.body && /*#__PURE__*/ jsx("p", {
+                                                className: "foundation-activity-body",
+                                                children: entry.body
+                                            }),
+                                            /*#__PURE__*/ jsx("time", {
+                                                className: "foundation-count",
+                                                dateTime: entry.at,
+                                                children: formatDate(entry.at, locale, true)
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, entry.id))
+                    })
+                ]
+            }, day.day))
+    });
+}
+
+export { ActivityFeed };
+//# sourceMappingURL=ActivityFeed.js.map

package/dist/esm/foundation/ActivityFeed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivityFeed.js","sources":["../../../foundation/ActivityFeed.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { readOptionalString } from '../shell/elementProperties';\nimport { ActivityKind, groupByDay, readActivity } from './activityModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationIcon, FoundationIconName } from './FoundationIcon';\nimport { formatDate, formatDay, readLocale } from './formatting';\nimport { readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\n\nconst icons: Record<ActivityKind, FoundationIconName> = {\n    [ActivityKind.Comment]: 'user', [ActivityKind.Change]: 'refresh', [ActivityKind.Status]: 'check', [ActivityKind.System]: 'info',\n};\n\n/**\n * The `activityFeed` component: what happened to a record, newest first, under a heading for each day.\n *\n * `entries` carry an id, who (`actor`), what (`action`), the instant (`at`, ISO 8601), a `kind` and an optional `body` such as a comment's\n * text. The feed is an ordered list; each entry names its kind in words for assistive technology as well as by icon, and its time is a\n * `time` element formatted for the locale. Content is supplied by the application - this only lays it out - and a feed of any length\n * stays one list. `order=\"ascending\"` reads oldest first, and `timeZone` fixes the zone days are cut in.\n */\nexport function ActivityFeed({ element, interactions }: RegisteredComponentProps) {\n    const entries = useMemo(() => readActivity(element.properties.entries), [element.properties.entries]);\n    const strings = readFoundationStrings(element);\n    const locale = readLocale(element);\n    const timeZone = readOptionalString(element, 'timeZone');\n    const days = useMemo(() => groupByDay(entries, element.properties.order === 'ascending', timeZone), [entries, element.properties.order, timeZone]);\n    const state = readComponentState(element, entries.length > 0);\n    const kindText: Record<ActivityKind, string> = { comment: strings.activityComment, change: strings.activityChange, status: strings.activityStatus, system: strings.activitySystem };\n    const emptyElement = state === ComponentState.Empty ? { ...element, properties: { emptyHeadline: strings.activityEmpty, ...element.properties } } : element;\n\n    return (\n        <FoundationFrame element={emptyElement} interactions={interactions} name='activity-feed' state={state} skeleton={[60, 90, 70, 85]}>\n            {(state === ComponentState.Ready || state === ComponentState.Partial) && days.map(day => (\n                <section key={day.day} className='foundation-activity-day'>\n                    <h3 className='foundation-activity-heading'><time dateTime={day.day}>{formatDay(day.day, locale)}</time></h3>\n                    <ol className='foundation-activity-list'>\n                        {day.entries.map(entry => (\n                            <li key={entry.id} className='foundation-activity-entry' data-kind={entry.kind}>\n                                <span className='foundation-activity-icon'><FoundationIcon name={icons[entry.kind]} /></span>\n                                <div className='foundation-activity-content'>\n                                    <p className='foundation-activity-summary'>\n                                        <span className='foundation-visually-hidden'>{`${kindText[entry.kind]}: `}</span>\n                                        <strong>{entry.actor}</strong> {entry.action}\n                                    </p>\n                                    {entry.body && <p className='foundation-activity-body'>{entry.body}</p>}\n                                    <time className='foundation-count' dateTime={entry.at}>{formatDate(entry.at, locale, true)}</time>\n                                </div>\n                            </li>\n                        ))}\n                    </ol>\n                </section>\n            ))}\n        </FoundationFrame>\n    );\n}\n\n"],"names":["icons","ActivityKind","Comment","Change","Status","System","ActivityFeed","element","interactions","entries","useMemo","readActivity","properties","strings","readFoundationStrings","locale","readLocale","timeZone","readOptionalString","days","groupByDay","order","state","readComponentState","length","kindText","comment","activityComment","change","activityChange","status","activityStatus","system","activitySystem","emptyElement","ComponentState","Empty","emptyHeadline","activityEmpty","_jsx","FoundationFrame","name","skeleton","Ready","Partial","map","day","_jsxs","section","className","h3","time","dateTime","formatDay","ol","entry","li","data-kind","kind","span","FoundationIcon","div","p","strong","actor","action","body","at","formatDate","id"],"mappings":"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"}

package/dist/esm/foundation/ApprovalChainStepper.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function ApprovalChainStepper({ element, interactions }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=ApprovalChainStepper.d.ts.map

package/dist/esm/foundation/ApprovalChainStepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApprovalChainStepper.d.ts","sourceRoot":"","sources":["../../../foundation/ApprovalChainStepper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAwB/D,wBAAgB,oBAAoB,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,wBAAwB,+BAqCvF"}

package/dist/esm/foundation/ApprovalChainStepper.js

@@ -0,0 +1,128 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { readSteps, effectiveSteps, chainOutcome, ApprovalState } from './approvalModel.js';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { FoundationIcon } from './FoundationIcon.js';
+import { readLocale, formatDate } from './formatting.js';
+import { readFoundationStrings, formatText } from './foundationStrings.js';
+import { FoundationFrame } from './StateFrame.js';
+
+const icons = {
+    [ApprovalState.Pending]: 'circle',
+    [ApprovalState.Current]: 'clock',
+    [ApprovalState.Approved]: 'check',
+    [ApprovalState.Rejected]: 'close',
+    [ApprovalState.Skipped]: 'minus'
+};
+const tones = {
+    [ApprovalState.Pending]: 'neutral',
+    [ApprovalState.Current]: 'info',
+    [ApprovalState.Approved]: 'success',
+    [ApprovalState.Rejected]: 'danger',
+    [ApprovalState.Skipped]: 'neutral'
+};
+/**
+ * The `approvalChainStepper` component: the steps a request goes through, who decides each, and where it stands.
+ *
+ * `steps` are written in order with a `label`, an `approver`, a `state` (pending, current, approved, rejected, skipped), and when it was
+ * decided (`at`) and a `comment`. The chain applies its own rules - a rejection stops the chain and the steps after it read "Not reached", and
+ * with no current step the first undecided one is it - so a request page needs no logic of its own. Every step says its state in words as
+ * well as by icon and color, the current step carries `aria-current="step"`, and the whole is an ordered list with the overall outcome
+ * stated above it. `orientation` is `horizontal` or `vertical`; below a phone's width it is always vertical.
+ */ function ApprovalChainStepper({ element, interactions }) {
+    const written = useMemo(()=>readSteps(element.properties.steps), [
+        element.properties.steps
+    ]);
+    const steps = useMemo(()=>effectiveSteps(written), [
+        written
+    ]);
+    const outcome = chainOutcome(written);
+    const strings = readFoundationStrings(element);
+    const locale = readLocale(element);
+    const state = readComponentState(element, written.length > 0);
+    const stateText = {
+        pending: strings.approvalPending,
+        current: strings.approvalCurrent,
+        approved: strings.approvalApproved,
+        rejected: strings.approvalRejected,
+        skipped: strings.approvalSkipped
+    };
+    const outcomeText = {
+        approved: strings.approvalOutcomeApproved,
+        rejected: strings.approvalOutcomeRejected,
+        inProgress: strings.approvalOutcomeInProgress,
+        pending: strings.approvalOutcomePending
+    };
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "approval-chain",
+        state: state,
+        skeleton: [
+            100,
+            100
+        ],
+        children: (state === ComponentState.Ready || state === ComponentState.Partial) && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("p", {
+                    className: "foundation-approval-outcome",
+                    "data-outcome": outcome,
+                    children: outcomeText[outcome]
+                }),
+                /*#__PURE__*/ jsx("ol", {
+                    className: "foundation-approval-steps",
+                    "aria-label": strings.approvalChain,
+                    "data-orientation": element.properties.orientation === 'vertical' ? 'vertical' : 'horizontal',
+                    children: steps.map((step, index)=>/*#__PURE__*/ jsxs("li", {
+                            className: "foundation-approval-step",
+                            "data-state": step.state,
+                            "aria-current": step.state === ApprovalState.Current ? 'step' : undefined,
+                            children: [
+                                /*#__PURE__*/ jsxs("span", {
+                                    className: "foundation-chip",
+                                    "data-tone": tones[step.state],
+                                    children: [
+                                        /*#__PURE__*/ jsx(FoundationIcon, {
+                                            name: icons[step.state]
+                                        }),
+                                        /*#__PURE__*/ jsx("span", {
+                                            children: step.notReached ? strings.approvalNotReached : stateText[step.state]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxs("strong", {
+                                    className: "foundation-approval-label",
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "foundation-visually-hidden",
+                                            children: `${formatText(strings.approvalStep, {
+                                                n: index + 1,
+                                                total: steps.length
+                                            })}: `
+                                        }),
+                                        step.label
+                                    ]
+                                }),
+                                step.approver && /*#__PURE__*/ jsx("span", {
+                                    className: "foundation-count",
+                                    children: step.approver
+                                }),
+                                step.at && /*#__PURE__*/ jsx("time", {
+                                    className: "foundation-count",
+                                    dateTime: step.at,
+                                    children: formatDate(step.at, locale, true)
+                                }),
+                                step.comment && /*#__PURE__*/ jsx("span", {
+                                    className: "foundation-approval-comment",
+                                    children: step.comment
+                                })
+                            ]
+                        }, step.label + index))
+                })
+            ]
+        })
+    });
+}
+
+export { ApprovalChainStepper };
+//# sourceMappingURL=ApprovalChainStepper.js.map

package/dist/esm/foundation/ApprovalChainStepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApprovalChainStepper.js","sources":["../../../foundation/ApprovalChainStepper.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { ApprovalState, ChainOutcome, chainOutcome, effectiveSteps, readSteps } from './approvalModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationIcon, FoundationIconName } from './FoundationIcon';\nimport { formatDate, readLocale } from './formatting';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\n\nconst icons: Record<ApprovalState, FoundationIconName> = {\n    [ApprovalState.Pending]: 'circle', [ApprovalState.Current]: 'clock', [ApprovalState.Approved]: 'check', [ApprovalState.Rejected]: 'close', [ApprovalState.Skipped]: 'minus',\n};\nconst tones: Record<ApprovalState, string> = {\n    [ApprovalState.Pending]: 'neutral', [ApprovalState.Current]: 'info', [ApprovalState.Approved]: 'success', [ApprovalState.Rejected]: 'danger', [ApprovalState.Skipped]: 'neutral',\n};\n\n/**\n * The `approvalChainStepper` component: the steps a request goes through, who decides each, and where it stands.\n *\n * `steps` are written in order with a `label`, an `approver`, a `state` (pending, current, approved, rejected, skipped), and when it was\n * decided (`at`) and a `comment`. The chain applies its own rules - a rejection stops the chain and the steps after it read \"Not reached\", and\n * with no current step the first undecided one is it - so a request page needs no logic of its own. Every step says its state in words as\n * well as by icon and color, the current step carries `aria-current=\"step\"`, and the whole is an ordered list with the overall outcome\n * stated above it. `orientation` is `horizontal` or `vertical`; below a phone's width it is always vertical.\n */\nexport function ApprovalChainStepper({ element, interactions }: RegisteredComponentProps) {\n    const written = useMemo(() => readSteps(element.properties.steps), [element.properties.steps]);\n    const steps = useMemo(() => effectiveSteps(written), [written]);\n    const outcome = chainOutcome(written);\n    const strings = readFoundationStrings(element);\n    const locale = readLocale(element);\n    const state = readComponentState(element, written.length > 0);\n    const stateText: Record<ApprovalState, string> = {\n        pending: strings.approvalPending, current: strings.approvalCurrent, approved: strings.approvalApproved, rejected: strings.approvalRejected, skipped: strings.approvalSkipped,\n    };\n    const outcomeText: Record<ChainOutcome, string> = {\n        approved: strings.approvalOutcomeApproved, rejected: strings.approvalOutcomeRejected, inProgress: strings.approvalOutcomeInProgress, pending: strings.approvalOutcomePending,\n    };\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='approval-chain' state={state} skeleton={[100, 100]}>\n            {(state === ComponentState.Ready || state === ComponentState.Partial) && (\n                <>\n                    <p className='foundation-approval-outcome' data-outcome={outcome}>{outcomeText[outcome]}</p>\n                    <ol className='foundation-approval-steps' aria-label={strings.approvalChain} data-orientation={element.properties.orientation === 'vertical' ? 'vertical' : 'horizontal'}>\n                        {steps.map((step, index) => (\n                            <li key={step.label + index} className='foundation-approval-step' data-state={step.state} aria-current={step.state === ApprovalState.Current ? 'step' : undefined}>\n                                <span className='foundation-chip' data-tone={tones[step.state]}><FoundationIcon name={icons[step.state]} /><span>{step.notReached ? strings.approvalNotReached : stateText[step.state]}</span></span>\n                                <strong className='foundation-approval-label'>\n                                    <span className='foundation-visually-hidden'>{`${formatText(strings.approvalStep, { n: index + 1, total: steps.length })}: `}</span>\n                                    {step.label}\n                                </strong>\n                                {step.approver && <span className='foundation-count'>{step.approver}</span>}\n                                {step.at && <time className='foundation-count' dateTime={step.at}>{formatDate(step.at, locale, true)}</time>}\n                                {step.comment && <span className='foundation-approval-comment'>{step.comment}</span>}\n                            </li>\n                        ))}\n                    </ol>\n                </>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["icons","ApprovalState","Pending","Current","Approved","Rejected","Skipped","tones","ApprovalChainStepper","element","interactions","written","useMemo","readSteps","properties","steps","effectiveSteps","outcome","chainOutcome","strings","readFoundationStrings","locale","readLocale","state","readComponentState","length","stateText","pending","approvalPending","current","approvalCurrent","approved","approvalApproved","rejected","approvalRejected","skipped","approvalSkipped","outcomeText","approvalOutcomeApproved","approvalOutcomeRejected","inProgress","approvalOutcomeInProgress","approvalOutcomePending","_jsx","FoundationFrame","name","skeleton","ComponentState","Ready","Partial","_jsxs","_Fragment","p","className","data-outcome","ol","aria-label","approvalChain","data-orientation","orientation","map","step","index","li","data-state","aria-current","undefined","span","data-tone","FoundationIcon","notReached","approvalNotReached","strong","formatText","approvalStep","n","total","label","approver","at","time","dateTime","formatDate","comment"],"mappings":"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"}

package/dist/esm/foundation/AvatarStack.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function AvatarStack({ element, interactions }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=AvatarStack.d.ts.map

package/dist/esm/foundation/AvatarStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.d.ts","sourceRoot":"","sources":["../../../foundation/AvatarStack.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAa/D,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,wBAAwB,+BAyB9E"}

package/dist/esm/foundation/AvatarStack.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { readPeople, visiblePeople, initialsOf } from './avatarModel.js';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { readFoundationStrings, formatText } from './foundationStrings.js';
+import { FoundationFrame } from './StateFrame.js';
+
+/**
+ * The `avatarStack` component: overlapping avatars for the people on a record, with a "+N" chip for the rest.
+ *
+ * `people` are names with an optional picture; without one the avatar shows the person's initials. The stack is a labelled group ("5 people"),
+ * each avatar is an image named after its person, and the overflow chip says how many more in words. `max` is how many are shown (4 by
+ * default) and `size` is `small` or `medium`.
+ */ function AvatarStack({ element, interactions }) {
+    const people = useMemo(()=>readPeople(element.properties.people), [
+        element.properties.people
+    ]);
+    const strings = readFoundationStrings(element);
+    const { shown, hidden } = visiblePeople(people, typeof element.properties.max === 'number' ? element.properties.max : 4);
+    const state = readComponentState(element, people.length > 0);
+    const size = element.properties.size === 'small' ? 'small' : 'medium';
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "avatar-stack",
+        state: state,
+        skeleton: [
+            35
+        ],
+        children: (state === ComponentState.Ready || state === ComponentState.Partial) && /*#__PURE__*/ jsxs("ul", {
+            className: "foundation-avatars",
+            role: "group",
+            "aria-label": formatText(strings.avatarPeople, {
+                count: people.length
+            }),
+            "data-size": size,
+            children: [
+                shown.map((person)=>/*#__PURE__*/ jsx("li", {
+                        className: "foundation-avatar",
+                        role: "img",
+                        "aria-label": person.name,
+                        title: person.name,
+                        children: person.imageUrl ? /*#__PURE__*/ jsx("img", {
+                            src: person.imageUrl,
+                            alt: ""
+                        }) : /*#__PURE__*/ jsx("span", {
+                            "aria-hidden": "true",
+                            children: initialsOf(person.name)
+                        })
+                    }, person.name)),
+                hidden > 0 && /*#__PURE__*/ jsx("li", {
+                    className: "foundation-avatar foundation-avatar-more",
+                    role: "img",
+                    "aria-label": formatText(strings.avatarOverflow, {
+                        count: hidden
+                    }),
+                    children: /*#__PURE__*/ jsxs("span", {
+                        "aria-hidden": "true",
+                        children: [
+                            "+",
+                            hidden
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+
+export { AvatarStack };
+//# sourceMappingURL=AvatarStack.js.map

package/dist/esm/foundation/AvatarStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarStack.js","sources":["../../../foundation/AvatarStack.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useMemo } from 'react';\nimport { RegisteredComponentProps } from '@cratis/scene.react';\nimport { initialsOf, readPeople, visiblePeople } from './avatarModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { FoundationFrame } from './StateFrame';\n\n/**\n * The `avatarStack` component: overlapping avatars for the people on a record, with a \"+N\" chip for the rest.\n *\n * `people` are names with an optional picture; without one the avatar shows the person's initials. The stack is a labelled group (\"5 people\"),\n * each avatar is an image named after its person, and the overflow chip says how many more in words. `max` is how many are shown (4 by\n * default) and `size` is `small` or `medium`.\n */\nexport function AvatarStack({ element, interactions }: RegisteredComponentProps) {\n    const people = useMemo(() => readPeople(element.properties.people), [element.properties.people]);\n    const strings = readFoundationStrings(element);\n    const { shown, hidden } = visiblePeople(people, typeof element.properties.max === 'number' ? element.properties.max : 4);\n    const state = readComponentState(element, people.length > 0);\n    const size = element.properties.size === 'small' ? 'small' : 'medium';\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='avatar-stack' state={state} skeleton={[35]}>\n            {(state === ComponentState.Ready || state === ComponentState.Partial) && (\n                <ul className='foundation-avatars' role='group' aria-label={formatText(strings.avatarPeople, { count: people.length })} data-size={size}>\n                    {shown.map(person => (\n                        <li key={person.name} className='foundation-avatar' role='img' aria-label={person.name} title={person.name}>\n                            {person.imageUrl ? <img src={person.imageUrl} alt='' /> : <span aria-hidden='true'>{initialsOf(person.name)}</span>}\n                        </li>\n                    ))}\n                    {hidden > 0 && (\n                        <li className='foundation-avatar foundation-avatar-more' role='img' aria-label={formatText(strings.avatarOverflow, { count: hidden })}>\n                            <span aria-hidden='true'>+{hidden}</span>\n                        </li>\n                    )}\n                </ul>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["AvatarStack","element","interactions","people","useMemo","readPeople","properties","strings","readFoundationStrings","shown","hidden","visiblePeople","max","state","readComponentState","length","size","_jsx","FoundationFrame","name","skeleton","ComponentState","Ready","Partial","_jsxs","ul","className","role","aria-label","formatText","avatarPeople","count","data-size","map","person","li","title","imageUrl","img","src","alt","span","aria-hidden","initialsOf","avatarOverflow"],"mappings":";;;;;;;AAUA;;;;;;AAMC,IACM,SAASA,WAAAA,CAAY,EAAEC,OAAO,EAAEC,YAAY,EAA4B,EAAA;IAC3E,MAAMC,MAAAA,GAASC,QAAQ,IAAMC,UAAAA,CAAWJ,QAAQK,UAAU,CAACH,MAAM,CAAA,EAAG;QAACF,OAAAA,CAAQK,UAAU,CAACH;AAAO,KAAA,CAAA;AAC/F,IAAA,MAAMI,UAAUC,qBAAAA,CAAsBP,OAAAA,CAAAA;AACtC,IAAA,MAAM,EAAEQ,KAAK,EAAEC,MAAM,EAAE,GAAGC,cAAcR,MAAAA,EAAQ,OAAOF,QAAQK,UAAU,CAACM,GAAG,KAAK,QAAA,GAAWX,QAAQK,UAAU,CAACM,GAAG,GAAG,CAAA,CAAA;AACtH,IAAA,MAAMC,KAAAA,GAAQC,kBAAAA,CAAmBb,OAAAA,EAASE,MAAAA,CAAOY,MAAM,GAAG,CAAA,CAAA;AAC1D,IAAA,MAAMC,OAAOf,OAAAA,CAAQK,UAAU,CAACU,IAAI,KAAK,UAAU,OAAA,GAAU,QAAA;AAE7D,IAAA,qBACIC,GAAA,CAACC,eAAAA,EAAAA;QAAgBjB,OAAAA,EAASA,OAAAA;QAASC,YAAAA,EAAcA,YAAAA;QAAciB,IAAAA,EAAK,cAAA;QAAeN,KAAAA,EAAOA,KAAAA;QAAOO,QAAAA,EAAU;AAAC,YAAA;AAAG,SAAA;kBAC1G,CAACP,KAAAA,KAAUQ,cAAAA,CAAeC,KAAK,IAAIT,UAAUQ,cAAAA,CAAeE,OAAO,mBAChEC,IAAA,CAACC,IAAAA,EAAAA;YAAGC,SAAAA,EAAU,oBAAA;YAAqBC,IAAAA,EAAK,OAAA;YAAQC,YAAAA,EAAYC,UAAAA,CAAWtB,OAAAA,CAAQuB,YAAY,EAAE;AAAEC,gBAAAA,KAAAA,EAAO5B,OAAOY;AAAO,aAAA,CAAA;YAAIiB,WAAAA,EAAWhB,IAAAA;;AAC9HP,gBAAAA,KAAAA,CAAMwB,GAAG,CAACC,CAAAA,MAAAA,iBACPjB,GAAA,CAACkB,IAAAA,EAAAA;wBAAqBT,SAAAA,EAAU,mBAAA;wBAAoBC,IAAAA,EAAK,KAAA;AAAMC,wBAAAA,YAAAA,EAAYM,OAAOf,IAAI;AAAEiB,wBAAAA,KAAAA,EAAOF,OAAOf,IAAI;kCACrGe,MAAAA,CAAOG,QAAQ,iBAAGpB,GAAA,CAACqB,KAAAA,EAAAA;AAAIC,4BAAAA,GAAAA,EAAKL,OAAOG,QAAQ;4BAAEG,GAAAA,EAAI;2CAAQvB,GAAA,CAACwB,MAAAA,EAAAA;4BAAKC,aAAAA,EAAY,MAAA;AAAQC,4BAAAA,QAAAA,EAAAA,UAAAA,CAAWT,OAAOf,IAAI;;AADrGe,qBAAAA,EAAAA,MAAAA,CAAOf,IAAI,CAAA,CAAA;AAIvBT,gBAAAA,MAAAA,GAAS,mBACNO,GAAA,CAACkB,IAAAA,EAAAA;oBAAGT,SAAAA,EAAU,0CAAA;oBAA2CC,IAAAA,EAAK,KAAA;oBAAMC,YAAAA,EAAYC,UAAAA,CAAWtB,OAAAA,CAAQqC,cAAc,EAAE;wBAAEb,KAAAA,EAAOrB;AAAO,qBAAA,CAAA;AAC/H,oBAAA,QAAA,gBAAAc,IAAA,CAACiB,MAAAA,EAAAA;wBAAKC,aAAAA,EAAY,MAAA;;AAAO,4BAAA,GAAA;AAAEhC,4BAAAA;;;;;;;AAOvD;;"}

package/dist/esm/foundation/ChecklistSection.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function ChecklistSection({ element, interactions, bindingOutputs }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=ChecklistSection.d.ts.map

package/dist/esm/foundation/ChecklistSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChecklistSection.d.ts","sourceRoot":"","sources":["../../../foundation/ChecklistSection.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAkB,MAAM,qBAAqB,CAAC;AAiB/E,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,wBAAwB,+BA0DnG"}

package/dist/esm/foundation/ChecklistSection.js

@@ -0,0 +1,172 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect } from 'react';
+import { useValueOutput } from '@cratis/scene.react';
+import { readChecklist, doneTaskIds, completed, isOverdue, toggleTask } from './checklistModel.js';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { FoundationIcon } from './FoundationIcon.js';
+import { readLocale, formatDate } from './formatting.js';
+import { readFoundationStrings, formatText } from './foundationStrings.js';
+import { readPermissionRule } from './PermissionRule.js';
+import { FoundationFrame } from './StateFrame.js';
+
+/**
+ * The `checklistSection` component: sections of tasks, each with its owner and due date, and a progress bar per section.
+ *
+ * `sections` give the structure (`title`, and `items` with `id`, `label`, `owner`, `due`, `done`). Ticking a task publishes the ids of all
+ * done tasks as the `value` output and runs the behaviors attached to the element. An open task past its due date says "Overdue" in
+ * words as well as in color. Progress is a labelled progress bar, so "2 of 5 complete" is read, not just seen. With `editPermission`
+ * not enabled the tasks are shown and cannot be changed.
+ */ function ChecklistSection({ element, interactions, bindingOutputs }) {
+    const supplied = useMemo(()=>readChecklist(element.properties.sections), [
+        element.properties.sections
+    ]);
+    const suppliedKey = JSON.stringify(supplied);
+    const [groups, setGroups] = useState(supplied);
+    const strings = readFoundationStrings(element);
+    const locale = readLocale(element);
+    const state = readComponentState(element, supplied.some((group)=>group.items.length > 0));
+    const locked = readPermissionRule(element, 'editPermission') !== 'enabled';
+    const now = useMemo(()=>typeof element.properties.today === 'string' ? new Date(element.properties.today) : new Date(), [
+        element.properties.today
+    ]);
+    useEffect(()=>setGroups(supplied), [
+        suppliedKey
+    ]);
+    useValueOutput(bindingOutputs, doneTaskIds(groups));
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "checklist",
+        state: state,
+        skeleton: [
+            40,
+            100,
+            90,
+            95
+        ],
+        children: (state === ComponentState.Ready || state === ComponentState.Partial) && groups.map((group, groupIndex)=>{
+            const done = completed(group);
+            const total = group.items.length;
+            return /*#__PURE__*/ jsxs("section", {
+                className: "foundation-checklist-group",
+                "aria-labelledby": `${element.id}-group-${groupIndex}`,
+                children: [
+                    /*#__PURE__*/ jsxs("header", {
+                        className: "foundation-checklist-header",
+                        children: [
+                            /*#__PURE__*/ jsx("h3", {
+                                id: `${element.id}-group-${groupIndex}`,
+                                children: group.title
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "foundation-count",
+                                children: formatText(strings.checklistProgress, {
+                                    done,
+                                    total
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "foundation-progress",
+                        role: "progressbar",
+                        "aria-label": formatText(strings.checklistItemProgress, {
+                            title: group.title
+                        }),
+                        "aria-valuemin": 0,
+                        "aria-valuemax": total,
+                        "aria-valuenow": done,
+                        "aria-valuetext": formatText(strings.checklistProgress, {
+                            done,
+                            total
+                        }),
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "foundation-progress-bar",
+                            style: {
+                                inlineSize: total === 0 ? '0%' : `${done / total * 100}%`
+                            }
+                        })
+                    }),
+                    total === 0 ? /*#__PURE__*/ jsx("p", {
+                        className: "foundation-count",
+                        children: strings.checklistNone
+                    }) : /*#__PURE__*/ jsx("ul", {
+                        className: "foundation-checklist-items",
+                        children: group.items.map((item)=>{
+                            const overdue = isOverdue(item, now);
+                            return /*#__PURE__*/ jsxs("li", {
+                                className: "foundation-checklist-item",
+                                "data-done": item.done,
+                                "data-overdue": overdue,
+                                children: [
+                                    /*#__PURE__*/ jsxs("label", {
+                                        className: "foundation-check",
+                                        children: [
+                                            /*#__PURE__*/ jsx("input", {
+                                                type: "checkbox",
+                                                checked: item.done,
+                                                disabled: locked,
+                                                onChange: ()=>{
+                                                    setGroups(toggleTask(groups, item.id));
+                                                    interactions?.onChange?.();
+                                                }
+                                            }),
+                                            /*#__PURE__*/ jsx("span", {
+                                                className: "foundation-checklist-label",
+                                                children: item.label
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "foundation-checklist-meta",
+                                        children: [
+                                            item.owner && /*#__PURE__*/ jsxs("span", {
+                                                children: [
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: "foundation-visually-hidden",
+                                                        children: `${strings.checklistOwner}: `
+                                                    }),
+                                                    /*#__PURE__*/ jsx(FoundationIcon, {
+                                                        name: "user"
+                                                    }),
+                                                    " ",
+                                                    item.owner
+                                                ]
+                                            }),
+                                            item.due && /*#__PURE__*/ jsxs("span", {
+                                                children: [
+                                                    /*#__PURE__*/ jsx("span", {
+                                                        className: "foundation-visually-hidden",
+                                                        children: `${strings.checklistDue}: `
+                                                    }),
+                                                    /*#__PURE__*/ jsx("time", {
+                                                        dateTime: item.due,
+                                                        children: formatDate(item.due, locale)
+                                                    }),
+                                                    overdue && /*#__PURE__*/ jsxs("strong", {
+                                                        className: "foundation-overdue",
+                                                        children: [
+                                                            " · ",
+                                                            /*#__PURE__*/ jsx(FoundationIcon, {
+                                                                name: "alert"
+                                                            }),
+                                                            " ",
+                                                            strings.checklistOverdue
+                                                        ]
+                                                    })
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, item.id);
+                        })
+                    })
+                ]
+            }, group.title + groupIndex);
+        })
+    });
+}
+
+export { ChecklistSection };
+//# sourceMappingURL=ChecklistSection.js.map