@oiz/stzh-components 2.7.0 → 2.8.0-beta

package/dist/components/index2.js.map

@@ -1 +1 @@
-{"file":"index2.js","mappings":"AAAA;AACA;AACA;IAogCiB,IAoMhB;AApMD,WAAiB,GAAG;EACL,oBAAgB,GAAG,QAAQ,CAAC;EAE5B,kBAAc,GAAG,QAAQ,CAAC;EAC1B,2BAAuB,GAAG,sBAAsB,CAAC;EAEjD,sBAAkB,GAAG,YAAY,CAAC;EAClC,2BAAuB,GAAG,GAAG,CAAC;EAC9B,4BAAwB,GAAG,GAAG,CAAC;EAC/B,sBAAkB,GAAG,GAAG,CAAC;EACzB,qBAAiB,GAAG,GAAG,CAAC;EACxB,mBAAe,GAAG,GAAG,CAAC;AAyLrC,CAAC,EApMgB,GAAG,KAAH,GAAG;;;;","names":[],"sources":["./src/index.ts"],"sourcesContent":["// ---\n// Global window types\n// ---\n\nimport {\n  StzhLocaleFormats\n} from './utils/translation-utils';\n\nexport type WindowStzhComponents = {\n  version: string\n  locale: string\n  pathMedia: string\n  pathTranslations: string\n  cacheTranslations: boolean\n  formats: StzhLocaleFormats\n  labels: \"flyout\" | \"fixed\"\n}\n\ndeclare global {\n  interface Window {\n    stzhComponents: WindowStzhComponents\n    Dropzone: any\n    // readspeaker lib APIs\n    ReadSpeaker: any\n    rspkr: any\n    proj4: 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/* 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 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\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/* 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/* 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?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  variant?:  \"default\" | \"secondary\" | \"input\" | \"tertiary\"\n  size?: \"default\" | \"small\" | \"tiny\"\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 = \"facebook\" | \"twitter\" | \"linkedin\" | \"xing\" | \"mail\";\n\n/* Card */\n\nexport type StzhCardHeaderAction = {\n  id: string\n  label?: string\n  icon?: string\n  badge?: string\n  badgeEmpty?: boolean\n  badgeType?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  onlyCollapseText?: boolean\n}\n\nexport type StzhCardSubtitleClickEvent = {\n  component: \"stzh-card\"\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}\n\nexport type StzhCardStarClickEvent = {\n  component: \"stzh-card\"\n  starred: boolean\n}\n\nexport type StzhCardHeaderActionClickEvent = {\n  component: \"stzh-card\"\n  action: StzhCardHeaderAction\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/* Card List */\n\nexport type StzhCardListCollapseAllEvent = {\n  component: \"stzh-card-list\"\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/* 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\n/* Checkbox */\n\nexport type StzhCheckboxChangeEvent = {\n  component: \"stzh-checkbox\"\n  originalEvent: InputEvent\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\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 StzhButtonFocusEvent = {\n  component: \"stzh-button\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhButtonBlurEvent = {\n  component: \"stzh-button\"\n  originalEvent: FocusEvent\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 StzhLinkFocusEvent = {\n  component: \"stzh-link\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhLinkBlurEvent = {\n  component: \"stzh-link\"\n  originalEvent: FocusEvent\n}\n\n/* Menu Item */\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\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/* Chip Select */\n\nexport type StzhChipSelectChangeEvent = {\n  component: \"stzh-chip-select\"\n  value: string\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  href?: string\n  rel?: string\n  target?: string\n  items?: StzhDatalistItemEntry[]\n}\n\nexport type StzhDatalistDirectionChangeEvent = {\n  component: \"stzh-datalist\"\n  value: \"vertical\" | \"horizontal\"\n}\n\nexport type StzhDatalistHideBorderChangeEvent = {\n  component: \"stzh-datalist\"\n  value: boolean\n}\n\n/* Datalist Item */\n\nexport type StzhDatalistItemActionClickEvent = {\n  component: \"stzh-datalist-item\"\n  originalEvent: MouseEvent\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: \"default\" | \"important\"\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}\n\nexport type StzhDatamessagelistItemActionClickEvent = {\n  component: \"stzh-datamessagelist-item\",\n  action: StzhDatamessagelistItemEntryAction,\n  originalEvent: MouseEvent\n}\n\n/* Chip */\n\nexport type StzhChipSelectItem = {\n  label: string\n  value: string\n  disabled?: boolean\n  variant?: \"tag\" | \"filter\" | \"input\"\n  type?: \"default\" | \"secondary\"\n  counter?: string\n  icon?: string\n  size?: \"default\" | \"small\"\n}\n\nexport type StzhChipClickEvent = {\n  component: \"stzh-chip\",\n  originalEvent: MouseEvent\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/* 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 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/* Overlay */\n\nexport type StzhOverlayOpenEvent = {\n  component: \"stzh-overlay\"\n}\n\nexport type StzhOverlayCloseEvent = {\n  component: \"stzh-overlay\"\n}\n\n/* Message */\n\nexport type StzhMessageOpenEvent = {\n  component: \"stzh-message\"\n}\n\nexport type StzhMessageCloseEvent = {\n  component: \"stzh-message\"\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 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/* Accordion */\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/* 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/* Langnav */\n\nexport type StzhLangnavChangeEvent = {\n  component: \"stzh-langnav\",\n  value: string\n}\n\n/* Dropdown */\n\nexport type StzhDropdownOption = {\n  text: string,\n  value: string\n}\n\nexport type StzhDropdownChangeEvent = {\n  component: \"stzh-dropdown\",\n  value: 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/** Progressbar */\n\nexport type StzhProgressbarDataItem = {\n  label: string\n  icon?: string\n  disabled?: boolean\n  analyticsId?: string\n}\n\n/* Progressbar Item */\n\nexport type StzhProgressbarItemClickEvent = {\n  component: \"stzh-progressbar-item\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhProgressbarItemDottedClickEvent = {\n  component: \"stzh-progressbar-item\",\n  originalEvent: MouseEvent\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}\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\n// ---\n// Prop Types\n// ---\n\nexport type StzhCalendarDateDisabledPredicate = (date: Date) => boolean\n\nexport namespace Layout {\n  export type Justify =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"between\"\n    | \"around\"\n    | \"evenly\";\n\n  export type Items =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"baseline\"\n    | \"stretch\";\n\n  export type JustifySelf =\n    | \"auto\"\n    | Justify;\n\n  export type AlignSelf =\n    | \"auto\"\n    | 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 =\n    | \"light\"\n    | \"regular\"\n    | \"medium\"\n    | \"heavy\"\n    | \"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    | \"inherit\";\n\n  export type Curves =\n    | \"p1\"\n    | \"p2\"\n    | \"caption\"\n    | \"h4\"\n    | \"h3\"\n    | \"h2\"\n    | \"h1\"\n    | \"hero\"\n    | \"default\";\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// Stencil component types\n// ---\n\nexport * from './components';\n"],"version":3}
+{"file":"index2.js","mappings":"AAAA;AACA;AACA;IA6gCiB,IAoMhB;AApMD,WAAiB,GAAG;EACL,oBAAgB,GAAG,QAAQ,CAAC;EAE5B,kBAAc,GAAG,QAAQ,CAAC;EAC1B,2BAAuB,GAAG,sBAAsB,CAAC;EAEjD,sBAAkB,GAAG,YAAY,CAAC;EAClC,2BAAuB,GAAG,GAAG,CAAC;EAC9B,4BAAwB,GAAG,GAAG,CAAC;EAC/B,sBAAkB,GAAG,GAAG,CAAC;EACzB,qBAAiB,GAAG,GAAG,CAAC;EACxB,mBAAe,GAAG,GAAG,CAAC;AAyLrC,CAAC,EApMgB,GAAG,KAAH,GAAG;;;;","names":[],"sources":["./src/index.ts"],"sourcesContent":["// ---\n// Global window types\n// ---\n\nimport {\n  StzhLocaleFormats\n} from './utils/translation-utils';\n\nexport type WindowStzhComponents = {\n  version: string\n  locale: string\n  pathMedia: string\n  pathTranslations: string\n  cacheTranslations: boolean\n  formats: StzhLocaleFormats\n  labels: \"flyout\" | \"fixed\"\n}\n\ndeclare global {\n  interface Window {\n    stzhComponents: WindowStzhComponents\n    Dropzone: any\n    // readspeaker lib APIs\n    ReadSpeaker: any\n    rspkr: any\n    proj4: 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/* 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 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\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/* 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/* 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?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  variant?:  \"default\" | \"secondary\" | \"input\" | \"tertiary\"\n  size?: \"default\" | \"small\" | \"tiny\"\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 = \"facebook\" | \"twitter\" | \"linkedin\" | \"xing\" | \"mail\";\n\n/* Card */\n\nexport type StzhCardHeaderAction = {\n  id: string\n  label?: string\n  icon?: string\n  badge?: string\n  badgeEmpty?: boolean\n  badgeType?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  onlyCollapseText?: boolean\n}\n\nexport type StzhCardSubtitleClickEvent = {\n  component: \"stzh-card\"\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}\n\nexport type StzhCardStarClickEvent = {\n  component: \"stzh-card\"\n  starred: boolean\n}\n\nexport type StzhCardHeaderActionClickEvent = {\n  component: \"stzh-card\"\n  action: StzhCardHeaderAction\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/* Card List */\n\nexport type StzhCardListCollapseAllEvent = {\n  component: \"stzh-card-list\"\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\n/* Checkbox */\n\nexport type StzhCheckboxChangeEvent = {\n  component: \"stzh-checkbox\"\n  originalEvent: InputEvent\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\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 StzhButtonFocusEvent = {\n  component: \"stzh-button\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhButtonBlurEvent = {\n  component: \"stzh-button\"\n  originalEvent: FocusEvent\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 StzhLinkFocusEvent = {\n  component: \"stzh-link\"\n  originalEvent: FocusEvent\n}\n\nexport type StzhLinkBlurEvent = {\n  component: \"stzh-link\"\n  originalEvent: FocusEvent\n}\n\n/* Menu Item */\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\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/* Chip Select */\n\nexport type StzhChipSelectChangeEvent = {\n  component: \"stzh-chip-select\"\n  value: string\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?: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\"\n  href?: string\n  rel?: string\n  target?: string\n  items?: StzhDatalistItemEntry[]\n}\n\nexport type StzhDatalistDirectionChangeEvent = {\n  component: \"stzh-datalist\"\n  value: \"vertical\" | \"horizontal\"\n}\n\nexport type StzhDatalistHideBorderChangeEvent = {\n  component: \"stzh-datalist\"\n  value: boolean\n}\n\n/* Datalist Item */\n\nexport type StzhDatalistItemActionClickEvent = {\n  component: \"stzh-datalist-item\"\n  originalEvent: MouseEvent\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: \"default\" | \"important\"\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}\n\nexport type StzhDatamessagelistItemActionClickEvent = {\n  component: \"stzh-datamessagelist-item\",\n  action: StzhDatamessagelistItemEntryAction,\n  originalEvent: MouseEvent\n}\n\n/* Chip */\n\nexport type StzhChipSelectItem = {\n  label: string\n  value: string\n  disabled?: boolean\n  variant?: \"tag\" | \"filter\" | \"input\"\n  type?: \"default\" | \"secondary\"\n  counter?: string\n  icon?: string\n  size?: \"default\" | \"small\"\n}\n\nexport type StzhChipClickEvent = {\n  component: \"stzh-chip\",\n  originalEvent: MouseEvent\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/* 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 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/* Overlay */\n\nexport type StzhOverlayOpenEvent = {\n  component: \"stzh-overlay\"\n}\n\nexport type StzhOverlayCloseEvent = {\n  component: \"stzh-overlay\"\n}\n\n/* Message */\n\nexport type StzhMessageOpenEvent = {\n  component: \"stzh-message\"\n}\n\nexport type StzhMessageCloseEvent = {\n  component: \"stzh-message\"\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 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/* Accordion */\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/* 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/* Langnav */\n\nexport type StzhLangnavChangeEvent = {\n  component: \"stzh-langnav\",\n  value: string\n}\n\n/* Dropdown */\n\nexport type StzhDropdownOption = {\n  text: string,\n  value: string\n}\n\nexport type StzhDropdownChangeEvent = {\n  component: \"stzh-dropdown\",\n  value: 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/** Progressbar */\n\nexport type StzhProgressbarDataItem = {\n  label: string\n  icon?: string\n  disabled?: boolean\n  analyticsId?: string\n}\n\n/* Progressbar Item */\n\nexport type StzhProgressbarItemClickEvent = {\n  component: \"stzh-progressbar-item\",\n  originalEvent: MouseEvent\n}\n\nexport type StzhProgressbarItemDottedClickEvent = {\n  component: \"stzh-progressbar-item\",\n  originalEvent: MouseEvent\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}\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\n// ---\n// Prop Types\n// ---\n\nexport type StzhCalendarDateDisabledPredicate = (date: Date) => boolean\n\nexport namespace Layout {\n  export type Justify =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"between\"\n    | \"around\"\n    | \"evenly\";\n\n  export type Items =\n    | \"start\"\n    | \"end\"\n    | \"center\"\n    | \"baseline\"\n    | \"stretch\";\n\n  export type JustifySelf =\n    | \"auto\"\n    | Justify;\n\n  export type AlignSelf =\n    | \"auto\"\n    | 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 =\n    | \"light\"\n    | \"regular\"\n    | \"medium\"\n    | \"heavy\"\n    | \"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    | \"inherit\";\n\n  export type Curves =\n    | \"p1\"\n    | \"p2\"\n    | \"caption\"\n    | \"h4\"\n    | \"h3\"\n    | \"h2\"\n    | \"h1\"\n    | \"hero\"\n    | \"default\";\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// Stencil component types\n// ---\n\nexport * from './components';\n"],"version":3}

