@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/dist/formGroup/utils/getControlClasses/getTwoLabelsOneControlClasses.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTwoLabelsOneControlClasses = void 0;
+const getTwoLabelsOneControlClasses = (labelAlign, columns) => {
+    const controlClasses = {
+        controlClasses1: "",
+        controlClasses2: ""
+    };
+    if (labelAlign === "left") {
+        if (columns === 1) {
+            controlClasses.controlClasses1 = "zen-lg-3 zen-md-2 zen-sm-3";
+            return controlClasses;
+        }
+        controlClasses.controlClasses1 = "zen-lg-2 zen-md-1 zen-sm-4 zen-sm-start-1";
+        controlClasses.controlClasses2 = "zen-lg-2 zen-md-1 zen-sm-3";
+        return controlClasses;
+    }
+    if (columns === 1) {
+        controlClasses.controlClasses1 = "zen-lg-6 zen-md-3 zen-sm-3 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+        return controlClasses;
+    }
+    controlClasses.controlClasses1 = "zen-lg-2 zen-md-3 zen-sm-3 zen-md-start-1 zen-sm-start-1";
+    return controlClasses;
+};
+exports.getTwoLabelsOneControlClasses = getTwoLabelsOneControlClasses;

package/dist/formGroup/utils/getControlClasses/getTwoLabelsTwoControlsClasses.d.ts

@@ -0,0 +1,6 @@
+import { TLabelAlign } from "../../../formField/formField";
+import { TFormLayoutColumns } from "../../../formLayout/types";
+export declare const getTwoLabelsTwoControlsClasses: (labelAlign1: TLabelAlign, columns: TFormLayoutColumns) => {
+    controlClasses1: string;
+    controlClasses2: string;
+};

package/dist/formGroup/utils/getControlClasses/getTwoLabelsTwoControlsClasses.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTwoLabelsTwoControlsClasses = void 0;
+const getTwoLabelsTwoControlsClasses = (labelAlign1, columns) => {
+    const controlClasses = {
+        controlClasses1: "",
+        controlClasses2: ""
+    };
+    if (labelAlign1 === "top") {
+        if (columns === 1) {
+            controlClasses.controlClasses1 = "zen-lg-4 zen-md-3 zen-sm-4";
+            controlClasses.controlClasses2 = "zen-lg-4 zen-md-3 zen-sm-4";
+            return controlClasses;
+        }
+        controlClasses.controlClasses1 = "zen-lg-3 zen-md-2 zen-sm-4";
+        controlClasses.controlClasses2 = "zen-lg-3 zen-md-2 zen-sm-4";
+        return controlClasses;
+    }
+    if (columns === 1) {
+        controlClasses.controlClasses1 = "zen-lg-2 zen-md-2 zen-sm-4";
+        controlClasses.controlClasses2 = "zen-lg-1 zen-md-1 zen-sm-4";
+        return controlClasses;
+    }
+    controlClasses.controlClasses1 = "zen-lg-2 zen-md-3 zen-sm-4";
+    controlClasses.controlClasses2 = "zen-lg-2 zen-md-3 zen-sm-4";
+    return controlClasses;
+};
+exports.getTwoLabelsTwoControlsClasses = getTwoLabelsTwoControlsClasses;

package/dist/formGroup/utils/getControlClasses/getZeroLabelOneControlClasses.d.ts

@@ -0,0 +1,3 @@
+import { TFormLayoutColumns } from "../../../formLayout/types";
+import { IControlClasses } from "./types";
+export declare const getZeroLabelOneControlClasses: (columns: TFormLayoutColumns) => IControlClasses;

