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

/**
 * @description
 * A visual date display component that presents dates in a calendar block format with day, month, and year.
 * Useful for event listings, timelines, and date-centric interfaces.
 *
 * @usageNotes
 * ### Basic Usage
 * ```html
 * <eui-date-block [blockDate]="eventDate"></eui-date-block>
 * ```
 *
 * ### With Custom Format
 * ```typescript
 * <eui-date-block
 *   [blockDate]="meetingDate"
 *   dateFormat="dd/MM/yyyy">
 * </eui-date-block>
 * ```
 *
 * ### Accessibility
 * - Uses semantic `role="section"` for proper screen reader identification
 * - Date is formatted according to locale settings for internationalization
 * - Visual date representation is supplemented with accessible text
 *
 * ### Notes
 * - Automatically adapts to current locale via `LocaleService`
 * - Use `euiPrimary` or `euiSecondary` for color variants
 * - `dateFormat` accepts any valid Angular DatePipe format string
 * - Component is read-only and does not support user interaction
 */
class EuiDateBlockComponent {
    constructor() {
        /** @description Data attribute for e2e testing */
        this.e2eAttr = 'eui-date-block';
        this.dateFormat = 'dd/M/yyyy';
        /** @description Instance of BaseStatesDirective for managing component states */
        this.baseStatesDirective = inject(BaseStatesDirective);
        this.locale = inject(LocaleService);
    }
    /**
     * @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-date-block'),
        ].join(' ').trim();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiDateBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.16", type: EuiDateBlockComponent, isStandalone: true, selector: "eui-date-block", inputs: { e2eAttr: "e2eAttr", dateFormat: "dateFormat", blockDate: "blockDate" }, host: { properties: { "class": "this.cssClasses", "attr.data-e2e": "this.e2eAttr" } }, hostDirectives: [{ directive: i1.BaseStatesDirective, inputs: ["euiPrimary", "euiPrimary", "euiSecondary", "euiSecondary"] }], ngImport: i0, template: "<div class=\"eui-date-block-wrapper\">\n    <div class=\"eui-date-block-day-month-wrapper\">\n        <div class=\"eui-date-block__day\">\n            {{ blockDate | date: 'dd': null: (locale.getState() | async).id }}\n        </div>\n        <div class=\"eui-date-block__month\">\n            {{ blockDate | date: 'MMM': null: (locale.getState() | async).id }}\n        </div>\n    </div>\n    <div class=\"eui-date-block__year\">\n        {{ blockDate | date: 'yyyy': null: (locale.getState() | async).id }}\n    </div>\n</div>\n", styles: [".eui-21 :host.eui-date-block{--_day-font: var(--eui-f-m-semi-bold);--_month-font: var(--eui-f-s);--_year-font: var(--eui-f-s-semi-bold)}.eui-21 :host.eui-date-block{display:inline-flex;position:relative}.eui-21 :host.eui-date-block .eui-date-block-wrapper:before,.eui-21 :host.eui-date-block .eui-date-block-wrapper:after{background-color:#fff;border-radius:50%;box-shadow:none;box-sizing:initial;content:\"\";display:block;height:var(--eui-s-s);position:absolute;top:-5px;width:10px}.eui-21 :host.eui-date-block .eui-date-block-wrapper:before{left:var(--eui-s-m)}.eui-21 :host.eui-date-block .eui-date-block-wrapper:after{right:var(--eui-s-m)}.eui-21 :host.eui-date-block .eui-date-block-wrapper,.eui-21 :host.eui-date-block .eui-date-block-day-month-wrapper{display:flex;flex-direction:column;align-items:center}.eui-21 :host.eui-date-block .eui-date-block-day-month-wrapper{background-color:var(--eui-c-primary-surface-light);padding:var(--eui-s-xs) var(--eui-s-l) var(--eui-s-4xs) var(--eui-s-l);border-top-left-radius:var(--eui-br-s);border-top-right-radius:var(--eui-br-s);width:var(--eui-s-10xl)}.eui-21 :host.eui-date-block .eui-date-block__day{font:var(--_day-font)}.eui-21 :host.eui-date-block .eui-date-block__month{font:var(--_month-font);text-transform:uppercase}.eui-21 :host.eui-date-block .eui-date-block__year{background-color:var(--eui-c-primary-surface);color:var(--eui-c-primary-on-surface);font:var(--_year-font);padding:var(--eui-s-4xs) var(--eui-s-l);border-bottom-left-radius:var(--eui-br-s);border-bottom-right-radius:var(--eui-br-s)}.eui-21 :host.eui-date-block--secondary .eui-date-block-day-month-wrapper{background-color:var(--eui-c-secondary-surface-light)}.eui-21 :host.eui-date-block--secondary .eui-date-block__year{background-color:var(--eui-c-secondary-surface-medium);color:var(--eui-c-secondary-on-surface-medium)}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: EuiDateBlockComponent, decorators: [{
            type: Component,
            args: [{ selector: 'eui-date-block', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
                        {
                            directive: BaseStatesDirective,
                            inputs: [
                                'euiPrimary',
                                'euiSecondary',
                            ],
                        },
                    ], imports: [
                        AsyncPipe,
                        DatePipe,
                    ], template: "<div class=\"eui-date-block-wrapper\">\n    <div class=\"eui-date-block-day-month-wrapper\">\n        <div class=\"eui-date-block__day\">\n            {{ blockDate | date: 'dd': null: (locale.getState() | async).id }}\n        </div>\n        <div class=\"eui-date-block__month\">\n            {{ blockDate | date: 'MMM': null: (locale.getState() | async).id }}\n        </div>\n    </div>\n    <div class=\"eui-date-block__year\">\n        {{ blockDate | date: 'yyyy': null: (locale.getState() | async).id }}\n    </div>\n</div>\n", styles: [".eui-21 :host.eui-date-block{--_day-font: var(--eui-f-m-semi-bold);--_month-font: var(--eui-f-s);--_year-font: var(--eui-f-s-semi-bold)}.eui-21 :host.eui-date-block{display:inline-flex;position:relative}.eui-21 :host.eui-date-block .eui-date-block-wrapper:before,.eui-21 :host.eui-date-block .eui-date-block-wrapper:after{background-color:#fff;border-radius:50%;box-shadow:none;box-sizing:initial;content:\"\";display:block;height:var(--eui-s-s);position:absolute;top:-5px;width:10px}.eui-21 :host.eui-date-block .eui-date-block-wrapper:before{left:var(--eui-s-m)}.eui-21 :host.eui-date-block .eui-date-block-wrapper:after{right:var(--eui-s-m)}.eui-21 :host.eui-date-block .eui-date-block-wrapper,.eui-21 :host.eui-date-block .eui-date-block-day-month-wrapper{display:flex;flex-direction:column;align-items:center}.eui-21 :host.eui-date-block .eui-date-block-day-month-wrapper{background-color:var(--eui-c-primary-surface-light);padding:var(--eui-s-xs) var(--eui-s-l) var(--eui-s-4xs) var(--eui-s-l);border-top-left-radius:var(--eui-br-s);border-top-right-radius:var(--eui-br-s);width:var(--eui-s-10xl)}.eui-21 :host.eui-date-block .eui-date-block__day{font:var(--_day-font)}.eui-21 :host.eui-date-block .eui-date-block__month{font:var(--_month-font);text-transform:uppercase}.eui-21 :host.eui-date-block .eui-date-block__year{background-color:var(--eui-c-primary-surface);color:var(--eui-c-primary-on-surface);font:var(--_year-font);padding:var(--eui-s-4xs) var(--eui-s-l);border-bottom-left-radius:var(--eui-br-s);border-bottom-right-radius:var(--eui-br-s)}.eui-21 :host.eui-date-block--secondary .eui-date-block-day-month-wrapper{background-color:var(--eui-c-secondary-surface-light)}.eui-21 :host.eui-date-block--secondary .eui-date-block__year{background-color:var(--eui-c-secondary-surface-medium);color:var(--eui-c-secondary-on-surface-medium)}\n"] }]
        }], propDecorators: { cssClasses: [{
                type: HostBinding,
                args: ['class']
            }], e2eAttr: [{
                type: HostBinding,
                args: ['attr.data-e2e']
            }, {
                type: Input
            }], dateFormat: [{
                type: Input
            }], blockDate: [{
                type: Input
            }] } });

const EUI_DATE_BLOCK = [
    EuiDateBlockComponent,
];

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

export { EUI_DATE_BLOCK, EuiDateBlockComponent };
//# sourceMappingURL=eui-components-eui-date-block.mjs.map
