Belender Web Component

📖 Description

This package provides the <belender-web-component> as a reusable web component built with Angular and distributed as a standalone package.
It can be used in any frontend framework (Angular, React, Vue, Lit, plain HTML/JS, etc.) without additional setup.

📦 Installation

npm i widget-web-component

Usage

import { LitElement, html } from "lit";
import { initBelenderComponent } from 'widget-web-component'; 

// 1. Ejecutar la función asíncrona para iniciar Angular y obtener la clase.
initBelenderComponent()
    .then((BelenderWebComponent) => {
        
        // 2. Usar la clase (Function) obtenida para el registro manual.
        customElements.define('belender-web-component', BelenderWebComponent);
        
        console.log("✅ Componente registrado exitosamente.");
    })
    .catch(err => {
        console.error("❌ Fallo el registro del Web Component:", err);
    });

export class BelenderWidget extends LitElement {
  connectedCallback() {
    super.connectedCallback();
    this.loadData();
  }

  loadData() {
    const widget = this.shadowRoot.getElementById("widget");
    if (!widget) {
      setTimeout(() => {
        this.loadData();
      }, 100);
      return;
    }
    widget.isWebComponent = true; <- required
    widget.editableDates = true; <- true for enable date inputs to edit
    widget.flowType = "clavepin";
    widget.userID = "";
    widget.packageId = "";
    widget.documentNumber = "";
    widget.birthDate = "1990/10/10";
    widget.documentExpirationDate = "2030/1/1";

    this.requestUpdate();
  }

  render() {
    return html`
      <belender-web-component id="widget"></belender-web-component>
    `;
  }
}