@oiz/stzh-components 4.5.0 → 4.6.0-beta2

package/dist/components/p-f5779736.js.map

@@ -1 +1 @@
-{"file":"p-f5779736.js","mappings":"AAAA;AACA;AACA;SAkEgB,EAAE,CAAC,WAAmB,EAAE,KAAa;IACnD,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,IAAI,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAE3B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;QACrC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;KACxB;SAAM,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE;QAC9D,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;QACrC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,KAAI,EAAE,CAAC,CAAC;AAC1D,CAAC;AAo0DD;IAEY;AAAZ,WAAY,sCAAsC;IAChD,yDAAe,CAAA;IACf,+DAAqB,CAAA;IACrB,2DAAiB,CAAA;AACnB,CAAC,EAJW,sCAAsC,KAAtC,sCAAsC,QAIjD;IA4GgB,IAoMhB;AApMD,WAAiB,GAAG;IACL,oBAAgB,GAAG,QAAQ,CAAC;IAE5B,kBAAc,GAAG,QAAQ,CAAC;IAC1B,2BAAuB,GAAG,sBAAsB,CAAC;IAEjD,sBAAkB,GAAG,YAAY,CAAC;IAClC,2BAAuB,GAAG,GAAG,CAAC;IAC9B,4BAAwB,GAAG,GAAG,CAAC;IAC/B,sBAAkB,GAAG,GAAG,CAAC;IACzB,qBAAiB,GAAG,GAAG,CAAC;IACxB,mBAAe,GAAG,GAAG,CAAC;AAyLrC,CAAC,EApMgB,GAAG,KAAH,GAAG;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["// ---\n// Global window types\n// ---\n\nexport type StzhLocaleFormats = {\n  datetime?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  datetimeLong?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  datetimeInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  date?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  dateLong?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  dateInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  time?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  timeInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n}\n\ntype MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string]\ntype DayNames = [string, string, string, string, string, string, string]\n\nexport type StzhLocaleGlobals = {\n  dateRange: string,\n  timeRange: string,\n  externalLinkLabel: string\n  downloadLinkLabel: string\n  requiredFieldMarker: string\n  requiredFieldText: string\n  optionalFieldMarker: string\n  optionalFieldText: string\n  invalidFieldText: string\n  clearButtonLabel: string\n  moreInfoButtonLabel: string\n  dayNames: DayNames\n  dayNamesShort: DayNames\n  monthNames: MonthsNames\n  monthNamesShort: MonthsNames\n}\n\nexport type StzhLocaleComponent = {\n  $locale: \"de\" | \"en\",\n  $formats: StzhLocaleFormats,\n  $formatsIso: StzhLocaleFormats,\n  $formatsLegacy: StzhLocaleFormats,\n  $globals: StzhLocaleGlobals\n}\n\nexport function tc(translation: string, count: number): string {\n  if (!translation) {\n    return \"\";\n  }\n\n  const parts = translation.split(\"|\");\n  let part = parts[0].trim();\n\n  if (parts.length === 3 && count === 1) {\n    part = parts[1].trim();\n  } else if (parts.length === 3 && (count > 1 || count === null)) {\n    part = parts[2].trim();\n  }\n\n  if (parts.length === 2 && count !== 1) {\n    part = parts[1].trim();\n  }\n\n  return part.replace(/\\{n\\}/ig, count?.toString() || \"\");\n}\n\nexport type StzhDateFormat = ((date: Date, type?: string) => string)\nexport type StzhDateParse = ((input: string, type?: string) => Date | undefined)\n\nexport interface StzhLocaleAdapter {\n  format: StzhDateFormat,\n  parse: StzhDateParse,\n  formatSpan: (date: Date | string, date2: Date | string, type: string) => string\n  parseSpan: (string: string, type: string) => [Date, Date, string]\n}\n\nexport type WindowStzhComponents = {\n  version: string;\n  supportedLocales: string[];\n  defaultLocale: string;\n  translations: null | StzhLocaleComponent;\n  translationsLoading: Promise<StzhLocaleComponent>;\n  pathMedia: string;\n  pathTranslations: string;\n  pathVendors: string;\n  cacheTranslations: boolean;\n  formats: StzhLocaleFormats;\n  fixAutofocus: boolean;\n  fixHashfocus: boolean;\n  utils: {\n    getLocale: (element: HTMLElement) => string;\n    fetchTranslations: (\n      host: HTMLElement,\n      component: string\n    ) => Promise<StzhLocaleComponent & any>;\n\n    format: (date: Date, type: string) => string;\n    parse: (string: string, type: string) => Date;\n    formatSpan: (\n      date: Date | string,\n      date2: Date | string,\n      type: string\n    ) => string;\n    parseSpan: (string: string, type: string) => [Date, Date, string];\n    createFormatParseAdapter: (\n      formats: StzhLocaleFormats,\n      globals: StzhLocaleGlobals\n    ) => StzhLocaleAdapter;\n  };\n};\n\ndeclare global {\n  interface Window {\n    stzhComponents: WindowStzhComponents;\n    stzhReadspeakerHasGlobalBodyObserver: boolean;\n    // global third party library\n    pannellum: any;\n    Dropzone: any;\n    proj4: any;\n    // readspeaker lib APIs\n    readpage: any;\n    ReadSpeaker: any;\n    rsConf: any;\n    rspkr: any;\n  }\n}\n\n// ---\n// Event Types\n// ---\n\n/* Sortable */\n\nexport type StzhSortableUpdateEvent = {\n  component: \"stzh-sortable\";\n  data: string[];\n  item: HTMLElement;\n  newIndex: number;\n  oldIndex: number;\n};\n\nexport type StzhSortableDisableEvent = {\n  component: \"stzh-sortable\";\n  disabled: boolean;\n};\n\n/* Panorama */\n\nexport type PanoramaScene = {\n  sceneId: string;\n  imageSrc: string;\n  imageTitle: string;\n\n  imageAuthor?: string;\n  imageType?: \"equirectangular\" | \"cubemap\" | \"multires\";\n  caption?: string;\n  copyright?: string;\n\n  pitch?: number;\n  yaw?: number;\n  hfov?: number;\n\n  hotspots: PanoramaSceneHotSpot[];\n};\n\nexport type PanoramaScenesLibrary = {\n  [sceneKey: string]: {\n    title?: string;\n    author?: string;\n    panorama: string;\n    type?: \"equirectangular\" | \"cubemap\" | \"multires\";\n\n    pitch?: number;\n    yaw?: number;\n    hfov?: number;\n\n    hotSpots: PanoramaSceneHotSpot[];\n  };\n};\n\nexport type PanoramaSceneHotSpot = {\n  pitch: number;\n  yaw: number;\n  type: string;\n  text: string;\n  url?: string;\n  id?: string;\n  sceneId?: string;\n  targetPitch?: number;\n  targetYaw?: number;\n\n  cssClass?: string;\n  createTooltipFunc?: Function;\n  createTooltipArgs?: any;\n};\n\nexport type StzhPanoramaLoadEvent = {\n  component: \"stzh-panorama\";\n};\n\nexport type StzhPanoramaChangeEvent = {\n  component: \"stzh-panorama\";\n  value: { pitch: number; yaw: number; hfov: number };\n};\n\nexport type StzhPanoramaFullscreenChangeEvent = {\n  component: \"stzh-panorama\";\n  value: boolean;\n};\n\nexport type StzhPanoramaSceneChangeEvent = {\n  component: \"stzh-panorama\";\n  value: string;\n};\n\nexport type StzhPanoramaZoomChangeEvent = {\n  component: \"stzh-panorama\";\n  value: number;\n};\n\n/* Iframe */\n\nexport type StzhIframeView = \"iframe\" | \"cookiewall\" | \"preview\";\n\nexport type StzhIframeViewChangeEvent = {\n  component: \"stzh-iframe\";\n  value: StzhIframeView;\n};\n\nexport type StzhIframePreviewSkipEvent = {\n  component: \"stzh-iframe\";\n};\n\n/* Olmap */\n\nexport type OlmapLayer = {\n  title?: string;\n  thumbnailUrl: string;\n  options: {\n    url: string;\n    layer: string;\n    matrixSet: string;\n    origin: number[];\n    extent: number[];\n  };\n};\n\nexport type StzhOlmapFeatureWithPopover = {\n  id: string;\n  title?: string;\n  text?: string;\n  imageUri?: string;\n  href?: string;\n  data?: { icon: string; text: string }[];\n};\n\nexport type StzhOlmapInitializedEvent = {\n  component: \"stzh-olmap\";\n};\n\nexport type StzhOlmapPostRenderEvent = {\n  component: \"stzh-olmap\";\n};\n\nexport type StzhOlmapMoveStartEvent = {\n  component: \"stzh-olmap\";\n};\n\nexport type StzhOlmapMoveEndEvent = {\n  component: \"stzh-olmap\";\n};\n\nexport type StzhOlmapMovePanZoomEvent = {\n  component: \"stzh-olmap\";\n};\n\n/* Sticky */\n\nexport type StzhStickyStuckTopEvent = {\n  component: \"stzh-sticky\";\n  sticky: boolean;\n};\n\nexport type StzhStickyStuckBottomEvent = {\n  component: \"stzh-sticky\";\n  sticky: boolean;\n};\n\n/* Table */\n\nexport type StzhDatatableCellData = {\n  value: string | number;\n  isHeader?: boolean;\n  align?: \"left\" | \"right\" | \"center\";\n  valign?: \"auto\" | \"middle\" | \"bottom\" | \"top\";\n  colspan?: number;\n  rowspan?: number;\n  id?: string;\n};\n\nexport type StzhDatatableRowData = {\n  [key: string]: StzhDatatableCellData;\n};\n\nexport type StzhDatatableInputRowData = {\n  [key: string]: StzhDatatableCellData | string | number;\n};\n\nexport type StzhDatatableColumnData = {\n  key: string;\n  text?: string;\n  align?: \"left\" | \"right\" | \"center\";\n  valign?: \"auto\" | \"middle\" | \"bottom\" | \"top\";\n  sort?:\n  | boolean\n  | {\n    type?: \"numerical\" | \"text\";\n    field?: string;\n  };\n  fixed?: \"left\" | \"right\";\n  isHeader?: boolean;\n  colspan?: number;\n  rowspan?: number;\n  hideColumnHeading?: boolean;\n  analyticsId?: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type StzhDatatableRowClickEvent = {\n  component: \"stzh-datatable\";\n  row: any;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatatableCellClickEvent = {\n  component: \"stzh-datatable\";\n  row: any;\n  column: any;\n  cellIndex: number;\n  rowIndex: number;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatatableHeadingCellClickEvent = {\n  component: \"stzh-datatable\";\n  column: any;\n  index: number;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatatableSortClickEvent = {\n  component: \"stzh-datatable\";\n  column: any;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatatableSortByChangeEvent = {\n  component: \"stzh-datatable\";\n  value: string;\n  oldValue: string;\n};\n\nexport type StzhDatatableSortDirectionChangeEvent = {\n  component: \"stzh-datatable\";\n  value: \"asc\" | \"desc\";\n  oldValue: \"asc\" | \"desc\";\n};\n\n/* Archivelist */\n\nexport type StzhArchivelistItem = {\n  label: string;\n  labelClamp?: any; // attributes of HTMLStzhClampElement\n  href: string;\n  dateline?: string;\n  description?: string;\n  descriptionClamp?: any; // attributes of HTMLStzhClampElement\n};\n\nexport type StzhArchivelistItemClickEvent = {\n  component: \"stzh-archivelist\";\n  item: StzhArchivelistItem;\n  originalEvent: MouseEvent;\n};\n\n/* Anchornav */\n\nexport type StzhAnchornavItem = {\n  label: string;\n  href?: string;\n  icon?: string;\n};\n\nexport type StzhAnchornavItemClickEvent = {\n  component: \"stzh-anchornav\";\n  item: StzhAnchornavItem;\n  originalEvent: MouseEvent;\n};\n\n/* TopnewsMostsearchedSection */\n\nexport type StzhTopnewsItem = {\n  subtitle?: string;\n  label: string;\n  href?: string;\n  isHighlighted?: boolean;\n};\n\nexport type StzhMostsearchedItem = {\n  label: string;\n  href: string;\n};\n\n/* VBZ Quicklinks */\n\nexport type StzhVbzQuicklink = {\n  label: string;\n  href: string;\n};\n\n/* Status */\n\nexport type StzhStatusType =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\n/* Badge */\n\nexport type StzhBadgeType =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\n/* Actionset */\n\nexport type StzhActionsetItem = {\n  id: string;\n  label?: string;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  iconOnly?: boolean;\n  badge?: string;\n  badgeEmpty?: boolean;\n  badgeType?: StzhBadgeType;\n  variant?: StzhButtonVariant;\n  size?: StzhButtonSize;\n  badgePosition?: \"icon\" | \"button\";\n  tooltipContent?: string;\n};\n\nexport type StzhActionsetItemClickEvent = {\n  component: \"stzh-actionset\";\n  action: StzhActionsetItem;\n  originalEvent: MouseEvent;\n};\n\n/* Audio */\n\nexport type StzhAudioPlayEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioPlayingEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioPauseEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioReplayEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioEndEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioEndedEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioErrorEvent = {\n  component: \"stzh-audio\";\n  originalEvent: ErrorEvent;\n};\n\n/* Share */\n\nexport type ShareService =\n  | \"facebook\"\n  | \"twitter\"\n  | \"linkedin\"\n  | \"xing\"\n  | \"mail\";\n\n/* Footer Editor */\n\nexport type StzhEditorLink = {\n  label: string;\n  href?: string;\n  icon?: string;\n  rel?: string;\n  target?: string;\n};\n\n/* Header */\n\nexport type StzhHeaderMenuItem = {\n  label: string;\n  href?: string;\n  items?: StzhHeaderMenuItem[];\n  id?: string;\n};\n\nexport type StzhHeaderMetanavItem = {\n  label: string;\n  labelShort?: string;\n  labelHidden?: boolean;\n  stay?: boolean;\n  stayAndShowInMobileMenu?: boolean;\n  variant?: \"default\" | \"secondary\"; // used for menu-item and popover\n  size?: \"default\" | \"large\"; // used for menu-item and popover\n  important?: boolean;\n  importantSubmenu?: boolean;\n  badgeEmpty?: boolean;\n  badgeType?: StzhBadgeType;\n  badge?: string;\n  icon?: string;\n  iconOpen?: string;\n  href?: string;\n  target?: string;\n  id?: string;\n  items?: StzhHeaderMetanavItemChild[];\n  itemButton?: StzhHeaderMetanavItemButton;\n  itemButtonExtra?: StzhHeaderMetanavItemButton;\n  cssOrder?: boolean;\n};\n\nexport type StzhHeaderMetanavItemChild = {\n  label: string;\n  href?: string;\n  target?: string;\n  id?: string;\n  icon?: string;\n  counter?: number;\n  badge?: string;\n  badgeType?: StzhBadgeType;\n};\n\nexport type StzhHeaderMetanavItemButton = {\n  label: string;\n  href?: string;\n  target?: string;\n  size?: StzhButtonSize;\n  id?: string;\n};\n\nexport type StzhHeaderMetanavItemClickEvent = {\n  component: \"stzh-header\";\n  item: StzhHeaderMetanavItem;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhHeaderMetanavItemChildClickEvent = {\n  component: \"stzh-header\";\n  itemChild: StzhHeaderMetanavItemChild;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhHeaderMetanavItemButtonClickEvent = {\n  component: \"stzh-header\";\n  itemButton: StzhHeaderMetanavItemButton;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhHeaderMenuItemClickEvent = {\n  component: \"stzh-header\";\n  item: StzhHeaderMenuItem;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhHeaderLanguageChangeEvent = {\n  component: \"stzh-header\";\n  value: string;\n};\n\nexport type StzhHeaderSearchChangeEvent = {\n  component: \"stzh-header\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\nexport type StzhHeaderSearchChangedEvent = {\n  component: \"stzh-header\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\n/* Homepage Search */\n\nexport type StzhHomepageSearchSearchChangeEvent = {\n  component: \"stzh-homepage-search\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\nexport type StzhHomepageSearchSearchChangedEvent = {\n  component: \"stzh-homepage-search\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\n/* App Nav */\nexport type StzhAppNavItem = {\n  text: string;\n  href: string;\n  id?: string;\n  badge?: string;\n  badgeType?: StzhBadgeType;\n  icon?: string;\n  active?: boolean;\n  a11yCurrent?: string;\n};\n\nexport type StzhAppNavItemClickEvent = {\n  component: \"stzh-app-nav\";\n  item: StzhAppNavItem;\n  originalEvent: MouseEvent;\n};\n\n/* PI Pagetitle  */\n\nexport type StzhPiPagetitleMenuItem = {\n  label: string;\n  href?: string;\n  active?: boolean;\n  items?: StzhPiPagetitleMenuItem[];\n  id?: string;\n};\n\n/* Search */\n\nexport type StzhSearchOverlayCloseClickEvent = {\n  component: \"stzh-search\";\n  originalEvent: MouseEvent;\n};\n\n/* Geo Ref Data */\n\nexport type StzhGeoRefDataOverlayCloseClickEvent = {\n  component: \"stzh-geo-ref-data\";\n  originalEvent: MouseEvent;\n};\n\n/* Breadcrumb */\n\nexport type StzhBreadcrumbItem = {\n  label: string;\n  href: string;\n};\n\nexport type StzhBreadcrumbItemClickEvent = {\n  component: \"stzh-breadcrumb\";\n  item: StzhBreadcrumbItem;\n  originalEvent: MouseEvent;\n};\n\n/* Card */\n\nexport type StzhCardHeaderAction = {\n  id: string;\n  label?: string;\n  icon?: string;\n  badge?: string;\n  badgeEmpty?: boolean;\n  badgeType?: StzhBadgeType;\n};\n\nexport type StzhCardSubtitleClickEvent = {\n  component: \"stzh-card\";\n  originalEvent: MouseEvent;\n};\n\nexport type StzhCardCollapseEvent = {\n  component: \"stzh-card\";\n  collapsed: boolean;\n};\n\nexport type StzhCardClickEvent = {\n  component: \"stzh-card\";\n  originalEvent: MouseEvent;\n  href?: string;\n};\n\nexport type StzhCardStarClickEvent = {\n  component: \"stzh-card\";\n  starred: boolean;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhCardHeaderActionClickEvent = {\n  component: \"stzh-card\";\n  action: StzhCardHeaderAction;\n  originalEvent: MouseEvent;\n};\n\n/* Card Navigation */\n\nexport type StzhCardNavigationClickEvent = {\n  component: \"stzh-card-navigation\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhPiCardNavigationClickEvent = {\n  component: \"stzh-pi-content-navigation\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Pi Teaser */\n\nexport type StzhPiTeaserClickEvent = {\n  component: \"stzh-pi-teaser\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Card Superteaser */\n\nexport type StzhCardSuperteaserClickEvent = {\n  component: \"stzh-card-superteaser\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Card Searchresult */\n\nexport type StzhCardSearchresultClickEvent = {\n  component: \"stzh-card-searchresult\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Search */\n\nexport type StzhSearchResult = {\n  html?: string;\n  href?: string;\n  heading?: string;\n  dateline?: string;\n  description?: string;\n  image?: string;\n  imagePosition?: \"default\" | \"right\";\n  tag?: string;\n  topic?: string;\n  service?: string;\n  serviceColor?: string;\n  serviceBackgroundColor?: string;\n  meta?: string[];\n  breadcrumbItems?: StzhBreadcrumbItem[];\n  eventDateStart?: string;\n  eventDateEnd?: string;\n  eventLocation?: string;\n  download?: string;\n  downloadHeading?: string;\n  downloadMeta?: string[];\n};\n\nexport type StzhSearchChipsResult = {\n  label: string;\n  value: string;\n  amount?: number;\n  options?: { text: string; value: string }[];\n};\n\n/* Microsite Teaserlist */\n\nexport type StzhMicrositeTeaserlistTag = {\n  id: string;\n  name: string;\n};\n\nexport type StzhMicrositeTeaserlistItem = {\n  title?: string;\n  description?: string;\n  image?: string;\n  link: string;\n  tags: string[];\n  teaserid: string;\n};\n\n/* Cardlist */\n\nexport type StzhCardlistCollapseAllEvent = {\n  component: \"stzh-cardlist\";\n  allCollapsed: boolean;\n};\n\n/* Calendar */\n\nexport type StzhCalendarChangeEvent = {\n  component: \"stzh-calendar\";\n  valueAsDate: Date;\n  value: string;\n};\n\n/* Datepicker */\n\nexport type StzhDatepickerChangeEvent = {\n  component: \"stzh-datepicker\";\n  value: string;\n  valueAsDate: Date;\n};\n\n/* Pagination */\n\nexport type StzhPaginationChangeEvent = {\n  component: \"stzh-pagination\";\n  page: number;\n};\n\n/* Timepicker */\n\nexport type StzhTimepickerChangeEvent = {\n  component: \"stzh-timepicker\";\n  value: string;\n};\n\n/* Monthyearpicker */\n\nexport type StzhMonthyearpickerChangeEvent = {\n  component: \"stzh-monthyearpicker\";\n  value: string;\n  valueMonth: string;\n  valueYear: string;\n};\n\n/* Amount */\n\nexport type StzhAmountChangeEvent = {\n  component: \"stzh-amount\";\n  value: string;\n};\n\n/* Appointments */\n\nexport type StzhAppointmentsChangeEvent = {\n  component: \"stzh-appointments\";\n  value: string;\n};\n\nexport type StzhAppointment = {\n  value: string;\n  start: Date | string;\n  end: Date | string;\n  place?: string;\n  caption?: string;\n  disabled?: boolean;\n}\n\n/* Skiplink */\n\nexport type StzhSkiplinkFocusEvent = {\n  component: \"stzh-skiplink\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhSkiplinkBlurEvent = {\n  component: \"stzh-skiplink\";\n  originalEvent: FocusEvent;\n};\n\n/* Checkbox */\n\nexport type StzhCheckboxChangeEvent = {\n  component: \"stzh-checkbox\";\n  originalEvent: InputEvent | Event;\n  value: string;\n  checked: boolean;\n};\n\nexport type StzhCheckboxFocusEvent = {\n  component: \"stzh-checkbox\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhCheckboxBlurEvent = {\n  component: \"stzh-checkbox\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhCheckboxgroupChangeEvent = {\n  component: \"stzh-checkboxgroup\";\n  value: string[];\n};\n\n/* Toggle */\n\nexport type StzhToggleChangeEvent = {\n  component: \"stzh-toggle\";\n  originalEvent: InputEvent;\n  value: string;\n  checked: boolean;\n};\n\nexport type StzhToggleFocusEvent = {\n  component: \"stzh-toggle\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhToggleBlurEvent = {\n  component: \"stzh-toggle\";\n  originalEvent: FocusEvent;\n};\n\n/* Button */\n\nexport type StzhButtonVariant =\n  | \"default\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"tertiary-plain\";\nexport type StzhButtonSize = \"default\" | \"small\" | \"tiny\";\n\nexport type StzhButtonFocusEvent = {\n  component: \"stzh-button\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhButtonBlurEvent = {\n  component: \"stzh-button\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhButtonClickEvent = {\n  component: \"stzh-button\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhButtonChangeEvent = {\n  component: \"stzh-button\";\n  originalEvent: InputEvent;\n  value: string;\n  checked: boolean;\n};\n\n/* Link */\n\nexport type StzhLinkSize = \"default\" | \"small\" | \"inherit\";\n\nexport type StzhLinkFocusEvent = {\n  component: \"stzh-link\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhLinkBlurEvent = {\n  component: \"stzh-link\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhLinkClickEvent = {\n  component: \"stzh-link\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Menu (Item) */\n\nexport type StzhMenuVariant = \"default\" | \"secondary\";\nexport type StzhMenuSize = \"default\" | \"large\";\n\nexport type StzhMenuItemFocusEvent = {\n  component: \"stzh-menu-item\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhMenuItemBlurEvent = {\n  component: \"stzh-menu-item\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhMenuItemClickEvent = {\n  component: \"stzh-menu-item\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Carousel */\n\nexport type StzhCarouselSlideStartEvent = {\n  component: \"stzh-carousel\";\n  index: number;\n};\n\nexport type StzhCarouselSlidePassedEvent = {\n  component: \"stzh-carousel\";\n  index: number;\n};\n\nexport type StzhCarouselSlideEndEvent = {\n  component: \"stzh-carousel\";\n  index: number;\n};\n\n/* Chipselect */\n\nexport type StzhChipselectItem = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  variant?: StzhChipVariant;\n  type?: StzhChipType;\n  inverted?: boolean;\n  counter?: string;\n  icon?: string;\n  size?: StzhChipSize;\n};\n\nexport type StzhChipselectChangeEvent = {\n  component: \"stzh-chipselect\";\n  value: string[] | string;\n};\n\n/* Gallery */\n\nexport type StzhGalleryItem = {\n  width: number;\n  height: number;\n  src: string;\n  srcLightbox?: string;\n  srcsetLightbox?: string;\n  alt?: string;\n  copyright?: string;\n  heading?: string;\n  headingLightbox?: string;\n  caption?: string;\n  captionLightbox?: string;\n  lightboxHtml?: string;\n  hideCounter?: boolean;\n};\n\n/* Datalist */\n\nexport type StzhDatalistItemEntry = {\n  value: string;\n  leadingIcon?: string;\n  label?: string;\n  meta?: string;\n  icon?: string;\n  iconLabel?: string;\n  iconTooltip?: string;\n  statusLabel?: string;\n  statusType?: StzhStatusType;\n  href?: string;\n  rel?: string;\n  target?: string;\n  items?: StzhDatalistItemEntry[];\n};\n\nexport type StzhDatalistVariant = \"default\" | \"table\";\nexport type StzhDatalistDirection = \"vertical\" | \"horizontal\";\n\nexport type StzhDatalistVariantChangeEvent = {\n  component: \"stzh-datalist\";\n  value: StzhDatalistVariant;\n};\n\nexport type StzhDatalistBigLabelChangeEvent = {\n  component: \"stzh-datalist\";\n  value: boolean;\n};\n\nexport type StzhDatalistDirectionChangeEvent = {\n  component: \"stzh-datalist\";\n  value: \"vertical\" | \"horizontal\";\n};\n\n/* Datalist Item */\n\nexport type StzhDatalistItemActionClickEvent = {\n  component: \"stzh-datalist-item\";\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatalistItemClickEvent = {\n  component: \"stzh-datalist-item\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Datamessagelist */\n\nexport type StzhDatamessagelistItemEntryMeta = {\n  label: string;\n  value: string;\n};\n\nexport type StzhDatamessagelistItemEntryAction = {\n  id: string | number;\n  icon: string;\n  label: string;\n  badge?: string;\n};\n\nexport type StzhDatamessagelistItemEntryTag = {\n  icon: string;\n  label: string;\n  type?: StzhChipType;\n  inverted?: boolean;\n};\n\nexport type StzhDatamessagelistItemEntryLoadingStatus = {\n  percent: number;\n  label: string;\n  type: \"default\" | \"success\" | \"warning\" | \"error\";\n};\n\nexport type StzhDatamessagelistItemClickEvent = {\n  component: \"stzh-datamessagelist-item\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhDatamessagelistItemActionClickEvent = {\n  component: \"stzh-datamessagelist-item\";\n  action: StzhDatamessagelistItemEntryAction;\n  originalEvent: MouseEvent;\n};\n\n/* Cta */\n\nexport type StzhCtaFocusEvent = {\n  component: \"stzh-cta\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhCtaBlurEvent = {\n  component: \"stzh-cta\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhCtaClickEvent = {\n  component: \"stzh-cta\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Tag */\n\nexport type StzhTagSize = \"default\" | \"large\";\nexport type StzhTagType = \"default\" | \"secondary\";\n\nexport type StzhTagClickEvent = {\n  component: \"stzh-tag\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhTagFocusEvent = {\n  component: \"stzh-tag\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhTagBlurEvent = {\n  component: \"stzh-tag\";\n  originalEvent: FocusEvent;\n};\n\n/* Chip */\n\nexport type StzhChipVariant = \"tag\" | \"filter\" | \"input\";\nexport type StzhChipSize = \"default\" | \"small\" | \"large\";\nexport type StzhChipType = \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport type StzhChipClickEvent = {\n  component: \"stzh-chip\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhChipRemoveEvent = {\n  component: \"stzh-chip\";\n  originalEvent: MouseEvent;\n};\n\nexport type StzhChipFocusEvent = {\n  component: \"stzh-chip\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhChipBlurEvent = {\n  component: \"stzh-chip\";\n  originalEvent: FocusEvent;\n};\n\n/* VBZ Major Ticker */\n\nexport type StzhVbzMajortickerDisturbance = {\n  id: string;\n  head: string;\n  text: string;\n  startDate: Date;\n  endDate: Date;\n  altStart: string;\n  altEnd: string;\n  infoUrl?: VbzTickerInfoUrl;\n};\n\nexport type StzhVbzMajortickerDisturbanceFetchedEvent = {\n  component: \"stzh-vbz-majorticker\";\n  disturbance: StzhVbzMajortickerDisturbance | null;\n};\n\n/* VBZ Ticker */\n\nexport type VbzTickerInfoUrl = {\n  name: string;\n  url: string;\n};\n\nexport type VbzTickerDisturbance = {\n  id: string;\n  head: string;\n  startDate: Date;\n  endDate: Date;\n  altStart: string;\n  altEnd: string;\n  baseType?: string;\n  infoUrl?: VbzTickerInfoUrl;\n  category:\n  | typeof VBZ.DISTURBANCE_INFORMATION\n  | typeof VBZ.DISTURBANCE_CONSTRUCTION\n  | typeof VBZ.DISTURBANCE_NORMAL\n  | typeof VBZ.DISTURBANCE_EVENT\n  | typeof VBZ.DISTURBANCE_BUS;\n};\n\nexport type VbzTickerLine = {\n  line: VBZ.Lines;\n  name: string;\n  disturbances: VbzTickerDisturbance[];\n  // whether normal or big disturbance for this line exist\n  alert: boolean;\n  // 2 = Fernverkehr / 16 = Schiff / 32 = S-Bahn/Reg / 64 = Bus / 128 = Bergbahn / 256 = Nachtnetz / 512 = Tram\n  category: \"2\" | \"16\" | \"32\" | \"64\" | \"128\" | \"256\" | \"512\";\n};\n\n/* VBZ Line Chip */\n\nexport type StzhVbzLinechipLine = {\n  color: string;\n  background: string;\n  comment?: string;\n};\n\nexport type StzhVbzLinechipFocusEvent = {\n  component: \"stzh-vbz-linechip\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhVbzLinechipBlurEvent = {\n  component: \"stzh-vbz-linechip\";\n  originalEvent: FocusEvent;\n};\n\n/* Clamp */\n\nexport type StzhClampClampEvent = {\n  component: \"stzh-clamp\";\n  clamped: boolean;\n};\n\nexport type StzhClampExpandEvent = {\n  component: \"stzh-clamp\";\n  expanded: boolean;\n};\n\n/* Image Comparison */\n\nexport type StzhImagecomparisonChangeEvent = {\n  component: \"stzh-imagecomparison\";\n  originalEvent: InputEvent;\n  value: number;\n};\n\n/* Dialog */\n\nexport type StzhDialogOpenEvent = {\n  component: \"stzh-dialog\";\n};\n\nexport type StzhDialogCloseEvent = {\n  component: \"stzh-dialog\";\n};\n\n/* Contact */\n\nexport type ContactEmail = {\n  label: string;\n  text: string;\n  href?: string;\n  analyticsId?: string;\n};\n\nexport type ContactNumber = {\n  type: \"tel\" | \"fax\";\n  label: string;\n  number: string;\n  analyticsId?: string;\n};\n\nexport type StzhContactAvailabilityItem = {\n  weekday: string;\n  hours: string[];\n};\n\n/* Eventinfo */\n\nexport type StzhEventinfoItemInput = {\n  calendarUrl?: string;\n  calendarLabel?: string;\n  start: string | Date;\n  end: string | Date;\n};\n\nexport type StzhEventinfoItem = {\n  calendarUrl?: string;\n  calendarLabel?: string;\n  start: Date | undefined;\n  end: Date | undefined;\n};\n\nexport type StzhEventinfoMonth = {\n  name: string;\n  events: StzhEventinfoItem[];\n};\n\n/* Overlay */\n\nexport type StzhOverlayOpenEvent = {\n  component: \"stzh-overlay\";\n};\n\nexport type StzhOverlayCloseEvent = {\n  component: \"stzh-overlay\";\n};\n\n/* Banner */\n\nexport type StzhBannerOpenEvent = {\n  component: \"stzh-banner\";\n};\n\nexport type StzhBannerCloseEvent = {\n  component: \"stzh-banner\";\n};\n\n/* Message */\n\nexport type StzhMessageOpenEvent = {\n  component: \"stzh-message\";\n};\n\nexport type StzhMessageCloseEvent = {\n  component: \"stzh-message\";\n};\n\n/* Toastbar */\n\nexport type StzhToastbarInitialToast = {\n  label: string;\n  type?: StzhToastType;\n  link?:\n  | HTMLStzhLinkElement\n  | {\n    href: string;\n    label: string;\n  };\n  cookie?: string;\n  cookieExpires?: number;\n};\n\n/* Disturber */\n\nexport type StzhDisturberOpenEvent = {\n  component: \"stzh-disturber\";\n};\n\nexport type StzhDisturberCloseEvent = {\n  component: \"stzh-disturber\";\n};\n\nexport type StzhDisturberOpenedEvent = {\n  component: \"stzh-disturber\";\n};\n\nexport type StzhDisturberClosedEvent = {\n  component: \"stzh-disturber\";\n};\n\n/* Toast */\n\nexport type StzhToastType = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport type StzhToastOpenEvent = {\n  component: \"stzh-toast\";\n};\n\nexport type StzhToastCloseEvent = {\n  component: \"stzh-toast\";\n};\n\nexport type StzhToastOpenedEvent = {\n  component: \"stzh-toast\";\n};\n\nexport type StzhToastClosedEvent = {\n  component: \"stzh-toast\";\n};\n\n/* Ghettobox */\n\nexport type StzhGhettoboxOpenEvent = {\n  component: \"stzh-ghettobox\";\n};\n\nexport type StzhGhettoboxCloseEvent = {\n  component: \"stzh-ghettobox\";\n};\n\n/* Input */\n\nexport type StzhInputChangeEvent = {\n  component: \"stzh-input\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\nexport type StzhInputChangedEvent = {\n  component: \"stzh-input\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\nexport type StzhInputFocusEvent = {\n  component: \"stzh-input\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhInputBlurEvent = {\n  component: \"stzh-input\";\n  originalEvent: FocusEvent;\n};\n\n/* Popover */\n\nexport type StzhPopoverOpenEvent = {\n  component: \"stzh-popover\";\n};\n\nexport type StzhPopoverOpenedEvent = {\n  component: \"stzh-popover\";\n};\n\nexport type StzhPopoverCloseEvent = {\n  component: \"stzh-popover\";\n};\n\nexport type StzhPopoverClosedEvent = {\n  component: \"stzh-popover\";\n};\n\n/* Timeline */\n\nexport type StzhTimelineFoldableChangeEvent = {\n  component: \"stzh-timeline\";\n  value: boolean;\n};\n\n/* TimelineItem */\n\nexport type StzhTimelineItemOpenEvent = {\n  component: \"stzh-timeline-item\";\n};\n\nexport type StzhTimelineItemOpenedEvent = {\n  component: \"stzh-timeline-item\";\n};\n\nexport type StzhTimelineItemCloseEvent = {\n  component: \"stzh-timeline-item\";\n};\n\nexport type StzhTimelineItemClosedEvent = {\n  component: \"stzh-timeline-item\";\n};\n\nexport type StzhTimelineItemFocusEvent = {\n  component: \"stzh-timeline-item\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhTimelineItemBlurEvent = {\n  component: \"stzh-timeline-item\";\n  originalEvent: FocusEvent;\n};\n\n/* Accordion */\n\nexport type StzhAccordionVariant = \"default\" | \"title\" | \"table\" | \"menu\";\n\nexport type StzhAccordionVariantChangeEvent = {\n  component: \"stzh-accordion\";\n  value: StzhAccordionVariant;\n};\n\nexport type StzhAccordionItemOpenEvent = {\n  component: \"stzh-accordion-item\";\n};\n\nexport type StzhAccordionItemOpenedEvent = {\n  component: \"stzh-accordion-item\";\n};\n\nexport type StzhAccordionItemCloseEvent = {\n  component: \"stzh-accordion-item\";\n};\n\nexport type StzhAccordionItemClosedEvent = {\n  component: \"stzh-accordion-item\";\n};\n\nexport type StzhAccordionItemFocusEvent = {\n  component: \"stzh-accordion-item\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhAccordionItemBlurEvent = {\n  component: \"stzh-accordion-item\";\n  originalEvent: FocusEvent;\n};\n\n/* Pi Menu */\n\nexport type StzhPiMenuOpenEvent = {\n  component: \"stzh-pi-menu\";\n};\n\nexport type StzhPiMenuOpenedEvent = {\n  component: \"stzh-pi-menu\";\n};\n\nexport type StzhPiMenuCloseEvent = {\n  component: \"stzh-pi-menu\";\n};\n\nexport type StzhPiMenuClosedEvent = {\n  component: \"stzh-pi-menu\";\n};\n\nexport type StzhPiMenuItemClickEvent = {\n  component: \"stzh-pi-menu\";\n  originalEvent: MouseEvent;\n};\n\n/* Tooltip */\n\nexport type StzhTooltipOpenEvent = {\n  component: \"stzh-tooltip\";\n};\n\nexport type StzhTooltipOpenedEvent = {\n  component: \"stzh-tooltip\";\n};\n\nexport type StzhTooltipCloseEvent = {\n  component: \"stzh-tooltip\";\n};\n\nexport type StzhTooltipClosedEvent = {\n  component: \"stzh-tooltip\";\n};\n\n/* Radio */\n\nexport type StzhRadioChangeEvent = {\n  component: \"stzh-radio\";\n  originalEvent: InputEvent;\n  value: string;\n  checked: boolean;\n};\n\nexport type StzhRadioFocusEvent = {\n  component: \"stzh-radio\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhRadioBlurEvent = {\n  component: \"stzh-radio\";\n  originalEvent: FocusEvent;\n};\n\n/* Daterange */\n\nexport type StzhDaterangeRanges = \"today\" | \"tomorrow\" | \"next7days\";\n\n/* Dropdown */\n\nexport type StzhDropdownSize = \"default\" | \"small\" | \"tiny\" | StzhChipSize;\n\nexport type StzhDropdownOption = {\n  text: string;\n  value: string;\n  disabled?: boolean;\n};\n\nexport type StzhDropdownChangeEvent = {\n  component: \"stzh-dropdown\";\n  value: string | string[];\n};\n\nexport type StzhDropdownItemAddEvent = {\n  component: \"stzh-dropdown\";\n  value: string;\n};\n\nexport type StzhDropdownItemRemoveEvent = {\n  component: \"stzh-dropdown\";\n  value: string;\n};\n\nexport type StzhDropdownOptionAddEvent = {\n  component: \"stzh-dropdown\";\n  value: string;\n};\n\nexport type StzhDropdownOptionRemoveEvent = {\n  component: \"stzh-dropdown\";\n  value: string;\n};\n\nexport type StzhDropdownOpenEvent = {\n  component: \"stzh-dropdown\";\n};\n\nexport type StzhDropdowCloseEvent = {\n  component: \"stzh-dropdown\";\n};\n\nexport type StzhDropdownFocusEvent = {\n  component: \"stzh-dropdown\";\n  originalEvent: {\n    target: Element;\n  };\n};\n\nexport type StzhDropdownBlurEvent = {\n  component: \"stzh-dropdown\";\n};\n\nexport type StzhDropdowInitEvent = {\n  component: \"stzh-dropdown\";\n};\n\n/** Stepper */\n\nexport type StzhStepperDataItem = {\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  clickDisabled?: boolean;\n  incomplete?: boolean;\n  analyticsId?: string;\n};\n\n/* Stepper Item */\n\nexport type StzhStepperItemClickEvent = {\n  component: \"stzh-stepper-item\";\n  originalEvent: MouseEvent;\n  index: number;\n};\n\nexport type StzhStepperItemDottedClickEvent = {\n  component: \"stzh-stepper-item\";\n  originalEvent: MouseEvent;\n  index: number;\n};\n\n/* Saptcha */\nexport type StzhSaptchaChangeEvent = {\n  component: \"stzh-saptcha\";\n  originalEvent: CustomEvent;\n  value: string;\n};\n\n/* Upload */\n\nexport type StzhUploadFilesItem = {\n  name: string;\n  size: number;\n  [key: string]: any;\n};\n\nexport type StzhUploadFile = File & {\n  xhr: XMLHttpRequest;\n  status: string;\n  upload: any;\n  accepted: boolean;\n  previewElement: HTMLElement;\n  uuid: string;\n  _id: number;\n};\n\nexport type StzhUploadFileAddedEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadFilesAddedEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n};\n\nexport type StzhUploadFileRemoveEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadFileRemovedEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  force: boolean;\n};\n\nexport type StzhUploadSendingEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  xhr: XMLHttpRequest;\n  formData: FormData;\n};\n\nexport type StzhUploadSendingMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n  xhr: XMLHttpRequest;\n  formData: FormData;\n};\n\nexport type StzhUploadProcessingEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadProcessingMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n};\n\nexport type StzhUploadProgressEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  progress: number;\n  bytesSent: number;\n};\n\nexport type StzhUploadProgressTotalEvent = {\n  component: \"stzh-upload\";\n  totalUploadProgress: number;\n  totalBytes: number;\n  totalBytesSent: number;\n};\n\nexport type StzhUploadErrorEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  message: string;\n  xhr: XMLHttpRequest;\n};\n\nexport type StzhUploadErrorMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n  message: string;\n  xhr: XMLHttpRequest;\n};\n\nexport type StzhUploadSuccessEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  responseText: string;\n  event: ProgressEvent;\n};\n\nexport type StzhUploadSuccessMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n  responseText: string;\n  event: ProgressEvent;\n};\n\nexport type StzhUploadCanceledEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadCanceledMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n};\n\nexport type StzhUploadCompleteEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadCompleteMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n};\n\n// Merged Types\n\nexport type StzhFocusEvent =\n  | StzhAccordionItemFocusEvent\n  | StzhButtonFocusEvent\n  | StzhCheckboxFocusEvent\n  | StzhChipFocusEvent\n  | StzhDropdownFocusEvent\n  | StzhInputFocusEvent\n  | StzhLinkFocusEvent\n  | StzhMenuItemFocusEvent\n  | StzhRadioFocusEvent\n  | StzhToggleFocusEvent\n  | StzhVbzLinechipFocusEvent\n  | StzhSkiplinkFocusEvent;\n\n/* GeoRefData */\n\nexport type StzhAvailableTag = {\n  label: string;\n  value: string;\n};\n\nexport type StzhPoiGeoRefData = {\n  poiid: string;\n  category: string;\n  street: string;\n  zip: string;\n  zvv: string;\n  ou: string;\n  poiname: string;\n  poinamezus: string;\n  title: string;\n  description: string;\n  image: string;\n  path: string;\n  date: string;\n  tags: string[];\n  data: { text: string; icon: string }[];\n};\n\nexport type StzhMapGeoRefData = {\n  lat: string;\n  lon: string;\n  poiid: string;\n};\n\nexport type StzhCombinedGeoRefData = StzhPoiGeoRefData & StzhMapGeoRefData;\n\n/* Poi Card and List */\n\nexport type StzhPoiCardItemData = {\n  variant: \"lido\" | \"parking\" | \"iceskating\";\n  url: string;\n  title: string;\n  distance?: string;\n  temp?: string;\n  statusMessage?: string;\n  statusMessageContent?: string;\n  success?: boolean;\n};\n\nexport type StzhPoiListMetaData = {\n  itemsPerPage: number;\n  totalItems: number;\n  currentPage: number;\n  totalPages: number;\n  sortBy: {\n    [key: string]: \"DESC\" | \"ASC\";\n  };\n};\n\nexport type StzhPoiListData = {\n  items: StzhPoiCardItemData[];\n  meta: StzhPoiListMetaData;\n};\n\n/* Bathstatus Item and List */\n\nexport type StzhBathstatusItemData = {\n  url: string;\n  title: string;\n  description?: string;\n  temp?: string;\n  statusMessage?: string;\n  lastUpdate?: string;\n  uvIndexPrediction?: number;\n};\n\nexport type StzhBathstatusListData = {\n  items: StzhBathstatusItemData[];\n};\n\n/* Socialmedia Stream */\n\nexport enum StzhSocialmediastreamItemActionVariant {\n  likes = \"likes\",\n  comments = \"comments\",\n  shares = \"shares\",\n}\n\nexport type StzhSocialmediastreamItemData = {\n  image?: string;\n  link: string;\n  date: string;\n  account: {\n    title: string;\n    handle: string;\n    url: string;\n  };\n  channel: \"facebook\" | \"instagram\" | \"x\" | \"twitter\" | \"youtube\";\n  text: string;\n  actions: {\n    title: string;\n    url: string;\n    variant: StzhSocialmediastreamItemActionVariant;\n    count: number;\n  }[];\n};\n\n// ---\n// Prop Types\n// ---\n\nexport type StzhCalendarDateDisabledPredicate = (date: Date) => boolean;\n\nexport namespace Layout {\n  export type Ratio = \"16:9\" | \"1:1\" | \"5:4\" | \"4:3\" | \"3:2\" | \"2:1\" | \"21:9\";\n\n  export type Justify =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"between\"\n    | \"around\"\n    | \"evenly\";\n\n  export type Items = \"start\" | \"end\" | \"center\" | \"baseline\" | \"stretch\";\n\n  export type JustifySelf = \"auto\" | Justify;\n\n  export type AlignSelf = \"auto\" | Items;\n}\n\nexport namespace Space {\n  export type Sizes =\n    | \"xxxsmall\"\n    | \"xxsmall\"\n    | \"xsmall\"\n    | \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"xlarge\"\n    | \"xxlarge\"\n    | \"xxxlarge\"\n    | \"xxxxlarge\"\n    | \"big\"\n    | \"xbig\"\n    | \"huge\"\n    | \"xhuge\"\n    | \"none\"\n    | \"inherit\";\n\n  export type Curves =\n    | \"tiny\"\n    | \"small\"\n    | \"regular\"\n    | \"medium\"\n    | \"large\"\n    | \"big\"\n    | \"huge\"\n    | \"none\";\n}\n\nexport namespace Font {\n  export type Fonts = \"light\" | \"regular\" | \"medium\" | \"heavy\" | \"default\";\n\n  export type Sizes =\n    | \"pico\"\n    | \"nano\"\n    | \"micro\"\n    | \"milli\"\n    | \"centi\"\n    | \"deci\"\n    | \"regular\"\n    | \"deca\"\n    | \"hecto\"\n    | \"kilo\"\n    | \"mega\"\n    | \"giga\"\n    | \"hero\";\n\n  export type Curves =\n    | \"p1\"\n    | \"p2\"\n    | \"lead\"\n    | \"caption\"\n    | \"h4\"\n    | \"h3\"\n    | \"h2\"\n    | \"h1\"\n    | \"hero\"\n    | \"h1home\"\n    | \"default\"\n    | \"none\";\n}\n\nexport namespace VBZ {\n  export const BASE_TYPE_GLOBAL = \"GLOBAL\";\n\n  export const CHANNEL_TICKER = \"ticker\";\n  export const CHANNEL_INFO_URL_FILTER = \"stadt-zuerich.ch/vbz\";\n\n  export const DISTURBANCE_GLOBAL = \"__global__\";\n  export const DISTURBANCE_INFORMATION = \"0\";\n  export const DISTURBANCE_CONSTRUCTION = \"1\";\n  export const DISTURBANCE_NORMAL = \"2\";\n  export const DISTURBANCE_EVENT = \"4\";\n  export const DISTURBANCE_BUS = \"5\";\n\n  export type Lines =\n    | \"2\"\n    | \"3\"\n    | \"4\"\n    | \"5\"\n    | \"6\"\n    | \"7\"\n    | \"8\"\n    | \"9\"\n    | \"10\"\n    | \"11\"\n    | \"12\"\n    | \"13\"\n    | \"14\"\n    | \"15\"\n    | \"16\"\n    | \"17\"\n    | \"19\"\n    | \"20\"\n    | \"21\"\n    | \"23\"\n    | \"24\"\n    | \"25\"\n    | \"29\"\n    | \"31\"\n    | \"32\"\n    | \"33\"\n    | \"34\"\n    | \"35\"\n    | \"36\"\n    | \"37\"\n    | \"38\"\n    | \"39\"\n    | \"40\"\n    | \"45\"\n    | \"46\"\n    | \"54\"\n    | \"61\"\n    | \"62\"\n    | \"63\"\n    | \"64\"\n    | \"66\"\n    | \"67\"\n    | \"69\"\n    | \"70\"\n    | \"72\"\n    | \"73\"\n    | \"75\"\n    | \"76\"\n    | \"77\"\n    | \"78\"\n    | \"79\"\n    | \"80\"\n    | \"83\"\n    | \"89\"\n    | \"91\"\n    | \"94\"\n    | \"95\"\n    | \"99\"\n    | \"151\"\n    | \"152\"\n    | \"153\"\n    | \"156\"\n    | \"161\"\n    | \"162\"\n    | \"163\"\n    | \"165\"\n    | \"184\"\n    | \"185\"\n    | \"200\"\n    | \"201\"\n    | \"215\"\n    | \"220\"\n    | \"235\"\n    | \"236\"\n    | \"245\"\n    | \"301\"\n    | \"302\"\n    | \"303\"\n    | \"304\"\n    | \"305\"\n    | \"306\"\n    | \"307\"\n    | \"308\"\n    | \"309\"\n    | \"311\"\n    | \"314\"\n    | \"315\"\n    | \"317\"\n    | \"321\"\n    | \"323\"\n    | \"325\"\n    | \"350\"\n    | \"444\"\n    | \"445\"\n    | \"701\"\n    | \"702\"\n    | \"703\"\n    | \"704\"\n    | \"705\"\n    | \"720\"\n    | \"721\"\n    | \"725\"\n    | \"726\"\n    | \"727\"\n    | \"742\"\n    | \"743\"\n    | \"744\"\n    | \"745\"\n    | \"747\"\n    | \"748\"\n    | \"751\"\n    | \"752\"\n    | \"753\"\n    | \"754\"\n    | \"759\"\n    | \"760\"\n    | \"765\"\n    | \"768\"\n    | \"781\"\n    | \"786\"\n    | \"787\"\n    | \"910\"\n    | \"912\"\n    | \"916\"\n    | \"917\"\n    | \"918\"\n    | \"919\"\n    | \"E\"\n    | \"N\"\n    | \"N1\"\n    | \"N2\"\n    | \"N4\"\n    | \"N5\"\n    | \"N6\"\n    | \"N7\"\n    | \"N8\"\n    | \"N9\"\n    | \"N10\"\n    | \"N11\"\n    | \"N12\"\n    | \"N13\"\n    | \"N14\"\n    | \"N15\"\n    | \"N16\"\n    | \"N17\"\n    | \"N18\"\n    | \"N19\"\n    | \"N30\"\n    | \"N31\"\n    | \"N32\"\n    | \"N33\"\n    | \"N34\"\n    | \"N45\"\n    | \"N72\"\n    | \"N78\"\n    | \"SN1\"\n    | \"SN4\"\n    | \"SN5\"\n    | \"SN6\"\n    | \"SN7\"\n    | \"SN8\"\n    | \"SN9\"\n    | \"S2\"\n    | \"S3\"\n    | \"S4\"\n    | \"S5\"\n    | \"S6\"\n    | \"S7\"\n    | \"S8\"\n    | \"S9\"\n    | \"S10\"\n    | \"S11\"\n    | \"S14\"\n    | \"S15\"\n    | \"S16\"\n    | \"S18\"\n    | \"S19\"\n    | \"S20\"\n    | \"S21\"\n    | \"S23\"\n    | \"S24\"\n    | \"S25\";\n}\n\n// ---\n// Teaser layout types\n// ---\n\nexport type PiTeaser = {\n  type: \"teaser\";\n  href: string;\n  dateline?: string;\n  heading: string;\n  date?: string;\n  imageSrc?: string;\n  lead?: string;\n}\n\nexport type EmptyTeaser = {\n  type: \"empty-teaser\";\n}\n\n// ---\n// Stencil component types\n// ---\n\nexport * from \"./components\";\n"],"version":3}
+{"file":"p-f5779736.js","mappings":"AAAA;AACA;AACA;SAkEgB,EAAE,CAAC,WAAmB,EAAE,KAAa;IACnD,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,EAAE,CAAC;KACX;IAED,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACrC,IAAI,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAE3B,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;QACrC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;KACxB;SAAM,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,KAAK,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,EAAE;QAC9D,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;QACrC,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,KAAI,EAAE,CAAC,CAAC;AAC1D,CAAC;AA40DD;IAEY;AAAZ,WAAY,sCAAsC;IAChD,yDAAe,CAAA;IACf,+DAAqB,CAAA;IACrB,2DAAiB,CAAA;AACnB,CAAC,EAJW,sCAAsC,KAAtC,sCAAsC,QAIjD;IA4GgB,IAoMhB;AApMD,WAAiB,GAAG;IACL,oBAAgB,GAAG,QAAQ,CAAC;IAE5B,kBAAc,GAAG,QAAQ,CAAC;IAC1B,2BAAuB,GAAG,sBAAsB,CAAC;IAEjD,sBAAkB,GAAG,YAAY,CAAC;IAClC,2BAAuB,GAAG,GAAG,CAAC;IAC9B,4BAAwB,GAAG,GAAG,CAAC;IAC/B,sBAAkB,GAAG,GAAG,CAAC;IACzB,qBAAiB,GAAG,GAAG,CAAC;IACxB,mBAAe,GAAG,GAAG,CAAC;AAyLrC,CAAC,EApMgB,GAAG,KAAH,GAAG;;;;","names":[],"sources":["src/index.ts"],"sourcesContent":["// ---\n// Global window types\n// ---\n\nexport type StzhLocaleFormats = {\n  datetime?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  datetimeLong?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  datetimeInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  date?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  dateLong?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  dateInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  time?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n  timeInput?: {\n    format: string | StzhDateFormat,\n    parse: string | StzhDateParse\n  },\n}\n\ntype MonthsNames = [string, string, string, string, string, string, string, string, string, string, string, string]\ntype DayNames = [string, string, string, string, string, string, string]\n\nexport type StzhLocaleGlobals = {\n  dateRange: string,\n  timeRange: string,\n  externalLinkLabel: string\n  downloadLinkLabel: string\n  requiredFieldMarker: string\n  requiredFieldText: string\n  optionalFieldMarker: string\n  optionalFieldText: string\n  invalidFieldText: string\n  clearButtonLabel: string\n  moreInfoButtonLabel: string\n  dayNames: DayNames\n  dayNamesShort: DayNames\n  monthNames: MonthsNames\n  monthNamesShort: MonthsNames\n}\n\nexport type StzhLocaleComponent = {\n  $locale: \"de\" | \"en\",\n  $formats: StzhLocaleFormats,\n  $formatsIso: StzhLocaleFormats,\n  $formatsLegacy: StzhLocaleFormats,\n  $globals: StzhLocaleGlobals\n}\n\nexport function tc(translation: string, count: number): string {\n  if (!translation) {\n    return \"\";\n  }\n\n  const parts = translation.split(\"|\");\n  let part = parts[0].trim();\n\n  if (parts.length === 3 && count === 1) {\n    part = parts[1].trim();\n  } else if (parts.length === 3 && (count > 1 || count === null)) {\n    part = parts[2].trim();\n  }\n\n  if (parts.length === 2 && count !== 1) {\n    part = parts[1].trim();\n  }\n\n  return part.replace(/\\{n\\}/ig, count?.toString() || \"\");\n}\n\nexport type StzhDateFormat = ((date: Date, type?: string) => string)\nexport type StzhDateParse = ((input: string, type?: string) => Date | undefined)\n\nexport interface StzhLocaleAdapter {\n  format: StzhDateFormat,\n  parse: StzhDateParse,\n  formatSpan: (date: Date | string, date2: Date | string, type: string) => string\n  parseSpan: (string: string, type: string) => [Date, Date, string]\n}\n\nexport type WindowStzhComponents = {\n  version: string;\n  supportedLocales: string[];\n  defaultLocale: string;\n  translations: null | StzhLocaleComponent;\n  translationsLoading: Promise<StzhLocaleComponent>;\n  pathMedia: string;\n  pathTranslations: string;\n  pathVendors: string;\n  cacheTranslations: boolean;\n  formats: StzhLocaleFormats;\n  fixAutofocus: boolean;\n  fixHashfocus: boolean;\n  utils: {\n    getLocale: (element: HTMLElement) => string;\n    fetchTranslations: (\n      host: HTMLElement,\n      component: string\n    ) => Promise<StzhLocaleComponent & any>;\n\n    format: (date: Date, type: string) => string;\n    parse: (string: string, type: string) => Date;\n    formatSpan: (\n      date: Date | string,\n      date2: Date | string,\n      type: string\n    ) => string;\n    parseSpan: (string: string, type: string) => [Date, Date, string];\n    createFormatParseAdapter: (\n      formats: StzhLocaleFormats,\n      globals: StzhLocaleGlobals\n    ) => StzhLocaleAdapter;\n  };\n};\n\ndeclare global {\n  interface Window {\n    stzhComponents: WindowStzhComponents;\n    stzhReadspeakerHasGlobalBodyObserver: boolean;\n    // global third party library\n    pannellum: any;\n    Dropzone: any;\n    proj4: any;\n    // readspeaker lib APIs\n    readpage: any;\n    ReadSpeaker: any;\n    rsConf: any;\n    rspkr: any;\n  }\n}\n\n// ---\n// Event Types\n// ---\n\n/* Sortable */\n\nexport type StzhSortableUpdateEvent = {\n  component: \"stzh-sortable\";\n  data: string[];\n  item: HTMLElement;\n  newIndex: number;\n  oldIndex: number;\n};\n\nexport type StzhSortableDisableEvent = {\n  component: \"stzh-sortable\";\n  disabled: boolean;\n};\n\n/* Panorama */\n\nexport type PanoramaScene = {\n  sceneId: string;\n  imageSrc: string;\n  imageTitle: string;\n\n  imageAuthor?: string;\n  imageType?: \"equirectangular\" | \"cubemap\" | \"multires\";\n  caption?: string;\n  copyright?: string;\n\n  pitch?: number;\n  yaw?: number;\n  hfov?: number;\n\n  hotspots: PanoramaSceneHotSpot[];\n};\n\nexport type PanoramaScenesLibrary = {\n  [sceneKey: string]: {\n    title?: string;\n    author?: string;\n    panorama: string;\n    type?: \"equirectangular\" | \"cubemap\" | \"multires\";\n\n    pitch?: number;\n    yaw?: number;\n    hfov?: number;\n\n    hotSpots: PanoramaSceneHotSpot[];\n  };\n};\n\nexport type PanoramaSceneHotSpot = {\n  pitch: number;\n  yaw: number;\n  type: string;\n  text: string;\n  url?: string;\n  id?: string;\n  sceneId?: string;\n  targetPitch?: number;\n  targetYaw?: number;\n\n  cssClass?: string;\n  createTooltipFunc?: Function;\n  createTooltipArgs?: any;\n};\n\nexport type StzhPanoramaLoadEvent = {\n  component: \"stzh-panorama\";\n};\n\nexport type StzhPanoramaChangeEvent = {\n  component: \"stzh-panorama\";\n  value: { pitch: number; yaw: number; hfov: number };\n};\n\nexport type StzhPanoramaFullscreenChangeEvent = {\n  component: \"stzh-panorama\";\n  value: boolean;\n};\n\nexport type StzhPanoramaSceneChangeEvent = {\n  component: \"stzh-panorama\";\n  value: string;\n};\n\nexport type StzhPanoramaZoomChangeEvent = {\n  component: \"stzh-panorama\";\n  value: number;\n};\n\n/* Iframe */\n\nexport type StzhIframeView = \"iframe\" | \"cookiewall\" | \"preview\";\n\nexport type StzhIframeViewChangeEvent = {\n  component: \"stzh-iframe\";\n  value: StzhIframeView;\n};\n\nexport type StzhIframePreviewSkipEvent = {\n  component: \"stzh-iframe\";\n};\n\n/* Olmap */\n\nexport type OlmapLayer = {\n  title?: string;\n  thumbnailUrl: string;\n  options: {\n    url: string;\n    layer: string;\n    matrixSet: string;\n    origin: number[];\n    extent: number[];\n  };\n};\n\nexport type StzhOlmapFeatureWithPopover = {\n  id: string;\n  title?: string;\n  text?: string;\n  imageUri?: string;\n  href?: string;\n  data?: { icon: string; text: string }[];\n};\n\nexport type StzhOlmapInitializedEvent = {\n  component: \"stzh-olmap\";\n};\n\nexport type StzhOlmapPostRenderEvent = {\n  component: \"stzh-olmap\";\n};\n\nexport type StzhOlmapMoveStartEvent = {\n  component: \"stzh-olmap\";\n};\n\nexport type StzhOlmapMoveEndEvent = {\n  component: \"stzh-olmap\";\n};\n\nexport type StzhOlmapMovePanZoomEvent = {\n  component: \"stzh-olmap\";\n};\n\n/* Sticky */\n\nexport type StzhStickyStuckTopEvent = {\n  component: \"stzh-sticky\";\n  sticky: boolean;\n};\n\nexport type StzhStickyStuckBottomEvent = {\n  component: \"stzh-sticky\";\n  sticky: boolean;\n};\n\n/* Table */\n\nexport type StzhDatatableCellData = {\n  value: string | number;\n  isHeader?: boolean;\n  align?: \"left\" | \"right\" | \"center\";\n  valign?: \"auto\" | \"middle\" | \"bottom\" | \"top\";\n  colspan?: number;\n  rowspan?: number;\n  id?: string;\n};\n\nexport type StzhDatatableRowData = {\n  [key: string]: StzhDatatableCellData;\n};\n\nexport type StzhDatatableInputRowData = {\n  [key: string]: StzhDatatableCellData | string | number;\n};\n\nexport type StzhDatatableColumnData = {\n  key: string;\n  text?: string;\n  align?: \"left\" | \"right\" | \"center\";\n  valign?: \"auto\" | \"middle\" | \"bottom\" | \"top\";\n  sort?:\n  | boolean\n  | {\n    type?: \"numerical\" | \"text\";\n    field?: string;\n  };\n  fixed?: \"left\" | \"right\";\n  isHeader?: boolean;\n  colspan?: number;\n  rowspan?: number;\n  hideColumnHeading?: boolean;\n  analyticsId?: string;\n  style?: {\n    [key: string]: string;\n  };\n};\n\nexport type StzhDatatableRowClickEvent = {\n  component: \"stzh-datatable\";\n  row: any;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatatableCellClickEvent = {\n  component: \"stzh-datatable\";\n  row: any;\n  column: any;\n  cellIndex: number;\n  rowIndex: number;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatatableHeadingCellClickEvent = {\n  component: \"stzh-datatable\";\n  column: any;\n  index: number;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatatableSortClickEvent = {\n  component: \"stzh-datatable\";\n  column: any;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatatableSortByChangeEvent = {\n  component: \"stzh-datatable\";\n  value: string;\n  oldValue: string;\n};\n\nexport type StzhDatatableSortDirectionChangeEvent = {\n  component: \"stzh-datatable\";\n  value: \"asc\" | \"desc\";\n  oldValue: \"asc\" | \"desc\";\n};\n\n/* Archivelist */\n\nexport type StzhArchivelistItem = {\n  label: string;\n  labelClamp?: any; // attributes of HTMLStzhClampElement\n  href: string;\n  dateline?: string;\n  description?: string;\n  descriptionClamp?: any; // attributes of HTMLStzhClampElement\n};\n\nexport type StzhArchivelistItemClickEvent = {\n  component: \"stzh-archivelist\";\n  item: StzhArchivelistItem;\n  originalEvent: MouseEvent;\n};\n\n/* Anchornav */\n\nexport type StzhAnchornavItem = {\n  label: string;\n  href?: string;\n  icon?: string;\n};\n\nexport type StzhAnchornavItemClickEvent = {\n  component: \"stzh-anchornav\";\n  item: StzhAnchornavItem;\n  originalEvent: MouseEvent;\n};\n\n/* TopnewsMostsearchedSection */\n\nexport type StzhTopnewsItem = {\n  subtitle?: string;\n  label: string;\n  href?: string;\n  isHighlighted?: boolean;\n};\n\nexport type StzhMostsearchedItem = {\n  label: string;\n  href: string;\n};\n\n/* VBZ Quicklinks */\n\nexport type StzhVbzQuicklink = {\n  label: string;\n  href: string;\n};\n\n/* Status */\n\nexport type StzhStatusType =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\n/* Badge */\n\nexport type StzhBadgeType =\n  | \"default\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\n/* Actionset */\n\nexport type StzhActionsetItem = {\n  id: string;\n  label?: string;\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  iconOnly?: boolean;\n  badge?: string;\n  badgeEmpty?: boolean;\n  badgeType?: StzhBadgeType;\n  variant?: StzhButtonVariant;\n  size?: StzhButtonSize;\n  badgePosition?: \"icon\" | \"button\";\n  tooltipContent?: string;\n};\n\nexport type StzhActionsetItemClickEvent = {\n  component: \"stzh-actionset\";\n  action: StzhActionsetItem;\n  originalEvent: MouseEvent;\n};\n\n/* Audio */\n\nexport type StzhAudioPlayEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioPlayingEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioPauseEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioReplayEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioEndEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioEndedEvent = {\n  component: \"stzh-audio\";\n};\n\nexport type StzhAudioErrorEvent = {\n  component: \"stzh-audio\";\n  originalEvent: ErrorEvent;\n};\n\n/* Share */\n\nexport type ShareService =\n  | \"facebook\"\n  | \"twitter\"\n  | \"linkedin\"\n  | \"xing\"\n  | \"mail\";\n\n/* Footer Editor */\n\nexport type StzhEditorLink = {\n  label: string;\n  href?: string;\n  icon?: string;\n  rel?: string;\n  target?: string;\n};\n\n/* Header */\n\nexport type StzhHeaderMenuItem = {\n  label: string;\n  href?: string;\n  items?: StzhHeaderMenuItem[];\n  id?: string;\n};\n\nexport type StzhHeaderMetanavItem = {\n  label: string;\n  labelShort?: string;\n  labelHidden?: boolean;\n  stay?: boolean;\n  stayAndShowInMobileMenu?: boolean;\n  variant?: \"default\" | \"secondary\"; // used for menu-item and popover\n  size?: \"default\" | \"large\"; // used for menu-item and popover\n  important?: boolean;\n  importantSubmenu?: boolean;\n  badgeEmpty?: boolean;\n  badgeType?: StzhBadgeType;\n  badge?: string;\n  icon?: string;\n  iconOpen?: string;\n  href?: string;\n  target?: string;\n  id?: string;\n  items?: StzhHeaderMetanavItemChild[];\n  itemButton?: StzhHeaderMetanavItemButton;\n  itemButtonExtra?: StzhHeaderMetanavItemButton;\n  cssOrder?: boolean;\n};\n\nexport type StzhHeaderMetanavItemChild = {\n  label: string;\n  href?: string;\n  target?: string;\n  id?: string;\n  icon?: string;\n  counter?: number;\n  badge?: string;\n  badgeType?: StzhBadgeType;\n};\n\nexport type StzhHeaderMetanavItemButton = {\n  label: string;\n  href?: string;\n  target?: string;\n  size?: StzhButtonSize;\n  id?: string;\n};\n\nexport type StzhHeaderMetanavItemClickEvent = {\n  component: \"stzh-header\";\n  item: StzhHeaderMetanavItem;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhHeaderMetanavItemChildClickEvent = {\n  component: \"stzh-header\";\n  itemChild: StzhHeaderMetanavItemChild;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhHeaderMetanavItemButtonClickEvent = {\n  component: \"stzh-header\";\n  itemButton: StzhHeaderMetanavItemButton;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhHeaderMenuItemClickEvent = {\n  component: \"stzh-header\";\n  item: StzhHeaderMenuItem;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhHeaderLanguageChangeEvent = {\n  component: \"stzh-header\";\n  value: string;\n};\n\nexport type StzhHeaderSearchChangeEvent = {\n  component: \"stzh-header\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\nexport type StzhHeaderSearchChangedEvent = {\n  component: \"stzh-header\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\n/* Homepage Search */\n\nexport type StzhHomepageSearchSearchChangeEvent = {\n  component: \"stzh-homepage-search\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\nexport type StzhHomepageSearchSearchChangedEvent = {\n  component: \"stzh-homepage-search\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\n/* App Nav */\nexport type StzhAppNavItem = {\n  text: string;\n  href: string;\n  id?: string;\n  badge?: string;\n  badgeType?: StzhBadgeType;\n  icon?: string;\n  active?: boolean;\n  a11yCurrent?: string;\n};\n\nexport type StzhAppNavItemClickEvent = {\n  component: \"stzh-app-nav\";\n  item: StzhAppNavItem;\n  originalEvent: MouseEvent;\n};\n\n/* PI Pagetitle  */\n\nexport type StzhPiPagetitleMenuItem = {\n  label: string;\n  href?: string;\n  active?: boolean;\n  items?: StzhPiPagetitleMenuItem[];\n  id?: string;\n};\n\n/* Search */\n\nexport type StzhSearchOverlayCloseClickEvent = {\n  component: \"stzh-search\";\n  originalEvent: MouseEvent;\n};\n\n/* Geo Ref Data */\n\nexport type StzhGeoRefDataOverlayCloseClickEvent = {\n  component: \"stzh-geo-ref-data\";\n  originalEvent: MouseEvent;\n};\n\n/* Breadcrumb */\n\nexport type StzhBreadcrumbItem = {\n  label: string;\n  href: string;\n};\n\nexport type StzhBreadcrumbItemClickEvent = {\n  component: \"stzh-breadcrumb\";\n  item: StzhBreadcrumbItem;\n  originalEvent: MouseEvent;\n};\n\n/* Card */\n\nexport type StzhCardHeaderAction = {\n  id: string;\n  label?: string;\n  icon?: string;\n  badge?: string;\n  badgeEmpty?: boolean;\n  badgeType?: StzhBadgeType;\n};\n\nexport type StzhCardSubtitleClickEvent = {\n  component: \"stzh-card\";\n  originalEvent: MouseEvent;\n};\n\nexport type StzhCardCollapseEvent = {\n  component: \"stzh-card\";\n  collapsed: boolean;\n};\n\nexport type StzhCardClickEvent = {\n  component: \"stzh-card\";\n  originalEvent: MouseEvent;\n  href?: string;\n};\n\nexport type StzhCardStarClickEvent = {\n  component: \"stzh-card\";\n  starred: boolean;\n  originalEvent: MouseEvent;\n};\n\nexport type StzhCardHeaderActionClickEvent = {\n  component: \"stzh-card\";\n  action: StzhCardHeaderAction;\n  originalEvent: MouseEvent;\n};\n\n/* Card Navigation */\n\nexport type StzhCardNavigationClickEvent = {\n  component: \"stzh-card-navigation\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhPiCardNavigationClickEvent = {\n  component: \"stzh-pi-content-navigation\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Pi Teaser */\n\nexport type StzhPiTeaserClickEvent = {\n  component: \"stzh-pi-teaser\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Pi Teaser Layout Element */\n\nexport type StzhPiTeaserLayoutItemClickEvent = {\n  component: \"stzh-pi-teaser-layout-item\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Card Superteaser */\n\nexport type StzhCardSuperteaserClickEvent = {\n  component: \"stzh-card-superteaser\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Card Searchresult */\n\nexport type StzhCardSearchresultClickEvent = {\n  component: \"stzh-card-searchresult\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Search */\n\nexport type StzhSearchResult = {\n  html?: string;\n  href?: string;\n  heading?: string;\n  dateline?: string;\n  description?: string;\n  image?: string;\n  imagePosition?: \"default\" | \"right\";\n  tag?: string;\n  topic?: string;\n  service?: string;\n  serviceColor?: string;\n  serviceBackgroundColor?: string;\n  meta?: string[];\n  breadcrumbItems?: StzhBreadcrumbItem[];\n  eventDateStart?: string;\n  eventDateEnd?: string;\n  eventLocation?: string;\n  download?: string;\n  downloadHeading?: string;\n  downloadMeta?: string[];\n};\n\nexport type StzhSearchChipsResult = {\n  label: string;\n  value: string;\n  amount?: number;\n  options?: { text: string; value: string }[];\n};\n\n/* Microsite Teaserlist */\n\nexport type StzhMicrositeTeaserlistTag = {\n  id: string;\n  name: string;\n};\n\nexport type StzhMicrositeTeaserlistItem = {\n  title?: string;\n  description?: string;\n  image?: string;\n  link: string;\n  tags: string[];\n  teaserid: string;\n};\n\n/* Cardlist */\n\nexport type StzhCardlistCollapseAllEvent = {\n  component: \"stzh-cardlist\";\n  allCollapsed: boolean;\n};\n\n/* Calendar */\n\nexport type StzhCalendarChangeEvent = {\n  component: \"stzh-calendar\";\n  valueAsDate: Date;\n  value: string;\n};\n\n/* Datepicker */\n\nexport type StzhDatepickerChangeEvent = {\n  component: \"stzh-datepicker\";\n  value: string;\n  valueAsDate: Date;\n};\n\n/* Pagination */\n\nexport type StzhPaginationChangeEvent = {\n  component: \"stzh-pagination\";\n  page: number;\n};\n\n/* Timepicker */\n\nexport type StzhTimepickerChangeEvent = {\n  component: \"stzh-timepicker\";\n  value: string;\n};\n\n/* Monthyearpicker */\n\nexport type StzhMonthyearpickerChangeEvent = {\n  component: \"stzh-monthyearpicker\";\n  value: string;\n  valueMonth: string;\n  valueYear: string;\n};\n\n/* Amount */\n\nexport type StzhAmountChangeEvent = {\n  component: \"stzh-amount\";\n  value: string;\n};\n\n/* Appointments */\n\nexport type StzhAppointmentsChangeEvent = {\n  component: \"stzh-appointments\";\n  value: string;\n};\n\nexport type StzhAppointment = {\n  value: string;\n  start: Date | string;\n  end: Date | string;\n  place?: string;\n  caption?: string;\n  disabled?: boolean;\n}\n\n/* Skiplink */\n\nexport type StzhSkiplinkFocusEvent = {\n  component: \"stzh-skiplink\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhSkiplinkBlurEvent = {\n  component: \"stzh-skiplink\";\n  originalEvent: FocusEvent;\n};\n\n/* Checkbox */\n\nexport type StzhCheckboxChangeEvent = {\n  component: \"stzh-checkbox\";\n  originalEvent: InputEvent | Event;\n  value: string;\n  checked: boolean;\n};\n\nexport type StzhCheckboxFocusEvent = {\n  component: \"stzh-checkbox\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhCheckboxBlurEvent = {\n  component: \"stzh-checkbox\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhCheckboxgroupChangeEvent = {\n  component: \"stzh-checkboxgroup\";\n  value: string[];\n};\n\n/* Toggle */\n\nexport type StzhToggleChangeEvent = {\n  component: \"stzh-toggle\";\n  originalEvent: InputEvent;\n  value: string;\n  checked: boolean;\n};\n\nexport type StzhToggleFocusEvent = {\n  component: \"stzh-toggle\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhToggleBlurEvent = {\n  component: \"stzh-toggle\";\n  originalEvent: FocusEvent;\n};\n\n/* Button */\n\nexport type StzhButtonVariant =\n  | \"default\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"tertiary-plain\";\nexport type StzhButtonSize = \"default\" | \"small\" | \"tiny\";\n\nexport type StzhButtonFocusEvent = {\n  component: \"stzh-button\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhButtonBlurEvent = {\n  component: \"stzh-button\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhButtonClickEvent = {\n  component: \"stzh-button\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhButtonChangeEvent = {\n  component: \"stzh-button\";\n  originalEvent: InputEvent;\n  value: string;\n  checked: boolean;\n};\n\n/* Link */\n\nexport type StzhLinkSize = \"default\" | \"small\" | \"inherit\";\n\nexport type StzhLinkFocusEvent = {\n  component: \"stzh-link\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhLinkBlurEvent = {\n  component: \"stzh-link\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhLinkClickEvent = {\n  component: \"stzh-link\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Menu (Item) */\n\nexport type StzhMenuVariant = \"default\" | \"secondary\";\nexport type StzhMenuSize = \"default\" | \"large\";\n\nexport type StzhMenuItemFocusEvent = {\n  component: \"stzh-menu-item\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhMenuItemBlurEvent = {\n  component: \"stzh-menu-item\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhMenuItemClickEvent = {\n  component: \"stzh-menu-item\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Carousel */\n\nexport type StzhCarouselSlideStartEvent = {\n  component: \"stzh-carousel\";\n  index: number;\n};\n\nexport type StzhCarouselSlidePassedEvent = {\n  component: \"stzh-carousel\";\n  index: number;\n};\n\nexport type StzhCarouselSlideEndEvent = {\n  component: \"stzh-carousel\";\n  index: number;\n};\n\n/* Chipselect */\n\nexport type StzhChipselectItem = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  variant?: StzhChipVariant;\n  type?: StzhChipType;\n  inverted?: boolean;\n  counter?: string;\n  icon?: string;\n  size?: StzhChipSize;\n};\n\nexport type StzhChipselectChangeEvent = {\n  component: \"stzh-chipselect\";\n  value: string[] | string;\n};\n\n/* Gallery */\n\nexport type StzhGalleryItem = {\n  width: number;\n  height: number;\n  src: string;\n  srcLightbox?: string;\n  srcsetLightbox?: string;\n  alt?: string;\n  copyright?: string;\n  heading?: string;\n  headingLightbox?: string;\n  caption?: string;\n  captionLightbox?: string;\n  lightboxHtml?: string;\n  hideCounter?: boolean;\n};\n\n/* Datalist */\n\nexport type StzhDatalistItemEntry = {\n  value: string;\n  leadingIcon?: string;\n  label?: string;\n  meta?: string;\n  icon?: string;\n  iconLabel?: string;\n  iconTooltip?: string;\n  statusLabel?: string;\n  statusType?: StzhStatusType;\n  href?: string;\n  rel?: string;\n  target?: string;\n  items?: StzhDatalistItemEntry[];\n};\n\nexport type StzhDatalistVariant = \"default\" | \"table\";\nexport type StzhDatalistDirection = \"vertical\" | \"horizontal\";\n\nexport type StzhDatalistVariantChangeEvent = {\n  component: \"stzh-datalist\";\n  value: StzhDatalistVariant;\n};\n\nexport type StzhDatalistBigLabelChangeEvent = {\n  component: \"stzh-datalist\";\n  value: boolean;\n};\n\nexport type StzhDatalistDirectionChangeEvent = {\n  component: \"stzh-datalist\";\n  value: \"vertical\" | \"horizontal\";\n};\n\n/* Datalist Item */\n\nexport type StzhDatalistItemActionClickEvent = {\n  component: \"stzh-datalist-item\";\n  originalEvent: MouseEvent;\n};\n\nexport type StzhDatalistItemClickEvent = {\n  component: \"stzh-datalist-item\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Datamessagelist */\n\nexport type StzhDatamessagelistItemEntryMeta = {\n  label: string;\n  value: string;\n};\n\nexport type StzhDatamessagelistItemEntryAction = {\n  id: string | number;\n  icon: string;\n  label: string;\n  badge?: string;\n};\n\nexport type StzhDatamessagelistItemEntryTag = {\n  icon: string;\n  label: string;\n  type?: StzhChipType;\n  inverted?: boolean;\n};\n\nexport type StzhDatamessagelistItemEntryLoadingStatus = {\n  percent: number;\n  label: string;\n  type: \"default\" | \"success\" | \"warning\" | \"error\";\n};\n\nexport type StzhDatamessagelistItemClickEvent = {\n  component: \"stzh-datamessagelist-item\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhDatamessagelistItemActionClickEvent = {\n  component: \"stzh-datamessagelist-item\";\n  action: StzhDatamessagelistItemEntryAction;\n  originalEvent: MouseEvent;\n};\n\n/* Cta */\n\nexport type StzhCtaFocusEvent = {\n  component: \"stzh-cta\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhCtaBlurEvent = {\n  component: \"stzh-cta\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhCtaClickEvent = {\n  component: \"stzh-cta\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\n/* Tag */\n\nexport type StzhTagSize = \"default\" | \"large\";\nexport type StzhTagType = \"default\" | \"secondary\";\n\nexport type StzhTagClickEvent = {\n  component: \"stzh-tag\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhTagFocusEvent = {\n  component: \"stzh-tag\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhTagBlurEvent = {\n  component: \"stzh-tag\";\n  originalEvent: FocusEvent;\n};\n\n/* Chip */\n\nexport type StzhChipVariant = \"tag\" | \"filter\" | \"input\";\nexport type StzhChipSize = \"default\" | \"small\" | \"large\";\nexport type StzhChipType = \"default\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport type StzhChipClickEvent = {\n  component: \"stzh-chip\";\n  originalEvent: MouseEvent;\n  href: string;\n};\n\nexport type StzhChipRemoveEvent = {\n  component: \"stzh-chip\";\n  originalEvent: MouseEvent;\n};\n\nexport type StzhChipFocusEvent = {\n  component: \"stzh-chip\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhChipBlurEvent = {\n  component: \"stzh-chip\";\n  originalEvent: FocusEvent;\n};\n\n/* VBZ Major Ticker */\n\nexport type StzhVbzMajortickerDisturbance = {\n  id: string;\n  head: string;\n  text: string;\n  startDate: Date;\n  endDate: Date;\n  altStart: string;\n  altEnd: string;\n  infoUrl?: VbzTickerInfoUrl;\n};\n\nexport type StzhVbzMajortickerDisturbanceFetchedEvent = {\n  component: \"stzh-vbz-majorticker\";\n  disturbance: StzhVbzMajortickerDisturbance | null;\n};\n\n/* VBZ Ticker */\n\nexport type VbzTickerInfoUrl = {\n  name: string;\n  url: string;\n};\n\nexport type VbzTickerDisturbance = {\n  id: string;\n  head: string;\n  startDate: Date;\n  endDate: Date;\n  altStart: string;\n  altEnd: string;\n  baseType?: string;\n  infoUrl?: VbzTickerInfoUrl;\n  category:\n  | typeof VBZ.DISTURBANCE_INFORMATION\n  | typeof VBZ.DISTURBANCE_CONSTRUCTION\n  | typeof VBZ.DISTURBANCE_NORMAL\n  | typeof VBZ.DISTURBANCE_EVENT\n  | typeof VBZ.DISTURBANCE_BUS;\n};\n\nexport type VbzTickerLine = {\n  line: VBZ.Lines;\n  name: string;\n  disturbances: VbzTickerDisturbance[];\n  // whether normal or big disturbance for this line exist\n  alert: boolean;\n  // 2 = Fernverkehr / 16 = Schiff / 32 = S-Bahn/Reg / 64 = Bus / 128 = Bergbahn / 256 = Nachtnetz / 512 = Tram\n  category: \"2\" | \"16\" | \"32\" | \"64\" | \"128\" | \"256\" | \"512\";\n};\n\n/* VBZ Line Chip */\n\nexport type StzhVbzLinechipLine = {\n  color: string;\n  background: string;\n  comment?: string;\n};\n\nexport type StzhVbzLinechipFocusEvent = {\n  component: \"stzh-vbz-linechip\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhVbzLinechipBlurEvent = {\n  component: \"stzh-vbz-linechip\";\n  originalEvent: FocusEvent;\n};\n\n/* Clamp */\n\nexport type StzhClampClampEvent = {\n  component: \"stzh-clamp\";\n  clamped: boolean;\n};\n\nexport type StzhClampExpandEvent = {\n  component: \"stzh-clamp\";\n  expanded: boolean;\n};\n\n/* Image Comparison */\n\nexport type StzhImagecomparisonChangeEvent = {\n  component: \"stzh-imagecomparison\";\n  originalEvent: InputEvent;\n  value: number;\n};\n\n/* Dialog */\n\nexport type StzhDialogOpenEvent = {\n  component: \"stzh-dialog\";\n};\n\nexport type StzhDialogCloseEvent = {\n  component: \"stzh-dialog\";\n};\n\n/* Contact */\n\nexport type ContactEmail = {\n  label: string;\n  text: string;\n  href?: string;\n  analyticsId?: string;\n};\n\nexport type ContactNumber = {\n  type: \"tel\" | \"fax\";\n  label: string;\n  number: string;\n  analyticsId?: string;\n};\n\nexport type StzhContactAvailabilityItem = {\n  weekday: string;\n  hours: string[];\n};\n\n/* Eventinfo */\n\nexport type StzhEventinfoItemInput = {\n  calendarUrl?: string;\n  calendarLabel?: string;\n  start: string | Date;\n  end: string | Date;\n};\n\nexport type StzhEventinfoItem = {\n  calendarUrl?: string;\n  calendarLabel?: string;\n  start: Date | undefined;\n  end: Date | undefined;\n};\n\nexport type StzhEventinfoMonth = {\n  name: string;\n  events: StzhEventinfoItem[];\n};\n\n/* Overlay */\n\nexport type StzhOverlayOpenEvent = {\n  component: \"stzh-overlay\";\n};\n\nexport type StzhOverlayCloseEvent = {\n  component: \"stzh-overlay\";\n};\n\n/* Banner */\n\nexport type StzhBannerOpenEvent = {\n  component: \"stzh-banner\";\n};\n\nexport type StzhBannerCloseEvent = {\n  component: \"stzh-banner\";\n};\n\n/* Message */\n\nexport type StzhMessageOpenEvent = {\n  component: \"stzh-message\";\n};\n\nexport type StzhMessageCloseEvent = {\n  component: \"stzh-message\";\n};\n\n/* Toastbar */\n\nexport type StzhToastbarInitialToast = {\n  label: string;\n  type?: StzhToastType;\n  link?:\n  | HTMLStzhLinkElement\n  | {\n    href: string;\n    label: string;\n  };\n  cookie?: string;\n  cookieExpires?: number;\n};\n\n/* Disturber */\n\nexport type StzhDisturberOpenEvent = {\n  component: \"stzh-disturber\";\n};\n\nexport type StzhDisturberCloseEvent = {\n  component: \"stzh-disturber\";\n};\n\nexport type StzhDisturberOpenedEvent = {\n  component: \"stzh-disturber\";\n};\n\nexport type StzhDisturberClosedEvent = {\n  component: \"stzh-disturber\";\n};\n\n/* Toast */\n\nexport type StzhToastType = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport type StzhToastOpenEvent = {\n  component: \"stzh-toast\";\n};\n\nexport type StzhToastCloseEvent = {\n  component: \"stzh-toast\";\n};\n\nexport type StzhToastOpenedEvent = {\n  component: \"stzh-toast\";\n};\n\nexport type StzhToastClosedEvent = {\n  component: \"stzh-toast\";\n};\n\n/* Ghettobox */\n\nexport type StzhGhettoboxOpenEvent = {\n  component: \"stzh-ghettobox\";\n};\n\nexport type StzhGhettoboxCloseEvent = {\n  component: \"stzh-ghettobox\";\n};\n\n/* Input */\n\nexport type StzhInputChangeEvent = {\n  component: \"stzh-input\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\nexport type StzhInputChangedEvent = {\n  component: \"stzh-input\";\n  originalEvent: InputEvent | MouseEvent;\n  value: string;\n};\n\nexport type StzhInputFocusEvent = {\n  component: \"stzh-input\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhInputBlurEvent = {\n  component: \"stzh-input\";\n  originalEvent: FocusEvent;\n};\n\n/* Popover */\n\nexport type StzhPopoverOpenEvent = {\n  component: \"stzh-popover\";\n};\n\nexport type StzhPopoverOpenedEvent = {\n  component: \"stzh-popover\";\n};\n\nexport type StzhPopoverCloseEvent = {\n  component: \"stzh-popover\";\n};\n\nexport type StzhPopoverClosedEvent = {\n  component: \"stzh-popover\";\n};\n\n/* Timeline */\n\nexport type StzhTimelineFoldableChangeEvent = {\n  component: \"stzh-timeline\";\n  value: boolean;\n};\n\n/* TimelineItem */\n\nexport type StzhTimelineItemOpenEvent = {\n  component: \"stzh-timeline-item\";\n};\n\nexport type StzhTimelineItemOpenedEvent = {\n  component: \"stzh-timeline-item\";\n};\n\nexport type StzhTimelineItemCloseEvent = {\n  component: \"stzh-timeline-item\";\n};\n\nexport type StzhTimelineItemClosedEvent = {\n  component: \"stzh-timeline-item\";\n};\n\nexport type StzhTimelineItemFocusEvent = {\n  component: \"stzh-timeline-item\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhTimelineItemBlurEvent = {\n  component: \"stzh-timeline-item\";\n  originalEvent: FocusEvent;\n};\n\n/* Accordion */\n\nexport type StzhAccordionVariant = \"default\" | \"title\" | \"table\" | \"menu\";\n\nexport type StzhAccordionVariantChangeEvent = {\n  component: \"stzh-accordion\";\n  value: StzhAccordionVariant;\n};\n\nexport type StzhAccordionItemOpenEvent = {\n  component: \"stzh-accordion-item\";\n};\n\nexport type StzhAccordionItemOpenedEvent = {\n  component: \"stzh-accordion-item\";\n};\n\nexport type StzhAccordionItemCloseEvent = {\n  component: \"stzh-accordion-item\";\n};\n\nexport type StzhAccordionItemClosedEvent = {\n  component: \"stzh-accordion-item\";\n};\n\nexport type StzhAccordionItemFocusEvent = {\n  component: \"stzh-accordion-item\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhAccordionItemBlurEvent = {\n  component: \"stzh-accordion-item\";\n  originalEvent: FocusEvent;\n};\n\n/* Pi Menu */\n\nexport type StzhPiMenuOpenEvent = {\n  component: \"stzh-pi-menu\";\n};\n\nexport type StzhPiMenuOpenedEvent = {\n  component: \"stzh-pi-menu\";\n};\n\nexport type StzhPiMenuCloseEvent = {\n  component: \"stzh-pi-menu\";\n};\n\nexport type StzhPiMenuClosedEvent = {\n  component: \"stzh-pi-menu\";\n};\n\nexport type StzhPiMenuItemClickEvent = {\n  component: \"stzh-pi-menu\";\n  originalEvent: MouseEvent;\n};\n\n/* Tooltip */\n\nexport type StzhTooltipOpenEvent = {\n  component: \"stzh-tooltip\";\n};\n\nexport type StzhTooltipOpenedEvent = {\n  component: \"stzh-tooltip\";\n};\n\nexport type StzhTooltipCloseEvent = {\n  component: \"stzh-tooltip\";\n};\n\nexport type StzhTooltipClosedEvent = {\n  component: \"stzh-tooltip\";\n};\n\n/* Radio */\n\nexport type StzhRadioChangeEvent = {\n  component: \"stzh-radio\";\n  originalEvent: InputEvent;\n  value: string;\n  checked: boolean;\n};\n\nexport type StzhRadioFocusEvent = {\n  component: \"stzh-radio\";\n  originalEvent: FocusEvent;\n};\n\nexport type StzhRadioBlurEvent = {\n  component: \"stzh-radio\";\n  originalEvent: FocusEvent;\n};\n\n/* Daterange */\n\nexport type StzhDaterangeRanges = \"today\" | \"tomorrow\" | \"next7days\";\n\n/* Dropdown */\n\nexport type StzhDropdownSize = \"default\" | \"small\" | \"tiny\" | StzhChipSize;\n\nexport type StzhDropdownOption = {\n  text: string;\n  value: string;\n  disabled?: boolean;\n};\n\nexport type StzhDropdownChangeEvent = {\n  component: \"stzh-dropdown\";\n  value: string | string[];\n};\n\nexport type StzhDropdownItemAddEvent = {\n  component: \"stzh-dropdown\";\n  value: string;\n};\n\nexport type StzhDropdownItemRemoveEvent = {\n  component: \"stzh-dropdown\";\n  value: string;\n};\n\nexport type StzhDropdownOptionAddEvent = {\n  component: \"stzh-dropdown\";\n  value: string;\n};\n\nexport type StzhDropdownOptionRemoveEvent = {\n  component: \"stzh-dropdown\";\n  value: string;\n};\n\nexport type StzhDropdownOpenEvent = {\n  component: \"stzh-dropdown\";\n};\n\nexport type StzhDropdowCloseEvent = {\n  component: \"stzh-dropdown\";\n};\n\nexport type StzhDropdownFocusEvent = {\n  component: \"stzh-dropdown\";\n  originalEvent: {\n    target: Element;\n  };\n};\n\nexport type StzhDropdownBlurEvent = {\n  component: \"stzh-dropdown\";\n};\n\nexport type StzhDropdowInitEvent = {\n  component: \"stzh-dropdown\";\n};\n\n/** Stepper */\n\nexport type StzhStepperDataItem = {\n  label: string;\n  icon?: string;\n  disabled?: boolean;\n  clickDisabled?: boolean;\n  incomplete?: boolean;\n  analyticsId?: string;\n};\n\n/* Stepper Item */\n\nexport type StzhStepperItemClickEvent = {\n  component: \"stzh-stepper-item\";\n  originalEvent: MouseEvent;\n  index: number;\n};\n\nexport type StzhStepperItemDottedClickEvent = {\n  component: \"stzh-stepper-item\";\n  originalEvent: MouseEvent;\n  index: number;\n};\n\n/* Saptcha */\nexport type StzhSaptchaChangeEvent = {\n  component: \"stzh-saptcha\";\n  originalEvent: CustomEvent;\n  value: string;\n};\n\n/* Upload */\n\nexport type StzhUploadFilesItem = {\n  name: string;\n  size: number;\n  [key: string]: any;\n};\n\nexport type StzhUploadFile = File & {\n  xhr: XMLHttpRequest;\n  status: string;\n  upload: any;\n  accepted: boolean;\n  previewElement: HTMLElement;\n  uuid: string;\n  _id: number;\n};\n\nexport type StzhUploadFileAddedEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadFilesAddedEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n};\n\nexport type StzhUploadFileRemoveEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadFileRemovedEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  force: boolean;\n};\n\nexport type StzhUploadSendingEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  xhr: XMLHttpRequest;\n  formData: FormData;\n};\n\nexport type StzhUploadSendingMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n  xhr: XMLHttpRequest;\n  formData: FormData;\n};\n\nexport type StzhUploadProcessingEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadProcessingMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n};\n\nexport type StzhUploadProgressEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  progress: number;\n  bytesSent: number;\n};\n\nexport type StzhUploadProgressTotalEvent = {\n  component: \"stzh-upload\";\n  totalUploadProgress: number;\n  totalBytes: number;\n  totalBytesSent: number;\n};\n\nexport type StzhUploadErrorEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  message: string;\n  xhr: XMLHttpRequest;\n};\n\nexport type StzhUploadErrorMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n  message: string;\n  xhr: XMLHttpRequest;\n};\n\nexport type StzhUploadSuccessEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n  responseText: string;\n  event: ProgressEvent;\n};\n\nexport type StzhUploadSuccessMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n  responseText: string;\n  event: ProgressEvent;\n};\n\nexport type StzhUploadCanceledEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadCanceledMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n};\n\nexport type StzhUploadCompleteEvent = {\n  component: \"stzh-upload\";\n  file: StzhUploadFile;\n};\n\nexport type StzhUploadCompleteMultipleEvent = {\n  component: \"stzh-upload\";\n  files: StzhUploadFile[];\n};\n\n// Merged Types\n\nexport type StzhFocusEvent =\n  | StzhAccordionItemFocusEvent\n  | StzhButtonFocusEvent\n  | StzhCheckboxFocusEvent\n  | StzhChipFocusEvent\n  | StzhDropdownFocusEvent\n  | StzhInputFocusEvent\n  | StzhLinkFocusEvent\n  | StzhMenuItemFocusEvent\n  | StzhRadioFocusEvent\n  | StzhToggleFocusEvent\n  | StzhVbzLinechipFocusEvent\n  | StzhSkiplinkFocusEvent;\n\n/* GeoRefData */\n\nexport type StzhAvailableTag = {\n  label: string;\n  value: string;\n};\n\nexport type StzhPoiGeoRefData = {\n  poiid: string;\n  category: string;\n  street: string;\n  zip: string;\n  zvv: string;\n  ou: string;\n  poiname: string;\n  poinamezus: string;\n  title: string;\n  description: string;\n  image: string;\n  path: string;\n  date: string;\n  tags: string[];\n  data: { text: string; icon: string }[];\n};\n\nexport type StzhMapGeoRefData = {\n  lat: string;\n  lon: string;\n  poiid: string;\n};\n\nexport type StzhCombinedGeoRefData = StzhPoiGeoRefData & StzhMapGeoRefData;\n\n/* Poi Card and List */\n\nexport type StzhPoiCardItemData = {\n  variant: \"lido\" | \"parking\" | \"iceskating\";\n  url: string;\n  title: string;\n  distance?: string;\n  temp?: string;\n  statusMessage?: string;\n  statusMessageContent?: string;\n  success?: boolean;\n};\n\nexport type StzhPoiListMetaData = {\n  itemsPerPage: number;\n  totalItems: number;\n  currentPage: number;\n  totalPages: number;\n  sortBy: {\n    [key: string]: \"DESC\" | \"ASC\";\n  };\n};\n\nexport type StzhPoiListData = {\n  items: StzhPoiCardItemData[];\n  meta: StzhPoiListMetaData;\n};\n\n/* Bathstatus Item and List */\n\nexport type StzhBathstatusItemData = {\n  url: string;\n  title: string;\n  description?: string;\n  temp?: string;\n  statusMessage?: string;\n  lastUpdate?: string;\n  uvIndexPrediction?: number;\n};\n\nexport type StzhBathstatusListData = {\n  items: StzhBathstatusItemData[];\n};\n\n/* Socialmedia Stream */\n\nexport enum StzhSocialmediastreamItemActionVariant {\n  likes = \"likes\",\n  comments = \"comments\",\n  shares = \"shares\",\n}\n\nexport type StzhSocialmediastreamItemData = {\n  image?: string;\n  link: string;\n  date: string;\n  account: {\n    title: string;\n    handle: string;\n    url: string;\n  };\n  channel: \"facebook\" | \"instagram\" | \"x\" | \"twitter\" | \"youtube\";\n  text: string;\n  actions: {\n    title: string;\n    url: string;\n    variant: StzhSocialmediastreamItemActionVariant;\n    count: number;\n  }[];\n};\n\n// ---\n// Prop Types\n// ---\n\nexport type StzhCalendarDateDisabledPredicate = (date: Date) => boolean;\n\nexport namespace Layout {\n  export type Ratio = \"16:9\" | \"1:1\" | \"5:4\" | \"4:3\" | \"3:2\" | \"2:1\" | \"21:9\";\n\n  export type Justify =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"between\"\n    | \"around\"\n    | \"evenly\";\n\n  export type Items = \"start\" | \"end\" | \"center\" | \"baseline\" | \"stretch\";\n\n  export type JustifySelf = \"auto\" | Justify;\n\n  export type AlignSelf = \"auto\" | Items;\n}\n\nexport namespace Space {\n  export type Sizes =\n    | \"xxxsmall\"\n    | \"xxsmall\"\n    | \"xsmall\"\n    | \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"xlarge\"\n    | \"xxlarge\"\n    | \"xxxlarge\"\n    | \"xxxxlarge\"\n    | \"big\"\n    | \"xbig\"\n    | \"huge\"\n    | \"xhuge\"\n    | \"none\"\n    | \"inherit\";\n\n  export type Curves =\n    | \"tiny\"\n    | \"small\"\n    | \"regular\"\n    | \"medium\"\n    | \"large\"\n    | \"big\"\n    | \"huge\"\n    | \"none\";\n}\n\nexport namespace Font {\n  export type Fonts = \"light\" | \"regular\" | \"medium\" | \"heavy\" | \"default\";\n\n  export type Sizes =\n    | \"pico\"\n    | \"nano\"\n    | \"micro\"\n    | \"milli\"\n    | \"centi\"\n    | \"deci\"\n    | \"regular\"\n    | \"deca\"\n    | \"hecto\"\n    | \"kilo\"\n    | \"mega\"\n    | \"giga\"\n    | \"hero\";\n\n  export type Curves =\n    | \"p1\"\n    | \"p2\"\n    | \"lead\"\n    | \"caption\"\n    | \"h4\"\n    | \"h3\"\n    | \"h2\"\n    | \"h1\"\n    | \"hero\"\n    | \"h1home\"\n    | \"default\"\n    | \"none\";\n}\n\nexport namespace VBZ {\n  export const BASE_TYPE_GLOBAL = \"GLOBAL\";\n\n  export const CHANNEL_TICKER = \"ticker\";\n  export const CHANNEL_INFO_URL_FILTER = \"stadt-zuerich.ch/vbz\";\n\n  export const DISTURBANCE_GLOBAL = \"__global__\";\n  export const DISTURBANCE_INFORMATION = \"0\";\n  export const DISTURBANCE_CONSTRUCTION = \"1\";\n  export const DISTURBANCE_NORMAL = \"2\";\n  export const DISTURBANCE_EVENT = \"4\";\n  export const DISTURBANCE_BUS = \"5\";\n\n  export type Lines =\n    | \"2\"\n    | \"3\"\n    | \"4\"\n    | \"5\"\n    | \"6\"\n    | \"7\"\n    | \"8\"\n    | \"9\"\n    | \"10\"\n    | \"11\"\n    | \"12\"\n    | \"13\"\n    | \"14\"\n    | \"15\"\n    | \"16\"\n    | \"17\"\n    | \"19\"\n    | \"20\"\n    | \"21\"\n    | \"23\"\n    | \"24\"\n    | \"25\"\n    | \"29\"\n    | \"31\"\n    | \"32\"\n    | \"33\"\n    | \"34\"\n    | \"35\"\n    | \"36\"\n    | \"37\"\n    | \"38\"\n    | \"39\"\n    | \"40\"\n    | \"45\"\n    | \"46\"\n    | \"54\"\n    | \"61\"\n    | \"62\"\n    | \"63\"\n    | \"64\"\n    | \"66\"\n    | \"67\"\n    | \"69\"\n    | \"70\"\n    | \"72\"\n    | \"73\"\n    | \"75\"\n    | \"76\"\n    | \"77\"\n    | \"78\"\n    | \"79\"\n    | \"80\"\n    | \"83\"\n    | \"89\"\n    | \"91\"\n    | \"94\"\n    | \"95\"\n    | \"99\"\n    | \"151\"\n    | \"152\"\n    | \"153\"\n    | \"156\"\n    | \"161\"\n    | \"162\"\n    | \"163\"\n    | \"165\"\n    | \"184\"\n    | \"185\"\n    | \"200\"\n    | \"201\"\n    | \"215\"\n    | \"220\"\n    | \"235\"\n    | \"236\"\n    | \"245\"\n    | \"301\"\n    | \"302\"\n    | \"303\"\n    | \"304\"\n    | \"305\"\n    | \"306\"\n    | \"307\"\n    | \"308\"\n    | \"309\"\n    | \"311\"\n    | \"314\"\n    | \"315\"\n    | \"317\"\n    | \"321\"\n    | \"323\"\n    | \"325\"\n    | \"350\"\n    | \"444\"\n    | \"445\"\n    | \"701\"\n    | \"702\"\n    | \"703\"\n    | \"704\"\n    | \"705\"\n    | \"720\"\n    | \"721\"\n    | \"725\"\n    | \"726\"\n    | \"727\"\n    | \"742\"\n    | \"743\"\n    | \"744\"\n    | \"745\"\n    | \"747\"\n    | \"748\"\n    | \"751\"\n    | \"752\"\n    | \"753\"\n    | \"754\"\n    | \"759\"\n    | \"760\"\n    | \"765\"\n    | \"768\"\n    | \"781\"\n    | \"786\"\n    | \"787\"\n    | \"910\"\n    | \"912\"\n    | \"916\"\n    | \"917\"\n    | \"918\"\n    | \"919\"\n    | \"E\"\n    | \"N\"\n    | \"N1\"\n    | \"N2\"\n    | \"N4\"\n    | \"N5\"\n    | \"N6\"\n    | \"N7\"\n    | \"N8\"\n    | \"N9\"\n    | \"N10\"\n    | \"N11\"\n    | \"N12\"\n    | \"N13\"\n    | \"N14\"\n    | \"N15\"\n    | \"N16\"\n    | \"N17\"\n    | \"N18\"\n    | \"N19\"\n    | \"N30\"\n    | \"N31\"\n    | \"N32\"\n    | \"N33\"\n    | \"N34\"\n    | \"N45\"\n    | \"N72\"\n    | \"N78\"\n    | \"SN1\"\n    | \"SN4\"\n    | \"SN5\"\n    | \"SN6\"\n    | \"SN7\"\n    | \"SN8\"\n    | \"SN9\"\n    | \"S2\"\n    | \"S3\"\n    | \"S4\"\n    | \"S5\"\n    | \"S6\"\n    | \"S7\"\n    | \"S8\"\n    | \"S9\"\n    | \"S10\"\n    | \"S11\"\n    | \"S14\"\n    | \"S15\"\n    | \"S16\"\n    | \"S18\"\n    | \"S19\"\n    | \"S20\"\n    | \"S21\"\n    | \"S23\"\n    | \"S24\"\n    | \"S25\";\n}\n\n// ---\n// Teaser layout types\n// ---\n\nexport type PiTeaser = {\n  type: \"teaser\";\n  href: string;\n  dateline?: string;\n  heading: string;\n  date?: string;\n  imageSrc?: string;\n  lead?: string;\n}\n\nexport type EmptyTeaser = {\n  type: \"empty-teaser\";\n}\n\n// ---\n// Stencil component types\n// ---\n\nexport * from \"./components\";\n"],"version":3}

package/dist/components/{p-faae4632.js → p-f625c800.js}

@@ -1,11 +1,11 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
 import { h as hasSlot } from './p-289f5de2.js';
 import { S as StzhInputDescription } from './p-a2148b9d.js';
-import { d as defineCustomElement$5 } from './p-17efbc57.js';
-import { d as defineCustomElement$4 } from './p-e42121d1.js';
-import { d as defineCustomElement$3 } from './p-5a8587ab.js';
-import { d as defineCustomElement$2 } from './p-6268e18b.js';
-import { d as defineCustomElement$1 } from './p-9a31aa56.js';
+import { d as defineCustomElement$5 } from './p-42e86bbd.js';
+import { d as defineCustomElement$4 } from './p-b84d0233.js';
+import { d as defineCustomElement$3 } from './p-a2659715.js';
+import { d as defineCustomElement$2 } from './p-7121e1bf.js';
+import { d as defineCustomElement$1 } from './p-ace11500.js';
 
 const stzhInputCss = ".sc-stzh-input-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-input-h,[stzh-hidden].sc-stzh-input-h{display:none}.sc-stzh-input-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-input-h *.sc-stzh-input,.sc-stzh-input-h *.sc-stzh-input::before,.sc-stzh-input-h *.sc-stzh-input::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-input-h .has-focus.sc-stzh-input{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input{outline-style:none !important}.sc-stzh-input-h .stzh-fylingfocus-focused.sc-stzh-input::-moz-focus-inner{border:0 !important}.sc-stzh-input-h{--text-align:left;--color:var(--stzh-input-color, var(--stzh-color-secondary60));--border-color:var(--stzh-color-grey70);--border-radius:var(--stzh-form-input-border-radius);--background-color:var(--stzh-color-white);--padding-top:var(--stzh-space-xsmall);--padding-bottom:var(--stzh-space-xsmall);--padding-left:var(--stzh-space-medium);--padding-right:var(--stzh-space-medium);--height:var(--stzh-form-input-height);--input-width:100%;--label-color:var(--stzh-input-label-color, var(--stzh-color-primary));--placeholder-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey80);--hover-color:var(--stzh-input-hover-color, var(--stzh-color-secondary60));--hover-border-color:var(\n    --stzh-input-hover-border-color,\n    var(--stzh-color-secondary50)\n  );--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-primary70);--focus-color:var(--stzh-color-black);--focus-border-color:var(--stzh-color-secondary50);--focus-background-color:var(--stzh-color-secondary20);--focus-button-right-color:var(--stzh-color-primary70);--text-selection-background-color:var(--stzh-color-secondary30);width:100%}[type=hidden].sc-stzh-input-h{position:absolute;top:-624.9375rem;left:-624.9375rem;visibility:hidden}[size=small].sc-stzh-input-h{--height:var(--stzh-form-input-small-height)}[is-filled].sc-stzh-input-h:not([is-filled=false]){--button-right-color:var(--stzh-color-primary70);--hover-button-right-color:var(--stzh-color-primary70);--focus-button-right-color:var(--stzh-color-black)}[is-invalid].sc-stzh-input-h{--color:var(--stzh-color-error60);--border-color:var(--stzh-color-error60);--background-color:var(--stzh-color-white);--label-color:var(--stzh-color-error60);--placeholder-color:var(--stzh-color-error60);--button-right-color:var(--stzh-color-error60);--hover-color:var(--stzh-color-error60);--hover-border-color:var(--stzh-color-error60);--hover-background-color:var(--stzh-color-white);--hover-button-right-color:var(--stzh-color-error60);--focus-color:var(--stzh-color-error60);--focus-border-color:var(--stzh-color-error60);--focus-background-color:var(--stzh-color-white);--focus-button-right-color:var(--stzh-color-error60)}[readonly].sc-stzh-input-h:not([readonly=false]),[disabled].sc-stzh-input-h:not([disabled=false]){--color:var(--stzh-color-grey70);--border-color:var(--stzh-color-grey70);--background-color:var(--stzh-color-grey10);--label-color:var(--stzh-color-grey70);--placeholder-color:var(--stzh-color-grey70);--description-color:var(--stzh-color-grey70);--button-right-color:var(--stzh-color-grey70);--hover-color:var(--stzh-color-grey70);--hover-border-color:var(--stzh-color-grey70);--hover-background-color:var(--stzh-color-grey10);--hover-button-right-color:var(--stzh-color-grey70);--focus-color:var(--stzh-color-grey70);--focus-border-color:var(--stzh-color-grey70);--focus-background-color:var(--stzh-color-grey10);--focus-button-right-color:var(--stzh-color-grey70)}.sc-stzh-input-h:is(:has(.stzh-input__input:hover)){--button-right-color:var(--hover-button-right-color)}.sc-stzh-input-h:is(:has(.stzh-input__input:focus)){--button-right-color:var(--focus-button-right-color)}.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right],.stzh-input__button-right.sc-stzh-input{position:absolute;top:0px;right:0px}.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>[slot=button-right] stzh-popover,.sc-stzh-input-h .sc-stzh-input-s>[slot=button-right] stzh-popover{display:block}.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][disabled]:not([disabled=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[disabled]:not([disabled=false]),.stzh-input__button-right.sc-stzh-input,.stzh-input__button-right[disabled].sc-stzh-input:not([disabled=false]){--color:var(--button-right-color);--background-color:transparent;--border-color:transparent;--hover-color:var(--button-right-color);--hover-background-color:transparent;--hover-border-color:transparent}.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-button[slot=button-right][size=default][icon-only]:not([icon-only=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right],.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-popover[slot=button-right] .stzh-popover__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button,.sc-stzh-input-h.sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.sc-stzh-input-h .sc-stzh-input-s>stzh-tooltip[slot=button-right] .stzh-tooltip__trigger stzh-button[icon-only][size=default]:not([icon-only=false]),.stzh-input__button-right[size=default][icon-only].sc-stzh-input:not([icon-only=false]){--icon-size:var(--stzh-icon-size-medium)}.stzh-input__marker-symbol.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium)}.stzh-input__marker-text.sc-stzh-input{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input__description-wrapper.sc-stzh-input{display:flex;flex-direction:column-reverse;min-height:var(--description-min-height, var(--stzh-description-min-height, none))}.stzh-input__error.sc-stzh-input,.stzh-input__description.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-input__error.sc-stzh-input{color:var(--stzh-color-error60)}.stzh-input__error-list.sc-stzh-input{list-style:none;margin:0;padding:0}.stzh-input__description.sc-stzh-input{display:flex;align-items:flex-start;color:var(--stzh-input-description-color, var(--description-color, var(--stzh-color-coolgrey70)));transition:color var(--stzh-base-transition-animation-speed)}.stzh-input__description-long.sc-stzh-input{margin-right:var(--stzh-space-xxsmall);margin-top:0.125rem}@supports (font: -apple-system-body) and (-webkit-appearance: none){.stzh-input__description-long.sc-stzh-input{margin-top:0}}.stzh-input__description-long-popover.sc-stzh-input{--width:auto;--max-width:27.3125rem}.stzh-input__description-long-button.sc-stzh-input{display:flex;justify-content:center;align-items:center;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer}.stzh-input.sc-stzh-input stzh-icon.stzh-input__description-long-icon.sc-stzh-input{--size:var(--stzh-icon-size-xsmall)}.stzh-input--has-error.sc-stzh-input .stzh-input__error.sc-stzh-input,.stzh-input--has-description.sc-stzh-input .stzh-input__description.sc-stzh-input{margin-top:var(--stzh-space-xxxsmall)}.stzh-input.sc-stzh-input .sc-stzh-input::selection{background:var(--text-selection-background-color)}.stzh-input__field-wrapper.sc-stzh-input{position:relative;display:flex;width:var(--input-width)}.stzh-input__input.sc-stzh-input{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);border:0.125rem solid var(--border-color);transition-property:color, border-color, background-color;transition-duration:var(--stzh-base-transition-animation-speed);border-radius:var(--border-radius);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);padding-left:var(--padding-left);padding-right:var(--padding-right);margin:0;width:100%;color:var(--color);background-color:var(--background-color);appearance:none;text-align:var(--text-align)}.stzh-input__input.sc-stzh-input::-webkit-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input::-moz-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:-ms-input-placeholder{color:var(--placeholder-color)}.stzh-input__input.sc-stzh-input:hover{color:var(--hover-color);border-color:var(--hover-border-color);background-color:var(--hover-background-color)}.stzh-input__input.sc-stzh-input:focus{color:var(--focus-color);border-color:var(--focus-border-color);background-color:var(--focus-background-color)}.stzh-input__input.sc-stzh-input:-webkit-autofill{background-clip:text}.stzh-input__input.sc-stzh-input:placeholder-shown{text-overflow:ellipsis}.stzh-input__input[type=search].sc-stzh-input::-webkit-search-decoration,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-cancel-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-button,.stzh-input__input[type=search].sc-stzh-input::-webkit-search-results-decoration{-webkit-appearance:none}.stzh-input__input--input.sc-stzh-input{height:var(--height)}.stzh-input__input--textarea.sc-stzh-input{min-height:var(--height);resize:vertical}.stzh-input__label.sc-stzh-input{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block;color:var(--label-color);width:auto;max-width:100%;margin-bottom:var(--stzh-space-xxxsmall)}.stzh-input__label.no-label-truncate.sc-stzh-input{text-overflow:clip;white-space:normal;overflow:visible}.stzh-input__label.sc-stzh-input:empty{display:none}.stzh-input__marker.sc-stzh-input{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);margin-left:calc(-0.25em + var(--stzh-space-xsmall))}.stzh-input--type-password.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-password.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-clearable.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-not-filled.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-readonly.sc-stzh-input .stzh-input__button-right.sc-stzh-input,.stzh-input--type-search.stzh-input--is-disabled.sc-stzh-input .stzh-input__button-right.sc-stzh-input{pointer-events:none}.stzh-input--has-button-right.sc-stzh-input .stzh-input__input.sc-stzh-input{padding-right:var(--height)}.stzh-input--size-small.sc-stzh-input .stzh-input__input.sc-stzh-input{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-outer-spin-button,.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input.sc-stzh-input::-webkit-inner-spin-button{appearance:none;margin:0}.stzh-input.sc-stzh-input:not(.stzh-input--has-spin) .stzh-input__input[type=number].sc-stzh-input{appearance:textfield}.stzh-input--has-label-hidden.sc-stzh-input .stzh-input__label.sc-stzh-input{border:0;clip:rect(0 0 0 0);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-input--is-readonly.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__input.sc-stzh-input,.stzh-input--is-readonly.sc-stzh-input .stzh-input__label.sc-stzh-input,.stzh-input--is-disabled.sc-stzh-input .stzh-input__label.sc-stzh-input{cursor:not-allowed}";
 const StzhInputStyle0 = stzhInputCss;
@@ -221,15 +221,15 @@ const StzhInput = /*@__PURE__*/ proxyCustomElement(class StzhInput extends H {
             [`stzh-input--size-${this.size}`]: !!this.size,
             [`stzh-input--type-${this.type}`]: !!this.type,
         };
-        return (h(Host, { key: '17df6e3219c089d1791e3533fb099577c892c8c3', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: '55d0301064497397505a75f91ec62b0629e03c18', class: classes }, h("label", { key: '3728b2367e14541d4eb9e782af64eeb2d0218047', class: {
+        return (h(Host, { key: 'c8ff5c6cf276eb2d2d72c5c2bc294a9a77c0ec31', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus, "is-filled": this.filled }, h("div", { key: 'df948658df21c668ac305a01cdc55b8162a19aec', class: classes }, h("label", { key: '9de88ea9e9bf363595a393f80c642c95bb083b18', class: {
                 "stzh-input__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '306d38c386af56938121ad68567a2f73d04dff7b', class: "stzh-input__marker" }, h("span", { key: 'bea49dc3d8ab84702852fa199cf3e9ca1f25be65', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
+            }, htmlFor: this.inputId }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '8a5b00a3a40572563c50e8151244ebaae7b69c4c', class: "stzh-input__marker" }, h("span", { key: '47a7f9eaa1aeb7e3ca6e0998d4e2f87e6c5adc00', class: "stzh-input__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '57de6fba296cf9919913b31ddb2be9b111001649', class: "stzh-input__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '4840d3301f83bfe247e7d4efb33aa5296c642e3d', class: "stzh-input__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), h("div", { key: 'a3e047e750630011f3a9ff59689df5f0d25c589f', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) &&
-            (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || this.description) && (h(StzhInputDescription, { key: 'da996df70a5143981754de29594b80f4dcc79ca3', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
+            : this.localization.$globals.optionalFieldText)))), h("div", { key: '61add2f342230323672b9b4d47e851f4e2ed41c3', class: "stzh-input__field-wrapper" }, this.multiline ? this.renderTextarea() : this.renderInput(), this.clearable || this.type === "search" || this.type === "password" ? ((!this.clearable || this.disabled || this.readonly || !this.filled) &&
+            (this.type === "search" || this.type === "password") ? (h("stzh-button", { class: "stzh-input__button-right", icon: this.type === "search" ? "search" : "view", size: this.size, iconOnly: true, onClick: this.onTogglePasswordVisibilityClick, disabled: this.disabled || this.readonly })) : this.filled ? (h("stzh-button", { class: "stzh-input__button-right", icon: "close", size: this.size, iconOnly: true, onClick: this.onClearClick, a11yLabel: this.localization.$globals.clearButtonLabel, "aria-controls": this.inputId })) : (h("slot", { name: "button-right" }))) : (h("slot", { name: "button-right" }))), (errorUsed || this.description) && (h(StzhInputDescription, { key: '94fa5b40af158681ef33b435dec70eb6e667fe99', classPrefix: "stzh-input", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel })))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -318,4 +318,4 @@ function defineCustomElement() {
 
 export { StzhInput as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-faae4632.js.map
+//# sourceMappingURL=p-f625c800.js.map

package/dist/components/{p-faae4632.js.map → p-f625c800.js.map}

@@ -1 +1 @@
-{"file":"p-faae4632.js","mappings":"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","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n:host {\n  --text-align: left;\n  --color: var(--stzh-input-color, #{$formColor});\n  --border-color: #{$formBorderColor};\n  --border-radius: #{$formInputBorderRadius};\n  --background-color: #{$formBackgroundColor};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n  --height: #{$formInputHeight};\n  --input-width: 100%;\n  --label-color: var(--stzh-input-label-color, #{$formLabelColor});\n  --placeholder-color: #{$formInputPlaceholderColor};\n  --button-right-color: #{$colorGrey80};\n\n  --hover-color: var(--stzh-input-hover-color, #{$formHoverColor});\n  --hover-border-color: var(\n    --stzh-input-hover-border-color,\n    #{$formHoverBorderColor}\n  );\n  --hover-background-color: #{$formHoverBackgroundColor};\n  --hover-button-right-color: #{$colorPrimary70};\n\n  --focus-color: #{$formFocusColor};\n  --focus-border-color: #{$formFocusBorderColor};\n  --focus-background-color: #{$formFocusBackgroundColor};\n  --focus-button-right-color: #{$colorPrimary70};\n\n  --text-selection-background-color: #{$colorSecondary30};\n\n  &[type=\"hidden\"] {\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n    visibility: hidden;\n  }\n\n  width: 100%;\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  /* Filled */\n\n  &[is-filled]:not([is-filled=\"false\"]) {\n    --button-right-color: #{$colorPrimary70};\n    --hover-button-right-color: #{$colorPrimary70};\n    --focus-button-right-color: #{$formFocusColor};\n  }\n\n  /* Invalid */\n\n  &[is-invalid] {\n    --color: #{$colorError60};\n    --border-color: #{$colorError60};\n    --background-color: #{$colorWhite};\n    --label-color: #{$colorError60};\n    --placeholder-color: #{$colorError60};\n    --button-right-color: #{$colorError60};\n\n    --hover-color: #{$colorError60};\n    --hover-border-color: #{$colorError60};\n    --hover-background-color: #{$colorWhite};\n    --hover-button-right-color: #{$colorError60};\n\n    --focus-color: #{$colorError60};\n    --focus-border-color: #{$colorError60};\n    --focus-background-color: #{$colorWhite};\n    --focus-button-right-color: #{$colorError60};\n  }\n\n  &[readonly]:not([readonly=\"false\"]),\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$formDisabledColor};\n    --border-color: #{$formDisabledBorderColor};\n    --background-color: #{$formDisabledBackgroundColor};\n    --label-color: #{$formDisabledColor};\n    --placeholder-color: #{$formDisabledColor};\n    --description-color: #{$formDisabledColor};\n    --button-right-color: #{$colorGrey70};\n\n    --hover-color: #{$formDisabledColor};\n    --hover-border-color: #{$formDisabledBorderColor};\n    --hover-background-color: #{$formDisabledBackgroundColor};\n    --hover-button-right-color: #{$colorGrey70};\n\n    --focus-color: #{$formDisabledColor};\n    --focus-border-color: #{$formDisabledBorderColor};\n    --focus-background-color: #{$formDisabledBackgroundColor};\n    --focus-button-right-color: #{$colorGrey70};\n  }\n\n  /* Internal (Hover / Focus) */\n\n  &:is(:has(.stzh-input__input:hover)) {\n    --button-right-color: var(--hover-button-right-color);\n  }\n\n  &:is(:has(.stzh-input__input:focus)) {\n    --button-right-color: var(--focus-button-right-color);\n  }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n  display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host\n  ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button,\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button[disabled]:not([disabled=\"false\"]),\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button,\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n  --color: var(--button-right-color);\n  --background-color: transparent;\n  --border-color: transparent;\n\n  --hover-color: var(--button-right-color);\n  --hover-background-color: transparent;\n  --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n//   --hover-color: #{$colorGrey80};\n// }\n\n:host\n  ::slotted(\n    stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not(\n        [icon-only=\"false\"]\n      )\n  ),\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n  --icon-size: #{iconSize(\"medium\")};\n}\n\n.stzh-input {\n  @include input-description;\n\n  ::selection {\n    background: var(--text-selection-background-color);\n  }\n\n  &__field-wrapper {\n    position: relative;\n    display: flex;\n    width: var(--input-width);\n  }\n\n  &__input {\n    @include font;\n    @include fontSize(\"milli\");\n    border: 2px solid var(--border-color);\n    transition-property: color, border-color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: var(--border-radius);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    margin: 0;\n    width: 100%;\n    color: var(--color);\n    background-color: var(--background-color);\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: var(--placeholder-color);\n    }\n\n    &:hover {\n      color: var(--hover-color);\n      border-color: var(--hover-border-color);\n      background-color: var(--hover-background-color);\n    }\n\n    &:focus {\n      color: var(--focus-color);\n      border-color: var(--focus-border-color);\n      background-color: var(--focus-background-color);\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n\n    /* Normal inputs */\n\n    &--input {\n      height: var(--height);\n    }\n\n    /* Textarea */\n\n    &--textarea {\n      min-height: var(--height);\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    display: block;\n    color: var(--label-color);\n    width: auto;\n    max-width: 100%;\n    margin-bottom: space(\"xxxsmall\");\n    // position: absolute;\n    // top: calc(#{$formInputHeight} / 2);\n    // // padding-left (medium) + border-left\n    // left: calc(#{space('medium')} + 1px);\n    // max-width: calc(100% - #{space('medium')} * 2);\n    // transform: translateY(-50%);\n    // transition: all $baseTransitionAnimationSpeed;\n    // pointer-events: none;\n\n    &.no-label-truncate {\n      @include resetTruncate;\n    }\n\n    &:empty {\n      display: none;\n    }\n\n    // &::before {\n    //   content: '';\n    //   display: none;\n    //   background: $colorWhite;\n    //   position: absolute;\n    //   width: 100%;\n    //   z-index: -1;\n    //   left: 0;\n    //   top: 50%;\n    //   // prevent white line not fully overlaping border of input\n    //   margin-top: -0.5px;\n    //   height: 2px;\n    // }\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Clearable / Search input / Password  */\n\n  &--type-password#{&}--is-not-filled &__button-right,\n  &--type-password#{&}--is-readonly &__button-right,\n  &--type-password#{&}--is-disabled &__button-right,\n  &--type-search#{&}--is-not-clearable &__button-right,\n  &--type-search#{&}--is-not-filled &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\n  }\n\n  /* Styles for floating label */\n\n  // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--has-fixed-label &__label,\n  // &--is-filled &__label,\n  // &--is-readonly &__label,\n  // &--is-disabled &__label,\n  // &--is-invalid &__label {\n  //   display: block;\n  //   top: 0;\n  //   // padding-left (input field medium) - padding-left\n  //   left: calc(#{space('medium')} - #{space('xxsmall')});\n  //   height: 20px; // dividable by two (so before element is always positioned correctly)\n  //   line-height: 20px;\n  //   padding: 0 space('xxsmall');\n  //   max-width: calc(100% - #{space('small')} * 2);\n  //   pointer-events: all;\n\n  //   &:not(:empty)::before {\n  //     display: block;\n  //   }\n  // }\n\n  /* Button Right Variant */\n\n  &--has-button-right &__input {\n    // distance to icon + icon button width\n    padding-right: var(--height);\n  }\n\n  // &--has-button-right &__label {\n  //   // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n  //   max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n  // }\n\n  // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--has-button-right#{&}--has-fixed-label &__label,\n  // &--has-button-right#{&}--is-filled &__label,\n  // &--has-button-right#{&}--is-readonly &__label,\n  // &--has-button-right#{&}--is-disabled &__label,\n  // &--has-button-right#{&}--is-invalid &__label {\n  //   // 100% - left distance to text + 1px border + padding label right side - icon button width\n  //   max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n  // }\n\n  /* Size variants */\n\n  &--size-small &__input {\n    @include fontSize(\"micro\");\n  }\n\n  // &--size-small &__label {\n  //   top: calc(#{$formInputHeightSmall} / 2);\n  // }\n\n  // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--size-small#{&}--has-fixed-label &__label,\n  // &--size-small#{&}--is-filled &__label,\n  // &--size-small#{&}--is-readonly &__label,\n  // &--size-small#{&}--is-disabled &__label,\n  // &--size-small#{&}--is-invalid &__label {\n  //   top: 0;\n  // }\n\n  // &--size-small#{&}--has-button-right &__label {\n  //   max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n  // }\n\n  // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n  //   max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n  // }\n\n  /* Spin button */\n\n  &:not(#{&}--has-spin) &__input {\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      margin: 0;\n    }\n\n    &[type=\"number\"] {\n      appearance: textfield;\n    }\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-disabled &__input,\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n\n  // &--is-readonly &__label,\n  // &--is-disabled &__label {\n  //   &::before {\n  //     background: transparent;\n  //   }\n  // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true,\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop({ reflect: true }) type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" | \"hidden\" =\n    \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label should be truncate or not */\n  @Prop() noLabelTruncate: boolean = false;\n\n  /** Whether label should be visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  /** Whether to show the password or not */\n  @State() showPassword: boolean;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input changed event */\n  @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    this.filled = newValue !== \"\";\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private onClearClick = async (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onTogglePasswordVisibilityClick = async () => {\n    this.showPassword = !this.showPassword;\n  };\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n    // we also update value, since render doesn't get executed sometimes\n    this.input.value = this.defaultValue;\n\n    // TODO: check if we need own reset event or trigger the change event\n    // (custom browser behaviour doesn't send change event, when reset is executed)\n    // this.stzhChange.emit({\n    //   component: \"stzh-input\",\n    //   originalEvent: event,\n    //   value: this.value\n    // });\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onChange = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n    });\n  };\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={el => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={el => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.showPassword ? \"text\" : this.type}\n        name={this.name}\n        value={this.value}\n        defaultValue={this.defaultValue}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\":\n        buttonRightSlotUsed ||\n        this.type === \"search\" ||\n        (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid || errorUsed,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-not-filled\": !this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--is-not-clearable\": !this.clearable,\n      \"stzh-input--has-label-hidden\": this.labelHidden,\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host\n        is-invalid={this.invalid || errorUsed}\n        tabindex={this.disabled ? null : \"-1\"}\n        onFocus={this.onRootFocus}\n        is-filled={this.filled}\n      >\n        <div class={classes}>\n          <label\n            class={{\n              \"stzh-input__label\": true,\n              \"no-label-truncate\": this.noLabelTruncate,\n            }}\n            htmlFor={this.inputId}\n          >\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional && (\n              <span class=\"stzh-input__marker\">\n                <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker}\n                </span>\n                <span class=\"stzh-input__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText}\n                </span>\n              </span>\n            )}\n          </label>\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            {this.clearable || this.type === \"search\" || this.type === \"password\" ? (\n              (!this.clearable || this.disabled || this.readonly || !this.filled) &&\n              (this.type === \"search\" || this.type === \"password\") ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon={this.type === \"search\" ? \"search\" : \"view\"}\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onTogglePasswordVisibilityClick}\n                  disabled={this.disabled || this.readonly}\n                ></stzh-button>\n              ) : this.filled ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon=\"close\"\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onClearClick}\n                  a11yLabel={this.localization.$globals.clearButtonLabel}\n                  aria-controls={this.inputId}\n                ></stzh-button>\n              ) : (\n                <slot name=\"button-right\"></slot>\n              )\n            ) : (\n              <slot name=\"button-right\"></slot>\n            )}\n          </div>\n          {(errorUsed || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-input\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-f625c800.js","mappings":"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","names":[],"sources":["src/components/stzh-input/stzh-input.scss?tag=stzh-input&encapsulation=scoped","src/components/stzh-input/stzh-input.tsx"],"sourcesContent":["/**\n * @prop --text-align: Text align of field\n * @prop --input-width: Width of of field\n * @prop --padding-top: Padding top of field\n * @prop --padding-bottom: Padding bottom of field\n * @prop --padding-left: Padding left of field\n * @prop --padding-right: Padding right of field\n *\n * @prop --stzh-form-input-height: **Global**: Height of fields & buttons\n * @prop --stzh-form-input-small-height: **Global**: Height of fields & buttons when small variant is used\n * @prop --stzh-form-input-tiny-height: **Global**: Height of fields & buttons when tiny variant is used\n */\n\n:host {\n  --text-align: left;\n  --color: var(--stzh-input-color, #{$formColor});\n  --border-color: #{$formBorderColor};\n  --border-radius: #{$formInputBorderRadius};\n  --background-color: #{$formBackgroundColor};\n  --padding-top: #{space(\"xsmall\")};\n  --padding-bottom: #{space(\"xsmall\")};\n  --padding-left: #{space(\"medium\")};\n  --padding-right: #{space(\"medium\")};\n  --height: #{$formInputHeight};\n  --input-width: 100%;\n  --label-color: var(--stzh-input-label-color, #{$formLabelColor});\n  --placeholder-color: #{$formInputPlaceholderColor};\n  --button-right-color: #{$colorGrey80};\n\n  --hover-color: var(--stzh-input-hover-color, #{$formHoverColor});\n  --hover-border-color: var(\n    --stzh-input-hover-border-color,\n    #{$formHoverBorderColor}\n  );\n  --hover-background-color: #{$formHoverBackgroundColor};\n  --hover-button-right-color: #{$colorPrimary70};\n\n  --focus-color: #{$formFocusColor};\n  --focus-border-color: #{$formFocusBorderColor};\n  --focus-background-color: #{$formFocusBackgroundColor};\n  --focus-button-right-color: #{$colorPrimary70};\n\n  --text-selection-background-color: #{$colorSecondary30};\n\n  &[type=\"hidden\"] {\n    position: absolute;\n    top: -9999px;\n    left: -9999px;\n    visibility: hidden;\n  }\n\n  width: 100%;\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  /* Filled */\n\n  &[is-filled]:not([is-filled=\"false\"]) {\n    --button-right-color: #{$colorPrimary70};\n    --hover-button-right-color: #{$colorPrimary70};\n    --focus-button-right-color: #{$formFocusColor};\n  }\n\n  /* Invalid */\n\n  &[is-invalid] {\n    --color: #{$colorError60};\n    --border-color: #{$colorError60};\n    --background-color: #{$colorWhite};\n    --label-color: #{$colorError60};\n    --placeholder-color: #{$colorError60};\n    --button-right-color: #{$colorError60};\n\n    --hover-color: #{$colorError60};\n    --hover-border-color: #{$colorError60};\n    --hover-background-color: #{$colorWhite};\n    --hover-button-right-color: #{$colorError60};\n\n    --focus-color: #{$colorError60};\n    --focus-border-color: #{$colorError60};\n    --focus-background-color: #{$colorWhite};\n    --focus-button-right-color: #{$colorError60};\n  }\n\n  &[readonly]:not([readonly=\"false\"]),\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$formDisabledColor};\n    --border-color: #{$formDisabledBorderColor};\n    --background-color: #{$formDisabledBackgroundColor};\n    --label-color: #{$formDisabledColor};\n    --placeholder-color: #{$formDisabledColor};\n    --description-color: #{$formDisabledColor};\n    --button-right-color: #{$colorGrey70};\n\n    --hover-color: #{$formDisabledColor};\n    --hover-border-color: #{$formDisabledBorderColor};\n    --hover-background-color: #{$formDisabledBackgroundColor};\n    --hover-button-right-color: #{$colorGrey70};\n\n    --focus-color: #{$formDisabledColor};\n    --focus-border-color: #{$formDisabledBorderColor};\n    --focus-background-color: #{$formDisabledBackgroundColor};\n    --focus-button-right-color: #{$colorGrey70};\n  }\n\n  /* Internal (Hover / Focus) */\n\n  &:is(:has(.stzh-input__input:hover)) {\n    --button-right-color: var(--hover-button-right-color);\n  }\n\n  &:is(:has(.stzh-input__input:focus)) {\n    --button-right-color: var(--focus-button-right-color);\n  }\n}\n\n:host ::slotted([slot=\"button-right\"]),\n.stzh-input__button-right {\n  position: absolute;\n  top: 0px;\n  right: 0px;\n}\n\n:host ::slotted(stzh-popover[slot=\"button-right\"]),\n:host ::slotted([slot=\"button-right\"]) stzh-popover {\n  display: block;\n}\n\n:host ::slotted(stzh-button[slot=\"button-right\"]),\n:host\n  ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button,\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button[disabled]:not([disabled=\"false\"]),\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button,\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button[disabled]:not([disabled=\"false\"]),\n.stzh-input__button-right,\n.stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n  --color: var(--button-right-color);\n  --background-color: transparent;\n  --border-color: transparent;\n\n  --hover-color: var(--button-right-color);\n  --hover-background-color: transparent;\n  --hover-border-color: transparent;\n}\n\n// :host ::slotted(stzh-button[slot=\"button-right\"][disabled]:not([disabled=\"false\"])),\n// :host ::slotted([slot=\"button-right\"]) stzh-button[disabled]:not([disabled=\"false\"]),\n// .stzh-input__button-right[disabled]:not([disabled=\"false\"]) {\n//   --hover-color: #{$colorGrey80};\n// }\n\n:host\n  ::slotted(\n    stzh-button[slot=\"button-right\"][size=\"default\"][icon-only]:not(\n        [icon-only=\"false\"]\n      )\n  ),\n:host\n  ::slotted(stzh-popover[slot=\"button-right\"])\n  .stzh-popover__trigger\n  stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n:host\n  ::slotted(stzh-tooltip[slot=\"button-right\"])\n  .stzh-tooltip__trigger\n  stzh-button[icon-only][size=\"default\"]:not([icon-only=\"false\"]),\n.stzh-input__button-right[size=\"default\"][icon-only]:not([icon-only=\"false\"]) {\n  --icon-size: #{iconSize(\"medium\")};\n}\n\n.stzh-input {\n  @include input-description;\n\n  ::selection {\n    background: var(--text-selection-background-color);\n  }\n\n  &__field-wrapper {\n    position: relative;\n    display: flex;\n    width: var(--input-width);\n  }\n\n  &__input {\n    @include font;\n    @include fontSize(\"milli\");\n    border: 2px solid var(--border-color);\n    transition-property: color, border-color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    border-radius: var(--border-radius);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    margin: 0;\n    width: 100%;\n    color: var(--color);\n    background-color: var(--background-color);\n    appearance: none;\n    text-align: var(--text-align);\n\n    @include placeholder {\n      color: var(--placeholder-color);\n    }\n\n    &:hover {\n      color: var(--hover-color);\n      border-color: var(--hover-border-color);\n      background-color: var(--hover-background-color);\n    }\n\n    &:focus {\n      color: var(--focus-color);\n      border-color: var(--focus-border-color);\n      background-color: var(--focus-background-color);\n    }\n\n    // prevent ugly autofill background color in chrome\n    &:-webkit-autofill {\n      background-clip: text;\n    }\n\n    // show ellipsis for placeholders that are too long\n    &:placeholder-shown {\n      text-overflow: ellipsis;\n    }\n\n    // hide search clear icon on chrome\n    &[type=\"search\"]::-webkit-search-decoration,\n    &[type=\"search\"]::-webkit-search-cancel-button,\n    &[type=\"search\"]::-webkit-search-results-button,\n    &[type=\"search\"]::-webkit-search-results-decoration {\n      -webkit-appearance: none;\n    }\n\n    /* Normal inputs */\n\n    &--input {\n      height: var(--height);\n    }\n\n    /* Textarea */\n\n    &--textarea {\n      min-height: var(--height);\n      resize: vertical;\n    }\n  }\n\n  &__label {\n    @include font(\"heavy\");\n    @include fontSize(\"micro\");\n    @include truncate;\n    display: block;\n    color: var(--label-color);\n    width: auto;\n    max-width: 100%;\n    margin-bottom: space(\"xxxsmall\");\n    // position: absolute;\n    // top: calc(#{$formInputHeight} / 2);\n    // // padding-left (medium) + border-left\n    // left: calc(#{space('medium')} + 1px);\n    // max-width: calc(100% - #{space('medium')} * 2);\n    // transform: translateY(-50%);\n    // transition: all $baseTransitionAnimationSpeed;\n    // pointer-events: none;\n\n    &.no-label-truncate {\n      @include resetTruncate;\n    }\n\n    &:empty {\n      display: none;\n    }\n\n    // &::before {\n    //   content: '';\n    //   display: none;\n    //   background: $colorWhite;\n    //   position: absolute;\n    //   width: 100%;\n    //   z-index: -1;\n    //   left: 0;\n    //   top: 50%;\n    //   // prevent white line not fully overlaping border of input\n    //   margin-top: -0.5px;\n    //   height: 2px;\n    // }\n  }\n\n  &__marker {\n    @include fontSize(\"nano\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Clearable / Search input / Password  */\n\n  &--type-password#{&}--is-not-filled &__button-right,\n  &--type-password#{&}--is-readonly &__button-right,\n  &--type-password#{&}--is-disabled &__button-right,\n  &--type-search#{&}--is-not-clearable &__button-right,\n  &--type-search#{&}--is-not-filled &__button-right,\n  &--type-search#{&}--is-readonly &__button-right,\n  &--type-search#{&}--is-disabled &__button-right {\n    pointer-events: none;\n  }\n\n  /* Styles for floating label */\n\n  // &:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--has-fixed-label &__label,\n  // &--is-filled &__label,\n  // &--is-readonly &__label,\n  // &--is-disabled &__label,\n  // &--is-invalid &__label {\n  //   display: block;\n  //   top: 0;\n  //   // padding-left (input field medium) - padding-left\n  //   left: calc(#{space('medium')} - #{space('xxsmall')});\n  //   height: 20px; // dividable by two (so before element is always positioned correctly)\n  //   line-height: 20px;\n  //   padding: 0 space('xxsmall');\n  //   max-width: calc(100% - #{space('small')} * 2);\n  //   pointer-events: all;\n\n  //   &:not(:empty)::before {\n  //     display: block;\n  //   }\n  // }\n\n  /* Button Right Variant */\n\n  &--has-button-right &__input {\n    // distance to icon + icon button width\n    padding-right: var(--height);\n  }\n\n  // &--has-button-right &__label {\n  //   // 100% - ((padding left of normal variant + border 1px) * 2) - icon button width\n  //   max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeight});\n  // }\n\n  // &--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--has-button-right#{&}--has-fixed-label &__label,\n  // &--has-button-right#{&}--is-filled &__label,\n  // &--has-button-right#{&}--is-readonly &__label,\n  // &--has-button-right#{&}--is-disabled &__label,\n  // &--has-button-right#{&}--is-invalid &__label {\n  //   // 100% - left distance to text + 1px border + padding label right side - icon button width\n  //   max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xxsmall')} - #{$formInputHeight});\n  // }\n\n  /* Size variants */\n\n  &--size-small &__input {\n    @include fontSize(\"micro\");\n  }\n\n  // &--size-small &__label {\n  //   top: calc(#{$formInputHeightSmall} / 2);\n  // }\n\n  // &--size-small#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--size-small#{&}--has-fixed-label &__label,\n  // &--size-small#{&}--is-filled &__label,\n  // &--size-small#{&}--is-readonly &__label,\n  // &--size-small#{&}--is-disabled &__label,\n  // &--size-small#{&}--is-invalid &__label {\n  //   top: 0;\n  // }\n\n  // &--size-small#{&}--has-button-right &__label {\n  //   max-width: calc(100% - (#{space('medium')} + 1px) * 2 - #{$formInputHeightSmall});\n  // }\n\n  // &--size-small#{&}--has-button-right#{&}:not(#{&}--is-readonly):not(#{&}--is-disabled) &__input:focus + &__label,\n  // &--size-small#{&}--has-button-right#{&}--has-fixed-label &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-filled &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-readonly &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-disabled &__label,\n  // &--size-small#{&}--has-button-right#{&}--is-invalid &__label {\n  //   max-width: calc(100% - #{space('medium')} - #{space('xxsmall')} - 1px + #{space('xsmall')} - #{$formInputHeightSmall});\n  // }\n\n  /* Spin button */\n\n  &:not(#{&}--has-spin) &__input {\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      appearance: none;\n      margin: 0;\n    }\n\n    &[type=\"number\"] {\n      appearance: textfield;\n    }\n  }\n\n  /* Hidden label */\n\n  &--has-label-hidden &__label {\n    @include visuallyhidden;\n  }\n\n  /* Readonly / Disabled */\n\n  &--is-readonly &__input,\n  &--is-disabled &__input,\n  &--is-readonly &__label,\n  &--is-disabled &__label {\n    cursor: not-allowed;\n  }\n\n  // &--is-readonly &__label,\n  // &--is-disabled &__label {\n  //   &::before {\n  //     background: transparent;\n  //   }\n  // }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nimport { StzhInputBlurEvent, StzhInputChangedEvent, StzhInputChangeEvent, StzhInputFocusEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"./stzh-input-description\";\n\nlet inputCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n * @slot button-right - Slot for right button\n */\n@Component({\n  tag: \"stzh-input\",\n  styleUrl: \"stzh-input.scss\",\n  scoped: true,\n})\nexport class StzhInput {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the input is a textarea or an input field */\n  @Prop() multiline: boolean = false;\n\n  /** Rows attribute if input element is textarea */\n  @Prop() rows: number;\n\n  /** If input field, this defines the type (if `search`, a search icon will be displayed) */\n  @Prop({ reflect: true }) type: \"text\" | \"search\" | \"password\" | \"email\" | \"url\" | \"tel\" | \"number\" | \"hidden\" =\n    \"text\";\n\n  /** If input type is number, this will be the step size  */\n  @Prop() step: number = 1;\n\n  /** If input type is number, this will be the minimum step number  */\n  @Prop() min: number;\n\n  /** If input type is number, this will be the maximum step number  */\n  @Prop() max: number;\n\n  /** If input type is number and this property is true, this will show the spin buttons on hover/focus */\n  @Prop({ reflect: true }) showSpin: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether clearable button is showing when input field has value and is enabled (button-right slot not usable anymore when true) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Minimum of characters */\n  @Prop() minlength: number;\n\n  /** Maxlength of characters */\n  @Prop() maxlength: number;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\n   * Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specify inputmode.\n   * See [MDN](https://developer.mozilla.org/de/docs/Web/HTML/Global_attributes/inputmode) for possible values\n   */\n  @Prop() inputmode: string;\n\n  /**\n   * Specify what the user agent has to provide as automated assistance.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for possible values\n   */\n  @Prop() autocomplete: string = \"on\";\n\n  /** Whether autocomplete should be turned off  */\n  @Prop() noAutocomplete: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label should be truncate or not */\n  @Prop() noLabelTruncate: boolean = false;\n\n  /** Whether label should be visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Whether the input is filled or not */\n  @State() filled: boolean;\n\n  /** Whether to show the password or not */\n  @State() showPassword: boolean;\n\n  @Element() element: HTMLStzhInputElement;\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhInputChangeEvent>;\n\n  /** Input changed event */\n  @Event() stzhChanged: EventEmitter<StzhInputChangedEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhInputFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhInputBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    this.filled = newValue !== \"\";\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Watch(\"type\")\n  typeWatcher(newValue: string) {\n    const types = [\"text\", \"search\", \"password\", \"email\", \"url\", \"tel\", \"number\", \"hidden\"];\n\n    if (!this.multiline && !types.includes(newValue)) {\n      throw new Error(`Type ${newValue} not supported`);\n    }\n  }\n\n  private input: HTMLInputElement | HTMLTextAreaElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => (this.renderPromiseResolve = resolve));\n  }\n\n  private onClearClick = async (event: MouseEvent) => {\n    this.value = \"\";\n    this.input.focus();\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onTogglePasswordVisibilityClick = async () => {\n    this.showPassword = !this.showPassword;\n  };\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n    // we also update value, since render doesn't get executed sometimes\n    this.input.value = this.defaultValue;\n\n    // TODO: check if we need own reset event or trigger the change event\n    // (custom browser behaviour doesn't send change event, when reset is executed)\n    // this.stzhChange.emit({\n    //   component: \"stzh-input\",\n    //   originalEvent: event,\n    //   value: this.value\n    // });\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onChange = (event: InputEvent) => {\n    this.value = this.input.value;\n\n    this.stzhChanged.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n      value: this.value,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n    });\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    // fixes weird bug where autofill selection doesn't get removed\n    this.input.value = this.input.value;\n\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false,\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-input\",\n      originalEvent: event,\n    });\n  };\n\n  private renderTextarea(): HTMLTextAreaElement {\n    return (\n      <textarea\n        class=\"stzh-input__input stzh-input__input--textarea\"\n        ref={el => (this.input = el as HTMLTextAreaElement)}\n        id={this.inputId}\n        name={this.name}\n        value={this.value}\n        rows={this.rows}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      ></textarea>\n    );\n  }\n\n  private renderInput(): HTMLInputElement {\n    return (\n      <input\n        class=\"stzh-input__input stzh-input__input--input\"\n        ref={el => (this.input = el as HTMLInputElement)}\n        id={this.inputId}\n        type={this.showPassword ? \"text\" : this.type}\n        name={this.name}\n        value={this.value}\n        defaultValue={this.defaultValue}\n        min={this.min}\n        max={this.max}\n        step={this.step}\n        inputmode={this.inputmode}\n        disabled={this.disabled}\n        readonly={this.readonly}\n        minlength={this.minlength}\n        maxlength={this.maxlength}\n        autocomplete={this.noAutocomplete ? \"off\" : this.autocomplete}\n        aria-autocomplete={this.noAutocomplete ? \"none\" : undefined}\n        aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n        aria-required={this.required ? \"true\" : \"false\"}\n        aria-invalid={this.invalid ? \"true\" : \"false\"}\n        onChange={this.onChange}\n        onInput={this.onInput}\n        onFocus={this.onFocus}\n        onBlur={this.onBlur}\n      />\n    );\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-input-${inputCounter++}`;\n    this.typeWatcher(this.type);\n    this.valueWatcher(this.value);\n    this.errorWatcher(this.error);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"input\");\n    }\n  }\n\n  render() {\n    const buttonRightSlotUsed = hasSlot(this.element, \"button-right\");\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-input\": true,\n      \"stzh-input--has-button-right\":\n        buttonRightSlotUsed ||\n        this.type === \"search\" ||\n        (this.clearable && this.filled && !this.readonly && !this.disabled),\n      \"stzh-input--has-description\": descriptionUsed,\n      \"stzh-input--has-description-long\": descriptionLongUsed,\n      \"stzh-input--has-error\": errorUsed,\n      \"stzh-input--has-spin\": this.showSpin,\n      \"stzh-input--is-invalid\": this.invalid || errorUsed,\n      \"stzh-input--is-disabled\": this.disabled,\n      \"stzh-input--is-readonly\": this.readonly,\n      \"stzh-input--is-required\": this.required,\n      \"stzh-input--is-filled\": this.filled,\n      \"stzh-input--is-not-filled\": !this.filled,\n      \"stzh-input--is-clearable\": this.clearable,\n      \"stzh-input--is-not-clearable\": !this.clearable,\n      \"stzh-input--has-label-hidden\": this.labelHidden,\n      [`stzh-input--size-${this.size}`]: !!this.size,\n      [`stzh-input--type-${this.type}`]: !!this.type,\n    };\n\n    return (\n      <Host\n        is-invalid={this.invalid || errorUsed}\n        tabindex={this.disabled ? null : \"-1\"}\n        onFocus={this.onRootFocus}\n        is-filled={this.filled}\n      >\n        <div class={classes}>\n          <label\n            class={{\n              \"stzh-input__label\": true,\n              \"no-label-truncate\": this.noLabelTruncate,\n            }}\n            htmlFor={this.inputId}\n          >\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional && (\n              <span class=\"stzh-input__marker\">\n                <span class=\"stzh-input__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker}\n                </span>\n                <span class=\"stzh-input__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText}\n                </span>\n              </span>\n            )}\n          </label>\n          <div class=\"stzh-input__field-wrapper\">\n            {this.multiline ? this.renderTextarea() : this.renderInput()}\n            {this.clearable || this.type === \"search\" || this.type === \"password\" ? (\n              (!this.clearable || this.disabled || this.readonly || !this.filled) &&\n              (this.type === \"search\" || this.type === \"password\") ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon={this.type === \"search\" ? \"search\" : \"view\"}\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onTogglePasswordVisibilityClick}\n                  disabled={this.disabled || this.readonly}\n                ></stzh-button>\n              ) : this.filled ? (\n                <stzh-button\n                  class=\"stzh-input__button-right\"\n                  icon=\"close\"\n                  size={this.size}\n                  iconOnly={true}\n                  onClick={this.onClearClick}\n                  a11yLabel={this.localization.$globals.clearButtonLabel}\n                  aria-controls={this.inputId}\n                ></stzh-button>\n              ) : (\n                <slot name=\"button-right\"></slot>\n              )\n            ) : (\n              <slot name=\"button-right\"></slot>\n            )}\n          </div>\n          {(errorUsed || this.description) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-input\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-06ba8843.js → p-fae759aa.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-8f01554b.js';
 import { C as Cookie } from './p-979121a0.js';
-import { d as defineCustomElement$4 } from './p-17efbc57.js';
-import { d as defineCustomElement$3 } from './p-e42121d1.js';
-import { d as defineCustomElement$2 } from './p-5a8587ab.js';
-import { d as defineCustomElement$1 } from './p-ef6cfd1f.js';
+import { d as defineCustomElement$4 } from './p-42e86bbd.js';
+import { d as defineCustomElement$3 } from './p-b84d0233.js';
+import { d as defineCustomElement$2 } from './p-a2659715.js';
+import { d as defineCustomElement$1 } from './p-9aa3fad7.js';
 
 const stzhToastbarCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{bottom:var(--stzh-space-medium);z-index:var(--stzh-z-index-overlay);position:fixed;pointer-events:none;left:1.25rem;right:1.25rem;bottom:calc(var(--stzh-pagetitle-disturber-stuck-height, 0px) + var(--stzh-sticky-cta-stuck-bottom-height, 0px))}@media screen and (min-width: 600px){:host{bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){:host{left:2rem;right:auto;max-width:26.8125rem}}@media screen and (min-width: 900px){:host{left:2.5rem;max-width:27.5rem}}@media screen and (min-width: 1260px){:host{left:4rem;max-width:30.3125rem}}@media screen and (min-width: 1600px){:host{left:calc((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2);max-width:34.625rem}}:host ::slotted(*:not([hidden]):not([slot])){margin-bottom:var(--stzh-space-small)}.stzh-toastbar{display:flex;flex-direction:column;justify-content:flex-end}@media screen and (min-width: 600px){.stzh-toastbar{align-items:flex-start}}";
 const StzhToastbarStyle0 = stzhToastbarCss;
@@ -136,7 +136,7 @@ const StzhToastbar = /*@__PURE__*/ proxyCustomElement(class StzhToastbar extends
         const classes = {
             "stzh-toastbar": true,
         };
-        return (h(Host, { key: '124fcfd3e69b89f9e2f258bf7b3064c14316617f' }, h("div", { key: '25339e7b3cc89046176ac92dc5d8033273e5a69b', class: classes }, h("slot", { key: 'ac422019afff84a64ada6095809a5fc5fc744a48', onSlotchange: this.handleSlotchange }))));
+        return (h(Host, { key: '468ff195a06333913d3130270b20995b08459130' }, h("div", { key: '3adaef4757a5fcc24802b0a913da10cee25a25b1', class: classes }, h("slot", { key: 'f506e8ee64bce853eacc5ae24664db928e44173f', onSlotchange: this.handleSlotchange }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -187,4 +187,4 @@ function defineCustomElement() {
 
 export { StzhToastbar as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-06ba8843.js.map
+//# sourceMappingURL=p-fae759aa.js.map