@oiz/stzh-components 2.11.1 → 2.12.0-beta2

package/dist/esm-es5/stzh-datalist_2.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhDatalistCss","StzhDatalist","this","_items","resizeHandler","media","matches","_this","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","class_1","prototype","hideBorderWatcher","newValue","stzhHideBorderChange","emit","component","value","directionWatcher","currentDirectionWatcher","stzhDirectionChange","itemsWatcher","JSON","parse","componentWillLoad","items","hideBorder","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","_a","concat","h","Host","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","actionClick","originalEvent","stzhItemActionClick","handleDirectionChange","event","detail","handleHideBorderChange","class_2","externalWatcher","external","rel","includes","renderInner","isButton","Item","href","Fragment","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","innerHTML","name","statusLabel","meta","type","statusType","renderLeadingIcon","leadingIcon","datalist","element","closest","addEventListener","removeEventListener","window","stzhComponents","utils","fetchTranslations","_b","sent","hasActionButton","icon","ActionButton","variant","size","iconLabel","iconOnly","onClick","iconTooltip","content"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":["/**\n * @prop --item-label-min-width: Min width of label\n */\n\n:host {\n  --item-label-min-width: 120px;\n\n  @include mq($from: smallheader) {\n    --item-label-min-width: 144px;\n  }\n\n  &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n    --item-label-min-width: none;\n  }\n}\n\n:host ::slotted(stzh-details),\n.stzh-datalist stzh-details {\n  --content-grid-column: 1 / 6;\n  --content-padding: #{space('large')} 0 #{spaceCurveValue('medium')};\n  --content-border-bottom: 1px solid #{$baseBorderColor};\n\n  @include mq($from: medium) {\n    --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'medium')};\n  }\n\n  @include mq($from: large) {\n    --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'large')};\n  }\n}\n\n.stzh-datalist {\n  &__list {\n    width: 100%;\n  }\n\n  /* Has hidden border variant */\n\n  &--has-hidden-border &__list {\n    margin-top: calc(#{space('xsmall')} / -2);\n    margin-bottom: calc(#{space('xsmall')} / -2);\n  }\n\n  /* Vertical variant */\n\n  &--direction-horizontal &__list {\n    width: 100%;\n    display: grid;\n    border-collapse: collapse;\n    grid-template-columns: auto auto minmax(auto, 1fr) auto auto;\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemEntry,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true\n})\nexport class StzhDatalist {\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: \"vertical\" | \"horizontal\" | \"inherit\" = \"horizontal\";\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Hide border lines between items */\n  @Prop({ reflect: true }) hideBorder: boolean = false;\n\n  /**\n   * Whether to disable min-width of datalist item label for the `horizontal` variant.\n   *\n   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n   *\n   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n   */\n  @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n  /** Current direction in use (readonly)  */\n  @Prop({ reflect: true }) currentDirection: \"vertical\" | \"horizontal\";\n\n  /**\n   * Items in datalist\n   * Array of objects that must at least include `value` attribute.\n   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n   * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n   */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n  private _items: StzhDatalistItemEntry[] = [];\n\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  /** Hide border change event */\n  @Event() stzhHideBorderChange: EventEmitter<StzhDatalistHideBorderChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"hideBorder\")\n  hideBorderWatcher(newValue: boolean) {\n    this.stzhHideBorderChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.resizeHandler();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: \"vertical\" | \"horizontal\") {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  resizeHandler = () => {\n    if (media(\"ultra\").matches && this.directionUltra !== \"inherit\") {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge !== \"inherit\") {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium !== \"inherit\") {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall !== \"inherit\") {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.hideBorderWatcher(this.hideBorder);\n    this.resizeHandler();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.resizeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.resizeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datalist\": true,\n      \"stzh-datalist--has-hidden-border\": this.hideBorder,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-datalist__list\" role=\"list\">\n            {this._items.map((item) =>\n              <stzh-datalist-item {...item}>\n                {item.items && item.items.length > 0 &&\n                  <stzh-datalist items={item.items}></stzh-datalist>\n                }\n              </stzh-datalist-item>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --font-family: var(--stzh-font-family-regular);\n  --font-weight: var(--stzh-font-weight-regular);\n  --color: inherit;\n  --action-display: flex;\n  --label-min-width: var(--item-label-min-width, none);\n  --leading-icon-background-color: #{$colorGrey5};\n  --leading-icon-color: #{$colorGrey70};\n\n  --hover-leading-icon-background-color: #{$colorPrimaryHover};\n  --hover-leading-icon-color: #{$colorWhite};\n\n  --horizontal-min-height: 48px;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n  }\n\n  ::slotted(stzh-datalist) {\n    margin-left: space('large');\n  }\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    align-items: center;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space('xsmall');\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    background-color: var(--leading-icon-background-color);\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    @include fontCurve('p1');\n    font-family: var(--font-family);\n    font-weight: var(--font-weight);\n    flex-grow: 1;\n  }\n\n  &__value,\n  &__icon {\n    color: var(--color);\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve('caption');\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__label {\n    @include font('medium');\n    color: $baseLeadColor;\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightTiny;\n      height: $formInputHeightTiny;\n    }\n\n    &.is-button[variant=\"tertiary\"] {\n      --color: inherit;\n    }\n  }\n\n  &__value,\n  &__icon {\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__richtext {\n    color: inherit;\n    font-family: inherit;\n    font-weight: inherit;\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive:hover &__value,\n  &--is-interactive:hover &__icon {\n    color: var(--hover-color);\n  }\n\n  &--is-interactive:hover &__value {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__leading-icon-container,\n  &--is-interactive:focus-within &__leading-icon-container {\n    color: var(--hover-leading-icon-color);\n    background-color: var(--hover-leading-icon-background-color);\n  }\n\n  /* Vertical variant */\n\n  &--direction-vertical {\n    display: flex;\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n  }\n\n  &--direction-vertical#{&}--has-hidden-border {\n    padding-top: calc(#{space('xsmall')} / 2);\n    padding-bottom: calc(#{space('xsmall')} / 2);\n  }\n\n  &--direction-vertical:not(#{&}--has-hidden-border) {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  &--direction-vertical &__leading-icon-container {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--direction-vertical &__leading-icon {\n    --size: #{iconSize('medium')};\n  }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n  }\n\n  /* Horizontal variant */\n\n  &--direction-horizontal,\n  &--direction-horizontal + &__nested {\n    display: contents;\n  }\n\n  &--direction-horizontal + &__nested &__nested-inner {\n    grid-column: 1 / 6;\n  }\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__label,\n  &--direction-horizontal &__meta,\n  &--direction-horizontal &__action-list {\n    min-height: var(--horizontal-min-height);\n  }\n\n  &--direction-horizontal &__label,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__meta {\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n  }\n\n  &--direction-horizontal#{&}--has-hidden-border &__label,\n  &--direction-horizontal#{&}--has-hidden-border &__value,\n  &--direction-horizontal#{&}--has-hidden-border &__meta {\n    padding-top: calc(#{space('xsmall')} / 2);\n    padding-bottom: calc(#{space('xsmall')} / 2);\n  }\n\n  // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  &--direction-horizontal &__label {\n    &:not(:empty) {\n      min-width: var(--label-min-width);\n      padding-right: space('xsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  &--direction-horizontal &__leading-icon-container {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation and default to link icon) */\n  @Prop() icon: string;\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop() meta: string = \"\";\n\n  /** Status Label */\n  @Prop() statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Hide border lines */\n  @Prop({ reflect: true }) hideBorder: boolean = false;\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Whether rel contains external */\n  @State() external: boolean = false;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private actionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n    this.hideBorder = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Fragment>\n        <Item\n          aria-hidden={this.label ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-label`}\n          class={{\n            \"stzh-datalist-item__label\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n        >\n          {this.label}\n        </Item>\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n        >\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n          <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n            <slot name=\"value\"></slot>\n          </stzh-richtext>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this.meta ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n        >\n          {this.statusLabel &&\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          }\n          {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n        </Item>\n      </Fragment>\n    )\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n      >\n        {this.leadingIcon &&\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        }\n      </Item>\n    );\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.direction = this.datalist.currentDirection;\n      this.hideBorder = this.datalist.hideBorder;\n\n      this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n      this.datalist = null;\n    }\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.externalWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !this.href && this.icon;\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n    };\n\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true\n          }}\n          variant=\"tertiary\"\n          size=\"tiny\"\n          aria-label={this.iconLabel || (`${this.label} ${this.value}`)}\n          iconOnly={true}\n          icon={this.icon}\n          onClick={this.actionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton)}\n              </div>\n            </Fragment>\n          }\n          <Item\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n          >\n            {this.href &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            }\n\n            {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            }\n\n            {hasActionButton &&\n              (this.iconTooltip ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton())\n            }\n          </Item>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhDatalistCss","StzhDatalist","this","_items","resizeHandler","media","matches","_this","directionUltra","currentDirection","directionLarge","directionMedium","directionSmall","direction","class_1","prototype","hideBorderWatcher","newValue","stzhHideBorderChange","emit","component","value","directionWatcher","currentDirectionWatcher","stzhDirectionChange","itemsWatcher","JSON","parse","componentWillLoad","items","hideBorder","connectedCallback","addMediaChangeListener","disconnectedCallback","removeMediaChangeListener","render","classes","_a","concat","h","Host","class","role","map","item","Object","assign","length","stzhDatalistItemCss","datalistItemCounter","StzhDatalistItem","actionClick","originalEvent","stzhItemActionClick","handleDirectionChange","event","detail","handleHideBorderChange","class_2","externalWatcher","external","rel","includes","renderInner","isButton","Item","href","Fragment","label","tabindex","id","datalistItemId","target","download","a11yControls","a11yExpanded","localization","$globals","externalLinkLabel","downloadLinkLabel","innerHTML","name","statusLabel","meta","type","statusType","renderLeadingIcon","leadingIcon","datalist","element","closest","addEventListener","removeEventListener","window","stzhComponents","utils","fetchTranslations","_b","sent","hasActionButton","icon","ActionButton","variant","size","iconLabel","iconOnly","onClick","iconTooltip","content"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":["/**\n * @prop --item-label-min-width: Min width of label\n */\n\n:host {\n  --item-label-min-width: 120px;\n\n  @include mq($from: smallheader) {\n    --item-label-min-width: 144px;\n  }\n\n  &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n    --item-label-min-width: none;\n  }\n}\n\n:host ::slotted(stzh-details),\n.stzh-datalist stzh-details {\n  --content-grid-column: 1 / 6;\n  --content-padding: #{space('large')} 0 #{spaceCurveValue('medium')};\n  --content-border-bottom: 1px solid #{$baseBorderColor};\n\n  @include mq($from: medium) {\n    --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'medium')};\n  }\n\n  @include mq($from: large) {\n    --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'large')};\n  }\n}\n\n.stzh-datalist {\n  &__list {\n    width: 100%;\n  }\n\n  /* Has hidden border variant */\n\n  &--has-hidden-border &__list {\n    margin-top: calc(#{space('xsmall')} / -2);\n    margin-bottom: calc(#{space('xsmall')} / -2);\n  }\n\n  /* Vertical variant */\n\n  &--direction-horizontal &__list {\n    width: 100%;\n    display: grid;\n    border-collapse: collapse;\n    grid-template-columns: auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto;\n    align-items: stretch;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Watch,\n  Prop,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemEntry,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport {\n  media,\n  addMediaChangeListener,\n  removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true\n})\nexport class StzhDatalist {\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: \"vertical\" | \"horizontal\" | \"inherit\" = \"horizontal\";\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n  /** Hide border lines between items */\n  @Prop({ reflect: true }) hideBorder: boolean = false;\n\n  /**\n   * Whether to disable min-width of datalist item label for the `horizontal` variant.\n   *\n   * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n   * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n   *\n   * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n   */\n  @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n  /** Current direction in use (readonly)  */\n  @Prop({ reflect: true }) currentDirection: \"vertical\" | \"horizontal\";\n\n  /**\n   * Items in datalist\n   * Array of objects that must at least include `value` attribute.\n   * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n   * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n   */\n  @Prop() items: StzhDatalistItemEntry[] | string = [];\n  private _items: StzhDatalistItemEntry[] = [];\n\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  /** Hide border change event */\n  @Event() stzhHideBorderChange: EventEmitter<StzhDatalistHideBorderChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"hideBorder\")\n  hideBorderWatcher(newValue: boolean) {\n    this.stzhHideBorderChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.resizeHandler();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: \"vertical\" | \"horizontal\") {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue\n    });\n  }\n\n  @Watch(\"items\")\n  itemsWatcher(newValue: any[] | string) {\n    if (typeof newValue === \"string\") {\n      this._items = JSON.parse(newValue);\n    } else {\n      this._items = newValue;\n    }\n  }\n\n  resizeHandler = () => {\n    if (media(\"ultra\").matches && this.directionUltra !== \"inherit\") {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge !== \"inherit\") {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium !== \"inherit\") {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall !== \"inherit\") {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  }\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.hideBorderWatcher(this.hideBorder);\n    this.resizeHandler();\n  }\n\n  connectedCallback() {\n    addMediaChangeListener(this.resizeHandler);\n  }\n\n  disconnectedCallback() {\n    removeMediaChangeListener(this.resizeHandler);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datalist\": true,\n      \"stzh-datalist--has-hidden-border\": this.hideBorder,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <div class=\"stzh-datalist__list\" role=\"list\">\n            {this._items.map((item) =>\n              <stzh-datalist-item {...item}>\n                {item.items && item.items.length > 0 &&\n                  <stzh-datalist items={item.items}></stzh-datalist>\n                }\n              </stzh-datalist-item>\n            )}\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  --font-family: var(--stzh-font-family-regular);\n  --font-weight: var(--stzh-font-weight-regular);\n  --color: inherit;\n  --action-display: flex;\n  --label-min-width: var(--item-label-min-width, none);\n  --leading-icon-background-color: #{$colorGrey5};\n  --leading-icon-color: #{$colorGrey70};\n\n  --hover-leading-icon-background-color: #{$colorPrimaryHover};\n  --hover-leading-icon-color: #{$colorWhite};\n\n  --horizontal-min-height: 48px;\n\n  display: contents;\n\n  &[href]:not([href=\"\"]),\n  &[a11y-expanded],\n  &[a11y-controls] {\n    --color: #{$colorPrimary};\n    --hover-color: #{$colorPrimaryHover};\n  }\n\n  ::slotted(stzh-datalist) {\n    margin-left: space('large');\n  }\n}\n\n.stzh-datalist-item {\n  position: relative;\n  text-decoration-line: none;\n\n  &__vhidden {\n    @include visuallyhidden;\n  }\n\n  &__wrapper {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  &__leading,\n  &__value,\n  &__label,\n  &__meta,\n  &__action-list {\n    color: inherit;\n    display: flex;\n    align-items: center;\n    appearance: none;\n    font-family: inherit;\n    background: transparent;\n    border: none;\n    padding: 0;\n    text-decoration-line: none;\n\n    &.is-button,\n    &.is-link {\n      cursor: pointer;\n    }\n  }\n\n  &__leading {\n    flex-shrink: 0;\n\n    &:not(:empty) {\n      padding-right: space('xsmall');\n    }\n  }\n\n  &__leading-icon-container {\n    color: var(--leading-icon-color);\n    background-color: var(--leading-icon-background-color);\n    width: 40px;\n    height: 40px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    border-radius: 50%;\n    transition-property: color, background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__value {\n    @include fontCurve('p1');\n    font-family: var(--font-family);\n    font-weight: var(--font-weight);\n    flex-grow: 1;\n  }\n\n  &__value,\n  &__icon {\n    color: var(--color);\n  }\n\n  &__label,\n  &__meta {\n    @include fontCurve('caption');\n  }\n\n  &__meta {\n    justify-content: flex-end;\n  }\n\n  &__label {\n    @include font('medium');\n    color: $baseLeadColor;\n  }\n\n  &__action-list {\n    display: var(--action-display);\n    justify-content: center;\n    text-align: center;\n\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  &__action {\n    &.is-non-interactive {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      width: $formInputHeightTiny;\n      height: $formInputHeightTiny;\n    }\n\n    &.is-button[variant=\"tertiary\"] {\n      --color: inherit;\n    }\n  }\n\n  &__value,\n  &__icon {\n    transition: color $baseTransitionAnimationSpeed;\n  }\n\n  &__richtext {\n    color: inherit;\n    font-family: inherit;\n    font-weight: inherit;\n  }\n\n  &__interactive {\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  /* Button variant */\n\n  &--is-button &__icon.is-open {\n    display: none;\n  }\n\n  &--is-button#{&}--is-expanded &__icon {\n    &.is-closed {\n      display: none;\n    }\n\n    &.is-open {\n      display: inline-flex;\n    }\n  }\n\n  /* Interactive variant */\n\n  &--is-interactive:hover &__value,\n  &--is-interactive:hover &__icon {\n    color: var(--hover-color);\n  }\n\n  &--is-interactive:hover &__value {\n    text-decoration-line: underline;\n  }\n\n  &--is-interactive:hover &__leading-icon-container,\n  &--is-interactive:focus-within &__leading-icon-container {\n    color: var(--hover-leading-icon-color);\n    background-color: var(--hover-leading-icon-background-color);\n  }\n\n  /* Vertical variant */\n\n  &--direction-vertical {\n    display: flex;\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n  }\n\n  &--direction-vertical#{&}--has-hidden-border {\n    padding-top: calc(#{space('xsmall')} / 2);\n    padding-bottom: calc(#{space('xsmall')} / 2);\n  }\n\n  &--direction-vertical:not(#{&}--has-hidden-border) {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  &--direction-vertical &__leading-icon-container {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--direction-vertical &__leading-icon {\n    --size: #{iconSize('medium')};\n  }\n\n  &--direction-vertical &__meta {\n    flex-direction: column;\n  }\n\n  /* Horizontal variant */\n\n  &--direction-horizontal,\n  &--direction-horizontal + &__nested {\n    display: contents;\n  }\n\n  &--direction-horizontal + &__nested &__nested-inner {\n    grid-column: 1 / 6;\n  }\n\n  &--direction-horizontal &__leading,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__label,\n  &--direction-horizontal &__meta,\n  &--direction-horizontal &__action-list {\n    min-height: var(--horizontal-min-height);\n  }\n\n  &--direction-horizontal &__label,\n  &--direction-horizontal &__value,\n  &--direction-horizontal &__meta {\n    padding-top: space('xsmall');\n    padding-bottom: space('xsmall');\n  }\n\n  &--direction-horizontal#{&}--has-hidden-border &__label,\n  &--direction-horizontal#{&}--has-hidden-border &__value,\n  &--direction-horizontal#{&}--has-hidden-border &__meta {\n    padding-top: calc(#{space('xsmall')} / 2);\n    padding-bottom: calc(#{space('xsmall')} / 2);\n  }\n\n  // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n  &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n    border-bottom: 1px solid $baseBorderColor;\n  }\n\n  &--direction-horizontal &__label {\n    &:not(:empty) {\n      min-width: var(--label-min-width);\n      padding-right: space('xsmall');\n    }\n  }\n\n  &--direction-horizontal &__meta {\n    &:not(:empty) {\n      padding-left: space('xsmall');\n    }\n  }\n\n  &--direction-horizontal &__leading-icon-container {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--direction-horizontal &__meta-status + &__meta-text {\n    margin-left: space('xsmall');\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Event,\n  EventEmitter,\n  Fragment,\n  State,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhDatalistItemActionClickEvent,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n  tag: \"stzh-datalist-item\",\n  styleUrl: \"stzh-datalist-item.scss\",\n  scoped: true\n})\nexport class StzhDatalistItem {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Link */\n  @Prop({ reflect: true }) href: string;\n\n  /** Rel (if href is used) */\n  @Prop() rel: string;\n\n  /** Target (if href is used) */\n  @Prop() target: string;\n\n  /** Download attribute of link (if `href` used) */\n  @Prop() download: string;\n\n  /** Leading icon */\n  @Prop() leadingIcon: string;\n\n  /** Icon of action button (if href is used, will only be for presentation and default to link icon) */\n  @Prop() icon: string;\n\n  /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n  @Prop() iconLabel: string;\n\n  /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n  @Prop() iconTooltip: string;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Value (or use value slot instead) */\n  @Prop() value: string = \"\";\n\n  /** Meta */\n  @Prop() meta: string = \"\";\n\n  /** Status Label */\n  @Prop() statusLabel: string = \"\";\n\n  /** Status Type */\n  @Prop() statusType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n  /** Hide border lines */\n  @Prop({ reflect: true }) hideBorder: boolean = false;\n\n  /** Aria expanded of link/button */\n  @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n  /** Aria controls of link/button */\n  @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n  /** Whether rel contains external */\n  @State() external: boolean = false;\n\n  /** Item action click event */\n  @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n  @Element() element: HTMLStzhDatalistItemElement;\n\n  @Watch(\"rel\")\n  externalWatcher() {\n    this.external = this.rel && this.rel.includes(\"external\");\n  }\n\n  private datalist: HTMLStzhDatalistElement;\n  private datalistItemId: string;\n\n  private actionClick = (originalEvent: MouseEvent) => {\n    this.stzhItemActionClick.emit({\n      component: \"stzh-datalist-item\",\n      originalEvent\n    });\n  }\n\n  private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n    this.direction = event.detail.value;\n  }\n\n  private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n    this.hideBorder = event.detail.value;\n  }\n\n  private renderInner(isButton: boolean): DocumentFragment {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Fragment>\n        <Item\n          aria-hidden={this.label ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-label`}\n          class={{\n            \"stzh-datalist-item__label\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n        >\n          {this.label}\n        </Item>\n\n        <Item\n          id={`${this.datalistItemId}-value`}\n          class={{\n            \"stzh-datalist-item__value\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n          aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n          aria-controls={this.a11yControls || null}\n          aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n            ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n        >\n          {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n          {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n          <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n            <slot name=\"value\"></slot>\n          </stzh-richtext>\n        </Item>\n\n        <Item\n          aria-hidden={this.statusLabel || this.meta ? null : \"true\"}\n          tabindex=\"-1\"\n          id={`${this.datalistItemId}-meta`}\n          class={{\n            \"stzh-datalist-item__meta\": true,\n            \"is-button\": isButton,\n            \"is-link\": !!this.href\n          }}\n          href={this.href}\n          rel={this.rel}\n          target={this.target}\n          download={this.download}\n        >\n          {this.statusLabel &&\n            <stzh-status\n              class=\"stzh-datalist-item__meta-status\"\n              label={this.statusLabel}\n              type={this.statusType}\n            ></stzh-status>\n          }\n          {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n        </Item>\n      </Fragment>\n    )\n  }\n\n  private renderLeadingIcon(isButton: boolean): HTMLElement {\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    return (\n      <Item\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        tabindex=\"-1\"\n        class={{\n          \"stzh-datalist-item__leading\": true,\n          \"is-button\": isButton,\n          \"is-link\": !!this.href\n        }}\n        href={this.href}\n        rel={this.rel}\n        target={this.target}\n        download={this.download}\n      >\n        {this.leadingIcon &&\n          <div class=\"stzh-datalist-item__leading-icon-container\">\n            <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n          </div>\n        }\n      </Item>\n    );\n  }\n\n  async connectedCallback() {\n    this.datalist = this.element.closest(\"stzh-datalist\");\n\n    if (this.datalist) {\n      this.direction = this.datalist.currentDirection;\n      this.hideBorder = this.datalist.hideBorder;\n\n      this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.datalist) {\n      this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n      this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n      this.datalist = null;\n    }\n  }\n\n  async componentWillLoad() {\n    this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n    this.externalWatcher();\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n    }\n  }\n\n  render() {\n    const isButton = typeof this.a11yExpanded !== \"undefined\"\n      || typeof this.a11yControls !== \"undefined\";\n\n    const hasActionButton = !this.href && this.icon;\n\n    const classes = {\n      \"stzh-datalist-item\": true,\n      \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n      \"stzh-datalist-item--is-link\": !!this.href,\n      \"stzh-datalist-item--is-button\": isButton,\n      \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n      \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n      [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n    };\n\n    const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n    const ActionButton = () => {\n      return (\n        <stzh-button\n          class={{\n            \"stzh-datalist-item__action\": true,\n            \"is-button\": true\n          }}\n          variant=\"tertiary\"\n          size=\"tiny\"\n          aria-label={this.iconLabel || (`${this.label} ${this.value}`)}\n          iconOnly={true}\n          icon={this.icon}\n          onClick={this.actionClick}\n        ></stzh-button>\n      );\n    }\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.direction === \"horizontal\" ?\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              {this.renderInner(isButton)}\n            </Fragment>\n            :\n            <Fragment>\n              {this.renderLeadingIcon(isButton)}\n              <div class=\"stzh-datalist-item__wrapper\">\n                {this.renderInner(isButton)}\n              </div>\n            </Fragment>\n          }\n          <Item\n            role={hasActionButton ? null : \"presentation\"}\n            aria-hidden={hasActionButton ? null : \"true\"}\n            tabindex=\"-1\"\n            class={{\n              \"stzh-datalist-item__action-list\": true,\n              \"is-button\": isButton,\n              \"is-link\": !!this.href\n            }}\n            href={this.href}\n            rel={this.rel}\n            target={this.target}\n            download={this.download}\n          >\n            {this.href &&\n              (this.download ?\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n                </div>\n                :\n                <div class=\"stzh-datalist-item__action is-non-interactive\">\n                  <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n                </div>\n              )\n            }\n\n            {isButton &&\n              <div class=\"stzh-datalist-item__action is-non-interactive\">\n                <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n                <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n              </div>\n            }\n\n            {hasActionButton &&\n              (this.iconTooltip ?\n                <stzh-tooltip content={this.iconTooltip}>\n                  {ActionButton()}\n                </stzh-tooltip>\n                :\n                ActionButton())\n            }\n          </Item>\n        </div>\n\n        <div class=\"stzh-datalist-item__nested\">\n          <div class=\"stzh-datalist-item__nested-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/esm-es5/stzh-datepicker_3.entry.js

@@ -1,2 +1,2 @@
-var __awaiter=this&&this.__awaiter||function(t,e,r,i){function o(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,s){function a(t){try{h(i.next(t))}catch(t){s(t)}}function n(t){try{h(i["throw"](t))}catch(t){s(t)}}function h(t){t.done?r(t.value):o(t.value).then(a,n)}h((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},i,o,s,a;return a={next:n(0),throw:n(1),return:n(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function n(t){return function(e){return h([t,e])}}function h(n){if(i)throw new TypeError("Generator is already executing.");while(a&&(a=0,n[0]&&(r=0)),r)try{if(i=1,o&&(s=n[0]&2?o["return"]:n[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,n[1])).done)return s;if(o=0,s)n=[n[0]&2,s.value];switch(n[0]){case 0:case 1:s=n;break;case 4:r.label++;return{value:n[1],done:false};case 5:r.label++;o=n[1];n=[0];continue;case 7:n=r.ops.pop();r.trys.pop();continue;default:if(!(s=r.trys,s=s.length>0&&s[s.length-1])&&(n[0]===6||n[0]===2)){r=0;continue}if(n[0]===3&&(!s||n[1]>s[0]&&n[1]<s[3])){r.label=n[1];break}if(n[0]===6&&r.label<s[1]){r.label=s[1];s=n;break}if(s&&r.label<s[2]){r.label=s[2];r.ops.push(n);break}if(s[2])r.ops.pop();r.trys.pop();continue}n=e.call(t,r)}catch(t){n=[6,t];o=0}finally{i=s=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";import{a as printISODate,p as parseISODate}from"./date-utils-c0d90fa4.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import{S as StzhInputDescription}from"./stzh-input-description-100efe38.js";import{c as camelCase}from"./string-utils-e252977e.js";var stzhDatepickerCss=".sc-stzh-datepicker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{width:100%}.stzh-datepicker__popover.sc-stzh-datepicker{--padding:var(--stzh-space-medium);--width:auto}.stzh-datepicker__actions.sc-stzh-datepicker{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){margin-top:var(--stzh-space-xsmall)}";var StzhDatepicker=function(){function t(t){var e=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.onRootFocus=function(){if(e.input){e.input.setFocus()}};this.onInputChanged=function(){var t=e.dateAdapter.parse(e.input.value,"dateInput");if(e.input.value===""||t){var r=printISODate(t);if(e.value!==r){if(e.calendar){e.calendar.value=r}e.value=r}else{e.valueWatcher(r)}e.stzhChange.emit({component:"stzh-datepicker",value:e.value,valueAsDate:t})}};this.onCalendarChange=function(t){e.value=t.detail.value;e.stzhChange.emit({component:"stzh-datepicker",value:e.value,valueAsDate:t.detail.valueAsDate});if(e.input){e.input.value=t.detail.valueAsDate&&e.dateAdapter.format(t.detail.valueAsDate,"dateInput")}if(e.popover){e.popover.hide()}};this.calendarMin="";this.calendarMax="";this.calendarIsDateDisabled=function(){return false};this.name="";this.value="";this.label="";this.labelHidden=false;this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.showMarker=false;this.size="default";this.inline=false;this.dateAdapter=undefined;this.localization=undefined;this.buttonLabel=undefined}t.prototype.createDateFormatters=function(){if(this.localization){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.$locale,{day:"numeric",month:"long",year:"numeric"})}};t.prototype.valueWatcher=function(t){var e=parseISODate(t);if(this.calendar){this.calendar.value=t}if(this.input){this.input.value=this.dateAdapter.format(e,"dateInput")}this.updateButtonAccessibleLabel()};t.prototype.setDate=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.value=printISODate(t);return[2]}))}))};t.prototype.getPopover=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.popover]}))}))};t.prototype.updateButtonAccessibleLabel=function(){if(!this.localization){return}try{var t=parseISODate(this.value);this.buttonLabel="".concat(this.label,", ").concat(this.localization.buttonLabel,", ").concat(this.localization.selectedDateMessage," ").concat(this.dateFormatLong.format(t))}catch(t){this.buttonLabel="".concat(this.label,", ").concat(this.localization.buttonLabel)}};t.prototype.connectedCallback=function(){this.createDateFormatters()};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"datepicker")];case 1:t.localization=e.sent();e.label=2;case 2:if(!this.dateAdapter){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}return[2]}}))}))};t.prototype.componentDidLoad=function(){this.valueWatcher(this.value)};t.prototype.render=function(){var t=this;var e={"stzh-datepicker":true,"stzh-datepicker--inline":this.inline};return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:e},h("input",{type:"hidden",name:this.name,value:this.value}),this.inline&&h(Fragment,null,h("stzh-calendar",{ref:function(e){return t.calendar=e},isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),h("div",{class:"stzh-datepicker__actions"},h("slot",{name:"action"}))),!this.inline&&h("stzh-input",{label:this.label,labelHidden:this.labelHidden,ref:function(e){return t.input=e},noAutocomplete:true,onStzhChanged:this.onInputChanged,readonly:this.readonly,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,invalid:this.invalid,required:this.required,showMarker:this.showMarker,size:this.size},h("stzh-popover",{ref:function(e){return t.popover=e},class:"stzh-datepicker__popover",slot:"button-right",placement:"bottom-end",label:this.label},h("stzh-button",{variant:"input","icon-only":true,icon:"calendar",disabled:this.disabled,a11yLabel:this.buttonLabel}),h("div",{slot:"content"},h("stzh-calendar",{ref:function(e){return t.calendar=e},isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),h("div",{class:"stzh-datepicker__actions"},h("slot",{name:"action"})))))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{localization:["createDateFormatters"],value:["valueWatcher"]}},enumerable:false,configurable:true});return t}();StzhDatepicker.style=stzhDatepickerCss;var stzhRadioCss='.sc-stzh-radio-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{display:inline-block}.sc-stzh-radio-h .sc-stzh-radio-s>stzh-text{--color:inherit}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-radio__marker-text.sc-stzh-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radio__description-wrapper.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radio__description-long.sc-stzh-radio{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-popover[open].sc-stzh-radio:not([open=false]) .stzh-radio__description-long-button.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__description-long-button.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radio__description-long-button.sc-stzh-radio:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:""}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker-symbol.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:focus:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:focus~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey61)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:transparent}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-black8)}';var radioCounter=0;var StzhRadio=function(){function t(t){var e=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onInput=function(t){e.checked=e.input.checked;e.stzhChange.emit({component:"stzh-radio",originalEvent:t,value:e.value,checked:e.checked})};this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var r=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(r);e.stzhFocus.emit({component:"stzh-radio",originalEvent:t})};this.onBlur=function(t){var r=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(r);e.stzhBlur.emit({component:"stzh-radio",originalEvent:t})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.showMarker=false;this.checked=false;this.label="";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.a11yDescribedby=""}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.input.focus();return[2]}))}))};t.prototype.errorWatcher=function(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(e){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.inputId="stzh-radio-".concat(radioCounter++);this.errorWatcher(this.error);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"radio")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t=this;var e=hasSlot(this.element,"description")||!!this.description;var r=hasSlot(this.element,"description-long")||!!this.descriptionLong;var i=hasSlot(this.element,"error")||!!this.error;var o={"stzh-radio":true,"stzh-radio--has-description":e,"stzh-radio--has-description-long":r,"stzh-radio--has-error":i,"stzh-radio--is-required":this.required,"stzh-radio--is-invalid":this.invalid,"stzh-radio--is-disabled":this.disabled};return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:o},h("label",{class:"stzh-radio__field-wrapper"},h("input",{class:"stzh-radio__input",ref:function(e){return t.input=e},type:"radio",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),h("div",{class:"stzh-radio__mark"},h("div",{class:"stzh-radio__check"})),h("div",{class:"stzh-radio__label"},this.label?this.label:h("slot",null),this.showMarker&&h("span",{class:"stzh-radio__marker"},h("span",{class:"stzh-radio__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-radio__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),h(StzhInputDescription,{classPrefix:"stzh-radio",id:"".concat(this.inputId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:r,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{error:["errorWatcher"]}},enumerable:false,configurable:true});return t}();StzhRadio.style=stzhRadioCss;var stzhRadiogroupCss=".sc-stzh-radiogroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h[direction=vertical] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-radiogroup-h[direction=horizontal] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-popover[open].sc-stzh-radiogroup:not([open=false]) .stzh-radiogroup__description-long-button.sc-stzh-radiogroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{-ms-flex-direction:row;flex-direction:row}";var SELECTOR_RADIO="stzh-radio, stzh-button[type=radio], stzh-card";var radiogroupCounter=0;var StzhRadiogroup=function(){function t(t){var e=this;registerInstance(this,t);this._preventUpdateProperties=[];this.init=function(){e.radios=Array.from(e.element.querySelectorAll(SELECTOR_RADIO));e.updateRadiosProperty("show-marker",false);e.updateRadiosProperty("a11y-describedby","".concat(e.radiogroupId,"-description"));e.watchValue(e.value);e.watchName(e.name);e.watchDisabled(e.disabled);e.watchInvalid(e.invalid);e.watchRequired(e.required)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.required=false;this.showMarker=false;this.value="";this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.checkedRadio=null;this.preventUpdateProperties=[]}t.prototype.watchName=function(t){this.updateRadiosProperty("name",t)};t.prototype.watchDisabled=function(t){this.updateRadiosProperty("disabled",t)};t.prototype.watchInvalid=function(t){this.updateRadiosProperty("invalid",t)};t.prototype.watchRequired=function(t){this.updateRadiosProperty("required",t)};t.prototype.watchValue=function(t){this.updateCheckedRadioByValue(t)};t.prototype.errorWatcher=function(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(e){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0};t.prototype.preventUpdatePropertiesWatcher=function(t){if(typeof t==="string"){this._preventUpdateProperties=JSON.parse(t)}else{this._preventUpdateProperties=t}};t.prototype.onChange=function(t){this.value=t.detail.value};t.prototype.updateRadiosProperty=function(t,e){var r=this;this.radios.forEach((function(i){if(t==="name"||r._preventUpdateProperties.indexOf(t)===-1){i[camelCase(t)]=e}}))};t.prototype.updateCheckedRadioByValue=function(t){this.checkedRadio=this.radios.find((function(e){return e.value===t}));if(this.checkedRadio){this.checkedRadio.checked=true}this.uncheckRadios()};t.prototype.uncheckRadios=function(){var t=this;this.radios.forEach((function(e){if(!t.checkedRadio||e!==t.checkedRadio){e.checked=false}}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.radiogroupId="stzh-radiogroup-".concat(radiogroupCounter++);this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"radiogroup")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.componentShouldUpdate=function(t,e,r){return r!=="checkedRadio"};t.prototype.componentDidRender=function(){this.init()};t.prototype.connectedCallback=function(){if(!this.value){this.radios=Array.from(this.element.querySelectorAll(SELECTOR_RADIO));var t=this.radios.find((function(t){return t.checked}));if(t){this.value=t.value}}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}};t.prototype.render=function(){var t;var e=hasSlot(this.element,"description")||!!this.description;var r=hasSlot(this.element,"description-long")||!!this.descriptionLong;var i=hasSlot(this.element,"error")||!!this.error;var o=(t={"stzh-radiogroup":true,"stzh-radiogroup--has-description":e,"stzh-radiogroup--has-description-long":r,"stzh-radiogroup--has-error":i,"stzh-radiogroup--is-required":this.required,"stzh-radiogroup--is-disabled":this.disabled,"stzh-radiogroup--is-invalid":this.invalid,"stzh-radiogroup--hide-legend":this.hideLegend},t["stzh-radiogroup--direction-".concat(this.direction)]=!!this.direction,t);return h("fieldset",{class:o},this.legend&&h("legend",{class:"stzh-radiogroup__legend"},this.legend,this.showMarker&&h("span",{class:"stzh-radiogroup__marker"},h("span",{class:"stzh-radiogroup__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-radiogroup__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),h("div",{class:"stzh-radiogroup__fields"},h("slot",null)),h(StzhInputDescription,{classPrefix:"stzh-radiogroup",id:"".concat(this.radiogroupId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:r,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel}))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{name:["watchName"],disabled:["watchDisabled"],invalid:["watchInvalid"],required:["watchRequired"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}},enumerable:false,configurable:true});return t}();StzhRadiogroup.style=stzhRadiogroupCss;export{StzhDatepicker as stzh_datepicker,StzhRadio as stzh_radio,StzhRadiogroup as stzh_radiogroup};
+var __awaiter=this&&this.__awaiter||function(t,e,r,i){function o(t){return t instanceof r?t:new r((function(e){e(t)}))}return new(r||(r=Promise))((function(r,s){function a(t){try{h(i.next(t))}catch(t){s(t)}}function n(t){try{h(i["throw"](t))}catch(t){s(t)}}function h(t){t.done?r(t.value):o(t.value).then(a,n)}h((i=i.apply(t,e||[])).next())}))};var __generator=this&&this.__generator||function(t,e){var r={label:0,sent:function(){if(s[0]&1)throw s[1];return s[1]},trys:[],ops:[]},i,o,s,a;return a={next:n(0),throw:n(1),return:n(2)},typeof Symbol==="function"&&(a[Symbol.iterator]=function(){return this}),a;function n(t){return function(e){return h([t,e])}}function h(n){if(i)throw new TypeError("Generator is already executing.");while(a&&(a=0,n[0]&&(r=0)),r)try{if(i=1,o&&(s=n[0]&2?o["return"]:n[0]?o["throw"]||((s=o["return"])&&s.call(o),0):o.next)&&!(s=s.call(o,n[1])).done)return s;if(o=0,s)n=[n[0]&2,s.value];switch(n[0]){case 0:case 1:s=n;break;case 4:r.label++;return{value:n[1],done:false};case 5:r.label++;o=n[1];n=[0];continue;case 7:n=r.ops.pop();r.trys.pop();continue;default:if(!(s=r.trys,s=s.length>0&&s[s.length-1])&&(n[0]===6||n[0]===2)){r=0;continue}if(n[0]===3&&(!s||n[1]>s[0]&&n[1]<s[3])){r.label=n[1];break}if(n[0]===6&&r.label<s[1]){r.label=s[1];s=n;break}if(s&&r.label<s[2]){r.label=s[2];r.ops.push(n);break}if(s[2])r.ops.pop();r.trys.pop();continue}n=e.call(t,r)}catch(t){n=[6,t];o=0}finally{i=s=0}if(n[0]&5)throw n[1];return{value:n[0]?n[1]:void 0,done:true}}};import{r as registerInstance,c as createEvent,h,F as Fragment,a as Host,g as getElement}from"./index-bfb5b569.js";import{a as printISODate}from"./date-utils-c0d90fa4.js";import{h as hasSlot}from"./utils-8bb4c3c6.js";import{S as StzhInputDescription}from"./stzh-input-description-100efe38.js";import{c as camelCase}from"./string-utils-e252977e.js";var stzhDatepickerCss=".sc-stzh-datepicker-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker{outline-style:none !important}.sc-stzh-datepicker-h .stzh-fylingfocus-focused.sc-stzh-datepicker::-moz-focus-inner{border:0 !important}.sc-stzh-datepicker-h{width:100%}.stzh-datepicker__popover.sc-stzh-datepicker{--padding:var(--stzh-space-medium);--width:auto}.stzh-datepicker__actions.sc-stzh-datepicker{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){margin-top:var(--stzh-space-xsmall)}";var StzhDatepicker=function(){function t(t){var e=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.onRootFocus=function(){if(e.input){e.input.setFocus()}};this.onInputChanged=function(){var t=e.dateAdapter.parse(e.input.value,"dateInput");if(e.input.value===""||t){var r=e._internalDateAdapter.format(t,"dateInput");if(e.value!==r){if(e.calendar){e.calendar.value=printISODate(t)}e.value=r}else{e.valueWatcher(r)}e.stzhChange.emit({component:"stzh-datepicker",value:e.value,valueAsDate:t})}};this.onCalendarChange=function(t){e.value=t.detail.valueAsDate&&e._internalDateAdapter.format(t.detail.valueAsDate,"dateInput");e.stzhChange.emit({component:"stzh-datepicker",value:e.value,valueAsDate:t.detail.valueAsDate});if(e.input){e.input.value=t.detail.valueAsDate&&e.dateAdapter.format(t.detail.valueAsDate,"dateInput")}if(e.popover){e.popover.hide()}};this.calendarMin="";this.calendarMax="";this.calendarIsDateDisabled=function(){return false};this.name="";this.value="";this.label="";this.labelHidden=false;this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.showMarker=false;this.size="default";this.inline=false;this.dateAdapter=undefined;this.internalDateAdapter="iso";this.localization=undefined;this.buttonLabel=undefined}t.prototype.createDateFormatters=function(){if(this.localization){this.dateFormatLong=new Intl.DateTimeFormat(this.localization.$locale,{day:"numeric",month:"long",year:"numeric"})}};t.prototype.valueWatcher=function(t){var e=this._internalDateAdapter.parse(t,"dateInput");if(this.calendar){this.calendar.value=printISODate(e)}if(this.input){this.input.value=this.dateAdapter.format(e,"dateInput")}this.updateButtonAccessibleLabel()};t.prototype.dateAdapterWatcher=function(t){if(!t){this.dateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formats,this.localization.$globals)}};t.prototype.internalDateAdapterWatcher=function(t){if(t==="iso"||!t){this._internalDateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formatsIso,this.localization.$globals)}else if(t==="legacy"){this._internalDateAdapter=window.stzhComponents.utils.createFormatParseAdapter(this.localization.$formatsLegacy,this.localization.$globals)}else{this._internalDateAdapter=t}};t.prototype.setDate=function(t){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(e){this.value=this._internalDateAdapter.format(t,"dateInput");return[2]}))}))};t.prototype.getPopover=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){return[2,this.popover]}))}))};t.prototype.updateButtonAccessibleLabel=function(){if(!this.localization){return}try{var t=this._internalDateAdapter.parse(this.value,"dateInput");this.buttonLabel="".concat(this.label,", ").concat(this.localization.buttonLabel,", ").concat(this.localization.selectedDateMessage," ").concat(this.dateFormatLong.format(t))}catch(t){this.buttonLabel="".concat(this.label,", ").concat(this.localization.buttonLabel)}};t.prototype.connectedCallback=function(){this.createDateFormatters()};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"datepicker")];case 1:t.localization=e.sent();e.label=2;case 2:this.dateAdapterWatcher(this.dateAdapter);this.internalDateAdapterWatcher(this.internalDateAdapter);return[2]}}))}))};t.prototype.componentDidLoad=function(){this.valueWatcher(this.value)};t.prototype.render=function(){var t=this;var e={"stzh-datepicker":true,"stzh-datepicker--inline":this.inline};return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:e},h("input",{type:"hidden",name:this.name,value:this.value}),this.inline&&h(Fragment,null,h("stzh-calendar",{ref:function(e){return t.calendar=e},isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),h("div",{class:"stzh-datepicker__actions"},h("slot",{name:"action"}))),!this.inline&&h("stzh-input",{label:this.label,labelHidden:this.labelHidden,ref:function(e){return t.input=e},noAutocomplete:true,onStzhChanged:this.onInputChanged,readonly:this.readonly,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,invalid:this.invalid,required:this.required,showMarker:this.showMarker,size:this.size},h("stzh-popover",{ref:function(e){return t.popover=e},class:"stzh-datepicker__popover",slot:"button-right",placement:"bottom-end",label:this.label},h("stzh-button",{variant:"input","icon-only":true,icon:"calendar",disabled:this.disabled,a11yLabel:this.buttonLabel}),h("div",{slot:"content"},h("stzh-calendar",{ref:function(e){return t.calendar=e},isDateDisabled:this.calendarIsDateDisabled,min:this.calendarMin,max:this.calendarMax,onStzhChange:this.onCalendarChange}),h("div",{class:"stzh-datepicker__actions"},h("slot",{name:"action"})))))))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{localization:["createDateFormatters"],value:["valueWatcher"],dateAdapter:["dateAdapterWatcher"],internalDateAdapter:["internalDateAdapterWatcher"]}},enumerable:false,configurable:true});return t}();StzhDatepicker.style=stzhDatepickerCss;var stzhRadioCss='.sc-stzh-radio-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-radio-h{display:none}.sc-stzh-radio-h *.sc-stzh-radio,.sc-stzh-radio-h *.sc-stzh-radio::before,.sc-stzh-radio-h *.sc-stzh-radio::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-radio-h .has-focus.sc-stzh-radio{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio{outline-style:none !important}.sc-stzh-radio-h .stzh-fylingfocus-focused.sc-stzh-radio::-moz-focus-inner{border:0 !important}.sc-stzh-radio-h{display:inline-block}.sc-stzh-radio-h .sc-stzh-radio-s>stzh-text{--color:inherit}.stzh-radio__marker-symbol.sc-stzh-radio{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-radio__marker-text.sc-stzh-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radio__description-wrapper.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radio__error.sc-stzh-radio,.stzh-radio__description.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radio__error.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio__error-list.sc-stzh-radio{list-style:none;margin:0;padding:0}.stzh-radio__description.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radio__description-long.sc-stzh-radio{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radio__description-long-popover.sc-stzh-radio{--width:auto;--max-width:27.3125rem}.stzh-radio__description-long-popover[open].sc-stzh-radio:not([open=false]) .stzh-radio__description-long-button.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__description-long-button.sc-stzh-radio{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radio__description-long-button.sc-stzh-radio:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio stzh-icon.stzh-radio__description-long-icon.sc-stzh-radio{--size:var(--stzh-icon-size-xsmall)}.stzh-radio--has-error.sc-stzh-radio .stzh-radio__error.sc-stzh-radio,.stzh-radio--has-description.sc-stzh-radio .stzh-radio__description.sc-stzh-radio{margin-top:var(--stzh-space-xxsmall)}.stzh-radio__field-wrapper.sc-stzh-radio{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);position:relative;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}.stzh-radio__input.sc-stzh-radio{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;z-index:-1;opacity:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--stzh-form-input-border-radius)}.stzh-radio__mark.sc-stzh-radio{border:0.0625rem solid var(--stzh-color-grey61);background-color:var(--stzh-color-white);width:1.5rem;height:1.5rem;-ms-flex-negative:0;flex-shrink:0;border-radius:50%;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed)}.stzh-radio__mark.sc-stzh-radio::before{content:""}.stzh-radio__check.sc-stzh-radio{background-color:currentColor;color:var(--stzh-color-primary, var(--stzh-color-zueriblue));width:0.5rem;height:0.5rem;border-radius:50%;opacity:0}@media (forced-colors: active), (-ms-high-contrast: active){.stzh-radio__check.sc-stzh-radio{background-color:ButtonText}}.stzh-radio__label.sc-stzh-radio{display:inline-block;color:var(--stzh-base-color);-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);line-height:1.5rem}.stzh-radio__label.sc-stzh-radio:empty{display:none}.stzh-radio__marker-symbol.sc-stzh-radio{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}.stzh-radio.sc-stzh-radio:hover .stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__label.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__label.sc-stzh-radio{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio.sc-stzh-radio:hover .stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:focus:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:hover~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked:focus~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-radio__input.sc-stzh-radio:focus~.stzh-radio__mark.sc-stzh-radio,.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radio__input.sc-stzh-radio:checked~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{opacity:1}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-error)}.stzh-radio--is-invalid.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:var(--stzh-color-error)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__field-wrapper.sc-stzh-radio{cursor:not-allowed}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__label.sc-stzh-radio,.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio .stzh-radio__check.sc-stzh-radio{color:var(--stzh-color-grey61)}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__input.sc-stzh-radio~.stzh-radio__mark.sc-stzh-radio{border-color:transparent}.stzh-radio--is-disabled.sc-stzh-radio .stzh-radio__mark.sc-stzh-radio{background-color:var(--stzh-color-black8)}';var radioCounter=0;var StzhRadio=function(){function t(t){var e=this;registerInstance(this,t);this.stzhChange=createEvent(this,"stzhChange",7);this.stzhFocus=createEvent(this,"stzhFocus",7);this.stzhBlur=createEvent(this,"stzhBlur",7);this.focusedByInput=false;this.onInput=function(t){e.checked=e.input.checked;e.stzhChange.emit({component:"stzh-radio",originalEvent:t,value:e.value,checked:e.checked})};this.onRootFocus=function(){if(!e.focusedByInput){e.setFocus()}e.focusedByInput=false};this.onFocus=function(t){e.focusedByInput=true;var r=new FocusEvent("focus",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(r);e.stzhFocus.emit({component:"stzh-radio",originalEvent:t})};this.onBlur=function(t){var r=new FocusEvent("blur",{view:window,bubbles:false,cancelable:false});e.element.dispatchEvent(r);e.stzhBlur.emit({component:"stzh-radio",originalEvent:t})};this.localization=undefined;this.disabled=false;this.name="";this.value="";this.invalid=false;this.required=false;this.showMarker=false;this.checked=false;this.label="";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.a11yDescribedby=""}t.prototype.setFocus=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(t){this.input.focus();return[2]}))}))};t.prototype.errorWatcher=function(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(e){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.inputId="stzh-radio-".concat(radioCounter++);this.errorWatcher(this.error);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"radio")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.render=function(){var t=this;var e=hasSlot(this.element,"description")||!!this.description;var r=hasSlot(this.element,"description-long")||!!this.descriptionLong;var i=hasSlot(this.element,"error")||!!this.error;var o={"stzh-radio":true,"stzh-radio--has-description":e,"stzh-radio--has-description-long":r,"stzh-radio--has-error":i,"stzh-radio--is-required":this.required,"stzh-radio--is-invalid":this.invalid,"stzh-radio--is-disabled":this.disabled};return h(Host,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},h("div",{class:o},h("label",{class:"stzh-radio__field-wrapper"},h("input",{class:"stzh-radio__input",ref:function(e){return t.input=e},type:"radio",id:this.inputId,name:this.name,value:this.value,disabled:this.disabled,"aria-describedby":"".concat(this.inputId,"-description ").concat(this.a11yDescribedby),"aria-required":this.required?"true":"false","aria-invalid":this.invalid?"true":"false",checked:this.checked,onInput:this.onInput,onFocus:this.onFocus,onBlur:this.onBlur}),h("div",{class:"stzh-radio__mark"},h("div",{class:"stzh-radio__check"})),h("div",{class:"stzh-radio__label"},this.label?this.label:h("slot",null),this.showMarker&&h("span",{class:"stzh-radio__marker"},h("span",{class:"stzh-radio__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-radio__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText)))),h(StzhInputDescription,{classPrefix:"stzh-radio",id:"".concat(this.inputId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:r,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel})))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{error:["errorWatcher"]}},enumerable:false,configurable:true});return t}();StzhRadio.style=stzhRadioCss;var stzhRadiogroupCss=".sc-stzh-radiogroup-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-radiogroup-h{display:none}.sc-stzh-radiogroup-h *.sc-stzh-radiogroup,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::before,.sc-stzh-radiogroup-h *.sc-stzh-radiogroup::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-radiogroup-h .has-focus.sc-stzh-radiogroup{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup{outline-style:none !important}.sc-stzh-radiogroup-h .stzh-fylingfocus-focused.sc-stzh-radiogroup::-moz-focus-inner{border:0 !important}.sc-stzh-radiogroup-h[direction=vertical] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-bottom:var(--stzh-space-medium)}.sc-stzh-radiogroup-h[direction=horizontal] .sc-stzh-radiogroup-s>stzh-radio:not(:last-child){margin-right:var(--stzh-space-large)}.stzh-radiogroup.sc-stzh-radiogroup{margin:0;padding:0;border:none}.stzh-radiogroup__marker-symbol.sc-stzh-radiogroup{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular)}.stzh-radiogroup__marker-text.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup__description-wrapper.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup__description.sc-stzh-radiogroup{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height);color:var(--stzh-base-color)}.stzh-radiogroup__error.sc-stzh-radiogroup{color:var(--stzh-color-error)}.stzh-radiogroup__error-list.sc-stzh-radiogroup{list-style:none;margin:0;padding:0}.stzh-radiogroup__description.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start}.stzh-radiogroup__description-long.sc-stzh-radiogroup{margin-left:var(--stzh-space-xxsmall);margin-top:0.1875rem}.stzh-radiogroup__description-long-popover.sc-stzh-radiogroup{--width:auto;--max-width:27.3125rem}.stzh-radiogroup__description-long-popover[open].sc-stzh-radiogroup:not([open=false]) .stzh-radiogroup__description-long-button.sc-stzh-radiogroup{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;padding:0;border:none;background-color:transparent;border-radius:0.5rem;cursor:pointer;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);color:var(--stzh-base-lead-color)}.stzh-radiogroup__description-long-button.sc-stzh-radiogroup:hover{color:var(--stzh-color-primary, var(--stzh-color-zueriblue))}.stzh-radiogroup.sc-stzh-radiogroup stzh-icon.stzh-radiogroup__description-long-icon.sc-stzh-radiogroup{--size:var(--stzh-icon-size-xsmall)}.stzh-radiogroup--has-error.sc-stzh-radiogroup .stzh-radiogroup__error.sc-stzh-radiogroup,.stzh-radiogroup--has-description.sc-stzh-radiogroup .stzh-radiogroup__description.sc-stzh-radiogroup{margin-top:var(--stzh-space-xxsmall)}.stzh-radiogroup__fields.sc-stzh-radiogroup{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column}.stzh-radiogroup__legend.sc-stzh-radiogroup{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);padding:0;margin-bottom:var(--stzh-space-xsmall)}.stzh-radiogroup--hide-legend.sc-stzh-radiogroup .stzh-radiogroup__legend.sc-stzh-radiogroup{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-radiogroup--direction-horizontal.sc-stzh-radiogroup .stzh-radiogroup__fields.sc-stzh-radiogroup{-ms-flex-direction:row;flex-direction:row}";var SELECTOR_RADIO="stzh-radio, stzh-button[type=radio], stzh-card";var radiogroupCounter=0;var StzhRadiogroup=function(){function t(t){var e=this;registerInstance(this,t);this._preventUpdateProperties=[];this.init=function(){e.radios=Array.from(e.element.querySelectorAll(SELECTOR_RADIO));e.updateRadiosProperty("show-marker",false);e.updateRadiosProperty("a11y-describedby","".concat(e.radiogroupId,"-description"));e.watchValue(e.value);e.watchName(e.name);e.watchDisabled(e.disabled);e.watchInvalid(e.invalid);e.watchRequired(e.required)};this.localization=undefined;this.disabled=false;this.name=undefined;this.legend=undefined;this.hideLegend=false;this.invalid=false;this.required=false;this.showMarker=false;this.value="";this.direction="vertical";this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.checkedRadio=null;this.preventUpdateProperties=[]}t.prototype.watchName=function(t){this.updateRadiosProperty("name",t)};t.prototype.watchDisabled=function(t){this.updateRadiosProperty("disabled",t)};t.prototype.watchInvalid=function(t){this.updateRadiosProperty("invalid",t)};t.prototype.watchRequired=function(t){this.updateRadiosProperty("required",t)};t.prototype.watchValue=function(t){this.updateCheckedRadioByValue(t)};t.prototype.errorWatcher=function(t){if(typeof t==="string"){try{this._error=JSON.parse(t)}catch(e){if(t){this._error=[t]}else{this._error=[]}}}else if(t){this._error=t}else{this._error=[]}this.invalid=this._error.length>0};t.prototype.preventUpdatePropertiesWatcher=function(t){if(typeof t==="string"){this._preventUpdateProperties=JSON.parse(t)}else{this._preventUpdateProperties=t}};t.prototype.onChange=function(t){this.value=t.detail.value};t.prototype.updateRadiosProperty=function(t,e){var r=this;this.radios.forEach((function(i){if(t==="name"||r._preventUpdateProperties.indexOf(t)===-1){i[camelCase(t)]=e}}))};t.prototype.updateCheckedRadioByValue=function(t){this.checkedRadio=this.radios.find((function(e){return e.value===t}));if(this.checkedRadio){this.checkedRadio.checked=true}this.uncheckRadios()};t.prototype.uncheckRadios=function(){var t=this;this.radios.forEach((function(e){if(!t.checkedRadio||e!==t.checkedRadio){e.checked=false}}))};t.prototype.componentWillLoad=function(){return __awaiter(this,void 0,void 0,(function(){var t;return __generator(this,(function(e){switch(e.label){case 0:this.radiogroupId="stzh-radiogroup-".concat(radiogroupCounter++);this.errorWatcher(this.error);this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);if(!!this.localization)return[3,2];t=this;return[4,window.stzhComponents.utils.fetchTranslations(this.element,"radiogroup")];case 1:t.localization=e.sent();e.label=2;case 2:return[2]}}))}))};t.prototype.componentShouldUpdate=function(t,e,r){return r!=="checkedRadio"};t.prototype.componentDidRender=function(){this.init()};t.prototype.connectedCallback=function(){if(!this.value){this.radios=Array.from(this.element.querySelectorAll(SELECTOR_RADIO));var t=this.radios.find((function(t){return t.checked}));if(t){this.value=t.value}}this.observer=new MutationObserver(this.init);this.observer.observe(this.element,{childList:true,subtree:true})};t.prototype.disconnectedCallback=function(){if(this.observer){this.observer.disconnect()}};t.prototype.render=function(){var t;var e=hasSlot(this.element,"description")||!!this.description;var r=hasSlot(this.element,"description-long")||!!this.descriptionLong;var i=hasSlot(this.element,"error")||!!this.error;var o=(t={"stzh-radiogroup":true,"stzh-radiogroup--has-description":e,"stzh-radiogroup--has-description-long":r,"stzh-radiogroup--has-error":i,"stzh-radiogroup--is-required":this.required,"stzh-radiogroup--is-disabled":this.disabled,"stzh-radiogroup--is-invalid":this.invalid,"stzh-radiogroup--hide-legend":this.hideLegend},t["stzh-radiogroup--direction-".concat(this.direction)]=!!this.direction,t);return h("fieldset",{class:o},this.legend&&h("legend",{class:"stzh-radiogroup__legend"},this.legend,this.showMarker&&h("span",{class:"stzh-radiogroup__marker"},h("span",{class:"stzh-radiogroup__marker-symbol","aria-hidden":"true"},this.required?this.localization.$globals.requiredFieldMarker:this.localization.$globals.optionalFieldMarker),h("span",{class:"stzh-radiogroup__marker-text"},this.required?this.localization.$globals.requiredFieldText:this.localization.$globals.optionalFieldText))),h("div",{class:"stzh-radiogroup__fields"},h("slot",null)),h(StzhInputDescription,{classPrefix:"stzh-radiogroup",id:"".concat(this.radiogroupId,"-description"),error:this._error,description:this.description,descriptionLong:this.descriptionLong,descriptionLongUsed:r,moreInfoButtonLabel:this.localization.$globals.moreInfoButtonLabel}))};Object.defineProperty(t.prototype,"element",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(t,"watchers",{get:function(){return{name:["watchName"],disabled:["watchDisabled"],invalid:["watchInvalid"],required:["watchRequired"],value:["watchValue"],error:["errorWatcher"],preventUpdateProperties:["preventUpdatePropertiesWatcher"]}},enumerable:false,configurable:true});return t}();StzhRadiogroup.style=stzhRadiogroupCss;export{StzhDatepicker as stzh_datepicker,StzhRadio as stzh_radio,StzhRadiogroup as stzh_radiogroup};
 //# sourceMappingURL=stzh-datepicker_3.entry.js.map

package/dist/esm-es5/stzh-datepicker_3.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","onRootFocus","_this","input","setFocus","onInputChanged","parsedDate","dateAdapter","parse","value","isoDate","printISODate","calendar","valueWatcher","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","format","popover","hide","class_1","prototype","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","newValue","date","parseISODate","updateButtonAccessibleLabel","setDate","getPopover","buttonLabel","concat","label","selectedDateMessage","err","connectedCallback","componentWillLoad","_a","window","stzhComponents","utils","fetchTranslations","element","_b","sent","createFormatParseAdapter","$formats","$globals","componentDidLoad","render","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","ref","el","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","labelHidden","noAutocomplete","onStzhChanged","readonly","description","descriptionLong","error","invalid","required","showMarker","size","slot","placement","variant","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","onInput","checked","originalEvent","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_2","focus","errorWatcher","_error","JSON","e","length","inputId","descriptionUsed","hasSlot","descriptionLongUsed","errorUsed","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchInvalid","watchRequired","class_3","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","preventUpdateProperties","componentShouldUpdate","_newValue","_oldValue","componentDidRender","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","hideLegend","direction","legend"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx","src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx","src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-datepicker {\n  &__popover {\n    --padding: #{space('medium')};\n    --width: auto;\n  }\n\n  &__actions {\n    display: flex;\n    justify-content: flex-end;\n\n    &:not(:empty) {\n      margin-top: space('xsmall');\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate, parseISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\"\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Date adapter, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      })\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    const date = parseISODate(newValue);\n\n    if (this.calendar) {\n      this.calendar.value = newValue;\n    }\n\n    if (this.input) {\n      this.input.value = this.dateAdapter.format(date, \"dateInput\");\n    }\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = printISODate(date);\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  private calendar: HTMLStzhCalendarElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const isoDate = printISODate(parsedDate);\n\n      if (this.value !== isoDate) {\n        if (this.calendar) {\n          this.calendar.value = isoDate;\n        }\n\n        this.value = isoDate;\n      } else {\n        this.valueWatcher(isoDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      })\n    }\n  }\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    this.value = event.detail.value;\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.input) {\n      this.input.value = event.detail.valueAsDate\n        && this.dateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n    }\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  }\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = parseISODate(this.value);\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    if (!this.dateAdapter) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  componentDidLoad() {\n    this.valueWatcher(this.value);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          }\n\n          {!this.inline &&\n            <stzh-input\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              showMarker={this.showMarker}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                label={this.label}\n              >\n                <stzh-button\n                  variant=\"input\"\n                  icon-only\n                  icon=\"calendar\"\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                >\n                </stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  >\n                  </stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-radio {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label,\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: 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  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\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    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\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-radio\",\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-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host([direction=\"vertical\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateRadiosProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\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    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"show-marker\", false);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchRequired(this.required);\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radiogroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-radiogroup__legend\">\n            {this.legend}\n            {this.showMarker &&\n              <span class=\"stzh-radiogroup__marker\">\n                <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker\n                  }\n                </span>\n                <span class=\"stzh-radiogroup__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText\n                  }\n                </span>\n              </span>\n            }\n          </legend>\n        }\n        <div class=\"stzh-radiogroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-radiogroup\"\n          id={`${this.radiogroupId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["stzhDatepickerCss","StzhDatepicker","this","onRootFocus","_this","input","setFocus","onInputChanged","parsedDate","dateAdapter","parse","value","formattedDate","_internalDateAdapter","format","calendar","printISODate","valueWatcher","stzhChange","emit","component","valueAsDate","onCalendarChange","event","detail","popover","hide","class_1","prototype","createDateFormatters","localization","dateFormatLong","Intl","DateTimeFormat","$locale","day","month","year","newValue","date","updateButtonAccessibleLabel","dateAdapterWatcher","window","stzhComponents","utils","createFormatParseAdapter","$formats","$globals","internalDateAdapterWatcher","$formatsIso","$formatsLegacy","setDate","getPopover","buttonLabel","concat","label","selectedDateMessage","err","connectedCallback","componentWillLoad","_a","fetchTranslations","element","_b","sent","internalDateAdapter","componentDidLoad","render","classes","inline","h","Host","tabindex","disabled","onFocus","class","type","name","Fragment","ref","el","isDateDisabled","calendarIsDateDisabled","min","calendarMin","max","calendarMax","onStzhChange","labelHidden","noAutocomplete","onStzhChanged","readonly","description","descriptionLong","error","invalid","required","showMarker","size","slot","placement","variant","icon","a11yLabel","stzhRadioCss","radioCounter","StzhRadio","focusedByInput","onInput","checked","originalEvent","focusEvent","FocusEvent","view","bubbles","cancelable","dispatchEvent","stzhFocus","onBlur","blurEvent","stzhBlur","class_2","focus","errorWatcher","_error","JSON","e","length","inputId","descriptionUsed","hasSlot","descriptionLongUsed","errorUsed","id","a11yDescribedby","requiredFieldMarker","optionalFieldMarker","requiredFieldText","optionalFieldText","StzhInputDescription","classPrefix","moreInfoButtonLabel","stzhRadiogroupCss","SELECTOR_RADIO","radiogroupCounter","StzhRadiogroup","_preventUpdateProperties","init","radios","Array","from","querySelectorAll","updateRadiosProperty","radiogroupId","watchValue","watchName","watchDisabled","watchInvalid","watchRequired","class_3","updateCheckedRadioByValue","preventUpdatePropertiesWatcher","onChange","prop","forEach","radio","indexOf","camelCase","checkedRadio","find","uncheckRadios","preventUpdateProperties","componentShouldUpdate","_newValue","_oldValue","componentDidRender","observer","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","hideLegend","direction","legend"],"sources":["src/components/stzh-datepicker/stzh-datepicker.scss?tag=stzh-datepicker&encapsulation=scoped","src/components/stzh-datepicker/stzh-datepicker.tsx","src/components/stzh-radio/stzh-radio.scss?tag=stzh-radio&encapsulation=scoped","src/components/stzh-radio/stzh-radio.tsx","src/components/stzh-radiogroup/stzh-radiogroup.scss?tag=stzh-radiogroup&encapsulation=scoped","src/components/stzh-radiogroup/stzh-radiogroup.tsx"],"sourcesContent":[":host {\n  width: 100%;\n}\n\n.stzh-datepicker {\n  &__popover {\n    --padding: #{space('medium')};\n    --width: auto;\n  }\n\n  &__actions {\n    display: flex;\n    justify-content: flex-end;\n\n    &:not(:empty) {\n      margin-top: space('xsmall');\n    }\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n  Fragment,\n  State\n} from \"@stencil/core\";\n\nimport {\n  StzhCalendarChangeEvent,\n  StzhDatepickerChangeEvent\n} from \"../../index\";\n\nimport { StzhCalendarDateDisabledPredicate } from \"../../index\";\n\nimport { printISODate } from \"../../utils/date-utils\"\nimport { StzhLocaleAdapter } from \"../../utils/date-adapter\"\n\nimport { StzhDatepickerLocalizedText } from \"./stzh-datepicker.localization\";\n\n/**\n * @slot action - Slot for action below calendar (stzh-link element)\n */\n@Component({\n  tag: \"stzh-datepicker\",\n  styleUrl: \"stzh-datepicker.scss\",\n  scoped: true\n})\nexport class StzhDatepicker {\n  /**\n   * Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the max property.\n   */\n  @Prop() calendarMin: string = \"\"\n\n  /**\n   * Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\n   * This setting can be used alone or together with the min property.\n   */\n  @Prop() calendarMax: string = \"\"\n\n  /**\n   * Controls which days are disabled and therefore disallowed.\n   * For example, this can be used to disallow selection of weekends.\n   */\n  @Prop() calendarIsDateDisabled: StzhCalendarDateDisabledPredicate = () => false\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of hidden date picker input (current selected date in ISO format). */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Label for input field and popover */\n  @Prop() label: string = \"\";\n\n  /** Whether label is visually hidden. */\n  @Prop() labelHidden: boolean = false;\n\n  /** Whether the element is readonly or not */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Show calendar inline */\n  @Prop() inline: boolean = false;\n\n  /**\n   * Date adapter visible date shown to the user, for custom parsing/formatting.\n   * Must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.\n   */\n  @Prop() dateAdapter: StzhLocaleAdapter;\n\n  /**\n   * Date adapter for internal date passed to backend, for custom parsing/formatting.\n   * Can be `\"iso\"` (default, date in ISO format) / `\"legacy\"` (date in `d.m.Y` format)\n   * or `StzhLocaleAdapter` (must be object with a `parse` function which accepts a `string` and returns a `Date`,\n   * and a `format` function which accepts a `Date` and returns a `string`.)\n   */\n  @Prop() internalDateAdapter: \"iso\" | \"legacy\" | StzhLocaleAdapter = \"iso\";\n  private _internalDateAdapter: StzhLocaleAdapter;\n\n  /**  Translation strings. */\n  @Prop() localization: StzhDatepickerLocalizedText;\n\n  @State() buttonLabel: string;\n\n  @Watch(\"localization\")\n  createDateFormatters() {\n    if (this.localization) {\n      this.dateFormatLong = new Intl.DateTimeFormat(this.localization.$locale, {\n        day: \"numeric\",\n        month: \"long\",\n        year: \"numeric\",\n      })\n    }\n  }\n\n  /** Update calendar and input when value prop has changed */\n  @Watch(\"value\")\n  valueWatcher(newValue: string) {\n    const date = this._internalDateAdapter.parse(newValue, \"dateInput\");\n\n    if (this.calendar) {\n      this.calendar.value = printISODate(date);\n    }\n\n    if (this.input) {\n      this.input.value = this.dateAdapter.format(date, \"dateInput\");\n    }\n\n    this.updateButtonAccessibleLabel();\n  }\n\n  @Watch(\"dateAdapter\")\n  dateAdapterWatcher(newValue: StzhLocaleAdapter) {\n    if (!newValue) {\n      this.dateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formats,\n        this.localization.$globals\n      );\n    }\n  }\n\n  @Watch(\"internalDateAdapter\")\n  internalDateAdapterWatcher(newValue: \"iso\" | \"legacy\" | StzhLocaleAdapter) {\n    if (newValue === \"iso\" || !newValue) {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsIso,\n        this.localization.$globals\n      );\n    } else if (newValue === \"legacy\") {\n      this._internalDateAdapter = window.stzhComponents.utils.createFormatParseAdapter(\n        this.localization.$formatsLegacy,\n        this.localization.$globals\n      );\n    } else {\n      this._internalDateAdapter = newValue;\n    }\n  }\n\n  /** Set value by a JS Date object */\n  @Method()\n  async setDate(date: Date) {\n    this.value = this._internalDateAdapter.format(date, \"dateInput\");\n  }\n\n  /** Return internal popover element */\n  @Method()\n  async getPopover(): Promise<HTMLStzhPopoverElement> {\n    return this.popover;\n  }\n\n  /** Datepicker change event */\n  @Event() stzhChange: EventEmitter<StzhDatepickerChangeEvent>;\n\n  @Element() element: HTMLStzhDatepickerElement;\n\n  /**\n   * To format dates exclusively for the benefit of screen readers.\n   *\n   * We prefer DateTimeFormat over date.toLocaleDateString, as the former has\n   * better performance when formatting large number of dates. See:\n   * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#Performance\n   */\n  private dateFormatLong: Intl.DateTimeFormat\n\n  private input: HTMLStzhInputElement;\n  private popover: HTMLStzhPopoverElement;\n  private calendar: HTMLStzhCalendarElement;\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.setFocus();\n    }\n  }\n\n  private onInputChanged = () => {\n    const parsedDate = this.dateAdapter.parse(this.input.value, \"dateInput\");\n\n    if (this.input.value === \"\" || parsedDate) {\n      const formattedDate = this._internalDateAdapter.format(parsedDate, \"dateInput\");\n\n      if (this.value !== formattedDate) {\n        if (this.calendar) {\n          this.calendar.value = printISODate(parsedDate);\n        }\n\n        this.value = formattedDate;\n      } else {\n        this.valueWatcher(formattedDate);\n      }\n\n      this.stzhChange.emit({\n        component: \"stzh-datepicker\",\n        value: this.value,\n        valueAsDate: parsedDate,\n      })\n    }\n  }\n\n  private onCalendarChange = (event: CustomEvent<StzhCalendarChangeEvent>) => {\n    this.value = event.detail.valueAsDate\n      && this._internalDateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n\n    this.stzhChange.emit({\n      component: \"stzh-datepicker\",\n      value: this.value,\n      valueAsDate: event.detail.valueAsDate,\n    });\n\n    if (this.input) {\n      this.input.value = event.detail.valueAsDate\n        && this.dateAdapter.format(event.detail.valueAsDate, \"dateInput\");\n    }\n\n    if (this.popover) {\n      this.popover.hide();\n    }\n  }\n\n  private updateButtonAccessibleLabel() {\n    if (!this.localization) {\n      return;\n    }\n\n    try {\n      const valueAsDate = this._internalDateAdapter.parse(this.value, \"dateInput\");\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}, ${this.localization.selectedDateMessage} ${this.dateFormatLong.format(valueAsDate)}`;\n    } catch (err) {\n      this.buttonLabel = `${this.label}, ${this.localization.buttonLabel}`;\n    }\n  }\n\n  connectedCallback() {\n    this.createDateFormatters();\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datepicker\");\n    }\n\n    this.dateAdapterWatcher(this.dateAdapter);\n    this.internalDateAdapterWatcher(this.internalDateAdapter);\n  }\n\n  componentDidLoad() {\n    this.valueWatcher(this.value);\n  }\n\n  render() {\n    const classes = {\n      \"stzh-datepicker\": true,\n      \"stzh-datepicker--inline\": this.inline\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <input\n            type=\"hidden\"\n            name={this.name}\n            value={this.value}\n          />\n\n          {this.inline &&\n            <Fragment>\n              <stzh-calendar\n                ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                isDateDisabled={this.calendarIsDateDisabled}\n                min={this.calendarMin}\n                max={this.calendarMax}\n                onStzhChange={this.onCalendarChange}\n              ></stzh-calendar>\n              <div class=\"stzh-datepicker__actions\">\n                <slot name=\"action\"></slot>\n              </div>\n            </Fragment>\n          }\n\n          {!this.inline &&\n            <stzh-input\n              label={this.label}\n              labelHidden={this.labelHidden}\n              ref={(el) => (this.input = el as HTMLStzhInputElement)}\n              noAutocomplete\n              onStzhChanged={this.onInputChanged}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              error={this.error}\n              invalid={this.invalid}\n              required={this.required}\n              showMarker={this.showMarker}\n              size={this.size}\n            >\n              <stzh-popover\n                ref={(el) => (this.popover = el as HTMLStzhPopoverElement)}\n                class=\"stzh-datepicker__popover\"\n                slot=\"button-right\"\n                placement=\"bottom-end\"\n                label={this.label}\n              >\n                <stzh-button\n                  variant=\"input\"\n                  icon-only\n                  icon=\"calendar\"\n                  disabled={this.disabled}\n                  a11yLabel={this.buttonLabel}\n                >\n                </stzh-button>\n                <div slot=\"content\">\n                  <stzh-calendar\n                    ref={(el) => (this.calendar = el as HTMLStzhCalendarElement)}\n                    isDateDisabled={this.calendarIsDateDisabled}\n                    min={this.calendarMin}\n                    max={this.calendarMax}\n                    onStzhChange={this.onCalendarChange}\n                  >\n                  </stzh-calendar>\n                  <div class=\"stzh-datepicker__actions\">\n                    <slot name=\"action\"></slot>\n                  </div>\n                </div>\n              </stzh-popover>\n            </stzh-input>\n          }\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n  display: inline-block;\n\n  ::slotted(stzh-text) {\n    --color: inherit;\n  }\n}\n\n.stzh-radio {\n\t@include input-description;\n\n  &__field-wrapper {\n    @include fontSize('milli');\n    position: relative;\n    display: flex;\n    user-select: none;\n    cursor: pointer;\n  }\n\n  &__input {\n    @include visuallyhiddenInput;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__mark {\n    @include radio__mark();\n  }\n\n  &__check {\n    @include radio__check();\n  }\n\n  &__label {\n    display: inline-block;\n    color: $baseColor;\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker-symbol {\n    @include fontSize('micro');\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check,\n  &__input:checked:focus ~ &__mark &__check {\n    color: $colorPrimaryHover;\n  }\n\n  &__input:checked ~ &__label {\n    color: $colorPrimary;\n  }\n\n  &:hover &__mark,\n  &__input:focus:hover ~ &__mark,\n  &__input:checked:hover ~ &__mark,\n  &__input:checked:focus ~ &__mark {\n    border-color: $colorPrimaryHover;\n  }\n\n  &__input:focus ~ &__mark,\n  &__input:checked ~ &__mark {\n    border-color: $colorPrimary;\n  }\n\n  &__input:checked ~ &__mark &__check {\n    opacity: 1;\n  }\n\n  /* Invalid */\n\n  &--is-invalid &__input ~ &__label,\n  &--is-invalid &__input ~ &__mark &__check {\n    color: $colorError;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label,\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $formDisabledColor;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $formDisabledBorderColor;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $formDisabledBackgroundColor;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  Element,\n  EventEmitter,\n  Method,\n  h,\n  Watch\n} from \"@stencil/core\";\n\nimport {\n  StzhRadioChangeEvent,\n  StzhRadioFocusEvent,\n  StzhRadioBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nlet radioCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radio\",\n  styleUrl: \"stzh-radio.scss\",\n  scoped: true\n})\nexport class StzhRadio {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** The value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Label */\n  @Prop() label: 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  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the radio button (this will be overwritten if description prop or slot is used, used by stzh-radiogroup) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Focus input field */\n  @Method()\n  async setFocus() {\n    this.input.focus();\n  }\n\n  /** Input change event */\n  @Event() stzhChange: EventEmitter<StzhRadioChangeEvent>;\n\n  /** Input focus event */\n  @Event() stzhFocus: EventEmitter<StzhRadioFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhRadioBlurEvent>;\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    this.invalid = this._error.length > 0;\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-radio\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.setFocus();\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-radio\",\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-radio\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-radio-${radioCounter++}`;\n    this.errorWatcher(this.error);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radio');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radio\": true,\n      \"stzh-radio--has-description\": descriptionUsed,\n      \"stzh-radio--has-description-long\": descriptionLongUsed,\n      \"stzh-radio--has-error\": errorUsed,\n      \"stzh-radio--is-required\": this.required,\n      \"stzh-radio--is-invalid\": this.invalid,\n      \"stzh-radio--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-radio__field-wrapper\">\n            <input\n              class=\"stzh-radio__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"radio\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-radio__mark\">\n              <div class=\"stzh-radio__check\"></div>\n            </div>\n            <div class=\"stzh-radio__label\">\n              {this.label ? this.label : <slot></slot>}\n              {this.showMarker &&\n                <span class=\"stzh-radio__marker\">\n                  <span class=\"stzh-radio__marker-symbol\" aria-hidden=\"true\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldMarker\n                      : this.localization.$globals.optionalFieldMarker\n                    }\n                  </span>\n                  <span class=\"stzh-radio__marker-text\">\n                    {this.required\n                      ? this.localization.$globals.requiredFieldText\n                      : this.localization.$globals.optionalFieldText\n                    }\n                  </span>\n                </span>\n              }\n            </div>\n          </label>\n          <StzhInputDescription\n            classPrefix=\"stzh-radio\"\n            id={`${this.inputId}-description`}\n            error={this._error}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            descriptionLongUsed={descriptionLongUsed}\n            moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n",":host([direction=\"vertical\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-bottom: space('medium');\n  }\n}\n\n:host([direction=\"horizontal\"]) {\n  ::slotted(stzh-radio:not(:last-child)) {\n    margin-right: space('large');\n  }\n}\n\n.stzh-radiogroup {\n  @include input-description;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  &__fields {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n  }\n\n  &__legend {\n    @include font('heavy');\n    @include fontSize('nano');\n    padding: 0;\n    margin-bottom: space('xsmall');\n  }\n\n  &--hide-legend &__legend {\n    @include visuallyhidden;\n  }\n\n  &--direction-horizontal &__fields {\n    flex-direction: row;\n  }\n}\n","import {\n  Component,\n  Prop,\n  Element,\n  Watch,\n  h,\n  Listen\n} from \"@stencil/core\";\n\nimport { StzhRadioChangeEvent } from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { camelCase } from \"../../utils/string-utils\";\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nconst SELECTOR_RADIO = 'stzh-radio, stzh-button[type=radio], stzh-card';\n\nlet radiogroupCounter = 0;\n\n/**\n * @slot - Slot for `stzh-radio`, `stzh-button[type=\"radio\"]` or `stzh-card` elements\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-radiogroup\",\n  styleUrl: \"stzh-radiogroup.scss\",\n  scoped: true\n})\nexport class StzhRadiogroup {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the element is disabled or not */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** The name of the input radio elements, will define the radio group. If you have more than one radio group on a page, every group needs to have its own unique name */\n  @Prop({ reflect: true }) name: string;\n\n  /** The legend */\n  @Prop() legend: string;\n\n  /** Hide legend to show only for screenreaders */\n  @Prop({ reflect: true }) hideLegend: boolean = false;\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Append text to label depending if field is optional/required. true -> show \"(optional)\", false -> show nothing */\n  @Prop({ reflect: true }) showMarker: boolean = false;\n\n  /** Select a radio by value */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Current checked radio element (readonly) */\n  @Prop() checkedRadio: HTMLStzhRadioElement | null = null;\n\n  /** Prevent updating certain properties of radio elements (possible values inside array: disabled, invalid, required, hide-marker) */\n  @Prop() preventUpdateProperties: string[] | string = [];\n  private _preventUpdateProperties: string[] = [];\n\n  /** Host element */\n  @Element() element: HTMLElement;\n\n  @Watch(\"name\")\n  watchName(newValue: string) {\n    this.updateRadiosProperty(\"name\", newValue);\n  }\n\n  @Watch(\"disabled\")\n  watchDisabled(newValue: boolean) {\n    this.updateRadiosProperty(\"disabled\", newValue);\n  }\n\n  @Watch(\"invalid\")\n  watchInvalid(newValue: boolean) {\n    this.updateRadiosProperty(\"invalid\", newValue);\n  }\n\n  @Watch(\"required\")\n  watchRequired(newValue: boolean) {\n    this.updateRadiosProperty(\"required\", newValue);\n  }\n\n  @Watch(\"value\")\n  watchValue(newValue: string) {\n    this.updateCheckedRadioByValue(newValue);\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    this.invalid = this._error.length > 0;\n  }\n\n  @Watch(\"preventUpdateProperties\")\n  preventUpdatePropertiesWatcher(newValue: string[] | string) {\n    if (typeof newValue === \"string\") {\n      this._preventUpdateProperties = JSON.parse(newValue);\n    } else {\n      this._preventUpdateProperties = newValue;\n    }\n  }\n\n  @Listen(\"stzhChange\")\n  onChange(event: CustomEvent<StzhRadioChangeEvent>) {\n    this.value = event.detail.value;\n  }\n\n  /** Radio elements */\n  private radios: HTMLStzhRadioElement[];\n  private radiogroupId: string;\n  private observer: MutationObserver;\n\n  private updateRadiosProperty(prop: string, value: any) {\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (prop === \"name\" || (this._preventUpdateProperties.indexOf(prop) === -1)) {\n        radio[camelCase(prop)] = value;\n      }\n    });\n  }\n\n  private updateCheckedRadioByValue(value: string) {\n    this.checkedRadio = this.radios.find(radio => radio.value === value);\n\n    if (this.checkedRadio) {\n      this.checkedRadio.checked = true;\n    }\n\n    this.uncheckRadios();\n  }\n\n  private uncheckRadios() {\n    // make sure that no other radios are checked than the current one or no one\n    this.radios.forEach((radio: HTMLStzhRadioElement) => {\n      if (!this.checkedRadio || radio !== this.checkedRadio) {\n        radio.checked = false;\n      }\n    });\n  }\n\n  private init = () => {\n    // update radios\n    this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n    this.updateRadiosProperty(\"show-marker\", false);\n    this.updateRadiosProperty(\"a11y-describedby\", `${this.radiogroupId}-description`);\n\n    this.watchValue(this.value);\n    this.watchName(this.name);\n    this.watchDisabled(this.disabled);\n    this.watchInvalid(this.invalid);\n    this.watchRequired(this.required);\n  }\n\n  async componentWillLoad() {\n    this.radiogroupId = `stzh-radiogroup-${radiogroupCounter++}`;\n    this.errorWatcher(this.error);\n    this.preventUpdatePropertiesWatcher(this.preventUpdateProperties);\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'radiogroup');\n    }\n  }\n\n  componentShouldUpdate(_newValue, _oldValue, prop: string) {\n    return prop !== \"checkedRadio\";\n  }\n\n  componentDidRender() {\n    this.init();\n  }\n\n  connectedCallback() {\n    if (!this.value) {\n      this.radios = Array.from(this.element.querySelectorAll(SELECTOR_RADIO));\n\n      // try to find a checkbox that might has checked set to true\n      const checkedRadio = this.radios.find(radio => radio.checked);\n\n      if (checkedRadio) {\n        this.value = checkedRadio.value;\n      }\n    }\n\n    this.observer = new MutationObserver(this.init);\n    this.observer.observe(this.element, {\n      childList: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || !!this.error;\n\n    const classes = {\n      \"stzh-radiogroup\": true,\n      \"stzh-radiogroup--has-description\": descriptionUsed,\n      \"stzh-radiogroup--has-description-long\": descriptionLongUsed,\n      \"stzh-radiogroup--has-error\": errorUsed,\n      \"stzh-radiogroup--is-required\": this.required,\n      \"stzh-radiogroup--is-disabled\": this.disabled,\n      \"stzh-radiogroup--is-invalid\": this.invalid,\n      \"stzh-radiogroup--hide-legend\": this.hideLegend,\n      [`stzh-radiogroup--direction-${this.direction}`]: !!this.direction\n    };\n\n    return (\n      <fieldset class={classes}>\n        {this.legend &&\n          <legend class=\"stzh-radiogroup__legend\">\n            {this.legend}\n            {this.showMarker &&\n              <span class=\"stzh-radiogroup__marker\">\n                <span class=\"stzh-radiogroup__marker-symbol\" aria-hidden=\"true\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldMarker\n                    : this.localization.$globals.optionalFieldMarker\n                  }\n                </span>\n                <span class=\"stzh-radiogroup__marker-text\">\n                  {this.required\n                    ? this.localization.$globals.requiredFieldText\n                    : this.localization.$globals.optionalFieldText\n                  }\n                </span>\n              </span>\n            }\n          </legend>\n        }\n        <div class=\"stzh-radiogroup__fields\">\n          <slot></slot>\n        </div>\n        <StzhInputDescription\n          classPrefix=\"stzh-radiogroup\"\n          id={`${this.radiogroupId}-description`}\n          error={this._error}\n          description={this.description}\n          descriptionLong={this.descriptionLong}\n          descriptionLongUsed={descriptionLongUsed}\n          moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n        />\n      </fieldset>\n    );\n  }\n}\n"],"mappings":"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"}