@oiz/stzh-components 3.1.0 → 3.2.0-beta1

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

@@ -675,6 +675,59 @@ stzh-cspace > .stzh-cspace > .section > stzh-section[variant=default], stzh-cspa
     margin-bottom: var(--stzh-space-xxlarge);
   }
 }
+stzh-cspace > .stzh-cspace > .section > stzh-section[variant=greybox], stzh-cspace > .stzh-cspace > stzh-section[variant=default] {
+  margin-top: var(--stzh-space-medium);
+  margin-bottom: var(--stzh-space-medium);
+}
+@media screen and (min-width: 600px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=greybox], stzh-cspace > .stzh-cspace > stzh-section[variant=default] {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=greybox], stzh-cspace > .stzh-cspace > stzh-section[variant=default] {
+    margin-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=greybox], stzh-cspace > .stzh-cspace > stzh-section[variant=default] {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
+@media screen and (min-width: 600px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=greybox], stzh-cspace > .stzh-cspace > stzh-section[variant=default] {
+    margin-bottom: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=greybox], stzh-cspace > .stzh-cspace > stzh-section[variant=default] {
+    margin-bottom: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=greybox], stzh-cspace > .stzh-cspace > stzh-section[variant=default] {
+    margin-bottom: var(--stzh-space-xxlarge);
+  }
+}
+stzh-cspace > .stzh-cspace > .section > stzh-section[variant=poimax], stzh-cspace > .stzh-cspace > stzh-section[variant=poimax] {
+  margin-top: var(--stzh-space-medium);
+  margin-bottom: var(--stzh-space-xsmall);
+}
+@media screen and (min-width: 600px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=poimax], stzh-cspace > .stzh-cspace > stzh-section[variant=poimax] {
+    margin-top: var(--stzh-space-large);
+  }
+}
+@media screen and (min-width: 900px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=poimax], stzh-cspace > .stzh-cspace > stzh-section[variant=poimax] {
+    margin-top: var(--stzh-space-xlarge);
+  }
+}
+@media screen and (min-width: 1260px) {
+  stzh-cspace > .stzh-cspace > .section > stzh-section[variant=poimax], stzh-cspace > .stzh-cspace > stzh-section[variant=poimax] {
+    margin-top: var(--stzh-space-xxlarge);
+  }
+}
 stzh-cspace > .stzh-cspace > .section > stzh-pagetitle[background=default], stzh-cspace > .stzh-cspace > stzh-pagetitle[background=default] {
   margin-bottom: var(--stzh-space-large);
 }

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

@@ -265,7 +265,7 @@ export class StzhDatepicker {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Value of hidden date picker input (current selected date in ISO format)."
+          "text": "Value of the hidden date picker input. If a date can be parsed (via picker always), the value is in ISO format. Otherwise the value equals the manual input."
         },
         "attribute": "value",
         "reflect": false,

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

