import { r as registerInstance, h, a as getElement } from './index-PqnYwNKt.js';
import { d as detectFramework, t as trackComponent } from './framework-detection-DcmcuUOA.js';
import { i as isNestedInIfxComponent } from './dom-utils-Bw2fh5LT.js';

const indicatorCss = ":root{--ifx-font-family:\"Source Sans 3\", \"Arial, sans-serif\"}:host{display:inline-flex}.indicator__container .dot__wrapper{display:flex;width:8px;height:8px;justify-content:center;align-items:center;flex-shrink:0;border-radius:50%;background-color:#0A8276}.indicator__container .number__container{height:16px;display:inline-flex;padding:0;min-width:16px;justify-content:center;align-items:center;border-radius:100px;background-color:#0A8276}.indicator__container .number__container .number__wrapper{padding:0 4px;color:#FFFFFF;text-align:center;font-size:0.875rem;font-style:normal;font-weight:600;line-height:16px}.indicator__container .number__container.inverted{background-color:#FFFFFF}.indicator__container .number__container.inverted .number__wrapper{color:#0A8276}";

const Indicator = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.inverted = false;
        this.variant = 'number';
        this.number = 0;
    }
    handleNumber() {
        this.filteredNumber = !isNaN(this.number) && this.number > 99 ? '99+' : this.number;
    }
    componentWillLoad() {
        this.handleNumber();
    }
    async componentDidLoad() {
        if (!isNestedInIfxComponent(this.el)) {
            const framework = detectFramework();
            trackComponent('ifx-indicator', await framework);
        }
    }
    componentWillUpdate() {
        this.handleNumber();
    }
    render() {
        return (h("div", { key: '35211d70a31d9bf69b84614694d4669877c8a6d9', "aria-label": this.ariaLabel, class: 'indicator__container' }, this.variant === 'number' &&
            h("div", { key: '888f42cb6ad70bb973b62468734bae7abf73f3d9', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '4578b32ca5e7b7747eb7ae729e9732d06da3fcbc', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: '2b3cd2500d4d64bbb27131201ca2d56f720209a0', class: "dot__wrapper" })));
    }
    get el() { return getElement(this); }
};
Indicator.style = indicatorCss;

export { Indicator as ifx_indicator };
//# sourceMappingURL=ifx-indicator.entry.js.map

//# sourceMappingURL=ifx-indicator.entry.js.map