wj-elements 0.2.0-alpha.9 → 0.3.0-alpha.1

package/dist/wje-qr-code.js

@@ -2801,6 +2801,17 @@ function requireQrious() {
 }
 var qriousExports = requireQrious();
 const QRious = /* @__PURE__ */ getDefaultExportFromCjs(qriousExports);
+const QR_ATTRIBUTE_ALIASES = {
+  value: ["value"],
+  background: ["background"],
+  backgroundAlpha: ["background-alpha", "backgroundalpha", "backgroundAlpha"],
+  foreground: ["foreground"],
+  foregroundAlpha: ["foreground-alpha", "foregroundalpha", "foregroundAlpha"],
+  level: ["level"],
+  padding: ["padding"],
+  size: ["size"]
+};
+const NUMERIC_OPTIONS = /* @__PURE__ */ new Set(["backgroundAlpha", "foregroundAlpha", "padding", "size"]);
 class QrCode extends WJElement {
   /**
    * Creates an instance of QrCode.
@@ -2813,6 +2824,105 @@ class QrCode extends WJElement {
      */
     __publicField(this, "className", "QrCode");
   }
+  /**
+   * Content encoded into the QR code.
+   * @type {string}
+   */
+  set value(value) {
+    this.setAliasedAttribute("value", value);
+  }
+  get value() {
+    return this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.value) || "empty value";
+  }
+  /**
+   * Background color of the QR code.
+   * @type {string|null}
+   */
+  set background(value) {
+    this.setAliasedAttribute("background", value);
+  }
+  get background() {
+    return this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.background);
+  }
+  /**
+   * Background alpha channel in range 0-1.
+   * Supports aliases: background-alpha, backgroundalpha, backgroundAlpha.
+   * @type {number|null}
+   */
+  set backgroundAlpha(value) {
+    this.setAliasedAttribute("backgroundAlpha", value);
+  }
+  get backgroundAlpha() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.backgroundAlpha);
+    if (value === null) return null;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+  /**
+   * Foreground color of the QR code.
+   * @type {string|null}
+   */
+  set foreground(value) {
+    this.setAliasedAttribute("foreground", value);
+  }
+  get foreground() {
+    return this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.foreground);
+  }
+  /**
+   * Foreground alpha channel in range 0-1.
+   * Supports aliases: foreground-alpha, foregroundalpha, foregroundAlpha.
+   * @type {number|null}
+   */
+  set foregroundAlpha(value) {
+    this.setAliasedAttribute("foregroundAlpha", value);
+  }
+  get foregroundAlpha() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.foregroundAlpha);
+    if (value === null) return null;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+  /**
+   * Error correction level. Accepted values: L, M, Q, H.
+   * @type {string|null}
+   */
+  set level(value) {
+    if (value === null || value === void 0 || value === "") {
+      this.removeAttribute("level");
+      return;
+    }
+    this.setAttribute("level", String(value).trim().toUpperCase());
+  }
+  get level() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.level);
+    return value ? String(value).trim().toUpperCase() : null;
+  }
+  /**
+   * Padding around the QR code in pixels.
+   * @type {number|null}
+   */
+  set padding(value) {
+    this.setAliasedAttribute("padding", value);
+  }
+  get padding() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.padding);
+    if (value === null) return null;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
+  /**
+   * Output QR code size in pixels.
+   * @type {number|null}
+   */
+  set size(value) {
+    this.setAliasedAttribute("size", value);
+  }
+  get size() {
+    const value = this.getAttributeFromAliases(QR_ATTRIBUTE_ALIASES.size);
+    if (value === null) return null;
+    const numericValue = Number(value);
+    return Number.isFinite(numericValue) ? numericValue : null;
+  }
   /**
    * Returns the CSS stylesheet for the component.
    * @returns {CSSStyleSheet} The CSS stylesheet.
@@ -2831,7 +2941,7 @@ class QrCode extends WJElement {
    * @returns {string[]} The list of observed attributes.
    */
   static get observedAttributes() {
-    return ["value", "background", "backgroundAlpha", "foreground", "foregroundAlpha", "level", "padding", "size"];
+    return Object.values(QR_ATTRIBUTE_ALIASES).flat();
   }
   /**
    * Draws the QR code component.
@@ -2859,31 +2969,63 @@ class QrCode extends WJElement {
    */
   afterDraw() {
     const canvas = this.shadowRoot.querySelector("canvas");
+    if (!canvas) return;
     const qrOptions = {};
-    const attributes = [
-      "value",
-      "background",
-      "backgroundAlpha",
-      "foreground",
-      "foregroundAlpha",
-      "level",
-      "padding",
-      "size"
-    ];
-    attributes.forEach((attribute) => {
-      const value = this.getAttribute(attribute);
-      if (value !== null) {
-        qrOptions[attribute] = value;
+    Object.entries(QR_ATTRIBUTE_ALIASES).forEach(([optionName, aliases]) => {
+      const value = this.getAttributeFromAliases(aliases);
+      if (value === null) return;
+      if (optionName === "level") {
+        const level = String(value).trim().toUpperCase();
+        if (["L", "M", "Q", "H"].includes(level)) {
+          qrOptions.level = level;
+        }
+        return;
+      }
+      if (NUMERIC_OPTIONS.has(optionName)) {
+        const numericValue = Number(value);
+        if (Number.isFinite(numericValue)) {
+          qrOptions[optionName] = numericValue;
+        }
+        return;
       }
+      qrOptions[optionName] = value;
     });
-    if (!qrOptions.hasOwnProperty("value")) {
+    if (!Object.prototype.hasOwnProperty.call(qrOptions, "value")) {
       qrOptions.value = "empty value";
     }
-    new QRious({
+    this.qr = new QRious({
       element: canvas,
       ...qrOptions
     });
   }
+  /**
+   * Returns first defined attribute value from alias list.
+   * @param {string[]} aliases
+   * @returns {string|null}
+   */
+  getAttributeFromAliases(aliases = []) {
+    for (const alias of aliases) {
+      const value = this.getAttribute(alias);
+      if (value !== null) return value;
+    }
+    return null;
+  }
+  /**
+   * Writes value to the canonical attribute and clears alternate aliases.
+   * @param {string} optionName
+   * @param {string|number|null|undefined} value
+   */
+  setAliasedAttribute(optionName, value) {
+    const aliases = QR_ATTRIBUTE_ALIASES[optionName] || [];
+    const [primaryAlias, ...secondaryAliases] = aliases;
+    secondaryAliases.forEach((alias) => this.removeAttribute(alias));
+    if (!primaryAlias) return;
+    if (value === null || value === void 0 || value === "") {
+      this.removeAttribute(primaryAlias);
+      return;
+    }
+    this.setAttribute(primaryAlias, String(value));
+  }
 }
 QrCode.define("wje-qr-code", QrCode);
 export {