import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
import './p-717306ef.js';
import { H as HeaderCenterContentWidth } from './p-5a256d98.js';
import './p-a4a001e1.js';
import './p-f518a4cf.js';
import './p-7e32c40b.js';
import './p-dcdffb3c.js';
import './p-5d21a361.js';
import './p-ad16c7a1.js';
import './p-f40f4b2a.js';
import './p-1f68d501.js';
import './p-ee88e3f1.js';
import './p-8142cc73.js';
import './p-905ccb30.js';
import './p-bc3d2778.js';
import './p-c8429245.js';
import './p-06625463.js';
import './p-f447b984.js';
import './p-9c5a93d8.js';
import './p-7933b555.js';
import './p-0f6c0360.js';
import './p-814ca2ad.js';
import { L as LayoutBlockContainer } from './p-d8a98b3b.js';
import './p-07303cb5.js';
import './p-5f8dc01a.js';
import './p-2a023831.js';
import './p-5ba6737a.js';
import './p-e4a9f8f0.js';
import './p-f2a6768b.js';
import './p-40657c82.js';
import './p-f600576a.js';
import './p-3b20ec86.js';
import './p-9dd5d6c8.js';
import './p-77a93845.js';
import './p-06f939ab.js';
import './p-8cd2d6dd.js';
import './p-484a1d6d.js';
import './p-0f3fbb1e.js';
import './p-820e795b.js';
import './p-46cbbcb5.js';
import './p-d74742b8.js';
import './p-6e383896.js';
import './p-4bad4fb0.js';
import './p-d1886fff.js';
import './p-a6ca40fc.js';
import './p-b0e88537.js';
import { U as UtilBreakpointObserverBreakpoints } from './p-cdcaf0eb.js';
import { d as defineCustomElement$7 } from './p-e8fc33ed.js';
import { d as defineCustomElement$6 } from './p-58f4845c.js';
import { d as defineCustomElement$5 } from './p-9f314511.js';
import { d as defineCustomElement$4 } from './p-b1fc42ea.js';
import { d as defineCustomElement$3 } from './p-8e4620a9.js';
import { d as defineCustomElement$2 } from './p-4768901b.js';

const headerCss = ".sc-digi-header-h{display:block;--digi--header--logo--padding-right:var(--digi--padding--large);--digi--header--border-width:var(--digi--border-width--primary);--digi--header--border-color:var(--digi--color--divider--primary);--digi--header--padding-left:var(--digi--padding--medium);--digi--header--padding-right:var(--digi--padding--medium);--digi--header--content--gap:1rem}.sc-digi-header-h .digi-header__wrapper.sc-digi-header{display:flex;align-items:center;justify-content:space-between;padding-left:var(--digi--header--padding-left);padding-right:var(--digi--header--padding-right)}@media (max-width: 47.9375rem){.sc-digi-header-h .digi-header--has-navigation.sc-digi-header .digi-header__wrapper.sc-digi-header{--digi--header--padding-right:0}}.sc-digi-header-h .digi-header__border.sc-digi-header{border-bottom:var(--digi--header--border-width) solid var(--digi--header--border-color)}.sc-digi-header-h .digi-header__content.sc-digi-header{display:flex;align-items:center;gap:var(--digi--header--content--gap)}.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo],.sc-digi-header-h .digi-header .sc-digi-header-s>[slot=header-logo]{margin-left:-0.125rem;text-decoration:none;padding-right:var(--digi--header--logo--padding-right)}.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo],.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo] .digi-logo,.sc-digi-header-h .digi-header .sc-digi-header-s>[slot=header-logo] .digi-logo{--digi--logo--img--max-width:23rem}.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo],.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo] .digi-logo,.sc-digi-header-h .digi-header.sc-digi-header-s>[slot=header-logo] .digi-logo__img,.sc-digi-header-h .digi-header .sc-digi-header-s>[slot=header-logo] .digi-logo__img{flex-shrink:0}.sc-digi-header-h .digi-header.sc-digi-header-s>div[slot=header-content],.sc-digi-header-h .digi-header .sc-digi-header-s>div[slot=header-content]{--digi--header--logo--padding-right:var(--digi--padding--large);--digi--header--border-width:var(--digi--border-width--primary);--digi--header--border-color:var(--digi--color--divider--primary);--digi--header--padding-left:var(--digi--padding--medium);--digi--header--padding-right:var(--digi--padding--medium);--digi--header--content--gap:1rem;display:flex;align-items:center;flex-wrap:wrap;gap:var(--digi--header--content--gap)}.sc-digi-header-h .digi-header.sc-digi-header-s>div[slot=header-content],.sc-digi-header-h .digi-header.sc-digi-header-s>div[slot=header-content] .digi-header-notification a,.sc-digi-header-h .digi-header .sc-digi-header-s>div[slot=header-content] .digi-header-notification a{margin:0}.sc-digi-header-h .digi-header.sc-digi-header-s>div[slot=header-content],.sc-digi-header-h .digi-header.sc-digi-header-s>div[slot=header-content] .digi-header-avatar,.sc-digi-header-h .digi-header .sc-digi-header-s>div[slot=header-content] .digi-header-avatar{--digi--header-avatar--margin:0}.sc-digi-header-h .digi-header--af-centered.sc-digi-header .digi-header__wrapper.sc-digi-header{--digi--header--padding-right:0;--digi--header--padding-left:0}";
const DigiHeaderStyle0 = headerCss;

