dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
87 lines (86 loc) • 4.25 kB
TypeScript
import { TimePreset } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSButton } from '../button/button.component';
import { default as DapDSDivider } from '../divider/divider.component';
/**
* `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).
*/
export default class DapDSTimeGrid extends DdsElement {
static tagName: string;
static dependencies: {
'dap-ds-button': typeof DapDSButton;
'dap-ds-divider': typeof DapDSDivider;
};
selectedHour: number;
selectedMinute: number;
selectedSecond: number;
minTime: string;
maxTime: string;
step: number;
locale: string;
showSeconds: boolean;
secondsStep: number;
disabledTime?: (hour: number, minute: number, second?: number) => boolean;
hideDisabledTimes: boolean;
presets?: TimePreset[];
/** `data-testid` base for the preset buttons (preset value appended). */
presetButtonTestId: string;
/** `data-testid` base for the hour select buttons (hour value appended). */
hourButtonTestId: string;
/** `data-testid` base for the minute select buttons (minute value appended). */
minuteButtonTestId: string;
/** `data-testid` base for the second select buttons (second value appended). */
secondButtonTestId: string;
static readonly styles: import('lit').CSSResult;
private getHours;
private getMinutes;
private getSeconds;
private isTimeDisabled;
private handleHourSelect;
private handleMinuteSelect;
private handleSecondSelect;
private emitChange;
private formatHour;
private formatMinute;
private formatSecond;
private handlePresetSelect;
private isPresetDisabled;
scrollToSelectedTime(): void;
firstUpdated(changedProperties: Map<string, unknown>): void;
updated(changedProperties: Map<string, unknown>): void;
render(): import('lit-html').TemplateResult<1>;
}