npm - @nascentdigital/funnel-ui - Versions diffs - 4.5.0 → 4.5.1 - Mend

@nascentdigital/funnel-ui 4.5.0 → 4.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/server/blocks/Block.d.ts +11 -11
package/dist/server/blocks/Clients.d.ts +3 -2
package/dist/server/blocks/MediaLayout.d.ts +11 -307
package/dist/server/blocks/MediaLayout.js +30 -95
package/dist/server/blocks/Message.d.ts +2 -2
package/dist/server/blocks/Outcome.d.ts +3 -2
package/dist/server/blocks/OutcomeDetail.d.ts +5 -2
package/dist/server/blocks/ValueProp.d.ts +3 -2
package/dist/server/blocks/summary/Statement.d.ts +1 -1
package/dist/server/blocks/summary/Summary.d.ts +3 -2
package/dist/server/entities/Client.d.ts +1 -1
package/dist/server/entities/UniqueSellingPoint.d.ts +1 -1
package/dist/server/panels/BlockPanel.d.ts +16 -0
package/dist/server/panels/BlockPanel.js +67 -42
package/dist/server/panels/ListPanel.d.ts +2 -1
package/dist/server/panels/ListPanel.js +21 -11
package/dist/server/panels/MessagePanel.d.ts +3 -1
package/dist/server/panels/MessagePanel.js +40 -11
package/dist/server/panels/VisualPanel.d.ts +1 -0
package/dist/server/panels/VisualPanel.js +10 -1
package/package.json +2 -2

package/dist/server/blocks/Block.d.ts CHANGED Viewed

@@ -14,10 +14,10 @@ export declare namespace Block {
         className?: string;
         panel: BlockLayout.Panel;
     };