package/dist/formGroup/utils/getControlClasses/getZeroLabelOneControlClasses.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getZeroLabelOneControlClasses = void 0;
+const getZeroLabelOneControlClasses = (columns) => {
+    const controlClasses = {
+        controlClasses1: "",
+        controlClasses2: ""
+    };
+    if (columns === 1) {
+        controlClasses.controlClasses1 = "zen-lg-8 zen-md-6 zen-sm-4";
+        return controlClasses;
+    }
+    controlClasses.controlClasses1 = "zen-lg-6 zen-md-4 zen-sm-4";
+    return controlClasses;
+};
+exports.getZeroLabelOneControlClasses = getZeroLabelOneControlClasses;

package/dist/formGroup/utils/getControlClasses/types.d.ts

@@ -0,0 +1,4 @@
+export interface IControlClasses {
+    controlClasses1: string;
+    controlClasses2: string;
+}

package/dist/formGroup/utils/getControlClasses/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/formGroup/utils/getControlListClasses/getControlListClasses.d.ts

@@ -0,0 +1,4 @@
+import { TFormLayoutColumns } from "../../../formLayout/types";
+import { TFormSectionMode } from "../../../formSection/types";
+import { ITotalState } from "../../types";
+export declare const getControlListClasses: (state: ITotalState, columns: TFormLayoutColumns, mode: TFormSectionMode) => import("../getControlClasses/types").IControlClasses;

package/dist/formGroup/utils/getControlListClasses/getControlListClasses.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getControlListClasses = void 0;
+const getOneLabelOneControlClasses_1 = require("./getOneLabelOneControlClasses");
+const getOneLabelTwoControlsClasses_1 = require("./getOneLabelTwoControlsClasses");
+const getTwoLabelsTwoControlsClasses_1 = require("./getTwoLabelsTwoControlsClasses");
+const getZeroLabelOneControlClasses_1 = require("./getZeroLabelOneControlClasses");
+const getZeroLabelsTwoControls_1 = require("./getZeroLabelsTwoControls");
+// TODO: Can we get rid of this file?
+const getControlListClasses = (state, columns, mode) => {
+    const { totalCount, controlsCount, labelsCount } = state;
+    if (totalCount === 0 && labelsCount === 1) {
+        return {
+            controlClasses1: "",
+            controlClasses2: ""
+        };
+    }
+    if (totalCount === 1 && controlsCount === 1) {
+        return (0, getZeroLabelOneControlClasses_1.getZeroLabelOneControlClasses)(columns);
+    }
+    if (totalCount === 2 && controlsCount === 2) {
+        return (0, getZeroLabelsTwoControls_1.getZeroLabelsTwoControls)(columns);
+    }
+    if (totalCount === 2) {
+        return (0, getOneLabelOneControlClasses_1.getOneLabelOneControlClasses)(state, columns, mode);
+    }
+    if (totalCount === 3) {
+        return (0, getOneLabelTwoControlsClasses_1.getOneLabelTwoControlsClasses)(state, columns, mode);
+    }
+    if (totalCount === 4) {
+        return (0, getTwoLabelsTwoControlsClasses_1.getTwoLabelsTwoControlsClasses)(state, columns);
+    }
+    return { controlClasses1: "", controlClasses2: "" };
+    // if (labelAlign === "top") {
+    //     if (columns === 1) {
+    //         return "zen-lg-start-4 zen-lg-5 zen-md-start-3 zen-md-3 zen-sm-start-1 zen-sm-4";
+    //     }
+    //     return "zen-lg-start-3 zen-lg-3 zen-md-start-1 zen-md-4 zen-sm-start-1 zen-sm-4";
+    // }
+    // // labelAlign === "left"
+    // if (columns === 1) {
+    //     return "zen-lg-start-1 zen-lg-3 zen-md-start-1 zen-md-3 zen-sm-start-1 zen-sm-4";
+    // }
+    // return "zen-lg-start-4 zen-lg-3 zen-md-start-2 zen-md-4 zen-sm-start-1 zen-sm-4";
+};
+exports.getControlListClasses = getControlListClasses;

package/dist/formGroup/utils/getControlListClasses/getOneLabelOneControlClasses.d.ts

