"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.XColumnContainer = exports.XColumnContainerColumn = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const core_1 = require("@material-ui/core");
const XBaseContainer_1 = require("./XBaseContainer");
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const XDesignWrapper_1 = require("../Utilities/XDesignWrapper");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const XStackContainer_1 = require("./XStackContainer");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const XBaseStackContainer_1 = require("./XBaseStackContainer");
const PropertyEditorInteger_1 = require("../../CommonUI/PropertyEditing/PropertyEditorInteger");
const PropertyEditorBoolean_1 = require("../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const PropertyEditorList_1 = require("../../CommonUI/PropertyEditing/PropertyEditorList");
const PropertyEditorColor_1 = require("../../CommonUI/PropertyEditing/PropertyEditorColor");
const PropertyEditorSelect_1 = require("../../CommonUI/PropertyEditing/PropertyEditorSelect");
const DefaultOnOff_1 = require("../Utilities/DefaultOnOff");
const PropertyEditorOptionWithButtonGroup_1 = require("../../CommonUI/PropertyEditing/PropertyEditorOptionWithButtonGroup");
const CommonStyled_1 = require("../Controls/Web/CommonStyled");
const XRuntimeWrapper_1 = require("../Utilities/XRuntimeWrapper");
const ContainerDiv = (0, styled_components_1.default)("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_1.FormDesignConstants.CONTAINER_BORDER_STYLE).toLowerCase()} ${props.borderWidth || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_WIDTH}px ${props.borderColor || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_COLOR}`
    : "none"};
    border-radius: ${(props) => props.borderRadius || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_RADIOUS}px;
    // overflow: hidden;
    background-color: ${(props) => props.backgroundColor || FormDesignConstants_1.FormDesignConstants.CONTAINER_BACKGROUND_COLOR};
    position: relative;
`;
const RowDiv = (0, styled_components_1.default)("div") `
    margin: ${(props) => -1 * (props.colGap || (props.lineBetweenColumns ? 1 : 0))}px;
    flex-wrap: wrap;
    display: flex;
`;
const ColumnDiv = (0, styled_components_1.default)("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 === FormDesignConstants_1.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_1.FormDesignConstants.CONTAINER_BORDER_STYLE).toLowerCase()} ${props.borderWidth || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_COLOR}px ${props.borderColor || FormDesignConstants_1.FormDesignConstants.CONTAINER_BORDER_COLOR}`
    : "none"};
    border-radius: ${(props) => props.borderRadius || FormDesignConstants_1.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 = (0, styled_components_1.default)("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"};
`;
class XColumnContainerColumn extends XBaseStackContainer_1.XBaseStackContainer {
    __type = "Columns";
    minSizePx;
    maxSizePx;
    targetWidth = 100;
    widthUnit;
    spacerColumn = false;
    // NOT SURE WHAT THESE ARE FOR.  Seems next two settings are the ones that are important.
    padding;
    controlInnerMarginFromColumnEdge; // comes from col container def, then form (gap to container).  should be null if same as col container or if that is null the form.
    showColumnBorder;
    columnBorderColor = "lightGray";
    columnBorderRadius = 10;
    columnBorderWidth = 2;
    columnBorderStyle;
    columnBackgroundColor;
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "minSizePx", "maxSizePx", "targetWidth", "widthUnit", "spacerColumn", "padding", "controlInnerMarginFromColumnEdge", "showColumnBorder", "columnBorderColor", "columnBorderRadius", "columnBorderWidth", "columnBorderStyle");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "minSizePx", "maxSizePx", "targetWidth", "widthUnit", "spacerColumn", "padding", "controlInnerMarginFromColumnEdge", "showColumnBorder", "columnBorderColor", "columnBorderRadius", "columnBorderWidth", "columnBorderStyle");
    }
    getAddedData() {
        return;
    }
    // render() {
    //     throw new Error('cannot render this container.  internal only');
    // }
    // avoiding refresh on this as it is never added
    setFormDataValue(fieldName, value) {
        this.getFormContext()?.setFormDataValue(fieldName, value);
    }
    renderEditUI() {
        return null;
    }
    hasOwnBorder() {
        return this.overrideFormBorderSettings === DefaultOnOff_1.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;
    }
}
exports.XColumnContainerColumn = XColumnContainerColumn;
class XColumnContainer extends XBaseContainer_1.XBaseContainer {
    __type = "Columns Container";
    columns = [];
    paddingBetweenContainerAndColumns; // should come from ui constant default and be null if is default
    interControlSpacing; // comes from form.  should be null if same as form.
    controlInnerMarginFromColumnEdge; // comes from form (gap to container).  should be null if same as form.
    defaultShowColumnBorder = false;
    defaultColumnBorderColor = "lightGray";
    defaultColumnBorderRadius;
    defaultColumnBorderWidth;
    defaultColumnBorderStyle;
    defaultColumnBackgroundColor = null;
    defaultInnerColumnMargin;
    gapBetweenColumns = FormDesignConstants_1.FormDesignConstants.GAP_BETWEEN_COLUMNS;
    lineBetweenColumns = false;
    lineWidthBetweenColumns = FormDesignConstants_1.FormDesignConstants.LINE_WIDTH_BETWEEN_COLUMNS;
    lineColorBetweenColumns = FormDesignConstants_1.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_1.XBaseContainer) {
                    let found = c.find(id);
                    if (found)
                        return found;
                }
            }
        }
        return null;
    }
    getInnerMargin() {
        return this.paddingBetweenContainerAndColumns || this.getFormContext()?.form?.defaultInnerContainerMargin;
    }
    getFormWidth() {
        return (this.getFormContext() ?? this.getFormContext())?.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 = FormDesignConstants_1.FormMode.Runtime;
        let editContext = this.getFormContext();
        if (editContext)
            mode = editContext.mode;
        if (mode === FormDesignConstants_1.FormMode.FormDesign) {
            return ((0, jsx_runtime_1.jsx)(ContainerDiv, { 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: (0, jsx_runtime_1.jsx)(RowDiv, { colGap: this.gapBetweenColumns / 2, lineBetweenColumns: this.lineBetweenColumns, children: this.columns.map((col, index) => {
                        sumMinWidth += col.minSizePx || 0;
                        let isNextLine = false;
                        if (index > 0) {
                            isNextLine = !!formWidth && sumMinWidth > formWidth;
                        }
                        if (isNextLine)
                            sumMinWidth = col.minSizePx || 0;
                        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [this.lineBetweenColumns && index > 0 && ((0, jsx_runtime_1.jsx)(ColumnDivider, { "data-testid": "line-between-columns", lineColorBetweenColumns: this.lineColorBetweenColumns, lineWidthBetweenColumns: this.lineWidthBetweenColumns, colGap: this.gapBetweenColumns / 2, orientation: isNextLine ? Orientation.Horizontal : Orientation.Vertical })), (0, jsx_runtime_1.jsxs)(ColumnDiv, { 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 ||
                                        this.getFormContext()?.form?.defaultInnerColumnMargin, hasBorder: col.hasOwnBorder() ||
                                        (col.overrideFormBorderSettings === DefaultOnOff_1.DefaultOnOff.DEFAULT &&
                                            this.defaultShowColumnBorder), backgroundColor: col.backgroundColor() ||
                                        this.defaultColumnBackgroundColor ||
                                        this.getFormContext()?.form?.defaultContainerBackgroundColor, borderColor: col.borderColor() ||
                                        this.defaultColumnBorderColor ||
                                        this.getFormContext()?.form?.defaultContainerBorderColor, borderStyle: col.borderStyle() ||
                                        this.defaultColumnBorderStyle ||
                                        this.getFormContext()?.form?.defaultContainerBorderStyle, borderWidth: col.borderWidth() ||
                                        this.defaultColumnBorderWidth ||
                                        this.getFormContext()?.form?.defaultContainerBorderWidth ||
                                        this.getFormContext()?.form?.defaultContainerBorderWidth, borderRadius: col.borderRadius() ||
                                        this.defaultColumnBorderRadius ||
                                        this.getFormContext()?.form?.defaultContainerBorderRadius, lineBetweenColumns: this.lineBetweenColumns, children: [(0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: col.id, children: (provided, snapShot) => {
                                                return ((0, jsx_runtime_1.jsxs)(XStackContainer_1.StackContainerDiv, { ref: provided.innerRef, ...provided.droppableProps, style: {
                                                        border: snapShot.isDraggingOver
                                                            ? `${FormDesignConstants_1.FormDesignConstants.DROPPABLE_BORDER_STYLE} ${FormDesignConstants_1.FormDesignConstants.DROPPABLE_BORDER_WIDTH}px ${FormDesignConstants_1.FormDesignConstants.DROPPABLE_BORDER_COLOR}`
                                                            : "none",
                                                        borderRadius: snapShot.isDraggingOver
                                                            ? FormDesignConstants_1.FormDesignConstants.DROPPABLE_BORDER_RADIUS
                                                            : 0,
                                                    }, children: [col.getControls().map((control, index) => {
                                                            return ((0, jsx_runtime_1.jsx)(XStackContainer_1.StackContainerColumn, { colGap: col.interControlSpacing ||
                                                                    this.interControlSpacing ||
                                                                    this.getFormContext()?.form
                                                                        ?.defaultInterControlSpacing, children: (0, jsx_runtime_1.jsx)(XDesignWrapper_1.XDesignWrapper, { id: control.id, index: index, innerComponent: control, editContext: this.getFormContext(), children: control.render() }, control.id) }, index));
                                                        }), provided.placeholder] }));
                                            } }), col.getControls().length === 0 &&
                                            this.renderEmptyControlDiv(this.gapBetweenColumns)] }, col.id)] }, col.id));
                    }) }) }, "column" + this.columns[0].id));
        }
        else {
            return ((0, jsx_runtime_1.jsx)(ContainerDiv, { 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: (0, jsx_runtime_1.jsx)(RowDiv, { colGap: this.gapBetweenColumns / 2, lineBetweenColumns: this.lineBetweenColumns, children: this.columns.map((col, index) => {
                        sumMinWidth += col.minSizePx || 0;
                        let isNextLine = false;
                        if (index > 0) {
                            isNextLine = !!formWidth && sumMinWidth > formWidth;
                        }
                        if (isNextLine)
                            sumMinWidth = col.minSizePx || 0;
                        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [this.lineBetweenColumns && index > 0 && ((0, jsx_runtime_1.jsx)(ColumnDivider, { "data-testid": "line-between-columns", lineColorBetweenColumns: this.lineColorBetweenColumns, lineWidthBetweenColumns: this.lineWidthBetweenColumns, colGap: this.gapBetweenColumns / 2, orientation: isNextLine ? Orientation.Horizontal : Orientation.Vertical })), (0, jsx_runtime_1.jsxs)(ColumnDiv, { 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 ||
                                        this.getFormContext()?.form?.defaultInnerColumnMargin, backgroundColor: col.backgroundColor() ||
                                        this.defaultColumnBackgroundColor ||
                                        this.getFormContext()?.form?.defaultContainerBackgroundColor, hasBorder: col.hasOwnBorder() ||
                                        (col.overrideFormBorderSettings === DefaultOnOff_1.DefaultOnOff.DEFAULT &&
                                            this.defaultShowColumnBorder), borderColor: col.borderColor() ||
                                        this.defaultColumnBorderColor ||
                                        this.getFormContext()?.form?.defaultContainerBorderColor, borderStyle: col.borderStyle() ||
                                        this.defaultColumnBorderStyle ||
                                        this.getFormContext()?.form?.defaultContainerBorderStyle, borderWidth: col.borderWidth() ||
                                        this.defaultColumnBorderWidth ||
                                        this.getFormContext()?.form?.defaultContainerBorderWidth, borderRadius: col.borderRadius() ||
                                        this.defaultColumnBorderRadius ||
                                        this.getFormContext()?.form?.defaultContainerBorderRadius ||
                                        this.getFormContext()?.form?.defaultContainerBorderRadius, lineBetweenColumns: this.lineBetweenColumns, children: [(0, jsx_runtime_1.jsx)(XStackContainer_1.StackContainerDiv, { children: col.getControls().map((control, index) => {
                                                return ((0, jsx_runtime_1.jsx)(XStackContainer_1.StackContainerColumn, { colGap: col.interControlSpacing ||
                                                        this.interControlSpacing ||
                                                        this.getFormContext()?.form?.defaultInterControlSpacing, children: (0, jsx_runtime_1.jsx)(XRuntimeWrapper_1.XRuntimeWrapper, { innerComponent: control, context: this.getFormContext() }) }, index));
                                            }) }), col.getControls().length === 0 &&
                                            mode !== FormDesignConstants_1.FormMode.Runtime &&
                                            this.renderEmptyControlDiv(this.gapBetweenColumns, "Add controls in the form design tab")] }, col.id)] }, col.id));
                    }) }) }, "column" + this.columns[0].id));
        }
    }
    getAddedData() {
        return;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "paddingBetweenContainerAndColumns", "interControlSpacing", "controlInnerMarginFromColumnEdge", "defaultShowColumnBorder", "defaultColumnBorderColor", "defaultColumnBorderRadius", "defaultColumnBorderWidth", "defaultColumnBorderStyle", "defaultColumnBackgroundColor", "defaultInnerColumnMargin", "gapBetweenColumns", "lineBetweenColumns", "lineWidthBetweenColumns", "lineColorBetweenColumns");
        let colData = [];
        this.columns.map((c) => {
            colData.push(c.getStorageData());
            return c;
        });
        Reflect.set(retData, "__columns", colData);
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "paddingBetweenContainerAndColumns", "interControlSpacing", "controlInnerMarginFromColumnEdge", "defaultShowColumnBorder", "defaultColumnBorderColor", "defaultColumnBorderRadius", "defaultColumnBorderWidth", "defaultColumnBorderStyle", "defaultColumnBackgroundColor", "defaultInnerColumnMargin", "gapBetweenColumns", "lineBetweenColumns", "lineWidthBetweenColumns", "lineColorBetweenColumns");
        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);
            }
        }
    }
    // eslint-disable-next-line
    setOrder(id, order) { }
    getControls() {
        let controls = [];
        for (let col of this.columns) {
            controls.push(...col.getControls());
        }
        return controls;
    }
    renderEditUI() {
        return ((0, jsx_runtime_1.jsxs)(CommonStyled_1.ChildFullWidthDiv, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this, label: "Line Between Columns", propertyName: "lineBetweenColumns", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsxs)(core_1.Collapse, { in: this.lineBetweenColumns, children: [(0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this, label: "Line Color Between Columns", propertyName: "lineColorBetweenColumns", updateCallback: this.controlUpdate, parentDefaultValue: FormDesignConstants_1.FormDesignConstants.LINE_COLOR_BETWEEN_COLUMNS }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Line Width Between Columns", propertyName: "lineWidthBetweenColumns", updateCallback: this.controlUpdate, parentDefaultValue: FormDesignConstants_1.FormDesignConstants.LINE_WIDTH_BETWEEN_COLUMNS })] }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Gap Between Columns", propertyName: "gapBetweenColumns", updateCallback: this.controlUpdate, parentDefaultValue: FormDesignConstants_1.FormDesignConstants.GAP_BETWEEN_COLUMNS }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Gap Between Controls", propertyName: "interControlSpacing", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultInterControlSpacing }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Inner Margin", propertyName: "paddingBetweenContainerAndColumns", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultInnerContainerMargin }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this, label: "Container Color", propertyName: "containerBackgroundColor", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBackgroundColor }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "(Default) Inner Column Margin", propertyName: "defaultInnerColumnMargin", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultInnerColumnMargin }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this, label: "(Default) Column Color", propertyName: "defaultColumnBackgroundColor", updateCallback: this.controlUpdate }), this.renderBorderConfigUI(), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this, label: "Show Columns Border", propertyName: "defaultShowColumnBorder", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.defaultShowColumnBorder, children: (0, jsx_runtime_1.jsxs)(CommonStyled_1.ChildFullWidthDiv, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Columns Border Width", propertyName: "defaultColumnBorderWidth", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBorderWidth }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Columns Border Radius", propertyName: "defaultColumnBorderRadius", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBorderRadius }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this, label: "Columns Border Color", propertyName: "defaultColumnBorderColor", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBorderColor }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this, label: "Columns Border Style", propertyName: "defaultColumnBorderStyle", updateCallback: this.controlUpdate, options: FormDesignConstants_1.FormDesignConstants.BORDER_STYLES, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBorderStyle })] }) }), (0, jsx_runtime_1.jsx)(PropertyEditorList_1.PropertyEditorList, { label: "Columns", list: this.columns.map((col, idx) => ({ name: `Columns ${idx + 1}`, item: col })), showDialogCancel: false, itemUI: (item) => ({
                        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: ((0, jsx_runtime_1.jsx)(CommonStyled_1.ChildFullWidthDiv, { children: item.content && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: item.content, label: "Min Width Pixels", propertyName: "minSizePx", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: item.content, label: "Max Width Pixels", propertyName: "maxSizePx", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: item.content, label: "Width", propertyName: "targetWidth", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: item.content, label: "Width Unit", propertyName: "widthUnit", options: [FormDesignConstants_1.WidthUnitInterface.PERCENTAGE, FormDesignConstants_1.WidthUnitInterface.PIXEL], updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: item.content, label: "Inner Column Margin", propertyName: "innerMargin", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: item.content, label: "Gap Between Controls", propertyName: "interControlSpacing", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultInterControlSpacing }), (0, jsx_runtime_1.jsx)(PropertyEditorOptionWithButtonGroup_1.PropertyEditorOptionWithButtonGroup, { editObject: item.content, label: "Override Border Settings", propertyName: "overrideFormBorderSettings", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: item.content.overrideFormBorderSettings === DefaultOnOff_1.DefaultOnOff.On, children: (0, jsx_runtime_1.jsxs)(CommonStyled_1.ChildFullWidthDiv, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: item.content, label: "Border Width", propertyName: "columnBorderWidth", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: item.content, label: "Border Radius", propertyName: "containerBorderRadius", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: item.content, label: "Border Color", propertyName: "columnBorderColor", updateCallback: this.controlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: item.content, label: "Border Style", propertyName: "columnBorderStyle", updateCallback: this.controlUpdate, options: FormDesignConstants_1.FormDesignConstants.BORDER_STYLES })] }) }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: item.content, label: "Column Background Color", propertyName: "containerBackgroundColor", updateCallback: this.controlUpdate })] })) })),
                    }), prototype: () => new XColumnContainerColumn() })] }));
    }
}
exports.XColumnContainer = XColumnContainer;
//# sourceMappingURL=XColumnContainer.js.map