import{css as e,html as t}from"../../../../../lit/index.js";import{store as o}from"../haxcms-site-store.js";import"../../../../hax-iconset/lib/simple-hax-iconset.js";import"../../../../simple-tooltip/simple-tooltip.js";import"../../../../simple-icon/lib/simple-icon-button-lite.js";import{HAXCMSI18NMixin as i}from"./HAXCMSI18NMixin.js";const QRCodeMixin=function(r){return class extends(i(r)){constructor(){super(),this.showQRCode=!1,this.t.currentPage="Current page",this.t.qrCodeForCurrentPage="QR code for Current page"}firstUpdated(e){super.firstUpdated&&super.firstUpdated(e),this.shadowRoot.querySelector("#qrcodepopover")&&(this.qrcodebtn=this.shadowRoot.querySelector("#qrcodebtn"),this.shadowRoot.querySelector("#qrcodepopover").target=this.qrcodebtn)}static get styles(){let t=[];return super.styles&&(t=super.styles),[t,e`
          simple-popover:not(:defined) {
            display: none;
          }
          simple-popover {
            padding: 2px;
          }
          .qr-code-btn {
            color: inherit;
            --simple-icon-height: 24px;
            --simple-icon-width: 24px;
          }
          #qrcodebtnwrapper {
            display: inline-flex;
          }
        `]}QRCodeButton(e="left"){return import("../../../../simple-popover/simple-popover.js"),import("../../../../q-r/q-r.js"),t`
        <div
          id="qrcodebtnwrapper"
          part="${this.editMode?"edit-mode-active":""}"
        >
          <simple-icon-button-lite
            part="qr-code-btn"
            class="qr-code-btn btn"
            icon="hax:qr-code"
            label="${this.t.qrCodeForCurrentPage}"
            @click="${this.QRCodeButtonToggle}"
            id="qrcodebtn"
          ></simple-icon-button-lite>
          <simple-tooltip for="qrcodebtn" position="${e}">
            ${this.t.currentPage}
          </simple-tooltip>
          <simple-popover
            ?hidden="${!this.showQRCode}"
            id="qrcodepopover"
            position="${e}"
            fit-to-visible-bounds
            auto
          >
            ${this.showQRCode?t`
                  <div style="width:190px;height:190px;">
                    <q-r
                      modulesize="4"
                      margin="0"
                      title="${o.activeTitle}"
                      data="${globalThis.location.href.replace("https://iam","https://oer")}"
                    ></q-r>
                  </div>
                `:""}
          </simple-popover>
        </div>
      `}QRCodeButtonToggle(e){this.showQRCode=!this.showQRCode}static get properties(){let e={};return super.properties&&(e=super.properties),{...e,showQRCode:{type:Boolean}}}}};export{QRCodeMixin};