@limetech/lime-elements 40.17.0 → 40.18.0

package/dist/cjs/limel-form-header.cjs.entry.js

@@ -32,7 +32,7 @@ const FormHeader = class {
         this.headingLevel = 1;
     }
     render() {
-        return (index.h(index.Host, { key: 'bfb0a90340ac54c7f083df2989fd8c2acb97308f' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+        return (index.h(index.Host, { key: '0d8282124405665c18b93aa753dd40cf616a6e6b' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
     }
     renderHeading() {
         if (!this.heading) {

package/dist/cjs/limel-form.cjs.entry.js

@@ -2,6 +2,7 @@
 
 var index = require('./index-BlsqxTB1.js');
 var _commonjsHelpers = require('./_commonjsHelpers-CFO10eej.js');
+var headingLevel = require('./heading-level-BxCuIKkm.js');
 var _baseIteratee = require('./_baseIteratee-Cistiy8H.js');
 var isEmpty = require('./isEmpty-BsdhcVKT.js');
 var helpProps = require('./help-props-Ds30nnt1.js');
@@ -44023,16 +44024,6 @@ function isType(input, type) {
     return input === type;
 }
 
-/**
- * @param level - any value
- * @returns whether the value is a heading level, from `1` to `6`
- */
-function isHeadingLevel(level) {
-    return (typeof level === 'number' &&
-        Number.isSafeInteger(level) &&
-        level >= 1 &&
-        level <= 6);
-}
 /**
  * The heading level that a title at the current depth in the form gets.
  */
@@ -44398,6 +44389,7 @@ const ArrayItemErrorsContext = reactExports.createContext(null);
 
 const ObjectFieldTemplate = (props) => {
     const arrayContext = reactExports.useContext(ArrayFieldContext);
+    const headingLevel = reactExports.useContext(HeadingLevelContext);
     const id = props.fieldPathId.$id;
     if (arrayContext && id !== 'root') {
         return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
@@ -44405,13 +44397,13 @@ const ObjectFieldTemplate = (props) => {
     if (id === 'root' || !isCollapsible(props.schema)) {
         return renderFieldWithTitle(props);
     }
-    return renderCollapsibleField(props);
+    return renderCollapsibleField(props, headingLevel);
 };
 function renderFieldWithTitle(props) {
     var _a;
     return renderSection(props.title, props.description, (_a = props.schema.lime) === null || _a === void 0 ? void 0 : _a.help, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
-function renderCollapsibleField(props) {
+function renderCollapsibleField(props, headingLevel) {
     var _a;
     const defaultOpen = !isCollapsed(props.schema);
     const helpElement = getHelpComponent(props.schema, {
@@ -44421,10 +44413,11 @@ function renderCollapsibleField(props) {
     const invalid = revealErrors && hasNestedErrors(props.errorSchema);
     return React.createElement('limel-collapsible-section', {
         header: props.title,
+        headingLevel: headingLevel,
         id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
         'is-open': defaultOpen,
         invalid: invalid,
-    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
+    }, helpElement, renderDescription(props.description), React.createElement(BelowHeading, { hasHeading: !!props.title }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String))));
 }
 function getSchemaObjectPropertyPath(schema, fieldPathId) {
     var _a, _b;
@@ -44821,10 +44814,11 @@ class CollapsibleItemTemplate extends React.Component {
         section.removeEventListener('open', this.handleOpen);
     }
     render() {
-        const { data, schema, formSchema, errorSchema, revealErrors } = this.props;
+        const { errorSchema, revealErrors } = this.props;
+        const header = getItemHeader(this.props);
         let children;
         if (this.state.isOpen) {
-            children = this.props.children;
+            children = React.createElement(BelowHeading, { hasHeading: !!header }, this.props.children);
         }
         const dragHandle = this.props.allowItemReorder
             ? React.createElement('limel-drag-handle', {
@@ -44834,7 +44828,8 @@ class CollapsibleItemTemplate extends React.Component {
             : null;
         const invalid = revealErrors === true && hasNestedErrors(errorSchema);
         return React.createElement('limel-collapsible-section', {
-            header: findTitle(data, schema, formSchema) || 'New item',
+            header: header,
+            headingLevel: this.context,
             class: 'array-item limel-form-array-item--object',
             ref: (section) => {
                 this.section = section;
@@ -44866,6 +44861,13 @@ class CollapsibleItemTemplate extends React.Component {
         event.detail.run(event);
     }
 }
+CollapsibleItemTemplate.contextType = HeadingLevelContext;
+function getItemHeader(props) {
+    const { data, schema, formSchema } = props;
+    const title = findTitle(data, schema, formSchema);
+    const text = Array.isArray(title) ? title.join(', ') : title;
+    return text ? String(text) : 'New item';
+}
 /**
  * An item counts as new while it holds nothing the user entered. Since
  * `@rjsf/core` 6.10 fills a required property with its default as soon as the
@@ -45347,6 +45349,10 @@ class SchemaField extends React.Component {
         const fallbackText = (_c = (_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.helperText;
         return getErrorText(errors, schema.description, fallbackText);
     }
+    hasHeaderFromForm(schema) {
+        var _a, _b;
+        return ((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.showHeader) === true && !this.context;
+    }
     handleCustomComponentChange(event) {
         const { schema } = this.props;
         event.stopPropagation();
@@ -45405,7 +45411,9 @@ class SchemaField extends React.Component {
         const { name, props: userDefinedComponentProps } = getCustomComponent(schema);
         verifyCustomComponentIsDefined(name);
         const component = React.createElement(name, Object.assign(Object.assign(Object.assign({}, userDefinedComponentProps), this.buildCustomComponentProps()), { onChange: this.handleCustomComponentChange }));
-        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'rjsf-field rjsf-field-custom' }), component, getHelpComponent(schema));
+        const hasHeader = this.hasHeaderFromForm(schema);
+        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'rjsf-field rjsf-field-custom' }), hasHeader &&
+            renderHeader(schema.title, schema.description, schema.lime.help), component, !hasHeader && getHelpComponent(schema));
     }
     render() {
         var _a;
@@ -46158,7 +46166,8 @@ const Form = class {
         /**
          * The level, from `1` to `6`, of the topmost headings in the form.
          * The headings of the sections inside them get one level more for each
-         * level of nesting, down to `6`.
+         * level of nesting, down to `6`. A collapsible section, and each item
+         * of a list that is shown as one, counts as a level too.
          *
          * Set it so that the headings of the form fit below the headings of
          * the page around it. For example, when the form is in a section with
@@ -46191,7 +46200,7 @@ const Form = class {
         this.warnIfHeadingLevelIsInvalid();
     }
     warnIfHeadingLevelIsInvalid() {
-        if (!isHeadingLevel(this.headingLevel)) {
+        if (!headingLevel.isHeadingLevel(this.headingLevel)) {
             console.warn(`limel-form: headingLevel must be a number from 1 to 6, but it is ${this.headingLevel}. The headings start at level 1 instead.`);
         }
     }
@@ -46221,7 +46230,7 @@ const Form = class {
         this.initialized = false;
     }
     render() {
-        return index.h("div", { key: '3f2e4aedf778c43f02ab87c32074cb3face9a55b', class: "root" });
+        return index.h("div", { key: 'e034b4254d91f376a19f0efabc434c4df24edfc7', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -46229,7 +46238,7 @@ const Form = class {
             this.root = clientExports.createRoot(rootElement);
         }
         this.root.render(React.createElement(HeadingLevelContext.Provider, {
-            value: isHeadingLevel(this.headingLevel)
+            value: headingLevel.isHeadingLevel(this.headingLevel)
                 ? this.headingLevel
                 : 1,
         }, React.createElement(Form$1, {

package/dist/collection/components/collapsible-section/collapsible-section.js

@@ -4,13 +4,8 @@ import { makeEnterClickable, removeEnterClickable, } from "../../util/make-enter
 import { createRandomString } from "../../util/random-string";
 import { getIconColor, getIconName, getIconTitle, } from "../icon/get-icon-props";
 import translate from "../../global/translations";
+import { isHeadingLevel } from "../../util/heading-level";
 const DEFAULT_HEADING_LEVEL = 2;
-function isHeadingLevel(level) {
-    return (typeof level === 'number' &&
-        Number.isSafeInteger(level) &&
-        level >= 1 &&
-        level <= 6);
-}
 /**
  * A collapsible section can be used to group related content together
  * and hide the group when not needed.
@@ -135,7 +130,7 @@ export class CollapsibleSection {
         removeEnterClickable(button);
     }
     render() {
-        return (h("section", { key: '1cb8db604bbbc8f8dbb7ca97895b3cfcf4dcd80b', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: '4e55c5b636b1d049df4d77a77a35285648096ea0' }, h("button", { key: '29eefb5499fb0f00cbdf513698acf8f357a935a6', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '16ec84abfe81a812c9d30188a714b58d363ca8a3', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: 'f28ff7d73f05dc1a6ca0dcd9948cb67107647598', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '33d0fda5501c178f92dff4a1b0361a43829fe095' }))));
+        return (h("section", { key: 'ff18dacc5e74d3bd8d16da55be3e5340922acf86', class: `${this.isOpen ? 'open' : ''}`, "aria-invalid": this.invalid, "aria-labelledby": this.header ? this.headingId : null }, h("header", { key: 'f4dba35493c7ce7344ff34d2fbaeeb769f8c87eb' }, h("button", { key: 'd3a632b4002d01774c9bb88f250be4e196340ef3', class: "open-close-toggle", onClick: this.onClick, "aria-controls": this.bodyId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-label": this.getCollapsibleSectionAriaLabel(), type: "button" }), this.renderExpandCollapseSign(), this.renderIcon(), this.renderHeading(), h("div", { key: '8d8489917d5e1bfa8de3cca8294651f448c8129c', class: "divider-line", role: "presentation" }), this.renderHeaderSlot(), this.renderActions()), h("div", { key: 'fd7e13cf3bd26815d62c3fbac0ef04ed4db364b5', class: "body", inert: !this.isOpen, "aria-hidden": String(!this.isOpen), id: this.bodyId, role: "region" }, h("slot", { key: '90ed08286c1091f5c5c5feec827729cfa65588fc' }))));
     }
     getHeadingLevel() {
         return isHeadingLevel(this.headingLevel)
@@ -207,9 +202,16 @@ export class CollapsibleSection {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "1 | 2 | 3 | 4 | 5 | 6",
+                    "original": "HeadingLevel",
                     "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-                    "references": {}
+                    "references": {
+                        "HeadingLevel": {
+                            "location": "import",
+                            "path": "../../global/shared-types/heading-level.types",
+                            "id": "src/global/shared-types/heading-level.types.ts::HeadingLevel",
+                            "referenceLocation": "HeadingLevel"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

package/dist/collection/components/form/fields/schema-field.js

@@ -4,6 +4,7 @@ import { isEmpty } from "lodash-es";
 import { hasValue, isFieldInvalid, isFieldRequired, getErrorText, } from "../validation-display";
 import { resetDependentFields, schemaAllowsNull } from "./field-helpers";
 import { FieldTemplate } from "../templates";
+import { renderHeader } from "../templates/common";
 import { getHelpComponent } from "../help";
 import { TimePicker } from "../widgets/time-picker";
 import { isIntegerType, isNumberType } from "../schema";
@@ -111,6 +112,10 @@ export class SchemaField extends React.Component {
         const fallbackText = (_c = (_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.props) === null || _c === void 0 ? void 0 : _c.helperText;
         return getErrorText(errors, schema.description, fallbackText);
     }
+    hasHeaderFromForm(schema) {
+        var _a, _b;
+        return ((_b = (_a = schema.lime) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.showHeader) === true && !this.context;
+    }
     handleCustomComponentChange(event) {
         const { schema } = this.props;
         event.stopPropagation();
@@ -169,7 +174,9 @@ export class SchemaField extends React.Component {
         const { name, props: userDefinedComponentProps } = getCustomComponent(schema);
         verifyCustomComponentIsDefined(name);
         const component = React.createElement(name, Object.assign(Object.assign(Object.assign({}, userDefinedComponentProps), this.buildCustomComponentProps()), { onChange: this.handleCustomComponentChange }));
-        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'rjsf-field rjsf-field-custom' }), component, getHelpComponent(schema));
+        const hasHeader = this.hasHeaderFromForm(schema);
+        return React.createElement(FieldTemplate, Object.assign(Object.assign({}, this.props), { classNames: 'rjsf-field rjsf-field-custom' }), hasHeader &&
+            renderHeader(schema.title, schema.description, schema.lime.help), component, !hasHeader && getHelpComponent(schema));
     }
     render() {
         var _a;

package/dist/collection/components/form/form.js

@@ -14,6 +14,7 @@ import { h, } from "@stencil/core";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import JSONSchemaForm from "@rjsf/core";
+import { isHeadingLevel } from "../../util/heading-level";
 import { ArrayFieldTemplate, ArrayFieldItemTemplate, FieldTemplate, ObjectFieldTemplate, } from "./templates";
 import { SchemaField as CustomSchemaField } from "./fields/schema-field";
 import { ArrayField as CustomArrayField } from "./fields/array-field";
@@ -22,13 +23,14 @@ import { widgets } from "./widgets";
 import { rjsfValidator } from "./validator";
 import { isEqual, mapValues } from "lodash-es";
 import { showField } from "./show-field";
-import { HeadingLevelContext, isHeadingLevel } from "./templates/heading-level";
+import { HeadingLevelContext } from "./templates/heading-level";
 /**
  * @exampleComponent limel-example-form
  * @exampleComponent limel-example-nested-form
  * @exampleComponent limel-example-list-form
  * @exampleComponent limel-example-dynamic-form
  * @exampleComponent limel-example-custom-component-form
+ * @exampleComponent limel-example-custom-component-header-form
  * @exampleComponent limel-example-props-factory-form
  * @exampleComponent limel-example-form-layout
  * @exampleComponent limel-example-form-span-fields
@@ -56,7 +58,8 @@ export class Form {
         /**
          * The level, from `1` to `6`, of the topmost headings in the form.
          * The headings of the sections inside them get one level more for each
-         * level of nesting, down to `6`.
+         * level of nesting, down to `6`. A collapsible section, and each item
+         * of a list that is shown as one, counts as a level too.
          *
          * Set it so that the headings of the form fit below the headings of
          * the page around it. For example, when the form is in a section with
@@ -119,7 +122,7 @@ export class Form {
         this.initialized = false;
     }
     render() {
-        return h("div", { key: '3f2e4aedf778c43f02ab87c32074cb3face9a55b', class: "root" });
+        return h("div", { key: 'e034b4254d91f376a19f0efabc434c4df24edfc7', class: "root" });
     }
     reactRender() {
         if (!this.root) {
@@ -419,8 +422,8 @@ export class Form {
                     "references": {
                         "HeadingLevel": {
                             "location": "import",
-                            "path": "./form.types",
-                            "id": "src/components/form/form.types.ts::HeadingLevel",
+                            "path": "../../global/shared-types/heading-level.types",
+                            "id": "src/global/shared-types/heading-level.types.ts::HeadingLevel",
                             "referenceLocation": "HeadingLevel"
                         }
                     }
@@ -429,7 +432,7 @@ export class Form {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The level, from `1` to `6`, of the topmost headings in the form.\nThe headings of the sections inside them get one level more for each\nlevel of nesting, down to `6`.\n\nSet it so that the headings of the form fit below the headings of\nthe page around it. For example, when the form is in a section with\nan `h2` heading, set it to `3`."
+                    "text": "The level, from `1` to `6`, of the topmost headings in the form.\nThe headings of the sections inside them get one level more for each\nlevel of nesting, down to `6`. A collapsible section, and each item\nof a list that is shown as one, counts as a level too.\n\nSet it so that the headings of the form fit below the headings of\nthe page around it. For example, when the form is in a section with\nan `h2` heading, set it to `3`."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/form/form.test-schemas.js

@@ -322,6 +322,92 @@ export const customComponentSchema = {
         },
     },
 };
+export const customComponentWithHeaderSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        enabled: {
+            type: 'boolean',
+            title: 'Enabled',
+            description: 'Turns the feature on',
+            lime: {
+                help: 'Read more about the feature',
+                component: {
+                    name: 'limel-switch',
+                    showHeader: true,
+                },
+            },
+        },
+        section: {
+            type: 'object',
+            title: 'Section',
+            properties: {
+                nested: {
+                    type: 'boolean',
+                    title: 'Nested',
+                    lime: {
+                        component: {
+                            name: 'limel-switch',
+                            showHeader: true,
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+export const requiredCustomComponentWithHeaderSchema = {
+    type: 'object',
+    properties: {
+        name: { type: 'string', title: 'Name' },
+        enabled: {
+            type: 'boolean',
+            title: 'Enabled',
+            description: 'Turns the feature on',
+            lime: {
+                component: {
+                    name: 'limel-switch',
+                    showHeader: true,
+                },
+            },
+        },
+    },
+    required: ['name', 'enabled'],
+};
+export const customComponentWithHelpSchema = {
+    type: 'object',
+    properties: {
+        enabled: {
+            type: 'boolean',
+            title: 'Enabled',
+            lime: {
+                help: 'Read more about the feature',
+                component: { name: 'limel-switch' },
+            },
+        },
+    },
+};
+export const rowLayoutWithCustomComponentHeaderSchema = {
+    type: 'object',
+    properties: {
+        active: {
+            type: 'boolean',
+            title: 'Active',
+            description: 'Active description',
+            lime: {
+                component: {
+                    name: 'limel-switch',
+                    showHeader: true,
+                },
+            },
+        },
+    },
+    lime: {
+        layout: {
+            type: 'row',
+        },
+    },
+};
 export const undefinedComponentSchema = {
     type: 'object',
     properties: {
@@ -455,6 +541,26 @@ export const nestedArrayObjectSchema = {
         },
     },
 };
+export const arrayItemWithEmptyListSchema = {
+    type: 'object',
+    properties: {
+        people: {
+            type: 'array',
+            title: 'People',
+            items: {
+                type: 'object',
+                properties: {
+                    tags: {
+                        type: 'array',
+                        title: 'Tags',
+                        items: { type: 'string' },
+                    },
+                    role: { type: 'string', title: 'Role' },
+                },
+            },
+        },
+    },
+};
 export const topLevelStringCustomComponentSchema = {
     type: 'object',
     properties: {
@@ -729,6 +835,54 @@ export const untitledRootSchema = {
         },
     },
 };
+export const nestedCollapsibleSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        details: {
+            type: 'object',
+            title: 'Details',
+            lime: { collapsible: true },
+            properties: {
+                address: {
+                    type: 'object',
+                    title: 'Address',
+                    lime: { collapsible: true },
+                    properties: {
+                        street: { type: 'string', title: 'Street' },
+                        position: {
+                            type: 'object',
+                            title: 'Position',
+                            properties: {
+                                latitude: { type: 'number', title: 'Latitude' },
+                            },
+                        },
+                    },
+                },
+            },
+        },
+    },
+};
+export const untitledCollapsibleSchema = {
+    type: 'object',
+    title: 'Form',
+    properties: {
+        details: {
+            type: 'object',
+            title: '',
+            lime: { collapsible: true },
+            properties: {
+                section: {
+                    type: 'object',
+                    title: 'Section',
+                    properties: {
+                        name: { type: 'string', title: 'Name' },
+                    },
+                },
+            },
+        },
+    },
+};
 export const untitledRowSchema = {
     type: 'object',
     title: 'Form',

package/dist/collection/components/form/templates/array-field-collapsible-item.js

@@ -3,6 +3,7 @@ import { findTitle, hasNestedErrors } from "./common";
 import { getDefaultFormState, } from "@rjsf/utils";
 import { isEmpty, isEqual } from "lodash-es";
 import { rjsfValidator } from "../validator";
+import { BelowHeading, HeadingLevelContext } from "./heading-level";
 export class CollapsibleItemTemplate extends React.Component {
     constructor(props) {
         super(props);
@@ -35,10 +36,11 @@ export class CollapsibleItemTemplate extends React.Component {
         section.removeEventListener('open', this.handleOpen);
     }
     render() {
-        const { data, schema, formSchema, errorSchema, revealErrors } = this.props;
+        const { errorSchema, revealErrors } = this.props;
+        const header = getItemHeader(this.props);
         let children;
         if (this.state.isOpen) {
-            children = this.props.children;
+            children = React.createElement(BelowHeading, { hasHeading: !!header }, this.props.children);
         }
         const dragHandle = this.props.allowItemReorder
             ? React.createElement('limel-drag-handle', {
@@ -48,7 +50,8 @@ export class CollapsibleItemTemplate extends React.Component {
             : null;
         const invalid = revealErrors === true && hasNestedErrors(errorSchema);
         return React.createElement('limel-collapsible-section', {
-            header: findTitle(data, schema, formSchema) || 'New item',
+            header: header,
+            headingLevel: this.context,
             class: 'array-item limel-form-array-item--object',
             ref: (section) => {
                 this.section = section;
@@ -80,6 +83,13 @@ export class CollapsibleItemTemplate extends React.Component {
         event.detail.run(event);
     }
 }
+CollapsibleItemTemplate.contextType = HeadingLevelContext;
+function getItemHeader(props) {
+    const { data, schema, formSchema } = props;
+    const title = findTitle(data, schema, formSchema);
+    const text = Array.isArray(title) ? title.join(', ') : title;
+    return text ? String(text) : 'New item';
+}
 /**
  * An item counts as new while it holds nothing the user entered. Since
  * `@rjsf/core` 6.10 fills a required property with its default as soon as the

package/dist/collection/components/form/templates/heading-level.js

@@ -1,14 +1,4 @@
 import React, { useContext } from "react";
-/**
- * @param level - any value
- * @returns whether the value is a heading level, from `1` to `6`
- */
-export function isHeadingLevel(level) {
-    return (typeof level === 'number' &&
-        Number.isSafeInteger(level) &&
-        level >= 1 &&
-        level <= 6);
-}
 /**
  * The heading level that a title at the current depth in the form gets.
  */

package/dist/collection/components/form/templates/object-field.js

@@ -4,8 +4,10 @@ import { GridLayout } from "./grid-layout";
 import { RowLayout } from "./row-layout";
 import { getHelpComponent } from "../help";
 import { ArrayFieldContext } from "./array-context";
+import { BelowHeading, HeadingLevelContext } from "./heading-level";
 export const ObjectFieldTemplate = (props) => {
     const arrayContext = useContext(ArrayFieldContext);
+    const headingLevel = useContext(HeadingLevelContext);
     const id = props.fieldPathId.$id;
     if (arrayContext && id !== 'root') {
         return React.createElement(ArrayFieldContext.Provider, { value: null }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
@@ -13,13 +15,13 @@ export const ObjectFieldTemplate = (props) => {
     if (id === 'root' || !isCollapsible(props.schema)) {
         return renderFieldWithTitle(props);
     }
-    return renderCollapsibleField(props);
+    return renderCollapsibleField(props, headingLevel);
 };
 function renderFieldWithTitle(props) {
     var _a;
     return renderSection(props.title, props.description, (_a = props.schema.lime) === null || _a === void 0 ? void 0 : _a.help, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
 }
-function renderCollapsibleField(props) {
+function renderCollapsibleField(props, headingLevel) {
     var _a;
     const defaultOpen = !isCollapsed(props.schema);
     const helpElement = getHelpComponent(props.schema, {
@@ -29,10 +31,11 @@ function renderCollapsibleField(props) {
     const invalid = revealErrors && hasNestedErrors(props.errorSchema);
     return React.createElement('limel-collapsible-section', {
         header: props.title,
+        headingLevel: headingLevel,
         id: getSchemaObjectPropertyPath(props.registry.formContext.schema, props.fieldPathId),
         'is-open': defaultOpen,
         invalid: invalid,
-    }, helpElement, renderDescription(props.description), renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String)));
+    }, helpElement, renderDescription(props.description), React.createElement(BelowHeading, { hasHeading: !!props.title }, renderProperties(props.properties, props.schema, props.fieldPathId.path.map(String))));
 }
 function getSchemaObjectPropertyPath(schema, fieldPathId) {
     var _a, _b;

package/dist/collection/components/form-header/form-header.js

@@ -29,7 +29,7 @@ export class FormHeader {
         this.headingLevel = 1;
     }
     render() {
-        return (h(Host, { key: 'bfb0a90340ac54c7f083df2989fd8c2acb97308f' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
+        return (h(Host, { key: '0d8282124405665c18b93aa753dd40cf616a6e6b' }, this.renderHeading(), this.renderHelp(), this.renderDescription()));
     }
     renderHeading() {
         if (!this.heading) {
@@ -91,8 +91,8 @@ export class FormHeader {
                     "references": {
                         "HeadingLevel": {
                             "location": "import",
-                            "path": "../form/form.types",
-                            "id": "src/components/form/form.types.ts::HeadingLevel",
+                            "path": "../../global/shared-types/heading-level.types",
+                            "id": "src/global/shared-types/heading-level.types.ts::HeadingLevel",
                             "referenceLocation": "HeadingLevel"
                         }
                     }

package/dist/collection/global/shared-types/heading-level.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/interface.js

@@ -44,6 +44,7 @@ export * from './global/shared-types/separator.types';
 export * from './global/shared-types/icon.types';
 export * from './global/shared-types/image.types';
 export * from './global/shared-types/color.types';
+export * from './global/shared-types/heading-level.types';
 export * from './components/text-editor/text-editor.types';
 export * from './components/text-editor/types';
 export * from './components/text-editor/prosemirror-adapter/menu/types';

package/dist/collection/util/heading-level.js

@@ -0,0 +1,10 @@
+/**
+ * @param level - any value
+ * @returns whether the value is a heading level, from `1` to `6`
+ */
+export function isHeadingLevel(level) {
+    return (typeof level === 'number' &&
+        Number.isSafeInteger(level) &&
+        level >= 1 &&
+        level <= 6);
+}

package/dist/esm/heading-level-B3C0kDpZ.js

@@ -0,0 +1,12 @@
+/**
+ * @param level - any value
+ * @returns whether the value is a heading level, from `1` to `6`
+ */
+function isHeadingLevel(level) {
+    return (typeof level === 'number' &&
+        Number.isSafeInteger(level) &&
+        level >= 1 &&
+        level <= 6);
+}
+
+export { isHeadingLevel as i };