@headless-adminapp/fluent 0.0.17-alpha.5 → 0.0.17-alpha.52

package/PageEntityForm/RelatedViewSelector.js

@@ -10,7 +10,36 @@ const utils_1 = require("@headless-adminapp/core/attributes/utils");
 const icons_1 = require("@headless-adminapp/icons");
 const react_1 = require("react");
 const PageEntityFormStringContext_1 = require("./PageEntityFormStringContext");
-function getRelatedItems(currentSchema, schemas) {
+function getRelatedItems(currentSchema, schemas, relatedItems) {
+    if (relatedItems === null) {
+        return [];
+    }
+    if (relatedItems) {
+        return relatedItems.map((item) => {
+            var _a, _b;
+            const schema = schemas[item.logicalName];
+            if (!schema) {
+                throw new Error(`Schema not found: ${item.logicalName}`);
+            }
+            if (!schema.attributes[item.attributeName]) {
+                throw new Error(`Attribute not found: ${item.logicalName}.${item.attributeName}`);
+            }
+            const attribute = schema.attributes[item.attributeName];
+            if (!(0, utils_1.isLookupAttribute)(attribute)) {
+                throw new Error(`Attribute is not a lookup: ${item.logicalName}.${item.attributeName}`);
+            }
+            if (attribute.entity !== currentSchema.logicalName) {
+                throw new Error(`Attribute entity does not match: ${item.logicalName}.${item.attributeName}`);
+            }
+            return {
+                key: `${schema.logicalName}.${item.attributeName}`,
+                logicalName: schema.logicalName,
+                attributeName: item.attributeName,
+                pluralLabel: (_a = item.pluralLabel) !== null && _a !== void 0 ? _a : schema.pluralLabel,
+                localizedPluralLabels: (_b = item.localizedPluralLabels) !== null && _b !== void 0 ? _b : schema.localizedPluralLabels,
+            };
+        });
+    }
     return Object.values(schemas)
         .map((s) => {
         return Object.entries(s.attributes)
@@ -28,17 +57,16 @@ function getRelatedItems(currentSchema, schemas) {
         })
             .filter(Boolean)
             .map((item) => {
+            var _a, _b;
             if (!item) {
                 throw new Error('item is null');
             }
             return {
                 key: `${s.logicalName}.${item.key}`,
                 logicalName: s.logicalName,
-                label: s.label,
-                localizedLabels: s.localizedLabels,
-                pluralLabel: s.pluralLabel,
-                localizedPluralLabels: s.localizedPluralLabels,
                 attributeName: item.key,
+                pluralLabel: (_a = item.attribute.relatedLabel) !== null && _a !== void 0 ? _a : s.pluralLabel,
+                localizedPluralLabels: (_b = item.attribute.localizedRelatedLabel) !== null && _b !== void 0 ? _b : s.localizedPluralLabels,
             };
         });
     })
@@ -46,10 +74,11 @@ function getRelatedItems(currentSchema, schemas) {
 }
 function RelatedViewSelector(props) {
     const schema = (0, hooks_1.useDataFormSchema)();
+    const formConfig = (0, hooks_1.useSelectedForm)();
     const { schemas } = (0, hooks_2.useMetadata)();
     const strings = (0, PageEntityFormStringContext_1.usePageEntityFormStrings)();
     const { language } = (0, locale_1.useLocale)();
-    const data = (0, react_1.useMemo)(() => getRelatedItems(schema, schemas), [schema, schemas]);
+    const data = (0, react_1.useMemo)(() => getRelatedItems(schema, schemas, formConfig.experience.relatedItems), [formConfig.experience.relatedItems, schema, schemas]);
     if (!data.length) {
         return null;
     }
@@ -70,6 +99,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,15 +41,25 @@ 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;
                 }
                 case 'quickview':
                     return null;
                 case 'subgrid':
-                    return ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, associated: !control.associatedAttribute
+                    let ContainerComponent = null;
+                    if (control.component) {
+                        ContainerComponent = componentStore_1.componentStore.getComponent(control.component);
+                    }
+                    return ((0, jsx_runtime_1.jsx)(SubgridControl_1.SubgridControl, { logicalName: control.logicalName, allowViewSelection: control.allowViewSelection, viewId: control.viewId, availableViewIds: control.availableViewIds, ContainerComponent: ContainerComponent, associated: !control.associatedAttribute
                             ? false
                             : {
                                 logicalName: schema.logicalName,

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,31 +8,39 @@ 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");
 const DateTimeControl_1 = require("../form/controls/DateTimeControl");
+const DecimalControl_1 = require("../form/controls/DecimalControl");
+const DurationControl_1 = require("../form/controls/DurationControl");
 const EmailControl_1 = require("../form/controls/EmailControl");
+const IntegerControl_1 = require("../form/controls/IntegerControl");
 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 UrlControl_1 = require("../form/controls/UrlControl");
+const StandardControl = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    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 +48,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 +64,52 @@ 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 : UrlControl_1.UrlControl;
+                    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': {
+            switch (attribute.format) {
+                case 'decimal': {
+                    const Control = (_h = componentStore_1.componentStore.getComponent('Form.DecimalControl')) !== null && _h !== void 0 ? _h : DecimalControl_1.DecimalControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly, decimalPlaces: attribute.decimalPlaces }));
+                }
+                case 'integer': {
+                    const Control = (_j = componentStore_1.componentStore.getComponent('Form.IntegerControl')) !== null && _j !== void 0 ? _j : IntegerControl_1.IntegerControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                }
+                case 'duration': {
+                    const Control = (_k = componentStore_1.componentStore.getComponent('Form.DurationControl')) !== null && _k !== void 0 ? _k : DurationControl_1.DurationControl;
+                    return ((0, jsx_runtime_1.jsx)(Control, { name: name, placeholder: placeholder, value: value, onChange: onChange, onBlur: onBlur, error: isError, disabled: isDisabled, readOnly: readOnly }));
+                }
+                default: {
+                    return (0, jsx_runtime_1.jsx)(react_1.Fragment, {});
+                }
+            }
+        }
         case 'date': {
             const controlProps = {
                 name,
@@ -82,10 +122,12 @@ allowNavigation, allowNewRecord, }) => {
                 readOnly,
             };
             if (attribute.format === 'datetime') {
-                return (0, jsx_runtime_1.jsx)(DateTimeControl_1.DateTimeControl, Object.assign({}, controlProps));
+                const Control = (_l = componentStore_1.componentStore.getComponent('Form.DateTimeControl')) !== null && _l !== void 0 ? _l : 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 = (_m = componentStore_1.componentStore.getComponent('Form.DateControl')) !== null && _m !== void 0 ? _m : DateControl_1.DateControl;
+                return (0, jsx_runtime_1.jsx)(Control, Object.assign({}, controlProps));
             }
         }
         case 'daterange': {
@@ -99,105 +141,40 @@ allowNavigation, allowNewRecord, }) => {
                 disabled: isDisabled,
                 readOnly,
             };
