import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import QRCodeStyling from 'qr-code-styling';
import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
import '../lukso-icon/index.js';
import '../../tailwind-config.js';
import '../../chunks/index-CSnDkMHN.js';
import { c as cn } from '../../chunks/cn-Df_5FiGi.js';
import 'viem';
import 'axe-core';

const style = ":host {\n  display: flex;\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
const DEFAULT_QR_OPTIONS = {
  dotsOptions: {
    color: "#243542",
    type: "rounded"
  },
  backgroundOptions: {
    color: "#f8fafb"
  },
  cornersSquareOptions: {
    type: "extra-rounded"
  },
  imageOptions: {
    margin: 5
  }
};
let LuksoQrCode = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.value = "";
    this.size = 280;
    this.image = void 0;
    this.options = {};
    this.customClass = void 0;
    this.isLoading = true;
    this.qrCodeInstance = null;
  }
  updated(changedProperties) {
    super.updated(changedProperties);
    if (changedProperties.has("value") && this.value) {
      this.generateQrCode();
    }
  }
  generateQrCode() {
    const container = this.shadowRoot?.querySelector(".qr-code-container");
    if (!container) return;
    this.isLoading = true;
    if (this.qrCodeInstance) {
      this.qrCodeInstance = null;
    }
    this.qrCodeInstance = new QRCodeStyling({
      ...DEFAULT_QR_OPTIONS,
      ...this.options,
      width: this.size,
      height: this.size,
      type: "svg",
      data: this.value,
      image: this.image || void 0
    });
    container.innerHTML = "";
    this.qrCodeInstance.append(container);
    this.isLoading = false;
  }
  render() {
    return html`
      <div
        class="${cn(
      `relative flex items-center justify-center ${this.customClass}`
    )}"
      >
        <div
          class="qr-code-container flex items-center justify-center"
          style="min-height: ${this.size}px; min-width: ${this.size}px"
        ></div>
        <div class="absolute inset-0 flex items-center justify-center">
          ${this.isLoading ? html`<div
                class="flex items-center justify-center"
                style="min-height: ${this.size}px"
              >
                <lukso-icon
                  name="progress-indicator-alt"
                  size="x-large"
                ></lukso-icon>
              </div>` : html`<slot></slot>`}
        </div>
      </div>
    `;
  }
};
__decorateClass([
  property({ type: String, reflect: true })
], LuksoQrCode.prototype, "value", 2);
__decorateClass([
  property({ type: Number, reflect: true })
], LuksoQrCode.prototype, "size", 2);
__decorateClass([
  property({ type: String, reflect: true })
], LuksoQrCode.prototype, "image", 2);
__decorateClass([
  property({ type: Object })
], LuksoQrCode.prototype, "options", 2);
__decorateClass([
  property({ type: String, attribute: "custom-class", reflect: true })
], LuksoQrCode.prototype, "customClass", 2);
__decorateClass([
  state()
], LuksoQrCode.prototype, "isLoading", 2);
LuksoQrCode = __decorateClass([
  safeCustomElement("lukso-qr-code")
], LuksoQrCode);

export { LuksoQrCode };
