onekijs-ui 0.19.2 → 0.19.4

package/dist/index.module.js

@@ -1,5 +1,5 @@
 import styled, { css, keyframes, ThemeContext, ThemeProvider } from 'styled-components';
-import { reducer, service, DefaultService, lcfirst, toKebabCase, useService, get, useTryRouter, ucfirst, toArray, useThrottle, useIsomorphicLayoutEffect as useIsomorphicLayoutEffect$1, useLazyRef, useSubmit, ValidationCode, useFormDecorator, useForm, useFormMetadata, useTrySetting, extractValidators, useField, useValidation, isTrue, set, isFalse, isMobile, saga, SagaEffect, useEventListener, useCollectionInitialState, useCollectionProxy, CollectionService, LoadingStatus, isItemFetching, last, isCollectionInitializing, isCollection, eventLocks, useNotificationService, NotificationLevel, useNotifications, isSameFilter, shallowEqual, clone, ensureFieldValue, defaultComparator, isNull, isItemLoading, isCollectionLoading, isCollectionFetching, first, ValidationStatus, DefaultCollectionBroker, formatFilter, applyFilter, applySearch, applySortBy, formatSortBy, applySort, generateUniqueId, asyncHttp, HttpMethod, applyMixins, useLogger, ContainerValidation, isQueryFilterCriteria, Link, useFieldContainer, FormContext, simpleMergeDeep } from 'onekijs-framework';
+import { reducer, service, DefaultService, lcfirst, toKebabCase, useService, get, useTryRouter, ucfirst, toArray, useThrottle, useIsomorphicLayoutEffect as useIsomorphicLayoutEffect$1, useLazyRef, useSubmit, ValidationCode, useFormDecorator, useForm, useFormMetadata, useFieldContainer, FormContext, useTrySetting, extractValidators, useField, useValidation, isTrue, set, isFalse, isMobile, saga, SagaEffect, useEventListener, useCollectionInitialState, useCollectionProxy, CollectionService, LoadingStatus, isItemFetching, last, isCollectionInitializing, isCollection, eventLocks, useNotificationService, NotificationLevel, useNotifications, isSameFilter, shallowEqual, clone, ensureFieldValue, defaultComparator, isNull, isItemLoading, isCollectionLoading, isCollectionFetching, first, ValidationStatus, DefaultCollectionBroker, formatFilter, applyFilter, applySearch, applySortBy, formatSortBy, applySort, generateUniqueId, asyncHttp, HttpMethod, applyMixins, useLogger, ContainerValidation, isQueryFilterCriteria, Link, simpleMergeDeep } from 'onekijs-framework';
 import React, { useContext, useId, useEffect, useState, useRef, useCallback, useMemo, useReducer } from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import ReactDOM from 'react-dom';
@@ -716,7 +716,7 @@ const fill = cssProperty(null, colorFormatter('fill'));
 const stroke = cssProperty(null, colorFormatter('stroke'));
 const strokeWidth = cssProperty('stroke-width');
 