@@ -0,0 +1,7 @@
+import { TFormLayoutColumns } from "../../../formLayout/types";
+import { TFormSectionMode } from "../../../formSection/types";
+import { ITotalState } from "../../types";
+export declare const getOneLabelOneControlClasses: (state: ITotalState, columns: TFormLayoutColumns, mode: TFormSectionMode) => {
+    controlClasses1: string;
+    controlClasses2: string;
+};

package/dist/formGroup/utils/getControlListClasses/getOneLabelOneControlClasses.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOneLabelOneControlClasses = void 0;
+const convertStateToClasses_1 = require("../../../gridLayout/utils/convertStateToClasses");
+const getOneLabelOneControlClasses = (state, columns, mode) => {
+    const controlClasses = {
+        controlClasses1: "",
+        controlClasses2: ""
+    };
+    const { elements } = state;
+    // TODO: labelAlign from section?
+    const label = elements.label1;
+    const labelAlign = label === null || label === void 0 ? void 0 : label.labelAlign;
+    // column 1
+    if (mode === "review") {
+        if (columns === 1) {
+            controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 4, md: 2, sm: 1, lgStart: 4, mdStart: 3, smStart: 2 });
+            return controlClasses;
+        }
+        controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 4, md: 4, sm: 1, lgStart: 3, mdStart: 2, smStart: 2 });
+        return controlClasses;
+    }
+    switch (labelAlign) {
+        case "left": {
+            if (columns === 1) {
+                controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 4, md: 3, sm: 4, lgStart: 5, mdStart: 4, smStart: 1 });
+                return controlClasses;
+            }
+            // 2 columns
+            controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 4, md: 4, sm: 4, lgStart: 4, mdStart: 1, smStart: 1 });
+            return controlClasses;
+        }
+        case "top":
+        default: {
+            if (columns === 1) {
+                controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 5, md: 4, sm: 4, lgStart: 4, mdStart: 3, smStart: 1 });
+                return controlClasses;
+            }
+            controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 4, md: 4, sm: 4, lgStart: 3, mdStart: 1, smStart: 1 });
+            return controlClasses;
+        }
+    }
+    // if (columns === 1) {
+    //     controlClasses.controlClasses1 = "zen-lg-4 zen-md-3 zen-sm-4 zen-lg-start-4 zen-md-start-3 zen-sm-start-1";
+    //     return controlClasses;
+    // }
+    // controlClasses.controlClasses1 = "zen-lg-4 zen-md-4 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+    // return controlClasses;
+    // if (labelAlign === "left") {
+    //     if (columns === 1) {
+    //         controlClasses.controlClasses1 = "zen-lg-4 zen-md-4 zen-sm-4 zen-lg-start-4 zen-md-start-3";
+    //         return controlClasses;
+    //     }
+    //     controlClasses.controlClasses1 = "zen-lg-4 zen-md-3 zen-sm-4";
+    //     return controlClasses;
+    // }
+    // // labelAlign === "top"
+    // if (columns === 1) {
+    //     controlClasses.controlClasses1 = "zen-lg-4 zen-md-3 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+    //     return controlClasses;
+    // }
+    // controlClasses.controlClasses1 = "zen-lg-4 zen-md-4 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+};
+exports.getOneLabelOneControlClasses = getOneLabelOneControlClasses;

package/dist/formGroup/utils/getControlListClasses/getOneLabelTwoControlsClasses.d.ts

@@ -0,0 +1,7 @@
+import { TFormLayoutColumns } from "../../../formLayout/types";
+import { TFormSectionMode } from "../../../formSection/types";
+import { ITotalState } from "../../types";
+export declare const getOneLabelTwoControlsClasses: (state: ITotalState, columns: TFormLayoutColumns, mode: TFormSectionMode) => {
+    controlClasses1: string;
+    controlClasses2: string;
+};

