@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/interaction/menu/MenuList.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuList = MenuList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const MenuButton_1 = require("./MenuButton");
+const MenuItem_1 = require("./MenuItem");
+// component
+function MenuList({ className, items = [], selectedItem, onItemClick = funnel_core_1.Fn.NoOp }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l4 p-l4'), children: items.map((item, index) => {
+            if (MenuItem_1.MenuItem.Divider.filter(item)) {
+                return ((0, jsx_runtime_1.jsx)("li", { className: "after:content-empty after:block h-px bg-border-l1 my-l4" }, `divider_${index}`));
+            }
+            // item
+            else if (MenuItem_1.MenuItem.Option.filter(item)) {
+                return ((0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(MenuButton_1.MenuButton, { label: item.label, caption: item.caption, icon: item.icon, iconSize: item.iconSize, destructive: item.destructive, disabled: item.disabled, onClick: () => onItemClick(item.id), selected: selectedItem === item.id }) }, item.id));
+            }
+            // or label
+            else {
+                return ((0, jsx_runtime_1.jsx)("li", { className: "MenuList-label", children: item.label }, `label_${item.label}`));
+            }
+        }) }));
+}

package/dist/core/components/interaction/menu/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Menu';
+export * from './MenuButton';
+export * from './MenuItem';
+export * from './MenuList';
+export * from './useMenuController';

package/dist/core/components/interaction/menu/index.js

@@ -0,0 +1,21 @@
+"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("./Menu"), exports);
+__exportStar(require("./MenuButton"), exports);
+__exportStar(require("./MenuItem"), exports);
+__exportStar(require("./MenuList"), exports);
+__exportStar(require("./useMenuController"), exports);

package/dist/core/components/interaction/menu/useMenuController.d.ts

@@ -0,0 +1,22 @@
+import { Observable } from 'rxjs';
+import { MenuItem } from './MenuItem';
+export declare function useMenuController<TItemId extends string = string, TContext = any>(items?: ReadonlyArray<MenuItem<TItemId>>): MenuController<TItemId, TContext>;
+export declare class MenuController<TItemId extends string, TContext = any> {
+    private readonly _changed$;
+    private _items?;
+    private _selectedItem?;
+    private _anchor?;
+    constructor(items?: ReadonlyArray<MenuItem<TItemId>>);
+    get items(): ReadonlyArray<MenuItem<TItemId>>;
+    set items(items: ReadonlyArray<MenuItem<TItemId>> | undefined);
+    get selectedItem(): TItemId | undefined;
+    set selectedItem(item: TItemId | undefined);
+    get anchor(): HTMLElement | undefined;
+    private _context?;
+    get context(): TContext | undefined;
+    get changed$(): Observable<Date>;
+    get isOpen(): boolean;
+    open(anchor: HTMLElement, context?: TContext): void;
+    close(): void;
+    private raiseChange;
+}

package/dist/core/components/interaction/menu/useMenuController.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuController = void 0;
+exports.useMenuController = useMenuController;
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+// hook
+function useMenuController(items) {
+    // create menu controller
+    const [, setUpdatedAt] = (0, react_1.useState)(0);
+    const menuItems = (0, client_1.useLatestValue)(items);
+    const controller = (0, react_1.useMemo)(() => new MenuController(menuItems), [menuItems]);
+    // update whenever controller changes
+    (0, react_1.useEffect)(() => {
+        const subscription = controller.changed$
+            .subscribe(date => setUpdatedAt(date.getTime()));
+        return () => subscription.unsubscribe();
+    }, [controller]);
+    // return controller
+    return controller;
+}
+// class
+class MenuController {
+    constructor(items) {
+        // initialize instance variables
+        this._changed$ = new rxjs_1.Subject();
+        this._items = items;
+    }
+    get items() {
+        var _a;
+        return (_a = this._items) !== null && _a !== void 0 ? _a : [];
+    }
+    set items(items) {
+        this._items = items;
+        this.raiseChange();
+    }
+    get selectedItem() {
+        return this._selectedItem;
+    }
+    set selectedItem(item) {
+        this._selectedItem = item;
+        this.raiseChange();
+    }
+    get anchor() {
+        return this._anchor;
+    }
+    get context() {
+        return this._context;
+    }
+    get changed$() {
+        return this._changed$;
+    }
+    get isOpen() {
+        return !!this._anchor;
+    }
+    open(anchor, context) {
+        this._anchor = anchor;
+        this._context = context;
+        this.raiseChange();
+    }
+    close() {
+        delete this._anchor;
+        this.raiseChange();
+    }
+    raiseChange() {
+        this._changed$.next(new Date());
+    }
+}
+exports.MenuController = MenuController;

