@six-group/ui-library 0.0.0-insider.7c3e3d8 → 0.0.0-insider.7c69df0

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

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
-import { EventListeners } from '../../utils/event-listeners';
 /**
  * @since 1.0
  * @status stable
@@ -17,70 +16,62 @@ import { EventListeners } from '../../utils/event-listeners';
  * @part text - The checkbox text rendered to the right.
  */
 export declare class SixCheckbox {
-  inputId: string;
-  labelId: string;
-  textId: string;
-  errorTextId: string;
-  input: HTMLInputElement;
-  customErrorText: string;
-  customValidation: boolean;
-  readonly eventListeners: EventListeners;
-  host: HTMLSixCheckboxElement;
-  hasFocus: boolean;
-  hasLabelSlot: boolean;
-  hasErrorTextSlot: boolean;
-  /** The checkbox's name attribute. */
-  name: string;
-  /** The checkbox's value attribute. */
-  value: string;
-  /** Set to true to disable the checkbox. */
-  disabled: boolean;
-  /** Set to true to make the checkbox a required field. */
-  required: boolean;
-  /** The checkbox label. Alternatively, you can use the label slot. */
-  label: string;
-  /** The checkbox's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
-  /** 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;
-  /** This will be true when the control is in an invalid state. Validity is determined by the `required` prop. */
-  invalid: boolean;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: 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;
-  /** default state whether the radio button should be checked or not when resetting */
-  private defaultState;
-  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>;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
-  handleChange(): void;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleMouseDown(event: MouseEvent): void;
-  handleInvalid(): void;
-  handleSlotChange(): void;
-  displayError(): boolean;
-  render(): any;
+    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-datepicker/components/day-selection.d.ts

@@ -1,5 +1,9 @@
-export declare const DaySelection: ({ locale, calendarGrid, onClickDateCell }: {
-  locale: any;
-  calendarGrid: any;
-  onClickDateCell: any;
-}) => any;
+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

@@ -1,5 +1,8 @@
-export declare const MonthSelection: ({ locale, selectedDate, onClickMonthCell }: {
-  locale: any;
-  selectedDate: any;
-  onClickMonthCell: any;
-}) => any;
+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

@@ -1,5 +1,7 @@
-export declare const YearSelection: ({ selectedDate, yearSelection, onClickYearCell }: {
-  selectedDate: any;
-  yearSelection: any;
-  onClickYearCell: any;
-}) => any;
+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

@@ -1,22 +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"
+    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

@@ -1,214 +1,205 @@
-import { Event, EventEmitter } from '../../stencil-public-runtime';
+import { EventEmitter } from '../../stencil-public-runtime';
 import { EmptyPayload } from '../../utils/types';
 import { SixDateFormats } from './six-date-formats';
-import { SixTimepickerChange } from '../six-timepicker/six-timepicker';
 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;
+    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"
+    DAY = "day",
+    MONTH = "month",
+    YEAR = "year"
 }
 /**
  * @since 1.0
  * @status stable
  *
  * @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 readonly eventListeners;
-  private inputElement;
-  private popup;
-  private wrapper;
-  readonly host: HTMLSixDatepickerElement;
-  private selectedDate;
-  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';
-  /** 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 | null;
-  /**
-   * The maximum datetime allowed. Value must be a date object
-   */
-  max?: Date | null;
-  /**
-   * 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 make the input a required field. */
-  required: boolean;
-  /**
-   * The date to defines where the datepicker popup starts. The prop accepts ISO 8601 date strings (YYYY-MM-DD).
-   */
-  defaultDate?: string | null;
-  /**
-   * The placeholder defines what text to be shown on the input element
-   */
-  placeholder?: string | null;
-  /**
-   * The value of the form field, which accepts a date object.
-   */
-  value?: Date | null;
-  /** 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;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
-  /** The input's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
-  /** The input's label. Alternatively, you can use the label slot. */
-  label: string;
-  /** 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 defaultValue;
-  get container(): HTMLElement;
-  get firstDateOfBox(): Date;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
-  private isValidValue;
-  get calendarGrid(): CalendarCell[][];
-  private calcIsDropDownContentUp;
-  private getMonthStringForIndex;
-  private previousUnit;
-  private previousYear;
-  private previousYearGroup;
-  private previousMonth;
-  private nextUnit;
-  private nextMonth;
-  private nextYear;
-  private nextYearGroup;
-  openCalendar(): void;
-  private setupEventListenersForOpenPopup;
-  handleDocumentKeyDown: (event: KeyboardEvent) => void;
-  handleDocumentMouseDown: (event: MouseEvent) => void;
-  handleClearClick(event: MouseEvent): void;
-  private closePopup;
-  private updatePointerDates;
-  private differsFromPointerDate;
-  private getPointerDate;
-  private updateValue;
-  updateIfChanged(newDate: Date): void;
-  /**
-   * Selects an option
-   */
-  select(datestring: string): Promise<void>;
-  onTimepickerChange: (sixTimepickerChange: CustomEvent<SixTimepickerChange>) => void;
-  onClickDateCell: (cell: CalendarCell) => void;
-  onClickMonthCell: (selectedMonth: string) => void;
-  onClickYearCell: (year: number) => void;
-  handleInputChange: (event: Event) => void;
-  handleOnBlur: (event: Event) => void;
-  componentWillLoad(): void;
-  private validateProps;
-  componentDidLoad(): void;
-  renderHeader(): any;
-  renderBody(): any;
-  private renderCustomIcon;
-  private renderClearable;
-  render(): any;
-  private adjustPopupPosition;
-  private moveOpenHoistedPopup;
-  private adjustPopupForSmallScreens;
-  private adjustPopupForHoisting;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  private displayCustomMessage;
-  private static getCurrentDateAsPointer;
+    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';
+    /** 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 {};