import { Host, h, forceUpdate, } from "@stencil/core";
import { getBrandForegroundAppearance, inheritAttributes, onComponentRequiredPropUndefined, isSlotUsed, } from "../../utils/helpers";
import { IC_INHERITED_ARIA } from "../../utils/constants";
import { IcBrandForegroundEnum, } from "../../utils/types";
const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
/**
 * @slot icon - Content will be placed to the left of the button label.
 * @slot badge - Badge component overlaying the top right of the button.
 */
export class NavigationButton {
    constructor() {
        this.inheritedAttributes = {};
        this.hostMutationObserver = null;
        this.initialAppearance = getBrandForegroundAppearance();
        /**
         * The display mode.
         */
        this.mode = "navbar";
        /**
         * If `true`, the user can save the linked URL instead of navigating to it.
         */
        this.download = false;
        /**
         * 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";
        // triggered when attributes of host element change
        this.hostMutationCallback = (mutationList) => {
            let forceComponentUpdate = false;
            mutationList.forEach(({ attributeName }) => {
                if (attributeName) {
                    const attribute = this.el.getAttribute(attributeName);
                    if (attribute && MUTABLE_ATTRIBUTES.includes(attributeName)) {
                        this.inheritedAttributes[attributeName] = attribute;
                        forceComponentUpdate = true;
                    }
                }
            });
            if (forceComponentUpdate) {
                forceUpdate(this);
            }
        };
    }
    componentWillLoad() {
        this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
    }
    componentDidLoad() {
        onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Navigation Button");
        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
        this.hostMutationObserver.observe(this.el, {
            attributes: true,
        });
    }
    componentWillRender() {
        const iconEl = this.el.querySelector(`[slot="icon"]`);
        iconEl !== null && iconEl.setAttribute("viewBox", "0 0 24 24");
    }
    disconnectedCallback() {
        var _a;
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    navBarMenuOpenHandler() {
        this.mode = "menu";
    }
    navBarMenuCloseHandler() {
        this.mode = "navbar";
    }
    brandChangeHandler(ev) {
        this.initialAppearance = ev.detail.mode;
    }
    /**
     * Sets focus on the native `button`.
     */
    async setFocus() {
        if (this.buttonEl) {
            this.buttonEl.focus();
        }
    }
    render() {
        const { href, target, rel, download, referrerpolicy } = this;
        let label = "";
        let className = "";
        let variant = "icon";
        let appearance = this.initialAppearance;
        let size = "large";
        let fullWidth = false;
        let disableTooltip = false;
        if (this.mode === "menu") {
            label = this.label;
            variant = "tertiary";
            appearance = IcBrandForegroundEnum.Default;
            size = "medium";
            fullWidth = true;
            className = "popout-menu-button";
            disableTooltip = true;
        }
        const buttonProps = {
            variant,
            appearance,
            size,
            href,
            target,
            rel,
            download,
            referrerpolicy,
            fullWidth,
            disableTooltip,
        };
        return (h(Host, { key: 'a750cb73987d5c9d0c7bcdb6ece9807bcc688c9f', class: {
                ["in-side-menu"]: this.mode === "menu",
                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
            } }, h("ic-button", Object.assign({ key: 'd55eb3e8c54c6bb76e61044af2a5b1a2dddafbf6', class: className, "aria-label": variant == "icon" ? this.label : null, ref: (el) => (this.buttonEl = el) }, buttonProps, this.inheritedAttributes, { monochrome: this.mode !== "menu", theme: getBrandForegroundAppearance() == "light" ? "light" : "dark" }), label, h("slot", { key: '4193d9cd02c05a3b12946233cb86256e2c729abc', slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { key: 'a53d6158424e97fddc62b25006f6060b2cbee4c5', name: "badge" }))));
    }
    static get is() { return "ic-navigation-button"; }
    static get encapsulation() { return "shadow"; }
    static get delegatesFocus() { return true; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-navigation-button.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-navigation-button.css"]
        };
    }
    static get properties() {
        return {
            "download": {
                "type": "any",
                "mutable": false,
                "complexType": {
                    "original": "string | boolean",
                    "resolved": "boolean | string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the user can save the linked URL instead of navigating to it."
                },
                "getter": false,
                "setter": false,
                "attribute": "download",
                "reflect": false,
                "defaultValue": "false"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The URL that the link points to. This will render the button as an \"a\" tag."
                },
                "getter": false,
                "setter": false,
                "attribute": "href",
                "reflect": false
            },
            "hreflang": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The human language of the linked URL."
                },
                "getter": false,
                "setter": false,
                "attribute": "hreflang",
                "reflect": false
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The label info to display."
                },
                "getter": false,
                "setter": false,
                "attribute": "label",
                "reflect": false
            },
            "referrerpolicy": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "ReferrerPolicy",
                    "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\" | undefined",
                    "references": {
                        "ReferrerPolicy": {
                            "location": "global",
                            "id": "global::ReferrerPolicy"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "How much of the referrer to send when following the link."
                },
                "getter": false,
                "setter": false,
                "attribute": "referrerpolicy",
                "reflect": false
            },
            "rel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The relationship of the linked URL as space-separated link types."
                },
                "getter": false,
                "setter": false,
                "attribute": "rel",
                "reflect": false
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
                },
                "getter": false,
                "setter": false,
                "attribute": "target",
                "reflect": false
            },
            "theme": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcThemeMode",
                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                    "references": {
                        "IcThemeMode": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcThemeMode"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "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 {
            "initialAppearance": {},
            "mode": {}
        };
    }
    static get methods() {
        return {
            "setFocus": {
                "complexType": {
                    "signature": "() => Promise<void>",
                    "parameters": [],
                    "references": {
                        "Promise": {
                            "location": "global",
                            "id": "global::Promise"
                        }
                    },
                    "return": "Promise<void>"
                },
                "docs": {
                    "text": "Sets focus on the native `button`.",
                    "tags": []
                }
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "icNavigationMenuOpened",
                "method": "navBarMenuOpenHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "icNavigationMenuClosed",
                "method": "navBarMenuCloseHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }, {
                "name": "brandChange",
                "method": "brandChangeHandler",
                "target": "document",
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=ic-navigation-button.js.map