-const IconComponent$8 = ({ className }) => {
+const IconComponent$a = ({ className }) => {
     return (React.createElement("i", { className: addClassname('o-icon-loading-container', className) },
         React.createElement("svg", { className: "o-icon-loading-svg", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("circle", { className: "o-icon-loading-svg-circle", cx: "50", cy: "50", r: "45" }))));
@@ -767,7 +767,7 @@ const iconStyle = ({ width: cssWidth = '16px', height: cssHeight = '16px', color
     }
   `;
 };
-var LoadingIcon = styled(IconComponent$8) `
+var LoadingIcon = styled(IconComponent$a) `
   ${iconStyle}
 `;
 
@@ -783,7 +783,7 @@ const toDegree = (position) => {
             return '0';
     }
 };
-const IconComponent$7 = ({ className, onClick, open, loading, model = 'arrow', closeArrowPosition = 'e', openArrowPosition = 's', }) => {
+const IconComponent$9 = ({ className, onClick, open, loading, model = 'arrow', closeArrowPosition = 'e', openArrowPosition = 's', }) => {
     const iconClassName = addClassname('o-toggler-icon-container', className);
     if (!loading) {
         return (React.createElement("div", { className: iconClassName, onClick: onClick },
@@ -799,7 +799,7 @@ const IconComponent$7 = ({ className, onClick, open, loading, model = 'arrow', c
             React.createElement(LoadingIcon, null)));
     }
 };
-const TogglerIcon = styled(IconComponent$7) `
+const TogglerIcon = styled(IconComponent$9) `
   ${({ width = '24px', height = '24px', color: cssColor = 'inherit', visible = true }) => css `
     width: ${width};
     height: ${height};
@@ -1635,19 +1635,79 @@ const cardStyle = ({ theme, collapsable = true, animate = 150, bordered = true,
     }
   `;
 };
+const formCardDisplayerStyle = () => {
+    return css `
+    .o-displayer-card-title {
+      ${borderBottomColor('primary')}
+      ${borderBottomWidth('1px')}
+      ${borderBottomStyle('solid')}
+      ${paddingBottom('sm')}
+      ${marginTop('xl')}
+      ${fontWeight('bold')}
+      ${color('primary')}
+    }
+  `;
+};
 
 const Card = styled(CardComponent) `
   ${cardStyle}
 `;
 
-const FormCard$1 = ({ name, disabled, visible, ...cardProps }) => {
-    const decorator = useFormDecorator(name);
+const titlelize = (value) => {
+    return value.split('_').map((v) => ucfirst(v)).join(' ');
+};
+
+const FormCardDisplayerComponent = (displayerProps) => {
+    const total = Object.values(displayerProps.children ?? {}).length;
+    return (React.createElement("div", { className: addClassname('o-displayer-card', displayerProps.className) },
+        React.createElement("div", { className: "o-displayer-card-title" }, displayerProps.name),
+        Object.values(displayerProps.children ?? {}).map((field, index) => {
+            const Displayer = field.Displayer;
+            return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
+        })));
+};
+
+const FormCardDisplayer = styled(FormCardDisplayerComponent) `
+  ${formCardDisplayerStyle}
+`;
+
+const FormCard = ({ name, disabled, visible, ...cardProps }) => {
+    const decorator = useFormDecorator(name, {
+        Displayer: (displayerProps) => {
+            return React.createElement(FormCardDisplayer, { ...displayerProps, name: typeof cardProps.title === 'string' ? cardProps.title : titlelize(name) });
+        },
+    });
     const form = useForm();
     const metadata = useFormMetadata(decorator.name);
+    const fieldContainer = useFieldContainer({
+        container: name,
+    });
+    const { hide, show, disable, enable } = fieldContainer;
+    useEffect(() => {
+        if (!metadata.visible) {
+            if (metadata.disabled) {
+                disable();
+            }
+            else {
+                enable();
+            }
+            hide();
+        }
+        else {
+            show();
+            if (metadata.disabled) {
+                disable();
+            }
+            else {
+                enable();
+            }
+        }
+    }, [metadata.visible, metadata.disabled, hide, show, disable, enable]);
     if (metadata.visible === false) {
         return null;
     }
-    return (React.createElement(Card, { ...cardProps, open: !metadata.disabled, onToggle: () => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name)) }));
+    return (React.createElement(FormContext.Provider, { value: fieldContainer.context },
+        React.createElement(Card, { ...cardProps, open: !metadata.disabled, onToggle: () => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name)) })));
 };
 
 const CheckboxComponent = ({ label, className = '', onChange, value = false, bordered = true, status, ...checkboxProps }) => {
@@ -1866,35 +1926,23 @@ const Row = styled(RowComponent) `
   ${rowStyle}
 `;
 
-const IconComponent$6 = ({ className, onClick, style }) => {
-    return (React.createElement("div", { className: addClassname('o-icon-help', className), onClick: onClick, style: style },
-        React.createElement("svg", { className: "o-icon-help-svg", viewBox: "0 0 512 512" },
-            React.createElement("path", { d: "M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" }),
-            React.createElement("path", { d: "M235 339h42v42h-42zM276.8 318h-41.6c0-67 62.4-62.2 62.4-103.8 0-22.9-18.7-41.7-41.6-41.7S214.4 192 214.4 214h-41.6c0-46 37.2-83 83.2-83s83.2 37.1 83.2 83.1c0 52-62.4 57.9-62.4 103.9z" }))));
-};
-var HelpIcon = styled(IconComponent$6) `
-  ${({ width = '24px', height = '24px', color: cssColor = 'inherit' }) => css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-help-svg {
-      display: inline-block;
-      stroke-width: 0;
-      stroke: currentColor;
-      fill: currentColor;
+const FieldDisplayerComponent = ({ className, label, value, format }) => {
+    if (format === 'form_summary') {
+        return (React.createElement(Row, { marginBottom: "md", className: addClassname('o-field-displayer-form-summary', className) },
+            React.createElement(Col, { size: 12, md: 4, lg: 3, xl: 2, className: "o-field-displayer-form-summary-label-container" },
+                React.createElement("div", { className: "o-field-displayer-form-summary-label" },
+                    React.createElement("span", null, label))),
+            React.createElement(Col, { size: 12, md: 8, lg: 9, xl: 10, className: "o-field-displayer-form-summary-value" }, value)));
+    }
+    if (format === 'form_summary_table') {
+        return (React.createElement("div", { className: addClassname('o-field-displayer-form-summary-table', className) },
+            label && React.createElement("span", { className: "o-field-displayer-form-summary-table-label" },
+                label,
+                ":"),
+            React.createElement("span", { className: "o-field-displayer-form-summary-table-value" }, value)));
     }
-  `}
-`;
-
-const FieldHelpComponent = React.memo(({ className, content, visible = true, size = 'medium' }) => {
-    const classNames = addClassname(`o-helper-icon o-helper-icon-${size}`, className);
-    return (React.createElement("div", { className: classNames },
-        React.createElement(Tooltip, { content: content, placement: "top" },
-            React.createElement(HelpIcon, { style: { visibility: visible ? 'visible' : 'hidden' } }))));
-});
-FieldHelpComponent.displayName = 'FieldHelpComponent';
+    return null;
+};
 
 const fieldStyle = () => {
     return css `
@@ -1954,12 +2002,90 @@ const fieldDescriptionStyle = ({ theme, layout }) => {
     }
   `;
 };
+const fieldDisplayerStyle = ({ theme, last }) => {
+    const t = theme.label;
+    return css `
+    ${display('flex')}
+    ${alignItems('stretch')}
+    &.o-field-displayer-form-summary {
+      ${borderBottomWidth(!last ? '1px' : 0)}
+      ${borderBottomColor('lighter')}
+      ${borderBottomStyle('solid')}
+    }
+    .o-field-displayer-form-summary-label-container {
+      ${display('start')}
+      ${alignItems('stretch')}
+      ${paddingX('md')}
+      ${paddingY('xs')}
+      ${backgroundColor('lightest')}
+    }
+    .o-field-displayer-form-summary-label {
+      ${display('flex')}
+      ${alignItems('center')}
+      ${fontWeight(t.fontWeight)}
+      ${color(t.fontColor)}
+      ${fontSize(t.fontSize)}
+      ${letterSpacing(t.letterSpacing)}
+    }
+
+    .o-field-displayer-form-summary-value {
+      ${paddingY('xs')}
+      ${paddingX('md')}
+      ${fontFamily('Consolas, Monaco, Courier, monospace')}
+    }
+
+    .o-field-displayer-form-summary-table-label {
+      ${display('flex')}
+      ${fontWeight(t.fontWeight)}
+      ${paddingRight('xs')}
+    }
+
+    .o-helper-icon {
+      ${fontSize('xl')}
+      ${marginLeft(t.helperMarginLeft)}
+    }
+  `;
+};
+
+const FieldDisplayer = styled(FieldDisplayerComponent) `
+  ${fieldDisplayerStyle}
+`;
+
+const IconComponent$8 = ({ className, onClick, style }) => {
+    return (React.createElement("div", { className: addClassname('o-icon-help', className), onClick: onClick, style: style },
+        React.createElement("svg", { className: "o-icon-help-svg", viewBox: "0 0 512 512" },
+            React.createElement("path", { d: "M256 90c44.3 0 86 17.3 117.4 48.6C404.7 170 422 211.7 422 256s-17.3 86-48.6 117.4C342 404.7 300.3 422 256 422s-86-17.3-117.4-48.6C107.3 342 90 300.3 90 256s17.3-86 48.6-117.4C170 107.3 211.7 90 256 90m0-42C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48z" }),
+            React.createElement("path", { d: "M235 339h42v42h-42zM276.8 318h-41.6c0-67 62.4-62.2 62.4-103.8 0-22.9-18.7-41.7-41.6-41.7S214.4 192 214.4 214h-41.6c0-46 37.2-83 83.2-83s83.2 37.1 83.2 83.1c0 52-62.4 57.9-62.4 103.9z" }))));
+};
+var HelpIcon = styled(IconComponent$8) `
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit' }) => css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-help-svg {
+      display: inline-block;
+      stroke-width: 0;
+      stroke: currentColor;
+      fill: currentColor;
+    }
+  `}
+`;
+
+const FieldHelpComponent = React.memo(({ className, content, visible = true, size = 'medium' }) => {
+    const classNames = addClassname(`o-helper-icon o-helper-icon-${size}`, className);
+    return (React.createElement("div", { className: classNames },
+        React.createElement(Tooltip, { content: content, placement: "top" },
+            React.createElement(HelpIcon, { style: { visibility: visible ? 'visible' : 'hidden' } }))));
+});
+FieldHelpComponent.displayName = 'FieldHelpComponent';
 
-const Help = styled(FieldHelpComponent) `
+const FieldHelp = styled(FieldHelpComponent) `
   ${fieldHelpStyle}
 `;
 
-const LabelComponent = React.memo(({ className, htmlFor, help, HelpComponent = Help, layout = 'vertical', required, text, size }) => {
+const LabelComponent = React.memo(({ className, htmlFor, help, HelpComponent = FieldHelp, layout = 'vertical', required, text, size }) => {
     const classNames = addClassname(`o-label o-label-${layout}${size ? ` o-label-${size}` : ''}`, className);
     const labelProps = {
         className: 'o-label-text',
@@ -2108,6 +2234,17 @@ const FieldLayout = styled(FieldLayoutComponent) `
   ${fieldStyle}
 `;
 
+const defaultFieldDisplayer = (props) => {
+    const Component = (displayerProps) => {
+        const form = useForm();
+        let value = form.getValue(displayerProps.name) ?? '';
+        const ValueDisplayer = props.ValueDisplayer ?? (() => React.createElement(React.Fragment, null,
+            React.createElement(React.Fragment, null, `${value || ''}`)));
+        return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+    };
+    return Component;
+};
+
 // extract validators from props
 const extractFieldLayoutProps = (props) => {
     const [validators, nonValidatorProps] = extractValidators(props);
@@ -2132,18 +2269,31 @@ const extractFieldLayoutProps = (props) => {
         'lgLabelWidth',
         'xlLabelWidth',
     ];
-    const fieldOptionsKeys = ['defaultValue', 'touchedOn', 'disabled', 'visible', 'editable', 'protected', 'isUndefined'];
+    const fieldOptionsKeys = [
+        'defaultValue',
+        'touchedOn',
+        'disabled',
+        'visible',
+        'editable',
+        'protected',
+        'isUndefined',
+        'Displayer',
+        'containers',
+        'ValueDisplayer',
+        'label',
+    ];
     Object.keys(nonValidatorProps).forEach((k) => {
+        if (!fieldLayoutKeys.includes(k) && !fieldOptionsKeys.includes(k)) {
+            fieldProps[k] = props[k];
+        }
         if (fieldLayoutKeys.includes(k)) {
             fieldLayoutProps[k] = props[k];
         }
-        else if (fieldOptionsKeys.includes(k)) {
+        if (fieldOptionsKeys.includes(k)) {
             fieldOptions[k] = props[k];
         }
-        else if (k !== 'name') {
-            fieldProps[k] = props[k];
-        }
     });
+    fieldOptions.Displayer = fieldOptions.Displayer ?? defaultFieldDisplayer(props);
     return {
         name: props.name,
         validators,
@@ -2180,11 +2330,53 @@ const useFieldLayout = (props) => {
     ];
 };
 
+const RemoveIcon = ({ className, onClick }) => {
+    return (React.createElement("div", { className: className, onClick: onClick },
+        React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 16 16", width: "100%", height: "100%" },
+            React.createElement("path", { fill: "currentColor", d: "M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" }))));
+};
+var RemoveIcon$1 = styled(RemoveIcon) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+  `}
+`;
+
+const SuccessIconComponent = (props) => {
+    return (React.createElement("div", { ...props },
+        React.createElement("svg", { className: "o-icon-success-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16", fill: "currentColor" },
+            React.createElement("path", { fillRule: "evenodd", d: "M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" }))));
+};
+var SuccessIcon = styled(SuccessIconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'success' }) => css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-icon-success-svg {
+      display: inline-block;
+      fill: currentColor;
+    }
+  `}
+`;
+
+const FormCheckboxValueDisplayer = ({ value }) => {
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', marginTop: value ? '2px' : '4px' } }, value ? React.createElement(SuccessIcon, null) : React.createElement(RemoveIcon$1, { color: "red", width: "14px", height: "14px" })));
+};
 const FormCheckbox = React.memo((props) => {
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue: props.defaultValue !== true ? false : true,
-    }, props, {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         isUndefined: (value) => value !== true && value !== false,
+        defaultValue: props.defaultValue !== true ? false : true,
+        Displayer: props.Displayer === undefined ? ((displayerProps) => {
+            const form = useForm();
+            let value = form.getValue(displayerProps.name) ?? false;
+            const ValueDisplayer = props.ValueDisplayer ?? FormCheckboxValueDisplayer;
+            return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+        }) : props.Displayer,
     }));
     const Component = props.FieldComponent || Checkbox;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -3549,14 +3741,14 @@ const DashboardLeft = dashboardVerticalPanel('left');
 
 const DashboardRight = dashboardVerticalPanel('right');
 
-const IconComponent$5 = (props) => {
+const IconComponent$7 = (props) => {
     return (React.createElement("div", { ...props },
         React.createElement("svg", { className: "o-icon-menu-svg", viewBox: "0 0 100 100" },
             React.createElement("rect", { width: "100", height: "15", rx: "15", ry: "15" }),
             React.createElement("rect", { y: "40", width: "100", height: "15", rx: "15", ry: "15" }),
             React.createElement("rect", { y: "80", width: "100", height: "15", rx: "15", ry: "15" }))));
 };
-var MenuIcon = styled(IconComponent$5) `
+var MenuIcon = styled(IconComponent$7) `
   ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css `
     width: ${width};
     height: ${height};