package/dist/formGroup/utils/getControlListClasses/getOneLabelTwoControlsClasses.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOneLabelTwoControlsClasses = void 0;
+const convertStateToClasses_1 = require("../../../gridLayout/utils/convertStateToClasses");
+const getOneLabelTwoControlsClasses = (state, columns, mode) => {
+    const { elements } = state;
+    const label1 = elements.label1;
+    const labelAlign = (label1 === null || label1 === void 0 ? void 0 : label1.labelAlign) || "left";
+    if (mode === "review") {
+        return {
+            controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, lgStart: 4 }),
+            controlClasses2: ""
+        };
+    }
+    switch (labelAlign) {
+        case "left": {
+            if (columns === 1) {
+                return {
+                    controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lgStart: 5, lg: 2, mdStart: 4, md: 2, smStart: 2, sm: 2 }),
+                    controlClasses2: (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, md: 1, sm: 1 })
+                };
+            }
+            // 2 columns
+            return {
+                controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lgStart: 4, lg: 2, mdStart: 2, md: 2, smStart: 2, sm: 2 }),
+                controlClasses2: (0, convertStateToClasses_1.convertStateToClasses)({ lg: 1, md: 2, sm: 1 })
+            };
+        }
+        case "top":
+        default: {
+            if (columns === 1) {
+                return {
+                    controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lgStart: 4, lg: 3, mdStart: 3, md: 2, smStart: 1, sm: 2 }),
+                    controlClasses2: (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, md: 2, sm: 2 })
+                };
+            }
+            return {
+                controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lgStart: 3, lg: 2, mdStart: 1, md: 2, smStart: 1, sm: 2 }),
+                controlClasses2: (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, md: 2, sm: 2 })
+            };
+        }
+    }
+};
+exports.getOneLabelTwoControlsClasses = getOneLabelTwoControlsClasses;

package/dist/formGroup/utils/getControlListClasses/getTwoLabelsTwoControlsClasses.d.ts

@@ -0,0 +1,6 @@
+import { TFormLayoutColumns } from "../../../formLayout/types";
+import { ITotalState } from "../../types";
+export declare const getTwoLabelsTwoControlsClasses: (state: ITotalState, columns: TFormLayoutColumns) => {
+    controlClasses1: string;
+    controlClasses2: string;
+};

package/dist/formGroup/utils/getControlListClasses/getTwoLabelsTwoControlsClasses.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTwoLabelsTwoControlsClasses = void 0;
+const convertStateToClasses_1 = require("../../../gridLayout/utils/convertStateToClasses");
+const getTwoLabelsTwoControlsClasses = (state, columns) => {
+    var _a, _b;
+    const controlClasses = {
+        controlClasses1: "",
+        controlClasses2: ""
+    };
+    const { elements } = state;
+    const isLeftAlign = ((_a = elements.label1) === null || _a === void 0 ? void 0 : _a.labelAlign) === "left" && ((_b = elements.label2) === null || _b === void 0 ? void 0 : _b.labelAlign) === "left";
+    switch (isLeftAlign) {
+        case true: {
+            if (columns === 1) {
+                controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, md: 1, sm: 4, lgStart: 5, mdStart: 4, smStart: 1 });
+                controlClasses.controlClasses2 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 1, md: 1, sm: 4, lgStart: 8, mdStart: 6, smStart: 1 });
+                return controlClasses;
+            }
+            // 2 columns
+            controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 1, md: 1, sm: 4, lgStart: 4, mdStart: 2, smStart: 1 });
+            controlClasses.controlClasses2 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 1, md: 1, sm: 4, lgStart: 6, mdStart: 4, smStart: 1 });
+            return controlClasses;
+        }
+        default:
+        case false: {
+            if (columns === 1) {
+                controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 3, md: 2, sm: 4, lgStart: 4, mdStart: 3, smStart: 1 });
+                controlClasses.controlClasses2 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 3, md: 2, sm: 4, lgStart: 7, mdStart: 5, smStart: 1 });
+                return controlClasses;
+            }
+            // 2 columns
+            controlClasses.controlClasses1 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, md: 4, sm: 4, lgStart: 3, mdStart: 1, smStart: 1 });
+            controlClasses.controlClasses2 = (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, md: 4, sm: 4, lgStart: 5, mdStart: 1, smStart: 1 });
+            return controlClasses;
+        }
+    }
+};
+exports.getTwoLabelsTwoControlsClasses = getTwoLabelsTwoControlsClasses;

