@geotab/zenith 3.1.0 → 3.1.1-beta.1

package/dist/formGroup/hooks/useElements.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { ITotalState, IElementsState } from "../types";
+export declare const getEmptyState: () => IElementsState;
+export declare const useElements: (children: React.ReactNode) => ITotalState;

package/dist/formGroup/hooks/useElements.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useElements = exports.getEmptyState = void 0;
+const useControls_1 = require("./rowHooks/useControls");
+const useControlClasses_1 = require("./rowHooks/useControlClasses");
+const useLabelClasses_1 = require("./rowHooks/useLabelClasses");
+const useInitializeState_1 = require("./rowHooks/useInitializeState");
+const getEmptyState = () => ({
+    control1: null,
+    control2: null,
+    label1: null,
+    label2: null
+});
+exports.getEmptyState = getEmptyState;
+const useElements = (children) => {
+    const state = (0, useInitializeState_1.useInitializeState)((0, exports.getEmptyState)(), children);
+    // apply classes
+    (0, useLabelClasses_1.useLabelClasses)(state);
+    (0, useControlClasses_1.useControlClasses)(state);
+    // apply readonly, className (cloneElement)
+    (0, useControls_1.useControls)(state);
+    return state;
+};
+exports.useElements = useElements;

package/dist/formGroup/hooks/useLabelAlign.d.ts

@@ -0,0 +1,2 @@
+import { TLabelAlign } from "../../formField/formField";
+export declare const useLabelAlign: (labelAlign?: TLabelAlign) => TLabelAlign;

package/dist/formGroup/hooks/useLabelAlign.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLabelAlign = void 0;
+const react_1 = require("react");
+const formLayoutProvider_1 = require("../../formLayout/utils/formLayoutProvider");
+const formSectionProvider_1 = require("../../formSection/utils/formSectionProvider");
+const formGroupProvider_1 = require("../utils/formGroupProvider");
+const useLabelAlign = (labelAlign) => {
+    const { labelAlign: labelSectionAlign } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);
+    const { labelAlign: layoutLabelAlign } = (0, react_1.useContext)(formLayoutProvider_1.FormLayoutContext);
+    const { labelAlign: labelFormLabelAlign } = (0, react_1.useContext)(formGroupProvider_1.FormGroupContext);
+    return labelAlign || labelFormLabelAlign || labelSectionAlign || layoutLabelAlign || "left";
+};
+exports.useLabelAlign = useLabelAlign;

package/dist/formGroup/hooks/useMode.d.ts

@@ -0,0 +1,2 @@
+import { TFormSectionMode } from "../../formSection/types";
+export declare const useMode: (mode?: TFormSectionMode) => TFormSectionMode;

package/dist/formGroup/hooks/useMode.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMode = void 0;
+const react_1 = require("react");
+const formLayoutProvider_1 = require("../../formLayout/utils/formLayoutProvider");
+const formSectionProvider_1 = require("../../formSection/utils/formSectionProvider");
+const useMode = (mode) => {
+    const { mode: layoutMode } = (0, react_1.useContext)(formLayoutProvider_1.FormLayoutContext);
+    const { mode: sectionMode } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);
+    return mode || sectionMode || layoutMode || "edit";
+};
+exports.useMode = useMode;

package/dist/formGroup/hooks/useRowElements.d.ts

@@ -0,0 +1,14 @@
+import { ITotalState } from "../types";
+export declare const useRowElements: (state: ITotalState) => {
+    customControl: any;
+    control1?: undefined;
+    control2?: undefined;
+    id1?: undefined;
+    id2?: undefined;
+} | {
+    control1: any;
+    control2: any;
+    id1: string;
+    id2: string;
+    customControl?: undefined;
+};

