@oiz/stzh-components 2.11.0-beta1 → 2.11.1

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;
+}

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

@@ -0,0 +1,104 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhInputChangeEvent, StzhInputChangedEvent, StzhInputFocusEvent, StzhInputBlurEvent } 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
+ * @slot button-right - Slot for right button
+ */
+export declare class StzhInput {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Whether the input is a textarea or an input field */
+  multiline: boolean;
+  /** Rows attribute if input element is textarea */
+  rows: number;
+  /** If input field, this defines the type (if `search`, a search icon will be displayed) */
+  type: "text" | "search" | "password" | "email" | "url" | "tel" | "number";
+  /** If input type is number, this will be the step size  */
+  step: number;
+  /** If input type is number, this will be the minimum step number  */
+  min: number;
+  /** If input type is number, this will be the maximum step number  */
+  max: number;
+  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */
+  showSpin: boolean;
+  /** Whether the element is readonly or not */
+  readonly: boolean;
+  /** Whether the element is disabled or not */
+  disabled: boolean;
+  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */
+  clearable: boolean;
+  /** Append text to label depending if field is optional/required. true -> show "(optional)", false -> show nothing */
+  showMarker: boolean;
+  /** Minimum of characters */
+  minlength: number;
+  /** Maxlength of characters */
+  maxlength: number;
+  /** The name of the input element */
+  name: string;
+  /** The value of the input element */
+  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;
+  /**
+   * Specify inputmode.
+   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values
+   */
+  inputmode: string;
+  /**
+   * Specify what the user agent has to provide as automated assistance.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values
+   */
+  autocomplete: string;
+  /** Whether autocomplete should be turned off  */
+  noAutocomplete: boolean;
+  /** Label */
+  label: string;
+  /** Whether label should be visually hidden. */
+  labelHidden: boolean;
+  /** Size variant */
+  size: "default" | "small";
+  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+  a11yDescribedby: string;
+  /** Whether the input is filled or not */
+  filled: boolean;
+  element: HTMLStzhInputElement;
+  /** Focus input field */
+  setFocus(): Promise<void>;
+  /** Input change event */
+  stzhChange: EventEmitter<StzhInputChangeEvent>;
+  /** Input changed event */
+  stzhChanged: EventEmitter<StzhInputChangedEvent>;
+  /** Input focus event */
+  stzhFocus: EventEmitter<StzhInputFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhInputBlurEvent>;
+  valueWatcher(newValue: string): void;
+  errorWatcher(newValue: string | string[]): void;
+  typeWatcher(newValue: string): void;
+  private input;
+  private inputId;
+  private focusedByInput;
+  private onClearClick;
+  private onInput;
+  private onChange;
+  private onRootFocus;
+  private onFocus;
+  private onBlur;
+  private renderTextarea;
+  private renderInput;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @slot - Slot for any element that will be inverted.
+ */
+export declare class StzhInvert {
+  element: HTMLStzhInvertElement;
+  render(): any;
+}

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

@@ -0,0 +1,19 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhLangnavChangeEvent } from "../../index";
+/**
+ */
+export declare class StzhLangnav {
+  /** Active language of langnav */
+  languageActive: string;
+  /** Available language in langnav  */
+  languages: any[] | string;
+  /** Popover placement */
+  popoverPlacement: "bottom" | "top";
+  /** Whether to prevent the default behaviour of changing the `location.href` */
+  preventUrlchange: boolean;
+  element: HTMLStzhLangnavElement;
+  /** Langnav change event */
+  stzhChange: EventEmitter<StzhLangnavChangeEvent>;
+  private handleChange;
+  render(): any;
+}

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

