import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { Collapse } from "@material-ui/core";
import { XBaseContainer } from "./XBaseContainer";
import { Droppable } from "react-beautiful-dnd";
import { XDesignWrapper } from "../Utilities/XDesignWrapper";
import { DataUtilities } from "../../Common/DataUtilities";
import { StackContainerColumn, StackContainerDiv } from "./XStackContainer";
import { FormDesignConstants, FormMode, WidthUnitInterface } from "../FormDesignConstants";
import { XBaseStackContainer } from "./XBaseStackContainer";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { PropertyEditorList } from "../../CommonUI/PropertyEditing/PropertyEditorList";
import { PropertyEditorColor } from "../../CommonUI/PropertyEditing/PropertyEditorColor";
import { PropertyEditorSelect } from "../../CommonUI/PropertyEditing/PropertyEditorSelect";
import { DefaultOnOff } from "../Utilities/DefaultOnOff";
import { PropertyEditorOptionWithButtonGroup } from "../../CommonUI/PropertyEditing/PropertyEditorOptionWithButtonGroup";
import { ChildFullWidthDiv } from "../Controls/XCommonStyled";
import { XRuntimeWrapper } from "../Utilities/XRuntimeWrapper";
const ContainerDiv = styled("div") `
    width: 100%;
    padding: ${(props) => props.padding || 0}px;
    min-height: ${(props) => (props.padding || 0) * 2 + (props.minHeight || 75)}px;
    border: ${(props) => props.hasBorder
    ? `${(props.borderStyle || FormDesignConstants.CONTAINER_BORDER_STYLE).toLowerCase()} ${props.borderWidth || FormDesignConstants.CONTAINER_BORDER_WIDTH}px ${props.borderColor || FormDesignConstants.CONTAINER_BORDER_COLOR}`
    : "none"};
    border-radius: ${(props) => props.borderRadius || FormDesignConstants.CONTAINER_BORDER_RADIOUS}px;
    // overflow: hidden;
    background-color: ${(props) => props.backgroundColor || FormDesignConstants.CONTAINER_BACKGROUND_COLOR};
    position: relative;
`;
const RowDiv = styled("div") `
    margin: ${(props) => -1 * (props.colGap || (props.lineBetweenColumns ? 1 : 0))}px;
    flex-wrap: wrap;
    display: flex;
`;
const ColumnDiv = styled("div") `
    min-height: ${(props) => (props.padding || 0) + (props.minHeight || 75)}px;
    padding: ${(props) => props.padding || 0}px;
    margin: ${(props) => props.colGap || (props.lineBetweenColumns ? 1 : 0)}px;
    flex: ${(props) => props.width}${(props) => (props.widthUnit === WidthUnitInterface.PIXEL ? "px" : "")};
    min-width: ${(props) => (props.minWidth ? `${props.minWidth}px` : "0px")};
    max-width: ${(props) => (props.maxWidth ? `${props.maxWidth}px` : "none")};
    border: ${(props) => props.hasBorder
    ? `${(props.borderStyle || FormDesignConstants.CONTAINER_BORDER_STYLE).toLowerCase()} ${props.borderWidth || FormDesignConstants.CONTAINER_BORDER_COLOR}px ${props.borderColor || FormDesignConstants.CONTAINER_BORDER_COLOR}`
    : "none"};
    border-radius: ${(props) => props.borderRadius || FormDesignConstants.CONTAINER_BORDER_RADIOUS}px;
    // overflow: hidden;
    position: relative;
    background-color: ${(props) => (props.backgroundColor ? props.backgroundColor : "transparent")};
`;
var Orientation;
(function (Orientation) {
    Orientation["Vertical"] = "veritical";
    Orientation["Horizontal"] = "horizontal";
})(Orientation || (Orientation = {}));
const ColumnDivider = styled("div") `
    background-color: ${(props) => props.lineColorBetweenColumns};
    display: flex;
    margin: ${(props) => props.colGap}px 0px;
    width: ${(props) => (props.orientation === Orientation.Vertical ? `${props.lineWidthBetweenColumns}px` : "100%")};
    height: ${(props) => props.orientation === Orientation.Horizontal ? `${props.lineWidthBetweenColumns}px` : "auto"};
`;
export class XColumnContainerColumn extends XBaseStackContainer {
    constructor() {
        super(...arguments);
        this.targetWidth = 100;
        this.spacerColumn = false;
        this.columnBorderColor = "lightGray";
        this.columnBorderRadius = 10;
        this.columnBorderWidth = 2;
    }
    getAddedData() {
        return;
    }
    // render() {
    //     throw new Error('cannot render this container.  internal only');
    // }
    // avoiding refresh on this as it is never added
    setFormDataValue(fieldName, value) {
        var _a;
        (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.setFormDataValue(fieldName, value);
    }
    renderEditUI() {
        return null;
    }
    hasOwnBorder() {
        return this.overrideFormBorderSettings === DefaultOnOff.On;
    }
    borderColor() {
        return (this.hasOwnBorder() && this.columnBorderColor) || undefined;
    }
    borderStyle() {
        return (this.hasOwnBorder() && this.columnBorderStyle) || undefined;
    }
    borderWidth() {
        return (this.hasOwnBorder() && this.columnBorderWidth) || undefined;
    }
    borderRadius() {
        return (this.hasOwnBorder() && this.columnBorderRadius) || undefined;
    }
    backgroundColor() {
        return this.columnBackgroundColor;
    }
    getInnerMargin() {
        return this.innerMargin;
    }
}
export class XColumnContainer extends XBaseContainer {
    constructor() {
        super(...arguments);
        this.columns = [];
        this.defaultShowColumnBorder = false;
        this.defaultColumnBorderColor = "lightGray";
        this.defaultColumnBackgroundColor = null;
        this.gapBetweenColumns = FormDesignConstants.GAP_BETWEEN_COLUMNS;
        this.lineBetweenColumns = false;
        this.lineWidthBetweenColumns = FormDesignConstants.LINE_WIDTH_BETWEEN_COLUMNS;
        this.lineColorBetweenColumns = FormDesignConstants.LINE_COLOR_BETWEEN_COLUMNS;
    }
    addColumn(col) {
        this.add(col);
    }
    add(control, index) {
        // if we are adding this way, we add a default column configuration for this.
        if (control instanceof XColumnContainerColumn) {
            let container = control;
            if (!index) {
                this.columns.push(container);
            }
            else {
                this.columns.splice(index, 0, container);
            }
        }
        else {
            throw new Error("Must be a stack container, cannot add other types of controls here");
        }
        if (this.getFormContext())
            control.setFormContext(this.getFormContext());
    }
    remove(control) {
        for (let col of this.columns) {
            const index = col.getControls().indexOf(control, 0);
            if (index > -1) {
                col.getControls().splice(index, 1);
            }
        }
    }
    find(id) {
        for (let col of this.columns) {
            if (col.id === id)
                return col;
            for (let c of col.getControls()) {
                if (c.id === id) {
                    return c;
                }
                if (c instanceof XBaseContainer) {
                    let found = c.find(id);
                    if (found)
                        return found;
                }
            }
        }
        return null;
    }
    getInnerMargin() {
        var _a, _b;
        return this.paddingBetweenContainerAndColumns || ((_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInnerContainerMargin);
    }
    getFormWidth() {
        var _a, _b;
        return (_b = ((_a = this.getFormContext()) !== null && _a !== void 0 ? _a : this.getFormContext())) === null || _b === void 0 ? void 0 : _b.form.getContentWidth();
    }
    render() {
        const formWidth = this.getFormWidth();
        let sumMinWidth = 0;
        if (this.columns.length === 0) {
            // no cols, lets add some
            // add 2 cols by default
            this.add(new XColumnContainerColumn());
            this.add(new XColumnContainerColumn());
        }
        let mode = FormMode.Runtime;
        let editContext = this.getFormContext();
        if (editContext)
            mode = editContext.mode;
        if (mode === FormMode.FormDesign) {
            return (_jsx(ContainerDiv, Object.assign({ padding: this.getInnerMargin(), hasBorder: this.hasBorder(), borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), minHeight: this.columns.length > 0 ? 1 : 75 }, { children: _jsx(RowDiv, Object.assign({ colGap: this.gapBetweenColumns / 2, lineBetweenColumns: this.lineBetweenColumns }, { children: this.columns.map((col, index) => {
                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
                        sumMinWidth += col.minSizePx || 0;
                        let isNextLine = false;
                        if (index > 0) {
                            isNextLine = !!formWidth && sumMinWidth > formWidth;
                        }
                        if (isNextLine)
                            sumMinWidth = col.minSizePx || 0;
                        return (_jsxs(React.Fragment, { children: [this.lineBetweenColumns && index > 0 && (_jsx(ColumnDivider, { "data-testid": "line-between-columns", lineColorBetweenColumns: this.lineColorBetweenColumns, lineWidthBetweenColumns: this.lineWidthBetweenColumns, colGap: this.gapBetweenColumns / 2, orientation: isNextLine ? Orientation.Horizontal : Orientation.Vertical }, void 0)),
                                _jsxs(ColumnDiv, Object.assign({ width: col.targetWidth, widthUnit: col.widthUnit, minWidth: col.minSizePx, maxWidth: col.maxSizePx, colGap: this.gapBetweenColumns / 2, minHeight: col.getControls().length > 0 ? 1 : 75, padding: col.getInnerMargin() ||
                                        this.defaultInnerColumnMargin || ((_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInnerColumnMargin), hasBorder: col.hasOwnBorder() ||
                                        (col.overrideFormBorderSettings === DefaultOnOff.DEFAULT &&
                                            this.defaultShowColumnBorder), backgroundColor: col.backgroundColor() ||
                                        this.defaultColumnBackgroundColor || ((_d = (_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultContainerBackgroundColor), borderColor: col.borderColor() ||
                                        this.defaultColumnBorderColor || ((_f = (_e = this.getFormContext()) === null || _e === void 0 ? void 0 : _e.form) === null || _f === void 0 ? void 0 : _f.defaultContainerBorderColor), borderStyle: col.borderStyle() ||
                                        this.defaultColumnBorderStyle || ((_h = (_g = this.getFormContext()) === null || _g === void 0 ? void 0 : _g.form) === null || _h === void 0 ? void 0 : _h.defaultContainerBorderStyle), borderWidth: col.borderWidth() ||
                                        this.defaultColumnBorderWidth || ((_k = (_j = this.getFormContext()) === null || _j === void 0 ? void 0 : _j.form) === null || _k === void 0 ? void 0 : _k.defaultContainerBorderWidth) || ((_m = (_l = this.getFormContext()) === null || _l === void 0 ? void 0 : _l.form) === null || _m === void 0 ? void 0 : _m.defaultContainerBorderWidth), borderRadius: col.borderRadius() ||
                                        this.defaultColumnBorderRadius || ((_p = (_o = this.getFormContext()) === null || _o === void 0 ? void 0 : _o.form) === null || _p === void 0 ? void 0 : _p.defaultContainerBorderRadius), lineBetweenColumns: this.lineBetweenColumns }, { children: [_jsx(Droppable, Object.assign({ droppableId: col.id }, { children: (provided, snapShot) => {
                                                return (_jsxs(StackContainerDiv, Object.assign({ ref: provided.innerRef }, provided.droppableProps, { style: {
                                                        border: snapShot.isDraggingOver
                                                            ? `${FormDesignConstants.DROPPABLE_BORDER_STYLE} ${FormDesignConstants.DROPPABLE_BORDER_WIDTH}px ${FormDesignConstants.DROPPABLE_BORDER_COLOR}`
                                                            : "none",
                                                        borderRadius: snapShot.isDraggingOver
                                                            ? FormDesignConstants.DROPPABLE_BORDER_RADIUS
                                                            : 0,
                                                    } }, { children: [col.getControls().map((control, index) => {
                                                            var _a, _b;
                                                            return (_jsx(StackContainerColumn, Object.assign({ colGap: col.interControlSpacing ||
                                                                    this.interControlSpacing || ((_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInterControlSpacing) }, { children: _jsx(XDesignWrapper, Object.assign({ id: control.id, index: index, innerComponent: control, editContext: this.getFormContext() }, { children: control.render() }), control.id) }), index));
                                                        }), provided.placeholder] }), void 0));
                                            } }), void 0), col.getControls().length === 0 &&
                                            this.renderEmptyControlDiv(this.gapBetweenColumns)] }), col.id)] }, col.id));
                    }) }), void 0) }), "column" + this.columns[0].id));
        }
        else {
            return (_jsx(ContainerDiv, Object.assign({ padding: this.getInnerMargin(), hasBorder: this.hasBorder(), borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), minHeight: this.columns.length > 0 ? 1 : 75 }, { children: _jsx(RowDiv, Object.assign({ colGap: this.gapBetweenColumns / 2, lineBetweenColumns: this.lineBetweenColumns }, { children: this.columns.map((col, index) => {
                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
                        sumMinWidth += col.minSizePx || 0;
                        let isNextLine = false;
                        if (index > 0) {
                            isNextLine = !!formWidth && sumMinWidth > formWidth;
                        }
                        if (isNextLine)
                            sumMinWidth = col.minSizePx || 0;
                        return (_jsxs(React.Fragment, { children: [this.lineBetweenColumns && index > 0 && (_jsx(ColumnDivider, { "data-testid": "line-between-columns", lineColorBetweenColumns: this.lineColorBetweenColumns, lineWidthBetweenColumns: this.lineWidthBetweenColumns, colGap: this.gapBetweenColumns / 2, orientation: isNextLine ? Orientation.Horizontal : Orientation.Vertical }, void 0)),
                                _jsxs(ColumnDiv, Object.assign({ width: col.targetWidth, widthUnit: col.widthUnit, minWidth: col.minSizePx, maxWidth: col.maxSizePx, colGap: this.gapBetweenColumns / 2, minHeight: col.getControls().length > 0 ? 1 : 75, padding: col.getInnerMargin() ||
                                        this.defaultInnerColumnMargin || ((_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInnerColumnMargin), backgroundColor: col.backgroundColor() ||
                                        this.defaultColumnBackgroundColor || ((_d = (_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultContainerBackgroundColor), hasBorder: col.hasOwnBorder() ||
                                        (col.overrideFormBorderSettings === DefaultOnOff.DEFAULT &&
                                            this.defaultShowColumnBorder), borderColor: col.borderColor() ||
                                        this.defaultColumnBorderColor || ((_f = (_e = this.getFormContext()) === null || _e === void 0 ? void 0 : _e.form) === null || _f === void 0 ? void 0 : _f.defaultContainerBorderColor), borderStyle: col.borderStyle() ||
                                        this.defaultColumnBorderStyle || ((_h = (_g = this.getFormContext()) === null || _g === void 0 ? void 0 : _g.form) === null || _h === void 0 ? void 0 : _h.defaultContainerBorderStyle), borderWidth: col.borderWidth() ||
                                        this.defaultColumnBorderWidth || ((_k = (_j = this.getFormContext()) === null || _j === void 0 ? void 0 : _j.form) === null || _k === void 0 ? void 0 : _k.defaultContainerBorderWidth), borderRadius: col.borderRadius() ||
                                        this.defaultColumnBorderRadius || ((_m = (_l = this.getFormContext()) === null || _l === void 0 ? void 0 : _l.form) === null || _m === void 0 ? void 0 : _m.defaultContainerBorderRadius) || ((_p = (_o = this.getFormContext()) === null || _o === void 0 ? void 0 : _o.form) === null || _p === void 0 ? void 0 : _p.defaultContainerBorderRadius), lineBetweenColumns: this.lineBetweenColumns }, { children: [_jsx(StackContainerDiv, { children: col.getControls().map((control, index) => {
                                                var _a, _b;
                                                return (_jsx(StackContainerColumn, Object.assign({ colGap: col.interControlSpacing ||
                                                        this.interControlSpacing || ((_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInterControlSpacing) }, { children: _jsx(XRuntimeWrapper, { innerComponent: control, context: this.getFormContext() }, void 0) }), index));
                                            }) }, void 0), col.getControls().length === 0 &&
                                            mode !== FormMode.Runtime &&
                                            this.renderEmptyControlDiv(this.gapBetweenColumns, "Add controls in the form design tab")] }), col.id)] }, col.id));
                    }) }), void 0) }), "column" + this.columns[0].id));
        }
    }
    getAddedData() {
        return;
    }
    getStorageData() {
        let retData = DataUtilities.cloneWithoutReact(this, ["columns", "form", "container", "_formContext"]);
        let colData = [];
        this.columns.map((c) => {
            colData.push(c.getStorageData());
            return c;
        });
        Reflect.set(retData, "__columns", colData);
        return retData;
    }
    setStorageData(data) {
        DataUtilities.spreadData(this, data, ["__columns"]);
        let containerArray = Reflect.get(data, "__columns");
        if (containerArray && containerArray instanceof Array && containerArray.length !== 0) {
            for (let container of containerArray) {
                let val = new XColumnContainerColumn();
                let control = val;
                control.setFormContext(this.getFormContext());
                control.setStorageData(container);
                this.columns.push(control);
            }
        }
    }
    setOrder(id, order) { }
    getControls() {
        let controls = [];
        for (let col of this.columns) {
            controls.push(...col.getControls());
        }
        return controls;
    }
    renderEditUI() {
        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
        return (_jsxs(ChildFullWidthDiv, { children: [_jsx(PropertyEditorBoolean, { editObject: this, label: "Line Between Columns", propertyName: "lineBetweenColumns", updateCallback: this.controlUpdate }, void 0),
                _jsxs(Collapse, Object.assign({ in: this.lineBetweenColumns }, { children: [_jsx(PropertyEditorColor, { editObject: this, label: "Line Color Between Columns", propertyName: "lineColorBetweenColumns", updateCallback: this.controlUpdate, parentDefaultValue: FormDesignConstants.LINE_COLOR_BETWEEN_COLUMNS }, void 0),
                        _jsx(PropertyEditorInteger, { editObject: this, label: "Line Width Between Columns", propertyName: "lineWidthBetweenColumns", updateCallback: this.controlUpdate, parentDefaultValue: FormDesignConstants.LINE_WIDTH_BETWEEN_COLUMNS }, void 0)] }), void 0),
                _jsx(PropertyEditorInteger, { editObject: this, label: "Gap Between Columns", propertyName: "gapBetweenColumns", updateCallback: this.controlUpdate, parentDefaultValue: FormDesignConstants.GAP_BETWEEN_COLUMNS }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this, label: "Gap Between Controls", propertyName: "interControlSpacing", updateCallback: this.controlUpdate, parentDefaultValue: (_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInterControlSpacing }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this, label: "Inner Margin", propertyName: "paddingBetweenContainerAndColumns", updateCallback: this.controlUpdate, parentDefaultValue: (_d = (_c = this.getFormContext()) === null || _c === void 0 ? void 0 : _c.form) === null || _d === void 0 ? void 0 : _d.defaultInnerContainerMargin }, void 0),
                _jsx(PropertyEditorColor, { editObject: this, label: "Container Color", propertyName: "containerBackgroundColor", updateCallback: this.controlUpdate, parentDefaultValue: (_f = (_e = this.getFormContext()) === null || _e === void 0 ? void 0 : _e.form) === null || _f === void 0 ? void 0 : _f.defaultContainerBackgroundColor }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this, label: "(Default) Inner Column Margin", propertyName: "defaultInnerColumnMargin", updateCallback: this.controlUpdate, parentDefaultValue: (_h = (_g = this.getFormContext()) === null || _g === void 0 ? void 0 : _g.form) === null || _h === void 0 ? void 0 : _h.defaultInnerColumnMargin }, void 0),
                _jsx(PropertyEditorColor, { editObject: this, label: "(Default) Column Color", propertyName: "defaultColumnBackgroundColor", updateCallback: this.controlUpdate }, void 0), this.renderBorderConfigUI(), _jsx(PropertyEditorBoolean, { editObject: this, label: "Show Columns Border", propertyName: "defaultShowColumnBorder", updateCallback: this.controlUpdate }, void 0),
                _jsx(Collapse, Object.assign({ in: this.defaultShowColumnBorder }, { children: _jsxs(ChildFullWidthDiv, { children: [_jsx(PropertyEditorInteger, { editObject: this, label: "Columns Border Width", propertyName: "defaultColumnBorderWidth", updateCallback: this.controlUpdate, parentDefaultValue: (_k = (_j = this.getFormContext()) === null || _j === void 0 ? void 0 : _j.form) === null || _k === void 0 ? void 0 : _k.defaultContainerBorderWidth }, void 0),
                            _jsx(PropertyEditorInteger, { editObject: this, label: "Columns Border Radius", propertyName: "defaultColumnBorderRadius", updateCallback: this.controlUpdate, parentDefaultValue: (_m = (_l = this.getFormContext()) === null || _l === void 0 ? void 0 : _l.form) === null || _m === void 0 ? void 0 : _m.defaultContainerBorderRadius }, void 0),
                            _jsx(PropertyEditorColor, { editObject: this, label: "Columns Border Color", propertyName: "defaultColumnBorderColor", updateCallback: this.controlUpdate, parentDefaultValue: (_p = (_o = this.getFormContext()) === null || _o === void 0 ? void 0 : _o.form) === null || _p === void 0 ? void 0 : _p.defaultContainerBorderColor }, void 0),
                            _jsx(PropertyEditorSelect, { editObject: this, label: "Columns Border Style", propertyName: "defaultColumnBorderStyle", updateCallback: this.controlUpdate, options: FormDesignConstants.BORDER_STYLES, parentDefaultValue: (_r = (_q = this.getFormContext()) === null || _q === void 0 ? void 0 : _q.form) === null || _r === void 0 ? void 0 : _r.defaultContainerBorderStyle }, void 0)] }, void 0) }), void 0),
                _jsx(PropertyEditorList, { label: "Columns", list: this.columns.map((col, idx) => ({ name: `Columns ${idx + 1}`, item: col })), showDialogCancel: false, itemUI: (item) => {
                        var _a, _b;
                        return ({
                            onComplete: (item) => {
                                if (item.content) {
                                    Reflect.set(this.columns, item.index, item.content);
                                }
                                else {
                                    this.columns.splice(item.index, 1);
                                }
                                this.controlUpdate();
                            },
                            onCancel: () => {
                                delete item.content;
                                // this.designerUpdate();
                            },
                            ui: (_jsx(ChildFullWidthDiv, { children: item.content && (_jsxs(_Fragment, { children: [_jsx(PropertyEditorInteger, { editObject: item.content, label: "Min Width Pixels", propertyName: "minSizePx", updateCallback: this.controlUpdate }, void 0),
                                        _jsx(PropertyEditorInteger, { editObject: item.content, label: "Max Width Pixels", propertyName: "maxSizePx", updateCallback: this.controlUpdate }, void 0),
                                        _jsx(PropertyEditorInteger, { editObject: item.content, label: "Width", propertyName: "targetWidth", updateCallback: this.controlUpdate }, void 0),
                                        _jsx(PropertyEditorSelect, { editObject: item.content, label: "Width Unit", propertyName: "widthUnit", options: [WidthUnitInterface.PERCENTAGE, WidthUnitInterface.PIXEL], updateCallback: this.controlUpdate }, void 0),
                                        _jsx(PropertyEditorInteger, { editObject: item.content, label: "Inner Column Margin", propertyName: "innerMargin", updateCallback: this.controlUpdate }, void 0),
                                        _jsx(PropertyEditorInteger, { editObject: item.content, label: "Gap Between Controls", propertyName: "interControlSpacing", updateCallback: this.controlUpdate, parentDefaultValue: (_b = (_a = this.getFormContext()) === null || _a === void 0 ? void 0 : _a.form) === null || _b === void 0 ? void 0 : _b.defaultInterControlSpacing }, void 0),
                                        _jsx(PropertyEditorOptionWithButtonGroup, { editObject: item.content, label: "Override Border Settings", propertyName: "overrideFormBorderSettings", updateCallback: this.controlUpdate }, void 0),
                                        _jsx(Collapse, Object.assign({ in: item.content.overrideFormBorderSettings === DefaultOnOff.On }, { children: _jsxs(ChildFullWidthDiv, { children: [_jsx(PropertyEditorInteger, { editObject: item.content, label: "Border Width", propertyName: "columnBorderWidth", updateCallback: this.controlUpdate }, void 0),
                                                    _jsx(PropertyEditorInteger, { editObject: item.content, label: "Border Radius", propertyName: "containerBorderRadius", updateCallback: this.controlUpdate }, void 0),
                                                    _jsx(PropertyEditorColor, { editObject: item.content, label: "Border Color", propertyName: "columnBorderColor", updateCallback: this.controlUpdate }, void 0),
                                                    _jsx(PropertyEditorSelect, { editObject: item.content, label: "Border Style", propertyName: "columnBorderStyle", updateCallback: this.controlUpdate, options: FormDesignConstants.BORDER_STYLES }, void 0)] }, void 0) }), void 0),
                                        _jsx(PropertyEditorColor, { editObject: item.content, label: "Column Background Color", propertyName: "containerBackgroundColor", updateCallback: this.controlUpdate }, void 0)] }, void 0)) }, void 0)),
                        });
                    }, prototype: () => new XColumnContainerColumn() }, void 0)] }, void 0));
    }
}
//# sourceMappingURL=XColumnContainer.js.map