package/dist/formGroup/hooks/useRowElements.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRowElements = void 0;
+const react_1 = require("react");
+const useCustomRow_1 = require("./useCustomRow");
+const useRowElements = (state) => {
+    var _a, _b;
+    const id1 = (0, react_1.useId)();
+    const id2 = (0, react_1.useId)();
+    let control1;
+    let control2;
+    const { customControl } = (0, useCustomRow_1.useCustomRowElements)(state);
+    if (customControl) {
+        return { customControl };
+    }
+    if ((_a = state.elements.control1) === null || _a === void 0 ? void 0 : _a.value) {
+        control1 = (0, react_1.cloneElement)(state.elements.control1.value, { id: state.elements.control1.value.props.id || id1 });
+    }
+    if ((_b = state.elements.control2) === null || _b === void 0 ? void 0 : _b.value) {
+        control2 = (0, react_1.cloneElement)(state.elements.control2.value, { id: state.elements.control2.value.props.id || id2 });
+    }
+    return { control1, control2, id1, id2 };
+};
+exports.useRowElements = useRowElements;

package/dist/formGroup/hooks/useSectionType.d.ts

@@ -0,0 +1,2 @@
+import { TFormSectionType } from "../../formSection/types";
+export declare const useSectionType: (type?: TFormSectionType) => TFormSectionType;

package/dist/formGroup/hooks/useSectionType.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSectionType = void 0;
+const react_1 = require("react");
+const formSectionProvider_1 = require("../../formSection/utils/formSectionProvider");
+const formLayoutProvider_1 = require("../../formLayout/utils/formLayoutProvider");
+const useSectionType = (type) => {
+    const { type: formSectionType } = (0, react_1.useContext)(formSectionProvider_1.FormSectionContext);
+    const { sectionType } = (0, react_1.useContext)(formLayoutProvider_1.FormLayoutContext);
+    return type || sectionType || formSectionType || "card";
+};
+exports.useSectionType = useSectionType;

package/dist/formGroup/hooks/useToggle.d.ts

@@ -0,0 +1 @@
+export declare const useToggle: (result: any) => import("react/jsx-runtime").JSX.Element;

package/dist/formGroup/hooks/useToggle.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const formGroupProvider_1 = require("../utils/formGroupProvider");
+const useFormFieldValues_1 = require("../../commonHelpers/hooks/useFormFieldValues/useFormFieldValues");
+const listToggle_1 = require("../components/listToggle/listToggle");
+const useMode_1 = require("./useMode");
+const reviewTextControl_1 = require("../components/reviewTextControl");
+const useLanguage_1 = require("../../utils/localization/useLanguage");
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const getListClasses_1 = require("../utils/getListClasses");
+const useColumns_1 = require("../../formLayout/hooks/useColumns");
+const useToggle = (result) => {
+    const { controller, toggle, onToggleChange } = (0, react_1.useContext)(formGroupProvider_1.FormGroupContext);
+    const { value = false } = (0, useFormFieldValues_1.useFormFieldValues)(controller, { value: toggle, onChange: onToggleChange });
+    const hasToggle = (controller !== undefined) || (toggle !== undefined && onToggleChange !== undefined);
+    const mode = (0, useMode_1.useMode)();
+    const columns = (0, useColumns_1.useColumns)();
+    const { translate } = (0, useLanguage_1.useLanguage)();
+    // TODO: accessibility: do we need id here?
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [hasToggle && (0, jsx_runtime_1.jsx)(listToggle_1.ListToggle, {}), hasToggle && !value && mode === "review" ? (0, jsx_runtime_1.jsx)(reviewTextControl_1.ReviewTextControl, { secondary: true, className: (0, classNames_1.classNames)([(0, getListClasses_1.getListClasses)("left", columns, true)]), value: translate("Sub-options are not active.") }) : null, hasToggle && value ? result : value === undefined ? result : null] }), !hasToggle && result] });
+};
+exports.useToggle = useToggle;

