@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/feedback/dialog/DialogLayout.d.ts

@@ -0,0 +1,20 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { PropsWithChildren, ReactNode } from 'react';
+export declare const DialogLayout: import("react").ForwardRefExoticComponent<{
+    children?: ReactNode | undefined;
+} & {
+    className?: string;
+    containerClassName?: string;
+    title?: string;
+    actions?: ReactNode;
+    onClose?: Callback.Void;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace DialogLayout {
+    type Props = PropsWithChildren & {
+        className?: string;
+        containerClassName?: string;
+        title?: string;
+        actions?: ReactNode;
+        onClose?: Callback.Void;
+    };
+}

package/dist/core/components/feedback/dialog/DialogLayout.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const IconButton_1 = require("../../interaction/IconButton");
+// component
+exports.DialogLayout = (0, react_1.forwardRef)(function DialogLayout({ className, containerClassName, title, actions, onClose, children }, ref) {
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'min-w-[400px] sm:max-w-screen-sm max-h-dvh', 'flex flex-col py-l8 bg-modal-background rounded-md shadow-dialog'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-h-l12 flex justify-between items-start px-l8", children: [title &&
+                        (0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: title }), onClose &&
+                        (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { icon: "X", size: "sm", onClick: onClose })] }), (0, jsx_runtime_1.jsx)("div", { ref: ref, className: containerClassName, children: children }), actions &&
+                (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center gap-l4 pt-l8 px-l8", children: actions })] }));
+});

package/dist/core/components/feedback/dialog/MinimalDialogLayout.d.ts

@@ -0,0 +1,20 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { PropsWithChildren, ReactNode } from 'react';
+import { Button } from '../../interaction/Button';
+export declare const MinimalDialogLayout: import("react").ForwardRefExoticComponent<{
+    children?: ReactNode | undefined;
+} & {
+    className?: string;
+    title: string;
+    caption?: ReactNode;
+    onClose?: Callback.Void;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare namespace MinimalDialogLayout {
+    type Props = PropsWithChildren & {
+        className?: string;
+        title: string;
+        caption?: ReactNode;
+        onClose?: Callback.Void;
+    };
+    type Button = Omit<Button.Props, 'disabled' | 'onClick'>;
+}

package/dist/core/components/feedback/dialog/MinimalDialogLayout.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MinimalDialogLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const IconButton_1 = require("../../interaction/IconButton");
+// component
+exports.MinimalDialogLayout = (0, react_1.forwardRef)(function DialogLayout({ className, title, caption, onClose, children }, ref) {
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'min-w-[400px] sm:max-w-screen-sm max-h-dvh', 'flex flex-col py-l8 bg-surface1 rounded-md shadow-popup'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-start justify-between gap-l8 px-l8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: title }), caption &&
+                                (0, jsx_runtime_1.jsx)("div", { className: "body-sm text-content-secondary", children: caption })] }), (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { className: (0, classnames_1.default)('text-content-primary interpolate-slow', {
+                            'opacity-none pointer-events-none': !onClose,
+                        }), icon: "X", disabled: !onClose, onClick: onClose })] }), (0, jsx_runtime_1.jsx)("div", { ref: ref, className: "max-h-full flex-1 pt-l8 px-l8 overflow-x-visible overflow-y-scroll", children: children })] }));
+});

package/dist/core/components/feedback/dialog/Notify.d.ts

@@ -0,0 +1,19 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+import { DialogContext } from './DialogContext';
+export declare function Notify({ options }: Notify.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Notify {
+    type Props = {
+        options: Options;
+    };
+    type Options = {
+        type: 'notify';
+        title: string;
+        message?: ReactNode;
+        confirmLabel?: string;
+        callback: Callback.Void;
+    };
+    namespace Options {
+        function guard(options: DialogContext.Options): options is Options;
+    }
+}

package/dist/core/components/feedback/dialog/Notify.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notify = Notify;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = require("../../interaction/Button");
+const StatusIcon_1 = require("../StatusIcon");
+const DialogLayout_1 = require("./DialogLayout");
+// component
+function Notify({ options }) {
+    // bind data + state
+    const { title, message, confirmLabel = 'Okay', callback } = options;
+    // render content
+    return ((0, jsx_runtime_1.jsx)(DialogLayout_1.DialogLayout, { className: "px-l8", actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "secondary", autoFocus: true, onClick: () => callback(), children: confirmLabel }) }), children: (0, jsx_runtime_1.jsxs)("section", { className: "flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)(StatusIcon_1.StatusIcon, { variant: "info", size: "lg" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l2", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-md text-content-primary", children: title }), typeof message === 'string'
+                            ?
+                                (0, jsx_runtime_1.jsx)("span", { className: "body-sm text-content-secondary text-pretty", children: message })
+                            : message] })] }) }));
+}
+// extension
+(function (Notify) {
+    // extension
+    let Options;
+    (function (Options) {
+        function guard(options) {
+            return options.type === 'notify';
+        }
+        Options.guard = guard;
+    })(Options = Notify.Options || (Notify.Options = {}));
+})(Notify || (exports.Notify = Notify = {}));

