@six-group/ui-library 0.0.0-insider.0014c08

package/dist/types/components/six-card/six-card.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the content of the card.
+ */
+export declare class SixCard {
+    render(): any;
+}

package/dist/types/components/six-checkbox/six-checkbox.d.ts

@@ -0,0 +1,77 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot label - The checkbox label.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part control - The checkbox control.
+ * @part checked-icon - The container the wraps the checked icon.
+ * @part indeterminate-icon - The container that wraps the indeterminate icon.
+ * @part text - The checkbox text rendered to the right.
+ */
+export declare class SixCheckbox {
+    private inputId;
+    private labelId;
+    private textId;
+    private errorTextId;
+    private nativeInput?;
+    private eventListeners;
+    host: HTMLSixCheckboxElement;
+    hasFocus: boolean;
+    hasLabelSlot: boolean;
+    hasErrorSlot: boolean;
+    /** The checkbox's name attribute. */
+    name: string;
+    /**
+     * The value of the checkbox does not mean if it's checked or not, use the `checked`
+     * property for that.
+     *
+     * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+     * it's only used when the checkbox participates in a native `<form>`.
+     */
+    value: string;
+    /** Set to true to disable the checkbox. */
+    disabled: boolean;
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /** The label text. */
+    label: string;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+    errorTextCount?: number;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** Set to true to draw the checkbox in a checked state. */
+    checked: boolean;
+    /** Set to true to draw the checkbox in an indeterminate state. */
+    indeterminate: boolean;
+    /** Emitted when the control loses focus. */
+    sixBlur: EventEmitter<EmptyPayload>;
+    /** Emitted when the control's checked state changes. */
+    sixChange: EventEmitter<EmptyPayload>;
+    /** Emitted when the control gains focus. */
+    sixFocus: EventEmitter<EmptyPayload>;
+    handleCheckedChange(): void;
+    handleLabelChange(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /** Sets focus on the checkbox. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /** Removes focus from the checkbox. */
+    removeFocus(): Promise<void>;
+    private handleChange;
+    private handleBlur;
+    private handleFocus;
+    private handleMouseDown;
+    private handleSlotChange;
+    render(): any;
+}

package/dist/types/components/six-date/calendar-grid.d.ts

@@ -0,0 +1,20 @@
+import { IsoDate } from './iso-date';
+export interface CalendarCell {
+    date: IsoDate;
+    label: string;
+    display: string;
+    disabled: boolean;
+    outdated: boolean;
+    selected: boolean;
+    today: boolean;
+}
+export interface CalendarGridOptions {
+    year: number;
+    month: number;
+    selected?: IsoDate;
+    minDate?: IsoDate;
+    maxDate?: IsoDate;
+    dateFormat: string;
+    allowedDates?: (date: IsoDate) => boolean;
+}
+export declare function createCalendarGrid(options: CalendarGridOptions): CalendarCell[];

package/dist/types/components/six-date/components/day-selection.d.ts

@@ -0,0 +1,8 @@
+import { Language } from '../../../utils/error-messages';
+import { CalendarCell } from '../calendar-grid';
+import { IsoDate } from '../iso-date';
+export declare const DaySelection: (props: {
+    language: Language;
+    calendarGrid: CalendarCell[];
+    dayClicked: (cell: IsoDate) => void;
+}) => any;

package/dist/types/components/six-date/components/month-selection.d.ts

@@ -0,0 +1,7 @@
+import { IsoDate } from '../iso-date';
+import { Language } from '../../../utils/error-messages';
+export declare const MonthSelection: (props: {
+    language: Language;
+    selected: IsoDate | "";
+    monthClicked: (month: number) => void;
+}) => any;

package/dist/types/components/six-date/components/year-selection.d.ts

@@ -0,0 +1,7 @@
+import { IsoDate } from '../iso-date';
+export declare const YearSelection: (props: {
+    selected: IsoDate | "";
+    pointerYear: number;
+    yearCount: number;
+    yearClicked: (year: number) => void;
+}) => any;

package/dist/types/components/six-date/iso-date.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Represent an iso date string like `2021-01-08`.
+ */
+export type IsoDate = string;
+export interface PointerDate {
+    year: number;
+    month: number;
+    day: number;
+}
+/**
+ * Validates a date string against a given format and returns an IsoDate if valid.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param dateString - The date string to validate.
+ * @param dateFormat - The expected format of the date string (e.g., "yyyy-MM-dd").
+ * @returns An IsoDate if the date string is valid, otherwise undefined.
+ */
+export declare function fromFormattedString(dateString: string, dateFormat: string): IsoDate | undefined;
+/**
+ * Formats a given ISO date string into a specified format.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param {IsoDate} isoDate - The ISO date string to be formatted.
+ * @param {string} dateFormat - The desired date format string.
+ * @return {string} A string representing the formatted date.
+ */
+export declare function formatDate(isoDate: IsoDate, dateFormat: string): string;
+export declare function fromDate(date: Date): IsoDate;
+export declare function today(): IsoDate;
+export declare function isValidIsoDate(isoDate: string): isoDate is IsoDate;
+export declare function getMonth(isoDate: IsoDate): number;
+export declare function getYear(isoDate: IsoDate): number;
+export declare function toPointerDate(isoDate: IsoDate): PointerDate;
+export declare function nextPointerDate(selectionMode: 'day' | 'month' | 'year', pointerDate: PointerDate): PointerDate;
+export declare function previousPointerDate(selectionMode: 'day' | 'month' | 'year', pointerDate: PointerDate): PointerDate;
+export declare function todayAsPointerDate(): PointerDate;
+export declare function cleanupValue(value: unknown): {
+    value: IsoDate | '';
+    pointerDate: PointerDate;
+    warning?: string;
+};

package/dist/types/components/six-date/six-date.d.ts

@@ -0,0 +1,143 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Language } from '../../utils/error-messages';
+/**
+ * A date picker component that allows users to select dates via a calendar popup or direct input.
+ *
+ * @since 5.0
+ * @status beta
+ *
+ * @slot label - The date's label. Alternatively, you can use the label prop.
+ * @slot help-text - Help text that describes the usage.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text property.
+ */
+export declare class SixDate {
+    private eventListeners;
+    private inputElement?;
+    private popoverHelper?;
+    private panel?;
+    private positioner?;
+    host: HTMLSixDateElement;
+    /**
+     * Current state of the date picker for day, month, or year selection.
+     * Independent of the currently selected date value.
+     */
+    pointerDate: import("./iso-date").PointerDate;
+    selectionMode: 'day' | 'month' | 'year';
+    /**
+     * The language used to render the weekdays and months.
+     */
+    language: Language;
+    /**
+     * If `true` the user can only select a date via the component in the popup but not directly edit the input field.
+     */
+    readonly: boolean;
+    /**
+     * If `true` the component is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Callback to determine which dates in the picker should be selectable.
+     */
+    allowedDates: (date: string) => boolean;
+    /**
+     * The minimum allowed selectable date in ISO format (yyyy-MM-dd).
+     * Dates before this value will be disabled in the date picker.
+     * Example: '2024-01-01'
+     */
+    min?: string;
+    /**
+     * The maximum allowed selectable date in ISO format (yyyy-MM-dd).
+     * Dates after this value will be disabled in the date picker.
+     * Example: '2025-01-01'
+     */
+    max?: string;
+    /**
+     * The size of the date input field.
+     */
+    size: 'small' | 'medium' | 'large';
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /**
+     * The placeholder defines what text to be shown on the input element
+     */
+    placeholder?: string;
+    /**
+     * The value of the form field in ISO 8601 date format (yyyy-MM-dd).
+     * Example: '2024-01-01'.
+     *
+     * When an invalid date is provided, it will be replaced with an empty string (''),
+     * matching the behavior of native HTML <input type="date">.
+     *
+     * The displayed format can be customized using the dateFormat property, but the underlying
+     * value will always be stored in ISO format.
+     */
+    value: string | '';
+    /** Defines the format pattern for displaying dates and how dates can be entered via keyboard.
+     *
+     * The parser accepts flexible input that doesn't strictly match the format pattern.
+     * Input with missing leading zeros or incomplete years will be automatically normalized.
+     * For example, with the pattern "dd.MM.yyyy": "1.1.2025" becomes "01.01.2025" and
+     * "1.1.225" becomes "01.01.0225".
+     *
+     * Defaults to "dd.MM.yyyy".
+     *
+     * Available patterns:
+     * - Year: "yyyy" (e.g., "2021")
+     * - Month: "MM" (e.g., "01" for January) or "M" (e.g., "1" for January)
+     * - Day: "dd" (e.g., "08" for the 8th) or "d" (e.g., "8" for the 8th)
+     *
+     * Examples:
+     * - "dd.MM.yyyy" -> "31.01.2024"
+     * - "yyyy-MM-dd" -> "2024-01-31"
+     * - "d.M.yyyy" -> "31.1.2024"
+     * */
+    dateFormat: string;
+    /** The label text. */
+    label: string;
+    /** The input's help text. Alternatively, you can use the help-text slot. */
+    helpText: string;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+    errorTextCount?: number;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** The input's name attribute. */
+    name: string;
+    /** Set to true to add a clear button when the input is populated. */
+    clearable: boolean;
+    valueChanged(): void;
+    /**
+     * Emitted when the control's value changes.
+     * Event detail contains the new date value in ISO format (yyyy-MM-dd) or an empty string if cleared.
+     */
+    sixChange: EventEmitter<string | ''>;
+    /**
+     * Emitted when the control loses focus or the date picker popup is closed.
+     * Does not contain event details.
+     */
+    sixBlur: EventEmitter;
+    /** Sets focus on the input. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    private panelHideInProgress;
+    private updateValueAndPointerDate;
+    private getSixInputBaseElement;
+    private show;
+    private hide;
+    private initPopover;
+    private handlePreviousClick;
+    private handleNextClick;
+    private handleDocumentMouseDown;
+    private handleDayClick;
+    private handleMonthClicked;
+    private handleYearClicked;
+    private handleInputChange;
+    private handleInputBlur;
+    private handleInputClearClick;
+    private handleInputKeyDown;
+    private updateInputElementValue;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

package/dist/types/components/six-date/translations.d.ts

@@ -0,0 +1,37 @@
+import { Language } from '../../utils/error-messages';
+export declare const i18nDate: {
+    en: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    de: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    fr: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    it: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+    es: {
+        months: string[];
+        monthsShort: string[];
+        weekdaysMin: string[];
+        formatHelp: (pattern: string) => string;
+    };
+};
+export declare function translateMonth(month: number, language: Language): string;
+export declare function translateMonthShort(month: number, language: Language): string;
+export declare function translateWeekday(day: number, language: Language): string;
+export declare function translateFormatHelp(language: Language, pattern: string): string;

package/dist/types/components/six-datepicker/components/day-selection.d.ts

@@ -0,0 +1,9 @@
+import { DateLocale } from '../../../utils/date-util';
+import { CalendarCell } from '../six-datepicker';
+interface DaySelectionParams {
+    locale: DateLocale;
+    calendarGrid: CalendarCell[][];
+    onClickDateCell: (cell: CalendarCell) => void;
+}
+export declare const DaySelection: (daySelectionParams: DaySelectionParams) => any;
+export {};

package/dist/types/components/six-datepicker/components/month-selection.d.ts

@@ -0,0 +1,8 @@
+import { DateLocale } from '../../../utils/date-util';
+interface MonthSelectionParams {
+    locale: DateLocale;
+    selectedDate?: Date;
+    onClickMonthCell: (month: string) => void;
+}
+export declare const MonthSelection: (monthSelectionParams: MonthSelectionParams) => any;
+export {};

package/dist/types/components/six-datepicker/components/year-selection.d.ts

@@ -0,0 +1,7 @@
+interface YearSelectionParams {
+    selectedDate?: Date;
+    yearSelection: number[][];
+    onClickYearCell: (year: number) => void;
+}
+export declare const YearSelection: (yearSelectionParams: YearSelectionParams) => any;
+export {};

package/dist/types/components/six-datepicker/six-date-formats.d.ts

@@ -0,0 +1,22 @@
+export declare enum SixDateFormats {
+    DDMMYYY_DOT = "dd.mm.yyyy",
+    YYYYMMDD_DASH = "yyyy-mm-dd",
+    DDMMYYYY_DASH = "dd-mm-yyyy",
+    DDMMYYYY_SLASH = "dd/mm/yyyy",
+    YYYYMMDD_SLASH = "yyyy/mm/dd",
+    DDMMYY_DOT = "dd.mm.yy",
+    YYMMDD_DASH = "yy-mm-dd",
+    DDMMYY_DASH = "dd-mm-yy",
+    DDMMYY_SLASH = "dd/mm/yy",
+    YYMMDD_SLASH = "yy/mm/dd",
+    DDMMYYY_DOT_TIME = "dd.mm.yyyy hh:MM:ss",
+    YYYYMMDD_DASH_TIME = "yyyy-mm-dd hh:MM:ss",
+    DDMMYYYY_DASH_TIME = "dd-mm-yyyy hh:MM:ss",
+    DDMMYYYY_SLASH_TIME = "dd/mm/yyyy hh:MM:ss",
+    YYYYMMDD_SLASH_TIME = "yyyy/mm/dd hh:MM:ss",
+    DDMMYY_DOT_TIME = "dd.mm.yy hh:MM:ss",
+    YYMMDD_DASH_TIME = "yy-mm-dd hh:MM:ss",
+    DDMMYY_DASH_TIME = "dd-mm-yy hh:MM:ss",
+    DDMMYY_SLASH_TIME = "dd/mm/yy hh:MM:ss",
+    YYMMDD_SLASH_TIME = "yy/mm/dd hh:MM:ss"
+}

package/dist/types/components/six-datepicker/six-datepicker.d.ts

@@ -0,0 +1,205 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { EmptyPayload } from '../../utils/types';
+import { SixDateFormats } from './six-date-formats';
+export type SixDatepickerSelectPayload = Date | undefined | null;
+export interface CalendarCell {
+    date: Date;
+    dateString: string;
+    display: string;
+    isDisabled: boolean;
+    isOutdated: boolean;
+    isSelected: boolean;
+    isToday: boolean;
+    label: string;
+}
+declare enum SelectionMode {
+    DAY = "day",
+    MONTH = "month",
+    YEAR = "year"
+}
+/**
+ * @since 1.0
+ * @status deprecated. Use six-date instead.
+ *
+ * @slot - Used to define a footer for the date picker.
+ * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
+ */
+export declare class SixDatepicker {
+    private eventListeners;
+    private inputElement?;
+    private popup?;
+    private wrapper?;
+    private selectedDate?;
+    host: HTMLSixDatepickerElement;
+    private pointerDate;
+    selectionMode: SelectionMode;
+    isDropDownContentUp: boolean;
+    /**
+     * Set the type.
+     */
+    type: 'date' | 'date-time';
+    /**
+     * The language used to render the weekdays and months.
+     */
+    locale: 'en' | 'de' | 'fr' | 'it' | 'es';
+    /** Indicates whether or not the calendar dropdown is open on startup. You can use this in lieu of the show/hide methods. */
+    open: boolean;
+    /** Indicates whether or not the calendar should be shown as an inline (always open) component */
+    inline: boolean;
+    /**
+     * If `true` the user can only select a date via the component in the popup, but not directly edit the input field.
+     */
+    readonly: boolean;
+    /**
+     * If `true` the component is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Callback to determine which date in the datepicker should be selectable.
+     * the callback function will get a datestring as an argument, e.g. '2021-07-04'
+     *
+     * Usage e.g.:
+     * const datepicker = document.getElementById('allowed-date-picker');
+     * datepicker.allowedDates = datestring => parseInt(datestring.split('-')[2], 10) % 2 === 0;
+     */
+    allowedDates: (date: Date) => boolean;
+    /**
+     * The minimum datetime allowed. Value must be a date object
+     */
+    min?: Date;
+    /**
+     * The maximum datetime allowed. Value must be a date object
+     */
+    max?: Date;
+    /**
+     * Closes the datepicker dropdown after selection
+     */
+    closeOnSelect: boolean;
+    /**
+     * The enforced placement of the dropdown panel.
+     */
+    placement?: 'top' | 'bottom';
+    /** Datepicker size. */
+    size: 'small' | 'medium' | 'large';
+    /** Set to true to show an asterisk beneath the label. */
+    required: boolean;
+    /**
+     * The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).
+     */
+    defaultDate?: string;
+    /**
+     * The placeholder defines what text to be shown on the input element
+     */
+    placeholder?: string;
+    /**
+     * The value of the form field, which accepts a date object.
+     */
+    value?: Date;
+    /** The label text. */
+    label: string;
+    /** The error message shown, if `invalid` is set to true.  */
+    errorText: string | string[];
+    /** The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 */
+    errorTextCount?: number;
+    /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+    invalid: boolean;
+    /** The dropdown will close when the user interacts outside of this element (e.g. clicking). */
+    containingElement?: HTMLElement;
+    /** Define the dateFormat. Valid formats are:
+     * 'dd.mm.yyyy'
+     * 'yyyy-mm-dd'
+     * 'dd-mm-yyyy'
+     * 'dd/mm/yyyy'
+     * 'yyyy/mm/dd'
+     * 'dd.mm.yy'
+     * 'yy-mm-dd'
+     * 'dd-mm-yy'
+     * 'dd/mm/yy'
+     * 'yy/mm/dd'
+     * */
+    dateFormat: SixDateFormats;
+    /**
+     * Set the amount of time, in milliseconds, to wait to trigger the `dateChange` event after each keystroke.
+     */
+    debounce: number;
+    /** The input's name attribute. */
+    name: string;
+    /** Set to true to add a clear button when the input is populated. */
+    clearable: boolean;
+    /** Set the position of the icon */
+    iconPosition: 'left' | 'right';
+    /**
+     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
+     * `overflow: auto|scroll`.
+     */
+    hoist: boolean;
+    protected debounceChanged(): void;
+    /**
+     * Update the native input element when the value changes
+     */
+    protected valueChanged(): void;
+    /**
+     * Emitted when a option got selected.
+     */
+    sixSelect: EventEmitter<SixDatepickerSelectPayload>;
+    /**
+     * Emitted when the clear button is activated.
+     */
+    sixClear: EventEmitter<EmptyPayload>;
+    /**
+     * Emitted when a option got selected.
+     */
+    sixBlur: EventEmitter<SixDatepickerSelectPayload>;
+    resizeHandler(): Promise<void>;
+    scrollHandler(): Promise<void>;
+    private moveOpenHoistedPopup;
+    get container(): HTMLElement;
+    get firstDateOfBox(): Date;
+    /** Sets focus on the datepickers input. */
+    setFocus(options?: FocusOptions): Promise<void>;
+    get calendarGrid(): CalendarCell[][];
+    private updateDropdownDirection;
+    private getMonthStringForIndex;
+    private previousUnit;
+    private previousYear;
+    private previousYearGroup;
+    private previousMonth;
+    private nextUnit;
+    private nextMonth;
+    private nextYear;
+    private nextYearGroup;
+    private openCalendar;
+    private setupEventListenersForOpenPopup;
+    private handleDocumentKeyDown;
+    private handleDocumentMouseDown;
+    private handleClearClick;
+    private closePopup;
+    private updatePointerDates;
+    private differsFromPointerDate;
+    private getPointerDate;
+    private updateValue;
+    private updateIfChanged;
+    /**
+     * Selects an option
+     */
+    select(datestring?: string): Promise<void>;
+    private onTimepickerChange;
+    private onClickDateCell;
+    private onClickMonthCell;
+    private onClickYearCell;
+    private handleInputChange;
+    private handleOnBlur;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    private renderHeader;
+    private renderBody;
+    private renderCustomIcon;
+    private renderClearable;
+    render(): any;
+    private adjustPopupPosition;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private static getCurrentDateAsPointer;
+}
+export {};

package/dist/types/components/six-datepicker/test/six-datepicker.test-helpers.d.ts

@@ -0,0 +1 @@
+export declare const getExpectedMonthString: () => string;