/*! Copyright 2026 Fonticons, Inc. - https://webawesome.com/license */
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;
};
import { html } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";
import { watch } from "../../internal/watch.js";
import WebAwesomeElement from "../../internal/webawesome-element.js";
import styles from "./qr-code.styles.js";
let QrCreator;
let WaQrCode = class extends WebAwesomeElement {
  constructor() {
    super(...arguments);
    this.value = "";
    this.label = "";
    this.size = 128;
    this.fill = "";
    this.background = "";
    this.radius = 0;
    this.errorCorrection = "H";
    this.generated = false;
  }
  firstUpdated(changedProperties) {
    super.firstUpdated(changedProperties);
    if (this.hasUpdated) {
      this.generate();
    }
  }
  generate() {
    if (!this.hasUpdated) {
      return;
    }
    if (!QrCreator) {
      import("qr-creator").then((mod) => {
        QrCreator = mod.default;
        this.generate();
      });
      return;
    }
    this.canvas.style.maxWidth = `${this.size}px`;
    this.canvas.style.maxHeight = `${this.size}px`;
    const computedStyle = getComputedStyle(this);
    QrCreator.render(
      {
        text: this.value,
        radius: this.radius,
        ecLevel: this.errorCorrection,
        // Use the deprecated `fill` attribute if set, otherwise use the current text color
        fill: this.fill || computedStyle.color,
        // Use the deprecated `background` attribute if set, otherwise use transparent (the host has the bg color now)
        background: this.background || null,
        // We draw the canvas larger and scale its container down to avoid blurring on high-density displays
        size: this.size * 2
      },
      this.canvas
    );
    this.generated = true;
  }
  render() {
    return html`
      <canvas
        part="base"
        class="qr-code"
        role="img"
        aria-label=${this.label?.length > 0 ? this.label : this.value}
        @transitionend=${(event) => {
      if (event.propertyName === "color") {
        this.generate();
      }
    }}
      ></canvas>
    `;
  }
};
WaQrCode.css = styles;
__decorateClass([
  query("canvas")
], WaQrCode.prototype, "canvas", 2);
__decorateClass([
  property()
], WaQrCode.prototype, "value", 2);
__decorateClass([
  property()
], WaQrCode.prototype, "label", 2);
__decorateClass([
  property({ type: Number })
], WaQrCode.prototype, "size", 2);
__decorateClass([
  property()
], WaQrCode.prototype, "fill", 2);
__decorateClass([
  property()
], WaQrCode.prototype, "background", 2);
__decorateClass([
  property({ type: Number })
], WaQrCode.prototype, "radius", 2);
__decorateClass([
  property({ attribute: "error-correction" })
], WaQrCode.prototype, "errorCorrection", 2);
__decorateClass([
  state()
], WaQrCode.prototype, "generated", 2);
__decorateClass([
  watch(["background", "errorCorrection", "fill", "radius", "size", "value"], { waitUntilFirstUpdate: true })
], WaQrCode.prototype, "generate", 1);
WaQrCode = __decorateClass([
  customElement("wa-qr-code")
], WaQrCode);
export {
  WaQrCode as default
};