@@ -1 +1 @@
-{"version":3,"file":"stzh-datepicker.js","sourceRoot":"","sources":["../../../../src/components/stzh-datepicker/stzh-datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\"\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\n  @State() calendarValue: string = \"\";\n  @State() inputValue: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\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  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | 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  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /**\n   * Date adapter visible date shown to the user, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**\n   * Date adapter for internal date passed to backend, for custom parsing/formatting.\n   * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n   * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.)\n   */\n  @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n  private _internalDateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\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(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      })\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._internalDateAdapter) {\n      return;\n    }\n\n    const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n    this.calendarValue = printISODate(date);\n    this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  @Watch(\"internalDateAdapter\")\n  internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n    if (newValue === \"iso\" || !newValue) {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsIso,\n        this.localization.$globals\n      );\n    } else if (newValue === \"legacy\") {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsLegacy,\n        this.localization.$globals\n      );\n    } else {\n      this._internalDateAdapter = newValue;\n    }\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = this._internalDateAdapter.format(date, \"dateInput\");\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  }\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  }\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n      if (this.value !== formattedDate) {\n        this.value = formattedDate;\n      } else {\n        this.valueWatcher(formattedDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      })\n    }\n  }\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    if (event.detail.component !== \"stzh-calendar\") {\n      return;\n    }\n\n    this.value = event.detail.valueAsDate\n      && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  }\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n    this.internalDateAdapterWatcher(this.internalDateAdapter);\n    this.valueWatcher(this.value);\n    this.defaultValue = this.defaultValue || this.value;\n  }\n\n  render() {\n    const actionUsed = hasSlot(this.element, 'action');\n\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline,\n      \"stzh-datepicker--has-action\": actionUsed\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            defaultValue={this.defaultValue}\n          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                value={this.calendarValue}\n                class=\"stzh-datepicker__calendar is-inline\"\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          }\n\n          {!this.inline &&\n            <stzh-input\n              value={this.inputValue}\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              hideOptional={this.hideOptional}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                label={this.label}\n              >\n                <stzh-button\n                  icon-only\n                  icon=\"calendar\"\n                  size={this.size}\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                ></stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    value={this.calendarValue}\n                    class=\"stzh-datepicker__calendar is-popover\"\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  >\n                  </stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"stzh-datepicker.js","sourceRoot":"","sources":["../../../../src/components/stzh-datepicker/stzh-datepicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\nimport { hasSlot } from \"../../utils/utils\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\"\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the hidden date picker input. If a date can be parsed (via picker always), the value is in ISO format. Otherwise the value equals the manual input.  */\n  @Prop({ mutable: true }) value: string = \"\";\n  @State() calendarValue: string = \"\";\n  @State() inputValue: string = \"\";\n\n  /** Default value (used by reset) */\n  @Prop({ mutable: true }) defaultValue: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\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  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | 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  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop({ reflect: true }) inline: boolean = false;\n\n  /**\n   * Date adapter visible date shown to the user, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**\n   * Date adapter for internal date passed to backend, for custom parsing/formatting.\n   * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n   * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.)\n   */\n  @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n  private _internalDateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\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(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      })\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    if (!this._internalDateAdapter) {\n      return;\n    }\n\n    const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n    this.calendarValue = printISODate(date);\n    this.inputValue = this.dateAdapter.format(date, \"dateInput\");\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  @Watch(\"internalDateAdapter\")\n  internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n    if (newValue === \"iso\" || !newValue) {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsIso,\n        this.localization.$globals\n      );\n    } else if (newValue === \"legacy\") {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsLegacy,\n        this.localization.$globals\n      );\n    } else {\n      this._internalDateAdapter = newValue;\n    }\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = this._internalDateAdapter.format(date, \"dateInput\");\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  // private calendar: HTMLStzhCalendarElement;\n\n  private handleReset = async () => {\n    this.value = this.defaultValue;\n  }\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  }\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n      if (this.value !== formattedDate) {\n        this.value = formattedDate;\n      } else {\n        this.valueWatcher(formattedDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      })\n    }\n  }\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    if (event.detail.component !== \"stzh-calendar\") {\n      return;\n    }\n\n    this.value = event.detail.valueAsDate\n      && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  }\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n    this.internalDateAdapterWatcher(this.internalDateAdapter);\n    this.valueWatcher(this.value);\n    this.defaultValue = this.defaultValue || this.value;\n  }\n\n  render() {\n    const actionUsed = hasSlot(this.element, 'action');\n\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline,\n      \"stzh-datepicker--has-action\": actionUsed\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n            defaultValue={this.defaultValue}\n          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                value={this.calendarValue}\n                class=\"stzh-datepicker__calendar is-inline\"\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          }\n\n          {!this.inline &&\n            <stzh-input\n              value={this.inputValue}\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              hideOptional={this.hideOptional}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                label={this.label}\n              >\n                <stzh-button\n                  icon-only\n                  icon=\"calendar\"\n                  size={this.size}\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                ></stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    // ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    value={this.calendarValue}\n                    class=\"stzh-datepicker__calendar is-popover\"\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  >\n                  </stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -162,8 +162,16 @@
   border: 0 !important;
 }
 
+/**
+* @prop --background-color: Background of footer (lower part)
+* @prop --background-color-menu: Background of footer menu (upper part)
+*
+* @prop --stzh-footer-background-color: **Global**: Background of footer (lower part)
+* @prop --stzh-footer-background-color-menu: **Global**: Background of footer menu (upper part)
+*/
 stzh-footer {
-  --background-color: var(--stzh-footer-background-color);
+  --background-color: var(--stzh-footer-background-color, var(--stzh-footer-background-color));
+  --background-color-menu: var(--stzh-footer-background-color-menu, var(--stzh-color-primary80));
 }
 @media print {
   stzh-footer {
@@ -271,7 +279,7 @@ stzh-footer {
   }
 }
 .stzh-footer__menu {
-  background-color: var(--stzh-color-primary80);
+  background-color: var(--background-color-menu);
 }
 .stzh-footer__menu-inner {
   margin-left: 1.25rem;

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

@@ -185,19 +185,35 @@
     display: none;
   }
 }
-:host[logo-type=vbz], :host[logo-type=aoz], :host[logo-type=pkzh], :host[logo-type=uvz] {
+:host[logo-type=aoz], :host[logo-type=pkzh], :host[logo-type=uvz] {
   --logo-height: 1.9375rem;
 }
 @media screen and (min-width: 900px) {
-  :host[logo-type=vbz], :host[logo-type=aoz], :host[logo-type=pkzh], :host[logo-type=uvz] {
+  :host[logo-type=aoz], :host[logo-type=pkzh], :host[logo-type=uvz] {
     --logo-height: 2.1875rem;
   }
 }
 @media screen and (min-width: 1600px) {
-  :host[logo-type=vbz], :host[logo-type=aoz], :host[logo-type=pkzh], :host[logo-type=uvz] {
+  :host[logo-type=aoz], :host[logo-type=pkzh], :host[logo-type=uvz] {
     --logo-height: 3.3125rem;
   }
 }
+:host[logo-type=vbz] {
+  --logo-height: 1.8125rem;
+}
+@media screen and (min-width: 900px) {
+  :host[logo-type=vbz] {
+    --logo-height: 3.3125rem;
+  }
+}
+@media screen and (min-width: 1600px) {
+  :host[logo-type=vbz] {
+    --logo-height: 3.75rem;
+  }
+}
+:host[logo-type=vbz] ::slotted([slot=logo]) {
+  align-self: center;
+}
 :host ::slotted([slot=logo]) {
   width: var(--logo-width);
   height: var(--logo-height);

package/dist/collection/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.css

@@ -165,10 +165,17 @@
 /**
 * @prop --background-color-topnews: Background color of top news section
 * @prop --background-color-mostsearched: Background color of top most searched section
+*
+* @prop --stzh-homepage-service-highlights-topnews-subtitle-font: **Global**: Font of the topnews subtitle
+* @prop --stzh-homepage-service-highlights-topnews-item-subtitle-color: **Global**: Color of the topnews subtitle
+* @prop --stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color: **Global**: Color of the topnews subtitle (highlighted variant)
 */
 :host {
   --background-color-topnews: var(--stzh-topnews-background-color);
   --background-color-mostsearched: var(--stzh-mostsearched-background-color);
+  --topnews-item-subtitle-font: var(--stzh-homepage-service-highlights-topnews-subtitle-font, var(--stzh-font-family-medium));
+  --topnews-item-subtitle-color: var(--stzh-homepage-service-highlights-topnews-item-subtitle-color, var(--stzh-color-primary70));
+  --topnews-item-subtitle-highlighted-color: var(--stzh-homepage-service-highlights-topnews-item-subtitle-highlighted-color, var(--stzh-color-primary60));
 }
 
 .stzh-homepage-service-highlights {
@@ -266,10 +273,11 @@
   background-color: var(--stzh-color-lemonyellow60);
 }
 .stzh-homepage-service-highlights .stzh-topnews-item__subtitle {
-  --color: var(--stzh-color-primary70);
+  --color: var(--topnews-item-subtitle-color);
+  font-family: var(--topnews-item-subtitle-font);
 }
 .stzh-homepage-service-highlights .stzh-topnews-item--highlighted .stzh-topnews-item__subtitle {
-  --color: var(--stzh-color-secondary60);
+  --color: var(--topnews-item-subtitle-highlighted-color);
 }
 .stzh-homepage-service-highlights .stzh-topnews-item.stzh-topnews-item--has-link:not(.stzh-topnews-item--highlighted):hover .stzh-topnews-item__label {
   --color: var(--stzh-color-primary80);
@@ -326,7 +334,7 @@
 @media screen and (min-width: 900px) {
   .stzh-homepage-service-highlights__mostsearched {
     padding-left: 2.5rem;
-    padding-right: 2.5rem;
+    padding-right: calc(((100vw - 84.25rem - var(--stzh-scrollbar-width, 0px)) / 2));
   }
 }
 @media screen and (min-width: 900px) {
@@ -380,6 +388,9 @@
   --hover-color: $linkColor;
   transition: transform 150ms ease;
 }
+.stzh-homepage-service-highlights .stzh-mostsearched-item__link:hover {
+  transform: translateX(0.625rem);
+}
 @media screen and (min-width: 900px) {
   .stzh-homepage-service-highlights .stzh-mostsearched-item__link:hover {
     transform: translateX(1.25rem);

package/dist/collection/components/stzh-homepage-service-highlights/stzh-homepage-service-highlights.stories.js

@@ -8,7 +8,7 @@ const COMPONENT_NAME = 'stzh-homepage-service-highlights';
 const story = createComponentStory(COMPONENT_NAME);
 
 const TEMPLATE = `
-<stzh-homepage-service-highlights  ></stzh-homepage-service-highlights>;
+<stzh-homepage-service-highlights></stzh-homepage-service-highlights>;
 `;
 
 const topnewsItems = [

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

@@ -197,7 +197,14 @@
   }
 }
 
-.stzh-iframe__iframe, .stzh-iframe__cookiewall, .stzh-iframe__preview {
+.stzh-iframe {
+  width: 100%;
+  height: 100%;
+}
+.stzh-iframe__iframe {
+  width: 100%;
+}
+.stzh-iframe__cookiewall, .stzh-iframe__preview {
   position: absolute;
   top: 0;
   left: 0;

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

@@ -1,5 +1,7 @@
-import { Host, h, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import Cookies from "js-cookie";
+import iFrameResizeModule from "iframe-resizer";
+import { getStzhEnvironment, StzhEnvironmentEnum } from "../../utils/utils";
 const COOKIE_PREFIX_CONFIRM = "stzh-components-iframe-confirm";
 let iframeCounter = 0;
 /**
@@ -16,24 +18,25 @@ export class StzhIframe {
         this.iframeElement.focus();
         this.updateFocus = false;
       }
+      this.initializeIframeResizing();
     };
     this.handleCookiewallCloseClick = () => {
       this.updateFocus = true;
       this.view = "preview";
       this.stzhViewChange.emit({
         component: "stzh-iframe",
-        value: this.view
+        value: this.view,
       });
     };
     this.handleCookiewallConfirmClick = () => {
       Cookies.set(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`, "1", {
-        expires: this.cookieExpires || null
+        expires: this.cookieExpires || null,
       });
       this.updateFocus = true;
       this.view = "iframe";
       this.stzhViewChange.emit({
         component: "stzh-iframe",
-        value: this.view
+        value: this.view,
       });
     };
     this.handlePreviewClick = () => {
@@ -47,18 +50,21 @@ export class StzhIframe {
       }
       this.stzhViewChange.emit({
         component: "stzh-iframe",
-        value: this.view
+        value: this.view,
       });
     };
     this.localization = undefined;
     this.iframeId = undefined;
     this.iframeErrorText = undefined;
+    this.iframeResizerVariant = "None";
+    this.iframeResizerHeightCorrection = undefined;
+    this.iframeResizerSecondlevelDomain = undefined;
     this.name = undefined;
     this.sandbox = undefined;
     this.referrerpolicy = undefined;
     this.allow = "autoplay; fullscreen";
-    this.width = undefined;
-    this.height = undefined;
+    this.width = "100%";
+    this.height = "100%";
     this.src = "";
     this.cookie = undefined;
     this.cookieExpires = 365;
@@ -84,13 +90,70 @@ export class StzhIframe {
       this._src = null;
     }
   }
+  initializeIframeResizing() {
+    switch (this.iframeResizerVariant) {
+      case "None":
+        return;
+      case "PostMessage":
+        console.log("iFrameResizeModule", iFrameResizeModule);
+        iFrameResizeModule.iframeResize({ log: getStzhEnvironment() !== StzhEnvironmentEnum.PROD, checkOrigin: false }, this.iframeElement);
+        break;
+      case "SameSecondLevelDomain":
+        if (!this.iframeResizerSecondlevelDomain) {
+          console.log("stzh-iframe:", "property 'iframeSecondlevelDomain' not filled out.");
+        }
+        this.setupIframeAutoSizing({
+          frameId: this.iframeId,
+          heightCorrection: this.iframeResizerHeightCorrection || 0,
+          hasSameDomain: false,
+          secondLevelDomain: this.iframeResizerSecondlevelDomain,
+        });
+        break;
+    }
+  }
+  setupIframeAutoSizing(config) {
+    const createResizer = (iframe, config) => {
+      return () => {
+        var _a;
+        try {
+          const newHeight = ((_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document.body.scrollHeight) || 0;
+          if (newHeight > 0) {
+            iframe.style.height = `${newHeight + config.heightCorrection}px`;
+          }
+        }
+        catch (error) {
+          console.warn("stzh-iframe:", "Resizing not possible, perhaps due to cross-domain restrictions:", error);
+        }
+      };
+    };
+    if (!config.hasSameDomain) {
+      document.domain = config.secondLevelDomain;
+    }
+    const iframe = document.getElementById(config.frameId);
+    if (!iframe) {
+      console.error(`Iframe with ID ${config.frameId} not found`);
+      return;
+    }
+    const resizer = createResizer(iframe, config);
+    window.addEventListener("resize", resizer);
+    iframe.addEventListener("load", resizer);
+    iframe.addEventListener("blur", resizer);
+    iframe.addEventListener("readystatechange", resizer); // hack for internet explorer...
+    try {
+      // this might go wrong on IE, if iframe hasn't fully loaded yet, but it doesn't matter.
+      resizer();
+    }
+    catch (error) {
+      console.warn("Initial resize failed, likely due to iframe not being fully loaded yet:", error);
+    }
+  }
   async componentWillLoad() {
     this.internalId = `stzh-iframe-${iframeCounter++}`;
     const cookieAccepted = Cookies.get(`${COOKIE_PREFIX_CONFIRM}-${this.cookie}`) || false;
-    if (((!this.cookie || cookieAccepted) && (this.skipPreviewIfCookieAccepted || this.skipPreview))
-      || (!this.cookie && this.skipPreview)) {
+    if (((!this.cookie || cookieAccepted) && (this.skipPreviewIfCookieAccepted || this.skipPreview)) ||
+      (!this.cookie && this.skipPreview)) {
       this.stzhPreviewSkip.emit({
-        component: "stzh-iframe"
+        component: "stzh-iframe",
       });
       this.view = "iframe";
     }
@@ -121,22 +184,18 @@ export class StzhIframe {
     const classes = {
       "stzh-iframe": true,
     };
-    return (h(Host, null, h("div", { class: classes }, this.view === "iframe" &&
-      h("iframe", { id: this.iframeId, name: this.name, sandbox: this.sandbox, referrerPolicy: this.referrerpolicy, width: this.width, height: this.height, ref: (el) => (this.iframeElement = el), class: "stzh-iframe__iframe", src: this._src, allow: this.allow, onLoad: this.handleIframeLoad }, this.iframeErrorText), h("button", { ref: (el) => (this.previewButtonElement = el), onClick: this.handlePreviewClick, "aria-label": this.previewLabel || this.localization.defaultPreviewLabel,
+    return (h(Host, null, h("div", { class: classes }, this.view === "iframe" && (h("iframe", { id: this.iframeId, name: this.name, sandbox: this.sandbox, referrerPolicy: this.referrerpolicy, width: this.width, height: this.height, ref: el => (this.iframeElement = el), class: "stzh-iframe__iframe", src: this._src, allow: this.allow, onLoad: this.handleIframeLoad }, this.iframeErrorText)), h("button", { ref: el => (this.previewButtonElement = el), onClick: this.handlePreviewClick, "aria-label": this.previewLabel || this.localization.defaultPreviewLabel,
       // disabled={this.view === "cookiewall"}
       class: {
         "stzh-iframe__preview": true,
-        "is-visible": this.view === "preview" || this.view === "cookiewall"
-      } }, h("div", { class: "stzh-iframe__preview-image-wrapper" }, h("slot", { name: "preview-image" })), h("div", { class: "stzh-iframe__preview-logo-wrapper" }, h("slot", { name: "preview-logo" })), this.previewIcon &&
-      h("div", { class: {
-          "stzh-iframe__preview-run": true,
-          "is-visible": this.view === "preview"
-        } }, h("stzh-icon", { class: "stzh-iframe__preview-run-icon", name: this.previewIcon }))), this.cookie &&
-      h("div", { class: {
-          "stzh-iframe__cookiewall": true,
-          "is-visible": this.view === "cookiewall"
-        } }, h("div", { class: "stzh-iframe__cookiewall-content" }, h("div", { class: "stzh-iframe__cookiewall-text", id: `${this.internalId}-cookiewall-text` }, this.cookieConfirmText ? this.cookieConfirmText : h("slot", { name: "cookiewall-text" })), h("stzh-button", { ref: (el) => (this.confirmButtonElement = el), class: "stzh-iframe__cookiewall-button", size: "small", a11yDescribedby: `${this.internalId}-cookiewall-text`, icon: this.cookieConfirmIcon, label: this.cookieConfirmLabel || this.localization.defaultConfirmLabel, onClick: this.handleCookiewallConfirmClick })), !this.skipPreview &&
-        h("button", { class: "stzh-iframe__cookiewall-close", onClick: this.handleCookiewallCloseClick, "aria-label": this.localization.confirmCloseLabel }, h("stzh-icon", { class: "stzh-iframe__cookiewall-close-icon", name: "close" }))))));
+        "is-visible": this.view === "preview" || this.view === "cookiewall",
+      } }, h("div", { class: "stzh-iframe__preview-image-wrapper" }, h("slot", { name: "preview-image" })), h("div", { class: "stzh-iframe__preview-logo-wrapper" }, h("slot", { name: "preview-logo" })), this.previewIcon && (h("div", { class: {
+        "stzh-iframe__preview-run": true,
+        "is-visible": this.view === "preview",
+      } }, h("stzh-icon", { class: "stzh-iframe__preview-run-icon", name: this.previewIcon })))), this.cookie && (h("div", { class: {
+        "stzh-iframe__cookiewall": true,
+        "is-visible": this.view === "cookiewall",
+      } }, h("div", { class: "stzh-iframe__cookiewall-content" }, h("div", { class: "stzh-iframe__cookiewall-text", id: `${this.internalId}-cookiewall-text` }, this.cookieConfirmText ? this.cookieConfirmText : h("slot", { name: "cookiewall-text" })), h("stzh-button", { ref: el => (this.confirmButtonElement = el), class: "stzh-iframe__cookiewall-button", size: "small", a11yDescribedby: `${this.internalId}-cookiewall-text`, icon: this.cookieConfirmIcon, label: this.cookieConfirmLabel || this.localization.defaultConfirmLabel, onClick: this.handleCookiewallConfirmClick })), !this.skipPreview && (h("button", { class: "stzh-iframe__cookiewall-close", onClick: this.handleCookiewallCloseClick, "aria-label": this.localization.confirmCloseLabel }, h("stzh-icon", { class: "stzh-iframe__cookiewall-close-icon", name: "close" }))))))));
   }
   static get is() { return "stzh-iframe"; }
   static get encapsulation() { return "scoped"; }
@@ -207,6 +266,58 @@ export class StzhIframe {
         "attribute": "iframe-error-text",
         "reflect": false
       },
+      "iframeResizerVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"None\" | \"PostMessage\" | \"SameSecondLevelDomain\"",
+          "resolved": "\"None\" | \"PostMessage\" | \"SameSecondLevelDomain\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Automatic height resizing of iFrame"
+        },
+        "attribute": "iframe-resizer-variant",
+        "reflect": false,
+        "defaultValue": "\"None\""
+      },
+      "iframeResizerHeightCorrection": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Height correction for automatically resized iFrames"
+        },
+        "attribute": "iframe-resizer-height-correction",
+        "reflect": false
+      },
+      "iframeResizerSecondlevelDomain": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Second level domain for automatically resized iFrames"
+        },
+        "attribute": "iframe-resizer-secondlevel-domain",
+        "reflect": false
+      },
       "name": {
         "type": "string",
         "mutable": false,
@@ -251,7 +362,7 @@ export class StzhIframe {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"no-referrer\"\n    | \"no-referrer-when-downgrade\"\n    | \"origin\"\n    | \"origin-when-cross-origin\"\n    | \"same-origin\"\n    | \"strict-origin\"\n    | \"strict-origin-when-cross-origin\"\n    | \"unsafe-url\"",
+          "original": "| \"no-referrer\"\n    | \"no-referrer-when-downgrade\"\n    | \"origin\"\n    | \"origin-when-cross-origin\"\n    | \"same-origin\"\n    | \"strict-origin\"\n    | \"strict-origin-when-cross-origin\"\n    | \"unsafe-url\"",
           "resolved": "\"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
           "references": {}
         },
@@ -303,7 +414,8 @@ export class StzhIframe {
           "text": "Width of iframe"
         },
         "attribute": "width",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"100%\""
       },
       "height": {
         "type": "string",
@@ -320,7 +432,8 @@ export class StzhIframe {
           "text": "Width of iframe"
         },
         "attribute": "height",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "\"100%\""
       },
       "src": {
         "type": "string",