@oiz/stzh-components 0.0.0-pretest

package/dist/types/components/stzh-button/stzh-button.d.ts

@@ -0,0 +1,59 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhButtonFocusEvent, StzhButtonBlurEvent } from "../../index";
+/**
+ * @slot - Slot for label/text content
+ * @slot icon - Slot for icon element
+ */
+export declare class StzhButton {
+  /** Display a badge aligned to button or icons */
+  badge: string;
+  /** Badge position */
+  badgePosition: "icon" | "button";
+  /** Whether the button is full width */
+  fullwidth: boolean;
+  /** Size variant */
+  size: "default" | "small" | "tiny";
+  /** Text alignment */
+  textAlign: "left" | "center" | "right" | "space-between" | "default";
+  /** Variant style */
+  variant: "default" | "secondary" | "input" | "tertiary";
+  /** Icon (use instead of icon slot) */
+  icon: string;
+  /** Icon Position */
+  iconPosition: "left" | "right";
+  /** `href` if the button should be used as link  */
+  href: string;
+  /** Target if the button is used as link (if `href` used)  */
+  target: string;
+  /** Type of the button */
+  type: "button" | "submit" | "reset";
+  /** Whether the button is disabled */
+  disabled: boolean;
+  /** Whether the button is active */
+  active: boolean;
+  /** Label */
+  label: string;
+  /** Effect/Animation used */
+  effect: "default" | "cta";
+  /** Whether only an icon is used inside the button */
+  iconOnly: boolean;
+  /** Accessible label for screen readers to replace visible text */
+  a11yLabel: string;
+  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+  a11yDescribedby: string;
+  element: HTMLStzhButtonElement;
+  /** Focus button */
+  setFocus(): Promise<void>;
+  /** Focus event */
+  stzhFocus: EventEmitter<StzhButtonFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhButtonBlurEvent>;
+  private button;
+  private onFocus;
+  private onBlur;
+  private onClick;
+  private renderIcon;
+  private renderContent;
+  private renderInner;
+  render(): any;
+}

package/dist/types/components/stzh-calendar/stzh-calendar-day.d.ts

@@ -0,0 +1,14 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+export declare type StzhCalendarDayProps = {
+  focusedDay: Date;
+  today: Date;
+  day: Date;
+  disabled: boolean;
+  inRange: boolean;
+  isSelected: boolean;
+  dateFormatter: Intl.DateTimeFormat;
+  onDaySelect: (event: MouseEvent, day: Date) => void;
+  onKeyboardNavigation: (event: KeyboardEvent) => void;
+  focusedDayRef?: (element: HTMLElement) => void;
+};
+export declare const StzhCalendarDay: FunctionalComponent<StzhCalendarDayProps>;

package/dist/types/components/stzh-calendar/stzh-calendar-month.d.ts

@@ -0,0 +1,21 @@
+import { FunctionalComponent } from "../../stencil-public-runtime";
+import { DaysOfWeek } from "../../utils/date-utils";
+import { StzhCalendarLocalizedText } from "./stzh-calendar.localization";
+import { StzhCalendarDayProps } from "./stzh-calendar-day";
+import { StzhCalendarDateDisabledPredicate } from "../../index";
+declare type StzhCalendarMonthProps = {
+  selectedDate: Date;
+  focusedDate: Date;
+  labelledById: string;
+  localization: StzhCalendarLocalizedText;
+  firstDayOfWeek: DaysOfWeek;
+  min?: Date;
+  max?: Date;
+  dateFormatter: Intl.DateTimeFormat;
+  isDateDisabled: StzhCalendarDateDisabledPredicate;
+  onDateSelect: StzhCalendarDayProps["onDaySelect"];
+  onKeyboardNavigation: StzhCalendarDayProps["onKeyboardNavigation"];
+  focusedDayRef: (element: HTMLElement) => void;
+};
+export declare const StzhCalendarMonth: FunctionalComponent<StzhCalendarMonthProps>;
+export {};

package/dist/types/components/stzh-calendar/stzh-calendar.d.ts

