@oiz/stzh-components 4.12.1-beta1 → 4.12.2

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-toggle.entry.js","sources":["src/components/stzh-toggle/stzh-toggle.scss?tag=stzh-toggle&encapsulation=scoped","src/components/stzh-toggle/stzh-toggle.tsx"],"sourcesContent":[":host {\n  --check-size: 24px;\n  --track-width: 44px;\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-toggle {\n  @include input-description;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    position: relative;\n    background-color: $colorBlack10op;\n    width: var(--track-width);\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color $baseTransitionAnimationSpeed;\n    margin-top: 4px;\n\n    @media (forced-colors: active) {\n      outline: 2px solid ButtonBorder;\n      outline-offset: -2px;\n    }\n  }\n\n  &__check {\n    position: absolute;\n    border: 2px solid $baseColor;\n    width: var(--check-size);\n    height: var(--check-size);\n    border-radius: 50%;\n    background-color: $colorWhite;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    transition-property: border-color, background-color, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @media (forced-colors: active) {\n      transition-property: transform;\n      border-color: ButtonBorder;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label-text {\n    min-width: 0;\n  }\n\n  &__label > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__error,\n  &__label &__description-text {\n    display: none;\n  }\n\n  &__label &__description,\n  &__label &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &__input:checked ~ &__mark {\n    background-color: $colorOldPrimary48;\n\n    @media (forced-colors: active) {\n      background-color: SelectedItem;\n    }\n  }\n\n  &__input:checked ~ &__mark &__check {\n    border-color: $colorPrimary;\n    background-color: $colorPrimary;\n    transform: translateY(-50%)\n      translateX(calc(var(--track-width) - var(--check-size)));\n\n    @media (forced-colors: active) {\n      border-color: ButtonBorder;\n      background-color: SelectedItem;\n    }\n  }\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark &__check,\n  &__input:focus:hover ~ &__mark &__check,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    border-color: $colorPrimaryHover;\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n      background-color: Highlight;\n    }\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    @media (forced-colors: active) {\n      outline-color: Highlight;\n    }\n  }\n\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    background-color: $colorPrimaryHover;\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n      background-color: Highlight;\n    }\n  }\n\n  /* Label right */\n\n  &--has-label-right &__label {\n    margin-left: space(\"xsmall\");\n  }\n\n  /* Label left */\n\n  &--has-label-left &__field-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  &--has-label-left &__label {\n    margin-right: space(\"xsmall\");\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label {\n    @media (forced-colors: none) {\n      color: $colorError60;\n    }\n  }\n\n  &--is-invalid &__input ~ &__mark &__check {\n    @media (forced-colors: none) {\n      border-color: $colorError60;\n    }\n  }\n\n  &--is-invalid &__input:checked ~ &__mark {\n    @media (forced-colors: none) {\n      background-color: $colorBlack10op;\n    }\n  }\n\n  &--is-invalid &__input:checked ~ &__mark &__check {\n    @media (forced-colors: none) {\n      background-color: $colorError60;\n    }\n  }\n\n  /* Disabled */\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    @media (forced-colors: active) {\n      outline-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    border-color: $colorOldGrey13;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input:checked ~ &__mark {\n    background-color: $formDisabledBackgroundColor;\n\n    @media (forced-colors: active) {\n      background-color: SelectedItem;\n    }\n  }\n\n  &--is-disabled &__input:checked ~ &__mark &__check {\n    border-color: $colorOldGrey25;\n    background-color: $colorOldGrey25;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n      background-color: SelectedItem;\n    }\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen } from \"@stencil/core\";\n\nimport { StzhToggleChangeEvent, StzhToggleFocusEvent, StzhToggleBlurEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 0;\n\n/**\n * @slot - Slot for label content\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-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true,\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: 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  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\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  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\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  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\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(\"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  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.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-toggle\",\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-toggle\",\n      originalEvent: event,\n    });\n  };\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toggle\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const labelUsed = !!this.label || hasSlot(this.element) || descriptionLongUsed;\n\n    const classes = {\n      \"stzh-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid || errorUsed,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-toggle__field-wrapper\">\n            <input\n              class=\"stzh-toggle__input\"\n              ref={el => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-toggle__mark\">\n              <div class=\"stzh-toggle__check\"></div>\n            </div>\n            {labelUsed && (\n              <div class=\"stzh-toggle__label\">\n                <span class=\"stzh-toggle__label-text\">\n                  {this.label ? this.label : <slot></slot>}\n\n                  {!this.hideOptional && (\n                    <span class=\"stzh-toggle__marker\">\n                      <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldMarker\n                          : this.localization.$globals.optionalFieldMarker}\n                      </span>\n                      <span class=\"stzh-toggle__marker-text\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldText\n                          : this.localization.$globals.optionalFieldText}\n                      </span>\n                    </span>\n                  )}\n                </span>\n\n                {descriptionLongUsed && (\n                  <StzhInputDescription\n                    classPrefix=\"stzh-toggle\"\n                    id={`${this.inputId}-description-long`}\n                    descriptionLong={this.descriptionLong}\n                    descriptionLongTitle={this.descriptionLongTitle}\n                    descriptionLongUsed={descriptionLongUsed}\n                    moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                    showError={false}\n                    showDescriptionText={false}\n                  />\n                )}\n              </div>\n            )}\n          </label>\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-toggle\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"stzh-toggle.entry.js","sources":["src/components/stzh-toggle/stzh-toggle.scss?tag=stzh-toggle&encapsulation=scoped","src/components/stzh-toggle/stzh-toggle.tsx"],"sourcesContent":[":host {\n  --check-size: 24px;\n  --track-width: 44px;\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-toggle {\n  @include input-description;\n\n  &__field-wrapper {\n    @include fontSize(\"milli\");\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    position: relative;\n    background-color: $colorBlack10op;\n    width: var(--track-width);\n    height: 16px;\n    flex-shrink: 0;\n    border-radius: 12px;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: background-color $baseTransitionAnimationSpeed;\n    margin-top: 4px;\n\n    @media (forced-colors: active) {\n      outline: 2px solid ButtonBorder;\n      outline-offset: -2px;\n    }\n  }\n\n  &__check {\n    position: absolute;\n    border: 2px solid $baseColor;\n    width: var(--check-size);\n    height: var(--check-size);\n    border-radius: 50%;\n    background-color: $colorWhite;\n    top: 50%;\n    left: 0;\n    transform: translateY(-50%);\n    transition-property: border-color, background-color, transform;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @media (forced-colors: active) {\n      transition-property: transform;\n      border-color: ButtonBorder;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-flex;\n    align-items: center;\n    gap: space(\"xsmall\");\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__label-text {\n    min-width: 0;\n  }\n\n  &__label > &__description-wrapper {\n    flex: 0 0 auto;\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__error,\n  &__label &__description-text {\n    display: none;\n  }\n\n  &__label &__description,\n  &__label &__description-long {\n    display: inline-flex;\n    align-items: flex-start;\n    margin: 0;\n  }\n\n  &__label &__description-long-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    line-height: 1;\n  }\n\n  &__label stzh-popover &__description-long-icon {\n    --size: var(--stzh-icon-size-small);\n    display: block;\n    line-height: 0;\n    color: $colorPrimary70;\n  }\n\n  &__marker {\n    @include fontSize(\"micro\");\n    margin-left: calc(-0.25em + #{space(\"xsmall\")});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &__input:checked ~ &__mark {\n    background-color: $colorOldPrimary48;\n\n    @media (forced-colors: active) {\n      background-color: SelectedItem;\n    }\n  }\n\n  &__input:checked ~ &__mark &__check {\n    border-color: $colorPrimary;\n    background-color: $colorPrimary;\n    transform: translateY(-50%)\n      translateX(calc(var(--track-width) - var(--check-size)));\n\n    @media (forced-colors: active) {\n      border-color: ButtonBorder;\n      background-color: SelectedItem;\n    }\n  }\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark &__check,\n  &__input:focus:hover ~ &__mark &__check,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    border-color: $colorPrimaryHover;\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n      background-color: Highlight;\n    }\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    @media (forced-colors: active) {\n      outline-color: Highlight;\n    }\n  }\n\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    background-color: $colorPrimaryHover;\n\n    @media (forced-colors: active) {\n      border-color: Highlight;\n      background-color: Highlight;\n    }\n  }\n\n  /* Label right */\n\n  &--has-label-right &__label {\n    margin-left: space(\"xsmall\");\n  }\n\n  /* Label left */\n\n  &--has-label-left &__field-wrapper {\n    flex-direction: row-reverse;\n  }\n\n  &--has-label-left &__label {\n    margin-right: space(\"xsmall\");\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label {\n    @media (forced-colors: none) {\n      color: $colorError60;\n    }\n  }\n\n  &--is-invalid &__input ~ &__mark &__check {\n    @media (forced-colors: none) {\n      border-color: $colorError60;\n    }\n  }\n\n  &--is-invalid &__input:checked ~ &__mark {\n    @media (forced-colors: none) {\n      background-color: $colorBlack10op;\n    }\n  }\n\n  &--is-invalid &__input:checked ~ &__mark &__check {\n    @media (forced-colors: none) {\n      background-color: $colorError60;\n    }\n  }\n\n  /* Disabled */\n  &--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $formDisabledColor;\n\n    @media (forced-colors: active) {\n      color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    @media (forced-colors: active) {\n      outline-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    border-color: $colorOldGrey13;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n    }\n  }\n\n  &--is-disabled &__input:checked ~ &__mark {\n    background-color: $formDisabledBackgroundColor;\n\n    @media (forced-colors: active) {\n      background-color: SelectedItem;\n    }\n  }\n\n  &--is-disabled &__input:checked ~ &__mark &__check {\n    border-color: $colorOldGrey25;\n    background-color: $colorOldGrey25;\n\n    @media (forced-colors: active) {\n      border-color: GrayText;\n      background-color: SelectedItem;\n    }\n  }\n}\n","import { Host, Component, Prop, Event, EventEmitter, Element, h, Watch, Listen, State } from \"@stencil/core\";\n\nimport { StzhToggleChangeEvent, StzhToggleFocusEvent, StzhToggleBlurEvent } from \"../../index\";\n\nimport { hasDefaultSlotContent, hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet toggleCounter = 0;\n\n/**\n * @slot - Slot for label content\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-toggle\",\n  styleUrl: \"stzh-toggle.scss\",\n  scoped: true,\n})\nexport class StzhToggle {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the toggle is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: 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  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Position of label */\n  @Prop({ reflect: true }) labelPosition: \"right\" | \"left\" = \"right\";\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  /**\n   * **Do not use this property. It will be deprecated with the next major release.**\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  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhToggleChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhToggleFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhToggleBlurEvent>;\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(\"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  /**\n   * Whether the component has meaningful default-slot content.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasDefaultSlot: boolean = false;\n\n  /**\n   * Indicates whether default-slot content detection has run at least once.\n   * Used to avoid rendering state-dependent markup before the slot content\n   * has been evaluated.\n   * Becomes obsolete with the implementation of PDESI-1908.\n   */\n  @State() hasResolvedDefaultSlot: boolean = false;\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-toggle\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked,\n    });\n  };\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.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-toggle\",\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-toggle\",\n      originalEvent: event,\n    });\n  };\n\n  /**\n   * Re-evaluates default-slot content and updates the related render state.\n   * Becomes obsolete with implementation of PDESI-1908.\n   */\n  private updateDefaultSlotState = () => {\n    const hasDefaultSlot = hasDefaultSlotContent(this.element, [\"stzh-toggle\"]);\n    if (this.hasDefaultSlot !== hasDefaultSlot) {\n      this.hasDefaultSlot = hasDefaultSlot;\n    }\n    if (!this.hasResolvedDefaultSlot) {\n      this.hasResolvedDefaultSlot = true;\n    }\n  };\n\n  componentDidLoad() {\n    this.updateDefaultSlotState();\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-toggle-${toggleCounter++}`;\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"toggle\");\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, \"description\") || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, \"description-long\") || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, \"error\") || this._error?.length > 0;\n\n    const labelUsed = !!this.label || this.hasDefaultSlot;\n    const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;\n\n    const classes = {\n      \"stzh-toggle\": true,\n      \"stzh-toggle--has-error\": errorUsed,\n      \"stzh-toggle--is-required\": this.required,\n      \"stzh-toggle--is-invalid\": this.invalid || errorUsed,\n      \"stzh-toggle--is-disabled\": this.disabled,\n      \"stzh-toggle--has-description\": descriptionUsed,\n      \"stzh-toggle--has-description-long\": descriptionLongUsed,\n      [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {labelWrapperUsed && (\n            <label class=\"stzh-toggle__field-wrapper\">\n              <input\n                class=\"stzh-toggle__input\"\n                ref={el => (this.input = el as HTMLInputElement)}\n                type=\"checkbox\"\n                id={this.inputId}\n                name={this.name}\n                value={this.value}\n                disabled={this.disabled}\n                aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n                aria-required={this.required ? \"true\" : \"false\"}\n                aria-invalid={this.invalid ? \"true\" : \"false\"}\n                checked={this.checked}\n                defaultChecked={this.defaultChecked}\n                onInput={this.onInput}\n                onFocus={this.onFocus}\n                onBlur={this.onBlur}\n              />\n              <div class=\"stzh-toggle__mark\">\n                <div class=\"stzh-toggle__check\"></div>\n              </div>\n\n              <div class=\"stzh-toggle__label\">\n                <span class=\"stzh-toggle__label-text\">\n                  {this.label ? this.label : <slot onSlotchange={this.updateDefaultSlotState}></slot>}\n\n                  {labelUsed && !this.hideOptional && (\n                    <span class=\"stzh-toggle__marker\">\n                      <span class=\"stzh-toggle__marker-symbol\" aria-hidden=\"true\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldMarker\n                          : this.localization.$globals.optionalFieldMarker}\n                      </span>\n                      <span class=\"stzh-toggle__marker-text\">\n                        {this.required\n                          ? this.localization.$globals.requiredFieldText\n                          : this.localization.$globals.optionalFieldText}\n                      </span>\n                    </span>\n                  )}\n                </span>\n\n                {descriptionLongUsed && (\n                  <StzhInputDescription\n                    classPrefix=\"stzh-toggle\"\n                    id={`${this.inputId}-description-long`}\n                    descriptionLong={this.descriptionLong}\n                    descriptionLongTitle={this.descriptionLongTitle}\n                    descriptionLongUsed={descriptionLongUsed}\n                    moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n                    showError={false}\n                    showDescriptionText={false}\n                  />\n                )}\n              </div>\n            </label>\n          )}\n          {(errorUsed || descriptionUsed) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-toggle\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLongUsed={false}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BDy81lpO.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BMrO_esM.js';
 import { c as computePosition, a as autoUpdate, A as Arrow, o as offset, f as flip, s as shift, b as arrow } from './arrow-DzjuI2eY.js';
 import { c as createFocusTrap } from './focus-trap.esm-CBUfcdIy.js';
-import { i as isStzhElement } from './utils-BnOofzDv.js';
+import { i as isStzhElement } from './utils-CnvjJ2wY.js';
 import { w as waitForEvent } from './event-utils--SdF31O7.js';
 import { s as stopAnimations, a as animateTo } from './animation-utils-BOO84wnP.js';
 import './string-utils-BubviQku.js';

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, f as forceUpdate, a as Host, d as getElement } from './index-BDy81lpO.js';
-import { s as setPropsIfNull, h as hasSlot } from './utils-BnOofzDv.js';
+import { r as registerInstance, h, f as forceUpdate, a as Host, d as getElement } from './index-BMrO_esM.js';
+import { s as setPropsIfNull, h as hasSlot } from './utils-CnvjJ2wY.js';
 import './string-utils-BubviQku.js';
 
 const stzhTwocolumnsCss = () => `:host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host{}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--row-gap:var(--stzh-space-medium)}@media screen and (min-width: 600px){:host{--row-gap:var(--stzh-space-large)}}@media screen and (min-width: 900px){:host{--row-gap:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){:host{--row-gap:var(--stzh-space-xxlarge)}}:host{--grid-template-areas:var(

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-BDy81lpO.js';
-import { h as hasSlot, b as getStzhEnvironment, i as isStzhElement } from './utils-BnOofzDv.js';
-import { S as StzhInputDescription } from './stzh-input-description-D2d54L27.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as Host, d as getElement } from './index-BMrO_esM.js';
+import { a as hasDefaultSlotContent, h as hasSlot, c as getStzhEnvironment, i as isStzhElement } from './utils-CnvjJ2wY.js';
+import { S as StzhInputDescription } from './stzh-input-description-F6xJmR4b.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-E-ZsRS8r.js';
 import './string-utils-BubviQku.js';
 
@@ -13674,6 +13674,18 @@ const StzhUpload = class {
         this.totalFilesState = [];
         this.duplicateFileName = "";
         this.duplicateFileSize = "";
+        /**
+         * Whether the component has meaningful default-slot content.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasDefaultSlot = false;
+        /**
+         * Indicates whether default-slot content detection has run at least once.
+         * Used to avoid rendering state-dependent markup before the slot content
+         * has been evaluated.
+         * Becomes obsolete with the implementation of PDESI-1908.
+         */
+        this.hasResolvedDefaultSlot = false;
         this.PHOTOGRAPHING_BASE_URL = "/appl/mobiscan/rs";
         this.PHOTOGRAPHING_ENDPOINTS = {
             PING: "/ping",
@@ -13727,6 +13739,19 @@ const StzhUpload = class {
         this.filePreviewId = function (file) {
             return `${this.uploadId}-${file._id}`;
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.uploadEl, ["stzh-upload"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.uploadEl)) {
@@ -14052,6 +14077,9 @@ const StzhUpload = class {
             });
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     componentDidRender() {
         var _a;
         if (this.dropzone) {
@@ -14626,7 +14654,8 @@ const StzhUpload = class {
         const errorUsed = hasSlot(this.uploadEl, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
         const descriptionUsed = !!this.description;
         const descriptionLongUsed = !!this.descriptionLong || hasSlot(this.uploadEl, "description-long");
-        const labelWrapperUsed = !this.labelHidden && (!!this.label || hasSlot(this.uploadEl) || descriptionLongUsed);
+        const labelUsed = !!this.label || this.hasDefaultSlot;
+        const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;
         const classes = {
             "stzh-upload": true,
             "stzh-upload--is-invalid": this.invalid || errorUsed,
@@ -14664,14 +14693,14 @@ const StzhUpload = class {
         if (!filesizeText) {
             instructionText = instructionText.replace(/\s*\(\s*\)\s*/, "");
         }
-        return (h(Host, { key: '7d364b7acdaf4825bea973dec2e7cf417a227efa', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid || errorUsed ? "true" : "false", "aria-describedby": this.invalid || errorUsed ? this.error : undefined, role: "group", "aria-labelledby": labelWrapperUsed && (this.label || hasSlot(this.uploadEl)) ? `${this.uploadId}-label` : undefined }, h("stzh-toastbar", { key: 'c5067d0c91e550be32c63afb2059e02be1d31f87' }), h("div", { key: '91668faf8d374d0b70feda5d89149e242adf9ebf', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: '5fb7738dd2e340daef10f360b09f67b18a891606', ref: el => (this.hiddenInputContainerElement = el) }), labelWrapperUsed && (h("div", { key: '9f197c9258486c99d13dfcb270230dc3c0ef5bd0', class: "stzh-upload__label-wrapper" }, h("label", { key: 'ac3c5c16204458e59db25deb124a19999a312fcf', id: `${this.uploadId}-label`, class: {
+        return (h(Host, { key: '4e97194a9a6399ef1d06359894bef96f368a75ce', tabindex: this.disabled ? null : "-1", "is-invalid": this.invalid || errorUsed, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid || errorUsed ? "true" : "false", "aria-describedby": this.invalid || errorUsed ? this.error : undefined, role: "group", "aria-labelledby": labelWrapperUsed && (this.label || hasSlot(this.uploadEl)) ? `${this.uploadId}-label` : undefined }, h("stzh-toastbar", { key: 'b7a0894ef2c2394562f91bdf26ca64ab69fdde5b' }), h("div", { key: '722c522e0e4390b6e6a9b53739150bc226d4afa3', class: classes, ref: el => (this.dropzoneElement = el) }, h("div", { key: '8f85bf782e47ec78544176b552073ec6f7a94383', ref: el => (this.hiddenInputContainerElement = el) }), labelWrapperUsed && (h("div", { key: '8c82dd55643ec6ccff2df5072e84c8ae83f420d2', class: "stzh-upload__label-wrapper" }, h("label", { key: '3a8eba3872e7a921c004f7c47da93e360511a703', id: `${this.uploadId}-label`, class: {
                 "stzh-upload__label": true,
                 "no-label-truncate": this.noLabelTruncate,
-            } }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '5752b027c6bedf6a97ef12e01ace35eafc3bf0dd', class: "stzh-upload__marker" }, h("span", { key: 'dbd732ec6926259a2b224cd4bc932dfff285defb', class: "stzh-upload__marker-symbol", "aria-hidden": "true" }, this.required
+            } }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: '30a746088574a95c5a5b240372c4c7395755e9f4', class: "stzh-upload__marker" }, h("span", { key: 'c7d58bbfbc2f60bd3f7a721f44d5fe86c27a6330', class: "stzh-upload__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '771dafc94e40ed79a0b6aebb987f46b957594017', class: "stzh-upload__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: '3e3befe7929e17407b86b31396e64246d229967d', class: "stzh-upload__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), (this.descriptionLong || hasSlot(this.uploadEl, "description-long")) && (h(StzhInputDescription, { key: 'c3c2c92d561e379ee932e31f8d694dabff3b107c', classPrefix: "stzh-upload", id: `${this.uploadId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: '2349de6ccdf5063c56bdf10b6956be6c71005ed6', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '1585940afa26cc6e6b8eb4095d9f6c88b21f4fc1', class: "stzh-upload__heading-wrapper" }, h("div", { key: '3154f287ae4ef01216592887125a0859007db7b6', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: '40bd2a6696fb43a39ff8d903c872d11d13234a8f', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: 'fb4dbce22bb5968943006be8763f2142f13d32f6', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "tiny", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: '8968bb28dac68c912a7815dd2a0e32288c43d102', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: '7cd3d33a4eca99ab3ea31b88f88ea335051e13f2', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "tiny", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'f329b2c71913d8d3e70abb42519ad23b9b9b9776', slot: "icon", name: "camera" })))))), h("div", { key: '6bcc50fda1ad447fa578219fe21cda8cd38bbf44', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '317048ef496e7af9fa27b1004af45ec5162b3836' }, instructionText))), (this.description || errorUsed) && (h(StzhInputDescription, { key: 'd1eddcdcd1463cd39823c26d79113551d2ee0105', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })), h("div", { key: 'e49426d619b235dd7cfe6bf0ba0fd9130116c2e3', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: 'e0a8ac5bb3d416888ec333d4a64987822f3e106a', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: '40820996bb10ca8a61fb074695cc62d320ca413a', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'e1bbcde1a08fa5347225e7fb4fe8514f19a71bb9', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: '9040abf9399b996b16257d72a6e21650aa5b1a74', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '9f2548f62b220d1d76c25fe71a46fa3e4a3305d4', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, h("stzh-text", { key: 'b4cf16446aafee0660db6af6385107f0e6cb0afd' }, h("p", { key: 'dd2ab5f5bd90cdbea8223afce8c9406c0e4e91fd' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: 'a29a6db5974f9ebac3e5bdf0976b576d0a6163c7' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: 'bf23c415b0a0ec5d2f96f679f2a99050bdea10e2', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '3eee217b42d031521090bdd4e63da8c1ce7840c9', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, h("stzh-text", { key: 'cdb158f41f00082241d7f8e47258aa51639ee439' }, h("p", { key: '62b061b8fca307aca313cfac414fe557b4a7befe' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '20f0e6ea658e9447dea35ca43fc66c5c9fd92f4d', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: 'fb1f84cfa27423e86ba68efebc98bc20b5d6511d', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "tiny", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: '2fbd7a1a6cf559dfca51a05c4e24b87aeb87bc99' }, h("div", { key: '1ee42624e419bdfc7730d9fa84e5d6bfa6fb804a', class: "stzh-upload-photographing__info" }, h("div", { key: '1c58bf86b6b8b8c12168477d8555344623db49fd', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: 'edde5725c7977c8952a1ad9c7f7a04f5f2b517e6', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'f497cfe077cfc7aefb2323727a1dbadfeb671f1a' }, this.localization.photographingText1)), h("div", { key: '1e896f5e86c39abc127027a1bf650e944f2a45f5', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: 'c7bdc24a9b17b5462a3688d9ba1bb93a139c89d4', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: '858f7f6070ea7a0bbac86f0d8735a7621774d05e', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: '4c5a4766b4d50eaf1e52dcc018b14e82805eb6b5', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '24dbac13f472465f56fdbabaf1a17c533814c58b' }, this.localization.photographingText2)), h("div", { key: '2495016b06cee36fb9c7e063959562314f7b4653', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '00e5defbc0b9ae2846599e9e314b05b38e5c5f58', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
+            : this.localization.$globals.optionalFieldText)))), (this.descriptionLong || hasSlot(this.uploadEl, "description-long")) && (h(StzhInputDescription, { key: 'a029ce5d5c93acaaa3dc37df2a69215326716f9a', classPrefix: "stzh-upload", id: `${this.uploadId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongUsed: true, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false })))), h("div", { key: 'b9ad9df8003c8b5d6dd3988aaf47cf205ec6fe01', class: "stzh-upload__clickarea", ref: el => (this.clickareaElement = el) }, h("div", { key: '00bf292098fb04926c979962e4adcb5e1520e6e2', class: "stzh-upload__heading-wrapper" }, h("div", { key: '4cf58339febbeacbbc1efdb83cef5d8f96edbd59', class: "stzh-upload__heading-inner-wrapper" }, h("div", { key: 'c79d9f75384d02b4efefacdb70e95218768e9902', class: "stzh-upload__buttons-wrapper" }, h("stzh-button", { key: '6b650e87c23f9ce0913557544d18aebbb54145a1', id: `${this.uploadId}-button`, class: "stzh-upload__button", variant: "secondary", size: "tiny", ref: el => (this.chooseFileButtonEl = el), label: this.button ? this.button : this.localization.button, a11yDescribedby: this.a11yDescribedby, a11yControls: `${this.uploadId}-previews`, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: 'b580fdc269f69f145393a608f71da6bcde62d749', slot: "icon", name: "upload" })), this.isPhotographingAvailable && (h("stzh-button", { key: 'b286ae9d7013fb40d6c230e62bd7b0c3a8dedb31', onClick: this.onButtonScanClick, class: "stzh-upload__button-scan", variant: "secondary", size: "tiny", label: this.buttonScan ? this.buttonScan : this.localization.buttonScan, a11yDescribedby: this.a11yDescribedby, "aria-invalid": this.invalid || errorUsed ? "true" : "false", disabled: this.disabled }, h("stzh-icon", { key: '904f454fda8d8c71f4b1378b03d5c2745fc65080', slot: "icon", name: "camera" })))))), h("div", { key: 'e290028be6637ba1d3c94e6775307528fcdb41e5', class: "stzh-upload__instructions", id: `${this.uploadId}-instruction` }, h("p", { key: '88976c933761ec0356d17bf3ff21789a3224eac8' }, instructionText))), (this.description || errorUsed) && (h(StzhInputDescription, { key: 'c5456e887c1d78eb677072f5abd6fc6612ca2da4', classPrefix: "stzh-upload", id: `${this.uploadId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })), h("div", { key: '773afc83c46ac5e8df26deb51140a76c15950e4a', id: `${this.uploadId}-previews`, class: "stzh-upload__previews-wrapper" }, h("div", { key: 'f4e4bcec35a6b75c69553bdb0791f04bdac90894', class: "stzh-upload__previews-inner-wrapper" }, h("div", { key: 'f9dd5229e70b3ac6daa7edf2f20cfb916aacc04c', class: "stzh-upload__errors", ref: el => (this.errorsElement = el) }), h("div", { key: 'dcbb78d3151f0f397566da89240fcced6ff1fa39', class: "stzh-upload__previews dropzone-previews", ref: el => (this.previewsElement = el) })))), this.duplicateDetected && (h("div", { key: 'ffede6f89f21b1b8a654c6f0bc91ce3b271b1d84', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: 'a8d928e1500684ba782daa37f7d59b8379ed9da9', type: "error", label: this.localization.duplicateFileUploadHeading, onStzhClose: () => (this.duplicateDetected = false) }, h("stzh-text", { key: '202aefcdf63a90b9282a6a4b5e264c5acb40783f' }, h("p", { key: '0fdffae5851a973e5b13de36371b85edeba66546' }, "\u00AB", this.duplicateFileName, "\u00BB (", this.duplicateFileSize, ")"), h("p", { key: '8886f9e9ad5d38d5c2fca3a9b3cf079e369cf99b' }, this.localization.duplicateFileUploadParagraph))))), this.totalTooBig && (h("div", { key: '1c653c9e672719b9638849758c173195670cc86b', class: "stzh-upload__previews-message-wrapper" }, h("stzh-message", { key: '39e5fa6b86b5041d01c497e017894367a3d557f2', type: "warning", label: this.totalTooBigMessageHeading, onStzhClose: () => (this.totalTooBig = false) }, h("stzh-text", { key: '8067457a81df718a5efe523e9cb754002c6b8767' }, h("p", { key: '7ab22028d297a3514b813b16a62d9eb38b4f949d' }, this.totalTooBigMessageBody, " ", this.totalTooBigMessageBody2))))), h("stzh-dialog", { key: '760a5beddefd3c0d71d960dee9603e774d594090', ref: el => (this.photographingOverlayElement = el), onStzhClose: this.closePhotographingWebsocketConnection, class: this.isPhotographingAvailable && "stzh-dialog--fit-content", heading: this.localization.photographingTitle1 }, h("stzh-button", { key: 'bb8fc6ad663934f86a4feaeded09dcff7859805e', class: "stzh-upload-photographing__back-button", icon: "arrow-left", size: "tiny", variant: "tertiary-plain", "no-padding-left": "true", "no-padding-right": "true", onClick: this.closePhotographingOverlay }, this.localization.back), this.isPhotographingAvailable && (h(Fragment, { key: 'e6609b940c8f01a76c74d3af5d889456b0eef3de' }, h("div", { key: 'c238af2c00afc6b064248e76bf43e90066fd8bf5', class: "stzh-upload-photographing__info" }, h("div", { key: 'ba35aae13b783cee7c1dabe5fd9b2dc3d1ac078d', class: "stzh-upload-photographing__text-qrcode" }, h("div", { key: 'a8780ae39cf1b032615ce03ed4b37076a400ad3e', class: "stzh-upload-photographing-qrlink-container" }, h("stzh-text", { key: 'b51bc689e9b09364e9b528f5da2513338b9ed5c5' }, this.localization.photographingText1)), h("div", { key: '6658198f747d4c215dc19b8f19784dc378b00423', class: "stzh-upload-photographing-qrcode-container" }, h("canvas", { key: '43399faf4d1d6873e99f066d7a5ce186ef83ee15', class: "stzh-upload-photographing-qrcode", ref: el => (this.photographingQrcodeElement = el) })))), h("div", { key: '69f38f1d5fa2263d811b37490cf430a1cc1d8e26', class: "stzh-upload-photographing__info" }, h("stzh-heading", { key: 'b50003646428f26b601c1eb19976715d7c4f2db7', level: "3" }, this.localization.photographingTitle2), h("stzh-text", { key: '345ff48849b4f852a7e0914d23c3161ebf91b3e8' }, this.localization.photographingText2)), h("div", { key: '8bfd164083fd381cbc33566db161909b4d6834ec', class: "stzh-upload-photographing__continue" }, !!this.photographingUrlDetails && (h("stzh-link", { key: '1e6726b61d5b0d03234029ad6e6c39c1423cfd92', class: "stzh-upload-photographing-link", href: this.photographingUrlDetails.url + "&label=" + this.cleanLabel(this.label), target: "_blank" }, this.localization.photographingContinue))))))));
     }
     get uploadEl() { return getElement(this); }
     static get watchers() { return {