@headless-adminapp/fluent 0.0.17-alpha.3 → 0.0.17-alpha.31

package/DialogContainer/PromptDialog.js

@@ -37,6 +37,8 @@ exports.PromptDialog = PromptDialog;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const utils_1 = require("@headless-adminapp/app/dataform/utils");
+const form_1 = require("@headless-adminapp/app/form");
+const locale_1 = require("@headless-adminapp/app/locale");
 const yup_1 = require("@hookform/resolvers/yup");
 const lodash_1 = require("lodash");
 const react_hook_form_1 = require("react-hook-form");
@@ -45,11 +47,13 @@ const SectionControl_1 = require("../DataForm/SectionControl");
 const StandardControl_1 = require("../PageEntityForm/StandardControl");
 function PromptDialog(props) {
     var _a, _b;
+    const { language } = (0, locale_1.useLocale)();
+    const formValidationStrings = (0, form_1.useFormValidationStrings)();
     const form = (0, react_hook_form_1.useForm)({
         mode: 'all',
         defaultValues: props.defaultValues,
         shouldUnregister: false,
-        resolver: (0, exports.formValidator)(props.attributes),
+        resolver: (0, exports.formValidator)(props.attributes, language, formValidationStrings),
     });
     return ((0, jsx_runtime_1.jsx)(react_components_1.Dialog, { open: props.open, onOpenChange: () => {
             var _a;
@@ -70,7 +74,7 @@ function PromptDialog(props) {
                                                 : '';
                                             return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError }) }));
                                         } }, attributeName));
-                                }) })] }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", onClick: () => {
+                                }) })] }), (0, jsx_runtime_1.jsxs)(react_components_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "secondary", type: "button", onClick: () => {
                                     var _a;
                                     (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
                                 }, children: (_a = props.cancelText) !== null && _a !== void 0 ? _a : 'Cancel' }), (0, jsx_runtime_1.jsx)(react_components_1.Button, { appearance: "primary", disabled: form.formState.submitCount > 0 && !form.formState.isValid, onClick: () => __awaiter(this, void 0, void 0, function* () {
@@ -80,19 +84,19 @@ function PromptDialog(props) {
                                     }))();
                                 }), children: (_b = props.confirmText) !== null && _b !== void 0 ? _b : 'Confirm' })] })] }) }) }));
 }
-exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes) {
+exports.formValidator = (0, lodash_1.memoize)(function formValidator(attributes, language, strings) {
     return (values, context, options) => __awaiter(this, void 0, void 0, function* () {
-        const validator = (0, exports.generateValidationSchema)(attributes);
+        const validator = (0, exports.generateValidationSchema)(attributes, language, strings);
         const resolver = (0, yup_1.yupResolver)(validator);
         const result = yield resolver(values, context, options);
         return result;
     });
 }, (attributes) => JSON.stringify({ attributes }));
-exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes) {
+exports.generateValidationSchema = (0, lodash_1.memoize)(function generateValidationSchema(attributes, language, strings) {
     const columns = Object.keys(attributes);
     return yup.object().shape(Object.assign({}, columns.reduce((acc, column) => {
         const attribute = attributes[column];
-        const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, 'en', {});
+        const validationSchema = (0, utils_1.generateAttributeValidationSchema)(attribute, language, strings);
         return Object.assign(Object.assign({}, acc), { [column]: validationSchema });
     }, {})));
 }, (attributes) => JSON.stringify({ attributes }));

package/PageEntityForm/CommandContainer.js

@@ -3,18 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommandContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
+const hooks_2 = require("@headless-adminapp/app/hooks");
 const mutable_1 = require("@headless-adminapp/app/mutable");
 const recordset_1 = require("@headless-adminapp/app/recordset");
