@webkeypad/core/dist/index.js

Lightweight customizable on-screen keyboard core

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  VirtualKeyboard: () => VirtualKeyboard
});
module.exports = __toCommonJS(index_exports);

// src/style-injector.ts
var style = `.webkeypad-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.webkeypad-row {
  display: flex;
  gap: 0.25rem;
}

.webkeypad-key {
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f9f9f9;
  cursor: pointer;
  font-size: 1rem;
  user-select: none;
}

.webkeypad-key:hover {
  background-color: #e0e0e0;
}`;
function injectDefaultStyles() {
  if (document.querySelector("[data-webkeypad-style]")) return;
  const tag = document.createElement("style");
  tag.setAttribute("data-webkeypad-style", "true");
  tag.textContent = style;
  document.head.appendChild(tag);
}

// src/index.ts
var VirtualKeyboard = class {
  constructor(options) {
    this.container = null;
    injectDefaultStyles();
    this.layout = options.layout;
    this.onKeyPress = options.onKeyPress;
  }
  mount(container) {
    this.container = container;
    this.render();
  }
  updateLayout(layout) {
    this.layout = layout;
    this.render();
  }
  render() {
    var _a;
    const container = this.container;
    if (!container) return;
    container.innerHTML = "";
    container.className = ((_a = this.classNames) == null ? void 0 : _a.root) || "webkeypad-container";
    this.layout.forEach((row) => {
      var _a2;
      const rowEl = document.createElement("div");
      rowEl.className = ((_a2 = this.classNames) == null ? void 0 : _a2.row) || "webkeypad-row";
      row.forEach((key) => {
        var _a3;
        const keyEl = document.createElement("button");
        keyEl.className = ((_a3 = this.classNames) == null ? void 0 : _a3.key) || "webkeypad-key";
        keyEl.textContent = key;
        keyEl.onclick = () => {
          if (this.onKeyPress) {
            this.onKeyPress(key);
          }
        };
        rowEl.appendChild(keyEl);
      });
      container.appendChild(rowEl);
    });
  }
  destroy() {
    if (this.container) {
      this.container.innerHTML = "";
      this.container = null;
    }
  }
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  VirtualKeyboard
});