@tokens-studio/dtcg-convert/dist/dtcg-convert.js

Conversion tool that converts Style Dictionary JSON formatted file(s) to DTCG

import { LitElement, css, html } from 'lit';
import { ref, createRef } from 'lit/directives/ref.js';
import { convertJSONToDTCG, convertZIPToDTCG } from 'style-dictionary/utils';
import { downloadJSON, downloadZIP } from './downloadFile.js';
export class DtcgConvert extends LitElement {
    fileInputRef = createRef();
    static get styles() {
        return [
            css `
        :host {
          display: block;
        }
      `,
        ];
    }
    static get properties() {
        return {
            label: {
                type: String,
            },
        };
    }
    constructor() {
        super();
        this.label = 'Convert tokens to DTCG';
    }
    errMessage(count) {
        return `Only 1 assigned slot element allowed, found ${count}. Try wrapping them in a single parent element.`;
    }
    defaultButtonTemplate() {
        return html `
      <sl-button @click=${this.triggerUpload} variant="primary">${this.label}</sl-button>
    `;
    }
    connectedCallback() {
        super.connectedCallback();
        this.childCount = this.childNodes.length;
        if (this.childCount > 1) {
            throw new Error(this.errMessage(this.childCount));
        }
    }
    async onSlotChange(ev) {
        const assignedNodes = ev.target.assignedNodes();
        if (assignedNodes.length === 1) {
            const slottable = assignedNodes[0];
            if (!(slottable instanceof HTMLElement)) {
                throw new Error('Assigned slot element must be instance of HTMLElement, a Text Node is not allowed.');
            }
            slottable.addEventListener('click', this.triggerUpload.bind(this));
        }
        else {
            throw new Error(this.errMessage(assignedNodes.length));
        }
    }
    render() {
        // render default shoelace button
        if (this.childCount === 0) {
            import('@shoelace-style/shoelace/dist/components/button/button.js');
        }
        return html `
      <slot @slotchange=${this.onSlotChange}></slot>
      ${this.childCount === 0
            ? html `<sl-button @click=${this.triggerUpload} variant="primary">${this.label}</sl-button>`
            : ''}
      <input
        ${ref(this.fileInputRef)}
        @change=${this.upload}
        id="upload-tokens-input"
        type="file"
        accept="application/*, text/*"
        aria-hidden="true"
        hidden
      />
    `;
    }
    triggerUpload() {
        const fileInput = this.fileInputRef.value;
        if (fileInput) {
            fileInput.dispatchEvent(new MouseEvent('click'));
        }
    }
    async upload(ev) {
        if (ev.target instanceof HTMLInputElement) {
            const file = ev.target.files?.[0];
            if (file) {
                const today = new Date(Date.now());
                const filename = `dtcg-tokens_${today.getFullYear()}-${today.getMonth()}-${('0' + today.getDate()).slice(-2)}`;
                if (file.type.includes('zip')) {
                    const zipBlob = await convertZIPToDTCG(file);
                    await downloadZIP(zipBlob, `${filename}.zip`);
                }
                else if (file.type.includes('json')) {
                    const jsonBlob = await convertJSONToDTCG(file);
                    await downloadJSON(jsonBlob, `${filename}.json`);
                }
                else {
                    throw new Error('Only ZIP and JSON type uploads are supported.');
                }
            }
        }
    }
}
//# sourceMappingURL=dtcg-convert.js.map