import { r as registerInstance, a as getElement, h } from './index-wX3eJOEL.js';
import { i as isNestedInIfxComponent } from './dom-utils-CtINY9El.js';
import { d as detectFramework, t as trackComponent } from './tracking-DNHOWgWh.js';

const indicatorCss = () => `: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);
    }
    get el() { return getElement(this); }
    filteredNumber;
    /** Renders the indicator with an inverted color scheme for dark backgrounds. */
    inverted = false;
    /** Provide a short, descriptive text that explains the indicator's meaning or value. */
    ariaLabelText;
    /** Sets variant of the Indicator */
    variant = 'number';
    /** Numeric value to display when using the 'number' variant */
    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: '6c212fffc7b33332438df4e5d98154d61e4b855b', "aria-label-text": this.ariaLabelText, class: 'indicator__container' }, this.variant === 'number' &&
            h("div", { key: 'ec325f386325568ae061fb3eb7b4bd7b2ae6529e', class: `number__container ${this.inverted ? 'inverted' : ""}` }, h("div", { key: '9fcc8c347a1b0542e8edd4e77a0b73f2152a06f4', class: "number__wrapper" }, this.filteredNumber)), this.variant === 'dot' && h("div", { key: 'c16a0356314fddd1f7c5e851f0f54136f0ec7909', class: `dot__wrapper` })));
    }
};
Indicator.style = indicatorCss();

export { Indicator as ifx_indicator };
