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

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-chipselect.js","sourceRoot":"","sources":["../../../../src/components/stzh-chipselect/stzh-chipselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  State,\n  Fragment,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhChipselectItem,\n  StzhChipselectChangeEvent,\n  StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = 0;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    this._dataDropdown = this._data.map((data) => {\n      return {\n        text: data.counter\n          ? `${data.label} (${data.counter})`\n          : data.label,\n        value: data.value\n      }\n    });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  }\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    this.value = data.value;\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.value\n    })\n  }\n\n  private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n    this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n    this.activeFocusOptionIndex = this._data.findIndex(data => {\n      return data.value === this.value;\n    });\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.value\n    })\n  }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      this.value = this._data[activeOptionIndex].value;\n\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            defaultValue={this.defaultValue}\n          />\n\n          {this._data.length > 0 &&\n            <Fragment>\n              <div\n                class=\"stzh-chipselect__chips\"\n                role=\"listbox\"\n                tabindex=\"0\"\n                aria-multiselectable=\"false\"\n                aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n                aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                onKeyDown={this.handleKeydown}\n              >\n                {this._data.map((data, index) => (\n                  <stzh-chip\n                    role=\"option\"\n                    class={{\n                      \"stzh-chipselect__chip\": true,\n                      \"is-focused\": this.activeFocusOptionIndex === index\n                    }}\n                    label={data.label}\n                    counter={data.counter}\n                    icon={data.icon}\n                    type={data.type}\n                    inverted={data.inverted}\n                    variant={data.variant}\n                    size={data.size}\n                    disabled={this.disabled || data.disabled}\n                    active={this.value === data.value}\n                    aria-selected={this.value === data.value ? \"true\" : \"false\"}\n                    id={`${this.id}-option-${index}`}\n                    a11yTabindex=\"-1\"\n                    onClick={() => this.handleChipClick(data, index)}\n                  ></stzh-chip>\n                ))}\n              </div>\n\n              <StzhInputDescription\n                classPrefix=\"stzh-chipselect\"\n                id={`${this.id}-description`}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                descriptionLongTitle={this.descriptionLongTitle}\n                descriptionLongUsed={descriptionLongUsed}\n                moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n              />\n\n              <stzh-dropdown\n                class=\"stzh-chipselect__dropdown\"\n                disabled={this.disabled}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                required={this.required}\n                invalid={this.invalid}\n                items={[this.value]}\n                label={this.label}\n                options={this._dataDropdown}\n                hideOptional={this.hideOptional}\n                onStzhChange={this.handleDropdownChange}\n              ></stzh-dropdown>\n            </Fragment>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-chipselect.js","sourceRoot":"","sources":["../../../../src/components/stzh-chipselect/stzh-chipselect.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Watch,\n  Event,\n  EventEmitter,\n  State,\n  Fragment,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhChipselectItem,\n  StzhChipselectChangeEvent,\n  // StzhDropdownChangeEvent\n} from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\n// import { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet chipselectCounter = 0;\n\n/**\n * @slot - Slot for `stzh-checkbox` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-chipselect\",\n  styleUrl: \"stzh-chipselect.scss\",\n  scoped: true\n})\nexport class StzhChipselect {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** The list of chips */\n  @Prop() data: string | StzhChipselectItem[] = [];\n  private _data: StzhChipselectItem[] = [];\n  // private _dataDropdown: any[] = [];\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Whether label is hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Multiple */\n  @Prop({ mutable: true }) multiple: boolean = false;\n\n  /** Value */\n  @Prop({ mutable: true }) value: string | string[] = \"\";\n  private _value: string[] = [];\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string | string[] = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Whether all chips are disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Hide `(optional)` label (or use `required` inside form ot hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  @State() activeFocusOptionIndex: number = 0;\n\n  @Element() element: HTMLStzhChipselectElement;\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhChipselectChangeEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"value\")\n  valueWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._value = JSON.parse(newValue);\n      } catch(ex) {\n        this._value = newValue ? [newValue] : [];\n      }\n    } else {\n      this._value = newValue ? newValue : [];\n    }\n  }\n\n  @Watch(\"data\")\n  dataWatcher(newValue: StzhChipselectItem[] | string) {\n    if (typeof newValue === \"string\") {\n      this._data = JSON.parse(newValue);\n    } else {\n      this._data = newValue;\n    }\n\n    // this._dataDropdown = this._data.map((data) => {\n    //   return {\n    //     text: data.counter\n    //       ? `${data.label} (${data.counter})`\n    //       : data.label,\n    //     value: data.value\n    //   }\n    // });\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  private id: string;\n  private renderPromiseResolve: (value?: unknown) => void;\n\n  private waitForNextRender() {\n    return new Promise(resolve => this.renderPromiseResolve = resolve);\n  }\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n\n    // this.stzhChange.emit({\n    //   component: \"stzh-chipselect\",\n    //   value: this.value\n    // });\n  }\n\n  private handleChipClick = async (data: StzhChipselectItem, index: number) => {\n    if (this.multiple) {\n      if (data.value === \"\" && this._value.length > 0 && !(this._value.length === 1 && this._value[0] === \"\")) {\n        this.value = [];\n      } else if (data.value !== \"\") {\n        this.value = this._value.includes(data.value)\n          ? this._value.filter(value => value !== data.value)\n          : [...this._value, data.value];\n      }\n    } else {\n      this.value = [data.value]\n    }\n\n    this.activeFocusOptionIndex = index;\n\n    await this.waitForNextRender();\n\n    this.stzhChange.emit({\n      component: \"stzh-chipselect\",\n      value: this.multiple ? this._value[0] : this._value\n    })\n  }\n\n  // private handleDropdownChange = async (event: CustomEvent<StzhDropdownChangeEvent>) => {\n  //   this.value = Array.isArray(event.detail.value) ? event.detail.value[0] : event.detail.value;\n\n  //   this.activeFocusOptionIndex = this._data.findIndex(data => {\n  //     return data.value === this.value;\n  //   });\n\n  //   await this.waitForNextRender();\n\n  //   this.stzhChange.emit({\n  //     component: \"stzh-chipselect\",\n  //     value: this.value\n  //   })\n  // }\n\n  private handleKeydown = (event: KeyboardEvent) => {\n    let newActiveIndex: number = null;\n    const activeOptionIndex = this.activeFocusOptionIndex;\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n\n      if (activeOptionIndex > 0) {\n        newActiveIndex = activeOptionIndex - 1;\n      }\n    } else if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n\n      if (activeOptionIndex < this._data.length - 1) {\n        newActiveIndex = activeOptionIndex + 1;\n      }\n    } else if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      this.value = this._data[activeOptionIndex].value;\n\n      this.stzhChange.emit({\n        component: \"stzh-chipselect\",\n        value: this.value\n      });\n    }\n\n    if (newActiveIndex !== null) {\n      this.activeFocusOptionIndex = newActiveIndex;\n    }\n  }\n\n  componentDidRender() {\n    if (this.renderPromiseResolve) {\n      this.renderPromiseResolve();\n    }\n  }\n\n  async componentWillLoad() {\n    this.id = `stzh-chipselect-${chipselectCounter++}`;\n\n    this.dataWatcher(this.data);\n    this.errorWatcher(this.error);\n    this.valueWatcher(this.value);\n\n    this.defaultValue = this.defaultValue || this.value;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"chipselect\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = !!this.description;\n    const descriptionLongUsed = !!this.descriptionLong;\n    const errorUsed = !!this.error;\n\n    const classes = {\n      \"stzh-chipselect\": true,\n      \"stzh-chipselect--has-description\": descriptionUsed,\n      \"stzh-chipselect--has-description-long\": descriptionLongUsed,\n      \"stzh-chipselect--has-error\": errorUsed,\n      \"stzh-chipselect--is-invalid\": this.invalid || errorUsed,\n      \"stzh-chipselect--is-disabled\": this.disabled,\n      \"stzh-chipselect--is-required\": this.required,\n      \"stzh-chipselect--has-label-hidden\": this.labelHidden,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed}>\n        <div class={classes}>\n          {this.multiple\n            ?\n            <Fragment>\n              {this._value.map((value) =>\n                <input type=\"hidden\" name={this.name} value={value} />\n              )}\n            </Fragment>\n            :\n            <input\n              type=\"hidden\"\n              name={this.name}\n              value={this.value}\n            />\n          }\n\n          <label class=\"stzh-chipselect__label\" htmlFor={this.id}>\n            {this.label ? this.label : <slot></slot>}\n            {!this.hideOptional &&\n              <span class=\"stzh-chipselect__marker\">\n                <span class=\"stzh-chipselect__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker\n                  }\n                </span>\n                <span class=\"stzh-chipselect__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText\n                  }\n                </span>\n              </span>\n            }\n          </label>\n\n          {this._data.length > 0 &&\n            <Fragment>\n              <div\n                id={this.id}\n                class=\"stzh-chipselect__chips\"\n                role=\"listbox\"\n                tabindex=\"0\"\n                aria-multiselectable={this.multiple ? \"true\" : \"false\"}\n                aria-activedescendant={`${this.id}-option-${this.activeFocusOptionIndex}`}\n                aria-describedby={`${this.id}-description ${this.a11yDescribedby}`}\n                onKeyDown={this.handleKeydown}\n              >\n                {this._data.map((data, index) => (\n                  <stzh-chip\n                    role=\"option\"\n                    class={{\n                      \"stzh-chipselect__chip\": true,\n                      \"is-focused\": this.activeFocusOptionIndex === index\n                    }}\n                    label={data.label}\n                    counter={data.counter}\n                    icon={data.icon}\n                    type={data.type}\n                    inverted={data.inverted}\n                    variant={data.variant}\n                    size={data.size || \"small\"}\n                    disabled={this.disabled || data.disabled}\n                    active={\n                      this._value.includes(data.value)\n                      || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                    }\n                    aria-selected={\n                      this._value.includes(data.value)\n                      || (!data.value && this.multiple && (this._value.length === 0 || (this._value.length === 1 && this._value[0] === \"\")))\n                        ? \"true\" : \"false\"\n                    }\n                    id={`${this.id}-option-${index}`}\n                    a11yTabindex=\"-1\"\n                    onClick={() => this.handleChipClick(data, index)}\n                  ></stzh-chip>\n                ))}\n              </div>\n\n              <StzhInputDescription\n                classPrefix=\"stzh-chipselect\"\n                id={`${this.id}-description`}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                descriptionLongTitle={this.descriptionLongTitle}\n                descriptionLongUsed={descriptionLongUsed}\n                moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n              />\n\n              {/* <stzh-dropdown\n                class=\"stzh-chipselect__dropdown\"\n                multiple={this.multiple}\n                disabled={this.disabled}\n                error={this._error}\n                description={this.description}\n                descriptionLong={this.descriptionLong}\n                required={this.required}\n                invalid={this.invalid}\n                items={[this.value]}\n                label={this.label}\n                labelHidden={this.labelHidden}\n                options={this._dataDropdown}\n                hideOptional={this.hideOptional}\n                onStzhChange={this.handleDropdownChange}\n              ></stzh-dropdown> */}\n            </Fragment>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-clamp/stzh-clamp.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-contact/stzh-contact.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
  */
@@ -276,22 +279,24 @@
   display: flex;
   align-items: center;
 }
-.stzh-contact__heading, .stzh-contact__availability-title {
-  font-family: var(--stzh-font-family-heavy);
-  font-weight: var(--stzh-font-weight-heavy);
-  font-style: var(--stzh-font-style-heavy);
+.stzh-contact__heading, .stzh-contact__name, .stzh-contact__availability-title {
   font-size: var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));
   line-height: var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));
   letter-spacing: var(--stzh-font-curve-p1-default-text-letter-spacing);
   margin: 0px;
 }
 @media screen and (min-width: 900px) {
-  .stzh-contact__heading, .stzh-contact__availability-title {
+  .stzh-contact__heading, .stzh-contact__name, .stzh-contact__availability-title {
     font-size: var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));
     line-height: var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));
     letter-spacing: var(--stzh-font-curve-p1-medium-text-letter-spacing);
   }
 }