@@ -0,0 +1,76 @@
+import { ComponentInterface, EventEmitter } from "../../stencil-public-runtime";
+import { DaysOfWeek } from "../../utils/date-utils";
+import { StzhCalendarChangeEvent } from "../../index";
+import { StzhCalendarDateDisabledPredicate } from "../../index";
+import { StzhCalendarLocalizedText } from "./stzh-calendar.localization";
+export declare class StzhCalendar implements ComponentInterface {
+  /** Date value. Must be in IS0-8601 format: YYYY-MM-DD. */
+  value: string;
+  /**
+   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+   * This setting can be used alone or together with the max property.
+   */
+  min: string;
+  /**
+   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+   * This setting can be used alone or together with the min property.
+   */
+  max: string;
+  /**
+   * Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
+   * Default is Monday.
+   */
+  firstDayOfWeek: DaysOfWeek;
+  /**  Day names, month names, etc, used for localization. */
+  localization: StzhCalendarLocalizedText;
+  /**
+   * Controls which days are disabled and therefore disallowed.
+   * For example, this can be used to disallow selection of weekends.
+   */
+  isDateDisabled: StzhCalendarDateDisabledPredicate;
+  activeFocus: boolean;
+  focusedDay: Date;
+  /** Event emitted when a date is selected. */
+  stzhChange: EventEmitter<StzhCalendarChangeEvent>;
+  createDateFormatters(): void;
+  valueWatcher(newValue: string): void;
+  /** Set focused day element by a JS Date object */
+  setFocusedDay(day: Date): Promise<void>;
+  /** Set value by a JS Date object */
+  setDate(date: Date): Promise<void>;
+  element: HTMLStzhCalendarElement;
+  private monthSelectId;
+  private yearSelectId;
+  private dialogLabelId;
+  private initialTouchX;
+  private initialTouchY;
+  /**
+   * To format dates exclusively for the benefit of screen readers.
+   *
+   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has
+   * better performance when formatting large number of dates. See:
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance
+   */
+  private dateFormatShort;
+  private enableActiveFocus;
+  private disableActiveFocus;
+  private addDays;
+  private addMonths;
+  private addYears;
+  private startOfWeek;
+  private endOfWeek;
+  private setMonth;
+  private setYear;
+  private handleTouchStart;
+  private handleTouchEnd;
+  private handleNextMonthClick;
+  private handlePreviousMonthClick;
+  private handleKeyboardNavigation;
+  private handleDaySelect;
+  private handleMonthSelect;
+  private handleYearSelect;
+  private processFocusedDayNode;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/stzh-calendar/stzh-calendar.localization.d.ts

@@ -0,0 +1,7 @@
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+export declare type StzhCalendarLocalizedText = StzhLocaleComponent & {
+  prevMonthLabel: string;
+  nextMonthLabel: string;
+  monthSelectLabel: string;
+  yearSelectLabel: string;
+};

package/dist/types/components/stzh-cell/stzh-cell.d.ts

@@ -0,0 +1,21 @@
+import { Layout } from "../../index";
+/**
+ * @slot - Slot for any content
+ */
+export declare class StzhCell {
+  /** Default span of each cell */
+  span: number;
+  /** Default span of each cell above small breakpoint */
+  spanSmall: number;
+  /** Default span of each cell above medium breakpoint */
+  spanMedium: number;
+  /** Default span of each cell above large breakpoint */
+  spanLarge: number;
+  /** Default span of each cell above ultra breakpoint */
+  spanUltra: number;
+  /** Controlling how cells are positioned along a container's main axis */
+  justifySelf: Layout.JustifySelf;
+  /** Control how cells items are positioned along a container's cross axis */
+  alignSelf: Layout.AlignSelf;
+  render(): any;
+}

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

@@ -0,0 +1,55 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhCheckboxChangeEvent, StzhCheckboxFocusEvent, StzhCheckboxBlurEvent } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ * @slot - Slot for label content
+ * @slot description - Slot for description
+ * @slot description-long - Slot for long description (in popover)
+ * @slot error - Slot for error
+ */
+export declare class StzhCheckbox {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Whether the checkbox is disabled */
+  disabled: boolean;
+  /** Name of the input element */
+  name: string;
+  /** Value of the input element */
+  value: string;
+  /** Invalid status */
+  invalid: boolean;
+  /** Required status */
+  required: boolean;
+  /** Checked status */
+  checked: boolean;
+  /** Label */
+  label: string;
+  /** Description message (use description slot as alternative) */
+  description: string;
+  /** Long description message appearing in a popover (use description-long slot as alternative) */
+  descriptionLong: string;
+  /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+  showMarker: boolean;
+  /** One or multiple error message (use error slot as alternative) */
+  error: string | string[];
+  private _error;
+  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
+  a11yDescribedby: string;
+  /** Focus input field */
+  setFocus(): Promise<void>;
+  /** Change event */
+  stzhChange: EventEmitter<StzhCheckboxChangeEvent>;
+  /** Focus event */
+  stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;
+  errorWatcher(newValue: string | string[]): void;
+  element: HTMLStzhRadioElement;
+  private input;
+  private inputId;
+  private onInput;
+  private onFocus;
+  private onBlur;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

package/dist/types/components/stzh-checkboxgroup/stzh-checkboxgroup.d.ts

@@ -0,0 +1,62 @@
+import { StzhCheckboxChangeEvent } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ * @slot - Slot for `stzh-checkbox` elements
+ * @slot description - Slot for description
+ * @slot description-long - Slot for long description (in popover)
+ * @slot error - Slot for error
+ */
+export declare class StzhCheckboxgroup {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Whether the element is disabled or not */
+  disabled: boolean;
+  /** The name of the input checkbox elements */
+  name: string;
+  /** The legend */
+  legend: string;
+  /** Hide legend to show only for screenreaders */
+  hideLegend: boolean;
+  /** Invalid status */
+  invalid: boolean;
+  /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+  showMarker: boolean;
+  /** Select a checkbox by value */
+  value: string[] | string;
+  private _value;
+  /** Direction */
+  direction: "vertical" | "horizontal";
+  /** Description message (use description slot as alternative) */
+  description: string;
+  /** Long description message appearing in a popover (use description-long slot as alternative) */
+  descriptionLong: string;
+  /** One or multiple error message (use error slot as alternative) */
+  error: string | string[];
+  private _error;
+  /** Current checked checkbox elements (readonly) */
+  checkedCheckbox: HTMLStzhCheckboxElement[] | null;
+  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid) */
+  preventUpdateProperties: string[];
+  /** Host element */
+  element: HTMLElement;
+  watchName(newValue: string): void;
+  watchDisabled(newValue: boolean): void;
+  watchInvalid(newValue: boolean): void;
+  watchShowMarker(newValue: boolean): void;
+  watchValue(newValue: string[] | string): void;
+  errorWatcher(newValue: string | string[]): void;
+  onChange(event: CustomEvent<StzhCheckboxChangeEvent>): void;
+  /** Checkbox elements */
+  private checkboxes;
+  private checkboxgroupId;
+  private observer;
+  private updateCheckboxesProperty;
+  private updateCheckedCheckboxByValue;
+  private init;
+  componentWillLoad(): Promise<void>;
+  componentShouldUpdate(_newValue: any, _oldValue: any, prop: string): boolean;
+  componentDidRender(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/stzh-chip/stzh-chip.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhChipClickEvent, StzhChipRemoveEvent, StzhChipFocusEvent, StzhChipBlurEvent } from "../../index";
+/**
+ * @slot - Slot for label
+ * @slot icon - Slot for icon
+ */
+export declare class StzhChip {
+  /** Label */
+  label: string;
+  /** Icon (use instead of icon slot) */
+  icon: string;
+  /** Whether remove button should be shown */
+  removable: boolean;
+  /** Variant */
+  variant: "tag" | "filter" | "input";
+  /** Size */
+  size: "default" | "small";
+  /** Type */
+  type: "default" | "secondary" | "important";
+  /** Counter */
+  counter: string;
+  /** Label of remove button for screenreaders */
+  removeLabel: string;
+  /** Active */
+  active: boolean;
+  /** Disabled */
+  disabled: boolean;
+  /** Invert (only available for tag variant) */
+  invert: boolean;
+  element: HTMLStzhChipElement;
+  /** Focus menu item */
+  setFocus(): Promise<void>;
+  /** Chip click event */
+  stzhClick: EventEmitter<StzhChipClickEvent>;
+  /** Chip remove event */
+  stzhRemove: EventEmitter<StzhChipRemoveEvent>;
+  /** Focus event */
+  stzhFocus: EventEmitter<StzhChipFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhChipBlurEvent>;
+  private chip;
+  private onFocus;
+  private onBlur;
+  private onClick;
+  private onRemoveClick;
+  render(): any;
+}

package/dist/types/components/stzh-chip-select/stzh-chip-select.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhChipSelectItem, StzhChipSelectChangeEvent } from "../../index";
+/**
+ *
+ */
+export declare class StzhChipSelect {
+  /** Data */
+  data: string | StzhChipSelectItem[];
+  private _data;
+  private _dataDropdown;
+  /** Label */
+  label: string;
+  /** Value */
+  value: string;
+  element: HTMLStzhChipSelectElement;
+  /** Change event */
+  stzhChange: EventEmitter<StzhChipSelectChangeEvent>;
+  dataWatcher(newValue: StzhChipSelectItem[] | string): void;
+  private chipClick;
+  private onDropdownChange;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

package/dist/types/components/stzh-container/stzh-container.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @slot - Slot for any content
+ */
+export declare class StzhContainer {
+  render(): any;
+}

package/dist/types/components/stzh-cspace/stzh-cspace.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @slot - Slot for any elements that should be vertically spaced
+ */
+export declare class StzhCspace {
+  render(): any;
+}

package/dist/types/components/stzh-datamessagelist/stzh-datamessagelist.d.ts

@@ -0,0 +1,6 @@
+/**
+ */
+export declare class StzhDatamessagelist {
+  element: HTMLStzhDatamessagelistElement;
+  render(): any;
+}

package/dist/types/components/stzh-datamessagelist-item/stzh-datamessagelist-item.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhDatamessagelistItemEntryLoadingStatus, StzhDatamessagelistItemEntryMeta, StzhDatamessagelistItemEntryAction, StzhDatamessagelistItemEntryTag, StzhDatamessagelistItemClickEvent, StzhDatamessagelistItemActionClickEvent } from "../../index";
+import { StzhDatamessagelistItemLocalizedText } from './stzh-datamessagelist-item.localization';
+/**
+ */
+export declare class StzhDatamessagelistItem {
+  /** Translation strings */
+  localization: StzhDatamessagelistItemLocalizedText;
+  /** Heading */
+  heading: string;
+  /** Whether item should be displayed in unread state */
+  unread: boolean;
+  /** URL the item should link to */
+  href: string;
+  /** Description */
+  description: string;
+  /** External href */
+  externalHref: string;
+  /** Loading status */
+  loadingStatus: StzhDatamessagelistItemEntryLoadingStatus | string;
+  private _loadingStatus;
+  /** Meta */
+  meta: StzhDatamessagelistItemEntryMeta[] | string;
+  private _meta;
+  /** Actions */
+  actions: StzhDatamessagelistItemEntryAction[] | string;
+  private _actions;
+  /** Tags */
+  tags: StzhDatamessagelistItemEntryTag[] | string;
+  private _tags;
+  element: HTMLStzhDatamessagelistItemElement;
+  /** Click event */
+  stzhClick: EventEmitter<StzhDatamessagelistItemClickEvent>;
+  /** Action click event */
+  stzhActionClick: EventEmitter<StzhDatamessagelistItemActionClickEvent>;
+  loadingStatusWatcher(newValue: StzhDatamessagelistItemEntryLoadingStatus | string): void;
+  metaWatcher(newValue: StzhDatamessagelistItemEntryMeta[] | string): void;
+  actionsWatcher(newValue: StzhDatamessagelistItemEntryAction[] | string): void;
+  tagsWatcher(newValue: StzhDatamessagelistItemEntryTag[] | string): void;
+  private actionClick;
+  private itemClick;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

package/dist/types/components/stzh-datamessagelist-item/stzh-datamessagelist-item.localization.d.ts

@@ -0,0 +1,4 @@
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+export declare type StzhDatamessagelistItemLocalizedText = StzhLocaleComponent & {
+  actionsPopoverLabel: string;
+};

package/dist/types/components/stzh-datatable/stzh-datatable.d.ts

@@ -0,0 +1,49 @@
+import { StzhDatatableLocalizedText } from './stzh-datatable.localization';
+/**
+ *
+ */
+export declare class StzhDatatable {
+  /** Translation strings */
+  localization: StzhDatatableLocalizedText;
+  /** Label */
+  label: string;
+  /** Sort by given column key */
+  sortBy: string;
+  /** Sort direction */
+  sortDirection: "asc" | "desc";
+  /** Tokenize type */
+  tokenize: "strict" | "forward" | "reverse" | "full";
+  /** ID field */
+  idField: string;
+  /** Rows */
+  rows: any[] | string;
+  private _rows;
+  private _rowsManaged;
+  /** Columns */
+  columns: any[] | string;
+  private _columns;
+  query: string;
+  hasScrollLeft: boolean;
+  hasScrollRight: boolean;
+  isScrollable: boolean;
+  cellsStickyLeft: number[];
+  cellsStickyRight: number[];
+  element: HTMLStzhDatatableElement;
+  /** Toggle sort by a given column key like when clicking on a column header */
+  toggleSort(columnKey: string): Promise<void>;
+  rowsWatcher(newValue: any[] | string): void;
+  columnsWatcher(newValue: any[] | string): void;
+  handleResize(): void;
+  private input;
+  private searchIndex;
+  private tableWrapper;
+  private debounceScroll;
+  private updateScrollStates;
+  private handleScroll;
+  private buildSearchIndex;
+  private onInputChange;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  render(): any;
+}

package/dist/types/components/stzh-datatable/stzh-datatable.localization.d.ts

@@ -0,0 +1,4 @@
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+export declare type StzhDatatableLocalizedText = StzhLocaleComponent & {
+  searchLabel: string;
+};

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

@@ -0,0 +1,93 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhDatepickerChangeEvent } from "../../index";
+import { StzhCalendarDateDisabledPredicate } from "../../index";
+import { StzhLocaleAdapter } from "../../utils/date-adapter";
+import { StzhDatepickerLocalizedText } from "./stzh-datepicker.localization";
+/**
+ * @slot - Slot to place input, calendar and popover element inside
+ */
+export declare class StzhDatepicker {
+  /**
+   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+   * This setting can be used alone or together with the max property.
+   */
+  calendarMin: string;
+  /**
+   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
+   * This setting can be used alone or together with the min property.
+   */
+  calendarMax: string;
+  /**
+   * Controls which days are disabled and therefore disallowed.
+   * For example, this can be used to disallow selection of weekends.
+   */
+  calendarIsDateDisabled: StzhCalendarDateDisabledPredicate;
+  /** Name of the hidden date picker input. */
+  name: string;
+  /** Value of hidden date picker input (current selected date in ISO format). */
+  value: string;
+  /** Label for input field and popover */
+  label: string;
+  /** Whether the element is readonly or not */
+  readonly: boolean;
+  /** Whether the element is disabled or not */
+  disabled: boolean;
+  /** Description message (use description slot as alternative) */
+  description: string;
+  /** Long description message appearing in a popover (use description-long slot as alternative) */
+  descriptionLong: string;
+  /** One or multiple error message (use error slot as alternative) */
+  error: string | string[];
+  /** Invalid status */
+  invalid: boolean;
+  /** Required status */
+  required: boolean;
+  /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show noting */
+  showMarker: boolean;
+  /**
+   * Placeholder text
+   * @deprecated
+   */
+  placeholder: string;
+  /** Size variant */
+  size: "default" | "small";
+  /** Show calendar inline */
+  inline: boolean;
+  /**
+   * Date adapter, for custom parsing/formatting.
+   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,
+   * and a `format` function which accepts a `Date` and returns a `string`.
+   */
+  dateAdapter: StzhLocaleAdapter;
+  /**  Translation strings. */
+  localization: StzhDatepickerLocalizedText;
+  buttonLabel: string;
+  createDateFormatters(): void;
+  /** Update calendar and input when value prop has changed */
+  valueWatcher(newValue: string): void;
+  /** Set value by a JS Date object */
+  setDate(date: Date): Promise<void>;
+  /** Return internal popover element */
+  getPopover(): Promise<HTMLStzhPopoverElement>;
+  /** Datepicker change event */
+  stzhChange: EventEmitter<StzhDatepickerChangeEvent>;
+  element: HTMLStzhDatepickerElement;
+  /**
+   * To format dates exclusively for the benefit of screen readers.
+   *
+   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has
+   * better performance when formatting large number of dates. See:
+   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance
+   */
+  private dateFormatLong;
+  private input;
+  private popover;
+  private calendar;
+  private onInputChange;
+  private onCalendarChange;
+  private updateButtonAccessibleLabel;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components/stzh-datepicker/stzh-datepicker.localization.d.ts

@@ -0,0 +1,5 @@
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+export declare type StzhDatepickerLocalizedText = StzhLocaleComponent & {
+  buttonLabel: string;
+  selectedDateMessage: string;
+};