@oiz/stzh-components 2.11.0-beta1 → 2.11.1

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

@@ -0,0 +1,57 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhRadioChangeEvent, StzhRadioFocusEvent, StzhRadioBlurEvent } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ * @slot - Slot for label content
+ * @slot description - Slot for description
+ * @slot description-long - Slot for long description (in popover)
+ * @slot error - Slot for error
+ */
+export declare class StzhRadio {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Whether the element is disabled or not */
+  disabled: boolean;
+  /** The name of the input element */
+  name: string;
+  /** The value of the input element */
+  value: 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;
+  /** Checked status */
+  checked: boolean;
+  /** Label */
+  label: string;
+  /** Description message (use description slot as alternative) */
+  description: string;
+  /** Long description message appearing in a popover (use description-long slot as alternative) */
+  descriptionLong: string;
+  /** One or multiple error message (use error slot as alternative) */
+  error: string | string[];
+  private _error;
+  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+  a11yDescribedby: string;
+  /** Focus input field */
+  setFocus(): Promise<void>;
+  /** Input change event */
+  stzhChange: EventEmitter<StzhRadioChangeEvent>;
+  /** Input focus event */
+  stzhFocus: EventEmitter<StzhRadioFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhRadioBlurEvent>;
+  errorWatcher(newValue: string | string[]): void;
+  element: HTMLStzhRadioElement;
+  private input;
+  private inputId;
+  private focusedByInput;
+  private onInput;
+  private onRootFocus;
+  private onFocus;
+  private onBlur;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,66 @@
+import { StzhRadioChangeEvent } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ * @slot - Slot for `stzh-radio`, `stzh-button[type="radio"]` or `stzh-card` elements
+ * @slot description - Slot for description
+ * @slot description-long - Slot for long description (in popover)
+ * @slot error - Slot for error
+ */
+export declare class StzhRadiogroup {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Whether the element is disabled or not */
+  disabled: boolean;
+  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */
+  name: string;
+  /** The legend */
+  legend: string;
+  /** Hide legend to show only for screenreaders */
+  hideLegend: boolean;
+  /** 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;
+  /** Select a radio by value */
+  value: string;
+  /** 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 radio element (readonly) */
+  checkedRadio: HTMLStzhRadioElement | null;
+  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */
+  preventUpdateProperties: string[] | string;
+  private _preventUpdateProperties;
+  /** Host element */
+  element: HTMLElement;
+  watchName(newValue: string): void;
+  watchDisabled(newValue: boolean): void;
+  watchInvalid(newValue: boolean): void;
+  watchRequired(newValue: boolean): void;
+  watchValue(newValue: string): void;
+  errorWatcher(newValue: string | string[]): void;
+  preventUpdatePropertiesWatcher(newValue: string[] | string): void;
+  onChange(event: CustomEvent<StzhRadioChangeEvent>): void;
+  /** Radio elements */
+  private radios;
+  private radiogroupId;
+  private observer;
+  private updateRadiosProperty;
+  private updateCheckedRadioByValue;
+  private uncheckRadios;
+  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-ratio/stzh-ratio.d.ts

@@ -0,0 +1,22 @@
+import { Layout } from "../../index";
+/**
+ * @slot - Slot for e.g. image or video
+ */
+export declare class StzhRatio {
+  /** Aspect ratio */
+  ratio: Layout.Ratio;
+  /** Aspect ratio above small breakpoint */
+  ratioSmall: Layout.Ratio | "inherit";
+  /** Aspect ratio above medium breakpoint */
+  ratioMedium: Layout.Ratio | "inherit";
+  /** Aspect ratio above large breakpoint */
+  ratioLarge: Layout.Ratio | "inherit";
+  /** Aspect ratio above ultra breakpoint */
+  ratioUltra: Layout.Ratio | "inherit";
+  /** Whether aspect ratio is in portrait mode */
+  portrait: boolean;
+  /** Fit mode */
+  fit: "cover" | "contain";
+  element: HTMLStzhRatioElement;
+  render(): any;
+}

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

@@ -0,0 +1,18 @@
+/**
+ * @slot - Slot for label
+ */
+export declare class StzhReadspeaker {
+  /** RS url of site (e.g. https://app-eu.readspeaker.com/cgi-bin/rsent?customerid=4490&lang=de_de&readid=content&url=https://www.stadt-zuerich.ch/portal/de/index/service/kontakt.html) */
+  href: string;
+  /** RS event ID */
+  eventId: string;
+  element: HTMLStzhReadspeakerElement;
+  addClickEvents(): void;
+  private readspeakerLink;
+  private observer;
+  private onLinkClick;
+  private init;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,22 @@
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ * @slot - Text content that should be styled
+ */
+export declare class StzhRichtext {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Whether first top margin of first child should be set to 0. */
+  removeFirstMargin: boolean;
+  /** Whether last bottom margin of last child should be set to 0. */
+  removeLastMargin: boolean;
+  /** Selector to recognize external link and attach an icon */
+  externalLinkSelector: string;
+  /** Icon used for marking external links */
+  externalLinkIcon: string;
+  element: HTMLStzhRichtextElement;
+  private externalLinks;
+  private addExternalLinkIcons;
+  componentWillLoad(): Promise<void>;
+  componentDidRender(): void;
+  render(): any;
+}

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

@@ -0,0 +1,28 @@
+import { StzhSaptchaLocalizedText } from './stzh-saptcha.localization';
+/**
+ * @slot - Slot for content
+ */
+export declare class StzhSaptcha {
+  /** Translation strings */
+  localization: StzhSaptchaLocalizedText;
+  /** Numbers shown to user for selection */
+  numbers: number[] | string;
+  private _numbers;
+  /** The value of the input element */
+  value: string;
+  /** Name of input */
+  name: string;
+  /** One or multiple error message */
+  error: string | string[];
+  private _error;
+  /** Invalid status */
+  invalid: boolean;
+  /** Whether the element is disabled or not */
+  disabled: boolean;
+  element: HTMLStzhSaptchaElement;
+  numbersWatcher(newValue: number[] | string): void;
+  errorWatcher(newValue: string | string[]): void;
+  private saptchaId;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,21 @@
+import { ShareService } from "../../index";
+import { StzhShareLocalizedText } from "./stzh-share.localization";
+/**
+ */
+export declare class StzhShare {
+  /** Translation strings */
+  localization: StzhShareLocalizedText;
+  /** URL of current site (uses full URL by default) */
+  url: string;
+  /**
+   * Array of enabled share buttons.
+   * Possible services: `facebook` / `twitter` / `linkedin` / `xing` / `mail`
+   */
+  services: ShareService[] | string;
+  private _services;
+  servicesWatcher(newValue: ShareService[] | string): void;
+  element: HTMLStzhShareElement;
+  private openPopup;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,22 @@
+/**
+ * @slot - Slot for any content
+ */
+export declare class StzhShow {
+  /** Mikro */
+  mikro: boolean;
+  /** Small */
+  small: boolean;
+  /** Medium */
+  medium: boolean;
+  /** Large */
+  large: boolean;
+  /** Ultra */
+  ultra: boolean;
+  /** Hide from date */
+  hideFromDate: Date | string;
+  private _hideFromDate;
+  hideFromDateWatcher(newValue: Date | string): void;
+  element: HTMLStzhShowElement;
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,14 @@
+import { StzhDatalistItemEntry } from "../../index";
+/**
+ */
+export declare class StzhSitemap {
+  /**
+   * Items in sitemap
+   * Array of objects that must at least include `value` attribute.
+   * Can optionally contain `label`, `meta`, `icon`, `href` attribute and be nested to display deeper levels:
+   * `[{"value":"Value 1", "label": "Label 1"}, {"value":"Value 2", "label": "Label 2", "items": [...]}]`
+   */
+  items: StzhDatalistItemEntry[] | string;
+  element: HTMLStzhSitemapElement;
+  render(): any;
+}

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

@@ -0,0 +1,38 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhSkiplinkFocusEvent, StzhSkiplinkBlurEvent } from "../../index";
+/**
+ * @slot - Slot for any text content
+ */
+export declare class StzhSkiplink {
+  /** Label */
+  label: string;
+  /** href for linking to e.g. id of an element to skip to */
+  href: string;
+  /** Access key of link (usually a number e.g. 1) */
+  linkAccesskey: string;
+  /** Link title for description e.g. how to use skiplink with access key ([ALT + 1]) */
+  linkTitle: string;
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the link element.
+   * Default value will be taken from `label` prop or default slot.
+   */
+  analyticsId: string;
+  /** Whether the skiplink is currently focused */
+  focused: boolean;
+  /** Focus event */
+  stzhFocus: EventEmitter<StzhSkiplinkFocusEvent>;
+  /** Blur event */
+  stzhBlur: EventEmitter<StzhSkiplinkBlurEvent>;
+  element: HTMLStzhSkiplinkElement;
+  focusinHandler(): void;
+  focusoutHandler(): void;
+  private link;
+  private text;
+  private focusedByInput;
+  private onRootFocus;
+  private onFocus;
+  private onBlur;
+  componentDidRender(): void;
+  render(): any;
+}

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

@@ -0,0 +1,59 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhSortableUpdateEvent, StzhSortableDisableEvent } from "../../index";
+import { StzhSortableLocalizedText } from "./stzh-sortable.localization";
+/**
+ * @slot - Slot for any elements
+ */
+export declare class StzhSortable {
+  /** Translation strings. */
+  localization: StzhSortableLocalizedText;
+  /** Wether sorting is disabled or not */
+  disabled: boolean;
+  /** HTML attribute that is used by the `toArray()` method */
+  dataIdAttribute: string;
+  /** Container  */
+  container: HTMLElement | Function;
+  /** Algorithm how the ghost element will be cloned */
+  ghostClone: Function;
+  /** Filtered elements that should prevent dragging inside the drag item elements */
+  filterElements: any[] | string;
+  private _filterElements;
+  element: HTMLStzhSortableElement;
+  /** Serializes the sortable's item data-id's (dataIdAttr option) into an array of string */
+  toArray(): Promise<string[]>;
+  /** Sorts the elements according to the array */
+  sort(order: String[], useAnimation?: boolean): Promise<any>;
+  /** Move item */
+  moveItem(item: HTMLElement, direction: "up" | "down"): Promise<void>;
+  disabledWatcher(newValue: boolean): void;
+  filterElementsWatcher(newValue: any[] | string): void;
+  /** Update event */
+  stzhUpdate: EventEmitter<StzhSortableUpdateEvent>;
+  /** Disable event */
+  stzhDisable: EventEmitter<StzhSortableDisableEvent>;
+  private sortable;
+  private sortableId;
+  private containerElement;
+  private ariaLiveElement;
+  private observer;
+  private selectedItem;
+  private resetItemOnBlur;
+  private lastIndex;
+  private getContainer;
+  private updateAriaLive;
+  private getIndexOfSelectedItem;
+  private resetActiveItem;
+  private focusItem;
+  private setAttributes;
+  private unsetAttributes;
+  private init;
+  private updated;
+  private onKeydown;
+  private onBlur;
+  componentWillLoad(): Promise<void>;
+  componentWillUpdate(): void;
+  componentDidRender(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,14 @@
+/**
+ */
+export declare class StzhStatus {
+  /** Percent */
+  percent: number;
+  /** Whether to hide/show loadingbar */
+  withLoadingbar: boolean;
+  /** Label */
+  label: string;
+  /** Type */
+  type: "default" | "success" | "warning" | "error" | "info";
+  element: HTMLStzhStatusElement;
+  render(): any;
+}

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

@@ -0,0 +1,58 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhStickyStuckTopEvent, StzhStickyStuckBottomEvent } from "../../index";
+/**
+ *
+ */
+export declare class StzhSticky {
+  /** Whether to disable sticking to top */
+  disableStickyTop: boolean;
+  /** Whether to disable sticking to bottom */
+  disableStickyBottom: boolean;
+  /** Whether to breakout container */
+  breakout: boolean;
+  /**
+   * Position type used.
+   *
+   * - sticky: used only css position sticky
+   * - fixed: uses position fixed with js for positioning (`data-stzh-sticky-container` can be used on a container element to limit sticky position)
+   */
+  position: "sticky" | "fixed";
+  disableStickyWatcher(): void;
+  element: HTMLStzhStickyElement;
+  isStuckTop: boolean;
+  isStuckBottom: boolean;
+  hasReachedTopLimit: boolean;
+  hasReachedBottomLimit: boolean;
+  isStuckTopWatcher(newValue: boolean): void;
+  isStuckBottomWatcher(newValue: boolean): void;
+  positionWatcher(newValue: string): void;
+  /** Sticky stuck top event */
+  stzhStuckTop: EventEmitter<StzhStickyStuckTopEvent>;
+  /** Sticky stuck bottom event */
+  stzhStuckBottom: EventEmitter<StzhStickyStuckBottomEvent>;
+  private observer;
+  private debounceScroll;
+  private debounceResize;
+  private stickyElement;
+  private spacerElement;
+  private windowHeight;
+  private scrollX;
+  private scrollY;
+  private fixedTop;
+  private fixedLeft;
+  private fixedHeight;
+  private fixedWidth;
+  private fixedLimit;
+  private updateStuck;
+  private getFixedLimit;
+  private setUnfixed;
+  private setFixed;
+  private handleScroll;
+  private handleResize;
+  private updateFixedByScroll;
+  private updateFixedByResize;
+  private observe;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,43 @@
+/**
+ * @slot - Slot for table element
+ * @slot heading - Slot for `stzh-heading`
+ * @slot search - Slot for search `stzh-input` element
+ * @slot action-button - Slot for action `stzh-button` element
+ * @slot list - Slot for list element showing on mobile
+ * @slot pagination - Slot for action `stzh-pagination` element
+ */
+export declare class StzhTable {
+  /** Columns that should be sticky on the left side (column indexes separated by comma) */
+  fixedLeft: number;
+  /** Columns that should be sticky on the right side (column indexes separated by comma) */
+  fixedRight: 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;
+  hasScrollLeft: boolean;
+  hasScrollRight: boolean;
+  isScrollable: boolean;
+  cellsStickyLeft: number[];
+  cellsStickyRight: number[];
+  element: HTMLStzhTableElement;
+  fixedCellWatcher(): void;
+  private tableWrapper;
+  private observer;
+  private debounceScroll;
+  private debounceResize;
+  private resizeObserver;
+  private updateCellClasses;
+  private updateScrollStates;
+  private init;
+  handleResize: () => void;
+  private handleScroll;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @slot left - Slot for left column content
+ * @slot right - Slot for right column content
+ */
+export declare class StzhTextandimage {
+  /** Whether to float left content */
+  floating: boolean;
+  /** Whether display columns fullwidth on every breakpoint (not just mobile) */
+  fullwidth: boolean;
+  /** Size variant */
+  size: "default" | "small" | "large";
+  element: HTMLStzhTextandimageElement;
+  render(): any;
+}

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

@@ -0,0 +1,23 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhTimelineItemOpenEvent, StzhTimelineFoldableChangeEvent } from "../../index";
+/**
+ * @slot - Slot for `stzh-timeline-item` elements
+ */
+export declare class StzhTimeline {
+  /** Whether folds are foldable */
+  foldable: boolean;
+  /** Whether folds are collapsible */
+  collapsible: boolean;
+  /** Whether multiple folds can be opened at once */
+  multiselectable: boolean;
+  element: HTMLStzhTimelineElement;
+  /** Foldable change event */
+  stzhFoldableChange: EventEmitter<StzhTimelineFoldableChangeEvent>;
+  foldableWatcher(newValue: boolean): void;
+  openListener(event: CustomEvent<StzhTimelineItemOpenEvent>): void;
+  /** Set focus to timeline item */
+  setItemFocus(timelineItem: HTMLStzhTimelineItemElement, action: string): Promise<void>;
+  updateSteps(): Promise<void>;
+  private handleSlotchange;
+  render(): any;
+}

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

@@ -0,0 +1,78 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhTimelineItemOpenEvent, StzhTimelineItemOpenedEvent, StzhTimelineItemCloseEvent, StzhTimelineItemClosedEvent, StzhTimelineItemFocusEvent, StzhTimelineItemBlurEvent } from "../../index";
+/**
+ * @slot - Slot for any content
+ * @slot icon - Slot for icon element
+ */
+export declare class StzhTimelineItem {
+  /** Whether folds are foldable (overwrites `foldable` property from `timeline` parent) */
+  foldable: boolean;
+  /** Whether fold is collapsible (overwrites `collapsible` property from `timeline` parent) */
+  collapsible: boolean;
+  /** Whether fold is open */
+  open: boolean;
+  /** Whether fold disabled */
+  disabled: boolean;
+  /** Heading title */
+  heading: string;
+  /** Description */
+  description: string;
+  /** Step number shown inside bullet by default */
+  step: number;
+  /** Icon (use instead of icon slot) */
+  icon: string;
+  /** Badge */
+  badge: string;
+  /** Whether badge should be displayed empty */
+  badgeEmpty: boolean;
+  /** Badge type */
+  badgeType: "default" | "success" | "warning" | "error" | "info";
+  /** Heading level */
+  headingLevel: "1" | "2" | "3" | "4";
+  /**
+   * For Adobe Analytics.
+   * Will be rendered as value of `s-object-id` attribute to the button element.
+   * Default value will be taken from `heading` prop.
+   */
+  analyticsId: string;
+  element: HTMLStzhTimelineItemElement;
+  /** Open event */
+  stzhOpen: EventEmitter<StzhTimelineItemOpenEvent>;
+  /** Opened event (after animation) */
+  stzhOpened: EventEmitter<StzhTimelineItemOpenedEvent>;
+  /** Close event */
+  stzhClose: EventEmitter<StzhTimelineItemCloseEvent>;
+  /** Closed event (after animation) */
+  stzhClosed: EventEmitter<StzhTimelineItemClosedEvent>;
+  /** Show timeline item content */
+  show(): Promise<void>;
+  /** Hide timeline item content */
+  hide(): Promise<void>;
+  /** Toggle timeline item content */
+  toggle(): Promise<void>;
+  /** Set focus to button */
+  setFocus(): Promise<void>;
+  /** Focus event */
+  stzhFocus: EventEmitter<StzhTimelineItemFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhTimelineItemBlurEvent>;
+  openWatcher(newValue: boolean): Promise<void>;
+  foldableWatcher(newValue: boolean): void;
+  _foldable: boolean;
+  private toggledByMethod;
+  private bodyElement;
+  private buttonElement;
+  private timelineItemId;
+  private timeline;
+  private handleFoldableChange;
+  private handleHeaderClick;
+  private onFocus;
+  private onBlur;
+  private onButtonKeydown;
+  private onContentKeydown;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  connectedCallback(): Promise<void>;
+  disconnectedCallback(): void;
+  render(): any;
+}