@nascentdigital/funnel-ui 4.4.20 → 4.5.0

package/dist/server/panels/BlockPanel.js

@@ -6,6 +6,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockPanel = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
 const classnames_1 = __importDefault(require("classnames"));
+const schema_1 = require("../schema");
+const ListPanel_1 = require("./ListPanel");
+const MessagePanel_1 = require("./MessagePanel");
+const VisualPanel_1 = require("./VisualPanel");
 // extensions
 var BlockPanel;
 (function (BlockPanel) {
@@ -53,4 +57,831 @@ var BlockPanel;
         });
     }
     BlockPanel.getClassNames = getClassNames;
+    // slots
+    let Slots;
+    (function (Slots) {
+        let Items;
+        (function (Items) {
+            Items.values = ['M', 'V', 'L'];
+            function forPanels({ message, visual, list }) {
+                return Items.values.slice()
+                    .filter(item => (item === 'M' && message)
+                    || (item === 'V' && visual)
+                    || (item === 'L' && list));
+            }
+            Items.forPanels = forPanels;
+            function compute({ panels: { message, visual, list }, layout, variation }) {
+                // drop layout options if there's no visual
+                if (!visual) {
+                    return message && list
+                        // message AND list
+                        ? variation === 'v1'
+                            ? ['M', 'L']
+                            : ['L', 'M']
+                        // only message OR list
+                        : message ? ['M'] : ['L'];
+                }
+                // or handle case where there's just a visual + message/list
+                else if (!message || !list) {
+                    return message || list
+                        // visual AND message/list
+                        ? layout === 'nested'
+                            // layout is nested (message/visual inside a list)
+                            ? message ? ['M'] : ['L']
+                            // or based on variation
+                            : message
+                                // for message + visual
+                                ? variation === 'v1' ? ['M', 'V'] : ['V', 'M']
+                                // or for visual + list
+                                : variation === 'v1' ? ['V', 'L'] : ['L', 'V']
+                        // only visual
+                        : ['V'];
+                }
+                // we have everything
+                else {
+                    switch (layout) {
+                        // nested === 2 slots (nested in visual, so we ignore it)
+                        case 'nested.h':
+                        case 'nested.v':
+                        case 'nested.t':
+                        case 'nested.b':
+                        case 'nested.l':
+                        case 'nested.r':
+                            return variation === 'v1' ? ['M', 'L'] : ['L', 'M'];
+                        // otherwise === 3 slots
+                        default:
+                            switch (variation) {
+                                case 'v1':
+                                    return ['M', 'V', 'L'];
+                                case 'v2':
+                                    return ['M', 'L', 'V'];
+                                case 'v3':
+                                    return ['V', 'M', 'L'];
+                                case 'v4':
+                                    return ['V', 'L', 'M'];
+                                case 'v5':
+                                    return ['L', 'M', 'V'];
+                                case 'v6':
+                                    return ['L', 'V', 'M'];
+                            }
+                    }
+                }
+            }
+            Items.compute = compute;
+        })(Items = Slots.Items || (Slots.Items = {}));
+        // helpers
+        function forLayout(layout) {
+            switch (layout) {
+                case 'solo':
+                case 'nested':
+                    return 1;
+                case 'stack.h':
+                case 'stack.v':
+                case 'nested.h':
+                case 'nested.v':
+                case 'nested.t':
+                case 'nested.b':
+                case 'nested.l':
+                case 'nested.r':
+                    return 2;
+                case 'brick.v':
+                case 'brick.t':
+                case 'brick.b':
+                case 'brick.l':
+                case 'brick.r':
+                    return 3;
+            }
+        }
+        Slots.forLayout = forLayout;
+        function getFlexDirections({ layout, items: [item1, item2, item3] }) {
+            switch (layout) {
+                case 'solo':
+                    return { [item1]: 'x' };
+                case 'nested':
+                    return { [item1]: 'xy' };
+                case 'stack.h':
+                    return {
+                        [item1]: 'none',
+                        [item2]: 'none'
+                    };
+                case 'stack.v':
+                    return {
+                        [item1]: 'x',
+                        [item2]: 'x'
+                    };
+                case 'nested.h':
+                    return {
+                        [item1]: 'none',
+                        [item2]: 'none'
+                    };
+                case 'nested.v':
+                    return {
+                        [item1]: 'x',
+                        [item2]: 'x'
+                    };
+                case 'nested.t':
+                    return {
+                        [item1]: 'xy',
+                        [item2]: 'x'
+                    };
+                case 'nested.b':
+                    return {
+                        [item1]: 'x',
+                        [item2]: 'xy'
+                    };
+                case 'nested.l':
+                    return {
+                        [item1]: 'xy',
+                        [item2]: 'none'
+                    };
+                case 'nested.r':
+                    return {
+                        [item1]: 'none',
+                        [item2]: 'xy'
+                    };
+                case 'brick.v':
+                    return {
+                        [item1]: 'x',
+                        [item2]: 'x',
+                        [item3]: 'x'
+                    };
+                case 'brick.t':
+                    return {
+                        [item1]: 'x',
+                        [item2]: 'none',
+                        [item3]: 'none'
+                    };
+                case 'brick.b':
+                    return {
+                        [item1]: 'none',
+                        [item2]: 'none',
+                        [item3]: 'x'
+                    };
+                case 'brick.l':
+                    return {
+                        [item1]: 'none',
+                        [item2]: 'none',
+                        [item3]: 'none'
+                    };
+                case 'brick.r':
+                    return {
+                        [item1]: 'none',
+                        [item2]: 'none',
+                        [item3]: 'none'
+                    };
+            }
+        }
+        Slots.getFlexDirections = getFlexDirections;
+        function contentAlignmentExists(layout) {
+            switch (layout) {
+                case 'brick.t':
+                case 'brick.b':
+                case 'brick.r':
+                case 'brick.l':
+                case 'stack.h':
+                case 'nested.h':
+                case 'nested.r':
+                case 'nested.l':
+                    return true;
+                default:
+                    return false;
+            }
+        }
+        Slots.contentAlignmentExists = contentAlignmentExists;
+    })(Slots = BlockPanel.Slots || (BlockPanel.Slots = {}));
+    // config schema
+    let GetConfigSchema;
+    (function (GetConfigSchema) {
+        let Key;
+        (function (Key) {
+            // helper
+            function normalize(key) {
+                return typeof key === 'string'
+                    ? { key, name: funnel_core_1.StringUtils.capitalize(key) }
+                    : key;
+            }
+            Key.normalize = normalize;
+        })(Key = GetConfigSchema.Key || (GetConfigSchema.Key = {}));
+    })(GetConfigSchema = BlockPanel.GetConfigSchema || (BlockPanel.GetConfigSchema = {}));
+    function getConfigSchema({ extend, messageKey: messageKeyRaw, visualKey: visualKeyRaw, listKey: listKeyRaw }) {
+        // throw if there are not enough panels
+        const { key: messageKey, name: messageLabel } = messageKeyRaw === undefined
+            ? {}
+            : GetConfigSchema.Key.normalize(messageKeyRaw);
+        const { key: visualKey, name: visualLabel } = visualKeyRaw === undefined
+            ? {}
+            : GetConfigSchema.Key.normalize(visualKeyRaw);
+        const { key: listKey, name: listLabel } = listKeyRaw === undefined
+            ? {}
+            : GetConfigSchema.Key.normalize(listKeyRaw);
+        const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
+        if (panelCount === 0) {
+            throw new funnel_core_1.IllegalStateError('[BlockPanel.ts] There needs to be at least one panel');
+        }
+        // initialize config schema
+        const configSchema = Object.assign(Object.assign(Object.assign({}, schema_1.BlockConfig.Presets.ThemeOnly.schema), extend), { layout: schema_1.PanelLayout.schema.optional(), slotVariation: schema_1.SlotVariation.schema });
+        // TODO: runtime error for key not available in fields
+        // add schema for message
+        if (messageKey) {
+            const keys = MessagePanel_1.MessagePanel.Config.getKeys(messageKey);
+            configSchema[keys.textAlign] = schema_1.TextAlignment.schema
+                .rename(`${messageLabel} ${schema_1.TextAlignment.schema.name}`)
+                .optional();
+            configSchema[keys.width] =
+                schema_1.ItemSize.schema
+                    .rename(`${messageLabel} ${schema_1.ItemSize.schema.name}`)
+                    .optional();
+            configSchema[keys.horizontalAlign] =
+                schema_1.ItemAlignment
+                    .Horizontal.schema.rename(`${messageLabel} ${schema_1.ItemAlignment.Horizontal.schema.name}`)
+                    .optional();
+            configSchema[keys.verticalAlign] = schema_1.ItemAlignment.Vertical.schema.rename(`${messageLabel} ${schema_1.ItemAlignment.Vertical.schema.name}`).optional();
+        }
+        // add schema for list
+        if (listKey) {
+            const keys = ListPanel_1.ListPanel.Config.getKeys(listKey);
+            configSchema[keys.layout] = schema_1.ListPanelLayout.schema.rename(`${listLabel} ${schema_1.ListPanelLayout.schema.name}`).optional();
+            configSchema[keys.width] = schema_1.ItemSize.schema.rename(`${listLabel} ${schema_1.ItemSize.schema.name}`).optional();
+            configSchema[keys.horizontalAlign] = schema_1.ItemAlignment
+                .Horizontal.schema
+                .rename(`${listLabel} ${schema_1.ItemAlignment.Horizontal.schema.name}`)
+                .optional();
+            configSchema[keys.verticalAlign] = schema_1.ItemAlignment
+                .Horizontal.schema
+                .rename(`${listLabel} ${schema_1.ItemAlignment.Vertical.schema.name}`)
+                .optional();
+        }
+        // add schema for visual
+        if (visualKey) {
+            const keys = VisualPanel_1.VisualPanel.Config.getKeys(visualKey);
+            configSchema[keys.aspect] = schema_1.AspectRatio.schema
+                .rename(`${visualLabel} ${schema_1.AspectRatio.schema.name}`)
+                .optional();
+            configSchema[keys.anchor] = schema_1.Anchor.schema
+                .rename(`${visualLabel} ${schema_1.Anchor.schema.name}`)
+                .optional();
+            configSchema[keys.width] =
+                schema_1.ItemSize.schema
+                    .rename(`${visualLabel} ${schema_1.ItemSize.schema.name}`)
+                    .optional();
+            configSchema[keys.horizontalAlign] =
+                schema_1.ItemAlignment
+                    .Horizontal.schema.rename(`${visualLabel} ${schema_1.ItemAlignment.Horizontal.schema.name}`)
+                    .optional();
+        }
+        // add message vertical alignment if message and visual is available
+        // if (messageKey && visualKey) {
+        //   const keys = MessagePanel.Config.getKeys(messageKey)
+        //   configSchema[keys.verticalAlign] = ItemAlignment.Vertical.schema.rename(`${messageLabel} ${ItemAlignment.Vertical.schema.name}`).optional()
+        // }
+        // add list vertical alignment if list and visual is available
+        // if (listKey && visualKey) {
+        //   const keys = ListPanel.Config.getKeys(listKey)
+        //   configSchema[keys.verticalAlign] = ItemAlignment.Vertical.schema.rename(keys.verticalAlign).optional()
+        // }
+        // add content alignment if there are more than 2 panels
+        if (panelCount > 1) {
+            configSchema['contentAlign'] = schema_1.ItemAlignment.Vertical.schema.rename('Content Alignment').optional();
+        }
+        console.debug('[BlockPanel/getConfigSchema] created schema', configSchema);
+        // return
+        return configSchema;
+    }
+    BlockPanel.getConfigSchema = getConfigSchema;
+    function getConfig({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
+        var _a, _b, _c, _d, _e;
+        // throw if there are not enough panels
+        const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
+        if (panelCount === 0) {
+            throw new funnel_core_1.IllegalStateError('[BlockPanel.ts] There needs to be at least one panel');
+        }
+        // resolve props
+        const configSchema = args.configSchema;
+        const config = args.config;
+        const fields = args.fields;
+        const messageKeys = messageKey
+            ? MessagePanel_1.MessagePanel.Config.getKeys(messageKey)
+            : {};
+        const visualKeys = visualKey
+            ? VisualPanel_1.VisualPanel.Config.getKeys(visualKey)
+            : {};
+        const listKeys = listKey
+            ? ListPanel_1.ListPanel.Config.getKeys(listKey)
+            : {};
+        const allKeys = [
+            ...Object.values(messageKeys),
+            ...Object.values(visualKeys),
+            ...Object.values(listKeys)
+        ];
+        // current config helpers
+        const hasMessage = MessagePanel_1.MessagePanel.Fields.exists(fields, messageFieldKeys);
+        const visual = visualKey
+            ? fields[visualKey]
+            : undefined;
+        const hasVisual = (visual === null || visual === void 0 ? void 0 : visual.value) !== undefined;
+        const list = listKey
+            ? fields[listKey]
+            : undefined;
+        const hasList = !!((_a = list === null || list === void 0 ? void 0 : list.value) === null || _a === void 0 ? void 0 : _a.length);
+        // get layout schema
+        const activePanels = { message: hasMessage, visual: hasVisual, list: hasList };
+        const layoutSchema = schema_1.PanelLayout.schemaForPanels(activePanels);
+        let layout = ((_c = (_b = config.layout) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 'solo');
+        layout = layoutSchema.isValidOption(layout)
+            ? layout
+            : layoutSchema.defaultOption;
+        const slotVariationSchema = schema_1.SlotVariation.schemaForLayout(layout);
+        let slotVariation = ((_e = (_d = config.slotVariation) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : 'v1');
+        slotVariation = slotVariationSchema.isValidOption(slotVariation)
+            ? slotVariation
+            : slotVariationSchema.defaultOption;
+        const items = Slots.Items.compute({
+            panels: activePanels,
+            layout,
+            variation: slotVariation
+        });
+        const flexDirections = Slots.getFlexDirections({ layout, items });
+        // extract message config
+        let messageConfig = undefined;
+        if (messageKey && hasMessage) {
+            messageConfig = MessagePanel_1.MessagePanel.getConfig({
+                messageKey,
+                config: config,
+                fields: fields,
+                flexDirection: flexDirections.M
+            });
+        }
+        // extract visual config (if any)
+        let visualConfig = undefined;
+        if (visualKey && hasVisual) {
+            visualConfig = VisualPanel_1.VisualPanel.getConfig({
+                visualKey,
+                visual,
+                config: config,
+                flexDirection: flexDirections.V
+            });
+        }
+        // extract list config (if any)
+        let listConfig = undefined;
+        if (listKey && hasList) {
+            listConfig = ListPanel_1.ListPanel.getConfig({
+                listKey,
+                config: config,
+                flexDirection: flexDirections.L
+            });
+        }
+        // create new schema (drop content alignment if it's not applicable)
+        const updatedConfigSchema = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Object.entries(configSchema)
+            .reduce((configSchema, [key, fieldSchema]) => {
+            // add the config back if it's not in the panel config keys
+            if (!allKeys.includes(key)) {
+                configSchema[key] = fieldSchema;
+            }
+            // keep reducing
+            return configSchema;
+        }, {})), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.configSchema), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.configSchema), listConfig === null || listConfig === void 0 ? void 0 : listConfig.configSchema), { layout: layoutSchema, slotVariation: slotVariationSchema });
+        if (!BlockPanel.Slots.contentAlignmentExists(layout)) {
+            delete updatedConfigSchema.contentAlign;
+        }
+        if (panelCount < 2) {
+            delete updatedConfigSchema.layout;
+        }
+        // FIXME: add missing layout config
+        // create default config
+        const defaultConfig = Object.assign(Object.assign(Object.assign({ theme: funnel_core_1.Schema.EnumField.Value.toData('default'), contentAlign: funnel_core_1.Schema.EnumField.Value.toData('start') }, messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.defaultConfig), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.defaultConfig), listConfig === null || listConfig === void 0 ? void 0 : listConfig.defaultConfig);
+        // create new config
+        const updatedConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), messageConfig === null || messageConfig === void 0 ? void 0 : messageConfig.config), visualConfig === null || visualConfig === void 0 ? void 0 : visualConfig.config), listConfig === null || listConfig === void 0 ? void 0 : listConfig.config), { layout: funnel_core_1.Schema.EnumField.Value.toData(layout), slotVariation: funnel_core_1.Schema.EnumField.Value.toData(slotVariation) });
+        // return config
+        return {
+            updatedConfigSchema: updatedConfigSchema,
+            updatedConfig: updatedConfig,
+            defaultConfig: defaultConfig
+        };
+    }
+    BlockPanel.getConfig = getConfig;
+    function getLayout({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
+        // throw if there are not enough panels
+        const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
+        if (panelCount === 0) {
+            throw new funnel_core_1.IllegalStateError('[BlockPanel.ts] There needs to be at least one panel');
+        }
+        // resolve props
+        const config = args.config;
+        const fields = args.fields;
+        const messageKeys = messageKey
+            ? MessagePanel_1.MessagePanel.Config.getKeys(messageKey)
+            : {};
+        const visualKeys = visualKey
+            ? VisualPanel_1.VisualPanel.Config.getKeys(visualKey)
+            : {};
+        const listKeys = listKey
+            ? ListPanel_1.ListPanel.Config.getKeys(listKey)
+            : {};
+        // current config helpers
+        const hasMessage = MessagePanel_1.MessagePanel.Fields.exists(fields, messageFieldKeys);
+        const visual = visualKey
+            ? fields[visualKey]
+            : undefined;
+        const hasVisual = (visual === null || visual === void 0 ? void 0 : visual.value) !== undefined;
+        const list = listKey
+            ? fields[listKey]
+            : undefined;
+        const hasList = !!((_a = list === null || list === void 0 ? void 0 : list.value) === null || _a === void 0 ? void 0 : _a.length);
+        // get layout schema
+        const activePanels = { message: hasMessage, visual: hasVisual, list: hasList };
+        const layout = ((_c = (_b = config.layout) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : 'solo');
+        const slotVariation = ((_e = (_d = config.slotVariation) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : 'v1');
+        const items = Slots.Items.compute({
+            panels: activePanels,
+            layout,
+            variation: slotVariation
+        });
+        const contentAlign = (_g = (_f = config.contentAlign) === null || _f === void 0 ? void 0 : _f.value) !== null && _g !== void 0 ? _g : 'start';
+        const messageTextAlign = (_j = (_h = config[messageKeys.textAlign]) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 'left';
+        const messageWidth = (_l = (_k = config[messageKeys.width]) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 'full';
+        const messageHorizontalAlign = (_o = (_m = config[messageKeys.horizontalAlign]) === null || _m === void 0 ? void 0 : _m.value) !== null && _o !== void 0 ? _o : 'start';
+        const messageVerticalAlign = (_q = (_p = config[messageKeys.verticalAlign]) === null || _p === void 0 ? void 0 : _p.value) !== null && _q !== void 0 ? _q : 'start';
+        const visualAspect = (_s = (_r = config[visualKeys.aspect]) === null || _r === void 0 ? void 0 : _r.value) !== null && _s !== void 0 ? _s : 'auto';
+        const visualWidth = ((_u = (_t = config[visualKeys.width]) === null || _t === void 0 ? void 0 : _t.value) !== null && _u !== void 0 ? _u : 'full');
+        const visualHorizontalAlign = (_w = (_v = config[visualKeys.horizontalAlign]) === null || _v === void 0 ? void 0 : _v.value) !== null && _w !== void 0 ? _w : 'start';
+        const isVisualFullBleed = visualWidth === 'fullBleed';
+        const listWidth = (_y = (_x = config[listKeys.width]) === null || _x === void 0 ? void 0 : _x.value) !== null && _y !== void 0 ? _y : 'full';
+        const listHorizontalAlign = (_0 = (_z = config[listKeys.horizontalAlign]) === null || _z === void 0 ? void 0 : _z.value) !== null && _0 !== void 0 ? _0 : 'start';
+        const listVerticalAlign = (_2 = (_1 = config[listKeys.verticalAlign]) === null || _1 === void 0 ? void 0 : _1.value) !== null && _2 !== void 0 ? _2 : 'start';
+        // create visual if we have one
+        let visualSlot = undefined;
+        if (items.includes('V') || schema_1.PanelLayout.isNested(layout)) {
+            // language=XML
+            visualSlot = (`
+        <visual
+          xmlns="nd:block"
+          aspect="${visualAspect}"
+          size="${visualWidth === 'fullBleed' ? 'full' : visualWidth}"
+          alignX="${visualHorizontalAlign}"
+          fullBleed="${isVisualFullBleed}"
+        />
+      `);
+        }
+        // create slot items
+        const slots = items.map(item => {
+            switch (item) {
+                case 'M': {
+                    // language=XML
+                    return (`
+            <message
+              xmlns="nd:block"
+              textAlign="${messageTextAlign}"
+              size="${messageWidth}"
+              alignX="${messageHorizontalAlign}"
+              alignY="${messageVerticalAlign}"
+            />
+          `);
+                }
+                case 'V':
+                    return visualSlot;
+                case 'L': {
+                    // FIXME: update props from config (lists WILL REQUIRED new props)
+                    // language=XML
+                    return (`
+            <list
+              xmlns="nd:block"
+              layout="column"
+              itemType="message"
+              size="${listWidth}"
+              alignX="${listHorizontalAlign}"
+              alignY="${listVerticalAlign}"
+              itemCount="2"
+            />
+          `);
+                }
+            }
+        });
+        // build layout
+        let blockLayout = '';
+        switch (layout) {
+            case 'solo':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Solo">
+            <col>
+              ${slots[0]}
+            </col>
+          </block>
+        `;
+                break;
+            case 'stack.h': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    tightDesktop = 'both';
+                    tightMobile = items[0] === 'V' ? 'above' : 'below';
+                }
+                // language=XML
+                blockLayout = `
+          <block 
+            xmlns="nd:block"
+            name="Horizontal Stack"
+            tightDesktop="${tightDesktop}"
+            tightMobile="${tightMobile}"
+          >
+            <row alignY="${contentAlign}">
+              ${slots[0]}
+              ${slots[1]}
+            </row>
+          </block>
+        `;
+                break;
+            }
+            case 'stack.v':
+                // language=XML
+                blockLayout = `
+            <block 
+              xmlns="nd:block" name="Vertical Stack"
+              tight="${!isVisualFullBleed ? 'none' : items[0] === 'V' ? 'above' : 'below'}">
+            <col>
+              ${slots[0]}
+              ${slots[1]}
+            </col>
+          </block>
+        `;
+                break;
+            case 'nested':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Simple" tight="${isVisualFullBleed ? 'both' : 'none'}">
+            <stack>
+              ${visualSlot}
+              ${slots[0]}
+            </stack>
+          </block>
+        `;
+                break;
+            case 'nested.h':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Horizontal">
+            <stack>
+              ${visualSlot}
+              <row alignY="${contentAlign}">
+                ${slots[0]}
+                ${slots[1]}
+              </row>
+            </stack>
+          </block>
+        `;
+                break;
+            case 'nested.v':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Vertical">
+            <stack>
+              ${visualSlot}
+              <col>
+                ${slots[0]}
+                ${slots[1]}
+              </col>
+            </stack>
+          </block>
+        `;
+                break;
+            case 'nested.t':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Top">
+            <col>
+              <stack>
+                ${visualSlot}
+                ${slots[0]}
+              </stack>
+              ${slots[1]}
+            </col>
+          </block>
+        `;
+                break;
+            case 'nested.r':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Right">
+            <row alignY="${contentAlign}">
+              ${slots[0]}
+              <stack>
+                ${visualSlot}
+                ${slots[1]}
+              </stack>
+            </row>
+          </block>
+        `;
+                break;
+            case 'nested.b':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Bottom">
+            <col>
+              ${slots[0]}
+              <stack>
+                ${visualSlot}
+                ${slots[1]}
+              </stack>
+            </col>
+          </block>
+        `;
+                break;
+            case 'nested.l':
+                // language=XML
+                blockLayout = `
+          <block xmlns="nd:block" name="Nested: Left">
+            <row alignY="${contentAlign}">
+              <stack>
+                ${visualSlot}
+                ${slots[0]}
+              </stack>
+              ${slots[1]}
+            </row>
+          </block>
+        `;
+                break;
+            case 'brick.v': {
+                // compute tight
+                let tight = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tight = 'above';
+                    }
+                    else if (items[2] === 'V') {
+                        tight = 'below';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+          <block
+            xmlns="nd:block"
+            name="Brick: Vertical"
+            tight="${tight}"
+          >
+            <col>
+              ${slots[0]}
+              ${slots[1]}
+              ${slots[2]}
+            </col>
+          </block>
+        `;
+                break;
+            }
+            case 'brick.t': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'above';
+                    }
+                    else if (items[1] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'none';
+                    }
+                    else if (items[2] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'below';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+            <block
+              xmlns="nd:block"
+              name="Brick: Top"
+              tightDesktop="${tightDesktop}"
+              tightMobile="${tightMobile}"
+            >
+              <col>
+                ${slots[0]}
+                <row alignY="${contentAlign}">
+                  ${slots[1]}
+                  ${slots[2]}
+                </row>
+              </col>
+            </block>
+        `;
+                break;
+            }
+            case 'brick.r': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'above';
+                    }
+                    else if (items[1] === 'V') {
+                        tightDesktop = 'both';
+                        tightMobile = 'below';
+                    }
+                    else if (items[2] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'none';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+            <block
+              xmlns="nd:block" 
+              name="Brick: Right"
+              tightDesktop="${tightDesktop}"
+              tightMobile="${tightMobile}"
+            >
+                <row alignY="${contentAlign}">
+                    <col>
+                        ${slots[0]}
+                        ${slots[2]}
+                    </col>
+                    ${slots[1]}
+                </row>
+            </block>
+        `;
+                break;
+            }
+            case 'brick.b': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'above';
+                    }
+                    else if (items[1] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'none';
+                    }
+                    else if (items[2] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'below';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+            <block 
+              xmlns="nd:block"
+              name="Brick: Bottom"
+              tightDesktop="${tightDesktop}"
+              tightMobile="${tightMobile}"
+            >
+              <col>
+                <row alignY="${contentAlign}">
+                  ${slots[0]}
+                  ${slots[1]}
+                </row>
+                ${slots[2]}
+              </col>
+            </block>
+        `;
+                break;
+            }
+            case 'brick.l': {
+                // compute tight
+                let tightDesktop = 'none';
+                let tightMobile = 'none';
+                if (isVisualFullBleed) {
+                    if (items[0] === 'V') {
+                        tightDesktop = 'both';
+                        tightMobile = 'above';
+                    }
+                    else if (items[1] === 'V') {
+                        tightDesktop = 'above';
+                        tightMobile = 'none';
+                    }
+                    else if (items[2] === 'V') {
+                        tightDesktop = 'below';
+                        tightMobile = 'below';
+                    }
+                }
+                // language=XML
+                blockLayout = `
+            <block
+              xmlns="nd:block"
+              name="Brick: Left"
+              tightDesktop="${tightDesktop}"
+              tightMobile="${tightMobile}"
+            >
+                <row alignY="${contentAlign}">
+                    ${slots[0]}
+                    <col>
+                        ${slots[1]}
+                        ${slots[2]}
+                    </col>
+                </row>
+            </block>
+        `;
+                break;
+            }
+            default:
+                throw new funnel_core_1.NotImplementedError();
+        }
+        // return parsed layout
+        return funnel_core_1.BlockLayout.parse(blockLayout);
+    }
+    BlockPanel.getLayout = getLayout;
 })(BlockPanel || (exports.BlockPanel = BlockPanel = {}));