package/dist/core/components/feedback/dialog/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DialogContainer';
+export * from './DialogLayout';
+export * from './MinimalDialogLayout';
+export * from './useDialog';

package/dist/core/components/feedback/dialog/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DialogContainer"), exports);
+__exportStar(require("./DialogLayout"), exports);
+__exportStar(require("./MinimalDialogLayout"), exports);
+__exportStar(require("./useDialog"), exports);

package/dist/core/components/feedback/dialog/useDialog.d.ts

@@ -0,0 +1,24 @@
+import { Subject } from 'rxjs';
+import { Confirm } from './Confirm';
+import { DialogContext } from './DialogContext';
+import { Custom } from './Custom';
+import { Notify } from './Notify';
+export declare function useDialog(): DialogProxy;
+export declare class DialogProxy {
+    private readonly _eventBus;
+    constructor(_eventBus: Subject<DialogContext.Options | undefined>);
+    notify(options: DialogProxy.NotifyArgs): Promise<void>;
+    confirm(options: DialogProxy.ConfirmArgs): Promise<boolean>;
+    showError({ message, action }: DialogProxy.ShowErrorArgs): Promise<void>;
+    custom(options: DialogProxy.CustomArgs): Promise<void>;
+}
+export declare namespace DialogProxy {
+    type NotifyArgs = Omit<Notify.Options, 'type' | 'callback'>;
+    type ConfirmArgs = Omit<Confirm.Options, 'type' | 'callback'>;
+    type CustomArgs = Omit<Custom.Options, 'type' | 'callback'>;
+    type ShowErrorArgs = {
+        message: string;
+        action?: ErrorAction;
+    };
+    type ErrorAction = 'reload';
+}

package/dist/core/components/feedback/dialog/useDialog.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogProxy = void 0;
+exports.useDialog = useDialog;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const DialogContext_1 = require("./DialogContext");
+// hook
+function useDialog() {
+    // bind context
+    const { eventBus } = (0, react_1.useContext)(DialogContext_1.DialogContext);
+    // memoize proxy
+    return (0, react_1.useMemo)(() => new DialogProxy(eventBus), [eventBus]);
+}
+// class
+class DialogProxy {
+    constructor(_eventBus) {
+        this._eventBus = _eventBus;
+    }
+    async notify(options) {
+        // create a deferral
+        const deferral = new funnel_core_1.Deferral();
+        // bind the options
+        this._eventBus.next(Object.assign(Object.assign({}, options), { type: 'notify', callback: () => {
+                this._eventBus.next(undefined);
+                deferral.resolve();
+            } }));
+        // return deferral
+        return deferral.promise;
+    }
+    async confirm(options) {
+        // create a deferral
+        const deferral = new funnel_core_1.Deferral();
+        // bind the options
+        this._eventBus.next(Object.assign(Object.assign({}, options), { type: 'confirm', callback: result => {
+                this._eventBus.next(undefined);
+                deferral.resolve(result);
+            } }));
+        // return deferral
+        return deferral.promise;
+    }
+    async showError({ message, action }) {
+        // create a deferral
+        const deferral = new funnel_core_1.Deferral();
+        // bind the options
+        this._eventBus.next({
+            type: 'notify',
+            title: 'Error',
+            message,
+            confirmLabel: action === 'reload' ? 'Reload' : undefined,
+            callback: () => {
+                // reload if required
+                if (action === 'reload') {
+                    window.location.reload();
+                }
+                // or callback
+                else {
+                    this._eventBus.next(undefined);
+                    deferral.resolve();
+                }
+            }
+        });
+        // return deferral
+        return deferral.promise;
+    }
+    custom(options) {
+        // create a deferral
+        const deferral = new funnel_core_1.Deferral();
+        // bind the options
+        this._eventBus.next(Object.assign(Object.assign({}, options), { type: 'custom', callback: () => {
+                this._eventBus.next(undefined);
+                deferral.resolve();
+            } }));
+        // return deferral
+        return deferral.promise;
+    }
+}
+exports.DialogProxy = DialogProxy;

