font-helper/src/components/typography.js

// Typography.js

// Obtén la configuración predeterminada
const defaultConfig = require('../../defaultConfig');

// Intenta cargar la configuración del usuario, si no existe, utiliza un objeto vacío
let userConfig = {};
try {
    userConfig = require('../../typography.config');
} catch (error) {
    // No es necesario manejar el error, simplemente utiliza un objeto vacío si no hay configuración del usuario
}

// Combina la configuración predeterminada con la del usuario
const config = { ...defaultConfig, ...userConfig };

class Typography extends HTMLElement {
    connectedCallback() {
        const label = this.getAttribute('label') || '';
        const variant = this.getAttribute('variant') || 'body';
        const fontSizeKey = this.getAttribute('fontSize') || 'medium';
        const colorKey = this.getAttribute('color') || 'primary';

        const fontSize = config.fontSizes[fontSizeKey] || config.fontSizes.medium;
        const color = config.colors[colorKey] || config.colors.primary;

        const shadow = this.attachShadow({ mode: 'open' });

        const wrapper = document.createElement('div');
        wrapper.innerHTML = label;
        wrapper.setAttribute('variant', variant);
        wrapper.style.fontSize = fontSize;
        wrapper.style.color = color;

        wrapper.addEventListener('click', () => this.handleClick());

        shadow.appendChild(wrapper);

        if (fontUrl) {
            this.loadFont(fontUrl);
        } else {
            this.style.fontFamily = defaultFont;
        }
    }

    loadFont(url) {
        const link = document.createElement('link');
        link.href = url;
        link.rel = 'stylesheet';
        document.head.appendChild(link);
    }

    handleClick() {
        console.log('Text clicked');
        // Acciones adicionales al hacer clic en el texto
    }
}

customElements.define('typography', Typography);