@nascentdigital/funnel-ui 4.4.18

package/dist/server/fields/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Caption"), exports);
+__exportStar(require("./Description"), exports);
+__exportStar(require("./FreeFormContent"), exports);
+__exportStar(require("./Headline"), exports);
+__exportStar(require("./Icon"), exports);
+__exportStar(require("./Link"), exports);
+__exportStar(require("./Quote"), exports);
+__exportStar(require("./RichText"), exports);
+__exportStar(require("./Title"), exports);
+__exportStar(require("./Visual"), exports);

package/dist/server/index.d.ts

@@ -0,0 +1,9 @@
+export * from './atomic';
+export * from './blocks';
+export * from './data';
+export * from './entities';
+export * from './fields';
+export * from './panels';
+export * from './schema';
+export * from './sections';
+export * from './transitions';

package/dist/server/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./atomic"), exports);
+__exportStar(require("./blocks"), exports);
+__exportStar(require("./data"), exports);
+__exportStar(require("./entities"), exports);
+__exportStar(require("./fields"), exports);
+__exportStar(require("./panels"), exports);
+__exportStar(require("./schema"), exports);
+__exportStar(require("./sections"), exports);
+__exportStar(require("./transitions"), exports);

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

@@ -0,0 +1,14 @@
+import { BlockLayout } from '@nascentdigital/funnel-core';
+export declare namespace BlockPanel {
+    type Props = {
+        alignX?: BlockLayout.Alignment;
+        alignY?: BlockLayout.Alignment;
+        size?: BlockLayout.Size;
+        fullbleed?: boolean;
+        mobileOrder?: BlockLayout.MobileOrder;
+    };
+    type GetClassNamesArgs = Props & {
+        panel: BlockLayout.Panel;
+    };
+    function getClassNames({ panel, alignX, alignY, size, fullbleed, mobileOrder }: GetClassNamesArgs): string;
+}

package/dist/server/panels/BlockPanel.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockPanel = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+// 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;
+})(BlockPanel || (exports.BlockPanel = BlockPanel = {}));

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

@@ -0,0 +1,31 @@
+import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
+import { Caption, Headline, Title } from '../fields';
+import { TextAlignment } from '../schema';
+import { BlockPanel } from './BlockPanel';
+export declare function MessagePanel({ className, panel, titleTag, title, headlineTag, headline, captionTag, caption, ctas: ctasRaw, textAlign, alignX, alignY, size, fullbleed, mobileOrder }: MessagePanel.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessagePanel {
+    type Props = BlockPanel.Props & {
+        className?: string;
+        panel: BlockLayout.Message;
+        titleTag?: Title.Tag;
+        title?: Title.Value;
+        headlineTag?: Headline.Tag;
+        headline: Headline.Value;
+        caption?: Caption.Value;
+        captionTag?: Caption.Tag;
+        ctas?: Schema.LinkField.LinkedValue | Fields.ctas.Value;
+        textAlign?: TextAlignment;
+    };
+    namespace Fields {
+        const title: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
+        const headline: Schema.RichTextField;
+        const caption: Schema.Optional<Schema.RichTextField>;
+        const cta: Schema.LinkField;
+        const ctas: Schema.Optional<Schema.ListField<{
+            cta: Schema.LinkField;
+        }>>;
+        namespace ctas {
+            type Value = Schema.Field.LinkedValue.ForOptionalType<typeof ctas>;
+        }
+    }
+}

package/dist/server/panels/MessagePanel.js

@@ -0,0 +1,81 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessagePanel = MessagePanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const fields_1 = require("../fields");
+const BlockPanel_1 = require("./BlockPanel");
+// component
+function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag = 'h2', headline, captionTag = 'div', caption, ctas: ctasRaw = [], textAlign, alignX, alignY, size, fullbleed, mobileOrder }) {
+    // normalize ctas
+    let ctas;
+    if (Array.isArray(ctasRaw)) {
+        ctas = ctasRaw;
+    }
+    else {
+        ctas = [
+            {
+                id: '__cta',
+                schema: 'cta',
+                type: 'link',
+                value: ctasRaw
+            }
+        ];
+    }
+    // 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'
+                }
+            })), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-MessagePanel-content", children: [title &&
+                    (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-MessagePanel-title", as: titleTag, title: title }), (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)("div", { className: "nd-MessagePanel-ctas", children: ctas.map(cta => (0, jsx_runtime_1.jsx)(fields_1.Link, { className: "nd-MessagePanel-cta", link: cta.value }, cta.id)) })] }) }));
+}
+// extension
+(function (MessagePanel) {
+    // fields
+    let Fields;
+    (function (Fields) {
+        Fields.title = fields_1.Visual.schema.modify({
+            description: 'A short intro or heading for the message'
+        }).optional();
+        Fields.headline = fields_1.Headline.schema;
+        Fields.caption = fields_1.Caption.schema.optional();
+        Fields.cta = funnel_core_1.Schema.Field.link({ name: 'Call to Action' });
+        Fields.ctas = funnel_core_1.Schema.Field.list({
+            name: 'CTAs',
+            description: 'Add your call-to-actions in the order you\'d like them to appear *(these are optional)*.',
+            itemTypes: { cta: Fields.cta },
+            min: 1,
+            max: 2
+        }).optional();
+    })(Fields = MessagePanel.Fields || (MessagePanel.Fields = {}));
+})(MessagePanel || (exports.MessagePanel = MessagePanel = {}));

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

