constructor()

in example/src/theme-builder/theme-builder.ts [33:154]
32 lines of code
1 McCabe index (conditional complexity)

    constructor(selector: string | HTMLElement) {
        delete this.currentConfig.default;
        this.themeSelector.addEventListener('change', e => {
            if (this.themeSelector.value.match('base-')) {
                this.baseThemeType = this.themeSelector.value.replace('base-', '') as 'light' | 'dark';
                if (this.baseThemeType === 'light') {
                    this.currentConfig = structuredClone(BaseConfigLight) as any;
                } else {
                    this.currentConfig = structuredClone(BaseConfigDark) as any;
                }
                this.inputsWrapper.innerHTML = '';
                this.fillInputWrapper();
                this.buildCssValues();
            } else if (this.themeSelector.value.match('dark-')) {
                document.querySelector('body')?.classList.add('vscode-dark');
            } else {
                document.querySelector('body')?.classList.remove('vscode-dark');
            }
            document.querySelector('html')?.setAttribute('theme', this.themeSelector.value);
        });
        this.mainWrapper.classList.add('mynah-ui-example-input-main-wrapper');
        this.inputsWrapper.classList.add('mynah-ui-example-input-items-wrapper');
        this.buttonsWrapper.classList.add('mynah-ui-example-input-buttons-wrapper');
        let parentWrapper: HTMLElement;
        if (typeof selector === 'string') {
            parentWrapper = document.querySelector(selector) ?? (document.querySelector('body') as HTMLElement);
        } else {
            parentWrapper = selector;
        }

        this.mainWrapper.insertAdjacentElement('beforeend', this.inputsWrapper);
        parentWrapper.insertAdjacentElement('beforeend', this.buttonsWrapper);
        parentWrapper.insertAdjacentElement('beforeend', this.mainWrapper);

        this.mainWrapper.insertAdjacentHTML(
            'beforeend',
            `
            <p>
                First, please select one of the <b>Custom Theme</b>s from the themes list on the header bar.
                After that you'll see the changes whenever you adjust one of the options below.</br>
                For measurement values (or anything other than colors) you can use current custom properties like the sizings.</br>
                First select (No Unit) option for the unit and then you can type any string into the value field. 
                And you can use custom properties as usual like <b>var(--mynah-sizing-1)</b> and the sizing values goes from <b>1 to 18</b>.
            </p>
            `
        );

        this.fillInputWrapper();

        const uploadThemeConfigFilePicker = document.createElement('input');
        uploadThemeConfigFilePicker.setAttribute('type', 'file');
        uploadThemeConfigFilePicker.setAttribute('accept', '.mynahuitc');
        uploadThemeConfigFilePicker.classList.add('hidden');
        uploadThemeConfigFilePicker.classList.add('config-operation');
        uploadThemeConfigFilePicker.classList.add('fill-state-always');
        uploadThemeConfigFilePicker.addEventListener('change', async () => {
            const file = uploadThemeConfigFilePicker.files?.item(0);
            if (file) {
                const text = await file.text();
                try {
                    this.currentConfig = JSON.parse(text);
                    this.inputsWrapper.innerHTML = '';
                    this.fillInputWrapper();
                    this.buildCssValues();
                    uploadThemeConfigFilePicker.value = '';
                } catch (err) {
                    console.warn("Coudln't read the JSON content");
                }
            }
        });

        const downloadThemeConfigButton = document.createElement('button');
        downloadThemeConfigButton.innerHTML = '<span>Download Config</span>';
        downloadThemeConfigButton.classList.add('mynah-button');
        downloadThemeConfigButton.classList.add('config-operation');
        downloadThemeConfigButton.classList.add('fill-state-always');
        downloadThemeConfigButton.addEventListener('click', () => {
            download('mynah-ui-theme.mynahuitc', JSON.stringify(this.currentConfig));
        });

        const resetThemeConfigButton = document.createElement('button');
        resetThemeConfigButton.innerHTML = '<span>Reset</span>';
        resetThemeConfigButton.classList.add('mynah-button');
        resetThemeConfigButton.classList.add('config-operation');
        resetThemeConfigButton.classList.add('fill-state-always');
        resetThemeConfigButton.addEventListener('click', () => {
            this.currentConfig = structuredClone(this.baseThemeType === 'light' ? BaseConfigLight : BaseConfigDark) as any;
            this.inputsWrapper.innerHTML = '';
            this.fillInputWrapper();
            this.buildCssValues();
        });

        const uploadThemeConfigButton = document.createElement('button');
        uploadThemeConfigButton.innerHTML = '<span>Upload Config</span>';
        uploadThemeConfigButton.classList.add('mynah-button');
        uploadThemeConfigButton.classList.add('config-operation');
        uploadThemeConfigButton.classList.add('fill-state-always');
        uploadThemeConfigButton.addEventListener('click', () => {
            uploadThemeConfigFilePicker.click();
        });

        const downloadThemeButton = document.createElement('button');
        downloadThemeButton.innerHTML = '<span>Download Theme (CSS)</span>';
        downloadThemeButton.classList.add('mynah-button');
        downloadThemeButton.classList.add('config-operation');
        downloadThemeButton.classList.add('fill-state-always');
        downloadThemeButton.addEventListener('click', () => {
            download(
                'mynah-ui-theme.css',
                `:root {
                ${this.getCssCustomVars()}
            }`
            );
        });
        this.buttonsWrapper.insertAdjacentElement('beforeend', uploadThemeConfigFilePicker);
        this.buttonsWrapper.insertAdjacentElement('beforeend', uploadThemeConfigButton);
        this.buttonsWrapper.insertAdjacentElement('beforeend', downloadThemeConfigButton);
        this.buttonsWrapper.insertAdjacentElement('beforeend', downloadThemeButton);
        this.buttonsWrapper.insertAdjacentElement('beforeend', resetThemeConfigButton);

        this.buildCssValues();
    }