-            return (0, jsx_runtime_1.jsx)(DateRangeControl_1.DateRangeControl, Object.assign({}, controlProps));
+            const Control = (_o = componentStore_1.componentStore.getComponent('Form.DateRangeControl')) !== null && _o !== void 0 ? _o : 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 = (_p = componentStore_1.componentStore.getComponent('Form.CurrencyControl')) !== null && _p !== void 0 ? _p : 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 = (_q = componentStore_1.componentStore.getComponent('Form.LookupControl')) !== null && _q !== void 0 ? _q : 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 = (_r = componentStore_1.componentStore.getComponent('Form.MultiSelectLookupControl')) !== null && _r !== void 0 ? _r : 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 = (_s = componentStore_1.componentStore.getComponent('Form.SwitchControl')) !== null && _s !== void 0 ? _s : 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 = (_t = componentStore_1.componentStore.getComponent('Form.SelectControl')) !== null && _t !== void 0 ? _t : 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 = (_u = componentStore_1.componentStore.getComponent('Form.MultiSelectControl')) !== null && _u !== void 0 ? _u : 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 = (_v = componentStore_1.componentStore.getComponent('Form.AttachmentControl')) !== null && _v !== void 0 ? _v : 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 = (_w = componentStore_1.componentStore.getComponent('Form.AttachmentsControl')) !== null && _w !== void 0 ? _w : 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 +199,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.d.ts

@@ -8,6 +8,7 @@ interface SubgridControlProps {
         id: string;
         refAttributeName: string;
     };
