import { Host, h } from "@stencil/core";
export class GxIdeContainer {
    constructor() {
        this.headingClasses = () => {
            return {
                "heading": true,
                "heading--inactive": this.inactiveTitle,
                "heading--no-border": this.noHeadingBorder || this.hasOnlyHeading,
                [`heading--justify-${this.headingJustify}`]: true,
                "heading--no-padding": this.noHeadingPadding,
                "heading--no-padding-block-end": this.noHeadingPaddingBlockEnd,
                "heading--no-gap": this.noHeadingGap,
                "heading--padding-top": this.headingPaddingTop,
                "heading--form-text-height": this.titleHeightAsInput,
                "heading--flex-row": this.flexRow
            };
        };
        this.contentClasses = () => {
            return {
                "content": true,
                "content--flex": this.flexContent,
                "content--no-padding": this.noContentPadding,
                "content--no-gap": this.noContentGap,
                "content--no-border-top": this.noContentBorderTop,
                "content--border-end": this.contentBorderEnd,
                [`content--align-items-${this.alignItems}`]: this.alignItems !== undefined,
                [`content--justify-content-${this.justifyContent}`]: this.justifyContent !== undefined
            };
        };
        this.aboveFooter = () => {
            return this.hasAboveFooterSlot ? (h("footer", { class: {
                    "footer-above": true,
                    "footer-above--no-border-top": this.noBorderAboveFooter,
                    "footer-above--no-padding": this.noAboveFooterPadding,
                    "footer-above--slimmer": this.slimmerFooter
                } }, h("slot", { name: "footer-above" }))) : null;
        };
        this.footer = () => {
            return this.hasFooterSlot ? (h("footer", { class: {
                    "footer": true,
                    "footer--no-border": this.hasOnlyFooter ||
                        !this.hasSlottedContent ||
                        this.noBorderFooter,
                    [`footer--justify-${this.footerJustify}`]: true,
                    [`footer--justify-${this.footerJustify}`]: true,
                    "footer--no-padding": this.noFooterPadding,
                    "footer--slimmer": this.slimmerFooter
                } }, h("div", { class: "footer__start" }, h("slot", { name: "footer-start" })), h("div", { class: "footer__end" }, h("slot", { name: "footer-end" })))) : null;
        };
        this.inactiveTitle = false;
        this.displayBorder = false;
        this.displayBorderTop = false;
        this.displayBorderEnd = false;
        this.displayBorderBottom = false;
        this.displayBorderStart = false;
        this.sectionsPadding = "m";
        this.noHeadingBorder = false;
        this.noHeadingGap = false;
        this.noHeadingPadding = false;
        this.noHeadingPaddingBlockEnd = false;
        this.headingPaddingTop = false;
        this.headingJustify = "center";
        this.titleHeightAsInput = false;
        this.flexRow = false;
        this.flexContent = false;
        this.noContentBorderTop = false;
        this.noContentPadding = false;
        this.noContentGap = false;
        this.alignItems = undefined;
        this.justifyContent = undefined;
        this.contentBorderEnd = false;
        this.slimmerAboveFooter = false;
        this.noAboveFooterPadding = false;
        this.noBorderAboveFooter = false;
        this.slimmerFooter = false;
        this.noFooterPadding = false;
        this.footerJustify = "end";
        this.noBorderFooter = false;
        this.hasHeaderSlot = false;
        this.hasSlottedContent = false;
        this.hasFooterSlot = false;
        this.hasAboveFooterSlot = false;
        this.hasOnlyHeading = false;
        this.hasOnlyContent = false;
        this.hasOnlyFooter = false;
    }
    // 4.PUBLIC PROPERTY API //
    // 5.EVENTS (EMIT) //
    // 6.COMPONENT LIFECYCLE EVENTS //
    componentWillLoad() {
        this.evaluateSlots();
    }
    // 7.LISTENERS //
    // 8.PUBLIC METHODS API //
    // 9.LOCAL METHODS //
    evaluateSlots() {
        // header
        const headerSlot = this.el.querySelectorAll(':scope > [slot="header"]');
        if (headerSlot.length) {
            this.hasHeaderSlot = true;
        }
        // content
        const slottedContent = this.el.querySelectorAll(":scope >  :not([slot])");
        if (slottedContent.length) {
            this.hasSlottedContent = true;
        }
        // footer
        const footerAboveSlot = this.el.querySelectorAll(':scope >  [slot="footer-above"]');
        const footerStartSlot = this.el.querySelectorAll(':scope >  [slot="footer-start"]');
        const footerEndSlot = this.el.querySelectorAll(':scope >  [slot="footer-end"]');
        if (footerStartSlot.length || footerEndSlot.length) {
            this.hasFooterSlot = true;
        }
        if (footerAboveSlot.length) {
            this.hasAboveFooterSlot = true;
        }
    }
    evaluateSections() {
        // has only heading
        if (!this.hasSlottedContent &&
            !this.hasFooterSlot &&
            !this.hasAboveFooterSlot) {
            this.hasOnlyHeading = true;
        }
        // has only content
        if (this.hasSlottedContent &&
            !this.hasHeaderSlot &&
            !this.hasAboveFooterSlot &&
            !this.hasFooterSlot) {
            this.hasOnlyContent = true;
        }
        // has only footer
        if (!this.hasSlottedContent && !this.hasAboveFooterSlot) {
            this.hasOnlyFooter = true;
        }
    }
    // 10.RENDER() FUNCTION //
    render() {
        this.evaluateSections();
        const result = [
            this.hasHeaderSlot ? (h("header", { class: this.headingClasses() }, h("div", { class: "heading__inner-wrapper" }, h("slot", { name: "header" })))) : null,
            this.hasSlottedContent ? (h("div", { class: this.contentClasses(), part: "content" }, h("slot", null))) : null,
            this.aboveFooter(),
            this.footer()
        ];
        return (h(Host, null, h("div", { class: {
                "container": true,
                [`container--padding-${this.sectionsPadding}`]: true,
                "container--display-border": this.displayBorder,
                "container--display-border-top": this.displayBorderTop,
                "container--display-border-end": this.displayBorderEnd,
                "container--display-border-bottom": this.displayBorderBottom,
                "container--display-border-start": this.displayBorderStart,
                "container--only-content": this.hasOnlyContent,
                "container--no-header": !this.hasHeaderSlot,
                "container--no-footer": !this.hasFooterSlot && !this.hasAboveFooterSlot
            } }, result)));
    }
    static get is() { return "gx-ide-container"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["container.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["container.css"]
        };
    }
    static get properties() {
        return {
            "inactiveTitle": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "By setting the title to inactive, the color will be gray instead of black."
                },
                "attribute": "inactive-title",
                "reflect": false,
                "defaultValue": "false"
            },
            "displayBorder": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays a border all around the container"
                },
                "attribute": "display-border",
                "reflect": false,
                "defaultValue": "false"
            },
            "displayBorderTop": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays a border on the top"
                },
                "attribute": "display-border-top",
                "reflect": false,
                "defaultValue": "false"
            },
            "displayBorderEnd": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays a border at the end"
                },
                "attribute": "display-border-end",
                "reflect": false,
                "defaultValue": "false"
            },
            "displayBorderBottom": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays a border at on the bottom"
                },
                "attribute": "display-border-bottom",
                "reflect": false,
                "defaultValue": "false"
            },
            "displayBorderStart": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Displays a border at the start"
                },
                "attribute": "display-border-start",
                "reflect": false,
                "defaultValue": "false"
            },
            "sectionsPadding": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "SectionsPadding",
                    "resolved": "\"l\" | \"m\" | \"s\"",
                    "references": {
                        "SectionsPadding": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/container/container.tsx",
                            "id": "src/components/_helpers/container/container.tsx::SectionsPadding"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The container general padding (applies to .heading, .content, and .footer)"
                },
                "attribute": "sections-padding",
                "reflect": false,
                "defaultValue": "\"m\""
            },
            "noHeadingBorder": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the border bottom from the heading"
                },
                "attribute": "no-heading-border",
                "reflect": false,
                "defaultValue": "false"
            },
            "noHeadingGap": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the heading gap"
                },
                "attribute": "no-heading-gap",
                "reflect": false,
                "defaultValue": "false"
            },
            "noHeadingPadding": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the padding from the heading"
                },
                "attribute": "no-heading-padding",
                "reflect": false,
                "defaultValue": "false"
            },
            "noHeadingPaddingBlockEnd": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the padding block end from the heading"
                },
                "attribute": "no-heading-padding-block-end",
                "reflect": false,
                "defaultValue": "false"
            },
            "headingPaddingTop": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Adds padding to the top of the heading"
                },
                "attribute": "heading-padding-top",
                "reflect": false,
                "defaultValue": "false"
            },
            "headingJustify": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "HeadingJustify",
                    "resolved": "\"center\" | \"end\" | \"start\"",
                    "references": {
                        "HeadingJustify": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/container/container.tsx",
                            "id": "src/components/_helpers/container/container.tsx::HeadingJustify"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The heading justification"
                },
                "attribute": "heading-justify",
                "reflect": false,
                "defaultValue": "\"center\""
            },
            "titleHeightAsInput": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "It forces the .heading__title min-height to be as tall as the gxg-form-text height. This is useful when you are displaying two gx-ide-container's on the same row, both of them display a title, and one of them displays a gxg-form-text in the header (usually used to filter content). Without this property set to true, the .heading without a gxg-from-text would be shorter. At the time of writing, this is used on ww-images."
                },
                "attribute": "title-height-as-input",
                "reflect": false,
                "defaultValue": "false"
            },
            "flexRow": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the header (.heading) display flex:row, instad of the default flex:column."
                },
                "attribute": "flex-row",
                "reflect": false,
                "defaultValue": "false"
            },
            "flexContent": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the content a flex container"
                },
                "attribute": "flex-content",
                "reflect": false,
                "defaultValue": "false"
            },
            "noContentBorderTop": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the border-top from the content"
                },
                "attribute": "no-content-border-top",
                "reflect": false,
                "defaultValue": "false"
            },
            "noContentPadding": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the padding from the content"
                },
                "attribute": "no-content-padding",
                "reflect": false,
                "defaultValue": "false"
            },
            "noContentGap": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the gap from the content"
                },
                "attribute": "no-content-gap",
                "reflect": false,
                "defaultValue": "false"
            },
            "alignItems": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "AlignItems",
                    "resolved": "\"center\" | \"end\" | \"start\"",
                    "references": {
                        "AlignItems": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/container/container.tsx",
                            "id": "src/components/_helpers/container/container.tsx::AlignItems"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Align items"
                },
                "attribute": "align-items",
                "reflect": false,
                "defaultValue": "undefined"
            },
            "justifyContent": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "JustifyContent",
                    "resolved": "\"center\" | \"end\" | \"start\"",
                    "references": {
                        "JustifyContent": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/container/container.tsx",
                            "id": "src/components/_helpers/container/container.tsx::JustifyContent"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Justify content"
                },
                "attribute": "justify-content",
                "reflect": false,
                "defaultValue": "undefined"
            },
            "contentBorderEnd": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Display border end on the content"
                },
                "attribute": "content-border-end",
                "reflect": false,
                "defaultValue": "false"
            },
            "slimmerAboveFooter": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the above footer vertical padding slimmer"
                },
                "attribute": "slimmer-above-footer",
                "reflect": false,
                "defaultValue": "false"
            },
            "noAboveFooterPadding": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the above padding from the footer"
                },
                "attribute": "no-above-footer-padding",
                "reflect": false,
                "defaultValue": "false"
            },
            "noBorderAboveFooter": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the above border top"
                },
                "attribute": "no-border-above-footer",
                "reflect": false,
                "defaultValue": "false"
            },
            "slimmerFooter": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Makes the footer vertical padding slimmer"
                },
                "attribute": "slimmer-footer",
                "reflect": false,
                "defaultValue": "false"
            },
            "noFooterPadding": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the padding from the footer"
                },
                "attribute": "no-footer-padding",
                "reflect": false,
                "defaultValue": "false"
            },
            "footerJustify": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "FooterJustify",
                    "resolved": "\"center\" | \"end\" | \"start\"",
                    "references": {
                        "FooterJustify": {
                            "location": "local",
                            "path": "/home/runner/work/genexus-ide-ui/genexus-ide-ui/src/components/_helpers/container/container.tsx",
                            "id": "src/components/_helpers/container/container.tsx::FooterJustify"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The footer justification"
                },
                "attribute": "footer-justify",
                "reflect": false,
                "defaultValue": "\"end\""
            },
            "noBorderFooter": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Removes the border top from the footer"
                },
                "attribute": "no-border-footer",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "hasHeaderSlot": {},
            "hasSlottedContent": {},
            "hasFooterSlot": {},
            "hasAboveFooterSlot": {},
            "hasOnlyHeading": {},
            "hasOnlyContent": {},
            "hasOnlyFooter": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=container.js.map