package/dist/core/components/feedback/index.d.ts

@@ -0,0 +1,11 @@
+export * from './dialog';
+export * from './Badge';
+export * from './CountBadge';
+export * from './EmptyState';
+export * from './ErrorMessage';
+export * from './Note';
+export * from './ProgressBar';
+export * from './SelectionDecorator';
+export * from './StatusBadge';
+export * from './StatusChip';
+export * from './StatusIcon';

package/dist/core/components/feedback/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./dialog"), exports);
+__exportStar(require("./Badge"), exports);
+__exportStar(require("./CountBadge"), exports);
+__exportStar(require("./EmptyState"), exports);
+__exportStar(require("./ErrorMessage"), exports);
+__exportStar(require("./Note"), exports);
+__exportStar(require("./ProgressBar"), exports);
+__exportStar(require("./SelectionDecorator"), exports);
+__exportStar(require("./StatusBadge"), exports);
+__exportStar(require("./StatusChip"), exports);
+__exportStar(require("./StatusIcon"), exports);

package/dist/core/components/fields/BooleanField.d.ts

@@ -0,0 +1,10 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import { FieldLayout } from './FieldLayout';
+export declare function BooleanField({ className, field, variant }: BooleanField.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace BooleanField {
+    type Props = {
+        className?: string;
+        field: Field<Schema.BooleanField>;
+        variant?: FieldLayout.Variant;
+    };
+}

package/dist/core/components/fields/BooleanField.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BooleanField = BooleanField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("../../hooks");
+const interaction_1 = require("../interaction");
+const FieldLayout_1 = require("./FieldLayout");
+// component
+function BooleanField({ className, field, variant = 'minimal' }) {
+    // bind toolbar
+    const { id, name, value: data, schema } = field;
+    const value = funnel_core_1.Schema.BooleanField.Value.fromData(data);
+    const { semantics, defaultValue } = schema;
+    // sync field
+    (0, hooks_1.useField)(field);
+    // render toggle
+    let component;
+    switch (semantics) {
+        case 'check':
+            component = ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)(interaction_1.Checkbox, { id: id, checked: value !== null && value !== void 0 ? value : defaultValue, onChange: value => field.value = funnel_core_1.Schema.BooleanField.Value.toData(value) }), (0, jsx_runtime_1.jsx)("label", { className: "cursor-pointer select-none", htmlFor: id, children: name })] }));
+            break;
+        case 'toggle':
+            component = ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)(interaction_1.Toggle, { id: id, checked: value !== null && value !== void 0 ? value : defaultValue, onChange: value => field.value = funnel_core_1.Schema.BooleanField.Value.toData(value) }), (0, jsx_runtime_1.jsx)("label", { className: "cursor-pointer select-none", htmlFor: id, children: name })] }));
+            break;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: variant, children: component }));
+}

package/dist/core/components/fields/DateField.d.ts