@@ -3603,13 +3795,13 @@ const useDashoardBodyPanel = () => {
     return state.body;
 };
 
-const IconComponent$4 = ({ className, onClick }) => {
+const IconComponent$6 = ({ className, onClick }) => {
     return (React.createElement("div", { className: className, onClick: onClick },
         React.createElement("svg", { className: "o-icon-close-all-svg", viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg" },
             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.621 8.086l-.707-.707L6.5 8.793 5.086 7.379l-.707.707L5.793 9.5l-1.414 1.414.707.707L6.5 10.207l1.414 1.414.707-.707L7.207 9.5l1.414-1.414z" }),
             React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" }))));
 };
-var CloseAllIcon = styled(IconComponent$4) `
+var CloseAllIcon = styled(IconComponent$6) `
   ${({ width, height, color: cssColor = 'inherit' }) => css `
     width: ${width};
     height: ${height};
@@ -3624,12 +3816,12 @@ var CloseAllIcon = styled(IconComponent$4) `
 
 //#region -- system import
 //#endregion
-const IconComponent$3 = ({ className }) => {
+const IconComponent$5 = ({ className }) => {
     return (React.createElement("div", { className: className },
         React.createElement("svg", { className: "o-icon-close-svg", viewBox: "0 0 100 100" },
             React.createElement("path", { d: "M35.6 34.4L28 26.8l7.6-7.6c.2-.2.2-.5 0-.7l-.5-.5c-.2-.2-.5-.2-.7 0l-7.6 7.6-7.5-7.6c-.2-.2-.5-.2-.7 0l-.6.6c-.2.2-.2.5 0 .7l7.6 7.6-7.6 7.5c-.2.2-.2.5 0 .7l.5.5c.2.2.5.2.7 0l7.6-7.6 7.6 7.6c.2.2.5.2.7 0l.5-.5c.2-.2.2-.5 0-.7z" }))));
 };
-const CrossIcon = styled(IconComponent$3) `
+const CrossIcon = styled(IconComponent$5) `
   width: ${(props) => props.width || '32px'};
   height: ${(props) => props.height || '32px'};
   .o-icon-close-svg {
@@ -3662,13 +3854,13 @@ var ErrorIcon = styled(ErrorIconComponent) `
   `}
 `;
 
-const IconComponent$2 = (props) => {
+const IconComponent$4 = (props) => {
     const className = addClassname('o-icon-file', props.className);
     return (React.createElement("div", { ...props, className: className },
         React.createElement("svg", { className: "o-icon-file-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024", width: "16px", height: "16px" },
             React.createElement("path", { d: "M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0 0 42 42h216v494z" }))));
 };
-var FileIcon = styled(IconComponent$2) `
+var FileIcon = styled(IconComponent$4) `
   ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => css `
     width: ${width};
     height: ${height};
@@ -3681,13 +3873,13 @@ var FileIcon = styled(IconComponent$2) `
   `}
 `;
 
-const IconComponent$1 = (props) => {
+const IconComponent$3 = (props) => {
     const className = addClassname('o-icon-folder', props.className);
     return (React.createElement("div", { ...props, className: className },
         React.createElement("svg", { className: "o-icon-folder-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "24px", height: "24px" },
             React.createElement("path", { d: "M20,6h-8l-2-2H4C2.9,4,2,4.9,2,6v12c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V8C22,6.9,21.1,6,20,6z" }))));
 };
-var FolderIcon = styled(IconComponent$1) `
+var FolderIcon = styled(IconComponent$3) `
   ${({ width = '24px', height = '24px', color: cssColor = 'currentColor' }) => css `
     width: ${width};
     height: ${height};
@@ -3700,12 +3892,12 @@ var FolderIcon = styled(IconComponent$1) `
   `}
 `;
 
-const IconComponent = ({ className, onClick }) => {
+const IconComponent$2 = ({ className, onClick }) => {
     return (React.createElement("div", { className: className, onClick: onClick },
         React.createElement("svg", { className: "o-icon-search-svg", viewBox: "0 0 118.783 118.783" },
             React.createElement("path", { d: "M115.97,101.597L88.661,74.286c4.64-7.387,7.333-16.118,7.333-25.488c0-26.509-21.49-47.996-47.998-47.996\n\t\tS0,22.289,0,48.798c0,26.51,21.487,47.995,47.996,47.995c10.197,0,19.642-3.188,27.414-8.605l26.984,26.986\n\t\tc1.875,1.873,4.333,2.806,6.788,2.806c2.458,0,4.913-0.933,6.791-2.806C119.72,111.423,119.72,105.347,115.97,101.597z\n\t\t M47.996,81.243c-17.917,0-32.443-14.525-32.443-32.443s14.526-32.444,32.443-32.444c17.918,0,32.443,14.526,32.443,32.444\n\t\tS65.914,81.243,47.996,81.243z" }))));
 };
-var SearchIcon = styled(IconComponent) `
+var SearchIcon = styled(IconComponent$2) `
   ${({ width, height, color: cssColor = 'inherit' }) => css `
     width: ${width};
     height: ${height};
@@ -3721,25 +3913,6 @@ var SearchIcon = styled(IconComponent) `
   `}
 `;
 
-const SuccessIconComponent = (props) => {
-    return (React.createElement("div", { ...props },
-        React.createElement("svg", { className: "o-icon-success-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 16", fill: "currentColor" },
-            React.createElement("path", { fillRule: "evenodd", d: "M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z" }))));
-};
-var SuccessIcon = styled(SuccessIconComponent) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'success' }) => css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-    .o-icon-success-svg {
-      display: inline-block;
-      fill: currentColor;
-    }
-  `}
-`;
-
 const InputComponent = (props) => {
     const { className, size = 'medium', status, PrefixComponent, SuffixComponent, onFocus: forwardFocus, onBlur: forwardBlur, onChange: forwardChange, value, ...inputProps } = props;
     const [focus, setFocus] = useState(false);
@@ -3846,12 +4019,96 @@ const Input = styled(InputComponent) `
   ${inputStyle}
 `;
 
+const IconComponent$1 = (props) => {
+    const className = addClassname('o-icon-hide', props.className);
+    return (React.createElement("div", { ...props, className: className },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "o-icon-hide-svg", viewBox: "0 0 1024 1024" },
+            React.createElement("path", { d: "M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 0 0 0-51.5zm-63.57-320.64L836 122.88a8 8 0 0 0-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 0 0 0 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 0 0 0 11.31L155.17 889a8 8 0 0 0 11.31 0l712.15-712.12a8 8 0 0 0 0-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 0 0-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 0 1 146.2-106.69L401.31 546.2A112 112 0 0 1 396 512z" }),
+            React.createElement("path", { d: "M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 0 0 227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 0 1-112 112z" }))));
+};
+var HideIcon = styled(IconComponent$1) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    .o-icon-hide-svg {
+      display: inline-block;
+      fill: ${cssColor};
+    }
+  `}
+`;
+
+const IconComponent = (props) => {
+    const className = addClassname('o-icon-show', props.className);
+    return (React.createElement("div", { ...props, className: className },
+        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "o-icon-show-svg", viewBox: "0 0 1024 1024" },
+            React.createElement("path", { d: "M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 0 0 0 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z" }))));
+};
+var ShowIcon = styled(IconComponent) `
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => css `
+    width: ${width};
+    height: ${height};
+    ${display('flex')};
+    ${alignItems('center')};
+    .o-icon-show-svg {
+      display: inline-block;
+      fill: ${cssColor};
+    }
+  `}
+`;
+
+const PasswordComponent = ({ className, value }) => {
+    const [show, setShow] = useState(false);
+    if (show) {
+        return (React.createElement("span", { className: addClassname('o-password', className) },
+            React.createElement("span", { className: "o-password-text" }, value),
+            React.createElement(HideIcon, { onClick: () => setShow(false) })));
+    }
+    return (React.createElement("span", { className: addClassname('o-password o-password-obfuscated', className) },
+        React.createElement("span", { className: "o-password-text" }, value),
+        React.createElement(ShowIcon, { onClick: () => setShow(true) })));
+};
+
+const passwordStyle = () => {
+    return css `
+    ${display('flex')}
+    ${alignItems('center')}
+    .g-icon-obfuscated-password {
+      ${fontSize('xl')}
+      ${marginBottom('-8px')}
+    }
+    .g-icon-show-password {
+      ${color('primary')}
+      ${marginLeft('sm')}
+      ${cursor('pointer')}
+    }
+  `;
+};
+
+const Password = styled(PasswordComponent) `
+  ${passwordStyle}
+`;
+
+const FormInputValueDisplayer = ({ value }) => {
+    return React.createElement("span", { className: "o-input-displayer-value" }, value ?? '');
+};
 const FormInput = React.memo((props) => {
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
-    }, props, {
-        isUndefined: (value) => value === undefined || value === null,
-        protected: props.type === 'password',
+        isUndefined: props.isUndefined === undefined ? (value) => value === undefined || value === null : props.isUndefined,
+        protected: props.protected === undefined ? props.type === 'password' : props.protected,
+        Displayer: props.Displayer === undefined
+            ? (displayerProps) => {
+                const form = useForm();
+                let value = form.getValue(displayerProps.name) ?? '';
+                if (props.type === 'password' && value !== '') {
+                    value = React.createElement(Password, { value: value });
+                }
+                const ValueDisplayer = props.ValueDisplayer ?? FormInputValueDisplayer;
+                return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+            }
+            : props.Displayer,
     }));
     const Component = props.FieldComponent || Input;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -7219,10 +7476,51 @@ const Select = styled(SelectComponent$1) `
   ${selectStyle}
 `;
 
+const FormSelectValueDisplayer = ({ value }) => {
+    if (Array.isArray(value)) {
+        return (React.createElement(React.Fragment, null, value.map((v, index) => React.createElement("div", { key: `item-${index}`, className: "o-select-displayer-value" }, v ?? ''))));
+    }
+    return React.createElement("span", { className: "o-select-displayer-value" }, value ?? '');
+};
 const FormSelect = (props) => {
+    const service = props.controller ? props.controller.asService() : undefined;
     const defaultValue = props.defaultValue === undefined ? (props.multiple ? [] : null) : props.defaultValue;
     const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         defaultValue,
+        Displayer: props.Displayer ?? ((displayerProps) => {
+            const form = useForm();
+            let value = form.getValue(displayerProps.name) ?? '';
+            const adapter = props.adapter;
+            if (value === undefined || value === null) {
+                value = '';
+            }
+            else if (service) {
+                if (Array.isArray(value)) {
+                    value = value.map((v) => {
+                        const adaptee = service.adapt(v);
+                        return adaptee.text ?? `${value}`;
+                    });
+                }
+                else {
+                    const adaptee = service.adapt(value);
+                    value = adaptee.text ?? `${value}`;
+                }
+            }
+            else if (adapter) {
+                if (Array.isArray(value)) {
+                    value = value.map((v) => {
+                        const adaptee = adapter(v);
+                        return adaptee.text ?? `${value}`;
+                    });
+                }
+                else {
+                    const adaptee = adapter(value);
+                    value = adaptee.text ?? `${value}`;
+                }
+            }
+            const ValueDisplayer = props.ValueDisplayer ?? FormSelectValueDisplayer;
+            return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+        }),
     }));
     const Component = props.FieldComponent || Select;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -9173,7 +9471,7 @@ const DefaultTableHeaderTitleComponent = ({ column, sort }) => {
     };
     return (React.createElement("div", { onClick: isSortable ? onSort : undefined, style: { display: 'flex', alignItems: 'center' } },
         React.createElement("span", { className: "o-table-header-title" }, column.title),
-        column.help && React.createElement(Help, { content: column.help, size: "small" }),
+        column.help && React.createElement(FieldHelp, { content: column.help, size: "small" }),
         isSortable && React.createElement(TableSortComponent, { sort: sort, column: column })));
 };
 const TableHeaderTitleComponent = React.memo((props) => {
@@ -9852,21 +10150,6 @@ const Table = styled(TableComponent) `
   ${tableStyle}
 `;
 
-const RemoveIcon = ({ className, onClick }) => {
-    return (React.createElement("div", { className: className, onClick: onClick },
-        React.createElement("svg", { version: "1.1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 16 16", width: "100%", height: "100%" },
-            React.createElement("path", { fill: "currentColor", d: "M15.854 12.854c-0-0-0-0-0-0l-4.854-4.854 4.854-4.854c0-0 0-0 0-0 0.052-0.052 0.090-0.113 0.114-0.178 0.066-0.178 0.028-0.386-0.114-0.529l-2.293-2.293c-0.143-0.143-0.351-0.181-0.529-0.114-0.065 0.024-0.126 0.062-0.178 0.114 0 0-0 0-0 0l-4.854 4.854-4.854-4.854c-0-0-0-0-0-0-0.052-0.052-0.113-0.090-0.178-0.114-0.178-0.066-0.386-0.029-0.529 0.114l-2.293 2.293c-0.143 0.143-0.181 0.351-0.114 0.529 0.024 0.065 0.062 0.126 0.114 0.178 0 0 0 0 0 0l4.854 4.854-4.854 4.854c-0 0-0 0-0 0-0.052 0.052-0.090 0.113-0.114 0.178-0.066 0.178-0.029 0.386 0.114 0.529l2.293 2.293c0.143 0.143 0.351 0.181 0.529 0.114 0.065-0.024 0.126-0.062 0.178-0.114 0-0 0-0 0-0l4.854-4.854 4.854 4.854c0 0 0 0 0 0 0.052 0.052 0.113 0.090 0.178 0.114 0.178 0.066 0.386 0.029 0.529-0.114l2.293-2.293c0.143-0.143 0.181-0.351 0.114-0.529-0.024-0.065-0.062-0.126-0.114-0.178z" }))));
-};
-var RemoveIcon$1 = styled(RemoveIcon) `
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css `
-    width: ${width};
-    height: ${height};
-    ${display('flex')};
-    ${alignItems('center')};
-    ${color(cssColor)}
-  `}
-`;
-
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const DefaultFormTableContext = React.createContext(null);
 const useFormTableContext = () => {
@@ -9994,6 +10277,42 @@ const FormTableComponent = React.memo(({ addLabel = 'add', controller, value, on
 });
 FormTableComponent.displayName = 'FormTable';
 
+const FormTableItemDisplayer = ({ value, columns, first, last, className, format, name, index, }) => {
+    const userColumns = columns.filter((c) => !c.id.startsWith('system.'));
+    const monoColumnTable = userColumns.length === 1 && !userColumns[0].id;
+    const classNames = monoColumnTable
+        ? 'o-form-mono-column-table-item-displayer'
+        : `o-form-table-item-displayer${first ? ' o-form-table-item-displayer-first' : ''}${last ? ' o-form-table-item-displayer-last' : ''}`;
+    return (React.createElement("div", { className: addClassname(classNames, className) }, userColumns.map((column, colIndex) => {
+        const Displayer = column.Displayer;
+        if (Displayer) {
+            return (React.createElement(Displayer, { column: column, firstRow: first, lastRow: last, rowIndex: index, firstCol: colIndex === 0, lastCol: colIndex === columns.length - 1, colIndex: colIndex, format: format, value: value, rowName: name, key: `col-${colIndex}` }));
+        }
+        return null;
+    })));
+};
+
+const FormTableValueDisplayer = ({ name, columns, value, format, className }) => {
+    if (!Array.isArray(value))
+        return null;
+    return (React.createElement("div", { className: addClassname('o-form-table-displayer-value', className) }, value.map((v, index) => (React.createElement(FormTableItemDisplayer, { key: `item-${index}`, value: v, columns: columns, first: index === 0, last: index === value.length - 1, format: format === 'csv' ? 'csv' : 'form_summary_table', name: `${name}.${index}`, index: index })))));
+};
+var FormTableValueDisplayer$1 = styled(FormTableValueDisplayer) `
+  .o-form-table-item-displayer {
+    ${borderBottomColor('primary')}
+    ${borderBottomStyle('solid')}
+    ${borderBottomWidth('1px')}
+    ${paddingY('sm')}
+    &.o-form-table-item-displayer-last{
+      ${paddingBottom(0)}
+      ${borderBottomWidth(0)}
+    }
+    &.o-form-table-item-displayer-first{
+      ${paddingTop(0)}
+    }
+  }
+`;
+
 const StyledFormTableComponent = styled(FormTableComponent) `
   ${tableStyle}
 `;
@@ -10009,10 +10328,20 @@ const FormTable = React.memo((props) => {
     }
     const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
         defaultValue,
+        Displayer: (displayerProps) => {
+            const form = useForm();
+            let value = form.getValue(displayerProps.name) ?? [];
+            const ValueDisplayer = props.ValueDisplayer ?? FormTableValueDisplayer$1;
+            return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { name: displayerProps.name, value: value, columns: props.controller.columns, format: displayerProps.format }), format: displayerProps.format }));
+        },
     }, props));
+    const fieldContainer = useFieldContainer({
+        container: props.name,
+    });
     const Component = props.FieldComponent || StyledFormTableComponent;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
-        React.createElement(Component, { ...fieldComponentProps, name: props.name, required: props.required, minLength: props.minLength ?? props.min, maxLength: props.maxLength ?? props.max })));
+        React.createElement(FormContext.Provider, { value: fieldContainer.context },
+            React.createElement(Component, { ...fieldComponentProps, name: props.name, required: props.required, minLength: props.minLength ?? props.min, maxLength: props.maxLength ?? props.max }))));
 });
 FormTable.displayName = 'FormTable';
 
@@ -10029,12 +10358,37 @@ const CheckboxCellComponent = (options) => {
     return CheckboxCellComponent;
 };
 
+const DefaultFormCellDisplayer = (props) => {
+    const form = useForm();
+    if (['form_summary', 'form_summary_table'].includes(props.format)) {
+        if (props.column) {
+            const name = props.column.id ? `${props.rowName}.${props.column.id}` : `${props.rowName}`;
+            const field = form.fields[name];
+            if (props.column.id === 'value') {
+                console.log(field);
+            }
+            if (field && field.Displayer) {
+                const Component = field.Displayer;
+                return React.createElement(Component, { name: name, label: props.column.id ? props.column.title : '', Displayer: field.Displayer, children: {}, index: 0, first: true, last: true, format: props.format });
+            }
+        }
+    }
+    if (props.format === 'csv') {
+        const value = get(props.value, props.column.id, '');
+        if (typeof value === 'string')
+            return value;
+        return JSON.stringify(value);
+    }
+    return null;
+};
+
 const checkboxColumn = (id, options) => {
     const Component = options.CellComponent || CheckboxCellComponent;
     return Object.assign({
         filterable: false,
         sortable: false,
         className: 'o-checkbox-cell',
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10092,6 +10446,7 @@ const enumColumn = (id, options) => {
         filterable: true,
         FilterComponent: (props) => (React.createElement(TableSelectFilterComponent, { ...props, dataSource: options.filterDataSource })),
         sortable: true,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
     });
@@ -10114,6 +10469,7 @@ const inputColumn = (id, options) => {
     return Object.assign({
         filterable: false,
         sortable: false,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10136,6 +10492,7 @@ const textColumn = (id, options) => {
         filterable: true,
         FilterComponent: TableTextFilterComponent,
         sortable: true,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
     });
@@ -10166,6 +10523,7 @@ const numberColumn = (id, options) => {
         filterable: true,
         FilterComponent: TableNumberFilterComponent,
         sortable: true,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
     });
@@ -10210,6 +10568,7 @@ const selectColumn = (id, options) => {
     return Object.assign({
         filterable: false,
         sortable: false,
+        Displayer: DefaultFormCellDisplayer,
     }, opts, {
         id,
         CellComponent: Component(opts, broker),
@@ -10309,11 +10668,21 @@ const Textarea = styled(TextareaComponent) `
   ${textareaStyle}
 `;
 
+const FormTextareaValueDisplayer = ({ value }) => {
+    return (React.createElement("span", { className: "o-input-displayer-value" }, value ? value.split('\n').map((v, index) => React.createElement("div", { key: `line-${index}` }, v)) : ''));
+};
 const FormTextarea = React.memo((props) => {
-    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({
-        defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
-    }, props, {
+    const [fieldLayoutProps, fieldComponentProps] = useFieldLayout(Object.assign({}, props, {
         isUndefined: (value) => value === undefined || value === null,
+        defaultValue: props.defaultValue === undefined ? '' : props.defaultValue,
+        Displayer: props.Displayer === undefined
+            ? (displayerProps) => {
+                const form = useForm();
+                let value = form.getValue(displayerProps.name) ?? '';
+                const ValueDisplayer = props.ValueDisplayer ?? FormTextareaValueDisplayer;
+                return (React.createElement(FieldDisplayer, { label: displayerProps.label ?? titlelize(displayerProps.name), help: props.help, first: displayerProps.first, last: displayerProps.last, value: React.createElement(ValueDisplayer, { value: value }), format: displayerProps.format }));
+            }
+            : props.Displayer,
     }));
     const Component = props.FieldComponent || Textarea;
     return (React.createElement(FieldLayout, { ...fieldLayoutProps, required: props.required },
@@ -10338,6 +10707,7 @@ const textareaColumn = (id, options) => {
     return Object.assign({
         filterable: false,
         sortable: false,
+        Displayer: DefaultFormCellDisplayer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10828,6 +11198,20 @@ const wizardStyle = ({ layout = 'vertical', theme, inModal }) => {
 const wizardModalStyle = () => {
     return css ``;
 };
+const wizardSummaryStyle = () => {
+    return css `
+  .o-accordion-panel {
+    ${paddingBottom('md')}
+  }
+  .o-accordion-panel-title {
+    ${backgroundColor('lighter')}
+  }
+  .o-accordion-content {
+    ${paddingX('sm')}
+    ${paddingBottom('sm')}
+  }
+  `;
+};
 
 const Wizard = styled(WizardComponent) `
   ${wizardStyle}
