@oiz/stzh-components 2.11.0-beta1 → 2.11.0

package/dist/esm-es5/stzh-carousel.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhCarouselCss","reducedMotionMedia","window","matchMedia","carouselCounter","StzhCarousel","this","slideScrollLeft","scrolledByAutoplay","scrollTimeoutId","lastX","startX","startScrollLeft","disableTimeoutId","stoppedDragging","onReducedMotionMediaChange","_this","autoplayDisabledByMotionMedia","matches","onMouseenter","preventAutoplayPause","autoplayDisabledByMouse","onMouseleave","onFocusin","autoplayDisabledByFocus","onFocusout","onPreviousClick","scrollToPreviousSnapPoint","onNextClick","scrollToNextSnapPoint","onSlideResize","scrollElement","itemSize","sizingMethod","onMutation","slideElements","Array","from","children","forEach","slide","index","setAttribute","localization","slideLabel","replace","toString","length","previousElements","element","querySelectorAll","nextElements","navigationTextElements","onScroll","direction","scrollLeft","scrolling","preventAutoplayStop","autoplayDisabledByScroll","autoplay","stzhSlideStart","emit","component","calculateSlide","update","stzhSlidePassed","clearTimeout","setTimeout","onScrollEnd","scrollTimeout","style","removeProperty","tabThrough","variant","ariaLive","currentSlides","slidesLabel","stzhSlideEnd","onMediaChange","ultra","media","large","medium","small","slidesUltra","slidesLarge","slidesMedium","slidesSmall","slides","currentSwipeSlides","mouseMove","event","distance","clientX","startDragging","preventDefault","setProperty","dragging","autoplayDisabledByDrag","addEventListener","stopDragging","capture","checkClick","Math","abs","minimumReached","distanceQuickSwipe","endDraddingLeft","finalLeft","scrollTo","left","behavior","slideToPrevious","slideToNext","removeEventListener","distancePreventClick","autoplayInterval","hasReachedLastSlide","slideTo","class_1","prototype","behaviour","scrollToSlide","disabledWatcher","disabled","passive","preventMouseDragWatcher","preventMouseDrag","autoplayRunningWatcher","autoplayIntervalId","clearInterval","autoplayRunning","setInterval","autoplayTimeout","snapAlignWatcher","shouldSnap","inertWatcher","isActive","inert","removeAttribute","prevNextNavigationWatcher","setAriaAttributes","isStzh","isStzhElement","prevNextHiddenWatcher","hideElements","setHiddenAttribute","nextPrevDisabledWatcher","reachedFirstSlide","reachedLastSlide","nextElementsWatcher","nextElement","concat","carouselId","previousElementsWatcher","previousElement","css","getComputedStyle","firstElementChild","offsetWidth","parseInt","getPropertyValue","floor","previousIndex","canSnap","_a","scrollWidth","ceil","componentWillLoad","stzhComponents","utils","fetchTranslations","_b","sent","componentDidLoad","connectedCallback","addMediaChangeListener","resizeObserver","ResizeObserver","observe","mutationObserver","MutationObserver","childList","subtree","disconnectedCallback","removeMediaChangeListener","disconnect","render","classes","nonInteractive","h","Host","class","name","ref","el","id"],"sources":["src/components/stzh-carousel/stzh-carousel.scss?tag=stzh-carousel&encapsulation=scoped","src/components/stzh-carousel/stzh-carousel.tsx"],"sourcesContent":["/**\n * @prop --padding-top: Padding Top of scroll container\n * @prop --padding-bottom: Padding Bottom of scroll container\n * @prop --peek-in: Peek size (inside container) showing the next/previous slides\n * @prop --peek-out: Negative peek size (breakout of container) showing the next/previous slides\n * @prop --gutter: Space between the slides\n * @prop --snap-stop: Snap stop of scroll container\n */\n\n:host {\n  --peek: calc(var(--peek-in, 0px) + var(--peek-out, 0px));\n  --peek-out: #{$containerMargin};\n  --padding-top: 0px;\n  --padding-bottom: 0px;\n  --gutter: #{space('xxxsmall')};\n  --snap-stop: always;\n  --slides: 1;\n  --slide-size: calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides));\n\n  @include mq($from: small) {\n    --peek-out: #{$containerMarginSmall};\n  }\n\n  @include mq($from: medium) {\n    --peek-out: 0px;\n  }\n\n  ::slotted(*) {\n    width: 100%;\n    height: 100%;\n    flex-shrink: 0;\n    scroll-snap-align: start;\n    scroll-snap-stop: var(--snap-stop);\n\n    img {\n      -webkit-user-drag: none;\n      user-drag: none;\n      -ms-user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      user-select: none;\n    }\n  }\n\n  ::slotted([slot=\"actions\"]) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    pointer-events: none;\n    padding: 0 var(--peek);\n\n    stzh-text {\n      width: auto;\n    }\n\n    stzh-button {\n      pointer-events: all;\n    }\n  }\n\n  ::slotted(stzh-ratio[slot=\"actions\"]) {\n    stzh-space,\n    stzh-hspace,\n    stzh-vspace {\n      padding: space('xsmall');\n    }\n  }\n\n  ::slotted(stzh-ratio[slot=\"actions\"]) {\n    --background-color: transparent;\n  }\n\n  /* Card */\n\n  &[variant=\"cards\"] {\n    --padding-top: 4px;\n    --padding-bottom: 4px;\n\n    --gutter: #{spaceCurveValue('tiny')};\n\n    @include mq($from: medium) {\n      --peek-out: #{$containerMarginMedium};\n      --gutter: #{spaceCurveValue('tiny', 'medium')};\n    }\n\n    @include mq($from: large) {\n      --peek-out: #{$containerMarginLarge};\n      --gutter: #{spaceCurveValue('tiny', 'large')};\n    }\n\n    @include mq($from: ultra) {\n      --peek-out: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n    }\n  }\n\n  &[variant=\"cards\"] ::slotted([slot=\"actions\"]) {\n    position: relative;\n    order: 1;\n    margin-top: calc(#{space('medium')} - var(--padding-bottom));\n  }\n\n  /* No peek */\n\n  &[no-peek]:not([no-peek=\"false\"]) {\n    --peek-out: 0px;\n    --peek-in: 0px;\n  }\n}\n\n.stzh-carousel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% + var(--peek-out) * 2);\n  margin-left: calc(var(--peek-out) / -1);\n  margin-right: calc(var(--peek-out) / -1);\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__scroll {\n    position: relative;\n    grid-area: slides;\n    display: grid;\n    width: 100%;\n    height: 100%;\n    place-items: center;\n    overflow-x: auto;\n    overflow-y: visible;\n    grid-auto-flow: column;\n    grid-auto-columns: var(--slide-size);\n    grid-auto-rows: 100%;\n    column-gap: var(--gutter);\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    scroll-behavior: smooth;\n    overscroll-behavior-x: contain;\n    scroll-snap-type: x mandatory;\n    scroll-padding: 0 var(--peek);\n    padding: var(--padding-top) var(--peek) var(--padding-bottom);\n\n    @media (prefers-reduced-motion: reduce) {\n      scroll-behavior: auto;\n    }\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--is-draggable &__scroll {\n    cursor: grab;\n  }\n\n  &--is-dragging &__scroll {\n    cursor: grabbing;\n  }\n\n  &--is-disabled &__scroll {\n    cursor: not-allowed;\n    overflow: hidden;\n  }\n\n  &--is-non-interactive {\n    pointer-events: none;\n    touch-action: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Event,\n  EventEmitter,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCarouselSlideStartEvent,\n  StzhCarouselSlidePassedEvent,\n  StzhCarouselSlideEndEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { StzhCarouselLocalizedText } from \"./stzh-carousel.localization\"\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nconst reducedMotionMedia = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\nlet carouselCounter = 0;\n\n/*\n* Inspired by:\n*\n* - https://github.com/barthy-koeln/scroll-snap-slider\n* - https://tannerhodges.github.io/snap-slider/\n* - https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/\n* - https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp\n* - http://web-accessibility.carnegiemuseums.org/code/carousels/\n*/\n\n/**\n * @slot - Slot any element\n * @slot actions - Slot for `stzh-actions` element\n */\n@Component({\n  tag: \"stzh-carousel\",\n  styleUrl: \"stzh-carousel.scss\",\n  scoped: true\n})\nexport class StzhCarousel {\n  /** Translation strings */\n  @Prop() localization: StzhCarouselLocalizedText;\n\n  /** Carousel variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"cards\" = \"default\";\n\n  /** Whether carousel is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether to remove inside/outside peek. */\n  @Prop({ reflect: true }) noPeek: boolean = false;\n\n  /** Slides number */\n  @Prop() slides: number = 1;\n  /** Slides number above small breakpoint */\n  @Prop() slidesSmall: number = 0;\n  /** Slides number above medium breakpoint */\n  @Prop() slidesMedium: number = 0;\n  /** Slides number above large breakpoint */\n  @Prop() slidesLarge: number = 0;\n  /** Slides number above ultra breakpoint */\n  @Prop() slidesUltra: number = 0;\n\n  // /** How many slides per swipe */\n  // @Prop() swipeSlides: number = 1;\n  // /** How many slides per swipe above small breakpoint */\n  // @Prop() swipeSlidesSmall: number = 0;\n  // /** How many slides per swipe above medium breakpoint */\n  // @Prop() swipeSlidesMedium: number = 0;\n  // /** How many slides per swipe above large breakpoint */\n  // @Prop() swipeSlidesLarge: number = 0;\n  // /** How many slides per swipe above ultra breakpoint */\n  // @Prop() swipeSlidesUltra: number = 0;\n\n  /** Active slide (readonly) */\n  @Prop() slide: number = 0;\n\n  /**\n   * Whether autoplay is enabled.\n   * Gets paused, when user has focus inside carousel element or hovers over it.\n   * Also when reduced motion media query is active or carousel is set disabled.\n   * Gets disabled permanently, when user interacts with carousel manually (clicks prev/next, scrolls or drags)\n   */\n  @Prop({ mutable: true }) autoplay: boolean = false;\n\n  /** Timeout delay in milliseconds used for autoplay */\n  @Prop() autoplayTimeout: number = 3000;\n\n  /** Whether scrolling & dragging should be disabled */\n  @Prop() nonInteractive: boolean = false;\n\n  /** Whether drag with mouse should be disabled (still will be able to scroll with wheeling or arrow keys) */\n  @Prop() preventMouseDrag: boolean = false;\n\n  /** Whether autoplay pause should be prevented when user hovers/focuses carousel */\n  @Prop() preventAutoplayPause: boolean = false;\n\n  /** Whether autoplay stop should be prevented when user scroll or drags carousel */\n  @Prop() preventAutoplayStop: boolean = false;\n\n  /**\n   * Enable all slides to be tabbable (will disable prev/next arrows from being tabbable).\n   * By default only the visible slides will be tabbable and the prev/next can be used to change slides\n   * (enabled when `variant` is set to `cards`).\n   */\n  @Prop() tabThrough: boolean = false;\n\n\n  /** Timeout delay in milliseconds used to catch the end of scroll events */\n  @State() scrollTimeout: number = 100;\n\n  /** Minimum drag distance that needs to be reached to swipe to next/previous slide(s). */\n  @State() distanceQuickSwipe: number = 40;\n\n  /** Minimum drag distance that neeeds to be reached to prevent click on slide elements. */\n  @State() distancePreventClick: number = 6;\n\n  @Element() element: HTMLStzhCarouselElement;\n\n  /** Slide start event */\n  @Event() stzhSlideStart: EventEmitter<StzhCarouselSlideStartEvent>;\n\n  /** Slide passed event */\n  @Event() stzhSlidePassed: EventEmitter<StzhCarouselSlidePassedEvent>;\n\n  /** Slide end event */\n  @Event() stzhSlideEnd: EventEmitter<StzhCarouselSlideEndEvent>;\n\n  /** Scroll to a slide by index */\n  @Method()\n  async slideTo(index, behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToSlide(index, behaviour);\n  }\n\n  /** Scroll to previous snap point */\n  @Method()\n  async slideToPrevious(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToPreviousSnapPoint(behaviour);\n  }\n\n  /** Scroll to next snap point */\n  @Method()\n  async slideToNext(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToNextSnapPoint(behaviour);\n  }\n\n  @Watch(\"disabled\")\n  disabledWatcher() {\n    if (this.disabled) {\n      this.scrollElement && this.scrollElement.removeEventListener(\"scroll\", this.onScroll);\n      this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n      this.scrollTimeoutId = null;\n      this.element.removeEventListener(\"mouseenter\", this.onMouseenter);\n      this.element.removeEventListener(\"mouseleave\", this.onMouseleave);\n      this.element.removeEventListener(\"focusin\", this.onFocusin);\n      this.element.removeEventListener(\"focusout\", this.onFocusout);\n      this.onReducedMotionMediaChange();\n      reducedMotionMedia && reducedMotionMedia.removeEventListener(\"change\", this.onReducedMotionMediaChange);\n    } else {\n      this.scrollElement && this.scrollElement.addEventListener(\"scroll\", this.onScroll, { passive: true });\n      this.element.addEventListener(\"mouseenter\", this.onMouseenter);\n      this.element.addEventListener(\"mouseleave\", this.onMouseleave);\n      this.element.addEventListener(\"focusin\", this.onFocusin);\n      this.element.addEventListener(\"focusout\", this.onFocusout);\n      reducedMotionMedia && reducedMotionMedia.addEventListener(\"change\", this.onReducedMotionMediaChange);\n    }\n  }\n\n  @Watch(\"disabled\")\n  @Watch(\"preventMouseDrag\")\n  preventMouseDragWatcher() {\n    if (this.preventMouseDrag || this.disabled) {\n      this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);\n      this.disableTimeoutId = null;\n      this.scrollElement && this.scrollElement.removeEventListener(\"mousedown\", this.startDragging);\n      this.lastX = null;\n    } else {\n      this.scrollElement && this.scrollElement.addEventListener(\"mousedown\", this.startDragging);\n    }\n  }\n\n  @Watch(\"autoplay\")\n  @Watch(\"autoplayDisabledByMotionMedia\")\n  @Watch(\"autoplayDisabledByMouse\")\n  @Watch(\"autoplayDisabledByFocus\")\n  @Watch(\"autoplayDisabledByScroll\")\n  @Watch(\"autoplayDisabledByDrag\")\n  @Watch(\"autoplayTimeout\")\n  @Watch(\"disabled\")\n  autoplayRunningWatcher() {\n    if (\n      !this.autoplay\n      || this.disabled\n      || this.autoplayDisabledByMotionMedia\n      || this.autoplayDisabledByMouse\n      || this.autoplayDisabledByFocus\n      || this.autoplayDisabledByScroll\n      || this.autoplayDisabledByDrag\n    ) {\n      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);\n      this.autoplayIntervalId = null;\n      this.autoplayRunning = false;\n    } else {\n      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);\n      this.autoplayIntervalId = window.setInterval(this.autoplayInterval, this.autoplayTimeout);\n      this.autoplayRunning = true;\n    }\n  }\n\n  @Watch(\"slideElements\")\n  @Watch(\"currentSwipeSlides\")\n  snapAlignWatcher() {\n    this.slideElements.forEach((slide, index) => {\n      const shouldSnap = (index - this.currentSwipeSlides) % this.currentSwipeSlides === 0;\n\n      if (shouldSnap) {\n        slide.style.removeProperty(\"scroll-snap-align\");\n      } else {\n        slide.style.setProperty(\"scroll-snap-align\", \"none\");\n      }\n    });\n  }\n\n  @Watch(\"slide\")\n  @Watch(\"variant\")\n  @Watch(\"slideElements\")\n  @Watch(\"currentSlides\")\n  @Watch(\"tabThrough\")\n  inertWatcher() {\n    this.slideElements.forEach((slide, index) => {\n      const isActive = this.tabThrough\n        || this.variant === \"cards\"\n        || index >= this.slide && index < this.slide + this.currentSlides;\n\n      slide.inert = !isActive;\n\n      if (isActive) {\n        slide.removeAttribute(\"aria-hidden\");\n      } else {\n        slide.setAttribute(\"aria-hidden\", isActive ? \"false\" : \"true\");\n      }\n    });\n  }\n\n  @Watch(\"variant\")\n  @Watch(\"tabThrough\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  prevNextNavigationWatcher() {\n    const tabThrough = this.tabThrough || this.variant === \"cards\";\n\n    const setAriaAttributes = (element) => {\n      const isStzh = isStzhElement(element);\n\n      if (tabThrough) {\n        element.setAttribute(\"aria-hidden\", \"true\");\n        element.setAttribute(isStzh ? \"a11y-tabindex\" : \"tabindex\", \"-1\");\n      } else {\n        element.removeAttribute(\"aria-hidden\");\n        element.removeAttribute(isStzh ? \"a11y-tabindex\" : \"tabindex\");\n      }\n    }\n\n    this.nextElements.forEach(setAriaAttributes);\n    this.previousElements.forEach(setAriaAttributes);\n  }\n\n  @Watch(\"currentSlides\")\n  @Watch(\"slideElements\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  @Watch(\"navigationTextElements\")\n  prevNextHiddenWatcher() {\n    const hideElements = this.slideElements.length <= this.currentSlides;\n\n    const setHiddenAttribute = (element) => {\n      if (hideElements) {\n        element.setAttribute(\"hidden\", \"\");\n      } else {\n        element.removeAttribute(\"hidden\");\n      }\n    };\n\n    this.navigationTextElements.forEach(setHiddenAttribute);\n    this.nextElements.forEach(setHiddenAttribute);\n    this.previousElements.forEach(setHiddenAttribute);\n  }\n\n  @Watch(\"slide\")\n  @Watch(\"currentSlides\")\n  @Watch(\"slideElements\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  nextPrevDisabledWatcher() {\n    if (!this.scrollElement) {\n      return;\n    }\n\n    const reachedFirstSlide = this.slide === 0;\n    const reachedLastSlide = this.hasReachedLastSlide();\n\n    this.nextElements.forEach((element) => {\n      const isStzh = isStzhElement(element);\n      element.setAttribute(isStzh ? \"a11y-disabled\" : \"aria-disabled\", reachedLastSlide ? \"true\" : \"false\");\n    });\n\n    this.previousElements.forEach((element) => {\n      const isStzh = isStzhElement(element);\n      element.setAttribute(isStzh ? \"a11y-disabled\" : \"aria-disabled\", reachedFirstSlide ? \"true\" : \"false\");\n    });\n  }\n\n  @Watch(\"nextElements\")\n  nextElementsWatcher() {\n    this.nextElements.forEach((nextElement) => {\n      const isStzh = isStzhElement(nextElement);\n\n      nextElement.addEventListener(\"click\", this.onNextClick);\n      nextElement.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.carouselId}-scroll`);\n    });\n  }\n\n  @Watch(\"previousElements\")\n  previousElementsWatcher() {\n    this.previousElements.forEach((previousElement) => {\n      const isStzh = isStzhElement(previousElement);\n\n      previousElement.addEventListener(\"click\", this.onPreviousClick);\n      previousElement.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.carouselId}-scroll`);\n    });\n  }\n\n  /** Whether autoplay is currently running */\n  @State() autoplayRunning: boolean = false;\n\n  /** Whether autoplay is currently disabled by reduced motion media */\n  @State() autoplayDisabledByMotionMedia: boolean = false;\n\n  /** Whether autoplay is currently disabled by mouse */\n  @State() autoplayDisabledByMouse: boolean = false;\n\n  /** Whether autoplay is currently disabled by focus */\n  @State() autoplayDisabledByFocus: boolean = false;\n\n  /** Whether autoplay is currently disabled by scroll */\n  @State() autoplayDisabledByScroll: boolean = false;\n\n  /** Whether autoplay is currently disabled by drag */\n  @State() autoplayDisabledByDrag: boolean = false;\n\n  /** Whether user is currently dragging with mouse */\n  @State() dragging: boolean = false;\n\n  /** Whether user is currently scrolling */\n  @State() scrolling: boolean = false;\n\n  /** Aria live text */\n  @State() ariaLive: string = \"\";\n\n  /** Currently shown slides */\n  @State() currentSlides: number = 1;\n\n  /** How many slides should be moved currently */\n  @State() currentSwipeSlides: number = 1;\n\n  /** Slide elements */\n  @State() slideElements: HTMLElement[] = [];\n\n  /** Previous elements */\n  @State() previousElements: HTMLElement[] = [];\n\n  /** Next elements */\n  @State() nextElements: HTMLElement[] = [];\n\n  /** Navigation text elements */\n  @State() navigationTextElements: HTMLElement[] = [];\n\n  private scrollElement: HTMLElement;\n\n  /** Unique generated id */\n  private carouselId: string;\n\n  /** Current scroll position */\n  private slideScrollLeft: number = 0;\n\n  /** Flag whether scrolling was done by user or not */\n  private scrolledByAutoplay: boolean = false;\n\n  /** Timeout ID used to catch the end of scroll events */\n  private scrollTimeoutId: number = null;\n\n  /** Interval ID for autoplay */\n  private autoplayIntervalId: number;\n\n  /** Last drag event position */\n  private lastX: number = null;\n\n  /** Where the dragging started */\n  private startX: number = null;\n\n  /** Where the dragging started scroll position */\n  private startScrollLeft: number = null;\n\n  /** Timeout ID for a smooth drag release */\n  private disableTimeoutId: number = null;\n\n  /** Calculated size of a single item */\n  private itemSize: number;\n\n  /** Resize observer used to update item size */\n  private resizeObserver: ResizeObserver;\n\n  /** Mutation observer used to keep track of slides */\n  private mutationObserver: MutationObserver;\n\n  /** Whether user has just stopped dragging */\n  private stoppedDragging: boolean = false;\n\n  private scrollToSlide(index, behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    this.scrollElement.scrollTo({\n      left: index * this.itemSize,\n      behavior: reducedMotionMedia.matches ? \"auto\" : behaviour\n    });\n  }\n\n  /** Width of a slide  */\n  private sizingMethod() {\n    const css = window.getComputedStyle(this.scrollElement);\n\n    return ((this.scrollElement.firstElementChild as HTMLElement) || this.scrollElement).offsetWidth\n      + parseInt(css.getPropertyValue(\"column-gap\"), 10);\n  }\n\n  /**\n   * Calculates the active slide.\n   * The scroll-snap-type property makes sure that the container snaps perfectly to integer multiples.\n   */\n  private calculateSlide() {\n    // Math.round: Dispatch 'stzhSlidePassed' events around the center of each slide\n    // Math.ceil: Dispatch 'stzhSlidePassed' events as soon as the next one is visible\n    // Math.floor: Dispatch 'stzhSlidePassed' events only when the next one is fully visible\n    return Math.floor(this.scrollElement.scrollLeft / this.itemSize);\n  }\n\n  private scrollToPreviousSnapPoint(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    let previousIndex = this.slide;\n    let canSnap = false;\n\n    while (!canSnap && previousIndex > 0) {\n      previousIndex = previousIndex - 1;\n      canSnap = (previousIndex - this.currentSwipeSlides) % this.currentSwipeSlides === 0;\n    }\n\n    this.slideTo(previousIndex, behaviour);\n  }\n\n  private scrollToNextSnapPoint(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    this.slideTo(this.slide + this.currentSwipeSlides, behaviour);\n  }\n\n  private update() {\n    this.slide = this.calculateSlide();\n    this.slideScrollLeft = this.slide * this.itemSize;\n\n    this.onMutation();\n  }\n\n  private hasReachedLastSlide() {\n    const { scrollLeft, offsetWidth, scrollWidth } = this.scrollElement;\n    return Math.ceil(scrollLeft + offsetWidth) >= scrollWidth;\n  }\n\n  private onReducedMotionMediaChange = () => {\n    this.autoplayDisabledByMotionMedia = reducedMotionMedia.matches;\n  }\n\n  private onMouseenter = () => {\n    if (!this.preventAutoplayPause) {\n      this.autoplayDisabledByMouse = true;\n    }\n  }\n\n  private onMouseleave = () => {\n    this.autoplayDisabledByMouse = false;\n  }\n\n  private onFocusin = () => {\n    if (!this.preventAutoplayPause) {\n      this.autoplayDisabledByFocus = true;\n    }\n  }\n\n  private onFocusout = () => {\n    this.autoplayDisabledByFocus = false;\n  }\n\n  private onPreviousClick = () => {\n    this.scrollToPreviousSnapPoint();\n  }\n\n  private onNextClick = () => {\n    this.scrollToNextSnapPoint();\n  }\n\n  private onSlideResize = () => {\n    if (this.scrollElement) {\n      this.itemSize = this.sizingMethod();\n    }\n  }\n\n  private onMutation = () => {\n    if (!this.scrollElement) {\n      return;\n    }\n\n    this.slideElements = Array.from(this.scrollElement.children) as HTMLElement[];\n\n    this.slideElements.forEach((slide, index) => {\n      slide.setAttribute(\"role\", \"group\");\n      slide.setAttribute(\"aria-roledescription\", \"slide\");\n      slide.setAttribute(\"aria-label\", this.localization.slideLabel\n        .replace(/\\{current\\}/gi, (index + 1).toString())\n        .replace(/\\{total\\}/gi, this.slideElements.length.toString())\n      );\n    });\n\n    this.previousElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-previous]\"));\n    this.nextElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-next]\"));\n    this.navigationTextElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-navigation-text]\"));\n  }\n\n  private onScroll = () => {\n    if (this.scrollTimeoutId === null) {\n      const direction = (this.scrollElement.scrollLeft > this.slideScrollLeft) ? 1 : -1;\n\n      this.scrolling = true;\n\n      if (!this.scrolledByAutoplay) {\n        if (this.preventAutoplayStop) {\n          this.autoplayDisabledByScroll = true;\n        } else {\n          this.autoplay = false;\n        }\n      }\n\n      this.stzhSlideStart.emit({\n        component: \"stzh-carousel\",\n        index: this.slide + direction\n      });\n    }\n\n    if (this.slide !== this.calculateSlide()) {\n      this.update();\n      this.stzhSlidePassed.emit({\n        component: \"stzh-carousel\",\n        index: this.slide\n      });\n    }\n\n    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n    this.scrollTimeoutId = window.setTimeout(this.onScrollEnd, this.scrollTimeout);\n  }\n\n  private onScrollEnd = () => {\n    this.scrollTimeoutId = null;\n    this.update();\n\n    this.scrolling = false;\n    this.scrolledByAutoplay = false;\n    this.autoplayDisabledByScroll = false;\n\n    if (this.stoppedDragging) {\n      this.stoppedDragging = false;\n      this.scrollElement.style.removeProperty(\"scroll-behavior\");\n      this.scrollElement.style.removeProperty(\"scroll-snap-type\");\n    }\n\n    if (this.tabThrough || this.variant === \"cards\") {\n      this.ariaLive = \"\";\n    } else {\n      this.ariaLive = (this.currentSlides > 1 ? this.localization.slidesLabel : this.localization.slideLabel)\n        .replace(/\\{(current|from)\\}/gi, (this.slide + 1).toString())\n        .replace(/\\{to\\}/gi, (this.slide + this.currentSlides).toString())\n        .replace(/\\{total\\}/gi, this.slideElements.length.toString());\n    }\n\n    this.stzhSlideEnd.emit({\n      component: \"stzh-carousel\",\n      index: this.slide\n    });\n  }\n\n  private onMediaChange = () => {\n    const ultra = media(\"ultra\").matches;\n    const large = media(\"large\").matches;\n    const medium = media(\"medium\").matches;\n    const small = media(\"small\").matches;\n\n    if (ultra && this.slidesUltra !== 0) {\n      this.currentSlides = this.slidesUltra;\n    } else if (large && this.slidesLarge !== 0) {\n      this.currentSlides = this.slidesLarge;\n    } else if (medium && this.slidesMedium !== 0) {\n      this.currentSlides = this.slidesMedium;\n    } else if (small && this.slidesSmall !== 0) {\n      this.currentSlides = this.slidesSmall;\n    } else {\n      this.currentSlides = this.slides;\n    }\n\n    // if (ultra && this.swipeSlidesUltra !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesUltra;\n    // } else if (large && this.swipeSlidesLarge !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesLarge;\n    // } else if (medium && this.swipeSlidesMedium !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesMedium;\n    // } else if (small && this.swipeSlidesSmall !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesSmall;\n    // } else {\n    //   this.currentSwipeSlides = this.swipeSlides;\n    // }\n\n    this.currentSwipeSlides = this.currentSlides;\n  }\n\n  /** Scroll the slider the appropriate amount of pixels and update the last event position */\n  private mouseMove = (event: MouseEvent) => {\n    const distance = this.lastX - event.clientX;\n    this.lastX = event.clientX;\n\n    this.scrollElement.scrollLeft += distance;\n  }\n\n  /** Clear disable timeout, set up variables and styles and attach the listener. */\n  private startDragging = (event: MouseEvent) => {\n    event.preventDefault();\n\n    this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);\n    this.disableTimeoutId = null;\n\n    this.startX = this.lastX = event.clientX;\n    this.startScrollLeft = this.scrollElement.scrollLeft;\n    this.scrollElement.style.setProperty(\"scroll-behavior\", \"auto\");\n    this.scrollElement.style.setProperty(\"scroll-snap-type\", \"unset\");\n\n    this.dragging = true;\n\n    if (this.preventAutoplayStop) {\n      this.autoplayDisabledByDrag = true;\n    } else {\n      this.autoplay = false;\n    }\n\n    window.addEventListener(\"mousemove\", this.mouseMove);\n    window.addEventListener(\"mouseup\", this.stopDragging, { capture: true });\n    window.addEventListener(\"click\", this.checkClick, { capture: true });\n  }\n\n  /** User stopped dragging */\n  private stopDragging = (event: MouseEvent) => {\n    event.preventDefault();\n\n    const distance = Math.abs(this.startX - this.lastX);\n    const minimumReached = distance > this.distanceQuickSwipe;\n    const direction = (this.lastX > this.startX) ? 1 : -1;\n\n    this.dragging = false;\n    this.autoplayDisabledByDrag = false;\n\n    const endDraddingLeft = this.scrollElement.scrollLeft;\n\n    this.scrollElement.style.removeProperty(\"scroll-snap-type\");\n    const finalLeft = this.scrollElement.scrollLeft;\n\n    this.scrollElement.style.setProperty(\"scroll-snap-type\", \"unset\");\n    this.scrollElement.scrollTo({ left: endDraddingLeft, behavior: \"auto\" });\n\n    if (finalLeft !== this.startScrollLeft || !minimumReached) {\n      this.scrollElement.scrollTo({ left: finalLeft, behavior: reducedMotionMedia.matches ? \"auto\" : \"smooth\" });\n    } else if (direction === 1) {\n      this.slideToPrevious();\n    } else {\n      this.slideToNext();\n    }\n\n    window.removeEventListener(\"mousemove\", this.mouseMove);\n    window.removeEventListener(\"mouseup\", this.stopDragging, { capture: true });\n\n    this.stoppedDragging = true;\n  }\n\n  private checkClick = (event: MouseEvent) => {\n    const distance = Math.abs(this.startX - this.lastX);\n    const minimumReached = distance > this.distancePreventClick;\n\n    if (minimumReached) {\n      event.preventDefault();\n    }\n\n    this.lastX = null;\n\n    window.removeEventListener(\"click\", this.checkClick, { capture: true });\n  }\n\n  private autoplayInterval = () => {\n    this.scrolledByAutoplay = true;\n\n    if (this.hasReachedLastSlide()) {\n      this.slideTo(0);\n    } else {\n      this.slideToNext();\n    }\n  }\n\n  async componentWillLoad() {\n    this.carouselId = `stzh-carousel-${carouselCounter++}`;\n    this.onMediaChange();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"carousel\");\n    }\n  }\n\n  componentDidLoad() {\n    this.itemSize = this.sizingMethod();\n    this.update();\n\n    this.disabledWatcher();\n    this.preventMouseDragWatcher();\n    this.autoplayRunningWatcher();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.onMediaChange);\n\n    this.resizeObserver = new ResizeObserver(this.onSlideResize)\n    this.resizeObserver.observe(this.element)\n\n    this.mutationObserver = new MutationObserver(this.onMutation);\n    this.mutationObserver.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n    this.scrollTimeoutId = null;\n    this.disabled = true;\n\n    removeMediaChangeListener(this.onMediaChange);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-carousel\": true,\n      \"stzh-carousel--is-disabled\": this.disabled,\n      \"stzh-carousel--is-draggable\": !this.preventMouseDrag,\n      \"stzh-carousel--is-non-interactive\": this.nonInteractive,\n      \"stzh-carousel--is-dragging\": this.dragging,\n      \"stzh-carousel--is-scrolling\": this.scrolling,\n      \"stzh-carousel--has-autoplay\": this.autoplay,\n      \"stzh-carousel--is-autoplay-running\": this.autoplayRunning,\n    };\n\n    return (\n      <Host\n        aria-roledescription=\"carousel\"\n        style={{\n          '--slides': this.currentSlides.toString()\n        }}\n      >\n        <div class={classes}>\n          <slot name=\"actions\"></slot>\n          <div\n            class=\"stzh-carousel__vhidden\"\n            aria-live={this.autoplayDisabledByFocus || this.autoplayDisabledByMouse ? \"polite\" : \"off\"}\n          >\n            {this.ariaLive}\n          </div>\n          <div\n            ref={(el) => (this.scrollElement = el as HTMLDivElement)}\n            id={`${this.carouselId}-scroll`}\n            class=\"stzh-carousel__scroll\"\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhCarouselCss","reducedMotionMedia","window","matchMedia","carouselCounter","StzhCarousel","this","slideScrollLeft","scrolledByAutoplay","scrollTimeoutId","lastX","startX","startScrollLeft","disableTimeoutId","stoppedDragging","onReducedMotionMediaChange","_this","autoplayDisabledByMotionMedia","matches","onMouseenter","preventAutoplayPause","autoplayDisabledByMouse","onMouseleave","onFocusin","autoplayDisabledByFocus","onFocusout","onPreviousClick","scrollToPreviousSnapPoint","onNextClick","scrollToNextSnapPoint","onSlideResize","scrollElement","itemSize","sizingMethod","onMutation","slideElements","Array","from","children","forEach","slide","index","setAttribute","localization","slideLabel","replace","toString","length","previousElements","element","querySelectorAll","nextElements","navigationTextElements","onScroll","direction","scrollLeft","scrolling","preventAutoplayStop","autoplayDisabledByScroll","autoplay","stzhSlideStart","emit","component","calculateSlide","update","stzhSlidePassed","clearTimeout","setTimeout","onScrollEnd","scrollTimeout","style","removeProperty","tabThrough","variant","ariaLive","currentSlides","slidesLabel","stzhSlideEnd","onMediaChange","ultra","media","large","medium","small","slidesUltra","slidesLarge","slidesMedium","slidesSmall","slides","currentSwipeSlides","mouseMove","event","distance","clientX","startDragging","preventDefault","setProperty","dragging","autoplayDisabledByDrag","addEventListener","stopDragging","capture","checkClick","Math","abs","minimumReached","distanceQuickSwipe","endDraddingLeft","finalLeft","scrollTo","left","behavior","slideToPrevious","slideToNext","removeEventListener","distancePreventClick","stopPropagation","autoplayInterval","hasReachedLastSlide","slideTo","class_1","prototype","behaviour","scrollToSlide","disabledWatcher","disabled","passive","preventMouseDragWatcher","preventMouseDrag","autoplayRunningWatcher","autoplayIntervalId","clearInterval","autoplayRunning","setInterval","autoplayTimeout","snapAlignWatcher","shouldSnap","inertWatcher","isActive","inert","removeAttribute","prevNextNavigationWatcher","setAriaAttributes","isStzh","isStzhElement","prevNextHiddenWatcher","hideElements","setHiddenAttribute","nextPrevDisabledWatcher","reachedFirstSlide","reachedLastSlide","nextElementsWatcher","nextElement","concat","carouselId","previousElementsWatcher","previousElement","css","getComputedStyle","firstElementChild","offsetWidth","parseInt","getPropertyValue","round","previousIndex","canSnap","_a","scrollWidth","ceil","componentWillLoad","stzhComponents","utils","fetchTranslations","_b","sent","componentDidLoad","connectedCallback","addMediaChangeListener","resizeObserver","ResizeObserver","observe","mutationObserver","MutationObserver","childList","subtree","disconnectedCallback","removeMediaChangeListener","disconnect","render","classes","nonInteractive","h","Host","class","name","ref","el","id"],"sources":["src/components/stzh-carousel/stzh-carousel.scss?tag=stzh-carousel&encapsulation=scoped","src/components/stzh-carousel/stzh-carousel.tsx"],"sourcesContent":["/**\n * @prop --padding-top: Padding Top of scroll container\n * @prop --padding-bottom: Padding Bottom of scroll container\n * @prop --peek-in: Peek size (inside container) showing the next/previous slides\n * @prop --peek-out: Negative peek size (breakout of container) showing the next/previous slides\n * @prop --gutter: Space between the slides\n * @prop --snap-stop: Snap stop of scroll container\n */\n\n:host {\n  --peek: calc(var(--peek-in, 0px) + var(--peek-out, 0px));\n  --peek-out: #{$containerMargin};\n  --padding-top: 0px;\n  --padding-bottom: 0px;\n  --gutter: #{space('xxxsmall')};\n  --snap-stop: always;\n  --slides: 1;\n  --slide-size: calc((100% - (var(--slides) - 1) * var(--gutter)) / var(--slides));\n\n  @include mq($from: small) {\n    --peek-out: #{$containerMarginSmall};\n  }\n\n  @include mq($from: medium) {\n    --peek-out: 0px;\n  }\n\n  ::slotted(*) {\n    width: 100%;\n    height: 100%;\n    flex-shrink: 0;\n    scroll-snap-align: start;\n    scroll-snap-stop: var(--snap-stop);\n\n    &:where(stzh-figure[inert]) {\n      --caption-opacity: 0;\n    }\n\n    img {\n      -webkit-user-drag: none;\n      user-drag: none;\n      -ms-user-select: none;\n      -moz-user-select: none;\n      -webkit-user-select: none;\n      user-select: none;\n    }\n  }\n\n  ::slotted([slot=\"actions\"]) {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 1;\n    pointer-events: none;\n    padding: 0 var(--peek);\n\n    stzh-text {\n      width: auto;\n    }\n\n    stzh-button {\n      pointer-events: all;\n    }\n  }\n\n  ::slotted(stzh-ratio[slot=\"actions\"]) {\n    stzh-space,\n    stzh-hspace,\n    stzh-vspace {\n      padding: space('xsmall');\n    }\n  }\n\n  ::slotted(stzh-ratio[slot=\"actions\"]) {\n    --background-color: transparent;\n  }\n\n  /* Card */\n\n  &[variant=\"cards\"] {\n    --padding-top: 4px;\n    --padding-bottom: 4px;\n\n    --gutter: #{spaceCurveValue('tiny')};\n\n    @include mq($from: medium) {\n      --peek-out: #{$containerMarginMedium};\n      --gutter: #{spaceCurveValue('tiny', 'medium')};\n    }\n\n    @include mq($from: large) {\n      --peek-out: #{$containerMarginLarge};\n      --gutter: #{spaceCurveValue('tiny', 'large')};\n    }\n\n    @include mq($from: ultra) {\n      --peek-out: calc((100vw - #{$containerMaxWidth} - var(--stzh-scrollbar-width, 0px)) / 2);\n    }\n  }\n\n  &[variant=\"cards\"] ::slotted([slot=\"actions\"]) {\n    position: relative;\n    order: 1;\n    margin-top: calc(#{space('medium')} - var(--padding-bottom));\n  }\n\n  /* No peek */\n\n  &[no-peek]:not([no-peek=\"false\"]) {\n    --peek-out: 0px;\n    --peek-in: 0px;\n  }\n}\n\n.stzh-carousel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% + var(--peek-out) * 2);\n  margin-left: calc(var(--peek-out) / -1);\n  margin-right: calc(var(--peek-out) / -1);\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__scroll {\n    position: relative;\n    grid-area: slides;\n    display: grid;\n    width: 100%;\n    height: 100%;\n    place-items: center;\n    overflow-x: auto;\n    overflow-y: visible;\n    grid-auto-flow: column;\n    grid-auto-columns: var(--slide-size);\n    grid-auto-rows: 100%;\n    column-gap: var(--gutter);\n    -webkit-overflow-scrolling: touch;\n    scrollbar-width: none;\n    -ms-overflow-style: none;\n    scroll-behavior: smooth;\n    overscroll-behavior-x: contain;\n    scroll-snap-type: x mandatory;\n    scroll-padding: 0 var(--peek);\n    padding: var(--padding-top) var(--peek) var(--padding-bottom);\n\n    @media (prefers-reduced-motion: reduce) {\n      scroll-behavior: auto;\n    }\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  &--is-draggable &__scroll {\n    cursor: grab;\n  }\n\n  &--is-dragging &__scroll {\n    cursor: grabbing;\n  }\n\n  &--is-disabled &__scroll {\n    cursor: not-allowed;\n    overflow: hidden;\n  }\n\n  &--is-non-interactive {\n    pointer-events: none;\n    touch-action: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Method,\n  Event,\n  EventEmitter,\n  Watch,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCarouselSlideStartEvent,\n  StzhCarouselSlidePassedEvent,\n  StzhCarouselSlideEndEvent\n} from \"../../index\";\n\nimport { isStzhElement } from \"../../utils/utils\";\nimport { StzhCarouselLocalizedText } from \"./stzh-carousel.localization\"\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\nconst reducedMotionMedia = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n\nlet carouselCounter = 0;\n\n/*\n* Inspired by:\n*\n* - https://github.com/barthy-koeln/scroll-snap-slider\n* - https://tannerhodges.github.io/snap-slider/\n* - https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-1-prev-next/\n* - https://dev.to/jasonwebb/how-to-build-a-more-accessible-carousel-or-slider-35lp\n* - http://web-accessibility.carnegiemuseums.org/code/carousels/\n*/\n\n/**\n * @slot - Slot any element\n * @slot actions - Slot for `stzh-actions` element\n */\n@Component({\n  tag: \"stzh-carousel\",\n  styleUrl: \"stzh-carousel.scss\",\n  scoped: true\n})\nexport class StzhCarousel {\n  /** Translation strings */\n  @Prop() localization: StzhCarouselLocalizedText;\n\n  /** Carousel variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"cards\" = \"default\";\n\n  /** Whether carousel is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Whether to remove inside/outside peek. */\n  @Prop({ reflect: true }) noPeek: boolean = false;\n\n  /** Slides number */\n  @Prop() slides: number = 1;\n  /** Slides number above small breakpoint */\n  @Prop() slidesSmall: number = 0;\n  /** Slides number above medium breakpoint */\n  @Prop() slidesMedium: number = 0;\n  /** Slides number above large breakpoint */\n  @Prop() slidesLarge: number = 0;\n  /** Slides number above ultra breakpoint */\n  @Prop() slidesUltra: number = 0;\n\n  // /** How many slides per swipe */\n  // @Prop() swipeSlides: number = 1;\n  // /** How many slides per swipe above small breakpoint */\n  // @Prop() swipeSlidesSmall: number = 0;\n  // /** How many slides per swipe above medium breakpoint */\n  // @Prop() swipeSlidesMedium: number = 0;\n  // /** How many slides per swipe above large breakpoint */\n  // @Prop() swipeSlidesLarge: number = 0;\n  // /** How many slides per swipe above ultra breakpoint */\n  // @Prop() swipeSlidesUltra: number = 0;\n\n  /** Active slide (readonly) */\n  @Prop() slide: number = 0;\n\n  /**\n   * Whether autoplay is enabled.\n   * Gets paused, when user has focus inside carousel element or hovers over it.\n   * Also when reduced motion media query is active or carousel is set disabled.\n   * Gets disabled permanently, when user interacts with carousel manually (clicks prev/next, scrolls or drags)\n   */\n  @Prop({ mutable: true }) autoplay: boolean = false;\n\n  /** Timeout delay in milliseconds used for autoplay */\n  @Prop() autoplayTimeout: number = 3000;\n\n  /** Whether scrolling & dragging should be disabled */\n  @Prop() nonInteractive: boolean = false;\n\n  /** Whether drag with mouse should be disabled (still will be able to scroll with wheeling or arrow keys) */\n  @Prop() preventMouseDrag: boolean = false;\n\n  /** Whether autoplay pause should be prevented when user hovers/focuses carousel */\n  @Prop() preventAutoplayPause: boolean = false;\n\n  /** Whether autoplay stop should be prevented when user scroll or drags carousel */\n  @Prop() preventAutoplayStop: boolean = false;\n\n  /**\n   * Enable all slides to be tabbable (will disable prev/next arrows from being tabbable).\n   * By default only the visible slides will be tabbable and the prev/next can be used to change slides\n   * (enabled when `variant` is set to `cards`).\n   */\n  @Prop() tabThrough: boolean = false;\n\n\n  /** Timeout delay in milliseconds used to catch the end of scroll events */\n  @State() scrollTimeout: number = 100;\n\n  /** Minimum drag distance that needs to be reached to swipe to next/previous slide(s). */\n  @State() distanceQuickSwipe: number = 40;\n\n  /** Minimum drag distance that neeeds to be reached to prevent click on slide elements. */\n  @State() distancePreventClick: number = 6;\n\n  @Element() element: HTMLStzhCarouselElement;\n\n  /** Slide start event */\n  @Event() stzhSlideStart: EventEmitter<StzhCarouselSlideStartEvent>;\n\n  /** Slide passed event */\n  @Event() stzhSlidePassed: EventEmitter<StzhCarouselSlidePassedEvent>;\n\n  /** Slide end event */\n  @Event() stzhSlideEnd: EventEmitter<StzhCarouselSlideEndEvent>;\n\n  /** Scroll to a slide by index */\n  @Method()\n  async slideTo(index, behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToSlide(index, behaviour);\n  }\n\n  /** Scroll to previous snap point */\n  @Method()\n  async slideToPrevious(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToPreviousSnapPoint(behaviour);\n  }\n\n  /** Scroll to next snap point */\n  @Method()\n  async slideToNext(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    this.scrollToNextSnapPoint(behaviour);\n  }\n\n  @Watch(\"disabled\")\n  disabledWatcher() {\n    if (this.disabled) {\n      this.scrollElement && this.scrollElement.removeEventListener(\"scroll\", this.onScroll);\n      this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n      this.scrollTimeoutId = null;\n      this.element.removeEventListener(\"mouseenter\", this.onMouseenter);\n      this.element.removeEventListener(\"mouseleave\", this.onMouseleave);\n      this.element.removeEventListener(\"focusin\", this.onFocusin);\n      this.element.removeEventListener(\"focusout\", this.onFocusout);\n      this.onReducedMotionMediaChange();\n      reducedMotionMedia && reducedMotionMedia.removeEventListener(\"change\", this.onReducedMotionMediaChange);\n    } else {\n      this.scrollElement && this.scrollElement.addEventListener(\"scroll\", this.onScroll, { passive: true });\n      this.element.addEventListener(\"mouseenter\", this.onMouseenter);\n      this.element.addEventListener(\"mouseleave\", this.onMouseleave);\n      this.element.addEventListener(\"focusin\", this.onFocusin);\n      this.element.addEventListener(\"focusout\", this.onFocusout);\n      reducedMotionMedia && reducedMotionMedia.addEventListener(\"change\", this.onReducedMotionMediaChange);\n    }\n  }\n\n  @Watch(\"disabled\")\n  @Watch(\"preventMouseDrag\")\n  preventMouseDragWatcher() {\n    if (this.preventMouseDrag || this.disabled) {\n      this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);\n      this.disableTimeoutId = null;\n      this.scrollElement && this.scrollElement.removeEventListener(\"mousedown\", this.startDragging);\n      this.lastX = null;\n    } else {\n      this.scrollElement && this.scrollElement.addEventListener(\"mousedown\", this.startDragging);\n    }\n  }\n\n  @Watch(\"autoplay\")\n  @Watch(\"autoplayDisabledByMotionMedia\")\n  @Watch(\"autoplayDisabledByMouse\")\n  @Watch(\"autoplayDisabledByFocus\")\n  @Watch(\"autoplayDisabledByScroll\")\n  @Watch(\"autoplayDisabledByDrag\")\n  @Watch(\"autoplayTimeout\")\n  @Watch(\"disabled\")\n  autoplayRunningWatcher() {\n    if (\n      !this.autoplay\n      || this.disabled\n      || this.autoplayDisabledByMotionMedia\n      || this.autoplayDisabledByMouse\n      || this.autoplayDisabledByFocus\n      || this.autoplayDisabledByScroll\n      || this.autoplayDisabledByDrag\n    ) {\n      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);\n      this.autoplayIntervalId = null;\n      this.autoplayRunning = false;\n    } else {\n      this.autoplayIntervalId && window.clearInterval(this.autoplayIntervalId);\n      this.autoplayIntervalId = window.setInterval(this.autoplayInterval, this.autoplayTimeout);\n      this.autoplayRunning = true;\n    }\n  }\n\n  @Watch(\"slideElements\")\n  @Watch(\"currentSwipeSlides\")\n  snapAlignWatcher() {\n    this.slideElements.forEach((slide, index) => {\n      const shouldSnap = (index - this.currentSwipeSlides) % this.currentSwipeSlides === 0;\n\n      if (shouldSnap) {\n        slide.style.removeProperty(\"scroll-snap-align\");\n      } else {\n        slide.style.setProperty(\"scroll-snap-align\", \"none\");\n      }\n    });\n  }\n\n  @Watch(\"slide\")\n  @Watch(\"variant\")\n  @Watch(\"slideElements\")\n  @Watch(\"currentSlides\")\n  @Watch(\"tabThrough\")\n  inertWatcher() {\n    this.slideElements.forEach((slide, index) => {\n      const isActive = this.tabThrough\n        || this.variant === \"cards\"\n        || index >= this.slide && index < this.slide + this.currentSlides;\n\n      slide.inert = !isActive;\n\n      if (isActive) {\n        slide.removeAttribute(\"aria-hidden\");\n      } else {\n        slide.setAttribute(\"aria-hidden\", isActive ? \"false\" : \"true\");\n      }\n    });\n  }\n\n  @Watch(\"variant\")\n  @Watch(\"tabThrough\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  prevNextNavigationWatcher() {\n    const tabThrough = this.tabThrough || this.variant === \"cards\";\n\n    const setAriaAttributes = (element) => {\n      const isStzh = isStzhElement(element);\n\n      if (tabThrough) {\n        element.setAttribute(\"aria-hidden\", \"true\");\n        element.setAttribute(isStzh ? \"a11y-tabindex\" : \"tabindex\", \"-1\");\n      } else {\n        element.removeAttribute(\"aria-hidden\");\n        element.removeAttribute(isStzh ? \"a11y-tabindex\" : \"tabindex\");\n      }\n    }\n\n    this.nextElements.forEach(setAriaAttributes);\n    this.previousElements.forEach(setAriaAttributes);\n  }\n\n  @Watch(\"currentSlides\")\n  @Watch(\"slideElements\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  @Watch(\"navigationTextElements\")\n  prevNextHiddenWatcher() {\n    const hideElements = this.slideElements.length <= this.currentSlides;\n\n    const setHiddenAttribute = (element) => {\n      if (hideElements) {\n        element.setAttribute(\"hidden\", \"\");\n      } else {\n        element.removeAttribute(\"hidden\");\n      }\n    };\n\n    this.navigationTextElements.forEach(setHiddenAttribute);\n    this.nextElements.forEach(setHiddenAttribute);\n    this.previousElements.forEach(setHiddenAttribute);\n  }\n\n  @Watch(\"slide\")\n  @Watch(\"currentSlides\")\n  @Watch(\"slideElements\")\n  @Watch(\"nextElements\")\n  @Watch(\"previousElements\")\n  nextPrevDisabledWatcher() {\n    if (!this.scrollElement) {\n      return;\n    }\n\n    const reachedFirstSlide = this.slide === 0;\n    const reachedLastSlide = this.hasReachedLastSlide();\n\n    this.nextElements.forEach((element) => {\n      const isStzh = isStzhElement(element);\n      element.setAttribute(isStzh ? \"a11y-disabled\" : \"aria-disabled\", reachedLastSlide ? \"true\" : \"false\");\n    });\n\n    this.previousElements.forEach((element) => {\n      const isStzh = isStzhElement(element);\n      element.setAttribute(isStzh ? \"a11y-disabled\" : \"aria-disabled\", reachedFirstSlide ? \"true\" : \"false\");\n    });\n  }\n\n  @Watch(\"nextElements\")\n  nextElementsWatcher() {\n    this.nextElements.forEach((nextElement) => {\n      const isStzh = isStzhElement(nextElement);\n\n      nextElement.addEventListener(\"click\", this.onNextClick);\n      nextElement.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.carouselId}-scroll`);\n    });\n  }\n\n  @Watch(\"previousElements\")\n  previousElementsWatcher() {\n    this.previousElements.forEach((previousElement) => {\n      const isStzh = isStzhElement(previousElement);\n\n      previousElement.addEventListener(\"click\", this.onPreviousClick);\n      previousElement.setAttribute(isStzh ? \"a11y-controls\" : \"aria-controls\", `${this.carouselId}-scroll`);\n    });\n  }\n\n  /** Whether autoplay is currently running */\n  @State() autoplayRunning: boolean = false;\n\n  /** Whether autoplay is currently disabled by reduced motion media */\n  @State() autoplayDisabledByMotionMedia: boolean = false;\n\n  /** Whether autoplay is currently disabled by mouse */\n  @State() autoplayDisabledByMouse: boolean = false;\n\n  /** Whether autoplay is currently disabled by focus */\n  @State() autoplayDisabledByFocus: boolean = false;\n\n  /** Whether autoplay is currently disabled by scroll */\n  @State() autoplayDisabledByScroll: boolean = false;\n\n  /** Whether autoplay is currently disabled by drag */\n  @State() autoplayDisabledByDrag: boolean = false;\n\n  /** Whether user is currently dragging with mouse */\n  @State() dragging: boolean = false;\n\n  /** Whether user is currently scrolling */\n  @State() scrolling: boolean = false;\n\n  /** Aria live text */\n  @State() ariaLive: string = \"\";\n\n  /** Currently shown slides */\n  @State() currentSlides: number = 1;\n\n  /** How many slides should be moved currently */\n  @State() currentSwipeSlides: number = 1;\n\n  /** Slide elements */\n  @State() slideElements: HTMLElement[] = [];\n\n  /** Previous elements */\n  @State() previousElements: HTMLElement[] = [];\n\n  /** Next elements */\n  @State() nextElements: HTMLElement[] = [];\n\n  /** Navigation text elements */\n  @State() navigationTextElements: HTMLElement[] = [];\n\n  private scrollElement: HTMLElement;\n\n  /** Unique generated id */\n  private carouselId: string;\n\n  /** Current scroll position */\n  private slideScrollLeft: number = 0;\n\n  /** Flag whether scrolling was done by user or not */\n  private scrolledByAutoplay: boolean = false;\n\n  /** Timeout ID used to catch the end of scroll events */\n  private scrollTimeoutId: number = null;\n\n  /** Interval ID for autoplay */\n  private autoplayIntervalId: number;\n\n  /** Last drag event position */\n  private lastX: number = null;\n\n  /** Where the dragging started */\n  private startX: number = null;\n\n  /** Where the dragging started scroll position */\n  private startScrollLeft: number = null;\n\n  /** Timeout ID for a smooth drag release */\n  private disableTimeoutId: number = null;\n\n  /** Calculated size of a single item */\n  private itemSize: number;\n\n  /** Resize observer used to update item size */\n  private resizeObserver: ResizeObserver;\n\n  /** Mutation observer used to keep track of slides */\n  private mutationObserver: MutationObserver;\n\n  /** Whether user has just stopped dragging */\n  private stoppedDragging: boolean = false;\n\n  private scrollToSlide(index, behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    this.scrollElement.scrollTo({\n      left: index * this.itemSize,\n      behavior: reducedMotionMedia.matches ? \"auto\" : behaviour\n    });\n  }\n\n  /** Width of a slide  */\n  private sizingMethod() {\n    const css = window.getComputedStyle(this.scrollElement);\n\n    return ((this.scrollElement.firstElementChild as HTMLElement) || this.scrollElement).offsetWidth\n      + parseInt(css.getPropertyValue(\"column-gap\"), 10);\n  }\n\n  /**\n   * Calculates the active slide.\n   * The scroll-snap-type property makes sure that the container snaps perfectly to integer multiples.\n   */\n  private calculateSlide() {\n    // Math.round: Dispatch 'stzhSlidePassed' events around the center of each slide\n    // Math.ceil: Dispatch 'stzhSlidePassed' events as soon as the next one is visible\n    // Math.floor: Dispatch 'stzhSlidePassed' events only when the next one is fully visible\n    return Math.round(this.scrollElement.scrollLeft / this.itemSize);\n  }\n\n  private scrollToPreviousSnapPoint(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    let previousIndex = this.slide;\n    let canSnap = false;\n\n    while (!canSnap && previousIndex > 0) {\n      previousIndex = previousIndex - 1;\n      canSnap = (previousIndex - this.currentSwipeSlides) % this.currentSwipeSlides === 0;\n    }\n\n    this.slideTo(previousIndex, behaviour);\n  }\n\n  private scrollToNextSnapPoint(behaviour: \"auto\" | \"smooth\" = \"smooth\") {\n    if (this.disabled) {\n      return;\n    }\n\n    this.slideTo(this.slide + this.currentSwipeSlides, behaviour);\n  }\n\n  private update() {\n    this.slide = this.calculateSlide();\n    this.slideScrollLeft = this.slide * this.itemSize;\n\n    this.onMutation();\n  }\n\n  private hasReachedLastSlide() {\n    const { scrollLeft, offsetWidth, scrollWidth } = this.scrollElement;\n    return Math.ceil(scrollLeft + offsetWidth) >= scrollWidth;\n  }\n\n  private onReducedMotionMediaChange = () => {\n    this.autoplayDisabledByMotionMedia = reducedMotionMedia.matches;\n  }\n\n  private onMouseenter = () => {\n    if (!this.preventAutoplayPause) {\n      this.autoplayDisabledByMouse = true;\n    }\n  }\n\n  private onMouseleave = () => {\n    this.autoplayDisabledByMouse = false;\n  }\n\n  private onFocusin = () => {\n    if (!this.preventAutoplayPause) {\n      this.autoplayDisabledByFocus = true;\n    }\n  }\n\n  private onFocusout = () => {\n    this.autoplayDisabledByFocus = false;\n  }\n\n  private onPreviousClick = () => {\n    this.scrollToPreviousSnapPoint();\n  }\n\n  private onNextClick = () => {\n    this.scrollToNextSnapPoint();\n  }\n\n  private onSlideResize = () => {\n    if (this.scrollElement) {\n      this.itemSize = this.sizingMethod();\n    }\n  }\n\n  private onMutation = () => {\n    if (!this.scrollElement) {\n      return;\n    }\n\n    this.slideElements = Array.from(this.scrollElement.children) as HTMLElement[];\n\n    this.slideElements.forEach((slide, index) => {\n      slide.setAttribute(\"role\", \"group\");\n      slide.setAttribute(\"aria-roledescription\", \"slide\");\n      slide.setAttribute(\"aria-label\", this.localization.slideLabel\n        .replace(/\\{current\\}/gi, (index + 1).toString())\n        .replace(/\\{total\\}/gi, this.slideElements.length.toString())\n      );\n    });\n\n    this.previousElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-previous]\"));\n    this.nextElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-next]\"));\n    this.navigationTextElements = Array.from(this.element.querySelectorAll(\"[data-stzh-carousel-navigation-text]\"));\n  }\n\n  private onScroll = () => {\n    if (this.scrollTimeoutId === null) {\n      const direction = (this.scrollElement.scrollLeft > this.slideScrollLeft) ? 1 : -1;\n\n      this.scrolling = true;\n\n      if (!this.scrolledByAutoplay) {\n        if (this.preventAutoplayStop) {\n          this.autoplayDisabledByScroll = true;\n        } else {\n          this.autoplay = false;\n        }\n      }\n\n      this.stzhSlideStart.emit({\n        component: \"stzh-carousel\",\n        index: this.slide + direction\n      });\n    }\n\n    if (this.slide !== this.calculateSlide()) {\n      this.update();\n      this.stzhSlidePassed.emit({\n        component: \"stzh-carousel\",\n        index: this.slide\n      });\n    }\n\n    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n    this.scrollTimeoutId = window.setTimeout(this.onScrollEnd, this.scrollTimeout);\n  }\n\n  private onScrollEnd = () => {\n    this.scrollTimeoutId = null;\n    this.update();\n\n    this.scrolling = false;\n    this.scrolledByAutoplay = false;\n    this.autoplayDisabledByScroll = false;\n\n    if (this.stoppedDragging) {\n      this.stoppedDragging = false;\n      this.scrollElement.style.removeProperty(\"scroll-behavior\");\n      this.scrollElement.style.removeProperty(\"scroll-snap-type\");\n    }\n\n    if (this.tabThrough || this.variant === \"cards\") {\n      this.ariaLive = \"\";\n    } else {\n      this.ariaLive = (this.currentSlides > 1 ? this.localization.slidesLabel : this.localization.slideLabel)\n        .replace(/\\{(current|from)\\}/gi, (this.slide + 1).toString())\n        .replace(/\\{to\\}/gi, (this.slide + this.currentSlides).toString())\n        .replace(/\\{total\\}/gi, this.slideElements.length.toString());\n    }\n\n    this.stzhSlideEnd.emit({\n      component: \"stzh-carousel\",\n      index: this.slide\n    });\n  }\n\n  private onMediaChange = () => {\n    const ultra = media(\"ultra\").matches;\n    const large = media(\"large\").matches;\n    const medium = media(\"medium\").matches;\n    const small = media(\"small\").matches;\n\n    if (ultra && this.slidesUltra !== 0) {\n      this.currentSlides = this.slidesUltra;\n    } else if (large && this.slidesLarge !== 0) {\n      this.currentSlides = this.slidesLarge;\n    } else if (medium && this.slidesMedium !== 0) {\n      this.currentSlides = this.slidesMedium;\n    } else if (small && this.slidesSmall !== 0) {\n      this.currentSlides = this.slidesSmall;\n    } else {\n      this.currentSlides = this.slides;\n    }\n\n    // if (ultra && this.swipeSlidesUltra !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesUltra;\n    // } else if (large && this.swipeSlidesLarge !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesLarge;\n    // } else if (medium && this.swipeSlidesMedium !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesMedium;\n    // } else if (small && this.swipeSlidesSmall !== 0) {\n    //   this.currentSwipeSlides = this.swipeSlidesSmall;\n    // } else {\n    //   this.currentSwipeSlides = this.swipeSlides;\n    // }\n\n    this.currentSwipeSlides = this.currentSlides;\n  }\n\n  /** Scroll the slider the appropriate amount of pixels and update the last event position */\n  private mouseMove = (event: MouseEvent) => {\n    const distance = this.lastX - event.clientX;\n    this.lastX = event.clientX;\n\n    this.scrollElement.scrollLeft += distance;\n  }\n\n  /** Clear disable timeout, set up variables and styles and attach the listener. */\n  private startDragging = (event: MouseEvent) => {\n    event.preventDefault();\n\n    this.disableTimeoutId && window.clearTimeout(this.disableTimeoutId);\n    this.disableTimeoutId = null;\n\n    this.startX = this.lastX = event.clientX;\n    this.startScrollLeft = this.scrollElement.scrollLeft;\n    this.scrollElement.style.setProperty(\"scroll-behavior\", \"auto\");\n    this.scrollElement.style.setProperty(\"scroll-snap-type\", \"unset\");\n\n    this.dragging = true;\n\n    if (this.preventAutoplayStop) {\n      this.autoplayDisabledByDrag = true;\n    } else {\n      this.autoplay = false;\n    }\n\n    window.addEventListener(\"mousemove\", this.mouseMove);\n    window.addEventListener(\"mouseup\", this.stopDragging, { capture: true });\n    window.addEventListener(\"click\", this.checkClick, { capture: true });\n  }\n\n  /** User stopped dragging */\n  private stopDragging = (event: MouseEvent) => {\n    event.preventDefault();\n\n    const distance = Math.abs(this.startX - this.lastX);\n    const minimumReached = distance > this.distanceQuickSwipe;\n    const direction = (this.lastX > this.startX) ? 1 : -1;\n\n    this.dragging = false;\n    this.autoplayDisabledByDrag = false;\n\n    const endDraddingLeft = this.scrollElement.scrollLeft;\n\n    this.scrollElement.style.removeProperty(\"scroll-snap-type\");\n    const finalLeft = this.scrollElement.scrollLeft;\n\n    this.scrollElement.style.setProperty(\"scroll-snap-type\", \"unset\");\n    this.scrollElement.scrollTo({ left: endDraddingLeft, behavior: \"auto\" });\n\n    if (finalLeft !== this.startScrollLeft || !minimumReached) {\n      this.scrollElement.scrollTo({ left: finalLeft, behavior: reducedMotionMedia.matches ? \"auto\" : \"smooth\" });\n    } else if (direction === 1) {\n      this.slideToPrevious();\n    } else {\n      this.slideToNext();\n    }\n\n    window.removeEventListener(\"mousemove\", this.mouseMove);\n    window.removeEventListener(\"mouseup\", this.stopDragging, { capture: true });\n\n    this.stoppedDragging = true;\n  }\n\n  private checkClick = (event: MouseEvent) => {\n    const distance = Math.abs(this.startX - this.lastX);\n    const minimumReached = distance > this.distancePreventClick;\n\n    if (minimumReached) {\n      event.preventDefault();\n      event.stopPropagation();\n    }\n\n    this.lastX = null;\n\n    window.removeEventListener(\"click\", this.checkClick, { capture: true });\n  }\n\n  private autoplayInterval = () => {\n    this.scrolledByAutoplay = true;\n\n    if (this.hasReachedLastSlide()) {\n      this.slideTo(0);\n    } else {\n      this.slideToNext();\n    }\n  }\n\n  async componentWillLoad() {\n    this.carouselId = `stzh-carousel-${carouselCounter++}`;\n    this.onMediaChange();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"carousel\");\n    }\n  }\n\n  componentDidLoad() {\n    this.itemSize = this.sizingMethod();\n    this.update();\n\n    this.disabledWatcher();\n    this.preventMouseDragWatcher();\n    this.autoplayRunningWatcher();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.onMediaChange);\n\n    this.resizeObserver = new ResizeObserver(this.onSlideResize)\n    this.resizeObserver.observe(this.element)\n\n    this.mutationObserver = new MutationObserver(this.onMutation);\n    this.mutationObserver.observe(this.element, {\n      childList: true,\n      subtree: true\n    });\n  }\n\n  disconnectedCallback() {\n    this.scrollTimeoutId && window.clearTimeout(this.scrollTimeoutId);\n    this.scrollTimeoutId = null;\n    this.disabled = true;\n\n    removeMediaChangeListener(this.onMediaChange);\n\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n    }\n\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-carousel\": true,\n      \"stzh-carousel--is-disabled\": this.disabled,\n      \"stzh-carousel--is-draggable\": !this.preventMouseDrag,\n      \"stzh-carousel--is-non-interactive\": this.nonInteractive,\n      \"stzh-carousel--is-dragging\": this.dragging,\n      \"stzh-carousel--is-scrolling\": this.scrolling,\n      \"stzh-carousel--has-autoplay\": this.autoplay,\n      \"stzh-carousel--is-autoplay-running\": this.autoplayRunning,\n    };\n\n    return (\n      <Host\n        aria-roledescription=\"carousel\"\n        style={{\n          '--slides': this.currentSlides.toString()\n        }}\n      >\n        <div class={classes}>\n          <slot name=\"actions\"></slot>\n          <div\n            class=\"stzh-carousel__vhidden\"\n            aria-live={this.autoplayDisabledByFocus || this.autoplayDisabledByMouse ? \"polite\" : \"off\"}\n          >\n            {this.ariaLive}\n          </div>\n          <div\n            ref={(el) => (this.scrollElement = el as HTMLDivElement)}\n            id={`${this.carouselId}-scroll`}\n            class=\"stzh-carousel__scroll\"\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-cell.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,a as Host}from"./index-bfb5b569.js";var stzhCellCss=':host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);-ms-flex-preferred-size:var(--cell-width);flex-basis:var(--cell-width);-ms-flex-negative:0;flex-shrink:0}:host([align=left]){margin-right:auto}:host([align=right]){margin-left:auto}:host([align=middle]){margin-left:auto;margin-right:auto}:host([align-self=start]){-ms-flex-item-align:start;align-self:flex-start}:host([align-self=end]){-ms-flex-item-align:end;align-self:flex-end}:host([align-self=center]){-ms-flex-item-align:center;align-self:center}:host([align-self=baseline]){-ms-flex-item-align:baseline;align-self:baseline}:host([align-self=stretch]){-ms-flex-item-align:stretch;align-self:stretch}:host([span="1"]){--cell-width:8.3333333333%}:host([span="2"]){--cell-width:16.6666666667%}:host([span="3"]){--cell-width:25%}:host([span="4"]){--cell-width:33.3333333333%}:host([span="5"]){--cell-width:41.6666666667%}:host([span="6"]){--cell-width:50%}:host([span="7"]){--cell-width:58.3333333333%}:host([span="8"]){--cell-width:66.6666666667%}:host([span="9"]){--cell-width:75%}:host([span="10"]){--cell-width:83.3333333333%}:host([span="11"]){--cell-width:91.6666666667%}:host([span="12"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small="3"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small="6"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small="9"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small="12"]){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader="3"]){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader="6"]){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader="9"]){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader="12"]){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium="3"]){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium="6"]){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium="9"]){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium="12"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="3"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="6"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="9"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="12"]){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra="3"]){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra="6"]){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra="9"]){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra="12"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 1024px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}';var StzhCell=function(){function e(e){registerInstance(this,e);this.span=12;this.spanSmall=0;this.spanMedium=0;this.spanLarge=0;this.spanUltra=0;this.align="none";this.alignSelf="auto"}e.prototype.render=function(){return h(Host,null,h("div",{class:{"stzh-cell":true}},h("slot",null)))};return e}();StzhCell.style=stzhCellCss;export{StzhCell as stzh_cell};
+import{r as registerInstance,h,a as Host}from"./index-bfb5b569.js";var stzhCellCss=':host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--cell-width:100%;max-width:100%;width:var(--cell-width);-ms-flex-preferred-size:var(--cell-width);flex-basis:var(--cell-width);-ms-flex-negative:0;flex-shrink:0}:host([align=left]){margin-right:auto}:host([align=right]){margin-left:auto}:host([align=middle]){margin-left:auto;margin-right:auto}:host([align-self=start]){-ms-flex-item-align:start;align-self:flex-start}:host([align-self=end]){-ms-flex-item-align:end;align-self:flex-end}:host([align-self=center]){-ms-flex-item-align:center;align-self:center}:host([align-self=baseline]){-ms-flex-item-align:baseline;align-self:baseline}:host([align-self=stretch]){-ms-flex-item-align:stretch;align-self:stretch}:host([span="1"]){--cell-width:8.3333333333%}:host([span="2"]){--cell-width:16.6666666667%}:host([span="3"]){--cell-width:25%}:host([span="4"]){--cell-width:33.3333333333%}:host([span="5"]){--cell-width:41.6666666667%}:host([span="6"]){--cell-width:50%}:host([span="7"]){--cell-width:58.3333333333%}:host([span="8"]){--cell-width:66.6666666667%}:host([span="9"]){--cell-width:75%}:host([span="10"]){--cell-width:83.3333333333%}:host([span="11"]){--cell-width:91.6666666667%}:host([span="12"]){--cell-width:100%}@media screen and (min-width: 600px){:host([span-small="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 600px){:host([span-small="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 600px){:host([span-small="3"]){--cell-width:25%}}@media screen and (min-width: 600px){:host([span-small="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 600px){:host([span-small="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 600px){:host([span-small="6"]){--cell-width:50%}}@media screen and (min-width: 600px){:host([span-small="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 600px){:host([span-small="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 600px){:host([span-small="9"]){--cell-width:75%}}@media screen and (min-width: 600px){:host([span-small="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 600px){:host([span-small="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 600px){:host([span-small="12"]){--cell-width:100%}}@media screen and (min-width: 800px){:host([span-smallheader="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader="3"]){--cell-width:25%}}@media screen and (min-width: 800px){:host([span-smallheader="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader="6"]){--cell-width:50%}}@media screen and (min-width: 800px){:host([span-smallheader="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader="9"]){--cell-width:75%}}@media screen and (min-width: 800px){:host([span-smallheader="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 800px){:host([span-smallheader="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 800px){:host([span-smallheader="12"]){--cell-width:100%}}@media screen and (min-width: 1024px){:host([span-medium="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium="3"]){--cell-width:25%}}@media screen and (min-width: 1024px){:host([span-medium="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium="6"]){--cell-width:50%}}@media screen and (min-width: 1024px){:host([span-medium="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium="9"]){--cell-width:75%}}@media screen and (min-width: 1024px){:host([span-medium="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1024px){:host([span-medium="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1024px){:host([span-medium="12"]){--cell-width:100%}}@media screen and (min-width: 1260px){:host([span-large="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="3"]){--cell-width:25%}}@media screen and (min-width: 1260px){:host([span-large="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="6"]){--cell-width:50%}}@media screen and (min-width: 1260px){:host([span-large="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="9"]){--cell-width:75%}}@media screen and (min-width: 1260px){:host([span-large="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1260px){:host([span-large="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1260px){:host([span-large="12"]){--cell-width:100%}}@media screen and (min-width: 1440px){:host([span-ultra="1"]){--cell-width:8.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra="2"]){--cell-width:16.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra="3"]){--cell-width:25%}}@media screen and (min-width: 1440px){:host([span-ultra="4"]){--cell-width:33.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra="5"]){--cell-width:41.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra="6"]){--cell-width:50%}}@media screen and (min-width: 1440px){:host([span-ultra="7"]){--cell-width:58.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra="8"]){--cell-width:66.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra="9"]){--cell-width:75%}}@media screen and (min-width: 1440px){:host([span-ultra="10"]){--cell-width:83.3333333333%}}@media screen and (min-width: 1440px){:host([span-ultra="11"]){--cell-width:91.6666666667%}}@media screen and (min-width: 1440px){:host([span-ultra="12"]){--cell-width:100%}}.stzh-cell{height:100%;padding-left:calc(var(--stzh-grid-gutter) / 2);padding-right:calc(var(--stzh-grid-gutter) / 2)}@media screen and (min-width: 600px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-small) / 2);padding-right:calc(var(--stzh-grid-gutter-small) / 2)}}@media screen and (min-width: 1024px){.stzh-cell{padding-left:calc(var(--stzh-grid-gutter-medium) / 2);padding-right:calc(var(--stzh-grid-gutter-medium) / 2)}}';var StzhCell=function(){function e(e){registerInstance(this,e);this.span=12;this.spanSmall=undefined;this.spanMedium=undefined;this.spanLarge=undefined;this.spanUltra=undefined;this.align="none";this.alignSelf="auto"}e.prototype.render=function(){return h(Host,null,h("div",{class:{"stzh-cell":true}},h("slot",null)))};return e}();StzhCell.style=stzhCellCss;export{StzhCell as stzh_cell};
 //# sourceMappingURL=stzh-cell.entry.js.map

package/dist/esm-es5/stzh-cell.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhCellCss","StzhCell","prototype","render","h","Host","class"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop() span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop() spanSmall: number = 0;\n  /** Default span of each cell above medium breakpoint */\n  @Prop() spanMedium: number = 0;\n  /** Default span of each cell above large breakpoint */\n  @Prop() spanLarge: number = 0;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop() spanUltra: number = 0;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mEAAA,IAAMA,YAAc,q9O,ICiBPC,SAAQ,W,iDAEI,G,eAEK,E,gBAEC,E,eAED,E,eAEA,E,WAG2C,O,eAGhB,M,CAEvDA,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,KACHD,EAAA,OACEE,MAAO,CACL,YAAa,OAGfF,EAAA,c,WA1BW,G"}
+{"version":3,"names":["stzhCellCss","StzhCell","prototype","render","h","Host","class"],"sources":["src/components/stzh-cell/stzh-cell.scss?tag=stzh-cell&encapsulation=shadow","src/components/stzh-cell/stzh-cell.tsx"],"sourcesContent":[":host {\n  // couldn't use cell-span and calcuate the with with css calc\n  // since IE was calculating the width wrongly with certain viewport widths\n  // so calculating it with sass and using the width directly\n  --cell-width: 100%;\n\n  max-width: 100%;\n  width: var(--cell-width);\n  flex-basis: var(--cell-width);\n  flex-shrink: 0;\n}\n\n/* Align variants */\n\n:host([align=\"left\"]) {\n  margin-right: auto;\n}\n\n:host([align=\"right\"]) {\n  margin-left: auto;\n}\n\n:host([align=\"middle\"]) {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n/* Align self variants */\n\n:host([align-self=\"start\"]) {\n  align-self: flex-start;\n}\n\n:host([align-self=\"end\"]) {\n  align-self: flex-end;\n}\n\n:host([align-self=\"center\"]) {\n  align-self: center;\n}\n\n:host([align-self=\"baseline\"]) {\n  align-self: baseline;\n}\n\n:host([align-self=\"stretch\"]) {\n  align-self: stretch;\n}\n\n@mixin cellProps($breakpoint: null) {\n  @for $i from 1 through $gridCells {\n    @if $breakpoint {\n      :host([span-#{$breakpoint}=\"#{$i}\"]) {\n        @include mq($from: $breakpoint) {\n          --cell-width: #{100% / ($gridCells / $i)};\n        }\n      }\n    } @else {\n      :host([span=\"#{$i}\"]) {\n        --cell-width: #{100% / ($gridCells / $i)};\n      }\n    }\n  }\n}\n\n@include cellProps();\n\n@each $breakpoint, $size in $breakpoints {\n  @include cellProps($breakpoint);\n}\n\n.stzh-cell {\n  height: 100%;\n  padding-left: calc(#{$gridGutter} / 2);\n  padding-right: calc(#{$gridGutter} / 2);\n\n  @include mq($from: small) {\n    padding-left: calc(#{$gridGutterSmall} / 2);\n    padding-right: calc(#{$gridGutterSmall} / 2);\n  }\n\n  @include mq($from: medium) {\n    padding-left: calc(#{$gridGutterMedium} / 2);\n    padding-right: calc(#{$gridGutterMedium} / 2);\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport { Layout } from \"../../index\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-cell\",\n  styleUrl: \"stzh-cell.scss\",\n  shadow: true\n})\nexport class StzhCell {\n  /** Default span of each cell */\n  @Prop({ reflect: true }) span: number = 12;\n  /** Default span of each cell above small breakpoint */\n  @Prop({ reflect: true }) spanSmall: number;\n  /** Default span of each cell above medium breakpoint */\n  @Prop({ reflect: true }) spanMedium: number;\n  /** Default span of each cell above large breakpoint */\n  @Prop({ reflect: true }) spanLarge: number;\n  /** Default span of each cell above ultra breakpoint */\n  @Prop({ reflect: true }) spanUltra: number;\n\n  /** Controlling how cell is aligned in main axis (sets margin: auto to left/right side) */\n  @Prop({ reflect: true }) align: \"none\" | \"left\" | \"right\" | \"middle\" = \"none\";\n\n  /** Control how cells items are positioned along a container's cross axis */\n  @Prop({ reflect: true }) alignSelf: Layout.AlignSelf = \"auto\";\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            \"stzh-cell\": true\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mEAAA,IAAMA,YAAc,q9O,ICiBPC,SAAQ,W,iDAEqB,G,gHAW+B,O,eAGhB,M,CAEvDA,EAAAC,UAAAC,OAAA,WACE,OACEC,EAACC,KAAI,KACHD,EAAA,OACEE,MAAO,CACL,YAAa,OAGfF,EAAA,c,WA1BW,G"}

package/dist/esm-es5/stzh-checkbox.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,c,s){function o(e){return e instanceof c?e:new c((function(t){t(e)}))}return new(c||(c=Promise))((function(c,h){function r(e){try{n(s.next(e))}catch(e){h(e)}}function i(e){try{n(s["throw"](e))}catch(e){h(e)}}function n(e){e.done?c(e.value):o(e.value).then(r,i)}n((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var c={label:0,sent:function(){if(h[0]&1)throw h[1];return h[1]},trys:[],ops:[]},s,o,h,r;return r={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function i(e){return function(t){return n([e,t])}}function n(i){if(s)throw new TypeError("Generator is already executing.");while(r&&(r=0,i[0]&&(c=0)),c)try{if(s=1,o&&(h=i[0]&2?o["return"]:i[0]?o["throw"]||((h=o["return"])&&h.call(o),0):o.next)&&!(h=h.call(o,i[1])).done)return h;if(o=0,h)i=[i[0]&2,h.value];switch(i[0]){case 0:case 1:h=i;break;case 4:c.label++;return{value:i[1],done:false};case 5:c.label++;o=i[1];i=[0];continue;case 7:i=c.ops.pop();c.trys.pop();continue;default:if(!(h=c.trys,h=h.length>0&&h[h.length-1])&&(i[0]===6||i[0]===2)){c=0;continue}if(i[0]===3&&(!h||i[1]>h[0]&&i[1]<h[3])){c.label=i[1];break}if(i[0]===6&&c.label<h[1]){c.label=h[1];h=i;break}if(h&&c.label<h[2]){c.label=h[2];c.ops.push(i);break}if(h[2])c.ops.pop();c.trys.pop();continue}i=t.call(e,c)}catch(e){i=[6,e];o=0}finally{s=h=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-107fad0f.js";import{S as StzhInputDescription}from"./stzh-input-description-100efe38.js";import"./string-utils-e252977e.js";var Check='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />\n</svg>\n';var stzhCheckboxCss=".sc-stzh-checkbox-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::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-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{display:inline-block}.sc-stzh-checkbox-h .sc-stzh-checkbox-s>stzh-text{--color:inherit}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-checkbox__marker-text.sc-stzh-checkbox{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-checkbox__description-wrapper.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkbox__description-long.sc-stzh-checkbox{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-popover[open].sc-stzh-checkbox:not([open=false]) .stzh-checkbox__description-long-button.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__description-long-button.sc-stzh-checkbox{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-checkbox__description-long-button.sc-stzh-checkbox:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-checkbox__check.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;opacity:0;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__label.sc-stzh-checkbox{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:focus:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:focus~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-error)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-grey61)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-grey70)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:transparent}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-black8)}";var checkboxCounter=0;var StzhCheckbox=function(){function e(e){var t=this;registerInstance(this,e);this.stzhChange=createEvent(this,"stzhChange",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onInput=function(e){t.checked=t.input.checked;t.stzhChange.emit({component:"stzh-checkbox",originalEvent:e,value:t.value,checked:t.checked})};this.onRootFocus=function(){if(!t.focusedByInput){t.setFocus()}t.focusedByInput=false};this.onFocus=function(e){t.focusedByInput=true;var c=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});t.element.dispatchEvent(c);t.stzhFocus.emit({component:"stzh-checkbox",originalEvent:e})};this.onBlur=function(e){var c=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});t.element.dispatchEvent(c);t.stzhBlur.emit({component:"stzh-checkbox",originalEvent:e})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.checked=false;this.label="";this.description=undefined;this.descriptionLong=undefined;this.showMarker=false;this.error=undefined;this.a11yDescribedby=""}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.input.focus();return[2]}))}))};e.prototype.errorWatcher=function(e){if(typeof e==="string"){try{this._error=JSON.parse(e)}catch(t){if(e){this._error=[e]}else{this._error=[]}}}else if(e){this._error=e}else{this._error=[]}this.invalid=this._error.length>0};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:this.inputId="stzh-checkbox-".concat(checkboxCounter++);this.errorWatcher(this.error);if(!!this.localization)return[3,2];e=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"checkbox")];case 1:e.localization=t.sent();t.label=2;case 2:return[2]}}))}))};e.prototype.render=function(){var e=this;var t=hasSlot(this.element,"description")||!!this.description;var c=hasSlot(this.element,"description-long")||!!this.descriptionLong;var s=hasSlot(this.element,"error")||!!this.error;var o={"stzh-checkbox":true,"stzh-checkbox--has-description":t,"stzh-checkbox--has-description-long":c,"stzh-checkbox--has-error":s,"stzh-checkbox--is-required":this.required,"stzh-checkbox--is-invalid":this.invalid,"stzh-checkbox--is-disabled":this.disabled};return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:o},h("label",{class:"stzh-checkbox__field-wrapper"},h("input",{class:"stzh-checkbox__input",ref:function(t){return e.input=t},type:"checkbox",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),h("div",{class:"stzh-checkbox__mark"},h("div",{class:"stzh-checkbox__check",innerHTML:Check})),h("div",{class:"stzh-checkbox__label"},this.label?this.label:h("slot",null),this.showMarker&&h("span",{class:"stzh-checkbox__marker"},h("span",{class:"stzh-checkbox__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-checkbox__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),h(StzhInputDescription,{classPrefix:"stzh-checkbox",id:"".concat(this.inputId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:c,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{error:["errorWatcher"]}},enumerable:false,configurable:true});return e}();StzhCheckbox.style=stzhCheckboxCss;export{StzhCheckbox as stzh_checkbox};
+var __awaiter=this&&this.__awaiter||function(e,t,c,s){function o(e){return e instanceof c?e:new c((function(t){t(e)}))}return new(c||(c=Promise))((function(c,h){function r(e){try{n(s.next(e))}catch(e){h(e)}}function i(e){try{n(s["throw"](e))}catch(e){h(e)}}function n(e){e.done?c(e.value):o(e.value).then(r,i)}n((s=s.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var c={label:0,sent:function(){if(h[0]&1)throw h[1];return h[1]},trys:[],ops:[]},s,o,h,r;return r={next:i(0),throw:i(1),return:i(2)},typeof Symbol==="function"&&(r[Symbol.iterator]=function(){return this}),r;function i(e){return function(t){return n([e,t])}}function n(i){if(s)throw new TypeError("Generator is already executing.");while(r&&(r=0,i[0]&&(c=0)),c)try{if(s=1,o&&(h=i[0]&2?o["return"]:i[0]?o["throw"]||((h=o["return"])&&h.call(o),0):o.next)&&!(h=h.call(o,i[1])).done)return h;if(o=0,h)i=[i[0]&2,h.value];switch(i[0]){case 0:case 1:h=i;break;case 4:c.label++;return{value:i[1],done:false};case 5:c.label++;o=i[1];i=[0];continue;case 7:i=c.ops.pop();c.trys.pop();continue;default:if(!(h=c.trys,h=h.length>0&&h[h.length-1])&&(i[0]===6||i[0]===2)){c=0;continue}if(i[0]===3&&(!h||i[1]>h[0]&&i[1]<h[3])){c.label=i[1];break}if(i[0]===6&&c.label<h[1]){c.label=h[1];h=i;break}if(h&&c.label<h[2]){c.label=h[2];c.ops.push(i);break}if(h[2])c.ops.pop();c.trys.pop();continue}i=t.call(e,c)}catch(e){i=[6,e];o=0}finally{s=h=0}if(i[0]&5)throw i[1];return{value:i[0]?i[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,a as Host,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import{S as StzhInputDescription}from"./stzh-input-description-100efe38.js";import"./string-utils-e252977e.js";var Check='<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">\n  <path d="M2 11.3333L9 18.6667L22 5.33334" stroke="currentColor" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke" />\n</svg>\n';var stzhCheckboxCss=".sc-stzh-checkbox-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-checkbox-h{display:none}.sc-stzh-checkbox-h *.sc-stzh-checkbox,.sc-stzh-checkbox-h *.sc-stzh-checkbox::before,.sc-stzh-checkbox-h *.sc-stzh-checkbox::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-checkbox-h .has-focus.sc-stzh-checkbox{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox{outline-style:none !important}.sc-stzh-checkbox-h .stzh-fylingfocus-focused.sc-stzh-checkbox::-moz-focus-inner{border:0 !important}.sc-stzh-checkbox-h{display:inline-block}.sc-stzh-checkbox-h .sc-stzh-checkbox-s>stzh-text{--color:inherit}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-checkbox__marker-text.sc-stzh-checkbox{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-checkbox__description-wrapper.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox__description.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkbox__error.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox__error-list.sc-stzh-checkbox{list-style:none;margin:0;padding:0}.stzh-checkbox__description.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkbox__description-long.sc-stzh-checkbox{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkbox__description-long-popover.sc-stzh-checkbox{--width:auto;--max-width:27.3125rem}.stzh-checkbox__description-long-popover[open].sc-stzh-checkbox:not([open=false]) .stzh-checkbox__description-long-button.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__description-long-button.sc-stzh-checkbox{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-checkbox__description-long-button.sc-stzh-checkbox:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox stzh-icon.stzh-checkbox__description-long-icon.sc-stzh-checkbox{--size:var(--stzh-icon-size-xsmall)}.stzh-checkbox--has-error.sc-stzh-checkbox .stzh-checkbox__error.sc-stzh-checkbox,.stzh-checkbox--has-description.sc-stzh-checkbox .stzh-checkbox__description.sc-stzh-checkbox{margin-top:var(--stzh-space-xxsmall)}.stzh-checkbox__field-wrapper.sc-stzh-checkbox{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-checkbox__input.sc-stzh-checkbox{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-checkbox__mark.sc-stzh-checkbox{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:var(--stzh-form-input-border-radius);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-checkbox__check.sc-stzh-checkbox{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;opacity:0;color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__label.sc-stzh-checkbox{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-checkbox__label.sc-stzh-checkbox:empty{display:none}.stzh-checkbox__marker-symbol.sc-stzh-checkbox{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox.sc-stzh-checkbox:hover .stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:focus:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:hover~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked:focus~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-checkbox__input.sc-stzh-checkbox:focus~.stzh-checkbox__mark.sc-stzh-checkbox,.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkbox__input.sc-stzh-checkbox:checked~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{opacity:1}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox,.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-error)}.stzh-checkbox--is-invalid.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:var(--stzh-color-error)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__field-wrapper.sc-stzh-checkbox{cursor:not-allowed}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__label.sc-stzh-checkbox{color:var(--stzh-color-grey61)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox .stzh-checkbox__check.sc-stzh-checkbox{color:var(--stzh-color-grey70)}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__input.sc-stzh-checkbox~.stzh-checkbox__mark.sc-stzh-checkbox{border-color:transparent}.stzh-checkbox--is-disabled.sc-stzh-checkbox .stzh-checkbox__mark.sc-stzh-checkbox{background-color:var(--stzh-color-black8)}";var checkboxCounter=0;var StzhCheckbox=function(){function e(e){var t=this;registerInstance(this,e);this.stzhChange=createEvent(this,"stzhChange",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onInput=function(e){t.checked=t.input.checked;t.stzhChange.emit({component:"stzh-checkbox",originalEvent:e,value:t.value,checked:t.checked})};this.onRootFocus=function(){if(!t.focusedByInput){t.setFocus()}t.focusedByInput=false};this.onFocus=function(e){t.focusedByInput=true;var c=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});t.element.dispatchEvent(c);t.stzhFocus.emit({component:"stzh-checkbox",originalEvent:e})};this.onBlur=function(e){var c=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});t.element.dispatchEvent(c);t.stzhBlur.emit({component:"stzh-checkbox",originalEvent:e})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.checked=false;this.label="";this.description=undefined;this.descriptionLong=undefined;this.showMarker=false;this.error=undefined;this.a11yDescribedby=""}e.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.input.focus();return[2]}))}))};e.prototype.errorWatcher=function(e){if(typeof e==="string"){try{this._error=JSON.parse(e)}catch(t){if(e){this._error=[e]}else{this._error=[]}}}else if(e){this._error=e}else{this._error=[]}this.invalid=this._error.length>0};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:this.inputId="stzh-checkbox-".concat(checkboxCounter++);this.errorWatcher(this.error);if(!!this.localization)return[3,2];e=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"checkbox")];case 1:e.localization=t.sent();t.label=2;case 2:return[2]}}))}))};e.prototype.render=function(){var e=this;var t=hasSlot(this.element,"description")||!!this.description;var c=hasSlot(this.element,"description-long")||!!this.descriptionLong;var s=hasSlot(this.element,"error")||!!this.error;var o={"stzh-checkbox":true,"stzh-checkbox--has-description":t,"stzh-checkbox--has-description-long":c,"stzh-checkbox--has-error":s,"stzh-checkbox--is-required":this.required,"stzh-checkbox--is-invalid":this.invalid,"stzh-checkbox--is-disabled":this.disabled};return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:o},h("label",{class:"stzh-checkbox__field-wrapper"},h("input",{class:"stzh-checkbox__input",ref:function(t){return e.input=t},type:"checkbox",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),h("div",{class:"stzh-checkbox__mark"},h("div",{class:"stzh-checkbox__check",innerHTML:Check})),h("div",{class:"stzh-checkbox__label"},this.label?this.label:h("slot",null),this.showMarker&&h("span",{class:"stzh-checkbox__marker"},h("span",{class:"stzh-checkbox__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-checkbox__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),h(StzhInputDescription,{classPrefix:"stzh-checkbox",id:"".concat(this.inputId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:c,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{error:["errorWatcher"]}},enumerable:false,configurable:true});return e}();StzhCheckbox.style=stzhCheckboxCss;export{StzhCheckbox as stzh_checkbox};
 //# sourceMappingURL=stzh-checkbox.entry.js.map

package/dist/esm-es5/stzh-checkboxgroup.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(e,t,o,r){function s(e){return e instanceof o?e:new o((function(t){t(e)}))}return new(o||(o=Promise))((function(o,c){function i(e){try{n(r.next(e))}catch(e){c(e)}}function h(e){try{n(r["throw"](e))}catch(e){c(e)}}function n(e){e.done?o(e.value):s(e.value).then(i,h)}n((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var o={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,s,c,i;return i={next:h(0),throw:h(1),return:h(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function h(e){return function(t){return n([e,t])}}function n(h){if(r)throw new TypeError("Generator is already executing.");while(i&&(i=0,h[0]&&(o=0)),o)try{if(r=1,s&&(c=h[0]&2?s["return"]:h[0]?s["throw"]||((c=s["return"])&&c.call(s),0):s.next)&&!(c=c.call(s,h[1])).done)return c;if(s=0,c)h=[h[0]&2,c.value];switch(h[0]){case 0:case 1:c=h;break;case 4:o.label++;return{value:h[1],done:false};case 5:o.label++;s=h[1];h=[0];continue;case 7:h=o.ops.pop();o.trys.pop();continue;default:if(!(c=o.trys,c=c.length>0&&c[c.length-1])&&(h[0]===6||h[0]===2)){o=0;continue}if(h[0]===3&&(!c||h[1]>c[0]&&h[1]<c[3])){o.label=h[1];break}if(h[0]===6&&o.label<c[1]){o.label=c[1];c=h;break}if(c&&o.label<c[2]){o.label=c[2];o.ops.push(h);break}if(c[2])o.ops.pop();o.trys.pop();continue}h=t.call(e,o)}catch(e){h=[6,e];s=0}finally{r=c=0}if(h[0]&5)throw h[1];return{value:h[0]?h[1]:void 0,done:true}}};import{r as registerInstance,h,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-107fad0f.js";import{c as camelCase}from"./string-utils-e252977e.js";import{S as StzhInputDescription}from"./stzh-input-description-100efe38.js";var stzhCheckboxgroupCss=".sc-stzh-checkboxgroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-checkboxgroup-h{display:none}.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::before,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::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-checkboxgroup-h .has-focus.sc-stzh-checkboxgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup{outline-style:none !important}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup::-moz-focus-inner{border:0 !important}.sc-stzh-checkboxgroup-h[direction=vertical] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-checkboxgroup-h[direction=horizontal] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-checkboxgroup.sc-stzh-checkboxgroup{margin:0;padding:0;border:none}.stzh-checkboxgroup__marker-symbol.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-checkboxgroup__marker-text.sc-stzh-checkboxgroup{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-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup{color:var(--stzh-color-error)}.stzh-checkboxgroup__error-list.sc-stzh-checkboxgroup{list-style:none;margin:0;padding:0}.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkboxgroup__description-long-popover.sc-stzh-checkboxgroup{--width:auto;--max-width:27.3125rem}.stzh-checkboxgroup__description-long-popover[open].sc-stzh-checkboxgroup:not([open=false]) .stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{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-checkboxgroup__description-long-button.sc-stzh-checkboxgroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup.sc-stzh-checkboxgroup stzh-icon.stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-xsmall)}.stzh-checkboxgroup--has-error.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup--has-description.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup{margin-top:var(--stzh-space-xxsmall)}.stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-checkboxgroup--hide-legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{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-checkboxgroup--direction-horizontal.sc-stzh-checkboxgroup .stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{-ms-flex-direction:row;flex-direction:row}";var checkboxgroupCounter=0;var StzhCheckboxgroup=function(){function e(e){var t=this;registerInstance(this,e);this._value=[];this._preventUpdateProperties=[];this.init=function(){t.checkboxes=Array.from(t.element.querySelectorAll("stzh-checkbox"));t.updateCheckboxesProperty("a11y-describedby","".concat(t.checkboxgroupId,"-description"));t.watchValue(t.value);t.watchName(t.name);t.watchDisabled(t.disabled);t.watchInvalid(t.invalid);t.watchShowMarker(t.showMarker)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.showMarker=false;this.value="";this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.checkedCheckbox=null;this.preventUpdateProperties=[]}e.prototype.watchName=function(e){this.updateCheckboxesProperty("name",e)};e.prototype.watchDisabled=function(e){this.updateCheckboxesProperty("disabled",e)};e.prototype.watchInvalid=function(e){this.updateCheckboxesProperty("invalid",e)};e.prototype.watchShowMarker=function(e){this.updateCheckboxesProperty("showMarker",e)};e.prototype.watchValue=function(e){if(typeof e==="string"){this._value=JSON.parse(e)}else{this._value=e}this.updateCheckedCheckboxByValue(this._value)};e.prototype.errorWatcher=function(e){if(typeof e==="string"){try{this._error=JSON.parse(e)}catch(t){if(e){this._error=[e]}else{this._error=[]}}}else if(e){this._error=e}else{this._error=[]}this.invalid=this._error.length>0};e.prototype.preventUpdatePropertiesWatcher=function(e){if(typeof e==="string"){this._preventUpdateProperties=JSON.parse(e)}else{this._preventUpdateProperties=e}};e.prototype.onChange=function(e){if(e.detail.checked){this._value.push(e.detail.value)}else{this._value=this._value.filter((function(t){return t!==e.detail.value}))}this.value=this._value};e.prototype.updateCheckboxesProperty=function(e,t){var o=this;this.checkboxes.forEach((function(r){if(e==="name"||o._preventUpdateProperties.indexOf(e)===-1){r[camelCase(e)]=t}}))};e.prototype.updateCheckedCheckboxByValue=function(e){this.checkedCheckbox=this.checkboxes.filter((function(t){return e.indexOf(t.value)>-1}));this.checkboxes.forEach((function(t){return t.checked=e.indexOf(t.value)>-1}))};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:this.checkboxgroupId="stzh-checkboxgroup-".concat(checkboxgroupCounter++);this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!!this.localization)return[3,2];e=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"checkboxgroup")];case 1:e.localization=t.sent();t.label=2;case 2:return[2]}}))}))};e.prototype.componentShouldUpdate=function(e,t,o){return o!=="checkedCheckbox"};e.prototype.componentDidRender=function(){this.init()};e.prototype.connectedCallback=function(){if(!this.value.length){this.checkboxes=Array.from(this.element.querySelectorAll("stzh-checkbox"));this.value=this.checkboxes.filter((function(e){return e.checked})).map((function(e){return e.value}))}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};e.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}};e.prototype.render=function(){var e;var t=hasSlot(this.element,"description")||!!this.description;var o=hasSlot(this.element,"description-long")||!!this.descriptionLong;var r=hasSlot(this.element,"error")||!!this.error;var s=(e={"stzh-checkboxgroup":true,"stzh-checkboxgroup--has-description":t,"stzh-checkboxgroup--has-description-long":o,"stzh-checkboxgroup--has-error":r,"stzh-checkboxgroup--is-disabled":this.disabled,"stzh-checkboxgroup--is-invalid":this.invalid,"stzh-checkboxgroup--hide-legend":this.hideLegend},e["stzh-checkboxgroup--direction-".concat(this.direction)]=!!this.direction,e);return h("fieldset",{class:s},this.legend&&h("legend",{class:"stzh-checkboxgroup__legend"},this.legend),h("div",{class:"stzh-checkboxgroup__fields"},h("slot",null)),h(StzhInputDescription,{classPrefix:"stzh-checkboxgroup",id:"".concat(this.checkboxgroupId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:o,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel}))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{name:["watchName"],disabled:["watchDisabled"],invalid:["watchInvalid"],showMarker:["watchShowMarker"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}},enumerable:false,configurable:true});return e}();StzhCheckboxgroup.style=stzhCheckboxgroupCss;export{StzhCheckboxgroup as stzh_checkboxgroup};
+var __awaiter=this&&this.__awaiter||function(e,t,o,r){function s(e){return e instanceof o?e:new o((function(t){t(e)}))}return new(o||(o=Promise))((function(o,c){function i(e){try{n(r.next(e))}catch(e){c(e)}}function h(e){try{n(r["throw"](e))}catch(e){c(e)}}function n(e){e.done?o(e.value):s(e.value).then(i,h)}n((r=r.apply(e,t||[])).next())}))};var __generator=this&&this.__generator||function(e,t){var o={label:0,sent:function(){if(c[0]&1)throw c[1];return c[1]},trys:[],ops:[]},r,s,c,i;return i={next:h(0),throw:h(1),return:h(2)},typeof Symbol==="function"&&(i[Symbol.iterator]=function(){return this}),i;function h(e){return function(t){return n([e,t])}}function n(h){if(r)throw new TypeError("Generator is already executing.");while(i&&(i=0,h[0]&&(o=0)),o)try{if(r=1,s&&(c=h[0]&2?s["return"]:h[0]?s["throw"]||((c=s["return"])&&c.call(s),0):s.next)&&!(c=c.call(s,h[1])).done)return c;if(s=0,c)h=[h[0]&2,c.value];switch(h[0]){case 0:case 1:c=h;break;case 4:o.label++;return{value:h[1],done:false};case 5:o.label++;s=h[1];h=[0];continue;case 7:h=o.ops.pop();o.trys.pop();continue;default:if(!(c=o.trys,c=c.length>0&&c[c.length-1])&&(h[0]===6||h[0]===2)){o=0;continue}if(h[0]===3&&(!c||h[1]>c[0]&&h[1]<c[3])){o.label=h[1];break}if(h[0]===6&&o.label<c[1]){o.label=c[1];c=h;break}if(c&&o.label<c[2]){o.label=c[2];o.ops.push(h);break}if(c[2])o.ops.pop();o.trys.pop();continue}h=t.call(e,o)}catch(e){h=[6,e];s=0}finally{r=c=0}if(h[0]&5)throw h[1];return{value:h[0]?h[1]:void 0,done:true}}};import{r as registerInstance,h,g as getElement}from"./index-bfb5b569.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import{c as camelCase}from"./string-utils-e252977e.js";import{S as StzhInputDescription}from"./stzh-input-description-100efe38.js";var stzhCheckboxgroupCss=".sc-stzh-checkboxgroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-checkboxgroup-h{display:none}.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::before,.sc-stzh-checkboxgroup-h *.sc-stzh-checkboxgroup::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-checkboxgroup-h .has-focus.sc-stzh-checkboxgroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup{outline-style:none !important}.sc-stzh-checkboxgroup-h .stzh-fylingfocus-focused.sc-stzh-checkboxgroup::-moz-focus-inner{border:0 !important}.sc-stzh-checkboxgroup-h[direction=vertical] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-checkboxgroup-h[direction=horizontal] .sc-stzh-checkboxgroup-s>stzh-checkbox:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-checkboxgroup.sc-stzh-checkboxgroup{margin:0;padding:0;border:none}.stzh-checkboxgroup__marker-symbol.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-checkboxgroup__marker-text.sc-stzh-checkboxgroup{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-checkboxgroup__description-wrapper.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-checkboxgroup__error.sc-stzh-checkboxgroup{color:var(--stzh-color-error)}.stzh-checkboxgroup__error-list.sc-stzh-checkboxgroup{list-style:none;margin:0;padding:0}.stzh-checkboxgroup__description.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-checkboxgroup__description-long.sc-stzh-checkboxgroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-checkboxgroup__description-long-popover.sc-stzh-checkboxgroup{--width:auto;--max-width:27.3125rem}.stzh-checkboxgroup__description-long-popover[open].sc-stzh-checkboxgroup:not([open=false]) .stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup__description-long-button.sc-stzh-checkboxgroup{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-checkboxgroup__description-long-button.sc-stzh-checkboxgroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-checkboxgroup.sc-stzh-checkboxgroup stzh-icon.stzh-checkboxgroup__description-long-icon.sc-stzh-checkboxgroup{--size:var(--stzh-icon-size-xsmall)}.stzh-checkboxgroup--has-error.sc-stzh-checkboxgroup .stzh-checkboxgroup__error.sc-stzh-checkboxgroup,.stzh-checkboxgroup--has-description.sc-stzh-checkboxgroup .stzh-checkboxgroup__description.sc-stzh-checkboxgroup{margin-top:var(--stzh-space-xxsmall)}.stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-checkboxgroup--hide-legend.sc-stzh-checkboxgroup .stzh-checkboxgroup__legend.sc-stzh-checkboxgroup{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-checkboxgroup--direction-horizontal.sc-stzh-checkboxgroup .stzh-checkboxgroup__fields.sc-stzh-checkboxgroup{-ms-flex-direction:row;flex-direction:row}";var checkboxgroupCounter=0;var StzhCheckboxgroup=function(){function e(e){var t=this;registerInstance(this,e);this._value=[];this._preventUpdateProperties=[];this.init=function(){t.checkboxes=Array.from(t.element.querySelectorAll("stzh-checkbox"));t.updateCheckboxesProperty("a11y-describedby","".concat(t.checkboxgroupId,"-description"));t.watchValue(t.value);t.watchName(t.name);t.watchDisabled(t.disabled);t.watchInvalid(t.invalid);t.watchShowMarker(t.showMarker)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.showMarker=false;this.value="";this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.checkedCheckbox=null;this.preventUpdateProperties=[]}e.prototype.watchName=function(e){this.updateCheckboxesProperty("name",e)};e.prototype.watchDisabled=function(e){this.updateCheckboxesProperty("disabled",e)};e.prototype.watchInvalid=function(e){this.updateCheckboxesProperty("invalid",e)};e.prototype.watchShowMarker=function(e){this.updateCheckboxesProperty("showMarker",e)};e.prototype.watchValue=function(e){if(typeof e==="string"){this._value=JSON.parse(e)}else{this._value=e}this.updateCheckedCheckboxByValue(this._value)};e.prototype.errorWatcher=function(e){if(typeof e==="string"){try{this._error=JSON.parse(e)}catch(t){if(e){this._error=[e]}else{this._error=[]}}}else if(e){this._error=e}else{this._error=[]}this.invalid=this._error.length>0};e.prototype.preventUpdatePropertiesWatcher=function(e){if(typeof e==="string"){this._preventUpdateProperties=JSON.parse(e)}else{this._preventUpdateProperties=e}};e.prototype.onChange=function(e){if(e.detail.checked){this._value.push(e.detail.value)}else{this._value=this._value.filter((function(t){return t!==e.detail.value}))}this.value=this._value};e.prototype.updateCheckboxesProperty=function(e,t){var o=this;this.checkboxes.forEach((function(r){if(e==="name"||o._preventUpdateProperties.indexOf(e)===-1){r[camelCase(e)]=t}}))};e.prototype.updateCheckedCheckboxByValue=function(e){this.checkedCheckbox=this.checkboxes.filter((function(t){return e.indexOf(t.value)>-1}));this.checkboxes.forEach((function(t){return t.checked=e.indexOf(t.value)>-1}))};e.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(t){switch(t.label){case 0:this.checkboxgroupId="stzh-checkboxgroup-".concat(checkboxgroupCounter++);this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!!this.localization)return[3,2];e=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"checkboxgroup")];case 1:e.localization=t.sent();t.label=2;case 2:return[2]}}))}))};e.prototype.componentShouldUpdate=function(e,t,o){return o!=="checkedCheckbox"};e.prototype.componentDidRender=function(){this.init()};e.prototype.connectedCallback=function(){if(!this.value.length){this.checkboxes=Array.from(this.element.querySelectorAll("stzh-checkbox"));this.value=this.checkboxes.filter((function(e){return e.checked})).map((function(e){return e.value}))}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};e.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}};e.prototype.render=function(){var e;var t=hasSlot(this.element,"description")||!!this.description;var o=hasSlot(this.element,"description-long")||!!this.descriptionLong;var r=hasSlot(this.element,"error")||!!this.error;var s=(e={"stzh-checkboxgroup":true,"stzh-checkboxgroup--has-description":t,"stzh-checkboxgroup--has-description-long":o,"stzh-checkboxgroup--has-error":r,"stzh-checkboxgroup--is-disabled":this.disabled,"stzh-checkboxgroup--is-invalid":this.invalid,"stzh-checkboxgroup--hide-legend":this.hideLegend},e["stzh-checkboxgroup--direction-".concat(this.direction)]=!!this.direction,e);return h("fieldset",{class:s},this.legend&&h("legend",{class:"stzh-checkboxgroup__legend"},this.legend),h("div",{class:"stzh-checkboxgroup__fields"},h("slot",null)),h(StzhInputDescription,{classPrefix:"stzh-checkboxgroup",id:"".concat(this.checkboxgroupId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:o,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel}))};Object.defineProperty(e.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(e,"watchers",{get:function(){return{name:["watchName"],disabled:["watchDisabled"],invalid:["watchInvalid"],showMarker:["watchShowMarker"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}},enumerable:false,configurable:true});return e}();StzhCheckboxgroup.style=stzhCheckboxgroupCss;export{StzhCheckboxgroup as stzh_checkboxgroup};
 //# sourceMappingURL=stzh-checkboxgroup.entry.js.map

package/dist/esm-es5/stzh-chip_2.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,o,r){function i(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,s){function n(t){try{a(r.next(t))}catch(t){s(t)}}function h(t){try{a(r["throw"](t))}catch(t){s(t)}}function a(t){t.done?o(t.value):i(t.value).then(n,h)}a((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},r,i,s,n;return n={next:h(0),throw:h(1),return:h(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function h(t){return function(e){return a([t,e])}}function a(h){if(r)throw new TypeError("Generator is already executing.");while(n&&(n=0,h[0]&&(o=0)),o)try{if(r=1,i&&(s=h[0]&2?i["return"]:h[0]?i["throw"]||((s=i["return"])&&s.call(i),0):i.next)&&!(s=s.call(i,h[1])).done)return s;if(i=0,s)h=[h[0]&2,s.value];switch(h[0]){case 0:case 1:s=h;break;case 4:o.label++;return{value:h[1],done:false};case 5:o.label++;i=h[1];h=[0];continue;case 7:h=o.ops.pop();o.trys.pop();continue;default:if(!(s=o.trys,s=s.length>0&&s[s.length-1])&&(h[0]===6||h[0]===2)){o=0;continue}if(h[0]===3&&(!s||h[1]>s[0]&&h[1]<s[3])){o.label=h[1];break}if(h[0]===6&&o.label<s[1]){o.label=s[1];s=h;break}if(s&&o.label<s[2]){o.label=s[2];o.ops.push(h);break}if(s[2])o.ops.pop();o.trys.pop();continue}h=e.call(t,o)}catch(t){h=[6,t];i=0}finally{r=s=0}if(h[0]&5)throw h[1];return{value:h[0]?h[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhChipCss=".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::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-chip-h .has-focus.sc-stzh-chip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip{outline-style:none !important}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip::-moz-focus-inner{border:0 !important}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--padding:0 var(--stzh-space-medium);--border-color:var(--stzh-base-border-color);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--stzh-color-primary60op);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--border-color);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=large].sc-stzh-chip-h{--height:2.5rem;--border-radius:1.25rem;--padding:0 var(--stzh-space-xlarge)}[size=small].sc-stzh-chip-h{--height:1.5rem;--icon-size:var(--stzh-icon-size-xsmall);--counter-gap:var(--stzh-space-xxsmall)}[variant=input].sc-stzh-chip-h{--border-color:transparent;--background-color:var(--stzh-color-grey5);--hover-border-color:transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border-color:transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[variant=input][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-small);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border-color:transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white56);--hover-color:var(--stzh-color-white);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white56)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border-color:SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-border-color:var(--border-color);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border-color:var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{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-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:var(--padding);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0.0625rem;border-style:solid;border-color:var(--border-color);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-ms-flex-negative:0;flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border-color:var(--hover-border-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";var StzhChip=function(){function t(t){var e=this;registerInstance(this,t);this.stzhClick=createEvent(this,"stzhClick",7);this.stzhRemove=createEvent(this,"stzhRemove",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var o=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhFocus.emit({component:"stzh-chip",originalEvent:t})};this.onBlur=function(t){var o=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhBlur.emit({component:"stzh-chip",originalEvent:t})};this.onClick=function(t){e.stzhClick.emit({component:"stzh-chip",originalEvent:t})};this.onRemoveClick=function(t){e.stzhRemove.emit({component:"stzh-chip",originalEvent:t})};this.label="";this.icon="";this.href="";this.target="";this.nonInteractive=false;this.removable=false;this.variant="tag";this.size="default";this.type="default";this.counter="";this.removeLabel="";this.active=false;this.disabled=false;this.a11yTabindex=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.analyticsId=undefined;this.removeAnalyticsId=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.chip.focus();return[2]}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.chip.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.renderInner=function(){var t=this;return h(Fragment,null,h("div",{class:"stzh-chip__icon-wrapper"},this.icon?h("stzh-icon",{class:"stzh-chip__icon",name:this.icon}):h("slot",{name:"icon"})),h("stzh-clamp",{lines:1,class:"stzh-chip__label",ref:function(e){return t.text=e}},this.label?this.label:h("slot",null),this.counter&&h("span",{class:"stzh-chip__vhidden"}," (",this.counter,")")),this.counter&&h("div",{class:"stzh-chip__counter","aria-hidden":"true"},this.counter))};t.prototype.render=function(){var t;var e=this;var o=(t={"stzh-chip":true,"stzh-chip--is-active":this.active,"stzh-chip--is-disabled":this.disabled,"stzh-chip--is-removable":this.removable,"stzh-chip--has-counter":!!this.counter},t["stzh-chip--type-".concat(this.type)]=!!this.type,t["stzh-chip--size-".concat(this.size)]=!!this.size,t["stzh-chip--".concat(this.variant)]=!!this.variant,t);var r=this.nonInteractive?"div":this.href?"a":"button";return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:o},this.removable&&h("button",{class:"stzh-chip__remove",onClick:this.onRemoveClick,disabled:this.disabled,"aria-label":this.removeLabel,type:"button","s-object-id":this.removeAnalyticsId||this.removeLabel},h("stzh-icon",{class:"stzh-chip__remove-icon",name:"close"})),this.href?h(r,{ref:function(t){return e.chip=t},class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},href:this.disabled?null:this.href,target:this.target,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner()):h(r,{ref:function(t){return e.chip=t},class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},disabled:this.disabled,type:"button",tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner())))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhChip.style=stzhChipCss;var stzhClampCss=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--current-lines:var(--lines, 0);width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}stzh-clamp[hidden]{display:none}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::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-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 1024px){stzh-clamp{--current-lines:var(--lines-medium, var(--lines-small, var(--lines, 0)))}}@media screen and (min-width: 1260px){stzh-clamp{--current-lines:var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))))}}@media screen and (min-width: 1440px){stzh-clamp{--current-lines:var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))))}}.stzh-clamp{position:relative}.stzh-clamp__text{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stzh-clamp__text>*:first-child{margin-top:0 !important}.stzh-clamp__text>*:last-child{margin-bottom:0 !important}.stzh-clamp__text.is-clone{position:absolute;visibility:hidden;opacity:0;top:0;left:0;width:100%}.stzh-clamp__trigger{margin-top:var(--stzh-space-xxsmall)}.stzh-clamp--is-not-expanded .stzh-clamp__text,.stzh-clamp__text.is-clone{-webkit-line-clamp:var(--current-lines);line-clamp:var(--current-lines)}";var StzhClamp=function(){function t(t){var e=this;registerInstance(this,t);this.stzhClamp=createEvent(this,"stzhClamp",7);this.stzhExpand=createEvent(this,"stzhExpand",7);this.updateClamped=function(){if(!e.textCloneElement){return}var t=e.clamped;e.clamped=e.textCloneElement.scrollHeight>e.textCloneElement.clientHeight;if(t!==e.clamped){e.stzhClamp.emit({component:"stzh-clamp",clamped:e.clamped})}};this.handleResize=function(){if(e.debounceResize){window.cancelAnimationFrame(e.debounceResize)}e.debounceResize=requestAnimationFrame(e.updateClamped)};this.handleMutaton=function(){e.update()};this.handleExpandClick=function(){e.expanded=!e.expanded;e.stzhExpand.emit({component:"stzh-clamp",expanded:e.expanded})};this.localization=undefined;this.lines=1;this.linesSmall=0;this.linesMedium=0;this.linesLarge=0;this.linesUltra=0;this.showExpandLink=false;this.expanded=false;this.clamped=false}t.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.textCloneElement.innerHTML=this.textElement.innerHTML;this.updateClamped();return[2]}))}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"clamp")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.componentDidLoad=function(){this.mutationObserver=new MutationObserver(this.handleMutaton);this.mutationObserver.observe(this.textElement,{childList:true,subtree:true})};t.prototype.componentDidRender=function(){this.update()};t.prototype.connectedCallback=function(){this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)};t.prototype.disconnectedCallback=function(){if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.mutationObserver){this.mutationObserver.disconnect()}};t.prototype.render=function(){var t=this;var e={"stzh-clamp":true,"stzh-clamp--is-not-expanded":!this.expanded};return h(Host,{style:{"--lines":this.lines?this.lines.toString():null,"--lines-small":this.linesSmall?this.linesSmall.toString():null,"--lines-medium":this.linesMedium?this.linesMedium.toString():null,"--lines-large":this.linesLarge?this.linesLarge.toString():null,"--lines-ultra":this.linesUltra?this.linesUltra.toString():null}},h("div",{class:e},h("div",{ref:function(e){return t.textElement=e},class:"stzh-clamp__text"},h("slot",null)),h("div",{ref:function(e){return t.textCloneElement=e},class:"stzh-clamp__text is-clone","aria-hidden":"true"}),this.showExpandLink&&this.clamped&&h("stzh-link",{class:"stzh-clamp__trigger",a11yTabindex:"-1","aria-hidden":"true",onClick:this.handleExpandClick},!this.expanded?this.localization.showMore:this.localization.showLess)))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhClamp.style=stzhClampCss;export{StzhChip as stzh_chip,StzhClamp as stzh_clamp};
+var __awaiter=this&&this.__awaiter||function(t,e,o,r){function i(t){return t instanceof o?t:new o((function(e){e(t)}))}return new(o||(o=Promise))((function(o,s){function n(t){try{a(r.next(t))}catch(t){s(t)}}function h(t){try{a(r["throw"](t))}catch(t){s(t)}}function a(t){t.done?o(t.value):i(t.value).then(n,h)}a((r=r.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var o={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},r,i,s,n;return n={next:h(0),throw:h(1),return:h(2)},typeof Symbol==="function"&&(n[Symbol.iterator]=function(){return this}),n;function h(t){return function(e){return a([t,e])}}function a(h){if(r)throw new TypeError("Generator is already executing.");while(n&&(n=0,h[0]&&(o=0)),o)try{if(r=1,i&&(s=h[0]&2?i["return"]:h[0]?i["throw"]||((s=i["return"])&&s.call(i),0):i.next)&&!(s=s.call(i,h[1])).done)return s;if(i=0,s)h=[h[0]&2,s.value];switch(h[0]){case 0:case 1:s=h;break;case 4:o.label++;return{value:h[1],done:false};case 5:o.label++;i=h[1];h=[0];continue;case 7:h=o.ops.pop();o.trys.pop();continue;default:if(!(s=o.trys,s=s.length>0&&s[s.length-1])&&(h[0]===6||h[0]===2)){o=0;continue}if(h[0]===3&&(!s||h[1]>s[0]&&h[1]<s[3])){o.label=h[1];break}if(h[0]===6&&o.label<s[1]){o.label=s[1];s=h;break}if(s&&o.label<s[2]){o.label=s[2];o.ops.push(h);break}if(s[2])o.ops.pop();o.trys.pop();continue}h=e.call(t,o)}catch(t){h=[6,t];i=0}finally{r=s=0}if(h[0]&5)throw h[1];return{value:h[0]?h[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";var stzhChipCss=".sc-stzh-chip-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-chip-h{display:none}.sc-stzh-chip-h *.sc-stzh-chip,.sc-stzh-chip-h *.sc-stzh-chip::before,.sc-stzh-chip-h *.sc-stzh-chip::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-chip-h .has-focus.sc-stzh-chip{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip{outline-style:none !important}.sc-stzh-chip-h .stzh-fylingfocus-focused.sc-stzh-chip::-moz-focus-inner{border:0 !important}.sc-stzh-chip-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--height:2rem;--padding:0 var(--stzh-space-medium);--border-color:var(--stzh-base-border-color);--border-radius:1rem;--remove-color:var(--stzh-base-lead-color);--remove-border-radius:1.5rem;--background-color:var(--stzh-color-white);--icon-size:var(--stzh-icon-size-small);--icon-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-gap:var(--stzh-space-xsmall);--counter-color:var(--stzh-color-primary60op);--counter-gap:var(--stzh-space-xsmall);--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-border-color:var(--border-color);--hover-background-color:var(--stzh-color-primary8);--hover-remove-color:var(--hover-color);--hover-remove-background-color:var(--hover-background-color);--hover-icon-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-counter-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));display:-ms-inline-flexbox;display:inline-flex}@media (forced-colors: active), (-ms-high-contrast: active){.sc-stzh-chip-h{--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[size=large].sc-stzh-chip-h{--height:2.5rem;--border-radius:1.25rem;--padding:0 var(--stzh-space-xlarge)}[size=small].sc-stzh-chip-h{--height:1.5rem;--icon-size:var(--stzh-icon-size-xsmall);--counter-gap:var(--stzh-space-xxsmall)}[variant=input].sc-stzh-chip-h{--border-color:transparent;--background-color:var(--stzh-color-grey5);--hover-border-color:transparent}[variant=tag].sc-stzh-chip-h{--color:var(--stzh-base-color);--icon-color:var(--stzh-base-color);--counter-color:var(--stzh-base-color);--border-color:transparent;--background-color:var(--stzh-color-black8);--hover-color:var(--stzh-base-color);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-black8);--hover-icon-color:var(--stzh-base-color);--hover-counter-color:var(--stzh-base-color)}[variant=input][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-small);--icon-gap:var(--stzh-space-xxsmall)}[variant=tag][size=small].sc-stzh-chip-h{--padding:0 var(--stzh-space-xsmall);--icon-gap:var(--stzh-space-xxsmall)}[type=secondary].sc-stzh-chip-h{--color:var(--stzh-base-lead-color);--counter-color:var(--stzh-color-grey40)}[type=important].sc-stzh-chip-h{--color:var(--stzh-color-error);--icon-color:var(--stzh-color-error);--counter-color:var(--stzh-color-error);--hover-color:var(--stzh-color-error);--hover-icon-color:var(--stzh-color-error);--hover-counter-color:var(--stzh-color-error)}@media (forced-colors: active), (-ms-high-contrast: active){[type=important].sc-stzh-chip-h{--hover-color:Highlight;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[active].sc-stzh-chip-h:not([active=false]){--color:var(--stzh-color-white);--border-color:transparent;--remove-color:var(--stzh-color-white);--background-color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--icon-color:var(--stzh-color-white);--counter-color:var(--stzh-color-white56);--hover-color:var(--stzh-color-white);--hover-border-color:transparent;--hover-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-remove-color:var(--stzh-color-white);--hover-remove-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-icon-color:var(--stzh-color-white);--hover-counter-color:var(--stzh-color-white56)}@media (forced-colors: active), (-ms-high-contrast: active){[active].sc-stzh-chip-h:not([active=false]){--color:SelectedItem;--border-color:SelectedItem;--remove-color:SelectedItem;--background-color:Canvas;--icon-color:SelectedItem;--counter-color:SelectedItem;--hover-color:Highlight;--hover-border-color:Highlight;--hover-background-color:Canvas;--hover-remove-color:Highlight;--hover-remove-background-color:Canvas;--hover-icon-color:Highlight;--hover-counter-color:Highlight}}[non-interactive].sc-stzh-chip-h:not([non-interactive=false]){--hover-color:var(--color);--hover-border-color:var(--border-color);--hover-background-color:var(--background-color);--hover-icon-color:var(--icon-color);--hover-counter-color:var(--counter-color)}[disabled].sc-stzh-chip-h:not([disabled=false]){--color:var(--stzh-color-grey25);--border-color:var(--stzh-base-border-color);--remove-color:var(--stzh-color-grey13);--background-color:var(--stzh-color-white);--icon-color:var(--stzh-color-grey25);--counter-color:var(--stzh-color-grey25);--hover-color:var(--stzh-color-grey25);--hover-border-color:var(--stzh-base-border-color);--hover-background-color:var(--stzh-color-white);--hover-remove-color:var(--stzh-color-grey13);--hover-remove-background-color:transparent;--hover-icon-color:var(--stzh-color-grey25);--hover-counter-color:var(--stzh-color-grey25)}.sc-stzh-chip-h .sc-stzh-chip-s>stzh-icon,.stzh-chip__icon.sc-stzh-chip{--size:var(--icon-size)}.stzh-chip.sc-stzh-chip{position:relative}.stzh-chip__vhidden.sc-stzh-chip{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-chip__button.sc-stzh-chip{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);font-family:inherit;height:var(--height);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);padding:var(--padding);color:var(--color);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0.0625rem;border-style:solid;border-color:var(--border-color);background-color:var(--background-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-chip__button.is-button.sc-stzh-chip,.stzh-chip__button.is-link.sc-stzh-chip{cursor:pointer}.stzh-chip__label.sc-stzh-chip{text-align:left}.stzh-chip__icon-wrapper.sc-stzh-chip{display:-ms-flexbox;display:flex;color:var(--icon-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);-ms-flex-negative:0;flex-shrink:0}.stzh-chip__icon-wrapper.sc-stzh-chip:not(:empty){margin-right:var(--icon-gap)}.stzh-chip__counter.sc-stzh-chip{display:-ms-flexbox;display:flex;font-variant-numeric:tabular-nums;margin-left:var(--counter-gap);color:var(--counter-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-chip__remove.sc-stzh-chip{position:absolute;top:0;right:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;border:none;background:none;padding:0;width:var(--height);height:var(--height);border-radius:var(--remove-border-radius);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin-left:var(--stzh-space-xxsmall);color:var(--remove-color);-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed);-webkit-transition-property:color, background-color, border-color;transition-property:color, background-color, border-color;cursor:pointer}.stzh-chip__remove.sc-stzh-chip:hover{color:var(--hover-remove-color);background-color:var(--hover-remove-background-color)}.stzh-chip__remove-icon.sc-stzh-chip{--size:var(--stzh-icon-size-xxsmall)}.stzh-chip__button.sc-stzh-chip:hover,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip{color:var(--hover-color);background-color:var(--hover-background-color);border-color:var(--hover-border-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__counter.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__counter.sc-stzh-chip{color:var(--hover-counter-color)}.stzh-chip__button.sc-stzh-chip:hover .stzh-chip__icon-wrapper.sc-stzh-chip,.stzh-chip__remove.sc-stzh-chip:hover+.stzh-chip__button.sc-stzh-chip .stzh-chip__icon-wrapper.sc-stzh-chip{color:var(--hover-icon-color)}.stzh-chip--size-small.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}.stzh-chip--is-removable.sc-stzh-chip .stzh-chip__button.sc-stzh-chip{padding-right:calc(var(--height) + var(--stzh-space-xxsmall))}.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__button.sc-stzh-chip,.stzh-chip--is-disabled.sc-stzh-chip .stzh-chip__remove.sc-stzh-chip{cursor:not-allowed}";var StzhChip=function(){function t(t){var e=this;registerInstance(this,t);this.stzhClick=createEvent(this,"stzhClick",7);this.stzhRemove=createEvent(this,"stzhRemove",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var o=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhFocus.emit({component:"stzh-chip",originalEvent:t})};this.onBlur=function(t){var o=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(o);e.stzhBlur.emit({component:"stzh-chip",originalEvent:t})};this.onClick=function(t){e.stzhClick.emit({component:"stzh-chip",originalEvent:t})};this.onRemoveClick=function(t){e.stzhRemove.emit({component:"stzh-chip",originalEvent:t})};this.label="";this.icon="";this.href="";this.target="";this.nonInteractive=false;this.removable=false;this.variant="tag";this.size="default";this.type="default";this.counter="";this.removeLabel="";this.active=false;this.disabled=false;this.a11yTabindex=undefined;this.a11yLabel=undefined;this.a11yDescribedby="";this.analyticsId=undefined;this.removeAnalyticsId=undefined}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.chip.focus();return[2]}))}))};t.prototype.componentDidRender=function(){var t=this;requestAnimationFrame((function(){t.chip.setAttribute("s-object-id",t.analyticsId||t.text.innerText)}))};t.prototype.renderInner=function(){var t=this;return h(Fragment,null,h("div",{class:"stzh-chip__icon-wrapper"},this.icon?h("stzh-icon",{class:"stzh-chip__icon",name:this.icon}):h("slot",{name:"icon"})),h("stzh-clamp",{lines:1,class:"stzh-chip__label",ref:function(e){return t.text=e}},this.label?this.label:h("slot",null),this.counter&&h("span",{class:"stzh-chip__vhidden"}," (",this.counter,")")),this.counter&&h("div",{class:"stzh-chip__counter","aria-hidden":"true"},this.counter))};t.prototype.render=function(){var t;var e=this;var o=(t={"stzh-chip":true,"stzh-chip--is-active":this.active,"stzh-chip--is-disabled":this.disabled,"stzh-chip--is-removable":this.removable,"stzh-chip--has-counter":!!this.counter},t["stzh-chip--type-".concat(this.type)]=!!this.type,t["stzh-chip--size-".concat(this.size)]=!!this.size,t["stzh-chip--".concat(this.variant)]=!!this.variant,t);var r=this.nonInteractive?"div":this.href?"a":"button";return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:o},this.removable&&h("button",{class:"stzh-chip__remove",onClick:this.onRemoveClick,disabled:this.disabled,"aria-label":this.removeLabel,type:"button","s-object-id":this.removeAnalyticsId||this.removeLabel},h("stzh-icon",{class:"stzh-chip__remove-icon",name:"close"})),this.href?h(r,{ref:function(t){return e.chip=t},class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},href:this.disabled?null:this.href,target:this.target,tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner()):h(r,{ref:function(t){return e.chip=t},class:{"stzh-chip__button":true,"is-button":!this.nonInteractive&&!this.href,"is-link":!this.nonInteractive&&!!this.href},disabled:this.disabled,type:"button",tabindex:this.a11yTabindex,"aria-label":this.a11yLabel||null,"aria-describedby":this.a11yDescribedby||null,onClick:this.onClick,onFocus:this.onFocus,onBlur:this.onBlur},this.renderInner())))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhChip.style=stzhChipCss;var stzhClampCss=":host{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;--current-lines:var(--lines, 0);width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}stzh-clamp[hidden]{display:none}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::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-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 1024px){stzh-clamp{--current-lines:var(--lines-medium, var(--lines-small, var(--lines, 0)))}}@media screen and (min-width: 1260px){stzh-clamp{--current-lines:var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0))))}}@media screen and (min-width: 1440px){stzh-clamp{--current-lines:var(--lines-ultra, var(--lines-large, var(--lines-medium, var(--lines-small, var(--lines, 0)))))}}.stzh-clamp{position:relative}.stzh-clamp__text{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stzh-clamp__text>*:first-child{margin-top:0 !important}.stzh-clamp__text>*:last-child{margin-bottom:0 !important}.stzh-clamp__text.is-clone{position:absolute;visibility:hidden;opacity:0;top:0;left:0;width:100%}.stzh-clamp__trigger{margin-top:var(--stzh-space-xxsmall)}.stzh-clamp--is-not-expanded .stzh-clamp__text,.stzh-clamp__text.is-clone{-webkit-line-clamp:var(--current-lines);line-clamp:var(--current-lines)}";var StzhClamp=function(){function t(t){var e=this;registerInstance(this,t);this.stzhClamp=createEvent(this,"stzhClamp",7);this.stzhExpand=createEvent(this,"stzhExpand",7);this.updateClamped=function(){if(!e.textCloneElement){return}var t=e.clamped;e.clamped=e.textCloneElement.scrollHeight>e.textCloneElement.clientHeight;if(t!==e.clamped){e.stzhClamp.emit({component:"stzh-clamp",clamped:e.clamped})}};this.handleResize=function(){if(e.debounceResize){window.cancelAnimationFrame(e.debounceResize)}e.debounceResize=requestAnimationFrame(e.updateClamped)};this.handleMutaton=function(){e.update()};this.handleExpandClick=function(){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(t){switch(t.label){case 0:this.expanded=!this.expanded;return[4,this.waitForNextRender()];case 1:t.sent();this.stzhExpand.emit({component:"stzh-clamp",expanded:this.expanded});return[2]}}))}))};this.localization=undefined;this.lines=1;this.linesSmall=0;this.linesMedium=0;this.linesLarge=0;this.linesUltra=0;this.showExpandLink=false;this.expanded=false;this.clamped=false}t.prototype.update=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.textCloneElement.innerHTML=this.textElement.innerHTML;this.updateClamped();return[2]}))}))};t.prototype.waitForNextRender=function(){var t=this;return new Promise((function(e){return t.renderPromiseResolve=e}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"clamp")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.componentDidLoad=function(){this.mutationObserver=new MutationObserver(this.handleMutaton);this.mutationObserver.observe(this.textElement,{childList:true,subtree:true})};t.prototype.componentDidRender=function(){if(this.renderPromiseResolve){this.renderPromiseResolve()}this.update()};t.prototype.connectedCallback=function(){this.resizeObserver=new ResizeObserver(this.handleResize);this.resizeObserver.observe(this.element)};t.prototype.disconnectedCallback=function(){if(this.resizeObserver){this.resizeObserver.disconnect()}if(this.mutationObserver){this.mutationObserver.disconnect()}};t.prototype.render=function(){var t=this;var e={"stzh-clamp":true,"stzh-clamp--is-not-expanded":!this.expanded};return h(Host,{style:{"--lines":this.lines?this.lines.toString():null,"--lines-small":this.linesSmall?this.linesSmall.toString():null,"--lines-medium":this.linesMedium?this.linesMedium.toString():null,"--lines-large":this.linesLarge?this.linesLarge.toString():null,"--lines-ultra":this.linesUltra?this.linesUltra.toString():null}},h("div",{class:e},h("div",{ref:function(e){return t.textElement=e},class:"stzh-clamp__text"},h("slot",null)),h("div",{ref:function(e){return t.textCloneElement=e},class:"stzh-clamp__text is-clone","aria-hidden":"true"}),this.showExpandLink&&this.clamped&&h("stzh-link",{class:"stzh-clamp__trigger",a11yTabindex:"-1","aria-hidden":"true",onClick:this.handleExpandClick},!this.expanded?this.localization.showMore:this.localization.showLess)))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});return t}();StzhClamp.style=stzhClampCss;export{StzhChip as stzh_chip,StzhClamp as stzh_clamp};
 //# sourceMappingURL=stzh-chip_2.entry.js.map