+    ContainerComponent?: React.ComponentType<any> | null;
 }
 export declare function SubgridControl(props: SubgridControlProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/PageEntityForm/SubgridControl.js

@@ -8,7 +8,7 @@ const hooks_1 = require("@headless-adminapp/app/metadata/hooks");
 const react_1 = require("react");
 const FormSubgridContainer_1 = require("../PageEntityView/FormSubgridContainer");
 function SubgridControl(props) {
-    var _a;
+    var _a, _b;
     const schema = (0, hooks_1.useSchema)(props.logicalName);
     const [viewId, setViewId] = (0, react_1.useState)(props.viewId);
     const { view, isLoadingView } = (0, hooks_1.useExperienceView)(props.logicalName, viewId, !!props.associated, props.availableViewIds);
@@ -62,5 +62,6 @@ 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, {}) }));
+    const ContainerComponent = (_a = props.ContainerComponent) !== null && _a !== void 0 ? _a : 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, associated: props.associated, extraFilter: extraFilter, allowViewSelection: (_b = props.allowViewSelection) !== null && _b !== void 0 ? _b : false, children: (0, jsx_runtime_1.jsx)(ContainerComponent, {}) }));
 }

package/PageEntityView/FormSubgridContainer.js

@@ -35,11 +35,14 @@ const FormSubgridContainer = ({ hideCommandBar, hideSearch, }) => {
                     }, children: (0, jsx_runtime_1.jsx)(FormSubgridViewSelector_1.FormSubgridViewSelector, {}) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } }) }), (!hideCommandBar || !hideSearch) && ((0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         flexDirection: 'row',
-                        gap: 40,
+                        gap: 10,
                         overflow: 'hidden',
                         width: '100%',
                         paddingBlock: 4,
-                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: !hideCommandBar && (0, jsx_runtime_1.jsx)(FormSubgridCommandContainer_1.FormSubgridCommandContainer, {}) }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }), !hideSearch && ((0, jsx_runtime_1.jsx)("div", { style: {
+                    }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                flex: 1,
+                                minWidth: 0,
+                            }, children: !hideCommandBar && (0, jsx_runtime_1.jsx)(FormSubgridCommandContainer_1.FormSubgridCommandContainer, {}) }), !hideSearch && ((0, jsx_runtime_1.jsx)("div", { style: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 justifyContent: 'end',

package/PageEntityView/PageEntityView.js

@@ -3,13 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageEntityView = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const datagrid_1 = require("@headless-adminapp/app/datagrid");
+const hooks_1 = require("@headless-adminapp/app/hooks");
 const PageEntityViewProvider_1 = require("@headless-adminapp/app/providers/PageEntityViewProvider");
 const icons_1 = require("@headless-adminapp/icons");
 const PageBroken_1 = require("../components/PageBroken");
 const PageLoading_1 = require("../components/PageLoading");
 const PageEntityViewDesktopContainer_1 = require("./PageEntityViewDesktopContainer");
+const PageEntityViewMobileContainer_1 = require("./PageEntityViewMobileContainer");
 const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
     const result = (0, datagrid_1.useLoadMainGridPage)(logicalName, viewId);
+    const isMobile = (0, hooks_1.useIsMobile)();
     if (result.loading) {
         return (0, jsx_runtime_1.jsx)(PageLoading_1.PageLoading, {});
     }
@@ -17,6 +20,6 @@ const PageEntityView = ({ logicalName, viewId, onChangeView, }) => {
         return ((0, jsx_runtime_1.jsx)(PageBroken_1.PageBroken, { Icon: icons_1.Icons.Error, title: result.title, message: result.message }));
     }
     const { schema, commands, viewLookup, view } = result;
-    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {}) }));
+    return ((0, jsx_runtime_1.jsx)(PageEntityViewProvider_1.PageEntityViewProvider, { schema: schema, view: view, availableViews: viewLookup, commands: commands, onChangeView: onChangeView, children: isMobile ? ((0, jsx_runtime_1.jsx)(PageEntityViewMobileContainer_1.PageEntityViewMobileContainer, {})) : ((0, jsx_runtime_1.jsx)(PageEntityViewDesktopContainer_1.PageEntityViewDesktopContainer, {})) }));
 };
 exports.PageEntityView = PageEntityView;

package/PageEntityView/PageEntityViewDesktopFrame.js

@@ -25,6 +25,7 @@ const PageEntityViewDesktopFrame = ({ commandBar, header, content, footer }) =>
                         background: react_components_1.tokens.colorNeutralBackground1,
                         display: 'flex',
                         // overflow: 'hidden',