@@ -0,0 +1,36 @@
+import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
+import { ReactNode } from 'react';
+import { Visual } from '../fields';
+import { Anchor, AspectRatio } 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 namespace VisualPanel {
+    type Props = BlockPanel.Props & {
+        className?: string;
+        panel: BlockLayout.Visual;
+        visual: Visual.Model;
+        visualDecorator?: ReactNode;
+        visualLoading?: Visual.Loading;
+        aspect?: AspectRatio;
+        anchor?: Anchor;
+    };
+    namespace Fields {
+        const visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
+    }
+    namespace GetConfig {
+        type ConfigSchema<AspectKey extends string, AnchorKey extends string> = Record<AspectKey, AspectRatio.Schema> & Record<AnchorKey, Anchor.Schema>;
+        type ConfigData<AspectKey extends string, AnchorKey extends string> = Schema.Block.Data.ForConfig<ConfigSchema<AspectKey, AnchorKey>>;
+        type Args<AspectKey extends string, AnchorKey extends string> = {
+            visual?: Schema.Field.Data<Schema.AssetField> | Schema.Field.LinkedData<Schema.AssetField>;
+            config?: Partial<ConfigData<AspectKey, AnchorKey>>;
+            aspectKey: AspectKey;
+            anchorKey: AnchorKey;
+        };
+        type Result<AspectKey extends string, AnchorKey extends string> = {
+            configSchema: Partial<ConfigSchema<AspectKey, AnchorKey>>;
+            config: Partial<ConfigData<AspectKey, AnchorKey>>;
+            defaultConfig: Partial<ConfigData<AspectKey, AnchorKey>>;
+        };
+    }
+    function getConfig<AspectKey extends string, AnchorKey extends string>({ visual: visualData, config, aspectKey, anchorKey }: GetConfig.Args<AspectKey, AnchorKey>): GetConfig.Result<AspectKey, AnchorKey>;
+}

package/dist/server/panels/VisualPanel.js

