@oiz/stzh-components 3.0.0-beta4 → 3.0.0-beta5

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

@@ -1,4 +1,5 @@
-import { StzhBreadcrumbItem } from "../../index";
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhBreadcrumbItem, StzhBreadcrumbItemClickEvent } from "../../index";
 import { StzhBreadcrumbLocalizedText } from "./stzh-breadcrumb.localization";
 /**
  * @slot - Slot for e.g. image or video
@@ -16,6 +17,8 @@ export declare class StzhBreadcrumb {
   element: HTMLStzhBreadcrumbElement;
   itemsWatcher(newValue: StzhBreadcrumbItem[] | string): void;
   expandedWatcher(): void;
+  /** Item click event */
+  stzhItemClick: EventEmitter<StzhBreadcrumbItemClickEvent>;
   hasHiddenItems: boolean;
   private navElement;
   private itemSizes;
@@ -23,6 +26,7 @@ export declare class StzhBreadcrumb {
   private resizeObserver;
   private debounceResizeItems;
   private resizeItemsObserver;
+  private handleClick;
   private updateContainer;
   private updateItems;
   private handleContainerResize;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { StzhButtonFocusEvent, StzhButtonBlurEvent, StzhButtonChangeEvent, StzhButtonSize, StzhButtonVariant, StzhBadgeType } from "../../index";
+import { StzhButtonFocusEvent, StzhButtonBlurEvent, StzhButtonChangeEvent, StzhButtonSize, StzhButtonVariant, StzhBadgeType, StzhButtonClickEvent } from "../../index";
 import { StzhLocaleComponent } from "../../utils/translation-utils";
 /**
  * @slot - Slot for label/text content
@@ -22,13 +22,13 @@ export declare class StzhButton {
   rounded: boolean;
   /** Size variant */
   size: StzhButtonSize;
-  /** Size variant (abobe small breakpoint) */
+  /** Size variant (above small breakpoint) */
   sizeSmall: StzhButtonSize;
-  /** Size variant (abobe medium breakpoint) */
+  /** Size variant (above medium breakpoint) */
   sizeMedium: StzhButtonSize;
-  /** Size variant (abobe large breakpoint) */
+  /** Size variant (above large breakpoint) */
   sizeLarge: StzhButtonSize;
-  /** Size variant (abobe ultra breakpoint) */
+  /** Size variant (above ultra breakpoint) */
   sizeUltra: StzhButtonSize;
   /** Text alignment */
   textAlign: "left" | "center" | "right" | "space-between" | "default";
@@ -98,12 +98,14 @@ export declare class StzhButton {
   analyticsId: string;
   element: HTMLStzhButtonElement;
   resetListener(event: Event): void;
-  /** Input focus event */
+  /** Focus event */
   stzhFocus: EventEmitter<StzhButtonFocusEvent>;
-  /** Input blur event */
+  /** Blur event */
   stzhBlur: EventEmitter<StzhButtonBlurEvent>;
   /** Change event (only called if type is radio) */
   stzhChange: EventEmitter<StzhButtonChangeEvent>;
+  /** Click event */
+  stzhClick: EventEmitter<StzhButtonClickEvent>;
   private button;
   private input;
   private text;

package/dist/types/components/stzh-card-searchresult/stzh-card-searchresult.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { StzhCardSearchresultClickEvent, StzhBreadcrumbItem, StzhLocaleAdapter } from "../../index";
-import { StzhCardSearchresultLocalizedText } from './stzh-card-searchresult.localization';
+import { StzhCardSearchresultClickEvent, StzhBreadcrumbItem, StzhDatalistItemEntry, StzhLocaleAdapter } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
 /**
  * @slot heading - Heading text (alternative for heading property)
  * @slot description - Description text (alternative for description property)
@@ -8,7 +8,7 @@ import { StzhCardSearchresultLocalizedText } from './stzh-card-searchresult.loca
  */
 export declare class StzhCardSearchresult {
   /** Translation strings */
-  localization: StzhCardSearchresultLocalizedText;
+  localization: StzhLocaleComponent;
   /** Href of card */
   href: string;
   /** target if the button is used as link (if href used)  */
@@ -27,10 +27,12 @@ export declare class StzhCardSearchresult {
   headingLevel: "1" | "2" | "3" | "4";
   /** Description text (alternative for description slot) */
   description: string;
-  /** Tag left */
-  tagLeft: string;
-  /** Tag right */
-  tagRight: string;
+  /** Tag */
+  tag: string;
+  /** Topic */
+  topic: string;
+  /** Service */
+  service: string;
   /** Dateline */
   dateline: string;
   /** Meta */
@@ -38,7 +40,8 @@ export declare class StzhCardSearchresult {
   private _meta;
   /** Breadcrumb items */
   breadcrumbItems: StzhBreadcrumbItem[] | string;
-  private _breadcrumbItems;
+  /** Datalist items */
+  datalistItems: StzhDatalistItemEntry[] | string;
   /** Event start date */
   eventDateStart: Date | string;
   /** Event start date */
@@ -62,7 +65,6 @@ export declare class StzhCardSearchresult {
   /** Click event (if href is used) */
   stzhClick: EventEmitter<StzhCardSearchresultClickEvent>;
   metaWatcher(newValue: string | string[]): void;
-  breadcrumbItemsWatcher(newValue: string | StzhBreadcrumbItem[]): void;
   downloadMetaWatcher(newValue: string | string[]): void;
   private headingLinkElement;
   private headingTextElement;

package/dist/types/components/stzh-card-superteaser/stzh-card-superteaser.d.ts

@@ -0,0 +1,75 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhCardSuperteaserClickEvent, StzhBreadcrumbItem, StzhDatalistItemEntry, StzhLocaleAdapter } from "../../index";
+import { StzhCardSuperteaserLocalizedText } from './stzh-card-superteaser.localization';
+/**
+ * @slot heading - Heading text (alternative for heading property)
+ * @slot description - Description text (alternative for description property)
+ * @slot image - Image
+ */
+export declare class StzhCardSuperteaser {
+  /** Translation strings */
+  localization: StzhCardSuperteaserLocalizedText;
+  /** Href of card */
+  href: string;
+  /** target if the button is used as link (if href used)  */
+  target: string;
+  /** Download attribute (if href is used) */
+  download: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the link elements.
+   * Default value will be taken from `heading` prop/slot.
+   */
+  analyticsId: string;
+  /** Heading (alternative for heading slot) */
+  heading: string;
+  /** Heading level */
+  headingLevel: "1" | "2" | "3" | "4";
+  /** Description text (alternative for description slot) */
+  description: string;
+  /** Tag */
+  tag: string;
+  /** Topic */
+  topic: string;
+  /** Service */
+  service: string;
+  /** Dateline */
+  dateline: string;
+  /** Meta */
+  meta: string[] | string;
+  private _meta;
+  /** Breadcrumb items */
+  breadcrumbItems: StzhBreadcrumbItem[] | string;
+  /** Datalist items */
+  datalistItems: StzhDatalistItemEntry[] | string;
+  /** Event start date */
+  eventDateStart: Date | string;
+  /** Event start date */
+  eventDateEnd: Date | string;
+  /** Event location */
+  eventLocation: string;
+  /** Image position */
+  imagePosition: "default" | "right";
+  /** Download heading */
+  downloadHeading: string;
+  /** Download meta */
+  downloadMeta: string[] | string;
+  private _downloadMeta;
+  /**
+   * 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;
+  element: HTMLStzhListElement;
+  /** Click event (if href is used) */
+  stzhClick: EventEmitter<StzhCardSuperteaserClickEvent>;
+  metaWatcher(newValue: string | string[]): void;
+  downloadMetaWatcher(newValue: string | string[]): void;
+  private headingLinkElement;
+  private headingTextElement;
+  private handleCardClick;
+  componentDidRender(): void;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

package/dist/types/components/stzh-card-superteaser/stzh-card-superteaser.localization.d.ts

@@ -0,0 +1,2 @@
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+export type StzhCardSuperteaserLocalizedText = StzhLocaleComponent & {};

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

@@ -23,6 +23,14 @@ export declare class StzhChip {
   variant: StzhChipVariant;
   /** Size */
   size: StzhChipSize;
+  /** Size variant (above small breakpoint) */
+  sizeSmall: StzhChipSize;
+  /** Size variant (above medium breakpoint) */
+  sizeMedium: StzhChipSize;
+  /** Size variant (above large breakpoint) */
+  sizeLarge: StzhChipSize;
+  /** Size variant (above ultra breakpoint) */
+  sizeUltra: StzhChipSize;
   /** Type */
   type: StzhChipType;
   /** Counter */

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

@@ -14,15 +14,19 @@ export declare class StzhChipselect {
   /** The list of chips */
   data: string | StzhChipselectItem[];
   private _data;
-  private _dataDropdown;
   /** The name of the input element */
   name: string;
   /** Label */
   label: string;
+  /** Whether label is hidden. */
+  labelHidden: boolean;
+  /** Multiple */
+  multiple: boolean;
   /** Value */
-  value: string;
+  value: string | string[];
+  private _value;
   /** Default value (used by reset) */
-  defaultValue: string;
+  defaultValue: string | string[];
   /** Description message (use description slot as alternative) */
   description: string;
   /** Long description message appearing in a popover (use description-long slot as alternative) */
@@ -47,6 +51,7 @@ export declare class StzhChipselect {
   /** Change event */
   stzhChange: EventEmitter<StzhChipselectChangeEvent>;
   resetListener(event: Event): void;
+  valueWatcher(newValue: string[] | string): void;
   dataWatcher(newValue: StzhChipselectItem[] | string): void;
   errorWatcher(newValue: string | string[]): void;
   private id;
@@ -54,7 +59,6 @@ export declare class StzhChipselect {
   private waitForNextRender;
   private handleReset;
   private handleChipClick;
-  private handleDropdownChange;
   private handleKeydown;
   componentDidRender(): void;
   componentWillLoad(): Promise<void>;

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

@@ -19,6 +19,8 @@ export declare class StzhContact {
   headingLevel: "1" | "2" | "3" | "4";
   /** Name */
   name: string;
+  /** Name heading level */
+  nameHeadingLevel: "" | "1" | "2" | "3" | "4";
   /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */
   address: string;
   /** Street */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { StzhCtaFocusEvent, StzhCtaBlurEvent } from "../../index";
+import { StzhCtaFocusEvent, StzhCtaBlurEvent, StzhCtaClickEvent } from "../../index";
 /**
  * @slot heading - Slot for heading as alternative for attribute
  * @slot lead - Slot for lead as alternative for attribute
@@ -22,10 +22,12 @@ export declare class StzhCta {
   stickyDisabled: boolean;
   loaded: boolean;
   element: HTMLStzhCtaElement;
-  /** Input focus event */
+  /** Focus event */
   stzhFocus: EventEmitter<StzhCtaFocusEvent>;
-  /** Input blur event */
+  /** Blur event */
   stzhBlur: EventEmitter<StzhCtaBlurEvent>;
+  /** Click event */
+  stzhClick: EventEmitter<StzhCtaClickEvent>;
   private button;
   private placeholderButton;
   private debounceResize;
@@ -34,6 +36,7 @@ export declare class StzhCta {
   private onRootFocus;
   private onFocus;
   private onBlur;
+  private onClick;
   private handlePlaceholderButtonResize;
   private updateButtonWidthByResize;
   componentDidLoad(): void;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { StzhDatalistItemActionClickEvent, StzhDatalistVariant, StzhDatalistDirection, StzhStatusType } from "../../index";
+import { StzhDatalistItemActionClickEvent, StzhDatalistVariant, StzhDatalistDirection, StzhStatusType, StzhDatalistItemClickEvent } from "../../index";
 import { StzhLocaleComponent } from "../../utils/translation-utils";
 /**
  * @slot - Slot for nested datalist
@@ -20,6 +20,8 @@ export declare class StzhDatalistItem {
   leadingIcon: string;
   /** Icon of action button (if href is used, will only be for presentation) */
   icon: string;
+  /** Icon position */
+  iconPosition: "left" | "right";
   /** 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. */
@@ -43,6 +45,8 @@ export declare class StzhDatalistItem {
   a11yControls: string;
   /** Item action click event */
   stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;
+  /** Item click event */
+  stzhClick: EventEmitter<StzhDatalistItemClickEvent>;
   element: HTMLStzhDatalistItemElement;
   metaWatcher(newValue: string[] | string): void;
   externalWatcher(): void;
@@ -53,7 +57,8 @@ export declare class StzhDatalistItem {
   private isPhone;
   private datalist;
   private datalistItemId;
-  private actionClick;
+  private onActionClick;
+  private onClick;
   private handleDirectionChange;
   private handleVariantChange;
   private renderInner;

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

@@ -0,0 +1,26 @@
+import { StzhDaterangeRanges } from "../../index";
+import { StzhDaterangeLocalizedText } from "./stzh-daterange.localization";
+/**
+ * @slot from - Slot for datepicker
+ * @slot to - Slot for datepicker
+ */
+export declare class StzhDaterange {
+  /** Translation strings */
+  localization: StzhDaterangeLocalizedText;
+  /** Legend */
+  legend: string;
+  /** Range links (current predefined available ranges: "today", "tomorrow", "next7days") */
+  rangeLinks: string | StzhDaterangeRanges[];
+  private _rangeLinks;
+  element: HTMLStzhDaterangeElement;
+  rangeLinksWatcher(newValue: StzhDaterangeRanges[] | string): void;
+  private observer;
+  private datefromElement;
+  private datetoElement;
+  private handleRangeClick;
+  componentWillLoad(): Promise<void>;
+  private init;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,9 @@
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+export type StzhDaterangeLocalizedText = StzhLocaleComponent & {
+  legend: string;
+  labelFrom: string;
+  labelTo: string;
+  rangeToday: string;
+  rangeTomorrow: string;
+  rangeNextSevenDays: string;
+};

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

@@ -82,16 +82,16 @@ export declare class StzhDropdown {
   /** Current open state (readonly) */
   isOpen: boolean;
   /** Variant */
-  variant: "default" | "plain";
+  variant: "default" | "plain" | "filter";
   /** Size variant */
   size: StzhDropdownSize;
-  /** Size variant (abobe small breakpoint) */
+  /** Size variant (above small breakpoint) */
   sizeSmall: StzhDropdownSize;
-  /** Size variant (abobe medium breakpoint) */
+  /** Size variant (above medium breakpoint) */
   sizeMedium: StzhDropdownSize;
-  /** Size variant (abobe large breakpoint) */
+  /** Size variant (above large breakpoint) */
   sizeLarge: StzhDropdownSize;
-  /** Size variant (abobe ultra breakpoint) */
+  /** Size variant (above ultra breakpoint) */
   sizeUltra: StzhDropdownSize;
   /** Whether the dropdown is disabled */
   disabled: boolean;

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

@@ -1,8 +1,10 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { StzhDropdownOption, StzhHeaderMetanavItemClickEvent, StzhHeaderLanguageChangeEvent, StzhHeaderSearchChangeEvent, StzhHeaderSearchChangedEvent, StzhHeaderMenuItem, StzhHeaderMetanavItem } from "../../index";
+import { StzhDropdownOption, StzhHeaderMetanavItemClickEvent, StzhHeaderLanguageChangeEvent, StzhHeaderSearchChangeEvent, StzhHeaderSearchChangedEvent, StzhHeaderMenuItem, StzhHeaderMetanavItem, StzhHeaderMenuItemClickEvent } from "../../index";
 import { StzhHeaderLocalizedText } from './stzh-header.localization';
 /**
  * @slot logo - Slot for brand logo
+ * @slot menu-before - Slot for custom elements before other menu elements
+ * @slot menu-after - Slot for custom elements after other menu elements
  * @slot metanav-before - Slot for custom elements before other metanav elements
  * @slot metanav-after - Slot for custom elements after other metanav elements
  */
@@ -48,7 +50,7 @@ export declare class StzhHeader {
   /** Search input value */
   searchValue: string;
   /** Sticky behaviour */
-  sticky: "default" | "disabled" | "always";
+  sticky: "default" | "disabled" | "always-full" | "always";
   /**
    * For Adobe Analytics.
    * Will be rendered as value of `s-object-id` attribute to the logo link element.
@@ -77,6 +79,8 @@ export declare class StzhHeader {
   scrollListener(): void;
   /** Metanav item click event */
   stzhMetanavItemClick: EventEmitter<StzhHeaderMetanavItemClickEvent>;
+  /** Metanav item click event */
+  stzhMenuItemClick: EventEmitter<StzhHeaderMenuItemClickEvent>;
   /** Language change event */
   stzhLanguageChange: EventEmitter<StzhHeaderLanguageChangeEvent>;
   /** Search input change event */
@@ -111,7 +115,7 @@ export declare class StzhHeader {
   private lastOpener;
   private flyoutOpenedByMetanavItem;
   private trap;
-  private parentElement;
+  private _parentElement;
   private getSiblings;
   private disableSiblings;
   private enableSiblings;
@@ -127,6 +131,7 @@ export declare class StzhHeader {
   private handleBurgerClick;
   private handleBackdropClick;
   private handleMetanavItemClick;
+  private handleMenuItemClick;
   private handleSearchInput;
   private handleSearchChange;
   private handleLanguageClick;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { StzhLinkFocusEvent, StzhLinkBlurEvent, StzhLinkSize, StzhBadgeType } from "../../index";
+import { StzhLinkFocusEvent, StzhLinkBlurEvent, StzhLinkSize, StzhBadgeType, StzhLinkClickEvent } from "../../index";
 import { StzhLocaleComponent } from "../../utils/translation-utils";
 /**
  * @slot - Slot for text content
@@ -16,13 +16,13 @@ export declare class StzhLink {
   height: "default" | "auto";
   /** Size variant */
   size: StzhLinkSize;
-  /** Size variant (abobe small breakpoint) */
+  /** Size variant (above small breakpoint) */
   sizeSmall: StzhLinkSize;
-  /** Size variant (abobe medium breakpoint) */
+  /** Size variant (above medium breakpoint) */
   sizeMedium: StzhLinkSize;
-  /** Size variant (abobe large breakpoint) */
+  /** Size variant (above large breakpoint) */
   sizeLarge: StzhLinkSize;
-  /** Size variant (abobe ultra breakpoint) */
+  /** Size variant (above ultra breakpoint) */
   sizeUltra: StzhLinkSize;
   /** href attribute of the link */
   href: string;
@@ -81,6 +81,8 @@ export declare class StzhLink {
    */
   analyticsId: string;
   element: HTMLStzhLinkElement;
+  /** Click event */
+  stzhClick: EventEmitter<StzhLinkClickEvent>;
   /** Focus event */
   stzhFocus: EventEmitter<StzhLinkFocusEvent>;
   /** Input blur event */
@@ -91,6 +93,7 @@ export declare class StzhLink {
   private onRootFocus;
   private onFocus;
   private onBlur;
+  private onClick;
   private renderIcon;
   private renderContent;
   private renderInner;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { StzhMenuItemFocusEvent, StzhMenuItemBlurEvent, StzhBadgeType, StzhMenuSize, StzhMenuVariant } from "../../index";
+import { StzhMenuItemFocusEvent, StzhMenuItemBlurEvent, StzhMenuItemClickEvent, StzhBadgeType, StzhMenuSize, StzhMenuVariant } from "../../index";
 /**
  * @slot - Slot for any content
  * @slot icon - Slot for `stzh-icon` element
@@ -40,14 +40,17 @@ export declare class StzhMenuItem {
   element: HTMLStzhMenuItemElement;
   /** Focus event */
   stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;
-  /** Input blur event */
+  /** Blur event */
   stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;
+  /** Click event */
+  stzhClick: EventEmitter<StzhMenuItemClickEvent>;
   private menuItem;
   private text;
   private focusedByInput;
   private onRootFocus;
   private onFocus;
   private onBlur;
+  private onClick;
   componentDidRender(): void;
   private renderInner;
   render(): any;

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

@@ -13,6 +13,10 @@ export declare class StzhSearch {
   autofetchMainFilters: boolean;
   /** Whether search results should be automatically fetched when a aside filters has changed. */
   autofetchAsideFilters: boolean;
+  /** Whether to hide the main filters slot */
+  hideMainFilters: boolean;
+  /** Whether to hide the aside filters slot */
+  hideAsideFilters: boolean;
   /** API URL */
   api: string;
   /** Debounce time in ms */
@@ -47,6 +51,7 @@ export declare class StzhSearch {
   totalCount: number;
   private _showMoreLink;
   loading: boolean;
+  error: string;
   results: StzhSearchResult[];
   resultsHeading: string;
   hasRequiredParams: boolean;

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

@@ -1,6 +1,6 @@
 import { StzhLocaleComponent } from "../../utils/translation-utils";
 export type StzhSearchLocalizedText = StzhLocaleComponent & {
   showMore: string;
-  noResults: string;
   moreFilter: string;
+  error: string;
 };