@nascentdigital/funnel-ui 4.6.7 → 5.0.1

package/dist/server/panels/ListPanel.js

@@ -55,11 +55,14 @@ function ListPanel({ as = 'ul', className, panel, layout, items, layoutConfigs =
         case 'verticalStack':
             layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.StackLayout, Object.assign({ as: as, direction: "vertical" }, verticalStack, { children: itemsComponent })));
             break;
+        case 'accordion':
+            layoutComponent = ((0, jsx_runtime_1.jsx)(layouts_1.AccordionLayout, { children: itemsComponent }));
+            break;
     }
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, '@container nd-ListPanel', 
-        // base layout
-        BlockPanel_1.BlockPanel.getClassNames({ panel })), children: (0, jsx_runtime_1.jsx)("div", { className: "nd-BlockPanel-content nd-ListPanel-content", children: layoutComponent }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-ListPanel-wrap', BlockPanel_1.BlockPanel.getWrapClassName(), BlockPanel_1.BlockPanel.getFullBleedClassNames({ panel })), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, '@container nd-ListPanel', 
+            // base layout
+            BlockPanel_1.BlockPanel.getClassNames({ panel })), children: (0, jsx_runtime_1.jsx)("div", { className: "nd-BlockPanel-content nd-ListPanel-content", children: layoutComponent }) }) }));
 }
 // extension
 (function (ListPanel) {

package/dist/server/panels/MessagePanel.js

@@ -28,40 +28,40 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
         ];
     }
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-MessagePanel', 
-        // base layout
-        BlockPanel_1.BlockPanel.getClassNames({ panel, alignX, alignY, size, fullbleed, mobileOrder }), 
-        // text-align
-        textAlign
-            ? {
-                'nd-MessagePanel-textStart': textAlign === 'left',
-                'nd-MessagePanel-textCenter': textAlign === 'center',
-                'nd-MessagePanel-textEnd': textAlign === 'right'
-            }
-            : funnel_core_1.BlockLayout.ResponsiveClassNames.parse({
-                value: panel.textAlign,
-                mobile: {
-                    left: 'max-md:nd-MessagePanel-textStart',
-                    center: 'max-md:nd-MessagePanel-textCenter',
-                    right: 'max-md:nd-MessagePanel-textEnd'
-                },
-                base: {
-                    left: 'md:nd-MessagePanel-textStart',
-                    center: 'md:nd-MessagePanel-textCenter',
-                    right: 'md:nd-MessagePanel-textEnd'
-                },
-                desktop: {
-                    left: 'lg:nd-MessagePanel-textStart',
-                    center: 'lg:nd-MessagePanel-textCenter',
-                    right: 'lg:nd-MessagePanel-textEnd'
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-MessagePanel-wrap', BlockPanel_1.BlockPanel.getWrapClassName(), BlockPanel_1.BlockPanel.getFullBleedClassNames({ panel })), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-MessagePanel', 
+            // base layout
+            BlockPanel_1.BlockPanel.getClassNames({ panel, alignX, alignY, size, fullbleed, mobileOrder }), 
+            // text-align
+            textAlign
+                ? {
+                    'nd-MessagePanel-textStart': textAlign === 'left',
+                    'nd-MessagePanel-textCenter': textAlign === 'center',
+                    'nd-MessagePanel-textEnd': textAlign === 'right'
                 }
-            })), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-MessagePanel-content", children: [!title && !headline && !caption && ctas.length === 0 &&
-                    (0, jsx_runtime_1.jsx)(MessagePanel.Placeholder, {}), title &&
-                    (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-MessagePanel-title", as: titleTag, title: title }), headline &&
-                    (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-MessagePanel-headline", as: headlineTag, headline: headline }), caption &&
-                    (0, jsx_runtime_1.jsx)(fields_1.Caption, { className: "nd-MessagePanel-caption", as: captionTag, caption: caption }), ctas.length > 0 &&
-                    (0, jsx_runtime_1.jsx)(fields_1.CallToActions, { className: "nd-MessagePanel-ctas", ctas: ctas }), decorator &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-MessagePanel-decorator", children: decorator })] }) }));
+                : funnel_core_1.BlockLayout.ResponsiveClassNames.parse({
+                    value: panel.textAlign,
+                    mobile: {
+                        left: 'max-md:nd-MessagePanel-textStart',
+                        center: 'max-md:nd-MessagePanel-textCenter',
+                        right: 'max-md:nd-MessagePanel-textEnd'
+                    },
+                    base: {
+                        left: 'md:nd-MessagePanel-textStart',
+                        center: 'md:nd-MessagePanel-textCenter',
+                        right: 'md:nd-MessagePanel-textEnd'
+                    },
+                    desktop: {
+                        left: 'lg:nd-MessagePanel-textStart',
+                        center: 'lg:nd-MessagePanel-textCenter',
+                        right: 'lg:nd-MessagePanel-textEnd'
+                    }
+                })), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-MessagePanel-content", children: [!title && !headline && !caption && ctas.length === 0 &&
+                        (0, jsx_runtime_1.jsx)(MessagePanel.Placeholder, {}), title &&
+                        (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-MessagePanel-title", as: titleTag, title: title }), headline &&
+                        (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-MessagePanel-headline", as: headlineTag, headline: headline }), caption &&
+                        (0, jsx_runtime_1.jsx)(fields_1.Caption, { className: "nd-MessagePanel-caption", as: captionTag, caption: caption }), ctas.length > 0 &&
+                        (0, jsx_runtime_1.jsx)(fields_1.CallToActions, { className: "nd-MessagePanel-ctas", ctas: ctas }), decorator &&
+                        (0, jsx_runtime_1.jsx)("div", { className: "nd-MessagePanel-decorator", children: decorator })] }) }) }));
 }
 // extension
 (function (MessagePanel) {

package/dist/server/panels/VisualPanel.d.ts

@@ -1,26 +1,50 @@
 import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
 import { ReactNode } from 'react';
-import { Visual } from '../fields';
+import { Media, Visual } from '../fields';
 import { Anchor, AspectRatio, ItemAlignment, ItemPosition, ItemSize } from '../schema';
 import { BlockPanel } from './BlockPanel';
-export declare function VisualPanel({ className, panel, visual, visualDecorator, visualLoading, aspect, anchor, alignX, alignY, size, fullbleed, mobileOrder }: VisualPanel.Props): import("react/jsx-runtime").JSX.Element;
+export declare function VisualPanel({ className, panel, visual, visualDecorator, visualLoading, aspect, anchor, controls, autoPlay, loop, mute, alignX, alignY, size, fullbleed, mobileOrder }: VisualPanel.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace VisualPanel {
     type Props = BlockPanel.Props & {
         className?: string;
         panel: BlockLayout.Visual;
-        visual?: Visual.Model;
+        visual?: Media.LinkedValue;
         visualDecorator?: ReactNode;
         visualLoading?: Visual.Loading;
         aspect?: AspectRatio;
         anchor?: Anchor;
+        controls?: boolean;
+        autoPlay?: boolean;
+        loop?: boolean;
+        mute?: boolean;
     };
     namespace Props {
         type Configuration = Pick<Props, 'className' | 'visualDecorator' | 'visualLoading'>;
     }
     namespace Fields {
-        const visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        const visual: Schema.Optional<Schema.CollectionField<Schema.Collection<{
+            image: Schema.AssetField<Schema.AssetField.LinkedValue.Image>;
+            mobileImage: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+        }> | Schema.Collection<{
+            video: Schema.ObjectField<{
+                type: Schema.EnumField<Schema.EnumField.Options<Media.Video.Source.Type>>;
+                local: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Video>>;
+                remote: Schema.Optional<Schema.EmbeddedVideoField>;
+            }>;
+            cover: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+        }>>>;
         const all: {
-            visual: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+            visual: Schema.Optional<Schema.CollectionField<Schema.Collection<{
+                image: Schema.AssetField<Schema.AssetField.LinkedValue.Image>;
+                mobileImage: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+            }> | Schema.Collection<{
+                video: Schema.ObjectField<{
+                    type: Schema.EnumField<Schema.EnumField.Options<Media.Video.Source.Type>>;
+                    local: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Video>>;
+                    remote: Schema.Optional<Schema.EmbeddedVideoField>;
+                }>;
+                cover: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
+            }>>>;
         };
     }
     namespace VisualPosition {
@@ -28,7 +52,7 @@ export declare namespace VisualPanel {
         type Schema = typeof schema;
     }
     namespace Config {
-        type Key<TPrefix extends string = string> = Key.Aspect<TPrefix> | Key.Anchor<TPrefix> | Key.HorizontalAlign<TPrefix> | Key.Width<TPrefix>;
+        type Key<TPrefix extends string = string> = Key.Aspect<TPrefix> | Key.Anchor<TPrefix> | Key.HorizontalAlign<TPrefix> | Key.Width<TPrefix> | Key.Controls<TPrefix> | Key.AutoPlay<TPrefix> | Key.Loop<TPrefix> | Key.Mute<TPrefix>;
         namespace Key {
             type Aspect<TPrefix extends string> = `${TPrefix}Aspect`;
             function aspect<TPrefix extends string>(prefix: TPrefix): Aspect<TPrefix>;
@@ -38,23 +62,47 @@ export declare namespace VisualPanel {
             function width<TPrefix extends string>(prefix: TPrefix): Width<TPrefix>;
             type HorizontalAlign<TPrefix extends string> = `${TPrefix}HorizontalAlign`;
             function horizontalAlign<TPrefix extends string>(prefix: TPrefix): HorizontalAlign<TPrefix>;
+            type Controls<TPrefix extends string> = `${TPrefix}Controls`;
+            function controls<TPrefix extends string>(prefix: TPrefix): Controls<TPrefix>;
+            type AutoPlay<TPrefix extends string> = `${TPrefix}AutoPlay`;
+            function autoPlay<TPrefix extends string>(prefix: TPrefix): AutoPlay<TPrefix>;
+            type Loop<TPrefix extends string> = `${TPrefix}Loop`;
+            function loop<TPrefix extends string>(prefix: TPrefix): Loop<TPrefix>;
+            type Mute<TPrefix extends string> = `${TPrefix}Mute`;
+            function mute<TPrefix extends string>(prefix: TPrefix): Mute<TPrefix>;
         }
         type Keys<TPrefix extends string> = {
             aspect: Key.Aspect<TPrefix>;
             anchor: Key.Anchor<TPrefix>;
             width: Key.Width<TPrefix>;
             horizontalAlign: Key.HorizontalAlign<TPrefix>;
+            controls: Key.Controls<TPrefix>;
+            autoPlay: Key.AutoPlay<TPrefix>;
+            loop: Key.Loop<TPrefix>;
+            mute: Key.Mute<TPrefix>;
         };
         function getKeys<TPrefix extends string>(prefix: TPrefix): Keys<TPrefix>;
-        type Entries<TPrefix extends string> = Record<Key.Aspect<TPrefix>, AspectRatio.Schema> & Record<Key.Width<TPrefix>, ItemSize.Schema> & Record<Key.Anchor<TPrefix>, Anchor.Schema> & Record<Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema>;
+        type NormalizedEntries = {
+            aspect: AspectRatio.Schema;
+            anchor: Anchor.Schema;
+            width: ItemSize.Schema;
+            horizontalAlign: ItemAlignment.Horizontal.Schema;
+            controls: Schema.BooleanField;
+            autoPlay: Schema.BooleanField;
+            loop: Schema.BooleanField;
+            mute: Schema.BooleanField;
+        };
+        type Entries<TPrefix extends string> = {
+            [TKey in keyof NormalizedEntries as Keys<TPrefix>[TKey]]: NormalizedEntries[TKey];
+        };
     }
     namespace GetConfig {
-        type ConfigSchema<TPrefix extends string> = Record<Config.Key.Aspect<TPrefix>, AspectRatio.Schema> & Record<Config.Key.Anchor<TPrefix>, Anchor.Schema> & Record<Config.Key.Width<TPrefix>, ItemSize.Schema> & Record<Config.Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema>;
+        type ConfigSchema<TPrefix extends string> = Record<Config.Key.Aspect<TPrefix>, AspectRatio.Schema> & Record<Config.Key.Anchor<TPrefix>, Anchor.Schema> & Record<Config.Key.Width<TPrefix>, ItemSize.Schema> & Record<Config.Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema> & Record<Config.Key.Controls<TPrefix>, Schema.BooleanField> & Record<Config.Key.AutoPlay<TPrefix>, Schema.BooleanField> & Record<Config.Key.Loop<TPrefix>, Schema.BooleanField> & Record<Config.Key.Mute<TPrefix>, Schema.BooleanField>;
         type ConfigData<TPrefix extends string> = Schema.Block.Data.ForConfig<ConfigSchema<TPrefix>>;
         type Position = 'x' | 'y' | 'z';
         type Args<TPrefix extends string> = {
             visualKey: TPrefix;
-            visual?: Schema.Field.Data<Schema.AssetField> | Schema.Field.LinkedData<Schema.AssetField>;
+            visual?: Schema.Field.Data<Media.Schema> | Schema.Field.LinkedData<Media.Schema>;
             config?: Partial<ConfigData<TPrefix>>;
             flexDirection?: BlockPanel.Slots.FlexDirection;
         };
@@ -64,6 +112,6 @@ export declare namespace VisualPanel {
             defaultConfig: Partial<ConfigData<TPrefix>>;
         };
     }
-    function getConfig<TPrefix extends string>({ visualKey, visual: visualData, config, flexDirection }: GetConfig.Args<TPrefix>): GetConfig.Result<TPrefix>;
+    function getConfig<TPrefix extends string>({ visualKey, visual: visualData, config: configRaw, flexDirection }: GetConfig.Args<TPrefix>): GetConfig.Result<TPrefix>;
     function Placeholder(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/server/panels/VisualPanel.js

@@ -11,68 +11,68 @@ const fields_1 = require("../fields");
 const schema_1 = require("../schema");
 const BlockPanel_1 = require("./BlockPanel");
 // component
-function VisualPanel({ className, panel, visual, visualDecorator, visualLoading, aspect, anchor = 'center', alignX, alignY, size, fullbleed, mobileOrder }) {
+function VisualPanel({ className, panel, visual, visualDecorator, visualLoading, aspect, anchor = 'center', controls, autoPlay, loop, mute, alignX, alignY, size, fullbleed, mobileOrder }) {
     // render
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-VisualPanel', 
-        // base layout
-        BlockPanel_1.BlockPanel.getClassNames({ panel, alignX, alignY, size, fullbleed, mobileOrder }), 
-        // aspect
-        aspect
-            ? {
-                'nd-VisualPanel-aspect-auto': aspect === 'auto',
-                'nd-VisualPanel-aspect-square': aspect === 'square',
-                'nd-VisualPanel-aspect-phone': aspect === 'phone',
-                'nd-VisualPanel-aspect-tv': aspect === 'tv',
-                'nd-VisualPanel-aspect-widescreen': aspect === 'widescreen',
-                'nd-VisualPanel-aspect-cinema': aspect === 'cinema'
-            }
-            : funnel_core_1.BlockLayout.ResponsiveClassNames.parse({
-                value: panel.aspectRatio,
-                mobile: {
-                    auto: 'max-md:nd-VisualPanel-aspect-auto',
-                    square: 'max-md:nd-VisualPanel-aspect-square',
-                    phone: 'max-md:nd-VisualPanel-aspect-phone',
-                    tv: 'max-md:nd-VisualPanel-aspect-tv',
-                    widescreen: 'max-md:nd-VisualPanel-aspect-widescreen',
-                    cinema: 'max-md:nd-VisualPanel-aspect-cinema'
-                },
-                base: {
-                    auto: 'md:nd-VisualPanel-aspect-auto',
-                    square: 'md:nd-VisualPanel-aspect-square',
-                    phone: 'md:nd-VisualPanel-aspect-phone',
-                    tv: 'md:nd-VisualPanel-aspect-tv',
-                    widescreen: 'md:nd-VisualPanel-aspect-widescreen',
-                    cinema: 'md:nd-VisualPanel-aspect-cinema'
-                },
-                desktop: {
-                    auto: 'lg:nd-VisualPanel-aspect-auto',
-                    square: 'lg:nd-VisualPanel-aspect-square',
-                    phone: 'lg:nd-VisualPanel-aspect-phone',
-                    tv: 'lg:nd-VisualPanel-aspect-tv',
-                    widescreen: 'lg:nd-VisualPanel-aspect-widescreen',
-                    cinema: 'lg:nd-VisualPanel-aspect-cinema'
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('nd-VisualPanel-wrap', BlockPanel_1.BlockPanel.getWrapClassName(), BlockPanel_1.BlockPanel.getFullBleedClassNames({ panel })), children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-VisualPanel', 
+            // base layout
+            BlockPanel_1.BlockPanel.getClassNames({ panel, alignX, alignY, size, fullbleed, mobileOrder }), 
+            // aspect
+            aspect
+                ? {
+                    'nd-VisualPanel-aspect-auto': aspect === 'auto',
+                    'nd-VisualPanel-aspect-square': aspect === 'square',
+                    'nd-VisualPanel-aspect-phone': aspect === 'phone',
+                    'nd-VisualPanel-aspect-tv': aspect === 'tv',
+                    'nd-VisualPanel-aspect-widescreen': aspect === 'widescreen',
+                    'nd-VisualPanel-aspect-cinema': aspect === 'cinema'
                 }
-            }), 
-        // anchor
-        {
-            'nd-VisualPanel-anchor-center': anchor === 'center',
-            'nd-VisualPanel-anchor-top': anchor === 'top',
-            'nd-VisualPanel-anchor-bottom': anchor === 'bottom',
-            'nd-VisualPanel-anchor-left': anchor === 'left',
-            'nd-VisualPanel-anchor-right': anchor === 'right'
-        }), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-VisualPanel-content", children: [visual
-                    ?
-                        (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-VisualPanel-visual", visual: visual, loading: visualLoading })
-                    :
-                        (0, jsx_runtime_1.jsx)(VisualPanel.Placeholder, {}), visualDecorator &&
-                    (0, jsx_runtime_1.jsx)("div", { className: "nd-VisualPanel-decorator", children: visualDecorator })] }) }));
+                : funnel_core_1.BlockLayout.ResponsiveClassNames.parse({
+                    value: panel.aspectRatio,
+                    mobile: {
+                        auto: 'max-md:nd-VisualPanel-aspect-auto',
+                        square: 'max-md:nd-VisualPanel-aspect-square',
+                        phone: 'max-md:nd-VisualPanel-aspect-phone',
+                        tv: 'max-md:nd-VisualPanel-aspect-tv',
+                        widescreen: 'max-md:nd-VisualPanel-aspect-widescreen',
+                        cinema: 'max-md:nd-VisualPanel-aspect-cinema'
+                    },
+                    base: {
+                        auto: 'md:nd-VisualPanel-aspect-auto',
+                        square: 'md:nd-VisualPanel-aspect-square',
+                        phone: 'md:nd-VisualPanel-aspect-phone',
+                        tv: 'md:nd-VisualPanel-aspect-tv',
+                        widescreen: 'md:nd-VisualPanel-aspect-widescreen',
+                        cinema: 'md:nd-VisualPanel-aspect-cinema'
+                    },
+                    desktop: {
+                        auto: 'lg:nd-VisualPanel-aspect-auto',
+                        square: 'lg:nd-VisualPanel-aspect-square',
+                        phone: 'lg:nd-VisualPanel-aspect-phone',
+                        tv: 'lg:nd-VisualPanel-aspect-tv',
+                        widescreen: 'lg:nd-VisualPanel-aspect-widescreen',
+                        cinema: 'lg:nd-VisualPanel-aspect-cinema'
+                    }
+                }), 
+            // anchor
+            {
+                'nd-VisualPanel-anchor-center': anchor === 'center',
+                'nd-VisualPanel-anchor-top': anchor === 'top',
+                'nd-VisualPanel-anchor-bottom': anchor === 'bottom',
+                'nd-VisualPanel-anchor-left': anchor === 'left',
+                'nd-VisualPanel-anchor-right': anchor === 'right'
+            }), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-VisualPanel-content", children: [fields_1.Media.LinkedValue.filter(visual)
+                        ?
+                            (0, jsx_runtime_1.jsx)(fields_1.Media, { className: "nd-VisualPanel-visual", media: visual, loading: visualLoading, controls: controls, autoPlay: autoPlay, loop: loop, mute: mute })
+                        :
+                            (0, jsx_runtime_1.jsx)(VisualPanel.Placeholder, {}), visualDecorator &&
+                        (0, jsx_runtime_1.jsx)("div", { className: "nd-VisualPanel-decorator", children: visualDecorator })] }) }) }));
 }
 // extension
 (function (VisualPanel) {
     // fields
     let Fields;
     (function (Fields) {
-        Fields.visual = fields_1.Visual.schema.optional();
+        Fields.visual = fields_1.Media.schema.optional();
         Fields.all = {
             visual: Fields.visual
         };
@@ -108,6 +108,22 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
                 return `${prefix}HorizontalAlign`;
             }
             Key.horizontalAlign = horizontalAlign;
+            function controls(prefix) {
+                return `${prefix}Controls`;
+            }
+            Key.controls = controls;
+            function autoPlay(prefix) {
+                return `${prefix}AutoPlay`;
+            }
+            Key.autoPlay = autoPlay;
+            function loop(prefix) {
+                return `${prefix}Loop`;
+            }
+            Key.loop = loop;
+            function mute(prefix) {
+                return `${prefix}Mute`;
+            }
+            Key.mute = mute;
         })(Key = Config.Key || (Config.Key = {}));
         function getKeys(prefix) {
             return {
@@ -115,29 +131,53 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
                 anchor: `${prefix}Anchor`,
                 width: `${prefix}Width`,
                 horizontalAlign: `${prefix}HorizontalAlign`,
+                controls: `${prefix}Controls`,
+                autoPlay: `${prefix}AutoPlay`,
+                loop: `${prefix}Loop`,
+                mute: `${prefix}Mute`
             };
         }
         Config.getKeys = getKeys;
     })(Config = VisualPanel.Config || (VisualPanel.Config = {}));