@@ -0,0 +1,88 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhLinkFocusEvent, StzhLinkBlurEvent } from "../../index";
+import { StzhLocaleComponent } from "../../utils/translation-utils";
+/**
+ * @slot - Slot for text content
+ * @slot icon - Slot for icon element
+ */
+export declare class StzhLink {
+  /** Translation strings */
+  localization: StzhLocaleComponent;
+  /** Icon (use instead of icon slot) */
+  icon: string;
+  /** Icon Position */
+  iconPosition: "left" | "right";
+  /** Size variant */
+  size: "default" | "small" | "inherit";
+  /** href attribute of the link */
+  href: string;
+  /** Rel (if href is used) */
+  rel: string;
+  /** target if the button is used as link (if href used)  */
+  target: string;
+  /** Download attribute of link (if `href` used) */
+  download: string;
+  /** type of the button, if used as button (if no href used) */
+  type: "button" | "submit" | "reset";
+  /** Variant style */
+  variant: "default" | "secondary";
+  /** Whether the link is full width */
+  fullwidth: boolean;
+  /** Text alignment */
+  textAlign: "left" | "center" | "right" | "space-between" | "default";
+  /** Badge text */
+  badge: string;
+  /** Badge type */
+  badgeType: "default" | "success" | "warning" | "error" | "info";
+  /** Whether badge should be displayed empty */
+  badgeEmpty: boolean;
+  /** Badge position */
+  badgePosition: "icon" | "link";
+  /** Disabled status */
+  disabled: boolean;
+  /** Active status */
+  active: boolean;
+  /** Whether only an icon is used inside the link */
+  iconOnly: boolean;
+  /** Label */
+  label: string;
+  /** Access key of link (usually a number e.g. 1) */
+  linkAccesskey: string;
+  /** Accessible label for screen readers to replace visible text */
+  a11yLabel: string;
+  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */
+  a11yDescribedby: string;
+  /** Aria expanded of link/button */
+  a11yExpanded: boolean;
+  /** Aria disabled of link/button */
+  a11yDisabled: boolean;
+  /** Aria controls of link/button */
+  a11yControls: string;
+  /** Tabindex of link/button */
+  a11yTabindex: 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;
+  element: HTMLStzhLinkElement;
+  /** Focus link */
+  setFocus(): Promise<void>;
+  /** Focus event */
+  stzhFocus: EventEmitter<StzhLinkFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhLinkBlurEvent>;
+  private link;
+  private text;
+  private focusedByInput;
+  private onRootFocus;
+  private onFocus;
+  private onBlur;
+  private renderIcon;
+  private renderContent;
+  private renderInner;
+  componentWillLoad(): Promise<void>;
+  componentDidRender(): void;
+  render(): any;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @slot - Slot for `stzh-list-item`
+ */
+export declare class StzhList {
+  /** Variant */
+  variant: "unordered" | "ordered" | "checklist";
+  element: HTMLStzhListElement;
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @slot - Slot for text
+ */
+export declare class StzhListItem {
+  element: HTMLStzhListItemElement;
+  render(): any;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * @slot - Slot for label/text content
+ */
+export declare class StzhLoader {
+  /** Size */
+  size: "default" | "small";
+  /** Label */
+  label: string;
+  /** Hide label text visually (still anounced for screenreaders) */
+  hideLabel: boolean;
+  element: HTMLStzhInputElement;
+  render(): any;
+}

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

@@ -0,0 +1,12 @@
+/**
+ */
+export declare class StzhLoadingbar {
+  /** Percent */
+  percent: number;
+  /** Whether to hide/show percent */
+  hidePercent: boolean;
+  /** Label */
+  label: string;
+  element: HTMLStzhLoadingbarElement;
+  render(): any;
+}

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

@@ -0,0 +1,9 @@
+/**
+ *
+ */
+export declare class StzhLogo {
+  /** Type */
+  type: "none" | "stzh" | "vbz" | "aoz" | "pkzh" | "uvz";
+  element: HTMLStzhFigureElement;
+  render(): any;
+}

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

@@ -0,0 +1,50 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhMenuItemFocusEvent, StzhMenuItemBlurEvent } from "../../index";
+/**
+ * @slot - Slot for any content
+ * @slot icon - Slot for `stzh-icon` element
+ */
+export declare class StzhMenuItem {
+  /** Badge (only displayed if `icon` property or icon slot is used) */
+  badge: string;
+  /** Badge type */
+  badgeType: "default" | "success" | "warning" | "error" | "info";
+  /** Whether badge should be displayed empty */
+  badgeEmpty: boolean;
+  /** Whether the button is disabled */
+  disabled: boolean;
+  /** Whether the button is active */
+  active: boolean;
+  /** Icon (use instead of icon slot) */
+  icon: string;
+  /** Label */
+  label: string;
+  /** `href` if the button should be used as link  */
+  href: string;
+  /** Target if the button is used as link (if `href` used)  */
+  target: string;
+  /** Accessible label for screen readers to replace visible text */
+  a11yLabel: 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;
+  element: HTMLStzhMenuItemElement;
+  /** Focus menu item */
+  setFocus(): Promise<void>;
+  /** Focus event */
+  stzhFocus: EventEmitter<StzhMenuItemFocusEvent>;
+  /** Input blur event */
+  stzhBlur: EventEmitter<StzhMenuItemBlurEvent>;
+  private menuItem;
+  private text;
+  private focusedByInput;
+  private onRootFocus;
+  private onFocus;
+  private onBlur;
+  componentDidRender(): void;
+  private renderInner;
+  render(): any;
+}

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

@@ -0,0 +1,37 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import { StzhMessageOpenEvent, StzhMessageCloseEvent } from "../../index";
+import { StzhMessageLocalizedText } from "./stzh-message.localization";
+/**
+ * @slot - Slot for description content (use instead of description property)
+  * @slot link - Slot for optional stzh-link element
+ */
+export declare class StzhMessage {
+  /** Label */
+  label: string;
+  /** Description (use instead of default slot) */
+  description: string;
+  /**
+   * Close cookie name key.
+   * Component will check for the cookie (stzh-components-message-close-{name})
+   * and if not empty (message already closed before) will hide the message.
+   */
+  closeKey: string;
+  /** Type */
+  type: "info" | "success" | "warning" | "error";
+  /** Whether to hide close button */
+  hideClose: boolean;
+  /** Translation strings. */
+  localization: StzhMessageLocalizedText;
+  /** Message open event */
+  stzhOpen: EventEmitter<StzhMessageOpenEvent>;
+  /** Message close event */
+  stzhClose: EventEmitter<StzhMessageCloseEvent>;
+  element: HTMLStzhMessageElement;
+  /** Open state */
+  open: boolean;
+  show(): Promise<void>;
+  hide(setCloseKey?: boolean): Promise<void>;
+  private onCloseButtonClick;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}

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

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

package/dist/types/components/stzh-microsite-teaserlist/stzh-microsite-teaserlist.d.ts

@@ -0,0 +1,33 @@
+import { StzhMicrositeTeaserlistLocalizedText } from './stzh-microsite-teaserlist.localization';
+import { StzhMicrositeTeaserlistTag } from "../../index";
+/**
+ * @see https://www.stadt-zuerich.ch/site/fuer-zueri/de/index.html
+ * @see https://www.stadt-zuerich.ch/site/iazh/de/index.html
+ */
+export declare class StzhMicrositeTeaserlist {
+  /** Translation strings */
+  localization: StzhMicrositeTeaserlistLocalizedText;
+  /** API URL (`{lang}` is replaced in the URL)  */
+  api: string;
+  /** Tags */
+  tags: string | StzhMicrositeTeaserlistTag[];
+  private _tags;
+  private _tagChips;
+  /** Numbers of item shown with each load more action */
+  stepItems: number;
+  element: HTMLStzhMicrositeTeaserlistElement;
+  /** Numbers of items currently shown */
+  showItems: number;
+  /** Active filter */
+  activeFilter: string;
+  filterHandler(): Promise<void>;
+  tagsWatcher(newValue: string | StzhMicrositeTeaserlistTag[]): Promise<void>;
+  apiWatcher(newValue: string): Promise<void>;
+  private items;
+  private filteredItems;
+  private filteredSlicedItems;
+  private handleChange;
+  private handleMoreClick;
+  componentWillLoad(): Promise<void>;
+  render(): any;
+}