@oiz/stzh-components 2.12.0-beta1 → 2.12.0

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

@@ -0,0 +1,64 @@
+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 nothing */
+  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[] | string;
+  private _preventUpdateProperties;
+  /** 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;
+  preventUpdatePropertiesWatcher(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,74 @@
+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;
+  /** `href` if the chip should be used as link  */
+  href: string;
+  /** Target if the button is used as link (if `href` used)  */
+  target: string;
+  /** Whether chip is not interactive */
+  nonInteractive: boolean;
+  /** Whether remove button should be shown */
+  removable: boolean;
+  /** Variant */
+  variant: "tag" | "filter" | "input";
+  /** Size */
+  size: "default" | "small" | "large";
+  /** Type */
+  type: "default" | "secondary" | "important";
+  /** Counter */
+  counter: string;
+  /** Label of remove button for screenreaders */
+  removeLabel: string;
+  /** Active */
+  active: boolean;
+  /** Disabled */
+  disabled: boolean;
+  /** Tabindex of link/button */
+  a11yTabindex: string;
+  /** Accessible label for screen readers to replace visible text */
+  a11yLabel: string;
+  /** Id for element which describes the link/button */
+  a11yDescribedby: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the link/button element.
+   * Default value will be taken from `label` prop or default slot.
+   */
+  analyticsId: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the remove button element.
+   * Default value will be taken from `removeLabel` prop.
+   */
+  removeAnalyticsId: string;
+  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 text;
+  private focusedByInput;
+  componentDidRender(): void;
+  private renderInner;
+  private onRootFocus;
+  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,46 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhChipSelectItem, StzhChipSelectChangeEvent } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ */
+export declare class StzhChipSelect {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** The list of chips */
+  data: string | StzhChipSelectItem[];
+  private _data;
+  private _dataDropdown;
+  /** The name of the input element */
+  name: string;
+  /** Label */
+  label: string;
+  /** Value */
+  value: 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;
+  /** One or multiple error message (use error slot as alternative) */
+  error: string | string[];
+  private _error;
+  /** Invalid status */
+  invalid: boolean;
+  /** Required status */
+  required: boolean;
+  /** Whether all chips are disabled or not */
+  disabled: boolean;
+  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+  a11yDescribedby: string;
+  activeFocusOptionIndex: number;
+  element: HTMLStzhChipSelectElement;
+  /** Change event */
+  stzhChange: EventEmitter<StzhChipSelectChangeEvent>;
+  dataWatcher(newValue: StzhChipSelectItem[] | string): void;
+  errorWatcher(newValue: string | string[]): void;
+  private id;
+  private handleChipClick;
+  private handleDropdownChange;
+  private handleKeydown;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,49 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhClampClampEvent, StzhClampExpandEvent } from "../../index";
+import { StzhClampLocalizedText } from "./stzh-clamp.localization";
+/**
+ *
+ */
+export declare class StzhClamp {
+  /** Translation strings */
+  localization: StzhClampLocalizedText;
+  /** Line number */
+  lines: number;
+  /** Line number above small breakpoint */
+  linesSmall: number;
+  /** Line number above medium breakpoint */
+  linesMedium: number;
+  /** Line number above large breakpoint */
+  linesLarge: number;
+  /** Line number above ultra breakpoint */
+  linesUltra: number;
+  /** Whether expand link is shown */
+  showExpandLink: boolean;
+  /** Whether clamping is expanded */
+  expanded: boolean;
+  /** Whether the text is currently clamped (readonly) */
+  clamped: boolean;
+  element: HTMLStzhClampElement;
+  /** Event when clamping state changed */
+  stzhClamp: EventEmitter<StzhClampClampEvent>;
+  /** Event when expanding state changed */
+  stzhExpand: EventEmitter<StzhClampExpandEvent>;
+  update(): Promise<void>;
+  private textElement;
+  private textCloneElement;
+  private debounceResize;
+  private resizeObserver;
+  private mutationObserver;
+  private renderPromiseResolve;
+  private updateClamped;
+  private handleResize;
+  private handleMutaton;
+  private handleExpandClick;
+  waitForNextRender(): Promise<unknown>;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,54 @@
+import { ContactNumber, StzhContactAvailabilityItem } from "../../index";
+/**
+ * @slot image - slot for image
+ * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)
+ */
+export declare class StzhContact {
+  /** Type */
+  type: "Organization" | "Person";
+  /** Heading */
+  heading: string;
+  /** Main heading */
+  mainHeading: string;
+  /** Name */
+  name: string;
+  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */
+  address: string;
+  /** Street */
+  street: string;
+  /** Additional street info */
+  streetInfo: string;
+  /** Postal code */
+  postalCode: string;
+  /** Location / city */
+  location: string;
+  /**
+   * Numbers
+   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`
+   * and optionally `analyticsId` for setting `s-object-id` to the link element
+   * (for Adobe Analytics, default value is `label` and `number`).
+   */
+  numbers: ContactNumber[] | string;
+  private _numbers;
+  /** Post office box heading */
+  poBoxHeading: string;
+  /** Post office box title */
+  poboxTitle: string;
+  /** Post office box postal code */
+  poboxPostalCode: string;
+  /** Post office box location / city */
+  poboxLocation: string;
+  /** Availability title */
+  availabilityTitle: string;
+  /** Availability times */
+  availability: string | StzhContactAvailabilityItem[];
+  private _availability;
+  private availabilityDataItems;
+  /** Whether to display border or not */
+  withBorder: boolean;
+  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]): void;
+  numbersWatcher(newValue: ContactNumber[] | string): void;
+  element: HTMLStzhFigureElement;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhDatalistItemEntry, StzhDatalistDirectionChangeEvent, StzhDatalistHideBorderChangeEvent } from "../../index";
+/**
+ */
+export declare class StzhDatalist {
+  /** Direction */
+  direction: "vertical" | "horizontal";
+  /** Direction above small breakpoint */
+  directionSmall: "vertical" | "horizontal" | "inherit";
+  /** Direction above medium breakpoint  */
+  directionMedium: "vertical" | "horizontal" | "inherit";
+  /** Direction above large breakpoint  */
+  directionLarge: "vertical" | "horizontal" | "inherit";
+  /** Direction above ultra breakpoint  */
+  directionUltra: "vertical" | "horizontal" | "inherit";
+  /** Hide border lines between items */
+  hideBorder: boolean;
+  /**
+   * Whether to disable min-width of datalist item label for the `horizontal` variant.
+   *
+   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).
+   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.
+   *
+   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.
+   */
+  disableLabelMinWidth: boolean;
+  /** Current direction in use (readonly)  */
+  currentDirection: "vertical" | "horizontal";
+  /**
+   * Items in datalist
+   * Array of objects that must at least include `value` attribute.
+   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:
+   * `[{"value":"Value 1", "label": "Label 1"}, {"value":"Value 2", "label": "Label 2", "items": [...]}]`
+   */
+  items: StzhDatalistItemEntry[] | string;
+  private _items;
+  /** Direction attribute change event */
+  stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;
+  /** Hide border change event */
+  stzhHideBorderChange: EventEmitter<StzhDatalistHideBorderChangeEvent>;
+  element: HTMLStzhDatalistElement;
+  hideBorderWatcher(newValue: boolean): void;
+  directionWatcher(): void;
+  currentDirectionWatcher(newValue: "vertical" | "horizontal"): void;
+  itemsWatcher(newValue: any[] | string): void;
+  resizeHandler: () => void;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,62 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhDatalistItemActionClickEvent } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ * @slot - Slot for nested datalist
+ * @slot value - Slot for value (or use value slot instead)
+ */
+export declare class StzhDatalistItem {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Direction */
+  direction: "vertical" | "horizontal";
+  /** Link */
+  href: string;
+  /** Rel (if href is used) */
+  rel: string;
+  /** Target (if href is used) */
+  target: string;
+  /** Download attribute of link (if `href` used) */
+  download: string;
+  /** Leading icon */
+  leadingIcon: string;
+  /** Icon of action button (if href is used, will only be for presentation and default to link icon) */
+  icon: string;
+  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */
+  iconLabel: string;
+  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */
+  iconTooltip: string;
+  /** Label */
+  label: string;
+  /** Value (or use value slot instead) */
+  value: string;
+  /** Meta */
+  meta: string;
+  /** Status Label */
+  statusLabel: string;
+  /** Status Type */
+  statusType: "default" | "success" | "warning" | "error" | "info";
+  /** Hide border lines */
+  hideBorder: boolean;
+  /** Aria expanded of link/button */
+  a11yExpanded: boolean;
+  /** Aria controls of link/button */
+  a11yControls: string;
+  /** Whether rel contains external */
+  external: boolean;
+  /** Item action click event */
+  stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;
+  element: HTMLStzhDatalistItemElement;
+  externalWatcher(): void;
+  private datalist;
+  private datalistItemId;
+  private actionClick;
+  private handleDirectionChange;
+  private handleHideBorderChange;
+  private renderInner;
+  private renderLeadingIcon;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  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,57 @@
+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;
+  /** Rel (if href is used) */
+  rel: string;
+  /** Target (if href is used) */
+  target: string;
+  /** Description */
+  description: string;
+  /** Icon (`arrow-right` by default or `external-link` if rel="*external*" is used) */
+  icon: 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;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the link element.
+   * Default value will be taken from `heading` prop.
+   */
+  analyticsId: string;
+  /** Whether rel contains external */
+  external: boolean;
+  element: HTMLStzhDatamessagelistItemElement;
+  /** Click event */
+  stzhClick: EventEmitter<StzhDatamessagelistItemClickEvent>;
+  /** Action click event */
+  stzhActionClick: EventEmitter<StzhDatamessagelistItemActionClickEvent>;
+  externalWatcher(): void;
+  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-datatable/stzh-datatable.d.ts

@@ -0,0 +1,103 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhDatatableRowClickEvent, StzhDatatableCellClickEvent, StzhDatatableHeadingCellClickEvent, StzhDatatableSortClickEvent, StzhDatatableSortByChangeEvent, StzhDatatableSortDirectionChangeEvent } from "../../index";
+import { StzhDatatableLocalizedText } from './stzh-datatable.localization';
+/**
+ * @slot action-button - Slot for action `stzh-button` element
+ */
+export declare class StzhDatatable {
+  /** Table layout */
+  tableLayout: "auto" | "fixed";
+  /** 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;
+  hideSearch: boolean;
+  /** Whether to show table data as list on mikro breakpoint */
+  showList: boolean;
+  /** Current page */
+  page: number;
+  /** If pagination should be shown, set a number of items to be shown by each page. */
+  pageSize: number;
+  /**
+   * Whether to disable min-width of the table.
+   *
+   * If `false`, the default `min-width` is `700px`
+   * If `true`, the `min-width` is `none`, so the table will try to squeeze down content as much as possible.
+   *
+   * You can also overwrite the min-width via CSS with the custom property `--min-width`.
+   */
+  disableMinWidth: boolean;
+  /**
+   * Array of objects including the row data that must at least include `id` attribute (name can be changed with `idField` property).
+   *
+   * Example: [{"id":"1","text":"Foo"}, ...]
+   */
+  rows: any[] | string;
+  private _rows;
+  private _rowsShown;
+  private _rowsFiltered;
+  /**
+   * Array of objects including the columns data that must include `key` and `text` attribute.
+   *
+   * Example: [{ "key": "id", "text": "ID", "align": "right", "sort": true, "fixed": "right", style: { width: "53px" } }]
+   */
+  columns: any[] | string;
+  private _columns;
+  query: string;
+  hasScrollLeft: boolean;
+  hasScrollRight: boolean;
+  isScrollable: boolean;
+  cellsStickyLeft: number[];
+  cellsStickyRight: number[];
+  element: HTMLStzhDatatableElement;
+  /** Datatable row click event */
+  stzhRowClick: EventEmitter<StzhDatatableRowClickEvent>;
+  /** Datatable cell click event */
+  stzhCellClick: EventEmitter<StzhDatatableCellClickEvent>;
+  /** Datatable heading cell click event */
+  stzhHeadingCellClick: EventEmitter<StzhDatatableHeadingCellClickEvent>;
+  /** Datatable sort click event */
+  stzhSortClick: EventEmitter<StzhDatatableSortClickEvent>;
+  /** Datatable sort by change event */
+  stzhSortByChange: EventEmitter<StzhDatatableSortByChangeEvent>;
+  /** Datatable sort direction change event */
+  stzhSortDirectionChange: EventEmitter<StzhDatatableSortDirectionChangeEvent>;
+  /** 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;
+  sortByWatcher(value: string, oldValue: string): void;
+  sortDirectionWatcher(value: "asc" | "desc", oldValue: "asc" | "desc"): void;
+  private input;
+  private searchIndex;
+  private tableWrapper;
+  private debounceScroll;
+  private debounceResize;
+  private resizeObserver;
+  private handleSortByDropdownChange;
+  private handleSortDirectionDropdownChange;
+  private handleRowClick;
+  private handleCellClick;
+  private handleHeadingCellClick;
+  private handleSortClick;
+  private updateScrollStates;
+  private handleResize;
+  private handleScroll;
+  private buildSearchIndex;
+  private onInputChange;
+  private onPaginationChange;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,101 @@
+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 action - Slot for action below calendar (stzh-link element)
+ */
+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 label is visually hidden. */
+  labelHidden: boolean;
+  /** 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 nothing */
+  showMarker: boolean;
+  /** Size variant */
+  size: "default" | "small";
+  /** Show calendar inline */
+  inline: boolean;
+  /**
+   * Date adapter visible date shown to the user, 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;
+  /**
+   * Date adapter for internal date passed to backend, for custom parsing/formatting.
+   * Can be `"iso"` (default, date in ISO format) / `"legacy"` (date in `d.m.Y` format)
+   * or `StzhLocaleAdapter` (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`.)
+   */
+  internalDateAdapter: "iso" | "legacy" | StzhLocaleAdapter;
+  private _internalDateAdapter;
+  /**  Translation strings. */
+  localization: StzhDatepickerLocalizedText;
+  buttonLabel: string;
+  createDateFormatters(): void;
+  /** Update calendar and input when value prop has changed */
+  valueWatcher(newValue: string): void;
+  dateAdapterWatcher(newValue: StzhLocaleAdapter): void;
+  internalDateAdapterWatcher(newValue: "iso" | "legacy" | StzhLocaleAdapter): 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 onRootFocus;
+  private onInputChanged;
+  private onCalendarChange;
+  private updateButtonAccessibleLabel;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  render(): any;
+}