'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const lit = require('lit');
const decorators_js = require('lit/decorators.js');
const QRCodeStyling = require('qr-code-styling');
const index = require('../../chunks/index-BBPgtFEP.js');
require('../lukso-icon/index.cjs');
require('../../tailwind-config.cjs');
require('../../chunks/index-oDo-wiUs.js');
const cn = require('../../chunks/cn-JMx_imgS.js');
require('viem');
require('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
  }
};
exports.LuksoQrCode = class LuksoQrCode extends index.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 lit.html`
      <div
        class="${cn.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 ? lit.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>` : lit.html`<slot></slot>`}
        </div>
      </div>
    `;
  }
};
__decorateClass([
  decorators_js.property({ type: String, reflect: true })
], exports.LuksoQrCode.prototype, "value", 2);
__decorateClass([
  decorators_js.property({ type: Number, reflect: true })
], exports.LuksoQrCode.prototype, "size", 2);
__decorateClass([
  decorators_js.property({ type: String, reflect: true })
], exports.LuksoQrCode.prototype, "image", 2);
__decorateClass([
  decorators_js.property({ type: Object })
], exports.LuksoQrCode.prototype, "options", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "custom-class", reflect: true })
], exports.LuksoQrCode.prototype, "customClass", 2);
__decorateClass([
  decorators_js.state()
], exports.LuksoQrCode.prototype, "isLoading", 2);
exports.LuksoQrCode = __decorateClass([
  index.safeCustomElement("lukso-qr-code")
], exports.LuksoQrCode);
