@oiz/stzh-components 4.12.1-beta1 → 4.12.2

package/dist/collection/components/stzh-rating/stzh-rating.stories.js

@@ -227,3 +227,14 @@ export const LongDescription = {
     });
   }
 };
+
+const TEMPLATE_LABEL_SLOT = `
+<${COMPONENT_NAME} data-testid="${RATING_TEST_ID}">Label in default slot</${COMPONENT_NAME}>
+`;
+
+export const LabelSlotted = {
+  render: (args) => story(args, TEMPLATE_LABEL_SLOT),
+  args: {
+    value: 3
+  }
+};

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

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { hasSlot } from "../../utils/utils";
+import { hasDefaultSlotContent, hasSlot } from "../../utils/utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
 let toggleCounter = 0;
 /**
@@ -31,6 +31,18 @@ export class StzhToggle {
         this.labelPosition = "right";
         /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */
         this.a11yDescribedby = "";
+        /**
+         * 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.focusedByInput = false;
         this.handleReset = async () => {
             this.checked = this.defaultChecked;
@@ -75,6 +87,19 @@ export class StzhToggle {
                 originalEvent: event,
             });
         };
+        /**
+         * Re-evaluates default-slot content and updates the related render state.
+         * Becomes obsolete with implementation of PDESI-1908.
+         */
+        this.updateDefaultSlotState = () => {
+            const hasDefaultSlot = hasDefaultSlotContent(this.element, ["stzh-toggle"]);
+            if (this.hasDefaultSlot !== hasDefaultSlot) {
+                this.hasDefaultSlot = hasDefaultSlot;
+            }
+            if (!this.hasResolvedDefaultSlot) {
+                this.hasResolvedDefaultSlot = true;
+            }
+        };
     }
     resetListener(event) {
         if (event.target.contains(this.element)) {
@@ -104,6 +129,9 @@ export class StzhToggle {
             this._error = [];
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     async componentWillLoad() {
         this.inputId = `stzh-toggle-${toggleCounter++}`;
         this.defaultChecked = typeof this.defaultChecked === "boolean" ? this.defaultChecked : this.checked;
@@ -117,7 +145,8 @@ export class StzhToggle {
         const descriptionUsed = hasSlot(this.element, "description") || !!this.description;
         const descriptionLongUsed = hasSlot(this.element, "description-long") || !!this.descriptionLong;
         const errorUsed = hasSlot(this.element, "error") || ((_a = this._error) === null || _a === void 0 ? void 0 : _a.length) > 0;
-        const labelUsed = !!this.label || hasSlot(this.element) || descriptionLongUsed;
+        const labelUsed = !!this.label || this.hasDefaultSlot;
+        const labelWrapperUsed = !this.hasResolvedDefaultSlot || labelUsed || descriptionLongUsed;
         const classes = {
             "stzh-toggle": true,
             "stzh-toggle--has-error": errorUsed,
@@ -128,11 +157,11 @@ export class StzhToggle {
             "stzh-toggle--has-description-long": descriptionLongUsed,
             [`stzh-toggle--has-label-${this.labelPosition}`]: !!this.labelPosition,
         };
-        return (h(Host, { key: '71703076957012244d99e5bfe9eaae91dfd3136b', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '5c3cdb7ff6195fb6dbf844110f7f2fc15dd0e5b9', class: classes }, h("label", { key: 'e7207ccb9b8ef7f1ee798f8008a777c14f83a294', class: "stzh-toggle__field-wrapper" }, h("input", { key: '66fa0d14e799bf6fdc0ec19f691dfac483884132', class: "stzh-toggle__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: '6260219a827eb1706ad4359a065d17ce28d83881', class: "stzh-toggle__mark" }, h("div", { key: 'c31d157867858c2ae6c449a53143886992250fd6', class: "stzh-toggle__check" })), labelUsed && (h("div", { key: '4176627fde0fdb89e848d9300a1bd22fccf678b2', class: "stzh-toggle__label" }, h("span", { key: 'bb2056d98e40d6c9780d622c639455f7a980f0e1', class: "stzh-toggle__label-text" }, this.label ? this.label : h("slot", null), !this.hideOptional && (h("span", { key: '1bae137c2d20f921064d2bc8f27307e53babd3cc', class: "stzh-toggle__marker" }, h("span", { key: '19a4adea55ed3943bda5115c457e88168b05925c', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
+        return (h(Host, { key: '42d41395c993c9d79904791d4fee71ed94db3cc0', "is-invalid": this.invalid || errorUsed, tabindex: this.disabled ? null : "-1", onFocus: this.onRootFocus }, h("div", { key: '9212e5f6b18fc5a571bce3d9ae447ad7c767d958', class: classes }, labelWrapperUsed && (h("label", { key: 'b6546b855a609b0f263a461752e21b3a6c182cf3', class: "stzh-toggle__field-wrapper" }, h("input", { key: '8321c0d4c3980d4522f324fa349eee2a8e65b89e', class: "stzh-toggle__input", ref: el => (this.input = el), type: "checkbox", id: this.inputId, name: this.name, value: this.value, disabled: this.disabled, "aria-describedby": `${this.inputId}-description ${this.a11yDescribedby}`, "aria-required": this.required ? "true" : "false", "aria-invalid": this.invalid ? "true" : "false", checked: this.checked, defaultChecked: this.defaultChecked, onInput: this.onInput, onFocus: this.onFocus, onBlur: this.onBlur }), h("div", { key: 'c2af29db4c01d5d4b4e7a7b4d7f8d39b8414eb57', class: "stzh-toggle__mark" }, h("div", { key: '367c0fbce7cb1bb640710ad5a1e9548a671bf36e', class: "stzh-toggle__check" })), h("div", { key: '2048b73435e4b567aa8aad53e1ce86799224914d', class: "stzh-toggle__label" }, h("span", { key: 'c4fd21e5f4afbc6758be8e9ea05aeaf30222cf69', class: "stzh-toggle__label-text" }, this.label ? this.label : h("slot", { onSlotchange: this.updateDefaultSlotState }), labelUsed && !this.hideOptional && (h("span", { key: '09b5f77414e1e376f1122d23c2cc6160a8cfe88f', class: "stzh-toggle__marker" }, h("span", { key: 'd0f5891ab3dee00ecfdb4b3e0fdf4432b30e2a66', class: "stzh-toggle__marker-symbol", "aria-hidden": "true" }, this.required
             ? this.localization.$globals.requiredFieldMarker
-            : this.localization.$globals.optionalFieldMarker), h("span", { key: '3c54f5386396ffc9e1e52b8730aae92dc3f228e9', class: "stzh-toggle__marker-text" }, this.required
+            : this.localization.$globals.optionalFieldMarker), h("span", { key: 'b8093076abc796384c7f5ccdc25ff367643ca148', class: "stzh-toggle__marker-text" }, this.required
             ? this.localization.$globals.requiredFieldText
-            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '7cfd564610bd66d61b66ab70bbcaed301252de35', classPrefix: "stzh-toggle", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false }))))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: '02c34d582606de57abafad95ff723d014f4a8bd2', classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
+            : this.localization.$globals.optionalFieldText)))), descriptionLongUsed && (h(StzhInputDescription, { key: '707add1382f69fa563ad9e13a48600addbfc542a', classPrefix: "stzh-toggle", id: `${this.inputId}-description-long`, descriptionLong: this.descriptionLong, descriptionLongTitle: this.descriptionLongTitle, descriptionLongUsed: descriptionLongUsed, moreInfoButtonLabel: this.localization.$globals.moreInfoButtonLabel, showError: false, showDescriptionText: false }))))), (errorUsed || descriptionUsed) && (h(StzhInputDescription, { key: 'a9657b1059ef9efa888d49f51eb54715f62c4781', classPrefix: "stzh-toggle", id: `${this.inputId}-description`, error: this._error, description: this.description, descriptionLongUsed: false })))));
     }
     static get is() { return "stzh-toggle"; }
     static get encapsulation() { return "scoped"; }
@@ -468,6 +497,12 @@ export class StzhToggle {
             }
         };
     }
+    static get states() {
+        return {
+            "hasDefaultSlot": {},
+            "hasResolvedDefaultSlot": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "stzhChange",

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-toggle.js","sourceRoot":"","sources":["../../../../src/components/stzh-toggle/stzh-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"version":3,"file":"stzh-toggle.js","sourceRoot":"","sources":["../../../../src/components/stzh-toggle/stzh-toggle.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/stzh-toggle/stzh-toggle.stories.js

@@ -6,6 +6,9 @@ import { getFigmaLink } from '../../../figma';
 const COMPONENT_NAME = 'stzh-toggle';
 const story = createComponentStory(COMPONENT_NAME);
 
+const TOGGLE_TEST_ID = 'TOGGLE_TEST_ID';
+let stzhToggleEl;
+
 const TEMPLATE = `
 <stzh-toggle></stzh-toggle>
 `;
@@ -38,3 +41,15 @@ export const Default = {
     value: 'test'
   }
 };
+
+const TEMPLATE_LABEL_SLOT = `
+<${COMPONENT_NAME} data-testid="${TOGGLE_TEST_ID}">Label in default slot</${COMPONENT_NAME}>
+`;
+
+export const LabelSlotted = {
+  render: (args) => story(args, TEMPLATE_LABEL_SLOT),
+  args: {
+    name: 'option',
+    value: 'test'
+  }
+};

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

@@ -1,5 +1,5 @@
 import { Fragment, h, Host, } from "@stencil/core";
-import { getStzhEnvironment, hasSlot, isStzhElement } from "../../utils/utils";
+import { getStzhEnvironment, hasDefaultSlotContent, hasSlot, isStzhElement, } from "../../utils/utils";
 import { StzhInputDescription } from "../stzh-input/stzh-input-description";
 import "../../libraries/dropzone/dropzone";
 import QRCode from "qrcode";
@@ -221,6 +221,18 @@ export class StzhUpload {
         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",
@@ -274,6 +286,19 @@ export class StzhUpload {
         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)) {
@@ -601,6 +626,9 @@ export class StzhUpload {
             });
         }
     }
+    componentDidLoad() {
+        this.updateDefaultSlotState();
+    }
     componentDidRender() {
         var _a;
         if (this.dropzone) {
@@ -1175,7 +1203,8 @@ export class StzhUpload {
         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,
@@ -1213,14 +1242,14 @@ export class StzhUpload {
         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))))))));
     }
     static get is() { return "stzh-upload"; }
     static get originalStyleUrls() {
@@ -2215,6 +2244,8 @@ export class StzhUpload {
             "totalFilesState": {},
             "duplicateFileName": {},
             "duplicateFileSize": {},
+            "hasDefaultSlot": {},
+            "hasResolvedDefaultSlot": {},
             "isPhotographingAvailable": {},
             "photographingUrlDetails": {},
             "photographingHost": {},