@oiz/stzh-components 3.0.0 → 3.1.0

package/dist/stzh-components/p-3b31f90d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhProgressbarItemCss","StzhProgressbarItem","this","onClick","event","stzhClick","emit","component","originalEvent","index","Array","prototype","indexOf","call","element","parentNode","children","onDottedClick","stzhDottedClick","componentDidRender","requestAnimationFrame","_a","button","setAttribute","analyticsId","text","innerText","render","classes","first","last","passed","current","hide","dotted","icon","disabled","h","class","name","Host","role","ref","el","Fragment","step","label"],"sources":["src/components/stzh-progressbar-item/stzh-progressbar-item.scss?tag=stzh-progressbar-item&encapsulation=scoped","src/components/stzh-progressbar-item/stzh-progressbar-item.tsx"],"sourcesContent":[":host {\n}\n\n:host([hide]) {\n\tdisplay: none;\n}\n\n.stzh-progressbar-item {\n  text-align: center;\n\n  &__button {\n    appearance: none;\n    font-family: inherit;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    border-radius: $formInputBorderRadius;\n  }\n\n  &__button:hover &__number-block,\n  &__button:focus &__number-block {\n    color: $colorPrimaryHover;\n    border-color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n      border-color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorOldPrimary8;\n    }\n  }\n\n  &__button:hover &__label-block,\n  &__button:focus &__label-block {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* what we do here is:\n  add a gray line on the last element, which strikes through all previous ones,\n  add a blue line on the current step which covers all previous elements relative to itself\n  and add a white line on the first element, which gives you the illusion that it stopped. */\n\n  &__number-block {\n    @include font('heavy');\n    @include fontCurve('p1');\n    position: relative;\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: $progressbarItemSize;\n    height: $progressbarItemSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: $progressbarItemSmallUp / 2;\n    text-align: center;\n    box-sizing: border-box;\n    color: $colorOldGrey55;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    @include mq($from: small) {\n      width: $progressbarItemSmallUp;\n      height: $progressbarItemSmallUp;\n      margin-bottom: space('large');\n    }\n\n\t\t// set a line on every element, but hide it by default\n    &::before {\n      display: none;\n      content: '';\n      position: absolute;\n      top: 16px;\n      right: $progressbarItemSize - 1px;\n      width: 100vw;\n      height: 1px;\n      background-color: $baseBorderColor;\n      z-index: -2;\n      overflow: hidden;\n\n      @include mq($from: small) {\n        top: 20px;\n        right: $progressbarItemSmallUp - 1px;\n      }\n    }\n  }\n\n  &__number-block,\n  &__dotted {\n    &::after {\n      content: '';\n      z-index: 0;\n      position: absolute;\n      display: block;\n      width: 100%;\n      height: 100%;\n      top: 0;\n      left: 0;\n      border-radius: $progressbarItemSmallUp / 2;\n      transition: background-color $baseTransitionAnimationSpeed;\n    }\n  }\n\n  &__label-block {\n    display: block;\n    font-size: 14px;\n    line-height: 1.28;\n    color: $colorOldGrey55;\n    padding: space('xxsmall') space('small');\n    letter-spacing: 0.01em;\n    transition: color $baseTransitionAnimationSpeed;\n\n    @include mq($to: small) {\n      @include visuallyhidden;\n    }\n  }\n\n  &__number,\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    z-index: 1;\n  }\n\n  &__icon,\n  &__user-icon,\n  &__dotted-icon {\n    --size: #{iconSize('xsmall')};\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: CanvasText;\n    }\n  }\n\n  &__user-icon {\n    --size: #{iconSize('small')};\n    color: currentColor;\n  }\n\n  &__dotted {\n    z-index: 1;\n    appearance: none;\n    font-family: inherit;\n    position: absolute;\n    top: 3px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    background-color: $colorWhite;\n    border: solid 1px $baseBorderColor;\n    border-radius: 50%;\n    cursor: pointer;\n    transition-property: color, border-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n\n    &:hover,\n    &:focus {\n      border-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        border-color: Highlight;\n      }\n    }\n\n    &:hover::after,\n    &:focus::after {\n      background-color: $colorOldPrimary8;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n\n    @include mq($from: small) {\n      top: 5px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n  }\n\n  &__dotted:hover &__dotted-icon,\n  &__dotted:focus &__dotted-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* First and Last */\n\n  &--first &__number-block,\n  &--last &__number-block {\n    &::before {\n      display: block\n    }\n  }\n\n  /* First */\n\n  &--first {\n    position: relative;\n  }\n\n  &--first &__dotted {\n    left: 50%;\n    transform: translateX(-50%);\n  }\n\n  /* Last */\n\n  &--last &__dotted {\n    // position the dots based on the width divided by the elements minus half of itself\n    right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSize / 2}));\n\n    @include mq($from: small) {\n      right: calc((100% / var(--steps)) - (#{$progressbarItemDottedSizeSmallUp / 2}));\n    }\n  }\n\n  /* Passed */\n\n  &--passed &__label-block {\n\t\t@include font('heavy');\n    color: $colorPrimary;\n  }\n\n  &--passed &__number-block {\n    background-color: $colorWhite;\n    border: solid 1px $colorPrimary;\n\n    @include highContrast() {\n      background-color: Canvas;\n      border-color: CanvasText;\n    }\n  }\n\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    @include highContrast() {\n      border-color: Highlight;\n    }\n  }\n\n  &--passed &__number-block,\n  &--passed &__button:hover &__number-block,\n  &--passed &__button:focus &__number-block {\n    color: transparent;\n\n    @include highContrast() {\n      color: Canvas;\n    }\n  }\n\n  &--passed &__user-icon {\n    color: $colorPrimary;\n  }\n\n  &--passed &__button:hover &__user-icon,\n  &--passed &__button:focus &__user-icon {\n    color: $colorPrimaryHover;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Current */\n\n  &--current &__label-block {\n    @include font('heavy');\n    color: $colorPrimary;\n\n    @include highContrast() {\n      color: SelectedItem;\n    }\n\n    &:hover {\n      text-decoration-line: none;\n    }\n  }\n\n  &--current &__number-block {\n    background-color: $colorPrimary;\n    border: solid 1px $colorPrimary;\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: SelectedItem;\n      border-color: SelectedItem;\n      background-color: Canvas;\n    }\n\n    // make line blue (see desc)\n    &::before {\n      display: block;\n      background-color: $colorPrimary;\n      z-index: -1;\n\n      @include highContrast() {\n        background-color: CanvasText;\n      }\n    }\n  }\n\n  &--current &__button:hover &__number-block,\n  &--current &__button:focus &__number-block {\n    color: $colorWhite;\n\n    @include highContrast() {\n      color: Highlight;\n    }\n\n    &::after {\n      background-color: $colorPrimaryHover;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  &--current &__user-icon {\n    @include highContrast() {\n      color: SelectedItem;\n    }\n  }\n\n  &--current &__button:hover &__icon,\n  &--current &__button:focus &__icon,\n  &--current &__button:hover &__user-icon,\n  &--current &__button:focus &__user-icon {\n    @include highContrast() {\n      color: Highlight;\n    }\n  }\n\n  /* Dotted */\n\n  &--dotted#{&}--first &__number-block {\n    margin-bottom: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--dotted#{&}--first &__button {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  // hide number block behind dotted element\n  &--dotted#{&}--first &__number-block {\n    position: relative;\n    z-index: 0;\n    top: 5px;\n    width: $progressbarItemDottedSize;\n    height: $progressbarItemDottedSize;\n    border: none;\n    background-color: transparent;\n\n    // change dimensions to be still hidden\n    @include mq($from: small) {\n      top: 8px;\n      width: $progressbarItemDottedSizeSmallUp;\n      height: $progressbarItemDottedSizeSmallUp;\n    }\n\n    // realign white line\n    &::before {\n      top: 12px;\n      right: 26px;\n\n      @include mq($from: small) {\n        top: 13px;\n        right: 30px;\n      }\n    }\n  }\n\n  &--dotted#{&}--first &__label-block {\n\t\tdisplay: none;\n  }\n\n  // first child overwrite white line (see desc) */\n  &--first &__number-block {\n    &::before {\n      background-color: $colorWhite;\n      z-index: 1;\n\n      @include highContrast() {\n        background-color: Canvas;\n      }\n    }\n  }\n\n  /* Disabled */\n\n  // &--is-disabled &__number-block {\n  //   background-color: $baseBorderColor;\n  // }\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n\n  &--is-disabled &__button:hover &__number-block,\n  &--is-disabled &__button:focus &__number-block {\n    color: $colorOldGrey55;\n    border-color: $baseBorderColor;\n\n    @include highContrast() {\n      color: GrayText;\n      border-color: GrayText;\n    }\n\n    &::after {\n      display: none;\n    }\n  }\n\n  &--is-disabled &__button:hover &__label-block,\n  &--is-disabled &__button:focus &__label-block {\n    color: $colorOldGrey55;\n\n    @include highContrast() {\n      color: GrayText;\n    }\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Fragment,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\n\nimport {\n  StzhProgressbarItemClickEvent,\n  StzhProgressbarItemDottedClickEvent\n} from '../../index';\n\n/**\n * @slot - Slot for label (or use label prop)\n */\n@Component({\n  tag: \"stzh-progressbar-item\",\n  styleUrl: \"stzh-progressbar-item.scss\",\n  scoped: true\n})\nexport class StzhProgressbarItem {\n  @Prop({ reflect: true }) label: string;\n\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Prop({ reflect: true }) first: boolean = false;\n\n  @Prop({ reflect: true }) last: boolean = false;\n\n  @Prop({ reflect: true }) passed: boolean = false;\n\n  @Prop({ reflect: true }) current: boolean = false;\n\n  @Prop({ reflect: true }) hide: boolean = false;\n\n  @Prop({ reflect: true }) dotted: boolean = false;\n\n  @Prop({ reflect: true }) step: number = 1;\n\n  @Prop({ reflect: true }) icon: string = \"\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `label` prop or default slot.\n   */\n  @Prop() analyticsId: string;\n\n  /** Click event */\n  @Event() stzhClick: EventEmitter<StzhProgressbarItemClickEvent>;\n\n  /** Dotted click event */\n  @Event() stzhDottedClick: EventEmitter<StzhProgressbarItemDottedClickEvent>;\n\n  @Element() element: HTMLStzhProgressbarItemElement;\n\n  private button: HTMLButtonElement;\n  private text: HTMLElement;\n\n  private onClick = (event: MouseEvent) => {\n    this.stzhClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  private onDottedClick = (event: MouseEvent) => {\n    this.stzhDottedClick.emit({\n      component: \"stzh-progressbar-item\",\n      originalEvent: event,\n      index: Array.prototype.indexOf.call(this.element.parentNode.children, this.element),\n    });\n  }\n\n  componentDidRender() {\n    requestAnimationFrame(() => {\n      this.button?.setAttribute(\"s-object-id\", this.analyticsId || this.text.innerText);\n    });\n  }\n\n  render() {\n    const classes = {\n      \"stzh-progressbar-item\": true,\n      \"stzh-progressbar-item--first\": this.first,\n      \"stzh-progressbar-item--last\": this.last,\n      \"stzh-progressbar-item--passed\": this.passed,\n      \"stzh-progressbar-item--current\": this.current,\n      \"stzh-progressbar-item--hide\": this.hide,\n      \"stzh-progressbar-item--dotted\": this.dotted,\n      \"stzh-progressbar-item--has-icon\": !!this.icon,\n      \"stzh-progressbar-item--is-disabled\": this.disabled\n    };\n\n    const dotted = (\n      <button\n        class=\"stzh-progressbar-item__dotted\"\n        onClick={this.onDottedClick}\n      >\n        <stzh-icon class=\"stzh-progressbar-item__dotted-icon\" name=\"more-horizontal\"></stzh-icon>\n      </button>\n    );\n\n    return (\n      <Host role=\"listitem\">\n        <div class={classes}>\n          {this.last && this.dotted && dotted}\n          <button\n            ref={(el) => (this.button = el as HTMLButtonElement)}\n            class=\"stzh-progressbar-item__button\"\n            aria-pressed={this.current ? \"true\" : \"false\"}\n            disabled={(this.dotted && this.first) || this.disabled}\n            onClick={this.onClick}\n          >\n            <span class=\"stzh-progressbar-item__number-block\">\n              {this.icon\n                ?\n                <stzh-icon class=\"stzh-progressbar-item__user-icon\" name={this.icon}></stzh-icon>\n                :\n                <Fragment>\n                  <span class=\"stzh-progressbar-item__number\">{this.step}</span>\n                  {this.passed &&\n                    <stzh-icon class=\"stzh-progressbar-item__icon\" name=\"checkmark\"></stzh-icon>\n                  }\n                </Fragment>\n              }\n            </span>\n            <span\n              ref={(el) => (this.text = el as HTMLElement)}\n              class=\"stzh-progressbar-item__label-block\"\n            >\n              {this.label ? this.label : <slot></slot>}\n            </span>\n          </button>\n          {this.first && this.dotted && dotted}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uEAAA,MAAMA,EAAyB,w1pB,MCwBlBC,EAAmB,M,+GAuCtBC,KAAAC,QAAWC,IACjBF,KAAKG,UAAUC,KAAK,CAClBC,UAAW,wBACXC,cAAeJ,EACfK,MAAOC,MAAMC,UAAUC,QAAQC,KAAKX,KAAKY,QAAQC,WAAWC,SAAUd,KAAKY,UAC3E,EAGIZ,KAAAe,cAAiBb,IACvBF,KAAKgB,gBAAgBZ,KAAK,CACxBC,UAAW,wBACXC,cAAeJ,EACfK,MAAOC,MAAMC,UAAUC,QAAQC,KAAKX,KAAKY,QAAQC,WAAWC,SAAUd,KAAKY,UAC3E,E,mCAjDyC,M,WAEH,M,UAED,M,YAEE,M,aAEC,M,UAEH,M,YAEE,M,UAEH,E,UAEA,G,2BAoCxC,kBAAAK,GACEC,uBAAsB,K,OACpBC,EAAAnB,KAAKoB,UAAM,MAAAD,SAAA,SAAAA,EAAEE,aAAa,cAAerB,KAAKsB,aAAetB,KAAKuB,KAAKC,UAAU,G,CAIrF,MAAAC,GACE,MAAMC,EAAU,CACd,wBAAyB,KACzB,+BAAgC1B,KAAK2B,MACrC,8BAA+B3B,KAAK4B,KACpC,gCAAiC5B,KAAK6B,OACtC,iCAAkC7B,KAAK8B,QACvC,8BAA+B9B,KAAK+B,KACpC,gCAAiC/B,KAAKgC,OACtC,oCAAqChC,KAAKiC,KAC1C,qCAAsCjC,KAAKkC,UAG7C,MAAMF,EACJG,EAAA,UACEC,MAAM,gCACNnC,QAASD,KAAKe,eAEdoB,EAAA,aAAWC,MAAM,qCAAqCC,KAAK,qBAI/D,OACEF,EAACG,EAAI,CAACC,KAAK,YACTJ,EAAA,OAAKC,MAAOV,GACT1B,KAAK4B,MAAQ5B,KAAKgC,QAAUA,EAC7BG,EAAA,UACEK,IAAMC,GAAQzC,KAAKoB,OAASqB,EAC5BL,MAAM,gCAA+B,eACvBpC,KAAK8B,QAAU,OAAS,QACtCI,SAAWlC,KAAKgC,QAAUhC,KAAK2B,OAAU3B,KAAKkC,SAC9CjC,QAASD,KAAKC,SAEdkC,EAAA,QAAMC,MAAM,uCACTpC,KAAKiC,KAEJE,EAAA,aAAWC,MAAM,mCAAmCC,KAAMrC,KAAKiC,OAE/DE,EAACO,EAAQ,KACPP,EAAA,QAAMC,MAAM,iCAAiCpC,KAAK2C,MACjD3C,KAAK6B,QACJM,EAAA,aAAWC,MAAM,8BAA8BC,KAAK,gBAK5DF,EAAA,QACEK,IAAMC,GAAQzC,KAAKuB,KAAOkB,EAC1BL,MAAM,sCAELpC,KAAK4C,MAAQ5C,KAAK4C,MAAQT,EAAA,eAG9BnC,KAAK2B,OAAS3B,KAAKgC,QAAUA,G"}

package/dist/stzh-components/p-54e73927.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,a as o,g as n}from"./p-c7bfac7a.js";import{w as s}from"./p-54bd842e.js";import{s as a,a as r,b as h}from"./p-7e2354d0.js";import{h as c}from"./p-7e304ea3.js";import"./p-9b063923.js";const d=":host{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;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--stzh-section-padding-top:0px;--stzh-section-padding-bottom:0px;--stzh-section-margin-top:0px;--stzh-section-margin-bottom:0px}.stzh-accordion{display:grid;gap:var(--stzh-space-xsmall)}";const l=class{constructor(e){t(this,e);this.stzhVariantChange=i(this,"stzhVariantChange",7);this.variant="default";this.collapsible=true;this.multiselectable=true}variantWatcher(t){this.stzhVariantChange.emit({component:"stzh-accordion",value:t})}openListener(t){const i=t.target;const e=i.closest("stzh-accordion");if(this.multiselectable||t.detail&&t.detail.component!=="stzh-accordion-item"||e!==this.element){return}const o=Array.from(e.querySelectorAll("stzh-accordion-item"));o.forEach((t=>{if(t!==i){t.hide()}}))}async setItemFocus(t,i){const e=t.closest("stzh-accordion");if(e!==this.element){return}const o=Array.from(e.querySelectorAll(":scope > stzh-accordion-item")).filter((t=>!t.disabled));const n=o.indexOf(t);if((i==="prev"||i==="next")&&n===null){i=i==="prev"?"last":"first"}if(i==="prev"&&n===0){i="last"}if(i==="next"&&n===o.length-1){i="first"}if(i==="prev"){o[n-1].focus()}else if(i==="next"){o[n+1].focus()}else if(i==="last"){o[o.length-1].focus()}else if(i==="first"){o[0].focus()}else{t.focus()}}render(){const t={"stzh-accordion":true};return e(o,null,e("div",{class:t},e("slot",null)))}get element(){return n(this)}static get watchers(){return{variant:["variantWatcher"]}}};l.style=d;const z=':host{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;}:host[hidden]{display:none}:host::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::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)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}:host{--trigger-size:1.125rem;--trigger-color:currentColor;--content-background:var(--stzh-accordion-content-background);--icon-size:var(--stzh-icon-size);--button-color:var(--stzh-color-primary70);--button-background-color:var(--stzh-color-secondary30);--hover-button-color:var(--button-color);--hover-button-background-color:var(--stzh-color-secondary40);--hover-trigger-color:var(--trigger-color)}@media print{:host{page-break-inside:avoid;-moz-column-break-inside:avoid;break-inside:avoid}}@media (forced-colors: active), (-ms-high-contrast: active){:host{--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}:host(:where([is-variant="table"])){--trigger-size:var(--stzh-icon-size);--content-background:var(--stzh-color-grey10);--button-background-color:var(--stzh-color-grey20);--trigger-color:var(--stzh-color-black);--hover-button-background-color:var(--stzh-color-grey30)}@media (forced-colors: active), (-ms-high-contrast: active){:host(:where([is-variant="table"])){--trigger-color:CanvasText;--hover-trigger-color:CanvasText}}:host(:where([disabled]:not([disabled="false"]))){--button-color:var(--stzh-color-grey80);--button-background-color:var(--stzh-color-grey20);--trigger-color:var(--stzh-color-grey80);--hover-button-color:var(--button-color);--hover-button-background-color:var(--button-background-color);--hover-trigger-color:var(--trigger-color)}.stzh-accordion-item{}.stzh-accordion-item__heading{position:relative;margin:0}.stzh-accordion-item__button{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);font-family:inherit;width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;align-items:center;min-height:3.75rem;color:var(--button-color);background-color:var(--button-background-color);text-align:left;border:none;transition-property:background-color;transition-duration:var(--stzh-base-transition-animation-speed);cursor:pointer}@media screen and (min-width: 900px){.stzh-accordion-item__button{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}@media screen and (min-width: 600px){.stzh-accordion-item__button{padding-top:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button{padding-top:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button{padding-bottom:var(--stzh-space-xxlarge)}}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button{transition:none}}.stzh-accordion-item__button:hover{color:var(--hover-button-color);background-color:var(--hover-button-background-color)}.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}@media screen and (min-width: 600px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-left:var(--stzh-space-xxlarge)}}@media screen and (min-width: 600px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__button,.stzh-accordion-item__content-inner{padding-right:var(--stzh-space-xxlarge)}}.stzh-accordion-item__button-text{flex-grow:1}.stzh-accordion-item__button-icon.is-default{position:relative;display:block;width:var(--trigger-size);height:var(--trigger-size);margin-left:var(--stzh-space-medium)}.stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button-icon.is-default::after{position:absolute;top:50%;left:50%;content:"";display:block;width:var(--trigger-size);height:0.15625rem;transition-property:transform, background-color;transition-duration:500ms;transform-origin:top left;background-color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button-icon.is-default::after{transition:none}}.stzh-accordion-item__button-icon.is-default::before{transform:rotate(180deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.is-default::after{transform:rotate(90deg) translate(-50%, -50%)}.stzh-accordion-item__button-icon.is-table{--size:var(--trigger-size);transition-property:transform, color;transition-duration:500ms;color:var(--trigger-color)}@media (prefers-reduced-motion: reduce){.stzh-accordion-item__button-icon.is-table{transition:none}}.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-default::after{background-color:var(--hover-trigger-color)}.stzh-accordion-item__button:hover .stzh-accordion-item__button-icon.is-table{color:var(--hover-trigger-color)}.stzh-accordion-item__content{overflow:hidden;background-color:var(--content-background)}@media print{.stzh-accordion-item__content{height:auto !important;overflow:visible !important;display:block !important}}.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xlarge);padding-bottom:var(--stzh-space-xlarge)}@media screen and (min-width: 900px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xxxlarge)}}@media screen and (min-width: 900px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxxlarge)}}.stzh-accordion-item__icon-wrapper{--stzh-icon-size:var(--icon-size);align-self:flex-start}.stzh-accordion-item__badge{position:absolute;right:-0.3125rem;top:-0.3125rem}.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 900px){.stzh-accordion-item__description{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-accordion-item__heading-text,.stzh-accordion-item__description,.stzh-accordion-item__subtitle{display:block}.stzh-accordion-item__subtitle{font-size:var(--stzh-font-curve-p2-default-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-p2-default-text-line-height, var(--stzh-font-micro-text-line-height))}@media screen and (min-width: 900px){.stzh-accordion-item__subtitle{font-size:var(--stzh-font-curve-p2-medium-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p2-medium-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p2-medium-text-letter-spacing)}}.stzh-accordion-item--has-icon .stzh-accordion-item__icon-wrapper{margin-right:var(--stzh-space-xsmall)}.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-family:var(--stzh-font-family-title);font-weight:var(--stzh-font-weight-title);font-style:var(--stzh-font-style-title);font-size:var(--stzh-font-curve-h3-default-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-h3-default-heading-line-height, var(--stzh-font-centi-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-default-heading-letter-spacing)}@media screen and (min-width: 600px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-small-font-size, var(--stzh-font-deci-font-size));line-height:var(--stzh-font-curve-h3-small-heading-line-height, var(--stzh-font-deci-heading-line-height));letter-spacing:var(--stzh-font-curve-h3-small-heading-letter-spacing)}}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-medium-font-size, var(--stzh-font-deca-font-size));line-height:var(--stzh-font-curve-h3-medium-heading-line-height, var(--stzh-font-deca-text-line-height));letter-spacing:var(--stzh-font-curve-h3-medium-heading-letter-spacing, var(--stzh-font-deca-text-letter-spacing))}}@media screen and (min-width: 1600px){.stzh-accordion-item--title .stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__heading-text{font-size:var(--stzh-font-curve-h3-ultra-font-size, var(--stzh-font-hecto-font-size));line-height:var(--stzh-font-curve-h3-ultra-heading-line-height, var(--stzh-font-hecto-text-line-height));letter-spacing:var(--stzh-font-curve-h3-ultra-heading-letter-spacing, var(--stzh-font-hecto-text-letter-spacing))}}.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-xsmall)}@media screen and (min-width: 900px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-accordion-item--title .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text,.stzh-accordion-item--has-subtitle .stzh-accordion-item__subtitle:not(:empty)+.stzh-accordion-item__heading-text{margin-top:var(--stzh-space-medium)}}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::before,.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-default::after{transform:rotate(0) translate(-50%, -50%)}.stzh-accordion-item--is-open .stzh-accordion-item__button-icon.is-table{transform:rotate(180deg)}.stzh-accordion-item--table .stzh-accordion-item__button,.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-left:var(--stzh-space-medium);padding-right:var(--stzh-space-medium)}.stzh-accordion-item__button{font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);padding-top:var(--stzh-space-medium);padding-bottom:var(--stzh-space-medium);min-height:3.5rem}.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-medium)}@media screen and (min-width: 900px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-small)}}@media screen and (min-width: 1260px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-top:var(--stzh-space-medium)}}@media screen and (min-width: 600px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-large)}}@media screen and (min-width: 900px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xlarge)}}@media screen and (min-width: 1260px){.stzh-accordion-item--table .stzh-accordion-item__content-inner{padding-bottom:var(--stzh-space-xxlarge)}}.stzh-accordion-item--table .stzh-accordion-item__heading-text{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy)}.stzh-accordion-item--is-disabled .stzh-accordion-item__button{cursor:not-allowed}';const m={keyframes:[{height:"0",opacity:"0"},{height:"auto",opacity:"1"}],options:{duration:300,easing:"linear"}};const p={keyframes:[{height:"auto",opacity:"1"},{height:"0",opacity:"0"}],options:{duration:300,easing:"linear"}};let g=0;const f=class{constructor(e){t(this,e);this.stzhOpen=i(this,"stzhOpen",7);this.stzhOpened=i(this,"stzhOpened",7);this.stzhClose=i(this,"stzhClose",7);this.stzhClosed=i(this,"stzhClosed",7);this.stzhFocus=i(this,"stzhFocus",7);this.stzhBlur=i(this,"stzhBlur",7);this.toggledByMethod=false;this.focusedByInput=false;this.shiftPressed=false;this.handleVariantChange=t=>{this.variantWatcher(this.variant)};this.handleHeaderClick=()=>{if(typeof this.collapsible!=="undefined"){if(this.collapsible){this.toggle()}else if(!this.open){this.show()}}else if(!this.accordion||this.accordion.collapsible){this.toggle()}else if(!this.open){this.show()}};this.onRootFocus=()=>{if(!this.focusedByInput){this.buttonElement.focus()}this.focusedByInput=false};this.onFocus=t=>{this.focusedByInput=true;if(this.shiftPressed){this.rootTabindex=-1}this.stzhFocus.emit({component:"stzh-accordion-item",originalEvent:t})};this.onBlur=t=>{this.rootTabindex=0;this.stzhBlur.emit({component:"stzh-accordion-item",originalEvent:t})};this.onButtonKeydown=t=>{let i=null;if(t.key==="ArrowDown"){i="next"}else if(t.key==="ArrowUp"){i="prev"}else if(t.key==="Home"){i="first"}else if(t.key==="End"){i="last"}else if(t.key==="PageDown"&&t.ctrlKey){i="next"}else if(t.key==="PageUp"&&t.ctrlKey){i="prev"}if(t.key==="Shift"){this.rootTabindex=-1}if(i){t.preventDefault();this.accordion.setItemFocus(this.element,i)}};this.onContentKeydown=t=>{if(!t.ctrlKey){return}let i=null;if(t.key==="PageDown"){i="next"}else if(t.key==="PageUp"){i="prev"}if(i){t.preventDefault();this.accordion.setItemFocus(this.element,i)}};this.variant=undefined;this.collapsible=undefined;this.open=false;this.disabled=false;this.heading="";this.subtitle="";this.description="";this.icon="";this.badge="";this.badgeEmpty=false;this.badgeType="default";this.headingLevel="3";this.analyticsId=undefined;this.rootTabindex=0;this._variant=undefined}variantWatcher(t){if(typeof t!=="undefined"){this._variant=t}else if(this.accordion){this._variant=this.accordion.variant}}async openWatcher(t){if(!this.bodyElement){return}if(t){if(this.toggledByMethod){this.stzhOpen.emit({component:"stzh-accordion-item"})}await a(this.bodyElement);this.bodyElement.hidden=false;await r(this.bodyElement,h(m.keyframes,{height:this.bodyElement.scrollHeight}),m.options);this.bodyElement.style.height="auto";this.bodyElement.style.overflow="visible";if(this.toggledByMethod){this.stzhOpened.emit({component:"stzh-accordion-item"})}}else{if(this.toggledByMethod){this.stzhClose.emit({component:"stzh-accordion-item"})}await a(this.bodyElement);this.bodyElement.style.overflow="hidden";await r(this.bodyElement,h(p.keyframes,{height:this.bodyElement.scrollHeight}),p.options);this.bodyElement.hidden=true;this.bodyElement.style.height="0px";if(this.toggledByMethod){this.stzhClosed.emit({component:"stzh-accordion-item"})}}this.toggledByMethod=false}async show(){if(this.open||this.disabled){return}this.toggledByMethod=true;this.open=true;return s(this.element,"stzhOpened")}async hide(){if(!this.open||this.disabled){return}this.toggledByMethod=true;this.open=false;return s(this.element,"stzhClosed")}async toggle(){if(this.open){return await this.hide()}else{return await this.show()}}handleKeydown(t){if(t.key==="Shift"){this.shiftPressed=true}}handleKeyup(t){if(t.key==="Shift"){this.shiftPressed=false}}componentWillLoad(){this.accordionItemId=`stzh-accordion-item-${g++}`}componentDidLoad(){this.bodyElement.hidden=!this.open;this.bodyElement.style.height=this.open?"auto":"0px";this.bodyElement.style.overflow=this.open?"visible":"hidden"}async connectedCallback(){this.accordion=this.element.closest("stzh-accordion");if(this.accordion){this.accordion.addEventListener("stzhVariantChange",this.handleVariantChange)}this.variantWatcher(this.variant)}disconnectedCallback(){if(this.accordion){this.accordion.removeEventListener("stzhVariantChange",this.handleVariantChange);this.accordion=null}}render(){const t=c(this.element,"icon")||!!this.icon;const i=`h${this.headingLevel}`;const n={"stzh-accordion-item":true,"stzh-accordion-item--has-icon":t,"stzh-accordion-item--has-description":!!this.description,"stzh-accordion-item--has-subtitle":!!this.subtitle,"stzh-accordion-item--is-open":this.open,"stzh-accordion-item--is-disabled":this.disabled,[`stzh-accordion-item--${this._variant}`]:!!this._variant};return e(o,{tabindex:this.disabled?null:this.rootTabindex,onFocus:this.onRootFocus,"is-variant":this._variant},e("div",{class:n},e(i,{id:`${this.accordionItemId}-header`,class:"stzh-accordion-item__heading",onClick:this.handleHeaderClick},e("button",{ref:t=>this.buttonElement=t,class:"stzh-accordion-item__button","aria-controls":`${this.accordionItemId}-content`,"aria-expanded":`${this.open?"true":"false"}`,disabled:this.disabled,onFocus:this.onFocus,onBlur:this.onBlur,onKeyDown:this.onButtonKeydown,type:"button","s-object-id":this.analyticsId||this.heading},e("span",{class:"stzh-accordion-item__icon-wrapper"},this.icon?e("stzh-icon",{class:"stzh-accordion-item__icon",name:this.icon}):e("slot",{name:"icon"})),e("span",{class:"stzh-accordion-item__button-text"},e("span",{class:"stzh-accordion-item__subtitle"},this.subtitle),e("span",{class:"stzh-accordion-item__heading-text"},this.heading),e("span",{class:"stzh-accordion-item__description"},this.description)),this._variant==="table"?e("stzh-icon",{name:"angle-down",class:"stzh-accordion-item__button-icon is-table"}):e("span",{class:"stzh-accordion-item__button-icon is-default"}),(this.badge||this.badgeEmpty)&&e("stzh-badge",{class:"stzh-accordion-item__badge",label:this.badge,type:this.badgeType}))),e("div",{id:`${this.accordionItemId}-content`,ref:t=>this.bodyElement=t,class:"stzh-accordion-item__content","aria-labelledby":`${this.accordionItemId}-header`,role:"region",onKeyDown:this.onContentKeydown},e("div",{class:"stzh-accordion-item__content-inner"},e("slot",null)))))}get element(){return n(this)}static get watchers(){return{variant:["variantWatcher"],open:["openWatcher"]}}};f.style=z;const u=".sc-stzh-pagination-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-pagination-h{display:none}.sc-stzh-pagination-h::-moz-selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagination-h::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}.sc-stzh-pagination-h *.sc-stzh-pagination,.sc-stzh-pagination-h *.sc-stzh-pagination::before,.sc-stzh-pagination-h *.sc-stzh-pagination::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-pagination-h .has-focus.sc-stzh-pagination{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination{outline-style:none !important}.sc-stzh-pagination-h .stzh-fylingfocus-focused.sc-stzh-pagination::-moz-focus-inner{border:0 !important}.stzh-pagination.sc-stzh-pagination{position:relative;display:flex;align-items:center;gap:var(--stzh-space-medium);padding-left:calc(var(--stzh-form-input-height) + var(--stzh-space-medium))}.stzh-pagination__input.sc-stzh-pagination{--text-align:center;--input-width:var(--stzh-form-input-height);--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;position:absolute;top:0;left:0}.stzh-pagination__total.sc-stzh-pagination{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height);color:var(--stzh-color-grey70)}.stzh-pagination--size-small.sc-stzh-pagination{padding-left:calc(var(--stzh-form-input-small-height) + var(--stzh-space-medium))}.stzh-pagination--size-small.sc-stzh-pagination .stzh-pagination__input.sc-stzh-pagination{--input-width:var(--stzh-form-input-small-height)}";const v=class{constructor(e){t(this,e);this.stzhChange=i(this,"stzhChange",7);this.gotoPage=t=>{const i=this.value;if(t>=1&&t<=this.total){this.value=t}else if(t>this.total){this.value=this.total}else{this.value=1}if(i!==this.value){this.stzhChange.emit({component:"stzh-pagination",page:Number(this.value)})}};this.onRootFocus=()=>{if(this.input){this.input.focus()}};this.onInputChange=t=>{const i=Number(t.detail.value)||1;this.gotoPage(i)};this.total=1;this.name="";this.value=1;this.label="";this.labelHidden=false;this.readonly=false;this.disabled=false;this.description=undefined;this.descriptionLong=undefined;this.error=undefined;this.invalid=false;this.required=false;this.size="default";this.a11yDescribedby="";this.localization=undefined}async prev(){this.gotoPage(this.value-1)}async next(){this.gotoPage(this.value+1)}async componentWillLoad(){if(!this.localization){this.localization=await window.stzhComponents.utils.fetchTranslations(this.element,"pagination")}}render(){var t;const i={"stzh-pagination":true,[`stzh-pagination--size-${this.size}`]:!!this.size};return e(o,{tabindex:this.disabled?null:"-1",onFocus:this.onRootFocus},e("div",{class:i},e("stzh-input",{class:"stzh-pagination__input",type:"number",min:1,max:this.total,label:this.label||this.localization.label,labelHidden:true,ref:t=>this.input=t,onStzhChange:this.onInputChange,value:((t=this.value)===null||t===void 0?void 0:t.toString())||"",required:this.required,disabled:this.disabled,description:this.description,descriptionLong:this.descriptionLong,error:this.error,a11yDescribedby:this.a11yDescribedby,name:this.name,size:this.size,invalid:this.invalid,hideOptional:true,noAutocomplete:true}),e("div",{class:"stzh-pagination__total"},this.localization.totalLabel.replace(/\{total\}/gi,this.total.toString())),e("stzh-buttongroup",null,e("stzh-button",{variant:"tertiary",icon:"angle-left","icon-only":true,size:this.size,a11yDisabled:this.value<=1,a11yDescribedby:this.a11yDescribedby,a11yLabel:`${this.label||this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`,disabled:this.disabled,onClick:()=>this.prev()}),e("stzh-button",{variant:"tertiary",icon:"angle-right","icon-only":true,size:this.size,a11yDisabled:this.value>=this.total,a11yDescribedby:this.a11yDescribedby,a11yLabel:`${this.label||this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`,disabled:this.disabled,onClick:()=>this.next()}))))}get element(){return n(this)}};v.style=u;export{l as stzh_accordion,f as stzh_accordion_item,v as stzh_pagination};
-//# sourceMappingURL=p-54e73927.entry.js.map

package/dist/stzh-components/p-54e73927.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["stzhAccordionCss","StzhAccordion","variantWatcher","newValue","this","stzhVariantChange","emit","component","value","openListener","event","accordionItemOpened","target","accordionOpened","closest","multiselectable","detail","element","items","Array","from","querySelectorAll","forEach","item","hide","setItemFocus","accordionItem","action","accordion","filter","disabled","currentIndex","indexOf","length","focus","render","classes","h","Host","class","stzhAccordionItemCss","ANIMATION_SHOW","keyframes","height","opacity","options","duration","easing","ANIMATION_HIDE","accordionItemCounter","StzhAccordionItem","toggledByMethod","focusedByInput","shiftPressed","handleVariantChange","_event","variant","handleHeaderClick","collapsible","toggle","open","show","onRootFocus","buttonElement","onFocus","rootTabindex","stzhFocus","originalEvent","onBlur","stzhBlur","onButtonKeydown","key","ctrlKey","preventDefault","onContentKeydown","_variant","openWatcher","bodyElement","stzhOpen","stopAnimations","hidden","animateTo","shimKeyframesAutoValues","scrollHeight","style","overflow","stzhOpened","stzhClose","stzhClosed","waitForEvent","handleKeydown","handleKeyup","componentWillLoad","accordionItemId","componentDidLoad","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","hasIcon","hasSlot","icon","Heading","headingLevel","description","subtitle","tabindex","id","onClick","ref","el","onKeyDown","type","analyticsId","heading","name","badge","badgeEmpty","label","badgeType","role","stzhPaginationCss","StzhPagination","gotoPage","newPage","previous","total","stzhChange","page","Number","input","onInputChange","prev","next","localization","window","stzhComponents","utils","fetchTranslations","size","min","max","labelHidden","onStzhChange","_a","toString","required","descriptionLong","error","a11yDescribedby","invalid","hideOptional","noAutocomplete","totalLabel","replace","a11yDisabled","a11yLabel","prevLabel","selectedPageLabel","nextLabel"],"sources":["src/components/stzh-accordion/stzh-accordion.scss?tag=stzh-accordion&encapsulation=shadow","src/components/stzh-accordion/stzh-accordion.tsx","src/components/stzh-accordion-item/stzh-accordion-item.scss?tag=stzh-accordion-item&encapsulation=shadow","src/components/stzh-accordion-item/stzh-accordion-item.tsx","src/components/stzh-pagination/stzh-pagination.scss?tag=stzh-pagination&encapsulation=scoped","src/components/stzh-pagination/stzh-pagination.tsx"],"sourcesContent":[":host {\n  // disable section paddings and margins\n  --stzh-section-padding-top: 0px;\n  --stzh-section-padding-bottom: 0px;\n  --stzh-section-margin-top: 0px;\n  --stzh-section-margin-bottom: 0px;\n}\n\n.stzh-accordion {\n  display: grid;\n  gap: space('xsmall');\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  Listen,\n  Method,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionVariantChangeEvent,\n  StzhAccordionVariant\n} from \"../../index\";\n\n/**\n * @slot - Slot for `stzh-accordion-item` elements\n */\n@Component({\n  tag: \"stzh-accordion\",\n  styleUrl: \"stzh-accordion.scss\",\n  shadow: true\n})\nexport class StzhAccordion {\n  /** Variant */\n  @Prop({ reflect: true }) variant: StzhAccordionVariant = \"default\";\n\n  /** Whether folds are collapsible */\n  @Prop() collapsible: boolean = true;\n\n  /** Whether multiple folds can be opened at once */\n  @Prop() multiselectable: boolean = true;\n\n  @Element() element: HTMLStzhAccordionElement;\n\n  /** Variant change event */\n  @Event() stzhVariantChange: EventEmitter<StzhAccordionVariantChangeEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    this.stzhVariantChange.emit({\n      component: \"stzh-accordion\",\n      value: newValue\n    });\n  }\n\n  @Listen(\"stzhOpen\")\n  openListener(event: CustomEvent<StzhAccordionItemOpenEvent>) {\n    const accordionItemOpened = event.target as HTMLStzhAccordionItemElement;\n    const accordionOpened = accordionItemOpened.closest(\"stzh-accordion\");\n\n    if (\n      this.multiselectable\n      || (event.detail && event.detail.component !== \"stzh-accordion-item\")\n      || accordionOpened !== this.element\n    ) {\n      return;\n    }\n\n    const items: HTMLStzhAccordionItemElement[] = Array.from(accordionOpened.querySelectorAll(\"stzh-accordion-item\"));\n    items.forEach((item) => {\n      if (item !== accordionItemOpened) {\n        item.hide();\n      }\n    });\n  }\n\n  /** Set focus to accordion item */\n  @Method()\n  async setItemFocus(accordionItem: HTMLStzhAccordionItemElement, action: string) {\n    const accordion = accordionItem.closest(\"stzh-accordion\");\n\n    if (accordion !== this.element) {\n      return;\n    }\n\n    const items = (Array.from(accordion.querySelectorAll(\":scope > stzh-accordion-item\")) as  HTMLStzhAccordionItemElement[])\n      .filter((item) => !item.disabled);\n\n    const currentIndex = items.indexOf(accordionItem);\n\n    if ((action === 'prev' || action === 'next') && currentIndex === null) {\n      action = action === 'prev' ? 'last' : 'first'\n    }\n\n    if (action === 'prev' && currentIndex === 0) {\n      action = 'last'\n    }\n\n    if (action === 'next' && currentIndex === items.length - 1) {\n      action = 'first'\n    }\n\n    if (action === 'prev') {\n      items[currentIndex - 1].focus();\n    } else if (action === 'next') {\n      items[currentIndex + 1].focus();\n    } else if (action === 'last') {\n      items[items.length - 1].focus();\n    } else if (action === 'first') {\n      items[0].focus();\n    } else {\n      accordionItem.focus();\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-accordion\": true,\n    };\n\n    return (\n      <Host>\n        <div class={classes}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n","/**\n * @prop --content-background: Content background\n *\n * @prop --stzh-accordion-content-background: **Global**: Content background\n */\n\n:host {\n  --trigger-size: 18px;\n  --trigger-color: currentColor;\n  --content-background: #{$accordionContentBackground};\n  --icon-size: #{iconSize()};\n  --button-color: #{$colorPrimary70};\n  --button-background-color: #{$colorSecondary30};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: #{$colorSecondary40};\n  --hover-trigger-color: var(--trigger-color);\n\n  @media print {\n    page-break-inside: avoid;\n    break-inside: avoid;\n  }\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Table */\n:host(:where([is-variant=\"table\"])) {\n  --trigger-size: #{iconSize()};\n  --content-background: #{$colorGrey10};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorBlack};\n\n  --hover-button-background-color: #{$colorGrey30};\n\n  @include highContrast() {\n    --trigger-color: CanvasText;\n\n    --hover-trigger-color: CanvasText;\n  }\n}\n\n/* Disabled */\n\n:host(:where([disabled]:not([disabled=\"false\"]))) {\n  --button-color: #{$colorGrey80};\n  --button-background-color: #{$colorGrey20};\n  --trigger-color: #{$colorGrey80};\n\n  --hover-button-color: var(--button-color);\n  --hover-button-background-color: var(--button-background-color);\n  --hover-trigger-color: var(--trigger-color);\n}\n\n.stzh-accordion-item {\n  &__heading {\n    position: relative;\n    margin: 0;\n  }\n\n  &__button {\n    @include fontCurve('p1');\n    @include spaceCurve('padding-top', 'regular');\n    @include spaceCurve('padding-bottom', 'regular');\n    font-family: inherit;\n    width: 100%;\n    appearance: none;\n    display: flex;\n    align-items: center;\n    min-height: 60px;\n    color: var(--button-color);\n    background-color: var(--button-background-color);\n    text-align: left;\n    border: none;\n    transition-property: background-color;\n    transition-duration: $baseTransitionAnimationSpeed;\n    cursor: pointer;\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n\n    &:hover {\n      color: var(--hover-button-color);\n      background-color: var(--hover-button-background-color);\n    }\n  }\n\n  &__button,\n  &__content-inner {\n    @include spaceCurve('padding-left', 'regular');\n    @include spaceCurve('padding-right', 'regular');\n  }\n\n  &__button-text {\n    flex-grow: 1;\n  }\n\n  &__button-icon {\n    &.is-default {\n      position: relative;\n      display: block;\n      width: var(--trigger-size);\n      height: var(--trigger-size);\n      margin-left: space('medium');\n\n      &::before,\n      &::after {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        content: '';\n        display: block;\n        width: var(--trigger-size);\n        height: 2.5px;\n        transition-property: transform, background-color;\n        transition-duration: 500ms;\n        transform-origin: top left;\n        background-color: var(--trigger-color);\n\n        @media (prefers-reduced-motion: reduce) {\n          transition: none;\n        }\n      }\n\n      &::before {\n        transform: rotate(180deg) translate(-50%, -50%);\n      }\n\n      &::after {\n        transform: rotate(90deg) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      --size: var(--trigger-size);\n\n      transition-property: transform, color;\n      transition-duration: 500ms;\n      color: var(--trigger-color);\n\n      @media (prefers-reduced-motion: reduce) {\n        transition: none;\n      }\n    }\n  }\n\n  &__button:hover &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        background-color: var(--hover-trigger-color);\n      }\n    }\n\n    &.is-table {\n      color: var(--hover-trigger-color);\n    }\n  }\n\n  &__content {\n    overflow: hidden;\n    background-color: var(--content-background);\n\n    @media print {\n      height: auto !important;\n      overflow: visible !important;\n      display: block !important;\n    }\n  }\n\n  &__content-inner {\n    @include spaceCurve('padding-top', 'medium');\n    @include spaceCurve('padding-bottom', 'medium');\n  }\n\n  &__icon-wrapper {\n    --stzh-icon-size: var(--icon-size);\n\n    align-self: flex-start;\n  }\n\n  &__badge {\n    position: absolute;\n    right: -5px;\n    top: -5px;\n  }\n\n  &__description {\n    @include fontCurve('caption');\n  }\n\n  &__heading-text,\n  &__description,\n  &__subtitle {\n    display: block;\n  }\n\n  &__subtitle {\n    @include fontCurve('p2');\n  }\n\n  /* Has icon */\n\n  &--has-icon &__icon-wrapper {\n    margin-right: space('xsmall');\n  }\n\n  /* Title Variant / Subtitle */\n\n  &--title &__heading-text,\n  &--has-subtitle &__heading-text {\n    @include font('title');\n    @include fontCurve('h3', 'heading');\n  }\n\n  &--title &__subtitle:not(:empty) + &__heading-text,\n  &--has-subtitle &__subtitle:not(:empty) + &__heading-text {\n    @include spaceCurve('margin-top', 'tiny');\n  }\n\n\n  /* Open */\n\n  &--is-open &__button-icon {\n    &.is-default {\n      &::before,\n      &::after {\n        transform: rotate(0) translate(-50%, -50%);\n      }\n    }\n\n    &.is-table {\n      transform: rotate(180deg);\n    }\n  }\n\n  /* Table Variant */\n\n  &--table &__button,\n  &--table &__content-inner {\n    padding-left: space('medium');\n    padding-right: space('medium');\n  }\n\n  &__button {\n    @include fontSize('milli');\n    padding-top: space('medium');\n    padding-bottom: space('medium');\n    min-height: 56px;\n  }\n\n  &--table &__content-inner {\n    @include spaceCurve('padding-top', 'tiny');\n    @include spaceCurve('padding-bottom', 'regular');\n  }\n\n  &--table &__heading-text {\n    @include font('heavy');\n  }\n\n  /* Disabled */\n\n  &--is-disabled &__button {\n    cursor: not-allowed;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Element,\n  Prop,\n  State,\n  Method,\n  Watch,\n  Event,\n  EventEmitter,\n  Listen,\n} from \"@stencil/core\";\n\nimport {\n  StzhAccordionItemOpenEvent,\n  StzhAccordionItemOpenedEvent,\n  StzhAccordionItemCloseEvent,\n  StzhAccordionItemClosedEvent,\n  StzhAccordionItemFocusEvent,\n  StzhAccordionItemBlurEvent,\n  StzhAccordionVariantChangeEvent,\n  StzhAccordionVariant,\n  StzhBadgeType\n} from \"../../index\";\n\nimport { waitForEvent } from \"../../utils/event-utils\";\nimport { stopAnimations, animateTo, shimKeyframesAutoValues } from \"../../utils/animation-utils\";\nimport { hasSlot } from \"../../utils/utils\";\n\nconst ANIMATION_SHOW = {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nconst ANIMATION_HIDE = {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 300, easing: \"linear\" }\n};\n\nlet accordionItemCounter = 0;\n\n/**\n * @slot - Slot for any content\n * @slot icon - Slot for icon element\n */\n@Component({\n  tag: \"stzh-accordion-item\",\n  styleUrl: \"stzh-accordion-item.scss\",\n  shadow: true\n})\nexport class StzhAccordionItem {\n  /** Variant (overwrites variant from accordion parent) */\n  @Prop() variant: StzhAccordionVariant;\n\n  /** Whether fold is collapsible (overwrites collapsible from accordion parent) */\n  @Prop() collapsible: boolean;\n\n  /** Whether fold is open */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /** Whether fold disabled */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Heading title */\n  @Prop() heading: string = \"\";\n\n  /** Subtitle */\n  @Prop() subtitle: string = \"\";\n\n  /** Description */\n  @Prop() description: string = \"\";\n\n  /** Icon (use instead of icon slot) */\n  @Prop() icon: string = \"\";\n\n  /** Badge */\n  @Prop() badge: string = \"\";\n\n  /** Whether badge should be displayed empty */\n  @Prop({ reflect: true }) badgeEmpty: boolean = false;\n\n  /** Badge type */\n  @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n  /** Heading level, for accessibility, no visual impact */\n  @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n  /**\n   * For Adobe Analytics.\n   * Will be rendered as value of `s-object-id` attribute to the button element.\n   * Default value will be taken from `heading` prop.\n   */\n  @Prop() analyticsId: string;\n\n  @Element() element: HTMLStzhAccordionItemElement;\n\n  /** Open event */\n  @Event() stzhOpen: EventEmitter<StzhAccordionItemOpenEvent>;\n\n  /** Opened event (after animation) */\n  @Event() stzhOpened: EventEmitter<StzhAccordionItemOpenedEvent>;\n\n  /** Close event */\n  @Event() stzhClose: EventEmitter<StzhAccordionItemCloseEvent>;\n\n  /** Closed event (after animation) */\n  @Event() stzhClosed: EventEmitter<StzhAccordionItemClosedEvent>;\n\n  @Watch(\"variant\")\n  variantWatcher(newValue: StzhAccordionVariant) {\n    if (typeof newValue !== \"undefined\") {\n      this._variant = newValue;\n    } else if (this.accordion) {\n      this._variant = this.accordion.variant;\n    }\n  }\n\n  @Watch(\"open\")\n  async openWatcher(newValue: boolean) {\n    if (!this.bodyElement) {\n      return;\n    }\n\n    if (newValue) {\n      if (this.toggledByMethod) {\n        this.stzhOpen.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.hidden = false;\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_SHOW.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_SHOW.options\n      );\n\n      this.bodyElement.style.height = \"auto\";\n      this.bodyElement.style.overflow = \"visible\";\n\n      if (this.toggledByMethod) {\n        this.stzhOpened.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    } else {\n      if (this.toggledByMethod) {\n        this.stzhClose.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n\n      await stopAnimations(this.bodyElement);\n      this.bodyElement.style.overflow = \"hidden\";\n\n      await animateTo(\n        this.bodyElement,\n        shimKeyframesAutoValues(ANIMATION_HIDE.keyframes, {\n          height: this.bodyElement.scrollHeight\n        }),\n        ANIMATION_HIDE.options\n      );\n\n      this.bodyElement.hidden = true;\n      this.bodyElement.style.height = \"0px\";\n\n      if (this.toggledByMethod) {\n        this.stzhClosed.emit({\n          component: \"stzh-accordion-item\"\n        });\n      }\n    }\n\n    this.toggledByMethod = false;\n  }\n\n  /** Show accordion item content */\n  @Method()\n  async show() {\n    if (this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = true;\n    return waitForEvent(this.element, \"stzhOpened\");\n  }\n\n  /** Hide accordion item content */\n  @Method()\n  async hide() {\n    if (!this.open || this.disabled) {\n      return;\n    }\n\n    this.toggledByMethod = true;\n    this.open = false;\n    return waitForEvent(this.element, \"stzhClosed\");\n  }\n\n  /** Toggle accordion item content */\n  @Method()\n  async toggle() {\n    if (this.open) {\n      return await this.hide();\n    } else {\n      return await this.show();\n    }\n  }\n\n  /** Focus event */\n  @Event() stzhFocus: EventEmitter<StzhAccordionItemFocusEvent>;\n\n  /** Input blur event */\n  @Event() stzhBlur: EventEmitter<StzhAccordionItemBlurEvent>;\n\n  @Listen(\"keydown\", { target: \"document\", capture: true })\n  handleKeydown(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = true;\n    }\n  }\n\n  @Listen(\"keyup\", { target: \"document\", capture: true })\n  handleKeyup(event: KeyboardEvent) {\n    if (event.key === \"Shift\") {\n      this.shiftPressed = false;\n    }\n  }\n\n  @State() rootTabindex: number = 0;\n  @State() _variant: StzhAccordionVariant;\n\n  private toggledByMethod: boolean = false;\n  private bodyElement: HTMLDivElement;\n  private buttonElement: HTMLButtonElement;\n  private accordionItemId: string;\n  private accordion: HTMLStzhAccordionElement;\n  private focusedByInput: boolean = false;\n  private shiftPressed: boolean = false;\n\n  private handleVariantChange = (_event: CustomEvent<StzhAccordionVariantChangeEvent>) => {\n    this.variantWatcher(this.variant);\n  }\n\n  private handleHeaderClick = () => {\n    if (typeof this.collapsible !== \"undefined\") {\n      if (this.collapsible) {\n        this.toggle();\n      } else if (!this.open) {\n        this.show();\n      }\n    } else if (!this.accordion || this.accordion.collapsible) {\n      this.toggle();\n    } else if (!this.open) {\n      this.show();\n    }\n  }\n\n  private onRootFocus = () => {\n    if (!this.focusedByInput) {\n      this.buttonElement.focus();\n    }\n\n    this.focusedByInput = false;\n  }\n\n  private onFocus = (event: FocusEvent) => {\n    this.focusedByInput = true;\n\n    if (this.shiftPressed) { // user presses currently shift\n      this.rootTabindex = -1;\n    }\n\n    this.stzhFocus.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event\n    });\n  }\n\n  private onBlur = (event: FocusEvent) => {\n    this.rootTabindex = 0;\n\n    this.stzhBlur.emit({\n      component: \"stzh-accordion-item\",\n      originalEvent: event\n    });\n  }\n\n  private onButtonKeydown = (event: KeyboardEvent) => {\n    let action = null;\n\n    if (event.key === \"ArrowDown\") {\n      action = \"next\";\n    } else if (event.key === \"ArrowUp\") {\n      action = \"prev\";\n    } else if (event.key === \"Home\") {\n      action = \"first\";\n    } else if (event.key === \"End\") {\n      action = \"last\";\n    } else if (event.key === \"PageDown\" && event.ctrlKey) {\n      action = \"next\";\n    } else if (event.key === \"PageUp\" && event.ctrlKey) {\n      action = \"prev\";\n    }\n\n    if (event.key === \"Shift\") {\n      this.rootTabindex = -1;\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  }\n\n  private onContentKeydown = (event: KeyboardEvent) => {\n    if (!event.ctrlKey) {\n      return;\n    }\n\n    let action = null;\n\n    if (event.key === \"PageDown\") {\n      action = \"next\";\n    } else if (event.key === \"PageUp\") {\n      action = \"prev\";\n    }\n\n    if (action) {\n      event.preventDefault();\n      this.accordion.setItemFocus(this.element, action);\n    }\n  }\n\n  componentWillLoad() {\n    this.accordionItemId = `stzh-accordion-item-${accordionItemCounter++}`;\n  }\n\n  componentDidLoad() {\n    this.bodyElement.hidden = !this.open;\n    this.bodyElement.style.height = this.open ? \"auto\" : \"0px\";\n    this.bodyElement.style.overflow = this.open ? \"visible\" : \"hidden\";\n  }\n\n  async connectedCallback() {\n    this.accordion = this.element.closest(\"stzh-accordion\");\n\n    if (this.accordion) {\n      this.accordion.addEventListener(\"stzhVariantChange\", this.handleVariantChange);\n    }\n\n    this.variantWatcher(this.variant);\n  }\n\n  disconnectedCallback() {\n    if (this.accordion) {\n      this.accordion.removeEventListener(\"stzhVariantChange\", this.handleVariantChange);\n      this.accordion = null;\n    }\n  }\n\n  render() {\n    const hasIcon = hasSlot(this.element, \"icon\") || !!this.icon;\n\n    const Heading = `h${this.headingLevel}`;\n    const classes = {\n      \"stzh-accordion-item\": true,\n      \"stzh-accordion-item--has-icon\": hasIcon,\n      \"stzh-accordion-item--has-description\": !!this.description,\n      \"stzh-accordion-item--has-subtitle\": !!this.subtitle,\n      \"stzh-accordion-item--is-open\": this.open,\n      \"stzh-accordion-item--is-disabled\": this.disabled,\n      [`stzh-accordion-item--${this._variant}`]: !!this._variant,\n    };\n\n    return (\n      <Host\n        tabindex={this.disabled ? null : this.rootTabindex}\n        onFocus={this.onRootFocus}\n        is-variant={this._variant}\n      >\n        <div class={classes}>\n          <Heading\n            id={`${this.accordionItemId}-header`}\n            class=\"stzh-accordion-item__heading\"\n            onClick={this.handleHeaderClick}\n          >\n            <button\n              ref={(el) => (this.buttonElement = el as HTMLButtonElement)}\n              class=\"stzh-accordion-item__button\"\n              aria-controls={`${this.accordionItemId}-content`}\n              aria-expanded={`${this.open ? \"true\" : \"false\"}`}\n              disabled={this.disabled}\n              onFocus={this.onFocus}\n              onBlur={this.onBlur}\n              onKeyDown={this.onButtonKeydown}\n              type=\"button\"\n              s-object-id={this.analyticsId || this.heading}\n            >\n              <span class=\"stzh-accordion-item__icon-wrapper\">\n                {this.icon ?\n                  <stzh-icon class=\"stzh-accordion-item__icon\" name={this.icon}></stzh-icon>\n                  :\n                  <slot name=\"icon\"></slot>\n                }\n              </span>\n              <span class=\"stzh-accordion-item__button-text\">\n                <span class=\"stzh-accordion-item__subtitle\">\n                  {this.subtitle}\n                </span>\n                <span class=\"stzh-accordion-item__heading-text\">\n                  {this.heading}\n                </span>\n                <span class=\"stzh-accordion-item__description\">\n                  {this.description}\n                </span>\n              </span>\n              {this._variant === \"table\"\n                ?\n                <stzh-icon name=\"angle-down\" class=\"stzh-accordion-item__button-icon is-table\"></stzh-icon>\n                :\n                <span class=\"stzh-accordion-item__button-icon is-default\"></span>\n              }\n\n              {(this.badge || this.badgeEmpty) &&\n                <stzh-badge\n                  class=\"stzh-accordion-item__badge\"\n                  label={this.badge}\n                  type={this.badgeType}\n                ></stzh-badge>\n              }\n            </button>\n          </Heading>\n          <div\n            id={`${this.accordionItemId}-content`}\n            ref={(el) => (this.bodyElement = el as HTMLDivElement)}\n            class=\"stzh-accordion-item__content\"\n            aria-labelledby={`${this.accordionItemId}-header`}\n            role=\"region\"\n            onKeyDown={this.onContentKeydown}\n          >\n            <div class=\"stzh-accordion-item__content-inner\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n",":host {\n}\n\n.stzh-pagination {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: space('medium');\n  padding-left: calc(#{$formInputHeight} + #{space('medium')});\n\n  &__input {\n    --text-align: center;\n    --input-width: #{$formInputHeight};\n    --padding-top: 0px;\n    --padding-bottom: 0px;\n    --padding-left: 0px;\n    --padding-right: 0px;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  &__total {\n    @include fontSize('nano');\n    color: $colorGrey70;\n  }\n\n  &--size-small {\n    padding-left: calc(#{$formInputHeightSmall} + #{space('medium')});\n  }\n\n  &--size-small &__input {\n    --input-width: #{$formInputHeightSmall};\n  }\n}\n","import {\n  Component,\n  Prop,\n  Host,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Method,\n} from \"@stencil/core\";\n\nimport {\n  StzhInputChangeEvent,\n  StzhPaginationChangeEvent\n} from \"../../index\";\n\nimport { StzhPaginationLocalizedText } from \"./stzh-pagination.localization\";\n\n/**\n */\n@Component({\n  tag: \"stzh-pagination\",\n  styleUrl: \"stzh-pagination.scss\",\n  scoped: true\n})\nexport class StzhPagination {\n  /** Total pages available. */\n  @Prop() total: number = 1;\n\n  /** Name of the hidden date picker input. */\n  @Prop({ reflect: true }) name: string = \"\";\n\n  /** Current page. */\n  @Prop({ mutable: true }) value: number = 1;\n\n  /** Label for dropdown */\n  @Prop() label: string = \"\";\n\n  /** Whether label is 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  /** Size variant */\n  @Prop({ reflect: true }) size: \"default\" | \"small\" = \"default\";\n\n  /** Id of the element which describes the input */\n  @Prop({ attribute: \"a11y-describedby\" }) a11yDescribedby: string = '';\n\n  /**  Translation strings. */\n  @Prop() localization: StzhPaginationLocalizedText;\n\n  /** Pagination change event */\n  @Event() stzhChange: EventEmitter<StzhPaginationChangeEvent>;\n\n  @Element() element: HTMLStzhPaginationElement;\n\n  /** Set current page to previous */\n  @Method()\n  async prev() {\n    this.gotoPage(this.value - 1);\n  }\n\n  /** Set current page to next */\n  @Method()\n  async next() {\n    this.gotoPage(this.value + 1);\n  }\n\n  private input: HTMLStzhInputElement;\n\n  private gotoPage = (newPage: number) => {\n    const previous = this.value;\n\n    if (newPage >= 1 && newPage <= this.total) {\n      this.value = newPage;\n    } else if (newPage > this.total) {\n      this.value = this.total;\n    } else {\n      this.value = 1;\n    }\n\n    if (previous !== this.value) {\n      this.stzhChange.emit({\n        component: \"stzh-pagination\",\n        page: Number(this.value)\n      });\n    }\n  }\n\n  private onRootFocus = () => {\n    if (this.input) {\n      this.input.focus();\n    }\n  }\n\n  private onInputChange = (event: CustomEvent<StzhInputChangeEvent>) => {\n    const newPage = Number(event.detail.value) || 1;\n    this.gotoPage(newPage);\n  }\n\n  async componentWillLoad() {\n    if (!this.localization) {\n      this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"pagination\");\n    }\n  }\n\n  render() {\n    const classes = {\n      \"stzh-pagination\": true,\n      [`stzh-pagination--size-${this.size}`]: !!this.size,\n    };\n\n    return (\n      <Host tabindex={this.disabled ? null : \"-1\"} onFocus={this.onRootFocus}>\n        <div class={classes}>\n          <stzh-input\n            class=\"stzh-pagination__input\"\n            type=\"number\"\n            min={1}\n            max={this.total}\n            label={this.label || this.localization.label}\n            labelHidden={true}\n            ref={(el) => (this.input = el as HTMLStzhInputElement)}\n            onStzhChange={this.onInputChange}\n            value={this.value?.toString() || ''}\n            required={this.required}\n            disabled={this.disabled}\n            description={this.description}\n            descriptionLong={this.descriptionLong}\n            error={this.error}\n            a11yDescribedby={this.a11yDescribedby}\n            name={this.name}\n            size={this.size}\n            invalid={this.invalid}\n            hideOptional={true}\n            noAutocomplete={true}\n          ></stzh-input>\n          <div class=\"stzh-pagination__total\">\n            {this.localization.totalLabel\n              .replace(/\\{total\\}/gi, this.total.toString())}\n          </div>\n          <stzh-buttongroup>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-left\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value <= 1}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.prevLabel}, ${this.localization.selectedPageLabel} ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.prev()}\n            ></stzh-button>\n            <stzh-button\n              variant=\"tertiary\"\n              icon=\"angle-right\"\n              icon-only\n              size={this.size}\n              a11yDisabled={this.value >= this.total}\n              a11yDescribedby={this.a11yDescribedby}\n              a11yLabel={`${this.label || this.localization.label}, ${this.localization.nextLabel}, ${this.localization.selectedPageLabel} ${this.value}`}\n              disabled={this.disabled}\n              onClick={() => this.next()}\n            ></stzh-button>\n          </stzh-buttongroup>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}