import * as i0 from '@angular/core';
import { Directive, inject, ContentChild, 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 '@eui/components/eui-avatar';
import { EUI_AVATAR } from '@eui/components/eui-avatar';
import { EuiLabelComponent } from '@eui/components/eui-label';

/**
 * @description
 * Directive to mark an element as a dashboard button icon
 */
// eslint-disable-next-line
class EuiDashboardButtonIconDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: EuiDashboardButtonIconDirective, isStandalone: true, selector: "eui-dashboard-button-icon", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonIconDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'eui-dashboard-button-icon' }]
        }] });
/**
 * @description
 * Directive to mark an element as a dashboard button label
 */
// eslint-disable-next-line
class EuiDashboardButtonLabelDirective {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: EuiDashboardButtonLabelDirective, isStandalone: true, selector: "eui-dashboard-button-label", ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonLabelDirective, decorators: [{
            type: Directive,
            args: [{ selector: 'eui-dashboard-button-label' }]
        }] });
/**
 * @description
 * A customizable dashboard button component that can display icons, labels, and images.
 * Supports various states and sizes through host directives.
 */
class EuiDashboardButtonComponent {
    constructor() {
        /**
         * @description Directive for managing component states
         */
        this.baseStatesDirective = inject(BaseStatesDirective);
    }
    /**
     * @description
     * Computes and returns the CSS classes for the dashboard button
     *
     * @returns {string} Space-separated string of CSS class names
     */
    get cssClasses() {
        return [
            this.baseStatesDirective.getCssClasses('eui-dashboard-button'),
        ].join(' ').trim();
    }
    /**
     * @description
     * Initializes the component by setting secondary state as default if no variant is specified
     */
    ngOnInit() {
        if (!this.baseStatesDirective.euiVariant) {
            this.baseStatesDirective.euiSecondary = true;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: EuiDashboardButtonComponent, isStandalone: true, selector: "eui-dashboard-button", inputs: { imageUrl: "imageUrl" }, host: { properties: { "class": "this.cssClasses" } }, queries: [{ propertyName: "euiDashboardButtonIcon", first: true, predicate: EuiDashboardButtonIconDirective, descendants: true }, { propertyName: "euiDashboardButtonLabel", first: true, predicate: EuiDashboardButtonLabelDirective, descendants: true }, { propertyName: "euiLabelContent", first: true, predicate: EuiLabelComponent, descendants: true }], hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary", "euiSuccess", "euiSuccess", "euiInfo", "euiInfo", "euiWarning", "euiWarning", "euiDanger", "euiDanger", "euiAccent", "euiAccent", "euiVariant", "euiVariant", "euiSizeXS", "euiSizeXS", "euiSizeS", "euiSizeS", "euiSizeM", "euiSizeM", "euiSizeL", "euiSizeL", "euiSizeXL", "euiSizeXL", "euiSize2XL", "euiSize2XL", "euiSizeVariant", "euiSizeVariant"] }], ngImport: i0, template: "<button class=\"eui-dashboard-button-content\">\n    <eui-avatar [euiVariant]=\"baseStatesDirective.euiVariant\" [euiSizeVariant]=\"baseStatesDirective.euiSizeVariant\" isFlat>\n        <eui-avatar-icon>\n            <ng-content select=\"eui-dashboard-button-icon\"></ng-content>\n        </eui-avatar-icon>\n        <eui-avatar-text>\n            <ng-content select=\"eui-dashboard-button-label\"></ng-content>\n        </eui-avatar-text>\n        @if (imageUrl) {\n            <eui-avatar-image imageUrl=\"{{imageUrl}}\"></eui-avatar-image>\n        }\n    </eui-avatar>\n    @if (euiLabelContent) {\n        <div class=\"eui-dashboard-button-content__title\">\n            <ng-content select=\"eui-label\"></ng-content>\n            <ng-content select=\"[euiLabel]\"></ng-content>\n        </div>\n        <div class=\"eui-dashboard-button-content__sub-title\">\n            <ng-content select=\"eui-sublabel\"></ng-content>\n            <ng-content select=\"[euiSublabel]\"></ng-content>\n        </div>\n    }\n</button>\n", styles: [".eui-19 :host.eui-dashboard-button .eui-dashboard-button-content{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;background:none;padding:var(--eui-s-m);border:var(--eui-bw-xs) solid var(--eui-c-s-secondary-border-lighter);border-radius:var(--eui-br-m);background-color:var(--eui-c-surface-container)}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content .eui-dashboard-button-content__title{padding-top:var(--eui-s-s)}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content:active,.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content:hover{background-color:var(--eui-c-surface-container);cursor:pointer;box-shadow:var(--eui-sh-2)}\n"], dependencies: [{ kind: "component", type: i2.EuiAvatarComponent, selector: "div[euiAvatar], span[euiAvatar], eui-avatar", inputs: ["e2eAttr", "aria-label", "hasShadow", "isShapeSquare", "isFlat", "hasNoBackground", "isReverse"] }, { kind: "component", type: i2.EuiAvatarIconComponent, selector: "eui-avatar-icon" }, { kind: "component", type: i2.EuiAvatarTextComponent, selector: "eui-avatar-text" }, { kind: "component", type: i2.EuiAvatarImageComponent, selector: "eui-avatar-image", inputs: ["imageUrl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-dashboard-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                        ...EUI_AVATAR,
                    ], hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                                'euiSuccess',
                                'euiInfo',
                                'euiWarning',
                                'euiDanger',
                                'euiAccent',
                                'euiVariant',
                                'euiSizeXS',
                                'euiSizeS',
                                'euiSizeM',
                                'euiSizeL',
                                'euiSizeXL',
                                'euiSize2XL',
                                'euiSizeVariant',
                            ],
                        },
                    ], template: "<button class=\"eui-dashboard-button-content\">\n    <eui-avatar [euiVariant]=\"baseStatesDirective.euiVariant\" [euiSizeVariant]=\"baseStatesDirective.euiSizeVariant\" isFlat>\n        <eui-avatar-icon>\n            <ng-content select=\"eui-dashboard-button-icon\"></ng-content>\n        </eui-avatar-icon>\n        <eui-avatar-text>\n            <ng-content select=\"eui-dashboard-button-label\"></ng-content>\n        </eui-avatar-text>\n        @if (imageUrl) {\n            <eui-avatar-image imageUrl=\"{{imageUrl}}\"></eui-avatar-image>\n        }\n    </eui-avatar>\n    @if (euiLabelContent) {\n        <div class=\"eui-dashboard-button-content__title\">\n            <ng-content select=\"eui-label\"></ng-content>\n            <ng-content select=\"[euiLabel]\"></ng-content>\n        </div>\n        <div class=\"eui-dashboard-button-content__sub-title\">\n            <ng-content select=\"eui-sublabel\"></ng-content>\n            <ng-content select=\"[euiSublabel]\"></ng-content>\n        </div>\n    }\n</button>\n", styles: [".eui-19 :host.eui-dashboard-button .eui-dashboard-button-content{display:inline-flex;align-items:center;justify-content:center;flex-direction:column;background:none;padding:var(--eui-s-m);border:var(--eui-bw-xs) solid var(--eui-c-s-secondary-border-lighter);border-radius:var(--eui-br-m);background-color:var(--eui-c-surface-container)}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content:focus:not([readonly]){outline:2px solid var(--eui-c-focus)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content:focus-visible:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content [tabindex=\"0\"]:focus:not([readonly]){outline:2px solid var(--eui-c-focus-visible)!important;outline-offset:-2px!important;transition:none}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content .eui-dashboard-button-content__title{padding-top:var(--eui-s-s)}.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content:active,.eui-19 :host.eui-dashboard-button .eui-dashboard-button-content:hover{background-color:var(--eui-c-surface-container);cursor:pointer;box-shadow:var(--eui-sh-2)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], imageUrl: [{
                type: Input
            }], euiDashboardButtonIcon: [{
                type: ContentChild,
                args: [EuiDashboardButtonIconDirective]
            }], euiDashboardButtonLabel: [{
                type: ContentChild,
                args: [EuiDashboardButtonLabelDirective]
            }], euiLabelContent: [{
                type: ContentChild,
                args: [EuiLabelComponent]
            }] } });