@@ -10842,6 +11226,19 @@ const WizardModal = styled(WizardModalComponent) `
   ${wizardModalStyle}
 `;
 
+const WizardSummaryComponent = ({ className }) => {
+    const form = useForm();
+    const tree = Object.values(form.getDisplayerTree());
+    return (React.createElement(Accordion, { className: className }, tree.map((field, index) => {
+        const Displayer = field.Displayer;
+        return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === tree.length - 1, format: "form_summary" });
+    })));
+};
+
+const WizardSummary = styled(WizardSummaryComponent) `
+  ${wizardSummaryStyle}
+`;
+
 const useStep = (props) => {
     const service = useWizardService();
     const state = useWizardState();
@@ -10854,9 +11251,8 @@ const useStep = (props) => {
     return step;
 };
 
-const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, }) => {
+const Step = ({ title, active = false, disabled = false, visible = true, closable = false, children, icon, uid, optional = false, showTitle = true, className, onTouch, }) => {
     const { animate, forwardOnly } = useWizardState();
-    const service = useWizardService();
     const step = useStep({
         title,
         active,
@@ -10870,15 +11266,7 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
         touching: !forwardOnly,
         uid: uid === undefined ? title : uid,
     });
-    const fieldContainer = useFieldContainer({
-        onValidationChange: (touchedValidation, allValidation) => {
-            if (step) {
-                service.onValidationChange(step.uid, touchedValidation, allValidation);
-            }
-        },
-    });
     const touched = step?.touched;
-    const touchAllFields = fieldContainer.touchAllFields;
     const onEnter = (node) => {
         node.style.opacity = '0';
     };
@@ -10889,34 +11277,88 @@ const Step = ({ title, active = false, disabled = false, visible = true, closabl
         }, 0);
     };
     useEffect(() => {
-        if (touched) {
-            touchAllFields();
+        if (touched && onTouch) {
+            onTouch();
         }
-    }, [touched, touchAllFields]);
+    }, [touched, onTouch]);
     if (!step || !step.active) {
         return null;
     }