@@ -0,0 +1,10 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+import { FieldLayout } from './FieldLayout';
+export declare function DateField({ className, field, variant }: DateField.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace DateField {
+    type Props = {
+        className?: string;
+        field: Field<Schema.DateField>;
+        variant?: FieldLayout.Variant;
+    };
+}

package/dist/core/components/fields/DateField.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateField = DateField;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const hooks_1 = require("../../hooks");
+const interaction_1 = require("../interaction");
+const FieldLayout_1 = require("./FieldLayout");
+// component
+function DateField({ className, field, variant }) {
+    // bind toolbar
+    const { id, name, value: data, schema } = field;
+    const value = funnel_core_1.Schema.DateField.Value.fromData(data);
+    // sync field
+    (0, hooks_1.useField)(field);
+    // render
+    return ((0, jsx_runtime_1.jsx)(FieldLayout_1.FieldLayout, { className: className, field: field, variant: variant, children: (0, jsx_runtime_1.jsx)(interaction_1.DatePicker, { minDate: schema.minDate, maxDate: schema.maxDate, selected: value, onChange: value => field.value = value && funnel_core_1.Schema.DateField.Value.toData(value) }) }));
+}

package/dist/core/components/fields/DynamicPagesEditor.d.ts

@@ -0,0 +1,16 @@
+import { Field, Schema } from '@nascentdigital/funnel-core';
+export declare function DynamicPagesEditor({ className, dynamicPages }: DynamicPagesEditor.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace DynamicPagesEditor {
+    type Props = {
+        className?: string;
+        dynamicPages: Field<Schema.DynamicPagesField>;
+    };
+    type ItemData = Schema.Field.Data<Schema.PageField<'preview'>> & {
+        id: string;
+        schema: string;
+    };
+    type PageSortingStatus = {
+        page: Schema.Page;
+        tags?: Schema.Tag[];
+    };
+}

package/dist/core/components/fields/DynamicPagesEditor.js

@@ -0,0 +1,212 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DynamicPagesEditor = DynamicPagesEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const hooks_1 = require("../../hooks");
+const feedback_1 = require("../feedback");
+const interaction_1 = require("../interaction");
+const dynamicPages_1 = require("./dynamicPages");
+const page_1 = require("./page");
+// component
+function DynamicPagesEditor({ className, dynamicPages }) {
+    var _a, _b;
+    // get language and region
+    const page = (0, hooks_1.usePage)();
+    const language = page.language;
+    const region = page.region;
+    // bind hooks
+    const dialog = (0, feedback_1.useDialog)();
+    const pagePickerRef = (0, react_1.useRef)(null);
+    const pagePriorityRef = (0, react_1.useRef)(null);
+    const [multiSelectRef, multiSelect] = (0, interaction_1.useMultiSelectControls)();
+    const [pickingPage, setPickingPage] = (0, react_1.useState)(false);
+    const [reorderedOn, setReorderedOn] = (0, react_1.useState)(0);
+    // calculated values
+    const { schema } = dynamicPages;
+    const { description, size } = schema;
+    const { sort = 'latest', types = [], staticPages = [] } = (_b = (_a = dynamicPages.value) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : {};
+    const staticPageIds = staticPages.map(page => page.value.id);
+    const numPageGhosts = size - staticPages.length;
+    const staticPagesSizeValid = staticPages.length <= size;
+    const { selecting = false, selectedIds = [] } = multiSelect !== null && multiSelect !== void 0 ? multiSelect : {};
+    // all allowed page schemas (widest scope which comes from schema)
+    // NOTE: undefined if all types are enabled
+    const allowedPageSchemas = (0, react_1.useMemo)(() => schema.types === 'all'
+        ? undefined
+        : schema.types.map(type => funnel_core_1.Schema.Site.getPage(type, region)), [schema, region]);
+    // filtered page schemas (filtered page schemas that are allowed from schema)
+    const filteredPageSchemas = (0, react_1.useMemo)(() => types.map(type => funnel_core_1.Schema.Site.getPage(type, region)), [types, region]);
+    // determine if any allowed pages (widest scope) contain tags
+    const hasTags = (0, react_1.useMemo)(() => {
+        // assume tags if everything is allowed
+        if (!allowedPageSchemas) {
+            return true;
+        }
+        // check if any time has tag groups
+        return allowedPageSchemas.some(page => page.tags.length > 0);
+    }, [allowedPageSchemas]);
+    // sorting status (used for feedback)
+    const sortingStatus = (0, react_1.useMemo)(() => {
+        // when sorting by latest just show filtered page types
+        if (sort === 'latest') {
+            return filteredPageSchemas.map(page => ({ page }));
+        }
+        // otherwise for each page type, get configured tags
+        else {
+            return sort.map(({ type, tags: tagsData }) => {
+                const page = funnel_core_1.Schema.Site.getPage(type, region);
+                const tags = tagsData ? page.tags.flatMap(group => group.parse(tagsData)) : undefined;
+                return { page, tags };
+            });
+        }
+    }, [sort, filteredPageSchemas, region]);
+    // sync field
+    (0, hooks_1.useField)(dynamicPages);
+    // set initial value
+    (0, react_1.useEffect)(() => {
+        // bail if there is a value
+        if (dynamicPages.value) {
+            return;
+        }
+        // set initial value
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData({
+            types: schema.types === 'all' ? undefined : schema.types,
+            sort: 'latest'
+        });
+    }, [dynamicPages, schema]);
+    // helpers
+    const onPickPage = async () => {
+        var _a, _b, _c;
+        // pick page (ignore if nothing got picked)
+        setPickingPage(true);
+        const pageRef = await ((_a = pagePickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({
+            pageTypes: schema.types,
+            disabledIds: [page.id, ...staticPageIds]
+        }));
+        setPickingPage(false);
+        // bail if no item selected
+        if (!pageRef) {
+            return;
+        }
+        // create item for array
+        console.debug('[DynamicPagesEditor] picked page', pageRef);
+        const newPageItem = Object.assign({ id: funnel_core_1.Value.uuid(), schema: 'page' }, funnel_core_1.Schema.PageField.Value.toData({
+            id: pageRef.id,
+            type: pageRef.template.type,
+            scope: 'preview'
+        }));
+        // update field value
+        const { value } = (_b = dynamicPages.value) !== null && _b !== void 0 ? _b : {};
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: [...(_c = value === null || value === void 0 ? void 0 : value.staticPages) !== null && _c !== void 0 ? _c : [], newPageItem] }));
+    };
+    const onPagePriorityChange = async () => {
+        var _a, _b;
+        // open dialog
+        const result = await ((_a = pagePriorityRef.current) === null || _a === void 0 ? void 0 : _a.open({ types, sort }));
+        console.debug('[DynamicPagesEditor] priority result', result);
+        // bail if no result (canceled)
+        if (!result) {
+            return;
+        }
+        // update field value
+        const { value } = (_b = dynamicPages.value) !== null && _b !== void 0 ? _b : {};
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { sort: result.length > 0 ? result : 'latest' }));
+    };
+    const onPageReorder = ({ items, fromIndex, toIndex }) => {
+        var _a;
+        // throw if from/to are out-of-bounds
+        const maxIndex = items.length - 1;
+        if (fromIndex < 0 || toIndex < 0 || fromIndex > maxIndex || toIndex > maxIndex) {
+            throw new funnel_core_1.ArgumentError(`Move indices of ${fromIndex} -> ${toIndex} fall outside of range [${0}, ${maxIndex}]`);
+        }
+        // ignore if from/to are same
+        if (fromIndex === toIndex) {
+            return;
+        }
+        // create new items
+        const updatedItems = items.slice();
+        const [item] = updatedItems.splice(fromIndex, 1);
+        updatedItems.splice(toIndex, 0, item);
+        // mark reordered (locks list until updates are saved)
+        setReorderedOn(Date.now());
+        // update field value
+        const { value } = (_a = dynamicPages.value) !== null && _a !== void 0 ? _a : {};
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedItems }));
+    };
+    const onSelectPageCard = (id) => {
+        // add/remove page id
+        const selected = selectedIds.includes(id);
+        multiSelect === null || multiSelect === void 0 ? void 0 : multiSelect.setSelectedIds(ids => selected
+            // remove if selected
+            ? ids.filter(itemId => itemId !== id)
+            // just add
+            : [...ids, id]);
+    };
+    const onPageCardClick = async (id) => {
+        var _a, _b, _c;
+        // pick page (ignore if nothing got picked)
+        setPickingPage(true);
+        const pageRef = await ((_a = pagePickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({
+            pageTypes: schema.types,
+            disabledIds: [page.id, ...staticPageIds]
+        }));
+        setPickingPage(false);
+        // bail if no item selected
+        if (!pageRef) {
+            return;
+        }
+        // new page item
+        const newPageItem = Object.assign({ id: funnel_core_1.Value.uuid(), schema: 'page' }, funnel_core_1.Schema.PageField.Value.toData({
+            id: pageRef.id,
+            type: pageRef.template.type,
+            scope: 'preview'
+        }));
+        // update value
+        const { value } = (_b = dynamicPages.value) !== null && _b !== void 0 ? _b : {};
+        const staticPages = (_c = value === null || value === void 0 ? void 0 : value.staticPages) !== null && _c !== void 0 ? _c : [];
+        const replaceIndex = staticPages.findIndex(page => page.value.id === id);
+        const updatedStaticPages = staticPages.with(replaceIndex, newPageItem);
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedStaticPages }));
+    };
+    const onDeleteSelected = async () => {
+        var _a, _b;
+        // skip if there's no selector
+        if (!multiSelect) {
+            return;
+        }
+        // confirm (bail if not confirmed)
+        const confirmed = await dialog.confirm({
+            title: 'Are you sure you want to delete these items?',
+            message: 'You might not be able to recover them later.',
+            confirmLabel: 'Delete',
+            destructive: true
+        });
+        if (!confirmed) {
+            return;
+        }
+        // delete items
+        const { value } = (_a = dynamicPages.value) !== null && _a !== void 0 ? _a : {};
+        const updatedStaticPages = (_b = value === null || value === void 0 ? void 0 : value.staticPages) === null || _b === void 0 ? void 0 : _b.filter(page => !multiSelect.selectedIds.includes(page.value.id));
+        dynamicPages.value = funnel_core_1.Schema.DynamicPagesField.Value.toData(Object.assign(Object.assign({}, value), { staticPages: updatedStaticPages }));
+        // reset/close dialog
+        multiSelect.setSelectedIds([]);
+        multiSelect.setSelecting(false);
+    };
+    // return
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col overflow-hidden', 'border border-solid border-border-l1 rounded-lg'), children: [(0, jsx_runtime_1.jsxs)("header", { className: "flex items-center gap-l4 p-l5 label-md bg-surface2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-content-primary", children: schema.name }), (0, jsx_runtime_1.jsxs)("span", { className: (0, classnames_1.default)({
+                            'text-info-content': staticPagesSizeValid,
+                            'text-destructive-content': !staticPagesSizeValid
+                        }), children: ["(", size, " items)"] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l6 p-l6", children: [description &&
+                        (0, jsx_runtime_1.jsx)(feedback_1.Note, { variant: "tip", children: description }), (0, jsx_runtime_1.jsxs)("nav", { className: "w-full flex flex-wrap items-center gap-l5", children: [hasTags &&
+                                (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "text", size: "sm", iconLeft: "Settings", onClick: onPagePriorityChange, children: "Priority Settings" }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "text", size: "sm", iconLeft: "Plus", onClick: onPickPage, disabled: selecting, children: "Pin Page" }), staticPageIds.length > 0 &&
+                                (0, jsx_runtime_1.jsx)(interaction_1.MultiSelectControls, { ref: multiSelectRef, ids: staticPageIds, actions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "destructive", size: "sm", onClick: onDeleteSelected, disabled: selectedIds.length === 0, children: "Unpin" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col", children: sortingStatus.map(status => (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-content-secondary label-xs", children: "Type" }), (0, jsx_runtime_1.jsx)(feedback_1.Badge, { label: status.page.name })] }), status.tags &&
+                                    (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-l2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-content-secondary label-xs", children: "Criteria" }), status.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { label: tag.name }))] })] })) }), (0, jsx_runtime_1.jsx)(interaction_1.Sortable, { className: "@container flex flex-wrap gap-l6", items: staticPages, disabled: selecting, enableItemClick: true, renderItem: item => (0, jsx_runtime_1.jsx)(dynamicPages_1.PageCard, { pageId: item.value.id, selected: selectedIds.includes(item.value.id), selecting: selecting, onClick: () => selecting
+                                ? onSelectPageCard(item.value.id)
+                                : onPageCardClick(item.value.id) }), onChange: onPageReorder, children: Array.from({ length: numPageGhosts }, (_, index) => (0, jsx_runtime_1.jsx)(dynamicPages_1.PageGhostCard, { pageSchemas: filteredPageSchemas }, `ghost-${index}`)) })] }), (0, jsx_runtime_1.jsx)(page_1.PagePicker, { ref: pagePickerRef, language: language }), (0, jsx_runtime_1.jsx)(dynamicPages_1.PagePriorityDialog, { ref: pagePriorityRef, region: region })] }));
+}

package/dist/core/components/fields/EmptyFieldCard.d.ts

@@ -0,0 +1,12 @@
+import { Callback, Field, ObjectField, Schema } from '@nascentdigital/funnel-core';
+export declare function EmptyFieldCard({ className, schema, field, onClick, onCreated, onEditing }: EmptyFieldCard.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace EmptyFieldCard {
+    type Props = {
+        className?: string;
+        schema: Schema.Field.Type;
+        field?: Field | ObjectField;
+        onClick?: Callback.Void;
+        onCreated?: Callback<Schema.Field.Data>;
+        onEditing?: Callback<boolean>;
+    };
+}