package/dist/components/string-utils.js

@@ -11,7 +11,19 @@ function camelCase(dashString) {
     return g[1].toUpperCase();
   });
 }
+function abbreviateText(text, length) {
+  if (text.length <= length) {
+    return text;
+  }
+  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');
+  if (lastWhitespaceIndex) {
+    return text.substring(0, lastWhitespaceIndex) + '\u2026';
+  }
+  else {
+    return text.substring(0, length - 1);
+  }
+}
 
-export { createParagraphsFromBrs as a, camelCase as c };
+export { abbreviateText as a, createParagraphsFromBrs as b, camelCase as c };
 
 //# sourceMappingURL=string-utils.js.map

package/dist/components/string-utils.js.map

@@ -1 +1 @@
-{"file":"string-utils.js","mappings":"SAAgB,uBAAuB,CAAC,OAAe;EACrD,MAAM,QAAQ,GAAG,OAAO;KACrB,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC;EAElD,OAAO,MAAM,QAAQ,MAAM,CAAC;AAC9B,CAAC;SAEe,SAAS,CAAC,UAAkB;EAC1C,OAAO,UAAU;KACd,OAAO,CAAC,WAAW,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;GAC3B,CAAC,CAAC;AACP;;;;","names":[],"sources":["./src/utils/string-utils.ts"],"sourcesContent":["export function createParagraphsFromBrs(content: string) {\n  const replaced = content\n    .replace(/^\\s*(?:<br\\s*\\/?>\\s*)*/i, \"\")\n    .replace(/\\s*(?:<br\\s*\\/?>\\s*)*$/i, \"\")\n    .replace(/(?:<br\\s*\\/?>\\s*?){2,}/gi, \"</p><p>\");\n\n  return `<p>${replaced}</p>`;\n}\n\nexport function camelCase(dashString: string) {\n  return dashString\n    .replace(/-([a-z])/g, function (g) {\n      return g[1].toUpperCase();\n    });\n}\n"],"version":3}
+{"file":"string-utils.js","mappings":"SAAgB,uBAAuB,CAAC,OAAe;EACrD,MAAM,QAAQ,GAAG,OAAO;KACrB,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,yBAAyB,EAAE,EAAE,CAAC;KACtC,OAAO,CAAC,0BAA0B,EAAE,SAAS,CAAC,CAAC;EAElD,OAAO,MAAM,QAAQ,MAAM,CAAC;AAC9B,CAAC;SAEe,SAAS,CAAC,UAAkB;EAC1C,OAAO,UAAU;KACd,OAAO,CAAC,WAAW,EAAE,UAAU,CAAC;IAC/B,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;GAC3B,CAAC,CAAC;AACP,CAAC;SAEe,cAAc,CAAC,IAAI,EAAE,MAAM;EACzC,IAAI,IAAI,CAAC,MAAM,IAAI,MAAM,EAAE;IACzB,OAAO,IAAI,CAAC;GACb;EAED,IAAI,mBAAmB,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;EAEzE,IAAI,mBAAmB,EAAE;IACvB,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC;GAC1D;OAAM;IACL,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,CAAC;GACtC;AACH;;;;","names":[],"sources":["./src/utils/string-utils.ts"],"sourcesContent":["export function createParagraphsFromBrs(content: string) {\n  const replaced = content\n    .replace(/^\\s*(?:<br\\s*\\/?>\\s*)*/i, \"\")\n    .replace(/\\s*(?:<br\\s*\\/?>\\s*)*$/i, \"\")\n    .replace(/(?:<br\\s*\\/?>\\s*?){2,}/gi, \"</p><p>\");\n\n  return `<p>${replaced}</p>`;\n}\n\nexport function camelCase(dashString: string) {\n  return dashString\n    .replace(/-([a-z])/g, function (g) {\n      return g[1].toUpperCase();\n    });\n}\n\nexport function abbreviateText(text, length) {\n  if (text.length <= length) {\n    return text;\n  }\n\n  var lastWhitespaceIndex = text.substring(0, length - 1).lastIndexOf(' ');\n\n  if (lastWhitespaceIndex) {\n    return text.substring(0, lastWhitespaceIndex) + '\\u2026';\n  } else {\n    return text.substring(0, length - 1);\n  }\n}\n"],"version":3}

