'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-7a477838.js');
const listType_enum = require('./list-type.enum-aea4d012.js');
const logger_util = require('./logger.util-fdafc086.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) {
        index.registerInstance(this, hostRef);
        this.listItems = [];
        this.hasSlottedItems = undefined;
        this.afListType = listType_enum.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_enum.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_util.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_enum.ListType.NUMBERED ? 'ol' : 'ul';
        const className = {
            'digi-list': true,
            [`digi-list--${this.afListType}`]: true
        };
        return (index.h("digi-typography", { key: 'c8886bcce56127fce745a9538b9d7f83ae9f5bb2' }, index.h(Tag, { key: 'e682bfdfc148955e526cc55884a93495aaf5b7fc', class: className }, index.h("slot", { key: 'afa6e0c99b211bb3b7175788edcfa01d49b60887' }))));
    }
    get hostElement() { return index.getElement(this); }
};
List.style = DigiListStyle0;

exports.digi_list = List;
