/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, Build, } from "@stencil/core";
import { h } from "../../utils/renderer";
/**
 * Adds visual impact to the top of a page using headlines, images and CTAs.
 *
 * @version 1.0.0
 * @status deprecated
 *
 * @slot primary-content - title, leading paragraph and CTA
 * @slot breadcrumb - each individual bread crumb should be assigned seperately
 * @slot secondary-content - free form secondary content.
 * @slot icon-box - free form icon box container
 * @slot icon-box-item - seperate icon box items. Designed to contain 1 icon and 1 text element.
 * @slot secondary-ctas - CTAs. each individual button should be assigned seperately
 * @slot quote - quote content
 * @slot quote-author - quote author
 * @slot scrim - optional background overlay (e.g. faded colour or gradient)
 * @slot background - custom background. Only active when img-src is empty
 * @slot back-btn - a back button.
 */
export class Hero {
    mo;
    host;
    hasIconBox;
    hasScrim;
    hasSecondaryContent;
    hasQuote;
    hasBg;
    hasBackBtn;
    hasCtas;
    breadCrumbs;
    breadCrumbChange() {
        // safari doesn't support ::slotted()::after ... so this :/
        this.breadCrumbs
            .filter((crumb) => crumb.tagName === 'A' &&
            !crumb.nextElementSibling.classList.contains('slash'))
            .forEach((crumb) => {
            crumb.insertAdjacentHTML('afterend', '<span slot="breadcrumb" class="slash">/</span>');
        });
    }
    iconBoxItems;
    iconBoxItemChange() {
        this.iconBoxItems.forEach((item) => item.classList.remove('last'));
        if (this.iconBoxItems[this.iconBoxItems.length - 1] &&
            this.iconBoxItems[this.iconBoxItems.length - 1].classList)
            this.iconBoxItems[this.iconBoxItems.length - 1].classList.add('last');
    }
    /** src for background image. For more control use the `background` slot instead. */
    imgSrc;
    /** Optional list string providing media sizes with corresponding image srcs.
     * i.e. show img-x at 300px wide. Format `srcSet="200w src/imgSmall.jpg, 500h src/imgMed.png"` */
    imgSrcSet = null;
    /** The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px) */
    largeScreenBP = 900;
    /** Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text) */
    theme = 'dark';
    /** Set the content structure level of the hero. Defaults to 'top'  */
    level = 'top';
    slotChangeObserver() {
        if (Build.isServer)
            return;
        if (this.mo)
            this.mo.disconnect();
        const mo = (this.mo = new MutationObserver(() => this.processSlottedContent()));
        mo.observe(this.host, { childList: true });
    }
    // Event handlers
    processSlottedContent() {
        this.hasCtas = !!this.host.querySelector('[slot="secondary-ctas"]');
        this.iconBoxItems = Array.from(this.host.querySelectorAll('[slot="icon-box-item"]'));
        this.hasIconBox =
            !!this.host.querySelector('[slot="icon-box"]') ||
                !!this.iconBoxItems.length;
        this.hasScrim = !!this.host.querySelector('[slot="scrim"]');
        this.breadCrumbs = Array.from(this.host.querySelectorAll('[slot="breadcrumb"]'));
        this.hasSecondaryContent =
            !!this.host.querySelector('[slot="icon-box"]') ||
                !!this.host.querySelector('[slot="quote"]') ||
                !!this.host.querySelector('[slot="icon-box-item"]') ||
                !!this.host.querySelector('[slot="secondary-content"]');
        this.hasBg =
            !!this.host.querySelector('[slot="background"]') || !!this.imgSrc;
        this.hasBackBtn = !!this.host.querySelector('[slot="back-btn"]');
        this.hasQuote = !!this.host.querySelector('[slot="quote"]');
    }
    // Component lifecycle
    disconnectedCallback() {
        if (this.mo)
            this.mo.disconnect();
    }
    componentDidLoad() {
        this.slotChangeObserver();
    }
    componentWillLoad() {
        this.processSlottedContent();
    }
    HeroContent = () => {
        return [
            !this.hasIconBox && this.hasCtas ? (h("div", { class: "hero__ctas" }, h("slot", { name: "secondary-ctas" }))) : (''),
            h("div", { class: "hero__scrim" }, h("slot", { name: "scrim" })),
            h("nano-grid", { class: "hero__content", xlCols: 2, xlSize: this.largeScreenBP }, h("div", { "grid-states": "xl-col-span-2" }, h("div", { class: "hero__breadcrumbs" }, h("slot", { name: "breadcrumb" }))), h("div", { "grid-states": this.hasSecondaryContent
                    ? 'xl-col-span-1 xl-col-start-1 xl-row-start-2'
                    : 'xl-col-span-2 xl-col-start-1 xl-row-start-2' }, h("div", { class: "hero__primary" }, h("div", { class: "hero__primary-content" }, h("slot", { name: "back-btn" }), h("div", null, h("slot", { name: "primary-content" }))))), this.hasSecondaryContent && (h("div", { "grid-states": "xl-col-span-1 xl-col-start-2 xl-row-start-2" }, h("div", { class: "hero__secondary" }, h("slot", { name: "secondary-content" }), this.hasIconBox && (h("div", { class: "hero__icon-box" }, h("slot", { name: "icon-box" }), h("slot", { name: "icon-box-item" }))), this.hasQuote && (h("div", { class: "hero__quote-content" }, h("span", { class: "hero__quote" }, h("slot", { name: "quote" })), h("div", { class: "hero__quote-author" }, h("slot", { name: "quote-author" })))))))),
        ];
    };
    render() {
        const rtl = this.host.dir === 'rtl' || this.host.ownerDocument.dir === 'rtl';
        return (h(Host, { key: '8270c80717ac41cc4cd5bedb577b131fe01ac967', class: "nano-hero" }, h("div", { key: '8b04bda451af03b648beb5576cd0badd48364aab', class: {
                hero: true,
                'hero--light': this.theme === 'light',
                'hero--secondary': this.hasSecondaryContent,
                'hero--iconbox': this.hasIconBox,
                'hero--rtl': rtl,
                'hero--scrim': this.hasScrim,
                'hero--breadcrumb': !!this.breadCrumbs.length,
                'hero--hasbg': this.hasBg,
                'hero--backbtn': this.hasBackBtn,
                'hero--sub': this.level === 'sub',
            } }, h("div", { key: 'be91fa5b23ceddaf411b269eb6635b886c83174d', class: "hero__bg-wrap" }, !!this.imgSrc && (h("nano-img", { key: '961b0a21220f0305cc0f4a4af0c6cd5e99446c41', class: "hero__img", lazy: false, background: true, srcSet: this.imgSrcSet, src: this.imgSrc }, h(this.HeroContent, { key: 'b272423beee722ae9d4adc0313d2d9ca4e6e3cd4' }))), !this.imgSrc && [
            h("div", { key: 'f10056208ed97f1d4a051572261c874e5dae6e96', class: "hero__bg-slot" }, h("slot", { key: '225c3a0b114b16e8edb063d6979683b343e85419', name: "background" })),
            h(this.HeroContent, { key: '375442509ce1954ca651d56d49488b0da464e577' }),
        ]))));
    }
    static get is() { return "nano-hero"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["hero.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["hero.css"]
        };
    }
    static get properties() {
        return {
            "imgSrc": {
                "type": "string",
                "attribute": "img-src",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "src for background image. For more control use the `background` slot instead."
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "imgSrcSet": {
                "type": "string",
                "attribute": "img-src-set",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional list string providing media sizes with corresponding image srcs.\ni.e. show img-x at 300px wide. Format `srcSet=\"200w src/imgSmall.jpg, 500h src/imgMed.png\"`"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "null"
            },
            "largeScreenBP": {
                "type": "number",
                "attribute": "large-screen-b-p",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The Break Point width that the hero component will change to the large view. Defaults to the XL grid size (900px)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "900"
            },
            "theme": {
                "type": "string",
                "attribute": "theme",
                "mutable": false,
                "complexType": {
                    "original": "'dark' | 'light'",
                    "resolved": "\"dark\" | \"light\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Base style for the hero. Either 'light' (white bg / dark text), or 'dark' (dark bg / white text)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'dark'"
            },
            "level": {
                "type": "string",
                "attribute": "level",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'sub'",
                    "resolved": "\"sub\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set the content structure level of the hero. Defaults to 'top'"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'top'"
            }
        };
    }
    static get states() {
        return {
            "hasIconBox": {},
            "hasScrim": {},
            "hasSecondaryContent": {},
            "hasQuote": {},
            "hasBg": {},
            "hasBackBtn": {},
            "hasCtas": {},
            "breadCrumbs": {},
            "iconBoxItems": {}
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "breadCrumbs",
                "methodName": "breadCrumbChange"
            }, {
                "propName": "iconBoxItems",
                "methodName": "iconBoxItemChange"
            }];
    }
}