-    function create<TMessage extends boolean | undefined = undefined, TVisual extends boolean | undefined = undefined, TList extends Schema.ListField | undefined = undefined, TExtend extends Schema.Block.Config = Schema.Block.Config>(args: Create.Args<TMessage, TVisual, TList, TExtend>): Create.Result<TMessage, TVisual, TList, TExtend>;
+    function create<TBlockId extends string, TMessage extends boolean | undefined = undefined, TVisual extends boolean | undefined = undefined, TList extends Schema.ListField | undefined = undefined, TExtend extends Schema.Block.Config = Schema.Block.Config, TItemProps = any>(args: Create.Args<TBlockId, TMessage, TVisual, TList, TExtend, TItemProps>): Create.Result<TBlockId, TMessage, TVisual, TList, TExtend, TItemProps>;
     namespace Create {
-        type Args<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config> = {
-            id: string;
+        type Args<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
+            id: TBlockId;
             name: string;
             version: number;
             className?: string;
@@ -25,30 +25,30 @@ export declare namespace Block {
             visual?: TVisual;
             list?: {
                 schema: TList;
-                itemRenderer: TList extends Schema.ListField<infer TContent> ? (item: Schema.ListField.LinkedValue.ForItem<TContent>, itemProps: any) => ReactNode : never;
+                itemRenderer: TList extends Schema.ListField<infer TContent> ? (item: Schema.ListField.LinkedValue.ForItem<TContent>, itemProps: TItemProps) => ReactNode : never;
             };
             extendConfigSchema?: TExtend;
         };
-        type Result<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config> = {
-            Component: FunctionComponent<Result.Component<TMessage, TVisual, TList, TExtend>>;
-            schema: Result.Schema<TMessage, TVisual, TList, TExtend>;
+        type Result<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
+            Component: FunctionComponent<Result.Component<TBlockId, TMessage, TVisual, TList, TExtend, TItemProps>>;
+            schema: Result.Schema<TBlockId, TMessage, TVisual, TList, TExtend>;
         };
         namespace Result {
             type FieldsSchema<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined> = ((TMessage extends true ? typeof MessagePanel.Fields.all : {}) & (TVisual extends true ? typeof VisualPanel.Fields.all : {}) & (TList extends Schema.ListField ? {
                 list: TList;
             } : {}));
             type ConfigSchema<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TFields extends FieldsSchema<TMessage, TVisual, TList> = FieldsSchema<TMessage, TVisual, TList>> = BlockPanel.GetConfigSchema.Result<TFields, TMessage extends true ? 'message' : undefined, TVisual extends true ? 'visual' extends Schema.Fields.AssetFields.Keys<TFields> ? 'visual' : undefined : undefined, TList extends Schema.ListField ? 'list' extends Schema.Fields.ListFields.Keys<TFields> ? 'list' : undefined : undefined, TExtend>;
-            type Schema<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config> = Schema.Block<string, FieldsSchema<TMessage, TVisual, TList>, ConfigSchema<TMessage, TVisual, TList, TExtend>>;
-            type Component<TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config> = {
+            type Schema<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config> = Schema.Block<TBlockId, FieldsSchema<TMessage, TVisual, TList>, ConfigSchema<TMessage, TVisual, TList, TExtend>>;
+            type Component<TBlockId extends string, TMessage extends boolean | undefined, TVisual extends boolean | undefined, TList extends Schema.ListField | undefined, TExtend extends Schema.Block.Config, TItemProps> = {
                 className?: string;
-                model: Schema.Block.LinkedData<Schema<TMessage, TVisual, TList, TExtend>>;
+                model: Schema.Block.LinkedData<Schema<TBlockId, TMessage, TVisual, TList, TExtend>>;
             } & ((TMessage extends true ? {
                 messagePanelProps?: MessagePanel.Props.Configuration;
             } : {}) & (TVisual extends true ? {
                 visualPanelProps?: VisualPanel.Props.Configuration;
             } : {}) & (TList extends Schema.ListField ? {
                 listPanelProps?: ListPanel.Props.Configuration & {
-                    itemProps: any;
+                    itemProps: TItemProps;
                 };
             } : {}));
         }

package/dist/server/blocks/Clients.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { ComponentProps } from 'react';
+import { Client } from '../entities';
 import { Block } from './Block';
 export declare function Clients(props: ComponentProps<typeof Clients.Component>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Clients {
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<true, undefined, Schema.ListField<{
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-clients", true, undefined, Schema.ListField<{
         item: Schema.CollectionField<Schema.Collection<{
             division: Schema.Optional<Schema.TextField>;
             location: Schema.Optional<Schema.TextField>;
@@ -11,7 +12,7 @@ export declare namespace Clients {
             badge: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Image>>;
             badgeText: Schema.Optional<Schema.TextField>;
         }>>;
-    }>, Schema.Block.Config>>, schema: Block.Create.Result.Schema<true, undefined, Schema.ListField<{
+    }>, Schema.Block.Config, Client.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd-clients", true, undefined, Schema.ListField<{
         item: Schema.CollectionField<Schema.Collection<{
             division: Schema.Optional<Schema.TextField>;
             location: Schema.Optional<Schema.TextField>;

package/dist/server/blocks/MediaLayout.d.ts CHANGED Viewed

@@ -1,314 +1,18 @@
 import { Schema } from '@nascentdigital/funnel-core';
-import { HTMLAttributes, JSXElementConstructor } from 'react';
+import { ComponentProps, JSXElementConstructor } from 'react';
 import { EmbeddedVideo } from '../../client/refs';
-import { HTMLElements } from '../../types';
-import { BlockPanel } from '../panels';
-export declare function MediaLayout<T extends MediaLayout.Tag>({ className, as, EmbeddedVideoElement, layout, ...props }: MediaLayout.Props<T>): import("react").DetailedReactHTMLElement<{
-    prefix?: string | undefined | undefined;
-    content?: string | undefined | undefined;
-    translate?: "yes" | "no" | undefined | undefined;
-    color?: string | undefined | undefined;
-    id?: string | undefined | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    slot?: string | undefined | undefined;
-    style?: import("react").CSSProperties | undefined;
-    title?: string | undefined | undefined;
-    onAnimationStart?: import("react").AnimationEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragStart?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragEnd?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDrag?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    defaultChecked?: boolean | undefined | undefined;
-    defaultValue?: string | number | readonly string[] | undefined;
-    suppressContentEditableWarning?: boolean | undefined | undefined;
-    suppressHydrationWarning?: boolean | undefined | undefined;
-    accessKey?: string | undefined | undefined;
-    autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-    autoFocus?: boolean | undefined | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
-    contextMenu?: string | undefined | undefined;
-    dir?: string | undefined | undefined;
-    draggable?: (boolean | "true" | "false") | undefined;
-    enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-    hidden?: boolean | undefined | undefined;
-    lang?: string | undefined | undefined;
-    nonce?: string | undefined | undefined;
-    spellCheck?: (boolean | "true" | "false") | undefined;
-    tabIndex?: number | undefined | undefined;
-    radioGroup?: string | undefined | undefined;
-    role?: import("react").AriaRole | undefined;
-    about?: string | undefined | undefined;
-    datatype?: string | undefined | undefined;
-    inlist?: any;
-    property?: string | undefined | undefined;
-    rel?: string | undefined | undefined;
-    resource?: string | undefined | undefined;
-    rev?: string | undefined | undefined;
-    typeof?: string | undefined | undefined;
-    vocab?: string | undefined | undefined;
-    autoCorrect?: string | undefined | undefined;
-    autoSave?: string | undefined | undefined;
-    itemProp?: string | undefined | undefined;
-    itemScope?: boolean | undefined | undefined;
-    itemType?: string | undefined | undefined;
-    itemID?: string | undefined | undefined;
-    itemRef?: string | undefined | undefined;
-    results?: number | undefined | undefined;
-    security?: string | undefined | undefined;
-    unselectable?: "on" | "off" | undefined | undefined;
-    popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-    popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-    popoverTarget?: string | undefined | undefined;
-    inert?: boolean | undefined | undefined;
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-    is?: string | undefined | undefined;
-    exportparts?: string | undefined | undefined;
-    part?: string | undefined | undefined;
-    "aria-activedescendant"?: string | undefined | undefined;
-    "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-    "aria-braillelabel"?: string | undefined | undefined;
-    "aria-brailleroledescription"?: string | undefined | undefined;
-    "aria-busy"?: (boolean | "true" | "false") | undefined;
-    "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-colcount"?: number | undefined | undefined;
-    "aria-colindex"?: number | undefined | undefined;
-    "aria-colindextext"?: string | undefined | undefined;
-    "aria-colspan"?: number | undefined | undefined;
-    "aria-controls"?: string | undefined | undefined;
-    "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-    "aria-describedby"?: string | undefined | undefined;
-    "aria-description"?: string | undefined | undefined;
-    "aria-details"?: string | undefined | undefined;
-    "aria-disabled"?: (boolean | "true" | "false") | undefined;
-    "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-    "aria-errormessage"?: string | undefined | undefined;
-    "aria-expanded"?: (boolean | "true" | "false") | undefined;
-    "aria-flowto"?: string | undefined | undefined;
-    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-    "aria-hidden"?: (boolean | "true" | "false") | undefined;
-    "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-    "aria-keyshortcuts"?: string | undefined | undefined;
-    "aria-label"?: string | undefined | undefined;
-    "aria-labelledby"?: string | undefined | undefined;
-    "aria-level"?: number | undefined | undefined;
-    "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-    "aria-modal"?: (boolean | "true" | "false") | undefined;
-    "aria-multiline"?: (boolean | "true" | "false") | undefined;
-    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-    "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-    "aria-owns"?: string | undefined | undefined;
-    "aria-placeholder"?: string | undefined | undefined;
-    "aria-posinset"?: number | undefined | undefined;
-    "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-    "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-    "aria-required"?: (boolean | "true" | "false") | undefined;
-    "aria-roledescription"?: string | undefined | undefined;
-    "aria-rowcount"?: number | undefined | undefined;
-    "aria-rowindex"?: number | undefined | undefined;
-    "aria-rowindextext"?: string | undefined | undefined;
-    "aria-rowspan"?: number | undefined | undefined;
-    "aria-selected"?: (boolean | "true" | "false") | undefined;
-    "aria-setsize"?: number | undefined | undefined;
-    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-    "aria-valuemax"?: number | undefined | undefined;
-    "aria-valuemin"?: number | undefined | undefined;
-    "aria-valuenow"?: number | undefined | undefined;
-    "aria-valuetext"?: string | undefined | undefined;
-    dangerouslySetInnerHTML?: {
-        __html: string | TrustedHTML;
-    } | undefined | undefined;
-    onCopy?: import("react").ClipboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCopyCapture?: import("react").ClipboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCut?: import("react").ClipboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCutCapture?: import("react").ClipboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPaste?: import("react").ClipboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPasteCapture?: import("react").ClipboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCompositionEnd?: import("react").CompositionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCompositionEndCapture?: import("react").CompositionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCompositionStart?: import("react").CompositionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCompositionStartCapture?: import("react").CompositionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCompositionUpdate?: import("react").CompositionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCompositionUpdateCapture?: import("react").CompositionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLElements.Standard[T]> | undefined;
-    onFocusCapture?: import("react").FocusEventHandler<HTMLElements.Standard[T]> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLElements.Standard[T]> | undefined;
-    onBlurCapture?: import("react").FocusEventHandler<HTMLElements.Standard[T]> | undefined;
-    onChange?: import("react").ChangeEventHandler<HTMLElements.Standard[T], Element> | undefined;
-    onChangeCapture?: import("react").ChangeEventHandler<HTMLElements.Standard[T], Element> | undefined;
-    onBeforeInput?: import("react").InputEventHandler<HTMLElements.Standard[T]> | undefined;
-    onBeforeInputCapture?: import("react").InputEventHandler<HTMLElements.Standard[T]> | undefined;
-    onInput?: import("react").InputEventHandler<HTMLElements.Standard[T]> | undefined;
-    onInputCapture?: import("react").InputEventHandler<HTMLElements.Standard[T]> | undefined;
-    onReset?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onResetCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSubmit?: import("react").SubmitEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSubmitCapture?: import("react").SubmitEventHandler<HTMLElements.Standard[T]> | undefined;
-    onInvalid?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onInvalidCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLoad?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLoadCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onError?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onErrorCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onKeyDown?: import("react").KeyboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onKeyDownCapture?: import("react").KeyboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onKeyPress?: import("react").KeyboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onKeyPressCapture?: import("react").KeyboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onKeyUp?: import("react").KeyboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onKeyUpCapture?: import("react").KeyboardEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAbort?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAbortCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCanPlay?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCanPlayCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCanPlayThrough?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onCanPlayThroughCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDurationChange?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDurationChangeCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onEmptied?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onEmptiedCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onEncrypted?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onEncryptedCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onEnded?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onEndedCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLoadedData?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLoadedDataCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLoadedMetadata?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLoadedMetadataCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLoadStart?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLoadStartCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPause?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPauseCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPlay?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPlayCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPlaying?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPlayingCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onProgress?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onProgressCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onRateChange?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onRateChangeCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSeeked?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSeekedCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSeeking?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSeekingCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onStalled?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onStalledCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSuspend?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSuspendCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTimeUpdate?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTimeUpdateCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onVolumeChange?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onVolumeChangeCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onWaiting?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onWaitingCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAuxClick?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAuxClickCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onClickCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onContextMenu?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onContextMenuCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDoubleClick?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDoubleClickCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragCapture?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragEndCapture?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragEnter?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragEnterCapture?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragExit?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragExitCapture?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragLeave?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragLeaveCapture?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragOver?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragOverCapture?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDragStartCapture?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDrop?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onDropCapture?: import("react").DragEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseDown?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseDownCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseEnter?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseLeave?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseMove?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseMoveCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseOut?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseOutCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseOver?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseOverCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseUp?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onMouseUpCapture?: import("react").MouseEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSelect?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onSelectCapture?: import("react").ReactEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTouchCancel?: import("react").TouchEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTouchCancelCapture?: import("react").TouchEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTouchEnd?: import("react").TouchEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTouchEndCapture?: import("react").TouchEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTouchMove?: import("react").TouchEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTouchMoveCapture?: import("react").TouchEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTouchStart?: import("react").TouchEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTouchStartCapture?: import("react").TouchEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerDown?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerDownCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerMove?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerMoveCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerUp?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerUpCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerCancel?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerCancelCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerEnter?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerLeave?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerOver?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerOverCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerOut?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onPointerOutCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onGotPointerCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onGotPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLostPointerCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onLostPointerCaptureCapture?: import("react").PointerEventHandler<HTMLElements.Standard[T]> | undefined;
-    onScroll?: import("react").UIEventHandler<HTMLElements.Standard[T]> | undefined;
-    onScrollCapture?: import("react").UIEventHandler<HTMLElements.Standard[T]> | undefined;
-    onScrollEnd?: import("react").UIEventHandler<HTMLElements.Standard[T]> | undefined;
-    onScrollEndCapture?: import("react").UIEventHandler<HTMLElements.Standard[T]> | undefined;
-    onWheel?: import("react").WheelEventHandler<HTMLElements.Standard[T]> | undefined;
-    onWheelCapture?: import("react").WheelEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAnimationStartCapture?: import("react").AnimationEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAnimationEnd?: import("react").AnimationEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAnimationEndCapture?: import("react").AnimationEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAnimationIteration?: import("react").AnimationEventHandler<HTMLElements.Standard[T]> | undefined;
-    onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLElements.Standard[T]> | undefined;
-    onToggle?: import("react").ToggleEventHandler<HTMLElements.Standard[T]> | undefined;
-    onBeforeToggle?: import("react").ToggleEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTransitionCancel?: import("react").TransitionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTransitionCancelCapture?: import("react").TransitionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTransitionEnd?: import("react").TransitionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTransitionRun?: import("react").TransitionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTransitionRunCapture?: import("react").TransitionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTransitionStart?: import("react").TransitionEventHandler<HTMLElements.Standard[T]> | undefined;
-    onTransitionStartCapture?: import("react").TransitionEventHandler<HTMLElements.Standard[T]> | undefined;
-    className: string;
-}, HTMLElement> | null;
+import { Block } from './Block';
+export declare function MediaLayout({ EmbeddedVideoElement, listPanelProps, ...props }: MediaLayout.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace MediaLayout {
-    type Layout = 'poster' | '1col' | '2col' | 'brick' | 'brickAlt';
-    namespace Layout {
-        const Enum: Schema.EnumField.Options<Layout>;
-        const schema: Schema.EnumField<Schema.EnumField.Options<Layout>>;
-        function getClassName(layout?: Layout): string;
-    }
-    const schema: Schema.Block<"_nd-mediaLayout", {
-        list: Schema.ListField<{
-            visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
-            embedded: Schema.EmbeddedVideoField;
-        }>;
-    }, BlockPanel.GetConfigSchema.Result<{
-        list: Schema.ListField<{
-            visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
-            embedded: Schema.EmbeddedVideoField;
-        }>;
-    }, undefined, undefined, "list", {
-        mediaLayout: Schema.EnumField<Schema.EnumField.Options<Layout>>;
-    }>>;
-    type Props<T extends Tag> = Omit<HTMLAttributes<HTMLElements.Standard[T]>, 'children'> & {
-        as: T;
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-mediaLayout", true, undefined, Schema.ListField<{
+        visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
+        embedded: Schema.EmbeddedVideoField;
+    }>, Schema.Block.Config, any>>, schema: Block.Create.Result.Schema<"_nd-mediaLayout", true, undefined, Schema.ListField<{
+        visual: Schema.AssetField<Schema.AssetField.LinkedValue.Visual>;
+        embedded: Schema.EmbeddedVideoField;
+    }>, Schema.Block.Config>;
+    type Props = ComponentProps<typeof Component> & {
         EmbeddedVideoElement?: JSXElementConstructor<EmbeddedVideo.Props>;
-        layout: Model;
     };
-    type Tag = Exclude<HTMLElements.Standard.Container, 'ul' | 'ol' | 'li'>;
     type Model = Schema.Block.LinkedData<typeof schema>;
 }

package/dist/server/blocks/MediaLayout.js CHANGED Viewed

@@ -10,115 +10,50 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MediaLayout = MediaLayout;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
 const refs_1 = require("../../client/refs");
 const fields_1 = require("../fields");
 const panels_1 = require("../panels");
-const schema_1 = require("../schema");
+const Block_1 = require("./Block");
 // block
 function MediaLayout(_a) {
-    var _b, _c;
-    var { className, as, EmbeddedVideoElement = refs_1.EmbeddedVideo, layout } = _a, props = __rest(_a, ["className", "as", "EmbeddedVideoElement", "layout"]);
-    // dont render if missing model
-    const { config, fields } = layout !== null && layout !== void 0 ? layout : {};
-    const items = (_c = (_b = fields === null || fields === void 0 ? void 0 : fields.list) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : [];
-    if (!layout) {
-        console.warn('[MediaLayout] attempted to render without items model');
-        return null;
-    }
+    var { EmbeddedVideoElement = refs_1.EmbeddedVideo, listPanelProps } = _a, props = __rest(_a, ["EmbeddedVideoElement", "listPanelProps"]);
     // render
-    return (0, react_1.createElement)(as, Object.assign({ className: (0, classnames_1.default)(className, 'nd-MediaLayout nd-Block-fullbleed',
-        // MediaLayout.Layout.getClassName(config?.layout?.value),
-        schema_1.BlockConfig.Presets.ThemeOnly.getClassName(config)) }, props), (0, jsx_runtime_1.jsx)("div", { className: "nd-MediaLayout-content", children: items.map(({ schema, id, value: item }) => (0, jsx_runtime_1.jsx)("div", { className: "nd-MediaLayout-itemWrap", children: funnel_core_1.Schema.EmbeddedVideoField.Value.filter(item)
-                ?
-                    (0, jsx_runtime_1.jsx)(EmbeddedVideoElement, { className: "nd-MediaLayout-item", video: item })
-                :
-                    (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-MediaLayout-item", visual: item }) }, id)) }));
+    return ((0, jsx_runtime_1.jsx)(MediaLayout.Component, Object.assign({ listPanelProps: Object.assign(Object.assign({}, listPanelProps), { itemProps: { EmbeddedVideoElement } }) }, props)));
 }
 // extension
 (function (MediaLayout) {
-    let Layout;
-    (function (Layout) {
-        // enum
-        Layout.Enum = {
-            poster: { name: 'Poster', hint: 'A large/prominent presentation.' },
-            '1col': { name: '1 Column', hint: 'All visuals are put into a single column.' },
-            '2col': { name: '2 Column', hint: 'Split into 2 columns on larger screens.' },
-            brick: { name: 'Brick', hint: 'A masonry pattern.' },
-            brickAlt: { name: 'Brick (Flipped)', hint: 'An alternate masonary pattern (reversed direction).' }
-        };
-        // schema
-        Layout.schema = funnel_core_1.Schema.Field.enumeration({
-            name: 'Layout',
-            hint: 'Select a media layout',
-            description: 'Determine how your assets will be presented.',
-            options: Layout.Enum,
-            defaultOption: '1col'
-        });
-        // helpers
-        function getClassName(layout) {
-            switch (layout) {
-                case 'poster':
-                    return 'nd-MediaLayout-layout-poster';
-                case '1col':
-                    return 'nd-MediaLayout-layout-1col';
-                case '2col':
-                    return 'nd-MediaLayout-layout-2col';
-                case 'brick':
-                    return 'nd-MediaLayout-layout-brick';
-                case 'brickAlt':
-                    return 'nd-MediaLayout-layout-brickAlt';
-                default:
-                    console.warn('[MediaLayout] unrecognized layout:', layout);
-                    return 'nd-MediaLayout-layout-poster';
-            }
-        }
-        Layout.getClassName = getClassName;
-    })(Layout = MediaLayout.Layout || (MediaLayout.Layout = {}));
-    const fieldsSchema = {
-        list: funnel_core_1.Schema.Field.list({
-            name: 'Assets',
-            description: 'Add one or more assets and then configure the layout.',
-            itemTypes: {
-                visual: panels_1.VisualPanel.Fields.visual.unwrap(),
-                embedded: funnel_core_1.Schema.Field.embeddedVideo({
-                    name: 'Embedded Video',
-                    description: 'A remote streaming video (e.g. YouTube)',
-                    allowMuting: true
-                })
-            },
-            min: 1,
-            max: 20
-        })
-    };
-    const configSchema = panels_1.BlockPanel.getConfigSchema({
-        fields: fieldsSchema,
-        listKey: 'list',
-        extend: {
-            mediaLayout: Layout.schema
-        }
-    });
-    MediaLayout.schema = funnel_core_1.Schema.Block.create({
+    var _a;
+    // factory
+    _a = Block_1.Block.create({
         id: '_nd-mediaLayout',
         name: 'MediaLayout',
         version: 1,
-        config: configSchema,
-        fields: fieldsSchema,
-        getConfig: args => panels_1.BlockPanel.getConfig({
-            args,
-            listKey: 'list'
-        }),
-        getLayout: args => panels_1.BlockPanel.getLayout({
-            args,
-            listKey: 'list'
-        })
-    });
+        className: 'nd-MediaLayout',
+        message: true,
+        list: {
+            schema: funnel_core_1.Schema.Field.list({
+                name: 'Assets',
+                description: 'Add one or more assets and then configure the layout.',
+                itemTypes: {
+                    visual: panels_1.VisualPanel.Fields.visual.unwrap(),
+                    embedded: funnel_core_1.Schema.Field.embeddedVideo({
+                        name: 'Embedded Video',
+                        description: 'A remote streaming video (e.g. YouTube)',
+                        allowMuting: true
+                    })
+                },
+                min: 1,
+                max: 20
+            }),
+            itemRenderer: (item, { EmbeddedVideoElement }) => ((0, jsx_runtime_1.jsx)("div", { className: "nd-MediaLayout-itemWrap", children: funnel_core_1.Schema.EmbeddedVideoField.Value.filter(item.value)
+                    ?
+                        (0, jsx_runtime_1.jsx)(EmbeddedVideoElement, { className: "nd-MediaLayout-item", video: item.value })
+                    :
+                        (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-MediaLayout-item", visual: item.value }) }))
+        }
+    }), MediaLayout.Component = _a.Component, MediaLayout.schema = _a.schema;
 })(MediaLayout || (exports.MediaLayout = MediaLayout = {}));

package/dist/server/blocks/Message.d.ts CHANGED Viewed

@@ -9,9 +9,9 @@ export declare namespace Message {
         const schema: Schema.EnumField<Schema.EnumField.Options<Variant>>;
         function getClassName(variant?: Variant): string;
     }
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<true, true, undefined, {
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-message", true, true, undefined, {
         variant: Schema.EnumField<Schema.EnumField.Options<Variant>>;
-    }>>, schema: Block.Create.Result.Schema<true, true, undefined, {
+    }, any>>, schema: Block.Create.Result.Schema<"_nd-message", true, true, undefined, {
         variant: Schema.EnumField<Schema.EnumField.Options<Variant>>;
     }>;
     type Model = Schema.Block.LinkedData<typeof schema>;

package/dist/server/blocks/Outcome.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { ComponentProps } from 'react';
 import { Block } from './Block';
+import { OutcomeDetail } from './OutcomeDetail';
 export declare function Outcome(props: ComponentProps<typeof Outcome.Component>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Outcome {
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<true, true, Schema.ListField<{
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-outcome", true, true, Schema.ListField<{
         detail: Schema.ObjectField<{
             title: Schema.Optional<Schema.TextField>;
             headline: Schema.RichTextField;
@@ -11,7 +12,7 @@ export declare namespace Outcome {
             icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
             link: Schema.Optional<Schema.LinkField>;
         }>;
-    }>, Schema.Block.Config>>, schema: Block.Create.Result.Schema<true, true, Schema.ListField<{
+    }>, Schema.Block.Config, OutcomeDetail.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd-outcome", true, true, Schema.ListField<{
         detail: Schema.ObjectField<{
             title: Schema.Optional<Schema.TextField>;
             headline: Schema.RichTextField;

package/dist/server/blocks/OutcomeDetail.d.ts CHANGED Viewed

@@ -291,8 +291,6 @@ export declare namespace OutcomeDetail {
         icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
         link: Schema.Optional<Schema.LinkField>;
     }>;
-    type Model = Schema.Field.LinkedData<typeof schema>;
-    type Tag = HTMLElements.Standard.Container;
     type Props<T extends Tag> = Omit<HTMLAttributes<HTMLElements.Standard[T]>, 'children'> & {
         as: T;
         titleTag?: Title.Tag;
@@ -300,4 +298,9 @@ export declare namespace OutcomeDetail {
         captionTag?: Caption.Tag;
         detail: Model;
     };
+    namespace Props {
+        type Configuration = Pick<Partial<Props<Tag>>, 'as' | 'titleTag' | 'headlineTag' | 'captionTag'>;
+    }
+    type Model = Schema.Field.LinkedData<typeof schema>;
+    type Tag = HTMLElements.Standard.Container;
 }

package/dist/server/blocks/ValueProp.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { ComponentProps } from 'react';
+import { UniqueSellingPoint } from '../entities';
 import { Block } from './Block';
 export declare function ValueProp(props: ComponentProps<typeof ValueProp.Component>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ValueProp {
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<true, true, Schema.ListField<{
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd-valueProp", true, true, Schema.ListField<{
         item: Schema.CollectionField<Schema.Collection<{
             icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
             image: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
@@ -11,7 +12,7 @@ export declare namespace ValueProp {
             caption: Schema.Optional<Schema.RichTextField>;
             link: Schema.Optional<Schema.LinkField>;
         }>>;
-    }>, Schema.Block.Config>>, schema: Block.Create.Result.Schema<true, true, Schema.ListField<{
+    }>, Schema.Block.Config, UniqueSellingPoint.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd-valueProp", true, true, Schema.ListField<{
         item: Schema.CollectionField<Schema.Collection<{
             icon: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;
             image: Schema.Optional<Schema.AssetField<Schema.AssetField.LinkedValue.Visual>>;

package/dist/server/blocks/summary/Statement.d.ts CHANGED Viewed

@@ -297,7 +297,7 @@ export declare namespace Statement {
         statement: Model;
     };
     namespace Props {
-        type Configuration = Pick<Props<Tag>, 'headlineTag' | 'captionTag'>;
+        type Configuration = Pick<Partial<Props<Tag>>, 'as' | 'headlineTag' | 'captionTag'>;
     }
     type Tag = HTMLElements.Standard.Container;
     type Model = Schema.Field.LinkedData<typeof schema>;

package/dist/server/blocks/summary/Summary.d.ts CHANGED Viewed

@@ -1,14 +1,15 @@
 import { Schema } from '@nascentdigital/funnel-core';
 import { ComponentProps } from 'react';
 import { Block } from '../Block';
+import { Statement } from './Statement';
 export declare function Summary(props: ComponentProps<typeof Summary.Component>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Summary {
-    const Component: import("react").FunctionComponent<Block.Create.Result.Component<true, undefined, Schema.ListField<{
+    const Component: import("react").FunctionComponent<Block.Create.Result.Component<"_nd_summary", true, undefined, Schema.ListField<{
         statement: Schema.ObjectField<{
             headline: Schema.RichTextField;
             caption: Schema.RichTextField;
         }>;
-    }>, Schema.Block.Config>>, schema: Block.Create.Result.Schema<true, undefined, Schema.ListField<{
+    }>, Schema.Block.Config, Statement.Props.Configuration>>, schema: Block.Create.Result.Schema<"_nd_summary", true, undefined, Schema.ListField<{
         statement: Schema.ObjectField<{
             headline: Schema.RichTextField;
             caption: Schema.RichTextField;

package/dist/server/entities/Client.d.ts CHANGED Viewed

@@ -307,7 +307,7 @@ export declare namespace Client {
         displayFields?: ReadonlyArray<DisplayFields.Id>;
     };
     namespace Props {
-        type Configuration = Pick<Props<Tag>, 'nameTag' | 'divisionTag' | 'locationTag' | 'displayFields'>;
+        type Configuration = Pick<Partial<Props<Tag>>, 'as' | 'nameTag' | 'divisionTag' | 'locationTag' | 'displayFields'>;
     }
     type Value = Schema.Collection.LinkedData<typeof schema>;
     type Tag = HTMLElements.Standard.Container;

package/dist/server/entities/UniqueSellingPoint.d.ts CHANGED Viewed

@@ -300,7 +300,7 @@ export declare namespace UniqueSellingPoint {
         usp: Model;
     };
     namespace Props {
-        type Configuration = Pick<Props<Tag>, 'nameTag' | 'headlineTag' | 'captionTag' | 'displayFields'>;
+        type Configuration = Pick<Partial<Props<Tag>>, 'as' | 'nameTag' | 'headlineTag' | 'captionTag' | 'displayFields'>;
     }
     type Tag = HTMLElements.Standard.Container;
     type Model = Schema.Collection.LinkedData<typeof schema>;

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

@@ -90,4 +90,20 @@ export declare namespace BlockPanel {
         listKey?: TListKey;
     };
     function getLayout<TConfig extends Schema.Block.Config, TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields>, TListKey extends Schema.Fields.ListFields.Keys<TFields>>({ args, messageFieldKeys, messageKey, visualKey, listKey }: GetLayoutArgs<TConfig, TFields, TMessageFieldKeys, TMessageKey, TVisualKey, TListKey>): BlockLayout;
+    namespace GetActivePanels {
+        type Args<TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string | undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields>, TListKey extends Schema.Fields.ListFields.Keys<TFields>> = {
+            fields: Partial<Schema.Block.Data.ForFields<TFields>> | Partial<Schema.Block.LinkedData.ForFields<TFields>>;
+            messageFieldKeys?: TMessageFieldKeys;
+            messageKey?: TMessageKey;
+            visualKey?: TVisualKey;
+            listKey?: TListKey;
+        };
+        type Result = {
+            message: PanelStatus;
+            visual: PanelStatus;
+            list: PanelStatus;
+        };
+        type PanelStatus = 'valid' | 'invalid' | false;
+    }
+    function getActivePanels<TFields extends Schema.Fields, TMessageFieldKeys extends Partial<MessagePanel.Fields.Keys> | undefined, TMessageKey extends string | undefined, TVisualKey extends Schema.Fields.AssetFields.Keys<TFields>, TListKey extends Schema.Fields.ListFields.Keys<TFields>>({ fields: fieldsRaw, messageFieldKeys, messageKey, visualKey, listKey }: GetActivePanels.Args<TFields, TMessageFieldKeys, TMessageKey, TVisualKey, TListKey>): GetActivePanels.Result;
 }

package/dist/server/panels/BlockPanel.js CHANGED Viewed

@@ -329,16 +329,6 @@ var BlockPanel;
                     .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();
@@ -349,7 +339,7 @@ var BlockPanel;
     }
     BlockPanel.getConfigSchema = getConfigSchema;
     function getConfig({ args, messageFieldKeys, messageKey, visualKey, listKey }) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         // throw if there are not enough panels
         const panelCount = [messageKey, visualKey, listKey].filter(funnel_core_1.Value.isDefined).length;
         if (panelCount === 0) {
@@ -374,24 +364,23 @@ var BlockPanel;
             ...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);
+        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 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');
+        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 = ((_e = (_d = config.slotVariation) === null || _d === void 0 ? void 0 : _d.value) !== null && _e !== void 0 ? _e : 'v1');
+        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;
@@ -403,7 +392,7 @@ var BlockPanel;
         const flexDirections = Slots.getFlexDirections({ layout, items });
         // extract message config
         let messageConfig = undefined;
-        if (messageKey && hasMessage) {
+        if (messageKey && activePanels.message) {
             messageConfig = MessagePanel_1.MessagePanel.getConfig({
                 messageKey,
                 config: config,
@@ -413,7 +402,7 @@ var BlockPanel;
         }
         // extract visual config (if any)
         let visualConfig = undefined;
-        if (visualKey && hasVisual) {
+        if (visualKey && activePanels.visual) {
             visualConfig = VisualPanel_1.VisualPanel.getConfig({
                 visualKey,
                 visual,
@@ -423,7 +412,7 @@ var BlockPanel;
         }
         // extract list config (if any)
         let listConfig = undefined;
-        if (listKey && hasList) {
+        if (listKey && activePanels.list) {
             listConfig = ListPanel_1.ListPanel.getConfig({
                 listKey,
                 config: config,
@@ -460,7 +449,7 @@ var BlockPanel;
     }
     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;
+        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) {
@@ -479,36 +468,40 @@ var BlockPanel;
             ? 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);
+        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 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 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
         });
-        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';
+        // 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';
-        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';
+        // 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)) {
@@ -533,6 +526,7 @@ var BlockPanel;
               xmlns="nd:block"
               textAlign="${messageTextAlign}"
               size="${messageWidth}"
+              fullBleed="${isMessageFullBleed}"
               alignX="${messageHorizontalAlign}"
               alignY="${messageVerticalAlign}"
             />
@@ -551,6 +545,7 @@ var BlockPanel;
               size="${listWidth}"
               alignX="${listHorizontalAlign}"
               alignY="${listVerticalAlign}"
+              fullBleed="${isListFullBleed}"
               itemCount="2"
             />
           `);
@@ -884,4 +879,34 @@ var BlockPanel;
         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 || (exports.BlockPanel = BlockPanel = {}));

package/dist/server/panels/ListPanel.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { HTMLElements } from '../../types';
 import { ItemAlignment, ItemSize, ListPanelLayout } from '../schema';
 import { BlockPanel } from './BlockPanel';
-export declare function ListPanel<TItem extends ListPanel.Item>({ as, className, panel, layout, items, overrides, children }: ListPanel.Props<TItem>): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function ListPanel<TItem extends ListPanel.Item>({ as, className, panel, layout, items, overrides, children }: ListPanel.Props<TItem>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ListPanel {
     namespace Config {
         type Key<TPrefix extends string = string> = Key.HorizontalAlign<TPrefix> | Key.VerticalAlign<TPrefix> | Key.Width<TPrefix>;
@@ -59,4 +59,5 @@ export declare namespace ListPanel {
         };
     }
     function getConfig<TPrefix extends string>({ listKey, config, flexDirection }: GetConfig.Args<TPrefix>): GetConfig.Result<TPrefix>;
+    function ItemPlaceholder(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/server/panels/ListPanel.js CHANGED Viewed

@@ -13,12 +13,12 @@ const schema_1 = require("../schema");
 const BlockPanel_1 = require("./BlockPanel");
 // component
 function ListPanel({ as = 'ul', className, panel, layout, items, overrides = {}, children }) {
-    // skip if there's no items
-    if (items.length === 0) {
-        return undefined;
-    }
-    // render items
-    const itemsComponent = items.map(item => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: children(item) }, item.id));
+    // render items (or placeholder)
+    const itemsComponent = items.length > 0
+        ?
+            items.map(item => (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: children(item) }, item.id))
+        :
+            funnel_core_1.ArrayUtils.series(panel.itemCount.base - 1).map(num => (0, jsx_runtime_1.jsx)(ListPanel.ItemPlaceholder, {}, num));
     // build layout options
     const { brick, brickFlipped, card, flexWrap, grid, horizontalStack, verticalStack, } = overrides;
     // render layout
@@ -97,14 +97,11 @@ function ListPanel({ as = 'ul', className, panel, layout, items, overrides = {},
         const defaultLayout = 'card';
         const layout = (_b = (_a = config[keys.layout]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultLayout;
         const defaultWidth = 'md';
-        const width = (_d = (_c = config[keys.width]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultWidth;
+        let width = (_d = (_c = config[keys.width]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultWidth;
         const defaultHorizontalAlign = 'start';
         const horizontalAlign = (_f = (_e = config[keys.horizontalAlign]) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : defaultHorizontalAlign;
         const defaultVerticalAlign = 'start';
         const verticalAlign = (_h = (_g = config[keys.verticalAlign]) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : defaultVerticalAlign;
-        if (width === 'full') {
-            delete configSchema[keys.horizontalAlign];
-        }
         if (flexDirection === 'x') {
             delete configSchema[keys.verticalAlign];
         }
@@ -113,10 +110,18 @@ function ListPanel({ as = 'ul', className, panel, layout, items, overrides = {},
             delete configSchema[keys.horizontalAlign];
         }
         else if (flexDirection === 'none') {
-            delete configSchema[keys.width];
+            // update options for width
+            const newWidthSchema = schema_1.ItemSize.schema.keepOptions('full', 'fullBleed');
+            configSchema[keys.width] = newWidthSchema;
+            newWidthSchema.isValidOption(width);
+            width = newWidthSchema.isValidOption(width) ? width : 'full';
+            // drop unnecessary config
             delete configSchema[keys.horizontalAlign];
             delete configSchema[keys.verticalAlign];
         }
+        if (width === 'full' || width === 'fullBleed') {
+            delete configSchema[keys.horizontalAlign];
+        }
         return {
             configSchema,
             config: {
@@ -134,4 +139,9 @@ function ListPanel({ as = 'ul', className, panel, layout, items, overrides = {},
         };
     }
     ListPanel.getConfig = getConfig;
+    // item placeholder
+    function ItemPlaceholder() {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "nd-ListPanel-itemPlaceholder", children: "No items" }));
+    }
+    ListPanel.ItemPlaceholder = ItemPlaceholder;
 })(ListPanel || (exports.ListPanel = ListPanel = {}));

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

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { Caption, Headline, Title } from '../fields';
 import { ItemAlignment, ItemSize, 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, decorator }: MessagePanel.Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function MessagePanel({ className, panel, titleTag, title, headlineTag, headline, captionTag, caption, ctas: ctasRaw, textAlign, alignX, alignY, size, fullbleed, mobileOrder, decorator }: MessagePanel.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace MessagePanel {
     type Props = BlockPanel.Props & {
         className?: string;
@@ -74,6 +74,7 @@ export declare namespace MessagePanel {
         }
         function getSchema<TitleKey extends string | undefined, HeadlineKey extends string | undefined, CaptionKey extends string | undefined, CtasKey extends string | undefined>(keys?: Partial<Keys<TitleKey, HeadlineKey, CaptionKey, CtasKey>>): GetSchema.Result<Keys<TitleKey, HeadlineKey, CaptionKey, CtasKey>>;
         function exists(fields: Record<string, Schema.Field.Data | Schema.Field.LinkedData>, keys?: Partial<Keys>): boolean;
+        function isEmpty(fields: Record<string, Schema.Field.Data | Schema.Field.LinkedData>, keys?: Partial<Keys>): boolean;
     }
     namespace GetConfig {
         type ConfigSchema<TPrefix extends string> = Record<Config.Key.TextAlign<TPrefix>, TextAlignment.Schema> & Record<Config.Key.Width<TPrefix>, ItemSize.Schema> & Record<Config.Key.HorizontalAlign<TPrefix>, ItemAlignment.Horizontal.Schema> & Record<Config.Key.VerticalAlign<TPrefix>, ItemAlignment.Vertical.Schema>;
@@ -92,4 +93,5 @@ export declare namespace MessagePanel {
         };
     }
     function getConfig<TPrefix extends string, TFields extends Schema.Fields = Schema.Fields>({ messageKey, config, flexDirection }: GetConfig.Args<TPrefix, TFields>): GetConfig.Result<TPrefix>;
+    function Placeholder(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/server/panels/MessagePanel.js CHANGED Viewed

@@ -27,10 +27,6 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
             }
         ];
     }
-    // don't render if no fields are active
-    if (!title && !headline && !caption && ctas.length === 0) {
-        return null;
-    }
     // render
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(className, 'nd-MessagePanel',
         // base layout
@@ -59,7 +55,8 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
                     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 &&
+            })), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-MessagePanel-content", children: [!title && !headline && !caption && ctas.length === 0 &&
+                    (0, jsx_runtime_1.jsx)(MessagePanel.Placeholder, {}), title &&
                     (0, jsx_runtime_1.jsx)(fields_1.Title, { className: "nd-MessagePanel-title", as: titleTag, title: title }), headline &&
                     (0, jsx_runtime_1.jsx)(fields_1.Headline, { className: "nd-MessagePanel-headline", as: headlineTag, headline: headline }), caption &&
                     (0, jsx_runtime_1.jsx)(fields_1.Caption, { className: "nd-MessagePanel-caption", as: captionTag, caption: caption }), ctas.length > 0 &&
@@ -146,6 +143,27 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
                 || !!fields[((_d = keys.ctas) !== null && _d !== void 0 ? _d : 'ctas')];
         }
         Fields.exists = exists;
+        // exists
+        function isEmpty(fields, keys = {}) {
+            var _a, _b, _c, _d;
+            // helper
+            const isEmptyText = (key) => {
+                var _a;
+                const data = fields[key];
+                return !data || ((_a = funnel_core_1.Schema.Field.Data.getText(data)) !== null && _a !== void 0 ? _a : '').trim().length === 0;
+            };
+            const isEmptyList = (key) => {
+                var _a;
+                const data = fields[key];
+                return !data || ((_a = data.value) !== null && _a !== void 0 ? _a : []).length === 0;
+            };
+            // evaluate
+            return isEmptyText((_a = keys.title) !== null && _a !== void 0 ? _a : 'title')
+                && isEmptyText((_b = keys.headline) !== null && _b !== void 0 ? _b : 'headline')
+                && isEmptyText((_c = keys.caption) !== null && _c !== void 0 ? _c : 'caption')
+                && isEmptyList((_d = keys.ctas) !== null && _d !== void 0 ? _d : 'ctas');
+        }
+        Fields.isEmpty = isEmpty;
     })(Fields = MessagePanel.Fields || (MessagePanel.Fields = {}));
     function getConfig({ messageKey, config = {}, flexDirection }) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -153,7 +171,7 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
         const keys = Config.getKeys(messageKey);
         const configSchema = {
             [keys.textAlign]: schema_1.TextAlignment.schema,
-            [keys.width]: schema_1.ItemSize.schema.removeOption('fullBleed'),
+            [keys.width]: schema_1.ItemSize.schema,
             [keys.horizontalAlign]: schema_1.ItemAlignment.Horizontal.schema,
             [keys.verticalAlign]: schema_1.ItemAlignment.Vertical.schema
         };
@@ -161,14 +179,11 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
         const defaultTextAlign = 'left';
         const textAlign = (_b = (_a = config[keys.textAlign]) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : defaultTextAlign;
         const defaultWidth = 'full';
-        const width = (_d = (_c = config[keys.width]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultWidth;
+        let width = (_d = (_c = config[keys.width]) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : defaultWidth;
         const defaultHorizontalAlign = 'start';
         const horizontalAlign = (_f = (_e = config[keys.horizontalAlign]) === null || _e === void 0 ? void 0 : _e.value) !== null && _f !== void 0 ? _f : defaultHorizontalAlign;
         const defaultVerticalAlign = 'start';
         const verticalAlign = (_h = (_g = config[keys.verticalAlign]) === null || _g === void 0 ? void 0 : _g.value) !== null && _h !== void 0 ? _h : defaultVerticalAlign;
-        if (width === 'full') {
-            delete configSchema[keys.horizontalAlign];
-        }
         if (flexDirection === 'x') {
             delete configSchema[keys.verticalAlign];
         }
@@ -178,11 +193,20 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
             delete configSchema[keys.horizontalAlign];
         }
         else if (flexDirection === 'none') {
+            // update options for width
+            const newWidthSchema = schema_1.ItemSize.schema.keepOptions('full', 'fullBleed');
+            configSchema[keys.width] = newWidthSchema;
+            newWidthSchema.isValidOption(width);
+            width = newWidthSchema.isValidOption(width) ? width : 'full';
+            // drop unnecessary config
+            // drop unnecessary config
             delete configSchema[keys.textAlign];
-            delete configSchema[keys.width];
             delete configSchema[keys.horizontalAlign];
             delete configSchema[keys.verticalAlign];
         }
+        if (width === 'full' || width === 'fullBleed') {
+            delete configSchema[keys.horizontalAlign];
+        }
         // return result
         return {
             configSchema,
@@ -201,4 +225,9 @@ function MessagePanel({ className, panel, titleTag = 'span', title, headlineTag
         };
     }
     MessagePanel.getConfig = getConfig;
+    // placeholder
+    function Placeholder() {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "nd-BlockPanel-placeholder nd-MessagePanel-placeholder", children: "No message content" }));
+    }
+    MessagePanel.Placeholder = Placeholder;
 })(MessagePanel || (exports.MessagePanel = MessagePanel = {}));

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

@@ -65,4 +65,5 @@ export declare namespace VisualPanel {
         };
     }
     function getConfig<TPrefix extends string>({ visualKey, visual: visualData, config, flexDirection }: GetConfig.Args<TPrefix>): GetConfig.Result<TPrefix>;
+    function Placeholder(): import("react/jsx-runtime").JSX.Element;
 }

package/dist/server/panels/VisualPanel.js CHANGED Viewed

@@ -60,7 +60,11 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
             '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 &&
+        }), children: (0, jsx_runtime_1.jsxs)("div", { className: "nd-BlockPanel-content nd-VisualPanel-content", children: [visual
+                    ?
+                        (0, jsx_runtime_1.jsx)(fields_1.Visual, { className: "nd-VisualPanel-visual", visual: visual, loading: visualLoading })
+                    :
+                        (0, jsx_runtime_1.jsx)(VisualPanel.Placeholder, {}), visualDecorator &&
                     (0, jsx_runtime_1.jsx)("div", { className: "nd-VisualPanel-decorator", children: visualDecorator })] }) }));
 }
 // extension
@@ -199,4 +203,9 @@ function VisualPanel({ className, panel, visual, visualDecorator, visualLoading,
         };
     }
     VisualPanel.getConfig = getConfig;
+    // placeholder
+    function Placeholder() {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "nd-BlockPanel-placeholder nd-VisualPanel-placeholder", children: "No visual content" }));
+    }
+    VisualPanel.Placeholder = Placeholder;
 })(VisualPanel || (exports.VisualPanel = VisualPanel = {}));

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@nascentdigital/funnel-ui",
   "description": "UI components for funnel",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "restricted"
@@ -70,5 +70,5 @@
     "react-dom": "^19",
     "ts-jest": "^29.3.2"
   },
-  "gitHead": "09e92177c535f933fe19944aec48a33aadb6e62d"
+  "gitHead": "3348c90ff56f3dd931ab564f8a6ad13d454a4ca1"
 }