'use strict';

var index = require('./index-C2yDXRqP.js');
var icons = require('./icons-swqMn6s2.js');
var reactiveControllerHost = require('./reactive-controller-host-CtaVAiYJ.js');
require('./logger-Bn2yoZGP.js');
require('./aria-loader-CfFuAbJn.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.ReactiveControllerHost {
    intersectionObserver;
    ariaValidationController = new reactiveControllerHost.AriaValidationController(this);
    get el() { return index.getElement(this); }
    validationEl;
    icon;
    weight = 'medium';
    size = 'md';
    iconset;
    iconData;
    visible = false;
    ariaLabel;
    get ariaHidden() {
        return !this.ariaLabel;
    }
    constructor(hostRef) {
        super();
        index.registerInstance(this, hostRef);
        this.addController(this.ariaValidationController);
    }
    connectedCallback() {
        this.waitUntilVisible(() => {
            this.visible = true;
            this.loadIconPathData();
        });
        super.connectedCallback();
    }
    disconnectedCallback() {
        if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
            this.intersectionObserver.disconnect();
        }
        this.intersectionObserver = undefined;
        super.disconnectedCallback();
    }
    async loadIconPathData() {
        const { icon, iconset, visible } = this;
        if (!icon || !visible) {
            return;
        }
        if (icons.isValidSVG(icon)) {
            this.iconData = icon;
            return;
        }
        this.iconData = await icons.resolveIconSvg({
            icon,
            iconset,
        });
    }
    componentDidRender() {
        this.validationEl = this.el.querySelector('svg');
        this.ariaValidationController.revalidateAria();
        super.componentDidRender();
    }
    render() {
        return index.h(index.Host, { key: '6022ed0e30bcdd13455ccaae65784ac70abcb349', 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) {
                    if (this.intersectionObserver && typeof this.intersectionObserver.disconnect === 'function') {
                        this.intersectionObserver.disconnect();
                    }
                    this.intersectionObserver = undefined;
                    callback();
                    return true;
                }
                return false;
            });
        }, { rootMargin: `${rootMargin}px` });
        this.intersectionObserver.observe(this.el);
    }
    static get watchers() { return {
        "icon": [{
                "loadIconPathData": 0
            }],
        "iconset": [{
                "loadIconPathData": 0
            }]
    }; }
};
LmvzIcon.style = lmvzIconCss();

exports.lmvz_icon = LmvzIcon;
