import * as i0 from '@angular/core';
import { inject, ChangeDetectorRef, booleanAttribute, ViewChild, Input, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';
import * as i2 from '@angular/cdk/observers';
import { ObserversModule } from '@angular/cdk/observers';

/**
 * @description
 * A badge component that can display text, numbers, or icons with various states and styles.
 * Supports content truncation, empty states, and icon-only modes.
 *
 */
class EuiBadgeComponent {
    constructor() {
        /** @description Data attribute for e2e testing */
        this.e2eAttr = 'eui-badge';
        /** @description ARIA role for accessibility */
        this.role = 'status';
        /** @description ARIA label for accessibility */
        this.ariaLabel = 'badge';
        /**
         * @description Whether the badge contains only an icon
         * @default false
         */
        this.euiIconBadge = false;
        /**
         * @description Whether to display the badge as a dot
         * @default false
         */
        this.euiDottedBadge = false;
        /** @description Tracks if content has been updated due to truncation */
        this.hasContentUpdated = false;
        /** @description Instance of BaseStatesDirective for managing component states */
        this.baseStatesDirective = inject(BaseStatesDirective);
        /** @description Change detector reference for manual change detection */
        this.cdRef = inject(ChangeDetectorRef);
        /** @description Tracks whether the badge has any content */
        this.hasContent = true;
    }
    /**
     * @description
     * Computes and returns the CSS classes for the badge based on its current state
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-badge'),
            !this.hasContent ? 'eui-badge--empty' : '',
            this.euiIconBadge ? 'eui-badge--icon-only' : '',
        ].join(' ').trim();
    }
    /**
     * @description
     * After view initialization, checks if the badge has content and handles content truncation
     */
    ngAfterViewInit() {
        setTimeout(() => {
            const innerHtml = this.content.nativeElement.innerHTML;
            if (!innerHtml || (innerHtml && innerHtml.trim() === '')) {
                this.hasContent = false;
            }
            this._checkContent();
        }, 1);
    }
    /**
     * @description
     * Handles content changes and triggers content checking
     */
    onContentChanged() {
        this._checkContent();
    }
    /**
     * @description
     * Checks if content exceeds maxCharCount and updates content if necessary
     * @private
     */
    _checkContent() {
        if (this.maxCharCount) {
            const contentText = this.content.nativeElement.outerText;
            if (contentText && contentText.length > this.maxCharCount) {
                this.hasContentUpdated = true;
                this.updatedContent = this.charReplacement || '99+';
                this.cdRef.markForCheck();
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiBadgeComponent, isStandalone: true, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: { e2eAttr: "e2eAttr", ariaLabel: ["aria-label", "ariaLabel"], maxCharCount: "maxCharCount", charReplacement: "charReplacement", euiIconBadge: ["euiIconBadge", "euiIconBadge", booleanAttribute], euiDottedBadge: ["euiDottedBadge", "euiDottedBadge", booleanAttribute] }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeVariant", "euiSizeVariant", "euiOutline", "euiOutline"] }], ngImport: i0, template: "@if (hasContentUpdated) {\n    <span class=\"eui-badge-wrapper\">\n        {{ updatedContent }}\n    </span>\n} @else {\n    <span class=\"eui-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n        <ng-content></ng-content>\n    </span>\n}\n", styles: [".eui-19.eui-t-ds2025 :host.eui-badge{--_font: var(--eui-f-microcopy-m-semi-bold)}.eui-19 :host.eui-badge{--_padding: 0 var(--eui-s-2xs);--_border-radius: var(--eui-br-max);--_font: var(--eui-f-s-compact-bold);--_height: calc(var(--eui-s-m) + var(--eui-s-2xs));--_min-width: calc(var(--eui-s-m) + var(--eui-s-2xs));--_empty-size: var(--eui-s-s);--_bg-color: var(--eui-c-s-secondary-surface-light);--_color-on-bg: var(--eui-c-s-secondary-surface-light-contrast);--_color: var(--eui-c-s-secondary-surface-light-contrast);--_border-color: var(--eui-c-s-secondary-border-light)}.eui-19 :host.eui-badge--primary{--_bg-color: var(--eui-c-s-primary-surface);--_color-on-bg: var(--eui-c-s-primary-surface-contrast);--_color: var(--eui-c-s-primary-surface-contrast);--_border-color: var(--eui-c-s-primary-border-light)}.eui-19 :host.eui-badge--secondary{--_bg-color: var(--eui-c-s-secondary-surface-light);--_color-on-bg: var(--eui-c-s-secondary-surface-light-contrast);--_color: var(--eui-c-s-secondary-surface-light-contrast);--_border-color: var(--eui-c-s-secondary-border-light)}.eui-19 :host.eui-badge--info{--_bg-color: var(--eui-c-s-info-surface);--_color-on-bg: var(--eui-c-s-info-surface-contrast);--_color: var(--eui-c-s-info-surface-contrast);--_border-color: var(--eui-c-s-info-border-light)}.eui-19 :host.eui-badge--success{--_bg-color: var(--eui-c-s-success-surface);--_color-on-bg: var(--eui-c-s-success-surface-contrast);--_color: var(--eui-c-s-success-surface-contrast);--_border-color: var(--eui-c-s-success-border-light)}.eui-19 :host.eui-badge--warning{--_bg-color: var(--eui-c-s-warning-surface);--_color-on-bg: var(--eui-c-s-warning-surface-contrast);--_color: var(--eui-c-s-warning-surface-contrast);--_border-color: var(--eui-c-s-warning-border-light)}.eui-19 :host.eui-badge--danger{--_bg-color: var(--eui-c-s-danger-surface);--_color-on-bg: var(--eui-c-s-danger-surface-contrast);--_color: var(--eui-c-s-danger-surface-contrast);--_border-color: var(--eui-c-s-danger-border-light)}.eui-19 :host.eui-badge--accent{--_bg-color: var(--eui-c-s-accent-surface);--_color-on-bg: var(--eui-c-s-accent-surface-contrast);--_color: var(--eui-c-s-accent-surface-contrast);--_border-color: var(--eui-c-s-accent-border-light)}.eui-19 :host.eui-badge--outline{--_bg-color: var(--eui-c-surface-container)}.eui-19 :host.eui-badge--outline.eui-badge--primary{--_color: var(--eui-c-s-primary-on-surface-light);--_border-color: var(--eui-c-s-primary-border)}.eui-19 :host.eui-badge--outline.eui-badge--secondary{--_color: var(--eui-c-s-secondary-on-surface-light);--_border-color: var(--eui-c-s-secondary-border)}.eui-19 :host.eui-badge--outline.eui-badge--info{--_color: var(--eui-c-s-info-on-surface-light);--_border-color: var(--eui-c-s-info-border)}.eui-19 :host.eui-badge--outline.eui-badge--success{--_color: var(--eui-c-s-success-on-surface-light);--_border-color: var(--eui-c-s-success-border)}.eui-19 :host.eui-badge--outline.eui-badge--warning{--_color: var(--eui-c-s-warning-on-surface-light);--_border-color: var(--eui-c-s-warning-border)}.eui-19 :host.eui-badge--outline.eui-badge--danger{--_color: var(--eui-c-s-danger-on-surface-light);--_border-color: var(--eui-c-s-danger-border)}.eui-19 :host.eui-badge--outline.eui-badge--accent{--_color: var(--eui-c-s-accent-on-surface-light);--_border-color: var(--eui-c-s-accent-border)}.eui-19 :host.eui-badge{display:inline-flex;border:1px solid var(--_border-color);border-radius:var(--_border-radius);background-color:var(--_bg-color)}.eui-19 :host.eui-badge .eui-badge-wrapper{display:inline-flex;align-items:center;color:var(--_color-on-bg);height:var(--_height);min-width:var(--_min-width);padding:var(--_padding);justify-content:center;font:var(--_font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-badge--empty{width:var(--_empty-size);height:var(--_empty-size)}.eui-19 :host.eui-badge--icon-only .eui-badge-wrapper{padding:0}.eui-19 :host.eui-badge--size-s{--_height: var(--eui-s-m);--_min-width: var(--eui-s-m);--_font: var(--eui-f-xs-compact-bold)}.eui-19 :host.eui-badge--outline{background-color:var(--eui-c-surface-container)}.eui-19 :host.eui-badge--outline .eui-badge-wrapper{color:var(--_color)}.eui-19 .eui-avatar-badge :host{border-color:var(--eui-c-white)}.eui-19 .eui-avatar-badge :host.eui-badge--secondary{border-color:var(--eui-c-black)}.eui-19 .eui-avatar--size-xs .eui-avatar-badge :host.eui-badge--empty{width:var(--eui-s-xs);height:var(--eui-s-xs)}.eui-19 .eui-avatar--size-l .eui-avatar-badge :host.eui-badge--empty{width:var(--eui-s-m);height:var(--eui-s-m)}\n"], dependencies: [{ kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i2.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiBadgeComponent, decorators: [{
            type: Component,
            args: [{ selector: 'div[euiBadge], span[euiBadge], eui-badge', changeDetection: ChangeDetectionStrategy.OnPush, imports: [ObserversModule], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiAccent',
                                'euiVariant',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeVariant',
                                'euiOutline',
                            ],
                        },
                    ], template: "@if (hasContentUpdated) {\n    <span class=\"eui-badge-wrapper\">\n        {{ updatedContent }}\n    </span>\n} @else {\n    <span class=\"eui-badge-wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n        <ng-content></ng-content>\n    </span>\n}\n", styles: [".eui-19.eui-t-ds2025 :host.eui-badge{--_font: var(--eui-f-microcopy-m-semi-bold)}.eui-19 :host.eui-badge{--_padding: 0 var(--eui-s-2xs);--_border-radius: var(--eui-br-max);--_font: var(--eui-f-s-compact-bold);--_height: calc(var(--eui-s-m) + var(--eui-s-2xs));--_min-width: calc(var(--eui-s-m) + var(--eui-s-2xs));--_empty-size: var(--eui-s-s);--_bg-color: var(--eui-c-s-secondary-surface-light);--_color-on-bg: var(--eui-c-s-secondary-surface-light-contrast);--_color: var(--eui-c-s-secondary-surface-light-contrast);--_border-color: var(--eui-c-s-secondary-border-light)}.eui-19 :host.eui-badge--primary{--_bg-color: var(--eui-c-s-primary-surface);--_color-on-bg: var(--eui-c-s-primary-surface-contrast);--_color: var(--eui-c-s-primary-surface-contrast);--_border-color: var(--eui-c-s-primary-border-light)}.eui-19 :host.eui-badge--secondary{--_bg-color: var(--eui-c-s-secondary-surface-light);--_color-on-bg: var(--eui-c-s-secondary-surface-light-contrast);--_color: var(--eui-c-s-secondary-surface-light-contrast);--_border-color: var(--eui-c-s-secondary-border-light)}.eui-19 :host.eui-badge--info{--_bg-color: var(--eui-c-s-info-surface);--_color-on-bg: var(--eui-c-s-info-surface-contrast);--_color: var(--eui-c-s-info-surface-contrast);--_border-color: var(--eui-c-s-info-border-light)}.eui-19 :host.eui-badge--success{--_bg-color: var(--eui-c-s-success-surface);--_color-on-bg: var(--eui-c-s-success-surface-contrast);--_color: var(--eui-c-s-success-surface-contrast);--_border-color: var(--eui-c-s-success-border-light)}.eui-19 :host.eui-badge--warning{--_bg-color: var(--eui-c-s-warning-surface);--_color-on-bg: var(--eui-c-s-warning-surface-contrast);--_color: var(--eui-c-s-warning-surface-contrast);--_border-color: var(--eui-c-s-warning-border-light)}.eui-19 :host.eui-badge--danger{--_bg-color: var(--eui-c-s-danger-surface);--_color-on-bg: var(--eui-c-s-danger-surface-contrast);--_color: var(--eui-c-s-danger-surface-contrast);--_border-color: var(--eui-c-s-danger-border-light)}.eui-19 :host.eui-badge--accent{--_bg-color: var(--eui-c-s-accent-surface);--_color-on-bg: var(--eui-c-s-accent-surface-contrast);--_color: var(--eui-c-s-accent-surface-contrast);--_border-color: var(--eui-c-s-accent-border-light)}.eui-19 :host.eui-badge--outline{--_bg-color: var(--eui-c-surface-container)}.eui-19 :host.eui-badge--outline.eui-badge--primary{--_color: var(--eui-c-s-primary-on-surface-light);--_border-color: var(--eui-c-s-primary-border)}.eui-19 :host.eui-badge--outline.eui-badge--secondary{--_color: var(--eui-c-s-secondary-on-surface-light);--_border-color: var(--eui-c-s-secondary-border)}.eui-19 :host.eui-badge--outline.eui-badge--info{--_color: var(--eui-c-s-info-on-surface-light);--_border-color: var(--eui-c-s-info-border)}.eui-19 :host.eui-badge--outline.eui-badge--success{--_color: var(--eui-c-s-success-on-surface-light);--_border-color: var(--eui-c-s-success-border)}.eui-19 :host.eui-badge--outline.eui-badge--warning{--_color: var(--eui-c-s-warning-on-surface-light);--_border-color: var(--eui-c-s-warning-border)}.eui-19 :host.eui-badge--outline.eui-badge--danger{--_color: var(--eui-c-s-danger-on-surface-light);--_border-color: var(--eui-c-s-danger-border)}.eui-19 :host.eui-badge--outline.eui-badge--accent{--_color: var(--eui-c-s-accent-on-surface-light);--_border-color: var(--eui-c-s-accent-border)}.eui-19 :host.eui-badge{display:inline-flex;border:1px solid var(--_border-color);border-radius:var(--_border-radius);background-color:var(--_bg-color)}.eui-19 :host.eui-badge .eui-badge-wrapper{display:inline-flex;align-items:center;color:var(--_color-on-bg);height:var(--_height);min-width:var(--_min-width);padding:var(--_padding);justify-content:center;font:var(--_font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-19 :host.eui-badge--empty{width:var(--_empty-size);height:var(--_empty-size)}.eui-19 :host.eui-badge--icon-only .eui-badge-wrapper{padding:0}.eui-19 :host.eui-badge--size-s{--_height: var(--eui-s-m);--_min-width: var(--eui-s-m);--_font: var(--eui-f-xs-compact-bold)}.eui-19 :host.eui-badge--outline{background-color:var(--eui-c-surface-container)}.eui-19 :host.eui-badge--outline .eui-badge-wrapper{color:var(--_color)}.eui-19 .eui-avatar-badge :host{border-color:var(--eui-c-white)}.eui-19 .eui-avatar-badge :host.eui-badge--secondary{border-color:var(--eui-c-black)}.eui-19 .eui-avatar--size-xs .eui-avatar-badge :host.eui-badge--empty{width:var(--eui-s-xs);height:var(--eui-s-xs)}.eui-19 .eui-avatar--size-l .eui-avatar-badge :host.eui-badge--empty{width:var(--eui-s-m);height:var(--eui-s-m)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], role: [{
                type: HostBinding,
                args: ['attr.role']
            }], ariaLabel: [{
                type: HostBinding,
                args: ['attr.aria-label']
            }, {
                type: Input,
                args: ['aria-label']
            }], maxCharCount: [{
                type: Input
            }], charReplacement: [{
                type: Input
            }], euiIconBadge: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiDottedBadge: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], content: [{
                type: ViewChild,
                args: ['contentRef']
            }] } });

/**
 * @description
 * Module that provides the EuiBadge component and its dependencies.
 *
 * @deprecated Use {@link EUI_BADGE} instead.
 *
 */
class EuiBadgeModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiBadgeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiBadgeModule, imports: [EuiBadgeComponent], exports: [EuiBadgeComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiBadgeModule, imports: [EuiBadgeComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiBadgeModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [EuiBadgeComponent],
                    exports: [EuiBadgeComponent],
                }]
        }] });

const EUI_BADGE = [
    EuiBadgeComponent,
];
// export { EuiBadgeComponent as EuiBadge } from './eui-badge.component';

/**
 * Generated bundle index. Do not edit.
 */

export { EUI_BADGE, EuiBadgeComponent, EuiBadgeModule };
//# sourceMappingURL=eui-components-eui-badge.mjs.map