package/dist/formGroup/hooks/useToggleList.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface IUseToggleListProps {
+    children: React.ReactNode;
+}
+export declare const useToggleList: ({ children }: IUseToggleListProps) => {
+    toggleList: import("react/jsx-runtime").JSX.Element;
+    id: string;
+};
+export {};

package/dist/formGroup/hooks/useToggleList.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useToggleList = void 0;
+const react_1 = require("react");
+const useToggle_1 = require("./useToggle");
+const useStateToElements_1 = require("./listHooks/useStateToElements");
+const useLabelClasses_1 = require("./listHooks/useLabelClasses");
+const useElementsState_1 = require("./listHooks/useElementsState");
+const useControlClasses_1 = require("./listHooks/useControlClasses");
+const useControls_1 = require("./listHooks/useControls");
+const useToggleList = ({ children }) => {
+    const state = (0, useElementsState_1.useElementsState)(children);
+    // apply classes
+    (0, useControlClasses_1.useControlClasses)(state);
+    (0, useLabelClasses_1.useLabelClasses)(state);
+    // apply readonly, cloneElement
+    (0, useControls_1.useControls)(state);
+    const id = (0, react_1.useId)();
+    const content = (0, useStateToElements_1.useStateToElements)(state);
+    const toggleList = (0, useToggle_1.useToggle)(content);
+    // TODO: make accessible: link id and label
+    return { toggleList, id };
+};
+exports.useToggleList = useToggleList;

package/dist/formGroup/types.d.ts

