@oiz/stzh-components 2.11.0-beta1 → 2.11.1

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

@@ -0,0 +1,98 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhMonthyearpickerChangeEvent } from "../../index";
+import { StzhMonthyearpickerLocalizedText } from "./stzh-monthyearpicker.localization";
+/**
+ */
+export declare class StzhMonthyearpicker {
+  /** Initial open state of month dropdown */
+  monthOpen: boolean;
+  /** Initial open state of year dropdown */
+  yearOpen: boolean;
+  /** Set which months to show (overwrites months from min/max) */
+  months: number[] | string;
+  private _months;
+  /** Set which years to show (overwrites years from min/max) */
+  years: number[] | string;
+  private _years;
+  /**
+   * Minimum month and year allowed to be picked in `YYYY-MM` format.
+   * This setting can be used alone or together with the `max` property.
+   */
+  min: string;
+  /**
+   * Maximum month and year allowed to be picked in `YYYY-MM` format.
+   * This setting can be used alone or together with the `min` property.
+   */
+  max: string;
+  /**
+   * Minimum year (will be overwritten if `min` is used).
+   * This setting can be used alone or together with the `maxYear` property.
+   */
+  minYear: number;
+  /**
+   * Maximum year (will be overwritten if `max` is used).
+   * This setting can be used alone or together with the `minYear` property.
+   */
+  maxYear: number;
+  /** Picker format. */
+  format: "default" | "creditcard";
+  /** Name of the hidden date picker input. */
+  name: string;
+  /** Value of hidden input (current selected year and month YYYY-MM). */
+  value: string;
+  /** Popover placement for the dropdown (if applicable) */
+  popoverPlacement: "bottom" | "bottom-end" | "bottom-center" | "top" | "top-end" | "top-center";
+  /** Month dropdown label */
+  monthLabel: string;
+  /** Year dropdown label */
+  yearLabel: string;
+  /** Whether the element is readonly or not */
+  readonly: boolean;
+  /** Whether the element is disabled or not */
+  disabled: 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";
+  /** Description message for month */
+  descriptionMonth: string;
+  /** Description message for year */
+  descriptionYear: string;
+  /** Long description message appearing in a popover for month */
+  descriptionLongMonth: string;
+  /** Long description message appearing in a popover for year */
+  descriptionLongYear: string;
+  /** One or multiple error message for month */
+  errorMonth: string | string[];
+  /** One or multiple error message for year */
+  errorYear: string | string[];
+  /** Invalid status for month */
+  invalidMonth: boolean;
+  /** Invalid status for year */
+  invalidYear: boolean;
+  /** Id of the element which describes the month dropdown */
+  a11yDescribedbyMonth: string;
+  /** Id of the element which describes the year dropdown */
+  a11yDescribedbyYear: string;
+  /**  Translation strings. */
+  localization: StzhMonthyearpickerLocalizedText;
+  /** Monthyearpicker change event */
+  stzhChange: EventEmitter<StzhMonthyearpickerChangeEvent>;
+  element: HTMLStzhMonthyearpickerElement;
+  monthsWatcher(newValue: number[] | string): void;
+  yearsWatcher(newValue: number[] | string): void;
+  minMaxWatcher(): void;
+  private monthsDropdown;
+  private dropdownMonthOptions;
+  private dropdownYearOptions;
+  private onRootFocus;
+  private onMonthsDropdownChange;
+  private onYearsDropdownChange;
+  private onChange;
+  private updateMonthOptions;
+  private updateYearOptions;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,124 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { OlmapLayer, StzhOlmapInitializedEvent, StzhOlmapPostRenderEvent, StzhOlmapMoveStartEvent, StzhOlmapMoveEndEvent } from "../../index";
+import { StzhOlmapLocalizedText } from "./stzh-olmap.localization";
+/**
+ *
+ */
+export declare class StzhOlmap {
+  /** Translation strings */
+  localization: StzhOlmapLocalizedText;
+  /** Hostname */
+  hostname: string;
+  /** Whether map scale should be shown */
+  scaleControl: boolean;
+  /** Whether map layer switch control is shown */
+  layerControl: boolean;
+  /** Whether map should be printable */
+  printControl: boolean;
+  /** Whether map should have a location control */
+  locationControl: boolean;
+  /** Active layer (`streets` or `satellite` can be used with default `layers` prop value) */
+  layer: string;
+  /** Initial zoom */
+  zoom: number;
+  /** Zoom set when location is enabled */
+  zoomLocation: number;
+  /** Initial center position */
+  center: string | [number, number];
+  private _center;
+  /** Whether to display an icon marker in the center */
+  centerMarker: boolean;
+  /** Minimal angle in radians to start a rotation */
+  pinchRotateThreshold: number;
+  /** Resolutions */
+  resolutions: string | number[];
+  private _resolutions;
+  /**
+   * Layers (maximum of two).
+   *
+   * Default layers `streets` and `satellite` are defined.
+   * If `streets` or `satellite` is used as key, they will have a default filled `title`.
+   */
+  layers: string | {
+    [key: string]: OlmapLayer;
+  };
+  private _layers;
+  element: HTMLStzhOlmapElement;
+  layersWatcher(newValue: string | {
+    [key: string]: OlmapLayer;
+  }): void;
+  resolutionsWatcher(newValue: string | number[]): void;
+  zoomWatcher(newValue: any): void;
+  scaleControlWatcher(newValue: boolean): void;
+  printControlWatcher(newValue: boolean): void;
+  layerControlWatcher(newValue: boolean): void;
+  locationControlWatcher(newValue: boolean): void;
+  layerWatcher(newValue: string): void;
+  centerWatcher(newValue: string | [number, number]): void;
+  centerMarkerWatcher(newValue: boolean): Promise<void>;
+  /** Get map */
+  getMap(): Promise<any>;
+  /** Add a icon marker to the icon layer. */
+  addIconMarker(coordinates: number[]): Promise<any>;
+  /** Remove icon marker from icon layer. */
+  removeIconMarker(marker: any): Promise<any>;
+  /** Set icon marker as active. */
+  setIconMarkerActive(marker: any): Promise<void>;
+  /** Set icon marker as inactive. */
+  setIconMarkerInactive(marker: any): Promise<void>;
+  /** Enable user location tracking */
+  enableLocationTracking(centerOnFirstGeoPositionChange?: boolean): Promise<void>;
+  /** Disable user location tracking */
+  disableLocationTracking(): Promise<void>;
+  /** Get distance between two points in meters */
+  getDistance(startCoords: any, endCoords: any): Promise<any>;
+  /** Olmap initialized event */
+  stzhInitialized: EventEmitter<StzhOlmapInitializedEvent>;
+  /** Olmap postrender event */
+  stzhPostRender: EventEmitter<StzhOlmapPostRenderEvent>;
+  /** Olmap movestart event */
+  stzhMoveStart: EventEmitter<StzhOlmapMoveStartEvent>;
+  /** Olmap moveend event */
+  stzhMoveEnd: EventEmitter<StzhOlmapMoveEndEvent>;
+  handleLoad(): void;
+  private map;
+  private mapElement;
+  private geolocation;
+  private printIframe;
+  private layersArray;
+  private rasterLayers;
+  private projections;
+  private positionMarkerOl;
+  private centerMarkerOl;
+  private positionLayer;
+  private iconLayer;
+  private geoPositionChanged;
+  private layerControlOl;
+  private layerControlElement;
+  private layerControlTextElement;
+  private layerControlImageElement;
+  private scaleControlOl;
+  private printControlOl;
+  private printControlElement;
+  private locationControlOl;
+  private locationControlElement;
+  private handlePostRender;
+  private handleMoveStart;
+  private handleMoveEnd;
+  private handleInsideModalOpen;
+  private handlePrintButtonClick;
+  private setLocationControlState;
+  private createMap;
+  private createRasterLayer;
+  private createLayerSource;
+  private creatRasterSource;
+  private createIconLayer;
+  private initMap;
+  componentShouldUpdate(_newValue: any, _oldValue: any, prop: string): boolean;
+  componentWillLoad(): Promise<void>;
+  componentWillUpdate(): void;
+  componentDidRender(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,34 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhOverlayOpenEvent, StzhOverlayCloseEvent } from "../../index";
+/**
+ * @slot - Slot for any content
+ */
+export declare class StzhOverlay {
+  /** Whether overlay is open */
+  open: boolean;
+  /** Stay in original position (true) or move to body (false) */
+  stay: boolean;
+  /** Accessible label for dialog */
+  a11yLabel: string;
+  /** Dialog open event */
+  stzhOpen: EventEmitter<StzhOverlayOpenEvent>;
+  /** Dialog close event */
+  stzhClose: EventEmitter<StzhOverlayCloseEvent>;
+  element: HTMLStzhOverlayElement;
+  show(): Promise<void>;
+  hide(): Promise<void>;
+  private trap;
+  private parentElement;
+  private dialogElement;
+  private getSiblings;
+  private disableSiblings;
+  private enableSiblings;
+  private dialogShown;
+  private dialogHidden;
+  connectedCallback(): void;
+  componentDidRender(): void;
+  componentDidUpdate(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/stzh-page-skiplinks/stzh-page-skiplinks.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @slot - Slot for `stzh-skiplink` elements
+ */
+export declare class StzhPageSkiplinks {
+  element: HTMLStzhMetanavElement;
+  private observer;
+  private init;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,29 @@
+import { ShareService } from "../../index";
+/**
+ * @slot logo - Slot for a logo image
+ */
+export declare class StzhPagebottom {
+  /** Share Title */
+  shareTitle: string;
+  /** URL of current site (uses full URL by default) */
+  shareUrl: string;
+  /**
+   * Array of enabled share buttons.
+   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`
+   */
+  shareServices: ShareService[] | string;
+  /** Whether to show share */
+  shareDisabled: boolean;
+  /** Logo href */
+  logoHref: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the logo link element.
+   * Default value will be "Footer Logo"
+   */
+  logoAnalyticsId: string;
+  /** Whether to display border */
+  withBorder: boolean;
+  element: HTMLStzhPagebottomElement;
+  render(): any;
+}

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

@@ -0,0 +1,15 @@
+/**
+ * @slot heading - Slot for `stzh-heading` element
+ * @slot image - Slot for `stzh-figure` or `img` element
+ * @slot lead - Slot for `stzh-text` element
+ * @slot action-left - Slot e.g. for `stzh-readspeaker` or `stzh-link` element
+ * @slot action-right - Slot e.g. for `stzh-readspeaker` or `stzh-link` element
+ */
+export declare class StzhPagetitle {
+  element: HTMLStzhPagetitleElement;
+  private observer;
+  private init;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/stzh-pagetitle-hero/stzh-pagetitle-hero.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @slot image - Slot for `picture` or `img` element
+ * @slot lead - Slot for `stzh-text` element
+ * @slot back-link - Slot for `stzh-link` element
+ */
+export declare class StzhPagetitleHero {
+  /** Heading */
+  heading: string;
+  /** Lead author */
+  leadAuthor: string;
+  /** Subtitle */
+  subtitle: string;
+  element: HTMLStzhPagetitleHeroElement;
+  private fitty;
+  private mainTitleElement;
+  private observer;
+  private destroyFitty;
+  private init;
+  private reinitFitty;
+  componentWillUpdate(): Promise<void>;
+  componentDidRender(): Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,52 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhPaginationChangeEvent } from "../../index";
+import { StzhPaginationLocalizedText } from "./stzh-pagination.localization";
+/**
+ */
+export declare class StzhPagination {
+  /** Total pages available. */
+  total: number;
+  /** Name of the hidden date picker input. */
+  name: string;
+  /** Current page. */
+  value: number;
+  /** Label for dropdown */
+  label: string;
+  /** Whether label is 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";
+  /** Id of the element which describes the input */
+  a11yDescribedby: string;
+  /**  Translation strings. */
+  localization: StzhPaginationLocalizedText;
+  /** Pagination change event */
+  stzhChange: EventEmitter<StzhPaginationChangeEvent>;
+  element: HTMLStzhPaginationElement;
+  /** Set current page to previous */
+  prev(): Promise<void>;
+  /** Set current page to next */
+  next(): Promise<void>;
+  private input;
+  private gotoPage;
+  private onRootFocus;
+  private onInputChange;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,74 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { PanoramaScene, StzhPanoramaLoadEvent, StzhPanoramaChangeEvent, StzhPanoramaFullscreenChangeEvent, StzhPanoramaSceneChangeEvent, StzhPanoramaZoomChangeEvent } from "../../index";
+import { StzhPanoramaLocalizedText } from "./stzh-panorama.localization";
+import "pannellum";
+/**
+ *
+ */
+export declare class StzhPanorama {
+  /** Translation strings */
+  localization: StzhPanoramaLocalizedText;
+  /** Caption */
+  caption: string;
+  /** Copyright */
+  copyright: string;
+  /** Current scene */
+  scene: string;
+  /** Fade duration on scene change */
+  sceneFadeDuration: number;
+  /** Whether to autoload panorama on pageload */
+  autoload: boolean;
+  /** If set to true, device orientation control will be used when the panorama is loaded, if the device supports it. If false, device orientation control needs to be activated by pressing a button. */
+  orientationOnByDefault: boolean;
+  /**
+   * Available scenes
+   *
+   * An array of objects including `sceneId`, `imageTitle`, `imageSrc`, optionally `imageAuthor`, `imageType`, `caption`, `pitch`, `yaw`, `hfov` and `hotspots`
+   * `hotspots` can be an array of objects including `pitch`, `yaw`, `type`, `text`, optionally `url`, `id`, `sceneId`, `targetPitch` and `targetYaw`
+   *
+   * See also https://pannellum.org/documentation/reference/
+   */
+  scenes: PanoramaScene[] | string;
+  private _scenes;
+  private _scenesLibrary;
+  element: HTMLStzhFigureElement;
+  /** Get viewer instance */
+  getViewer(): Promise<any>;
+  scenesWatcher(newValue: PanoramaScene[] | string): void;
+  sceneWatcher(newValue: string): void;
+  updateWatcher(): void;
+  /** Load event */
+  stzhLoad: EventEmitter<StzhPanoramaLoadEvent>;
+  /** Change event */
+  stzhChange: EventEmitter<StzhPanoramaChangeEvent>;
+  /** Fullscreen change event */
+  stzhFullscreenChange: EventEmitter<StzhPanoramaFullscreenChangeEvent>;
+  /** Scene change event */
+  stzhSceneChange: EventEmitter<StzhPanoramaSceneChangeEvent>;
+  /** Zoom change event */
+  stzhZoomChange: EventEmitter<StzhPanoramaZoomChangeEvent>;
+  isOrientationSupported: boolean;
+  isOrientationActive: boolean;
+  isFullscreen: boolean;
+  private viewer;
+  private containerElement;
+  private actionRunning;
+  private controlAnimationTime;
+  private createTooltip;
+  private handleSceneDropdownChange;
+  private handleControlsKeydown;
+  private action;
+  private stopOrientation;
+  private startOrientation;
+  private updateOrientationState;
+  /**
+   * Execute a button control action.
+   * If the action is already runing/animating, add the value to the current position and set as new target.
+   */
+  private executeAction;
+  private initViewer;
+  componentWillLoad(): Promise<void>;
+  componentDidRender(): Promise<void>;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,73 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhPopoverOpenEvent, StzhPopoverOpenedEvent, StzhPopoverCloseEvent, StzhPopoverClosedEvent } from "../../index";
+import { Placement } from "@floating-ui/dom";
+import { StzhPopoverLocalizedText } from "./stzh-popover.localization";
+/**
+ * @slot - Trigger element for popover
+ * @slot content - Any element used as popover content
+ * @slot action - `stzh-button` element
+ * @slot label - Label for mobile view (alternative for label property)
+ */
+export declare class StzhPopover {
+  /** Whether popover should be open */
+  open: boolean;
+  /** Default placement of popover relative to trigger element */
+  placement: Placement;
+  /** Variant */
+  variant: "default" | "tooltip";
+  /** Shifting of popover content */
+  skidding: number;
+  /** Distance from popover content to trigger. "8" when default variant, "16" when tooltip variant (arrow height + 8px). */
+  distance: number;
+  /** Label for mobile view (use label slot as alternative) */
+  label: string;
+  /** Position strategy */
+  strategy: "absolute" | "fixed";
+  /** Translation strings. */
+  localization: StzhPopoverLocalizedText;
+  element: HTMLStzhPopoverElement;
+  /** Popover open event */
+  stzhOpen: EventEmitter<StzhPopoverOpenEvent>;
+  /** Popover opened event (after animation) */
+  stzhOpened: EventEmitter<StzhPopoverOpenedEvent>;
+  /** Popover close event */
+  stzhClose: EventEmitter<StzhPopoverCloseEvent>;
+  /** Popover closed event (after animation) */
+  stzhClosed: EventEmitter<StzhPopoverClosedEvent>;
+  /** Show popover content */
+  show(): Promise<void>;
+  /** Hide popover content */
+  hide(): Promise<void>;
+  /** Toggle popover content */
+  toggle(): Promise<void>;
+  update(): Promise<void>;
+  handleOutsideClick(event: MouseEvent): void;
+  openWatcher(newValue: boolean): Promise<void>;
+  distanceWatcher(newValue: number): void;
+  computedPlacement: Placement;
+  private contentWrapperElement;
+  private contentElement;
+  private arrowElement;
+  private triggerElement;
+  private dialogElement;
+  private autoUpdateCleanup;
+  private initialTouchX;
+  private initialTouchY;
+  private id;
+  private trap;
+  private toggledByMethod;
+  private handleKeydown;
+  private onClickTrigger;
+  private computePosition;
+  private handleTouchStart;
+  private handleTouchEnd;
+  componentWillLoad(): Promise<void>;
+  private popoverShown;
+  private popoverHidden;
+  componentDidRender(): void;
+  componentDidUpdate(): void;
+  componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * @slot - Slot for label
+ */
+export declare class StzhPrint {
+  element: HTMLStzhPrintElement;
+  private observer;
+  private handleLinkClick;
+  private init;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,49 @@
+import { StzhProgressbarDataItem } from '../../index';
+import { StzhProgressbarLocalizedText } from "./stzh-progressbar.localization";
+/**
+ * @slot - Slot for any text content
+ */
+export declare class StzhProgressbar {
+  /** Translation strings */
+  localization: StzhProgressbarLocalizedText;
+  /**
+   * Step data (JSON array with objects that have `label` attribute and optional:
+   * - `disabled`, if step should be disabled
+   * - `icon`, if icon instead of step number should be displayed):
+   * - `analyticsId`, for Adobe Analytics, rendered as `s-object-id` (default is `label`)
+   *
+   * ```
+   * {
+   *   "label": "Step Label"
+   *   "icon": "clock",
+   *   "disabled": true
+   * }
+   * ```
+   */
+  data: StzhProgressbarDataItem[] | string;
+  private _data;
+  /** Index of the item that be active */
+  index: number;
+  /** Number of steps to show below small breakpoint */
+  steps: number;
+  /** Number of steps to show above small breakpoint */
+  stepsSmall: number;
+  /** Number of steps to show above medium breakpoint */
+  stepsMedium: number;
+  /** Number of steps to show above large breakpoint */
+  stepsLarge: number;
+  /** Number of steps to show above ultra breakpoint */
+  stepsUltra: number;
+  currentSteps: number;
+  element: HTMLStzhProgressbarElement;
+  dataWatcher(newValue: any[] | string): void;
+  private lastItemIndex;
+  private maxStepIndex;
+  private withinLastFewSteps;
+  private getItemAttributes;
+  private setCurrentSteps;
+  componentWillLoad(): Promise<void>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,34 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhProgressbarItemClickEvent, StzhProgressbarItemDottedClickEvent } from '../../index';
+/**
+ * @slot - Slot for label (or use label prop)
+ */
+export declare class StzhProgressbarItem {
+  label: string;
+  disabled: boolean;
+  first: boolean;
+  last: boolean;
+  passed: boolean;
+  current: boolean;
+  hide: boolean;
+  dotted: boolean;
+  step: number;
+  icon: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the button element.
+   * Default value will be taken from `label` prop or default slot.
+   */
+  analyticsId: string;
+  /** Click event */
+  stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;
+  /** Dotted click event */
+  stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;
+  element: HTMLStzhProgressbarItemElement;
+  private button;
+  private text;
+  private onClick;
+  private onDottedClick;
+  componentDidRender(): void;
+  render(): any;
+}