@cratis/scene.blueprint.default 4.40.0 → 4.42.0

package/dist/esm/foundation/templates/dialogTemplates.js

@@ -0,0 +1,243 @@
+import { InteractionActionKind, InteractionTriggerKind } from '@cratis/scene.model';
+import { panel } from '../../gallery/elements.js';
+import { defaultBlueprintTemplateProvenance } from '../../templateProvenance.js';
+import { component, fromQuery, foundationTemplateProvenance, thumbnailOf } from './templateParts.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** What a Cancel or Close control does: close the dialog the screen opened it from, in Scene, in Stage and in the preview alike. */ const closeDialogBehaviors = [
+    {
+        bindings: [
+            {
+                trigger: {
+                    kind: InteractionTriggerKind.Click
+                },
+                actions: [
+                    {
+                        kind: InteractionActionKind.CloseDialog
+                    }
+                ]
+            }
+        ]
+    }
+];
+/** An element that closes the dialog when it is clicked. */ const closingDialog = (element)=>({
+        ...element,
+        behaviors: closeDialogBehaviors
+    });
+/**
+ * The provenance, type and category every foundation dialog carries. A dialog built from the foundation and core components needs no component library; one that
+ * uses PrimeReact widgets (`needsPrimeReact`) declares the packages it requires.
+ */ const dialogMetadata = (name, needsPrimeReact = false)=>({
+        ...needsPrimeReact ? defaultBlueprintTemplateProvenance : foundationTemplateProvenance,
+        type: 'Dialog',
+        category: 'Foundation / Dialog',
+        thumbnail: thumbnailOf(name)
+    });
+/** One action of the foundation, by the id it is known by. */ const actionButton = (id, properties)=>component(id, 'actionButton', properties);
+/** The footer of a dialog: its buttons, the one that confirms last, so it is the one the eye ends on. */ const dialogActions = (id, buttons)=>panel(`${id}-actions`, buttons);
+/**
+ * The quick-create dialog: a short form - six fields at most - opened from a list's header or from a lookup, to make one record without leaving the page.
+ * Cancel closes it, Create validates and saves. `FormDialog` is the general form dialog this one is the focused form of: the same shape with the heading,
+ * focus handling and the form of the foundation, which is why it is offered as the alias a quick-create button chooses.
+ */ const quickCreateDialogTemplate = {
+    name: 'QuickCreateDialog',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'body'
+        },
+        {
+            name: 'actions'
+        }
+    ],
+    content: {
+        header: [
+            component('quick-create-frame', 'dialogFrame', {
+                title: 'New contact',
+                subtitle: 'Only what is needed to get started'
+            })
+        ],
+        body: [
+            closingDialog(component('quick-create-form', 'formScreenBody', {
+                mode: 'create',
+                saveAndNew: false,
+                strings: {
+                    formSave: 'Create'
+                },
+                sections: fromQuery('QuickCreateSections'),
+                values: fromQuery('QuickCreateValues', '0'),
+                errors: fromQuery('FormErrors', '0')
+            }))
+        ],
+        actions: []
+    },
+    displayName: 'Quick create',
+    description: 'A short form of six fields at most with Cancel and Create, opened without leaving the page.',
+    metadata: dialogMetadata('QuickCreateDialog')
+};
+/**
+ * The lookup dialog: search, a table or list, and single or multiple selection, with Cancel and Select. Any lookup field opens it, so one dialog serves them all;
+ * `selectionMode` on the list is `single` (the default here) or `multiple`.
+ */ const lookupDialogTemplate = {
+    name: 'LookupDialog',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'body'
+        },
+        {
+            name: 'actions'
+        }
+    ],
+    content: {
+        header: [
+            component('lookup-frame', 'dialogFrame', {
+                title: 'Select an account',
+                subtitle: 'Search, then choose one'
+            })
+        ],
+        body: [
+            component('lookup-search', 'globalSearch', {
+                placeholder: 'Search accounts',
+                label: 'Search accounts'
+            }),
+            component('lookup-list', 'dataList', {
+                label: 'Accounts',
+                rows: fromQuery('LookupRows'),
+                columns: fromQuery('LookupColumns'),
+                titleField: 'name',
+                selectionMode: 'single',
+                pageSize: 6
+            })
+        ],
+        actions: [
+            dialogActions('lookup', [
+                closingDialog(actionButton('lookup-cancel', {
+                    label: 'Cancel',
+                    emphasis: 'secondary'
+                })),
+                closingDialog(actionButton('lookup-select', {
+                    label: 'Select',
+                    emphasis: 'primary'
+                }))
+            ])
+        ]
+    },
+    displayName: 'Lookup',
+    description: 'A search and a list to choose one or several records from, with Cancel and Select.',
+    metadata: dialogMetadata('LookupDialog')
+};
+/**
+ * The side sheet: a drawer from the inline end with a header, a scrollable body and footer actions. It hosts what a page hosts - a form, or a record's
+ * tabs and related records - so a record can be edited or read from beside the list it came from.
+ */ const sideSheetTemplate = {
+    name: 'SideSheet',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'body'
+        },
+        {
+            name: 'actions'
+        }
+    ],
+    content: {
+        header: [
+            component('sheet-frame', 'dialogFrame', {
+                title: 'Account details',
+                subtitle: 'Edit without leaving the list',
+                placement: 'side'
+            })
+        ],
+        body: [
+            closingDialog(component('sheet-form', 'formScreenBody', {
+                mode: 'edit',
+                sections: fromQuery('RecordSections'),
+                values: fromQuery('RecordValues', '0'),
+                errors: fromQuery('FormErrors', '0')
+            }))
+        ],
+        actions: [
+            dialogActions('sheet', [
+                closingDialog(actionButton('sheet-close', {
+                    label: 'Close',
+                    emphasis: 'secondary'
+                })),
+                actionButton('sheet-open', {
+                    label: 'Open full page',
+                    emphasis: 'primary',
+                    targetScreen: 'RecordPage'
+                })
+            ])
+        ]
+    },
+    displayName: 'Side sheet',
+    description: 'A drawer from the side hosting a record or a form, with footer actions.',
+    metadata: dialogMetadata('SideSheet')
+};
+/**
+ * The filter dialog: the advanced filter builder in a dialog. On a phone it fills the page, which makes it the phone's alternative to the filter panel
+ * a list shows beside its table.
+ */ const filterDialogTemplate = {
+    name: 'FilterDialog',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'body'
+        },
+        {
+            name: 'actions'
+        }
+    ],
+    content: {
+        header: [
+            component('filter-frame', 'dialogFrame', {
+                title: 'Filters',
+                subtitle: 'Show only the deals that match'
+            })
+        ],
+        body: [
+            component('filter-builder', 'filterBuilder', {
+                fields: fromQuery('DealFilterFields'),
+                filter: fromQuery('DealFilter', '0')
+            })
+        ],
+        actions: [
+            dialogActions('filter', [
+                actionButton('filter-reset', {
+                    label: 'Reset',
+                    emphasis: 'secondary'
+                }),
+                closingDialog(actionButton('filter-cancel', {
+                    label: 'Cancel',
+                    emphasis: 'secondary'
+                })),
+                closingDialog(actionButton('filter-apply', {
+                    label: 'Apply filters',
+                    emphasis: 'primary'
+                }))
+            ])
+        ]
+    },
+    displayName: 'Filters',
+    description: 'The advanced filter builder in a dialog, the phone alternative to the filter panel.',
+    metadata: dialogMetadata('FilterDialog')
+};
+/** The dialogs the foundation adds to the three the gallery already had. */ const foundationDialogTemplates = [
+    quickCreateDialogTemplate,
+    lookupDialogTemplate,
+    sideSheetTemplate,
+    filterDialogTemplate
+];
+
+export { actionButton, closeDialogBehaviors, closingDialog, dialogActions, dialogMetadata, filterDialogTemplate, foundationDialogTemplates, lookupDialogTemplate, quickCreateDialogTemplate, sideSheetTemplate };
+//# sourceMappingURL=dialogTemplates.js.map