package/dist/components/stzh-amount.js

@@ -8,7 +8,7 @@ import { d as defineCustomElement$4 } from './stzh-icon2.js';
 import { d as defineCustomElement$3 } from './stzh-input2.js';
 import { d as defineCustomElement$2 } from './stzh-popover2.js';
 
-const stzhAmountCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.stzh-amount__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-amount__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-amount__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-amount__error,.stzh-amount__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-amount__error{color:var(--stzh-color-error)}.stzh-amount__error-list{list-style:none;margin:0;padding:0}.stzh-amount__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-amount__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-amount__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-amount__description-long-popover[open]:not([open=false]) .stzh-amount__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-amount__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount stzh-icon.stzh-amount__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-amount--has-error .stzh-amount__error,.stzh-amount--has-description .stzh-amount__description{margin-top:var(--stzh-space-xxsmall)}.stzh-amount__stepper-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;gap:var(--stzh-space-xxsmall)}.stzh-amount stzh-input.stzh-amount__stepper-input{--text-align:center;width:100%}";
+const stzhAmountCss = ":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}:host[hidden]{display:none}:host *,:host *::before,:host *::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.stzh-amount__marker-symbol{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal}.stzh-amount__marker-text{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-amount__description-wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-amount__error,.stzh-amount__description{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-amount__error{color:var(--stzh-color-error)}.stzh-amount__error-list{list-style:none;margin:0;padding:0}.stzh-amount__description{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-amount__description-long{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-amount__description-long-popover{--width:auto;--max-width:27.3125rem}.stzh-amount__description-long-popover[open]:not([open=false]) .stzh-amount__description-long-button{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount__description-long-button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-amount__description-long-button:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-amount stzh-icon.stzh-amount__description-long-icon{--size:var(--stzh-icon-size-xsmall)}.stzh-amount--has-error .stzh-amount__error,.stzh-amount--has-description .stzh-amount__description{margin-top:var(--stzh-space-xxsmall)}.stzh-amount__stepper-wrapper{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;gap:var(--stzh-space-xsmall)}.stzh-amount stzh-input.stzh-amount__stepper-input{--text-align:center;width:100%}";
 
 const DROPDOWN_ITEM_PLUS_OPTION_VALUE = "stzh-amount__dropdown-plus-option";
 let amountCounter = 0;