package/dist/core/components/interaction/table/Table.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactElement, ReactNode } from 'react';
+import { TableItem } from './TableItem';
+export declare function Table({ className, title, actions, nested, children }: Table.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Table {
+    type Props = Omit<HTMLAttributes<HTMLUListElement>, 'title' | 'children'> & {
+        title?: string;
+        actions?: ReactNode;
+        nested?: boolean;
+        children: ReactElement<Table.Props> | ReactElement<TableItem.Props> | ReactElement<TableItem.Props>[] | undefined;
+    };
+}

package/dist/core/components/interaction/table/Table.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = Table;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+// component
+function Table({ className, title, actions, nested = false, children }) {
+    // bind header
+    const header = ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center gap-l8", children: [title &&
+                (0, jsx_runtime_1.jsx)("h3", { className: "heading-xs text-content-primary", children: title }), actions] }));
+    // render
+    if (nested) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex'), children: [(0, jsx_runtime_1.jsx)("div", { className: "w-48 flex justify-center items-stretch", children: (0, jsx_runtime_1.jsx)("span", { className: "block w-2 h-full bg-border-l1" }) }), (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)(className, 'flex-1 flex flex-col gap-l4'), children: children })] }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-col gap-l6 p-l8 bg-transparent border border-solid border-border-l1 rounded-sm'), children: [header, (0, jsx_runtime_1.jsx)("ul", { className: (0, classnames_1.default)(className, 'flex-1 flex flex-col gap-l4'), children: children })] }));
+    }
+}

package/dist/core/components/interaction/table/TableItem.d.ts

@@ -0,0 +1,15 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { MouseEvent, PropsWithChildren, ReactNode } from 'react';
+import { Icon } from '../../visuals';
+export declare function TableItem({ className, nested, details, iconLeft, iconRight, disabled, onClick, children }: TableItem.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace TableItem {
+    type Props = PropsWithChildren & {
+        className?: string;
+        nested?: boolean;
+        details?: ReactNode;
+        iconLeft?: Icon.Variant | ReactNode;
+        iconRight?: Icon.Variant | ReactNode;
+        disabled?: boolean;
+        onClick?: Callback<MouseEvent<HTMLElement>>;
+    };
+}

package/dist/core/components/interaction/table/TableItem.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableItem = TableItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const visuals_1 = require("../../visuals");
+// component
+function TableItem({ className, nested = false, details, iconLeft, iconRight, disabled = false, onClick, children }) {
+    // render
+    const labelOnly = !details && !iconRight;
+    const interactive = !!onClick;
+    return ((0, jsx_runtime_1.jsxs)("li", { className: (0, classnames_1.default)(className, 'group interactive rounded-sm', 'flex items-center px-l5', {
+            'bg-surface1': !nested,
+            'bg-transparent': nested,
+            'interactive-disabled': !interactive && !disabled,
+            'bg-ix-disabled/tint1 pointer-events-none': disabled
+        }), tabIndex: 0, onClick: onClick, children: [(0, jsx_runtime_1.jsx)("div", { className: "interactive-tint" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('flex-1 flex items-center gap-l3 py-l5'), children: [visuals_1.Icon.Variant.filter(iconLeft)
+                                ?
+                                    (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: (0, classnames_1.default)({
+                                            'text-content-secondary': !disabled,
+                                            'text-ix-disabled-content': disabled
+                                        }), variant: iconLeft })
+                                : iconLeft, typeof children === 'string'
+                                ?
+                                    (0, jsx_runtime_1.jsx)("h3", { className: (0, classnames_1.default)('label-sm ellipsis', {
+                                            'text-content-primary': !disabled,
+                                            'text-ix-disabled-content': disabled
+                                        }), children: children })
+                                : children] }), !labelOnly &&
+                        (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-end items-center gap-l3", children: [renderDetails(details), visuals_1.Icon.Variant.filter(iconRight)
+                                    ?
+                                        (0, jsx_runtime_1.jsx)(visuals_1.Icon, { className: (0, classnames_1.default)({
+                                                'text-content-primary': !disabled,
+                                                'text-ix-disabled-content': disabled
+                                            }), variant: iconRight })
+                                    : iconRight] })] })] }));
+}
+// helpers
+function renderDetails(details) {
+    // skip if there are no details
+    if (!details) {
+        return null;
+    }
+    // render text if a string is provided
+    else if (funnel_core_1.Value.typeOf(details) === 'string') {
+        return ((0, jsx_runtime_1.jsx)("p", { className: "body-sm text-content-secondary", children: details }));
+    }
+    // or render details inline
+    else {
+        return details;
+    }
+}

