import { Host, h, } from "@stencil/core";
import { DEVICE_SIZES, getBrandForegroundAppearance, onComponentRequiredPropUndefined, } from "../../utils/helpers";
export class FooterLinkGroup {
    constructor() {
        this.expanded = false;
        this.deviceSize = DEVICE_SIZES.XL;
        this.dropdownIconStyle = getBrandForegroundAppearance();
        this.small = false;
        this.handleKeydown = (event) => {
            if (event.key === " " || event.key === "Enter") {
                this.toggleExpanded();
            }
        };
        this.toggleExpanded = () => {
            this.expanded = !this.expanded;
        };
    }
    componentWillLoad() {
        this.small = this.isSmall(this.el);
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Footer Link Group");
    }
    footerResizeHandler() {
        this.small = this.isSmall(this.el);
    }
    footerBrandChangeHandler(ev) {
        this.dropdownIconStyle = ev.detail.mode;
    }
    isSmall(e) {
        if (e.parentElement !== null) {
            if (e.parentElement.classList.contains("ic-footer")) {
                return e.parentElement.classList.contains("ic-footer-small");
            }
            else {
                return this.isSmall(e.parentElement);
            }
        }
        else {
            return false;
        }
    }
    render() {
        const { small, label } = this;
        return !small ? (h(Host, { class: {
                ["footer-link-group footer-link-group-sparse"]: true,
                [`footer-link-group-${this.dropdownIconStyle}`]: true,
            }, role: "listitem" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "subtitle-small" }, label)), h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null)))) : (h(Host, { class: {
                ["footer-link-group footer-link-group-small"]: true,
                [`footer-link-group-${this.dropdownIconStyle}`]: true,
            }, onClick: this.toggleExpanded, onKeydown: this.handleKeydown, "aria-expanded": this.expanded, role: "listitem" }, h("ic-section-container", { tabindex: "0", fullHeight: true }, h("div", { class: "footer-link-group-header" }, h("div", { class: "footer-link-label" }, h("ic-typography", { variant: "label" }, label)), this.expanded ? (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))) : (h("svg", { class: "footer-link-group-toggle", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", role: "img", width: "1em", height: "1em", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 1200 1200" }, h("g", { transform: "translate(0 1200) scale(1 -1)" }, h("path", { fill: "currentColor", d: "M600.002 210.605L421.285 389.336L0 810.559l178.721 178.836l421.281-421.341l421.281 421.341L1200 810.559L778.733 389.336L600.002 210.605z" }))))), this.expanded && (h("div", { class: "footer-link-group-links", role: "list" }, h("slot", null))))));
    }
    static get is() { return "ic-footer-link-group"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-footer-link-group.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-footer-link-group.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The title of the link group to be displayed."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "expanded": {},
            "deviceSize": {},
            "dropdownIconStyle": {},
            "small": {}
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "footerResized",
                "method": "footerResizeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "brandChange",
                "method": "footerBrandChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-footer-link-group.js.map
