import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { D as DEVICE_SIZES, k as getBrandForegroundAppearance, i as isSlotUsed, N as getSlot, n as getCurrentDeviceSize, h as onComponentPropUndefinedChange, c as checkResizeObserver, o as onComponentRequiredPropUndefined, e as IcBrandForegroundEnum, X as isEmptyString, l as isPropDefined } from './helpers.js';
import { d as defineCustomElement$8 } from './ic-button2.js';
import { d as defineCustomElement$7 } from './ic-horizontal-scroll2.js';
import { d as defineCustomElement$6 } from './ic-loading-indicator2.js';
import { d as defineCustomElement$5 } from './ic-navigation-menu2.js';
import { d as defineCustomElement$4 } from './ic-section-container2.js';
import { d as defineCustomElement$3 } from './ic-tooltip2.js';
import { d as defineCustomElement$2 } from './ic-typography2.js';

const icTopNavigationCss = "/*! 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;color:var(--ic-top-navigation-text);width:100%;position:relative;--ic-typography-color:var(--ic-top-navigation-text);--ic-button-secondary-text-monochrome:var(--ic-brand-text-color);--ic-button-secondary-border-monochrome:var(--ic-brand-text-color);--navigation-link-colour:var(--ic-top-navigation-text)}:host(.dark){color:var(--ic-color-text-primary-light);--ic-typography-color:var(--ic-color-text-primary-light);--ic-top-navigation-logo:var(--ic-color-icon-neutral);--ic-top-navigation-icon:var(--ic-color-icon-neutral);--ic-top-navigation-icon-and-label:var(--ic-color-text-primary-light);--ic-top-navigation-theme:var(--ic-color-icon-neutral);--ic-top-navigation-status-tag:var(--ic-color-background-primary-dark);--ic-top-navigation-status-tag-text:var(--ic-color-brand-text);--ic-top-navigation-status-tag-secondary:var(--ic-state-layer-darken-10);--ic-top-navigation-title-hover:var(--ic-action-dark-bg-hover);--ic-top-navigation-title-pressed:var(--ic-action-dark-bg-pressed);--navigation-link-colour:var(--ic-color-text-primary-light)}:host(.dark) ::slotted(ic-navigation-button){--ic-button-icon-monochrome:var(--ic-color-text-primary-light)}::slotted(ic-navigation-button){--ic-button-icon-monochrome:white}:host .top-navigation{background-color:var(--ic-top-navigation-background);height:-moz-max-content;height:max-content}:host(.fullwidth-searchbar) slot[name=\"search\"]::slotted(form){width:100%}:host .title-link{display:inline-flex;align-items:center;text-decoration:none;padding:var(--ic-space-xxs);transition:var(--ic-easing-transition-fast)}:host .title-link,:host .title-link:visited,:host .title-link:active,:host .title-link ::slotted(a),:host .title-link:visited ::slotted(a),:host .title-link:active ::slotted(a){color:var(--ic-top-navigation-icon-and-label);text-decoration:none;outline:none}:host .title-link:hover:not(:focus){background-color:var(--ic-top-navigation-title-hover)}:host .title-link:active:not(:focus){background-color:var(--ic-top-navigation-title-pressed)}:host .title-link:hover{border-radius:var(--ic-border-radius)}:host .title-link:focus,:host .title-link:focus-within{border-radius:var(--ic-border-radius);box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}:host .title-link ic-typography{font-weight:600}:host .nav-panel-container{border-top:var(--ic-space-1px) solid var(--ic-top-navigation-keyline);padding:0 var(--ic-space-lg);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin));display:flex}:host(.dark) .nav-panel-container{border-top:var(--ic-border-keyline-darken)}.top-panel-container{display:flex;padding-top:0.5rem;padding-bottom:0.5rem}.navigation-tabs{margin-top:calc(-1 * var(--ic-space-1px))}.app-details-container{display:flex;align-items:center;flex:1 1 auto;margin-right:var(--ic-space-md)}.app-icon-container{display:flex;padding-right:var(--ic-space-xs)}.icon-buttons-container{display:flex;margin-left:var(--ic-space-md)}.icon-buttons-container ::slotted(nav){display:flex}.title-wrap{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-webkit-hyphens:auto;hyphens:auto}:host .app-status{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag);color:var(--ic-top-navigation-status-tag-text);--ic-typography-color:var(--ic-top-navigation-status-tag-text);padding:var(--ic-space-xxs) var(--ic-space-lg);margin-left:var(--ic-space-md);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}:host .app-version{border-radius:var(--ic-space-md);background-color:var(--ic-top-navigation-status-tag-secondary);color:var(--ic-top-navigation-status-tag);padding:var(--ic-space-xxs) var(--ic-space-sm);margin-left:var(--ic-space-xs);flex:1 1 0;max-width:-moz-fit-content;max-width:fit-content}slot[name=\"app-icon\"]::slotted(*){fill:var(--ic-top-navigation-logo);width:2em;height:2em}slot[name=\"toggle-icon\"] svg{fill:var(--ic-top-navigation-icon)}.search-menu-container{justify-content:right;display:flex;align-items:center}.menu-button-container{margin-left:var(--ic-space-md)}.menu-button-container .navigation-landmark-button-text{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}.menu-button-container .navigation-landmark-button-text:dir(rtl){right:-9999px}.search-actions-container{display:flex}.menu-buttons-slot{display:flex;flex-direction:column}.navigation-landmark-text{position:absolute;width:var(--ic-space-1px);height:var(--ic-space-1px);padding:0;margin:calc(-1 * var(--ic-space-1px));overflow:hidden}.navigation-item-list{display:flex;list-style:none;height:2.75rem}.navigation-item-list::-webkit-scrollbar{display:none}:host ic-section-container{padding-bottom:0 !important;padding-top:0 !important}@media screen and (min-width: 993px){.app-details-container{margin-right:var(--ic-space-lg)}}@media screen and (max-width: 1200px){:host .nav-panel-container{padding:0 var(--ic-space-md)}}:host(.mobile-mode) .app-status,:host(.mobile-mode) .app-version{display:none}:host(.mobile-mode) .title-link{margin-right:var(--ic-space-xs)}:host(.mobile-mode) .search-menu-container{max-width:10rem}:host(.mobile-mode) .search-bar-container{display:flex;justify-content:center;align-items:center;border-top:var(--ic-border-keyline-darken);height:4rem;padding-left:var(--ic-space-md);padding-right:var(--ic-space-md);margin-left:calc(-1 * var(--section-container-margin));margin-right:calc(-1 * var(--section-container-margin))}@media screen and (max-width: 576px){:host .title-link{margin-right:var(--ic-space-xxxs);word-break:break-word;-webkit-hyphens:none;hyphens:none}.top-panel-container{min-height:2.5rem}.search-bar-container{margin-top:0;height:3.5rem;padding-left:var(--ic-space-xs);padding-right:var(--ic-space-xs)}.menu-button-container{margin-left:var(--ic-space-sm)}slot[name=\"app-icon\"]::slotted(*){width:1.5em;height:1.5em}slot[name=\"toggle-icon\"] svg{width:1.5em;height:1.5em}}@media (forced-colors: active){:host .top-navigation{border-bottom:var(--ic-border-hc)}.app-status,.app-version{border:var(--ic-border-hc)}slot[name=\"app-icon\"]::slotted(*){fill:currentcolor}slot[name=\"toggle-icon\"] svg{fill:currentcolor}}";
const IcTopNavigationStyle0 = icTopNavigationCss;

