import { p as proxyCustomElement, H, h, d as Host } from './p-a53686b3.js';
import { B as BadgeNotificationShape } from './p-717306ef.js';

const badgeNotificationCss = ".sc-digi-badge-notification-h{--digi--badge-notification--color--text:var(--digi--color--text--secondary);--digi--badge-notification--color--border:var(--digi--color--border--notification);--digi--badge-notification--background-color:var(--digi--color--background--notification);--digi--badge-notification--font-weight:var(--digi--global--typography--font-weight--semibold)}.sc-digi-badge-notification-h .digi-badge-notification.sc-digi-badge-notification{font-size:0.75rem;font-weight:var(--digi--badge-notification--font-weight);border-width:var(--digi--border-width--secondary);border-style:solid;color:var(--digi--badge-notification--color--text);background-color:var(--digi--badge-notification--background-color);border-color:var(--BORDER-COLOR)}.sc-digi-badge-notification-h .digi-badge-notification--circle.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:50%;height:1.25rem;width:1.25rem}.sc-digi-badge-notification-h .digi-badge-notification--oval.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:flex;justify-content:center;align-items:center;white-space:nowrap;text-align:center;border-radius:0.75rem;height:1.125rem;width:1.5625rem;padding-left:0.25rem;padding-right:0.25rem}.sc-digi-badge-notification-h .digi-badge-notification--pill.sc-digi-badge-notification{--BORDER-COLOR:var(--digi--badge-notification--color--border);display:inline-block;padding-left:0.5rem;padding-right:0.5rem;border-radius:0.75rem;height:1.125rem}";
const DigiBadgeNotificationStyle0 = badgeNotificationCss;

const BadgeNotification = /*@__PURE__*/ proxyCustomElement(class BadgeNotification extends H {
    constructor() {
        super();
        this.__registerHost();
        this.afShape = BadgeNotificationShape.PILL;
        this.afAriaLabel = undefined;
        this.afValue = '';
    }
    afValueChangeHandler() {
        this.checkProps();
    }
    get cssModifiers() {
        return {
            'digi-badge-notification--circle': this.afShape === BadgeNotificationShape.CIRCLE,
            'digi-badge-notification--oval': this.afShape === BadgeNotificationShape.OVAL,
            'digi-badge-notification--pill': this.afShape === BadgeNotificationShape.PILL
        };
    }
    componentWillLoad() {
        this.checkProps();
    }
    checkProps() {
        let valueAsNumber;
        if (this.afValue !== null &&
            this.afValue !== undefined &&
            this.afValue !== '') {
            valueAsNumber = Number(this.afValue);
        }
        if (!isNaN(valueAsNumber)) {
            if (valueAsNumber >= 100) {
                this.afValue = '+99';
                this.afShape = BadgeNotificationShape.PILL;
            }
            else if (valueAsNumber < 100 && valueAsNumber >= 10) {
                this.afShape = BadgeNotificationShape.OVAL;
            }
            else {
                this.afShape = BadgeNotificationShape.CIRCLE;
            }
        }
        else {
            this.afShape = BadgeNotificationShape.PILL;
        }
    }
    render() {
        return (h(Host, { key: '2a3f82fe0bf3d3b43ee858a0184fb7d0045656f7' }, h("div", { key: 'f652cc5b76bdc72b4778fd16a1a9d270fe2400ea', class: Object.assign({ 'digi-badge-notification': true }, this.cssModifiers), "aria-label": this.afAriaLabel }, h("div", { key: 'ece907bc0004e24eafd221ead41300f7acd803ea', class: `${this.afShape}` }, h("span", { key: 'c83210ebbbcad768073095e52b601adc80a0645d' }, this.afValue)))));
    }
    static get watchers() { return {
        "afValue": ["afValueChangeHandler"]
    }; }
    static get style() { return DigiBadgeNotificationStyle0; }
}, [2, "digi-badge-notification", {
        "afAriaLabel": [1, "af-aria-label"],
        "afValue": [8, "af-value"],
        "afShape": [32]
    }, undefined, {
        "afValue": ["afValueChangeHandler"]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["digi-badge-notification"];
    components.forEach(tagName => { switch (tagName) {
        case "digi-badge-notification":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, BadgeNotification);
            }
            break;
    } });
}

export { BadgeNotification as B, defineCustomElement as d };
