import * as i0 from '@angular/core';
import { inject, booleanAttribute, Input, HostBinding, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i1 from '@eui/components/shared';
import { BaseStatesDirective } from '@eui/components/shared';

/**
 * @description
 * `eui-label` is a versatile textual component used to display labels, sublabels, or inline text associated with other UI elements such as inputs, form fields, or interactive components.
 * It supports multiple visual states, sizes, and variants through host directives and can be rendered as different HTML elements (`<label>`, `<span>`, `<div>`, `<a>`) while preserving consistent EUI styling and behavior.
 * The component is purely structural and semantic. It does not manage layout or interaction by itself.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <label euiLabel for="username">Username</label>
 * <input euiInputText id="username" />
 * ```
 *
 * ### Required Field
 * ```html
 * <label euiLabel [euiRequired]="true" for="email">Email Address</label>
 * ```
 *
 * ### With Variants
 * ```html
 * <span euiLabel euiDanger>Error message</span>
 * <span euiLabel euiSuccess>Success message</span>
 * ```
 *
 * ### Accessibility
 * - Use `<label>` element with `for` attribute to associate with form controls
 * - Required indicator is visual only; ensure form validation communicates requirement
 * - Color alone should not convey meaning; use additional text or icons
 *
 * ### Notes
 * - Can be used as attribute selector on multiple HTML elements
 * - Supports all BaseStatesDirective variants (primary, secondary, success, info, warning, danger)
 * - Readonly state applies visual styling but does not affect functionality
 */
class EuiLabelComponent {
    constructor() {
        /**
         * @description Indicates if the label should be marked as required
         * @default false
         */
        this.euiRequired = false;
        /**
         * @description Indicates if the label should be displayed in readonly state
         * @default false
         */
        this.euiReadonly = false;
        /**
         * @description Indicates if the component should be rendered as a sublabel
         * @default false
         */
        this.euiSublabel = false;
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the label component based on its current state.
     * Combines base states, required status, readonly status, and sublabel type.
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-label'),
            this.euiRequired ? 'eui-label--required' : '',
            this.euiReadonly ? 'eui-label--readonly' : '',
            this.euiSublabel ? 'eui-label__sublabel' : '',
        ]
            .join(' ')
            .trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.1.0", type: EuiLabelComponent, isStandalone: true, selector: "label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,\n               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel", inputs: { euiRequired: ["euiRequired", "euiRequired", booleanAttribute], euiReadonly: ["euiReadonly", "euiReadonly", booleanAttribute], euiSublabel: ["euiSublabel", "euiSublabel", booleanAttribute] }, host: { properties: { "class": "this.cssClasses" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiVariant", "euiVariant", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeVariant", "euiSizeVariant", "euiDisabled", "euiDisabled"] }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host.eui-label{display:inline-block;font:var(--eui-f-m)}.eui-21 :host.eui-label__sublabel{color:var(--eui-c-text-light);display:block;font:var(--eui-f-m);margin-bottom:var(--eui-s-3xs);margin-top:var(--eui-s-3xs)}.eui-21 :host.eui-label--primary{color:var(--eui-c-primary)}.eui-21 :host.eui-label--secondary{color:var(--eui-c-secondary)}.eui-21 :host.eui-label--info{color:var(--eui-c-info)}.eui-21 :host.eui-label--success{color:var(--eui-c-success)}.eui-21 :host.eui-label--warning{color:var(--eui-c-warning)}.eui-21 :host.eui-label--danger{color:var(--eui-c-danger)}.eui-21 :host.eui-label--size-s{font:var(--eui-f-s)}.eui-21 :host.eui-label--size-m{font:var(--eui-f-m)}.eui-21 :host.eui-label--size-l{font:var(--eui-f-l)}.eui-21 :host.eui-label--required:after{color:var(--eui-c-danger);content:\"*\";line-height:1;padding-left:var(--eui-s-3xs);font:var(--eui-f-m-semi-bold)}.eui-21 :host.eui-label--disabled{color:var(--eui-c-disabled)}.eui-21 :host.eui-label--readonly{color:var(--eui-c-readonly)}.eui-21 :host.eui-label--selected{font:var(--eui-f-m-semi-bold)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: EuiLabelComponent, decorators: [{
            type: Component,
            args: [{ selector: `label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,
               label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel`, template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiVariant',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeVariant',
                                'euiDisabled',
                            ],
                        },
                    ], styles: [".eui-21 :host.eui-label{display:inline-block;font:var(--eui-f-m)}.eui-21 :host.eui-label__sublabel{color:var(--eui-c-text-light);display:block;font:var(--eui-f-m);margin-bottom:var(--eui-s-3xs);margin-top:var(--eui-s-3xs)}.eui-21 :host.eui-label--primary{color:var(--eui-c-primary)}.eui-21 :host.eui-label--secondary{color:var(--eui-c-secondary)}.eui-21 :host.eui-label--info{color:var(--eui-c-info)}.eui-21 :host.eui-label--success{color:var(--eui-c-success)}.eui-21 :host.eui-label--warning{color:var(--eui-c-warning)}.eui-21 :host.eui-label--danger{color:var(--eui-c-danger)}.eui-21 :host.eui-label--size-s{font:var(--eui-f-s)}.eui-21 :host.eui-label--size-m{font:var(--eui-f-m)}.eui-21 :host.eui-label--size-l{font:var(--eui-f-l)}.eui-21 :host.eui-label--required:after{color:var(--eui-c-danger);content:\"*\";line-height:1;padding-left:var(--eui-s-3xs);font:var(--eui-f-m-semi-bold)}.eui-21 :host.eui-label--disabled{color:var(--eui-c-disabled)}.eui-21 :host.eui-label--readonly{color:var(--eui-c-readonly)}.eui-21 :host.eui-label--selected{font:var(--eui-f-m-semi-bold)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], euiRequired: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiReadonly: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }], euiSublabel: [{
                type: Input,
                args: [{ transform: booleanAttribute }]
            }] } });

const EUI_LABEL = [
    EuiLabelComponent,
];
// export { EuiLabelComponent as EuiLabel } from './eui-label.component';

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

export { EUI_LABEL, EuiLabelComponent };
//# sourceMappingURL=eui-components-eui-label.mjs.map