-    return (React.createElement(FormContext.Provider, { value: fieldContainer.context },
-        React.createElement(CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
-            React.createElement("div", { className: addClassname('o-step-content', className) },
-                showTitle && React.createElement("div", { className: "o-step-content-title" }, title),
-                children))));
-};
-
-const FormCard = ({ name, disabled, visible, ...stepProps }) => {
-    const decorator = useFormDecorator(name);
+    return (React.createElement(CSSTransition, { in: true, timeout: animate, appear: true, onEnter: onEnter, onEntering: onEntering },
+        React.createElement("div", { className: addClassname('o-step-content', className) },
+            showTitle && React.createElement("div", { className: "o-step-content-title" }, title),
+            children)));
+};
+
+const FormStep = ({ name, disabled, visible, ...stepProps }) => {
+    const decorator = useFormDecorator(name, {
+        Displayer: (displayerProps) => {
+            const total = Object.values(displayerProps.children ?? {}).length;
+            return (React.createElement(AccordionPanel, { title: stepProps.title, initialActive: displayerProps.index === 0, initialExpand: displayerProps.index === 0 }, Object.values(displayerProps.children ?? {}).map((field, index) => {
+                const Displayer = field.Displayer;
+                return React.createElement(Displayer, { ...field, index: index, key: `field-${index}`, first: index === 0, last: index === total - 1, format: displayerProps.format });
+            })));
+        },
+    });
     const metadata = useFormMetadata(decorator.name);
     const service = useWizardService();
+    const fieldContainer = useFieldContainer({
+        container: name,
+        onValidationChange: (touchedValidation, allValidation) => {
+            service.onValidationChange(name, touchedValidation, allValidation);
+        },
+    });
+    const { touchAllFields, hide, show, disable, enable } = fieldContainer;
     useEffect(() => {
-        const step = service.getMember(name);
-        if (step && metadata.visible !== undefined && step.visible !== metadata.visible) {
-            metadata.visible ? service.show(name) : service.hide(name);
+        const visible = metadata.visible ?? true;
+        const disabled = metadata.disabled ?? false;
+        if (!visible) {
+            if (disabled) {
+                service.disable(name);
+                disable();
+            }
+            else {
+                service.enable(name);
+                enable();
+            }
+            service.hide(name);
+            hide();
         }
-        if (step && metadata.disabled !== undefined && step.disabled !== metadata.disabled) {
-            metadata.disabled ? service.disable(name) : service.enable(name);
+        else {
+            service.show(name);
+            show();
+            if (disabled) {
+                service.disable(name);
+                disable();
+            }
+            else {
+                service.enable(name);
+                enable();
+            }
         }
-    });
-    return React.createElement(Step, { ...stepProps, uid: name });
+    }, [name, metadata.visible, metadata.disabled]);
+    useEffect(() => {
+        if (!visible) {
+            if (disabled) {
+                disable();
+            }
+            else {
+                enable();
+            }
+            hide();
+        }
+        else {
+            show();
+            if (disabled) {
+                disable();
+            }
+            else {
+                enable();
+            }
+        }
+    }, [visible, disabled, hide, show, disable, enable]);
+    return (React.createElement(FormContext.Provider, { value: fieldContainer.context },
+        React.createElement(Step, { ...stepProps, uid: name, onTouch: touchAllFields })));
 };
 
 const animation = cssProperty('animation');
