import { p as proxyCustomElement, H, h } from './p-a53686b3.js';
import { L as ListType } from './p-5ba6737a.js';
import { l as logger } from './p-e3d2e899.js';
import { d as defineCustomElement$3 } from './p-b2ff86cf.js';
import { d as defineCustomElement$2 } from './p-cfb33ac7.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 = /*@__PURE__*/ proxyCustomElement(class List extends H {
    constructor() {
        super();
        this.__registerHost();
        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: 'c8886bcce56127fce745a9538b9d7f83ae9f5bb2' }, h(Tag, { key: 'e682bfdfc148955e526cc55884a93495aaf5b7fc', class: className }, h("slot", { key: 'afa6e0c99b211bb3b7175788edcfa01d49b60887' }))));
    }
    get hostElement() { return this; }
    static get style() { return DigiListStyle0; }
}, [6, "digi-list", {
        "afListType": [1, "af-list-type"],
        "listItems": [32],
        "hasSlottedItems": [32]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-list", "digi-icon-check", "digi-typography"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-list":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, List);
            }
            break;
        case "digi-icon-check":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "digi-typography":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const DigiList = List;
const defineCustomElement = defineCustomElement$1;

export { DigiList, defineCustomElement };