/**
 * @description
 * Module that provides the EuiDashboardButton component and its related directives.
 *
 * @deprecated Use {@link EUI_DASHBOARD_BUTTON} instead
 */
class EuiDashboardButtonModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonModule, imports: [EuiDashboardButtonComponent, EuiDashboardButtonIconDirective, EuiDashboardButtonLabelDirective], exports: [EuiDashboardButtonComponent, EuiDashboardButtonIconDirective, EuiDashboardButtonLabelDirective] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonModule, imports: [EuiDashboardButtonComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: EuiDashboardButtonModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [EuiDashboardButtonComponent, EuiDashboardButtonIconDirective, EuiDashboardButtonLabelDirective],
                    exports: [EuiDashboardButtonComponent, EuiDashboardButtonIconDirective, EuiDashboardButtonLabelDirective],
                }]
        }] });

const EUI_DASHBOARD_BUTTON = [
    EuiDashboardButtonComponent,
    EuiDashboardButtonIconDirective,
    EuiDashboardButtonLabelDirective,
];

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

export { EUI_DASHBOARD_BUTTON, EuiDashboardButtonComponent, EuiDashboardButtonIconDirective, EuiDashboardButtonLabelDirective, EuiDashboardButtonModule };
//# sourceMappingURL=eui-components-eui-dashboard-button.mjs.map
