dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
107 lines (106 loc) • 7.59 kB
TypeScript
import { Dayjs } from 'dayjs';
import { PropertyValueMap } from 'lit';
import { DdsElement } from '../../internal/dds-hu-element';
declare const DapDSCalendarCell_base: typeof DdsElement & {
new (...args: any[]): import('../../internal/mixin/focusableMixin').FocusableElementInterface;
prototype: import('../../internal/mixin/focusableMixin').FocusableElementInterface;
};
/**
* `dap-ds-calendar-cell`
* @summary Calendar cell represents a single cell in the calendar.
* @element dap-ds-calendar-cell
* @title - Calendar cell
* @group calendar
*
* @slot - The content of the calendar cell.
*
* @csspart base - The main calendar cell container.
* @csspart today-mark - The today mark of the calendar cell.
*
* @cssproperty --dds-calendar-cell-display - The display property of the calendar cell host (default: flex)
* @cssproperty --dds-calendar-cell-position - The position property of the calendar cell host (default: relative)
* @cssproperty --dds-calendar-cell-border-radius - The border radius of the calendar cell (default: var(--dds-radius-rounded))
* @cssproperty --dds-calendar-cell-min-width - The minimum width of the calendar cell (default: var(--dds-spacing-1000))
* @cssproperty --dds-calendar-cell-height - The height of the calendar cell (default: var(--dds-spacing-1000))
* @cssproperty --dds-calendar-cell-min-height - The minimum height of the calendar cell (default: var(--dds-spacing-1000))
* @cssproperty --dds-calendar-cell-color - The text color of the calendar cell (default: var(--dds-button-subtle-text-neutral-enabled))
* @cssproperty --dds-calendar-cell-font-size - The font size of the calendar cell (default: var(--dds-font-sm))
* @cssproperty --dds-calendar-cell-font-weight - The font weight of the calendar cell (default: var(--dds-font-weight-medium))
* @cssproperty --dds-calendar-cell-text-align - The text alignment of the calendar cell (default: center)
* @cssproperty --dds-calendar-cell-cursor - The cursor style of the calendar cell (default: pointer)
* @cssproperty --dds-calendar-cell-background-hover - The background color of the calendar cell on hover (default: var(--dds-background-neutral-medium))
* @cssproperty --dds-calendar-cell-background-active - The background color of the calendar cell when active (default: var(--dds-background-neutral-strong))
*
* @cssproperty --dds-calendar-cell-selected-background - The background color of the selected calendar cell (default: var(--dds-button-primary-background-enabled))
* @cssproperty --dds-calendar-cell-selected-color - The text color of the selected calendar cell (default: var(--dds-button-primary-text-enabled))
* @cssproperty --dds-calendar-cell-selected-background-hover - The background color of the selected calendar cell on hover (default: var(--dds-button-primary-background-hover))
* @cssproperty --dds-calendar-cell-selected-background-pressed - The background color of the selected calendar cell when pressed (default: var(--dds-button-primary-background-pressed))
* @cssproperty --dds-calendar-cell-selected-today-mark-background - The background color of the today mark in selected calendar cell (default: var(--dds-text-neutral-on-inverted))
*
* @cssproperty --dds-calendar-cell-disabled-color - The text color of the disabled calendar cell (default: var(--dds-text-neutral-disabled))
* @cssproperty --dds-calendar-cell-disabled-cursor - The cursor style of the disabled calendar cell (default: not-allowed)
*
* @cssproperty --dds-calendar-cell-out-of-range-color - The text color of the out-of-range calendar cell (default: var(--dds-text-neutral-placeholder))
*
* @cssproperty --dds-calendar-cell-today-font-weight - The font weight of the today calendar cell (default: var(--dds-font-weight-bold))
*
* @cssproperty --dds-calendar-cell-header-background - The background color of the header calendar cell (default: transparent)
* @cssproperty --dds-calendar-cell-header-color - The text color of the header calendar cell (default: var(--dds-text-neutral-base))
* @cssproperty --dds-calendar-cell-header-text-transform - The text transform of the header calendar cell (default: capitalize)
* @cssproperty --dds-calendar-cell-header-cursor - The cursor style of the header calendar cell (default: default)
*
* @cssproperty --dds-calendar-cell-in-range-color - The text color of the in-range calendar cell (default: var(--dds-button-primary-text-enabled))
* @cssproperty --dds-calendar-cell-in-range-background-hover - The background color of the in-range calendar cell on hover (default: var(--dds-button-primary-background-hover))
* @cssproperty --dds-calendar-cell-in-range-background-pressed - The background color of the in-range calendar cell when pressed (default: var(--dds-button-primary-background-pressed))
*
* @cssproperty --dds-calendar-cell-range-background - The background color of the range start/end calendar cell (default: var(--dds-button-primary-background-enabled))
* @cssproperty --dds-calendar-cell-range-color - The text color of the range start/end calendar cell (default: var(--dds-button-primary-text-enabled))
* @cssproperty --dds-calendar-cell-range-today-mark-background - The background color of the today mark in range start/end calendar cell (default: var(--dds-text-neutral-on-inverted))
*
* @cssproperty --dds-calendar-cell-today-mark-bottom - The bottom position of the today mark (default: var(--dds-spacing-100))
* @cssproperty --dds-calendar-cell-today-mark-width - The width of the today mark (default: 5px)
* @cssproperty --dds-calendar-cell-today-mark-height - The height of the today mark (default: 5px)
* @cssproperty --dds-calendar-cell-today-mark-stroke - The stroke color of the today mark (default: var(--dds-border-neutral-transparent))
* @cssproperty --dds-calendar-cell-today-mark-background - The background color of the today mark (default: var(--dds-background-neutral-medium-inverted))
* @cssproperty --dds-calendar-cell-today-mark-fill - The fill color of the today mark (default: var(--dds-background-neutral-medium-inverted))
*
*/
export default class DapDSCalendarCell extends DapDSCalendarCell_base {
static tagName: string;
/** The value of the calendar cell. */
value: Dayjs;
/** Whether the calendar cell is selected. */
selected: boolean;
/** Whether the calendar cell is disabled. */
disabledDay: boolean;
/** Whether the calendar cell is today. */
today: boolean;
/** Whether the calendar cell is out of range. */
outOfRange: boolean;
/** Whether the calendar cell is a date header. */
header: boolean;
/** Whether the calendar cell is focused. */
focused: boolean;
/** Whether the calendar cell is the start of a range. */
rangestart: boolean;
/** Whether the calendar cell is the end of a range. */
rangeend: boolean;
/** Whether the calendar cell is in the middle of a range. */
inrange: boolean;
/** The locale of the calendar cell.
* @type {'hu' | 'en' | 'de'}
* @default dayjs.locale()
*/
locale: string;
private _cachedLabel;
private _lastLabelUpdate;
private _lastLocale;
static readonly styles: import('lit').CSSResult;
get label(): string;
get focusElement(): HTMLElement;
protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
getDayName(dateStr: string, locale: string): string;
render(): import('lit-html').TemplateResult;
}
export {};