package/dist/core/components/interaction/table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Table';
+export * from './TableItem';

package/dist/core/components/interaction/table/index.js

@@ -0,0 +1,18 @@
+"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("./Table"), exports);
+__exportStar(require("./TableItem"), exports);

package/dist/core/components/languageDialog/CreateLanguageStep.d.ts

@@ -0,0 +1,13 @@
+import { Callback, Language } from '@nascentdigital/funnel-core';
+import { LanguageDialog } from './LanguageDialog';
+export declare function CreateLanguageStep({ targetLanguage, createdLanguages: sourceLanguages, onCreateBlank, onDuplicate, onClose }: CreateLanguageStep.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace CreateLanguageStep {
+    type Props = {
+        targetLanguage: Language;
+        createdLanguages: ReadonlyArray<Required<LanguageDialog.LanguageSummary>>;
+        onCreateBlank: Callback.Async<Language>;
+        onDuplicate: (source: string, targetLanguage: Language) => Promise<void>;
+        onClose: Callback.Void;
+    };
+    type Option = 'blank' | 'duplicate';
+}

package/dist/core/components/languageDialog/CreateLanguageStep.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CreateLanguageStep = CreateLanguageStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const feedback_1 = require("../feedback");
+const interaction_1 = require("../interaction");
+// component
+function CreateLanguageStep({ targetLanguage, createdLanguages: sourceLanguages, onCreateBlank, onDuplicate, onClose }) {
+    var _a;
+    // bind hooks
+    const [selected, setSelected] = (0, react_1.useState)('blank');
+    const [sourceLanguage, setSourceLanguage] = (0, react_1.useState)((_a = sourceLanguages[0]) === null || _a === void 0 ? void 0 : _a.language);
+    const [creating, setCreating] = (0, react_1.useState)(false);
+    // helpers
+    const onCreate = async () => {
+        // flag as creating
+        setCreating(true);
+        // create blank page
+        if (selected === 'blank') {
+            await onCreateBlank(targetLanguage);
+        }
+        // create duplicate
+        else {
+            // if single source language just use that
+            let sourceId;
+            if (sourceLanguages.length === 1) {
+                sourceId = sourceLanguages[0].ref.id;
+            }
+            // otherwise use selected language
+            else {
+                // find source by selected language
+                const source = sourceLanguages.find(source => source.language === sourceLanguage);
+                // should never happen
+                if (!source) {
+                    console.error('[CreateLanguageStep] cannot find source for selected language');
+                    return;
+                }
+                // set source id
+                sourceId = source.ref.id;
+            }
+            // duplicate the source to target language
+            await onDuplicate(sourceId, targetLanguage);
+        }
+        // clear creating flag
+        setCreating(false);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsx)(feedback_1.DialogLayout, { title: `Create ${funnel_core_1.Language.getName(targetLanguage)} Version`, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", disabled: creating, onClick: onClose, children: "Cancel" }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "primary", loading: creating, onClick: onCreate, children: "Create version" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-l8 px-l8", children: [(0, jsx_runtime_1.jsxs)("label", { className: "flex flex-row gap-l6 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "createOptions", value: "blank", checked: selected === 'blank', onChange: () => {
+                                var _a;
+                                setSelected('blank');
+                                setSourceLanguage((_a = sourceLanguages[0]) === null || _a === void 0 ? void 0 : _a.language);
+                            } }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "label", children: "Start from scratch" }), (0, jsx_runtime_1.jsx)("span", { className: "body-xs text-content-secondary", children: "Start with a blank page" })] })] }), (0, jsx_runtime_1.jsxs)("label", { className: "flex flex-row gap-l6 cursor-pointer", children: [(0, jsx_runtime_1.jsx)("input", { type: "radio", name: "createOptions", value: "duplicate", checked: selected === 'duplicate', onChange: e => setSelected('duplicate') }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", children: [(0, jsx_runtime_1.jsx)("span", { className: "label", children: sourceLanguages.length === 1
+                                        ? `Copy from ${funnel_core_1.Language.getName(sourceLanguages[0].language)} language`
+                                        : 'Copy from existing language' }), (0, jsx_runtime_1.jsx)("span", { className: "body-xs text-content-secondary", children: "Duplicate all content blocks; reuse existing content" })] })] }), selected === 'duplicate' && sourceLanguages.length > 1 &&
+                    (0, jsx_runtime_1.jsx)(interaction_1.Combobox, { options: sourceLanguages.map(({ language }) => ({ id: language, label: funnel_core_1.Language.getName(language) })), selectedOption: sourceLanguage, onSelect: language => setSourceLanguage(language) })] }) }));
+}