-const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
-const hooks_3 = require("@headless-adminapp/app/route/hooks");
+const hooks_3 = require("@headless-adminapp/app/recordset/hooks");
+const hooks_4 = require("@headless-adminapp/app/route/hooks");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const OverflowCommandBar_1 = require("../OverflowCommandBar");
 const CommandContainer = () => {
     const gridCommands = (0, hooks_1.useMainFormCommands)();
-    const router = (0, hooks_3.useRouter)();
+    const router = (0, hooks_4.useRouter)();
+    const isMobile = (0, hooks_2.useIsMobile)();
     const schema = (0, hooks_1.useDataFormSchema)();
-    const [recordSetVisible, setRecordSetVisible] = (0, hooks_2.useRecordSetVisibility)();
+    const [recordSetVisible, setRecordSetVisible] = (0, hooks_3.useRecordSetVisibility)();
     const recordSetContext = (0, mutable_1.useContextSelector)(recordset_1.RecordSetContext, (state) => state);
     const extendedCommands = (0, react_1.useMemo)(() => {
         return [
@@ -28,7 +30,8 @@ const CommandContainer = () => {
                 },
             ],
             ...(recordSetContext.logicalName === schema.logicalName &&
-                recordSetContext.ids.length > 0
+                recordSetContext.ids.length > 0 &&
+                !isMobile
                 ? [
                     [
                         {
@@ -43,7 +46,16 @@ const CommandContainer = () => {
                 : []),
             ...gridCommands,
         ];
-    }, [gridCommands, recordSetContext, recordSetVisible, schema.logicalName]);
+    }, [
+        gridCommands,
+        isMobile,
+        recordSetContext.ids.length,
+        recordSetContext.logicalName,
+        recordSetVisible,
+        router,
+        schema.logicalName,
+        setRecordSetVisible,
+    ]);
     return (0, jsx_runtime_1.jsx)(OverflowCommandBar_1.OverflowCommandBar, { commands: extendedCommands });
 };
 exports.CommandContainer = CommandContainer;

package/PageEntityForm/FormTabRelated.js

@@ -4,11 +4,10 @@ exports.FormTabRelated = FormTabRelated;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
-const hooks_2 = require("@headless-adminapp/app/dataform/hooks");
 const FormTab_1 = require("../form/layout/FormTab");
 const SubgridControl_1 = require("./SubgridControl");
 function FormTabRelated({ selectedRelatedItem }) {
-    const recordId = (0, hooks_2.useRecordId)();
+    const recordId = (0, hooks_1.useRecordId)();
     const schema = (0, hooks_1.useDataFormSchema)();
     return ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: "related", noWrapper: true, children: (0, jsx_runtime_1.jsx)("div", { style: {
                 display: 'flex',

package/PageEntityForm/PageEntityFormDesktopContainer.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityFormDesktopContainer = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_components_1 = require("@fluentui/react-components");
-const builders_1 = require("@headless-adminapp/app/builders");
 const dataform_1 = require("@headless-adminapp/app/dataform");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
 const mutable_1 = require("@headless-adminapp/app/mutable");
-const utils_1 = require("@headless-adminapp/app/utils");
+const utils_2 = require("@headless-adminapp/app/utils");
 const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const PageBroken_1 = require("../components/PageBroken");
@@ -21,7 +21,7 @@ const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
 const RelatedViewSelector_1 = require("./RelatedViewSelector");
 const SectionContainer_1 = require("./SectionContainer");
 const PageEntityFormDesktopContainer = () => {
-    var _a, _b;
+    var _a, _b, _c;
     const dataState = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.dataState);
     const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
     const recordId = (0, hooks_1.useRecordId)();
@@ -92,15 +92,15 @@ const PageEntityFormDesktopContainer = () => {
                                                             ? `- ${strings.unsaved}`
                                                             : !!record
                                                                 ? `- ${strings.saved}`
-                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, builders_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: formConfig.experience.headerControls.map((controlName, index) => {
+                                                                : '' })] }), (0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground3 }, children: (0, utils_1.localizedLabel)(language, schema) })] }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'row' }, children: (_a = formConfig.experience.headerControls) === null || _a === void 0 ? void 0 : _a.map((controlName, index) => {
                                             const attribute = schema.attributes[controlName];
                                             return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: {
                                                             width: react_components_1.tokens.spacingHorizontalXXL,
                                                             opacity: 0.5,
                                                         } })), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1, { style: { color: react_components_1.tokens.colorNeutralForeground4 }, children: attribute.label }), (0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: formInstance.control, name: controlName, render: ({ field }) => {
-                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_1.getAttributeFormattedValue)(attribute, field.value) }));
+                                                                    return ((0, jsx_runtime_1.jsx)(react_components_1.Body1, { children: (0, utils_2.getAttributeFormattedValue)(attribute, field.value) }));
                                                                 } })] })] }, controlName));
