@oiz/stzh-components 3.8.1 → 3.8.2

package/dist/components/{p-6b2b1e7b.js.map → p-d264ac6b.js.map}

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

package/dist/components/{p-37367a31.js → p-dcdbdf88.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-96cf9087.js';
-import { d as defineCustomElement$6, a as printISODate } from './p-16940157.js';
-import { h as hasSlot } from './p-073888ce.js';
+import { d as defineCustomElement$6, a as printISODate } from './p-e8e933a4.js';
+import { h as hasSlot } from './p-095fbf73.js';
 import { d as defineCustomElement$8 } from './p-011c5d9b.js';
-import { d as defineCustomElement$7 } from './p-4d000b5b.js';
-import { d as defineCustomElement$5 } from './p-8ed7a61b.js';
+import { d as defineCustomElement$7 } from './p-431f7754.js';
+import { d as defineCustomElement$5 } from './p-158996b9.js';
 import { d as defineCustomElement$4 } from './p-6e55dee9.js';
-import { d as defineCustomElement$3 } from './p-541e8c61.js';
-import { d as defineCustomElement$2 } from './p-d5ab066a.js';
+import { d as defineCustomElement$3 } from './p-fd08bfe0.js';
+import { d as defineCustomElement$2 } from './p-777e6a82.js';
 import { d as defineCustomElement$1 } from './p-8b576ec4.js';
 
 const stzhDatepickerCss = ".sc-stzh-datepicker-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datepicker-h,[stzh-hidden].sc-stzh-datepicker-h{display:none}.sc-stzh-datepicker-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datepicker-h *.sc-stzh-datepicker,.sc-stzh-datepicker-h *.sc-stzh-datepicker::before,.sc-stzh-datepicker-h *.sc-stzh-datepicker::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datepicker-h .has-focus.sc-stzh-datepicker{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.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{--calendar-width:var(--stzh-calendar-width);width:100%}[inline].sc-stzh-datepicker-h:not([inline=false]){width:var(--calendar-width)}.stzh-datepicker__popover.sc-stzh-datepicker{--width:auto}.stzh-datepicker__calendar.sc-stzh-datepicker{margin-left:auto;margin-right:auto}.stzh-datepicker__calendar.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker{display:flex;width:var(--calendar-width);margin-left:auto;margin-right:auto}.stzh-datepicker__actions.is-inline.sc-stzh-datepicker{width:100%;margin-left:0px;margin-right:0px}.stzh-datepicker__actions.sc-stzh-datepicker:not(:empty){padding-left:var(--stzh-space-small);padding-right:var(--stzh-space-small)}.stzh-datepicker--has-action.sc-stzh-datepicker .stzh-datepicker__popover.sc-stzh-datepicker{--content-padding:0 0 var(--stzh-space-small) 0}";
@@ -272,4 +272,4 @@ function defineCustomElement() {
 
 export { StzhDatepicker as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-37367a31.js.map
+//# sourceMappingURL=p-dcdbdf88.js.map

package/dist/components/{p-37367a31.js.map → p-dcdbdf88.js.map}

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

package/dist/components/{p-2d532797.js → p-de4503ca.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-96cf9087.js';
-import { h as hasSlot } from './p-073888ce.js';
+import { h as hasSlot } from './p-095fbf73.js';
 import { S as StzhInputDescription } from './p-dd0d6b20.js';
 import { d as defineCustomElement$3 } from './p-6e55dee9.js';
-import { d as defineCustomElement$2 } from './p-d5ab066a.js';
+import { d as defineCustomElement$2 } from './p-777e6a82.js';
 import { d as defineCustomElement$1 } from './p-8b576ec4.js';
 
 const Check = `<svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" fill="none" viewBox="0 0 24 24"><g clip-path="url(#a)"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></g><defs><clipPath id="a"><path fill="currentColor" d="M0 0h24v24H0z"/></clipPath></defs></svg>`;
@@ -189,4 +189,4 @@ function defineCustomElement() {
 
 export { StzhCheckbox as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-2d532797.js.map
+//# sourceMappingURL=p-de4503ca.js.map

package/dist/components/{p-2d532797.js.map → p-de4503ca.js.map}

@@ -1 +1 @@
-{"file":"p-2d532797.js","mappings":"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","names":[],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(--stzh-checkbox-label-hover-color, #{$colorPrimary70});\n  --label-hover-checked-color: var(--stzh-checkbox-label-hover-checked-color, #{$colorPrimary90});\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\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    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n  }\n\n  &__check {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    opacity: 0;\n    color: var(--check-color);\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('micro');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\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: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError60;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey50;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $colorGrey50;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhCheckboxChangeEvent,\n  StzhCheckboxFocusEvent,\n  StzhCheckboxBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\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-checkbox\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkbox');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__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-checkbox__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          {(this._error?.length > 0 || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-de4503ca.js","mappings":"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","names":[],"sources":["src/components/stzh-checkbox/stzh-checkbox.scss?tag=stzh-checkbox&encapsulation=scoped","src/components/stzh-checkbox/stzh-checkbox.tsx"],"sourcesContent":[":host {\n  --label-color: var(--stzh-checkbox-label-color, #{$baseColor});\n  --label-hover-color: var(--stzh-checkbox-label-hover-color, #{$colorPrimary70});\n  --label-hover-checked-color: var(--stzh-checkbox-label-hover-checked-color, #{$colorPrimary90});\n  --check-color: var(--stzh-checkbox-check-color, #{$colorPrimary});\n\n  display: inline-block;\n\n  &[disabled]:not([disabled=\"false\"]) {\n    --description-color: #{$formDisabledColor};\n  }\n}\n\n.stzh-checkbox {\n  @include input-description;\n  display: grid;\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    border: 2px solid $colorBlack;\n    background-color: $colorWhite;\n    width: 24px;\n    height: 24px;\n    flex-shrink: 0;\n    border-radius: $formInputBorderRadius;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    transition: border-color $baseTransitionAnimationSpeed;\n  }\n\n  &__check {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    opacity: 0;\n    color: var(--check-color);\n    transition-property: color;\n    transition-duration: $baseTransitionAnimationSpeed;\n  }\n\n  &__label {\n    --stzh-base-color: initial;\n\n    display: inline-block;\n    color: var(--label-color);\n    transition: color $baseTransitionAnimationSpeed;\n    margin-left: space('small');\n    line-height: 24px;\n\n    &:empty {\n      display: none;\n    }\n  }\n\n  &__marker {\n    @include fontSize('micro');\n    margin-left: calc(-0.25em + #{space('xsmall')});\n  }\n\n  /* Hover / Focus / Checked */\n\n  &:hover &__label,\n  &__input:checked ~ &__label {\n    color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__label,\n  &__input:checked:hover ~ &__mark &__check {\n    color: var(--label-hover-checked-color);\n  }\n\n  &:hover &__mark,\n  &__input:checked ~ &__mark {\n    border-color: var(--label-hover-color);\n  }\n\n  &__input:checked:hover ~ &__mark {\n    border-color: var(--label-hover-checked-color);\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: $colorError60;\n  }\n\n  &--is-invalid &__input ~ &__mark {\n    border-color: $colorError60;\n  }\n\n  /* Disabled */\n\n\t&--is-disabled &__field-wrapper {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__input ~ &__label {\n    color: $colorGrey60;\n  }\n\n  &--is-disabled &__input ~ &__mark &__check {\n    color: $colorGrey50;\n  }\n\n  &--is-disabled &__input ~ &__mark {\n    border-color: $colorGrey50;\n  }\n\n  &--is-disabled &__mark {\n    background-color: $colorGrey20;\n  }\n}\n","import {\n  Host,\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  h,\n  Watch,\n  Listen\n} from \"@stencil/core\";\n\nimport {\n  StzhCheckboxChangeEvent,\n  StzhCheckboxFocusEvent,\n  StzhCheckboxBlurEvent\n} from \"../../index\";\n\nimport { hasSlot } from \"../../utils/utils\";\nimport { StzhLocaleComponent } from \"../../index\";\n\nimport { StzhInputDescription } from \"../stzh-input/stzh-input-description\";\n\nimport Check from './assets/check.svg';\n\nlet checkboxCounter = 0;\n\n/**\n * @slot - Slot for label content\n * @slot description - Slot for description\n * @slot description-long - Slot for long description (in popover)\n * @slot description-long-title - Slot for long description title (in popover) / instead of descriptionLongTitle or description property\n * @slot error - Slot for error\n */\n@Component({\n  tag: \"stzh-checkbox\",\n  styleUrl: \"stzh-checkbox.scss\",\n  scoped: true\n})\nexport class StzhCheckbox {\n  /** Translation strings */\n  @Prop() localization: StzhLocaleComponent;\n\n  /** Whether the checkbox is disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Name of the input element */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Value of the input element */\n  @Prop({ mutable: true }) value: string = \"\";\n\n  /** Invalid status */\n  @Prop({ reflect: true }) invalid: boolean = false;\n\n  /** Required status */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /** Checked status */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /** Default checked (used by reset) */\n  @Prop({ mutable: true }) defaultChecked: boolean;\n\n  /** Label */\n  @Prop() label: string = \"\";\n\n  /** Description message (use description slot as alternative) */\n  @Prop() description: string;\n\n  /** Long description message appearing in a popover (use description-long slot as alternative) */\n  @Prop() descriptionLong: string;\n\n  /** Long description title appearing in a popover (use description-long-title slot as or description property alternative) */\n  @Prop() descriptionLongTitle: string;\n\n  /** Hide `(optional)` label (or use `required` inside form to hide it) */\n  @Prop({ reflect: true }) hideOptional: boolean = false;\n\n  /** One or multiple error message (use error slot as alternative) */\n  @Prop() error: string | string[];\n  private _error: string[];\n\n  /** Id for element which describes the input (this will be overwritten if description prop or slot is used) */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = \"\";\n\n  /** Change event */\n  @Event() stzhChange: EventEmitter<StzhCheckboxChangeEvent>;\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhCheckboxFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhCheckboxBlurEvent>;\n\n  @Listen(\"reset\", { target: \"document\" })\n  resetListener(event: Event) {\n    if ((event.target as HTMLElement).contains(this.element)) {\n      requestAnimationFrame(() => {\n        this.handleReset();\n      });\n    }\n  }\n\n  @Watch(\"error\")\n  errorWatcher(newValue: string | string[]) {\n    if (typeof newValue === \"string\") {\n      try {\n        this._error = JSON.parse(newValue);\n      } catch (e) {\n        if (newValue) {\n          this._error = [newValue];\n        } else {\n          this._error = [];\n        }\n      }\n    } else if (newValue) {\n      this._error = newValue;\n    } else {\n      this._error = [];\n    }\n  }\n\n  @Element() element: HTMLStzhRadioElement;\n\n  private input: HTMLInputElement;\n  private inputId: string;\n  private focusedByInput: boolean = false;\n\n  private handleReset = async () => {\n    this.checked = this.defaultChecked;\n  }\n\n  private onInput = (event: InputEvent) => {\n    this.checked = this.input.checked;\n    this.stzhChange.emit({\n      component: \"stzh-checkbox\",\n      originalEvent: event,\n      value: this.value,\n      checked: this.checked\n    });\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.input.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    const focusEvent = new FocusEvent('focus', {\n      view: window,\n      bubbles: false,\n      cancelable: false\n    });\n\n    this.element.dispatchEvent(focusEvent);\n    this.stzhFocus.emit({\n      component: \"stzh-checkbox\",\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-checkbox\",\n      originalEvent: event\n    });\n  }\n\n  async componentWillLoad() {\n    this.inputId = `stzh-checkbox-${checkboxCounter++}`;\n    this.errorWatcher(this.error);\n\n    this.defaultChecked = typeof this.defaultChecked === \"boolean\" ? this.defaultChecked : this.checked;\n\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, 'checkbox');\n    }\n  }\n\n  render() {\n    const descriptionUsed = hasSlot(this.element, 'description') || !!this.description;\n    const descriptionLongUsed = hasSlot(this.element, 'description-long') || !!this.descriptionLong;\n    const errorUsed = hasSlot(this.element, 'error') || this._error?.length > 0;\n\n    const classes = {\n      \"stzh-checkbox\": true,\n      \"stzh-checkbox--has-description\": descriptionUsed,\n      \"stzh-checkbox--has-description-long\": descriptionLongUsed,\n      \"stzh-checkbox--has-error\": errorUsed,\n      \"stzh-checkbox--is-required\": this.required,\n      \"stzh-checkbox--is-invalid\": this.invalid || errorUsed,\n      \"stzh-checkbox--is-disabled\": this.disabled\n    };\n\n    return (\n      <Host is-invalid={this.invalid || errorUsed} tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <label class=\"stzh-checkbox__field-wrapper\">\n            <input\n              class=\"stzh-checkbox__input\"\n              ref={(el) => (this.input = el as HTMLInputElement)}\n              type=\"checkbox\"\n              id={this.inputId}\n              name={this.name}\n              value={this.value}\n              disabled={this.disabled}\n              aria-describedby={`${this.inputId}-description ${this.a11yDescribedby}`}\n              aria-required={this.required ? \"true\" : \"false\"}\n              aria-invalid={this.invalid ? \"true\" : \"false\"}\n              checked={this.checked}\n              defaultChecked={this.defaultChecked}\n              onInput={this.onInput}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n            />\n            <div class=\"stzh-checkbox__mark\">\n              <div class=\"stzh-checkbox__check\" innerHTML={Check} />\n            </div>\n            <div class=\"stzh-checkbox__label\">\n              {this.label ? this.label : <slot></slot>}\n              {!this.hideOptional &&\n                <span class=\"stzh-checkbox__marker\">\n                  <span class=\"stzh-checkbox__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-checkbox__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          {(this._error?.length > 0 || this.description || this.descriptionLong) && (\n            <StzhInputDescription\n              classPrefix=\"stzh-checkbox\"\n              id={`${this.inputId}-description`}\n              error={this._error}\n              description={this.description}\n              descriptionLong={this.descriptionLong}\n              descriptionLongTitle={this.descriptionLongTitle}\n              descriptionLongUsed={descriptionLongUsed}\n              moreInfoButtonLabel={this.localization.$globals.moreInfoButtonLabel}\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-62e6cd61.js → p-e4286f09.js}

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-96cf9087.js';
 import { m as media, a as addMediaChangeListener, r as removeMediaChangeListener } from './p-10e2901a.js';
 import { d as defineCustomElement$7 } from './p-011c5d9b.js';
-import { d as defineCustomElement$6 } from './p-4d000b5b.js';
-import { d as defineCustomElement$5 } from './p-96416f66.js';
+import { d as defineCustomElement$6 } from './p-431f7754.js';
+import { d as defineCustomElement$5 } from './p-5d183ab0.js';
 import { d as defineCustomElement$4 } from './p-6e55dee9.js';
 import { d as defineCustomElement$3 } from './p-3f2734b4.js';
 import { d as defineCustomElement$2 } from './p-8b576ec4.js';
-import { d as defineCustomElement$1 } from './p-d2347259.js';
+import { d as defineCustomElement$1 } from './p-bf5da52e.js';
 
 const stzhDatalistCss = ".sc-stzh-datalist-h{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-h,[stzh-hidden].sc-stzh-datalist-h{display:none}.sc-stzh-datalist-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-datalist-h *.sc-stzh-datalist,.sc-stzh-datalist-h *.sc-stzh-datalist::before,.sc-stzh-datalist-h *.sc-stzh-datalist::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}.sc-stzh-datalist-h .has-focus.sc-stzh-datalist{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist{outline-style:none !important}.sc-stzh-datalist-h .stzh-fylingfocus-focused.sc-stzh-datalist::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-h{--columns:1;--columns-gap:var(--stzh-grid-gutter);--list-display:grid;--list-margin-right:calc(var(--columns-gap) / -1);--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));--full-grid-column:1 / 5;--nested-margin-left:var(--stzh-datalist-nested-margin-left, 0px);--details-content-width:var(--stzh-datalist-details-content-width, 100%);--grid-template-areas:var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n  );--grid-template-columns:var(\n      --stzh-datalist-grid-template-columns,\n      repeat(4, minmax(0, 1fr))\n  );margin-left:var(--nested-margin-left)}@media screen and (min-width: 600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-small);--grid-template-areas:var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list\"\n    )}}@media screen and (min-width: 900px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-medium);--grid-template-areas:var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list list list list list\"\n    );--grid-template-columns:var(\n        --stzh-datalist-grid-template-columns,\n        repeat(8, minmax(0, 1fr))\n    )}}@media screen and (min-width: 1260px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.sc-stzh-datalist-h{--columns-gap:var(--stzh-grid-gutter-ultra)}}.sc-stzh-datalist-h .sc-stzh-datalist-s>.layout_column>*:not([class*=cq-]),.sc-stzh-datalist-h .sc-stzh-datalist-s>*:not([class*=cq-]){display:contents}[is-direction=horizontal].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 6}[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[is-direction=horizontal].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}[variant=table].sc-stzh-datalist-h{--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));--full-grid-column:1 / 7}[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([meta=\"\"]))),[variant=table].sc-stzh-datalist-h:where(:has(stzh-datalist-item:not([status-label=\"\"]))){--list-grid-template-columns:repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap))}.sc-stzh-datalist-h:has([class*=cq-]){--stzh-datalist-item-wrapper-display:flex;--list-display:block;--list-margin-right:0}.stzh-datalist.sc-stzh-datalist{--stzh-datalist-nested-margin-left:var(--stzh-space-large);--stzh-details-content-grid-column:var(--full-grid-column);--stzh-details-content-padding-right:var(--columns-gap);--stzh-details-content-width:var(--details-content-width);column-gap:var(--stzh-grid-gutter);display:grid;grid-template-areas:var(--grid-template-areas);grid-template-columns:var(--grid-template-columns)}@media screen and (min-width: 600px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-small)}}@media screen and (min-width: 900px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-medium)}}@media screen and (min-width: 1260px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-large)}}@media screen and (min-width: 1600px){.stzh-datalist.sc-stzh-datalist{column-gap:var(--stzh-grid-gutter-ultra)}}.stzh-datalist__wrapper.sc-stzh-datalist{grid-area:list;overflow:visible}.stzh-datalist__list.sc-stzh-datalist{display:var(--list-display);border-collapse:collapse;grid-template-columns:var(--list-grid-template-columns);align-items:stretch;margin-right:var(--list-margin-right)}.stzh-datalist--has-multiple-columns.sc-stzh-datalist{--stzh-datalist-item-nested-display:none}@media screen and (max-width: 599px){.stzh-datalist--table.stzh-datalist--big-label.sc-stzh-datalist .stzh-datalist__list.sc-stzh-datalist{--list-display:flex;flex-direction:column;gap:var(--stzh-space-xxxsmall)}}";
 
@@ -238,4 +238,4 @@ function defineCustomElement() {
 
 export { StzhDatalist as S, defineCustomElement as d };
 
-//# sourceMappingURL=p-62e6cd61.js.map
+//# sourceMappingURL=p-e4286f09.js.map

package/dist/components/{p-62e6cd61.js.map → p-e4286f09.js.map}

@@ -1 +1 @@
-{"file":"p-62e6cd61.js","mappings":"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","names":[],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\n  --columns: 1;\n  --columns-gap: #{$gridGutter};\n  --list-display: grid;\n  --list-margin-right: calc(var(--columns-gap) / -1);\n  --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n  --full-grid-column: 1 / 5;\n  --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n  --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n  --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n  );\n\n  --grid-template-columns: var(\n      --stzh-datalist-grid-template-columns,\n      #{$gridColumns}\n  );\n\n  margin-left: var(--nested-margin-left);\n\n  @include mq($from: small) {\n    --columns-gap: #{$gridGutterSmall};\n\n    --grid-template-areas: var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --columns-gap: #{$gridGutterMedium};\n\n    --grid-template-areas: var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list list list list list\"\n    );\n\n    --grid-template-columns: var(\n        --stzh-datalist-grid-template-columns,\n        #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --columns-gap: #{$gridGutterLarge};\n  }\n\n  @include mq($from: ultra) {\n    --columns-gap: #{$gridGutterUltra};\n  }\n  // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n  // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n  ::slotted(.layout_column) > *:not([class*=\"cq-\"]),\n  ::slotted(*:not([class*=\"cq-\"])) {\n    display: contents;\n  }\n\n  &[is-direction=\"horizontal\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 6;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n\n  &[variant=\"table\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 7;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks */\n\n:host(:has([class*=\"cq-\"])) {\n  --stzh-datalist-item-wrapper-display: flex;\n\n  --list-display: block;\n  --list-margin-right: 0;\n}\n\n.stzh-datalist {\n  // offset margin of nested datalist\n  --stzh-datalist-nested-margin-left: #{space('large')};\n  // details grid columns\n  --stzh-details-content-grid-column: var(--full-grid-column);\n  --stzh-details-content-padding-right: var(--columns-gap);\n  --stzh-details-content-width: var(--details-content-width);\n\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: list;\n    overflow: visible;\n  }\n\n  &__list {\n    display: var(--list-display);\n    border-collapse: collapse;\n    grid-template-columns: var(--list-grid-template-columns);\n    align-items: stretch;\n    margin-right: var(--list-margin-right);\n  }\n\n  /* Multiple Columns */\n\n  &--has-multiple-columns {\n    // display of nested datalist\n    --stzh-datalist-item-nested-display: none;\n  }\n\n  /* Table variant with big label */\n\n  &--table#{&}--big-label &__list {\n    @include mq($to: small) {\n      --list-display: flex;\n      flex-direction: column;\n      gap: space('xxxsmall');\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemEntry,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n} from \"../../index\";\n\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true,\n})\nexport class StzhDatalist {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n\n  /** With big label */\n  @Prop({ reflect: true }) bigLabel: boolean = false;\n\n  /** Columns */\n  @Prop({ reflect: true }) columns: number = 1;\n\n  /** Columns above small breakpoint */\n  @Prop({ reflect: true }) columnsSmall: number;\n\n  /** Columns above medium breakpoint  */\n  @Prop({ reflect: true }) columnsMedium: number;\n\n  /** Columns above large breakpoint  */\n  @Prop({ reflect: true }) columnsLarge: number;\n\n  /** Columns above ultra breakpoint  */\n  @Prop({ reflect: true }) columnsUltra: number;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\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  /**\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  /** Variant attribute change event */\n  @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n  /** Big label attribute change event */\n  @Event() stzhBigLabelChange: EventEmitter<StzhDatalistBigLabelChangeEvent>;\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.setCurrentDirection();\n  }\n\n  @Watch(\"columns\")\n  @Watch(\"columnsSmall\")\n  @Watch(\"columnsMedium\")\n  @Watch(\"columnsLarge\")\n  @Watch(\"columnsUltra\")\n  columnsWatcher() {\n    this.setCurrentColumns();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: StzhDatalistDirection) {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhDatalistVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"bigLabel\")\n  bigLabelWatcher(newValue: boolean) {\n    this.stzhBigLabelChange.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  /** Get current direction */\n  @Method()\n  async getCurrentDirection() {\n    return this.currentDirection;\n  }\n\n  @State() currentColumns: number = 1;\n  @State() currentDirection: StzhDatalistDirection;\n\n  private setCurrentDirection = () => {\n    if (media(\"ultra\").matches && this.directionUltra) {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge) {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium) {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall) {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  };\n\n  private setCurrentColumns = () => {\n    if (media(\"ultra\").matches && this.columnsUltra) {\n      this.currentColumns = this.columnsUltra;\n    } else if (media(\"large\").matches && this.columnsLarge) {\n      this.currentColumns = this.columnsLarge;\n    } else if (media(\"medium\").matches && this.columnsMedium) {\n      this.currentColumns = this.columnsMedium;\n    } else if (media(\"small\").matches && this.columnsSmall) {\n      this.currentColumns = this.columnsSmall;\n    } else {\n      this.currentColumns = this.columns;\n    }\n  };\n\n  resizeHandler = () => {\n    this.setCurrentDirection();\n    this.setCurrentColumns();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.bigLabelWatcher(this.bigLabel);\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-multiple-columns\": this.currentColumns > 1,\n      \"stzh-datalist--big-label\": this.bigLabel,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n      [`stzh-datalist--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host\n        is-direction={this.currentDirection}\n        style={{\n          \"--columns\": this.currentColumns ? this.currentColumns.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-datalist__wrapper\">\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 && <stzh-datalist items={item.items}></stzh-datalist>}\n                </stzh-datalist-item>\n              ))}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"p-e4286f09.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,opKAAopK;;MCqB/pK,YAAY;;;;;;;IAsDf,WAAM,GAA4B,EAAE,CAAC;IAyErC,wBAAmB,GAAG;MAC5B,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,EAAE;QACjD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC;OAC7C;WAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,EAAE;QACxD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC;OAC7C;WAAM,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe,EAAE;QAC1D,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,eAAe,CAAC;OAC9C;WAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,EAAE;QACxD,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC;OAC7C;WAAM;QACL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,CAAC;OACxC;KACF,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,EAAE;QAC/C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC;OACzC;WAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,EAAE;QACtD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC;OACzC;WAAM,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,EAAE;QACxD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC;OAC1C;WAAM,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,EAAE;QACtD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,CAAC;OACzC;WAAM;QACL,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC;OACpC;KACF,CAAC;IAEF,kBAAa,GAAG;MACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;MAC3B,IAAI,CAAC,iBAAiB,EAAE,CAAC;KAC1B,CAAC;mBA5JsD,SAAS;oBAGpB,KAAK;mBAGP,CAAC;;;;;qBAegB,UAAU;;;;;iBA8BpB,EAAE;0BAuElB,CAAC;;;EApDnC,gBAAgB;IACd,IAAI,CAAC,mBAAmB,EAAE,CAAC;GAC5B;EAOD,cAAc;IACZ,IAAI,CAAC,iBAAiB,EAAE,CAAC;GAC1B;EAGD,uBAAuB,CAAC,QAA+B;IACrD,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC;MAC5B,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,QAAQ;KAChB,CAAC,CAAC;GACJ;EAGD,cAAc,CAAC,QAA6B;IAC1C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;MAC1B,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,QAAQ;KAChB,CAAC,CAAC;GACJ;EAGD,eAAe,CAAC,QAAiB;IAC/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC;MAC3B,SAAS,EAAE,eAAe;MAC1B,KAAK,EAAE,QAAQ;KAChB,CAAC,CAAC;GACJ;EAGD,YAAY,CAAC,QAAwB;IACnC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;KACpC;SAAM;MACL,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;KACxB;GACF;;EAID,MAAM,mBAAmB;IACvB,OAAO,IAAI,CAAC,gBAAgB,CAAC;GAC9B;EAsCD,MAAM,iBAAiB;IACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC9B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACpC,IAAI,CAAC,aAAa,EAAE,CAAC;GACtB;EAED,iBAAiB;IACf,sBAAsB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC5C;EAED,oBAAoB;IAClB,yBAAyB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;GAC/C;EAED,MAAM;IACJ,MAAM,OAAO,GAAG;MACd,eAAe,EAAE,IAAI;MACrB,qCAAqC,EAAE,IAAI,CAAC,cAAc,GAAG,CAAC;MAC9D,0BAA0B,EAAE,IAAI,CAAC,QAAQ;MACzC,CAAC,4BAA4B,IAAI,CAAC,gBAAgB,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,gBAAgB;MAC9E,CAAC,kBAAkB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;KACnD,CAAC;IAEF,QACE,EAAC,IAAI,oBACW,IAAI,CAAC,gBAAgB,EACnC,KAAK,EAAE;QACL,WAAW,EAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,GAAG,IAAI;OACzE,IAED,WAAK,KAAK,EAAE,OAAO,IACjB,WAAK,KAAK,EAAC,wBAAwB,IACjC,WAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,MAAM,IACzC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,KACnB,0CAAwB,IAAI,GACzB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,IAAI,qBAAe,KAAK,EAAE,IAAI,CAAC,KAAK,GAAkB,CACvE,CACtB,CAAC,EACF,eAAa,CACT,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx"],"sourcesContent":[":host {\n  --columns: 1;\n  --columns-gap: #{$gridGutter};\n  --list-display: grid;\n  --list-margin-right: calc(var(--columns-gap) / -1);\n  --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto var(--columns-gap));\n  --full-grid-column: 1 / 5;\n  --nested-margin-left: var(--stzh-datalist-nested-margin-left, 0px);\n  --details-content-width: var(--stzh-datalist-details-content-width, 100%);\n\n  --grid-template-areas: var(\n      --stzh-datalist-grid-template-areas,\n      \"list list list list\"\n  );\n\n  --grid-template-columns: var(\n      --stzh-datalist-grid-template-columns,\n      #{$gridColumns}\n  );\n\n  margin-left: var(--nested-margin-left);\n\n  @include mq($from: small) {\n    --columns-gap: #{$gridGutterSmall};\n\n    --grid-template-areas: var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list\"\n    );\n  }\n\n  @include mq($from: medium) {\n    --columns-gap: #{$gridGutterMedium};\n\n    --grid-template-areas: var(\n        --stzh-datalist-grid-template-areas,\n        \"list list list list list list list list\"\n    );\n\n    --grid-template-columns: var(\n        --stzh-datalist-grid-template-columns,\n        #{$gridColumnsMedium}\n    );\n  }\n\n  @include mq($from: large) {\n    --columns-gap: #{$gridGutterLarge};\n  }\n\n  @include mq($from: ultra) {\n    --columns-gap: #{$gridGutterUltra};\n  }\n  // datalist-item or wrapper elements should be set to display: contents to make grid layout work.\n  // in AEM edit mode: we prevent setting it, so the links can still be edited.\n\n  ::slotted(.layout_column) > *:not([class*=\"cq-\"]),\n  ::slotted(*:not([class*=\"cq-\"])) {\n    display: contents;\n  }\n\n  &[is-direction=\"horizontal\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 6;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n\n  &[variant=\"table\"] {\n    --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) auto auto var(--columns-gap));\n    --full-grid-column: 1 / 7;\n\n    &:where(:has(stzh-datalist-item:not([meta=\"\"]))),\n    &:where(:has(stzh-datalist-item:not([status-label=\"\"]))) {\n      --list-grid-template-columns: repeat(var(--columns), auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto var(--columns-gap));\n    }\n  }\n}\n\n/* AEM edit mode: we set list as block element (always as one column), to prevent layout breaks */\n\n:host(:has([class*=\"cq-\"])) {\n  --stzh-datalist-item-wrapper-display: flex;\n\n  --list-display: block;\n  --list-margin-right: 0;\n}\n\n.stzh-datalist {\n  // offset margin of nested datalist\n  --stzh-datalist-nested-margin-left: #{space('large')};\n  // details grid columns\n  --stzh-details-content-grid-column: var(--full-grid-column);\n  --stzh-details-content-padding-right: var(--columns-gap);\n  --stzh-details-content-width: var(--details-content-width);\n\n  @include gridGutter;\n  display: grid;\n  grid-template-areas: var(--grid-template-areas);\n  grid-template-columns: var(--grid-template-columns);\n\n  &__wrapper {\n    grid-area: list;\n    overflow: visible;\n  }\n\n  &__list {\n    display: var(--list-display);\n    border-collapse: collapse;\n    grid-template-columns: var(--list-grid-template-columns);\n    align-items: stretch;\n    margin-right: var(--list-margin-right);\n  }\n\n  /* Multiple Columns */\n\n  &--has-multiple-columns {\n    // display of nested datalist\n    --stzh-datalist-item-nested-display: none;\n  }\n\n  /* Table variant with big label */\n\n  &--table#{&}--big-label &__list {\n    @include mq($to: small) {\n      --list-display: flex;\n      flex-direction: column;\n      gap: space('xxxsmall');\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\";\n\nimport {\n  StzhDatalistBigLabelChangeEvent,\n  StzhDatalistDirection,\n  StzhDatalistDirectionChangeEvent,\n  StzhDatalistItemEntry,\n  StzhDatalistVariant,\n  StzhDatalistVariantChangeEvent,\n} from \"../../index\";\n\nimport { addMediaChangeListener, media, removeMediaChangeListener } from \"../../utils/media-utils\";\n\n/**\n * @slot - Slot for any content\n */\n@Component({\n  tag: \"stzh-datalist\",\n  styleUrl: \"stzh-datalist.scss\",\n  scoped: true,\n})\nexport class StzhDatalist {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhDatalistVariant = \"default\";\n\n  /** With big label */\n  @Prop({ reflect: true }) bigLabel: boolean = false;\n\n  /** Columns */\n  @Prop({ reflect: true }) columns: number = 1;\n\n  /** Columns above small breakpoint */\n  @Prop({ reflect: true }) columnsSmall: number;\n\n  /** Columns above medium breakpoint  */\n  @Prop({ reflect: true }) columnsMedium: number;\n\n  /** Columns above large breakpoint  */\n  @Prop({ reflect: true }) columnsLarge: number;\n\n  /** Columns above ultra breakpoint  */\n  @Prop({ reflect: true }) columnsUltra: number;\n\n  /** Direction */\n  @Prop({ reflect: true }) direction: StzhDatalistDirection = \"vertical\";\n\n  /** Direction above small breakpoint */\n  @Prop({ reflect: true }) directionSmall: StzhDatalistDirection;\n\n  /** Direction above medium breakpoint  */\n  @Prop({ reflect: true }) directionMedium: StzhDatalistDirection;\n\n  /** Direction above large breakpoint  */\n  @Prop({ reflect: true }) directionLarge: StzhDatalistDirection;\n\n  /** Direction above ultra breakpoint  */\n  @Prop({ reflect: true }) directionUltra: StzhDatalistDirection;\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  /**\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  /** Variant attribute change event */\n  @Event() stzhVariantChange: EventEmitter<StzhDatalistVariantChangeEvent>;\n\n  /** Big label attribute change event */\n  @Event() stzhBigLabelChange: EventEmitter<StzhDatalistBigLabelChangeEvent>;\n\n  /** Direction attribute change event */\n  @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n  @Element() element: HTMLStzhDatalistElement;\n\n  @Watch(\"direction\")\n  @Watch(\"directionSmall\")\n  @Watch(\"directionMedium\")\n  @Watch(\"directionLarge\")\n  @Watch(\"directionUltra\")\n  directionWatcher() {\n    this.setCurrentDirection();\n  }\n\n  @Watch(\"columns\")\n  @Watch(\"columnsSmall\")\n  @Watch(\"columnsMedium\")\n  @Watch(\"columnsLarge\")\n  @Watch(\"columnsUltra\")\n  columnsWatcher() {\n    this.setCurrentColumns();\n  }\n\n  @Watch(\"currentDirection\")\n  currentDirectionWatcher(newValue: StzhDatalistDirection) {\n    this.stzhDirectionChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhDatalistVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-datalist\",\n      value: newValue,\n    });\n  }\n\n  @Watch(\"bigLabel\")\n  bigLabelWatcher(newValue: boolean) {\n    this.stzhBigLabelChange.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  /** Get current direction */\n  @Method()\n  async getCurrentDirection() {\n    return this.currentDirection;\n  }\n\n  @State() currentColumns: number = 1;\n  @State() currentDirection: StzhDatalistDirection;\n\n  private setCurrentDirection = () => {\n    if (media(\"ultra\").matches && this.directionUltra) {\n      this.currentDirection = this.directionUltra;\n    } else if (media(\"large\").matches && this.directionLarge) {\n      this.currentDirection = this.directionLarge;\n    } else if (media(\"medium\").matches && this.directionMedium) {\n      this.currentDirection = this.directionMedium;\n    } else if (media(\"small\").matches && this.directionSmall) {\n      this.currentDirection = this.directionSmall;\n    } else {\n      this.currentDirection = this.direction;\n    }\n  };\n\n  private setCurrentColumns = () => {\n    if (media(\"ultra\").matches && this.columnsUltra) {\n      this.currentColumns = this.columnsUltra;\n    } else if (media(\"large\").matches && this.columnsLarge) {\n      this.currentColumns = this.columnsLarge;\n    } else if (media(\"medium\").matches && this.columnsMedium) {\n      this.currentColumns = this.columnsMedium;\n    } else if (media(\"small\").matches && this.columnsSmall) {\n      this.currentColumns = this.columnsSmall;\n    } else {\n      this.currentColumns = this.columns;\n    }\n  };\n\n  resizeHandler = () => {\n    this.setCurrentDirection();\n    this.setCurrentColumns();\n  };\n\n  async componentWillLoad() {\n    this.itemsWatcher(this.items);\n    this.bigLabelWatcher(this.bigLabel);\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-multiple-columns\": this.currentColumns > 1,\n      \"stzh-datalist--big-label\": this.bigLabel,\n      [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection,\n      [`stzh-datalist--${this.variant}`]: !!this.variant,\n    };\n\n    return (\n      <Host\n        is-direction={this.currentDirection}\n        style={{\n          \"--columns\": this.currentColumns ? this.currentColumns.toString() : null,\n        }}\n      >\n        <div class={classes}>\n          <div class=\"stzh-datalist__wrapper\">\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 && <stzh-datalist items={item.items}></stzh-datalist>}\n                </stzh-datalist-item>\n              ))}\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/{p-16940157.js → p-e8e933a4.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h as h$1, d as Host } from './p-96cf9087.js';
 import { h } from './p-dd0d6b20.js';
 import { d as defineCustomElement$6 } from './p-011c5d9b.js';
-import { d as defineCustomElement$5 } from './p-4d000b5b.js';
-import { d as defineCustomElement$4 } from './p-8ed7a61b.js';
+import { d as defineCustomElement$5 } from './p-431f7754.js';
+import { d as defineCustomElement$4 } from './p-158996b9.js';
 import { d as defineCustomElement$3 } from './p-6e55dee9.js';
-import { d as defineCustomElement$2 } from './p-d5ab066a.js';
+import { d as defineCustomElement$2 } from './p-777e6a82.js';
 import { d as defineCustomElement$1 } from './p-8b576ec4.js';
 
 const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
@@ -525,4 +525,4 @@ function defineCustomElement() {
 
 export { StzhCalendar as S, printISODate as a, defineCustomElement as d, parseISODate as p };
 
-//# sourceMappingURL=p-16940157.js.map
+//# sourceMappingURL=p-e8e933a4.js.map