@nascentdigital/funnel-ui 4.6.1 → 5.0.1

package/dist/server/panels/BlockPanel.js

@@ -6,62 +6,15 @@ 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) {
-    function getClassNames({ panel, alignX = panel.alignX, alignY = panel.alignY, size = panel.size, fullbleed, mobileOrder = panel.mobileOrder }) {
-        return (0, classnames_1.default)('nd-BlockPanel', 
-        // alignment
-        {
-            'nd-BlockPanel-x-start': alignX === 'start',
-            'nd-BlockPanel-x-center': alignX === 'center',
-            'nd-BlockPanel-x-end': alignX === 'end',
-            'nd-BlockPanel-y-start': alignY === 'start',
-            'nd-BlockPanel-y-center': alignY === 'center',
-            'nd-BlockPanel-y-end': alignY === 'end',
-        }, 
-        // size
-        {
-            'nd-BlockPanel-xs': size === 'xs',
-            'nd-BlockPanel-sm': size === 'sm',
-            'nd-BlockPanel-md': size === 'md',
-            'nd-BlockPanel-lg': size === 'lg',
-            'nd-BlockPanel-full': size === 'full'
-        }, 
-        // fullbleed
-        fullbleed !== undefined
-            ? { 'nd-BlockPanel-fullbleed': fullbleed }
-            : funnel_core_1.BlockLayout.ResponsiveClassNames.parse({
-                value: panel.fullBleed,
-                mobile: {
-                    false: '',
-                    true: 'nd-BlockPanel-fullbleed-mobile'
-                },
-                base: {
-                    false: '',
-                    true: 'nd-BlockPanel-fullbleed-tablet'
-                },
-                desktop: {
-                    false: '',
-                    true: 'nd-BlockPanel-fullbleed-desktop'
-                }
-            }), 
-        // mobile order
-        {
-            'nd-BlockPanel-mobileFirst': mobileOrder === 'first',
-            'nd-BlockPanel-mobileLast': mobileOrder === 'last'
-        });
-    }
-    BlockPanel.getClassNames = getClassNames;
     // slots
     let Slots;
     (function (Slots) {
         let Items;
         (function (Items) {
+            // values
             Items.values = ['M', 'V', 'L'];
             function forPanels({ message, visual, list }) {
                 return Items.values.slice()
@@ -249,663 +202,54 @@ var BlockPanel;
         }
         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 content alignment if there are more than 2 panels
-        if (panelCount > 1) {
-            configSchema['contentAlign'] = schema_1.ItemAlignment.Vertical.schema.rename('Content Alignment').optional();
-        }
-        // return
-        return configSchema;
+    function getWrapClassName() {
+        return (0, classnames_1.default)('nd-BlockPanel-wrap');
     }
-    BlockPanel.getConfigSchema = getConfigSchema;
-    function getConfig({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        // 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 visual = visualKey
-            ? fields[visualKey]
-            : undefined;
-        const panelInfo = getActivePanels({ fields: args.fields, messageFieldKeys, messageKey, visualKey, listKey });
-        const activePanels = {
-            message: panelInfo.message !== false,
-            visual: panelInfo.visual !== false,
-            list: panelInfo.list !== false,
-        };
-        // get layout schema
-        const layoutSchema = schema_1.PanelLayout.schemaForPanels(activePanels);
-        let layout = ((_b = (_a = config.layout) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'solo');
-        layout = layoutSchema.isValidOption(layout)
-            ? layout
-            : layoutSchema.defaultOption;
-        const slotVariationSchema = schema_1.SlotVariation.schemaForLayout(layout);
-        let slotVariation = ((_d = (_c = config.slotVariation) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 'v1');
-        slotVariation = slotVariationSchema.isValidOption(slotVariation)
-            ? slotVariation
-            : slotVariationSchema.defaultOption;
-        const items = Slots.Items.compute({
-            panels: activePanels,
-            layout,
-            variation: slotVariation
+    BlockPanel.getWrapClassName = getWrapClassName;
+    function getClassNames({ panel, alignX = panel.alignX, alignY = panel.alignY, size = panel.size, mobileOrder = panel.mobileOrder }) {
+        return (0, classnames_1.default)('nd-BlockPanel', 
+        // alignment
+        {
+            'nd-BlockPanel-x-start': alignX === 'start',
+            'nd-BlockPanel-x-center': alignX === 'center',
+            'nd-BlockPanel-x-end': alignX === 'end',
+            'nd-BlockPanel-y-start': alignY === 'start',
+            'nd-BlockPanel-y-center': alignY === 'center',
+            'nd-BlockPanel-y-end': alignY === 'end',
+        }, 
+        // size
+        {
+            'nd-BlockPanel-xs': size === 'xs',
+            'nd-BlockPanel-sm': size === 'sm',
+            'nd-BlockPanel-md': size === 'md',
+            'nd-BlockPanel-lg': size === 'lg',
+            'nd-BlockPanel-full': size === 'full'
+        }, 
+        // mobile order
+        {
+            'nd-BlockPanel-mobileFirst': mobileOrder === 'first',
+            'nd-BlockPanel-mobileLast': mobileOrder === 'last'
         });
-        const flexDirections = Slots.getFlexDirections({ layout, items });
-        // extract message config
-        let messageConfig = undefined;
-        if (messageKey && activePanels.message) {
-            messageConfig = MessagePanel_1.MessagePanel.getConfig({
-                messageKey,
-                config: config,
-                fields: fields,
-                flexDirection: flexDirections.M
-            });
-        }
-        // extract visual config (if any)
-        let visualConfig = undefined;
-        if (visualKey && activePanels.visual) {
-            visualConfig = VisualPanel_1.VisualPanel.getConfig({
-                visualKey,
-                visual,
-                config: config,
-                flexDirection: flexDirections.V
-            });
-        }
-        // extract list config (if any)
-        let listConfig = undefined;
-        if (listKey && activePanels.list) {
-            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;
-        }
-        // create default config
-        const defaultConfig = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, config), { 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), { layout: funnel_core_1.Schema.EnumField.Value.toData((_e = layoutSchema.defaultOption) !== null && _e !== void 0 ? _e : 'solo'), slotVariation: funnel_core_1.Schema.EnumField.Value.toData((_f = slotVariationSchema.defaultOption) !== null && _f !== void 0 ? _f : 'v1') });
-        const contentAlign = ((_h = (_g = config.contentAlign) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : 'start');
-        // 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), contentAlign: funnel_core_1.Schema.EnumField.Value.toData(contentAlign) });
-        // 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, _3;
-        // 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 panelInfo = getActivePanels({ fields: args.fields, messageFieldKeys, messageKey, visualKey, listKey });
-        const activePanels = {
-            message: panelInfo.message !== false,
-            visual: panelInfo.visual !== false,
-            list: panelInfo.list !== false,
-        };
-        // get layout schema
-        const layout = ((_b = (_a = config.layout) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : 'solo');
-        const slotVariation = ((_d = (_c = config.slotVariation) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 'v1');
-        const items = Slots.Items.compute({
-            panels: activePanels,
-            layout,
-            variation: slotVariation
-        });
-        // compute content alignment config
-        const contentAlign = (_f = (_e = config.contentAlign) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : 'start';
-        // compute message config
-        const messageWidthRaw = (_g = config[messageKeys.width]) === null || _g === void 0 ? void 0 : _g.value;
-        const isMessageFullBleed = messageWidthRaw === 'fullBleed';
-        const messageWidth = isMessageFullBleed ? 'full' : (_j = (_h = config[messageKeys.width]) === null || _h === void 0 ? void 0 : _h.value) !== null && _j !== void 0 ? _j : 'full';
-        const messageTextAlign = (_l = (_k = config[messageKeys.textAlign]) === null || _k === void 0 ? void 0 : _k.value) !== null && _l !== void 0 ? _l : 'left';
-        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';
-        // compute visual config
-        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';
-        // compute list config
-        const listWidthRaw = (_x = config[listKeys.width]) === null || _x === void 0 ? void 0 : _x.value;
-        const isListFullBleed = listWidthRaw === 'fullBleed';
-        const listWidth = isListFullBleed ? 'full' : (_z = (_y = config[listKeys.width]) === null || _y === void 0 ? void 0 : _y.value) !== null && _z !== void 0 ? _z : 'full';
-        const listHorizontalAlign = (_1 = (_0 = config[listKeys.horizontalAlign]) === null || _0 === void 0 ? void 0 : _0.value) !== null && _1 !== void 0 ? _1 : 'start';
-        const listVerticalAlign = (_3 = (_2 = config[listKeys.verticalAlign]) === null || _2 === void 0 ? void 0 : _2.value) !== null && _3 !== void 0 ? _3 : '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}"
-              fullBleed="${isMessageFullBleed}"
-              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}"
-              fullBleed="${isListFullBleed}"
-              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';
-                    }
+    BlockPanel.getClassNames = getClassNames;
+    function getFullBleedClassNames({ panel, fullbleed, }) {
+        return (0, classnames_1.default)(fullbleed !== undefined
+            ? { 'nd-BlockPanel-fullbleed': fullbleed }
+            : funnel_core_1.BlockLayout.ResponsiveClassNames.parse({
+                value: panel.fullBleed,
+                mobile: {
+                    false: '',
+                    true: 'nd-BlockPanel-fullbleed-mobile'
+                },
+                base: {
+                    false: '',
+                    true: 'nd-BlockPanel-fullbleed-tablet'
+                },
+                desktop: {
+                    false: '',
+                    true: 'nd-BlockPanel-fullbleed-desktop'
                 }
-                // 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;
-    function getActivePanels({ fields: fieldsRaw, messageFieldKeys, messageKey, visualKey, listKey }) {
-        var _a;
-        // prepare values
-        const fields = fieldsRaw;
-        const visual = visualKey
-            ? fields[visualKey]
-            : undefined;
-        const list = listKey
-            ? fields[listKey]
-            : undefined;
-        // return result
-        return {
-            message: messageKey && MessagePanel_1.MessagePanel.Fields.exists(fields, messageFieldKeys)
-                ? MessagePanel_1.MessagePanel.Fields.isEmpty(fields, messageFieldKeys)
-                    ? 'invalid'
-                    : 'valid'
-                : false,
-            visual: visual
-                ? visual.value
-                    ? 'valid'
-                    : 'invalid'
-                : false,
-            list: list
-                ? ((_a = list.value) !== null && _a !== void 0 ? _a : []).length === 0
-                    ? 'valid'
-                    : 'invalid'
-                : false
-        };
+            }));
     }
-    BlockPanel.getActivePanels = getActivePanels;
+    BlockPanel.getFullBleedClassNames = getFullBleedClassNames;
 })(BlockPanel || (exports.BlockPanel = BlockPanel = {}));