const Header = /*@__PURE__*/ proxyCustomElement(class Header extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afActive = undefined;
        this.isMobile = undefined;
        this.hasNavigation = undefined;
        this.afSystemName = undefined;
        this.afMenuButtonText = undefined;
        this.afAriaLabel = undefined;
        this.afHideSystemName = undefined;
        this.afCentered = HeaderCenterContentWidth.DEFAULT;
    }
    toggleHandler(e) {
        const element = e.target;
        if (element.matches('digi-navigation-sidebar-button')) {
            this.afActive = true;
        }
    }
    closeHandler() {
        this.afActive = false;
    }
    get cssModifiers() {
        return {
            'digi-header--af-centered': this.afCentered !== HeaderCenterContentWidth.DEFAULT,
            'digi-header--has-navigation': this.hasNavigation
        };
    }
    handleBreakpointObserver(e) {
        this.isMobile = e.detail.value === UtilBreakpointObserverBreakpoints.SMALL;
    }
    get ariaLabel() {
        return this.afAriaLabel || this.afSystemName;
    }
    /**
     * Ta reda på om vi har en populerad navigations-slot. Om inte så renderar vi ingen menyknapp
     * @en Find out if we have a populated navigation slot. If, we don't, let's not bother rendering the navigation toggle button
     */
    checkNavigation() {
        this.hasNavigation = !!this.hostElement.querySelector('[slot="header-navigation"]');
    }
    /**
    * Om vi inte har vare sig digi-title-logo eller digi-logo, men vi har ett af-system-name så renderar vi en digi-title-logo som fallback
    * @en If we have neither a digi-title-logo or a digi-logo,but we do have an af-system name, we render a digi-title-logo as a fallback.
    *
    * This will be removed when we finally deprecate af-syetem-name.
    */
    createLegacyLogoIfNeeded() {
        const logoSlot = this.hostElement.querySelector('[slot="header-logo"]');
        const useFallbackTitleLogo = !!logoSlot
            && !this.hostElement.querySelector('digi-title-logo')
            && !this.hostElement.querySelector('digi-logo')
            && !!this.afSystemName;
        if (useFallbackTitleLogo) {
            logoSlot.innerHTML = this.afHideSystemName
                ? `<digi-logo af-only-symbol="true"></digi-logo>`
                : `<digi-title-logo af-aria-label=${this.afSystemName}>
            <div slot="logo-one-row">
              ${this.afSystemName}
            </div>
          </digi-title-logo>
        `;
        }
    }
    componentWillLoad() {
        this.checkNavigation();
        this.createLegacyLogoIfNeeded();
    }
    /**
     * If we have a <digi-logo> in the logo slot, make sure its afOnlySymbol prop
     * is true when we're in mobile
     */
    componentWillRender() {
        const afLogo = this.hostElement.querySelector('digi-logo');
        if (afLogo) {
            afLogo.afOnlySymbol = this.isMobile || afLogo.afOnlySymbol;
        }
    }
    renderContent() {
        return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("div", { class: "digi-header__content" }, h("slot", { name: "header-content" })), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
    }
    render() {
        return (h("header", { key: '516b77bfe2d1dfe003133ebac92ff7d4d71d1c60', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: 'f89d54c1ad48e5452dd5df7bfed4a6df86c0f7e5', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '46b9736bfdfa355be5483cc83104716f2020c8d1', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '4314b63dfe2bdb9b99ceea40b8beaed68e4753d9', class: "digi-header__border" }), h("slot", { key: 'fa38515d8a8da19e1d17eaac5c9b40c1f3bb03e8', name: "header-navigation" }))));
    }
    get hostElement() { return this; }
    static get style() { return DigiHeaderStyle0; }
}, [6, "digi-header", {
        "afSystemName": [1, "af-system-name"],
        "afMenuButtonText": [1, "af-menu-button-text"],
        "afAriaLabel": [1, "af-aria-label"],
        "afHideSystemName": [4, "af-hide-system-name"],
        "afCentered": [1, "af-centered"],
        "afActive": [32],
        "isMobile": [32],
        "hasNavigation": [32]
    }, [[8, "afOnToggle", "toggleHandler"], [0, "afOnClose", "closeHandler"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-header", "digi-button", "digi-icon-bars", "digi-layout-block", "digi-layout-container", "digi-navigation-sidebar-button", "digi-util-breakpoint-observer"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-header":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, Header);
            }
            break;
        case "digi-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$7();
            }
            break;
        case "digi-icon-bars":
            if (!customElements.get(tagName)) {
                defineCustomElement$6();
            }
            break;
        case "digi-layout-block":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "digi-layout-container":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "digi-navigation-sidebar-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-util-breakpoint-observer":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiHeader = Header;
const defineCustomElement = defineCustomElement$1;

export { DigiHeader, defineCustomElement };