@@ -0,0 +1,53 @@
+import { ReactElement } from "react";
+import { TLabelAlign } from "../formField/formField";
+export interface IElementsState {
+    control1: IControlState | null;
+    control2: IControlState | null;
+    label1: ILabelState | null;
+    label2: ILabelState | null;
+}
+export interface IControlState {
+    type: "control";
+    value?: ReactElement<{
+        id?: string;
+        gridFitContent?: boolean;
+        width?: string | number;
+    }>;
+    className?: string;
+    isReadOnly?: boolean;
+}
+export interface ILabelState {
+    type: "label";
+    value?: string;
+    labelAlign?: TLabelAlign;
+    tooltip?: React.ReactNode;
+    className?: string;
+    readonlyValue?: string | React.ReactNode;
+}
+export interface ITotalState {
+    totalCount: number;
+    controlsCount: number;
+    labelsCount: number;
+    elements: IElementsState;
+    custom?: boolean;
+    customControlClasses?: string;
+    customLabelClasses?: string;
+}
+export interface IRow {
+    state: ITotalState;
+}
+export interface IOuterState {
+    label?: string;
+    labelAlign?: TLabelAlign;
+    tooltip?: React.ReactNode;
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface IControlClasses {
+    controlClasses1: string;
+    controlClasses2?: string;
+}
+export interface ILabelClasses {
+    labelClasses1: string;
+    labelClasses2?: string;
+}

package/dist/formGroup/types.js

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

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

@@ -0,0 +1,2 @@
+import { IControlState } from "../types";
+export declare const applyControlClasses: (control: IControlState, controlClasses: string) => void;

package/dist/formGroup/utils/applyControlClasses.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyControlClasses = void 0;
+const classNames_1 = require("../../commonHelpers/classNames/classNames");
+const convertStateToClasses_1 = require("../../gridLayout/utils/convertStateToClasses");
+const fillGridState_1 = require("../../gridLayout/utils/fillGridState");
+const hasGridClasses_1 = require("../../gridLayout/utils/hasGridClasses");
+const updateGridStateFromClassNames_1 = require("../../gridLayout/utils/updateGridStateFromClassNames");
+const isGridItem_1 = require("../../gridLayout/utils/isGridItem");
+const updateGridStateFromProps_1 = require("../../gridLayout/utils/updateGridStateFromProps");
+const constants_1 = require("../../gridLayout/utils/constants");
+const getGridClasses_1 = require("../../gridLayout/utils/getGridClasses");
+const convertClassesToState_1 = require("../../gridLayout/utils/convertClassesToState");
+const applyControlClasses = (control, controlClasses) => {
+    var _a, _b, _c, _d;
+    const hasGClasses = (0, hasGridClasses_1.hasGridClasses)({ props: { className: control.className || "" } });
+    const hasGProps = (0, isGridItem_1.isGridItem)(control.value);
+    const colState = { desktop: 12, tablet: 8, mobile: 4 };
+    if ((_a = control.value) === null || _a === void 0 ? void 0 : _a.props.gridFitContent) {
+        const { restClasses } = (0, getGridClasses_1.getGridClasses)(control.className || "");
+        control.className = (0, classNames_1.classNames)([...restClasses, constants_1.FIT_CONTENT_CLASS]);
+        return;
+    }
+    if ((_b = control.className) === null || _b === void 0 ? void 0 : _b.includes(constants_1.FIT_CONTENT_CLASS)) {
+        const { restClasses } = (0, getGridClasses_1.getGridClasses)(control.className);
+        control.className = (0, classNames_1.classNames)(restClasses);
+        return;
+    }
+    if (hasGProps) {
+        const state = {};
+        (0, updateGridStateFromProps_1.updateGridStateFromProps)(state, control.value, colState);
+        const defaultProps = (0, convertClassesToState_1.convertClassesToState)(controlClasses);
+        const allProps = Object.assign(Object.assign({}, defaultProps), state);
+        (0, fillGridState_1.fillGridState)(allProps, colState);
+        const gridClasses = (0, convertStateToClasses_1.convertStateToClasses)(allProps);
+        const classesSet = new Set([...Array(gridClasses), ...(((_c = control.className) === null || _c === void 0 ? void 0 : _c.split(" ")) || [])]);
+        control.className = (0, classNames_1.classNames)([...classesSet]);
+        return;
+    }
+    if (hasGClasses) {
+        const state = {};
+        (0, updateGridStateFromClassNames_1.updateGridStateFromClassNames)(state, { props: { className: control.className } }, colState);
+        (0, fillGridState_1.fillGridState)(state, colState);
+        const gridClasses = (0, convertStateToClasses_1.convertStateToClasses)(state);
+        const classesSet = new Set([...gridClasses, ...(((_d = control.className) === null || _d === void 0 ? void 0 : _d.split(" ")) || [])]);
+        control.className = (0, classNames_1.classNames)([...classesSet]);
+        return;
+    }
+    control.className = `${controlClasses} ${control.className || ""}`.trim();
+};
+exports.applyControlClasses = applyControlClasses;

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

@@ -0,0 +1,12 @@
+import { TLabelAlign } from "../../formField/formField";
+import { TFormLayoutColumns } from "../../formLayout/types";
+import { IControlClasses, ITotalState } from "../types";
+interface IGetCustomControlClassesParams {
+    state: ITotalState;
+    labelAlign: TLabelAlign;
+    columns: TFormLayoutColumns;
+    getOneLabelOneControlClasses: (...args: any[]) => IControlClasses;
+    getZeroLabelOneControlClasses: (...args: any[]) => IControlClasses;
+}
+export declare const applyCustomControlClasses: ({ state, labelAlign, columns, getOneLabelOneControlClasses, getZeroLabelOneControlClasses }: IGetCustomControlClassesParams) => void;
+export {};

package/dist/formGroup/utils/applyCustomControlClasses.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyCustomControlClasses = void 0;
+const applyCustomControlClasses = ({ state, labelAlign, columns, getOneLabelOneControlClasses, getZeroLabelOneControlClasses }) => {
+    var _a, _b, _c;
+    if (state.totalCount === 4) {
+        state.customControlClasses = getOneLabelOneControlClasses(((_a = state.elements.label1) === null || _a === void 0 ? void 0 : _a.labelAlign) || labelAlign, columns).controlClasses1;
+        return;
+    }
+    if (state.totalCount === 3 && state.labelsCount === 1 && !state.elements.label1 && state.elements.label2) {
+        state.customControlClasses = getZeroLabelOneControlClasses(columns).controlClasses1;
+        return;
+    }
+    if (state.totalCount === 3 && state.labelsCount === 1 && state.controlsCount === 2) {
+        state.customControlClasses = getOneLabelOneControlClasses(((_b = state.elements.label1) === null || _b === void 0 ? void 0 : _b.labelAlign) || labelAlign, columns).controlClasses1;
+        return;
+    }
+    if (state.totalCount === 2 && state.controlsCount === 1 && state.labelsCount === 1) {
+        state.customControlClasses = getOneLabelOneControlClasses(((_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.labelAlign) || labelAlign, columns).controlClasses1;
+        return;
+    }
+    if (state.totalCount === 2 && state.controlsCount === 2) {
+        state.customControlClasses = getZeroLabelOneControlClasses(columns).controlClasses1;
+        return;
+    }
+    if (state.totalCount === 1 && state.controlsCount === 1) {
+        state.customControlClasses = getZeroLabelOneControlClasses(columns).controlClasses1;
+        return;
+    }
+};
+exports.applyCustomControlClasses = applyCustomControlClasses;

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

@@ -0,0 +1,12 @@
+import { TLabelAlign } from "../../formField/formField";
+import { TFormLayoutColumns, TFormLayoutMode } from "../../formLayout/types";
+import { ILabelClasses, ITotalState } from "../types";
+interface IApplyCustomLabelClassesProps {
+    state: ITotalState;
+    labelAlign?: TLabelAlign;
+    columns?: TFormLayoutColumns;
+    mode?: TFormLayoutMode;
+    getOneLabelOneControlClasses: (...args: any[]) => ILabelClasses;
+}
+export declare const applyCustomLabelClasses: ({ state, labelAlign, columns, getOneLabelOneControlClasses }: IApplyCustomLabelClassesProps) => void;
+export {};

package/dist/formGroup/utils/applyCustomLabelClasses.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyCustomLabelClasses = void 0;
+const applyCustomLabelClasses = ({ state, labelAlign, columns, getOneLabelOneControlClasses }) => {
+    var _a, _b, _c;
+    if (state.totalCount === 4) {
+        state.customLabelClasses = getOneLabelOneControlClasses(((_a = state.elements.label1) === null || _a === void 0 ? void 0 : _a.labelAlign) || labelAlign, columns).labelClasses1;
+        return;
+    }
+    if (state.totalCount === 3 && state.labelsCount === 1 && state.controlsCount === 2) {
+        state.customLabelClasses = getOneLabelOneControlClasses(((_b = state.elements.label1) === null || _b === void 0 ? void 0 : _b.labelAlign) || labelAlign, columns).labelClasses1;
+        return;
+    }
+    if (state.totalCount === 2 && state.controlsCount === 1 && state.labelsCount === 1) {
+        state.customLabelClasses = getOneLabelOneControlClasses(((_c = state.elements.label1) === null || _c === void 0 ? void 0 : _c.labelAlign) || labelAlign, columns).labelClasses1;
+        return;
+    }
+    return;
+};
+exports.applyCustomLabelClasses = applyCustomLabelClasses;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { IFormGroupProps } from "../formGroup";
+import { IReactFormItemController } from "../../commonHelpers/zenComponent";
+export interface IFormGroupProviderProps extends IFormGroupProps, IReactFormItemController {
+    toggle?: boolean;
+    onToggleChange?: (val: boolean) => void;
+}
+export declare const FormGroupContext: import("react").Context<IFormGroupProviderProps>;
+export declare const FormGroupProvider: React.FC<IFormGroupProviderProps>;

package/dist/formGroup/utils/formGroupProvider.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormGroupProvider = exports.FormGroupContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.FormGroupContext = (0, react_1.createContext)({});
+const FormGroupProvider = ({ children, label, labelAlign, tooltip, controller, toggle, onToggleChange }) => ((0, jsx_runtime_1.jsx)(exports.FormGroupContext.Provider, { value: { label, labelAlign, tooltip, controller, toggle, onToggleChange }, children: children }));
+exports.FormGroupProvider = FormGroupProvider;

package/dist/formGroup/utils/getControlClasses/getControlClasses.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 { IControlClasses } from "./types";
+export declare const getControlClasses: (elementsState: ITotalState, columns: TFormLayoutColumns, sectionAlign?: TLabelAlign, mode?: TFormSectionMode, sectionType?: TFormSectionType) => IControlClasses;

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getControlClasses = void 0;
+const getModalSectionClasses_1 = require("./getModalSectionClasses");
+const getOneLabelOneControlClasses_1 = require("./getOneLabelOneControlClasses");
+const getOneLabelTwoControlsClasses_1 = require("./getOneLabelTwoControlsClasses");
+const getTwoLabelsOneControlClasses_1 = require("./getTwoLabelsOneControlClasses");
+const getTwoLabelsTwoControlsClasses_1 = require("./getTwoLabelsTwoControlsClasses");
+const getZeroLabelOneControlClasses_1 = require("./getZeroLabelOneControlClasses");
+// 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: interfaces
+// TODO: return classes for each control separately
+// eslint-disable-next-line complexity
+const getControlClasses = (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 controlClasses = {
+        controlClasses1: "",
+        controlClasses2: ""
+    };
+    // TODO: do we need consider align?
+    if (sectionType === "modal") {
+        return (0, getModalSectionClasses_1.getModalSectionClasses)();
+    }
+    // 0 label, 1 control
+    if (totalCount === 1 && controlsCount === 1) {
+        return (0, getZeroLabelOneControlClasses_1.getZeroLabelOneControlClasses)(columns);
+    }
+    // 1 label, 1 control
+    if (totalCount === 2) {
+        return (0, getOneLabelOneControlClasses_1.getOneLabelOneControlClasses)(labelAlign1, columns);
+    }
+    if (totalCount === 3) {
+        if (labelsCount === 1 && controlsCount === 2) {
+            // if first label exists
+            return (0, getOneLabelTwoControlsClasses_1.getOneLabelTwoControlsClasses)(elementsState, columns, labelAlign1);
+        }
+        // TODO: remove unnecessary classes
+        if (labelsCount === 2 && controlsCount === 1) {
+            return (0, getTwoLabelsOneControlClasses_1.getTwoLabelsOneControlClasses)(labelAlign1, columns);
+        }
+    }
+    if (totalCount === 4) {
+        if (mode === "review") {
+            if (labelAlign1 === "top") {
+                if (columns === 1) {
+                    controlClasses.controlClasses1 = "zen-lg-start-1 zen-md-start-1 zen-sm-start-1 zen-lg-4 zen-md-3 zen-sm-4";
+                    controlClasses.controlClasses2 = "zen-lg-start-1 zen-md-start-1 zen-sm-start-1 zen-lg-4 zen-md-3 zen-sm-4";
+                    return controlClasses;
+                }
+                controlClasses.controlClasses1 = "zen-lg-start-1 zen-md-start-1 zen-sm-start-1 zen-lg-3 zen-md-2 zen-sm-4";
+                controlClasses.controlClasses2 = "zen-lg-start-1 zen-md-start-1 zen-sm-start-1 zen-lg-3 zen-md-2 zen-sm-4";
+                return controlClasses;
+            }
+            if (columns === 1) {
+                controlClasses.controlClasses1 = "zen-lg-start-1 zen-md-start-1 zen-sm-start-1 zen-lg-3 zen-md-2 zen-sm-4";
+                controlClasses.controlClasses2 = "zen-lg-start-1 zen-md-start-1 zen-sm-start-1 zen-lg-3 zen-md-2 zen-sm-4";
+                return controlClasses;
+            }
+            controlClasses.controlClasses1 = "zen-lg-start-1 zen-md-start-1 zen-sm-start-1 zen-lg-2 zen-md-3 zen-sm-4";
+            controlClasses.controlClasses2 = "zen-lg-start-1 zen-md-start-1 zen-sm-start-1 zen-lg-2 zen-md-3 zen-sm-4";
+            return controlClasses;
+        }
+        // edit mode
+        return (0, getTwoLabelsTwoControlsClasses_1.getTwoLabelsTwoControlsClasses)(labelAlign1, columns);
+    }
+    // TODO:
+    return controlClasses;
+};
+exports.getControlClasses = getControlClasses;

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

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

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

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

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOneLabelOneControlClasses = void 0;
+const getOneLabelOneControlClasses = (labelAlign, columns) => {
+    const controlClasses = {
+        controlClasses1: "",
+        controlClasses2: ""
+    };
+    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";
+    return controlClasses;
+};
+exports.getOneLabelOneControlClasses = getOneLabelOneControlClasses;

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

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

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOneLabelTwoControlsClasses = void 0;
+const getOneLabelTwoControlsClasses = (totalState, columns, labelAlign) => {
+    var _a, _b;
+    const controlClasses = {
+        controlClasses1: "",
+        controlClasses2: ""
+    };
+    // if first label exists
+    if ((_a = totalState.elements.label1) === null || _a === void 0 ? void 0 : _a.value) {
+        if (labelAlign === "left") {
+            if (columns === 1) {
+                controlClasses.controlClasses1 = "zen-lg-2 zen-md-2 zen-sm-4";
+                controlClasses.controlClasses2 = "zen-lg-2 zen-md-2 zen-sm-4";
+                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-4 zen-sm-start-1";
+            return controlClasses;
+        }
+        if (columns === 1) {
+            controlClasses.controlClasses1 = "zen-lg-4 zen-md-3 zen-sm-4 zen-sm-start-1";
+            controlClasses.controlClasses2 = "zen-lg-4 zen-md-3 zen-sm-4 zen-sm-start-1";
+            return controlClasses;
+        }
+        controlClasses.controlClasses1 = "zen-lg-3 zen-md-2 zen-sm-4 zen-sm-start-1";
+        controlClasses.controlClasses2 = "zen-lg-3 zen-md-2 zen-sm-4 zen-sm-start-1";
+        return controlClasses;
+    }
+    if ((_b = totalState.elements.label2) === null || _b === void 0 ? void 0 : _b.value) {
+        if (labelAlign === "left") {
+            if (columns === 1) {
+                controlClasses.controlClasses1 = "zen-lg-4 zen-md-3 zen-sm-4";
+                controlClasses.controlClasses2 = "zen-lg-3 zen-md-2 zen-sm-4";
+                return controlClasses;
+            }
+            controlClasses.controlClasses1 = "zen-lg-3 zen-md-4 zen-sm-4 zen-sm-start-1";
+            controlClasses.controlClasses2 = "zen-lg-2 zen-md-3 zen-sm-4 zen-sm-start-1";
+            return controlClasses;
+        }
+        if (columns === 1) {
+            controlClasses.controlClasses1 = "zen-lg-4 zen-md-3 zen-sm-4";
+            controlClasses.controlClasses2 = "zen-lg-start-5 zen-lg-4 zen-md-start-4 zen-md-3 zen-sm-4";
+            return controlClasses;
+        }
+        controlClasses.controlClasses1 = "zen-lg-3 zen-md-4 zen-sm-4 zen-sm-start-1";
+        controlClasses.controlClasses2 = "zen-lg-3 zen-lg-start-4 zen-md-3 zen-sm-4 zen-sm-start-1";
+        return controlClasses;
+    }
+    return controlClasses;
+};
+exports.getOneLabelTwoControlsClasses = getOneLabelTwoControlsClasses;

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

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