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

package/dist/components/stzh-chip2.js.map

@@ -1 +1 @@
-{"file":"stzh-chip2.js","mappings":"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","names":[],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":[":host {\n  --color: var(--stzh-chip-color, #{$colorPrimary70});\n  --height: 32px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --border-radius: 16px;\n  --remove-color: var(--color);\n  --remove-border-radius: 24px;\n  --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n  --icon-size: #{iconSize('xsmall')};\n  --icon-color: var(--color);\n  --icon-gap: #{space('xsmall')};\n  --counter-color: var(--color);\n  --counter-gap: #{space('xsmall')};\n\n  --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n  --hover-background-color: var(--stzh-chip-hover-background-color, #{$colorSecondary40});\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: #{$colorPrimary30};\n  --hover-icon-color: var(--hover-color);\n  --hover-counter-color: var(--hover-color);\n\n  display: inline-flex;\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-background-color: Canvas;\n  }\n\n  &[size=\"large\"] {\n    --height: 40px;\n    --border-radius: 20px;\n    --padding-left: #{space('xlarge')};\n    --padding-right: #{space('xlarge')};\n  }\n\n  &[size=\"small\"] {\n    --height: 24px;\n    --border-radius: 12px;\n    --padding-left: #{space('small')};\n    --padding-right: #{space('small')};\n  }\n\n  &[variant=\"input\"] {\n    --background-color: #{$colorPrimary10};\n\n    --hover-color: #{$colorPrimary90};\n    --hover-background-color: #{$colorPrimary20};\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$colorGrey90};\n    --background-color: #{$colorGrey20};\n\n    --hover-color: #{$colorGrey90};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[variant=\"input\"]:where([size=\"small\"]) {\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"]:where([size=\"small\"]) {\n    --padding-left: #{space('xsmall')};\n    --padding-right: #{space('xsmall')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"]) {\n    --color: #{$colorWarning90};\n\n    --hover-color: #{$colorWarning90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"]) {\n    --color: #{$colorError70};\n\n    --hover-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"]) {\n    --color: #{$colorSuccess70};\n\n    --hover-color: #{$colorSuccess70};\n  }\n\n  &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey90};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n\n    --hover-color: #{$colorBlack};\n    --hover-background-color: #{$colorWarning60};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorError70};\n\n    --hover-background-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorSuccess70};\n\n    --hover-background-color: #{$colorSuccess70};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-chip-active-color, #{$colorWhite});\n    --background-color: var(--stzh-chip-active-background-color, #{$colorPrimary70});\n\n    --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-chip-active-hover-background-color, #{$colorPrimary90});\n    --hover-remove-background-color: #{$colorPrimary90};\n\n    @include highContrast() {\n      --color: Highlight;\n      --background-color: Canvas;\n\n      --hover-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-background-color: Canvas;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-chip-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-chip-disabled-background-color, #{$colorGrey20});\n    --remove-color: var(--color);\n    --icon-color: var(--color);\n    --counter-color: var(--color);\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n    --background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    @include fontSize('micro');\n    font-family: inherit;\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    color: var(--color);\n    appearance: none;\n    border: none;\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 0;\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space('xxsmall');\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize('xxsmall')};\n  }\n\n  &__button:hover,\n  &__remove:hover + &__button {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Size */\n\n  &--size-small &__button {\n    @include fontSize('nano');\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button {\n    padding-right: calc(var(--height) + #{space('xxsmall')});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Fragment\n} from \"@stencil/core\";\n\nimport {\n  StzhChipVariant,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipClickEvent,\n  StzhChipRemoveEvent,\n  StzhChipFocusEvent,\n  StzhChipBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <Fragment>\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ?\n            <stzh-icon class=\"stzh-chip__icon\" name={\n              this.icon\n              || this.type === \"info\" && \"info-help\"\n              || this.type === \"warning\" && \"important-warning\"\n              || this.type === \"error\" && \"warning\"\n              || this.type === \"success\" && \"checkmark-circle\"\n            }></stzh-icon>\n            :\n            <slot name=\"icon\"></slot>\n          }\n        </div>\n\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-chip__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n          {this.counter &&\n            <span class=\"stzh-chip__vhidden\">\n              &nbsp;({this.counter})\n            </span>\n          }\n        </stzh-clamp>\n\n        {this.counter &&\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        }\n      </Fragment>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.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-chip\",\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-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant\n    };\n\n    const Chip = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable &&\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          }\n\n          {this.href ?\n            <Chip\n              ref={(el) => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n            :\n            <Chip\n              ref={(el) => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-chip2.js","mappings":"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","names":[],"sources":["src/components/stzh-chip/stzh-chip.scss?tag=stzh-chip&encapsulation=scoped","src/components/stzh-chip/stzh-chip.tsx"],"sourcesContent":[":host {\n  --color: var(--stzh-chip-color, #{$colorPrimary70});\n  --height: 32px;\n  --padding-top: 0;\n  --padding-bottom: 0;\n  --padding-left: #{space('medium')};\n  --padding-right: #{space('medium')};\n  --border-radius: 16px;\n  --remove-color: var(--color);\n  --remove-border-radius: 24px;\n  --background-color: var(--stzh-chip-background-color, #{$colorSecondary30});\n  --icon-size: #{iconSize('xsmall')};\n  --icon-color: var(--color);\n  --icon-gap: #{space('xsmall')};\n  --counter-color: var(--color);\n  --counter-gap: #{space('xsmall')};\n  --outer-height: 40px;\n\n  --hover-color: var(--stzh-chip-hover-color, #{$colorPrimary70});\n  --hover-background-color: var(--stzh-chip-hover-background-color, #{$colorSecondary40});\n  --hover-remove-color: var(--hover-color);\n  --hover-remove-background-color: #{$colorPrimary30};\n  --hover-icon-color: var(--hover-color);\n  --hover-counter-color: var(--hover-color);\n\n  display: inline-flex;\n\n  @include mq($from: medium) {\n    --outer-height: auto;\n  }\n\n  @include highContrast() {\n    --hover-color: Highlight;\n    --hover-background-color: Canvas;\n    --hover-remove-background-color: Canvas;\n  }\n\n  &[size=\"large\"] {\n    --height: 40px;\n    --border-radius: 20px;\n    --padding-left: #{space('xlarge')};\n    --padding-right: #{space('xlarge')};\n  }\n\n  &[size=\"small\"] {\n    --height: 24px;\n    --border-radius: 12px;\n    --padding-left: #{space('small')};\n    --padding-right: #{space('small')};\n  }\n\n  &[variant=\"input\"] {\n    --background-color: #{$colorPrimary10};\n\n    --hover-color: #{$colorPrimary90};\n    --hover-background-color: #{$colorPrimary20};\n  }\n\n  &[variant=\"tag\"] {\n    --color: #{$colorGrey90};\n    --background-color: #{$colorGrey20};\n\n    --hover-color: #{$colorGrey90};\n    --hover-background-color: #{$colorGrey20};\n  }\n\n  &[variant=\"input\"]:where([size=\"small\"]) {\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"]:where([size=\"small\"]) {\n    --padding-left: #{space('xsmall')};\n    --padding-right: #{space('xsmall')};\n    --icon-gap: #{space('xxsmall')};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"]) {\n    --color: #{$colorWarning90};\n\n    --hover-color: #{$colorWarning90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"]) {\n    --color: #{$colorError70};\n\n    --hover-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"]) {\n    --color: #{$colorSuccess70};\n\n    --hover-color: #{$colorSuccess70};\n  }\n\n  &[variant=\"tag\"]:where([inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorWhite};\n    --background-color: #{$colorGrey90};\n\n    --hover-color: #{$colorWhite};\n    --hover-background-color: #{$colorGrey90};\n  }\n\n  &[variant=\"tag\"]:where([type=\"warning\"][inverted]:not([inverted=\"false\"])) {\n    --color: #{$colorBlack};\n    --background-color: #{$colorWarning60};\n\n    --hover-color: #{$colorBlack};\n    --hover-background-color: #{$colorWarning60};\n  }\n\n  &[variant=\"tag\"]:where([type=\"error\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorError70};\n\n    --hover-background-color: #{$colorError70};\n  }\n\n  &[variant=\"tag\"]:where([type=\"success\"][inverted]:not([inverted=\"false\"])) {\n    --background-color: #{$colorSuccess70};\n\n    --hover-background-color: #{$colorSuccess70};\n  }\n\n  &[active]:not([active=\"false\"]) {\n    --color: var(--stzh-chip-active-color, #{$colorWhite});\n    --background-color: var(--stzh-chip-active-background-color, #{$colorPrimary70});\n\n    --hover-color: var(--stzh-chip-active-hover-color, #{$colorWhite});\n    --hover-background-color: var(--stzh-chip-active-hover-background-color, #{$colorPrimary90});\n    --hover-remove-background-color: #{$colorPrimary90};\n\n    @include highContrast() {\n      --color: Highlight;\n      --background-color: Canvas;\n\n      --hover-color: Highlight;\n      --hover-background-color: Canvas;\n      --hover-remove-background-color: Canvas;\n    }\n  }\n\n  &[non-interactive]:not([non-interactive=\"false\"]) {\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --color: var(--stzh-chip-disabled-color, #{$colorGrey70});\n    --background-color: var(--stzh-chip-disabled-background-color, #{$colorGrey20});\n    --remove-color: var(--color);\n    --icon-color: var(--color);\n    --counter-color: var(--color);\n\n    --hover-color: var(--color);\n    --hover-background-color: var(--background-color);\n    --hover-remove-color: var(--remove-color);\n    --hover-remove-background-color: transparent;\n    --hover-icon-color: var(--icon-color);\n    --hover-counter-color: var(--counter-color);\n  }\n\n  &[variant=\"input\"][disabled]:not([disabled=\"false\"]) {\n    --background-color: #{$colorGrey10};\n  }\n}\n\n.stzh-chip {\n  position: relative;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__button {\n    @include fontSize('micro');\n    min-height: var(--outer-height);\n    font-family: inherit;\n    appearance: none;\n    padding: 0px;\n    border: none;\n    background-color: transparent;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__button-inner {\n    height: var(--height);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    border-radius: var(--border-radius);\n    padding-top: var(--padding-top);\n    padding-bottom: var(--padding-bottom);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n    color: var(--color);\n    background-color: var(--background-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color;\n    text-decoration-line: none;\n  }\n\n  &__label {\n    text-align: left;\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    display: flex;\n    color: var(--icon-color);\n    transition: color $baseTransitionAnimationSpeed;\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      margin-right: var(--icon-gap);\n    }\n  }\n\n  &__counter {\n    display: flex;\n    font-variant-numeric: tabular-nums;\n    margin-left: var(--counter-gap);\n    color: var(--counter-color);\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__remove {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 0;\n    appearance: none;\n    font-family: inherit;\n    border: none;\n    background: none;\n    padding: 0;\n    width: var(--height);\n    height: var(--height);\n    border-radius: var(--remove-border-radius);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-left: space('xxsmall');\n    color: var(--remove-color);\n    transition-duration: $baseTransitionAnimationSpeed;\n    transition-property: color, background-color, border-color;\n    cursor: pointer;\n\n    &:hover {\n      color: var(--hover-remove-color);\n      background-color: var(--hover-remove-background-color);\n    }\n  }\n\n  &__remove-icon {\n    --size: #{iconSize('xxsmall')};\n  }\n\n  &__button:hover &__button-inner,\n  &__remove:hover + &__button &__button-inner {\n    color: var(--hover-color);\n    background-color: var(--hover-background-color);\n  }\n\n  &__button:hover &__counter,\n  &__remove:hover + &__button &__counter {\n    color: var(--hover-counter-color);\n  }\n\n  &__button:hover &__icon-wrapper,\n  &__remove:hover + &__button &__icon-wrapper {\n    color: var(--hover-icon-color);\n  }\n\n  /* Size */\n\n  &--size-small &__button {\n    @include fontSize('nano');\n  }\n\n  /* Removeable */\n\n  &--is-removable &__button-inner {\n    padding-right: calc(var(--height) + #{space('xxsmall')});\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button,\n  &--is-disabled &__remove {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element\n} from \"@stencil/core\";\n\nimport {\n  StzhChipVariant,\n  StzhChipSize,\n  StzhChipType,\n  StzhChipClickEvent,\n  StzhChipRemoveEvent,\n  StzhChipFocusEvent,\n  StzhChipBlurEvent\n} from \"../../index\";\n\n/**\n * @slot - Slot for label\n * @slot icon - Slot for icon\n */\n@Component({\n  tag: \"stzh-chip\",\n  styleUrl: \"stzh-chip.scss\",\n  scoped: true\n})\nexport class StzhChip {\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string;\n\n  /** `href` if the chip should be used as link  */\n  @Prop() href: string = \"\";\n\n  /** Target if the button is used as link (if `href` used)  */\n  @Prop() target: string = \"\";\n\n  /** Whether chip is not interactive */\n  @Prop({ reflect: true }) nonInteractive: boolean = false;\n\n  /** Whether remove button should be shown */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** Whether inverted style is shown (only available for `tag` variant) */\n  @Prop({ reflect: true }) inverted: boolean = false;\n\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhChipVariant = \"tag\";\n\n  /** Size */\n  @Prop({ reflect: true }) size: StzhChipSize = \"default\";\n\n  /** Type */\n  @Prop({ reflect: true }) type: StzhChipType = \"default\";\n\n  /** Counter */\n  @Prop() counter: string = \"\";\n\n  /** Label of remove button for screenreaders */\n  @Prop() removeLabel: string = \"\";\n\n  /** Active */\n  @Prop({ reflect: true }) active: boolean = false;\n\n  /** Disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Tabindex of link/button */\n  @Prop({ attribute: \"a11y-tabindex\" }) a11yTabindex: string;\n\n  /** Accessible label for screen readers to replace visible text */\n  @Prop({ attribute: \"a11y-label\" }) a11yLabel: string;\n\n  /** Id for element which describes the link/button */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the link/button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the remove button element.\n   * Default value will be taken from `removeLabel` prop.\n   */\n  @Prop() removeAnalyticsId: string;\n\n  @Element() element: HTMLStzhChipElement;\n\n  /** Chip click event */\n  @Event() stzhClick: EventEmitter<StzhChipClickEvent>;\n\n  /** Chip remove event */\n  @Event() stzhRemove: EventEmitter<StzhChipRemoveEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhChipFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhChipBlurEvent>;\n\n  private chip: HTMLButtonElement | HTMLAnchorElement;\n  private text: HTMLElement;\n  private focusedByInput: boolean = false;\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.chip?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  private renderInner(): DocumentFragment {\n    return (\n      <div class=\"stzh-chip__button-inner\">\n        <div class=\"stzh-chip__icon-wrapper\">\n          {this.icon || (typeof this.icon === \"undefined\" && this.variant === \"tag\" && this.type !== \"default\") ?\n            <stzh-icon class=\"stzh-chip__icon\" name={\n              this.icon\n              || this.type === \"info\" && \"info-help\"\n              || this.type === \"warning\" && \"important-warning\"\n              || this.type === \"error\" && \"warning\"\n              || this.type === \"success\" && \"checkmark-circle\"\n            }></stzh-icon>\n            :\n            <slot name=\"icon\"></slot>\n          }\n        </div>\n\n        <stzh-clamp\n          lines={1}\n          class=\"stzh-chip__label\"\n          ref={(el) => (this.text = el as HTMLElement)}\n        >\n          {this.label ? this.label : <slot></slot>}\n          {this.counter &&\n            <span class=\"stzh-chip__vhidden\">\n              &nbsp;({this.counter})\n            </span>\n          }\n        </stzh-clamp>\n\n        {this.counter &&\n          <div class=\"stzh-chip__counter\" aria-hidden=\"true\">\n            {this.counter}\n          </div>\n        }\n      </div>\n    );\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.chip.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-chip\",\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-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  private onRemoveClick = (event: MouseEvent) => {\n    this.stzhRemove.emit({\n      component: \"stzh-chip\",\n      originalEvent: event\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-chip\": true,\n      \"stzh-chip--is-active\": this.active,\n      \"stzh-chip--is-disabled\": this.disabled,\n      \"stzh-chip--is-removable\": this.removable,\n      \"stzh-chip--is-inverted\": this.inverted,\n      \"stzh-chip--has-counter\": !!this.counter,\n      [`stzh-chip--type-${this.type}`]: !!this.type,\n      [`stzh-chip--size-${this.size}`]: !!this.size,\n      [`stzh-chip--${this.variant}`]: !!this.variant\n    };\n\n    const Chip = this.nonInteractive ? \"div\" :\n      this.href ? \"a\" : \"button\";\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          {this.removable &&\n            <button\n              class=\"stzh-chip__remove\"\n              onClick={this.onRemoveClick}\n              disabled={this.disabled}\n              aria-label={this.removeLabel}\n              type=\"button\"\n              s-object-id={this.removeAnalyticsId || this.removeLabel}\n            >\n              <stzh-icon class=\"stzh-chip__remove-icon\" name=\"close-big\"></stzh-icon>\n            </button>\n          }\n\n          {this.href ?\n            <Chip\n              ref={(el) => (this.chip = el as HTMLAnchorElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              href={this.disabled ? null : this.href}\n              target={this.target}\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n            :\n            <Chip\n              ref={(el) => (this.chip = el as HTMLButtonElement)}\n              class={{\n                \"stzh-chip__button\": true,\n                \"is-button\": !this.nonInteractive && !this.href,\n                \"is-link\": !this.nonInteractive && !!this.href\n              }}\n              disabled={this.disabled}\n              type=\"button\"\n              tabindex={this.a11yTabindex}\n              aria-label={this.a11yLabel || null}\n              aria-describedby={this.a11yDescribedby || null}\n              onClick={this.onClick}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            >\n              {this.renderInner()}\n            </Chip>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/stzh-chipselect2.js

@@ -106,7 +106,9 @@ const StzhChipselect = /*@__PURE__*/ proxyCustomElement(class StzhChipselect ext
     }
     this._dataDropdown = this._data.map((data) => {
       return {
-        text: `${data.label} (${data.counter})`,
+        text: data.counter
+          ? `${data.label} (${data.counter})`
+          : data.label,
         value: data.value
       };
     });

package/dist/components/stzh-chipselect2.js.map

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

package/dist/components/stzh-content.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const stzhContentCss = ".sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content\")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content content content content content\")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");--stzh-content-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-shifted-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-full-grid-template-areas:\"content content content content content content content content content content content content\"}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:\"cta cta cta .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:\"cta cta cta cta cta . . .\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta . . . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:\"text text text .\";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:\"text text text .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:\"text text text text text text . .\";--stzh-richtext-grid-template-areas:\"text text text text text text . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list list list . . .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:\"cta cta cta cta\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:\"cta cta cta cta cta cta cta cta\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta cta cta cta cta\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}";
+const stzhContentCss = ".sc-stzh-content-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-content-h{display:none}.sc-stzh-content-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-content-h *.sc-stzh-content,.sc-stzh-content-h *.sc-stzh-content::before,.sc-stzh-content-h *.sc-stzh-content::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-content-h .has-focus.sc-stzh-content{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content{outline-style:none !important}.sc-stzh-content-h .stzh-fylingfocus-focused.sc-stzh-content::-moz-focus-inner{border:0 !important}.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content\")}@media screen and (min-width: 900px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"content content content content content content content content\")}}@media screen and (min-width: 1260px){.sc-stzh-content-h{--grid-template-areas:var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\")}}@media screen and (min-width: 1260px){[variant=shifted].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"))}}@media screen and (min-width: 1260px){[variant=full].sc-stzh-content-h{--grid-template-areas:var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"))}}.sc-stzh-content-h .sc-stzh-content-s>*{grid-area:content}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-small-grid-template-areas:\"cta cta cta .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-cta-grid-template-areas:\"cta cta cta cta cta . . .\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta . . . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-display:grid;--stzh-text-grid-template-areas:\"text text text .\";--stzh-richtext-display:grid;--stzh-richtext-grid-template-areas:\"text text text .\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-text-grid-template-areas:\"text text text text text text . .\";--stzh-richtext-grid-template-areas:\"text text text text text text . .\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 3 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-grid-template-areas:\"list list list list list . . .\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 5 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 5 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s>*{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 5 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-small-grid-template-areas:\"cta cta cta cta\"}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-cta-grid-template-areas:\"cta cta cta cta cta cta cta cta\";--stzh-cta-small-grid-template-areas:\"cta cta cta cta cta cta cta cta\"}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-text-display:block;--stzh-richtext-display:block}}@media screen and (min-width: 600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-small) - 2 * var(--stzh-grid-gutter-small)) / 4 * 4) + 3 * var(--stzh-grid-gutter-small) + var(--stzh-grid-gutter-small))}}@media screen and (min-width: 900px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-grid-template-areas:\"list list list list list list list list\";--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-medium) - 4 * var(--stzh-grid-gutter-medium)) / 8 * 8) + 7 * var(--stzh-grid-gutter-medium) + var(--stzh-grid-gutter-medium))}}@media screen and (min-width: 1260px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-large) - 4 * var(--stzh-grid-gutter-large)) / 8 * 8) + 7 * var(--stzh-grid-gutter-large) + var(--stzh-grid-gutter-large))}}@media screen and (min-width: 1600px){.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-section[variant=highlight],.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-ghettobox,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-message,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-toast,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-tooltip,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-popover,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-accordion,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-timeline,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-twocolumns,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-textandimage,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-datalist stzh-datalist,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-dialog,.sc-stzh-content-h:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) .sc-stzh-content-s stzh-overlay{--stzh-datalist-details-content-width:calc(((100% - var(--stzh-grid-gutter-ultra) - 4 * var(--stzh-grid-gutter-ultra)) / 8 * 8) + 7 * var(--stzh-grid-gutter-ultra) + var(--stzh-grid-gutter-ultra))}}.stzh-content.sc-stzh-content{--stzh-content-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-shifted-grid-template-areas:\"content content content content content content content content content content content content\";--stzh-content-full-grid-template-areas:\"content content content content content content content content content content content content\";-moz-column-gap:var(--stzh-grid-gutter);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));grid-template-areas:var(--grid-template-areas)}@media screen and (min-width: 600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-small);column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-medium);column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-large);column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-content.sc-stzh-content{-moz-column-gap:var(--stzh-grid-gutter-ultra);column-gap:var(--stzh-grid-gutter-ultra)}}@media screen and (min-width: 900px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(8, minmax(0, 1fr))}}@media screen and (min-width: 1260px){.stzh-content.sc-stzh-content{grid-template-columns:repeat(12, minmax(0, 1fr))}}";
 
 const StzhContent$1 = /*@__PURE__*/ proxyCustomElement(class StzhContent extends HTMLElement {
   constructor() {

package/dist/components/stzh-content.js.map

@@ -1 +1 @@
-{"file":"stzh-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wznBAAwznB;;MCgBl0nBA,aAAW;;;;mBAE6C,SAAS;gCAG5B,KAAK;;EAIrD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContent"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n\n    // set nested content elements to be fullwidth\n    --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n    --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n    --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n  }\n\n  &[variant=\"shifted\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n    }\n  }\n\n  &[variant=\"full\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n    }\n  }\n\n  ::slotted(*) {\n    grid-area: content;\n  }\n\n  &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted(*) {\n    /* CTA Layout */\n\n    @include mq($from: small) {\n      --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n      --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n    }\n\n    /* Text / Richtext Layout */\n\n    @include mq($from: small) {\n      --stzh-text-display: grid;\n      --stzh-text-grid-template-areas: \"text text text .\";\n\n      --stzh-richtext-display: grid;\n      --stzh-richtext-grid-template-areas: \"text text text .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-text-grid-template-areas: \"text text text text text text . .\";\n      --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n    }\n\n    /* Datalist Layout */\n\n    @include mq($from: small) {\n      --stzh-datalist-grid-template-areas: \"list list list .\";\n      // breakout with details element inside datalist-item\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n    }\n\n    @include mq($from: large) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n    }\n\n    @include mq($from: ultra) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n    }\n\n    /* Reset layout inside certain components */\n\n    stzh-datalist {\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n    }\n\n    stzh-section[variant=\"highlight\"],\n    stzh-ghettobox,\n    stzh-message,\n    stzh-toast,\n    stzh-tooltip,\n    stzh-popover,\n    stzh-accordion,\n    stzh-timeline,\n    stzh-twocolumns,\n    stzh-textandimage,\n    stzh-datalist stzh-datalist,\n    stzh-dialog,\n    stzh-overlay {\n      /* CTA Layout */\n\n      @include mq($from: small) {\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n      }\n\n      @include mq($from: medium) {\n        --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n      }\n\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n\n      /* Datalist Layout */\n\n      @include mq($from: small) {\n        --stzh-datalist-grid-template-areas: \"list list list list\";\n        // breakout with details element inside datalist-item\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n      }\n\n      @include mq($from: medium) {\n        --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n      }\n\n      @include mq($from: large) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n      }\n\n      @include mq($from: ultra) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n      }\n    }\n  }\n}\n\n.stzh-content {\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-content\",\n  styleUrl: \"stzh-content.scss\",\n  scoped: true\n})\nexport class StzhContent {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"shifted\" | \"full\" = \"default\";\n\n  /** Prevent changing layout of elements within this content element */\n  @Prop({ reflect: true }) preventElementLayout = false;\n\n  @Element() element: HTMLStzhContentElement;\n\n  render() {\n    const classes = {\n      \"stzh-content\": true,\n      [`stzh-content--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"stzh-content.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wznBAAwznB;;MCgBl0nBA,aAAW;;;;mBAE6C,SAAS;gCAG5B,KAAK;;EAIrD,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,cAAc,EAAE,IAAI;MACpB,CAAC,iBAAiB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KAClD,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,OAAO,IACjB,eAAa,CACT,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["StzhContent"],"sources":["src/components/stzh-content/stzh-content.scss?tag=stzh-content&encapsulation=scoped","src/components/stzh-content/stzh-content.tsx"],"sourcesContent":[":host {\n  --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content\");\n\n  @include mq($from: medium) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"content content content content content content content content\");\n  }\n\n  @include mq($from: large) {\n    --grid-template-areas: var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content aside-right aside-right\");\n  }\n\n  &[variant=\"shifted\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-shifted-grid-template-areas, var(--stzh-content-grid-template-areas, \"aside-left aside-left content content content content content content content content content aside-right\"));\n    }\n  }\n\n  &[variant=\"full\"] {\n    @include mq($from: large) {\n      --grid-template-areas: var(--stzh-content-full-grid-template-areas, var(--stzh-content-grid-template-areas, \"content content content content content content content content content content content content\"));\n    }\n  }\n\n  ::slotted(*) {\n    grid-area: content;\n  }\n\n  &:where(:not([prevent-element-layout]:not([prevent-element-layout=\"false\"]))) ::slotted(*) {\n    /* CTA Layout */\n\n    @include mq($from: small) {\n      --stzh-cta-small-grid-template-areas: \"cta cta cta .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-cta-grid-template-areas: \"cta cta cta cta cta . . .\";\n      --stzh-cta-small-grid-template-areas: \"cta cta cta cta . . . .\";\n    }\n\n    /* Text / Richtext Layout */\n\n    @include mq($from: small) {\n      --stzh-text-display: grid;\n      --stzh-text-grid-template-areas: \"text text text .\";\n\n      --stzh-richtext-display: grid;\n      --stzh-richtext-grid-template-areas: \"text text text .\";\n    }\n\n    @include mq($from: medium) {\n      --stzh-text-grid-template-areas: \"text text text text text text . .\";\n      --stzh-richtext-grid-template-areas: \"text text text text text text . .\";\n    }\n\n    /* Datalist Layout */\n\n    @include mq($from: small) {\n      --stzh-datalist-grid-template-areas: \"list list list .\";\n      // breakout with details element inside datalist-item\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 3 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n    }\n\n    @include mq($from: medium) {\n      --stzh-datalist-grid-template-areas: \"list list list list list . . .\";\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 5 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n    }\n\n    @include mq($from: large) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 5 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n    }\n\n    @include mq($from: ultra) {\n      --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 5 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n    }\n\n    /* Reset layout inside certain components */\n\n    stzh-datalist {\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n    }\n\n    stzh-section[variant=\"highlight\"],\n    stzh-ghettobox,\n    stzh-message,\n    stzh-toast,\n    stzh-tooltip,\n    stzh-popover,\n    stzh-accordion,\n    stzh-timeline,\n    stzh-twocolumns,\n    stzh-textandimage,\n    stzh-datalist stzh-datalist,\n    stzh-dialog,\n    stzh-overlay {\n      /* CTA Layout */\n\n      @include mq($from: small) {\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta\";\n      }\n\n      @include mq($from: medium) {\n        --stzh-cta-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n        --stzh-cta-small-grid-template-areas: \"cta cta cta cta cta cta cta cta\";\n      }\n\n      /* Text Layout */\n\n      @include mq($from: small) {\n        --stzh-text-display: block;\n        --stzh-richtext-display: block;\n      }\n\n      /* Datalist Layout */\n\n      @include mq($from: small) {\n        --stzh-datalist-grid-template-areas: \"list list list list\";\n        // breakout with details element inside datalist-item\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterSmall} - 2 * #{$gridGutterSmall}) / 4 * 4) + 3 * #{$gridGutterSmall} + #{$gridGutterSmall});\n      }\n\n      @include mq($from: medium) {\n        --stzh-datalist-grid-template-areas: \"list list list list list list list list\";\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterMedium} - 4 * #{$gridGutterMedium}) / 8 * 8) + 7 * #{$gridGutterMedium} + #{$gridGutterMedium});\n      }\n\n      @include mq($from: large) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterLarge} - 4 * #{$gridGutterLarge}) / 8 * 8) + 7 * #{$gridGutterLarge} + #{$gridGutterLarge});\n      }\n\n      @include mq($from: ultra) {\n        --stzh-datalist-details-content-width: calc(((100% - #{$gridGutterUltra} - 4 * #{$gridGutterUltra}) / 8 * 8) + 7 * #{$gridGutterUltra} + #{$gridGutterUltra});\n      }\n    }\n  }\n}\n\n.stzh-content {\n  // set nested content elements to be fullwidth\n  --stzh-content-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-shifted-grid-template-areas: \"content content content content content content content content content content content content\";\n  --stzh-content-full-grid-template-areas: \"content content content content content content content content content content content content\";\n\n  @include grid;\n  grid-template-areas: var(--grid-template-areas);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n} from \"@stencil/core\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-content\",\n  styleUrl: \"stzh-content.scss\",\n  scoped: true\n})\nexport class StzhContent {\n  /** Variant */\n  @Prop({ reflect: true }) variant: \"default\" | \"shifted\" | \"full\" = \"default\";\n\n  /** Prevent changing layout of elements within this content element */\n  @Prop({ reflect: true }) preventElementLayout = false;\n\n  @Element() element: HTMLStzhContentElement;\n\n  render() {\n    const classes = {\n      \"stzh-content\": true,\n      [`stzh-content--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}