import * as i0 from '@angular/core';
import { input, numberAttribute, booleanAttribute, viewChild, signal, inject, computed, afterNextRender, effect, ChangeDetectionStrategy, Component } 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.
 *
 * @usageNotes
 * #### Basic badge
 * ```html
 * <eui-badge>99</eui-badge>
 * ```
 *
 * #### Badge with semantic variants
 * ```html
 * <eui-badge euiSuccess>Active</eui-badge>
 * <eui-badge euiDanger>Error</eui-badge>
 * ```
 *
 * #### Badge with icon
 * ```html
 * <eui-icon-svg icon="eui-email">
 *   <eui-badge euiDanger euiSizeS>9</eui-badge>
 * </eui-icon-svg>
 * ```
 *
 * #### Badge with button
 * ```html
 * <button euiButton euiPrimary>
 *   Primary
 *   <span euiBadge>99</span>
 * </button>
 * ```
 *
 * #### Badge with truncation
 * ```html
 * <eui-badge [maxCharCount]="2" charReplacement="99+">150</eui-badge>
 * ```
 *
 * #### Icon-only badge (dot indicator)
 * ```html
 * <eui-badge [euiIconBadge]="true" euiDanger></eui-badge>
 * ```
 *
 * ### Accessibility
 * - Uses role="status" for screen reader announcements
 * - aria-label provides context (defaults to "badge")
 * - Content is automatically announced by screen readers
 * - Truncated content shows replacement text to all users
 * - Empty badges are visually indicated with special styling
 *
 * ### Notes
 * - Size variants: euiSizeS, euiSizeM (default)
 * - Color variants: euiPrimary, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger
 * - maxCharCount truncates content when exceeded, showing charReplacement (default: "99+")
 * - euiIconBadge creates a small dot indicator without text
 * - euiDottedBadge applies dotted styling variant
 * - Empty badges (no content) automatically receive special styling
 * - colorPalette accepts custom color palette names for extended theming
 * - euiOutline adds border outline styling
 * - Can be used as element (eui-badge) or attribute (div[euiBadge], span[euiBadge])
 */