@@ -0,0 +1,143 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualPanel = VisualPanel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+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 }) {
+    // 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'
+                }
+            }), 
+        // 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: [(0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-VisualPanel-visual", visual: visual, loading: visualLoading }), 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;
+    })(Fields = VisualPanel.Fields || (VisualPanel.Fields = {}));
+    function getConfig({ visual: visualData, config = {}, aspectKey, anchorKey }) {
+        var _a, _b, _c, _d, _e;
+        // resolve values
+        const defaultAspect = 'auto';
+        const defaultAnchor = 'center';
+        let aspect = (_b = (_a = config[aspectKey]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultAspect;
+        let anchor = (_d = (_c = config[anchorKey]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : 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)) {
+            return {
+                configSchema: {
+                    [aspectKey]: undefined,
+                    [anchorKey]: undefined
+                },
+                config: {},
+                defaultConfig: {}
+            };
+        }
+        // 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;
+        const matchedAspect = sourceAspectRatio
+            ? schema_1.AspectRatio.forRatio(sourceAspectRatio)
+            : undefined;
+        if (aspect === matchedAspect) {
+            aspect = 'auto';
+        }
+        console.debug('[VisualPanel/getConfig] aspect calculation:', { width, height, sourceAspectRatio, matchedAspect });
+        // create schema (drop matched aspect if we need to)
+        const configSchema = {
+            [aspectKey]: matchedAspect
+                ? schema_1.AspectRatio.schema.removeOption(matchedAspect)
+                : schema_1.AspectRatio.schema,
+            [anchorKey]: aspect === 'auto' ? undefined : schema_1.Anchor.schema
+        };
+        // reduce anchor to options that are allowed (vertical vs horizontal cropping)
+        if (sourceAspectRatio && aspect !== 'auto') {
+            // coerce anchor
+            const targetAspectRatio = schema_1.AspectRatio.ratios[aspect];
+            console.debug('[VisualPanel/getConfig] aspect calculation:', { width, height, sourceAspectRatio, matchedAspect, targetAspectRatio });
+            let anchorSchema = schema_1.Anchor.schema.modify({ semantics: 'segmented' });
+            if (sourceAspectRatio < targetAspectRatio) {
+                anchorSchema = anchorSchema.keepOptions('center', 'top', 'bottom');
+            }
+            else {
+                anchorSchema = anchorSchema.keepOptions('center', 'left', 'right');
+            }
+            configSchema[anchorKey] = anchorSchema;
+            // update config
+            if (!anchorSchema.isValidOption(anchor)) {
+                anchor = 'center';
+            }
+        }
+        // return result
+        return {
+            configSchema: configSchema,
+            config: {
+                [aspectKey]: funnel_core_1.Schema.EnumField.Value.toData(aspect),
+                [anchorKey]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(anchor)
+            },
+            defaultConfig: {
+                [aspectKey]: funnel_core_1.Schema.EnumField.Value.toData(defaultAspect),
+                [anchorKey]: aspect === 'auto' ? undefined : funnel_core_1.Schema.EnumField.Value.toData(defaultAnchor)
+            }
+        };
+    }
+    VisualPanel.getConfig = getConfig;
+})(VisualPanel || (exports.VisualPanel = VisualPanel = {}));

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

@@ -0,0 +1,3 @@
+export * from './BlockPanel';
+export * from './MessagePanel';
+export * from './VisualPanel';

package/dist/server/panels/index.js

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

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

@@ -0,0 +1,7 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export type Anchor = 'center' | 'top' | 'bottom' | 'left' | 'right';
+export declare namespace Anchor {
+    const options: Schema.EnumField.Options<Anchor>;
+    const schema: Schema.EnumField<Schema.EnumField.Options<Anchor>>;
+    type Schema = typeof schema;
+}

package/dist/server/schema/Anchor.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Anchor = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+// extension
+var Anchor;
+(function (Anchor) {
+    // schema
+    Anchor.options = {
+        center: { name: 'Center' },
+        top: { name: 'Top' },
+        bottom: { name: 'Bottom' },
+        left: { name: 'Left' },
+        right: { name: 'Right' }
+    };
+    Anchor.schema = funnel_core_1.Schema.Field.enumeration({
+        name: 'Anchor',
+        semantics: 'dropdown',
+        hint: 'Set anchor',
+        description: 'Sets the edge of the visual that will be visible (not cropped).',
+        options: Anchor.options,
+        defaultOption: 'center'
+    });
+})(Anchor || (exports.Anchor = Anchor = {}));

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

@@ -0,0 +1,9 @@
+import { BlockLayout, Schema } from '@nascentdigital/funnel-core';
+export type AspectRatio = BlockLayout.AspectRatio;
+export declare namespace AspectRatio {
+    const ratios: Readonly<Record<Exclude<AspectRatio, 'auto'>, number>>;
+    const options: Schema.EnumField.Options<AspectRatio>;
+    const schema: Schema.EnumField<Schema.EnumField.Options<BlockLayout.AspectRatio>>;
+    type Schema = typeof schema;
+    function forRatio(ratio: number): AspectRatio | undefined;
+}