-                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => setActiveTab(value.value), children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, builders_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: (_b = (_a = selectedRelatedItem.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
+                                        }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', paddingBottom: react_components_1.tokens.spacingVerticalS }, children: [(0, jsx_runtime_1.jsxs)(react_components_1.TabList, { selectedValue: activeTab, onTabSelect: (e, value) => setActiveTab(value.value), children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: tab.name, children: (0, utils_1.localizedLabel)(language, tab) }, tab.name))), !!selectedRelatedItem && ((0, jsx_runtime_1.jsx)(react_components_1.Tab, { value: "related", children: (_c = (_b = selectedRelatedItem.localizedPluralLabels) === null || _b === void 0 ? void 0 : _b[language]) !== null && _c !== void 0 ? _c : selectedRelatedItem.pluralLabel }))] }), (0, jsx_runtime_1.jsx)(RelatedViewSelector_1.RelatedViewSelector, { onSelect: (item) => {
                                             setSelectedRelatedItem(item);
                                             setActiveTab('related');
                                         } })] })] })] }), (0, jsx_runtime_1.jsxs)(FormBody_1.FormBody, { children: [formConfig.experience.tabs.map((tab) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab, { value: tab.name, columnCount: tab.columnCount, columnWidths: tab.columnWidths, children: tab.tabColumns.map((tabColumn, index) => ((0, jsx_runtime_1.jsx)(FormTab_1.FormTab.Column, { children: tabColumn.sections.map((section) => ((0, jsx_runtime_1.jsx)(SectionContainer_1.SectionContainer, { section: section, readOnly: false }, section.name))) }, index))) }, tab.name))), (0, jsx_runtime_1.jsx)(FormTabRelated_1.FormTabRelated, { selectedRelatedItem: selectedRelatedItem })] })] }));

package/PageEntityForm/RecordSetNavigatorContainer.js

@@ -6,9 +6,8 @@ const react_components_1 = require("@fluentui/react-components");
 const ScrollView_1 = require("@headless-adminapp/app/components/ScrollView");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const navigation_1 = require("@headless-adminapp/app/navigation");
 const hooks_2 = require("@headless-adminapp/app/recordset/hooks");
-const hooks_3 = require("@headless-adminapp/app/route/hooks");
-const app_1 = require("@headless-adminapp/core/experience/app");
 const react_1 = require("react");
 const RecordCard_1 = require("./RecordCard");
 const useStyles = (0, react_components_1.makeStyles)({
@@ -31,8 +30,7 @@ const RecordSetNavigatorContainer = () => {
     const [visible] = (0, hooks_2.useRecordSetVisibility)();
     const recordId = (0, hooks_1.useRecordId)();
     const styles = useStyles();
-    const routeResolver = (0, hooks_3.useRouteResolver)();
-    const router = (0, hooks_3.useRouter)();
+    const openForm = (0, navigation_1.useOpenForm)();
     const { language, direction } = (0, locale_1.useLocale)();
     if (!schema) {
         return null;
@@ -60,12 +58,11 @@ const RecordSetNavigatorContainer = () => {
                     }, children: (0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: (_b = (_a = schema.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : schema === null || schema === void 0 ? void 0 : schema.pluralLabel }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(ScrollView_1.ScrollView, { autoHide: true, rtl: direction === 'rtl', children: data === null || data === void 0 ? void 0 : data.map((record) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { role: "button", className: (0, react_components_1.mergeClasses)(styles.item, recordId ===
                                         record[schema.idAttribute] &&
                                         styles.selected), onClick: () => {
-                                        const path = routeResolver({
-                                            type: app_1.PageType.EntityForm,
+                                        openForm({
                                             logicalName: schema.logicalName,
                                             id: record[schema.idAttribute],
+                                            replace: true,
                                         });
-                                        router.replace(path);
                                     }, children: (0, jsx_runtime_1.jsx)(RecordCard_1.RecordCard, { cardView: cardView, record: record, schema: schema, selected: recordId ===
                                             record[schema.idAttribute] }) }), (0, jsx_runtime_1.jsx)("div", { style: { paddingInline: react_components_1.tokens.spacingHorizontalL }, children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: false, style: { opacity: 0.2 } }) })] }, record[schema.idAttribute]))) }) })] }) }));
 };

