import { LitElement } from 'lit';
import { DateItemEvent, EventItemType } from '../event-item/event-item.js';
export type { DateItemEvent };
export { EventItemType };
import '../event-item/event-item.js';
/**
 * Enum for the size of the date item.
 * - `small`: Compact, shows only the date and event dot.
 * - `large`: Expands to show event times and titles.
 */
export declare enum DateItemSize {
    Small = "small",
    Large = "large"
}
/**
 * `<obc-date-item>` – A calendar date cell component for displaying a single day, with optional event indicators and details.
 *
 * @summary Represents an interactive date item within a calendar or date-picker interface.
 * It visually communicates the current date, selection state, and whether events are scheduled for that day.
 * The component adapts its layout and content based on size, supporting both compact and detailed views.
 *
 * **Synonyms:** date item, calendar cell, day cell, date picker item, schedule day
 *
 * ### Features
 * - **Today Highlight:** When `isToday` is true, shows "Today" label (in large size) and uses amplified styling.
 * - **Checked State:** When `checked` is true, uses selected styling (blue filled background).
 * - **Size Options:**
 *   - `small` (default): Compact, shows only the date and event dot indicator.
 *   - `large`: Expands to show event details; visible events are auto-aggregated based on available space.
 * - **Event Indicators:** Shows a colored dot in small size; in large size, displays event details with auto-aggregation.
 * - **Disabled State:** Visually and functionally disables the date item.
 * - **Accessibility:** Uses `aria-label` to describe the date and event count for assistive technologies.
 * - **Date Range Enforcement:** The `date` property is clamped between 1 and 31.
 *
 * ### Usage Guidelines
 * Use `obc-date-item` to represent individual days in a calendar, date picker, or scheduling interface.
 * - Set `isToday` to true for the current day to highlight it with amplified styling.
 * - Set `checked` to true to indicate a selected or active date.
 * - Add events to the `events` array to show scheduled events on that day.
 * - Use the `large` size when you want to display event details directly within the date cell.
 * - Use the `small` size for compact calendar grids or navigation bars.
 * - Use `eventCount` to limit the number of visible events; remaining events are auto-aggregated.
 * - For disabled dates, set `disabled` to prevent interaction.
 *
 * ### Slots
 * This component does not use slots. All content is provided via properties.
 *
 * ### Events
 * | Event Name   | Detail                                                                              | Description                              |
 * |--------------|-------------------------------------------------------------------------------------|----------------------------------------------------|
 * | `date-click` | `{ date: number, events: DateItemEvent[], isToday: boolean, checked: boolean }`     | Fired when the date item is clicked.     |
 *
 * ### Properties
 * - `size` (`small` | `large`): Controls layout. In `large` mode, event details are shown and the visible event list is auto-aggregated based on available space and `eventCount`. Default: `small`.
 * - `date` (number): The numeric day of the month (1–31). Values outside this range are clamped.
 * - `isToday` (boolean): Shows "Today" label in large size and uses amplified styling. Default: `false`.
 * - `checked` (boolean): Uses selected styling (blue filled background). Default: `false`.
 * - `disabled` (boolean): Disables the button and applies a muted style. Default: `false`.
 * - `events` (DateItemEvent[]): Array of events to display. In small size, shows an event dot. In large size, displays event details with auto-aggregation based on available space.
 * - `eventCount` (number): Maximum number of events to display before aggregating. When 0, shows all events that fit; remaining events are shown as an aggregated count. Default: `0`.
 *
 * ### Best Practices
 * - In `small` size, only an event dot is shown; event details are not displayed.
 * - In `large` size, events are auto-aggregated based on available space and `eventCount`.
 * - Ensure event titles are concise as they may be truncated.
 * - Do not use for multi-day event summaries; this component is for single-day representation.
 *
 * ### Example
 * ```html
 * <obc-date-item
 *   checked
 *   size="large"
 *   date="15"
 *   .events=${[
 *     {title: "Meeting", startTime: "09:00", endTime: "10:00"},
 *     {title: "Deadline", startTime: "14:00", endTime: "15:30"}
 *   ]}
 *   @date-click=${(e) => console.log('Date clicked:', e.detail.date)}
 * ></obc-date-item>
 * ```
 *
 * @fires {CustomEvent<{date: number, events: DateItemEvent[], isToday: boolean, checked: boolean}>} date-click - Fired when the date item is clicked.
 * @slot - No slots. All content is provided via properties.
 */
export declare class ObcDateItem extends LitElement {
    /**
     * The size of the date item, controlling its layout and whether event details are shown.
     * - `small`: Compact, shows only the date and event dots.
     * - `large`: Expands to show event titles and descriptions for up to two events.
     * @default DateItemSize.Small
     */
    size: DateItemSize;
    /**
     * Whether the date item is disabled. When true, the button is visually muted and not interactive.
     * @default false
     */
    disabled: boolean;
    /**
     * Array of events to display on this date.
     * In small size, shows an event dot indicator.
     * In large size, displays event details using obc-event-item components.
     * @default []
     */
    events: DateItemEvent[];
    /**
     * Number of events to display from the events array. When 0, shows all events.
     * In small size, always caps at 2 dots regardless of this value.
     * @default 0
     */
    eventCount: number;
    /**
     * Whether the date item represents today.
     * When true, displays the "Today" label (in large size) and uses amplified styling.
     * @default false
     */
    isToday: boolean;
    /**
     * Whether the date item is checked/selected.
     * When true, uses selected styling (blue filled background).
     * @default false
     */
    checked: boolean;
    private _date;
    /**
     * The numeric day of the month to display (1–31). Values outside this range are clamped.
     * @default 1
     */
    get date(): number;
    set date(value: number);
    /**
     * Internal state tracking how many events can fit in the available space.
     * When null, auto-calculation is not active (shows all events).
     */
    private _maxVisibleEvents;
    private _resizeObserver;
    private _headerHeight;
    private _eventHeight;
    connectedCallback(): void;
    disconnectedCallback(): void;
    private _setupResizeObserver;
    private _cleanupResizeObserver;
    private _calculateVisibleEvents;
    firstUpdated(): void;
    updated(changedProps: Map<string, unknown>): void;
    private _pressing;
    private _handleDateClick;
    private _handleKeyDown;
    /**
     * Get the events to display, applying auto-aggregation if needed.
     * Returns an object with visibleEvents and aggregatedCount.
     */
    private _getDisplayEvents;
    render(): import('lit-html').TemplateResult<1>;
    static styles: import('lit').CSSResult;
}
declare global {
    interface HTMLElementTagNameMap {
        'obc-date-item': ObcDateItem;
    }
}
//# sourceMappingURL=date-item.d.ts.map