+                        minHeight: 40,
                     }, children: commandBar }), (0, jsx_runtime_1.jsxs)("div", { style: {
                         flex: 1,
                         display: 'flex',

package/PageEntityView/PageEntityViewMobileContainer.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const PageEntityViewMobileContainer: FC;

package/PageEntityView/PageEntityViewMobileContainer.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageEntityViewMobileContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CommandContainer_1 = require("../DataGrid/CommandContainer");
+const GridHeaderMobile_1 = require("../DataGrid/GridHeaderMobile");
+const GridListContainer_1 = require("../DataGrid/GridListContainer");
+const GridPaginationContainer_1 = require("../DataGrid/GridPaginationContainer");
+const PageEntityViewDesktopFrame_1 = require("./PageEntityViewDesktopFrame");
+const PageEntityViewMobileContainer = () => {
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (0, jsx_runtime_1.jsx)(PageEntityViewDesktopFrame_1.PageEntityViewDesktopFrame, { commandBar: (0, jsx_runtime_1.jsx)(CommandContainer_1.CommandContainer, {}), header: (0, jsx_runtime_1.jsx)(GridHeaderMobile_1.GridHeaderMobile, {}), content: (0, jsx_runtime_1.jsx)(GridListContainer_1.GridListContainer, {}), footer: (0, jsx_runtime_1.jsx)(GridPaginationContainer_1.GridPaginationContainer, {}) }) }));
+};
+exports.PageEntityViewMobileContainer = PageEntityViewMobileContainer;

package/PageEntityView/PageEntityViewStringContext.d.ts

@@ -17,6 +17,7 @@ export interface PageEntityViewStringSet {
     filter: string;
     clearFilter: string;
     filterBy: string;
+    noRecordsFound: string;
 }
 export declare const defaultPageEntityViewStrings: PageEntityViewStringSet;
 export declare const PageEntityViewStringContext: import("react").Context<PageEntityViewStringSet>;

package/PageEntityView/PageEntityViewStringContext.js

@@ -22,6 +22,7 @@ exports.defaultPageEntityViewStrings = {
     filter: 'Filter',
     sortByDescending: 'Sort by descending',
     filterBy: 'Filter by',
+    noRecordsFound: "We didn't find anything to show here",
 };
 exports.PageEntityViewStringContext = (0, react_1.createContext)(exports.defaultPageEntityViewStrings);
 function usePageEntityViewStrings() {

package/PageInsights/PageInsights.d.ts

@@ -0,0 +1,9 @@
+import { InsightExpereince, InsightLookup } from '@headless-adminapp/core/experience/insights';
+export declare function createInsightLookup(insights: InsightExpereince[]): InsightLookup[];
+interface PageInsightsProps {
+    insights: InsightExpereince[];
+    insightId: string;
+    onChangeInsight: (id: string) => void;
+}
+export declare function PageInsights({ insightId, insights, onChangeInsight, }: PageInsightsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/PageInsights/PageInsights.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInsightLookup = createInsightLookup;
+exports.PageInsights = PageInsights;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const InsightsProvider_1 = require("@headless-adminapp/app/insights/InsightsProvider");
+const react_1 = require("react");
+const InsightsContainer_1 = require("../Insights/InsightsContainer");
+function createInsightLookup(insights) {
+    return insights.map((insight) => ({
+        id: insight.id,
+        title: insight.title,
+        subtitle: insight.subtitle,
+    }));
+}
+function PageInsights({ insightId, insights, onChangeInsight, }) {
+    const insightExpereince = (0, react_1.useMemo)(() => {
+        return insights.find((insight) => insight.id === insightId);
+    }, [insightId, insights]);
+    const insightLookups = (0, react_1.useMemo)(() => createInsightLookup(insights), [insights]);
+    if (!insightExpereince) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(InsightsProvider_1.InsightsProvider, { experience: insightExpereince, insightLookup: insightLookups, onInsightSelect: onChangeInsight, children: (0, jsx_runtime_1.jsx)(InsightsContainer_1.InsightsContainer, {}) }));
+}

package/PageInsights/index.d.ts

@@ -0,0 +1 @@
+export { PageInsights, createInsightLookup } from './PageInsights';

package/PageInsights/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInsightLookup = exports.PageInsights = void 0;
+var PageInsights_1 = require("./PageInsights");
+Object.defineProperty(exports, "PageInsights", { enumerable: true, get: function () { return PageInsights_1.PageInsights; } });
+Object.defineProperty(exports, "createInsightLookup", { enumerable: true, get: function () { return PageInsights_1.createInsightLookup; } });

package/componentStore.d.ts

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