dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
48 lines (47 loc) • 2.83 kB
TypeScript
import { EventName } from '@lit/react';
import { default as Component } from '../../components/timepicker/time-grid.js';
import { DdsChangeEvent, DdsCloseEvent } from '../../events/events';
export type { DdsChangeEvent } from '../../events/events';
export type { DdsCloseEvent } from '../../events/events';
/**
* `dap-ds-time-grid`
* @summary A time grid component that allows users to select hours and minutes in two side-by-side scrollable columns.
* @element dap-ds-time-grid
* @title - Time grid
* @group timepicker
*
* @property {number} selectedHour - The currently selected hour (0-23).
* @property {number} selectedMinute - The currently selected minute (0-59).
* @property {string} minTime - The minimum selectable time (format: 'HH:mm').
* @property {string} maxTime - The maximum selectable time (format: 'HH:mm').
* @property {number} step - The step interval in minutes.
* @property {string} locale - The locale for time formatting.
*
* @event {{ detail: TimeSelection }} dds-change - Fired when time selection changes.
* @event {{ void }} dds-close - Fired when the time grid should close.
*
* @csspart time-grid - The main time grid container.
* @csspart hour-section - The hour selection section.
* @csspart minute-section - The minute selection section.
* @csspart time-button - Individual time selection buttons.
* @csspart time-button-base - The base part of the time button.
* @csspart time-button-content - The content part of the time button.
* @csspart time-button-high-contrast - The high contrast part of the time button.
* @csspart section-header-title - The title of the section header.
* @csspart section-header-divider - The divider between the section header and the time buttons.
* @csspart time-column - The time column container.
*
* @cssprop --dds-time-grid-gap - The gap between time sections (default: var(--dds-spacing-400)).
* @cssprop --dds-time-grid-padding - The padding around the time grid (default: var(--dds-spacing-0)).
* @cssprop --dds-time-grid-column-gap - The gap between time buttons in columns (default: var(--dds-spacing-200)).
* @cssprop --dds-time-grid-border-radius - The border radius of the time grid (default: var(--dds-radius-base)).
* @cssprop --dds-time-grid-background - The background color of the time grid (default: var(--dds-background-neutral-subtle)).
* @cssprop --dds-time-grid-transition - The transition timing for the time grid (default: all 0.2s ease-in-out).
* @cssprop --dds-time-grid-max-width - The maximum width of the time grid (default: 400px).
* @cssprop --dds-time-grid-column-max-height - The maximum height of time columns (default: 240px).
*/
declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {
onDdsChange: EventName<DdsChangeEvent>;
onDdsClose: EventName<DdsCloseEvent>;
}>;
export default reactWrapper;