package/dist/esm/foundation/templates/dialogTemplates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialogTemplates.js","sources":["../../../../foundation/templates/dialogTemplates.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 { Behavior, DialogTemplate, ExternalComponent, InteractionActionKind, InteractionTriggerKind } from '@cratis/scene.model';\nimport { panel } from '../../gallery/elements';\nimport { defaultBlueprintTemplateProvenance } from '../../templateProvenance';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/** What a Cancel or Close control does: close the dialog the screen opened it from, in Scene, in Stage and in the preview alike. */\nexport const closeDialogBehaviors: Behavior[] = [{ bindings: [{ trigger: { kind: InteractionTriggerKind.Click }, actions: [{ kind: InteractionActionKind.CloseDialog }] }] }];\n\n/** An element that closes the dialog when it is clicked. */\nexport const closingDialog = <T extends ExternalComponent>(element: T): T => ({ ...element, behaviors: closeDialogBehaviors });\n\n/**\n * The provenance, type and category every foundation dialog carries. A dialog built from the foundation and core components needs no component library; one that\n * uses PrimeReact widgets (`needsPrimeReact`) declares the packages it requires.\n */\nexport const dialogMetadata = (name: string, needsPrimeReact = false) =>\n    ({ ...(needsPrimeReact ? defaultBlueprintTemplateProvenance : foundationTemplateProvenance), type: 'Dialog', category: 'Foundation / Dialog', thumbnail: thumbnailOf(name) });\n\n/** One action of the foundation, by the id it is known by. */\nexport const actionButton = (id: string, properties: Record<string, unknown>): ExternalComponent => component(id, 'actionButton', properties);\n\n/** The footer of a dialog: its buttons, the one that confirms last, so it is the one the eye ends on. */\nexport const dialogActions = (id: string, buttons: ExternalComponent[]) => panel(`${id}-actions`, buttons);\n\n/**\n * The quick-create dialog: a short form - six fields at most - opened from a list's header or from a lookup, to make one record without leaving the page.\n * Cancel closes it, Create validates and saves. `FormDialog` is the general form dialog this one is the focused form of: the same shape with the heading,\n * focus handling and the form of the foundation, which is why it is offered as the alias a quick-create button chooses.\n */\nexport const quickCreateDialogTemplate: DialogTemplate = {\n    name: 'QuickCreateDialog',\n    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],\n    content: {\n        header: [component('quick-create-frame', 'dialogFrame', { title: 'New contact', subtitle: 'Only what is needed to get started' })],\n        body: [closingDialog(component('quick-create-form', 'formScreenBody', {\n            mode: 'create', saveAndNew: false, strings: { formSave: 'Create' },\n            sections: fromQuery('QuickCreateSections'), values: fromQuery('QuickCreateValues', '0'), errors: fromQuery('FormErrors', '0'),\n        }))],\n        actions: [],\n    },\n    displayName: 'Quick create',\n    description: 'A short form of six fields at most with Cancel and Create, opened without leaving the page.',\n    metadata: dialogMetadata('QuickCreateDialog'),\n};\n\n/**\n * The lookup dialog: search, a table or list, and single or multiple selection, with Cancel and Select. Any lookup field opens it, so one dialog serves them all;\n * `selectionMode` on the list is `single` (the default here) or `multiple`.\n */\nexport const lookupDialogTemplate: DialogTemplate = {\n    name: 'LookupDialog',\n    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],\n    content: {\n        header: [component('lookup-frame', 'dialogFrame', { title: 'Select an account', subtitle: 'Search, then choose one' })],\n        body: [\n            component('lookup-search', 'globalSearch', { placeholder: 'Search accounts', label: 'Search accounts' }),\n            component('lookup-list', 'dataList', { label: 'Accounts', rows: fromQuery('LookupRows'), columns: fromQuery('LookupColumns'), titleField: 'name', selectionMode: 'single', pageSize: 6 }),\n        ],\n        actions: [dialogActions('lookup', [\n            closingDialog(actionButton('lookup-cancel', { label: 'Cancel', emphasis: 'secondary' })),\n            closingDialog(actionButton('lookup-select', { label: 'Select', emphasis: 'primary' })),\n        ])],\n    },\n    displayName: 'Lookup',\n    description: 'A search and a list to choose one or several records from, with Cancel and Select.',\n    metadata: dialogMetadata('LookupDialog'),\n};\n\n/**\n * The side sheet: a drawer from the inline end with a header, a scrollable body and footer actions. It hosts what a page hosts - a form, or a record's\n * tabs and related records - so a record can be edited or read from beside the list it came from.\n */\nexport const sideSheetTemplate: DialogTemplate = {\n    name: 'SideSheet',\n    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],\n    content: {\n        header: [component('sheet-frame', 'dialogFrame', { title: 'Account details', subtitle: 'Edit without leaving the list', placement: 'side' })],\n        body: [closingDialog(component('sheet-form', 'formScreenBody', { mode: 'edit', sections: fromQuery('RecordSections'), values: fromQuery('RecordValues', '0'), errors: fromQuery('FormErrors', '0') }))],\n        actions: [dialogActions('sheet', [\n            closingDialog(actionButton('sheet-close', { label: 'Close', emphasis: 'secondary' })),\n            actionButton('sheet-open', { label: 'Open full page', emphasis: 'primary', targetScreen: 'RecordPage' }),\n        ])],\n    },\n    displayName: 'Side sheet',\n    description: 'A drawer from the side hosting a record or a form, with footer actions.',\n    metadata: dialogMetadata('SideSheet'),\n};\n\n/**\n * The filter dialog: the advanced filter builder in a dialog. On a phone it fills the page, which makes it the phone's alternative to the filter panel\n * a list shows beside its table.\n */\nexport const filterDialogTemplate: DialogTemplate = {\n    name: 'FilterDialog',\n    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],\n    content: {\n        header: [component('filter-frame', 'dialogFrame', { title: 'Filters', subtitle: 'Show only the deals that match' })],\n        body: [component('filter-builder', 'filterBuilder', { fields: fromQuery('DealFilterFields'), filter: fromQuery('DealFilter', '0') })],\n        actions: [dialogActions('filter', [\n            actionButton('filter-reset', { label: 'Reset', emphasis: 'secondary' }),\n            closingDialog(actionButton('filter-cancel', { label: 'Cancel', emphasis: 'secondary' })),\n            closingDialog(actionButton('filter-apply', { label: 'Apply filters', emphasis: 'primary' })),\n        ])],\n    },\n    displayName: 'Filters',\n    description: 'The advanced filter builder in a dialog, the phone alternative to the filter panel.',\n    metadata: dialogMetadata('FilterDialog'),\n};\n\n/** The dialogs the foundation adds to the three the gallery already had. */\nexport const foundationDialogTemplates: DialogTemplate[] = [quickCreateDialogTemplate, lookupDialogTemplate, sideSheetTemplate, filterDialogTemplate];\n"],"names":["closeDialogBehaviors","bindings","trigger","kind","InteractionTriggerKind","Click","actions","InteractionActionKind","CloseDialog","closingDialog","element","behaviors","dialogMetadata","name","needsPrimeReact","defaultBlueprintTemplateProvenance","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf","actionButton","id","properties","component","dialogActions","buttons","panel","quickCreateDialogTemplate","slots","content","header","title","subtitle","body","mode","saveAndNew","strings","formSave","sections","fromQuery","values","errors","displayName","description","metadata","lookupDialogTemplate","placeholder","label","rows","columns","titleField","selectionMode","pageSize","emphasis","sideSheetTemplate","placement","targetScreen","filterDialogTemplate","fields","filter","foundationDialogTemplates"],"mappings":"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"}

