Checkbox List

import './checkbox-list.scss';
export default class CheckboxList {
    constructor(module, onSelect) {
        this.module = module;
        this.listContainer = module.querySelector('.js-list-container');
        this.toggle = this.module.querySelector('.js-toggle');
        this.onSelect = onSelect;
        this.addListeners();
    }
    addListeners() {
        this.toggle.addEventListener('click', () => {
            const activeList = document.querySelector('.js-list-container.active');
            if (activeList && activeList !== this.listContainer) {
                activeList.classList.remove('active');
            }
            this.listContainer.classList.toggle('active');
        });
        this.module.querySelectorAll('.js-checkbox-item > input').forEach((item) => {
            item.addEventListener('change', () => {
                if (this.onSelect) {
                    this.onSelect(item);
                }
                this.setActiveToggle();
            });
        });
        this.module.addEventListener('click', (e) => {
            e.stopPropagation();
        });
        document.addEventListener('click', () => {
            this.hide();
        });
    }
    removeItem(value) {
        const activeOption = this.module.querySelector(`.js-checkbox-item > input[value='${value}']`);
        if (activeOption) {
            activeOption.checked = false;
        }
        this.setActiveToggle();
    }
    removeAllItems() {
        this.module.querySelectorAll('.js-checkbox-item > input:checked').forEach((item) => {
            const checkbox = item;
            checkbox.checked = false;
        });
        this.setActiveToggle();
    }
    setActiveToggle() {
        if (this.module.querySelector('.js-checkbox-item > input:checked')) {
            this.toggle.classList.add('active');
        } else {
            this.toggle.classList.remove('active');
        }
    }
    setActiveOption(value) {
        const option = this.module.querySelector(`.js-checkbox-item > input[value='${value}']`);
        if (option) {
            option.checked = true;
        }
        this.setActiveToggle();
    }
    getLabelByValue(value) {
        const option = this.module.querySelector(`.js-checkbox-item > input[value='${value}']`);
        if (option) {
            return option.dataset.label;
        }
        return value;
    }
    hide() {
        if (this.listContainer.classList.contains('active')) {
            this.listContainer.classList.remove('active');
        }
    }
}