"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GridCellRender = exports.GridContainerRender = exports.XGridContainer = exports.XGridArea = exports.XGridRow = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const react_1 = tslib_1.__importDefault(require("react"));
const react_beautiful_dnd_1 = require("react-beautiful-dnd");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const AutoBind_1 = require("@appglue/common/dist/Common/AutoBind");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const IDesignValidationProvider_1 = require("@appglue/common/dist/Common/IDesignValidationProvider");
const StyledButton_1 = require("../../CommonUI/BuildlingBlocks/StyledButton");
const PropertyEditorBoolean_1 = require("../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const PropertyEditorColor_1 = require("../../CommonUI/PropertyEditing/PropertyEditorColor");
const PropertyEditorInteger_1 = require("../../CommonUI/PropertyEditing/PropertyEditorInteger");
const PropertyEditorOptionWithButtonGroup_1 = require("../../CommonUI/PropertyEditing/PropertyEditorOptionWithButtonGroup");
const PropertyEditorSelect_1 = require("../../CommonUI/PropertyEditing/PropertyEditorSelect");
const FormControl_1 = require("../Controls/FormControl");
const CommonStyled_1 = require("../Controls/Web/CommonStyled");
const FormDesignConstants_1 = require("../Utilities/FormDesignConstants");
const DefaultOffOverride_1 = require("../Utilities/DefaultOffOverride");
const XDesignWrapper_1 = require("../Utilities/XDesignWrapper");
const XRuntimeWrapper_1 = require("../Utilities/XRuntimeWrapper");
const XBaseContainer_1 = require("./XBaseContainer");
const XBaseStackContainer_1 = require("./XBaseStackContainer");
const XGridEditLayer_1 = require("./XGridEditLayer");
const XStackContainer_1 = require("./XStackContainer");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
class XGridRow extends FormControl_1.FormControl {
    __type = "Grid Row";
    height;
    getDesignValidationIssues() {
        return [];
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return;
    }
    renderEditUI() {
        return ((0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, propertyName: "height", label: "Height", updateCallback: this.onControlUpdate }));
    }
    onControlUpdate = () => { };
}
exports.XGridRow = XGridRow;
class XGridArea extends XBaseStackContainer_1.XBaseStackContainer {
    __type = "Grid Container";
    row;
    column;
    width = 1;
    height = 1;
    container;
    oneControl = false;
    showBorder;
    backgroundColorSettings = DefaultOffOverride_1.DefaultOffOverride.DEFAULT;
    innerMarginSettings = DefaultOffOverride_1.DefaultOffOverride.DEFAULT;
    formBorderSettings = DefaultOffOverride_1.DefaultOffOverride.DEFAULT;
    controlAlign = {};
    constructor(row, column, width = 1, height = 1) {
        super();
        this.row = row;
        this.column = column;
        this.width = width;
        this.height = height;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "row", "column", "width", "height", "oneControl", "showBorder", "backgroundColorSettings", "innerMarginSettings", "formBorderSettings", "controlAlign");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "row", "column", "width", "height", "oneControl", "showBorder", "backgroundColorSettings", "innerMarginSettings", "formBorderSettings", "controlAlign");
    }
    onControlUpdate = () => { };
    add(control, index) {
        if (this.oneControl && this.controls.length === 1) {
            return;
        }
        // set control order
        if (index === undefined || index === null) {
            this.controls.push(control);
        }
        else {
            this.controls.splice(index, 0, control);
        }
        if (this.getFormContext())
            control.setFormContext(this.getFormContext());
    }
    backgroundColor() {
        return ((this.backgroundColorSettings === DefaultOffOverride_1.DefaultOffOverride.Override && this.containerBackgroundColor) ||
            this.container?.defaultAreaBackgroundColor ||
            super.backgroundColor());
    }
    hasOwnBorder() {
        return this.formBorderSettings === DefaultOffOverride_1.DefaultOffOverride.Override;
    }
    hasBorder() {
        return (this.hasOwnBorder() ||
            (this.formBorderSettings === DefaultOffOverride_1.DefaultOffOverride.DEFAULT &&
                this.getFormContext()?.form?.defaultShowContainerBorder));
    }
    borderColor() {
        return ((this.hasOwnBorder() && this.containerBorderColor) ||
            this.container?.defaultAreaBorderColor ||
            super.borderColor());
    }
    borderStyle() {
        return ((this.hasOwnBorder() && this.containerBorderStyle) ||
            this.container?.defaultAreaBorderStyle ||
            super.borderStyle());
    }
    borderWidth() {
        return ((this.hasOwnBorder() && this.containerBorderWidth) ||
            this.container?.defaultAreaBorderWidth ||
            super.borderWidth());
    }
    borderRadius() {
        return ((this.hasOwnBorder() && this.containerBorderRadius) ||
            this.container?.defaultAreaBorderRadius ||
            super.borderRadius());
    }
    getInnerMargin() {
        return ((this.innerMarginSettings === DefaultOffOverride_1.DefaultOffOverride.Override && this.innerMargin) ||
            this.container?.defaultAreaInnerMargin);
    }
    renderEditUI() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, propertyName: "row", label: "Row Index", updateCallback: this.onControlUpdate, min: 0, max: this.container?.rowsLength ? this.container?.rowsLength - this.height : undefined, hint: `max value: ${this.container?.rowsLength ? this.container?.rowsLength - this.height : undefined}` }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, propertyName: "column", label: "Column Index", updateCallback: this.onControlUpdate, min: 0, max: (this.container?.columnsLength || 12) - this.width, hint: `max value: ${(this.container?.columnsLength || 12) - this.width}` }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, propertyName: "width", label: "Width", updateCallback: this.onControlUpdate, min: 1, max: (this.container?.columnsLength || 12) - this.column, hint: `max value: ${(this.container?.columnsLength || 12) - this.column}` }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, propertyName: "height", label: "Height", updateCallback: this.onControlUpdate, max: this.container?.rowsLength ? this.container?.rowsLength - this.row : undefined, hint: `max value: ${this.container?.rowsLength ? this.container?.rowsLength - this.row : undefined}` }), (0, jsx_runtime_1.jsx)(PropertyEditorOptionWithButtonGroup_1.PropertyEditorOptionWithButtonGroup, { editObject: this, label: "Border", propertyName: "formBorderSettings", updateCallback: this.onControlUpdate, options: [DefaultOffOverride_1.DefaultOffOverride.DEFAULT, DefaultOffOverride_1.DefaultOffOverride.Off, DefaultOffOverride_1.DefaultOffOverride.Override] }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.formBorderSettings === DefaultOffOverride_1.DefaultOffOverride.Override, children: (0, jsx_runtime_1.jsxs)(CommonStyled_1.ChildFullWidthDiv, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Border Width", propertyName: "containerBorderWidth", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form.defaultContainerBorderWidth }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, label: "Border Radius", propertyName: "containerBorderRadius", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBorderRadius }), (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this, label: "Border Color", propertyName: "containerBorderColor", updateCallback: this.controlUpdate, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBorderColor }), (0, jsx_runtime_1.jsx)(PropertyEditorSelect_1.PropertyEditorSelect, { editObject: this, label: "Border Style", propertyName: "containerBorderStyle", updateCallback: this.controlUpdate, options: FormDesignConstants_1.FormDesignConstants.BORDER_STYLES, parentDefaultValue: this.getFormContext()?.form?.defaultContainerBorderStyle })] }) }), (0, jsx_runtime_1.jsx)(PropertyEditorOptionWithButtonGroup_1.PropertyEditorOptionWithButtonGroup, { editObject: this, propertyName: "innerMarginSettings", label: "Inner Margin", updateCallback: this.onControlUpdate, options: [DefaultOffOverride_1.DefaultOffOverride.DEFAULT, DefaultOffOverride_1.DefaultOffOverride.Off, DefaultOffOverride_1.DefaultOffOverride.Override], color: "primary" }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.innerMarginSettings === DefaultOffOverride_1.DefaultOffOverride.Override, children: (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this, propertyName: "innerMargin", label: "Area Inner Margin", updateCallback: this.onControlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorOptionWithButtonGroup_1.PropertyEditorOptionWithButtonGroup, { editObject: this, propertyName: "backgroundColorSettings", label: "Background Color", updateCallback: this.onControlUpdate, options: [DefaultOffOverride_1.DefaultOffOverride.DEFAULT, DefaultOffOverride_1.DefaultOffOverride.Off, DefaultOffOverride_1.DefaultOffOverride.Override], color: "primary" }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.backgroundColorSettings === DefaultOffOverride_1.DefaultOffOverride.Override, children: (0, jsx_runtime_1.jsx)(PropertyEditorColor_1.PropertyEditorColor, { editObject: this, propertyName: "containerBackgroundColor", label: "Content Background Color", updateCallback: this.onControlUpdate }) }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this, propertyName: "oneControl", label: "Single Control?", updateCallback: this.onControlUpdate }), (0, jsx_runtime_1.jsx)(core_1.Collapse, { in: this.oneControl, children: (0, jsx_runtime_1.jsxs)(CommonStyled_1.ChildFullWidthDiv, { children: [(0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.controlAlign, propertyName: "top", label: "Top", updateCallback: this.onControlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.controlAlign, propertyName: "Left", label: "Left", updateCallback: this.onControlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.controlAlign, propertyName: "Right", label: "right", updateCallback: this.onControlUpdate }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.controlAlign, propertyName: "bottom", label: "bottom", updateCallback: this.onControlUpdate })] }) })] }));
    }
    getDesignValidationIssues() {
        return [];
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return [];
    }
    onSelect = (event) => {
        event.preventDefault();
        let mode = this.getFormContext()?.mode ?? FormDesignConstants_1.FormMode.Runtime;
        if (mode === FormDesignConstants_1.FormMode.LayoutDesign) {
            this.selectInDesigner();
        }
    };
    render() {
        let mode = this.getFormContext()?.mode ?? FormDesignConstants_1.FormMode.Runtime;
        let controls = this.getControls();
        if (mode === FormDesignConstants_1.FormMode.FormDesign) {
            return ((0, jsx_runtime_1.jsxs)(exports.GridCellRender, { padding: this.getInnerMargin(), borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), columnSpan: this.width, columnStart: this.column, rowSpan: this.height, rowStart: this.row, "data-testid": `XGridCell-${this.row}-${this.column}`, children: [(0, jsx_runtime_1.jsx)(react_beautiful_dnd_1.Droppable, { droppableId: this.id, isDropDisabled: this.oneControl && controls.length >= 1, 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: [this.getControls().map((control, index) => {
                                        return ((0, jsx_runtime_1.jsx)(XStackContainer_1.StackContainerColumn, { colGap: this.interControlSpacing ||
                                                this.getFormContext()?.form?.defaultInterControlSpacing, 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,
                                            }, "data-testid": control.id, 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] }));
                        } }), this.getControls().length === 0 && this.renderEmptyControlDiv()] }));
        }
        if (controls.length >= 1 && this.oneControl) {
            let control = controls[0];
            return ((0, jsx_runtime_1.jsx)(exports.GridCellRender, { padding: 0, borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), columnStart: this.column, columnSpan: this.width, rowStart: this.row, rowSpan: this.height, onClick: this.onSelect, "data-testid": `XGridCell-${this.row}-${this.column}`, children: (0, jsx_runtime_1.jsx)(OneControlRender, { position: this.controlAlign, "data-testid": control.id, children: (0, jsx_runtime_1.jsx)(XStackContainer_1.StackContainerColumn, { colGap: this.interControlSpacing || this.getFormContext()?.form?.defaultInterControlSpacing, children: (0, jsx_runtime_1.jsx)(XRuntimeWrapper_1.XRuntimeWrapper, { innerComponent: control, context: this.getFormContext() }) }) }) }));
        }
        return ((0, jsx_runtime_1.jsxs)(exports.GridCellRender, { padding: this.getInnerMargin(), borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), columnStart: this.column, columnSpan: this.width, rowStart: this.row, rowSpan: this.height, onClick: this.onSelect, "data-testid": `XGridCell-${this.row}-${this.column}`, children: [controls.map((control, index) => {
                    return ((0, jsx_runtime_1.jsx)(XStackContainer_1.StackContainerColumn, { colGap: this.interControlSpacing || this.getFormContext()?.form?.defaultInterControlSpacing, "data-testid": control.id, children: (0, jsx_runtime_1.jsx)(XRuntimeWrapper_1.XRuntimeWrapper, { innerComponent: control, context: this.getFormContext() }) }, index));
                }), this.getControls().length === 0 && mode !== FormDesignConstants_1.FormMode.LayoutDesign && this.renderEmptyControlDiv()] }));
    }
}
exports.XGridArea = XGridArea;
class XGridContainer extends XBaseContainer_1.XBaseContainer {
    __type = "Grid Container";
    areas = [];
    rows = [new XGridRow()];
    // can not be less than 1
    rowsLength = 1;
    columnsLength = 12;
    innerMargin;
    gapBetweenAreas = 10;
    // area
    defaultAreaInnerMargin = 10;
    defaultShowAreaBorder = false;
    defaultAreaBorderColor = "lightGray";
    defaultAreaBorderRadius = 10;
    defaultAreaBorderWidth = 2;
    defaultAreaBorderStyle;
    defaultAreaBackgroundColor = UIStyleConstants_1.UIStyleConstants.WHITE_COLOR;
    showEditUIDialog = false;
    getDesignValidationIssues() {
        let issues = super.getDesignValidationIssues();
        if (this.areas.length === 0) {
            issues.push(new IDesignValidationProvider_1.ValidationIssue("There is no area."));
        }
        else {
            if (!this.areas.find((area) => area.row === 0 && area.column === 0)) {
                issues.push(new IDesignValidationProvider_1.ValidationIssue("should have one area contains [1, 1]", this.id));
            }
            if (this.rowsLength > 1 &&
                !this.areas.find((area) => area.row === this.rowsLength - 1 && area.column === 0)) {
                issues.push(new IDesignValidationProvider_1.ValidationIssue(`should have one area contains [${this.rowsLength}, 1]`, this.id));
            }
            if (!this.areas.find((area) => area.row === 0 && area.column === 11)) {
                issues.push(new IDesignValidationProvider_1.ValidationIssue(`should have one area contains [1, 12]`, this.id));
            }
            if (this.rowsLength > 1 &&
                !this.areas.find((area) => area.row === this.rowsLength - 1 && area.column === 11)) {
                issues.push(new IDesignValidationProvider_1.ValidationIssue(`should have one area contains [${this.rowsLength}, 12]`, this.id));
            }
        }
        return issues;
    }
    remove(control) {
        if (control instanceof XGridArea) {
            this.removeArea(control);
        }
    }
    find(id) {
        for (let row of this.rows) {
            if (row.id === id)
                return row;
        }
        for (let cont of this.areas) {
            if (cont.id === id)
                return cont;
            for (let c of cont.getControls()) {
                if (c.id === id) {
                    return c;
                }
            }
        }
        return null;
    }
    // eslint-disable-next-line
    setOrder(id, order) { }
    add(control, index) {
        if (control instanceof XGridArea) {
            this.addArea(control, index);
        }
        else if (control instanceof XGridRow) {
            this.addRow(control, index);
        }
    }
    getControls() {
        let controls = [...this.areas, ...this.rows];
        for (let a of this.areas) {
            controls = [...controls, ...a.getControls()];
        }
        return controls;
    }
    renderEditUI() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", color: "primary", onClick: (event) => {
                        event.stopPropagation();
                        this.showEditUIDialog = true;
                        this.controlUpdate();
                    }, children: "Open Edit UI" }), this.showEditUIDialog && ((0, jsx_runtime_1.jsx)(XGridEditLayer_1.XGridEditLayer, { grid: this, updateCallback: () => {
                        this.showEditUIDialog = false;
                        this.controlUpdate();
                    } }))] }));
    }
    addArea(area, index) {
        area.container = this;
        if (this.getFormContext()) {
            area.setFormContext(this.getFormContext());
        }
        if (index !== undefined) {
            this.areas.splice(index, 1, area);
        }
        else {
            this.areas.push(area);
        }
    }
    removeArea(area) {
        this.areas = this.areas.filter((a) => a.id !== area.id);
    }
    addRow(row, index) {
        if (this.getFormContext()) {
            row.setFormContext(this.getFormContext());
        }
        if (index !== undefined) {
            this.rows.splice(index, 1, row);
        }
        else {
            this.rows.push(row);
        }
        this.rowsLength = this.rows.length;
    }
    removeRow(row) {
        this.rows = this.rows.filter((r) => r.id !== row.id);
    }
    render() {
        let sortedAreas = this.areas.sort((a, b) => {
            if (a.row === b.row) {
                return a.column - b.column;
            }
            return a.row - b.row;
        });
        let mode = this.getFormContext()?.mode ?? FormDesignConstants_1.FormMode.Runtime;
        const rowsTemplate = this.rows
            .map((row) => (row.height ? `${row.height}px` : `minmax(75px, max-content)`))
            .join(" ");
        if (mode !== FormDesignConstants_1.FormMode.LayoutDesign) {
            return ((0, jsx_runtime_1.jsx)(exports.GridContainerRender, { padding: this.getInnerMargin(), hasBorder: this.hasBorder(), borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), rowsTemplate: rowsTemplate, children: sortedAreas.map((area) => {
                    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: area.render() }, area.id);
                }) }));
        }
        return ((0, jsx_runtime_1.jsxs)(exports.GridContainerRender, { padding: this.getInnerMargin(), hasBorder: this.hasBorder(), borderColor: this.borderColor(), borderStyle: this.borderStyle(), borderWidth: this.borderWidth(), borderRadius: this.borderRadius(), backgroundColor: this.backgroundColor(), rowsTemplate: rowsTemplate, children: [sortedAreas.map((area) => {
                    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: area.render() }, area.id);
                }), sortedAreas.length === 0 && (0, jsx_runtime_1.jsx)(PlaceholderGrid, { children: "Grid Layout Not Configured" })] }));
    }
    getInnerMargin() {
        return this.innerMargin || this.getFormContext()?.form?.defaultInnerContainerMargin;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type", "rowsLength", "columnsLength", "innerMargin", "gapBetweenAreas", "defaultAreaInnerMargin", "defaultShowAreaBorder", "defaultAreaBorderColor", "defaultAreaBorderRadius", "defaultAreaBorderWidth", "defaultAreaBorderStyle", "defaultAreaBackgroundColor");
        Reflect.set(retData, "__areas", this.areas.map((c) => {
            return c.getStorageData();
        }));
        Reflect.set(retData, "__rows", this.rows.map((c) => {
            return c.getStorageData();
        }));
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type", "rowsLength", "columnsLength", "innerMargin", "gapBetweenAreas", "defaultAreaInnerMargin", "defaultShowAreaBorder", "defaultAreaBorderColor", "defaultAreaBorderRadius", "defaultAreaBorderWidth", "defaultAreaBorderStyle", "defaultAreaBackgroundColor");
        let rows = Reflect.get(data, "__rows");
        if (!rows) {
            throw new Error("Grid Continer: rows is required");
        }
        if (Array.isArray(rows)) {
        }
        this.rows = rows.map((r) => {
            let row = new XGridRow();
            row.setStorageData(r);
            return row;
        });
        let areas = Reflect.get(data, "__areas");
        this.areas = areas.map((a) => {
            let area = new XGridArea(0, 0, 1, 1);
            area.setStorageData(a);
            return area;
        });
    }
}
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XGridContainer.prototype, "addArea", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XGridContainer.prototype, "removeArea", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XGridContainer.prototype, "addRow", null);
tslib_1.__decorate([
    AutoBind_1.AutoBind
], XGridContainer.prototype, "removeRow", null);
exports.XGridContainer = XGridContainer;
exports.GridContainerRender = styled_components_1.default.div `
    min-height: ${(props) => (props.padding || 0) + 75}px;
    width: 100%;

    display: grid;

    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: ${(props) => props.rowsTemplate};

    padding: ${(props) => props.padding || 0}px;
    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;

    background-color: ${(props) => props.backgroundColor || FormDesignConstants_1.FormDesignConstants.CONTAINER_BACKGROUND_COLOR};
    position: relative;

    column-gap: ${(props) => props.gapBetweenAreas || 5}px;
    row-gap: ${(props) => props.gapBetweenAreas || 5}px;
`;
exports.GridCellRender = styled_components_1.default.div `
    display: flex;
    flex-direction: column;
    position: relative;
    padding: ${(props) => props.padding || 0}px;
    min-height: 72px;
    height: 100%;
    overflow: auto;

    ${(props) => (props.height !== undefined ? `max-height: ${props.height}px; overflow: auto;` : ``)}

    border: ${(props) => `${props.borderStyle} ${props.borderWidth}px ${props.borderColor}`};
    border-radius: ${(props) => props.borderRadius}px;
    background-color: ${(props) => props.backgroundColor || FormDesignConstants_1.FormDesignConstants.CONTAINER_BACKGROUND_COLOR};

    grid-column: ${(props) => props.columnStart + 1} / span ${(props) => props.columnSpan};
    grid-row-start: ${(props) => props.rowStart + 1};
    grid-row-end: ${(props) => (props.rowSpan !== undefined ? props.rowStart + 1 + props.rowSpan : props.rowStart + 2)};
`;
const OneControlRender = styled_components_1.default.div `
    position: absolute;

    ${(props) => props.position.top !== undefined ||
    props.position.left !== undefined ||
    props.position.bottom !== undefined ||
    props.position.right !== undefined
    ? `
                top: ${props.position.top || 0}px;
                left: ${props.position.left || 0}px;
                right: ${props.position.right || 0}px;
                bottom: ${props.position.bottom || 0}px;
            `
    : `
                top: 50%;
                left: 50%;
                transform: translateY(-50%) translateX(-50%);

            `}
`;
const PlaceholderGrid = styled_components_1.default.span `
    grid-column: 1 / span 12;
    grid-row: 1 / span 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #677c95;
    border-radius: 5px;
`;
//# sourceMappingURL=XGridContainer.js.map