-    function getConfig({ visualKey, visual: visualData, config = {}, flexDirection }) {
-        var _a, _b, _c, _d, _e, _f, _g;
-        // resolve values
+    function getConfig({ visualKey, visual: visualData, config: configRaw = {}, flexDirection }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+        // helpers
         const keys = Config.getKeys(visualKey);
+        const getConfigValue = (key) => {
+            var _a;
+            return (_a = configRaw[keys[key]]) === null || _a === void 0 ? void 0 : _a.value;
+        };
+        // resolve values
         const defaultAspect = 'auto';
         const defaultAnchor = 'center';
-        let aspect = (_b = (_a = config[keys.aspect]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultAspect;
-        let anchor = (_d = (_c = config[keys.anchor]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultAnchor;
+        let aspect = (_a = getConfigValue('aspect')) !== null && _a !== void 0 ? _a : defaultAspect;
+        let anchor = (_b = getConfigValue('anchor')) !== null && _b !== void 0 ? _b : defaultAnchor;
         const visual = visualData === null || visualData === void 0 ? void 0 : visualData.value;
         // return immediately if there's no visual
-        if (!visual || !funnel_core_1.Schema.AssetField.LinkedValue.Visual.filter(visual)) {
+        if (!visual || !fields_1.Media.LinkedValue.filter(visual)) {
             return {
                 configSchema: {},
                 config: {},
                 defaultConfig: {}
             };
         }
+        // try to extract dimensions from media
+        let isVideo = false;
+        let width = undefined;
+        let height = undefined;
+        if (fields_1.Media.LinkedValue.isImage(visual)) {
+            const dimensions = (_g = (_f = (_e = (_d = (_c = visual.fields) === null || _c === void 0 ? void 0 : _c.image) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.metadata) === null || _f === void 0 ? void 0 : _f.dimensions) !== null && _g !== void 0 ? _g : {};
+            width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width;
+            height = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height;
+        }
+        else if (fields_1.Media.LinkedValue.isVideo(visual)) {
+            const { local, remote } = (_k = (_j = (_h = visual.fields) === null || _h === void 0 ? void 0 : _h.video) === null || _j === void 0 ? void 0 : _j.value) !== null && _k !== void 0 ? _k : {};
+            const { dimensions } = (_o = (_m = (_l = local === null || local === void 0 ? void 0 : local.value) === null || _l === void 0 ? void 0 : _l.metadata) !== null && _m !== void 0 ? _m : remote === null || remote === void 0 ? void 0 : remote.value) !== null && _o !== void 0 ? _o : {};
+            width = dimensions === null || dimensions === void 0 ? void 0 : dimensions.width;
+            height = dimensions === null || dimensions === void 0 ? void 0 : dimensions.height;
+            isVideo = true;
+        }
         // determine is visual is an existing aspect ratio (and switch aspect to auto if it matches)
-        const { dimensions: { width, height } = {} } = (_e = visual.metadata) !== null && _e !== void 0 ? _e : {};
         const sourceAspectRatio = width && height
             ? width / height
             : undefined;
@@ -148,16 +188,46 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
             aspect = 'auto';
         }
         // create schema (drop matched aspect if we need to)
-        const configSchema = {
-            [keys.aspect]: matchedAspect
+        const configSchema = Object.assign({ [keys.aspect]: matchedAspect
                 ? schema_1.AspectRatio.schema.removeOption(matchedAspect)
-                : schema_1.AspectRatio.schema,
-            [keys.anchor]: aspect === 'auto' ? undefined : schema_1.Anchor.schema,
-            [keys.horizontalAlign]: schema_1.ItemAlignment.Horizontal.schema,
-            [keys.width]: schema_1.ItemSize.schema
-        };
+                : schema_1.AspectRatio.schema, [keys.anchor]: aspect === 'auto' ? undefined : schema_1.Anchor.schema, [keys.horizontalAlign]: schema_1.ItemAlignment.Horizontal.schema, [keys.width]: schema_1.ItemSize.schema }, (isVideo
+            ? {
+                [keys.controls]: funnel_core_1.Schema.Field.boolean({
+                    name: 'Show Controls',
+                    description: 'Display video controls so views can play/pause/seek content.',
+                    defaultValue: true,
+                    semantics: 'toggle'
+                }),
+                [keys.autoPlay]: funnel_core_1.Schema.Field.boolean({
+                    name: 'Autoplay',
+                    description: 'Video will automatically play once it\'s ready.',
+                    defaultValue: false,
+                    semantics: 'toggle'
+                }),
+                [keys.loop]: funnel_core_1.Schema.Field.boolean({
+                    name: 'Loop',
+                    description: 'Video will loop forever when enabled.',
+                    defaultValue: false,
+                    semantics: 'toggle'
+                }),
+                [keys.mute]: funnel_core_1.Schema.Field.boolean({
+                    name: 'Mute',
+                    description: 'Audio will be silenced.',
+                    defaultValue: true,
+                    semantics: 'toggle'
+                })
+            }
+            : {}));
         const defaultPanelWidth = 'full';
-        let panelWidth = (_g = (_f = config[keys.width]) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : defaultPanelWidth;
+        let panelWidth = (_p = getConfigValue('width')) !== null && _p !== void 0 ? _p : defaultPanelWidth;
+        const controlsDefault = false;
+        const controls = (_q = getConfigValue('controls')) !== null && _q !== void 0 ? _q : controlsDefault;
+        const autoPlayDefault = false;
+        const autoPlay = (_r = getConfigValue('autoPlay')) !== null && _r !== void 0 ? _r : autoPlayDefault;
+        const loopDefault = false;
+        const loop = (_s = getConfigValue('loop')) !== null && _s !== void 0 ? _s : loopDefault;
+        const muteDefault = false;
+        const mute = (_t = getConfigValue('mute')) !== null && _t !== void 0 ? _t : muteDefault;
         // reduce anchor to options that are allowed (vertical vs horizontal cropping)
         if (sourceAspectRatio && aspect !== 'auto') {
             // coerce anchor
@@ -188,16 +258,22 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
         // return result
         return {
             configSchema: configSchema,
-            config: {
-                [keys.aspect]: funnel_core_1.Schema.EnumField.Value.toData(aspect),
-                [keys.anchor]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(anchor),
-                [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(panelWidth),
-            },
-            defaultConfig: {
-                [keys.aspect]: funnel_core_1.Schema.EnumField.Value.toData(defaultAspect),
-                [keys.anchor]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(defaultAnchor),
-                [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(defaultPanelWidth),
-            }
+            config: Object.assign({ [keys.aspect]: funnel_core_1.Schema.EnumField.Value.toData(aspect), [keys.anchor]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(anchor), [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(panelWidth) }, (isVideo
+                ? {
+                    [keys.controls]: funnel_core_1.Schema.BooleanField.Value.toData(controls),
+                    [keys.autoPlay]: funnel_core_1.Schema.BooleanField.Value.toData(autoPlay),
+                    [keys.loop]: funnel_core_1.Schema.BooleanField.Value.toData(loop),
+                    [keys.mute]: funnel_core_1.Schema.BooleanField.Value.toData(mute)
+                }
+                : {})),
+            defaultConfig: Object.assign({ [keys.aspect]: funnel_core_1.Schema.EnumField.Value.toData(defaultAspect), [keys.anchor]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(defaultAnchor), [keys.width]: funnel_core_1.Schema.EnumField.Value.toData(defaultPanelWidth) }, (isVideo
+                ? {
+                    [keys.controls]: funnel_core_1.Schema.BooleanField.Value.toData(controlsDefault),
+                    [keys.autoPlay]: funnel_core_1.Schema.BooleanField.Value.toData(autoPlayDefault),
+                    [keys.loop]: funnel_core_1.Schema.BooleanField.Value.toData(loopDefault),
+                    [keys.mute]: funnel_core_1.Schema.BooleanField.Value.toData(muteDefault)
+                }
+                : {}))
         };
     }
     VisualPanel.getConfig = getConfig;

package/dist/server/schema/ListPanelLayout.d.ts

@@ -36,5 +36,6 @@ export declare namespace ListPanelLayout {
         masonry: Masonry;
         verticalStack: Omit<Stack, 'direction'>;
         bento: {};
+        accordion: {};
     };
 }

package/dist/server/schema/ListPanelLayout.js

@@ -15,6 +15,7 @@ var ListPanelLayout;
         bento: { name: 'Bento' },
         brick: { name: 'Brick' },
         brickFlipped: { name: 'Brick flipped' },
+        accordion: { name: 'Accordion' },
         carousel: { name: 'Carousel' }
     };
     ListPanelLayout.schema = funnel_core_1.Schema.Field.enumeration({