@@ -11810,5 +12252,5 @@ const TailwindTheme = (props) => {
     return React.createElement(BaseTheme, { theme: tailwindTheme(), ...props });
 };
 
-export { Accordion, AccordionComponent, AccordionContainer, AccordionPanel, ArraySelectComponent, ArrayTreeComponent, ArrayTreeSelectComponent, BaseTheme, BreakpointKeys, Button, Card, CardComponent, CardTitle, Checkbox, CheckboxCellComponent, CheckboxComponent, CloseAllIcon, Col, ColorKeys, ControlledSelectComponent, ControlledTimerComponent, ControlledWizardComponent, ControllerTreeComponent, CrossIcon, Dashboard, DashboardBody, DashboardContainer, DashboardFooter, DashboardHeader, DashboardKeys, DashboardLeft, DashboardOverlay, DashboardRight, DashboardService, DashboardServiceContext, DashboardStateContext, DashboardToggler, DefaultCellComponent, DefaultSelectBroker, Dropdown, DropdownButton, DropdownComponent, DropdownList, ErrorIcon, ExpandedCellComponent, FieldDescription, FieldDescriptionComponent, Help as FieldHelp, FieldHelpComponent, FieldLayout, FieldLayoutComponent, FileIcon, FolderIcon, FontFamiliesKeys, FontLineHeightKeys, FontSizeKeys, FontSpacingKeys, FontWeightKeys, FormCard$1 as FormCard, FormCheckbox, FormInput, FormSelect$1 as FormSelect, FormCard as FormStep, FormTable, FormTextarea, HelpIcon, Input, InputCellComponent, InputComponent, Label, List, ListItemComponent$1 as ListItemComponent, ListItemContent, ListStatus, LoadingIcon, LoadingItem$1 as LoadingItem, MenuIcon, Modal, ModalComponent, NotificationComponent, Notifications, NotificationsComponent, Properties, PropertiesComponent, Property, RadiusKeys, Row, SearchIcon, Select, SelectCellComponent, SelectComponent$1 as SelectComponent, SelectIconComponent, SelectInputComponent$1 as SelectInputComponent, SelectNotFoundComponent, SelectOptionComponent$1 as SelectOptionComponent, SelectService$1 as SelectService, SelectTokensComponent$1 as SelectTokensComponent, ShadowKeys, SizeKeys, SpacingKeys, Step, StepTitle, SubmitButton, SuccessIcon, Tab, TabTitle, Table, TableBodyRowComponent, TableFilterOperatorComponent, TableInputFilterComponent, TableNumberFilterComponent, TableTextFilterComponent, Tabs, Tag, TagComponent, TailwindTheme, Textarea, TextareaCellComponent, TextareaComponent, Timer, TimerComponent, TogglerIcon, Tooltip, Tree, TreeBodyComponent, TreeComponent$1 as TreeComponent, TreeConfigContext, TreeItemComponent$1 as TreeItemComponent, TreeItemContent, TreeItemToggler, TreeListComponent, TreeSelect, TreeSelectComponent$1 as TreeSelectComponent, TreeService$1 as TreeService, TreeServiceContext, TreeStateContext, TshirtKeys, UncontrolledTimerComponent, UncontrolledWizardComponent, VirtualTreeBodyComponent, VirtualTreeListComponent, Wizard, WizardComponent, WizardContainer, WizardModal, WizardModalComponent, WizardService, accordionStyle, addClassname, addStyle, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, applyOpacity, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, baseTheme, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomOpacity, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, buttonStyle, captionSide, cardStyle, caretColor, checkboxColumn, checkboxStyle, clear, colStyle, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, cssProperty, cursor, darken, dashboardOverlayStyle, defaultTreeQueryEngine, deriveColor, display, dropdownButtonStyle, dropdownStyle, emptyCells, enumColumn, enumFormatter, fill, findSelectItem, findSelectItemIndex, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, iconHeight, iconWidth, imageRendering, inputColumn, justifyContent, justifySelf, left, letterSpacing, lighten, lineHeight, lineHeightStep, linkColumn, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, modalStyle, notifcationsStyle, numberColumn, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, propertiesStyle, pxFormatter, resize, rgbToHex, right, rotate, rowGap, rowStyle, sameWidthPopperModifier, scale, selectColumn, shouldCheckSelect, stroke, strokeWidth, tableLayout, tagStyle, tailwindPalette, tailwindTheme, textAlign, textColumn, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, textareaColumn, themeFormatter, timerStyle, toCss, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useCheckboxColumn, useClickOutside, useColumns, useDashboard, useDashboardHorizontalPanel, useDashboardService, useDashboardState, useDashboardVerticalPanel, useDashoardBodyPanel, useDropdown, useEnumColumn, useFieldLayout, useFocusOutside, useFormTableContext, useInputColumn$1 as useInputColumn, useLinkColumn, useListController, useInputColumn as useNumberColumn, useSelectColumn, useSelectController, useSelectService, useTab, useTableController, useTableService, useTabsController, useTabsService, useTabsState, useTextColumn, useTextareaColumn, useTreeConfig, useTreeController, useTreeInitialState, useTreeItemContext, useTreeSelectController, useTreeService, useTreeState, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wizardModalStyle, wizardStyle, wordBreak, wordSpacing, zIndex, zoom };
+export { Accordion, AccordionComponent, AccordionContainer, AccordionPanel, ArraySelectComponent, ArrayTreeComponent, ArrayTreeSelectComponent, BaseTheme, BreakpointKeys, Button, Card, CardComponent, CardTitle, Checkbox, CheckboxCellComponent, CheckboxComponent, CloseAllIcon, Col, ColorKeys, ControlledSelectComponent, ControlledTimerComponent, ControlledWizardComponent, ControllerTreeComponent, CrossIcon, Dashboard, DashboardBody, DashboardContainer, DashboardFooter, DashboardHeader, DashboardKeys, DashboardLeft, DashboardOverlay, DashboardRight, DashboardService, DashboardServiceContext, DashboardStateContext, DashboardToggler, DefaultCellComponent, DefaultFormCellDisplayer as DefaultCellDisplayer, DefaultSelectBroker, Dropdown, DropdownButton, DropdownComponent, DropdownList, ErrorIcon, ExpandedCellComponent, FieldDescription, FieldDescriptionComponent, FieldDisplayer, FieldHelp, FieldHelpComponent, FieldLayout, FieldLayoutComponent, FileIcon, FolderIcon, FontFamiliesKeys, FontLineHeightKeys, FontSizeKeys, FontSpacingKeys, FontWeightKeys, FormCard, FormCardDisplayer, FormCheckbox, FormInput, FormSelect$1 as FormSelect, FormStep, FormTable, FormTableItemDisplayer, FormTableValueDisplayer$1 as FormTableValueDisplayer, FormTextarea, HelpIcon, Input, InputCellComponent, InputComponent, Label, List, ListItemComponent$1 as ListItemComponent, ListItemContent, ListStatus, LoadingIcon, LoadingItem$1 as LoadingItem, MenuIcon, Modal, ModalComponent, NotificationComponent, Notifications, NotificationsComponent, Password, PasswordComponent, Properties, PropertiesComponent, Property, RadiusKeys, Row, SearchIcon, Select, SelectCellComponent, SelectComponent$1 as SelectComponent, SelectIconComponent, SelectInputComponent$1 as SelectInputComponent, SelectNotFoundComponent, SelectOptionComponent$1 as SelectOptionComponent, SelectService$1 as SelectService, SelectTokensComponent$1 as SelectTokensComponent, ShadowKeys, SizeKeys, SpacingKeys, Step, StepTitle, SubmitButton, SuccessIcon, Tab, TabTitle, Table, TableBodyRowComponent, TableFilterOperatorComponent, TableInputFilterComponent, TableNumberFilterComponent, TableTextFilterComponent, Tabs, Tag, TagComponent, TailwindTheme, Textarea, TextareaCellComponent, TextareaComponent, Timer, TimerComponent, TogglerIcon, Tooltip, Tree, TreeBodyComponent, TreeComponent$1 as TreeComponent, TreeConfigContext, TreeItemComponent$1 as TreeItemComponent, TreeItemContent, TreeItemToggler, TreeListComponent, TreeSelect, TreeSelectComponent$1 as TreeSelectComponent, TreeService$1 as TreeService, TreeServiceContext, TreeStateContext, TshirtKeys, UncontrolledTimerComponent, UncontrolledWizardComponent, VirtualTreeBodyComponent, VirtualTreeListComponent, Wizard, WizardComponent, WizardContainer, WizardModal, WizardModalComponent, WizardService, WizardSummary, WizardSummaryComponent, accordionStyle, addClassname, addStyle, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, applyOpacity, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, baseTheme, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomOpacity, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, buttonStyle, captionSide, cardStyle, caretColor, checkboxColumn, checkboxStyle, clear, colStyle, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, cssProperty, cursor, darken, dashboardOverlayStyle, defaultTreeQueryEngine, deriveColor, display, dropdownButtonStyle, dropdownStyle, emptyCells, enumColumn, enumFormatter, fieldDescriptionStyle, fieldDisplayerStyle, fieldHelpStyle, fieldStyle, fill, filterListStyle, findSelectItem, findSelectItemIndex, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, iconHeight, iconWidth, imageRendering, inputColumn, justifyContent, justifySelf, left, letterSpacing, lighten, lineHeight, lineHeightStep, linkColumn, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, modalStyle, notifcationsStyle, numberColumn, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, passwordStyle, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, propertiesStyle, pxFormatter, resize, rgbToHex, right, rotate, rowGap, rowStyle, sameWidthPopperModifier, scale, selectColumn, shouldCheckSelect, stroke, strokeWidth, tableLayout, tableStyle, tagStyle, tailwindPalette, tailwindTheme, textAlign, textColumn, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, textareaColumn, themeFormatter, timerStyle, titlelize, toCss, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useCheckboxColumn, useClickOutside, useColumns, useDashboard, useDashboardHorizontalPanel, useDashboardService, useDashboardState, useDashboardVerticalPanel, useDashoardBodyPanel, useDropdown, useEnumColumn, useFieldLayout, useFocusOutside, useFormTableContext, useInputColumn$1 as useInputColumn, useLinkColumn, useListController, useInputColumn as useNumberColumn, useSelectColumn, useSelectController, useSelectService, useTab, useTableController, useTableService, useTabsController, useTabsService, useTabsState, useTextColumn, useTextareaColumn, useTreeConfig, useTreeController, useTreeInitialState, useTreeItemContext, useTreeSelectController, useTreeService, useTreeState, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wizardModalStyle, wizardStyle, wizardSummaryStyle, wordBreak, wordSpacing, zIndex, zoom };
 //# sourceMappingURL=index.module.js.map