@@ -81,6 +81,7 @@ const StzhAmount$1 = /*@__PURE__*/ proxyCustomElement(class StzhAmount extends H
     this.disabled = false;
     this.popoverPlacement = "bottom";
     this.label = "";
+    this.labelHidden = false;
     this.invalid = false;
     this.required = false;
     this.clearable = false;
@@ -132,10 +133,10 @@ const StzhAmount$1 = /*@__PURE__*/ proxyCustomElement(class StzhAmount extends H
       "stzh-amount__dropdown": true,
       [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,
     };
-    return (h("div", { class: classes }, h("stzh-dropdown", { ref: (el) => (this.input = el), options: this._dropdownOptions, items: [this.value], label: this.label, required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, showMarker: this.showMarker, onStzhChange: this.onDropdownChange })));
+    return (h("div", { class: classes }, h("stzh-dropdown", { ref: (el) => (this.input = el), options: this._dropdownOptions, items: [this.value], label: this.label, labelHidden: this.labelHidden, required: this.required, disabled: this.disabled, description: this.description, descriptionLong: this.descriptionLong, error: this.error, invalid: this.invalid, popoverPlacement: this.popoverPlacement, a11yDescribedby: this.a11yDescribedby, name: this.name, size: this.size, showMarker: this.showMarker, onStzhChange: this.onDropdownChange })));
   }
   renderInputStepper() {
-    return (h("div", { class: "stzh-amount__stepper" }, h("div", { class: "stzh-amount__stepper-wrapper" }, h("stzh-input", { ref: (el) => (this.input = el), class: "stzh-amount__stepper-input", value: this.value, type: "number", label: this.label, min: this.minValue, max: this.maxValue, error: this.error, invalid: this.invalid, required: this.required, name: this.name, id: this.stepperInputId, size: this.size, step: this.step, showMarker: this.showMarker, description: this.description, descriptionLong: this.descriptionLong, clearable: this.clearable, disabled: this.disabled, a11yDescribedby: this.a11yDescribedby, onStzhChange: this.onStepperInputChange }), h("stzh-buttongroup", null, h("stzh-button", { class: "stzh-amount__stepper-minus", onClick: this.onInputMinusStepClick, variant: "secondary", icon: "minus", iconOnly: true, a11yControls: this.stepperInputId, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`, size: this.size, a11yDisabled: Number(this.value) <= this.minValue || this.disabled, disabled: this.disabled }), h("stzh-button", { class: "stzh-amount__stepper-plus", onClick: this.onInputPlusStepClick, variant: "secondary", icon: "plus", iconOnly: true, a11yControls: this.stepperInputId, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`, size: this.size, a11yDisabled: Number(this.value) >= this.maxValue || this.disabled, disabled: this.disabled })))));
+    return (h("div", { class: "stzh-amount__stepper" }, h("div", { class: "stzh-amount__stepper-wrapper" }, h("stzh-input", { ref: (el) => (this.input = el), class: "stzh-amount__stepper-input", value: this.value, type: "number", label: this.label, labelHidden: this.labelHidden, min: this.minValue, max: this.maxValue, error: this.error, invalid: this.invalid, required: this.required, name: this.name, id: this.stepperInputId, size: this.size, step: this.step, showMarker: this.showMarker, description: this.description, descriptionLong: this.descriptionLong, clearable: this.clearable, disabled: this.disabled, a11yDescribedby: this.a11yDescribedby, onStzhChange: this.onStepperInputChange }), h("stzh-buttongroup", null, h("stzh-button", { class: "stzh-amount__stepper-minus", onClick: this.onInputMinusStepClick, variant: "secondary", icon: "minus", iconOnly: true, a11yControls: this.stepperInputId, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`, size: this.size, a11yDisabled: Number(this.value) <= this.minValue || this.disabled, disabled: this.disabled }), h("stzh-button", { class: "stzh-amount__stepper-plus", onClick: this.onInputPlusStepClick, variant: "secondary", icon: "plus", iconOnly: true, a11yControls: this.stepperInputId, a11yDescribedby: this.a11yDescribedby, a11yLabel: `${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`, size: this.size, a11yDisabled: Number(this.value) >= this.maxValue || this.disabled, disabled: this.disabled })))));
   }
   render() {
     const classes = {
@@ -169,6 +170,7 @@ const StzhAmount$1 = /*@__PURE__*/ proxyCustomElement(class StzhAmount extends H
     "disabled": [516],
     "popoverPlacement": [513, "popover-placement"],
     "label": [1],
+    "labelHidden": [4, "label-hidden"],
     "invalid": [516],
     "required": [516],
     "clearable": [516],

package/dist/components/stzh-amount.js.map

@@ -1 +1 @@
-{"file":"stzh-amount.js","mappings":"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","names":["StzhAmount"],"sources":["./src/components/stzh-amount/stzh-amount.scss?tag=stzh-amount","./src/components/stzh-amount/stzh-amount.tsx"],"sourcesContent":[".stzh-amount {\n  @include input-description;\n\n  &__stepper-wrapper {\n    display: flex;\n    align-items: flex-start;\n    gap: space('xxsmall');\n  }\n\n  stzh-input#{&}__stepper-input {\n    --text-align: center;\n    width: 100%;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhAmountChangeEvent,\n  StzhDropdownChangeEvent,\n  StzhInputChangeEvent,\n} from \"../../index\";\n\nimport { StzhAmountLocalizedText } from './stzh-amount.localization';\nimport { fetchTranslations } from '../../utils/translation-utils';\n\nconst DROPDOWN_ITEM_PLUS_OPTION_VALUE = \"stzh-amount__dropdown-plus-option\"\n\nlet amountCounter = 0;\n\n@Component({\n  tag: \"stzh-amount\",\n  styleUrl: \"stzh-amount.scss\"\n})\nexport class StzhAmount {\n  /** The lowest allowed amount (can be negative). */\n  @Prop() minValue: number = -9007199254740991;\n\n  /** The highest allowed amount. */\n  @Prop() maxValue: number = 9007199254740991;\n\n  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop() minValueDropdown: number | null = null;\n\n  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop() maxValueDropdown: number | null = null;\n  private _showDropdown: boolean = !Number.isNaN(this.minValueDropdown) && !Number.isNaN(this.maxValueDropdown)\n    && this.minValueDropdown < this.maxValueDropdown;\n\n  private _dropdownOptions: StzhDropdownOption[];\n\n  /** The initial value of the amount element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** The step the amount can be increased or decreased */\n  @Prop() step: number = 1;\n\n  /** Name of the element (hidden select element in case of dropdown) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the amount component is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: 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  /** Whether clearable button is showing for the input field (does not apply to dropdown) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Show text in label depending on whether field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description placed below the amount */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message(s) */\n  @Prop({ mutable: true }) error: string | string[];\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhAmountLocalizedText;\n\n  @Watch(\"minValueDropdown\")\n  @Watch(\"maxValueDropdown\")\n  minMaxValueDropdownWatcher() {\n    this.setDropdownOptions();\n  }\n\n  /** Amount change event */\n  @Event() stzhChange: EventEmitter<StzhAmountChangeEvent>;\n\n  @Element() element: HTMLStzhAmountElement;\n\n  private amountId: string;\n  private stepperInputId: string;\n  private input: HTMLStzhInputElement | HTMLStzhDropdownElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions() {\n    if (!this._showDropdown) {\n      return;\n    }\n\n    const options = [];\n\n    for (let i = this.minValueDropdown; i <= this.maxValueDropdown; i++) {\n      options.push({text: i.toString(), value: i.toString()});\n    }\n    if (this.maxValue != undefined && this.maxValue > this.maxValueDropdown) {\n      options.push({text: `${this.maxValueDropdown.toString()}+`, value: DROPDOWN_ITEM_PLUS_OPTION_VALUE})\n    }\n\n    this._dropdownOptions = options;\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    if (event.detail.value === DROPDOWN_ITEM_PLUS_OPTION_VALUE) {\n      this._showDropdown = false;\n      this.value = (this.maxValueDropdown + this.step).toString();\n    } else {\n      this.value = event.detail.value;\n    }\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Handling the minus button. */\n  private onInputMinusStepClick = () => {\n    if (Number(this.value) <= this.minValue) {\n      return;\n    }\n\n    this.value = (Number(this.value) - this.step).toString();\n    this.value = this.roundToStep(Number(this.value)).toString();\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Handling the plus button. */\n  private onInputPlusStepClick = () => {\n    if (Number(this.value) >= this.maxValue) {\n      return;\n    }\n\n    this.value = (Number(this.value) + this.step).toString();\n    this.value = this.roundToStep(Number(this.value)).toString();\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    })\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private onStepperInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    this.value = event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Making sure, that the value is rounded correctly according to the step  */\n  private roundToStep(input: number): number {\n    const decimals = Math.max(0, -Math.floor(Math.log10(this.step)));\n    const factor = Math.pow(10, decimals);\n    const rounded = Math.round(input / this.step) * this.step;\n    return Number((rounded * factor / factor).toFixed(decimals));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"amount\");\n    }\n\n    this.amountId = `stzh-amount-${amountCounter++}`;\n\n    if (this._showDropdown) {\n      this.setDropdownOptions()\n    } else {\n      this.stepperInputId = `${this.amountId}-stepper-input`\n    }\n  }\n\n  private renderDropdown(): HTMLDivElement {\n    const classes = {\n      \"stzh-amount__dropdown\": true,\n      [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n    };\n    return (\n      <div class={classes}>\n        <stzh-dropdown\n          ref={(el) => (this.input = el as HTMLStzhDropdownElement)}\n          options={this._dropdownOptions}\n          items={[this.value]}\n          label={this.label}\n          required={this.required}\n          disabled={this.disabled}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          error={this.error}\n          invalid={this.invalid}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          name={this.name}\n          size={this.size}\n          showMarker={this.showMarker}\n          onStzhChange={this.onDropdownChange}\n        ></stzh-dropdown>\n      </div>\n    );\n  }\n\n  private renderInputStepper(): HTMLDivElement {\n    return (\n      <div class=\"stzh-amount__stepper\">\n        <div class=\"stzh-amount__stepper-wrapper\">\n          <stzh-input\n            ref={(el) => (this.input = el as HTMLStzhInputElement)}\n            class=\"stzh-amount__stepper-input\"\n            value={this.value}\n            type=\"number\"\n            label={this.label}\n            min={this.minValue}\n            max={this.maxValue}\n            error={this.error}\n            invalid={this.invalid}\n            required={this.required}\n            name={this.name}\n            id={this.stepperInputId}\n            size={this.size}\n            step={this.step}\n            showMarker={this.showMarker}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            clearable={this.clearable}\n            disabled={this.disabled}\n            a11yDescribedby={this.a11yDescribedby}\n            onStzhChange={this.onStepperInputChange}\n          ></stzh-input>\n          <stzh-buttongroup>\n            <stzh-button\n              class=\"stzh-amount__stepper-minus\"\n              onClick={this.onInputMinusStepClick}\n              variant=\"secondary\"\n              icon=\"minus\"\n              iconOnly={true}\n              a11yControls={this.stepperInputId}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n              size={this.size}\n              a11yDisabled={Number(this.value) <= this.minValue || this.disabled}\n              disabled={this.disabled}\n            ></stzh-button>\n            <stzh-button\n              class=\"stzh-amount__stepper-plus\"\n              onClick={this.onInputPlusStepClick}\n              variant=\"secondary\"\n              icon=\"plus\"\n              iconOnly={true}\n              a11yControls={this.stepperInputId}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n              size={this.size}\n              a11yDisabled={Number(this.value) >= this.maxValue || this.disabled}\n              disabled={this.disabled}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-amount\": true,\n      \"stzh-amount--has-description\": !!this.description,\n      \"stzh-amount--has-description-long\": !!this.descriptionLong,\n      \"stzh-amount--has-error\": !!this.error,\n      \"stzh-amount--is-required\": !!this.required,\n      \"stzh-amount--is-disabled\": !!this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes} id={this.amountId}>\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-amount.js","mappings":"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","names":["StzhAmount"],"sources":["./src/components/stzh-amount/stzh-amount.scss?tag=stzh-amount","./src/components/stzh-amount/stzh-amount.tsx"],"sourcesContent":[".stzh-amount {\n  @include input-description;\n\n  &__stepper-wrapper {\n    display: flex;\n    align-items: flex-start;\n    gap: space('xsmall');\n  }\n\n  stzh-input#{&}__stepper-input {\n    --text-align: center;\n    width: 100%;\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  h,\n  Watch,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhDropdownOption,\n  StzhAmountChangeEvent,\n  StzhDropdownChangeEvent,\n  StzhInputChangeEvent,\n} from \"../../index\";\n\nimport { StzhAmountLocalizedText } from './stzh-amount.localization';\nimport { fetchTranslations } from '../../utils/translation-utils';\n\nconst DROPDOWN_ITEM_PLUS_OPTION_VALUE = \"stzh-amount__dropdown-plus-option\"\n\nlet amountCounter = 0;\n\n@Component({\n  tag: \"stzh-amount\",\n  styleUrl: \"stzh-amount.scss\"\n})\nexport class StzhAmount {\n  /** The lowest allowed amount (can be negative). */\n  @Prop() minValue: number = -9007199254740991;\n\n  /** The highest allowed amount. */\n  @Prop() maxValue: number = 9007199254740991;\n\n  /** The lowest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop() minValueDropdown: number | null = null;\n\n  /** The highest amount as option in the dropdown. Needs to be set to initially display a dropdown. */\n  @Prop() maxValueDropdown: number | null = null;\n  private _showDropdown: boolean = !Number.isNaN(this.minValueDropdown) && !Number.isNaN(this.maxValueDropdown)\n    && this.minValueDropdown < this.maxValueDropdown;\n\n  private _dropdownOptions: StzhDropdownOption[];\n\n  /** The initial value of the amount element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** The step the amount can be increased or decreased */\n  @Prop() step: number = 1;\n\n  /** Name of the element (hidden select element in case of dropdown) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Whether the amount component is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Popover placement for the dropdown (if applicable) */\n  @Prop({ reflect: true }) popoverPlacement:  \"bottom\" | \"bottom-end\" | \"bottom-center\" | \"top\" | \"top-end\" | \"top-center\" = \"bottom\";\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether clearable button is showing for the input field (does not apply to dropdown) */\n  @Prop({ reflect: true }) clearable: boolean = false;\n\n  /** Show text in label depending on whether field is optional/required */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Description placed below the amount */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message(s) */\n  @Prop({ mutable: true }) error: string | string[];\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhAmountLocalizedText;\n\n  @Watch(\"minValueDropdown\")\n  @Watch(\"maxValueDropdown\")\n  minMaxValueDropdownWatcher() {\n    this.setDropdownOptions();\n  }\n\n  /** Amount change event */\n  @Event() stzhChange: EventEmitter<StzhAmountChangeEvent>;\n\n  @Element() element: HTMLStzhAmountElement;\n\n  private amountId: string;\n  private stepperInputId: string;\n  private input: HTMLStzhInputElement | HTMLStzhDropdownElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  /** Fill the dropdown with options according to maxValueDropdown & minValueDropdown. */\n  private setDropdownOptions() {\n    if (!this._showDropdown) {\n      return;\n    }\n\n    const options = [];\n\n    for (let i = this.minValueDropdown; i <= this.maxValueDropdown; i++) {\n      options.push({text: i.toString(), value: i.toString()});\n    }\n    if (this.maxValue != undefined && this.maxValue > this.maxValueDropdown) {\n      options.push({text: `${this.maxValueDropdown.toString()}+`, value: DROPDOWN_ITEM_PLUS_OPTION_VALUE})\n    }\n\n    this._dropdownOptions = options;\n  }\n\n  /** Handling dropdown changes (switch to input stepper if the plus option is selected in the dropdown). */\n  private onDropdownChange = (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    if (event.detail.value === DROPDOWN_ITEM_PLUS_OPTION_VALUE) {\n      this._showDropdown = false;\n      this.value = (this.maxValueDropdown + this.step).toString();\n    } else {\n      this.value = event.detail.value;\n    }\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Handling the minus button. */\n  private onInputMinusStepClick = () => {\n    if (Number(this.value) <= this.minValue) {\n      return;\n    }\n\n    this.value = (Number(this.value) - this.step).toString();\n    this.value = this.roundToStep(Number(this.value)).toString();\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Handling the plus button. */\n  private onInputPlusStepClick = () => {\n    if (Number(this.value) >= this.maxValue) {\n      return;\n    }\n\n    this.value = (Number(this.value) + this.step).toString();\n    this.value = this.roundToStep(Number(this.value)).toString();\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    })\n  }\n\n  /** Handling manual value change of the stepper input. */\n  private onStepperInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    this.value = event.detail.value;\n\n    this.stzhChange.emit({\n      component: \"stzh-amount\",\n      value: this.value\n    });\n  }\n\n  /** Making sure, that the value is rounded correctly according to the step  */\n  private roundToStep(input: number): number {\n    const decimals = Math.max(0, -Math.floor(Math.log10(this.step)));\n    const factor = Math.pow(10, decimals);\n    const rounded = Math.round(input / this.step) * this.step;\n    return Number((rounded * factor / factor).toFixed(decimals));\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"amount\");\n    }\n\n    this.amountId = `stzh-amount-${amountCounter++}`;\n\n    if (this._showDropdown) {\n      this.setDropdownOptions()\n    } else {\n      this.stepperInputId = `${this.amountId}-stepper-input`\n    }\n  }\n\n  private renderDropdown(): HTMLDivElement {\n    const classes = {\n      \"stzh-amount__dropdown\": true,\n      [`stzh-amount--popover-placement-${this.popoverPlacement}`]: !!this.popoverPlacement,\n    };\n    return (\n      <div class={classes}>\n        <stzh-dropdown\n          ref={(el) => (this.input = el as HTMLStzhDropdownElement)}\n          options={this._dropdownOptions}\n          items={[this.value]}\n          label={this.label}\n          labelHidden={this.labelHidden}\n          required={this.required}\n          disabled={this.disabled}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          error={this.error}\n          invalid={this.invalid}\n          popoverPlacement={this.popoverPlacement}\n          a11yDescribedby={this.a11yDescribedby}\n          name={this.name}\n          size={this.size}\n          showMarker={this.showMarker}\n          onStzhChange={this.onDropdownChange}\n        ></stzh-dropdown>\n      </div>\n    );\n  }\n\n  private renderInputStepper(): HTMLDivElement {\n    return (\n      <div class=\"stzh-amount__stepper\">\n        <div class=\"stzh-amount__stepper-wrapper\">\n          <stzh-input\n            ref={(el) => (this.input = el as HTMLStzhInputElement)}\n            class=\"stzh-amount__stepper-input\"\n            value={this.value}\n            type=\"number\"\n            label={this.label}\n            labelHidden={this.labelHidden}\n            min={this.minValue}\n            max={this.maxValue}\n            error={this.error}\n            invalid={this.invalid}\n            required={this.required}\n            name={this.name}\n            id={this.stepperInputId}\n            size={this.size}\n            step={this.step}\n            showMarker={this.showMarker}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            clearable={this.clearable}\n            disabled={this.disabled}\n            a11yDescribedby={this.a11yDescribedby}\n            onStzhChange={this.onStepperInputChange}\n          ></stzh-input>\n          <stzh-buttongroup>\n            <stzh-button\n              class=\"stzh-amount__stepper-minus\"\n              onClick={this.onInputMinusStepClick}\n              variant=\"secondary\"\n              icon=\"minus\"\n              iconOnly={true}\n              a11yControls={this.stepperInputId}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label} ${this.localization.stepperMinusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n              size={this.size}\n              a11yDisabled={Number(this.value) <= this.minValue || this.disabled}\n              disabled={this.disabled}\n            ></stzh-button>\n            <stzh-button\n              class=\"stzh-amount__stepper-plus\"\n              onClick={this.onInputPlusStepClick}\n              variant=\"secondary\"\n              icon=\"plus\"\n              iconOnly={true}\n              a11yControls={this.stepperInputId}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label} ${this.localization.stepperPlusLabel}, ${this.localization.selectedAmountMessage} ${this.value}`}\n              size={this.size}\n              a11yDisabled={Number(this.value) >= this.maxValue || this.disabled}\n              disabled={this.disabled}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const classes = {\n      \"stzh-amount\": true,\n      \"stzh-amount--has-description\": !!this.description,\n      \"stzh-amount--has-description-long\": !!this.descriptionLong,\n      \"stzh-amount--has-error\": !!this.error,\n      \"stzh-amount--is-required\": !!this.required,\n      \"stzh-amount--is-disabled\": !!this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes} id={this.amountId}>\n          {\n            this._showDropdown ?\n            this.renderDropdown()\n            :\n            this.renderInputStepper()\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-button2.js

@@ -144,18 +144,18 @@ const StzhButton = /*@__PURE__*/ proxyCustomElement(class StzhButton extends HTM
       [`stzh-button--${this.variant}`]: !!this.variant
     };
     return (h(Host, { tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, this.href ?
-      h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+      h("a", { ref: (el) => (this.button = el), href: this.disabled ? null : this.href, rel: this.rel, download: this.download, target: this.target, class: classes, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined"
           ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
+          ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))
       :
         this.type === "radio" ?
-          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+          h("label", { ref: (el) => (this.button = el), class: classes, onClick: this.onClick }, h("input", { ref: (el) => (this.input = el), type: "radio", class: "stzh-button__input", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined"
               ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-              ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
+              ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, onInput: this.onInput }), this.renderInner(iconUsed))
           :
-            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel, "aria-describedby": this.a11yDescribedby, "aria-disabled": typeof this.a11yDisabled !== "undefined"
+            h("button", { ref: (el) => (this.button = el), class: classes, type: this.type, disabled: this.disabled, "aria-label": this.a11yLabel || null, "aria-describedby": this.a11yDescribedby || null, "aria-disabled": typeof this.a11yDisabled !== "undefined"
                 ? (this.a11yDisabled ? "true" : "false") : null, "aria-expanded": typeof this.a11yExpanded !== "undefined"
-                ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
+                ? (this.a11yExpanded ? "true" : "false") : null, "aria-controls": this.a11yControls || null, accessKey: this.linkAccesskey, tabindex: this.a11yTabindex, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, this.renderInner(iconUsed))));
   }
   get element() { return this; }
   static get style() { return stzhButtonCss; }

package/dist/components/stzh-button2.js.map

@@ -1 +1 @@
-{"file":"stzh-button2.js","mappings":"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","names":[],"sources":["./src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","./src/components/stzh-button/stzh-button.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorPrimary};\n  --border-width: 1px;\n  --border-color: #{$colorPrimary};\n  --border-radius: #{$buttonBorderRadius};\n  --height: #{$formInputHeight};\n  --icon-size: #{iconSize('small')};\n  --icon-text-margin: #{space('small')};\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n  --white-space: normal;\n  --border-radius: #{$buttonBorderRadius};\n\n  --hover-color: #{$colorWhite};\n  --hover-background-color: #{$colorPrimaryHover};\n  --hover-border-color: #{$colorPrimaryHover};\n\n  --floating-position: sticky;\n  --floating-float: right;\n  --floating-bottom: #{space('medium')};\n  --floating-right: #{space('medium')};\n\n  display: inline-block;\n\n  @include mq($from: small) {\n    --floating-bottom: #{space('xlarge')};\n    --floating-right: #{space('xlarge')};\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[floating]:not([floating=\"false\"]) {\n    position: var(--floating-position);\n    bottom: var(--floating-bottom);\n    right: var(--floating-right);\n    float: var(--floating-float);\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  &[size=\"tiny\"] {\n    --height: #{$formInputHeightTiny};\n    --icon-text-margin: #{space('xsmall')};\n    --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary};\n    --background-color: #{$colorWhite};\n    --border-color: #{$colorPrimary60op};\n  }\n\n  &[variant=\"input\"] {\n    --color: #{$formColor};\n    --background-color: transparent;\n    --border-color: #{$formBorderColor};\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: transparent;\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: #{$colorPrimary};\n    --background-color: transparent;\n    --border-color: transparent;\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$buttonTextHoverBackground};\n    --hover-border-color: transparent;\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorPrimaryHover};\n    --border-color: #{$colorPrimaryHover};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --border-color: #{$colorGrey13};\n    --background-color: #{$colorGrey13};\n\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: #{$colorGrey13};\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n    --color: #{$colorGrey25};\n    --border-color: #{$colorGrey13};\n    --background-color: transparent;\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: transparent;\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-button {\n  @include fontSize('milli');\n  line-height: 1.25;\n  font-family: inherit;\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding: var(--padding);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: pointer;\n  text-decoration-line: none;\n  width: 100%;\n  min-width: var(--height);\n  min-height: var(--height);\n  border-radius: var(--border-radius);\n  text-align: left;\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Size variants */\n\n  &--size-small,\n  &--size-tiny {\n    @include fontSize('micro');\n  }\n\n  /* Floating */\n\n  &--is-floating {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only {\n    width: var(--height);\n    height: var(--height);\n    padding: 0;\n  }\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Method,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Whether the button is floating */\n  @Prop({ reflect: true }) floating: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"tiny\" = \"default\";\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if type is radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  /** Focus button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\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-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\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-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-button__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-floating\": this.floating,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--size-${this.size}`]: !!this.size,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel}\n            aria-describedby={this.a11yDescribedby}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel}\n                aria-describedby={this.a11yDescribedby}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls}\n                accessKey={this.linkAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel}\n              aria-describedby={this.a11yDescribedby}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls}\n              accessKey={this.linkAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-button2.js","mappings":"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","names":[],"sources":["./src/components/stzh-button/stzh-button.scss?tag=stzh-button&encapsulation=scoped","./src/components/stzh-button/stzh-button.tsx"],"sourcesContent":[":host {\n  --color: #{$colorWhite};\n  --background-color: #{$colorPrimary};\n  --border-width: 1px;\n  --border-color: #{$colorPrimary};\n  --border-radius: #{$buttonBorderRadius};\n  --height: #{$formInputHeight};\n  --icon-size: #{iconSize('small')};\n  --icon-text-margin: #{space('small')};\n  --badge-icon-text-margin: calc(var(--icon-text-margin) + #{space('xxsmall')});\n  --padding: calc(#{space('xsmall')} - 1px) #{space('xlarge')};\n  --white-space: normal;\n  --border-radius: #{$buttonBorderRadius};\n\n  --hover-color: #{$colorWhite};\n  --hover-background-color: #{$colorPrimaryHover};\n  --hover-border-color: #{$colorPrimaryHover};\n\n  --floating-position: sticky;\n  --floating-float: right;\n  --floating-bottom: #{space('medium')};\n  --floating-right: #{space('medium')};\n\n  display: inline-block;\n\n  @include mq($from: small) {\n    --floating-bottom: #{space('xlarge')};\n    --floating-right: #{space('xlarge')};\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: block;\n  }\n\n  &[rounded]:not([rounded=\"false\"]) {\n    --border-radius: var(--height);\n  }\n\n  &[floating]:not([floating=\"false\"]) {\n    position: var(--floating-position);\n    bottom: var(--floating-bottom);\n    right: var(--floating-right);\n    float: var(--floating-float);\n  }\n\n  &[size=\"small\"] {\n    --height: #{$formInputHeightSmall};\n  }\n\n  &[size=\"tiny\"] {\n    --height: #{$formInputHeightTiny};\n    --icon-text-margin: #{space('xsmall')};\n    --padding: calc(#{space('xxsmall')} - 1px) #{space('medium')};\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$colorPrimary};\n    --background-color: #{$colorWhite};\n    --border-color: #{$colorPrimary60op};\n  }\n\n  &[variant=\"input\"] {\n    --color: #{$formColor};\n    --background-color: transparent;\n    --border-color: #{$formBorderColor};\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: transparent;\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[variant=\"tertiary\"] {\n    --color: #{$colorPrimary};\n    --background-color: transparent;\n    --border-color: transparent;\n\n    --hover-color: #{$colorPrimaryHover};\n    --hover-background-color: #{$buttonTextHoverBackground};\n    --hover-border-color: transparent;\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorPrimaryHover};\n    --border-color: #{$colorPrimaryHover};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorPrimaryHover};\n    --hover-border-color: #{$colorPrimaryHover};\n  }\n\n  &[disabled]:not([disabled=\"false\"]),\n  &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n    --border-color: #{$colorGrey13};\n    --background-color: #{$colorGrey13};\n\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: #{$colorGrey13};\n  }\n\n  &[disabled]:not([disabled=\"false\"])[variant=\"secondary\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"input\"],\n  &[disabled]:not([disabled=\"false\"])[variant=\"tertiary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"secondary\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"input\"],\n  &[a11y-disabled]:not([a11y-disabled=\"false\"])[variant=\"tertiary\"] {\n    --color: #{$colorGrey25};\n    --border-color: #{$colorGrey13};\n    --background-color: transparent;\n\n    --hover-color: #{$colorGrey25};\n    --hover-border-color: #{$colorGrey13};\n    --hover-background-color: transparent;\n  }\n}\n\n@keyframes stzh-button-effect-cta {\n\t0%,\n\t20%,\n\t50%,\n\t80%,\n\t100% {\n\t\ttransform: translateX(0);\n\t}\n\n\t40% {\n\t\ttransform: translateX(-8px);\n\t}\n\n\t60% {\n\t\ttransform: translateX(-4px);\n\t}\n}\n\n:host ::slotted(stzh-icon),\n.stzh-button__icon {\n  --size: var(--icon-size);\n}\n\n.stzh-button {\n  @include fontSize('milli');\n  line-height: 1.25;\n  font-family: inherit;\n  position: relative;\n  z-index: 0;\n  overflow: visible;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  color: var(--color);\n  padding: var(--padding);\n  background-color: var(--background-color);\n  transition-duration: $baseTransitionAnimationSpeed;\n  transition-property: color, background-color, border-color;\n  border-style: solid;\n  border-width: var(--border-width);\n  border-color: var(--border-color);\n  cursor: pointer;\n  text-decoration-line: none;\n  width: 100%;\n  min-width: var(--height);\n  min-height: var(--height);\n  border-radius: var(--border-radius);\n  text-align: left;\n\n  &:hover {\n    border-color: var(--hover-border-color);\n    background-color: var(--hover-background-color);\n    color: var(--hover-color);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: 1em;\n  }\n\n  &__text {\n    @include wordWrap;\n    white-space: var(--white-space);\n    text-align: center;\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--icon-text-margin);\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n  }\n\n  &__mark {\n    @include radio__mark();\n    width: 20px;\n    height: 20px;\n    margin-right: space('xsmall');\n    border-color: currentColor;\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  /* Hover / Focus / Checked / Disabled of Radio Type */\n\n  &__input:checked:hover ~ &__inner &__mark &__check,\n  &__input:checked:focus ~ &__inner &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__inner &__mark,\n  &__input:checked:hover ~ &__inner &__mark,\n  &__input:checked:focus ~ &__inner &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__inner &__mark,\n  &__input:checked ~ &__inner &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__inner &__mark &__check {\n    opacity: 1;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__inner &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n\n  /* Size variants */\n\n  &--size-small,\n  &--size-tiny {\n    @include fontSize('micro');\n  }\n\n  /* Floating */\n\n  &--is-floating {\n    box-shadow: $boxShadowOverlay;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-button &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-button &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('xsmall')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: var(--badge-icon-text-margin);\n  }\n\n  /* Variant if button only has icon */\n\n  &--has-icon-only {\n    width: var(--height);\n    height: var(--height);\n    padding: 0;\n  }\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Effect */\n\n  &--effect-cta:hover &__icon-wrapper {\n\t\tanimation: stzh-button-effect-cta 1s;\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Method,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhButtonFocusEvent,\n  StzhButtonBlurEvent,\n  StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { fetchTranslations, StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for label/text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-button\",\n  styleUrl: \"stzh-button.scss\",\n  scoped: true\n})\nexport class StzhButton {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Display a badge aligned to button or icons */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"button\" = \"button\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Whether the button is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Whether the button is rounded */\n  @Prop({ reflect: true }) rounded: boolean = false;\n\n  /** Whether the button is floating */\n  @Prop({ reflect: true }) floating: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" | \"tiny\" = \"default\";\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"default\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Checked status (if type is radio) */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** The name of the input element (if type is radio) */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element (if type is radio) */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** `href` if the button should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Type of the button */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" | \"radio\" = \"button\";\n\n  /** Whether the button is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether the button is active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Effect/Animation used */\n  @Prop() effect: \"default\" | \"cta\" = \"default\";\n\n  /** Whether only an icon is used inside the button */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhButtonElement;\n\n  /** Focus button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhButtonFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhButtonBlurEvent>;\n\n  /** Change event (only called if type is radio) */\n  @Event() stzhChange: EventEmitter<StzhButtonChangeEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  private input: HTMLInputElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-button\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\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-button\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\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-button\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    if (this.disabled) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  private renderIcon(iconUsed: boolean): HTMLInputElement {\n    return (\n      <div class=\"stzh-button__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-button__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) && this.badgePosition === \"icon\" && iconUsed &&\n          <stzh-badge class=\"stzh-button__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-button__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-button__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-button__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div\n          class=\"stzh-button__inner\"\n          onClick={this.onClick}\n        >\n          {this.type === \"radio\" &&\n            <div class=\"stzh-button__mark\">\n              <div class=\"stzh-button__check\"></div>\n            </div>\n          }\n          {this.iconPosition === \"left\" && this.renderIcon(iconUsed)}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon(iconUsed)}\n        </div>\n        {(this.badge || this.badgeEmpty) && (this.badgePosition === \"button\" || !iconUsed) &&\n          <stzh-badge\n            class=\"stzh-button__badge\"\n            label={this.badge}\n            type={this.badgeType}\n            onClick={this.onClick}\n          ></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await fetchTranslations(this.element, \"button\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed: boolean = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-button\": true,\n      \"stzh-button--has-icon\": iconUsed,\n      \"stzh-button--has-icon-only\": this.iconOnly,\n      \"stzh-button--has-badge\": !!this.badge,\n      \"stzh-button--is-floating\": this.floating,\n      \"stzh-button--is-rounded\": this.rounded,\n      \"stzh-button--is-fullwidth\": this.fullwidth,\n      \"stzh-button--is-disabled\": this.disabled || this.a11yDisabled,\n      \"stzh-button--is-active\": this.active,\n      [`stzh-button--effect-${this.effect}`]: !!this.effect,\n      [`stzh-button--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-button--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-button--size-${this.size}`]: !!this.size,\n      [`stzh-button--type-${this.type}`]: !!this.type,\n      [`stzh-button--${this.variant}`]: !!this.variant\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            rel={this.rel}\n            download={this.download}\n            target={this.target}\n            class={classes}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          this.type === \"radio\" ?\n            <label\n              ref={(el) => (this.button = el as HTMLLabelElement)}\n              class={classes}\n              onClick={this.onClick}\n              >\n              <input\n                ref={(el) => (this.input = el as HTMLInputElement)}\n                type=\"radio\"\n                class=\"stzh-button__input\"\n                name={this.name}\n                value={this.value}\n                checked={this.checked}\n                disabled={this.disabled}\n                aria-label={this.a11yLabel || null}\n                aria-describedby={this.a11yDescribedby || null}\n                aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                  ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n                aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                  ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n                aria-controls={this.a11yControls || null}\n                accessKey={this.linkAccesskey}\n                tabindex={this.a11yTabindex}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n                onClick={this.onClick}\n                onInput={this.onInput}\n              />\n              {this.renderInner(iconUsed)}\n            </label>\n            :\n            <button\n              ref={(el) => (this.button = el as HTMLButtonElement)}\n              class={classes}\n              type={this.type}\n              disabled={this.disabled}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n                ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n              aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n                ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n              aria-controls={this.a11yControls || null}\n              accessKey={this.linkAccesskey}\n              tabindex={this.a11yTabindex}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onClick={this.onClick}\n            >\n              {this.renderInner(iconUsed)}\n            </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-buttongroup2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhButtongroupCss = ".sc-stzh-buttongroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-buttongroup-h{display:none}.sc-stzh-buttongroup-h *.sc-stzh-buttongroup,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::before,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child{--border-radius:var(--stzh-button-border-radius) 0px 0px var(--stzh-button-border-radius);--border-width:0.0625rem 0px 0.0625rem 0.0625rem}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:last-child{--border-radius:0px var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0px;--border-width:0.0625rem 0.0625rem 0.0625rem 0px}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child:last-child{--border-width:0.0625rem;--border-radius:var(--stzh-button-border-radius)}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child+stzh-button:last-child{--border-width:0.0625rem}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:not(:first-child):not(:last-child){--border-radius:0px}.stzh-buttongroup.sc-stzh-buttongroup{display:-ms-flexbox;display:flex}";
+const stzhButtongroupCss = ".sc-stzh-buttongroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:normal;color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-buttongroup-h{display:none}.sc-stzh-buttongroup-h *.sc-stzh-buttongroup,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::before,.sc-stzh-buttongroup-h *.sc-stzh-buttongroup::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button{z-index:1;margin-right:-0.0625rem}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button[a11y-disabled]:not([a11y-disabled=false]){z-index:0}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child{--border-radius:var(--stzh-button-border-radius) 0px 0px var(--stzh-button-border-radius)}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:last-child{--border-radius:0px var(--stzh-button-border-radius) var(--stzh-button-border-radius) 0px;margin-right:0}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:first-child:last-child{--border-radius:var(--stzh-button-border-radius);margin:0}.sc-stzh-buttongroup-h .sc-stzh-buttongroup-s>stzh-button:not(:first-child):not(:last-child){--border-radius:0px}.stzh-buttongroup.sc-stzh-buttongroup{position:relative;z-index:auto;display:-ms-flexbox;display:flex}";
 
 const StzhButtongroup = /*@__PURE__*/ proxyCustomElement(class StzhButtongroup extends HTMLElement {
   constructor() {

package/dist/components/stzh-buttongroup2.js.map

@@ -1 +1 @@
-{"file":"stzh-buttongroup2.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,o8CAAo8C;;MCel9C,eAAe;;;;;EAG1B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,kBAAkB,EAAE,IAAI;KACzB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","./src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-button) {\n    &:first-child {\n      --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n      --border-width: 1px 0px 1px 1px;\n    }\n\n    &:last-child {\n      --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n      --border-width: 1px 1px 1px 0px;\n    }\n\n    // only one button\n    &:first-child:last-child {\n      --border-width: 1px;\n      --border-radius: #{$buttonBorderRadius};\n    }\n\n    // when only two buttons\n    &:first-child + stzh-button:last-child {\n      --border-width: 1px;\n    }\n\n    // buttons in the middle\n    &:not(:first-child):not(:last-child) {\n      --border-radius: 0px;\n    }\n  }\n}\n\n.stzh-buttongroup {\n  display: flex;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-buttongroup2.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,o9CAAo9C;;MCel+C,eAAe;;;;;EAG1B,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,kBAAkB,EAAE,IAAI;KACzB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/stzh-buttongroup/stzh-buttongroup.scss?tag=stzh-buttongroup&encapsulation=scoped","./src/components/stzh-buttongroup/stzh-buttongroup.tsx"],"sourcesContent":[":host {\n  ::slotted(stzh-button) {\n    z-index: 1;\n    margin-right: -1px;\n\n    &[a11y-disabled]:not([a11y-disabled=\"false\"]) {\n      z-index: 0;\n    }\n\n    &:first-child {\n      --border-radius: #{$buttonBorderRadius 0px 0px $buttonBorderRadius};\n      // --border-width: 1px 0px 1px 1px;\n    }\n\n    &:last-child {\n      --border-radius: #{0px $buttonBorderRadius $buttonBorderRadius 0px};\n      // --border-width: 1px 1px 1px 0px;\n      margin-right: 0;\n    }\n\n    // only one button\n    &:first-child:last-child {\n      // --border-width: 1px;\n      --border-radius: #{$buttonBorderRadius};\n      margin: 0;\n    }\n\n    // when only two buttons\n    &:first-child + stzh-button:last-child {\n      // --border-width: 1px;\n    }\n\n    // buttons in the middle\n    &:not(:first-child):not(:last-child) {\n      --border-radius: 0px;\n    }\n  }\n}\n\n.stzh-buttongroup {\n  position: relative;\n  z-index: auto;\n  display: flex;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for buttons\n */\n@Component({\n  tag: \"stzh-buttongroup\",\n  styleUrl: \"stzh-buttongroup.scss\",\n  scoped: true\n})\nexport class StzhButtongroup {\n  @Element() element: HTMLStzhButtongroupElement;\n\n  render() {\n    const classes = {\n      \"stzh-buttongroup\": true\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}