import { r as registerInstance, h, g as getElement } from './index-148a7577.js';
import { L as ListType } from './list-type.enum-fbb331ad.js';
import { l as logger } from './logger.util-ede3c48a.js';

const listCss = ".sc-digi-list-h{--digi--list--padding-inline-start:0.25rem}.sc-digi-list-h .digi-list--checked.sc-digi-list{list-style-position:inside;padding-inline-start:var(--digi--list--padding-inline-start)}.sc-digi-list-h .digi-list--checked.sc-digi-list li.sc-digi-list{list-style:none;display:flex;align-items:flex-start}.sc-digi-list-s .digi-list--checked .digi-list__icon{padding-right:var(--digi--padding--small);width:1rem;min-height:auto;flex-shrink:0;align-items:start;margin-top:rem(7)}";
const DigiListStyle0 = listCss;

const List = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.listItems = [];
        this.hasSlottedItems = undefined;
        this.afListType = ListType.BULLET;
    }
    componentWillLoad() {
        this.getListItems();
    }
    componentWillUpdate() {
        this.getListItems();
    }
    componentDidLoad() {
        // Observe changes to children for dynamically added items
        this._observer = new MutationObserver(() => {
            this.getListItems();
        });
        //observes changes to the list of child nodes
        this._observer.observe(this.hostElement, { childList: true });
        this.applyCheckedListStyling();
    }
    componentDidUpdate() {
        this.applyCheckedListStyling();
    }
    // Stop observing changes when the component no longer exists in the DOM
    disconnectedCallback() {
        if (this._observer) {
            this._observer.disconnect();
        }
    }
    applyCheckedListStyling() {
        if (this.afListType === ListType.CHECKED) {
            const lis = this.hostElement.querySelectorAll('li');
            lis.forEach((li) => {
                if (!li.querySelector('digi-icon-check')) {
                    const icon = document.createElement('digi-icon-check');
                    icon.classList.add('digi-list__icon');
                    li.insertBefore(icon, li.firstChild);
                }
            });
        }
        else {
            const lis = this.hostElement.querySelectorAll('li');
            lis.forEach((li) => {
                const icon = li.querySelector('digi-icon-check');
                if (icon) {
                    li.removeChild(icon);
                }
            });
        }
    }
    getListItems() {
        const slotItems = this.hostElement.querySelectorAll('li');
        //maybe not needed, do we want to warn in the consol, or is this maybe a failsafe?
        if (!slotItems || slotItems.length <= 0) {
            this.hasSlottedItems = false;
            this.listItems = [];
            logger.warn(`The slot contains no <li> elements.`, this.hostElement);
            return;
        }
        this.hasSlottedItems = true;
        this.listItems = Array.from(slotItems);
    }
    render() {
        const Tag = this.afListType === ListType.NUMBERED ? 'ol' : 'ul';
        const className = {
            'digi-list': true,
            [`digi-list--${this.afListType}`]: true
        };
        return (h("digi-typography", { key: 'c891426704febd087cea0e032483d8d821097a6b' }, h(Tag, { key: 'a4b01c02c8c61fba4a1fcb64fc465f836063d9dd', class: className }, h("slot", { key: '3b36dafaafcd40c15a47678894dba13d864af18c' }))));
    }
    get hostElement() { return getElement(this); }
};
List.style = DigiListStyle0;

export { List as digi_list };
