dap-design-system 0.54.8 → 0.55.0

package/dist/components/datepicker/datepicker.component.d.ts

@@ -2,80 +2,6 @@ import { Dayjs } from 'dayjs';
 import { PropertyValueMap } from 'lit';
 import { FloatingStrategy, PopupPlacement } from '../../common/types';
 import { GenericFormElement } from '../../internal/mixin/genericFormElement';
-/**
- * `dap-ds-datepicker`
- * @summary A datepicker is a graphical user interface widget that allows the user to select a date from a calendar and/or time from a time range.
- * @element dap-ds-datepicker
- * @title - Datepicker
- *
- * @property {Dayjs} value - The value of the datepicker.
- * @property {string} label - The label of the datepicker.
- * @property {string} description - The description of the datepicker.
- * @property {'xs' | 'sm' | 'sm'} size - The size of the datepicker.
- * @property {boolean} disabled - The disabled state of the datepicker.
- * @property {boolean} required - The required state of the datepicker.
- * @property {boolean} readonly - The readonly state of the datepicker.
- * @property {boolean} autofocus - The autofocus state of the datepicker.
- * @property {string} tooltip - The tooltip of the datepicker.
- * @property {'top' | 'right' | 'bottom' | 'left'} tooltipPlacement - The tooltip placement of the datepicker.
- * @property {string} feedback - The feedback of the datepicker.
- * @property {'negative' | 'positive' | 'warning'} feedbackType - The feedback type of the datepicker.
- * @property {boolean} optional - The optional state of the datepicker.
- * @property {string} optionalLabel - The optional label of the datepicker.
- * @property {boolean} subtle - The weight of the label. Default is `false`
- * @property {string} autocomplete - The autocomplete of the datepicker.
- * @property {boolean} autofocus - The autofocus of the datepicker.
- *
- * @event {{ value: string }} dds-change - Fired when the datepicker value changes.
- * @event {{ value: string }} dds-input - Fired when the datepicker input value changes.
- * @event {{ value: string }} dds-valid-date - Fired when the datepicker input value is valid. Happens on manual input typing.
- * @event {{ value: string, type: 'invalid' | 'out-of-range' }} dds-invalid-date - Fired when the datepicker input value is invalid. Happens on manual input typing.
- * @event {{ void }} dds-clear - Fired when the datepicker is cleared.
- * @event {{ void }} dds-focus - Emitted when the datepicker gains focus.
- * @event {{ void }} dds-blur - Emitted when the datepicker loses focus.
- *
- * @csspart base - The main datepicker container.
- * @csspart calendar - The calendar of the datepicker.
- * @csspart trigger - The trigger button of the datepicker.
- * @csspart label - The label of the datepicker.
- * @csspart description - The description of the datepicker.
- * @csspart feedback - The feedback of the datepicker.
- * @csspart tooltip - The tooltip of the datepicker.
- * @csspart input - The input of the datepicker.
- * @csspart clear-button - The clear button of the datepicker.
- * @csspart calendar-grid-cell-base - The base of the calendar grid cell.
- * @csspart calendar-grid-cell - The cell of the calendar grid.
- * @csspart calendar-grid-header-cell-base - The base of the calendar grid header cell.
- * @csspart calendar-grid-header-cell - The header cell of the calendar grid.
- * @csspart calendar-grid-cell-today-mark - The today mark of the calendar grid cell.
- *
- * @cssproperty --dds-combobox-background - The background color of the combobox. (default: var(--dds-fields-background-default))
- * @cssproperty --dds-combobox-border-color - The border color of the combobox. (default: var(--dds-border-neutral-base))
- * @cssproperty --dds-combobox-border-width - The border width of the combobox. (default: var(--dds-border-width-base, 1px))
- * @cssproperty --dds-combobox-border-radius - The border radius of the combobox. (default: var(--dds-radius-base))
- * @cssproperty --dds-combobox-text-color - The text color of the combobox. (default: var(--dds-text-neutral-base))
- * @cssproperty --dds-combobox-placeholder-color - The placeholder text color. (default: var(--dds-text-neutral-subtle))
- * @cssproperty --dds-combobox-disabled-background - The background color when disabled. (default: var(--dds-background-neutral-stronger))
- * @cssproperty --dds-combobox-disabled-text - The text color when disabled. (default: var(--dds-text-neutral-disabled))
- * @cssproperty --dds-combobox-error-border - The border color for error state. (default: var(--dds-border-negative-base))
- * @cssproperty --dds-combobox-success-border - The border color for success state. (default: var(--dds-border-positive-base))
- * @cssproperty --dds-combobox-icon-color - The color of the icons. (default: var(--dds-text-icon-neutral-subtle))
- * @cssproperty --dds-combobox-clear-icon-color - The color of the clear icon. (default: var(--dds-button-subtle-icon-neutral-enabled))
- * @cssproperty --dds-combobox-popup-background - The background color of the popup. (default: var(--dds-background-neutral-subtle))
- * @cssproperty --dds-combobox-popup-shadow - The box shadow of the popup. (default: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%))
- * @cssproperty --dds-combobox-padding-xs - The padding for extra small size. (default: var(--dds-spacing-200))
- * @cssproperty --dds-combobox-padding-sm - The padding for small size. (default: var(--dds-spacing-200))
- * @cssproperty --dds-combobox-padding-lg - The padding for large size. (default: var(--dds-spacing-300))
- * @cssproperty --dds-combobox-padding-horizontal - The horizontal padding. (default: var(--dds-spacing-300))
- * @cssproperty --dds-combobox-padding-vertical - The vertical padding. (default: var(--dds-spacing-200))
- * @cssproperty --dds-combobox-gap - The gap between elements. (default: var(--dds-spacing-100))
- * @cssproperty --dds-combobox-icon-gap - The gap between icons. (default: var(--dds-spacing-200))
- * @cssproperty --dds-combobox-action-gap - The gap between action elements. (default: var(--dds-spacing-200))
- * @cssproperty --dds-combobox-action-padding - The padding for action elements. (default: var(--dds-spacing-300))
- * @cssproperty --dds-combobox-clear-icon-width - The width of the clear icon. (default: var(--dds-spacing-800))
- * @cssproperty --dds-combobox-dropdown-icon-right - The right position of the dropdown icon. (default: var(--dds-spacing-600))
- * @cssproperty --dds-combobox-min-width - The minimum width of the combobox. (default: 7.5rem)
- */
 export default class DapDSDatePicker extends GenericFormElement {
     private static nextId;
     /**
@@ -144,6 +70,8 @@ export default class DapDSDatePicker extends GenericFormElement {
     placeholder: string | null;
     /** The loading state of the datepicker. */
     loading?: boolean;
+    /** Whether to enable input masking. When active, only digit characters are accepted and format separators are auto-inserted after each complete digit group. Only works in single mode with a single configured format. */
+    mask: boolean;
     /** The format of the datepicker. This is a comma separated list of [formats](https://day.js.org/docs/en/display/format). */
     format?: string;
     /** The format separator character in the format attribute. */
@@ -166,6 +94,7 @@ export default class DapDSDatePicker extends GenericFormElement {
     hideAdjacentMonths?: boolean;
     private formatOptions;
     private setValueState;
+    private lastMaskDigitCount;
     static readonly styles: import('lit').CSSResult;
     constructor();
     /**
@@ -181,6 +110,10 @@ export default class DapDSDatePicker extends GenericFormElement {
     isInputValid(): boolean;
     setValue(value?: Dayjs, setInputValue?: boolean, sendEmptyEventOnInput?: boolean): void;
     clearSelection(): Promise<void>;
+    private isMaskActive;
+    private getActiveMaskFormat;
+    private parseMaskTokens;
+    private buildMaskedValue;
     private readonly handleDocumentMouseDown;
     private readonly handlePopupAutoClose;
     private readonly handleInput;