package/PageEntityForm/RelatedViewSelector.js

@@ -28,6 +28,7 @@ function getRelatedItems(currentSchema, schemas) {
         })
             .filter(Boolean)
             .map((item) => {
+            var _a, _b;
             if (!item) {
                 throw new Error('item is null');
             }
@@ -36,8 +37,8 @@ function getRelatedItems(currentSchema, schemas) {
                 logicalName: s.logicalName,
                 label: s.label,
                 localizedLabels: s.localizedLabels,
-                pluralLabel: s.pluralLabel,
-                localizedPluralLabels: s.localizedPluralLabels,
+                pluralLabel: (_a = item.attribute.relatedLabel) !== null && _a !== void 0 ? _a : s.pluralLabel,
+                localizedPluralLabels: (_b = item.attribute.localizedRelatedLabel) !== null && _b !== void 0 ? _b : s.localizedPluralLabels,
                 attributeName: item.key,
             };
         });
@@ -70,6 +71,7 @@ function RelatedViewSelector(props) {
                         outlineStyle: 'none',
                         textTransform: 'none',
                         columnGap: react_components_1.tokens.spacingHorizontalSNudge,
+                        color: react_components_1.tokens.colorNeutralForeground2,
                     }, children: [strings.related, (0, jsx_runtime_1.jsx)(icons_1.Icons.ChevronDown, { size: 16 })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.MenuPopover, { children: (0, jsx_runtime_1.jsx)(react_components_1.MenuList, { children: data.map((item) => {
                         var _a, _b;
                         return ((0, jsx_runtime_1.jsx)(react_components_1.MenuItem, { onClick: () => props.onSelect(item), children: (_b = (_a = item.localizedPluralLabels) === null || _a === void 0 ? void 0 : _a[language]) !== null && _b !== void 0 ? _b : item.pluralLabel }, item.key));

package/PageEntityForm/SectionContainer.js

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionContainer = SectionContainer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const builders_1 = require("@headless-adminapp/app/builders");
 const hooks_1 = require("@headless-adminapp/app/dataform/hooks");
 const locale_1 = require("@headless-adminapp/app/locale");
+const utils_1 = require("@headless-adminapp/app/locale/utils");
 const react_hook_form_1 = require("react-hook-form");
+const componentStore_1 = require("../componentStore");
 const SectionControl_1 = require("../DataForm/SectionControl");
 const layout_1 = require("../form/layout");
 const StandardControl_1 = require("./StandardControl");
@@ -16,11 +17,18 @@ function SectionContainer({ section }) {
     const recordId = (0, hooks_1.useRecordId)();
     const readonly = (0, hooks_1.useFormIsReadonly)();
     const { language } = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, builders_1.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: section.controls.map((control, index) => {
+    return ((0, jsx_runtime_1.jsx)(layout_1.FormSection, { title: (0, utils_1.localizedLabel)(language, section), columnCount: section.columnCount, labelPosition: section.labelPosition, noPadding: section.noPadding, hideLabel: section.hideLabel, children: section.controls.map((control, index) => {
             var _a;
             switch (control.type) {
-                case 'standard':
+                case 'standard': {
                     const attribute = schema.attributes[control.attributeName];
+                    let Control = StandardControl_1.StandardControl;
+                    if (control.component) {
+                        const OverrideControl = componentStore_1.componentStore.getComponent(control.component);
+                        if (OverrideControl) {
+                            Control = OverrideControl;
+                        }
+                    }
                     return ((0, jsx_runtime_1.jsx)("div", { style: {
                             gridColumn: control.span
                                 ? `var(--section-item-span-${control.span})`
@@ -33,8 +41,14 @@ function SectionContainer({ section }) {
                                     ? (_b = fieldState.error) === null || _b === void 0 ? void 0 : _b.message
                                     : '';
                                 const label = (_g = (_f = (_d = (_c = control.localizedLabels) === null || _c === void 0 ? void 0 : _c[language]) !== null && _d !== void 0 ? _d : (_e = attribute.localizedLabels) === null || _e === void 0 ? void 0 : _e[language]) !== null && _f !== void 0 ? _f : control.label) !== null && _g !== void 0 ? _g : attribute.label;
-                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true }) }));
+                                return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: label, labelPosition: section.labelPosition, required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(Control, { attribute: attribute, name: control.attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, disabled: readonly, label: label, placeholder: label, allowNavigation: true, allowNewRecord: true, fileServiceContext: {
+                                            type: 'entity-form',
+                                            recordId,
+                                            attributeName: control.attributeName,
+                                            logicalName: schema.logicalName,
+                                        } }) }));
                             } }, control.attributeName) }, control.attributeName));
+                }
                 case 'editablegrid': {
                     return null;
                 }

package/PageEntityForm/StandardControl.d.ts

@@ -1,6 +1,6 @@
 import type { Attribute } from '@headless-adminapp/core/attributes';
 import { FC } from 'react';
-interface StandardControlProps {
+export interface StandardControlProps {
     attribute: Attribute;
     label?: string;
     isError: boolean;
@@ -10,6 +10,7 @@ interface StandardControlProps {
     placeholder?: string;
     onChange: (value: any) => void;
     onBlur: () => void;
+    fileServiceContext?: Record<string, unknown>;
     disabled?: boolean;
     borderOnFocusOnly?: boolean;
     hideLabel?: boolean;
@@ -21,4 +22,3 @@ interface StandardControlProps {
     allowNewRecord?: boolean;
 }
 export declare const StandardControl: FC<StandardControlProps>;
-export {};

package/PageEntityForm/StandardControl.js

@@ -8,6 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const transport_1 = require("@headless-adminapp/app/transport");
 const react_1 = require("react");
+const componentStore_1 = require("../componentStore");
+const AttachmentControl_1 = require("../form/controls/AttachmentControl");
+const AttachmentsControl_1 = require("../form/controls/AttachmentsControl");
 const CurrencyControl_1 = require("../form/controls/CurrencyControl");
 const DateControl_1 = require("../form/controls/DateControl");
 const DateRangeControl_1 = require("../form/controls/DateRangeControl");
@@ -17,22 +20,24 @@ const LookupControl_1 = require("../form/controls/LookupControl");
 const MultiSelectControl_1 = __importDefault(require("../form/controls/MultiSelectControl"));
 const MultiSelectLookupControl_1 = require("../form/controls/MultiSelectLookupControl");
 const NumberControl_1 = require("../form/controls/NumberControl");
+const RichTextControl_1 = require("../form/controls/RichTextControl");
 const SelectControl_1 = __importDefault(require("../form/controls/SelectControl"));
 const SwitchControl_1 = require("../form/controls/SwitchControl");
 const TelephoneControl_1 = require("../form/controls/TelephoneControl");
 const TextAreaControl_1 = require("../form/controls/TextAreaControl");
 const TextControl_1 = require("../form/controls/TextControl");
-const StandardControl = ({ attribute, label: _label, isError, 
-// errorMessage,
-name, value, onBlur, onChange, 
-// dataService,
-// fileService,
-disabled, borderOnFocusOnly, placeholder: _placeholder, 
-// hideLabel,
-hidePlaceholder, readOnly, 
-// quickViewControl,
-allowNavigation, allowNewRecord, }) => {
-    var _a;
+const StandardControl = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    const { attribute, label: _label, isError, 
+    // errorMessage,
+    name, value, onBlur, onChange, 
+    // dataService,
+    // fileService,
+    disabled, borderOnFocusOnly, placeholder: _placeholder, 
+    // hideLabel,
+    hidePlaceholder, readOnly, 
+    // quickViewControl,
+    allowNavigation, allowNewRecord, } = props;
     const isDisabled = attribute.readonly || disabled;
     // const label = hideLabel ? undefined : _label ?? attribute.label;
     const placeholder = hidePlaceholder
@@ -40,6 +45,7 @@ allowNavigation, allowNewRecord, }) => {
         : (_a = _placeholder !== null && _placeholder !== void 0 ? _placeholder : _label) !== null && _a !== void 0 ? _a : attribute.label;
     // const required = quickViewControl ? false : attribute.required;
     const dataService = (0, transport_1.useDataService)();
+    const fileService = (0, transport_1.useFileService)();
     const { schemaStore, experienceStore } = (0, hooks_1.useMetadata)();
     // const { openQuickCreate } = useQuickCreateForm();
     switch (attribute.type) {
@@ -55,21 +61,37 @@ allowNavigation, allowNewRecord, }) => {
                 readOnly,
             };
             switch (attribute.format) {
-                case 'text':
-                    return ((0, jsx_runtime_1.jsx)(TextControl_1.TextControl, Object.assign({}, controlProps, { textTransform: attribute.textTransform })));
-                case 'email':
-                    return (0, jsx_runtime_1.jsx)(EmailControl_1.EmailControl, Object.assign({}, controlProps));
-                case 'phone':
-                    return (0, jsx_runtime_1.jsx)(TelephoneControl_1.TelephoneControl, Object.assign({}, controlProps));
-                case 'url':
-                    return (0, jsx_runtime_1.jsx)(TextControl_1.TextControl, Object.assign({}, controlProps));
-                case 'textarea':
-                    return (0, jsx_runtime_1.jsx)(TextAreaControl_1.TextAreaControl, Object.assign({}, controlProps));
+                case 'text': {
+                    const Control = (_b = componentStore_1.componentStore.getComponent('Form.TextControl')) !== null && _b !== void 0 ? _b : TextControl_1.TextControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps, { textTransform: attribute.textTransform })));
+                }
+                case 'email': {
+                    const Control = (_c = componentStore_1.componentStore.getComponent('Form.EmailControl')) !== null && _c !== void 0 ? _c : EmailControl_1.EmailControl;
+                    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
+                }
+                case 'phone': {
+                    const Control = (_d = componentStore_1.componentStore.getComponent('Form.TelephoneControl')) !== null && _d !== void 0 ? _d : TelephoneControl_1.TelephoneControl;
+                    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
+                }
+                case 'url': {
+                    const Control = (_e = componentStore_1.componentStore.getComponent('Form.UrlControl')) !== null && _e !== void 0 ? _e : TextControl_1.TextControl;
+                    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
+                }
+                case 'textarea': {
+                    const Control = (_f = componentStore_1.componentStore.getComponent('Form.TextAreaControl')) !== null && _f !== void 0 ? _f : TextAreaControl_1.TextAreaControl;
+                    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
+                }
+                case 'richtext': {
+                    const Control = (_g = componentStore_1.componentStore.getComponent('Form.RichTextControl')) !== null && _g !== void 0 ? _g : RichTextControl_1.RichTextControl;
+                    return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
+                }
                 default:
                     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
             }
-        case 'number':
-            return ((0, jsx_runtime_1.jsx)(NumberControl_1.NumberControl, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+        case 'number': {
+            const Control = (_h = componentStore_1.componentStore.getComponent('Form.NumberControl')) !== null && _h !== void 0 ? _h : NumberControl_1.NumberControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+        }
         case 'date': {
             const controlProps = {
                 name,
@@ -82,10 +104,12 @@ allowNavigation, allowNewRecord, }) => {
                 readOnly,
             };
             if (attribute.format === 'datetime') {
-                return (0, jsx_runtime_1.jsx)(DateTimeControl_1.DateTimeControl, Object.assign({}, controlProps));
+                const Control = (_j = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _j !== void 0 ? _j : DateTimeControl_1.DateTimeControl;
+                return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
             else {
-                return (0, jsx_runtime_1.jsx)(DateControl_1.DateControl, Object.assign({}, controlProps));
+                const Control = (_k = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _k !== void 0 ? _k : DateControl_1.DateControl;
+                return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
         }
         case 'daterange': {
@@ -99,105 +123,40 @@ allowNavigation, allowNewRecord, }) => {
                 disabled: isDisabled,
                 readOnly,
             };
-            return (0, jsx_runtime_1.jsx)(DateRangeControl_1.DateRangeControl, Object.assign({}, controlProps));
+            const Control = (_l = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _l !== void 0 ? _l : DateRangeControl_1.DateRangeControl;
+            return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
         }
         case 'money': {
-            return ((0, jsx_runtime_1.jsx)(CurrencyControl_1.CurrencyControl, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            const Control = (_m = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _m !== void 0 ? _m : CurrencyControl_1.CurrencyControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'lookup': {
-            //   const experienceSchema = getExperienceSchema(attribute.entity);
-            //   const routes = getExperienceRoutes(attribute.entity);
-            //   const path = routes?.create?.();
-            //   let createButtonProps:
-            //     | {
-            //         label: string;
-            //         onClick: () => void;
-            //       }
-            //     | undefined;
-            //   if (allowQuickCreate && experienceSchema.defaultQuickCreateForm) {
-            //     createButtonProps = {
-            //       label: 'New record',
-            //       onClick: async () => {
-            //         try {
-            //           const result = await openQuickCreate({
-            //             logicalName: attribute.entity,
-            //           });
-            //           if (result) {
-            //             onChange(result);
-            //           }
-            //         } catch (error) {
-            //           console.error(error);
-            //         }
-            //       },
-            //     };
-            //   } else if (path) {
-            //     createButtonProps = {
-            //       label: 'New record',
-            //       onClick: () => {
-            //         router.push(path);
-            //       },
-            //     };
-            //   }
-            //   return (
-            //     <FormControl
-            //       type="lookup"
-            //       name={name}
-            //       label={label}
-            //       placeholder={placeholder}
-            //       required={required}
-            //       value={value}
-            //       onChange={onChange}
-            //       onBlur={onBlur}
-            //       error={isError}
-            //       helperText={errorMessage}
-            //       disabled={isDisabled}
-            //       borderOnFocusOnly={borderOnFocusOnly}
-            //       readOnly={readOnly}
-            //       createButton={createButtonProps}
-            //       openRecord={
-            //         routes?.edit
-            //           ? (id) => {
-            //               router.push(routes.edit!(id));
-            //             }
-            //           : undefined
-            //       }
-            //       async
-            //       dataResolver={async (options) => {
-            //         const lookupSchema = getSchema(attribute.entity);
-            //         const data = await dataService.retriveRecords({
-            //           logicalName: attribute.entity,
-            //           search: options?.search ?? '',
-            //           columnFilters: {},
-            //           pagination: {
-            //             pageIndex: 0,
-            //             rowsPerPage: 10,
-            //             sortBy: 'createdAt',
-            //             sortOrder: 'desc',
-            //           },
-            //           viewFilter: null,
-            //           columns: ['_id', lookupSchema.primaryAttribute ?? 'name'],
-            //           limit: options?.limit ?? 10,
-            //         });
-            //         return data.records.map((x: any) => ({
-            //           _id: x._id,
-            //           name: x[lookupSchema.primaryAttribute ?? 'name'],
-            //         }));
-            //       }}
-            //     />
-            //   );
-            return ((0, jsx_runtime_1.jsx)(LookupControl_1.LookupControl, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
+            const Control = (_o = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _o !== void 0 ? _o : LookupControl_1.LookupControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'lookups': {
-            return ((0, jsx_runtime_1.jsx)(MultiSelectLookupControl_1.MultiSelectLookupControl, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
+            const Control = (_p = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _p !== void 0 ? _p : MultiSelectLookupControl_1.MultiSelectLookupControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, placeholder: placeholder, disabled: isDisabled, dataService: dataService, schema: schemaStore.getSchema(attribute.entity), experienceStore: experienceStore, allowNavigation: allowNavigation, allowNewRecord: allowNewRecord }));
         }
         case 'boolean': {
-            return ((0, jsx_runtime_1.jsx)(SwitchControl_1.SwitchControl, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+            const Control = (_q = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _q !== void 0 ? _q : SwitchControl_1.SwitchControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
         }
         case 'choice': {
-            return ((0, jsx_runtime_1.jsx)(SelectControl_1.default, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            const Control = (_r = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _r !== void 0 ? _r : SelectControl_1.default;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         case 'choices': {
-            return ((0, jsx_runtime_1.jsx)(MultiSelectControl_1.default, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+            const Control = (_s = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _s !== void 0 ? _s : MultiSelectControl_1.default;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, options: attribute.options, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
+        }
+        case 'attachment': {
+            const Control = (_t = componentStore_1.componentStore.getComponent('Form.AttachmentControl')) !== null && _t !== void 0 ? _t : AttachmentControl_1.AttachmentControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { fileService: fileService, format: attribute.format, location: attribute.location, name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly, fileServiceContext: props.fileServiceContext }));
+        }
+        case 'attachments': {
+            const Control = (_u = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _u !== void 0 ? _u : AttachmentsControl_1.AttachmentsControl;
+            return ((0, jsx_runtime_1.jsx)(Control, { name: name, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, placeholder: placeholder, borderOnFocusOnly: borderOnFocusOnly, readOnly: readOnly }));
         }
         // case 'attachment': {
         //   return (
@@ -222,6 +181,10 @@ allowNavigation, allowNewRecord, }) => {
         //   );
         // }
     }
+    const FallBackControl = componentStore_1.componentStore.getComponent('StandardControl.FallBack');
+    if (FallBackControl) {
+        return (0, jsx_runtime_1.jsx)(FallBackControl, Object.assign({}, props));
+    }
     return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
 };
 exports.StandardControl = StandardControl;

package/PageEntityForm/SubgridControl.js

@@ -62,5 +62,5 @@ function SubgridControl(props) {
         }
         return brokenContent;
     }
-    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: props.associated ? true : false, extraFilter: extraFilter, allowViewSelection: (_a = props.allowViewSelection) !== null && _a !== void 0 ? _a : false, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer_1.FormSubgridContainer, {}) }));
+    return ((0, jsx_runtime_1.jsx)(DataGridProvider_1.DataGridProvider, { schema: schema, view: view, views: viewLookup, onChangeView: setViewId, commands: (props.associated ? subgridCommands : commands), isSubGrid: props.associated ? true : false, associated: props.associated, extraFilter: extraFilter, allowViewSelection: (_a = props.allowViewSelection) !== null && _a !== void 0 ? _a : false, children: (0, jsx_runtime_1.jsx)(FormSubgridContainer_1.FormSubgridContainer, {}) }));
 }

package/componentStore.d.ts

@@ -0,0 +1,2 @@
+import { ComponentStore } from '@headless-adminapp/app/store';
+export declare const componentStore: ComponentStore;

package/componentStore.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.componentStore = void 0;
+const store_1 = require("@headless-adminapp/app/store");
+exports.componentStore = new store_1.ComponentStore();

package/components/PageLogin.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLogin = PageLogin;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable @next/next/no-img-element */
 const react_components_1 = require("@fluentui/react-components");
 const LoginForm_1 = require("./LoginForm");
 function PageLogin(props) {

package/form/FormControl.js

@@ -86,7 +86,7 @@ function randomUUID() {
     return Math.random().toString(36).substring(2, 15);
 }
 function FormControl(props) {
-    const { label, id, onChange, error, helperText, required } = props;
+    const { label, id, onChange } = props;
     const _id = (0, react_1.useMemo)(() => id || randomUUID(), [id]);
     const noop = (0, react_1.useCallback)(() => { }, []);
     return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Label, { style: { width: 160, marginTop: 4 }, children: label }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: 1, flexDirection: 'column' }, children: (0, jsx_runtime_1.jsx)(Control, Object.assign({ id: _id, onChange: onChange || noop }, props)) })] }));