@oiz/stzh-components 2.12.0-beta1 → 2.12.0-beta2

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

@@ -0,0 +1,35 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhAccordionItemOpenEvent, StzhAccordionItemOpenedEvent, StzhAccordionItemCloseEvent, StzhAccordionItemClosedEvent } from "../../index";
+/**
+ * @slot - Slot for trigger
+ * @slot content - Slot for any content
+ */
+export declare class StzhDetails {
+  /** Whether fold is open */
+  open: boolean;
+  element: HTMLStzhDetailsElement;
+  /** Open event */
+  stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;
+  /** Opened event (after animation) */
+  stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;
+  /** Close event */
+  stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;
+  /** Closed event (after animation) */
+  stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;
+  openWatcher(newValue: boolean): Promise<void>;
+  private toggledByMethod;
+  private bodyElement;
+  private detailsId;
+  /** Show accordion item content */
+  show(): Promise<void>;
+  /** Hide accordion item content */
+  hide(): Promise<void>;
+  toggle(): Promise<void>;
+  private triggerElement;
+  private onClickTrigger;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,64 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhDialogOpenEvent, StzhDialogCloseEvent } from "../../index";
+import { StzhDialogLocalizedText } from "./stzh-dialog.localization";
+/**
+ * @slot - Slot for any content inside the dialog
+ */
+export declare class StzhDialog {
+  /** Translation strings */
+  localization: StzhDialogLocalizedText;
+  /** Close dialog when pressing ESC */
+  closeOnEscapeKey: boolean;
+  /** Close dialog when clicking outside of it */
+  closeOnBackdropClick: boolean;
+  /** Open status */
+  open: boolean;
+  /** Stay in original position (true) or move to body (false) */
+  stay: boolean;
+  /** Size */
+  size: "default" | "small";
+  /** Whether to hide close button */
+  hideClose: boolean;
+  /** Heading text */
+  heading: string;
+  /** Accessibility role */
+  a11yRole: "dialog" | "alertdialog";
+  /** Accessible label for dialog (use if no heading is used) */
+  a11yLabel: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the close button element.
+   * Default value will be taken from translations.
+   */
+  closeAnalyticsId: string;
+  /** Dialog open event */
+  stzhOpen: EventEmitter<StzhDialogOpenEvent>;
+  /** Dialog close event */
+  stzhClose: EventEmitter<StzhDialogCloseEvent>;
+  element: HTMLStzhDialogElement;
+  handleOutsideClick(event: MouseEvent): void;
+  handleKeydown(event: KeyboardEvent): void;
+  handleOpenTriggerClick(event: MouseEvent): void;
+  show(): Promise<void>;
+  hide(): Promise<void>;
+  private observer;
+  private id;
+  private trap;
+  private parentElement;
+  private dialogElement;
+  private handleDialogClick;
+  private handleCloseButtonClick;
+  private init;
+  private getSiblings;
+  private disableSiblings;
+  private enableSiblings;
+  private dialogShown;
+  private dialogHidden;
+  componentWillLoad(): Promise<void>;
+  componentDidRender(): void;
+  componentDidUpdate(): void;
+  componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,173 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhDropdownOption, StzhDropdownChangeEvent, StzhDropdownItemAddEvent, StzhDropdownItemRemoveEvent, StzhDropdownOptionAddEvent, StzhDropdownOptionRemoveEvent, StzhDropdownOpenEvent, StzhDropdowCloseEvent, StzhDropdownFocusEvent, StzhDropdownBlurEvent, StzhDropdowInitEvent } from "../../index";
+import { StzhDropdownLocalizedText } from './stzh-dropdown.localization';
+/**
+ * @slot label - Slot for label content
+ * @slot description - Slot for description
+ * @slot description-long - Slot for long description (in popover)
+ * @slot icon - Slot for left icon
+ * @slot icon-angle - Slot for angle icon
+ * @slot error - Slot for error
+ */
+export declare class StzhDropdown {
+  /** Available options */
+  options: StzhDropdownOption[] | string;
+  private _options;
+  /**
+   * Option groups that options will be bucketed into.
+   * Make sure each object in the array has a property named whatever `optgroupValueField` is set to.
+   */
+  optgroups: any[] | string;
+  private _optgroups;
+  /**
+   * Set selected options. Can be array set with JS or as JSON string.
+   * To get the current (user) selected options, use `getItems` method.
+   */
+  items: string[] | string;
+  private _items;
+  /**
+   * An array of property names to analyze when filtering options.
+   * Weights can be given to each field to improve search result:
+   * `[{"field":"text","weight":2},{"field":"text2","weight":0.5}]`
+   */
+  searchField: string[] | string;
+  private _searchField;
+  /** Whether multiple items option can be selected */
+  multiple: boolean;
+  /** Show inline (auto width) */
+  inline: boolean;
+  /** The max number of options to display in the dropdown. Set to `null` for an unlimited number of options. */
+  maxOptions: number | null;
+  /** When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' */
+  searchConjunction: "and" | "or";
+  /**  If true, any options with a "" value will be treated like a normal option. This defaults to false to accommodate the common <select> practice of having the first empty option to act as a placeholder. */
+  allowEmptyOption: boolean;
+  /** Show the dropdown immediately when the control receives focus. */
+  openOnFocus: boolean;
+  /** After a selection is made, the dropdown will remain open if in a multi-selection control or will close in a single-selection control. Setting closeAfterSelect to true will force the dropdown to close after selections are made. Setting closeAfterSelect to false will keep the dropdown open after selections are made. */
+  closeAfterSelect: boolean | null;
+  /** Invoked when new options should be loaded from the server. Called with the current query string and a callback function to call with the results when they are loaded (or nothing when an error arises). */
+  load: (query: string, callback: Function) => any[] | null;
+  /** Minimum of characters required to execute the `load` function */
+  minCharacters: number;
+  /** The number of milliseconds to wait before requesting options from the server or null. If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression. */
+  loadThrottle: number;
+  /** If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus. */
+  preload: boolean | "focus";
+  /** The name of the property to render as an option / item label (not needed when custom rendering functions are defined). */
+  labelField: string;
+  /** The name of the property to use as the value when an item is selected. */
+  valueField: string;
+  /** The name of the property to group items by. */
+  optgroupField: string;
+  /** The name of the property to render as an option group label (not needed when custom rendering functions are defined). */
+  optgroupLabelField: string;
+  /** The name of the option group property that serves as its unique identifier. */
+  optgroupValueField: string;
+  /** If truthy, all optgroups will be displayed in the same order as they were added (by the `$order` property). Otherwise, it will order based on the score of the results in each. */
+  lockOptgroupOrder: true;
+  /** Name of hidden select element */
+  name: string;
+  /** Initial open state */
+  open: boolean;
+  /** Current open state (readonly) */
+  isOpen: boolean;
+  /** Variant */
+  variant: "default" | "plain";
+  /** Size variant */
+  size: "default" | "small";
+  /** Whether the dropdown is disabled */
+  disabled: boolean;
+  /** Popover placement */
+  popoverPlacement: "bottom" | "bottom-end" | "bottom-center" | "top" | "top-end" | "top-center";
+  /** Label */
+  label: string;
+  /** Whether label should be visually hidden. */
+  labelHidden: boolean;
+  /** Icon (use instead of icon slot) */
+  icon: string;
+  /** Angle icon */
+  iconAngle: string;
+  /** Prevent option search */
+  noSearch: boolean;
+  /** Prevent backspace delete */
+  noBackspaceDelete: boolean;
+  /** Invalid status */
+  invalid: boolean;
+  /** Required status */
+  required: boolean;
+  /** Show text in label depending if field is optional/required */
+  showMarker: 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[];
+  private _error;
+  /** Translation strings */
+  localization: StzhDropdownLocalizedText;
+  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+  a11yDescribedby: string;
+  optionsWatcher(newValue: any[] | string): void;
+  itemsWatcher(newValue: string[] | string): void;
+  searchFieldWatcher(newValue: string[] | string): void;
+  optgroupsWatcher(newValue: any[] | string): void;
+  errorWatcher(newValue: string | string[]): void;
+  element: HTMLStzhDropdownElement;
+  /**
+   * Returns the value of the control.
+   * If multiple items can be selected,
+   * this returns an array, otherwise a string.
+  */
+  getValue(): Promise<string | string[]>;
+  /** Set new value */
+  setValue(newValue: string | string[], silent?: boolean): Promise<void>;
+  /** Focus select */
+  setFocus(): Promise<void>;
+  /** Reset loaded/cached search queries (calls from load property function) */
+  resetLoadedSearches(): Promise<void>;
+  /** Return loaded/cached search queries (calls from load property function) */
+  getLoadedSearches(): Promise<any>;
+  /** Return current selected items */
+  getItems(): Promise<any>;
+  /** Load items by calling load property/function */
+  loadItems(query: string): Promise<any>;
+  /** Show dropdown popover */
+  show(): Promise<any>;
+  /** Hide dropdown popover */
+  hide(): Promise<any>;
+  /** Dropdown change event */
+  stzhChange: EventEmitter<StzhDropdownChangeEvent>;
+  /** Dropdown item added event */
+  stzhItemAdd: EventEmitter<StzhDropdownItemAddEvent>;
+  /** Dropdown item removed event */
+  stzhItemRemove: EventEmitter<StzhDropdownItemRemoveEvent>;
+  /** Dropdown option added event */
+  stzhOptionAdd: EventEmitter<StzhDropdownOptionAddEvent>;
+  /** Dropdown option removed event */
+  stzhOptionRemove: EventEmitter<StzhDropdownOptionRemoveEvent>;
+  /** Dropdown open event */
+  stzhOpen: EventEmitter<StzhDropdownOpenEvent>;
+  /** Dropdown close event */
+  stzhClose: EventEmitter<StzhDropdowCloseEvent>;
+  /** Dropdown focus event */
+  stzhFocus: EventEmitter<StzhDropdownFocusEvent>;
+  /** Dropdown blur event */
+  stzhBlur: EventEmitter<StzhDropdownBlurEvent>;
+  /** Dropdown focus event */
+  stzhInit: EventEmitter<StzhDropdowInitEvent>;
+  private tomSelect;
+  private select;
+  private rootElement;
+  private dropdownId;
+  private focusedByInput;
+  private updateFilled;
+  private onRootFocus;
+  componentWillLoad(): Promise<void>;
+  componentShouldUpdate(_newValue: any, _oldValue: any, prop: string): boolean;
+  componentWillUpdate(): Promise<void>;
+  componentDidRender(): Promise<void>;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,21 @@
+/**
+ * @slot - Slot for e.g. image or video
+ * @slot caption - Slot for a caption as alternative for attribute
+ * @slot copyright - Slot for a copyright as alternative for attribute
+ * @slot counter - Slot for a counter as alternative for attribute
+ * @slot heading - Slot for a heading as alternative for attribute
+ */
+export declare class StzhFigure {
+  /** Caption */
+  caption: string;
+  /** Copyright */
+  copyright: string;
+  /** Counter */
+  counter: string;
+  /** Heading */
+  heading: string;
+  /** Whether to stretch slotted content to fullwidth */
+  fullwidth: boolean;
+  element: HTMLStzhFigureElement;
+  render(): any;
+}

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

@@ -0,0 +1,35 @@
+import { StzhFocusEvent } from "../../index";
+export declare class StzhFlyingfocus {
+  element: HTMLStzhFlyingfocusElement;
+  style: {};
+  position: {};
+  enabled: boolean;
+  visible: boolean;
+  helper: boolean;
+  moving: boolean;
+  handleKeydown(e: KeyboardEvent): void;
+  handleMousedown(): void;
+  handleFocus(e: FocusEvent | CustomEvent<StzhFocusEvent>): void;
+  handleBlur(): void;
+  handleScrollResize(): void;
+  reposition(): Promise<void>;
+  private target;
+  private container;
+  private previousTargetRect;
+  private monitorElementPositionInterval;
+  private helperFadeTimeout;
+  private debounceScroll;
+  private repositionElement;
+  private handleTransitionEnd;
+  private monitorElementPosition;
+  /**
+   * Get the border radius that the outline element should have:
+   * element border radius + outline width + outline offset
+   */
+  private getOffsetBorderRadius;
+  private resolveTargetOutlineStyle;
+  private getFloaterPosition;
+  private enableFloatingFocus;
+  private disableFloatingFocus;
+  render(): any;
+}

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

@@ -0,0 +1,27 @@
+import { StzhFooterLocalizedText } from './stzh-footer.localization';
+/**
+ * @slot - Slot for content
+ * @slot social-link - Slot for social `stzh-link`
+ * @slot logo - Slot for logo `img`
+ * @slot info - Slot for info content `stzh-link` or `stzh-text` element
+ * @slot link - Slot for `stzh-link` elements
+ */
+export declare class StzhFooter {
+  /** Translation strings */
+  localization: StzhFooterLocalizedText;
+  /** Copyright text (will show default copyright string if undefined) */
+  copyright: string;
+  /** Footer variant */
+  variant: "default" | "egov";
+  /** Main URL for shortlinks */
+  mainUrl: string;
+  /** Whether to display separation border */
+  withBorder: boolean;
+  element: HTMLStzhFooterElement;
+  private observer;
+  private init;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,54 @@
+import { StzhGalleryItem } from "../../index";
+import { StzhGalleryLocalizedText } from "./stzh-gallery.localization";
+/**
+ * @slot - Slot for custom content if `variant="custom"` is used, lightbox will query for stzh-figure (this.itemElement) elements
+ */
+export declare class StzhGallery {
+  /** Translation strings */
+  localization: StzhGalleryLocalizedText;
+  /**
+   * Images in gallery.
+   * Array of objects that must at least include `width`, `height` and `src` attribute:
+   * `[{"width": 2522, "height": 1075, "src": "media/images/example.jpg"}, {"width": 2050, "height": 1367, "src": "media/images/example2.jpg"}]`
+   *
+   * Possible other optional properties are:
+   * `alt`: Alternative image description
+   * / `srcLightbox`: `src` for img tag inside lightbox (overwrites `src`)
+   * / `srcsetLightbox`: `srcset` for img tag inside lightbox
+   * / `copyright`: Copyright inside caption
+   * / `heading`: Heading inside caption
+   * / `headingLightbox`: Alternative heading for lightbox (overwrites `heading`)
+   * / `caption`: Caption
+   * / `captionLightbox`: Caption for lightbox (overwrites `caption`)
+   * / `lightboxHtml`: Alternative html content for lightbox caption
+   * / `hideCounter`: Whether to hide counter
+   */
+  images: StzhGalleryItem[] | string;
+  private _images;
+  private _imagesLightboxDataSource;
+  /**
+   * Variant:
+   * `carousel`: every image is displayed inside a carousel (default mode with more than on picture)
+   * / `single`: only one image is shown without carousel functionality (other images only reachable by lightbox)
+   * / `grid`: every image is displayed inside a grid
+   * / `custom`: nothing is rendered, only lightbox will be initialized, `stzh-figure` (`this.itemElement`) can be slotted in
+   */
+  variant: "carousel" | "single" | "grid" | "custom";
+  /** Preview item that will be looked up and mapped to images in lightbox. */
+  itemElement: string;
+  element: HTMLStzhGalleryElement;
+  openLightbox(index?: number): Promise<void>;
+  apploadListener(): void;
+  imagesWatcher(newValue: StzhGalleryItem[] | string): void;
+  private lightbox;
+  private carouselElement;
+  private carouselActionsElement;
+  private openCurrentCarouselSlide;
+  initLightbox(): void;
+  componentWillLoad(): Promise<void>;
+  componentWillUpdate(): Promise<void>;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  private renderFigure;
+  render(): any;
+}

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhGhettoboxOpenEvent, StzhGhettoboxCloseEvent } from "../../index";
+import { StzhGhettoboxLocalizedText } from "./stzh-ghettobox.localization";
+/**
+ * @slot - Slot for description content (use instead of description property)
+ */
+export declare class StzhGhettobox {
+  /** Overwrite hidden h1 title */
+  hiddenTitle: string;
+  /** Main title */
+  mainTitle: string;
+  /** Description */
+  description: string;
+  /** Hide close button */
+  hideClose: boolean;
+  /**
+   * Publish date for ghettobox.
+   * If user hasn't closed it yet or closed before this date
+   * (cookie check), it will be shown.
+   */
+  publishDate: string | Date;
+  private _publishDate;
+  /**
+   * Name of cookie to compare its value with set `publishDate`
+   * to determine if ghettobox was already closed before by the user.
+   * If empty (""), no check is done and ghettobox
+   * will always be shown again after a refresh.
+   * Cookie name will be prefixed with `stzh-components-ghettobox-close-time-`.
+   */
+  closeTimeKey: string;
+  /** Translation strings */
+  localization: StzhGhettoboxLocalizedText;
+  /** Ghettobox open event */
+  stzhOpen: EventEmitter<StzhGhettoboxOpenEvent>;
+  /** Ghettobox close event */
+  stzhClose: EventEmitter<StzhGhettoboxCloseEvent>;
+  element: HTMLStzhGhettoboxElement;
+  /** Open state */
+  open: boolean;
+  publishDateWatcher(newValue: string | Date): void;
+  show(): Promise<void>;
+  hide(setCloseKey?: boolean): Promise<void>;
+  private observer;
+  private onCloseButtonClick;
+  private init;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,68 @@
+/**
+ * @slot logo - Slot for brand logo
+ * @slot nav - Slot for `stzh-metanav` element
+ * @slot login - Slot for login button
+ * @slot appnav - Slot for `stzh-appnav` element
+ * @slot langnav - Slot for `stzh-langnav` element
+ */
+export declare class StzhHeader {
+  /** Portal link (for logo) */
+  href: string;
+  /** Whether grey metabar should stay (on top) on mobile */
+  metabarStay: boolean;
+  /** Whether sticky behaviour should be disabled */
+  stickyDisabled: boolean;
+  /**
+   * Prevent creating a appnav placeholder element
+   * with the size of appnav inside header parent element.
+   * This prevents the fixed appnav to overlap
+   * content at the end on mikro breakpoint,
+   * but could lead to problems with certain layouts.
+   */
+  preventAppnavPlaceholder: boolean;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the logo link element.
+   * Default value is "Header Logo".
+   */
+  logoAnalyticsId: string;
+  hideLogo: boolean;
+  paddingTop: number;
+  metabarTransform: string;
+  sticky: boolean;
+  stickyClosing: boolean;
+  stickyMetabar: boolean;
+  stickyMetabarEnd: boolean;
+  element: HTMLStzhHeaderElement;
+  /** Update position / sticky state of header */
+  updatePosition(): Promise<void>;
+  scrollListener(): void;
+  private scrollTop;
+  private lastScrollTop;
+  private headerOverlap;
+  private scrollingUp;
+  private belowStayStickyPoint;
+  private belowStartStickyPoint;
+  private headerTop;
+  private headerHeight;
+  private innerHeight;
+  private mainHeight;
+  private metabarHeight;
+  private logobarHeight;
+  private appnavHeight;
+  private isSmall;
+  private isSmallheader;
+  private debounceResize;
+  private resizeObserver;
+  private innerElement;
+  private mainElement;
+  private logobarElement;
+  private metabarElement;
+  private appnavElement;
+  private appnavPlaceholderElement;
+  private handleResize;
+  private updateMetabarPosition;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+/**
+ *
+ */
+export declare class StzhHr {
+  element: HTMLStzhHrElement;
+  render(): any;
+}

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

@@ -0,0 +1,60 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhIframeView, StzhIframePreviewSkipEvent, StzhIframeViewChangeEvent } from "../../index";
+import { StzhIframeLocalizedText } from "./stzh-iframe.localization";
+/**
+ * @slot preview-logo - Slot for logo
+ * @slot preview-image - Slot for preview image
+ * @slot cookiewall-text - Slot for cookiewall text
+ */
+export declare class StzhIframe {
+  /** Translation strings */
+  localization: StzhIframeLocalizedText;
+  /** `src` of iframe */
+  src: string;
+  private _src;
+  /**
+   * Cookie name (if not empty, the user will be shown a cookie wall)
+   * Will be prefixed with `stzh-components-iframe-confirm-`.
+   */
+  cookie: string;
+  /**
+   * Number of days the cookie is valid for.
+   * If omitted or set to null, the cookie expires when browser is closed.
+   * Maximum is on year (365 days, is default).
+   */
+  cookieExpires: number | null;
+  /** Confirm button icon */
+  cookieConfirmIcon: string;
+  /** Confirm button label */
+  cookieConfirmLabel: string;
+  /** Confirm text (use instead of `cookiewall-text` slot) */
+  cookieConfirmText: string;
+  /** Preview label */
+  previewLabel: string;
+  /** Preview icon */
+  previewIcon: string;
+  /** Whether preview should be skipped, if user has passed the cookiewall before */
+  skipPreviewIfCookieAccepted: boolean;
+  /** Whether preview should always be skipped */
+  skipPreview: boolean;
+  element: HTMLStzhIframeElement;
+  view: StzhIframeView;
+  /** Preview skip (only gets executed if it goes directly to iframe and not cookiewall) */
+  stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;
+  /** View change */
+  stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;
+  srcWatcher(newValue: string): void;
+  viewWatcher(newValue: StzhIframeView): void;
+  private iframeId;
+  private iframeElement;
+  private previewButtonElement;
+  private confirmButtonElement;
+  private updateFocus;
+  private handleIframeLoad;
+  private handleCookiewallCloseClick;
+  private handleCookiewallConfirmClick;
+  private handlePreviewClick;
+  componentWillLoad(): Promise<void>;
+  componentDidRender(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { StzhImagecomparisonChangeEvent } from "../../index";
+import { StzhImagecomparisonLocalizedText } from "./stzh-imagecomparison.localization";
+/**
+ * @slot image-before - Slot for a before image
+ * @slot image-after - Slot for a after image
+ * @slot hint-left - Slot for a left image hint as alternative for attribute
+ * @slot hint-right - Slot for a right image hint as alternative for attribute
+ */
+export declare class StzhImageComparison {
+  /**  Translation strings. */
+  localization: StzhImagecomparisonLocalizedText;
+  /** Hint left */
+  hintLeft: string;
+  /** Hint right */
+  hintRight: string;
+  /** Width of image before */
+  value: number;
+  /** Overwrite default label */
+  label: string;
+  /** Id for element which describes the label */
+  a11yDescribedby: string;
+  element: HTMLStzhImagecomparisonElement;
+  stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;
+  private inputElement;
+  private handleInput;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}