'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');
const constants = require('./constants-4d389abc.js');
const helpers = require('./helpers-81cd6930.js');

const icNavigationButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;margin-right:var(--ic-space-xs);list-style:none}:host(.in-side-menu){margin-right:0}:host::part(button){height:100%;min-height:2.5rem}:host(:not(.in-side-menu)) ::part(button):focus{box-shadow:var(--ic-border-focus-light)}:host(:not(.in-side-menu).dark) ::part(button):focus{box-shadow:var(--ic-border-focus-dark)}:host(.in-side-menu) ::part(button){color:var(--ic-top-navigation-icon-active)}:host(.in-side-menu) ::part(button):hover{color:var(--ic-top-navigation-icon-hover);background-color:var(--ic-top-navigation-icon-hover-background)}:host(.in-side-menu) ::part(button):active{color:var(--ic-top-navigation-icon-pressed);background-color:var(--ic-top-navigation-icon-pressed-background)}:host(.in-side-menu) ::slotted(ic-badge){margin-left:var(--ic-space-xs)}";
const IcNavigationButtonStyle0 = icNavigationButtonCss;

const MUTABLE_ATTRIBUTES = [...constants.IC_INHERITED_ARIA, "title"];
const NavigationButton = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.inheritedAttributes = {};
        this.hostMutationObserver = null;
        /**
         * The display mode.
         */
        this.mode = "navbar";
        /**
         * The parent theme used to inherit external colour tokens such as focus indicator.
         */
        this.parentThemeDark = false;
        /**
         * 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) {
                index.forceUpdate(this);
            }
        };
    }
    componentWillLoad() {
        this.inheritedAttributes = helpers.inheritAttributes(this.el, MUTABLE_ATTRIBUTES);
    }
    componentDidLoad() {
        this.updateTheme();
        helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Navigation Button");
        this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
        this.hostMutationObserver.observe(this.el, {
            attributes: true,
        });
    }
    componentWillRender() {
        var _a;
        (_a = this.el
            .querySelector(`[slot="icon"]`)) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
        this.parentThemeChangeHandler();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    navBarMenuOpenHandler() {
        this.mode = "menu";
        this.theme = this.el.parentElement.theme;
    }
    navBarMenuCloseHandler() {
        this.mode = "navbar";
        this.updateTheme();
    }
    brandChangeHandler({ detail: { mode } }) {
        this.updateTheme(mode);
    }
    parentThemeChangeHandler() {
        this.parentThemeDark = helpers.getElementInheritedTheme(this.el) === "dark";
    }
    /**
     * Sets focus on the native `button`.
     */
    async setFocus() {
        var _a;
        (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.setFocus();
    }
    updateTheme(mode = helpers.getBrandForegroundAppearance()) {
        this.theme =
            mode === helpers.IcBrandForegroundEnum.Light
                ? helpers.IcBrandForegroundEnum.Dark
                : helpers.IcBrandForegroundEnum.Light;
    }
    render() {
        const { download, href, inheritedAttributes, label, mode, parentThemeDark, referrerpolicy, rel, target, theme, } = this;
        const isMenuMode = mode === "menu";
        const buttonProps = {
            download,
            href,
            referrerpolicy,
            rel,
            target,
            theme,
        };
        return (index.h(index.Host, { key: '538ea349b1f0791b0cd68898380fe4cfd41b5496', class: {
                "in-side-menu": isMenuMode,
                [`ic-theme-${theme}`]: theme !== "inherit",
                dark: parentThemeDark,
            } }, index.h("ic-button", Object.assign({ key: 'afee63c46529276cd2b77ef6d7c1c69b47a7ae15', ref: (el) => (this.buttonEl = el), class: { "popout-menu-button": isMenuMode }, "aria-label": !isMenuMode ? label : null, disableTooltip: isMenuMode, fullWidth: isMenuMode, monochrome: !isMenuMode, size: isMenuMode ? "medium" : "large", variant: isMenuMode ? "tertiary" : "icon-tertiary" }, buttonProps, inheritedAttributes), isMenuMode ? label : "", index.h("slot", { key: '8c2a89dfc8f974017cf5384355ce0f881218d038', slot: "left-icon", name: "icon" }), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { key: '7fab4237f3f6745159d584df008e82214ecd3322', name: "badge" }))));
    }
    static get delegatesFocus() { return true; }
    get el() { return index.getElement(this); }
};
NavigationButton.style = IcNavigationButtonStyle0;

exports.ic_navigation_button = NavigationButton;

//# sourceMappingURL=ic-navigation-button.cjs.entry.js.map