import * as i0 from '@angular/core';
import { Input, HostBinding, Component } from '@angular/core';

/**
 * Renders multi-colored icons using layered path elements with individual color styling.
 * Supports icons with up to 20 distinct color paths, commonly used for brand logos and complex iconography.
 *
 * @usageNotes
 * ### Basic colored icon
 * ```html
 * <eui-icon-colored iconClass="icon-brand-logo"></eui-icon-colored>
 * ```
 *
 * ### Accessibility
 * - Ensure sufficient color contrast for all icon paths
 * - Provide alternative text or labels when icon conveys meaning
 * - Consider monochrome fallback for accessibility modes
 *
 * ### Notes
 * - Icon classes must be defined in your icon font or CSS
 * - Each path element receives a `.path{n}` class for individual styling
 * - Best suited for brand logos and multi-color illustrations
 * - For simple icons, use eui-icon-svg instead
 */
class EuiIconColorComponent {
    constructor() {
        this.paths = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
    }
    get cssClasses() {
        return this.getCssClasses();
    }
    getCssClasses() {
        return ['eui-icon eui-icon-color', this.iconClass ? this.iconClass : ''].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiIconColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: EuiIconColorComponent, isStandalone: true, selector: "eui-icon-colored, span[euiIconColored], [euiIconColored]", inputs: { iconClass: "iconClass" }, host: { properties: { "class": "this.cssClasses" } }, ngImport: i0, template: `
        <span [class]="iconClass">
            @for (pathNumber of paths; track pathNumber) {
                <span class="path{{ pathNumber }}"></span>
            }
        </span>
    `, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiIconColorComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'eui-icon-colored, span[euiIconColored], [euiIconColored]',
                    template: `
        <span [class]="iconClass">
            @for (pathNumber of paths; track pathNumber) {
                <span class="path{{ pathNumber }}"></span>
            }
        </span>
    `,
                }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], iconClass: [{
                type: Input
            }] } });

const EUI_ICON_COLOR = [
    EuiIconColorComponent,
];
// export { EuiIconColorComponent as EuiIconColor } from './eui-icon-color.component';

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

export { EUI_ICON_COLOR, EuiIconColorComponent };
//# sourceMappingURL=eui-components-eui-icon-color.mjs.map