class EuiBadgeComponent {
    constructor() {
        /** @description Data attribute for e2e testing */
        this.e2eAttr = input('eui-badge', ...(ngDevMode ? [{ debugName: "e2eAttr" }] : []));
        /** @description ARIA label for accessibility */
        this.ariaLabel = input('badge', { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
        /**
         * Maximum number of characters to display before truncating.
         * When content exceeds this limit, it will be replaced with charReplacement value.
         * Useful for displaying large numbers in a compact format (e.g., "99+" for values over 99).
         */
        this.maxCharCount = input(null, { ...(ngDevMode ? { debugName: "maxCharCount" } : {}), transform: numberAttribute });
        /**
         * String to display when content is truncated due to maxCharCount.
         */
        this.charReplacement = input(...(ngDevMode ? [undefined, { debugName: "charReplacement" }] : []));
        /**
         * Whether the badge contains only an icon (displays as a small dot indicator).
         * When true, no text content is shown, creating a minimal status indicator.
         * @default false
         */
        this.euiIconBadge = input(false, { ...(ngDevMode ? { debugName: "euiIconBadge" } : {}), transform: booleanAttribute });
        /**
         * Whether to display the badge with dotted styling variant.
         * Applies alternative visual treatment to the badge.
         * @default false
         */
        this.euiDottedBadge = input(false, { ...(ngDevMode ? { debugName: "euiDottedBadge" } : {}), transform: booleanAttribute });
        /**
         * Extra color palette to be used on the badge.
         * Accepts custom color palette names for extended theming beyond standard variants.
         */
        this.colorPalette = input(...(ngDevMode ? [undefined, { debugName: "colorPalette" }] : []));
        this.content = viewChild('contentRef', ...(ngDevMode ? [{ debugName: "content" }] : []));
        this.hasContentUpdated = signal(false, ...(ngDevMode ? [{ debugName: "hasContentUpdated" }] : []));
        this.updatedContent = signal('', ...(ngDevMode ? [{ debugName: "updatedContent" }] : []));
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.hasContent = signal(true, ...(ngDevMode ? [{ debugName: "hasContent" }] : []));
        /**
         * @description
         * Computes and returns the CSS classes for the badge based on its current state
         *
         * @returns {string} Space-separated string of CSS class names
         */
        this.cssClasses = computed(() => {
            return [
                this.baseStatesDirective.getCssClasses('eui-badge'),
                !this.hasContent() ? 'eui-badge--empty' : '',
                this.euiIconBadge() ? 'eui-badge--icon-only' : '',
                this.colorPalette() ? `eui-badge--${this.colorPalette()}` : '',
            ].join(' ').trim();
        }, ...(ngDevMode ? [{ debugName: "cssClasses" }] : []));
        afterNextRender(() => {
            const contentEl = this.content();
            if (contentEl) {
                const innerHtml = contentEl.nativeElement.innerHTML;
                if (!innerHtml || innerHtml.trim() === '') {
                    this.hasContent.set(false);
                }
                this._checkContent();
            }
        });
        effect(() => {
            const contentEl = this.content();
            if (contentEl) {
                this._checkContent();
            }
        });
    }
    /**
     * @description
     * Handles content changes and triggers content checking
     */
    onContentChanged() {
        this._checkContent();
    }
    /**
     * @description
     * Checks if content exceeds maxCharCount and updates content if necessary
     * @private
     */
    _checkContent() {
        const maxChars = this.maxCharCount();
        const contentEl = this.content();
        if (maxChars && contentEl) {
            const contentText = contentEl.nativeElement.outerText;
            if (contentText && contentText.length > maxChars) {
                this.hasContentUpdated.set(true);
                this.updatedContent.set(this.charReplacement() || '99+');
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: EuiBadgeComponent, isStandalone: true, selector: "div[euiBadge], span[euiBadge], eui-badge", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, maxCharCount: { classPropertyName: "maxCharCount", publicName: "maxCharCount", isSignal: true, isRequired: false, transformFunction: null }, charReplacement: { classPropertyName: "charReplacement", publicName: "charReplacement", isSignal: true, isRequired: false, transformFunction: null }, euiIconBadge: { classPropertyName: "euiIconBadge", publicName: "euiIconBadge", isSignal: true, isRequired: false, transformFunction: null }, euiDottedBadge: { classPropertyName: "euiDottedBadge", publicName: "euiDottedBadge", isSignal: true, isRequired: false, transformFunction: null }, colorPalette: { classPropertyName: "colorPalette", publicName: "colorPalette", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses()", "attr.data-e2e": "e2eAttr()", "attr.role": "\"status\"", "attr.aria-label": "ariaLabel()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "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 />\n    </span>\n}\n", styles: [".eui-21 :host.eui-badge{--_padding: 0 var(--eui-s-3xs);--_border-radius: var(--eui-br-max);--_font: var(--eui-f-xs-semi-bold);--_height: calc(var(--eui-s-m) + var(--eui-s-3xs));--_min-width: calc(var(--eui-s-m) + var(--eui-s-3xs));--_empty-size: var(--eui-s-s);--_bg-color: var(--eui-c-secondary-surface-light);--_color-on-bg: var(--eui-c-secondary-on-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_border-color: var(--eui-c-secondary-border)}.eui-21 :host.eui-badge--primary{--_bg-color: var(--eui-c-primary-surface);--_color-on-bg: var(--eui-c-primary-on-surface);--_color: var(--eui-c-primary-on-surface);--_border-color: var(--eui-c-primary-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--primary{--_color: var(--eui-c-primary-on-surface-light);--_border-color: var(--eui-c-primary-border)}.eui-21 :host.eui-badge--secondary{--_bg-color: var(--eui-c-secondary-surface);--_color-on-bg: var(--eui-c-secondary-on-surface);--_color: var(--eui-c-secondary-on-surface);--_border-color: var(--eui-c-secondary-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--secondary{--_color: var(--eui-c-secondary-on-surface-light);--_border-color: var(--eui-c-secondary-border)}.eui-21 :host.eui-badge--info{--_bg-color: var(--eui-c-info-surface);--_color-on-bg: var(--eui-c-info-on-surface);--_color: var(--eui-c-info-on-surface);--_border-color: var(--eui-c-info-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--info{--_color: var(--eui-c-info-on-surface-light);--_border-color: var(--eui-c-info-border)}.eui-21 :host.eui-badge--success{--_bg-color: var(--eui-c-success-surface);--_color-on-bg: var(--eui-c-success-on-surface);--_color: var(--eui-c-success-on-surface);--_border-color: var(--eui-c-success-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--success{--_color: var(--eui-c-success-on-surface-light);--_border-color: var(--eui-c-success-border)}.eui-21 :host.eui-badge--warning{--_bg-color: var(--eui-c-warning-surface);--_color-on-bg: var(--eui-c-warning-on-surface);--_color: var(--eui-c-warning-on-surface);--_border-color: var(--eui-c-warning-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--warning{--_color: var(--eui-c-warning-on-surface-light);--_border-color: var(--eui-c-warning-border)}.eui-21 :host.eui-badge--danger{--_bg-color: var(--eui-c-danger-surface);--_color-on-bg: var(--eui-c-danger-on-surface);--_color: var(--eui-c-danger-on-surface);--_border-color: var(--eui-c-danger-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--danger{--_color: var(--eui-c-danger-on-surface-light);--_border-color: var(--eui-c-danger-border)}.eui-21 :host.eui-badge--red{--_bg-color: #f87171;--_color-on-bg: #000;--_color: #000;--_border-color: #fca5a5}.eui-21 :host.eui-badge--outline.eui-badge--red{--_color: #450a0a;--_border-color: #ef4444}.eui-21 :host.eui-badge--orange{--_bg-color: #fb923c;--_color-on-bg: #000;--_color: #000;--_border-color: #fdba74}.eui-21 :host.eui-badge--outline.eui-badge--orange{--_color: #431407;--_border-color: #f97316}.eui-21 :host.eui-badge--amber{--_bg-color: #fbbf24;--_color-on-bg: #000;--_color: #000;--_border-color: #fcd34d}.eui-21 :host.eui-badge--outline.eui-badge--amber{--_color: #451a03;--_border-color: #f59e0b}.eui-21 :host.eui-badge--yellow{--_bg-color: #facc15;--_color-on-bg: #000;--_color: #000;--_border-color: #fde047}.eui-21 :host.eui-badge--outline.eui-badge--yellow{--_color: #422006;--_border-color: #eab308}.eui-21 :host.eui-badge--lime{--_bg-color: #a3e635;--_color-on-bg: #000;--_color: #000;--_border-color: #bef264}.eui-21 :host.eui-badge--outline.eui-badge--lime{--_color: #1a2e05;--_border-color: #84cc16}.eui-21 :host.eui-badge--green{--_bg-color: #4ade80;--_color-on-bg: #000;--_color: #000;--_border-color: #86efac}.eui-21 :host.eui-badge--outline.eui-badge--green{--_color: #052e16;--_border-color: #22c55e}.eui-21 :host.eui-badge--emerald{--_bg-color: #34d399;--_color-on-bg: #000;--_color: #000;--_border-color: #6ee7b7}.eui-21 :host.eui-badge--outline.eui-badge--emerald{--_color: #022c22;--_border-color: #10b981}.eui-21 :host.eui-badge--teal{--_bg-color: #2dd4bf;--_color-on-bg: #000;--_color: #000;--_border-color: #5eead4}.eui-21 :host.eui-badge--outline.eui-badge--teal{--_color: #042f2e;--_border-color: #14b8a6}.eui-21 :host.eui-badge--cyan{--_bg-color: #22d3ee;--_color-on-bg: #000;--_color: #000;--_border-color: #67e8f9}.eui-21 :host.eui-badge--outline.eui-badge--cyan{--_color: #083344;--_border-color: #06b6d4}.eui-21 :host.eui-badge--sky{--_bg-color: #38bdf8;--_color-on-bg: #000;--_color: #000;--_border-color: #7dd3fc}.eui-21 :host.eui-badge--outline.eui-badge--sky{--_color: #082f49;--_border-color: #0ea5e9}.eui-21 :host.eui-badge--blue{--_bg-color: #60a5fa;--_color-on-bg: #000;--_color: #000;--_border-color: #93c5fd}.eui-21 :host.eui-badge--outline.eui-badge--blue{--_color: #172554;--_border-color: #3b82f6}.eui-21 :host.eui-badge--indigo{--_bg-color: #818cf8;--_color-on-bg: #000;--_color: #000;--_border-color: #a5b4fc}.eui-21 :host.eui-badge--outline.eui-badge--indigo{--_color: #1e1b4b;--_border-color: #6366f1}.eui-21 :host.eui-badge--violet{--_bg-color: #a78bfa;--_color-on-bg: #000;--_color: #000;--_border-color: #c4b5fd}.eui-21 :host.eui-badge--outline.eui-badge--violet{--_color: #2e1065;--_border-color: #8b5cf6}.eui-21 :host.eui-badge--purple{--_bg-color: #c084fc;--_color-on-bg: #000;--_color: #000;--_border-color: #d8b4fe}.eui-21 :host.eui-badge--outline.eui-badge--purple{--_color: #3b0764;--_border-color: #a855f7}.eui-21 :host.eui-badge--fuchsia{--_bg-color: #e879f9;--_color-on-bg: #000;--_color: #000;--_border-color: #f0abfc}.eui-21 :host.eui-badge--outline.eui-badge--fuchsia{--_color: #4a044e;--_border-color: #d946ef}.eui-21 :host.eui-badge--pink{--_bg-color: #f472b6;--_color-on-bg: #000;--_color: #000;--_border-color: #f9a8d4}.eui-21 :host.eui-badge--outline.eui-badge--pink{--_color: #500724;--_border-color: #ec4899}.eui-21 :host.eui-badge--rose{--_bg-color: #fb7185;--_color-on-bg: #000;--_color: #000;--_border-color: #fda4af}.eui-21 :host.eui-badge--outline.eui-badge--rose{--_color: #4c0519;--_border-color: #f43f5e}.eui-21 :host.eui-badge--ecl-blue-navy{--_bg-color: #a0a0d1;--_color-on-bg: #000;--_color: #000;--_border-color: #bfbfe0}.eui-21 :host.eui-badge--outline.eui-badge--ecl-blue-navy{--_color: rgb(0, 0, 45.08);--_border-color: #8c8cc7}.eui-21 :host.eui-badge--ecl-blue-electric{--_bg-color: #03bbe6;--_color-on-bg: #000;--_color: #000;--_border-color: #5bd3ef}.eui-21 :host.eui-badge--outline.eui-badge--ecl-blue-electric{--_color: rgb(.95, 69.35, 84.55);--_border-color: #03a8cf}.eui-21 :host.eui-badge--ecl-blue-ocean{--_bg-color: #69d2c6;--_color-on-bg: #000;--_color: #000;--_border-color: #97e0d8}.eui-21 :host.eui-badge--outline.eui-badge--ecl-blue-ocean{--_color: rgb(13.3, 106.4, 95.95);--_border-color: #18baa8}.eui-21 :host.eui-badge--ecl-green{--_bg-color: #5ddaa9;--_color-on-bg: #000;--_color: #000;--_border-color: #8fe5c4}.eui-21 :host.eui-badge--outline.eui-badge--ecl-green{--_color: rgb(2.85, 113.05, 70.3);--_border-color: #05c67b}.eui-21 :host.eui-badge--ecl-green-dark{--_bg-color: #599c9c;--_color-on-bg: #000;--_color: #000;--_border-color: #8cbaba}.eui-21 :host.eui-badge--outline.eui-badge--ecl-green-dark{--_color: rgb(0, 57.95, 57.95);--_border-color: #066}.eui-21 :host.eui-badge--ecl-orange{--_bg-color: #ffb16a;--_color-on-bg: #000;--_color: #000;--_border-color: #ffc998}.eui-21 :host.eui-badge--outline.eui-badge--ecl-orange{--_color: rgb(101.65, 55.1, 12.35);--_border-color: #ff8a20}.eui-21 :host.eui-badge--ecl-purple{--_bg-color: #b594e6;--_color-on-bg: #000;--_color: #000;--_border-color: #ccb5ee}.eui-21 :host.eui-badge--outline.eui-badge--ecl-purple{--_color: rgb(57, 38, 86.45);--_border-color: #905fd9}.eui-21 :host.eui-badge--ecl-green-lemon{--_bg-color: #ddec8d;--_color-on-bg: #000;--_color: #000;--_border-color: #e8f2b0}.eui-21 :host.eui-badge--outline.eui-badge--ecl-green-lemon{--_color: rgb(103.7, 115.6, 40.8);--_border-color: #cbe250}.eui-21 :host.eui-badge--ecl-green-pine{--_bg-color: #94abb1;--_color-on-bg: #000;--_color: #000;--_border-color: #b6c6ca}.eui-21 :host.eui-badge--outline.eui-badge--ecl-green-pine{--_color: rgb(7.6, 44.65, 55.1);--_border-color: #809ba2}.eui-21 :host.eui-badge--ecl-red-crayola{--_bg-color: #e95f77;--_color-on-bg: #000;--_color: #000;--_border-color: #ec798d}.eui-21 :host.eui-badge--outline.eui-badge--ecl-red-crayola{--_color: rgb(90.25, 21.85, 34.2);--_border-color: #e33755}.eui-21 :host.eui-badge--ecl-yellow-gold{--_bg-color: #ffd72e;--_color-on-bg: #000;--_color: #000;--_border-color: #ffe05e}.eui-21 :host.eui-badge--outline.eui-badge--ecl-yellow-gold{--_color: rgb(109.25, 88.35, 0);--_border-color: #ffce00}.eui-21 :host.eui-badge--ecl-orange-abricot{--_bg-color: #fea439;--_color-on-bg: #000;--_color: #000;--_border-color: #ffbe5c}.eui-21 :host.eui-badge--outline.eui-badge--ecl-orange-abricot{--_color: rgb(119.7, 51.3, 15.2);--_border-color: #fc8713}.eui-21 :host.eui-badge--ecl-purple-violet{--_bg-color: #a28fff;--_color-on-bg: #000;--_color: #000;--_border-color: #b1a1ff}.eui-21 :host.eui-badge--outline.eui-badge--ecl-purple-violet{--_color: rgb(55.1, 45.6, 101.65);--_border-color: #8b73ff}.eui-21 :host.eui-badge--ecl-red-tomato{--_bg-color: #ff866e;--_color-on-bg: #000;--_color: #000;--_border-color: #ff9a86}.eui-21 :host.eui-badge--outline.eui-badge--ecl-red-tomato{--_color: rgb(101.65, 41.8, 29.45);--_border-color: #ff684a}.eui-21 :host.eui-badge--outline{--_bg-color: var(--eui-c-surface-container)}.eui-21 :host.eui-badge{display:inline-flex;border:1px solid var(--_border-color);border-radius:var(--_border-radius);background-color:var(--_bg-color)}.eui-21 :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-21 :host.eui-badge--empty{width:var(--_empty-size);height:var(--_empty-size)}.eui-21 :host.eui-badge--icon-only .eui-badge-wrapper{padding:0}.eui-21 :host.eui-badge--size-s{--_height: var(--eui-s-m);--_min-width: var(--eui-s-m);--_font: var(--eui-f-xs-medium)}.eui-21 :host.eui-badge--outline{background-color:var(--eui-c-surface-container)}.eui-21 :host.eui-badge--outline .eui-badge-wrapper{color:var(--_color)}.eui-21 .eui-avatar-badge :host{border-color:var(--eui-c-white)}.eui-21 .eui-avatar-badge :host.eui-badge--secondary{border-color:var(--eui-c-black)}.eui-21 .eui-avatar--size-xs .eui-avatar-badge :host.eui-badge--empty{width:var(--eui-s-xs);height:var(--eui-s-xs)}.eui-21 .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: "21.1.0", 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',
                                'euiVariant',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeVariant',
                                'euiOutline',
                            ],
                        },
                    ], host: {
                        '[class]': 'cssClasses()',
                        '[attr.data-e2e]': 'e2eAttr()',
                        '[attr.role]': '"status"',
                        '[attr.aria-label]': 'ariaLabel()',
                    }, 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 />\n    </span>\n}\n", styles: [".eui-21 :host.eui-badge{--_padding: 0 var(--eui-s-3xs);--_border-radius: var(--eui-br-max);--_font: var(--eui-f-xs-semi-bold);--_height: calc(var(--eui-s-m) + var(--eui-s-3xs));--_min-width: calc(var(--eui-s-m) + var(--eui-s-3xs));--_empty-size: var(--eui-s-s);--_bg-color: var(--eui-c-secondary-surface-light);--_color-on-bg: var(--eui-c-secondary-on-surface-light);--_color: var(--eui-c-secondary-on-surface-light);--_border-color: var(--eui-c-secondary-border)}.eui-21 :host.eui-badge--primary{--_bg-color: var(--eui-c-primary-surface);--_color-on-bg: var(--eui-c-primary-on-surface);--_color: var(--eui-c-primary-on-surface);--_border-color: var(--eui-c-primary-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--primary{--_color: var(--eui-c-primary-on-surface-light);--_border-color: var(--eui-c-primary-border)}.eui-21 :host.eui-badge--secondary{--_bg-color: var(--eui-c-secondary-surface);--_color-on-bg: var(--eui-c-secondary-on-surface);--_color: var(--eui-c-secondary-on-surface);--_border-color: var(--eui-c-secondary-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--secondary{--_color: var(--eui-c-secondary-on-surface-light);--_border-color: var(--eui-c-secondary-border)}.eui-21 :host.eui-badge--info{--_bg-color: var(--eui-c-info-surface);--_color-on-bg: var(--eui-c-info-on-surface);--_color: var(--eui-c-info-on-surface);--_border-color: var(--eui-c-info-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--info{--_color: var(--eui-c-info-on-surface-light);--_border-color: var(--eui-c-info-border)}.eui-21 :host.eui-badge--success{--_bg-color: var(--eui-c-success-surface);--_color-on-bg: var(--eui-c-success-on-surface);--_color: var(--eui-c-success-on-surface);--_border-color: var(--eui-c-success-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--success{--_color: var(--eui-c-success-on-surface-light);--_border-color: var(--eui-c-success-border)}.eui-21 :host.eui-badge--warning{--_bg-color: var(--eui-c-warning-surface);--_color-on-bg: var(--eui-c-warning-on-surface);--_color: var(--eui-c-warning-on-surface);--_border-color: var(--eui-c-warning-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--warning{--_color: var(--eui-c-warning-on-surface-light);--_border-color: var(--eui-c-warning-border)}.eui-21 :host.eui-badge--danger{--_bg-color: var(--eui-c-danger-surface);--_color-on-bg: var(--eui-c-danger-on-surface);--_color: var(--eui-c-danger-on-surface);--_border-color: var(--eui-c-danger-border-light)}.eui-21 :host.eui-badge--outline.eui-badge--danger{--_color: var(--eui-c-danger-on-surface-light);--_border-color: var(--eui-c-danger-border)}.eui-21 :host.eui-badge--red{--_bg-color: #f87171;--_color-on-bg: #000;--_color: #000;--_border-color: #fca5a5}.eui-21 :host.eui-badge--outline.eui-badge--red{--_color: #450a0a;--_border-color: #ef4444}.eui-21 :host.eui-badge--orange{--_bg-color: #fb923c;--_color-on-bg: #000;--_color: #000;--_border-color: #fdba74}.eui-21 :host.eui-badge--outline.eui-badge--orange{--_color: #431407;--_border-color: #f97316}.eui-21 :host.eui-badge--amber{--_bg-color: #fbbf24;--_color-on-bg: #000;--_color: #000;--_border-color: #fcd34d}.eui-21 :host.eui-badge--outline.eui-badge--amber{--_color: #451a03;--_border-color: #f59e0b}.eui-21 :host.eui-badge--yellow{--_bg-color: #facc15;--_color-on-bg: #000;--_color: #000;--_border-color: #fde047}.eui-21 :host.eui-badge--outline.eui-badge--yellow{--_color: #422006;--_border-color: #eab308}.eui-21 :host.eui-badge--lime{--_bg-color: #a3e635;--_color-on-bg: #000;--_color: #000;--_border-color: #bef264}.eui-21 :host.eui-badge--outline.eui-badge--lime{--_color: #1a2e05;--_border-color: #84cc16}.eui-21 :host.eui-badge--green{--_bg-color: #4ade80;--_color-on-bg: #000;--_color: #000;--_border-color: #86efac}.eui-21 :host.eui-badge--outline.eui-badge--green{--_color: #052e16;--_border-color: #22c55e}.eui-21 :host.eui-badge--emerald{--_bg-color: #34d399;--_color-on-bg: #000;--_color: #000;--_border-color: #6ee7b7}.eui-21 :host.eui-badge--outline.eui-badge--emerald{--_color: #022c22;--_border-color: #10b981}.eui-21 :host.eui-badge--teal{--_bg-color: #2dd4bf;--_color-on-bg: #000;--_color: #000;--_border-color: #5eead4}.eui-21 :host.eui-badge--outline.eui-badge--teal{--_color: #042f2e;--_border-color: #14b8a6}.eui-21 :host.eui-badge--cyan{--_bg-color: #22d3ee;--_color-on-bg: #000;--_color: #000;--_border-color: #67e8f9}.eui-21 :host.eui-badge--outline.eui-badge--cyan{--_color: #083344;--_border-color: #06b6d4}.eui-21 :host.eui-badge--sky{--_bg-color: #38bdf8;--_color-on-bg: #000;--_color: #000;--_border-color: #7dd3fc}.eui-21 :host.eui-badge--outline.eui-badge--sky{--_color: #082f49;--_border-color: #0ea5e9}.eui-21 :host.eui-badge--blue{--_bg-color: #60a5fa;--_color-on-bg: #000;--_color: #000;--_border-color: #93c5fd}.eui-21 :host.eui-badge--outline.eui-badge--blue{--_color: #172554;--_border-color: #3b82f6}.eui-21 :host.eui-badge--indigo{--_bg-color: #818cf8;--_color-on-bg: #000;--_color: #000;--_border-color: #a5b4fc}.eui-21 :host.eui-badge--outline.eui-badge--indigo{--_color: #1e1b4b;--_border-color: #6366f1}.eui-21 :host.eui-badge--violet{--_bg-color: #a78bfa;--_color-on-bg: #000;--_color: #000;--_border-color: #c4b5fd}.eui-21 :host.eui-badge--outline.eui-badge--violet{--_color: #2e1065;--_border-color: #8b5cf6}.eui-21 :host.eui-badge--purple{--_bg-color: #c084fc;--_color-on-bg: #000;--_color: #000;--_border-color: #d8b4fe}.eui-21 :host.eui-badge--outline.eui-badge--purple{--_color: #3b0764;--_border-color: #a855f7}.eui-21 :host.eui-badge--fuchsia{--_bg-color: #e879f9;--_color-on-bg: #000;--_color: #000;--_border-color: #f0abfc}.eui-21 :host.eui-badge--outline.eui-badge--fuchsia{--_color: #4a044e;--_border-color: #d946ef}.eui-21 :host.eui-badge--pink{--_bg-color: #f472b6;--_color-on-bg: #000;--_color: #000;--_border-color: #f9a8d4}.eui-21 :host.eui-badge--outline.eui-badge--pink{--_color: #500724;--_border-color: #ec4899}.eui-21 :host.eui-badge--rose{--_bg-color: #fb7185;--_color-on-bg: #000;--_color: #000;--_border-color: #fda4af}.eui-21 :host.eui-badge--outline.eui-badge--rose{--_color: #4c0519;--_border-color: #f43f5e}.eui-21 :host.eui-badge--ecl-blue-navy{--_bg-color: #a0a0d1;--_color-on-bg: #000;--_color: #000;--_border-color: #bfbfe0}.eui-21 :host.eui-badge--outline.eui-badge--ecl-blue-navy{--_color: rgb(0, 0, 45.08);--_border-color: #8c8cc7}.eui-21 :host.eui-badge--ecl-blue-electric{--_bg-color: #03bbe6;--_color-on-bg: #000;--_color: #000;--_border-color: #5bd3ef}.eui-21 :host.eui-badge--outline.eui-badge--ecl-blue-electric{--_color: rgb(.95, 69.35, 84.55);--_border-color: #03a8cf}.eui-21 :host.eui-badge--ecl-blue-ocean{--_bg-color: #69d2c6;--_color-on-bg: #000;--_color: #000;--_border-color: #97e0d8}.eui-21 :host.eui-badge--outline.eui-badge--ecl-blue-ocean{--_color: rgb(13.3, 106.4, 95.95);--_border-color: #18baa8}.eui-21 :host.eui-badge--ecl-green{--_bg-color: #5ddaa9;--_color-on-bg: #000;--_color: #000;--_border-color: #8fe5c4}.eui-21 :host.eui-badge--outline.eui-badge--ecl-green{--_color: rgb(2.85, 113.05, 70.3);--_border-color: #05c67b}.eui-21 :host.eui-badge--ecl-green-dark{--_bg-color: #599c9c;--_color-on-bg: #000;--_color: #000;--_border-color: #8cbaba}.eui-21 :host.eui-badge--outline.eui-badge--ecl-green-dark{--_color: rgb(0, 57.95, 57.95);--_border-color: #066}.eui-21 :host.eui-badge--ecl-orange{--_bg-color: #ffb16a;--_color-on-bg: #000;--_color: #000;--_border-color: #ffc998}.eui-21 :host.eui-badge--outline.eui-badge--ecl-orange{--_color: rgb(101.65, 55.1, 12.35);--_border-color: #ff8a20}.eui-21 :host.eui-badge--ecl-purple{--_bg-color: #b594e6;--_color-on-bg: #000;--_color: #000;--_border-color: #ccb5ee}.eui-21 :host.eui-badge--outline.eui-badge--ecl-purple{--_color: rgb(57, 38, 86.45);--_border-color: #905fd9}.eui-21 :host.eui-badge--ecl-green-lemon{--_bg-color: #ddec8d;--_color-on-bg: #000;--_color: #000;--_border-color: #e8f2b0}.eui-21 :host.eui-badge--outline.eui-badge--ecl-green-lemon{--_color: rgb(103.7, 115.6, 40.8);--_border-color: #cbe250}.eui-21 :host.eui-badge--ecl-green-pine{--_bg-color: #94abb1;--_color-on-bg: #000;--_color: #000;--_border-color: #b6c6ca}.eui-21 :host.eui-badge--outline.eui-badge--ecl-green-pine{--_color: rgb(7.6, 44.65, 55.1);--_border-color: #809ba2}.eui-21 :host.eui-badge--ecl-red-crayola{--_bg-color: #e95f77;--_color-on-bg: #000;--_color: #000;--_border-color: #ec798d}.eui-21 :host.eui-badge--outline.eui-badge--ecl-red-crayola{--_color: rgb(90.25, 21.85, 34.2);--_border-color: #e33755}.eui-21 :host.eui-badge--ecl-yellow-gold{--_bg-color: #ffd72e;--_color-on-bg: #000;--_color: #000;--_border-color: #ffe05e}.eui-21 :host.eui-badge--outline.eui-badge--ecl-yellow-gold{--_color: rgb(109.25, 88.35, 0);--_border-color: #ffce00}.eui-21 :host.eui-badge--ecl-orange-abricot{--_bg-color: #fea439;--_color-on-bg: #000;--_color: #000;--_border-color: #ffbe5c}.eui-21 :host.eui-badge--outline.eui-badge--ecl-orange-abricot{--_color: rgb(119.7, 51.3, 15.2);--_border-color: #fc8713}.eui-21 :host.eui-badge--ecl-purple-violet{--_bg-color: #a28fff;--_color-on-bg: #000;--_color: #000;--_border-color: #b1a1ff}.eui-21 :host.eui-badge--outline.eui-badge--ecl-purple-violet{--_color: rgb(55.1, 45.6, 101.65);--_border-color: #8b73ff}.eui-21 :host.eui-badge--ecl-red-tomato{--_bg-color: #ff866e;--_color-on-bg: #000;--_color: #000;--_border-color: #ff9a86}.eui-21 :host.eui-badge--outline.eui-badge--ecl-red-tomato{--_color: rgb(101.65, 41.8, 29.45);--_border-color: #ff684a}.eui-21 :host.eui-badge--outline{--_bg-color: var(--eui-c-surface-container)}.eui-21 :host.eui-badge{display:inline-flex;border:1px solid var(--_border-color);border-radius:var(--_border-radius);background-color:var(--_bg-color)}.eui-21 :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-21 :host.eui-badge--empty{width:var(--_empty-size);height:var(--_empty-size)}.eui-21 :host.eui-badge--icon-only .eui-badge-wrapper{padding:0}.eui-21 :host.eui-badge--size-s{--_height: var(--eui-s-m);--_min-width: var(--eui-s-m);--_font: var(--eui-f-xs-medium)}.eui-21 :host.eui-badge--outline{background-color:var(--eui-c-surface-container)}.eui-21 :host.eui-badge--outline .eui-badge-wrapper{color:var(--_color)}.eui-21 .eui-avatar-badge :host{border-color:var(--eui-c-white)}.eui-21 .eui-avatar-badge :host.eui-badge--secondary{border-color:var(--eui-c-black)}.eui-21 .eui-avatar--size-xs .eui-avatar-badge :host.eui-badge--empty{width:var(--eui-s-xs);height:var(--eui-s-xs)}.eui-21 .eui-avatar--size-l .eui-avatar-badge :host.eui-badge--empty{width:var(--eui-s-m);height:var(--eui-s-m)}\n"] }]
        }], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], maxCharCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCharCount", required: false }] }], charReplacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "charReplacement", required: false }] }], euiIconBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiIconBadge", required: false }] }], euiDottedBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "euiDottedBadge", required: false }] }], colorPalette: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorPalette", required: false }] }], content: [{ type: i0.ViewChild, args: ['contentRef', { isSignal: true }] }] } });

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

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

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