package/dist/formGroup/utils/getControlListClasses/getZeroLabelOneControlClasses.d.ts

@@ -0,0 +1,5 @@
+import { TFormLayoutColumns } from "../../../formLayout/types";
+export declare const getZeroLabelOneControlClasses: (columns: TFormLayoutColumns) => {
+    controlClasses1: string;
+    controlClasses2: string;
+};

package/dist/formGroup/utils/getControlListClasses/getZeroLabelOneControlClasses.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getZeroLabelOneControlClasses = void 0;
+const convertStateToClasses_1 = require("../../../gridLayout/utils/convertStateToClasses");
+const getZeroLabelOneControlClasses = (columns) => {
+    if (columns === 1) {
+        return {
+            controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lgStart: 4, lg: 5, mdStart: 3, md: 4, smStart: 1, sm: 4 }),
+            controlClasses2: ""
+        };
+    }
+    // 2 columns
+    return {
+        controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lgStart: 3, lg: 4, mdStart: 1, md: 4, smStart: 1, sm: 4 }),
+        controlClasses2: ""
+    };
+};
+exports.getZeroLabelOneControlClasses = getZeroLabelOneControlClasses;

package/dist/formGroup/utils/getControlListClasses/getZeroLabelsTwoControls.d.ts

@@ -0,0 +1,2 @@
+import { IControlClasses } from "../getControlClasses/types";
+export declare const getZeroLabelsTwoControls: (columns: number) => IControlClasses;

package/dist/formGroup/utils/getControlListClasses/getZeroLabelsTwoControls.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getZeroLabelsTwoControls = void 0;
+const convertStateToClasses_1 = require("../../../gridLayout/utils/convertStateToClasses");
+const getZeroLabelsTwoControls = (columns) => {
+    if (columns === 1) {
+        return {
+            controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lgStart: 4, lg: 3, mdStart: 3, md: 2, smStart: 1, sm: 2 }),
+            controlClasses2: (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, md: 2, sm: 2 })
+        };
+    }
+    return {
+        controlClasses1: (0, convertStateToClasses_1.convertStateToClasses)({ lgStart: 3, lg: 2, mdStart: 1, md: 2, smStart: 1, sm: 2 }),
+        controlClasses2: (0, convertStateToClasses_1.convertStateToClasses)({ lg: 2, md: 2, sm: 2 })
+    };
+};
+exports.getZeroLabelsTwoControls = getZeroLabelsTwoControls;

package/dist/formGroup/utils/getControlNode.d.ts

@@ -0,0 +1 @@
+export declare const getControlNode: (node: React.ReactElement | null) => React.ReactElement | null;

package/dist/formGroup/utils/getControlNode.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getControlNode = void 0;
+const isFormLabel_1 = require("./isFormLabel");
+const getControlNode = (node) => node && !(0, isFormLabel_1.isFormLabel)(node) ? node : null;
+exports.getControlNode = getControlNode;

package/dist/formGroup/utils/getControls.d.ts

@@ -0,0 +1,5 @@
+import { IElementsState } from "../types";
+export declare const getControls: (elements: Partial<IElementsState>) => {
+    control1: any;
+    control2: any;
+};

