import { Host, h, } from "@stencil/core";
import { IcBrandForegroundEnum, } from "../../utils/types";
import { slotHasContent, getBrandForegroundAppearance, onComponentRequiredPropUndefined, isPropDefined, isSlotUsed, renderDynamicChildSlots, } from "../../utils/helpers";
/**
 * @slot heading - Content will be rendered in the title area, in place of the heading.
 * @slot subheading - Content will be rendered in the title area, in place of the subheading.
 * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.
 * @slot secondary - Content will be rendered in the secondary content area.
 */
export class Hero {
    constructor() {
        this.hostMutationObserver = null;
        this.foregroundColor = getBrandForegroundAppearance();
        this.rightContent = false;
        // set by above state
        this.leftContentFullWidth = !this.rightContent && this.secondaryHeading === undefined;
        this.scrollFactor = "right -100px";
        /**
         * The alignment of the hero.
         */
        this.aligned = "left";
        /**
         * The alignment of the hero content.
         */
        this.contentAligned = "left";
        /**
         * If `true`, the background image (if set) will not scroll using a parallax effect.
         */
        this.disableBackgroundParallax = false;
        /**
         * The size of the hero component.
         */
        this.size = "medium";
        /**
         * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
         */
        this.theme = "inherit";
    }
    disconnectedCallback() {
        var _a;
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        this.rightContent = slotHasContent(this.el, "secondary");
    }
    componentDidLoad() {
        !isSlotUsed(this.el, "heading") &&
            onComponentRequiredPropUndefined([{ prop: this.heading, propName: "heading" }], "Hero");
        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "secondary", this));
        this.hostMutationObserver.observe(this.el, {
            childList: true,
        });
    }
    componentWillRender() {
        this.rightContent = slotHasContent(this.el, "secondary");
    }
    brandChangeHandler(ev) {
        this.foregroundColor = ev.detail.mode;
    }
    doScroll() {
        var _a;
        if (this.disableBackgroundParallax) {
            return;
        }
        const scrolltotop = (_a = document.scrollingElement) === null || _a === void 0 ? void 0 : _a.scrollTop;
        if (scrolltotop) {
            const factor = 0.4;
            const y = -100 + scrolltotop * factor;
            this.scrollFactor = "right " + y + "px";
        }
    }
    render() {
        const { aligned, size, heading, subheading, secondaryHeading, secondarySubheading, foregroundColor, backgroundImage, scrollFactor, contentAligned, theme, } = this;
        let style = {};
        if (isPropDefined(backgroundImage)) {
            style = {
                "background-image": "url(" + backgroundImage + ")",
                "background-position": scrollFactor,
            };
        }
        return (h(Host, { key: 'd7b8be369996272dd365fb416a1134e288dfe6cd', class: {
                [`ic-hero-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                ["has-background-image"]: backgroundImage !== undefined,
                ["has-right-content"]: this.rightContent,
                ["ic-hero-small"]: size === "small",
                ["secondary-heading"]: !!secondaryHeading,
                [`ic-hero-content-aligned-${contentAligned}`]: contentAligned !== undefined,
                [`ic-theme-${theme}`]: theme !== "inherit",
            }, style: style }, h("ic-section-container", { key: 'a5a8585b31aba9f1434ffaf6aa1145d7853ea4b6', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '1830e42eb85d545b947dfe6ebc6b0d462e48397e', class: {
                ["left-container"]: true,
                ["left-container-full-width"]: this.leftContentFullWidth,
            } }, h("div", { key: '4e2d3d2c1c694f6b330f2555388e9ed4abf4a907', class: "heading" }, h("slot", { key: 'ec340ba480f0fd881279225b160a8e6de2a4184a', name: "heading" }, h("ic-typography", { key: 'fb49e9dd42f753dc4c4e610da1e0fa76df9cf055', variant: size === "small" ? "h2" : "h1", class: {
                ["heading-bottom-spacing"]: size !== "small",
            } }, h("h2", { key: '822a6963c3c2aab17d3a42ff2257e4635414f5d8' }, heading)))), h("div", { key: '5e3fa3963bd1a2b18c929e897832968810b25b63', class: "subheading" }, h("slot", { key: '04071839319227b3c6e726562f08a2b860c31f4a', name: "subheading" }, h("ic-typography", { key: '096dd77e50768edee7017d79b620773a7260643c', variant: "body" }, subheading))), h("div", { key: '3e4a3f2afe811228a507dd3edd64f0f7f14c9c44', class: "interaction-container" }, h("slot", { key: 'ce0694893cd12d0da5a4db36cca1e8c4ffadd6b2', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '23a775df706d7464e40d86c3f79564b2cf4c8028', class: "right-container" }, h("slot", { key: 'f331ac3773afff23990f257c4999cb23957f0a95', name: "secondary" }, secondaryHeading && (h("div", { key: '12c5630d51d9f16ec5bd0b03f0de821ce8648e26', class: "secondary-container" }, h("div", { key: '0dff38bdf87ccd660f5292b41b29f2b0c681b39d', class: "secondary-heading" }, h("ic-typography", { key: '035a480675ce2779e4c4d5a97cfeace5de1b132a', variant: "h4" }, h("h3", { key: '0bb8cfd2b3c27206ec7e866b02018ec0c2810386' }, secondaryHeading))), h("div", { key: 'c55e6e2669c922a7c5a45d0c5fc225dbcade1e77', class: "secondary-subheading" }, h("ic-typography", { key: '52a346be44dec236bd0dcf815ccb41212684fb49', variant: "subtitle-small" }, secondarySubheading))))))))));
    }
    static get is() { return "ic-hero"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-hero.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-hero.css"]
        };
    }
    static get properties() {
        return {
            "aligned": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAlignment",
                    "resolved": "\"center\" | \"full-width\" | \"left\" | undefined",
                    "references": {
                        "IcAlignment": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAlignment"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The alignment of the hero."
                },
                "getter": false,
                "setter": false,
                "attribute": "aligned",
                "reflect": false,
                "defaultValue": "\"left\""
            },
            "backgroundImage": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The optional background image."
                },
                "getter": false,
                "setter": false,
                "attribute": "background-image",
                "reflect": false
            },
            "contentAligned": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcHeroContentAlignments",
                    "resolved": "\"center\" | \"left\" | undefined",
                    "references": {
                        "IcHeroContentAlignments": {
                            "location": "import",
                            "path": "./ic-hero.types",
                            "id": "src/components/ic-hero/ic-hero.types.tsx::IcHeroContentAlignments"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The alignment of the hero content."
                },
                "getter": false,
                "setter": false,
                "attribute": "content-aligned",
                "reflect": false,
                "defaultValue": "\"left\""
            },
            "disableBackgroundParallax": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the background image (if set) will not scroll using a parallax effect."
                },
                "getter": false,
                "setter": false,
                "attribute": "disable-background-parallax",
                "reflect": false,
                "defaultValue": "false"
            },
            "heading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The heading of the hero. An <h2> level heading."
                },
                "getter": false,
                "setter": false,
                "attribute": "heading",
                "reflect": false
            },
            "secondaryHeading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The optional secondary heading, an <h3> level heading. Replaced by slotted right content."
                },
                "getter": false,
                "setter": false,
                "attribute": "secondary-heading",
                "reflect": false
            },
            "secondarySubheading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The optional secondary subheading, replaced by slotted right content."
                },
                "getter": false,
                "setter": false,
                "attribute": "secondary-subheading",
                "reflect": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcSizesNoLarge",
                    "resolved": "\"medium\" | \"small\" | undefined",
                    "references": {
                        "IcSizesNoLarge": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcSizesNoLarge"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The size of the hero component."
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "\"medium\""
            },
            "subheading": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The description for the hero."
                },
                "getter": false,
                "setter": false,
                "attribute": "subheading",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                },
                "getter": false,
                "setter": false,
                "attribute": "theme",
                "reflect": false,
                "defaultValue": "\"inherit\""
            }
        };
    }
    static get states() {
        return {
            "foregroundColor": {},
            "rightContent": {},
            "leftContentFullWidth": {},
            "scrollFactor": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "brandChange",
                "method": "brandChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "scroll",
                "method": "doScroll",
                "target": "document",
                "capture": false,
                "passive": true
            }];
    }
}
//# sourceMappingURL=ic-hero.js.map