const TopNavigation = /*@__PURE__*/ proxyCustomElement(class TopNavigation extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.icNavigationMenuClosed = createEvent(this, "icNavigationMenuClosed", 7);
        this.icNavigationMenuOpened = createEvent(this, "icNavigationMenuOpened", 7);
        this.icTopNavResized = createEvent(this, "icTopNavResized", 7);
        this.hasAppIcon = false;
        this.hasIconButtons = false;
        this.hasNavigation = false;
        this.hasSearchSlotContent = false;
        this.resizeObserver = null;
        this.searchBar = null;
        this.deviceSize = DEVICE_SIZES.XL;
        this.foregroundColor = getBrandForegroundAppearance();
        this.hasFullWidthSearchBar = false;
        this.mobileSearchBarVisible = false;
        this.mobileSearchHiddenOnBlur = false;
        this.navMenuVisible = false;
        this.searchButtonClick = false;
        this.searchValue = "";
        /**
         * The alignment of the top navigation content.
         */
        this.contentAligned = "full-width";
        /**
         * Can set a custom breakpoint for the top navigation to switch to mobile mode.
         * Must be one of our specified breakpoints in px: `0`, `576`, `768`, `992`, `1200`.
         */
        this.customMobileBreakpoint = DEVICE_SIZES.L;
        /**
         *  The URL to navigate to when the app title is clicked.
         */
        this.href = "/";
        /**
         * If `true`, the flyout navigation menu on small devices will be contained by the parent element.
         */
        this.inline = false;
        /**
         * The short title of the app to be displayed at small screen sizes in place of the app title.
         */
        this.shortAppTitle = "";
        /**
         * The status info to be displayed.
         */
        this.status = "";
        /**
         * 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";
        /**
         * The version info to be displayed.
         */
        this.version = "";
        this.checkSlots = () => {
            this.hasAppIcon = isSlotUsed(this.el, "app-icon");
            this.hasNavigation = isSlotUsed(this.el, "navigation");
            this.hasIconButtons = isSlotUsed(this.el, "buttons");
            this.hasSearchSlotContent = isSlotUsed(this.el, "search");
        };
        this.initialiseSearchBar = () => {
            if (this.hasSearchSlotContent) {
                const slot = getSlot(this.el, "search");
                if ((slot === null || slot === void 0 ? void 0 : slot.tagName) === "IC-SEARCH-BAR") {
                    this.searchBar = slot;
                }
                else if ((slot === null || slot === void 0 ? void 0 : slot.tagName) === "FORM") {
                    this.searchBar = slot.querySelector("ic-search-bar");
                }
                if (this.searchBar !== null) {
                    this.searchBar.hideLabel = true;
                }
            }
        };
        this.menuButtonClick = () => {
            this.showNavMenu(true);
        };
        this.searchButtonMouseDownHandler = () => {
            this.searchButtonClick = true;
        };
        this.searchButtonClickHandler = () => {
            this.toggleSearchBar();
            this.searchButtonClick = false;
        };
        this.resizeObserverCallback = (currSize) => {
            if (currSize !== this.deviceSize) {
                this.deviceSize = currSize;
                if (currSize > this.customMobileBreakpoint) {
                    this.showNavMenu(false);
                    if (this.mobileSearchBarVisible) {
                        this.toggleSearchBar();
                    }
                }
                this.icTopNavResized.emit({
                    size: currSize,
                });
                if (this.searchBar && document.activeElement === this.searchBar) {
                    this.searchBar.setAttribute("hidden", "true");
                    //remove attribute again as this trigger a redraw & applies css
                    this.searchBar.removeAttribute("hidden");
                    setTimeout(() => {
                        var _a;
                        (_a = this.searchBar) === null || _a === void 0 ? void 0 : _a.focus();
                    }, 100);
                }
            }
        };
        this.runResizeObserver = () => {
            this.resizeObserver = new ResizeObserver(() => {
                this.resizeObserverCallback(getCurrentDeviceSize());
            });
            this.resizeObserver.observe(this.el);
        };
    }
    watchPropHandler(newValue, oldValue) {
        //added for Gatsby rehydration issue where prop is initially undefined but then changes to actual value
        //this watch can be removed once Gatsby hydration issue is resolved
        onComponentPropUndefinedChange(oldValue, newValue, this.initialiseSearchBar);
    }
    disconnectedCallback() {
        var _a;
        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    componentWillLoad() {
        this.checkSlots();
        this.deviceSize = getCurrentDeviceSize();
        this.initialiseSearchBar();
    }
    componentDidLoad() {
        checkResizeObserver(this.runResizeObserver);
        !isSlotUsed(this.el, "app-title") &&
            onComponentRequiredPropUndefined([{ prop: this.appTitle, propName: "app-title" }], "Top Navigation");
    }
    componentWillRender() {
        this.checkSlots();
    }
    navBarMenuCloseHandler() {
        var _a, _b;
        this.showNavMenu(false);
        (_b = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("#menu-button")) === null || _b === void 0 ? void 0 : _b.focus();
    }
    searchInputBlurHandler({ detail, }) {
        if (detail !== null) {
            if (this.mobileSearchBarVisible && !this.searchButtonClick) {
                //don't hide if blur was triggered by click on search button - let the click handler toggle the state
                this.toggleSearchBar();
            }
            this.searchValue = detail.value;
        }
    }
    searchValueChangeHandler({ detail }) {
        this.searchValue = detail.value;
    }
    brandChangeHandler({ detail }) {
        this.foregroundColor = detail.mode;
    }
    toggleSearchBar() {
        var _a;
        this.mobileSearchBarVisible = !this.mobileSearchBarVisible;
        if (this.searchBar !== null) {
            (_a = this.mobileSearchButtonEl) === null || _a === void 0 ? void 0 : _a.setAttribute("aria-label", `${this.mobileSearchBarVisible ? "Hide" : "Show"} search`);
            this.hasFullWidthSearchBar = this.mobileSearchBarVisible;
            this.searchBar.fullWidth = this.mobileSearchBarVisible;
            if (this.mobileSearchBarVisible) {
                setTimeout(() => {
                    var _a;
                    (_a = this.searchBar) === null || _a === void 0 ? void 0 : _a.focus();
                }, 100);
            }
        }
    }
    showNavMenu(show) {
        this.navMenuVisible = show;
        (show ? this.icNavigationMenuOpened : this.icNavigationMenuClosed).emit();
        document.body.style.height = show ? "100%" : "auto";
        document.body.style.overflow = show ? "hidden" : "auto";
    }
    render() {
        const { appTitle, contentAligned, customMobileBreakpoint, deviceSize, el, foregroundColor, hasAppIcon, hasFullWidthSearchBar, hasIconButtons, hasNavigation, hasSearchSlotContent, href, inline, menuButtonClick, mobileSearchBarVisible, navMenuVisible, searchButtonClickHandler, searchButtonMouseDownHandler, shortAppTitle, status, version, theme, } = this;
        const hasStatus = status !== "";
        const hasVersion = version !== "";
        const hasMenuContent = hasNavigation || hasIconButtons || hasStatus || hasVersion;
        const searchButtonSize = deviceSize <= DEVICE_SIZES.S ? "medium" : "large";
        const hasTitle = appTitle !== "" && isPropDefined(appTitle);
        const overMobileBreakpoint = deviceSize <= customMobileBreakpoint;
        const appTitleVariant = overMobileBreakpoint
            ? deviceSize <= DEVICE_SIZES.S
                ? "subtitle-small"
                : "h4"
            : "h3";
        const mobileSearchButtonTitle = `${mobileSearchBarVisible ? "Hide" : "Show"} search`;
        const menuSize = deviceSize <= DEVICE_SIZES.S ? "small" : "medium";
        const shortAppTitleSlot = isSlotUsed(el, "short-app-title");
        const hasAppTitleSlot = isSlotUsed(el, "app-title");
        const Component = hasAppTitleSlot ? "div" : "a";
        const attrs = Component == "a" && {
            href: href,
        };
        return (h(Host, { key: 'c34e31b1c026aa42f639599a271e7a3c2dba0ec0', class: {
                "fullwidth-searchbar": hasFullWidthSearchBar,
                "mobile-mode": overMobileBreakpoint,
                [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
                [`ic-theme-${theme}`]: theme !== "inherit",
            } }, h("div", { key: 'd266b2df2d3a15532911b76e5372a77355d27b02', class: "top-navigation" }, h("ic-section-container", { key: '444caa24a5e6da0186b98b61bcbce33aebaf0e61', aligned: contentAligned, "full-height": true }, h("header", { key: 'fcc8737fb7c54abd463b716cc09589bb56a5d34c', role: "banner" }, h("div", { key: '84139029b5bd3ca31e6bec51f45126ff72d8110a', class: "top-panel-container" }, h("div", { key: '0d670149118d30f5cf7852a72a79810ad4978d26', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: 'c17c88b16b367927568160d5e11373ff13329ac5', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: '9847777727de0f0da511523d04c72ce980027151', class: "app-icon-container" }, h("slot", { key: '2d44296eb3f6469de56faeb9870b6d096516f23c', name: "app-icon" }))), deviceSize <= DEVICE_SIZES.S &&
            (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '3a25c523a8b2f866979c6b216b8320a0d378ea25', class: "app-status" }, h("ic-typography", { key: '06e42ccfca3a13ca36e39270ffd7380bd8d0a3da', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: 'd876b6c44e8f17aac75467e15e0e644b904f7ee4', class: "app-version" }, h("ic-typography", { key: 'adb1db74b83577008a831898ab4c59814be0b271', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '363c60544cb4581ae9e31a58c63fedc6aee76447', class: "search-menu-container" }, h("div", { key: '6519a88057979775cfc6081a952e85d3b9417c28', class: "search-actions-container" }, !overMobileBreakpoint && h("slot", { key: 'd174b13453134aa9fedff9a95508dbbac96469a1', name: "search" }), hasSearchSlotContent && overMobileBreakpoint && (h("ic-button", { key: '6e102532a61df76174edecf38f8d2dddde722cf5', id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { key: 'f910700c47c5878c345470ed9294a33007ce7ead', name: "toggle-icon" }, h("svg", { key: '3d3d934259563eadf67075018a41eb653438f1ea', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { key: '5fff46e4c3da77500acd290d5728f60097673a05', d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { key: '045e973ca81352d2a1bb48579ced25d19f4a1f2a', d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasIconButtons && !overMobileBreakpoint && (h("div", { key: '5fb7278bd4d60f60d21897f1fb96ec7f3a57c87b', class: "icon-buttons-container" }, h("slot", { key: '190d7b5915c3fbbf6347cb3ddc272f9dfc046ac3', name: "buttons" }))), hasMenuContent && overMobileBreakpoint && (h("div", { key: 'a91b5a189c4146e12e90e740001ad0b77679cc77', class: "menu-button-container" }, h("span", { key: 'd218781625f5e261764968eb84e03a32e905383d', id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { key: '957a343cc283945aceb2bf4f886dadcb8149d118', "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { key: 'e17765454e8a5102b732cf2b12a45ddb8d2426fc', id: "menu-button", theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { key: '8595a3640057e8cbc4d6a74fc16bfe11007052bd', xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { key: '0a2dd66668d2b8a99981303024d0a9f409197142', d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { key: '6e4ee39265832993f8756c3208f451936fb78a5b', d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))), mobileSearchBarVisible && (h("div", { key: '7351262fd2c64de0b2572e63011461a17fc9effc', class: "search-bar-container" }, h("slot", { key: '1db63ef6eac0ee7efbf59f8427149c8990182fcf', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: 'c70583f725a90a91bbf09560bddf556ae2dfe9c9', class: "navigation-tabs" }, h("span", { key: 'b87db18c6fbd55a9d56f7caa915c41d9cb7efc81', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: 'f7337c8fd73f1b2c89a35db9ed1f136bbab22c16', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: '017e0ce9c0cd0f931fbe86cbebb0680b473e90c8', monochrome: true, appearance: foregroundColor }, h("ul", { key: 'd8cc0609df1f348acaf9f2cdce3f50e0583416c5', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: '9f63d68cb7b5410e3b43c8ce2d034c1842981701', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: '7db1c7865aae2836052e0911608179e294a98519', version: version, status: status, class: {
                ["inline"]: !!inline,
            } }, hasIconButtons && (h("div", { key: 'b4110d809aa48b74b4802463d85743b6dc892978', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '4d31e22407e559d9435fae39e89a6f6612bee4bd', name: "buttons" }))), h("ul", { key: 'a2ad4a21c9b34e86c242addfb56bb0c31a87a230', slot: "navigation" }, h("slot", { key: 'c9c150aa1431942415593722be13d22291eb2b19', name: "navigation" }))))));
    }
    get el() { return this; }
    static get watchers() { return {
        "appTitle": ["watchPropHandler"]
    }; }
    static get style() { return IcTopNavigationStyle0; }
}, [1, "ic-top-navigation", {
        "contentAligned": [1, "content-aligned"],
        "customMobileBreakpoint": [2, "custom-mobile-breakpoint"],
        "href": [1],
        "inline": [4],
        "shortAppTitle": [1, "short-app-title"],
        "status": [1],
        "theme": [1],
        "version": [1],
        "appTitle": [1, "app-title"],
        "deviceSize": [32],
        "foregroundColor": [32],
        "hasFullWidthSearchBar": [32],
        "mobileSearchBarVisible": [32],
        "mobileSearchHiddenOnBlur": [32],
        "navMenuVisible": [32],
        "searchButtonClick": [32],
        "searchValue": [32]
    }, [[0, "icNavigationMenuClose", "navBarMenuCloseHandler"], [0, "icSearchBarBlur", "searchInputBlurHandler"], [0, "icChange", "searchValueChangeHandler"], [4, "brandChange", "brandChangeHandler"]], {
        "appTitle": ["watchPropHandler"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["ic-top-navigation", "ic-button", "ic-horizontal-scroll", "ic-loading-indicator", "ic-navigation-menu", "ic-section-container", "ic-tooltip", "ic-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "ic-top-navigation":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, TopNavigation);
            }
            break;
        case "ic-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$8();
            }
            break;
        case "ic-horizontal-scroll":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "ic-loading-indicator":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "ic-navigation-menu":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "ic-section-container":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "ic-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "ic-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const IcTopNavigation = TopNavigation;
const defineCustomElement = defineCustomElement$1;

export { IcTopNavigation, defineCustomElement };

//# sourceMappingURL=ic-top-navigation.js.map