+.stzh-contact__heading, .stzh-contact__name.is-heading, .stzh-contact__availability-title {
+  font-family: var(--stzh-font-family-heavy);
+  font-weight: var(--stzh-font-weight-heavy);
+  font-style: var(--stzh-font-style-heavy);
+}
 .stzh-contact__availability {
   grid-area: availability;
   margin-top: var(--stzh-space-xlarge);

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

@@ -21,6 +21,7 @@ export class StzhContact {
     this.heading = undefined;
     this.headingLevel = "3";
     this.name = undefined;
+    this.nameHeadingLevel = "";
     this.address = undefined;
     this.street = undefined;
     this.streetInfo = undefined;
@@ -86,13 +87,17 @@ export class StzhContact {
       "stzh-contact--has-links": hasLinks
     };
     const HeadingLevel = `h${this.headingLevel}`;
+    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : 'div';
     const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;
     return (h(Host, null, h("div", { class: classes, itemscope: true, itemtype: `http://schema.org/${this.type}` }, h("div", { class: "stzh-contact__main-heading", itemprop: (this.type === "Organization" && !this.heading
         || this.type === "Person" && !this.name) ? "name" : null }, this.mainHeading
       ? h("stzh-heading", { level: this.mainHeadingLevel }, this.mainHeading)
       : h("slot", { name: "main-heading" })), h("div", { class: "stzh-contact__image-wrapper" }, h("div", { class: "stzh-contact__image" }, h("slot", { name: "image" }))), h("div", { class: "stzh-contact__info" }, this.heading &&
       h(HeadingLevel, { class: "stzh-contact__heading", itemprop: this.type === "Organization" || !this.name ? "name" : null, innerHTML: this.heading }), this.name &&
-      h("div", { class: "stzh-contact__name", itemprop: this.type === "Person" ? "name" : null }, this.name), h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress", innerHTML: this.address }, !this.address &&
+      h(NameHeadingLevel, { class: {
+          "stzh-contact__name": true,
+          "is-heading": this.nameHeadingLevel !== "",
+        }, itemprop: this.type === "Person" ? "name" : null }, this.name), h("div", { class: "stzh-contact__address", itemprop: "address", itemscope: true, itemtype: "http://schema.org/PostalAddress", innerHTML: this.address }, !this.address &&
       h(Fragment, null, this.street &&
         h("div", { class: "stzh-contact__street", itemprop: "streetAddress" }, this.street, this.streetInfo &&
           h(Fragment, null, h("br", null), " ", this.streetInfo)), this.postalCode &&
@@ -237,6 +242,24 @@ export class StzhContact {
         "attribute": "name",
         "reflect": false
       },
+      "nameHeadingLevel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"\" | \"1\" | \"2\" | \"3\" | \"4\"",
+          "resolved": "\"\" | \"1\" | \"2\" | \"3\" | \"4\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name heading level"
+        },
+        "attribute": "name-heading-level",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "address": {
         "type": "string",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-contact.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact/stzh-contact.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACN,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,SAAS,SAAS,CAAC,GAAW;EAC5B,OAAO,GAAG,CAAC,OAAO,CAAC,KAAK,EAAC,EAAE,CAAC,CAAC;AAC/B,CAAC;AAED;;;;;;GAMG;AAMH,MAAM,OAAO,WAAW;;IAyCd,aAAQ,GAAoB,EAAE,CAAC;IAS/B,YAAO,GAAmB,EAAE,CAAC;IAyB7B,kBAAa,GAAkC,EAAE,CAAC;gBAzEhB,cAAc;;4BAMN,GAAG;;wBAMP,GAAG;;;;;;;mBA0BL,EAAE;kBASJ,EAAE;;;;;;;kCAsBY,GAAG;;;EAK3D,gEAAgE;EAGhE,mBAAmB,CAAC,QAAgD;IAClE,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KAC3C;SAAM;MACL,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;KAC/B;IAED,4BAA4B;IAC5B,sEAAsE;IACtE,qCAAqC;IACrC,0BAA0B;IAC1B,SAAS;IACT,IAAI;EACN,CAAC;EAGD,cAAc,CAAC,QAAkC;IAC/C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACtC;SAAM;MACL,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;KAC1B;EACH,CAAC;EAGD,aAAa,CAAC,QAAiC;IAC7C,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACrC;SAAM;MACL,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC;KACzB;EACH,CAAC;EAID,KAAK,CAAC,iBAAiB;IACrB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAChC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAChD,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IACtE,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,yBAAyB,EAAE,QAAQ;MACnC,2BAA2B,EAAE,UAAU;MACvC,0BAA0B,EAAE,SAAS;MACrC,yBAAyB,EAAE,QAAQ;KACpC,CAAC;IAEF,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;IAC7C,MAAM,wBAAwB,GAAG,IAAI,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAEnE,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,OAAO,EAAE,SAAS,QAAC,QAAQ,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE;QACvE,WACE,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAE,CAAC,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,IAAI,CAAC,OAAO;eACnD,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAEzD,IAAI,CAAC,WAAW;UACf,CAAC,CAAC,oBAAc,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAG,IAAI,CAAC,WAAW,CAAgB;UAC/E,CAAC,CAAC,YAAM,IAAI,EAAC,cAAc,GAAQ,CAEjC;QAEN,WAAK,KAAK,EAAC,6BAA6B;UACtC,WAAK,KAAK,EAAC,qBAAqB;YAC9B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACF;QAEN,WAAK,KAAK,EAAC,oBAAoB;UAC5B,IAAI,CAAC,OAAO;YACX,EAAC,YAAY,IACX,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EACpE,SAAS,EAAE,IAAI,CAAC,OAAO,GACT;UAGjB,IAAI,CAAC,IAAI;YACR,WACE,KAAK,EAAC,oBAAoB,EAC1B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,IAE/C,IAAI,CAAC,IAAI,CACN;UAGR,WACE,KAAK,EAAC,uBAAuB,EAC7B,QAAQ,EAAC,SAAS,EAClB,SAAS,QACT,QAAQ,EAAC,iCAAiC,EAC1C,SAAS,EAAE,IAAI,CAAC,OAAO,IAEtB,CAAC,IAAI,CAAC,OAAO;YACZ,EAAC,QAAQ;cACN,IAAI,CAAC,MAAM;gBACV,WAAK,KAAK,EAAC,sBAAsB,EAAC,QAAQ,EAAC,eAAe;kBACvD,IAAI,CAAC,MAAM;kBACX,IAAI,CAAC,UAAU;oBACd,EAAC,QAAQ;sBACP,aAAM;;sBAAE,IAAI,CAAC,UAAU,CACd,CAET;cAGP,IAAI,CAAC,UAAU;gBACd,YAAM,KAAK,EAAC,2BAA2B,EAAC,QAAQ,EAAC,YAAY;kBAC1D,IAAI,CAAC,UAAU;2BACX;cAGR,IAAI,CAAC,QAAQ;gBACZ,YAAM,KAAK,EAAC,wBAAwB,EAAC,QAAQ,EAAC,iBAAiB,IAC5D,IAAI,CAAC,QAAQ,CACT;cAGT,YAAM,IAAI,EAAC,SAAS,GAAQ,CACnB,CAET;UAEL,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;YACvB,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAC5B,WAAK,KAAK,EAAC,sBAAsB;cAC/B;gBAAO,MAAM,CAAC,KAAK;yBAAc;cACjC,iBACE,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,2BAA2B,EACjC,IAAI,EAAE,GAAG,MAAM,CAAC,IAAI,IAAI,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,EAClD,WAAW,EAAE,MAAM,CAAC,WAAW,IAAI,CAAC,GAAG,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC,EACvE,QAAQ,EAAE,MAAM,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,IAE1D,MAAM,CAAC,MAAM,CACJ,CACR,CACP,CACG;UAGP,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;YACtB,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAC1B,WAAK,KAAK,EAAC,qBAAqB;cAC9B;gBAAO,KAAK,CAAC,KAAK;yBAAc;cAC/B,KAAK,CAAC,IAAI;gBACT,CAAC;kBACD,iBACE,IAAI,EAAC,SAAS,EACd,MAAM,EAAC,MAAM,EACb,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAE,UAAU,KAAK,CAAC,IAAI,EAAE,EAC5B,WAAW,EAAE,KAAK,CAAC,WAAW,IAAI,CAAC,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,EAClE,QAAQ,EAAC,OAAO,IAEf,KAAK,CAAC,IAAI,CACD;gBACZ,CAAC;kBACD,YACE,KAAK,EAAC,4BAA4B,EAClC,QAAQ,EAAC,OAAO,IAEf,KAAK,CAAC,IAAI,CACN,CAEL,CACP,CACG;UAGR,WACE,KAAK,EAAC,qBAAqB,EAC3B,SAAS,EAAE,IAAI,CAAC,KAAK,IAEpB,CAAC,IAAI,CAAC,KAAK;YACV,EAAC,QAAQ;cACN,IAAI,CAAC,YAAY;gBAChB,WAAK,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,YAAY,CAAO;cAEnE,IAAI,CAAC,UAAU;gBACd,WAAK,KAAK,EAAC,2BAA2B,IAAE,IAAI,CAAC,UAAU,CAAO;cAE/D,IAAI,CAAC,eAAe;gBACnB,YAAM,KAAK,EAAC,iCAAiC;kBAAE,IAAI,CAAC,eAAe;2BAAc;cAElF,IAAI,CAAC,aAAa;gBACjB,YAAM,KAAK,EAAC,8BAA8B,IAAE,IAAI,CAAC,aAAa,CAAQ;cAExE,YAAM,IAAI,EAAC,OAAO,GAAQ,CACjB,CAET,CACF;QAEL,IAAI,CAAC,YAAY;UAChB,WAAK,KAAK,EAAC,4BAA4B;YACpC,IAAI,CAAC,iBAAiB;cACrB,EAAC,wBAAwB,IACvB,KAAK,EAAC,kCAAkC,IAEvC,IAAI,CAAC,iBAAiB,CACE;YAG5B,IAAI,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC;cAC5B,UAAI,KAAK,EAAC,iCAAiC,IACxC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAC/B,UAAI,KAAK,EAAC,sCAAsC;gBAC9C,WAAK,KAAK,EAAC,oCAAoC,IAAE,IAAI,CAAC,OAAO,CAAO;gBACnE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;kBACpB,CAAC;oBACD,WAAK,KAAK,EAAC,kCAAkC,IAC1C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAC9B,EAAC,QAAQ;sBACP,WAAK,KAAK,EAAC,iCAAiC,IAAE,IAAI,CAAO;sBACxD,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;wBAC5B,WAAK,KAAK,EAAC,4CAA4C,GAAO,CAEvD,CACZ,CACG;kBACN,CAAC;oBACD,WAAK,KAAK,EAAC,kCAAkC,QAEvC,CAEL,CACN,CACE,CAEH;QAGR,WAAK,KAAK,EAAC,0BAA0B;UACnC,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  ContactNumber,\n  ContactEmail,\n  StzhContactAvailabilityItem\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g,'');\n}\n\n/**\n * @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */\n  @Prop() address: string;\n\n  /** Street */\n  @Prop() street: string;\n\n  /** Additional street info */\n  @Prop() streetInfo: string;\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\n\n  /** Post office box heading */\n  @Prop() poboxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n  // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n\n    // if (this._availability) {\n    //   this._availabilityDataItems = this._availability.map((item) => ({\n    //     value: item.hours.join(' | '),\n    //     label: item.weekday\n    //   }));\n    // }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      this._emails = JSON.parse(newValue);\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\n    this.availabilityWatcher(this.availability);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n    return (\n      <Host>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={(this.type === \"Organization\" && !this.heading\n              || this.type === \"Person\" && !this.name) ? \"name\" : null}\n          >\n            {this.mainHeading\n              ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n              : <slot name=\"main-heading\"></slot>\n            }\n          </div>\n\n          <div class=\"stzh-contact__image-wrapper\">\n            <div class=\"stzh-contact__image\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.heading &&\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                innerHTML={this.heading}\n              ></HeadingLevel>\n            }\n\n            {this.name &&\n              <div\n                class=\"stzh-contact__name\"\n                itemprop={this.type === \"Person\" ? \"name\" : null}\n              >\n                {this.name}\n              </div>\n            }\n\n            <div\n              class=\"stzh-contact__address\"\n              itemprop=\"address\"\n              itemscope\n              itemtype=\"http://schema.org/PostalAddress\"\n              innerHTML={this.address}\n            >\n              {!this.address &&\n                <Fragment>\n                  {this.street &&\n                    <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                      {this.street}\n                      {this.streetInfo &&\n                        <Fragment>\n                          <br /> {this.streetInfo}\n                        </Fragment>\n                      }\n                    </div>\n                  }\n\n                  {this.postalCode &&\n                    <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                      {this.postalCode}&nbsp;\n                    </span>\n                  }\n\n                  {this.location &&\n                    <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                      {this.location}\n                    </span>\n                  }\n\n                  <slot name=\"address\"></slot>\n                </Fragment>\n              }\n            </div>\n\n            {this._numbers.length > 0 &&\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map((number) =>\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || (`${number.label} ${number.number}`)}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                )}\n              </div>\n            }\n\n            {this._emails.length > 0 &&\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map((email) =>\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href\n                      ?\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || (`${email.label} ${email.text}`)}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                      :\n                      <span\n                        class=\"stzh-container__email-link\"\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </span>\n                    }\n                  </div>\n                )}\n              </div>\n            }\n\n            <div\n              class=\"stzh-contact__pobox\"\n              innerHTML={this.pobox}\n            >\n              {!this.pobox &&\n                <Fragment>\n                  {this.poboxHeading &&\n                    <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n                  }\n                  {this.poboxTitle &&\n                    <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n                  }\n                  {this.poboxPostalCode &&\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  }\n                  {this.poboxLocation &&\n                    <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n                  }\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              }\n            </div>\n          </div>\n\n          {this.availability &&\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle &&\n                <AvailabilityTitleElement\n                  class=\"stzh-contact__availability-title\"\n                >\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              }\n\n              {this._availability.length > 0 &&\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map((item) =>\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0\n                        ?\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) =>\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 &&\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              }\n                            </Fragment>\n                          )}\n                        </div>\n                        :\n                        <div class=\"stzh-contact__availability-hours\">\n                          -\n                        </div>\n                      }\n                    </li>\n                  )}\n                </ul>\n              }\n            </div>\n          }\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-contact.js","sourceRoot":"","sources":["../../../../src/components/stzh-contact/stzh-contact.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Fragment,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  ContactNumber,\n  ContactEmail,\n  StzhContactAvailabilityItem\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nfunction formatTel(tel: string) {\n  return tel.replace(/\\s/g,'');\n}\n\n/**\n * @slot main-heading - slot for main heading\n * @slot image - slot for image\n * @slot address - slot for address (alternative for `address` property or separate properties `street`, `streetInfo`, `postalCode` & `location`)\n * @slot pobox - slot for pobox (alternative for `pobox` property or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`)\n * @slot slot for additional (e.g. accordion with contact form, map or datalist)\n */\n@Component({\n  tag: \"stzh-contact\",\n  styleUrl: \"stzh-contact.scss\",\n  scoped: true\n})\nexport class StzhContact {\n  /** Type */\n  @Prop() type: \"Organization\" | \"Person\" = \"Organization\";\n\n  /** Main heading */\n  @Prop() mainHeading: string;\n\n  /** Main heading level */\n  @Prop() mainHeadingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"2\";\n\n  /** Heading */\n  @Prop() heading: string;\n\n  /** Heading level */\n  @Prop() headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Name */\n  @Prop() name: string;\n\n  /** Name heading level */\n  @Prop() nameHeadingLevel: \"\" | \"1\" | \"2\" | \"3\" | \"4\" = \"\";\n\n  /** Address (alternative for address slot or separate properties `street`, `streetInfo`, `postalCode` & `location`) */\n  @Prop() address: string;\n\n  /** Street */\n  @Prop() street: string;\n\n  /** Additional street info */\n  @Prop() streetInfo: string;\n\n  /** Postal code */\n  @Prop() postalCode: string;\n\n  /** Location / city */\n  @Prop() location: string;\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `type` = `tel`|`fax`, `label`, `number`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `number`).\n   */\n  @Prop() numbers: ContactNumber[] | string = [];\n  private _numbers: ContactNumber[] = [];\n\n  /**\n   * Numbers\n   * Array of objects that can include the attributes `label`, `number`, `text`, `href`\n   * and optionally `analyticsId` for setting `s-object-id` to the link element\n   * (for Adobe Analytics, default value is `label` and `text`).\n   */\n  @Prop() emails: ContactEmail[] | string = [];\n  private _emails: ContactEmail[] = [];\n\n  /** Pobox (alternative for pobox slot or separate properties `poboxHeading`, `poboxTitle`, `poboxPostalCode` & `poboxLocation`) */\n  @Prop() pobox: string;\n\n  /** Post office box heading */\n  @Prop() poboxHeading: string;\n\n  /** Post office box title */\n  @Prop() poboxTitle: string;\n\n  /** Post office box postal code */\n  @Prop() poboxPostalCode: string;\n\n  /** Post office box location / city */\n  @Prop() poboxLocation: string;\n\n  /** Availability title */\n  @Prop() availabilityTitle: string;\n\n  /** Availability title level */\n  @Prop() availabilityTitleLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /** Availability times */\n  @Prop() availability: string | StzhContactAvailabilityItem[];\n  private _availability: StzhContactAvailabilityItem[] = [];\n  // private _availabilityDataItems: StzhDatalistItemEntry[] = [];\n\n  @Watch(\"availability\")\n  availabilityWatcher(newValue: string | StzhContactAvailabilityItem[]) {\n    if (typeof newValue === \"string\") {\n      this._availability = JSON.parse(newValue);\n    } else {\n      this._availability = newValue;\n    }\n\n    // if (this._availability) {\n    //   this._availabilityDataItems = this._availability.map((item) => ({\n    //     value: item.hours.join(' | '),\n    //     label: item.weekday\n    //   }));\n    // }\n  }\n\n  @Watch(\"numbers\")\n  numbersWatcher(newValue: ContactNumber[] | string) {\n    if (typeof newValue === \"string\") {\n      this._numbers = JSON.parse(newValue);\n    } else {\n      this._numbers = newValue;\n    }\n  }\n\n  @Watch(\"emails\")\n  emailsWatcher(newValue: ContactEmail[] | string) {\n    if (typeof newValue === \"string\") {\n      this._emails = JSON.parse(newValue);\n    } else {\n      this._emails = newValue;\n    }\n  }\n\n  @Element() element: HTMLStzhFigureElement;\n\n  async componentWillLoad() {\n    this.numbersWatcher(this.numbers);\n    this.emailsWatcher(this.emails);\n    this.availabilityWatcher(this.availability);\n  }\n\n  render() {\n    const hasImage = hasSlot(this.element, \"image\");\n    const hasAddress = !!this.address || hasSlot(this.element, \"address\");\n    const hasAddons = hasSlot(this.element, \"addons\");\n    const hasLinks = hasSlot(this.element, \"links\");\n\n    const classes = {\n      \"stzh-contact\": true,\n      \"stzh-contact--has-image\": hasImage,\n      \"stzh-contact--has-address\": hasAddress,\n      \"stzh-contact--has-addons\": hasAddons,\n      \"stzh-contact--has-links\": hasLinks\n    };\n\n    const HeadingLevel = `h${this.headingLevel}`;\n    const NameHeadingLevel = this.nameHeadingLevel ? `h${this.nameHeadingLevel}` : 'div';\n    const AvailabilityTitleElement = `h${this.availabilityTitleLevel}`;\n\n    return (\n      <Host>\n        <div class={classes} itemscope itemtype={`http://schema.org/${this.type}`}>\n          <div\n            class=\"stzh-contact__main-heading\"\n            itemprop={(this.type === \"Organization\" && !this.heading\n              || this.type === \"Person\" && !this.name) ? \"name\" : null}\n          >\n            {this.mainHeading\n              ? <stzh-heading level={this.mainHeadingLevel}>{this.mainHeading}</stzh-heading>\n              : <slot name=\"main-heading\"></slot>\n            }\n          </div>\n\n          <div class=\"stzh-contact__image-wrapper\">\n            <div class=\"stzh-contact__image\">\n              <slot name=\"image\"></slot>\n            </div>\n          </div>\n\n          <div class=\"stzh-contact__info\">\n            {this.heading &&\n              <HeadingLevel\n                class=\"stzh-contact__heading\"\n                itemprop={this.type === \"Organization\" || !this.name ? \"name\" : null}\n                innerHTML={this.heading}\n              ></HeadingLevel>\n            }\n\n            {this.name &&\n              <NameHeadingLevel\n                class={{\n                  \"stzh-contact__name\": true,\n                  \"is-heading\": this.nameHeadingLevel !== \"\",\n                }}\n                itemprop={this.type === \"Person\" ? \"name\" : null}\n              >\n                {this.name}\n              </NameHeadingLevel>\n            }\n\n            <div\n              class=\"stzh-contact__address\"\n              itemprop=\"address\"\n              itemscope\n              itemtype=\"http://schema.org/PostalAddress\"\n              innerHTML={this.address}\n            >\n              {!this.address &&\n                <Fragment>\n                  {this.street &&\n                    <div class=\"stzh-contact__street\" itemprop=\"streetAddress\">\n                      {this.street}\n                      {this.streetInfo &&\n                        <Fragment>\n                          <br /> {this.streetInfo}\n                        </Fragment>\n                      }\n                    </div>\n                  }\n\n                  {this.postalCode &&\n                    <span class=\"stzh-contact__postal-code\" itemprop=\"postalCode\">\n                      {this.postalCode}&nbsp;\n                    </span>\n                  }\n\n                  {this.location &&\n                    <span class=\"stzh-contact__locality\" itemprop=\"addressLocality\">\n                      {this.location}\n                    </span>\n                  }\n\n                  <slot name=\"address\"></slot>\n                </Fragment>\n              }\n            </div>\n\n            {this._numbers.length > 0 &&\n              <div class=\"stzh-contact__numbers\">\n                {this._numbers.map((number) =>\n                  <div class=\"stzh-contact__number\">\n                    <span>{number.label}&nbsp;</span>\n                    <stzh-link\n                      size=\"inherit\"\n                      height=\"auto\"\n                      class=\"stzh-contact__number-link\"\n                      href={`${number.type}:${formatTel(number.number)}`}\n                      analyticsId={number.analyticsId || (`${number.label} ${number.number}`)}\n                      itemprop={number.type === \"fax\" ? \"faxNumber\" : \"telephone\"}\n                    >\n                      {number.number}\n                    </stzh-link>\n                  </div>\n                )}\n              </div>\n            }\n\n            {this._emails.length > 0 &&\n              <div class=\"stzh-contact__emails\">\n                {this._emails.map((email) =>\n                  <div class=\"stzh-contact__email\">\n                    <span>{email.label}&nbsp;</span>\n                    {email.href\n                      ?\n                      <stzh-link\n                        size=\"inherit\"\n                        height=\"auto\"\n                        class=\"stzh-container__email-link\"\n                        href={`mailto:${email.href}`}\n                        analyticsId={email.analyticsId || (`${email.label} ${email.text}`)}\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </stzh-link>\n                      :\n                      <span\n                        class=\"stzh-container__email-link\"\n                        itemprop=\"email\"\n                      >\n                        {email.text}\n                      </span>\n                    }\n                  </div>\n                )}\n              </div>\n            }\n\n            <div\n              class=\"stzh-contact__pobox\"\n              innerHTML={this.pobox}\n            >\n              {!this.pobox &&\n                <Fragment>\n                  {this.poboxHeading &&\n                    <div class=\"stzh-contact__pobox-heading\">{this.poboxHeading}</div>\n                  }\n                  {this.poboxTitle &&\n                    <div class=\"stzh-contact__pobox-title\">{this.poboxTitle}</div>\n                  }\n                  {this.poboxPostalCode &&\n                    <span class=\"stzh-contact__pobox-postal-code\">{this.poboxPostalCode}&nbsp;</span>\n                  }\n                  {this.poboxLocation &&\n                    <span class=\"stzh-contact__pobox-locality\">{this.poboxLocation}</span>\n                  }\n                  <slot name=\"pobox\"></slot>\n                </Fragment>\n              }\n            </div>\n          </div>\n\n          {this.availability &&\n            <div class=\"stzh-contact__availability\">\n              {this.availabilityTitle &&\n                <AvailabilityTitleElement\n                  class=\"stzh-contact__availability-title\"\n                >\n                  {this.availabilityTitle}\n                </AvailabilityTitleElement>\n              }\n\n              {this._availability.length > 0 &&\n                <ul class=\"stzh-contact__availability-list\">\n                  {this._availability.map((item) =>\n                    <li class=\"stzh-contact__availability-list-item\">\n                      <div class=\"stzh-contact__availability-weekday\">{item.weekday}</div>\n                      {item.hours.length > 0\n                        ?\n                        <div class=\"stzh-contact__availability-hours\">\n                          {item.hours.map((hour, index) =>\n                            <Fragment>\n                              <div class=\"stzh-contact__availability-hour\">{hour}</div>\n                              {index < item.hours.length - 1 &&\n                                <div class=\"stzh-contact__availability-hours-separator\"></div>\n                              }\n                            </Fragment>\n                          )}\n                        </div>\n                        :\n                        <div class=\"stzh-contact__availability-hours\">\n                          -\n                        </div>\n                      }\n                    </li>\n                  )}\n                </ul>\n              }\n            </div>\n          }\n\n          <div class=\"stzh-contact__additional\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/stzh-container/stzh-container.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-content/stzh-content.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-cspace/stzh-cspace.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
  */
@@ -507,19 +510,22 @@ stzh-cspace > .stzh-cspace > .section > :where(stzh-text[curve="p2"]), stzh-cspa
     margin-bottom: var(--stzh-space-large);
   }
 }
-stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
+stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-daterange, stzh-cspace > .stzh-cspace > stzh-daterange, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
   margin-bottom: var(--stzh-space-xsmall);
 }
 @media screen and (min-width: 900px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
+  stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-daterange, stzh-cspace > .stzh-cspace > stzh-daterange, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
     margin-bottom: var(--stzh-space-small);
   }
 }
 @media screen and (min-width: 1260px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
+  stzh-cspace > .stzh-cspace > .section > stzh-input, stzh-cspace > .stzh-cspace > stzh-input, stzh-cspace > .stzh-cspace > .section > stzh-datepicker, stzh-cspace > .stzh-cspace > stzh-datepicker, stzh-cspace > .stzh-cspace > .section > stzh-daterange, stzh-cspace > .stzh-cspace > stzh-daterange, stzh-cspace > .stzh-cspace > .section > stzh-dropdown, stzh-cspace > .stzh-cspace > stzh-dropdown, stzh-cspace > .stzh-cspace > .section > stzh-upload, stzh-cspace > .stzh-cspace > stzh-upload, stzh-cspace > .stzh-cspace > .section > stzh-checkbox, stzh-cspace > .stzh-cspace > stzh-checkbox, stzh-cspace > .stzh-cspace > .section > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > stzh-checkboxgroup, stzh-cspace > .stzh-cspace > .section > stzh-radio, stzh-cspace > .stzh-cspace > stzh-radio, stzh-cspace > .stzh-cspace > .section > stzh-radiogroup, stzh-cspace > .stzh-cspace > stzh-radiogroup {
     margin-bottom: var(--stzh-space-medium);
   }
 }
+stzh-cspace > .stzh-cspace > .section > stzh-chipgroup, stzh-cspace > .stzh-cspace > stzh-chipgroup, stzh-cspace > .stzh-cspace > .section > stzh-chipselect, stzh-cspace > .stzh-cspace > stzh-chipselect {
+  margin-bottom: var(--stzh-space-xlarge);
+}
 stzh-cspace > .stzh-cspace > .section > stzh-message, stzh-cspace > .stzh-cspace > stzh-message {
   margin-bottom: var(--stzh-space-xxlarge);
 }
@@ -533,16 +539,16 @@ stzh-cspace > .stzh-cspace > .section > stzh-message, stzh-cspace > .stzh-cspace
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }
-stzh-cspace > .stzh-cspace > .section > stzh-chipgroup, stzh-cspace > .stzh-cspace > stzh-chipgroup, stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
   margin-bottom: var(--stzh-space-xxlarge);
 }
 @media screen and (min-width: 900px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-chipgroup, stzh-cspace > .stzh-cspace > stzh-chipgroup, stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+  stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
     margin-bottom: var(--stzh-space-xxxlarge);
   }
 }
 @media screen and (min-width: 1260px) {
-  stzh-cspace > .stzh-cspace > .section > stzh-chipgroup, stzh-cspace > .stzh-cspace > stzh-chipgroup, stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
+  stzh-cspace > .stzh-cspace > .section > stzh-contact, stzh-cspace > .stzh-cspace > stzh-contact, stzh-cspace > .stzh-cspace > .section > stzh-accordion, stzh-cspace > .stzh-cspace > stzh-accordion, stzh-cspace > .stzh-cspace > .section > stzh-anchornav, stzh-cspace > .stzh-cspace > stzh-anchornav, stzh-cspace > .stzh-cspace > .section > stzh-audio, stzh-cspace > .stzh-cspace > stzh-audio, stzh-cspace > .stzh-cspace > .section > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > stzh-microsite-teaserlist, stzh-cspace > .stzh-cspace > .section > stzh-gallery, stzh-cspace > .stzh-cspace > stzh-gallery, stzh-cspace > .stzh-cspace > .section > stzh-panorama, stzh-cspace > .stzh-cspace > stzh-panorama, stzh-cspace > .stzh-cspace > .section > stzh-chart, stzh-cspace > .stzh-cspace > stzh-chart, stzh-cspace > .stzh-cspace > .section > stzh-sitemap, stzh-cspace > .stzh-cspace > stzh-sitemap, stzh-cspace > .stzh-cspace > .section > stzh-hr, stzh-cspace > .stzh-cspace > stzh-hr, stzh-cspace > .stzh-cspace > .section > stzh-archivelist, stzh-cspace > .stzh-cspace > stzh-archivelist, stzh-cspace > .stzh-cspace > .section > stzh-figure, stzh-cspace > .stzh-cspace > stzh-figure, stzh-cspace > .stzh-cspace > stzh-iframe, stzh-cspace > .stzh-cspace > .section > stzh-youtube, stzh-cspace > .stzh-cspace > stzh-youtube, stzh-cspace > .stzh-cspace > .section > stzh-eventinfo, stzh-cspace > .stzh-cspace > stzh-eventinfo, stzh-cspace > .stzh-cspace > .section > stzh-vbz-ticker, stzh-cspace > .stzh-cspace > stzh-vbz-ticker {
     margin-bottom: var(--stzh-space-xxxxlarge);
   }
 }