package/dist/formGroup/utils/getControls.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getControls = void 0;
+const react_1 = require("react");
+const getControls = (elements) => {
+    var _a, _b, _c, _d;
+    let control1;
+    let control2;
+    if ((_a = elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
+        // TODO: better interface?
+        control1 = (0, react_1.cloneElement)(elements.control1.value, {
+            className: `zen-form-control ${elements.control1.className || ""}`,
+            isReadOnly: !!elements.control1.isReadOnly,
+            bannerLabel: (_b = elements.label1) === null || _b === void 0 ? void 0 : _b.value
+        });
+    }
+    if ((_c = elements.control2) === null || _c === void 0 ? void 0 : _c.value) {
+        control2 = (0, react_1.cloneElement)(elements.control2.value, {
+            className: `zen-form-control ${elements.control2.className || ""}`,
+            isReadOnly: !!elements.control2.isReadOnly,
+            bannerLabel: (_d = elements.label2) === null || _d === void 0 ? void 0 : _d.value
+        });
+    }
+    return { control1, control2 };
+};
+exports.getControls = getControls;

package/dist/formGroup/utils/getElementsControl.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { TFormSectionMode } from "../../formSection/types";
+import { IElementsState } from "../types";
+import { IControlNode } from "./initializeState";
+export declare const getElementsControl: (control: React.ReactElement<IControlNode> | null, mode: TFormSectionMode, elements: IElementsState, controlName: string) => void;

package/dist/formGroup/utils/getElementsControl.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getElementsControl = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const reviewTextControl_1 = require("../components/reviewTextControl");
+// eslint-disable-next-line max-len
+const getElementsControl = (control, mode, elements, controlName) => {
+    if (!control) {
+        return;
+    }
+    const isControlReadOnly = (control.props.isReadOnly === undefined && mode === "review") || control.props.isReadOnly === true;
+    // TODO: update test
+    const readOnlyValueProp = control.props.readOnlyValue;
+    if (isControlReadOnly && readOnlyValueProp) {
+        elements[controlName] = { value: typeof readOnlyValueProp === "string"
+                ? (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { value: readOnlyValueProp }) :
+                typeof readOnlyValueProp === "function" ? readOnlyValueProp(control.props.value) :
+                    readOnlyValueProp, type: "control" };
+        return;
+    }
+    if (isControlReadOnly) {
+        elements[controlName] = {
+            value: control,
+            type: "control",
+            className: control.props.className,
+            isReadOnly: true
+        };
+        return;
+    }
+    elements[controlName] = {
+        value: control,
+        type: "control",
+        className: control.props.className,
+        isReadOnly: false
+    };
+};
+exports.getElementsControl = getElementsControl;

package/dist/formGroup/utils/getLabelClasses/getLabelClasses.d.ts

@@ -0,0 +1,6 @@
+import { TLabelAlign } from "../../../formField/formField";
+import { TFormLayoutColumns } from "../../../formLayout/types";
+import { TFormSectionMode, TFormSectionType } from "../../../formSection/types";
+import { ITotalState } from "../../types";
+import { ILabelClasses } from "./types";
+export declare const getLabelClasses: (elementsState: ITotalState, columns: TFormLayoutColumns, sectionAlign?: TLabelAlign, mode?: TFormSectionMode, sectionType?: TFormSectionType) => ILabelClasses;

package/dist/formGroup/utils/getLabelClasses/getLabelClasses.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLabelClasses = void 0;
+const getModalSectionClasses_1 = require("./getModalSectionClasses");
+const getOneLabelOneControlClasses_1 = require("./getOneLabelOneControlClasses");
+const getOneLabelTwoControlsClasses_1 = require("./getOneLabelTwoControlsClasses");
+const getReviewOrInlineEditClasses_1 = require("./getReviewOrInlineEditClasses");
+const getTwoLabelsOneControlClasses_1 = require("./getTwoLabelsOneControlClasses");
+const getTwoLabelsTwoControlsClasses_1 = require("./getTwoLabelsTwoControlsClasses");
+const getZeroLabelClasses_1 = require("./getZeroLabelClasses");
+// + 1. 1 label, 1 control === total 2 elements
+// + 2. 1 label, 2 controls === total 3 elements
+// 3. 2 labels, 2 controls === total 4 elements
+// 4. 2 labels, 1 control === total 3 elements - ?
+// 5. 1 label, 0 control === total 1 element - ?
+// 6. 0 label, 1 control === total 1 element - ?
+// 7. 0 label, 2 controls === total 2 elements - ?
+// 8. 2 labels, 0 control === total 2 elements - ?
+// TODO: Idea
+// Maybe apply position classes, then width classes
+// TODO: interfaces
+// TODO: return classes for each label separately
+// TODO: readonly should not affect classes?
+// eslint-disable-next-line complexity, max-len
+const getLabelClasses = (elementsState, columns, sectionAlign, mode, sectionType = "card") => {
+    var _a;
+    const { totalCount, controlsCount, labelsCount } = elementsState;
+    const labelAlign1 = ((_a = elementsState.elements.label1) === null || _a === void 0 ? void 0 : _a.labelAlign) || sectionAlign || "left";
+    // TODO: consider second label align?
+    const labelClasses = {
+        labelClasses1: "",
+        labelClasses2: ""
+    };
+    // TODO: do we need consider label align?
+    if (sectionType === "modal") {
+        return (0, getModalSectionClasses_1.getModalSectionClasses)();
+    }
+    // 0 label, 1 control
+    if (totalCount === 1 && controlsCount === 1) {
+        return (0, getZeroLabelClasses_1.getZeroLabelClasses)();
+    }
+    // 1 label, 1 control
+    if (totalCount === 2) {
+        return (0, getOneLabelOneControlClasses_1.getOneLabelOneControlClasses)(labelAlign1, columns);
+    }
+    // 1 label, 2 controls or
+    // 2 labels, 1 control
+    if (totalCount === 3) {
+        if (labelsCount === 1 && controlsCount === 2) {
+            return (0, getOneLabelTwoControlsClasses_1.getOneLabelTwoControlsClasses)(labelAlign1, columns, elementsState);
+        }
+        if (labelsCount === 2 && controlsCount === 1) {
+            return (0, getTwoLabelsOneControlClasses_1.getTwoLabelsOneControlClasses)(labelAlign1, columns);
+        }
+    }
+    if (totalCount === 4) {
+        if (mode === "review") {
+            return (0, getReviewOrInlineEditClasses_1.getReviewOrInlineEditClasses)(labelAlign1, columns);
+        }
+        return (0, getTwoLabelsTwoControlsClasses_1.getTwoLabelsTwoControlsClasses)(labelAlign1, columns);
+    }
+    // TODO:
+    return labelClasses;
+};
+exports.getLabelClasses = getLabelClasses;

package/dist/formGroup/utils/getLabelClasses/getModalSectionClasses.d.ts

@@ -0,0 +1,2 @@
+import { ILabelClasses } from "./types";
+export declare const getModalSectionClasses: () => ILabelClasses;

package/dist/formGroup/utils/getLabelClasses/getModalSectionClasses.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getModalSectionClasses = void 0;
+const getModalSectionClasses = () => ({
+    labelClasses1: "zen-lg-4 zen-md-3 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1",
+    labelClasses2: "zen-lg-4 zen-md-3 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1"
+});
+exports.getModalSectionClasses = getModalSectionClasses;

package/dist/formGroup/utils/getLabelClasses/getOneLabelOneControlClasses.d.ts

@@ -0,0 +1,4 @@
+import { TLabelAlign } from "../../../formField/formField";
+import { TFormLayoutColumns } from "../../../formLayout/types";
+import { ILabelClasses } from "./types";
+export declare const getOneLabelOneControlClasses: (labelAlign: TLabelAlign, columns: TFormLayoutColumns) => ILabelClasses;

package/dist/formGroup/utils/getLabelClasses/getOneLabelOneControlClasses.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOneLabelOneControlClasses = void 0;
+const getOneLabelOneControlClasses = (labelAlign, columns) => {
+    const labelClasses = {
+        labelClasses1: "",
+        labelClasses2: ""
+    };
+    if (labelAlign === "left") {
+        if (columns === 1) {
+            labelClasses.labelClasses1 = "zen-lg-3 zen-md-2 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+            return labelClasses;
+        }
+        labelClasses.labelClasses1 = "zen-lg-2 zen-md-1 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+        return labelClasses;
+    }
+    if (columns === 1) {
+        labelClasses.labelClasses1 = "zen-lg-4 zen-md-3 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+        return labelClasses;
+    }
+    labelClasses.labelClasses1 = "zen-lg-4 zen-md-4 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+    return labelClasses;
+};
+exports.getOneLabelOneControlClasses = getOneLabelOneControlClasses;

package/dist/formGroup/utils/getLabelClasses/getOneLabelTwoControlsClasses.d.ts

@@ -0,0 +1,4 @@
+import { TLabelAlign } from "../../../formField/formField";
+import { TFormLayoutColumns } from "../../../formLayout/types";
+import { ILabelClasses } from "./types";
+export declare const getOneLabelTwoControlsClasses: (labelAlign: TLabelAlign, columns: TFormLayoutColumns, elementsState: any) => ILabelClasses;

package/dist/formGroup/utils/getLabelClasses/getOneLabelTwoControlsClasses.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOneLabelTwoControlsClasses = void 0;
+const getOneLabelTwoControlsClasses = (labelAlign, columns, elementsState) => {
+    var _a, _b;
+    const labelClasses = {
+        labelClasses1: "",
+        labelClasses2: ""
+    };
+    // if only first label exists
+    if ((_a = elementsState.elements.label1) === null || _a === void 0 ? void 0 : _a.value) {
+        if (labelAlign === "left") {
+            if (columns === 1) {
+                labelClasses.labelClasses1 = "zen-lg-3 zen-md-2 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+                labelClasses.labelClasses2 = "zen-lg-3 zen-md-2 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+                return labelClasses;
+            }
+            labelClasses.labelClasses1 = "zen-lg-2 zen-md-2 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+            labelClasses.labelClasses2 = "zen-lg-1 zen-md-2 zen-sm-4 zen-lg-start-5 zen-md-start-1 zen-sm-start-1";
+            return labelClasses;
+        }
+        if (columns === 1) {
+            labelClasses.labelClasses1 = "zen-lg-8 zen-md-6 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+            labelClasses.labelClasses2 = "zen-lg-8 zen-md-6 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+            return labelClasses;
+        }
+        labelClasses.labelClasses1 = "zen-lg-4 zen-md-3 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+        labelClasses.labelClasses2 = "zen-lg-4 zen-md-3 zen-sm-4 zen-lg-start-1 zen-md-start-1 zen-sm-start-1";
+        return labelClasses;
+    }
+    // if only second label exists
+    if ((_b = elementsState.elements.label2) === null || _b === void 0 ? void 0 : _b.value) {
+        if (labelAlign === "left") {
+            if (columns === 1) {
+                labelClasses.labelClasses2 = "zen-lg-1 zen-md-1 zen-sm-4 zen-sm-start-1";
+                return labelClasses;
+            }
+            labelClasses.labelClasses2 = "zen-lg-1 zen-md-1 zen-sm-4 zen-lg-start-4 zen-md-start-1 zen-sm-start-1";
+            return labelClasses;
+        }
+        if (columns === 1) {
+            labelClasses.labelClasses2 = "zen-lg-2 zen-md-3 zen-sm-4 zen-sm-start-1";
+            return labelClasses;
+        }
+        labelClasses.labelClasses2 = "zen-lg-3 zen-lg-start-4 zen-md-1 zen-sm-4 zen-lg-start-4 zen-md-start-1 zen-sm-start-1";
+        return labelClasses;
+    }
+    return labelClasses;
+};
+exports.getOneLabelTwoControlsClasses = getOneLabelTwoControlsClasses;