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

package/dist/collection/components/stzh-tag/stzh-tag.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-tag/stzh-tag.js

@@ -39,7 +39,8 @@ export class StzhTag {
     this.onClick = (event) => {
       this.stzhClick.emit({
         component: "stzh-tag",
-        originalEvent: event
+        originalEvent: event,
+        href: this.href
       });
     };
     this.label = "";
@@ -341,7 +342,7 @@ export class StzhTag {
         },
         "complexType": {
           "original": "StzhTagClickEvent",
-          "resolved": "{ component: \"stzh-tag\"; originalEvent: MouseEvent; }",
+          "resolved": "{ component: \"stzh-tag\"; originalEvent: MouseEvent; href: string; }",
           "references": {
             "StzhTagClickEvent": {
               "location": "import",

package/dist/collection/components/stzh-tag/stzh-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-tag.js","sourceRoot":"","sources":["../../../../src/components/stzh-tag/stzh-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhTagType,\n  StzhTagSize,\n  StzhTagClickEvent,\n  StzhTagFocusEvent,\n  StzhTagBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: 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 link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: 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  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-tag__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.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-tag\",\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-tag\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type\n    };\n\n    const Tag = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.href ?\n            <Tag\n              ref={(el) => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n            :\n            <Tag\n              ref={(el) => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-tag.js","sourceRoot":"","sources":["../../../../src/components/stzh-tag/stzh-tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhTagType,\n  StzhTagSize,\n  StzhTagClickEvent,\n  StzhTagFocusEvent,\n  StzhTagBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n */\n@Component({\n  tag: \"stzh-tag\",\n  styleUrl: \"stzh-tag.scss\",\n  scoped: true\n})\nexport class StzhTag {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** `href` if the tag should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether tag is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhTagType = \"default\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhTagSize = \"default\";\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: 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 link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: 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  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhTagElement;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhTagClickEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhTagFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhTagBlurEvent>;\n\n  private tag: HTMLButtonElement | HTMLAnchorElement | HTMLDivElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      if (!this.nonInteractive) {\n        this.tag?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n      }\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-tag__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n        </stzh-clamp>\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.tag.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-tag\",\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-tag\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-tag\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-tag\": true,\n      \"stzh-tag--is-disabled\": this.disabled,\n      [`stzh-tag--size-${this.size}`]: !!this.size,\n      [`stzh-tag--${this.type}`]: !!this.type\n    };\n\n    const Tag = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.href ?\n            <Tag\n              ref={(el) => (this.tag = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n            :\n            <Tag\n              ref={(el) => (this.tag = el as HTMLButtonElement | HTMLDivElement)}\n              class={{\n                \"stzh-tag__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Tag>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-text/stzh-text.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -354,6 +357,11 @@
   font-weight: var(--stzh-font-weight-medium);
   font-style: var(--stzh-font-style-medium);
 }
+.stzh-text--font-medium-italic {
+  font-family: var(--stzh-font-family-medium-italic);
+  font-weight: var(--stzh-font-weight-medium-italic);
+  font-style: var(--stzh-font-style-medium-italic);
+}
 .stzh-text--font-heavy {
   font-family: var(--stzh-font-family-heavy);
   font-weight: var(--stzh-font-weight-heavy);

package/dist/collection/components/stzh-textandimage/stzh-textandimage.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-timeline/stzh-timeline.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-timeline-item/stzh-timeline-item.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-timepicker/stzh-timepicker.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-toast/stzh-toast.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-toastbar/stzh-toastbar.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-toggle/stzh-toggle.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-tooltip/stzh-tooltip.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-twocolumns/stzh-twocolumns.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-upload/stzh-upload.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-vbz-carousel/stzh-vbz-carousel.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */
@@ -158,23 +161,23 @@
 
 :host ::slotted(stzh-ratio),
 :host ::slotted(*) stzh-ratio {
-  --ratio: (328 / 585);
+  --ratio: 585/328;
 }
 @media screen and (min-width: 600px) {
   :host ::slotted(stzh-ratio),
 :host ::slotted(*) stzh-ratio {
-    --ratio: (330 / 1025);
+    --ratio: 1025/330;
   }
 }
 @media screen and (min-width: 900px) {
   :host ::slotted(stzh-ratio),
 :host ::slotted(*) stzh-ratio {
-    --ratio: (555 / 1440);
+    --ratio: 1440/555;
   }
 }
 @media screen and (min-width: 1260px) {
   :host ::slotted(stzh-ratio),
 :host ::slotted(*) stzh-ratio {
-    --ratio: (1120 / 2880);
+    --ratio: 2880/1120;
   }
 }

package/dist/collection/components/stzh-vbz-carousel/stzh-vbz-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"stzh-vbz-carousel.js","sourceRoot":"","sources":["../../../../src/components/stzh-vbz-carousel/stzh-vbz-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAMvB;;GAEG;AAMH,MAAM,OAAO,eAAe;;IAYlB,yBAAoB,GAAG,CAAC,KAA6D,EAAE,EAAE;MAC/F,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;IACH,CAAC,CAAA;2BAdiC,IAAI;;EAM9B,WAAW;IACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;EAC7B,CAAC;EAQD,KAAK,CAAC,iBAAiB;IACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC,WAAW,EAAE;MACvB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC;MAEzD,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;WAAM;QACL,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;OACxF;KACF;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KAC3F;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;KAC1B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,qBACE,MAAM,EAAE,IAAI,EACZ,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,IAAI,EAC1B,mBAAmB,EAAE,IAAI,EACzB,QAAQ,QACR,eAAe,EAAE,IAAI,CAAC,eAAe;UACrC,eAAa,CACC,CACZ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport {\n  StzhVbzMajortickerDisturbanceFetchedEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot any element\n */\n@Component({\n  tag: \"stzh-vbz-carousel\",\n  styleUrl: \"stzh-vbz-carousel.scss\",\n  scoped: true\n})\nexport class StzhVbzCarousel {\n  /** Timeout delay in milliseconds used for autoplay */\n  @Prop() autoplayTimeout: number = 9000;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  private majorTicker: HTMLStzhVbzMajortickerElement;\n\n  private hideElement() {\n    this.element.hidden = true;\n  }\n\n  private onDisturbanceFetched = (event: CustomEvent<StzhVbzMajortickerDisturbanceFetchedEvent>) => {\n    if (event.detail.disturbance) {\n      this.hideElement();\n    }\n  }\n\n  async connectedCallback() {\n\t\tthis.majorTicker = document.querySelector(\"stzh-vbz-majorticker\");\n\n    if (this.majorTicker) {\n\t\t\tconst disturbance = await this.majorTicker.getDisturbance();\n\n      if (disturbance) {\n        this.hideElement();\n      } else {\n        this.majorTicker.addEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.majorTicker) {\n      this.majorTicker.removeEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-carousel\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <stzh-carousel\n            noPeek={true}\n            nonInteractive={true}\n            preventMouseDrag={true}\n            preventAutoplayPause={true}\n            preventAutoplayStop={true}\n            autoplay\n            autoplayTimeout={this.autoplayTimeout}>\n            <slot></slot>\n          </stzh-carousel>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-vbz-carousel.js","sourceRoot":"","sources":["../../../../src/components/stzh-vbz-carousel/stzh-vbz-carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,GACL,MAAM,eAAe,CAAC;AAMvB;;GAEG;AAMH,MAAM,OAAO,eAAe;;IAYlB,yBAAoB,GAAG,CAAC,KAA6D,EAAE,EAAE;MAC/F,IAAI,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE;QAC5B,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;IACH,CAAC,CAAA;2BAdiC,IAAI;;EAM9B,WAAW;IACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;EAC7B,CAAC;EAQD,KAAK,CAAC,iBAAiB;IACvB,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;IAEhE,IAAI,IAAI,CAAC,WAAW,EAAE;MACvB,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,cAAc,EAAE,CAAC;MAEzD,IAAI,WAAW,EAAE;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;OACpB;WAAM;QACL,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;OACxF;KACF;EACH,CAAC;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,IAAI,CAAC,WAAW,CAAC,mBAAmB,CAAC,wBAAwB,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;KAC3F;EACH,CAAC;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,mBAAmB,EAAE,IAAI;KAC1B,CAAC;IAEF,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO;QACjB,qBACE,MAAM,EAAE,IAAI,EACZ,cAAc,EAAE,IAAI,EACpB,gBAAgB,EAAE,IAAI,EACtB,oBAAoB,EAAE,IAAI,EAC1B,mBAAmB,EAAE,IAAI,EACzB,QAAQ,QACR,eAAe,EAAE,IAAI,CAAC,eAAe;UAErC,eAAa,CACC,CACZ,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\nimport {\n  StzhVbzMajortickerDisturbanceFetchedEvent,\n} from \"../../index\";\n\n/**\n * @slot - Slot any element\n */\n@Component({\n  tag: \"stzh-vbz-carousel\",\n  styleUrl: \"stzh-vbz-carousel.scss\",\n  scoped: true\n})\nexport class StzhVbzCarousel {\n  /** Timeout delay in milliseconds used for autoplay */\n  @Prop() autoplayTimeout: number = 9000;\n\n  @Element() element: HTMLStzhFigureElement;\n\n  private majorTicker: HTMLStzhVbzMajortickerElement;\n\n  private hideElement() {\n    this.element.hidden = true;\n  }\n\n  private onDisturbanceFetched = (event: CustomEvent<StzhVbzMajortickerDisturbanceFetchedEvent>) => {\n    if (event.detail.disturbance) {\n      this.hideElement();\n    }\n  }\n\n  async connectedCallback() {\n\t\tthis.majorTicker = document.querySelector(\"stzh-vbz-majorticker\");\n\n    if (this.majorTicker) {\n\t\t\tconst disturbance = await this.majorTicker.getDisturbance();\n\n      if (disturbance) {\n        this.hideElement();\n      } else {\n        this.majorTicker.addEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.majorTicker) {\n      this.majorTicker.removeEventListener(\"stzhDisturbanceFetched\", this.onDisturbanceFetched);\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-vbz-carousel\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <stzh-carousel\n            noPeek={true}\n            nonInteractive={true}\n            preventMouseDrag={true}\n            preventAutoplayPause={true}\n            preventAutoplayStop={true}\n            autoplay\n            autoplayTimeout={this.autoplayTimeout}\n          >\n            <slot></slot>\n          </stzh-carousel>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-vbz-linechip/stzh-vbz-linechip.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-vbz-majorticker/stzh-vbz-majorticker.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-vbz-ticker/stzh-vbz-ticker.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-visuallyhidden/stzh-visuallyhidden.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-vspace/stzh-vspace.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/components/stzh-youtube/stzh-youtube.css

@@ -2,7 +2,7 @@
  * Colors
  */
 /* Signal colors */
-/* Old colors (TODO: cleanup if not needed) */
+/* Old colors (TODO: cleanup when not needed anymore) */
 /**
  * Base
  */
@@ -27,6 +27,9 @@
 /**
  * Header
  */
+/**
+ * Fieldset
+ */
 /**
  * Progressbar
  */

package/dist/collection/global/js/helpers/autofocus.js

@@ -1,6 +1,41 @@
 import { name as packageNameScoped } from '../../../../package.json';
 
 const packageName = packageNameScoped.substring(packageNameScoped.indexOf('/')+1);
+// let focused = false;
+
+// function debounce(func, timeout = 500){
+//   let timer;
+//   return (...args) => {
+//     clearTimeout(timer);
+//     timer = setTimeout(() => { func.apply(this, args); }, timeout);
+//   };
+// }
+
+const debouncedFocus = (event) => {
+  // if (focused) {
+  //   return false;
+  // }
+
+  const autofocus = document.querySelector('[autofocus]');
+
+  if (window.stzhComponents.fixAutofocus
+      && !document.location.hash
+      && autofocus
+      && event.detail.namespace === packageName
+      && autofocus.tagName.toLowerCase().indexOf('stzh-') === 0
+      && 'focus' in autofocus
+  ) {
+    autofocus.focus();
+    // focused = true;
+  } else if (window.stzhComponents.fixHashfocus && document.location.hash) {
+    const hashElement = document.querySelector(document.location.hash);
+
+    if (hashElement) {
+      hashElement.scrollIntoView();
+      // focused = true;
+    }
+  }
+}
 
 /**
  * Execute setFocus method if it exists
@@ -8,15 +43,5 @@ const packageName = packageNameScoped.substring(packageNameScoped.indexOf('/')+1
  * when (child components are loaded)
  */
 export function applyAutofocus() {
-  window.addEventListener('appload', (event) => {
-    const autofocus = document.querySelector('[autofocus]');
-
-    if (autofocus
-        && event.detail.namespace === packageName
-        && autofocus.tagName.toLowerCase().indexOf('stzh-') === 0
-        && 'focus' in autofocus
-    ) {
-      autofocus.focus();
-    }
-  });
+  window.addEventListener('appload', debouncedFocus);
 }

package/dist/collection/global/js/script.js

@@ -11,6 +11,8 @@ export default function () {
     cacheTranslations: true,
     formats: {},
     translations: null,
+    fixAutofocus: true,
+    fixHashfocus: true,
     ...window.stzhComponents || {},
     version,
     supportedLocales: ['de', 'en'],