package/dist/collection/components/stzh-cta/stzh-cta.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
  */
@@ -159,8 +162,8 @@
 :host {
   --stzh-flyingfocus-color: var(--stzh-color-white);
   --background-color: var(--stzh-cta-background-color);
-  --heading-color: var(--stzh-color-primary70);
-  --lead-color: var(--stzh-color-primary70);
+  --heading-color: var(--stzh-color-white);
+  --lead-color: var(--stzh-color-white);
   --sticky-background-color: var(--background-color);
   --button-color: var(--stzh-color-white);
   --button-background-color: var(--stzh-color-primary70);

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

@@ -40,6 +40,13 @@ export class StzhCta {
         originalEvent: event
       });
     };
+    this.onClick = (event) => {
+      this.stzhClick.emit({
+        component: "stzh-cta",
+        originalEvent: event,
+        href: this.href
+      });
+    };
     this.handlePlaceholderButtonResize = () => {
       if (this.debounceResize) {
         window.cancelAnimationFrame(this.debounceResize);
@@ -94,7 +101,7 @@ export class StzhCta {
     return (h("div", { class: "stzh-cta__buttons" }, size === "small" &&
       h("div", { class: "stzh-cta__button is-placeholder", ref: (el) => (this.placeholderButton = el) }, h("span", { class: "stzh-cta__button-text" }, this.label), h("stzh-icon", { class: "stzh-cta__button-icon", name: "arrow-right" })), this.href
       ?
-        h("a", { class: "stzh-cta__button", href: this.href, ref: (el) => (this.button = el), onFocus: this.onFocus, onBlur: this.onBlur }, h("span", { class: "stzh-cta__button-text" }, this.label), h("stzh-icon", { class: "stzh-cta__button-icon", name: "arrow-right" }))
+        h("a", { class: "stzh-cta__button", href: this.href, ref: (el) => (this.button = el), onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick }, h("span", { class: "stzh-cta__button-text" }, this.label), h("stzh-icon", { class: "stzh-cta__button-icon", name: "arrow-right" }))
       :
         h("button", { class: "stzh-cta__button", ref: (el) => (this.button = el), onFocus: this.onFocus, onBlur: this.onBlur }, h("span", { class: "stzh-cta__button-text" }, this.label), h("stzh-icon", { class: "stzh-cta__button-icon", name: "arrow-right" }))));
   }
@@ -237,7 +244,7 @@ export class StzhCta {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Input focus event"
+          "text": "Focus event"
         },
         "complexType": {
           "original": "StzhCtaFocusEvent",
@@ -258,7 +265,7 @@ export class StzhCta {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Input blur event"
+          "text": "Blur event"
         },
         "complexType": {
           "original": "StzhCtaBlurEvent",
@@ -271,6 +278,27 @@ export class StzhCta {
             }
           }
         }
+      }, {
+        "method": "stzhClick",
+        "name": "stzhClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Click event"
+        },
+        "complexType": {
+          "original": "StzhCtaClickEvent",
+          "resolved": "{ component: \"stzh-cta\"; originalEvent: MouseEvent; href: string; }",
+          "references": {
+            "StzhCtaClickEvent": {
+              "location": "import",
+              "path": "../../index",
+              "id": "src/index.ts::StzhCtaClickEvent"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "element"; }

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-cta.js","sourceRoot":"","sources":["../../../../src/components/stzh-cta/stzh-cta.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCtaFocusEvent,\n  StzhCtaBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/**\n * @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n */\n@Component({\n  tag: \"stzh-cta\",\n  styleUrl: \"stzh-cta.scss\",\n  scoped: true\n})\nexport class StzhCta {\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Lead */\n  @Prop() lead: string = \"\";\n\n  /** Button Label */\n  @Prop() label: string = \"\";\n\n  /** Button link */\n  @Prop() href: string = \"\";\n\n  /**\n   *  Whether sticky button is disabled.\n   *  Will be set to true automatically on,\n   *  when more than one cta is on the page.\n   */\n  @Prop() stickyDisabled: boolean = true;\n\n  @State() loaded: boolean = false;\n\n  @Element() element: HTMLStzhCtaElement;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement;\n  private placeholderButton: HTMLElement;\n  private debounceResize: number;\n  private focusedByInput: boolean = false;\n  private placeholderButtonResizeObserver: ResizeObserver;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.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-cta\",\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-cta\",\n      originalEvent: event\n    });\n  }\n\n  private handlePlaceholderButtonResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n  }\n\n  private updateButtonWidthByResize = () => {\n    if (!this.placeholderButton) {\n      return;\n    }\n\n    const { width } = this.placeholderButton.getBoundingClientRect();\n    this.element.style.setProperty(\"--button-width\", `${width}px`);\n  }\n\n  componentDidLoad() {\n    this.stickyDisabled = counter > 1;\n\n    this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n    if (this.placeholderButton) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateButtonWidthByResize();\n\n        window.setTimeout(() => {\n          this.loaded = true;\n        }, 250);\n      });\n    });\n  }\n\n  componentDidRender() {\n    if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n  }\n\n  connectedCallback() {\n    counter = counter + 1;\n  }\n\n  disconnectedCallback() {\n    // current no way of sending events in disconnected callback, so we just decrease the counter now,\n    // but the user has to set stickyDisabled=false by himself\n    counter = counter - 1;\n\n    this.placeholderButtonResizeObserver?.disconnect();\n  }\n\n  private renderButtons(size: \"default\" | \"small\") {\n    return (\n      <div class=\"stzh-cta__buttons\">\n        {size === \"small\" &&\n          <div\n            class=\"stzh-cta__button is-placeholder\"\n            ref={(el) => (this.placeholderButton = el as HTMLElement)}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        }\n\n        {this.href\n          ?\n          <a\n            class=\"stzh-cta__button\"\n            href={this.href}\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </a>\n          :\n          <button\n            class=\"stzh-cta__button\"\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </button>\n        }\n      </div>\n    );\n  }\n\n  render() {\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n\n    const hasHeading = !!this.heading || headingSlotUsed;\n    const hasLead = !!this.lead || leadSlotUsed;\n    const hasHeadingOrLead = hasHeading || hasLead;\n\n    const size = !hasHeadingOrLead\n      ? \"small\"\n      : \"default\";\n\n    const classes = {\n      \"stzh-cta\": true,\n      \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n      \"stzh-cta--is-not-loaded\": !this.loaded,\n      \"stzh-cta--has-heading\": hasHeading,\n      \"stzh-cta--has-lead\": hasLead,\n      [`stzh-cta--size-${size}`]: !!size,\n    };\n\n    return (\n      <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <article class={classes} data-stzh-sticky-width-container>\n          <div class=\"stzh-cta__wrapper\">\n            <div class=\"stzh-cta__heading\">\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n            <div class=\"stzh-cta__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n            <stzh-sticky\n              name=\"cta\"\n              class=\"stzh-cta__sticky\"\n              position=\"fixed\"\n              bleeding\n              disableStickyBottom={this.stickyDisabled}\n              disableStickyTop={true}\n            >\n              {this.renderButtons(size)}\n            </stzh-sticky>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-cta.js","sourceRoot":"","sources":["../../../../src/components/stzh-cta/stzh-cta.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\n\nimport {\n  StzhCtaFocusEvent,\n  StzhCtaBlurEvent, StzhCtaClickEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\n\nvar counter = 0;\n\n/**\n * @slot heading - Slot for heading as alternative for attribute\n * @slot lead - Slot for lead as alternative for attribute\n * @slot label - Slot for button label as alternative for attribute\n */\n@Component({\n  tag: \"stzh-cta\",\n  styleUrl: \"stzh-cta.scss\",\n  scoped: true\n})\nexport class StzhCta {\n  /** Heading */\n  @Prop() heading: string = \"\";\n\n  /** Lead */\n  @Prop() lead: string = \"\";\n\n  /** Button Label */\n  @Prop() label: string = \"\";\n\n  /** Button link */\n  @Prop() href: string = \"\";\n\n  /**\n   *  Whether sticky button is disabled.\n   *  Will be set to true automatically on,\n   *  when more than one cta is on the page.\n   */\n  @Prop() stickyDisabled: boolean = true;\n\n  @State() loaded: boolean = false;\n\n  @Element() element: HTMLStzhCtaElement;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCtaFocusEvent>;\n\n  /** Blur event */\n  @Event() stzhBlur: EventEmitter<StzhCtaBlurEvent>;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhCtaClickEvent>;\n\n  private button: HTMLButtonElement | HTMLAnchorElement;\n  private placeholderButton: HTMLElement;\n  private debounceResize: number;\n  private focusedByInput: boolean = false;\n  private placeholderButtonResizeObserver: ResizeObserver;\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.button.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-cta\",\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-cta\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-cta\",\n      originalEvent: event,\n      href: this.href\n    });\n  }\n\n  private handlePlaceholderButtonResize = () => {\n    if (this.debounceResize) {\n      window.cancelAnimationFrame(this.debounceResize);\n    }\n\n    this.debounceResize = requestAnimationFrame(this.updateButtonWidthByResize);\n  }\n\n  private updateButtonWidthByResize = () => {\n    if (!this.placeholderButton) {\n      return;\n    }\n\n    const { width } = this.placeholderButton.getBoundingClientRect();\n    this.element.style.setProperty(\"--button-width\", `${width}px`);\n  }\n\n  componentDidLoad() {\n    this.stickyDisabled = counter > 1;\n\n    this.placeholderButtonResizeObserver = new ResizeObserver(this.handlePlaceholderButtonResize);\n    if (this.placeholderButton) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        this.updateButtonWidthByResize();\n\n        window.setTimeout(() => {\n          this.loaded = true;\n        }, 250);\n      });\n    });\n  }\n\n  componentDidRender() {\n    if (this.placeholderButton && this.placeholderButtonResizeObserver) {\n      this.placeholderButtonResizeObserver.observe(this.placeholderButton);\n    }\n  }\n\n  connectedCallback() {\n    counter = counter + 1;\n  }\n\n  disconnectedCallback() {\n    // current no way of sending events in disconnected callback, so we just decrease the counter now,\n    // but the user has to set stickyDisabled=false by himself\n    counter = counter - 1;\n\n    this.placeholderButtonResizeObserver?.disconnect();\n  }\n\n  private renderButtons(size: \"default\" | \"small\") {\n    return (\n      <div class=\"stzh-cta__buttons\">\n        {size === \"small\" &&\n          <div\n            class=\"stzh-cta__button is-placeholder\"\n            ref={(el) => (this.placeholderButton = el as HTMLElement)}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </div>\n        }\n\n        {this.href\n          ?\n          <a\n            class=\"stzh-cta__button\"\n            href={this.href}\n            ref={(el) => (this.button = el as HTMLAnchorElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </a>\n          :\n          <button\n            class=\"stzh-cta__button\"\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n          >\n            <span class=\"stzh-cta__button-text\">{this.label}</span>\n            <stzh-icon class=\"stzh-cta__button-icon\" name=\"arrow-right\"></stzh-icon>\n          </button>\n        }\n      </div>\n    );\n  }\n\n  render() {\n    const headingSlotUsed = hasSlot(this.element, 'heading');\n    const leadSlotUsed = hasSlot(this.element, 'lead');\n\n    const hasHeading = !!this.heading || headingSlotUsed;\n    const hasLead = !!this.lead || leadSlotUsed;\n    const hasHeadingOrLead = hasHeading || hasLead;\n\n    const size = !hasHeadingOrLead\n      ? \"small\"\n      : \"default\";\n\n    const classes = {\n      \"stzh-cta\": true,\n      \"stzh-cta--is-sticky-disabled\": this.stickyDisabled,\n      \"stzh-cta--is-not-loaded\": !this.loaded,\n      \"stzh-cta--has-heading\": hasHeading,\n      \"stzh-cta--has-lead\": hasLead,\n      [`stzh-cta--size-${size}`]: !!size,\n    };\n\n    return (\n      <Host size={size} tabindex=\"-1\" onFocus={this.onRootFocus}>\n        <article class={classes} data-stzh-sticky-width-container>\n          <div class=\"stzh-cta__wrapper\">\n            <div class=\"stzh-cta__heading\">\n              {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n            </div>\n            <div class=\"stzh-cta__lead\">\n              {this.lead ? this.lead : <slot name=\"lead\"></slot>}\n            </div>\n            <stzh-sticky\n              name=\"cta\"\n              class=\"stzh-cta__sticky\"\n              position=\"fixed\"\n              bleeding\n              disableStickyBottom={this.stickyDisabled}\n              disableStickyTop={true}\n            >\n              {this.renderButtons(size)}\n            </stzh-sticky>\n          </div>\n        </article>\n      </Host>\n    );\n  }\n}\n"]}