text: import { LitElement, html, css } from "lit";
  import "@lrnwebcomponents/simple-icon/lib/simple-icon-lite.js";
  import "@lrnwebcomponents/simple-icon/lib/simple-icons.js";
  import { I18NMixin } from "@lrnwebcomponents/i18n-manager/lib/I18NMixin.js";
  class MapMenuItem extends I18NMixin(LitElement) {
    /**
     * LitElement constructable styles enhancement
     */
    static get styles() {
      return [
        css`
          :host {
            display: block;
            transition: 0.1s all ease-in-out;
            font-size: var(--map-menu-item-font-size);
            --map-menu-item-height: 42px;
            --map-menu-item-icon-height: 24px;
            overflow: var(--map-menu-item-overflow, hidden);
          }
          :host([active]) {
            background: var(--map-menu-active-color);
            color: var(--map-menu-item-active-item-color, #000000);
          }
          simple-icon-lite {
            display: inline-block;
            --simple-icon-height: var(--map-menu-item-icon-height);
            --simple-icon-width: var(--map-menu-item-icon-height);
          }
          .title {
            text-transform: none;
          }
          a,
          a:visited {
            display: block;
            color: var(--map-menu-item-a-color, inherit);
            text-decoration: var(--map-menu-item-a-text-decoration, none);
          }
          a:hover button,
          a:active button,
          a:focus button {
            color: var(
              --map-menu-item-a-active-color,
              var(--map-menu-item-a-color, inherit)
            );
            text-decoration: var(
              --map-menu-item-a-text-decoration-hover,
              underline
            );
          }
          #track {
            transition: 0.1s all ease-in-out;
            position: absolute;
            right: 0;
  
            margin-right: 0px;
            width: 0px;
            height: 0px;
            visibility: hidden;
            opacity: 0;
          }
          #track.show-icon {
            margin-right: 5px;
            width: 18px;
            height: 18px;
            visibility: visible;
            opacity: 1;
          }
          button {
            cursor: pointer;
            color: inherit;
            background-color: transparent;
            text-transform: none;
            width: 100%;
            justify-content: left;
            margin: 0px;
            border: 0;
            height: var(
              --map-menu-item-button-height,
              var(--map-menu-item-height)
            );
            padding: 4px;
            text-align: left;
            border-radius: 0;
          }
          :host([status="new"]) a::after {
            border-right: 8px solid green;
            content: "";
            margin-left: -8px;
          }
          :host([status="modified"]) a::after {
            border-right: 8px solid orange;
            content: "";
            margin-left: -8px;
          }
          :host([status="delete"]) a::after {
            border-right: 8px solid red;
            content: "";
            margin-left: -8px;
          }
          #unpublished {
            --simple-icon-width: 20px;
            --simple-icon-height: 20px;
            color: orange;
            float: right;
            margin: -4px 32px 0px 0px;
            vertical-align: top;
            height: 0px;
            width: 0px;
          }
        `,
      ];
    }
    /**
     * LitElement life cycle - render callback
     */
    render() {
      return html`
        <a tabindex="-1" href="${this.url}">
          <button id="wrapper" role="link" noink>
            ${this.icon
              ? html` <simple-icon-lite icon="${this.icon}"></simple-icon-lite> `
              : ``}
            <span class="title">${this.title}</span>
            ${this.trackIcon
              ? html`
                  <simple-icon-lite
                    id="track"
                    icon="${this.trackIcon}"
                  ></simple-icon-lite>
                `
              : ``}
            ${!this.published
              ? html`<simple-icon-lite
                  id="unpublished"
                  title="${this.t.pageIsUnpublished}"
                  icon="icons:visibility-off"
                ></simple-icon-lite>`
              : ``}
          </button>
        </a>
      `;
    }
    static get tag() {
      return "map-menu-item";
    }
    constructor() {
      super();
      this.icon = null;
      this.trackIcon = null;
      this.title = "";
      this.url = "";
      this.active = false;
      this.published = true;
      this.locked = false;
      this.status = "";
      this.t = {
        pageIsUnpublished: "Page is unpublished",
      };
      this.registerLocalization({
        context: this,
        namespace: "map-menu",
        basePath: import.meta.url,
        locales: ["es"],
      });
    }
    /**
     * LitElement life cycle - properties definition
     */
    static get properties() {
      return {
        ...super.properties,
        icon: {
          type: String,
          reflect: true,
        },
        trackIcon: {
          type: String,
          attribute: "track-icon",
        },
        title: {
          type: String,
        },
        url: {
          type: String,
        },
        id: {
          type: String,
          reflect: true,
        },
        active: {
          type: Boolean,
        },
        selected: {
          type: String,
        },
        published: {
          type: Boolean,
        },
        locked: {
          type: Boolean,
        },
        status: {
          type: String,
          reflect: true,
        },
      };
    }
    /**
     * LitElement life cycle - properties changed callback
     */
    updated(changedProperties) {
      changedProperties.forEach((oldValue, propName) => {
        if (propName == "trackIcon") {
          this._trackIconChanged(this[propName], oldValue);
        }
        if (["id", "selected"].includes(propName)) {
          this.__selectedChanged(this.selected, this.id);
        }
      });
    }
    _trackIconChanged(newValue, oldValue) {
      if (this.shadowRoot.querySelector("#track")) {
        if (newValue) {
          this.shadowRoot.querySelector("#track").classList.add("show-icon");
        } else {
          this.shadowRoot.querySelector("#track").classList.remove("show-icon");
        }
      }
    }
    __selectedChanged(selected, id) {
      if (selected === id) {
        this.dispatchEvent(
          new CustomEvent("active-item", {
            bubbles: true,
            cancelable: true,
            composed: true,
            detail: this,
          })
        );
      }
    }
  
    _click() {
      this.dispatchEvent(
        new CustomEvent("link-clicked", {
          bubbles: true,
          cancelable: true,
          composed: true,
          detail: { id: this.id },
        })
      );
    }
  }
  window.customElements.define(MapMenuItem.tag, MapMenuItem);
  export { MapMenuItem };
  