package/dist/esm/foundation/templates/formScreenTemplate.d.ts

@@ -0,0 +1,3 @@
+import { ScreenTemplate } from '@cratis/scene.model';
+export declare const formScreenTemplate: ScreenTemplate;
+//# sourceMappingURL=formScreenTemplate.d.ts.map

package/dist/esm/foundation/templates/formScreenTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formScreenTemplate.d.ts","sourceRoot":"","sources":["../../../../foundation/templates/formScreenTemplate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAkB,MAAM,qBAAqB,CAAC;AAQrE,eAAO,MAAM,kBAAkB,EAAE,cAgBhC,CAAC"}

package/dist/esm/foundation/templates/formScreenTemplate.js

@@ -0,0 +1,69 @@
+import { WidthSizeClass } from '@cratis/scene.model';
+import { column, slotLeaf } from '../../layouts/flowBuilders.js';
+import { component, fromQuery, foundationTemplateProvenance, thumbnailOf } from './templateParts.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The form: titled sections of fields in a one-to-three column grid, validated, with Save, Save and new and Cancel. One template serves create, edit, read-only
+ * and settings (a save for each section) by its mode, and warns before unsaved changes are lost.
+ */ const formScreenTemplate = {
+    name: 'FormScreen',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'body'
+        },
+        {
+            name: 'actions'
+        }
+    ],
+    arrangement: {
+        root: column([
+            slotLeaf('header'),
+            slotLeaf('body'),
+            slotLeaf('actions')
+        ], 16),
+        overrides: [
+            {
+                width: WidthSizeClass.Compact,
+                root: column([
+                    slotLeaf('header'),
+                    slotLeaf('body'),
+                    slotLeaf('actions')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        header: [
+            component('form-header', 'pageHeader', {
+                title: 'New account',
+                subtitle: 'Fields marked * are required'
+            })
+        ],
+        body: [
+            component('form-body', 'formScreenBody', {
+                mode: 'create',
+                sections: fromQuery('RecordSections'),
+                values: fromQuery('RecordValues', '0'),
+                errors: fromQuery('FormErrors', '0')
+            })
+        ],
+        actions: []
+    },
+    displayName: 'Form',
+    description: 'Sections of validated fields with Save, Save and new, Cancel and an unsaved-changes guard.',
+    metadata: {
+        ...foundationTemplateProvenance,
+        type: 'Form',
+        category: 'Foundation / Form',
+        thumbnail: thumbnailOf('FormScreen')
+    }
+};
+
+export { formScreenTemplate };
+//# sourceMappingURL=formScreenTemplate.js.map

package/dist/esm/foundation/templates/formScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formScreenTemplate.js","sources":["../../../../foundation/templates/formScreenTemplate.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 { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';\nimport { column, grid, row, slotLeaf } from '../../layouts/flowBuilders';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/**\n * The form: titled sections of fields in a one-to-three column grid, validated, with Save, Save and new and Cancel. One template serves create, edit, read-only\n * and settings (a save for each section) by its mode, and warns before unsaved changes are lost.\n */\nexport const formScreenTemplate: ScreenTemplate = {\n    name: 'FormScreen',\n    fitsSlot: 'content',\n    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],\n    arrangement: {\n        root: column([slotLeaf('header'), slotLeaf('body'), slotLeaf('actions')], 16),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('body'), slotLeaf('actions')], 16) }],\n    },\n    content: {\n        header: [component('form-header', 'pageHeader', { title: 'New account', subtitle: 'Fields marked * are required' })],\n        body: [component('form-body', 'formScreenBody', { mode: 'create', sections: fromQuery('RecordSections'), values: fromQuery('RecordValues', '0'), errors: fromQuery('FormErrors', '0') })],\n        actions: [],\n    },\n    displayName: 'Form',\n    description: 'Sections of validated fields with Save, Save and new, Cancel and an unsaved-changes guard.',\n    metadata: { ...foundationTemplateProvenance, type: 'Form', category: 'Foundation / Form', thumbnail: thumbnailOf('FormScreen') },\n};\n"],"names":["formScreenTemplate","name","fitsSlot","slots","arrangement","root","column","slotLeaf","overrides","width","WidthSizeClass","Compact","content","header","component","title","subtitle","body","mode","sections","fromQuery","values","errors","actions","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":";;;;AAAA;AACA;AAMA;;;UAIaA,kBAAAA,GAAqC;IAC9CC,IAAAA,EAAM,YAAA;IACNC,QAAAA,EAAU,SAAA;IACVC,KAAAA,EAAO;AAAC,QAAA;YAAEF,IAAAA,EAAM;AAAS,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAO,SAAA;AAAG,QAAA;YAAEA,IAAAA,EAAM;AAAU;AAAE,KAAA;IAClEG,WAAAA,EAAa;AACTC,QAAAA,IAAAA,EAAMC,MAAAA,CAAO;YAACC,QAAAA,CAAS,QAAA,CAAA;YAAWA,QAAAA,CAAS,MAAA,CAAA;YAASA,QAAAA,CAAS,SAAA;SAAW,EAAE,EAAA,CAAA;QAC1EC,SAAAA,EAAW;AAAC,YAAA;AAAEC,gBAAAA,KAAAA,EAAOC,eAAeC,OAAO;AAAEN,gBAAAA,IAAAA,EAAMC,MAAAA,CAAO;oBAACC,QAAAA,CAAS,QAAA,CAAA;oBAAWA,QAAAA,CAAS,MAAA,CAAA;oBAASA,QAAAA,CAAS,SAAA;iBAAW,EAAE,EAAA;AAAI;AAAE;AACjI,KAAA;IACAK,OAAAA,EAAS;QACLC,MAAAA,EAAQ;AAACC,YAAAA,SAAAA,CAAU,eAAe,YAAA,EAAc;gBAAEC,KAAAA,EAAO,aAAA;gBAAeC,QAAAA,EAAU;AAA+B,aAAA;AAAG,SAAA;QACpHC,IAAAA,EAAM;AAACH,YAAAA,SAAAA,CAAU,aAAa,gBAAA,EAAkB;gBAAEI,IAAAA,EAAM,QAAA;AAAUC,gBAAAA,QAAAA,EAAUC,SAAAA,CAAU,gBAAA,CAAA;AAAmBC,gBAAAA,MAAAA,EAAQD,UAAU,cAAA,EAAgB,GAAA,CAAA;AAAME,gBAAAA,MAAAA,EAAQF,UAAU,YAAA,EAAc,GAAA;AAAK,aAAA;AAAG,SAAA;AACzLG,QAAAA,OAAAA,EAAS;AACb,KAAA;IACAC,WAAAA,EAAa,MAAA;IACbC,WAAAA,EAAa,4FAAA;IACbC,QAAAA,EAAU;AAAE,QAAA,GAAGC,4BAA4B;QAAEC,IAAAA,EAAM,MAAA;QAAQC,QAAAA,EAAU,mBAAA;AAAqBC,QAAAA,SAAAA,EAAWC,WAAAA,CAAY,YAAA;AAAc;AACnI;;"}

package/dist/esm/foundation/templates/index.d.ts

@@ -0,0 +1,13 @@
+export * from './templateParts';
+export * from './dialogTemplates';
+export * from './stateScreenTemplates';
+export * from './boardScreenTemplate';
+export * from './dashboardScreenTemplate';
+export * from './formScreenTemplate';
+export * from './listScreenTemplate';
+export * from './masterDetailScreenTemplate';
+export * from './recordPageTemplate';
+export * from './wizardScreenTemplate';
+export * from './workspaceScreenTemplate';
+export declare const foundationScreenTemplates: import("@cratis/scene.model/screens").ScreenTemplate[];
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/foundation/templates/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../foundation/templates/index.ts"],"names":[],"mappings":"AAYA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAG1C,eAAO,MAAM,yBAAyB,wDAErC,CAAC"}

package/dist/esm/foundation/templates/index.js

@@ -0,0 +1,27 @@
+import { boardScreenTemplate } from './boardScreenTemplate.js';
+import { dashboardScreenTemplate } from './dashboardScreenTemplate.js';
+import { formScreenTemplate } from './formScreenTemplate.js';
+import { listScreenTemplate } from './listScreenTemplate.js';
+import { masterDetailScreenTemplate } from './masterDetailScreenTemplate.js';
+import { recordPageTemplate } from './recordPageTemplate.js';
+import { wizardScreenTemplate } from './wizardScreenTemplate.js';
+import { workspaceScreenTemplate } from './workspaceScreenTemplate.js';
+export { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts.js';
+export { actionButton, closeDialogBehaviors, closingDialog, dialogActions, dialogMetadata, filterDialogTemplate, foundationDialogTemplates, lookupDialogTemplate, quickCreateDialogTemplate, sideSheetTemplate } from './dialogTemplates.js';
+export { errorScreenTemplate, forbiddenScreenTemplate, foundationTemplateAliases, loginScreenTemplate, notFoundScreenTemplate, stateScreenTemplates } from './stateScreenTemplates.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** The foundation screen templates, in the order the manifest lists them. The workspace comes first: it is the container the master/detail nests in. */ const foundationScreenTemplates = [
+    workspaceScreenTemplate,
+    dashboardScreenTemplate,
+    listScreenTemplate,
+    boardScreenTemplate,
+    masterDetailScreenTemplate,
+    recordPageTemplate,
+    formScreenTemplate,
+    wizardScreenTemplate
+];
+
+export { boardScreenTemplate, dashboardScreenTemplate, formScreenTemplate, foundationScreenTemplates, listScreenTemplate, masterDetailScreenTemplate, recordPageTemplate, wizardScreenTemplate, workspaceScreenTemplate };
+//# sourceMappingURL=index.js.map

package/dist/esm/foundation/templates/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../foundation/templates/index.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 { boardScreenTemplate } from './boardScreenTemplate';\nimport { dashboardScreenTemplate } from './dashboardScreenTemplate';\nimport { formScreenTemplate } from './formScreenTemplate';\nimport { listScreenTemplate } from './listScreenTemplate';\nimport { masterDetailScreenTemplate } from './masterDetailScreenTemplate';\nimport { recordPageTemplate } from './recordPageTemplate';\nimport { wizardScreenTemplate } from './wizardScreenTemplate';\nimport { workspaceScreenTemplate } from './workspaceScreenTemplate';\n\nexport * from './templateParts';\nexport * from './dialogTemplates';\nexport * from './stateScreenTemplates';\nexport * from './boardScreenTemplate';\nexport * from './dashboardScreenTemplate';\nexport * from './formScreenTemplate';\nexport * from './listScreenTemplate';\nexport * from './masterDetailScreenTemplate';\nexport * from './recordPageTemplate';\nexport * from './wizardScreenTemplate';\nexport * from './workspaceScreenTemplate';\n\n/** The foundation screen templates, in the order the manifest lists them. The workspace comes first: it is the container the master/detail nests in. */\nexport const foundationScreenTemplates = [\n    workspaceScreenTemplate, dashboardScreenTemplate, listScreenTemplate, boardScreenTemplate, masterDetailScreenTemplate, recordPageTemplate, formScreenTemplate, wizardScreenTemplate,\n];\n"],"names":["foundationScreenTemplates","workspaceScreenTemplate","dashboardScreenTemplate","listScreenTemplate","boardScreenTemplate","masterDetailScreenTemplate","recordPageTemplate","formScreenTemplate","wizardScreenTemplate"],"mappings":";;;;;;;;;;;;AAAA;AACA;AAuBA,yJACO,MAAMA,yBAAAA,GAA4B;AACrCC,IAAAA,uBAAAA;AAAyBC,IAAAA,uBAAAA;AAAyBC,IAAAA,kBAAAA;AAAoBC,IAAAA,mBAAAA;AAAqBC,IAAAA,0BAAAA;AAA4BC,IAAAA,kBAAAA;AAAoBC,IAAAA,kBAAAA;AAAoBC,IAAAA;;;"}

package/dist/esm/foundation/templates/listScreenTemplate.d.ts

@@ -0,0 +1,3 @@
+import { ScreenTemplate } from '@cratis/scene.model';
+export declare const listScreenTemplate: ScreenTemplate;
+//# sourceMappingURL=listScreenTemplate.d.ts.map

package/dist/esm/foundation/templates/listScreenTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"listScreenTemplate.d.ts","sourceRoot":"","sources":["../../../../foundation/templates/listScreenTemplate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAkB,MAAM,qBAAqB,CAAC;AAQrE,eAAO,MAAM,kBAAkB,EAAE,cAyBhC,CAAC"}

package/dist/esm/foundation/templates/listScreenTemplate.js

@@ -0,0 +1,122 @@
+import { WidthSizeClass } from '@cratis/scene.model';
+import { column, slotLeaf, row } from '../../layouts/flowBuilders.js';
+import { component, fromQuery, foundationTemplateProvenance, thumbnailOf } from './templateParts.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The collection screen: search, filters, a list that is a table, grouped, or cards, a bar that appears when rows are selected, and a footer for paging.
+ * Search, sort, page and selection live in the address, so a link shares the list as it is. On a phone the table becomes cards.
+ */ const listScreenTemplate = {
+    name: 'ListScreen',
+    fitsSlot: 'content',
+    slots: [
+        {
+            name: 'header'
+        },
+        {
+            name: 'toolbar'
+        },
+        {
+            name: 'filters'
+        },
+        {
+            name: 'list'
+        },
+        {
+            name: 'bulkBar'
+        },
+        {
+            name: 'footer'
+        }
+    ],
+    arrangement: {
+        root: column([
+            slotLeaf('header'),
+            row([
+                slotLeaf('toolbar')
+            ], 8),
+            slotLeaf('filters'),
+            slotLeaf('bulkBar'),
+            slotLeaf('list'),
+            slotLeaf('footer')
+        ], 12),
+        overrides: [
+            {
+                width: WidthSizeClass.Compact,
+                root: column([
+                    slotLeaf('header'),
+                    slotLeaf('toolbar'),
+                    slotLeaf('filters'),
+                    slotLeaf('bulkBar'),
+                    slotLeaf('list'),
+                    slotLeaf('footer')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        header: [
+            component('list-header', 'pageHeader', {
+                title: 'Deals',
+                subtitle: 'Every open and closed deal'
+            })
+        ],
+        toolbar: [
+            component('list-search', 'globalSearch', {
+                placeholder: 'Search deals',
+                label: 'Search deals',
+                urlKey: 'dealsq'
+            }),
+            component('list-views', 'savedViewsMenu', {
+                views: fromQuery('DealViews'),
+                savePermission: 'enabled',
+                managePermission: 'enabled'
+            }),
+            component('list-columns', 'columnChooser', {
+                columns: fromQuery('DealColumnChoices')
+            })
+        ],
+        filters: [
+            component('list-filter', 'filterBuilder', {
+                fields: fromQuery('DealFilterFields')
+            })
+        ],
+        list: [
+            component('list-records', 'dataList', {
+                label: 'Deals',
+                rows: fromQuery('Deals'),
+                columns: fromQuery('DealColumns'),
+                titleField: 'name',
+                selectionMode: 'multiple',
+                pageSize: 10,
+                rowActions: [
+                    'Open',
+                    'Archive'
+                ],
+                urlKey: 'deals'
+            })
+        ],
+        bulkBar: [
+            component('list-bulk', 'bulkBar', {
+                selection: fromQuery('DealSelection'),
+                actions: [
+                    'Assign',
+                    'Archive'
+                ]
+            })
+        ],
+        footer: []
+    },
+    displayName: 'List',
+    description: 'A searchable, filterable collection that is a table, grouped or cards, with a bulk bar for selected rows.',
+    metadata: {
+        ...foundationTemplateProvenance,
+        type: 'List',
+        category: 'Foundation / List',
+        thumbnail: thumbnailOf('ListScreen')
+    }
+};
+
+export { listScreenTemplate };
+//# sourceMappingURL=listScreenTemplate.js.map

package/dist/esm/foundation/templates/listScreenTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"listScreenTemplate.js","sources":["../../../../foundation/templates/listScreenTemplate.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 { ScreenTemplate, WidthSizeClass } from '@cratis/scene.model';\nimport { column, grid, row, slotLeaf } from '../../layouts/flowBuilders';\nimport { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';\n\n/**\n * The collection screen: search, filters, a list that is a table, grouped, or cards, a bar that appears when rows are selected, and a footer for paging.\n * Search, sort, page and selection live in the address, so a link shares the list as it is. On a phone the table becomes cards.\n */\nexport const listScreenTemplate: ScreenTemplate = {\n    name: 'ListScreen',\n    fitsSlot: 'content',\n    slots: [{ name: 'header' }, { name: 'toolbar' }, { name: 'filters' }, { name: 'list' }, { name: 'bulkBar' }, { name: 'footer' }],\n    arrangement: {\n        root: column([slotLeaf('header'), row([slotLeaf('toolbar')], 8), slotLeaf('filters'), slotLeaf('bulkBar'), slotLeaf('list'), slotLeaf('footer')], 12),\n        overrides: [{ width: WidthSizeClass.Compact, root: column([slotLeaf('header'), slotLeaf('toolbar'), slotLeaf('filters'), slotLeaf('bulkBar'), slotLeaf('list'), slotLeaf('footer')], 16) }],\n    },\n    content: {\n        header: [component('list-header', 'pageHeader', { title: 'Deals', subtitle: 'Every open and closed deal' })],\n        toolbar: [\n            component('list-search', 'globalSearch', { placeholder: 'Search deals', label: 'Search deals', urlKey: 'dealsq' }),\n            component('list-views', 'savedViewsMenu', { views: fromQuery('DealViews'), savePermission: 'enabled', managePermission: 'enabled' }),\n            component('list-columns', 'columnChooser', { columns: fromQuery('DealColumnChoices') }),\n        ],\n        filters: [component('list-filter', 'filterBuilder', { fields: fromQuery('DealFilterFields') })],\n        list: [component('list-records', 'dataList', {\n            label: 'Deals', rows: fromQuery('Deals'), columns: fromQuery('DealColumns'), titleField: 'name', selectionMode: 'multiple', pageSize: 10, rowActions: ['Open', 'Archive'], urlKey: 'deals',\n        })],\n        bulkBar: [component('list-bulk', 'bulkBar', { selection: fromQuery('DealSelection'), actions: ['Assign', 'Archive'] })],\n        footer: [],\n    },\n    displayName: 'List',\n    description: 'A searchable, filterable collection that is a table, grouped or cards, with a bulk bar for selected rows.',\n    metadata: { ...foundationTemplateProvenance, type: 'List', category: 'Foundation / List', thumbnail: thumbnailOf('ListScreen') },\n};\n"],"names":["listScreenTemplate","name","fitsSlot","slots","arrangement","root","column","slotLeaf","row","overrides","width","WidthSizeClass","Compact","content","header","component","title","subtitle","toolbar","placeholder","label","urlKey","views","fromQuery","savePermission","managePermission","columns","filters","fields","list","rows","titleField","selectionMode","pageSize","rowActions","bulkBar","selection","actions","footer","displayName","description","metadata","foundationTemplateProvenance","type","category","thumbnail","thumbnailOf"],"mappings":"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"}

package/dist/esm/foundation/templates/masterDetailScreenTemplate.d.ts

@@ -0,0 +1,3 @@
+import { ScreenTemplate } from '@cratis/scene.model';
+export declare const masterDetailScreenTemplate: ScreenTemplate;
+//# sourceMappingURL=masterDetailScreenTemplate.d.ts.map

package/dist/esm/foundation/templates/masterDetailScreenTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterDetailScreenTemplate.d.ts","sourceRoot":"","sources":["../../../../foundation/templates/masterDetailScreenTemplate.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAkB,MAAM,qBAAqB,CAAC;AAQrE,eAAO,MAAM,0BAA0B,EAAE,cAgBxC,CAAC"}

package/dist/esm/foundation/templates/masterDetailScreenTemplate.js

@@ -0,0 +1,77 @@
+import { WidthSizeClass } from '@cratis/scene.model';
+import { column, slotLeaf, grid } from '../../layouts/flowBuilders.js';
+import { component, fromQuery, foundationTemplateProvenance, thumbnailOf } from './templateParts.js';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * The master/detail: a list beside the selected record. The selection lives in the address, so a link opens a record and the back button returns to the
+ * list; on a phone the two become a navigation stack - the list, then the record with a way back. It lives in a module workspace's `moduleContent`.
+ */ const masterDetailScreenTemplate = {
+    name: 'MasterDetailScreen',
+    fitsSlot: 'WorkspaceScreen.moduleContent',
+    slots: [
+        {
+            name: 'list'
+        },
+        {
+            name: 'details'
+        }
+    ],
+    arrangement: {
+        root: grid([
+            slotLeaf('list'),
+            slotLeaf('details', {
+                span: 2
+            })
+        ], 3, 16),
+        overrides: [
+            {
+                width: WidthSizeClass.Compact,
+                root: column([
+                    slotLeaf('list'),
+                    slotLeaf('details')
+                ], 16)
+            }
+        ]
+    },
+    content: {
+        list: [
+            component('md-list', 'dataList', {
+                label: 'Accounts',
+                rows: fromQuery('Deals'),
+                columns: fromQuery('DealColumns'),
+                titleField: 'name',
+                selectionMode: 'single',
+                urlKey: 'md'
+            })
+        ],
+        details: [
+            component('md-detail', 'tabSet', {
+                tabs: fromQuery('RecordTabs'),
+                urlKey: 'mdtab',
+                label: 'Account'
+            })
+        ]
+    },
+    displayName: 'Master/detail with address selection',
+    description: 'A list beside the selected record that stacks into a navigation stack on a phone.',
+    outlets: [
+        {
+            name: 'master-detail.detail',
+            description: 'The selected record.',
+            accepts: [
+                'Detail'
+            ]
+        }
+    ],
+    metadata: {
+        ...foundationTemplateProvenance,
+        type: 'Workspace',
+        category: 'Foundation / Workspace',
+        thumbnail: thumbnailOf('MasterDetailScreen')
+    }
+};
+
+export { masterDetailScreenTemplate };
+//# sourceMappingURL=masterDetailScreenTemplate.js.map