package/dist/server/schema/AspectRatio.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AspectRatio = void 0;
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+// extension
+var AspectRatio;
+(function (AspectRatio) {
+    // export cont ratios
+    AspectRatio.ratios = {
+        square: 1,
+        phone: 9 / 16,
+        tv: 4 / 3,
+        widescreen: 16 / 9,
+        cinema: 185 / 100
+    };
+    // schema
+    AspectRatio.options = {
+        auto: { name: 'Auto', hint: 'Use the natural sizing of the visual.' },
+        square: { name: 'Square', hint: 'Crop to a square (1:1)' },
+        phone: { name: 'Phone', hint: 'Crop to phone portrait (9:16)' },
+        tv: { name: 'TV', hint: 'Crop to TV frame (4:3)' },
+        widescreen: { name: 'Widescreen', hint: 'Crop to widescreen media display (16:9)' },
+        cinema: { name: 'Cinema', hint: 'Crop to cinema display (185:100' }
+    };
+    AspectRatio.schema = funnel_core_1.Schema.Field.enumeration({
+        name: 'Aspect Ratio',
+        semantics: 'dropdown',
+        hint: 'Select aspect',
+        description: 'Control how visuals are cropped.',
+        options: AspectRatio.options,
+        defaultOption: 'auto'
+    });
+    // helpers
+    function forRatio(ratio) {
+        var _a;
+        // match if within a threshold of 1/100th
+        const [aspect] = (_a = Object.entries(AspectRatio.ratios)
+            .find(([, aspectRatio]) => Math.abs(aspectRatio - ratio) <= 0.01)) !== null && _a !== void 0 ? _a : [];
+        // return aspect
+        return aspect;
+    }
+    AspectRatio.forRatio = forRatio;
+})(AspectRatio || (exports.AspectRatio = AspectRatio = {}));

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

@@ -0,0 +1,56 @@
+import { BlockThemes, Schema } from '@nascentdigital/funnel-core';
+export declare namespace BlockConfig {
+    namespace Theme {
+        const schema: Schema.EnumField<Readonly<BlockThemes.Options>>;
+        type Model = Schema.Field.Value<typeof schema>;
+        function getClassName(theme?: BlockThemes.Theme.Extended): string;
+    }
+    type VisualLayout = VisualLayout.Horizontal | VisualLayout.Vertical | 'bg';
+    namespace VisualLayout {
+        type Horizontal = 'left' | 'right';
+        type Vertical = 'top' | 'bottom';
+        namespace Horizontal {
+            const Enum: Schema.EnumField.Options<Horizontal>;
+            const schema: Schema.EnumField<Schema.EnumField.Options<Horizontal>>;
+        }
+        namespace Vertical {
+            const Enum: Schema.EnumField.Options<Vertical>;
+            const schema: Schema.EnumField<Schema.EnumField.Options<Vertical>>;
+        }
+        const Enum: Schema.EnumField.Options<VisualLayout>;
+        const schema: Schema.EnumField<Schema.EnumField.Options<VisualLayout>>;
+        type Model = Schema.Field.Value<typeof schema>;
+        function getClassName(layout?: VisualLayout): string;
+    }
+    type CopyLayout = 'center' | 'left' | 'left-top' | 'left-btm' | 'right' | 'right-top' | 'right-btm' | 'top' | 'bottom';
+    namespace CopyLayout {
+        const Enum: Schema.EnumField.Options<CopyLayout>;
+        const schema: Schema.EnumField<Schema.EnumField.Options<CopyLayout>>;
+        type Model = Schema.Field.Value<typeof schema>;
+        function getClassName(layout?: CopyLayout): string;
+    }
+    namespace Fullbleed {
+        const schema: Schema.BooleanField;
+        type Model = Schema.Field.Value<typeof schema>;
+        function getClassName(fullbleed?: boolean): string | undefined;
+    }
+    namespace Presets {
+        type ThemeOnly = Schema.Block.Data.ForConfig<typeof ThemeOnly.schema>;
+        namespace ThemeOnly {
+            const schema: {
+                readonly theme: Schema.EnumField<Readonly<BlockThemes.Options>>;
+            };
+            function getClassName(config?: ThemeOnly): string;
+        }
+        type VisualAndCopy = Schema.Block.Data.ForConfig<typeof VisualAndCopy.schema>;
+        namespace VisualAndCopy {
+            const schema: {
+                readonly theme: Schema.EnumField<Readonly<BlockThemes.Options>>;
+                readonly visualLayout: Schema.EnumField<Schema.EnumField.Options<VisualLayout>>;
+                readonly copyLayout: Schema.EnumField<Schema.EnumField.Options<CopyLayout>>;
+                readonly fullbleed: Schema.BooleanField;
+            };
+            function getClassName(config?: VisualAndCopy): string;
+        }
+    }
+}