@oiz/stzh-components 3.0.0-beta3 → 3.0.0-beta4

package/dist/esm/stzh-iframe.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-iframe.entry.js","mappings":"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","names":["Cookies"],"sources":["src/components/stzh-iframe/stzh-iframe.scss?tag=stzh-iframe&encapsulation=scoped","src/components/stzh-iframe/stzh-iframe.tsx"],"sourcesContent":[":host {\n  position: relative;\n\n  ::slotted([slot=\"preview-logo\"]) {\n    width: 100%;\n  }\n\n  ::slotted([slot=\"preview-image\"]) {\n    position: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n  }\n\n  ::slotted([slot=\"cookiewall-text\"]) {\n    margin: 0;\n\n    p {\n      margin: 0;\n\n      &:not(:last-child) {\n        @include spaceCurve('margin-bottom', 'small');\n      }\n    }\n  }\n}\n\n.stzh-iframe {\n  &__iframe,\n  &__cookiewall,\n  &__preview {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__iframe,\n  &__preview {\n\t\tborder: none;\n  }\n\n  &__preview,\n  &__cookiewall {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: space('medium');\n    visibility: hidden;\n\n    &.is-visible {\n      visibility: visible;\n    }\n  }\n\n  &__preview {\n    z-index: 1;\n    appearance: none;\n    cursor: pointer;\n    background-color: $colorGrey20;\n  }\n\n  &__preview-image-wrapper:not(:empty) + &__preview-logo-wrapper {\n    display: none;\n  }\n\n  &__preview-logo-wrapper {\n    @include spaceCurve('top', 'medium');\n    @include spaceCurve('left', 'medium');\n\t\tposition: absolute;\n\t\twidth: 45%;\n\t}\n\n\t&__preview-run {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tbackground-color: $colorPrimary;\n    color: $colorWhite;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: $formInputHeightSmall;\n\t\theight: $formInputHeightSmall;\n    visibility: hidden;\n    transition: background-color $baseTransitionAnimationSpeed;\n\n    &.is-visible {\n      visibility: visible;\n    }\n\n\t\t@include mq($from: medium) {\n\t\t\twidth: $formInputHeight;\n\t\t\theight: $formInputHeight;\n\t\t}\n\t}\n\n  &__preview:hover &__preview-run {\n    background-color: $colorSecondary60;\n  }\n\n  &__preview-run-icon {\n    @include mq($from: medium) {\n      --size: #{iconSize('large')};\n    }\n  }\n\n\t&__cookiewall {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n    z-index: 2;\n\t\ttext-align: center;\n    background-color: $colorBlack60op;\n    color: $colorWhite;\n\n    @include mq($from: medium) {\n      @include gridGutter;\n      display: grid;\n      grid-template-areas: \". content content content content content content .\";\n      grid-template-columns: repeat(8, minmax(0, 1fr));\n      padding-left: 0;\n      padding-right: 0;\n    }\n\t}\n\n  &__cookiewall-content {\n    @include mq($from: medium) {\n      grid-area: content;\n    }\n  }\n\n  &__cookiewall-text {\n    @include fontSize('milli');\n    @include spaceCurve('padding-top', 'small');\n    @include spaceCurve('padding-bottom', 'small');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n\t&__cookiewall-close {\n    top: 0;\n    right: 0;\n\t\tposition: absolute;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: space('xsmall');\n    background-color: transparent;\n    color: $colorWhite;\n    cursor: pointer;\n\t}\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhIframeView,\n  StzhIframePreviewSkipEvent,\n  StzhIframeViewChangeEvent,\n} from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/**\n * @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n */\n@Component({\n  tag: \"stzh-iframe\",\n  styleUrl: \"stzh-iframe.scss\",\n  scoped: true\n})\nexport class StzhIframe {\n  /** Translation strings */\n  @Prop() localization: StzhIframeLocalizedText;\n\n  /** `src` of iframe */\n  @Prop() src: string = \"\";\n  private _src: string | null = null;\n\n  /**\n   * Cookie name (if not empty, the user will be shown a cookie wall)\n   * Will be prefixed with `stzh-components-iframe-confirm-`.\n   */\n  @Prop() cookie: string;\n\n  /**\n   * Number of days the cookie is valid for.\n   * If omitted or set to null, the cookie expires when browser is closed.\n   * Maximum is on year (365 days, is default).\n   */\n  @Prop() cookieExpires: number | null = 365;\n\n  /** Confirm button icon */\n  @Prop() cookieConfirmIcon: string;\n\n  /** Confirm button label */\n  @Prop() cookieConfirmLabel: string;\n\n  /** Confirm text (use instead of `cookiewall-text` slot) */\n  @Prop() cookieConfirmText: string;\n\n  /** Preview label */\n  @Prop() previewLabel: string;\n\n  /** Preview icon */\n  @Prop() previewIcon: string = \"external-link\";\n\n  /** Whether preview should be skipped, if user has passed the cookiewall before */\n  @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n  /** Whether preview should always be skipped */\n  @Prop() skipPreview: boolean = false;\n\n  @Element() element: HTMLStzhIframeElement;\n\n  @State() view: StzhIframeView = \"preview\";\n\n  /** Preview skip (only gets executed if it goes directly to iframe and not cookiewall) */\n  @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n  /** View change */\n  @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n  @Watch(\"src\")\n  srcWatcher(newValue: string) {\n    if (this.view === \"iframe\") {\n      this._src = newValue;\n    }\n  }\n\n  @Watch(\"view\")\n  viewWatcher(newValue: StzhIframeView) {\n    if (newValue === \"iframe\") {\n      this._src = this.src;\n    } else {\n      this._src = null;\n    }\n  }\n\n  private iframeId: string;\n  private iframeElement: HTMLIFrameElement;\n  private previewButtonElement: HTMLButtonElement;\n  private confirmButtonElement: HTMLStzhButtonElement;\n  private updateFocus: boolean = false;\n\n  private handleIframeLoad = () => {\n    if (this.updateFocus) {\n      this.iframeElement.focus();\n      this.updateFocus = false;\n    }\n  }\n\n  private handleCookiewallCloseClick = () => {\n    this.updateFocus = true;\n    this.view = \"preview\";\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  private handleCookiewallConfirmClick = () => {\n    Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n      expires: this.cookieExpires || null\n    });\n\n    this.updateFocus = true;\n    this.view = \"iframe\";\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  private handlePreviewClick = () => {\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;\n    this.updateFocus = true;\n\n    if (!this.cookie || cookieAccepted) {\n      this.view = \"iframe\";\n    } else {\n      this.view = \"cookiewall\";\n    }\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  async componentWillLoad() {\n    this.iframeId = `stzh-iframe-${iframeCounter++}`;\n\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;\n\n    if (\n      ((!this.cookie || cookieAccepted) && (this.skipPreviewIfCookieAccepted || this.skipPreview))\n      || (!this.cookie && this.skipPreview)\n    ) {\n      this.stzhPreviewSkip.emit({\n        component: \"stzh-iframe\"\n      });\n\n      this.view = \"iframe\";\n    } else if (this.cookie && this.skipPreview) {\n      this.view = \"cookiewall\";\n    }\n\n    this.viewWatcher(this.view);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n    }\n  }\n\n  async componentDidRender() {\n    if (this.updateFocus) {\n      if (this.view === \"iframe\") {\n        // wait for iframe load event (handleIframeLoad)\n      } else if (this.view === \"preview\") {\n        this.previewButtonElement.focus();\n        this.updateFocus = false;\n      } else if (this.view === \"cookiewall\") {\n        this.confirmButtonElement.focus();\n        this.updateFocus = false;\n      }\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-iframe\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.view === \"iframe\" &&\n            <iframe\n              ref={(el) => (this.iframeElement = el as HTMLIFrameElement)}\n              class=\"stzh-iframe__iframe\"\n              src={this._src}\n              allow=\"autoplay; fullscreen\"\n              onLoad={this.handleIframeLoad}\n            ></iframe>\n          }\n\n          <button\n            ref={(el) => (this.previewButtonElement = el as HTMLButtonElement)}\n            onClick={this.handlePreviewClick}\n            aria-label={this.previewLabel || this.localization.defaultPreviewLabel}\n            // disabled={this.view === \"cookiewall\"}\n            class={{\n              \"stzh-iframe__preview\": true,\n              \"is-visible\": this.view === \"preview\" || this.view === \"cookiewall\"\n            }}\n          >\n            <div class=\"stzh-iframe__preview-image-wrapper\">\n              <slot name=\"preview-image\"></slot>\n            </div>\n\n            <div class=\"stzh-iframe__preview-logo-wrapper\">\n              <slot name=\"preview-logo\"></slot>\n            </div>\n\n            {this.previewIcon &&\n              <div class={{\n                \"stzh-iframe__preview-run\": true,\n                \"is-visible\": this.view === \"preview\"\n              }}>\n                <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n              </div>\n            }\n          </button>\n\n          {this.cookie &&\n            <div\n              class={{\n                \"stzh-iframe__cookiewall\": true,\n                \"is-visible\": this.view === \"cookiewall\"\n              }}\n            >\n              <div class=\"stzh-iframe__cookiewall-content\">\n                <div\n                  class=\"stzh-iframe__cookiewall-text\"\n                  id={`${this.iframeId}-cookiewall-text`}\n                >\n                  {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n                </div>\n\n                <stzh-button\n                  ref={(el) => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n                  class=\"stzh-iframe__cookiewall-button\"\n                  size=\"small\"\n                  a11yDescribedby={`${this.iframeId}-cookiewall-text`}\n                  icon={this.cookieConfirmIcon}\n                  label={this.cookieConfirmLabel || this.localization.defaultConfirmLabel}\n                  onClick={this.handleCookiewallConfirmClick}\n                ></stzh-button>\n              </div>\n\n              {!this.skipPreview &&\n                <button\n                  class=\"stzh-iframe__cookiewall-close\"\n                  onClick={this.handleCookiewallCloseClick}\n                  aria-label={this.localization.confirmCloseLabel}\n                >\n                  <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-iframe.entry.js","mappings":"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","names":["Cookies"],"sources":["src/components/stzh-iframe/stzh-iframe.scss?tag=stzh-iframe&encapsulation=scoped","src/components/stzh-iframe/stzh-iframe.tsx"],"sourcesContent":[":host {\n  position: relative;\n\n  ::slotted([slot=\"preview-logo\"]) {\n    width: 100%;\n  }\n\n  ::slotted([slot=\"preview-image\"]) {\n    position: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n  }\n\n  ::slotted([slot=\"cookiewall-text\"]) {\n    margin: 0;\n\n    p {\n      margin: 0;\n\n      &:not(:last-child) {\n        @include spaceCurve('margin-bottom', 'small');\n      }\n    }\n  }\n}\n\n.stzh-iframe {\n  &__iframe,\n  &__cookiewall,\n  &__preview {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n\n  &__iframe,\n  &__preview {\n\t\tborder: none;\n  }\n\n  &__preview,\n  &__cookiewall {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: space('medium');\n    visibility: hidden;\n\n    &.is-visible {\n      visibility: visible;\n    }\n  }\n\n  &__preview {\n    z-index: 1;\n    appearance: none;\n    cursor: pointer;\n    background-color: $colorGrey20;\n  }\n\n  &__preview-image-wrapper:not(:empty) + &__preview-logo-wrapper {\n    display: none;\n  }\n\n  &__preview-logo-wrapper {\n    @include spaceCurve('top', 'medium');\n    @include spaceCurve('left', 'medium');\n\t\tposition: absolute;\n\t\twidth: 45%;\n\t}\n\n\t&__preview-run {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tbackground-color: $colorPrimary;\n    color: $colorWhite;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\twidth: $formInputHeightSmall;\n\t\theight: $formInputHeightSmall;\n    visibility: hidden;\n    transition: background-color $baseTransitionAnimationSpeed;\n\n    &.is-visible {\n      visibility: visible;\n    }\n\n\t\t@include mq($from: medium) {\n\t\t\twidth: $formInputHeight;\n\t\t\theight: $formInputHeight;\n\t\t}\n\t}\n\n  &__preview:hover &__preview-run {\n    background-color: $colorSecondary60;\n  }\n\n  &__preview-run-icon {\n    @include mq($from: medium) {\n      --size: #{iconSize('large')};\n    }\n  }\n\n\t&__cookiewall {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n    z-index: 2;\n\t\ttext-align: center;\n    background-color: $colorBlack60op;\n    color: $colorWhite;\n\n    @include mq($from: medium) {\n      @include gridGutter;\n      display: grid;\n      grid-template-areas: \". content content content content content content .\";\n      grid-template-columns: repeat(8, minmax(0, 1fr));\n      padding-left: 0;\n      padding-right: 0;\n    }\n\t}\n\n  &__cookiewall-content {\n    @include mq($from: medium) {\n      grid-area: content;\n    }\n  }\n\n  &__cookiewall-text {\n    @include fontSize('milli');\n    @include spaceCurve('padding-top', 'small');\n    @include spaceCurve('padding-bottom', 'small');\n    @include spaceCurve('margin-bottom', 'regular');\n  }\n\n\t&__cookiewall-close {\n    top: 0;\n    right: 0;\n\t\tposition: absolute;\n\t\tappearance: none;\n\t\tborder: none;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: space('xsmall');\n    background-color: transparent;\n    color: $colorWhite;\n    cursor: pointer;\n\t}\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Watch,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhIframeView,\n  StzhIframePreviewSkipEvent,\n  StzhIframeViewChangeEvent,\n} from \"../../index\";\nimport { StzhIframeLocalizedText } from \"./stzh-iframe.localization\";\n\nimport Cookies from \"js-cookie\";\n\nconst COOKIE_PREFIX_CONFIRM = \"stzh-components-iframe-confirm\";\n\nlet iframeCounter = 0;\n\n/**\n * @slot preview-logo - Slot for logo\n * @slot preview-image - Slot for preview image\n * @slot cookiewall-text - Slot for cookiewall text\n */\n@Component({\n  tag: \"stzh-iframe\",\n  styleUrl: \"stzh-iframe.scss\",\n  scoped: true\n})\nexport class StzhIframe {\n  /** Translation strings */\n  @Prop() localization: StzhIframeLocalizedText;\n\n  /** Id of iframe */\n  @Prop() iframeId: string;\n\n  /** Error text of iframe if couldn't be loaded */\n  @Prop() iframeErrorText: string;\n\n  /**\n   * Name of iframe\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#name\n   */\n  @Prop() name: string;\n\n  /**\n   * Sandbox of iframe\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#sandbox\n   */\n  @Prop() sandbox: string;\n\n  /**\n   * ReferrerPolicy of Iframe\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#referrerpolicy\n   */\n  @Prop() referrerpolicy: \"no-referrer\"\n    | \"no-referrer-when-downgrade\"\n    | \"origin\"\n    | \"origin-when-cross-origin\"\n    | \"same-origin\"\n    | \"strict-origin\"\n    | \"strict-origin-when-cross-origin\"\n    | \"unsafe-url\";\n\n  /**\n   * Allow of Iframe\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe?retiredLocale=de#allow\n   */\n  @Prop() allow: string = \"autoplay; fullscreen\";\n\n  /** Width of iframe */\n  @Prop() width: string;\n\n  /** Width of iframe */\n  @Prop() height: string;\n\n  /** `src` of iframe */\n  @Prop() src: string = \"\";\n  private _src: string | null = null;\n\n  /**\n   * Cookie name (if not empty, the user will be shown a cookie wall)\n   * Will be prefixed with `stzh-components-iframe-confirm-`.\n   */\n  @Prop() cookie: string;\n\n  /**\n   * Number of days the cookie is valid for.\n   * If omitted or set to null, the cookie expires when browser is closed.\n   * Maximum is on year (365 days, is default).\n   */\n  @Prop() cookieExpires: number | null = 365;\n\n  /** Confirm button icon */\n  @Prop() cookieConfirmIcon: string;\n\n  /** Confirm button label */\n  @Prop() cookieConfirmLabel: string;\n\n  /** Confirm text (use instead of `cookiewall-text` slot) */\n  @Prop() cookieConfirmText: string;\n\n  /** Preview label */\n  @Prop() previewLabel: string;\n\n  /** Preview icon */\n  @Prop() previewIcon: string = \"external-link\";\n\n  /** Whether preview should be skipped, if user has passed the cookiewall before */\n  @Prop() skipPreviewIfCookieAccepted: boolean = false;\n\n  /** Whether preview should always be skipped */\n  @Prop() skipPreview: boolean = false;\n\n  @Element() element: HTMLStzhIframeElement;\n\n  @State() view: StzhIframeView = \"preview\";\n\n  /** Preview skip (only gets executed if it goes directly to iframe and not cookiewall) */\n  @Event() stzhPreviewSkip: EventEmitter<StzhIframePreviewSkipEvent>;\n\n  /** View change */\n  @Event() stzhViewChange: EventEmitter<StzhIframeViewChangeEvent>;\n\n  @Watch(\"src\")\n  srcWatcher(newValue: string) {\n    if (this.view === \"iframe\") {\n      this._src = newValue;\n    }\n  }\n\n  @Watch(\"view\")\n  viewWatcher(newValue: StzhIframeView) {\n    if (newValue === \"iframe\") {\n      this._src = this.src;\n    } else {\n      this._src = null;\n    }\n  }\n\n  private internalId: string;\n  private iframeElement: HTMLIFrameElement;\n  private previewButtonElement: HTMLButtonElement;\n  private confirmButtonElement: HTMLStzhButtonElement;\n  private updateFocus: boolean = false;\n\n  private handleIframeLoad = () => {\n    if (this.updateFocus) {\n      this.iframeElement.focus();\n      this.updateFocus = false;\n    }\n  }\n\n  private handleCookiewallCloseClick = () => {\n    this.updateFocus = true;\n    this.view = \"preview\";\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  private handleCookiewallConfirmClick = () => {\n    Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, \"1\", {\n      expires: this.cookieExpires || null\n    });\n\n    this.updateFocus = true;\n    this.view = \"iframe\";\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  private handlePreviewClick = () => {\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;\n    this.updateFocus = true;\n\n    if (!this.cookie || cookieAccepted) {\n      this.view = \"iframe\";\n    } else {\n      this.view = \"cookiewall\";\n    }\n\n    this.stzhViewChange.emit({\n      component: \"stzh-iframe\",\n      value: this.view\n    });\n  }\n\n  async componentWillLoad() {\n    this.internalId = `stzh-iframe-${iframeCounter++}`;\n\n\t\tconst cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;\n\n    if (\n      ((!this.cookie || cookieAccepted) && (this.skipPreviewIfCookieAccepted || this.skipPreview))\n      || (!this.cookie && this.skipPreview)\n    ) {\n      this.stzhPreviewSkip.emit({\n        component: \"stzh-iframe\"\n      });\n\n      this.view = \"iframe\";\n    } else if (this.cookie && this.skipPreview) {\n      this.view = \"cookiewall\";\n    }\n\n    this.viewWatcher(this.view);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"iframe\");\n    }\n  }\n\n  async componentDidRender() {\n    if (this.updateFocus) {\n      if (this.view === \"iframe\") {\n        // wait for iframe load event (handleIframeLoad)\n      } else if (this.view === \"preview\") {\n        this.previewButtonElement.focus();\n        this.updateFocus = false;\n      } else if (this.view === \"cookiewall\") {\n        this.confirmButtonElement.focus();\n        this.updateFocus = false;\n      }\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-iframe\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          {this.view === \"iframe\" &&\n            <iframe\n              id={this.iframeId}\n              name={this.name}\n              sandbox={this.sandbox}\n              referrerPolicy={this.referrerpolicy}\n              width={this.width}\n              height={this.height}\n              ref={(el) => (this.iframeElement = el as HTMLIFrameElement)}\n              class=\"stzh-iframe__iframe\"\n              src={this._src}\n              allow={this.allow}\n              onLoad={this.handleIframeLoad}\n            >{this.iframeErrorText}</iframe>\n          }\n\n          <button\n            ref={(el) => (this.previewButtonElement = el as HTMLButtonElement)}\n            onClick={this.handlePreviewClick}\n            aria-label={this.previewLabel || this.localization.defaultPreviewLabel}\n            // disabled={this.view === \"cookiewall\"}\n            class={{\n              \"stzh-iframe__preview\": true,\n              \"is-visible\": this.view === \"preview\" || this.view === \"cookiewall\"\n            }}\n          >\n            <div class=\"stzh-iframe__preview-image-wrapper\">\n              <slot name=\"preview-image\"></slot>\n            </div>\n\n            <div class=\"stzh-iframe__preview-logo-wrapper\">\n              <slot name=\"preview-logo\"></slot>\n            </div>\n\n            {this.previewIcon &&\n              <div class={{\n                \"stzh-iframe__preview-run\": true,\n                \"is-visible\": this.view === \"preview\"\n              }}>\n                <stzh-icon class=\"stzh-iframe__preview-run-icon\" name={this.previewIcon}></stzh-icon>\n              </div>\n            }\n          </button>\n\n          {this.cookie &&\n            <div\n              class={{\n                \"stzh-iframe__cookiewall\": true,\n                \"is-visible\": this.view === \"cookiewall\"\n              }}\n            >\n              <div class=\"stzh-iframe__cookiewall-content\">\n                <div\n                  class=\"stzh-iframe__cookiewall-text\"\n                  id={`${this.internalId}-cookiewall-text`}\n                >\n                  {this.cookieConfirmText ? this.cookieConfirmText : <slot name=\"cookiewall-text\"></slot>}\n                </div>\n\n                <stzh-button\n                  ref={(el) => (this.confirmButtonElement = el as HTMLStzhButtonElement)}\n                  class=\"stzh-iframe__cookiewall-button\"\n                  size=\"small\"\n                  a11yDescribedby={`${this.internalId}-cookiewall-text`}\n                  icon={this.cookieConfirmIcon}\n                  label={this.cookieConfirmLabel || this.localization.defaultConfirmLabel}\n                  onClick={this.handleCookiewallConfirmClick}\n                ></stzh-button>\n              </div>\n\n              {!this.skipPreview &&\n                <button\n                  class=\"stzh-iframe__cookiewall-close\"\n                  onClick={this.handleCookiewallCloseClick}\n                  aria-label={this.localization.confirmCloseLabel}\n                >\n                  <stzh-icon class=\"stzh-iframe__cookiewall-close-icon\" name=\"close\"></stzh-icon>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-imagecomparison.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e3050b18.js';
 
-const stzhImagecomparisonCss = ".sc-stzh-imagecomparison-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.1875rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-items:center;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:3rem;height:2rem;transform:translate(-50%, -50%);color:var(--stzh-color-primary);background-color:var(--stzh-color-white);border-radius:5rem;transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{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-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height));position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}@media screen and (min-width: 900px){.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison,.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary);color:var(--stzh-color-white)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";
+const stzhImagecomparisonCss = ".sc-stzh-imagecomparison-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-imagecomparison-h{display:none}.sc-stzh-imagecomparison-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::before,.sc-stzh-imagecomparison-h *.sc-stzh-imagecomparison::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-imagecomparison-h .has-focus.sc-stzh-imagecomparison{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison{outline-style:none !important}.sc-stzh-imagecomparison-h .stzh-fylingfocus-focused.sc-stzh-imagecomparison::-moz-focus-inner{border:0 !important}.sc-stzh-imagecomparison-h{--exposure:50%;--divider-width:0.125rem}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>*{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.sc-stzh-imagecomparison-h .sc-stzh-imagecomparison-s>[slot=image-after]{-webkit-clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%);clip-path:polygon(calc(var(--exposure) + (var(--divider-width) / 2)) 0, 100% 0, 100% 100%, calc(var(--exposure) + (var(--divider-width) / 2)) 100%)}.stzh-imagecomparison.sc-stzh-imagecomparison{display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.stzh-imagecomparison__control.sc-stzh-imagecomparison{position:absolute;inset:0;opacity:0;cursor:pointer}.stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{position:absolute;left:var(--exposure);height:100%;width:var(--divider-width);background-color:var(--stzh-color-white);transform:translateX(-50%);transition:background-color var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{display:flex;align-items:center;justify-content:space-between;position:absolute;top:50%;left:var(--exposure);overflow:hidden;width:calc(2 * var(--stzh-icon-size) + var(--divider-width));height:var(--stzh-icon-size);transform:translate(-50%, -50%);color:var(--stzh-color-primary70);background-color:var(--stzh-color-white);transition-property:color, background-color;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{pointer-events:none;opacity:0;transition:opacity var(--stzh-base-transition-animation-speed)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison,.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);position:absolute;top:0;display:flex;align-items:center;height:1.5rem;padding:0 var(--stzh-space-xsmall);background:var(--stzh-color-black50op);color:var(--stzh-color-white)}.stzh-imagecomparison__hint-left.sc-stzh-imagecomparison{left:0}.stzh-imagecomparison__hint-right.sc-stzh-imagecomparison{right:0}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-line.sc-stzh-imagecomparison{background-color:var(--stzh-color-primary70)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover .stzh-imagecomparison__slider-icon-wrapper.sc-stzh-imagecomparison{background-color:var(--stzh-color-secondary30)}.stzh-imagecomparison__label.sc-stzh-imagecomparison:hover+.stzh-imagecomparison__hint-wrapper.sc-stzh-imagecomparison{opacity:1}";
 
 const StzhImageComparison = class {
   constructor(hostRef) {
@@ -33,7 +33,7 @@ const StzhImageComparison = class {
     };
     return (h(Host, { "aria-roledescription": this.localization.label, style: {
         '--exposure': `${this.value.toString()}%`
-      } }, h("div", { class: classes }, h("div", { class: "stzh-imagecomparison__element" }, h("slot", { name: "image-before" }), h("slot", { name: "image-after" }), h("label", { class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { class: "stzh-imagecomparison__slider-line" }), h("div", { class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("input", { type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: (el) => (this.inputElement = el), onInput: this.handleInput })), h("div", { class: "stzh-imagecomparison__hint-wrapper" }, h("span", { class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
+      } }, h("div", { class: classes }, h("div", { class: "stzh-imagecomparison__element" }, h("slot", { name: "image-before" }), h("slot", { name: "image-after" }), h("label", { class: "stzh-imagecomparison__label", "aria-label": this.label || this.localization.label, "aria-describedby": this.a11yDescribedby || null }, h("div", { class: "stzh-imagecomparison__slider-icon-wrapper" }, h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-left", name: "angle-left" }), h("stzh-icon", { class: "stzh-imagecomparison__slider-icon-right", name: "angle-right" })), h("div", { class: "stzh-imagecomparison__slider-line" }), h("input", { type: "range", class: "stzh-imagecomparison__control", min: "0", max: "100", ref: (el) => (this.inputElement = el), onInput: this.handleInput })), h("div", { class: "stzh-imagecomparison__hint-wrapper" }, h("span", { class: "stzh-imagecomparison__hint-left" }, this.hintLeft ? this.hintLeft : h("slot", { name: "hint-left" })), h("span", { class: "stzh-imagecomparison__hint-right" }, this.hintRight ? this.hintRight : h("slot", { name: "hint-right" })))))));
   }
   get element() { return getElement(this); }
 };

package/dist/esm/stzh-imagecomparison.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-imagecomparison.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,+/IAA+/I;;MC6BjhJ,mBAAmB;;;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,YAAM,IAAI,EAAC,aAAa,GAAQ,EAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI,IAE9C,WAAK,KAAK,EAAC,mCAAmC,GAAO,EACrD,WAAK,KAAK,EAAC,2CAA2C,IACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP,EACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR,EAEN,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI,EAER,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D,EACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 3px;\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n  \n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n  \n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n  \n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-items: center;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: 48px;\n    height: 32px;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n    background-color: $colorWhite;\n    border-radius: 80px;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n  \n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontCurve('caption');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack50op;\n    color: $colorWhite;\n  }\n  \n  &__hint-left {\n    left: 0;\n  }\n  \n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line,\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorPrimary;\n    color: $colorWhite;\n }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import { \n  Component, \n  Host, \n  Element, \n  Prop, \n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport { \n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n  \n  private inputElement: HTMLInputElement;\n  \n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({   \n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  } \n  \n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-left\" \n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon \n                  class=\"stzh-imagecomparison__slider-icon-right\" \n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n\n              <input\n                type=\"range\" \n                class=\"stzh-imagecomparison__control\" \n                min=\"0\" \n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span> \n            </div>\n          </div>\n        </div>  \n      </Host>\n    );\n  }\n}\n\n"],"version":3}
+{"file":"stzh-imagecomparison.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,koIAAkoI;;MC6BppI,mBAAmB;;;;IA0BtB,gBAAW,GAAG,CAAC,KAAiB;MACtC,IAAI,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;MACpC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;MAE3B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,SAAS,EAAE,sBAAsB;QACjC,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;iBAGW,EAAE;;2BAMwB,EAAE;;EAoBrE,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAC,CAAC;KAC1G;GACF;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,sBAAsB,EAAE,IAAI;KAC7B,CAAC;IAEF,QACE,EAAC,IAAI,4BACmB,IAAI,CAAC,YAAY,CAAC,KAAK,EAC7C,KAAK,EAAE;QACL,YAAY,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG;OAC1C,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,+BAA+B,IACxC,YAAM,IAAI,EAAC,cAAc,GAAQ,EACjC,YAAM,IAAI,EAAC,aAAa,GAAQ,EAEhC,aACE,KAAK,EAAC,6BAA6B,gBACvB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,KAAK,sBAC/B,IAAI,CAAC,eAAe,IAAI,IAAI,IAE9C,WAAK,KAAK,EAAC,2CAA2C,IACpD,iBACE,KAAK,EAAC,wCAAwC,EAC9C,IAAI,EAAC,YAAY,GACP,EACZ,iBACE,KAAK,EAAC,yCAAyC,EAC/C,IAAI,EAAC,aAAa,GACR,CACR,EACN,WAAK,KAAK,EAAC,mCAAmC,GAAO,EAErD,aACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,+BAA+B,EACrC,GAAG,EAAC,GAAG,EACP,GAAG,EAAC,KAAK,EACT,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACzD,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,CACI,EAER,WAAK,KAAK,EAAC,oCAAoC,IAC7C,YAAM,KAAK,EAAC,iCAAiC,IAC1C,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1D,EACP,YAAM,KAAK,EAAC,kCAAkC,IAC3C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,GAAG,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC7D,CACH,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["src/components/stzh-imagecomparison/stzh-imagecomparison.scss?tag=stzh-imagecomparison&encapsulation=scoped","src/components/stzh-imagecomparison/stzh-imagecomparison.tsx"],"sourcesContent":[":host {\n  --exposure: 50%;\n  --divider-width: 2px;\n\n  ::slotted(*) {\n    position: absolute;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  ::slotted([slot=\"image-after\"]) {\n    clip-path: polygon(\n      calc(var(--exposure) + (var(--divider-width) / 2)) 0,\n      100% 0,\n      100% 100%,\n      calc(var(--exposure) + (var(--divider-width) / 2)) 100%\n    );\n  }\n}\n\n.stzh-imagecomparison {\n  display: flex;\n  flex-direction: column;\n  user-select: none;\n\n  &__control {\n    position: absolute;\n    inset: 0;\n    opacity: 0;\n    cursor: pointer;\n  }\n\n  &__slider-line {\n    position: absolute;\n    left: var(--exposure);\n    height: 100%;\n    width: var(--divider-width);\n    background-color: $colorWhite;\n    transform: translateX(-50%);\n    transition: background-color $baseTransitionAnimationSpeed;\n  }\n\n  &__slider-icon-wrapper {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    position: absolute;\n    top: 50%;\n    left: var(--exposure);\n    overflow: hidden;\n    width: calc(2 * #{iconSize()} + var(--divider-width));\n    height: #{iconSize()};\n    transform: translate(-50%, -50%);\n    color: $colorPrimary70;\n    background-color: $colorWhite;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__hint-wrapper {\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity $baseTransitionAnimationSpeed;\n  }\n\n  &__hint-left,\n  &__hint-right {\n    @include font('heavy');\n    @include fontSize('micro');\n    position: absolute;\n    top: 0;\n    display: flex;\n    align-items: center;\n    height: 24px;\n    padding: 0 space('xsmall');\n    background: $colorBlack50op;\n    color: $colorWhite;\n  }\n\n  &__hint-left {\n    left: 0;\n  }\n\n  &__hint-right {\n    right: 0;\n  }\n\n  &__label:hover &__slider-line {\n    background-color: $colorPrimary70;\n }\n\n  &__label:hover &__slider-icon-wrapper {\n    background-color: $colorSecondary30;\n  }\n\n  &__label:hover + &__hint-wrapper {\n    opacity: 1;\n  }\n}\n","import {\n  Component,\n  Host,\n  Element,\n  Prop,\n  h,\n  Event,\n  EventEmitter\n} from '@stencil/core';\n\nimport {\n  StzhImagecomparisonChangeEvent,\n} from \"../../index\";\n\nimport { StzhImagecomparisonLocalizedText } from \"./stzh-imagecomparison.localization\"\n\n/**\n * @slot image-before - Slot for a before image\n * @slot image-after - Slot for a after image\n * @slot hint-left - Slot for a left image hint as alternative for attribute\n * @slot hint-right - Slot for a right image hint as alternative for attribute\n */\n\n@Component({\n  tag: 'stzh-imagecomparison',\n  styleUrl: 'stzh-imagecomparison.scss',\n  scoped: true,\n})\n\nexport class StzhImageComparison {\n  /**  Translation strings. */\n  @Prop() localization: StzhImagecomparisonLocalizedText;\n\n  /** Hint left */\n  @Prop() hintLeft: string = \"\";\n\n  /** Hint right */\n  @Prop() hintRight: string = \"\";\n\n  /** Width of image before */\n  @Prop({ mutable: true }) value: number = 50;\n\n  /** Overwrite default label */\n  @Prop() label: string;\n\n  /** Id for element which describes the label */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @Element() element: HTMLStzhImagecomparisonElement;\n\n  /* Image comparison slider on change event */\n  @Event() stzhChange: EventEmitter<StzhImagecomparisonChangeEvent>;\n\n  private inputElement: HTMLInputElement;\n\n  private handleInput = (event: InputEvent) => {\n    let value = this.inputElement.value;\n    this.value = Number(value);\n\n    this.stzhChange.emit({\n      component: \"stzh-imagecomparison\",\n      originalEvent: event,\n      value: this.value\n    });\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"imagecomparison\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-imagecomparison\": true,\n    };\n\n    return (\n      <Host\n        aria-roledescription={this.localization.label}\n        style={{\n          '--exposure': `${this.value.toString()}%`\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-imagecomparison__element\">\n            <slot name=\"image-before\"></slot>\n            <slot name=\"image-after\"></slot>\n\n            <label\n              class=\"stzh-imagecomparison__label\"\n              aria-label={this.label || this.localization.label}\n              aria-describedby={this.a11yDescribedby || null}\n            >\n              <div class=\"stzh-imagecomparison__slider-icon-wrapper\">\n                <stzh-icon\n                  class=\"stzh-imagecomparison__slider-icon-left\"\n                  name=\"angle-left\">\n                </stzh-icon>\n                <stzh-icon\n                  class=\"stzh-imagecomparison__slider-icon-right\"\n                  name=\"angle-right\">\n                </stzh-icon>\n              </div>\n              <div class=\"stzh-imagecomparison__slider-line\"></div>\n\n              <input\n                type=\"range\"\n                class=\"stzh-imagecomparison__control\"\n                min=\"0\"\n                max=\"100\"\n                ref={(el) => (this.inputElement = el as HTMLInputElement)}\n                onInput={this.handleInput}\n              />\n            </label>\n\n            <div class=\"stzh-imagecomparison__hint-wrapper\">\n              <span class=\"stzh-imagecomparison__hint-left\">\n                {this.hintLeft ? this.hintLeft : <slot name=\"hint-left\"></slot>}\n              </span>\n              <span class=\"stzh-imagecomparison__hint-right\">\n                {this.hintRight ? this.hintRight : <slot name=\"hint-right\"></slot>}\n              </span>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n\n"],"version":3}

package/dist/esm/stzh-link.entry.js

@@ -44,8 +44,8 @@ const StzhLink = class {
     this.localization = undefined;
     this.icon = "";
     this.iconPosition = "left";
-    this.size = "default";
     this.height = "default";
+    this.size = "default";
     this.sizeSmall = undefined;
     this.sizeMedium = undefined;
     this.sizeLarge = undefined;

package/dist/esm/stzh-link.entry.js.map

@@ -1 +1 @@
-{"file":"stzh-link.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n * @prop --stzh-link-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-icon-size: **Global**: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: **Global**: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: **Global**: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: **Global**: Text underline offset\n */\n\n@mixin link--size-default() {\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --letter-spacing: normal;\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-font-centi-font-size);\n    --line-height: var(--stzh-font-centi-text-line-height);\n    --letter-spacing: normal;\n  }\n}\n\n@mixin link--size-small() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n  --font-size: inherit;\n  --line-height: inherit;\n  --letter-spacing: inherit;\n}\n\n:host {\n  @include link--size-default;\n  --color: #{$linkColor};\n  --text-decoration-line: #{$linkTextDecorationLine};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n  --icon-size: #{$linkIconSize};\n  --height: var(--stzh-link-height, 40px);\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n  @include mq($from: medium) {\n    --height: var(--stzh-link-height, auto);\n  }\n\n  color: var(--color);\n  display: inline-grid;\n  width: auto;\n  min-height: var(--height);\n  pointer-events: var(--stzh-link-pointer-events, auto);\n\n  &[height=\"auto\"] {\n    --height: var(--stzh-link-auto-height, auto);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$linkSecondaryColor};\n    --hover-color: #{$linkSecondaryHoverColor};\n  }\n\n  &[variant=\"back\"] {\n    --text-decoration-line: none;\n    --hover-color: var(--color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey60};\n    --hover-color: #{$colorGrey60};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n  @include link--size-inherit;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include link--size-default;\n    }\n    \n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include link--size-small;\n    }\n    \n    :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n      @include link--size-inherit;\n    }\n  }\n}\n\n.stzh-link {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    --stzh-base-color: initial;\n\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space('xxsmall')} * -1);\n    right: calc(#{space('large')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);;\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('small');\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhLinkFocusEvent,\n  StzhLinkBlurEvent,\n  StzhLinkSize,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n  /** Height variant (none prevent setting min-height for mikro and small breakpoint) */\n  @Prop({ reflect: true }) height: \"default\" | \"auto\" = \"default\";\n\n  /** Size variant (abobe small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n  /** Size variant (abobe medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n  /** Size variant (abobe large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n  /** Size variant (abobe ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n  /** href attribute of the link */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** type of the button, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"back\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** ID of link element */\n  @Prop() linkId: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhLinkElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-link\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-link\",\n      originalEvent: event\n    });\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          <button\n            ref={(el) => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-link.entry.js","mappings":"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","names":[],"sources":["src/components/stzh-link/stzh-link.scss?tag=stzh-link&encapsulation=scoped","src/components/stzh-link/stzh-link.tsx"],"sourcesContent":["/**\n * @prop --color: Color of link\n * @prop --hover-color: Hover color of link\n * @prop --text-decoration-line: Text decoration of link\n * @prop --hover-text-decoration-line: Hover text decoration of link\n * @prop --icon-size: Size of icon next to link\n * @prop --min-height: Min height of link\n *\n * @prop --stzh-link-color: **Global**: Color of link\n * @prop --stzh-link-hover-color: **Global**: Hover color of link\n * @prop --stzh-link-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-hover-text-decoration-line: **Global**: Text decoration of link\n * @prop --stzh-link-icon-size: **Global**: Size of icon next to link\n * @prop --stzh-link-text-decoration-thickness: **Global**: Text decoration thickness\n * @prop --stzh-link-text-decoration-skip-ink: **Global**: Whether to skip ink in text decoration\n * @prop --stzh-link-text-underline-offset: **Global**: Text underline offset\n */\n\n@mixin link--size-default() {\n  --font-size: var(--stzh-font-milli-font-size);\n  --line-height: var(--stzh-font-milli-text-line-height);\n  --letter-spacing: normal;\n\n  @include mq($from: medium) {\n    --font-size: var(--stzh-font-centi-font-size);\n    --line-height: var(--stzh-font-centi-text-line-height);\n    --letter-spacing: normal;\n  }\n}\n\n@mixin link--size-small() {\n  --font-size: var(--stzh-font-micro-font-size);\n  --line-height: var(--stzh-font-micro-text-line-height);\n  --letter-spacing: normal;\n}\n\n@mixin link--size-inherit() {\n  --font-size: inherit;\n  --line-height: inherit;\n  --letter-spacing: inherit;\n}\n\n:host {\n  @include link--size-default;\n  --color: #{$linkColor};\n  --text-decoration-line: #{$linkTextDecorationLine};\n  --icon-wrapper-height: #{$linkIconWrapperHeight};\n  --icon-size: #{$linkIconSize};\n  --height: var(--stzh-link-height, 40px);\n\n  --hover-color: #{$linkHoverColor};\n  --hover-text-decoration-line: #{$linkHoverTextDecorationLine};\n\n  @include mq($from: medium) {\n    --height: var(--stzh-link-height, auto);\n  }\n\n  color: var(--color);\n  display: inline-grid;\n  width: auto;\n  min-height: var(--height);\n  pointer-events: var(--stzh-link-pointer-events, auto);\n\n  &[height=\"auto\"] {\n    --height: var(--stzh-link-auto-height, auto);\n  }\n\n  &[fullwidth]:not([fullwidth=\"false\"]) {\n    width: 100%;\n    display: grid;\n  }\n\n  &[variant=\"secondary\"] {\n    --color: #{$linkSecondaryColor};\n    --hover-color: #{$linkSecondaryHoverColor};\n  }\n\n  &[variant=\"back\"] {\n    --text-decoration-line: none;\n    --hover-color: var(--color);\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--hover-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: #{$colorGrey60};\n    --hover-color: #{$colorGrey60};\n  }\n}\n\n:host(:where([size=\"small\"])) {\n  @include link--size-small;\n}\n\n:host(:where([size=\"inherit\"])) {\n  @include link--size-inherit;\n}\n\n@each $breakpoint, $size in $breakpoints {\n  @include mq($from: $breakpoint) {\n    :host(:where([size-#{$breakpoint}=\"default\"])) {\n      @include link--size-default;\n    }\n    \n    :host(:where([size-#{$breakpoint}=\"small\"])) {\n      @include link--size-small;\n    }\n    \n    :host(:where([size-#{$breakpoint}=\"inherit\"])) {\n      @include link--size-inherit;\n    }\n  }\n}\n\n.stzh-link {\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  letter-spacing: var(--letter-spacing);\n  font-family: inherit;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: stretch;\n  appearance: none;\n  border: none;\n  color: var(--color);\n  transition: color $baseTransitionAnimationSpeed;\n  cursor: pointer;\n  width: 100%;\n  text-decoration-line: none;\n  background-color: transparent;\n  padding: 0;\n  border-radius: $buttonBorderRadius;\n  text-align: left;\n\n  &:hover {\n    color: var(--hover-color);\n  }\n\n  &:hover &__text {\n    text-decoration-line: var(--hover-text-decoration-line);\n  }\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-grow: 1;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: auto;\n    height: var(--icon-wrapper-height);\n  }\n\n  &__text {\n    --stzh-base-color: initial;\n\n    text-decoration-line: var(--text-decoration-line);\n  }\n\n  &__icon-wrapper:not(:empty) + &__text:not(:empty),\n  &__text:not(:empty) + &__icon-wrapper:not(:empty) {\n    margin-left: space('xxsmall');\n  }\n\n  &__badge {\n    position: absolute;\n    z-index: 1;\n    top: 0;\n    right: 0;\n  }\n\n  /* Variant if link only has icon */\n\n  &--has-icon-only &__text {\n    @include visuallyhidden;\n  }\n\n  /* Badge positioning variants */\n\n  &--badge-position-link &__icon-wrapper {\n    position: static;\n  }\n\n  &__badge,\n  &--badge-position-link &__badge {\n    top: calc(#{space('xxsmall')} * -1);\n    right: calc(#{space('large')} * -1);\n  }\n\n  &--badge-position-icon#{&}--has-icon &__icon-wrapper {\n    position: relative;\n  }\n\n  &--badge-position-icon#{&}--has-icon &__badge {\n    top: calc(#{space('xsmall')} * -1);\n    right: calc(#{space('small')} * -1);;\n  }\n\n  &--badge-position-icon#{&}--has-icon#{&}--has-badge &__icon-wrapper + &__text:not(:empty) {\n    margin-left: space('small');\n  }\n\n  /* Alignment variants */\n\n  &--align-left &__inner {\n    justify-content: flex-start;\n  }\n\n  &--align-right &__inner {\n    justify-content: flex-end;\n  }\n\n  &--align-center &__inner {\n    justify-content: center;\n  }\n\n  &--align-space-between &__inner {\n    justify-content: space-between;\n  }\n\n  /* Disabled variant */\n\n  &--is-disabled {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  Fragment,\n  Element,\n  h,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhLinkFocusEvent,\n  StzhLinkBlurEvent,\n  StzhLinkSize,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\n/**\n * @slot - Slot for text content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-link\",\n  styleUrl: \"stzh-link.scss\",\n  scoped: true\n})\nexport class StzhLink {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Icon Position */\n  @Prop({ reflect: true }) iconPosition: \"left\" | \"right\" = \"left\";\n\n  /** Height variant (none prevent setting min-height for mikro and small breakpoint) */\n  @Prop({ reflect: true }) height: \"default\" | \"auto\" = \"default\";\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: StzhLinkSize = \"default\";\n\n  /** Size variant (abobe small breakpoint) */\n  @Prop({ reflect: true }) sizeSmall: StzhLinkSize;\n\n  /** Size variant (abobe medium breakpoint) */\n  @Prop({ reflect: true }) sizeMedium: StzhLinkSize;\n\n  /** Size variant (abobe large breakpoint) */\n  @Prop({ reflect: true }) sizeLarge: StzhLinkSize;\n\n  /** Size variant (abobe ultra breakpoint) */\n  @Prop({ reflect: true }) sizeUltra: StzhLinkSize;\n\n  /** href attribute of the link */\n  @Prop() href: string = \"\";\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** target if the button is used as link (if href used)  */\n  @Prop() target: string = \"\";\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** type of the button, if used as button (if no href used) */\n  @Prop() type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Variant style */\n  @Prop({ reflect: true }) variant: \"default\" | \"secondary\" | \"back\" = \"default\";\n\n  /** Whether the link is full width */\n  @Prop({ reflect: true }) fullwidth: boolean = false;\n\n  /** Text alignment */\n  @Prop({ reflect: true }) textAlign: \"left\" | \"center\" | \"right\" | \"space-between\" | \"default\" = \"default\";\n\n  /** Badge text */\n  @Prop() badge: string = \"\";\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge position */\n  @Prop({ reflect: true }) badgePosition: \"icon\" | \"link\" = \"icon\";\n\n  /** Disabled status */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Active status */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Whether only an icon is used inside the link */\n  @Prop({ reflect: true }) iconOnly: boolean = false;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Access key of link (usually a number e.g. 1) */\n  @Prop() linkAccesskey: string;\n\n  /** ID of link element */\n  @Prop() linkId: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria disabled of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-disabled\" }) a11yDisabled: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Aria current of link/button */\n  @Prop({ attribute: \"a11y-current\" }) a11yCurrent: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhLinkElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhLinkFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhLinkBlurEvent>;\n\n  private link: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLDivElement;\n  private focusedByInput: boolean = false;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.link.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent(\"focus\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-link\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    const blurEvent = new FocusEvent(\"blur\", {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(blurEvent);\n    this.stzhBlur.emit({\n      component: \"stzh-link\",\n      originalEvent: event\n    });\n  }\n\n  private renderIcon(): HTMLInputElement {\n    return (\n      <div class=\"stzh-link__icon-wrapper\">\n        {this.icon ?\n          <stzh-icon class=\"stzh-link__icon\" name={this.icon}></stzh-icon>\n          :\n          <slot name=\"icon\"></slot>\n        }\n        {(this.badge || this.badgeEmpty) &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </div>\n    );\n  }\n\n  private renderContent(): HTMLDivElement {\n    return (\n      <div class=\"stzh-link__text\">\n        {this.rel && this.rel.includes('external') && <div class=\"stzh-link__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n        {this.download && <div class=\"stzh-link__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n        <div ref={(el) => (this.text = el as HTMLDivElement)}>{this.label ? this.label : <slot></slot>}</div>\n      </div>\n    );\n  }\n\n  private renderInner(iconUsed: boolean): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-link__inner\">\n          {this.iconPosition === \"left\" && this.renderIcon()}\n          {this.renderContent()}\n          {this.iconPosition === \"right\" && this.renderIcon()}\n        </div>\n        {(this.badge || this.badgeEmpty) && !iconUsed &&\n          <stzh-badge class=\"stzh-link__badge\" label={this.badge} type={this.badgeType}></stzh-badge>\n        }\n      </Fragment>\n    );\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"link\");\n    }\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.link?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const iconUsed = hasSlot(this.element, \"icon\") || !!this.icon;\n    const classes = {\n      \"stzh-link\": true,\n      \"stzh-link--has-icon\": iconUsed,\n      \"stzh-link--has-icon-only\": this.iconOnly,\n      \"stzh-link--has-badge\": !!this.badge,\n      \"stzh-link--is-fullwidth\": this.fullwidth,\n      \"stzh-link--is-disabled\": this.disabled,\n      \"stzh-link--is-active\": this.active,\n      [`stzh-link--badge-position-${this.badgePosition}`]: !!this.badgePosition,\n      [`stzh-link--align-${this.textAlign}`]: !!this.textAlign,\n      [`stzh-link--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        {this.href ?\n          <a\n            ref={(el) => (this.link = el as HTMLAnchorElement)}\n            href={this.disabled ? null : this.href}\n            download={this.download}\n            rel={this.rel}\n            target={this.target}\n            class={classes}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </a>\n          :\n          <button\n            ref={(el) => (this.link = el as HTMLButtonElement)}\n            class={classes}\n            type={this.type}\n            disabled={this.disabled}\n            id={this.linkId}\n            accessKey={this.linkAccesskey}\n            tabindex={this.a11yTabindex}\n            aria-label={this.a11yLabel || null}\n            aria-describedby={this.a11yDescribedby || null}\n            aria-disabled={typeof this.a11yDisabled !== \"undefined\"\n              ? (this.a11yDisabled ? \"true\" : \"false\") : null}\n            aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n              ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n            aria-controls={this.a11yControls || null}\n            aria-current={this.a11yCurrent || null}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            {this.renderInner(iconUsed)}\n          </button>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/stzh-search.entry.js

@@ -1,11 +1,12 @@
 import { r as registerInstance, h, F as Fragment, a as Host, g as getElement } from './index-e3050b18.js';
 import { a as axios } from './axios-1264ee0b.js';
 import { r as raf, h as hasSlot } from './utils-54aead01.js';
+import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './media-utils-d80f83d2.js';
 import { d as debounce_1 } from './debounce-240762f6.js';
 import './string-utils-e252977e.js';
 import './_commonjsHelpers-4d8f6371.js';
 
-const stzhSearchCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-search{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--grid-template-areas:\"filters-main filters-main filters-main filters-main\"\n  \"results results results results\"}stzh-search[hidden]{display:none}stzh-search::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \". . results results results results results results results results . .\"}}stzh-search[has-aside-filters]{--grid-template-areas:\"filters-main filters-main filters-main filters-main\"\n  \"filters-aside filters-aside filters-aside filters-aside\"\n  \"results results results results\"}@media screen and (min-width: 900px){stzh-search[has-aside-filters]{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside\"\n      \"results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search[has-aside-filters]{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"filters-aside filters-aside filters-aside filters-aside results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search[variant=teaser]{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"results results results results results results results results results results results results\"}}.stzh-search{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:-webkit-sticky;position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}.stzh-search--teaser .stzh-search__filters-main:not(:empty){padding:0;background-color:transparent}.stzh-search--teaser .stzh-search__filters-aside:not(:empty){padding:0;background-color:transparent}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-medium)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-large)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}";
+const stzhSearchCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-search{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--grid-template-areas:\"filters-main filters-main filters-main filters-main\"\n  \"results results results results\"}stzh-search[hidden]{display:none}stzh-search::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-search *,stzh-search *::before,stzh-search *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-search .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-search .stzh-fylingfocus-focused{outline-style:none !important}stzh-search .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 900px){stzh-search{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \". . results results results results results results results results . .\"}}stzh-search[has-aside-filters]{--grid-template-areas:\"filters-main filters-main filters-main filters-main\"\n  \"filters-aside filters-aside filters-aside filters-aside\"\n  \"results results results results\"}@media screen and (min-width: 900px){stzh-search[has-aside-filters]{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside filters-aside\"\n      \"results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search[has-aside-filters]{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"filters-aside filters-aside filters-aside filters-aside results results results results results results results results\"}}@media screen and (min-width: 1260px){stzh-search[variant=teaser]{--grid-template-areas:\"filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main filters-main\"\n      \"results results results results results results results results results results results results\"}}.stzh-search{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas);}@media screen and (min-width: 600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-search{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-search{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-search{grid-template-columns:repeat(12, minmax(0, 1fr))}}.stzh-search__filters-main{grid-area:filters-main}.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-main:not(:empty){padding:var(--stzh-space-xxxlarge)}}.stzh-search__filters-aside{grid-area:filters-aside}.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xlarge);background-color:var(--stzh-color-grey10)}@media screen and (min-width: 900px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){padding:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside:not(:empty){background-color:transparent;padding:0}}.stzh-search__filters-aside-heading{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-curve-h4-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-h4-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-h4-default-text-letter-spacing);padding-bottom:var(--stzh-space-xsmall);color:var(--stzh-color-primary70);display:none}@media screen and (min-width: 600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-small-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h4-small-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-h4-small-text-letter-spacing)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-large-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h4-large-text-line-height, var(--stzh-font-deci-text-line-height));letter-spacing:var(--stzh-font-curve-h4-large-text-letter-spacing)}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-heading{font-size:var(--stzh-font-curve-h4-ultra-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h4-ultra-text-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h4-ultra-text-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 900px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{padding-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-heading{display:block}}@media screen and (min-width: 1260px){.stzh-search stzh-button.stzh-search__filters-aside-details-trigger{display:none}}@media screen and (min-width: 1260px){.stzh-search__filters-aside-inner{position:-webkit-sticky;position:sticky;top:calc(var(--stzh-header-metabar-height, 0px) * var(--stzh-header-is-stuck, 0) + var(--stzh-space-medium));transition:top var(--stzh-base-transition-animation-speed);width:calc(100% + var(--stzh-grid-gutter-large) - var(--stzh-space-xxxxlarge))}}@media screen and (min-width: 1600px){.stzh-search__filters-aside-inner{width:calc(100% + var(--stzh-grid-gutter-ultra) - var(--stzh-space-xxxxlarge))}}.stzh-search__results-wrapper{grid-area:results;display:grid}.stzh-search__results-heading,.stzh-search__results-empty,.stzh-search__results,.stzh-search__action-more{transition-property:opacity;transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-search__results-heading{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__results-heading{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__results-item{display:contents}.stzh-search__actions-wrapper{display:flex;justify-content:center}.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__actions-wrapper:not(:empty){margin-top:var(--stzh-space-xxxlarge)}}.stzh-search__empty-text{margin-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search__empty-text{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search__loader{margin-top:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-search__loader{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search__loader{margin-top:var(--stzh-space-xxxlarge)}}.stzh-search--teaser .stzh-search__actions-wrapper{justify-content:flex-start}.stzh-search--teaser .stzh-search__filters-main:not(:empty){padding:0;background-color:transparent}.stzh-search--teaser .stzh-search__filters-aside:not(:empty){padding:0;background-color:transparent}@media screen and (max-width: 1259px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-big)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__results-wrapper{margin-top:var(--stzh-space-huge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown .stzh-search__filters-main,.stzh-search--has-filters-aside .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxxxlarge)}}@media screen and (max-width: 1259px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-medium)}}@media screen and (max-width: 1259px) and (min-width: 600px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-large)}}@media screen and (max-width: 1259px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xlarge)}}@media screen and (max-width: 1259px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__results-wrapper{margin-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-medium)}}@media screen and (min-width: 1260px) and (min-width: 600px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-large)}}@media screen and (min-width: 1260px) and (min-width: 900px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px) and (min-width: 1260px){.stzh-search--has-results-shown.stzh-search--teaser .stzh-search__filters-main,.stzh-search--has-filters-aside.stzh-search--teaser .stzh-search__filters-main{margin-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-main:not(:empty){padding-bottom:var(--stzh-space-xxlarge)}}.stzh-search--has-filters-main.stzh-search--has-filters-aside .stzh-search__filters-aside:not(:empty){padding-top:0}.stzh-search--is-loading .stzh-search__results-heading,.stzh-search--is-loading .stzh-search__results-empty,.stzh-search--is-loading .stzh-search__results,.stzh-search--is-loading .stzh-search__action-more{opacity:0.5}";
 
 function defaultTemplateResult(search, item) {
   if (search.variant === "teaser") {
@@ -142,6 +143,9 @@ const StzhSearch = class {
     this.handleMoreClick = () => {
       this.fetch(true);
     };
+    this.handleMediaChange = () => {
+      this.isDetailsOpen = media("large").matches;
+    };
     this.handleFormReset = async () => {
       requestAnimationFrame(() => {
         requestAnimationFrame(async () => {
@@ -164,6 +168,9 @@ const StzhSearch = class {
     };
     this.templateResultWrapperProps = defaultResultWrapperProps;
     this.resultHeadingLevel = "3";
+    this.emptyText = undefined;
+    this.emptyLinkHref = undefined;
+    this.emptyLinkLabel = undefined;
     this.totalCount = 0;
     this.loading = false;
     this.results = [];
@@ -171,6 +178,7 @@ const StzhSearch = class {
     this.hasRequiredParams = false;
     this.firstFetched = false;
     this.initiallyFetched = false;
+    this.isDetailsOpen = false;
   }
   totalCountWatcher() {
     this._showMoreLink = this.totalCount > this.results.length;
@@ -318,6 +326,13 @@ const StzhSearch = class {
       this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, "search");
     }
   }
+  connectedCallback() {
+    addMediaChangeListener(this.handleMediaChange);
+    this.handleMediaChange();
+  }
+  disconnectedCallback() {
+    removeMediaChangeListener(this.handleMediaChange);
+  }
   render() {
     const filtersMainUsed = hasSlot(this.element, 'filters-main');
     const filtersAsideUsed = hasSlot(this.element, 'filters-aside');
@@ -337,11 +352,13 @@ const StzhSearch = class {
       ? this.templateResultWrapperProps(this.element)
       : this.templateResultWrapperProps;
     return (h(Host, { "has-aside-filters": filtersAsideUsed }, h("form", { ref: (el) => (this.formElement = el), novalidate: true, class: classes, onSubmit: this.handleFormSubmit, onReset: this.handleFormReset }, h("div", { class: "stzh-search__filters-main", onStzhChange: this.handleMainFilterChange }, h("slot", { name: "filters-main" })), filtersAsideUsed &&
-      h(Fragment, null, h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, h("div", { class: "stzh-search__filters-aside-inner" }, h("stzh-details", null, h("stzh-button", { variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), h("div", { slot: "content" }, h("slot", { name: "filters-aside" })))))), h("div", { class: "stzh-search__results-wrapper" }, resultsShown &&
+      h(Fragment, null, h("div", { class: "stzh-search__filters-aside", onStzhChange: this.handleAsideFilterChange }, h("div", { class: "stzh-search__filters-aside-inner" }, h("div", { class: "stzh-search__filters-aside-heading" }, this.localization.moreFilter), h("stzh-details", { open: this.isDetailsOpen, class: "stzh-search__filters-aside-details" }, h("stzh-button", { class: "stzh-search__filters-aside-details-trigger", variant: "tertiary-plain", size: "small", noPaddingLeft: true, showToggleIcon: true, iconPosition: "right", label: this.localization.moreFilter }), h("div", { slot: "content" }, h("slot", { name: "filters-aside" })))))), h("div", { class: "stzh-search__results-wrapper" }, resultsShown &&
       h(Fragment, null, this.results.length === 0
         ?
           h(Fragment, null, this.variant !== "teaser" && this.resultsHeading &&
-            h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel }, this.resultsHeading || this.localization.noResults))
+            h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel }, this.resultsHeading || this.localization.noResults), this.emptyText &&
+            h("stzh-text", { class: "stzh-search__empty-text" }, this.emptyText), this.emptyLinkLabel && this.emptyLinkHref &&
+            h("div", { class: "stzh-search__empty-link-wrapper" }, h("stzh-link", { href: this.emptyLinkHref, label: this.emptyLinkLabel })))
         :
           h(Fragment, null, this.variant !== "teaser" && this.resultsHeading &&
             h("stzh-heading", { class: "stzh-search__results-heading", curve: "h3", level: this.resultHeadingLevel }, this.resultsHeading), h(WrapperElement, Object.assign({ class: "stzh-search__results" }, wrapperProps), this.results.map((result) => h("div", { class: "stzh-search__results-item", innerHTML: result.html || "" }))), h("div", { class: "stzh-search__actions-wrapper" }, this._showMoreLink &&