package/dist/core/components/languageDialog/ErrorState.d.ts

@@ -0,0 +1,9 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { ErrorMessage } from '../feedback';
+export declare function ErrorState({ error, onClose }: ErrorState.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ErrorState {
+    type Props = {
+        error: ErrorMessage.Error;
+        onClose: Callback.Void;
+    };
+}

package/dist/core/components/languageDialog/ErrorState.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorState = ErrorState;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const feedback_1 = require("../feedback");
+const interaction_1 = require("../interaction");
+// component
+function ErrorState({ error, onClose }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(feedback_1.DialogLayout, { title: "Unable to create", actions: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", autoFocus: true, onClick: onClose, children: "Okay" }), children: (0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }) }));
+}

package/dist/core/components/languageDialog/LanguageDialog.d.ts

@@ -0,0 +1,21 @@
+import { Callback, Language } from '@nascentdigital/funnel-core';
+export declare const LanguageDialog: import("react").ForwardRefExoticComponent<LanguageDialog.Props & import("react").RefAttributes<LanguageDialog.Service>>;
+export declare namespace LanguageDialog {
+    interface IReference {
+        id: string;
+        language: Language;
+    }
+    type Props = {
+        currentLanguage: Language;
+        groupItems: ReadonlyArray<IReference>;
+        onCreateBlank: Callback.Async<Language>;
+        onDuplicate: (source: string, targetLanguage: Language) => Promise<void>;
+    };
+    type LanguageSummary = {
+        language: Language;
+        ref?: IReference;
+    };
+    interface Service {
+        open(): Promise<Language | undefined>;
+    }
+}

package/dist/core/components/languageDialog/LanguageDialog.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguageDialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const feedback_1 = require("../feedback");
+const interaction_1 = require("../interaction");
+const CreateLanguageStep_1 = require("./CreateLanguageStep");
+const ErrorState_1 = require("./ErrorState");
+const OverviewStep_1 = require("./OverviewStep");
+// component
+exports.LanguageDialog = (0, react_1.forwardRef)(function CreatePageDialog({ currentLanguage, groupItems, onCreateBlank: createBlank, onDuplicate: duplicate }, ref) {
+    // bind state + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    const [languageToCreate, setLanguageToCreate] = (0, react_1.useState)();
+    const languages = (0, react_1.useMemo)(() => {
+        // get brand config
+        const brand = funnel_core_1.AppConfig.brandConfig();
+        // get all possible languages for page
+        const languages = funnel_core_1.RegionsConfig.getLanguages(brand.regionalization);
+        // return language with potential page ref
+        return languages.map(language => ({
+            language,
+            ref: groupItems.find(ref => ref.language === language)
+        }));
+    }, [groupItems]);
+    // bind service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        open: async () => {
+            // reset dialog
+            setLanguageToCreate(undefined);
+            setError(undefined);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            // open dialog
+            setDeferral(deferral);
+            // await deferral completion (or error)
+            const language = await deferral.promise;
+            // clear deferral
+            setDeferral(undefined);
+            // return language (or cancellation)
+            return language;
+        }
+    }), []);
+    // helpers
+    const onCreate = (language) => {
+        setLanguageToCreate(language);
+    };
+    const onSwitchLanguage = (language) => {
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(language);
+    };
+    const onCreateBlank = async (language) => {
+        // try to create blank
+        try {
+            // create blank
+            await createBlank(language);
+            // resolve
+            deferral === null || deferral === void 0 ? void 0 : deferral.resolve(language);
+        }
+        catch (e) {
+            setError(feedback_1.ErrorMessage.coerce(e));
+        }
+    };
+    const onDuplicate = async (source, targetLanguage) => {
+        // try to duplicate
+        try {
+            // duplicate
+            await duplicate(source, targetLanguage);
+            // resolve
+            deferral === null || deferral === void 0 ? void 0 : deferral.resolve(targetLanguage);
+        }
+        catch (e) {
+            setError(feedback_1.ErrorMessage.coerce(e));
+        }
+    };
+    const onClose = () => {
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve(undefined);
+    };
+    // flow
+    let content;
+    if (error) {
+        content = ((0, jsx_runtime_1.jsx)(ErrorState_1.ErrorState, { error: error, onClose: onClose }));
+    }
+    // no error
+    else {
+        // determine created/uncreated languages
+        const createdLanguages = languages.filter(lang => lang.ref);
+        const uncreatedLanguages = languages.filter(lang => !lang.ref);
+        // target language chosen
+        if (languageToCreate) {
+            content = ((0, jsx_runtime_1.jsx)(CreateLanguageStep_1.CreateLanguageStep, { targetLanguage: languageToCreate, createdLanguages: createdLanguages, onCreateBlank: onCreateBlank, onDuplicate: onDuplicate, onClose: onClose }));
+        }
+        // overview if no language chosen
+        else {
+            content = ((0, jsx_runtime_1.jsx)(OverviewStep_1.OverviewStep, { currentLanguage: currentLanguage, createdLanguages: createdLanguages, uncreatedLanguages: uncreatedLanguages, onSwitch: onSwitchLanguage, onCreate: onCreate, onClose: onClose }));
+        }
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(interaction_1.Popup, { open: !!deferral, onClose: onClose, disableDismiss: !!languageToCreate, backdrop: "glass", children: content }));
+});

