@synergy-design-system/components/dist/chunks/chunk.ATSI7CIG.js

This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define

import {
  header_styles_default
} from "./chunk.EK4TK5MY.js";
import {
  icon_default
} from "./chunk.M7H53KXO.js";
import {
  HasSlotController
} from "./chunk.WVVQK5TE.js";
import {
  LocalizeController
} from "./chunk.OAQRCZOO.js";
import {
  watch
} from "./chunk.BVZQ6QSY.js";
import {
  component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
  SynergyElement
} from "./chunk.3THJTCRO.js";
import {
  __decorateClass
} from "./chunk.Z4XV3SMG.js";

// src/components/header/header.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit/static-html.js";
import { property, state } from "lit/decorators.js";
var SynHeader = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.hasSlotController = new HasSlotController(this, "[default]", "logo", "label", "meta-navigation", "navigation");
    this.localize = new LocalizeController(this);
    /*
     * #587: If the side nav is animating, we should not allow to trigger the burger menu
     */
    this.isSideNavAnimating = false;
    this.label = "";
    this.burgerMenu = "hidden";
  }
  toggleBurgerMenu() {
    switch (this.burgerMenu) {
      case "closed":
        this.burgerMenu = "open";
        break;
      case "open":
        this.burgerMenu = "closed";
        break;
      default:
        break;
    }
  }
  handleBurgerMenuToggle() {
    if (this.sideNav && this.sideNav.variant === "default" && !this.isSideNavAnimating) {
      this.sideNav.open = !this.sideNav.open;
    }
    if (!this.isSideNavAnimating) {
      this.toggleBurgerMenu();
    }
  }
  /**
   * Automatically update the burger menu icon based
   * on the state of the side-nav, if one is connected.
   */
  updateBurgerMenuBasedOnSideNav() {
    if (this.sideNav) {
      if (this.sideNav.variant !== "default") {
        this.burgerMenu = "hidden";
      } else {
        this.burgerMenu = this.sideNav.open ? "open" : "closed";
      }
    }
  }
  handleBurgerMenu() {
    const myEvt = `syn-burger-menu-${this.burgerMenu}`;
    this.emit(myEvt);
  }
  connectedCallback() {
    super.connectedCallback();
    this.mutationObserver = new MutationObserver(() => this.updateBurgerMenuBasedOnSideNav());
  }
  firstUpdated() {
    this.updateComplete.then(() => {
      const sideNav = document.querySelector("syn-side-nav");
      this.connectSideNavigation(sideNav);
    });
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.mutationObserver.disconnect();
  }
  /**
   * Connect a `syn-side-nav` to add automatic interaction of the header with the side navigation
   * like showing the burger menu icon and open / close handling.
   *
   * If no side navigation is connected, the header will use the first `syn-side-nav` element it
   * finds.
   *
   * @param sideNav The side navigation to connect to the header
   */
  connectSideNavigation(sideNav) {
    this.mutationObserver.disconnect();
    this.sideNav = sideNav || document.querySelector("syn-side-nav");
    if (this.sideNav) {
      this.updateBurgerMenuBasedOnSideNav();
      this.mutationObserver.observe(this.sideNav, { attributeFilter: ["open", "variant"], attributes: true });
      const isAnimating = (e) => {
        if (e.target !== this.sideNav) {
          return;
        }
        this.isSideNavAnimating = true;
      };
      const isNotAnimating = (e) => {
        if (e.target !== this.sideNav) {
          return;
        }
        this.isSideNavAnimating = false;
      };
      this.sideNav.addEventListener("syn-show", isAnimating);
      this.sideNav.addEventListener("syn-hide", isAnimating);
      this.sideNav.addEventListener("syn-after-show", isNotAnimating);
      this.sideNav.addEventListener("syn-after-hide", isNotAnimating);
    }
  }
  render() {
    const hasNavigation = this.hasSlotController.test("navigation");
    const showBurgerMenu = this.burgerMenu !== "hidden";
    return html`
      <header
        class=${classMap({
      header: true,
      "header--has-burger-menu": showBurgerMenu,
      "header--has-navigation": hasNavigation
    })}
        part="base"
      >
        <!-- .header__content -->
        <div part="content" class="header__content">

          ${showBurgerMenu ? html`
                  <button
                    aria-label=${this.localize.term(this.burgerMenu === "closed" ? "openMenu" : "closeMenu")}
                    class="header__burger-menu-toggle"
                    @click=${this.handleBurgerMenuToggle}
                    part="burger-menu-toggle-button"
                    type="button"
                  >
                    ${this.burgerMenu === "open" ? html`
                          <slot name="open-burger-menu-icon">
                            <syn-icon name="x-lg" library="system"></syn-icon>
                          </slot>
                        ` : html`
                          <slot name="closed-burger-menu-icon">
                            <syn-icon name="menu" library="system"></syn-icon>
                          </slot>
                        `}
                  </button>
                ` : ""}

          <div part="logo" class="header__logo">
            <slot name="logo">
              <syn-icon name="logo-color" library="system" label="SICK Sensor Intelligence"></syn-icon>
            </slot>
          </div>

          <div part="label" class="header__label">
            <slot name="label">
              ${this.label}
            </slot>
          </div>

          <div part="meta-navigation" class="header__meta-navigation">
            <slot name="meta-navigation"></slot>
          </div>
        </div>
        <!-- /.header__content -->

        <div part="navigation" class="header__navigation">
          <slot name="navigation"></slot>
        </div>
      </header>
    `;
  }
};
SynHeader.styles = [
  component_styles_default,
  header_styles_default
];
SynHeader.dependencies = {
  "syn-icon": icon_default
};
__decorateClass([
  property()
], SynHeader.prototype, "label", 2);
__decorateClass([
  property({ attribute: "burger-menu", reflect: true })
], SynHeader.prototype, "burgerMenu", 2);
__decorateClass([
  state()
], SynHeader.prototype, "sideNav", 2);
__decorateClass([
  watch("burgerMenu", { waitUntilFirstUpdate: true })
], SynHeader.prototype, "handleBurgerMenu", 1);

export {
  SynHeader
};
//# sourceMappingURL=chunk.ATSI7CIG.js.map