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";
    }
    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, } = this;
        let style = {};
        if (isPropDefined(backgroundImage)) {
            style = {
                "background-image": "url(" + backgroundImage + ")",
                "background-position": scrollFactor,
            };
        }
        return (h(Host, { key: 'e03ade9bdd2567cd7ab8c1072bbdd90b3d75e3d8', class: {
                [`ic-hero-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                ["has-background-image"]: backgroundImage !== undefined,
                ["ic-hero-small"]: size === "small",
                ["secondary-heading"]: !!secondaryHeading,
            }, style: style }, h("ic-section-container", { key: 'af3bd63ec96401bf7db7238c8ceb5f2c867f4a0b', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '8a37d137f390c9203973349f4fc3c2d2616045a9', class: {
                ["left-container"]: true,
                ["left-container-full-width"]: this.leftContentFullWidth,
            } }, h("div", { key: 'a5796632e455cafaa95e2d03a7a653c04362aad6', class: "heading" }, h("slot", { key: '48c41d241497410ecd63ceccd3de26e350b1261d', name: "heading" }, h("ic-typography", { key: '6a6a601125d672f0ccd9c83dc51a016dd15e3e8d', variant: size === "small" ? "h2" : "h1", class: {
                ["heading-bottom-spacing"]: size !== "small",
            } }, h("h2", { key: 'c467063d6438bb2cc0ce9c04dd73408c184193c2' }, heading)))), h("div", { key: '677298e8979a2220a3c6f468476c1f2b1777a3af', class: "subheading" }, h("slot", { key: 'e2a55ff9eb1373c7b2c598909bee840a9224d606', name: "subheading" }, h("ic-typography", { key: '6fbfaad27a0439f6e0bf469757a1238e307683ac', variant: "body" }, subheading))), h("div", { key: '423aafd1dc41ca03887a59730e5880e23e2964b6', class: "interaction-container" }, h("slot", { key: '186057e873764afda68fad740fb8cb2826071b11', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '93910106562c1fc044d4a2a8126ff272905a34bf', class: "right-container" }, h("slot", { key: 'e801d684ed24de1e7138b6edb525e288c0461d60', name: "secondary" }, secondaryHeading && (h("div", { key: 'b602ea433de5de2d04522ac0f448c0422e886faa', class: "secondary-container" }, h("div", { key: 'd538d984f09bc748dc7c23599439bf7eba85f830', class: "secondary-heading" }, h("ic-typography", { key: '68d89508c9660f675ed35c0fa18f6cfde2cb5288', variant: "h4" }, h("h3", { key: '07285a037d0bfb1b397d9b0b96511804c7afc464' }, secondaryHeading))), h("div", { key: '6187e9026f1526f5c5d5c5e62bc1360fb869ef12', class: "secondary-subheading" }, h("ic-typography", { key: '6172800b84a3628d472b0cf7a1c3b52ff41a0aec', 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
            }
        };
    }
    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