package/dist/core/components/languageDialog/OverviewStep.d.ts

@@ -0,0 +1,13 @@
+import { Callback, Language } from '@nascentdigital/funnel-core';
+import type { LanguageDialog } from './LanguageDialog';
+export declare function OverviewStep({ currentLanguage, createdLanguages, uncreatedLanguages, onSwitch, onCreate, onClose }: OverviewStep.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace OverviewStep {
+    type Props = {
+        currentLanguage: Language;
+        createdLanguages: ReadonlyArray<Required<LanguageDialog.LanguageSummary>>;
+        uncreatedLanguages: ReadonlyArray<LanguageDialog.LanguageSummary>;
+        onSwitch: Callback<Language>;
+        onCreate: Callback<Language>;
+        onClose: Callback.Void;
+    };
+}

package/dist/core/components/languageDialog/OverviewStep.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OverviewStep = OverviewStep;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const feedback_1 = require("../feedback");
+const interaction_1 = require("../interaction");
+// component
+function OverviewStep({ currentLanguage, createdLanguages, uncreatedLanguages, onSwitch, onCreate, onClose }) {
+    // render
+    return ((0, jsx_runtime_1.jsx)(feedback_1.MinimalDialogLayout, { title: "Language configuration", caption: "Switch between configured lanugages or create new ones.", onClose: onClose, children: (0, jsx_runtime_1.jsxs)("section", { className: "flex flex-col gap-l5", children: [createdLanguages.length > 0 &&
+                    (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-xs mb-l5", children: "Configured" }), (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-l5", children: createdLanguages.map(({ language, ref }) => (0, jsx_runtime_1.jsxs)("li", { className: "flex justify-between items-center border border-solid border-border-l1 rounded-sm p-l6", children: [(0, jsx_runtime_1.jsx)("span", { children: funnel_core_1.Language.getName(language) }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: () => onSwitch(language), disabled: language === currentLanguage, children: "Switch" })] }, ref.id)) })] }), uncreatedLanguages.length > 0 &&
+                    (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-xs mb-l5", children: "Not configured" }), (0, jsx_runtime_1.jsx)("ul", { className: "flex flex-col gap-l5", children: uncreatedLanguages.map(({ language }) => (0, jsx_runtime_1.jsxs)("li", { className: "flex justify-between items-center border border-solid border-border-l1 rounded-sm p-l6", children: [(0, jsx_runtime_1.jsx)("span", { children: funnel_core_1.Language.getName(language) }), (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: () => onCreate(language), children: "Create" })] }, language)) })] })] }) }));
+}

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

@@ -0,0 +1 @@
+export * from './LanguageDialog';

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

@@ -0,0 +1,17 @@
+"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("./LanguageDialog"), exports);

package/dist/core/components/layout/InfoPanel.d.ts

@@ -0,0 +1,15 @@
+import { Callback } from '@nascentdigital/funnel-core';
+import { HTMLAttributes } from 'react';
+import { StatusIcon } from '../feedback';
+import { MenuItem } from '../interaction';
+export declare function InfoPanel({ className, contentClassName, title, caption, status, menu: menuItems, onMenuSelect, children, ...props }: InfoPanel.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace InfoPanel {
+    type Props<TMenuItem extends string = string> = HTMLAttributes<HTMLDivElement> & {
+        contentClassName?: string;
+        title: string;
+        caption?: string;
+        status?: StatusIcon.Variant;
+        menu?: MenuItem<TMenuItem>[];
+        onMenuSelect?: Callback<TMenuItem>;
+    };
+}

package/dist/core/components/layout/InfoPanel.js

@@ -0,0 +1,47 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InfoPanel = InfoPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const classnames_1 = __importDefault(require("classnames"));
+const feedback_1 = require("../feedback");
+const interaction_1 = require("../interaction");
+// component
+function InfoPanel(_a) {
+    var { className, contentClassName, title, caption, status, menu: menuItems, onMenuSelect = funnel_core_1.Fn.NoOp, children } = _a, props = __rest(_a, ["className", "contentClassName", "title", "caption", "status", "menu", "onMenuSelect", "children"]);
+    // bind refs
+    const menu = (0, interaction_1.useMenuController)(menuItems);
+    // helpers
+    const onMenuOpen = (e) => {
+        // open menu
+        menu.open(e.currentTarget);
+    };
+    const onMenuClick = (menuId) => {
+        // close menu
+        menu.selectedItem = undefined;
+        // forward selection
+        onMenuSelect(menuId);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)("section", { className: (0, classnames_1.default)(className, 'flex flex-col p-l7', 'bg-surface1 rounded-xxl'), children: [(0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [status &&
+                        (0, jsx_runtime_1.jsx)(feedback_1.StatusIcon, { variant: status, size: "md" }), (0, jsx_runtime_1.jsx)("h3", { className: "flex-1 heading-sm text-content-primary ellipsis", children: title }), menu &&
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { className: "shrink-0", icon: "EllipsisVertical", onClick: onMenuOpen }), (0, jsx_runtime_1.jsx)(interaction_1.Menu, { controller: menu, onItemClick: onMenuClick })] })] }), caption &&
+                (0, jsx_runtime_1.jsx)(funnel_ui_1.Markup, { className: (0, classnames_1.default)('markup-caption mt-l6', {
+                        'text-destructive-content bg-destructive/tint0 p-l5 rounded-md': status === 'error'
+                    }), markdown: caption }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(contentClassName), children: children })] }));
+}

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

@@ -0,0 +1 @@
+export * from './InfoPanel';