'use client'
import {
  __decorateClass
} from "./chunk-JUBOAWNR.mjs";

// src/MenuBaseElement.ts
import { LitElement, css } from "lit";
import { createRef } from "lit/directives/ref.js";
import { property } from "lit/decorators.js";
var MenuBaseElement = class extends LitElement {
  constructor() {
    super(...arguments);
    this.handleClickOutside = (event) => {
      if (!this.listRef.value || this.listRef.value.contains(event.composedPath()[0])) {
        return;
      }
      this.expanded = false;
    };
    this.additinalItems = [];
    this.expanded = false;
    this.handleToggleDrawer = (event) => {
      event.preventDefault();
      event.stopPropagation();
      this.expanded = !this.expanded;
      if (this.expanded) {
        window.addEventListener("click", this.handleClickOutside, false);
      }
    };
    this.listRef = createRef();
  }
  updated() {
    if (this.expanded === false) {
      window.removeEventListener("click", this.handleClickOutside, false);
    }
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("click", this.handleClickOutside, false);
  }
};
MenuBaseElement.styles = css`
    nav {
      position: relative;
      display: flex;
    }
    .navigation-drawer-controll-button {
      display: flex;
      align-items: center;
      justify-content: center;

      height: 42px;
      padding: 0;
      cursor: pointer;
      background-color: transparent;
      border: none;
      transition: background-color 0.2s;
      appearance: none;
    }
    .navigation-drawer-controll-button.navigation-drawer-controll-button--icon {
      width: 42px;
    }
    .navigation-drawer-controll-button:hover {
      background-color: rgba(0, 0, 0, 0.05);
    }
    .navigation-drawer-controll-button:active {
      background-color: rgba(0, 0, 0, 0.075);
    }

    .navigation-drawer {
      position: absolute;
      top: 100%;
      right: 0px;
      z-index: 1100;
      box-sizing: border-box;
      min-width: 200px;
      padding: 0px;
      margin: 0px;
      overflow: hidden;
      color: rgba(0, 0, 0, 0.87);
      white-space: nowrap;
      list-style: none;
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0px 1px 3px 0px rgb(0 0 0 / 20%),
        0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 2px 1px -1px rgb(0 0 0 / 12%);
    }
    .navigation-drawer-controll-button[aria-expanded="false"]
      ~ .navigation-drawer {
      display: none;
    }

    .navigation-drawer li {
      border-bottom: 1px solid #eeeeee;
    }
    .navigation-drawer li:last-of-type {
      border-bottom: none;
    }
    .navigation-drawer li > a,
    .navigation-drawer li > button {
      box-sizing: border-box;
      display: block;
      width: 100%;
      padding: 0;
      padding: 0.6em 1em;
      font: inherit;
      color: inherit;
      text-align: left;
      text-decoration: none;
      cursor: pointer;
      cursor: pointer;
      background-color: transparent;
      border: none;
      transition: 0.2s;
      appearance: none;
    }
    .navigation-drawer li > a:hover,
    .navigation-drawer li > button:hover {
      background-color: #ededed;
    }
    .navigation-drawer li > a:active,
    .navigation-drawer li > button:active {
      background-color: #dadada;
    }

    .navigation-drawer li ul {
      padding: 0;
      list-style: none;
    }
    .navigation-drawer li:has(> ul) li > a {
      padding-left: 2em;
    }

    .navigation-drawer li:has(> ul) > span {
      display: block;
      padding: 0.6em 1em;
      border-bottom: 1px solid #eeeeee;
    }
  `;
__decorateClass([
  property({
    type: Object,
    attribute: "additional-items"
  })
], MenuBaseElement.prototype, "additinalItems", 2);
__decorateClass([
  property()
], MenuBaseElement.prototype, "expanded", 2);

export {
  MenuBaseElement
};
//# sourceMappingURL=chunk-UM6FAKR4.mjs.map