import { g as getElement, r as registerInstance, h, H as Host } from './index-smGPjoDX.js';
import { r as runPromise, t as tapError, l as logError, c as catchAll, s as succeed } from './Effect-D9S7OTyY.js';
import { R as ReactiveControllerHost, A as AriaValidationController } from './aria-validation-controller-C7nQzCCq.js';
import { f as fetchIconSvg, e as emptyDefaultSvg } from './icons-B71gAZmE.js';

const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));display:inline-block;line-height:0;svg{display:block}svg>path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));height:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))}}[size='sm'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));height:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem))}}[size='md'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem))}}[size='lg'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));height:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem))}}[size='inherit'].sc-lmvz-icon-h{svg{width:inherit;height:inherit}}[weight='light'].sc-lmvz-icon-h{svg>path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg>path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg>path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg>path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;

const LmvzIcon = class extends ReactiveControllerHost {
    intersectionObserver;
    get el() { return getElement(this); }
    icon;
    weight = 'medium';
    size = 'md';
    iconData;
    visible = false;
    ariaLabel;
    get ariaHidden() {
        return !this.ariaLabel;
    }
    constructor(hostRef) {
        super();
        registerInstance(this, hostRef);
        this.addController(new AriaValidationController(this));
    }
    connectedCallback() {
        this.waitUntilVisible(() => {
            this.visible = true;
            this.loadIconPathData();
        });
    }
    disconnectedCallback() {
        if (this.intersectionObserver) {
            this.intersectionObserver.disconnect();
            this.intersectionObserver = null;
        }
    }
    async loadIconPathData() {
        const { icon, visible } = this;
        if (!icon || !visible) {
            return;
        }
        this.iconData = await runPromise(fetchIconSvg(this.icon).pipe(tapError(error => logError(`Error loading icon "${icon}":`, error.message, error.cause, error.stack)), catchAll(() => succeed(emptyDefaultSvg()))));
    }
    render() {
        return h(Host, { key: '50d0f96ec5085a47ca7783e5232dfb503fa32d29', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
    }
    waitUntilVisible(callback, rootMargin = 50) {
        if (typeof window === 'undefined' || !window.IntersectionObserver) {
            callback();
            return;
        }
        this.intersectionObserver = new IntersectionObserver(entries => {
            entries.some(entry => {
                if (entry.isIntersecting) {
                    this.intersectionObserver.disconnect();
                    this.intersectionObserver = null;
                    callback();
                    return true;
                }
                return false;
            });
        }, { rootMargin: `${rootMargin}px` });
        this.intersectionObserver.observe(this.el);
    }
    static get assetsDirs() { return ["../../assets/icons"]; }
    static get watchers() { return {
        "icon": [{
                "loadIconPathData": 0
            }]
    }; }
};
LmvzIcon.style = lmvzIconCss();

export { LmvzIcon as lmvz_icon };
